@orangesk/orange-design-system 3.12.0 → 3.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "3.12.0",
+  "version": "3.13.0",
   "private": false,
   "engines": {
     "node": ">=20.x"

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

@@ -40,9 +40,6 @@ 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,

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

@@ -3,100 +3,131 @@ 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;
+describe.each(
+  [
+    { name: "Carousel", Module: Carousel, prefix: "carousel" },
+    { name: "CarouselHero", Module: CarouselHero, prefix: "carousel-hero" },
+    {
+      name: "CarouselPromotions",
+      Module: CarouselPromotions,
+      prefix: "carousel-promotions",
+    },
+  ].flatMap((component) =>
+    ["defaults", "data attribute", "constructor"].map((source) => ({
+      ...component,
+      source,
+      editorMode: source !== "defaults",
+    })),
+  ),
+)(
+  "$name pointer interactions with real Swiper ($source)",
+  ({ Module, prefix, source, editorMode }) => {
+    let carousel: Carousel | CarouselHero | CarouselPromotions;
+    let icon: SVGElement;
 
-  beforeEach(() => {
-    vi.useFakeTimers();
-    document.body.innerHTML = `<div class="${prefix}" data-${prefix}>
+    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 = "";
-  });
+      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 });
+      }
+      const editorOptions = {
+        touchStartPreventDefault: false,
+        preventClicksPropagation: false,
+      };
+      if (source === "data attribute") {
+        element.setAttribute(
+          "data-swiper-options",
+          JSON.stringify(editorOptions),
+        );
+      }
+      carousel = new Module(element, {
+        loop: false,
+        breakpoints: {},
+        ...(source === "constructor" ? editorOptions : {}),
+      });
+      vi.advanceTimersByTime(100);
+      icon = element.querySelector("path")!;
+      expect(carousel.instance.enabled).toBe(true);
+    });
 
-  function pointer(type: string, x: number, pointerType = "mouse") {
-    const event = new MouseEvent(type, {
-      bubbles: true,
-      cancelable: true,
-      clientX: x,
-      clientY: 20,
-      button: 0,
+    afterEach(() => {
+      carousel?.destroy();
+      vi.clearAllTimers();
+      vi.useRealTimers();
+      document.body.innerHTML = "";
     });
-    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);
-    },
-  );
+    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"])(
+      "applies the configured pointerdown behavior for %s",
+      (pointerType) => {
+        const onPointerDown = vi.fn();
+        carousel.element.addEventListener("pointerdown", onPointerDown);
+        const event = pointer("pointerdown", 400, pointerType);
+        expect(onPointerDown).toHaveBeenCalledOnce();
+        expect(event.defaultPrevented).toBe(!editorMode);
+      },
+    );
 
-  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("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);
+    it("keeps swipe navigation and link protection with configured click propagation", () => {
+      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);
-  });
-});
+      const click = new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true,
+      });
+      icon.dispatchEvent(click);
+      expect(onIconClick).toHaveBeenCalledTimes(editorMode ? 1 : 0);
+      expect(onClick).toHaveBeenCalledTimes(editorMode ? 1 : 0);
+      expect(click.defaultPrevented).toBe(true);
+    });
+  },
+);

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

@@ -27,9 +27,6 @@ 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,9 +22,6 @@ 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,