@wisdomgarden/torque 0.2.2 → 0.2.4

package/dist/components/_inner/drawer/base-bottom-drawer.d.ts

@@ -29,4 +29,4 @@ export type BaseBottomDrawerProps = DistributiveOmit<DrawerProps, 'withXPadding'
 /**
  * 移动端使用的底部弹出的抽屉组件
  */
-export declare const BaseBottomDrawer: ({ withCloseButton, title, "aria-label": ariaLabel, children, bottomSection, height, noMinHeight, contentClassName, bodyClassName, ...props }: BaseBottomDrawerProps) => import("react").JSX.Element;
+export declare const BaseBottomDrawer: ({ withCloseButton, title, "aria-label": ariaLabel, children, bottomSection, height, noMinHeight, contentClassName, bodyClassName, ref, ...props }: BaseBottomDrawerProps) => import("react").JSX.Element;

package/dist/components/_inner/drawer/base-bottom-drawer.js

@@ -1,79 +1,87 @@
 "use client";
-import { jsxs as s, jsx as r, Fragment as u } from "react/jsx-runtime";
-import { Drawer as C, Space as y, Text as N } from "@mantine/core";
-import { clsx as c } from "clsx";
+import { jsx as r, jsxs as l, Fragment as v } from "react/jsx-runtime";
+import { Drawer as x, Space as g, Text as p } from "@mantine/core";
+import { useMergedRef as N } from "@mantine/hooks";
+import { clsx as d } from "clsx";
 import "../../../provider/ui-context.js";
 import "react";
-import { useLocale as x } from "../../../provider/hooks.js";
-import t from "../../drawer/drawer.module.css.js";
-import { IconButton as g } from "../../icon-button/icon-button.js";
+import { useLocale as O } from "../../../provider/hooks.js";
+import o from "../../drawer/drawer.module.css.js";
+import { IconButton as D } from "../../icon-button/icon-button.js";
+import { OverlayParentProvider as H } from "../../overlay-layer/overlay-parent-context.js";
+import { useMantineOverlayLayer as M } from "../../overlay-layer/use-mantine-overlay-layer.js";
 import a from "./base-bottom-drawer.module.css.js";
-const k = ({
+const q = ({
   withCloseButton: e = !0,
-  title: o,
+  title: t,
   "aria-label": m,
-  children: i,
+  children: c,
   bottomSection: n,
-  height: d = "fit-content",
+  height: f = "fit-content",
   noMinHeight: h = !1,
   contentClassName: w,
-  bodyClassName: f,
-  ...l
+  bodyClassName: u,
+  ref: y,
+  ...s
 }) => {
-  const B = o || e;
+  const i = M("Drawer", s, "bottom-drawer"), B = N(i.rootRef, y), C = t || e;
   return (
     // todo 无障碍aria-describedby没有正确关联的问题待解决
-    /* @__PURE__ */ s(
-      C,
+    /* @__PURE__ */ r(
+      x,
       {
-        ...l,
+        ...s,
+        ref: B,
+        zIndex: i.zIndex,
+        closeOnEscape: !1,
+        closeOnClickOutside: !1,
         position: "bottom",
-        title: m ?? (typeof o == "string" ? o : void 0),
+        title: m ?? (typeof t == "string" ? t : void 0),
         withCloseButton: !1,
         styles: {
           content: {
-            height: d
+            height: f
           }
         },
         classNames: {
-          content: c(
-            t.drawerContent,
-            n && t.drawerContentWithBottomSection,
+          content: d(
+            o.drawerContent,
+            n && o.drawerContentWithBottomSection,
             w,
             a.content,
             !h && a.contentMinHeight
           ),
-          header: t.hiddenHeader,
-          body: c(
-            t.drawerBody,
-            n && t.drawerBodyWithBottomSection,
-            f
+          header: o.hiddenHeader,
+          body: d(
+            o.drawerBody,
+            n && o.drawerBodyWithBottomSection,
+            u
           )
         },
-        children: [
-          B && /* @__PURE__ */ r(
-            p,
+        children: /* @__PURE__ */ l(H, { id: i.id, children: [
+          C && /* @__PURE__ */ r(
+            R,
             {
-              title: o,
+              title: t,
               withCloseButton: e,
-              onClose: l.onClose
+              onClose: s.onClose
             }
           ),
-          n ? /* @__PURE__ */ s(u, { children: [
-            /* @__PURE__ */ r("div", { className: t.drawerMain, children: i }),
-            /* @__PURE__ */ r("div", { className: t.drawerBottomSection, children: n })
-          ] }) : i
-        ]
+          n ? /* @__PURE__ */ l(v, { children: [
+            /* @__PURE__ */ r("div", { className: o.drawerMain, children: c }),
+            /* @__PURE__ */ r("div", { className: o.drawerBottomSection, children: n })
+          ] }) : c
+        ] })
       }
     )
   );
-}, p = (e) => {
-  const o = x();
-  return /* @__PURE__ */ s("div", { className: a.header, children: [
-    e.withCloseButton && /* @__PURE__ */ r(y, { w: 40 }),
-    /* @__PURE__ */ r(N, { className: a.headerTitle, children: e.title }),
+}, R = (e) => {
+  const t = O();
+  return /* @__PURE__ */ l("div", { className: a.header, children: [
+    e.withCloseButton && /* @__PURE__ */ r(g, { w: 40 }),
+    /* @__PURE__ */ r(p, { className: a.headerTitle, children: e.title }),
     e.withCloseButton && /* @__PURE__ */ r(
-      g,
+      D,
       {
         iconName: "close",
         variant: "text",
@@ -81,11 +89,11 @@ const k = ({
         size: "lg",
         className: a.headerClose,
         onClick: () => e.onClose?.(),
-        "aria-label": o.close
+        "aria-label": t.close
       }
     )
   ] });
 };
 export {
-  k as BaseBottomDrawer
+  q as BaseBottomDrawer
 };

package/dist/components/_inner/menu/_web/menu.web.js

@@ -1,77 +1,88 @@
 "use client";
-import { jsx as n, Fragment as m, jsxs as u } from "react/jsx-runtime";
-import { Menu as c, Text as E, Box as S } from "@mantine/core";
-import { Icon as p } from "@wisdomgarden/torque-icons";
-import d, { useState as M, useRef as P } from "react";
-import { IconButton as x } from "../../../icon-button/icon-button.js";
+import { jsx as n, Fragment as O, jsxs as u } from "react/jsx-runtime";
+import { Menu as s, Text as M, Box as S } from "@mantine/core";
+import { Icon as I } from "@wisdomgarden/torque-icons";
+import d, { useState as P, useRef as R } from "react";
+import { IconButton as B } from "../../../icon-button/icon-button.js";
+import { useOverlayLayerInternal as D } from "../../../overlay-layer/use-overlay-layer.js";
 import { Tooltip as T } from "../../../tooltip/index.js";
-import i from "./menu-web.module.css.js";
-const H = ({
+import c from "./menu-web.module.css.js";
+const q = ({
   menuItems: e,
   onClick: l,
-  children: t,
-  disabled: a,
+  children: a,
+  disabled: t,
   triggerAriaLabel: h,
   renderTarget: b,
-  trigger: s = "click-hover",
-  position: y,
-  "data-testid": g
+  trigger: i = "click-hover",
+  position: w,
+  "data-testid": v
 }) => {
-  const [f, A] = M(!1), I = P(null), r = b?.({ opened: f }) ?? t, v = () => {
-    I.current?.focus({ preventScroll: !0 });
-  };
-  if (a) {
+  const [p, m] = P(!1), f = R(null), r = b?.({ opened: p }) ?? a, g = () => {
+    f.current?.focus({ preventScroll: !0 });
+  }, { zIndex: E, ref: A } = D({
+    opened: p && !t,
+    insideRefs: [f],
+    close: (o) => {
+      m(!1), o === "escape" && g();
+    },
+    name: "menu"
+  });
+  if (t) {
     const o = d.isValidElement(r) ? r.props : void 0;
-    return /* @__PURE__ */ n(m, { children: d.isValidElement(r) ? d.cloneElement(
+    return /* @__PURE__ */ n(O, { children: d.isValidElement(r) ? d.cloneElement(
       r,
       {
         disabled: !0,
-        "data-testid": g ?? o?.["data-testid"]
+        "data-testid": v ?? o?.["data-testid"]
       }
     ) : r });
   }
-  const N = d.isValidElement(r) ? r.props : void 0;
+  const C = d.isValidElement(r) ? r.props : void 0;
   return /* @__PURE__ */ u(
-    c,
+    s,
     {
-      trigger: s,
-      opened: f,
-      onChange: A,
-      position: y,
+      trigger: i,
+      opened: p,
+      onChange: m,
+      position: w,
+      zIndex: E,
+      closeOnEscape: !1,
+      closeOnClickOutside: !1,
       children: [
-        /* @__PURE__ */ n(c.Target, { ref: I, children: d.isValidElement(r) ? d.cloneElement(
+        /* @__PURE__ */ n(s.Target, { ref: f, children: d.isValidElement(r) ? d.cloneElement(
           r,
           {
-            "aria-label": h ?? N?.["aria-label"],
-            "data-testid": g ?? N?.["data-testid"]
+            "aria-label": h ?? C?.["aria-label"],
+            "data-testid": v ?? C?.["data-testid"]
           }
         ) : r }),
-        /* @__PURE__ */ n(c.Dropdown, { children: e.map(
-          (o, C) => o.children && o.children.length > 0 ? /* @__PURE__ */ n(
+        /* @__PURE__ */ n(s.Dropdown, { ref: A, children: e.map(
+          (o, N) => o.children && o.children.length > 0 ? /* @__PURE__ */ n(
             k,
             {
               target: o,
               subItems: o.children,
               onClick: l,
-              onAction: v
+              onAction: g
             },
-            o.value ?? o.label ?? C
+            o.value ?? o.label ?? N
           ) : /* @__PURE__ */ n(
-            O,
+            x,
             {
               item: o,
               onClick: l,
-              onAction: v
+              onAction: g
             },
-            o.value ?? o.label ?? C
+            o.value ?? o.label ?? N
           )
         ) })
       ]
     }
   );
-}, k = (e) => /* @__PURE__ */ u(c.Sub, { children: [
-  /* @__PURE__ */ n(c.Sub.Target, { children: /* @__PURE__ */ n(R, { ...e }) }),
-  /* @__PURE__ */ n(c.Sub.Dropdown, { children: e.subItems.map((l, t) => l.children && l.children.length > 0 ? /* @__PURE__ */ n(
+}, k = (e) => /* @__PURE__ */ u(s.Sub, { children: [
+  /* @__PURE__ */ n(s.Sub.Target, { children: /* @__PURE__ */ n(z, { ...e }) }),
+  /* @__PURE__ */ n(s.Sub.Dropdown, { children: e.subItems.map((l, a) => l.children && l.children.length > 0 ? /* @__PURE__ */ n(
     k,
     {
       target: l,
@@ -79,38 +90,38 @@ const H = ({
       onClick: e.onClick,
       onAction: e.onAction
     },
-    l.value ?? l.label ?? t
+    l.value ?? l.label ?? a
   ) : /* @__PURE__ */ n(
-    O,
+    x,
     {
       item: l,
       onClick: e.onClick,
       onAction: e.onAction
     },
-    l.value ?? l.label ?? t
+    l.value ?? l.label ?? a
   )) })
-] }), O = ({
+] }), x = ({
   item: e,
   onClick: l,
-  onAction: t
+  onAction: a
 }) => {
-  const a = e.type ?? "option";
-  return a === "divider" || a === "thick-divider" ? /* @__PURE__ */ n(c.Divider, {}) : a === "label" ? /* @__PURE__ */ n(c.Label, { children: e.label }) : /* @__PURE__ */ n(B, { item: e, onClick: l, onAction: t });
+  const t = e.type ?? "option";
+  return t === "divider" || t === "thick-divider" ? /* @__PURE__ */ n(s.Divider, {}) : t === "label" ? /* @__PURE__ */ n(s.Label, { children: e.label }) : /* @__PURE__ */ n(V, { item: e, onClick: l, onAction: a });
 };
-function w(e) {
-  return /* @__PURE__ */ u(m, { children: [
-    e.description && /* @__PURE__ */ n(E, { className: i.labelHeader, fz: 12, lh: "20px", children: e.description }),
+function y(e) {
+  return /* @__PURE__ */ u(O, { children: [
+    e.description && /* @__PURE__ */ n(M, { className: c.labelHeader, fz: 12, lh: "20px", children: e.description }),
     e.rightIconButtonProps && /* @__PURE__ */ n(
       T,
       {
         label: e.rightIconTooltip ?? "",
         disabled: !e.rightIconTooltip || e.disabled,
         children: /* @__PURE__ */ n(
-          x,
+          B,
           {
             variant: "text",
             color: "regular",
-            iconClassName: i.submenuIcon,
+            iconClassName: c.submenuIcon,
             ...e.rightIconButtonProps,
             "aria-label": e.rightIconButtonProps["aria-label"] || e.rightIconTooltip,
             renderRoot: (l) => /* @__PURE__ */ n(S, { role: "button", ...l })
@@ -118,33 +129,33 @@ function w(e) {
         )
       }
     ),
-    e.children && e.children.length > 0 && /* @__PURE__ */ n(S, { w: 22, h: 22, className: i.submenuIconWrap, children: /* @__PURE__ */ n(
-      p,
+    e.children && e.children.length > 0 && /* @__PURE__ */ n(S, { w: 22, h: 22, className: c.submenuIconWrap, children: /* @__PURE__ */ n(
+      I,
       {
         name: "right",
         width: 16,
         height: 16,
-        className: i.submenuIcon
+        className: c.submenuIcon
       }
     ) })
   ] });
 }
-function B({
+function V({
   item: e,
   onClick: l,
-  onAction: t
+  onAction: a
 }) {
-  const a = e.dangerous && !e.disabled, h = e.labelClassName ?? (a ? i.dangerous : void 0), b = e.leftIconClassName ?? (a ? i.dangerous : void 0);
-  return /* @__PURE__ */ u("div", { className: i.relative, children: [
+  const t = e.dangerous && !e.disabled, h = e.labelClassName ?? (t ? c.dangerous : void 0), b = e.leftIconClassName ?? (t ? c.dangerous : void 0);
+  return /* @__PURE__ */ u("div", { className: c.relative, children: [
     e.disabled && e.disabledTooltip && /* @__PURE__ */ n(T, { label: e.disabledTooltip, children: /* @__PURE__ */ n(
       "div",
       {
-        className: i.disabledOverlay,
-        onClickCapture: (s) => s.stopPropagation()
+        className: c.disabledOverlay,
+        onClickCapture: (i) => i.stopPropagation()
       }
     ) }),
     /* @__PURE__ */ n(
-      c.Item,
+      s.Item,
       {
         component: "button",
         type: "button",
@@ -153,7 +164,7 @@ function B({
           itemLabel: h
         },
         leftSection: e.leftIconName && /* @__PURE__ */ n(
-          p,
+          I,
           {
             name: e.leftIconName,
             width: 16,
@@ -162,37 +173,37 @@ function B({
             useOriginalColor: e.leftUseOriginalColor
           }
         ),
-        rightSection: w(e),
+        rightSection: y(e),
         disabled: e.disabled,
-        onClick: (s) => {
-          t(), e.onClick && e.onClick(s, e), l && l(s, e);
+        onClick: (i) => {
+          a(), e.onClick && e.onClick(i, e), l && l(i, e);
         },
         children: e.label
       }
     )
   ] });
 }
-function R({
+function z({
   target: e,
   subItems: l,
-  ref: t,
-  ...a
+  ref: a,
+  ...t
 }) {
   return /* @__PURE__ */ n(
-    c.Sub.Item,
+    s.Sub.Item,
     {
-      ref: t,
+      ref: a,
       component: "button",
       type: "button",
       "data-testid": e["data-testid"],
-      leftSection: e.leftIconName && /* @__PURE__ */ n(p, { name: e.leftIconName, width: 16, height: 16 }),
+      leftSection: e.leftIconName && /* @__PURE__ */ n(I, { name: e.leftIconName, width: 16, height: 16 }),
       disabled: e.disabled,
-      rightSection: w(e),
-      ...a,
+      rightSection: y(e),
+      ...t,
       children: e.label
     }
   );
 }
 export {
-  H as MenuWeb
+  q as MenuWeb
 };

package/dist/components/_inner/portal/index.d.ts

@@ -0,0 +1 @@
+export { Portal } from './portal';

package/dist/components/_inner/portal/index.js

@@ -0,0 +1,5 @@
+"use client";
+import { Portal as r } from "./portal.js";
+export {
+  r as Portal
+};

package/dist/components/_inner/portal/portal.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+/**
+ * 把内容挂到浮层的挂载点上。
+ *
+ * 挂载点来自 `UiProvider` 的 `portalRoot`：传了就挂到那里，没传就挂 `document.body`。
+ * 它是宿主传进来的普通值，render 期就能求值，所以不需要「先渲染 null、等 effect
+ * 解析挂载点再渲染」那两段 —— 挂载点在首帧就是最终值。
+ *
+ * 服务端和水合阶段什么都不渲染，避免对不上；之后的客户端渲染直接挂，没有多出来的一帧。
+ * `document.body` 只在客户端那次求值，服务端走不到这里。
+ */
+export declare function Portal({ children }: Readonly<{
+    children?: React.ReactNode;
+}>): React.ReactPortal | null;

package/dist/components/_inner/portal/portal.js

@@ -0,0 +1,19 @@
+"use client";
+import { useSyncExternalStore as e } from "react";
+import { createPortal as r } from "react-dom";
+import "../../../provider/ui-context.js";
+import "react/jsx-runtime";
+import { useUiContext as n } from "../../../provider/hooks.js";
+const i = () => () => {
+}, s = () => !0, c = () => !1;
+function S({ children: t }) {
+  const { portalRoot: o } = n();
+  return e(
+    i,
+    s,
+    c
+  ) ? r(t, o ?? document.body) : null;
+}
+export {
+  S as Portal
+};

package/dist/components/button/styles/button-variables.module.css.js

@@ -1,5 +1,5 @@
 "use client";
-const t = "_buttonVar_xuom7_2", a = {
+const t = "_buttonVar_1oymn_2", a = {
   buttonVar: t
 };
 export {

package/dist/components/drawer/drawer.d.ts

@@ -29,5 +29,5 @@ export type DrawerProps = Omit<MantineDrawerProps, 'closeButtonProps' | 'title'
 /**
  * Pc端抽屉组件
  */
-export declare const Drawer: ({ children, withCloseButton, withXPadding, topPadding, headerAlign, title, classNames, "aria-label": ariaLabel, ...props }: DrawerProps) => import("react").JSX.Element;
+export declare const Drawer: ({ children, withCloseButton, withXPadding, topPadding, headerAlign, title, classNames, "aria-label": ariaLabel, ref, ...props }: DrawerProps) => import("react").JSX.Element;
 export {};

package/dist/components/drawer/drawer.js

@@ -1,63 +1,71 @@
 "use client";
-import { jsxs as m, jsx as a } from "react/jsx-runtime";
-import { Drawer as u, Text as f } from "@mantine/core";
+import { jsx as o, jsxs as f } from "react/jsx-runtime";
+import { Drawer as w, Text as C } from "@mantine/core";
+import { useMergedRef as v } from "@mantine/hooks";
 import { clsx as t } from "clsx";
 import "../../provider/ui-context.js";
 import "react";
-import { useLocale as C } from "../../provider/hooks.js";
-import { IconButton as w } from "../icon-button/icon-button.js";
+import { useLocale as x } from "../../provider/hooks.js";
+import { IconButton as D } from "../icon-button/icon-button.js";
+import { OverlayParentProvider as O } from "../overlay-layer/overlay-parent-context.js";
+import { useMantineOverlayLayer as T } from "../overlay-layer/use-mantine-overlay-layer.js";
 import e from "./drawer.module.css.js";
-const S = ({
+const L = ({
   children: r,
   withCloseButton: i = !0,
-  withXPadding: d = !0,
+  withXPadding: c = !0,
   topPadding: l = !0,
   headerAlign: h = "center",
-  title: o,
-  classNames: n,
+  title: n,
+  classNames: a,
   "aria-label": g,
-  ...s
+  ref: u,
+  ...d
 }) => {
-  const c = o || i;
-  return /* @__PURE__ */ m(
-    u,
+  const s = T("Drawer", d, "drawer"), y = v(s.rootRef, u), m = n || i;
+  return /* @__PURE__ */ o(
+    w,
     {
       position: "right",
-      ...s,
-      title: g ?? (typeof o == "string" ? o : void 0),
+      ...d,
+      ref: y,
+      zIndex: s.zIndex,
+      closeOnEscape: !1,
+      closeOnClickOutside: !1,
+      title: g ?? (typeof n == "string" ? n : void 0),
       withCloseButton: !1,
       classNames: {
-        ...n,
-        header: t(e.hiddenHeader, n?.header),
-        body: t(e.drawerBody, n?.body),
-        content: t(e.drawerContent, n?.content)
+        ...a,
+        header: t(e.hiddenHeader, a?.header),
+        body: t(e.drawerBody, a?.body),
+        content: t(e.drawerContent, a?.content)
       },
-      children: [
-        c && /* @__PURE__ */ a(
-          x,
+      children: /* @__PURE__ */ f(O, { id: s.id, children: [
+        m && /* @__PURE__ */ o(
+          b,
           {
-            title: o,
+            title: n,
             withCloseButton: i,
             headerAlign: h,
-            onClose: s.onClose
+            onClose: d.onClose
           }
         ),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ o(
           "div",
           {
             className: t(e.main, {
-              [e.mainXPadding]: d,
-              [e.mainTopPadding]: !c && l
+              [e.mainXPadding]: c,
+              [e.mainTopPadding]: !m && l
             }),
             children: r
           }
         )
-      ]
+      ] })
     }
   );
-}, x = (r) => {
-  const i = C(), l = typeof r.title == "string" ? f : "div";
-  return /* @__PURE__ */ m(
+}, b = (r) => {
+  const i = x(), l = typeof r.title == "string" ? C : "div";
+  return /* @__PURE__ */ f(
     "div",
     {
       className: t(e.header, {
@@ -65,9 +73,9 @@ const S = ({
         [e.headerAlignStart]: r.headerAlign === "start"
       }),
       children: [
-        /* @__PURE__ */ a(l, { className: e.headerTitle, children: r.title }),
-        r.withCloseButton && /* @__PURE__ */ a(
-          w,
+        /* @__PURE__ */ o(l, { className: e.headerTitle, children: r.title }),
+        r.withCloseButton && /* @__PURE__ */ o(
+          D,
           {
             variant: "text",
             color: "regular",
@@ -82,5 +90,5 @@ const S = ({
   );
 };
 export {
-  S as Drawer
+  L as Drawer
 };

package/dist/components/modal/index.d.ts

@@ -1,2 +1,2 @@
 export { Modal } from './modal';
-export type { ModalProps } from './modal';
+export type { ModalClassNames, ModalCloseButtonProps, ModalOverlayProps, ModalProps, ModalSizePreset, ModalSpacingPreset, } from './modal.types';

package/dist/components/modal/modal.d.ts

@@ -1,6 +1,9 @@
-import { Modal as MModal } from '@mantine/core';
-export type ModalProps = Omit<Parameters<typeof MModal>[0], 'closeButtonProps'>;
+import React from 'react';
+import type { ModalProps } from './modal.types';
 /**
- * Pc端弹窗组件
+ * 对话框（自建实现）。
+ *
+ * 层级、Escape、点遮罩都交给层级模块 `overlay-layer`：层级按打开顺序计算，
+ * Escape 只关最上层，写在 Popover 里面还是外面结果一样。
  */
-export declare const Modal: ({ children, withCloseButton, title, ...props }: ModalProps) => import("react").JSX.Element;
+export declare const Modal: ({ opened, onClose, title, children, centered, size, classNames, className, zIndex, padding, radius, withCloseButton, closeOnClickOutside, closeOnEscape, closeButtonProps, onExitTransitionEnd, transitionProps, overlayProps, onClick, keepMounted, yOffset, xOffset, "aria-label": ariaLabel, }: ModalProps) => React.JSX.Element | null;