@wisdomgarden/torque 0.1.0

package/dist/components/popover/hooks.js

@@ -0,0 +1,131 @@
+"use client";
+import { useEffect as l, useState as m, useRef as b, useCallback as p, useMemo as E } from "react";
+import { registerOpenPopover as y, isTopmostOpenPopover as A } from "./popover-stack.js";
+function L(u, t = !1) {
+  const [n, e] = m(t || u), [r, o] = m(
+    u ? "open" : "closing"
+  ), s = b(0);
+  l(() => (u ? (e(!0), s.current = requestAnimationFrame(() => {
+    s.current = requestAnimationFrame(() => {
+      o("open");
+    });
+  })) : (o("closing"), t && e(!0)), () => {
+    s.current && cancelAnimationFrame(s.current);
+  }), [t, u]);
+  const i = p(() => {
+    r === "closing" && !t && e(!1);
+  }, [r, t]);
+  return { mounted: n, animState: r, handleTransitionEnd: i };
+}
+function P(u, t, n, e, r, o, s, i) {
+  const c = b(null);
+  l(() => {
+    u === "click" && (t ? c.current = document.activeElement : o().some(
+      (f) => f.contains(document.activeElement)
+    ) && c.current?.focus());
+  }, [t, u, o]), l(() => {
+    if (u !== "click" || n !== "open" || !e || i) return;
+    if (s?.current) {
+      s.current.focus();
+      return;
+    }
+    (h([r.current])[0] ?? r.current)?.focus();
+  }, [
+    n,
+    e,
+    u,
+    r,
+    s,
+    i
+  ]);
+}
+const x = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function h(u) {
+  const t = u.flatMap((n) => !n || n.inert || n.getAttribute("aria-hidden") === "true" ? [] : Array.from(
+    n.querySelectorAll(x)
+  ));
+  return Array.from(new Set(t)).filter(
+    (n) => !n.hasAttribute("data-focus-sentinel")
+  );
+}
+function C(u, t, n, e, r, o, s) {
+  l(() => {
+    if (t)
+      return y(r, o);
+  }, [o, r, t]), l(() => {
+    if (!u || !t) return;
+    const i = (c) => {
+      c.key !== "Escape" || !A(r) || (c.preventDefault(), c.stopImmediatePropagation(), n(), s ? s() : e.current?.focus());
+    };
+    return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
+  }, [u, t, n, e, r, s]);
+}
+function T(u, t, n, e) {
+  return E(() => {
+    if (!u || !t) return {};
+    const r = e / 2, o = {
+      "--t-arrow-size": `${e}px`,
+      width: e,
+      height: e
+    };
+    return n === "bottom" ? { ...o, top: -r - 1, left: t.x ?? "", bottom: "" } : n === "top" ? { ...o, bottom: -r - 1, left: t.x ?? "", top: "" } : n === "right" ? { ...o, left: -r - 1, top: t.y ?? "" } : n === "left" ? { ...o, right: -r - 1, top: t.y ?? "" } : o;
+  }, [u, t, n, e]);
+}
+function k(u, t, n, e, r, o, s, i, c, f) {
+  return E(() => u ? { ref: n } : t === "none" ? {
+    ref: n,
+    "aria-expanded": o,
+    onKeyDown: f
+  } : t === "hover" ? {
+    ref: n,
+    onMouseEnter: () => {
+      clearTimeout(i.current), s(!0);
+    },
+    onMouseLeave: () => {
+      i.current = window.setTimeout(() => s(!1), 100);
+    },
+    onFocus: () => s(!0),
+    onBlur: () => {
+      i.current = window.setTimeout(() => s(!1), 100);
+    },
+    "aria-describedby": e,
+    onKeyDown: f
+  } : {
+    ref: n,
+    onClick: (a) => {
+      r(), c?.(a);
+    },
+    onKeyDown: (a) => {
+      a.key === "Enter" && (a.preventDefault(), r()), f?.(a);
+    },
+    "aria-expanded": o,
+    "aria-haspopup": "dialog",
+    "aria-controls": e
+  }, [
+    u,
+    t,
+    n,
+    e,
+    r,
+    o,
+    s,
+    i,
+    c,
+    f
+  ]);
+}
+export {
+  h as getFocusableElements,
+  L as useAnimatedMount,
+  T as useArrowStyle,
+  C as useEscapeClose,
+  P as usePopoverFocus,
+  k as useTriggerProps
+};

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

@@ -0,0 +1,8 @@
+import { PopoverDropdown } from './popover-dropdown';
+import { PopoverTarget } from './popover-target';
+export declare const Popover: (({ children, position, offset: offsetProp, opened: openedProp, defaultOpened, onOpenChange, disabled, withArrow, arrowSize, trigger, closeOnClickOutside, closeOnEscape, restoreFocus, strategy, initialFocusRef, trapFocus, preventAutoFocus, "aria-labelledby": ariaLabelledby, }: import("./popover.types").PopoverProps) => import("react").JSX.Element) & {
+    Target: ({ children, ref, onClick, onKeyDown, ...restProps }: import("./popover.types").PopoverTargetProps) => import("react").JSX.Element;
+    Dropdown: ({ children, arrowClassName, zIndex, width, maxHeight, matchTargetWidth, radius, withinPortal, keepMounted, ref, ...restProps }: import("./popover.types").PopoverDropdownProps) => import("react").JSX.Element | null;
+};
+export { PopoverDropdown, PopoverTarget };
+export * from './popover.types';

package/dist/components/popover/index.js

@@ -0,0 +1,13 @@
+"use client";
+import { Popover as o } from "./popover.js";
+import { PopoverDropdown as r } from "./popover-dropdown.js";
+import { PopoverTarget as e } from "./popover-target.js";
+const i = Object.assign(o, {
+  Target: e,
+  Dropdown: r
+});
+export {
+  i as Popover,
+  r as PopoverDropdown,
+  e as PopoverTarget
+};

package/dist/components/popover/popover-context.d.ts

@@ -0,0 +1,4 @@
+import { PopoverContextValue } from './popover.types';
+export declare const PopoverContext: import("react").Context<PopoverContextValue | null>;
+export declare const PopoverLayerContext: import("react").Context<number | null>;
+export declare function usePopoverContext(): PopoverContextValue;

package/dist/components/popover/popover-context.js

@@ -0,0 +1,16 @@
+"use client";
+import { createContext as e, useContext as t } from "react";
+const n = e(null), p = e(null);
+function s() {
+  const o = t(n);
+  if (!o)
+    throw new Error(
+      "Popover components must be used within a Popover provider"
+    );
+  return o;
+}
+export {
+  n as PopoverContext,
+  p as PopoverLayerContext,
+  s as usePopoverContext
+};

package/dist/components/popover/popover-dropdown.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PopoverDropdownProps } from './popover.types';
+export declare const PopoverDropdown: ({ children, arrowClassName, zIndex, width, maxHeight, matchTargetWidth, radius, withinPortal, keepMounted, ref, ...restProps }: PopoverDropdownProps) => React.JSX.Element | null;

package/dist/components/popover/popover-dropdown.js

@@ -0,0 +1,149 @@
+"use client";
+import { jsxs as S, jsx as c } from "react/jsx-runtime";
+import { getDefaultZIndex as te, Portal as re } from "@mantine/core";
+import { useMergedRef as ne } from "@mantine/hooks";
+import { clsx as I } from "clsx";
+import { useContext as ie, useRef as ae, useCallback as se } from "react";
+import { useAnimatedMount as de, usePopoverFocus as le, useArrowStyle as ce, getFocusableElements as ue } from "./hooks.js";
+import { PopoverLayerContext as M, usePopoverContext as fe } from "./popover-context.js";
+import T from "./styles/popover.module.css.js";
+const Fe = ({
+  children: A,
+  arrowClassName: C,
+  zIndex: D,
+  width: t,
+  maxHeight: a,
+  matchTargetWidth: N = !1,
+  radius: z = "sm",
+  withinPortal: L = !0,
+  keepMounted: Z = !1,
+  ref: j,
+  ...e
+}) => {
+  const u = ie(M), {
+    opened: r,
+    trigger: n,
+    strategy: k,
+    x: W,
+    y: $,
+    resolvedSide: f,
+    middlewareData: s,
+    floatingRef: d,
+    setFloating: H,
+    registerNestedFloatingElement: p,
+    getFloatingScopeElements: v,
+    withArrow: m,
+    arrowSize: O,
+    arrowRef: P,
+    hoverTimerRef: g,
+    setOpen: V,
+    id: q,
+    initialFocusRef: B,
+    trapFocus: h,
+    preventAutoFocus: G,
+    ariaLabelledby: J
+  } = fe(), { mounted: x, animState: w, handleTransitionEnd: K } = de(
+    r,
+    Z
+  ), y = ae(null), Q = se(
+    (o) => {
+      y.current?.(), y.current = o ? p(o) : null;
+    },
+    [p]
+  ), U = ne(
+    d,
+    H,
+    Q,
+    j
+  ), l = D ?? (u === null ? te("popover") : u + 1);
+  le(
+    n,
+    r,
+    w,
+    x,
+    d,
+    v,
+    B,
+    G
+  );
+  const b = (o) => /* @__PURE__ */ c(
+    "span",
+    {
+      tabIndex: 0,
+      "data-focus-sentinel": o,
+      "aria-hidden": "true",
+      style: { position: "fixed", width: 0, height: 0, opacity: 0 },
+      onFocus: () => {
+        const i = ue(v());
+        if (i.length === 0) {
+          d.current?.focus();
+          return;
+        }
+        (o === "start" ? i[i.length - 1] : i[0]).focus();
+      }
+    }
+  ), X = ce(
+    m,
+    s.arrow,
+    f,
+    O
+  ), Y = typeof t == "number" ? `${t}px` : t, _ = t ? Y : void 0, ee = typeof a == "number" ? `${a}px` : a, oe = N ? "var(--t-popover-reference-width)" : _;
+  if (!x) return null;
+  const F = "role" in e ? e.role : n === "click" ? "dialog" : void 0, R = F === "dialog", E = /* @__PURE__ */ S(
+    "div",
+    {
+      id: q,
+      role: F,
+      "aria-modal": R ? !1 : void 0,
+      "aria-labelledby": R ? J : void 0,
+      ref: U,
+      tabIndex: -1,
+      "data-state": w,
+      "data-radius": z,
+      "data-side": f,
+      style: {
+        position: k,
+        left: W ?? 0,
+        top: $ ?? 0,
+        zIndex: l,
+        "--t-popover-z": l,
+        "--t-popover-width": oe,
+        "--t-popover-max-height": ee,
+        visibility: s.hide?.referenceHidden ? "hidden" : void 0,
+        pointerEvents: s.hide?.referenceHidden ? "none" : void 0
+      },
+      onTransitionEnd: K,
+      onMouseEnter: n === "hover" ? () => clearTimeout(g.current) : void 0,
+      onMouseLeave: n === "hover" ? () => {
+        g.current = window.setTimeout(
+          () => V(!1),
+          100
+        );
+      } : void 0,
+      ...e,
+      "aria-hidden": r ? e["aria-hidden"] : !0,
+      inert: r ? e.inert : !0,
+      className: I(T.popover, e.className),
+      children: [
+        /* @__PURE__ */ S(M.Provider, { value: l, children: [
+          h && b("start"),
+          A,
+          h && b("end")
+        ] }),
+        m && /* @__PURE__ */ c(
+          "div",
+          {
+            ref: P,
+            "aria-hidden": "true",
+            className: I(T.arrow, C),
+            style: { ...X }
+          }
+        )
+      ]
+    }
+  );
+  return L ? /* @__PURE__ */ c(re, { children: E }) : E;
+};
+export {
+  Fe as PopoverDropdown
+};

package/dist/components/popover/popover-stack.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 登记已打开的 Popover，并返回只清理本次登记的注销函数。
+ * depth 表示逻辑嵌套层级，order 用于区分同层浮层的打开先后。
+ */
+export declare function registerOpenPopover(id: string, depth: number): () => void;
+/**
+ * 判断 Popover 是否位于当前逻辑栈顶：嵌套更深者优先，同一深度下后打开者优先。
+ * Escape 关闭前使用该结果，避免一次按键同时关闭多层浮层。
+ */
+export declare function isTopmostOpenPopover(id: string): boolean;

package/dist/components/popover/popover-stack.js

@@ -0,0 +1,24 @@
+"use client";
+const r = /* @__PURE__ */ new Map();
+let p = 0;
+function s(e, t) {
+  const o = {
+    depth: t,
+    order: p++
+  };
+  return r.set(e, o), () => {
+    r.get(e) === o && r.delete(e);
+  };
+}
+function f(e) {
+  const t = r.get(e);
+  if (!t) return !1;
+  for (const [o, n] of r)
+    if (o !== e && (n.depth > t.depth || n.depth === t.depth && n.order > t.order))
+      return !1;
+  return !0;
+}
+export {
+  f as isTopmostOpenPopover,
+  s as registerOpenPopover
+};

package/dist/components/popover/popover-target.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PopoverTargetProps } from './popover.types';
+export declare const PopoverTarget: ({ children, ref, onClick, onKeyDown, ...restProps }: PopoverTargetProps) => React.JSX.Element;

package/dist/components/popover/popover-target.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as b } from "react/jsx-runtime";
+import { useMergedRef as v } from "@mantine/hooks";
+import { clsx as T } from "clsx";
+import r from "react";
+import { useTriggerProps as E } from "./hooks.js";
+import { usePopoverContext as N } from "./popover-context.js";
+import P from "./styles/popover.module.css.js";
+const q = ({
+  children: e,
+  ref: s,
+  onClick: m,
+  onKeyDown: f,
+  ...o
+}) => {
+  const {
+    disabled: i,
+    trigger: n,
+    id: a,
+    toggle: p,
+    opened: l,
+    setOpen: c,
+    hoverTimerRef: g,
+    referenceRef: d,
+    setReference: u
+  } = N(), R = r.isValidElement(e) ? e.props.ref : void 0, x = v(d, u, s, R), t = E(
+    i,
+    n,
+    x,
+    a,
+    p,
+    l,
+    c,
+    g,
+    m,
+    f
+  );
+  return r.isValidElement(e) ? r.cloneElement(
+    e,
+    { ...t, ...o }
+  ) : /* @__PURE__ */ b(
+    "span",
+    {
+      role: "button",
+      tabIndex: 0,
+      ...t,
+      ...o,
+      className: T(P.fallbackTarget, o.className),
+      children: e
+    }
+  );
+};
+export {
+  q as PopoverTarget
+};

package/dist/components/popover/popover.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PopoverProps } from './popover.types';
+export declare const Popover: ({ children, position, offset: offsetProp, opened: openedProp, defaultOpened, onOpenChange, disabled, withArrow, arrowSize, trigger, closeOnClickOutside, closeOnEscape, restoreFocus, strategy, initialFocusRef, trapFocus, preventAutoFocus, "aria-labelledby": ariaLabelledby, }: PopoverProps) => React.JSX.Element;

package/dist/components/popover/popover.js

@@ -0,0 +1,175 @@
+"use client";
+import { jsx as ne } from "react/jsx-runtime";
+import { offset as oe, flip as se, size as re, shift as le, limitShift as ce, arrow as ae, hide as ie, useFloating as de, autoUpdate as ue } from "@floating-ui/react-dom";
+import { useDirection as fe, getFloatingPosition as pe } from "@mantine/core";
+import _, { useRef as l, useId as me, useCallback as c, useEffect as ge, useMemo as q } from "react";
+import { useEscapeClose as ve } from "./hooks.js";
+import { PopoverContext as A } from "./popover-context.js";
+const g = 8, ye = ({
+  children: B,
+  position: H = "bottom",
+  offset: y = 8,
+  opened: C,
+  defaultOpened: J = !1,
+  onOpenChange: N,
+  disabled: b = !1,
+  withArrow: r = !1,
+  arrowSize: a = 8,
+  trigger: D = "click",
+  closeOnClickOutside: I = !0,
+  closeOnEscape: K = !0,
+  restoreFocus: Q,
+  strategy: v = "absolute",
+  initialFocusRef: L,
+  trapFocus: M = !1,
+  preventAutoFocus: S = !1,
+  "aria-labelledby": $
+}) => {
+  const h = _.useContext(A), G = h?.registerNestedFloatingElement, x = h ? h.depth + 1 : 0, E = C !== void 0, [W, X] = _.useState(J), t = E ? C : W, i = l(null), d = l(null), u = l(null), R = l(/* @__PURE__ */ new Set()), T = l(0), F = me(), { dir: Y } = fe(), o = c(
+    (e) => {
+      E || X(e), N?.(e);
+    },
+    [E, N]
+  ), P = c(() => o(!1), [o]), j = c(() => o(!t), [t, o]), k = c(
+    (e) => {
+      R.current.add(e);
+      const n = G?.(e);
+      return () => {
+        R.current.delete(e), n?.();
+      };
+    },
+    [G]
+  ), f = c(() => {
+    const e = u.current ? [u.current] : [];
+    return R.current.forEach((n) => {
+      n.isConnected && e.push(n);
+    }), Array.from(new Set(e));
+  }, []);
+  ge(() => {
+    if (!I || !t) return;
+    const e = (n) => {
+      const m = n.composedPath(), s = d.current;
+      s && m.includes(s) || f().some((te) => m.includes(te)) || P();
+    };
+    return document.addEventListener("mousedown", e, !0), document.addEventListener("touchstart", e, !0), () => {
+      document.removeEventListener("mousedown", e, !0), document.removeEventListener("touchstart", e, !0);
+    };
+  }, [I, t, P, f]), ve(
+    K,
+    t,
+    P,
+    d,
+    F,
+    x,
+    Q
+  );
+  const Z = q(
+    () => [
+      oe(y + (r ? a / 2 : 0)),
+      se({ padding: g }),
+      // 必须在 shift 之前：否则 availableHeight 是 shift 推动后的位置算出的（≈整屏），高度约束失效
+      re({
+        padding: g,
+        apply({ availableWidth: e, availableHeight: n, rects: m, elements: s }) {
+          s.floating.style.setProperty(
+            "--t-popover-available-width",
+            `${Math.max(0, e)}px`
+          ), s.floating.style.setProperty(
+            "--t-popover-available-height",
+            `${Math.max(0, n)}px`
+          ), s.floating.style.setProperty(
+            "--t-popover-reference-width",
+            `${m.reference.width}px`
+          );
+        }
+      }),
+      le({
+        padding: g,
+        crossAxis: !0,
+        mainAxis: !0,
+        limiter: ce()
+      }),
+      ...r ? (
+        // floating-ui 的 arrow 中间件按设计就是收一个 ref 对象（它在定位阶段自己读
+        // .current），不是我们在渲染期读 ref 的值。没有保留该 API 的改写方式。
+        // eslint-disable-next-line react-hooks/refs
+        [ae({ element: i, padding: g })]
+      ) : [],
+      ie()
+    ],
+    [y, r, a, i]
+  ), {
+    x: w,
+    y: O,
+    refs: p,
+    placement: z,
+    middlewareData: U
+  } = de({
+    open: t,
+    strategy: v,
+    placement: pe(Y, H),
+    middleware: Z,
+    whileElementsMounted: ue
+  }), V = z.split("-")[0], ee = q(
+    () => ({
+      opened: t,
+      setOpen: o,
+      toggle: j,
+      trigger: D,
+      disabled: b,
+      id: F,
+      withArrow: r,
+      arrowSize: a,
+      x: w,
+      y: O,
+      strategy: v,
+      resolvedSide: V,
+      middlewareData: U,
+      hoverTimerRef: T,
+      referenceRef: d,
+      floatingRef: u,
+      arrowRef: i,
+      setReference: p.setReference,
+      setFloating: p.setFloating,
+      depth: x,
+      registerNestedFloatingElement: k,
+      getFloatingScopeElements: f,
+      initialFocusRef: L,
+      trapFocus: M,
+      preventAutoFocus: S,
+      ariaLabelledby: $
+    }),
+    [
+      t,
+      o,
+      j,
+      D,
+      b,
+      F,
+      r,
+      a,
+      w,
+      O,
+      v,
+      V,
+      U,
+      T,
+      d,
+      u,
+      i,
+      p.setReference,
+      p.setFloating,
+      x,
+      k,
+      f,
+      L,
+      M,
+      S,
+      $
+    ]
+  );
+  return /* @__PURE__ */ ne(A.Provider, { value: ee, children: B });
+};
+export {
+  ye as Popover
+};