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

package/src/components/Megamenu/Megamenu.static.ts

@@ -15,6 +15,9 @@ interface MegamenuConfig {
   removeOnDestroy?: boolean;
 }
 
+const MODAL_OPEN_CLASS = "has-modal";
+const LOCKED_SCROLL_TOP_ATTR = "data-lock-scrolltop";
+
 const defaultConfig: Required<MegamenuConfig> = {
   dataToggle: "data-toggle",
   activeClass: "is-active",
@@ -44,6 +47,27 @@ export default class Megamenu {
   touchstartHandler!: () => void;
   instanceName!: string;
 
+  private isModalOpen(): boolean {
+    return document.body.classList.contains(MODAL_OPEN_CLASS);
+  }
+
+  private getLockedScrollTop(): number | null {
+    const lockedScrollTopRaw = document.body.getAttribute(
+      LOCKED_SCROLL_TOP_ATTR,
+    );
+    const lockedScrollTop = Number.parseInt(lockedScrollTopRaw || "", 10);
+
+    return Number.isFinite(lockedScrollTop) ? lockedScrollTop : null;
+  }
+
+  private getEffectiveScrollY(): number {
+    if (!this.isModalOpen()) {
+      return window.scrollY;
+    }
+
+    return this.getLockedScrollTop() ?? window.scrollY;
+  }
+
   constructor(element: HTMLElement, config: MegamenuConfig = {}) {
     if ((element as any).ODS_Megamenu) {
       return (element as any).ODS_Megamenu;
@@ -179,6 +203,7 @@ export default class Megamenu {
 
     // Set initial tab indices for accessibility
     this.updateTabIndices();
+    this.handleScroll();
   }
 
   shouldUseMobileTrigger(button: HTMLButtonElement) {
@@ -407,9 +432,10 @@ export default class Megamenu {
     const topElement = this.element.querySelector(
       '[data-hide-when-sticky="true"]',
     ) as HTMLElement;
+    const effectiveScrollY = this.getEffectiveScrollY();
 
     if (topElement) {
-      if (window.scrollY > 15) {
+      if (effectiveScrollY > 15) {
         topElement.classList.add("is-hidden");
         this.element.classList.add("top-hidden");
       } else {

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

@@ -148,6 +148,10 @@
   &.is-sticky {
     position: fixed;
 
+    body.has-modal & {
+      padding-right: var(--ods-modal-scrollbar-width, 0px);
+    }
+
     #{config.$class-root}__main {
       position: sticky;
       top: 0;

package/src/components/Modal/Modal.static.ts

@@ -25,6 +25,9 @@ const defaultConfig = (): ModalConfig => ({
   modalsRoot: "#root-modals",
 });
 
+const MODAL_SCROLLBAR_WIDTH_VAR = "--ods-modal-scrollbar-width";
+const BODY_LOCK_SCROLL_TOP_ATTR = "data-lock-scrolltop";
+
 interface HTMLElementWithModal extends HTMLElement {
   ODS_Modal?: Modal;
 }
@@ -172,15 +175,27 @@ export default class Modal {
   // Track if body is locked
   private static isLocked = false;
 
+  private static resolveBodyLockClassName(
+    className?: string,
+    context?: unknown,
+  ): string {
+    const modalContext = context as Modal | undefined;
+
+    return (
+      className ||
+      modalContext?.config?.classModalIsOpenBody ||
+      defaultConfig().classModalIsOpenBody
+    );
+  }
+
   static lockBody(className?: string, root?: string): void {
     if (Modal.isLocked) return;
 
-    const actualClassName =
-      className || (this as unknown as Modal).config?.classModalIsOpenBody;
+    const actualClassName = Modal.resolveBodyLockClassName(className, this);
 
     // Store scroll position
     const scrollY = window.scrollY;
-    document.body.setAttribute("data-lock-scrolltop", scrollY.toString());
+    document.body.setAttribute(BODY_LOCK_SCROLL_TOP_ATTR, scrollY.toString());
 
     const scrollbarWidth =
       window.innerWidth - document.documentElement.clientWidth;
@@ -191,6 +206,10 @@ export default class Modal {
     document.body.style.left = "0";
     document.body.style.right = "0";
     document.body.style.paddingRight = `${scrollbarWidth}px`;
+    document.body.style.setProperty(
+      MODAL_SCROLLBAR_WIDTH_VAR,
+      `${scrollbarWidth}px`,
+    );
 
     // add modal class
     document.body.classList.add(actualClassName);
@@ -200,9 +219,11 @@ export default class Modal {
   static unlockBody(className?: string, root?: string): void {
     if (!Modal.isLocked) return;
 
-    const actualClassName =
-      className || (this as unknown as Modal).config?.classModalIsOpenBody;
-    const scrollTop = document.body.getAttribute("data-lock-scrolltop") || "0";
+    const actualClassName = Modal.resolveBodyLockClassName(className, this);
+    const scrollTop = Number.parseInt(
+      document.body.getAttribute(BODY_LOCK_SCROLL_TOP_ATTR) || "0",
+      10,
+    );
 
     // Remove lock styles
     document.body.style.position = "";
@@ -210,13 +231,14 @@ export default class Modal {
     document.body.style.left = "";
     document.body.style.right = "";
     document.body.style.paddingRight = "";
+    document.body.style.removeProperty(MODAL_SCROLLBAR_WIDTH_VAR);
 
     // remove modal class
     document.body.classList.remove(actualClassName);
 
     // Restore scroll position instantly (ignore scroll-behavior: smooth)
     window.scrollTo({
-      top: parseInt(scrollTop, 10),
+      top: Number.isFinite(scrollTop) ? scrollTop : 0,
       left: 0,
       behavior: "instant",
     });

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

@@ -97,6 +97,10 @@
   .divider {
     padding: 0;
   }
+
+  &:has(.divider) {
+    padding-bottom: 0;
+  }
 }
 
 @mixin close {