@orangesk/orange-design-system 3.10.0 → 3.12.0

package/src/components/Carousel/Carousel.static.ts

@@ -40,6 +40,9 @@ interface ExternalControlsState {
 }
 
 export const defaultConfig: SwiperOptions = {
+  // Keep pointer selection and click handlers available to CMS editors and integrations.
+  touchStartPreventDefault: false,
+  preventClicksPropagation: false,
   navigation: {
     nextEl: SELECTOR_NEXT,
     prevEl: SELECTOR_PREV,
@@ -96,8 +99,8 @@ export const defaultConfig: SwiperOptions = {
 };
 
 export default class Carousel {
-  element: HTMLElement;
-  config: SwiperOptions;
+  element!: HTMLElement;
+  config!: SwiperOptions;
   viewport!: HTMLElement;
   track!: HTMLElement;
   instance!: Swiper;
@@ -106,8 +109,9 @@ export default class Carousel {
   private externalControlsState: ExternalControlsState | null = null;
   private resizeObserver?: ResizeObserver;
   private resizeRafId?: number;
-  private boundWindowResizeHandler: () => void;
+  private boundWindowResizeHandler!: () => void;
   private bleedResizeHandler?: () => void;
+  private destroyed = false;
   private static readonly OVERFLOW_EPSILON_PX = 1;
 
   private getViewportWrapper(): HTMLElement | null {
@@ -141,6 +145,17 @@ export default class Carousel {
       return this.track?.scrollWidth || 0;
     }
 
+    const sizes = this.instance.slidesSizesGrid;
+    const positions = this.instance.slidesGrid;
+    if (sizes?.length && positions?.length === sizes.length) {
+      const last = sizes.length - 1;
+      // Swiper's grid preserves fractional widths and resolved percentage gaps.
+      const edgesWidth = this.instance.params.centeredSlides
+        ? (sizes[0] + sizes[last]) / 2
+        : sizes[last];
+      return positions[last] - positions[0] + edgesWidth;
+    }
+
     const slides = Array.from(this.instance.slides) as HTMLElement[];
     const widthsSum = slides.reduce((sum, slide) => sum + slide.offsetWidth, 0);
     const spaceBetween = Number(this.instance.params?.spaceBetween) || 0;
@@ -155,17 +170,18 @@ export default class Carousel {
     return measuredWidth;
   }
 
-  private getOverflowWidth(viewportWrapper?: HTMLElement): number {
+  private getOverflowWidth(viewportWrapper?: HTMLElement): number | null {
     const isBleedRight = this.isBleedRight();
     const containerWidth = isBleedRight
       ? this.element.clientWidth || viewportWrapper?.clientWidth || 0
       : this.viewport?.clientWidth || 0;
 
     if (containerWidth <= 0) {
-      return 0;
+      return null;
     }
 
     const contentWidth = this.getSlidesContentWidth();
+    if (contentWidth <= 0) return null;
 
     return contentWidth - containerWidth;
   }
@@ -176,7 +192,7 @@ export default class Carousel {
     }
 
     const overflowWidth = this.getOverflowWidth(viewportWrapper);
-    if (overflowWidth !== 0) {
+    if (overflowWidth !== null) {
       return overflowWidth > Carousel.OVERFLOW_EPSILON_PX;
     }
 
@@ -187,6 +203,8 @@ export default class Carousel {
   }
 
   constructor(element: HTMLElement, config?: Partial<SwiperOptions>) {
+    const existing = Carousel.getInstance(element);
+    if (existing) return existing;
     const scrollbarEl = element.querySelector(
       SELECTOR_SCROLLBAR,
     ) as HTMLElement | null;
@@ -227,6 +245,7 @@ export default class Carousel {
   }
 
   init() {
+    if (this.destroyed || this.instance) return;
     this.getElements();
 
     if (this.element.hasAttribute("data-swiper-options")) {
@@ -282,7 +301,7 @@ export default class Carousel {
 
     // Trigger a final update to notify listeners (like SameHeight) that carousel is ready
     requestAnimationFrame(() => {
-      if (this.instance) {
+      if (!this.destroyed && this.instance) {
         this.instance.update();
       }
     });
@@ -319,7 +338,7 @@ export default class Carousel {
    */
   syncScrollbar() {
     requestAnimationFrame(() => {
-      if (this.instance?.scrollbar) {
+      if (!this.destroyed && this.instance?.scrollbar) {
         this.instance.scrollbar.updateSize();
       }
     });
@@ -331,8 +350,12 @@ export default class Carousel {
     }
 
     this.resizeObserver?.disconnect();
+    const firstSlide = this.instance?.slides?.[0] as HTMLElement | undefined;
+    let viewportWidth = this.viewport.clientWidth;
+    let rootWidth = this.element.clientWidth;
+    let slideWidth = firstSlide?.offsetWidth;
     this.resizeObserver = new ResizeObserver(() => {
-      if (!this.instance || !this.viewport) {
+      if (this.destroyed || !this.instance || !this.viewport) {
         return;
       }
 
@@ -340,14 +363,24 @@ export default class Carousel {
         return;
       }
 
-      this.instance.update();
-      this.updateSideArrowGeometry();
+      const widthChanged =
+        viewportWidth !== this.viewport.clientWidth ||
+        rootWidth !== this.element.clientWidth ||
+        slideWidth !== firstSlide?.offsetWidth;
+      if (widthChanged || this.instance.params.autoHeight) {
+        this.instance.update();
+        this.bleedResizeHandler?.();
+        this.instance.scrollbar?.updateSize();
+      }
+      // A height update from SameHeight must not start another Swiper update.
       this.updateCarouselEnabledState();
-      this.instance.scrollbar?.updateSize();
+      viewportWidth = this.viewport.clientWidth;
+      rootWidth = this.element.clientWidth;
+      slideWidth = firstSlide?.offsetWidth;
     });
 
+    this.resizeObserver.observe(this.element);
     this.resizeObserver.observe(this.viewport);
-    const firstSlide = this.instance?.slides?.[0] as HTMLElement | undefined;
     if (firstSlide) {
       this.resizeObserver.observe(firstSlide);
     }
@@ -363,7 +396,13 @@ export default class Carousel {
       const scrollbar = this.instance?.scrollbar;
       const swiper = this.instance;
 
-      if (!viewportWrapper || !scrollbar || !scrollbar.dragEl || !swiper) {
+      if (
+        this.destroyed ||
+        !viewportWrapper ||
+        !scrollbar ||
+        !scrollbar.dragEl ||
+        !swiper
+      ) {
         return;
       }
 
@@ -631,7 +670,7 @@ export default class Carousel {
    */
   adjustConfigForBleedRight() {
     requestAnimationFrame(() => {
-      if (!this.instance) return;
+      if (this.destroyed || !this.instance) return;
 
       const viewportWrapper = this.getViewportWrapper();
       if (!viewportWrapper) return;
@@ -976,6 +1015,8 @@ export default class Carousel {
   }
 
   destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
     // Clean up external controls
     if (this.carouselId) {
       const controlElements = document.querySelectorAll(
@@ -990,6 +1031,13 @@ export default class Carousel {
           );
           delete (htmlControl as any)._carouselClickHandler;
         }
+        if ((htmlControl as any)._carouselKeydownHandler) {
+          htmlControl.removeEventListener(
+            "keydown",
+            (htmlControl as any)._carouselKeydownHandler,
+          );
+          delete (htmlControl as any)._carouselKeydownHandler;
+        }
         htmlControl.removeAttribute("data-carousel-initialized");
       });
     }
@@ -1023,8 +1071,11 @@ export default class Carousel {
   }
 
   update() {
-    if (this.instance) {
+    if (!this.destroyed && this.instance) {
       this.instance.update();
+      this.bleedResizeHandler?.();
+      this.updateCarouselEnabledState();
+      this.updateExternalControlsState();
     }
   }
 

package/src/components/Carousel/styles/mixins.scss

@@ -35,13 +35,6 @@
   min-width: 0;
   width: 100%;
   max-width: 100%;
-  margin-bottom: convert.to-rem(30px);
-
-  .carousel--scrollbar & {
-    @include breakpoint.get("md", "down") {
-      margin-bottom: convert.to-rem(20px);
-    }
-  }
 
   &.is-draggable {
     user-select: none;
@@ -56,6 +49,7 @@
 }
 
 @mixin navigation {
+  margin-top: convert.to-rem(30px);
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
@@ -217,8 +211,15 @@
 }
 
 @mixin scrollbar-base {
+  margin-top: convert.to-rem(30px);
   position: relative;
   overflow: visible;
+
+  .carousel--scrollbar & {
+    @include breakpoint.get("md", "down") {
+      margin-top: convert.to-rem(20px);
+    }
+  }
 }
 
 @mixin scrollbar-horizontal {

package/src/components/Carousel/tests/Carousel.interactions.test.ts

@@ -0,0 +1,102 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import CarouselHero from "../../CarouselHero/CarouselHero.static";
+import CarouselPromotions from "../../CarouselPromotions/CarouselPromotions.static";
+import Carousel from "../Carousel.static";
+
+describe.each([
+  { name: "Carousel", Module: Carousel, prefix: "carousel" },
+  { name: "CarouselHero", Module: CarouselHero, prefix: "carousel-hero" },
+  {
+    name: "CarouselPromotions",
+    Module: CarouselPromotions,
+    prefix: "carousel-promotions",
+  },
+])("$name pointer interactions with real Swiper", ({ Module, prefix }) => {
+  let carousel: Carousel | CarouselHero | CarouselPromotions;
+  let icon: SVGElement;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    document.body.innerHTML = `<div class="${prefix}" data-${prefix}>
+      <div class="${prefix}__viewport-wrapper"><div class="${prefix}__viewport"><div class="${prefix}__track">
+        <div class="${prefix}__slide"><a href="#card"><svg><path d="M0 0h10v10z" /></svg></a></div>
+        <div class="${prefix}__slide">Second</div><div class="${prefix}__slide">Third</div>
+      </div></div></div>
+    </div>`;
+    const element = document.body.firstElementChild as HTMLElement;
+    for (const node of [
+      element,
+      element.querySelector(`.${prefix}__viewport`)!,
+    ]) {
+      Object.defineProperty(node, "clientWidth", { value: 600 });
+      Object.defineProperty(node, "clientHeight", { value: 200 });
+    }
+    carousel = new Module(element, { loop: false, breakpoints: {} });
+    vi.advanceTimersByTime(100);
+    icon = element.querySelector("path")!;
+    expect(carousel.instance.enabled).toBe(true);
+  });
+
+  afterEach(() => {
+    carousel?.destroy();
+    vi.clearAllTimers();
+    vi.useRealTimers();
+    document.body.innerHTML = "";
+  });
+
+  function pointer(type: string, x: number, pointerType = "mouse") {
+    const event = new MouseEvent(type, {
+      bubbles: true,
+      cancelable: true,
+      clientX: x,
+      clientY: 20,
+      button: 0,
+    });
+    Object.assign(event, { pointerId: 1, pointerType });
+    icon.dispatchEvent(event);
+    return event;
+  }
+
+  it.each(["mouse", "touch", "pen"])(
+    "allows SVG icon selection with %s without canceling pointerdown",
+    (pointerType) => {
+      const onPointerDown = vi.fn();
+      carousel.element.addEventListener("pointerdown", onPointerDown);
+      const event = pointer("pointerdown", 400, pointerType);
+      expect(onPointerDown).toHaveBeenCalledOnce();
+      expect(event.defaultPrevented).toBe(false);
+    },
+  );
+
+  it("delivers an ordinary icon click without canceling it", () => {
+    const onClick = vi.fn();
+    carousel.element.addEventListener("click", onClick);
+    pointer("pointerdown", 400);
+    pointer("pointerup", 400);
+    const click = new MouseEvent("click", { bubbles: true, cancelable: true });
+    icon.dispatchEvent(click);
+    expect(onClick).toHaveBeenCalledOnce();
+    expect(click.defaultPrevented).toBe(false);
+  });
+
+  it("keeps swipe navigation and link protection while letting click handlers run", () => {
+    const onIconClick = vi.fn();
+    const onClick = vi.fn();
+    icon.addEventListener("click", onIconClick);
+    carousel.element.addEventListener("click", onClick);
+    // The initial translation is zero; jsdom cannot parse CSS transforms with DOMMatrixReadOnly.
+    carousel.instance.wrapperEl.style.transform = "none";
+    pointer("pointerdown", 400);
+    pointer("pointermove", 350);
+    pointer("pointermove", 100);
+    pointer("pointerup", 100);
+    expect(carousel.instance.activeIndex).toBe(1);
+    expect(carousel.instance.animating).toBe(true);
+
+    const click = new MouseEvent("click", { bubbles: true, cancelable: true });
+    icon.dispatchEvent(click);
+    expect(onIconClick).toHaveBeenCalledOnce();
+    expect(onClick).toHaveBeenCalledOnce();
+    expect(click.defaultPrevented).toBe(true);
+  });
+});

package/src/components/Carousel/tests/Carousel.lifecycle.test.ts

@@ -0,0 +1,223 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import Carousel from "../Carousel.static";
+
+describe("Carousel lifecycle with real Swiper", () => {
+  let element: HTMLElement;
+  let carousel: Carousel;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.stubGlobal("requestAnimationFrame", (callback: FrameRequestCallback) =>
+      setTimeout(() => callback(0), 16),
+    );
+    vi.stubGlobal("cancelAnimationFrame", clearTimeout);
+    document.body.innerHTML = `<div class="carousel" data-carousel-id="lifecycle-carousel">
+      <div class="carousel__viewport-wrapper"><div class="carousel__viewport"><div class="carousel__track">
+        <div class="carousel__slide">First</div><div class="carousel__slide">Second</div><div class="carousel__slide">Third</div>
+      </div></div></div>
+    </div><span data-carousel-controls="lifecycle-carousel" data-carousel-slide-index="1">Second</span>`;
+    element = document.querySelector(".carousel")!;
+    for (const node of [
+      element,
+      element.querySelector(".carousel__viewport")!,
+    ]) {
+      Object.defineProperty(node, "clientWidth", {
+        configurable: true,
+        value: 500,
+      });
+      Object.defineProperty(node, "clientHeight", {
+        configurable: true,
+        value: 200,
+      });
+    }
+  });
+
+  afterEach(() => {
+    carousel?.destroy();
+    vi.clearAllTimers();
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+    document.body.innerHTML = "";
+  });
+
+  it("does not initialize a carousel destroyed before its first frame", () => {
+    carousel = new Carousel(element);
+    carousel.destroy();
+    vi.advanceTimersByTime(100);
+    expect(element.querySelector(".swiper-initialized")).toBeNull();
+    expect(Carousel.getInstance(element)).toBeNull();
+  });
+
+  it("reuses the existing instance instead of initializing a second Swiper", () => {
+    carousel = new Carousel(element);
+    const repeated = new Carousel(element);
+    expect(repeated).toBe(carousel);
+  });
+
+  it("removes keyboard navigation handlers when destroyed", () => {
+    carousel = new Carousel(element);
+    vi.advanceTimersByTime(100);
+    const control = document.querySelector("[data-carousel-controls]")!;
+    carousel.destroy();
+    const event = new KeyboardEvent("keydown", {
+      key: "Enter",
+      cancelable: true,
+    });
+    control.dispatchEvent(event);
+    expect(event.defaultPrevented).toBe(false);
+  });
+
+  it("does not trigger another Swiper update for a height-only resize", () => {
+    const observers: {
+      callback: ResizeObserverCallback;
+      targets: Element[];
+    }[] = [];
+    vi.stubGlobal(
+      "ResizeObserver",
+      class {
+        record: { callback: ResizeObserverCallback; targets: Element[] };
+        constructor(callback: ResizeObserverCallback) {
+          this.record = { callback, targets: [] };
+          observers.push(this.record);
+        }
+        observe(target: Element) {
+          this.record.targets.push(target);
+        }
+        disconnect() {}
+        unobserve() {}
+      },
+    );
+    carousel = new Carousel(element);
+    vi.advanceTimersByTime(100);
+    const firstSlide = element.querySelector(".carousel__slide")!;
+    const observer = observers.find((o) => o.targets.includes(firstSlide))!;
+    const update = vi.spyOn(carousel.instance, "update");
+    const notify = (target: Element, width: number, height: number) =>
+      observer.callback(
+        [
+          {
+            target,
+            contentRect: new DOMRect(0, 0, width, height),
+            borderBoxSize: [],
+            contentBoxSize: [],
+            devicePixelContentBoxSize: [],
+          },
+        ],
+        {} as ResizeObserver,
+      );
+    notify(firstSlide, 413.333, 250);
+    vi.advanceTimersByTime(32);
+    expect(update).not.toHaveBeenCalled();
+    Object.defineProperty(carousel.viewport, "clientWidth", { value: 600 });
+    notify(carousel.viewport, 600, 250);
+    vi.advanceTimersByTime(32);
+    expect(carousel.instance.width).toBe(600);
+  });
+
+  it("keeps an overflowing carousel enabled with percentage spacing", () => {
+    element
+      .querySelectorAll<HTMLElement>(".carousel__slide")
+      .forEach((slide) => {
+        Object.defineProperty(slide, "offsetWidth", {
+          get: () => Math.round(Number.parseFloat(slide.style.width) || 0),
+        });
+      });
+    carousel = new Carousel(element, {
+      slidesPerView: 2.8,
+      spaceBetween: "10%",
+      breakpoints: {},
+    });
+    vi.advanceTimersByTime(100);
+    expect(carousel.instance.virtualSize).toBeGreaterThan(500);
+    expect(carousel.instance.enabled).toBe(true);
+  });
+
+  it("keeps unequal centered slides enabled when their content overflows", () => {
+    const slides = [
+      ...element.querySelectorAll<HTMLElement>(".carousel__slide"),
+    ];
+    slides[2].remove();
+    slides[0].style.cssText =
+      "width:350px;box-sizing:border-box;padding:0;margin:0";
+    slides[1].style.cssText =
+      "width:200px;box-sizing:border-box;padding:0;margin:0";
+    carousel = new Carousel(element, {
+      slidesPerView: "auto",
+      centeredSlides: true,
+      spaceBetween: 20,
+      breakpoints: {},
+    });
+    vi.advanceTimersByTime(100);
+    expect(carousel.instance.virtualSize).toBe(570);
+    expect(carousel.instance.enabled).toBe(true);
+  });
+
+  it("disables auto slides that exactly fill the viewport", () => {
+    const slides = [
+      ...element.querySelectorAll<HTMLElement>(".carousel__slide"),
+    ];
+    slides[2].remove();
+    slides[0].style.cssText =
+      "width:300px;box-sizing:border-box;padding:0;margin:0";
+    slides[1].style.cssText =
+      "width:180px;box-sizing:border-box;padding:0;margin:0";
+    carousel = new Carousel(element, {
+      slidesPerView: "auto",
+      spaceBetween: 20,
+      breakpoints: {},
+    });
+    vi.advanceTimersByTime(100);
+    expect(carousel.instance.virtualSize).toBe(500);
+    expect(carousel.instance.enabled).toBe(false);
+  });
+
+  it.each(["", "carousel--bleed-right", "carousel--bleed-right-no-left"])(
+    "updates navigation and overflow after changing slides with %s",
+    (variant) => {
+      if (variant) element.classList.add(variant);
+      element.classList.add("carousel--side-arrows");
+      element.insertAdjacentHTML(
+        "beforeend",
+        '<div class="carousel__side-arrows"></div>',
+      );
+      document.body.insertAdjacentHTML(
+        "beforeend",
+        '<button data-carousel-controls="lifecycle-carousel" data-carousel-action="next">Next</button>',
+      );
+      carousel = new Carousel(element, {
+        slidesPerView: 3,
+        spaceBetween: 20,
+        breakpoints: {},
+      });
+      vi.advanceTimersByTime(100);
+      const next = document.querySelector<HTMLButtonElement>(
+        '[data-carousel-action="next"]',
+      )!;
+      const arrows = element.querySelector<HTMLElement>(
+        ".carousel__side-arrows",
+      )!;
+      expect(carousel.instance.enabled).toBe(false);
+      carousel.track.insertAdjacentHTML(
+        "beforeend",
+        '<div class="carousel__slide">Fourth</div>',
+      );
+      carousel.update();
+      expect(carousel.instance.enabled).toBe(true);
+      expect(next.disabled).toBe(false);
+      expect(arrows.hidden).toBe(false);
+      if (variant)
+        expect(
+          element.style.getPropertyValue("--carousel-bleed-shell-width"),
+        ).not.toBe("100%");
+      carousel.track.lastElementChild!.remove();
+      carousel.update();
+      expect(carousel.instance.enabled).toBe(false);
+      expect(next.disabled).toBe(true);
+      expect(arrows.hidden).toBe(true);
+      if (variant)
+        expect(
+          element.style.getPropertyValue("--carousel-bleed-shell-width"),
+        ).toBe("100%");
+    },
+  );
+});

package/src/components/CarouselHero/CarouselHero.static.ts

@@ -27,6 +27,9 @@ import {
 } from "./constants";
 
 export const defaultConfig: SwiperOptions = {
+  // Keep pointer selection and click handlers available to CMS editors and integrations.
+  touchStartPreventDefault: false,
+  preventClicksPropagation: false,
   pagination: {
     clickable: true,
     bulletClass: CLASS_PAGINATION_ITEM,

package/src/components/CarouselPromotions/CarouselPromotions.static.ts

@@ -22,6 +22,9 @@ import {
 } from "./constants";
 
 export const defaultConfig: SwiperOptions = {
+  // Keep pointer selection and click handlers available to CMS editors and integrations.
+  touchStartPreventDefault: false,
+  preventClicksPropagation: false,
   pagination: {
     el: SELECTOR_DOTS,
     clickable: true,