dsh-pocket 1.11.1 → 1.11.3

package/client/client.js

@@ -209,16 +209,22 @@ function MobileNavOverlay({ toggleSidebar, t }) {
     document.addEventListener("click", onDrawerClick, true);
     return () => document.removeEventListener("click", onDrawerClick, true);
   }, [mobile, open, toggleSidebar]);
+  (0, import_react.useEffect)(() => {
+    if (!mobile || !open) return;
+    const onOutsideClick = (event) => {
+      if (document.querySelector('[aria-modal="true"]') !== null) return;
+      const target = event.target;
+      if (target === null) return;
+      if (target.closest('[data-mobile-nav="toggle"]') !== null) return;
+      const drawer = document.querySelector('[data-mobile-nav="frame"] > :first-child');
+      if (drawer !== null && drawer.contains(target)) return;
+      toggleSidebar();
+    };
+    document.addEventListener("click", onOutsideClick, true);
+    return () => document.removeEventListener("click", onOutsideClick, true);
+  }, [mobile, open, toggleSidebar]);
   if (!mobile) return null;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, open && /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      "data-mobile-nav": "backdrop",
-      role: "button",
-      "aria-label": t("backdrop"),
-      onClick: () => toggleSidebar()
-    }
-  ), fabVisible && !open && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, open && /* @__PURE__ */ React.createElement("div", { "data-mobile-nav": "backdrop" }), fabVisible && !open && /* @__PURE__ */ React.createElement(
     "button",
     {
       type: "button",
@@ -361,13 +367,16 @@ var MOBILE_CSS = `
   outline-offset: 2px;
 }
 
-/* Dimmed backdrop under the open drawer; above every column, below the drawer. */
+/* Dimmed backdrop under the open drawer; above every column, below the drawer.
+   pointer-events: none \u2014\u2014 \u70B9\u51FB\u7A7F\u900F\uFF08issue #38\uFF09\uFF1Abackdrop \u53EA\u8D1F\u8D23\u89C6\u89C9\u538B\u6697\uFF0C
+   \u4E0D\u62A2\u70B9\u51FB\u3002\u5173\u95ED\u62BD\u5C49\u6539\u7531 MobileNavOverlay \u7684 document \u7EA7\u300C\u62BD\u5C49\u5916\u70B9\u51FB\u300D\u76D1\u542C\u5904\u7406
+   \uFF08\u7B49\u4EF7\u4E8E\u539F\u6765\u7684\u70B9\u51FB\u906E\u7F69\u5173\u95ED\uFF0C\u4E14\u62BD\u5C49\u5185\u70B9\u51FB\u4E0D\u518D\u88AB backdrop \u5403\u6389\uFF09\u3002 */
 [data-mobile-nav="backdrop"] {
   position: absolute;
   inset: 0;
   z-index: 30;
   background: rgba(0, 0, 0, .45);
-  cursor: pointer;
+  pointer-events: none;
   animation: dsh-mobile-nav-fade .2s var(--ds-ease-in-out, ease-in-out);
   -webkit-tap-highlight-color: transparent;
 }
@@ -449,13 +458,21 @@ var MOBILE_CSS = `
      the viewport. A mere -100% leaves a sliver on screen; -105% (as used
      before) left 14px of the drawer plus a long 32px-blur shadow gradient
      visible along the left edge of the main UI. No box-shadow at all: the
-     dimmed backdrop already separates drawer from content. */
+     dimmed backdrop already separates drawer from content.
+     Z-index note: the backdrop renders inside the shell's overlay layer
+     ([data-shell-overlay]), which forms its own stacking context. Third-party
+     plugins can force that layer up with !important (dsh-update-checker sets
+     it to 500), and when the layer outranks the drawer, the backdrop paints
+     ABOVE the drawer and swallows every tap \u2014 the drawer opens but no row
+     can be pressed (every tap just closes it). The drawer must therefore
+     outrank any such raise: 600 clears the known 500 while staying under the
+     fixed-position banners/toasts (z 9999) that float at the viewport level. */
   [data-mobile-nav="frame"] > :first-child {
     position: absolute !important;
     inset: 0 auto 0 0 !important;
     width: max-content !important;
     max-width: 92vw !important;
-    z-index: 40 !important;
+    z-index: 600 !important;
     transform: translateX(-110%);
     transition: transform .28s var(--ds-ease-in-out, ease-in-out);
     background: var(--dsw-alias-bg-base, #ffffff);

package/client/mobile/MobileNavOverlay.tsx

@@ -128,16 +128,33 @@ export function MobileNavOverlay({ toggleSidebar, t }: MobileNavOverlayProps) {
     return () => document.removeEventListener('click', onDrawerClick, true)
   }, [mobile, open, toggleSidebar])
 
+  // Tap-outside closes the drawer (issue #38). The backdrop is now
+  // pointer-events: none (pure dimming layer that never steals clicks), so
+  // "tap the dimmed area to close" moves here: any click outside the drawer
+  // (and outside the header toggle) closes it, keeping the standard
+  // interaction while letting drawer contents receive clicks normally.
+  // Capture phase: the close happens before the content processes the tap
+  // (same first-tap-closes behaviour as before).
+  useEffect(() => {
+    if (!mobile || !open) return
+    const onOutsideClick = (event: MouseEvent) => {
+      if (document.querySelector('[aria-modal="true"]') !== null) return
+      const target = event.target as HTMLElement | null
+      if (target === null) return
+      if (target.closest('[data-mobile-nav="toggle"]') !== null) return
+      const drawer = document.querySelector<HTMLElement>('[data-mobile-nav="frame"] > :first-child')
+      if (drawer !== null && drawer.contains(target)) return
+      toggleSidebar()
+    }
+    document.addEventListener('click', onOutsideClick, true)
+    return () => document.removeEventListener('click', onOutsideClick, true)
+  }, [mobile, open, toggleSidebar])
+
   if (!mobile) return null
   return (
     <>
       {open && (
-        <div
-          data-mobile-nav="backdrop"
-          role="button"
-          aria-label={t('backdrop')}
-          onClick={() => toggleSidebar()}
-        />
+        <div data-mobile-nav="backdrop" />
       )}
       {fabVisible && !open && (
         <button

package/client/mobile/mobile.css.ts

@@ -106,13 +106,16 @@ export const MOBILE_CSS = `
   outline-offset: 2px;
 }
 
-/* Dimmed backdrop under the open drawer; above every column, below the drawer. */
+/* Dimmed backdrop under the open drawer; above every column, below the drawer.
+   pointer-events: none —— 点击穿透（issue #38）：backdrop 只负责视觉压暗，
+   不抢点击。关闭抽屉改由 MobileNavOverlay 的 document 级「抽屉外点击」监听处理
+   （等价于原来的点击遮罩关闭，且抽屉内点击不再被 backdrop 吃掉）。 */
 [data-mobile-nav="backdrop"] {
   position: absolute;
   inset: 0;
   z-index: 30;
   background: rgba(0, 0, 0, .45);
-  cursor: pointer;
+  pointer-events: none;
   animation: dsh-mobile-nav-fade .2s var(--ds-ease-in-out, ease-in-out);
   -webkit-tap-highlight-color: transparent;
 }
@@ -194,13 +197,21 @@ export const MOBILE_CSS = `
      the viewport. A mere -100% leaves a sliver on screen; -105% (as used
      before) left 14px of the drawer plus a long 32px-blur shadow gradient
      visible along the left edge of the main UI. No box-shadow at all: the
-     dimmed backdrop already separates drawer from content. */
+     dimmed backdrop already separates drawer from content.
+     Z-index note: the backdrop renders inside the shell's overlay layer
+     ([data-shell-overlay]), which forms its own stacking context. Third-party
+     plugins can force that layer up with !important (dsh-update-checker sets
+     it to 500), and when the layer outranks the drawer, the backdrop paints
+     ABOVE the drawer and swallows every tap — the drawer opens but no row
+     can be pressed (every tap just closes it). The drawer must therefore
+     outrank any such raise: 600 clears the known 500 while staying under the
+     fixed-position banners/toasts (z 9999) that float at the viewport level. */
   [data-mobile-nav="frame"] > :first-child {
     position: absolute !important;
     inset: 0 auto 0 0 !important;
     width: max-content !important;
     max-width: 92vw !important;
-    z-index: 40 !important;
+    z-index: 600 !important;
     transform: translateX(-110%);
     transition: transform .28s var(--ds-ease-in-out, ease-in-out);
     background: var(--dsw-alias-bg-base, #ffffff);

package/package.json

@@ -76,5 +76,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "version": "1.11.1"
+  "version": "1.11.3"
 }