@robert-stackflow/oneui 0.0.0-stage → 0.1.0

package/components/Toast.js

@@ -0,0 +1,181 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+import {
+  X,
+  CheckCircle2,
+  Info,
+  TriangleAlert,
+  CircleX,
+  LoaderCircle
+} from "lucide-react";
+import { surfaceMotion, cancelMotion } from "./motion.js";
+import s from "./Toast.module.css";
+const icons = {
+  neutral: Info,
+  success: CheckCircle2,
+  info: Info,
+  warning: TriangleAlert,
+  error: CircleX
+};
+function Toast({
+  toast,
+  position,
+  onDismiss
+}) {
+  const ref = useRef(null), current = useRef(toast), timer = useRef(void 0), pendingId = useRef(null);
+  const [pending, setPending] = useState(false), [error, setError] = useState("");
+  current.current = toast;
+  const dismiss = () => {
+    clearTimeout(timer.current);
+    const message = current.current, node = ref.current;
+    if (!message) return;
+    void surfaceMotion(
+      node,
+      "exit",
+      position.startsWith("top") ? "0 -4px" : "0 4px"
+    ).then((done) => {
+      if (done && current.current?.id === message.id) {
+        if (node.matches(":popover-open")) node.hidePopover();
+        onDismiss(message.id);
+      }
+    });
+  };
+  const arm = () => {
+    clearTimeout(timer.current);
+    const message = current.current, node = ref.current;
+    if (message && !message.closing && !message.options?.persistent && pendingId.current !== message.id && !node?.matches(":hover") && !node?.contains(document.activeElement))
+      timer.current = setTimeout(
+        dismiss,
+        Math.max(0, message.options?.duration ?? 5e3)
+      );
+  };
+  useLayoutEffect(() => {
+    const node = ref.current;
+    setPending(false);
+    setError("");
+    pendingId.current = null;
+    if (!toast) {
+      if (node.matches(":popover-open")) node.hidePopover();
+      return;
+    }
+    if (toast.closing) {
+      dismiss();
+      return;
+    }
+    const already = node.matches(":popover-open");
+    if (!already) node.showPopover();
+    void surfaceMotion(
+      node,
+      already ? "update" : "enter",
+      position.startsWith("top") ? "0 -4px" : "0 4px"
+    );
+    arm();
+    return () => clearTimeout(timer.current);
+  }, [toast, position]);
+  useEffect(() => {
+    const node = ref.current;
+    return () => {
+      clearTimeout(timer.current);
+      cancelMotion(node);
+    };
+  }, []);
+  const execute = async () => {
+    const message = current.current, action2 = message?.options?.action;
+    if (!message || !action2 || pendingId.current === message.id) return;
+    clearTimeout(timer.current);
+    pendingId.current = message.id;
+    setPending(true);
+    setError("");
+    try {
+      await action2.onClick();
+      if (current.current?.id === message.id && action2.closeOnClick !== false)
+        dismiss();
+    } catch {
+      if (current.current?.id === message.id) setError("\u64CD\u4F5C\u672A\u5B8C\u6210\uFF0C\u8BF7\u91CD\u8BD5");
+    } finally {
+      if (current.current?.id === message.id) {
+        pendingId.current = null;
+        setPending(false);
+        arm();
+      }
+    }
+  };
+  const options = toast?.options || {}, tone = options.tone || "neutral", Icon = icons[tone], action = options.action;
+  const icon = options.icon === false ? null : options.icon === true || options.icon === void 0 ? tone !== "neutral" || options.icon === true ? /* @__PURE__ */ jsx(Icon, {}) : null : options.icon;
+  const style = {
+    "--toast-icon-color": options.iconColor,
+    "--toast-text-color": options.textColor
+  };
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        popover: "manual",
+        className: s.toast,
+        "data-position": position,
+        "data-tone": tone,
+        "data-variant": options.variant || "solid",
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        style,
+        onPointerEnter: () => clearTimeout(timer.current),
+        onPointerLeave: arm,
+        onFocus: () => clearTimeout(timer.current),
+        onBlur: (e) => {
+          if (!e.currentTarget.contains(e.relatedTarget)) queueMicrotask(arm);
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Escape") {
+            e.stopPropagation();
+            dismiss();
+          }
+        },
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: s.icon, "aria-hidden": "true", "data-toast-icon": true, children: icon }),
+          /* @__PURE__ */ jsxs("div", { className: s.copy, "data-toast-copy": true, children: [
+            options.title && /* @__PURE__ */ jsx("strong", { children: options.title }),
+            /* @__PURE__ */ jsx("span", { children: toast?.message }),
+            error && /* @__PURE__ */ jsx("small", { role: "alert", children: error })
+          ] }),
+          action && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: s.action,
+              type: "button",
+              "aria-label": action.label,
+              disabled: pending,
+              "data-icon-only": action.display === "icon",
+              onClick: () => void execute(),
+              children: [
+                pending ? /* @__PURE__ */ jsx(LoaderCircle, { className: s.spin }) : action.display !== "text" && action.icon,
+                action.display !== "icon" && /* @__PURE__ */ jsx("span", { children: action.label })
+              ]
+            }
+          ),
+          options.closable !== false && /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: s.close,
+              type: "button",
+              "aria-label": "\u5173\u95ED\u63D0\u793A",
+              onClick: dismiss,
+              children: /* @__PURE__ */ jsx(X, {})
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+}
+export {
+  Toast
+};

package/components/Toast.module.css

@@ -0,0 +1,175 @@
+.toast {
+  position: fixed;
+  inset: auto;
+  margin: 0;
+  padding: 10px 14px;
+  border: 0;
+  border-radius: 10px;
+  background: #303030;
+  color: var(--toast-text-color, #fff);
+  box-shadow:
+    0 8px 28px #0000001c,
+    0 2px 6px #0000000d;
+  max-width: min(460px, calc(100vw - 40px));
+  max-height: min(160px, calc(100vh - 40px));
+  overflow: auto;
+  font-size: 13px;
+  line-height: 20px;
+  scrollbar-width: thin;
+  --tone: #c4c4c4;
+  --soft-tone: #555;
+}
+.toast:popover-open {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+}
+.copy {
+  min-width: 0;
+  display: grid;
+  gap: 2px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.copy strong {
+  font-size: 12px;
+  font-weight: 600;
+}
+.copy small {
+  color: inherit;
+  opacity: 0.8;
+  font-size: 11px;
+}
+.icon {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  align-self: center;
+  width: 20px;
+  height: 20px;
+  color: var(--toast-icon-color, var(--tone));
+}
+.icon svg {
+  display: block;
+  width: 18px;
+  height: 18px;
+}
+.toast button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  flex-shrink: 0;
+  border: 0;
+  border-radius: 5px;
+  color: inherit;
+  font-size: 12px;
+  line-height: 20px;
+  min-height: 26px;
+  transition:
+    background-color var(--motion-hover),
+    opacity var(--motion-hover);
+}
+.action {
+  min-height: 26px;
+  padding: 3px 8px;
+  background: #ffffff18;
+  white-space: nowrap;
+}
+.action:hover:not(:disabled) {
+  background: #ffffff2a;
+}
+.action[data-icon-only="true"] {
+  width: 26px;
+  padding: 4px;
+}
+.action svg {
+  width: 15px;
+  height: 15px;
+}
+.close {
+  width: 26px;
+  height: 26px;
+  padding: 3px;
+  background: transparent;
+  opacity: 0.65;
+}
+.close:hover {
+  opacity: 1;
+  background: #ffffff20;
+}
+.close svg {
+  width: 14px;
+  height: 14px;
+}
+.toast button:focus-visible {
+  outline: 1px solid currentColor;
+  outline-offset: 2px;
+}
+.toast[data-tone="success"] {
+  --tone: #91d5a4;
+  --soft-tone: #257243;
+}
+.toast[data-tone="info"] {
+  --tone: #8ec5ff;
+  --soft-tone: #2566a6;
+}
+.toast[data-tone="warning"] {
+  --tone: #f0c474;
+  --soft-tone: #926313;
+}
+.toast[data-tone="error"] {
+  --tone: #f4a3a3;
+  --soft-tone: #b13d3d;
+}
+.toast[data-variant="soft"] {
+  background: color-mix(in srgb, var(--soft-tone) 8%, var(--surface));
+  color: var(--toast-text-color, var(--fg));
+  box-shadow: var(--shadow);
+  border: 1px solid color-mix(in srgb, var(--soft-tone) 18%, var(--surface));
+}
+.toast[data-variant="soft"] .icon {
+  color: var(--toast-icon-color, var(--soft-tone));
+}
+.toast[data-variant="soft"] .action {
+  background: color-mix(in srgb, var(--soft-tone) 10%, transparent);
+}
+.toast[data-variant="soft"] button:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--soft-tone) 18%, transparent);
+}
+.toast[data-position^="top"] {
+  top: 20px;
+}
+.toast[data-position^="bottom"] {
+  bottom: 20px;
+}
+.toast[data-position$="left"] {
+  left: 20px;
+}
+.toast[data-position$="right"] {
+  right: 20px;
+}
+.toast[data-position$="center"] {
+  left: 50%;
+  transform: translateX(-50%);
+}
+:global([data-theme="dark"]) .toast {
+  box-shadow:
+    0 8px 28px #0000003d,
+    0 2px 6px #00000024;
+}
+:global([data-theme="dark"]) .toast[data-variant="solid"] {
+  background: #333;
+  color: var(--toast-text-color, #f4f4f4);
+}
+:global([data-theme="dark"]) .toast[data-variant="soft"] {
+  --soft-tone: var(--tone);
+}
+.spin {
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/components/ToastProvider.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from "react";
+export type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+export type ToastTone = "neutral" | "success" | "info" | "warning" | "error";
+export type ToastAction = {
+    label: string;
+    icon?: ReactNode;
+    display?: "text" | "icon" | "both";
+    onClick(): void | Promise<void>;
+    closeOnClick?: boolean;
+};
+export type ToastOptions = {
+    duration?: number;
+    persistent?: boolean;
+    closable?: boolean;
+    title?: string;
+    tone?: ToastTone;
+    variant?: "solid" | "soft";
+    icon?: boolean | ReactNode;
+    iconColor?: string;
+    textColor?: string;
+    action?: ToastAction;
+    position?: ToastPosition;
+};
+export type ToastMessage = {
+    message: string;
+    id: number;
+    options?: ToastOptions;
+    closing?: boolean;
+};
+type Notify = (message: string, options?: ToastOptions | ToastTone) => () => void;
+export declare function ToastProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare const useToast: () => Notify;
+export {};

package/components/ToastProvider.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useRef,
+  useState
+} from "react";
+import { useUIConfig } from "./UIProvider.js";
+import { Toast } from "./Toast.js";
+const Context = createContext(() => () => {
+});
+function ToastProvider({ children }) {
+  const config = useUIConfig();
+  const [toast, setToast] = useState(null), counter = useRef(0);
+  const notify = useCallback((message, options) => {
+    const id = ++counter.current;
+    setToast({
+      message,
+      id,
+      options: typeof options === "string" ? { tone: options } : options
+    });
+    return () => setToast(
+      (current) => current?.id === id ? { ...current, closing: true } : current
+    );
+  }, []);
+  const clear = useCallback(
+    (id) => setToast((current) => current?.id === id ? null : current),
+    []
+  );
+  return /* @__PURE__ */ jsxs(Context, { value: notify, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      Toast,
+      {
+        toast,
+        position: toast?.options?.position || config.toastPosition,
+        onDismiss: clear
+      }
+    )
+  ] });
+}
+const useToast = () => useContext(Context);
+export {
+  ToastProvider,
+  useToast
+};

package/components/Tooltip.d.ts

@@ -0,0 +1,10 @@
+import { type ReactElement } from "react";
+type Side = "top" | "bottom" | "left" | "right";
+export declare function Tooltip({ content, placement, children, }: {
+    content: string;
+    placement?: Side;
+    children: ReactElement<{
+        "aria-describedby"?: string;
+    }>;
+}): import("react").JSX.Element;
+export {};

package/components/Tooltip.js

@@ -0,0 +1,169 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  cloneElement,
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { useUIConfig } from "./UIProvider.js";
+import { createPortal } from "react-dom";
+import { surfaceMotion, cancelMotion } from "./motion.js";
+import {
+  claimTooltip,
+  releaseTooltip,
+  retainTooltipEvents,
+  keyboardTooltip,
+  tooltipDelay
+} from "./tooltipState.js";
+import s from "./Tooltip.module.css";
+import { useSurfacePortal } from "./surfacePortal.js";
+function Tooltip({
+  content,
+  placement,
+  children
+}) {
+  const config = useUIConfig();
+  const preferred = placement || config.tooltipPlacement, id = useId();
+  const anchor = useRef(null), popup = useRef(null), timer = useRef(void 0);
+  const owner = useSurfacePortal(), portalHost = owner?.host || document.body;
+  const [requestedOpen, setOpen] = useState(false), opened = useRef(false), visible = useRef(false);
+  const open = requestedOpen && owner?.active !== false;
+  const hide = useCallback((immediate = false) => {
+    clearTimeout(timer.current);
+    opened.current = false;
+    setOpen(false);
+    releaseTooltip(hide, visible.current);
+    visible.current = false;
+    if (immediate && popup.current) {
+      cancelMotion(popup.current);
+      if (popup.current.matches(":popover-open")) popup.current.hidePopover();
+    }
+  }, []);
+  const schedule = () => {
+    if (owner?.active === false) return;
+    clearTimeout(timer.current);
+    claimTooltip(hide);
+    timer.current = setTimeout(() => {
+      opened.current = true;
+      setOpen(true);
+    }, tooltipDelay());
+  };
+  useEffect(() => {
+    const release = retainTooltipEvents(), node = popup.current;
+    return () => {
+      clearTimeout(timer.current);
+      releaseTooltip(hide, visible.current);
+      cancelMotion(node);
+      release();
+    };
+  }, [hide, portalHost]);
+  useLayoutEffect(() => {
+    if (owner?.active === false) hide(true);
+  }, [owner?.active, hide]);
+  useLayoutEffect(() => {
+    const node = popup.current;
+    if (!open) {
+      if (node.matches(":popover-open"))
+        void surfaceMotion(node, "exit", node.dataset.offset).then((done) => {
+          if (done && !opened.current && node.matches(":popover-open"))
+            node.hidePopover();
+        });
+      return;
+    }
+    if (!node.matches(":popover-open")) node.showPopover();
+    visible.current = true;
+    const a = anchor.current.getBoundingClientRect(), w = node.offsetWidth, h = node.offsetHeight, gap = 10;
+    const spaces = {
+      top: a.top,
+      bottom: innerHeight - a.bottom,
+      left: a.left,
+      right: innerWidth - a.right
+    };
+    const opposite = {
+      top: "bottom",
+      bottom: "top",
+      left: "right",
+      right: "left"
+    };
+    const sides = Object.keys(spaces);
+    const order = [
+      preferred,
+      opposite[preferred],
+      ...sides.sort((x2, y2) => spaces[y2] - spaces[x2])
+    ];
+    const actual = order.find(
+      (v) => spaces[v] >= (v === "top" || v === "bottom" ? h : w) + gap + 8
+    ) || order[2];
+    let x = a.left + a.width / 2 - w / 2, y = a.top - h - gap;
+    if (actual === "bottom") y = a.bottom + gap;
+    if (actual === "left" || actual === "right") {
+      x = actual === "left" ? a.left - w - gap : a.right + gap;
+      y = a.top + a.height / 2 - h / 2;
+    }
+    x = Math.max(8, Math.min(x, innerWidth - w - 8));
+    y = Math.max(8, Math.min(y, innerHeight - h - 8));
+    const vertical = actual === "top" || actual === "bottom", extent = vertical ? w : h, margin = Math.min(17, extent / 2);
+    node.style.left = x + "px";
+    node.style.top = y + "px";
+    node.style.setProperty(
+      "--arrow",
+      Math.max(
+        margin,
+        Math.min(
+          extent - margin,
+          vertical ? a.left + a.width / 2 - x : a.top + a.height / 2 - y
+        )
+      ) + "px"
+    );
+    node.dataset.side = actual;
+    node.dataset.offset = {
+      top: "0 3px",
+      bottom: "0 -3px",
+      left: "3px 0",
+      right: "-3px 0"
+    }[actual];
+    void surfaceMotion(node, "enter", node.dataset.offset);
+  }, [open, preferred, portalHost]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: anchor,
+        className: s.anchor,
+        onPointerEnter: (e) => {
+          if (e.pointerType !== "touch" && !e.buttons) schedule();
+        },
+        onPointerLeave: () => hide(),
+        onPointerDown: () => hide(),
+        onFocus: (e) => {
+          if (keyboardTooltip() && e.target.matches(":focus-visible"))
+            schedule();
+        },
+        onBlur: () => hide(),
+        children: cloneElement(children, {
+          "aria-describedby": [children.props["aria-describedby"], open ? id : void 0].filter(Boolean).join(" ") || void 0
+        })
+      }
+    ),
+    createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: popup,
+          id,
+          role: "tooltip",
+          popover: "manual",
+          className: s.tooltip,
+          children: content
+        }
+      ),
+      portalHost
+    )
+  ] });
+}
+export {
+  Tooltip
+};

package/components/Tooltip.module.css

@@ -0,0 +1,53 @@
+.anchor {
+  display: inline-flex;
+  align-items: center;
+}
+.tooltip {
+  position: fixed;
+  inset: auto;
+  margin: 0;
+  max-width: min(320px, calc(100vw - 16px));
+  padding: 6px 9px;
+  border-radius: 10px;
+  background: #303030;
+  color: #fff;
+  border: 1px solid #303030;
+  box-shadow: 0 3px 12px rgb(0 0 0 / 0.14);
+  font: 400 11px/16px var(--ui-font);
+  overflow: visible;
+  pointer-events: none;
+}
+:global([data-theme="dark"]) .tooltip {
+  box-shadow: 0 3px 12px rgb(0 0 0 / 0.22);
+}
+.tooltip::before {
+  content: "";
+  position: absolute;
+  background: inherit;
+  width: 14px;
+  height: 8px;
+}
+.tooltip[data-side="top"]::before {
+  bottom: -7px;
+  left: calc(var(--arrow) - 7px);
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+}
+.tooltip[data-side="bottom"]::before {
+  top: -7px;
+  left: calc(var(--arrow) - 7px);
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+}
+.tooltip[data-side="left"]::before {
+  right: -7px;
+  top: calc(var(--arrow) - 7px);
+  width: 8px;
+  height: 14px;
+  clip-path: polygon(100% 50%, 0 0, 0 100%);
+}
+.tooltip[data-side="right"]::before {
+  left: -7px;
+  top: calc(var(--arrow) - 7px);
+  width: 8px;
+  height: 14px;
+  clip-path: polygon(0 50%, 100% 0, 100% 100%);
+}

package/components/TreeSelect.d.ts

@@ -0,0 +1,23 @@
+import { type FieldOptions } from "./field";
+import { type HierarchyLoader, type HierarchyOption } from "./hierarchy";
+type Base = FieldOptions & {
+    options: HierarchyOption[];
+    label: string;
+    searchable?: boolean;
+    clearable?: boolean;
+    placeholder?: string;
+    loadChildren?: HierarchyLoader;
+    defaultExpanded?: string[];
+};
+export type TreeSelectProps = Base & ({
+    multiple?: false;
+    value: string;
+    onChange(value: string): void;
+} | {
+    multiple: true;
+    value: string[];
+    onChange(value: string[]): void;
+    checkStrictly?: boolean;
+});
+export declare function TreeSelect(props: TreeSelectProps): import("react").JSX.Element;
+export {};