@admin-layout/tailwind-design-pro 12.2.4-alpha.109 → 12.2.4-alpha.113

package/lib/components/Layout/Sidebar/MenuDynamicDialog.d.ts

@@ -4,6 +4,13 @@ import React from 'react';
  * Fixes clipped “strip” modals: position:fixed inside sidebar/layout (transform,
  * overflow, inline-block shells) uses the wrong containing block unless the tree
  * is attached under body.
+ *
+ * Every menu modal is mounted inside {@link MenuDialogShell}. The dialog bodies
+ * themselves are page components (Login/Signup render a `relative` page root,
+ * Logout a full-screen `fixed` one), so without the shell they land in normal
+ * body flow — the login form was appended a full viewport below the fold and the
+ * menu looked dead. The shell supplies the modal chrome (backdrop, centering,
+ * dismissal) and neutralizes the page-level positioning of whatever it wraps.
  */
 export declare const MenuDynamicDialog: React.FC<{
     dialogPath: string;

package/lib/components/Layout/Sidebar/MenuDynamicDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuDynamicDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Sidebar/MenuDynamicDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAc3D;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CAoCnF,CAAC"}
+{"version":3,"file":"MenuDynamicDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Sidebar/MenuDynamicDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAQxE;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CA8BnF,CAAC"}

package/lib/components/Layout/Sidebar/MenuDynamicDialog.js

@@ -1,13 +1,15 @@
-import React__default,{useState,useEffect,useRef}from'react';import {createPortal}from'react-dom';import switchDialogs from'@app/dialog/WrappedDialogsSwitch';/** Logout ships a full-screen `fixed` root; neutralize it when embedded so it cannot nest inside another transformed modal shell (fixed then resolves to a tiny box → horizontal “strip”). */
-function shouldNeutralizeOuterFixedOverlay(path) {
-  const p = path.replace(/\\/g, '/');
-  return p.includes('/Logout/') && /\/Logout\/index\.js$/i.test(p);
-}
-/**
+import React__default,{useState,useEffect,useRef,useCallback}from'react';import {createPortal}from'react-dom';import switchDialogs from'@app/dialog/WrappedDialogsSwitch';/**
  * Loads a menu modal via switchDialogs(path) and mounts it on document.body.
  * Fixes clipped “strip” modals: position:fixed inside sidebar/layout (transform,
  * overflow, inline-block shells) uses the wrong containing block unless the tree
  * is attached under body.
+ *
+ * Every menu modal is mounted inside {@link MenuDialogShell}. The dialog bodies
+ * themselves are page components (Login/Signup render a `relative` page root,
+ * Logout a full-screen `fixed` one), so without the shell they land in normal
+ * body flow — the login form was appended a full viewport below the fold and the
+ * menu looked dead. The shell supplies the modal chrome (backdrop, centering,
+ * dismissal) and neutralizes the page-level positioning of whatever it wraps.
  */
 const MenuDynamicDialog = ({
   dialogPath,
@@ -34,29 +36,38 @@ const MenuDynamicDialog = ({
       className: "rounded-themed-lg bg-card px-4 py-3 text-sm text-muted-foreground shadow-themed-md"
     }, "Loading...")), document.body);
   }
-  const Inner = mod.default;
-  if (!shouldNeutralizeOuterFixedOverlay(dialogPath)) {
-    return createPortal(React__default.createElement(Inner, {
-      onClose: onClose
-    }), document.body);
-  }
-  return createPortal(React__default.createElement(LogoutFixedNeutralizedShell, {
-    Inner: Inner,
+  return createPortal(React__default.createElement(MenuDialogShell, {
+    Inner: mod.default,
     onClose: onClose
   }), document.body);
 };
-/** Logout returns null after cancel; keep menu `openedModalKey` in sync by closing when its DOM unmounts. */
-function LogoutFixedNeutralizedShell({
+/**
+ * Backdrop + centered host for a menu modal.
+ *
+ * `[&>*]` neutralizes the wrapped page root so it behaves as modal content:
+ * `!relative !inset-auto` defuses Logout's full-screen `fixed` root (which would
+ * otherwise resolve against the wrong containing block and collapse into a
+ * horizontal strip), `!bg-transparent` lets the backdrop show around the card,
+ * and the flex/centering keeps the card centred inside the host.
+ */
+function MenuDialogShell({
   Inner,
   onClose
 }) {
   const innerHostRef = useRef(null);
+  /** Menus pass a fresh arrow every render; keep the listeners/observer subscribed once. */
+  const closeRef = useRef(onClose);
+  useEffect(() => {
+    closeRef.current = onClose;
+  }, [onClose]);
+  const close = useCallback(() => closeRef.current(), []);
+  /** Dialogs that self-dismiss by rendering null (Logout cancel) must not leave a bare backdrop. */
   useEffect(() => {
     const el = innerHostRef.current;
     if (!el) return;
     const syncIfEmpty = () => {
       if (el.childElementCount === 0) {
-        onClose();
+        close();
       }
     };
     const mo = new MutationObserver(syncIfEmpty);
@@ -64,16 +75,44 @@ function LogoutFixedNeutralizedShell({
       childList: true
     });
     return () => mo.disconnect();
-  }, [onClose]);
+  }, [close]);
+  useEffect(() => {
+    const onKeyDown = e => {
+      if (e.key === 'Escape') close();
+    };
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, [close]);
+  /** Freeze the page behind the backdrop so wheel/touch scrolling cannot drift it. */
+  useEffect(() => {
+    const {
+      body
+    } = document;
+    const previousOverflow = body.style.overflow;
+    body.style.overflow = 'hidden';
+    return () => {
+      body.style.overflow = previousOverflow;
+    };
+  }, []);
+  /**
+   * The backdrop is the scroller, not the dialog host: a card taller than the viewport
+   * (Signup on a short laptop screen) scrolls as a whole, keeping its own rounded corners
+   * and shadow, instead of being cut flat by a clipping host whose radius could never match
+   * every dialog's card (Login is `rounded-2xl`, Logout `rounded-themed-lg`).
+   */
   return React__default.createElement("div", {
-    className: "fixed inset-0 z-[120] flex items-center justify-center bg-black/50 p-4",
+    className: "fixed inset-0 z-[120] overflow-y-auto overscroll-contain bg-black/50",
     role: "presentation",
-    onClick: () => onClose()
+    onClick: close
+  }, React__default.createElement("div", {
+    className: "flex min-h-full items-center justify-center p-4"
   }, React__default.createElement("div", {
     ref: innerHostRef,
+    role: "dialog",
+    "aria-modal": "true",
     className: "w-full max-w-md [&>*]:!relative [&>*]:!inset-auto [&>*]:!min-h-0 [&>*]:!w-full [&>*]:!max-w-full [&>*]:!bg-transparent [&>*]:flex [&>*]:items-center [&>*]:justify-center",
     onClick: e => e.stopPropagation()
   }, React__default.createElement(Inner, {
-    onClose: onClose
-  })));
+    onClose: close
+  }))));
 }export{MenuDynamicDialog};//# sourceMappingURL=MenuDynamicDialog.js.map

package/lib/components/Layout/Sidebar/MenuDynamicDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuDynamicDialog.js","sources":["../../../../src/components/Layout/Sidebar/MenuDynamicDialog.tsx"],"sourcesContent":[null],"names":["React"],"mappings":"8JAQA;AACA,SAAS,iCAAiC,CAAC,IAAY,EAAA;QACnD,CAAA,GAAO,IAAG,CAAA,OAAK,CAAA,KAAQ,EAAK,GAAE,CAAA;AAC9B,EAAA,OAAA,CAAA,CAAO,QAAE,CAAA,UAAS,CAAA,IAAW,uBAAI,CAAA,IAAwB,CAAA,CAAI,CAAC;AAClE;AAEA;;;;;AAKG;AACI,MAAM,iBAAiB,GAA0D,CAAC;YAC9E;;;QAIH,CAAA,GAAA,EAAM,MAAM,CAAC,GAAA,QAAA,CAAA,IAAA,CAAA;WACb,CAAA,MAAA;AACI,IAAA,IAAA,SAAK,GAAA,KAAA;gBAAW;AACpB,IAAA,aAAG,CAAA,UAAA,CAAA,CAAA,IAAA,CAAA,MAAA,IAAA;AACH,MAAA,IAAA,CAAA,SAAY,EAAA,MAAA,CAAA,MAAA,CAAA;;AAEZ,IAAA,OAAE,MAAA;AACN,MAAC,SAAG,GAAU,IAAG;AAEjB,IAAA,CAAA;AACI,EAAA,CAAA,EAAA,CAAA;MACH,OAAA,QAAA,KAAA,WAAA,EAAA;IAED,OAAK,IAAM;AACP,EAAA;YAEQ;IAMZ,OAAC,YAAA,CAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAED,MAAA,SAAW,EAAA;AAEX,KAAA,EAAAA,cAAK,CAAA,aAAA,CAAA,MAAA,EAAA;AACD,MAAA,SAAO,EAAA;KACV,EAAA,YAAA,CAAA,CAAA,EAAA,QAAA,CAAA,IAAA,CAAA;AAED,EAAA;AACJ,EAAE,MAAA,KAAA,GAAA,GAAA,CAAA,OAAA;AAEF,EAAA,IAAA,CAAA,iCAAA,CAAA,UAAA,CAAA,EAAA;AACA,IAAA,gDAAuC,CAAK;AACxC,MAAA;KAEA,CAAA,EAAA,SAAa,IAAE,CAAA;AACX,EAAA;AACA,EAAA,OAAA,YAAO,CAAAA,cAAA,CAAA,aAAA,CAAA,2BAAA,EAAA;gBAAE;WACT,EAAA;AACI,GAAA,CAAA,EAAA,QAAA,CAAA,IAAO,CAAA;AACH;;AAER,SAAC,2BAAC,CAAA;AACF,EAAA,KAAA;;AAEA,CAAA,EAAA;AACJ,EAAA,MAAI,YAAU,GAAA,MAAA,CAAA,IAAA,CAAA;AAEd,EAAA,SAAO,CACH,MAAA;AAKI,IAAA,MAAA,EAAA,GAAA,YAAA,CAAA,OAAA;aAKI;AAIhB,IAAC,MAAA,WAAA,GAAA,MAAA;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MenuDynamicDialog.js","sources":["../../../../src/components/Layout/Sidebar/MenuDynamicDialog.tsx"],"sourcesContent":[null],"names":["React"],"mappings":"0KAQA;;;;;;;;;;;;AAYG;AACI,MAAM,iBAAiB,GAA0D,CAAC;YAC9E;;;QAIH,CAAA,GAAA,EAAM,MAAM,CAAC,GAAA,QAAA,CAAA,IAAA,CAAA;WACb,CAAA,MAAA;AACI,IAAA,IAAA,SAAK,GAAA,KAAA;gBAAW;AACpB,IAAA,aAAG,CAAA,UAAA,CAAA,CAAA,IAAA,CAAA,MAAA,IAAA;AACH,MAAA,IAAA,CAAA,SAAY,EAAA,MAAA,CAAA,MAAA,CAAA;;AAEZ,IAAA,OAAE,MAAA;AACN,MAAC,SAAG,GAAU,IAAG;AAEjB,IAAA,CAAA;AACI,EAAA,CAAA,EAAA,CAAA;MACH,OAAA,QAAA,KAAA,WAAA,EAAA;IAED,OAAK,IAAM;AACP,EAAA;YAEQ;IAMZ,OAAC,YAAA,CAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;MAED,SAAO,EAAA;AACX,KAAE,EAAAA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAEF,MAAA,SAAA,EAAA;;;;;;;;AAQG;AACH;AACI;;AAEA;;AAEI;AACJ;AAEA;SAEA,eAAA,CAAA;OACA;AACI,EAAA;AACA,CAAA,EAAA;oBAAgB,GAAA,MAAA,CAAA,IAAA,CAAA;;AAEZ,EAAA,MAAA,QAAI,GAAG,MAAA,CAAA,OAAA,CAAA;AACH,EAAA,SAAA,CAAA,MAAA;YACJ,CAAC,OAAA,GAAA,OAAA;AACL,EAAA,CAAA,EAAA,CAAA,OAAE,CAAA,CAAA;AACF,EAAA,MAAA,KAAA,GAAQ,0BAAwB,CAAA,OAAA,EAAY,EAAC,EAAA,CAAA;;AAE7C,EAAA,SAAA,CAAA,MAAU;AACd,IAAA,MAAI,EAAA,GAAO,YAAC,CAAA,OAAA;IAEZ,IAAA,CAAA,EAAA,EAAS;AACL,IAAA,MAAA,WAAM,GAAS,MAAsB;AACjC,MAAA,IAAA,EAAA,CAAA,iBAAc,KAAQ,CAAA,EAAA;AAAE,QAAA,KAAA,EAAA;AAC5B,MAAA;AACA,IAAA,CAAA;UACA,EAAA,GAAO,IAAG,gBAAY,CAAA,WAAA,CAAA;AAC1B,IAAA,EAAC,CAAE,OAAO,CAAC,EAAC,EAAA;MAEZ,SAAA,EAAA;KACA,CAAA;AACI,IAAA,OAAA,MAAQ,EAAA,CAAI;AACZ,EAAA,CAAA,EAAA,CAAA,KAAA,CAAA,CAAA;AACA,EAAA,SAAA,CAAI,MAAM;AACV,IAAA,MAAA,SAAU,GAAE,CAAA,IAAA;AACR,MAAA,IAAA,CAAA,CAAA,GAAA,KAAK,QAAM,EAAA;AACf,IAAA,CAAA;IACJ,QAAO,CAAA,gBAAA,CAAA,SAAA,EAAA,SAAA,CAAA;AAEP,IAAA,OAAA,MAAA,QAAA,CAAA,mBAAA,CAAA,SAAA,EAAA,SAAA,CAAA;;;;;AAKG,MAAA;AACH,KAAA,GAAA,QACI;UAKI,gBAAA,GAAA,IAAA,CAAA,KAAK,CAAA,QAAU;cACX,CAAA,QAAA,GAAA,QAAA;iBAOI;AAKpB,MAAC,IAAA,CAAA,KAAA,CAAA,QAAA,GAAA,gBAAA;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@admin-layout/tailwind-design-pro",
-    "version": "12.2.4-alpha.109",
+    "version": "12.2.4-alpha.113",
     "description": "Sample core for higher packages to depend on",
     "license": "ISC",
     "author": "CDMBase LLC",
@@ -22,8 +22,8 @@
     },
     "dependencies": {
         "@admin-layout/assets": "12.2.4-alpha.98",
-        "@admin-layout/client": "12.2.4-alpha.109",
-        "@admin-layout/tailwind-ui": "12.2.4-alpha.109",
+        "@admin-layout/client": "12.2.4-alpha.111",
+        "@admin-layout/tailwind-ui": "12.2.4-alpha.113",
         "path-to-regexp": "^8.0.0",
         "react-favicon": "^0.0.23",
         "react-intl": "^6.1.1",
@@ -52,7 +52,7 @@
             }
         }
     },
-    "gitHead": "94c20654cac16751ae376d9d76f257ccb38425ac",
+    "gitHead": "58a277a3695041005254a8b55cfc5bb1624dd79c",
     "typescript": {
         "definition": "lib/index.d.ts"
     }