@orangesk/orange-design-system 2.0.0-beta.40 → 2.0.0-beta.41

package/package.json

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

package/src/components/AnchorNavigation/AnchorNavigation.static.ts

@@ -16,6 +16,7 @@ export default class AnchorNavigation {
   private scrollEndHandler: () => void;
   private scrollEndFallbackHandler: () => void;
   private resizeHandler: () => void;
+  private mouseDownHandler: (event: MouseEvent) => void;
   private dragStartHandler: (event: MouseEvent) => void;
   private dragMoveHandler: (event: MouseEvent) => void;
   private dragEndHandler: () => void;
@@ -50,6 +51,7 @@ export default class AnchorNavigation {
     this.scrollEndHandler = this.handleScrollEnd.bind(this);
     this.scrollEndFallbackHandler = this.handleScrollEndFallback.bind(this);
     this.resizeHandler = this.handleResize.bind(this);
+    this.mouseDownHandler = this.handleMouseDown.bind(this);
     this.dragStartHandler = this.handleDragStart.bind(this);
     this.dragMoveHandler = this.handleDragMove.bind(this);
     this.dragEndHandler = this.handleDragEnd.bind(this);
@@ -116,6 +118,7 @@ export default class AnchorNavigation {
     this.teardownScrollSpyListeners();
 
     this.element.addEventListener("click", this.anchorClickHandler);
+    this.element.addEventListener("mousedown", this.mouseDownHandler);
     window.addEventListener("scroll", this.scrollSpyHandler, { passive: true });
 
     if (this.supportsScrollEnd) {
@@ -133,6 +136,7 @@ export default class AnchorNavigation {
 
   private teardownScrollSpyListeners(): void {
     this.element.removeEventListener("click", this.anchorClickHandler);
+    this.element.removeEventListener("mousedown", this.mouseDownHandler);
     window.removeEventListener("scroll", this.scrollSpyHandler);
     window.removeEventListener("resize", this.resizeHandler);
 
@@ -148,20 +152,35 @@ export default class AnchorNavigation {
     }
   }
 
-  private handleAnchorClick(event: Event): void {
+  private handleMouseDown(event: MouseEvent): void {
+    if (event.button !== 0) return;
+
     const target = event.target as HTMLElement | null;
-    const anchor = target?.closest(
-      ".anchor-navigation__item",
-    ) as HTMLAnchorElement | null;
+    if (!target || !this.element.contains(target)) return;
 
-    if (!anchor || !this.element.contains(anchor)) return;
+    const interactiveSelector =
+      "a, button, input, select, textarea, label, [role='button'], [contenteditable='true']";
+    if (target.closest(interactiveSelector)) return;
+
+    // Prevent native text-selection drag from triggering page autoscroll.
+    event.preventDefault();
+  }
 
+  private handleAnchorClick(event: Event): void {
     if (this.suppressClick) {
       event.preventDefault();
+      event.stopPropagation();
       this.suppressClick = false;
       return;
     }
 
+    const target = event.target as HTMLElement | null;
+    const anchor = target?.closest(
+      ".anchor-navigation__item",
+    ) as HTMLAnchorElement | null;
+
+    if (!anchor || !this.element.contains(anchor)) return;
+
     event.preventDefault();
 
     const href = anchor.getAttribute("href");
@@ -300,18 +319,47 @@ export default class AnchorNavigation {
     activeLink: HTMLElement,
     forceCenter: boolean = false,
   ): void {
+    const maxScrollLeft = Math.max(
+      0,
+      contentLeft.scrollWidth - contentLeft.clientWidth,
+    );
+    const navLinks = this.navLinks;
+    let firstNavLink: HTMLAnchorElement | null = null;
+    let lastNavLink: HTMLAnchorElement | null = null;
+
+    if (navLinks && navLinks.length > 0) {
+      firstNavLink = navLinks[0];
+      lastNavLink = navLinks[navLinks.length - 1];
+    }
+
+    const isFirstItem = activeLink === firstNavLink;
+    const isLastItem = activeLink === lastNavLink;
+
+    let targetScrollLeft: number | null = null;
+    if (isFirstItem) {
+      targetScrollLeft = 0;
+    } else if (isLastItem) {
+      targetScrollLeft = maxScrollLeft;
+    }
+
     const itemLeft = activeLink.offsetLeft;
     const itemRight = itemLeft + activeLink.clientWidth;
     const viewportLeft = contentLeft.scrollLeft;
     const viewportRight = viewportLeft + contentLeft.clientWidth;
     const isVisible = itemLeft >= viewportLeft && itemRight <= viewportRight;
 
-    if (!forceCenter && isVisible) return;
+    if (targetScrollLeft === null && !forceCenter && isVisible) return;
+
+    if (targetScrollLeft === null) {
+      targetScrollLeft =
+        itemLeft - contentLeft.clientWidth / 2 + activeLink.clientWidth / 2;
+    }
 
-    const targetScrollLeft =
-      itemLeft - contentLeft.clientWidth / 2 + activeLink.clientWidth / 2;
     const behavior = window.innerWidth < 768 ? "auto" : "smooth";
-    const nextScrollLeft = Math.max(0, targetScrollLeft);
+    const nextScrollLeft = Math.min(
+      maxScrollLeft,
+      Math.max(0, targetScrollLeft),
+    );
 
     if (typeof contentLeft.scrollTo === "function") {
       contentLeft.scrollTo({

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

@@ -44,7 +44,7 @@
   }
 
   @include breakpoint.get("sm", "down") {
-    margin-right: space.get("medium") !important;
+    margin-right: convert.to-rem(10px) !important;
     padding: convert.to-rem(15px) 0 !important;
   }
 
@@ -134,6 +134,7 @@
   display: flex;
   flex: 1 1 auto;
   min-width: 0;
+  scroll-snap-type: none !important;
 
   &.is-draggable {
     user-select: none;

package/src/components/AnchorNavigation/tests/AnchorNavigation.unit.test.jsx

@@ -274,9 +274,63 @@ describe("rendering AnchorNavigation", () => {
       section.remove();
     });
 
+    it("prevents mousedown default on non-interactive content-right area", () => {
+      const { container } = render(
+        <AnchorNavigation items={basicItems}>
+          <div className="align-lg-right mb-none">
+            <span>16 €</span>
+            <span className="text-secondary">S viazanostou 24 mesiacov</span>
+          </div>
+          <a href="/senior-pausal/chcem-senior">Kupit Senior pausal</a>
+        </AnchorNavigation>,
+      );
+      const anchorNavigationElement = initializeAnchorNavigation(container);
+      const anchorNavigation = AnchorNavigationStatic.getInstance(
+        anchorNavigationElement,
+      );
+      const infoBlock = container.querySelector(".align-lg-right");
+
+      const downEvent = new MouseEvent("mousedown", {
+        bubbles: true,
+        cancelable: true,
+        button: 0,
+      });
+      infoBlock?.dispatchEvent(downEvent);
+
+      expect(downEvent.defaultPrevented).toBe(true);
+
+      anchorNavigation?.destroy();
+    });
+
+    it("does not prevent mousedown default on interactive content-right link", () => {
+      const { container } = render(
+        <AnchorNavigation items={basicItems}>
+          <a href="/senior-pausal/chcem-senior">Kupit Senior pausal</a>
+        </AnchorNavigation>,
+      );
+      const anchorNavigationElement = initializeAnchorNavigation(container);
+      const anchorNavigation = AnchorNavigationStatic.getInstance(
+        anchorNavigationElement,
+      );
+      const ctaLink = container.querySelector(
+        'a[href="/senior-pausal/chcem-senior"]',
+      );
+
+      const downEvent = new MouseEvent("mousedown", {
+        bubbles: true,
+        cancelable: true,
+        button: 0,
+      });
+      ctaLink?.dispatchEvent(downEvent);
+
+      expect(downEvent.defaultPrevented).toBe(false);
+
+      anchorNavigation?.destroy();
+    });
+
     it("scrolls active item using the left content viewport width", () => {
       const section = document.createElement("section");
-      section.id = "contact";
+      section.id = "pricing";
       document.body.appendChild(section);
 
       const { container } = render(
@@ -292,13 +346,17 @@ describe("rendering AnchorNavigation", () => {
       const contentLeft = container.querySelector(
         ".anchor-navigation__content-left",
       );
-      const activeLink = container.querySelector('a[href="#contact"]');
+      const activeLink = container.querySelector('a[href="#pricing"]');
       const scrollToSpy = vi.fn();
 
       Object.defineProperty(contentLeft, "clientWidth", {
         configurable: true,
         value: 180,
       });
+      Object.defineProperty(contentLeft, "scrollWidth", {
+        configurable: true,
+        value: 600,
+      });
       Object.defineProperty(contentLeft, "scrollLeft", {
         configurable: true,
         value: 0,
@@ -314,7 +372,7 @@ describe("rendering AnchorNavigation", () => {
       });
       contentLeft.scrollTo = scrollToSpy;
 
-      anchorNavigation.initScrollSpy("contact");
+      anchorNavigation.initScrollSpy("pricing");
 
       expect(scrollToSpy).toHaveBeenCalledWith({
         left: 170,
@@ -327,7 +385,7 @@ describe("rendering AnchorNavigation", () => {
 
     it("centers clicked active item even when it is already visible", () => {
       const section = document.createElement("section");
-      section.id = "contact";
+      section.id = "pricing";
       document.body.appendChild(section);
 
       const { container } = render(<AnchorNavigation items={basicItems} />);
@@ -338,13 +396,17 @@ describe("rendering AnchorNavigation", () => {
       const contentLeft = container.querySelector(
         ".anchor-navigation__content-left",
       );
-      const activeLink = container.querySelector('a[href="#contact"]');
+      const activeLink = container.querySelector('a[href="#pricing"]');
       const scrollToSpy = vi.fn();
 
       Object.defineProperty(contentLeft, "clientWidth", {
         configurable: true,
         value: 200,
       });
+      Object.defineProperty(contentLeft, "scrollWidth", {
+        configurable: true,
+        value: 600,
+      });
       Object.defineProperty(contentLeft, "scrollLeft", {
         configurable: true,
         value: 180,
@@ -360,7 +422,7 @@ describe("rendering AnchorNavigation", () => {
       });
       contentLeft.scrollTo = scrollToSpy;
 
-      anchorNavigation.initScrollSpy("contact");
+      anchorNavigation.initScrollSpy("pricing");
 
       expect(scrollToSpy).toHaveBeenCalledWith({
         left: 160,