@orangesk/orange-design-system 2.0.0-beta.27 → 2.0.0-beta.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "2.0.0-beta.27",
+  "version": "2.0.0-beta.28",
   "private": false,
   "engines": {
     "node": ">=20.x"
@@ -104,7 +104,7 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-unused-imports": "^4.3.0",
     "fs-extra": "^11.3.3",
-    "glob": "13.0.0",
+    "glob": "13.0.1",
     "html-validate": "10.7.0",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",

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

@@ -10,6 +10,8 @@ interface ModalConfig {
   root: string;
   /** Move modal into this element selector (must be unique in DOM) */
   modalsRoot: string;
+  /** Disable moving modal to #root-modals (for React controlled mode) */
+  disablePortal?: boolean;
 }
 
 const defaultConfig = (): ModalConfig => ({
@@ -111,7 +113,7 @@ export default class Modal {
   }
 
   init(): void {
-    if (this.config.modalsRoot) {
+    if (this.config.modalsRoot && !this.config.disablePortal) {
       Modal.moveToModalRoot(
         this.element,
         document.querySelector(this.config.modalsRoot),
@@ -180,11 +182,15 @@ export default class Modal {
     const scrollY = window.scrollY;
     document.body.setAttribute("data-lock-scrolltop", scrollY.toString());
 
+    const scrollbarWidth =
+      window.innerWidth - document.documentElement.clientWidth;
+
     // Lock body with position fixed and offset
     document.body.style.position = "fixed";
     document.body.style.top = `-${scrollY}px`;
     document.body.style.left = "0";
     document.body.style.right = "0";
+    document.body.style.paddingRight = `${scrollbarWidth}px`;
 
     // add modal class
     document.body.classList.add(actualClassName);
@@ -203,12 +209,17 @@ export default class Modal {
     document.body.style.top = "";
     document.body.style.left = "";
     document.body.style.right = "";
+    document.body.style.paddingRight = "";
 
     // remove modal class
     document.body.classList.remove(actualClassName);
 
-    // Restore scroll position
-    window.scrollTo(0, parseInt(scrollTop, 10));
+    // Restore scroll position instantly (ignore scroll-behavior: smooth)
+    window.scrollTo({
+      top: parseInt(scrollTop, 10),
+      left: 0,
+      behavior: "instant",
+    });
     Modal.isLocked = false;
   }
 }

package/src/components/Modal/Modal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect } from "react";
+import React, { useEffect, useMemo } from "react";
 import cx from "classnames";
 
 import { useStatic } from "../../utils/hooks";
@@ -80,7 +80,16 @@ const Modal: React.FC<ModalProps> = ({
   disableFooterSpacing,
   ...other
 }) => {
-  const [modalRef, instance] = useStatic(ModalStatic);
+  // In React controlled mode (using isActive), we skip data-modal
+  // so vanilla JS won't initialize and move modal to #root-modals
+  // onHide alone works in uncontrolled mode - it's just a callback
+  const isReactControlled = isActive !== undefined;
+
+  const modalConfig = useMemo(
+    () => (isReactControlled ? { disablePortal: true } : {}),
+    [isReactControlled],
+  );
+  const [modalRef, instance] = useStatic(ModalStatic, modalConfig);
 
   useEffect(() => {
     if (!instance.current || !onHide) return;
@@ -128,7 +137,7 @@ const Modal: React.FC<ModalProps> = ({
   return (
     <div
       id={id}
-      data-modal
+      {...(!isReactControlled && { "data-modal": true })}
       className={CLASS_ROOT}
       ref={modalRef}
       role="dialog"