gbs-add-block 1.2.13 → 1.2.15

package/source/beta-components/dialog/core/dialog.ts

@@ -0,0 +1,11 @@
+import { createDialogApi } from "./api";
+import { createDialogStore } from "./store";
+
+/** The store behind `dialog`, and behind any `<DialogHost />` without a `store` prop. */
+export const dialogStore = createDialogStore();
+
+/**
+ * Ask the user something from anywhere and `await` the answer. Where there is
+ * no document (a server render), calls settle at once as a cancel.
+ */
+export const dialog = createDialogApi(dialogStore, () => typeof document !== "undefined");

package/source/beta-components/dialog/core/index.ts

@@ -0,0 +1,7 @@
+// Framework-free: the dialog queue and the promise API run without React.
+export { createDialogApi } from "./api";
+export type { DialogApi } from "./api";
+export { createDialogStore, resultFor } from "./store";
+export type { DialogStore } from "./store";
+export { dialog, dialogStore } from "./dialog";
+export type * from "./types";

package/source/beta-components/dialog/core/store.ts

@@ -0,0 +1,81 @@
+import type {
+  AlertOptions,
+  ConfirmOptions,
+  DialogKind,
+  DialogRequest,
+  DialogSnapshot,
+  PromptOptions,
+} from "./types";
+
+export interface DialogStore {
+  subscribe(listener: () => void): () => void;
+  getSnapshot(): DialogSnapshot;
+  getServerSnapshot(): DialogSnapshot;
+  open(kind: "alert", options: AlertOptions): Promise<void>;
+  open(kind: "confirm", options: ConfirmOptions): Promise<boolean>;
+  open(kind: "prompt", options: PromptOptions): Promise<string | null>;
+  /** Closes a request and settles its promise. */
+  resolve(id: string, confirmed: boolean, value?: string): void;
+  /** Cancels every open and waiting dialog. */
+  dismissAll(): void;
+}
+
+const EMPTY: DialogSnapshot = { queue: [] };
+
+/** What each kind's promise resolves with. */
+export function resultFor(kind: DialogKind, confirmed: boolean, value = ""): boolean | string | null | undefined {
+  if (kind === "confirm") return confirmed;
+  if (kind === "prompt") return confirmed ? value : null;
+  return undefined;
+}
+
+/**
+ * A queue of dialogs, one on screen at a time, with no React. Each request is a
+ * promise that settles when the user answers, so callers can simply `await` it.
+ */
+export function createDialogStore(): DialogStore {
+  let snapshot: DialogSnapshot = EMPTY;
+  let counter = 0;
+  const listeners = new Set<() => void>();
+  const settlers = new Map<string, (result: unknown) => void>();
+
+  function commit(queue: readonly DialogRequest[]) {
+    snapshot = { queue };
+    for (const listener of listeners) listener();
+  }
+
+  function open(kind: DialogKind, options: AlertOptions | ConfirmOptions | PromptOptions) {
+    const id = `dialog-${++counter}`;
+    return new Promise<unknown>((resolve) => {
+      settlers.set(id, resolve);
+      commit([...snapshot.queue, { id, kind, options } as DialogRequest]);
+    });
+  }
+
+  function resolve(id: string, confirmed: boolean, value?: string) {
+    const request = snapshot.queue.find((item) => item.id === id);
+    const settle = settlers.get(id);
+    if (!request || !settle) return;
+    settlers.delete(id);
+    commit(snapshot.queue.filter((item) => item.id !== id));
+    settle(resultFor(request.kind, confirmed, value));
+  }
+
+  function dismissAll() {
+    for (const request of snapshot.queue) resolve(request.id, false);
+  }
+
+  return {
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    getSnapshot: () => snapshot,
+    getServerSnapshot: () => EMPTY,
+    open: open as DialogStore["open"],
+    resolve,
+    dismissAll,
+  };
+}

package/source/beta-components/dialog/core/types.ts

@@ -0,0 +1,59 @@
+import type { ReactNode } from "react";
+
+export type DialogKind = "alert" | "confirm" | "prompt";
+export type DialogIntent = "default" | "info" | "success" | "warning" | "danger";
+export type DialogSize = "sm" | "md";
+
+export interface DialogBaseOptions {
+  title: ReactNode;
+  description?: ReactNode;
+  /** Sets the icon and the confirm button's color. `danger` also focuses Cancel first. */
+  intent?: DialogIntent;
+  /** Replaces the intent's icon; `null` hides it. */
+  icon?: ReactNode;
+  confirmLabel?: ReactNode;
+  /** Escape and a backdrop click count as Cancel. Default true. */
+  dismissible?: boolean;
+  size?: DialogSize;
+}
+
+export interface AlertOptions extends DialogBaseOptions {
+  /** Runs on OK. The dialog waits while it runs and shows its error if it throws. */
+  onConfirm?(): void | Promise<void>;
+}
+
+export interface ConfirmOptions extends DialogBaseOptions {
+  cancelLabel?: ReactNode;
+  /** Runs on Confirm. The dialog waits while it runs and shows its error if it throws. */
+  onConfirm?(): void | Promise<void>;
+}
+
+export interface PromptOptions extends DialogBaseOptions {
+  cancelLabel?: ReactNode;
+  defaultValue?: string;
+  placeholder?: string;
+  inputLabel?: ReactNode;
+  inputType?: "text" | "email" | "password" | "number" | "url" | "tel";
+  required?: boolean;
+  /** Return a message to block confirming. */
+  validate?(value: string): string | null | undefined;
+  /** Runs with the value on Confirm. The dialog waits while it runs and shows its error if it throws. */
+  onConfirm?(value: string): void | Promise<void>;
+}
+
+export type DialogRequest =
+  | { id: string; kind: "alert"; options: AlertOptions }
+  | { id: string; kind: "confirm"; options: ConfirmOptions }
+  | { id: string; kind: "prompt"; options: PromptOptions };
+
+export interface DialogSnapshot {
+  /** The first request is on screen; the rest wait their turn. */
+  queue: readonly DialogRequest[];
+}
+
+export interface DialogLocaleText {
+  ok: string;
+  confirm: string;
+  cancel: string;
+  required: string;
+}

package/source/beta-components/dialog/index.ts

@@ -0,0 +1,7 @@
+export { Dialog } from "./react/Dialog";
+export type { DialogAction, DialogProps } from "./react/Dialog";
+export { DialogHost } from "./react/DialogHost";
+export type { DialogHostProps } from "./react/DialogHost";
+export { defaultDialogText } from "./react/locale";
+export type { DialogSlot } from "./react/props";
+export * from "./core";

package/source/beta-components/dialog/react/Dialog.tsx

@@ -0,0 +1,279 @@
+"use client";
+
+import {
+  useEffect,
+  useEffectEvent,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
+import type {
+  DialogIntent,
+  DialogKind,
+  DialogLocaleText,
+  PromptOptions,
+} from "../core/types";
+import { DangerIcon, InfoIcon, SpinnerIcon, SuccessIcon, WarningIcon } from "./icons";
+import { defaultDialogText } from "./locale";
+import { cx, type DialogSlot } from "./props";
+
+/** Matches the CSS transition, so content stays mounted while the dialog animates out. */
+const EXIT_DURATION = 200;
+
+const INTENT_ICONS: Record<DialogIntent, ReactNode> = {
+  default: null,
+  info: <InfoIcon />,
+  success: <SuccessIcon />,
+  warning: <WarningIcon />,
+  danger: <DangerIcon />,
+};
+
+export type DialogAction = "confirm" | "cancel";
+
+export interface DialogProps extends Omit<PromptOptions, "onConfirm"> {
+  open: boolean;
+  /** `alert` has one button, `confirm` two, `prompt` adds a text field. Default `confirm`. */
+  kind?: DialogKind;
+  /**
+   * Runs on Confirm, with the prompt's value. While its promise is pending the
+   * buttons show progress; if it throws, the error message is shown and the
+   * dialog stays open.
+   */
+  onConfirm?(value: string): void | Promise<void>;
+  /** The user answered. Set `open` to false here. */
+  onClose?(action: DialogAction, value: string): void;
+  /** The exit animation finished. */
+  onExited?(): void;
+  id?: string;
+  className?: string;
+  classNames?: Partial<Record<DialogSlot, string>>;
+  style?: CSSProperties;
+  localeText?: Partial<DialogLocaleText>;
+}
+
+const outside = (event: MouseEvent<HTMLDialogElement>) => {
+  if (event.target !== event.currentTarget) return false;
+  const rect = event.currentTarget.getBoundingClientRect();
+  const { clientX: x, clientY: y } = event;
+  return x < rect.left || x > rect.right || y < rect.top || y > rect.bottom;
+};
+
+/** An alert, confirm or prompt dialog. For the promise API, mount `<DialogHost />` and call `dialog.confirm()`. */
+export function Dialog(props: DialogProps) {
+  const {
+    open,
+    kind = "confirm",
+    title,
+    description,
+    intent = "default",
+    icon,
+    confirmLabel,
+    cancelLabel,
+    dismissible = true,
+    size = "sm",
+    defaultValue = "",
+    placeholder,
+    inputLabel,
+    inputType = "text",
+    required = false,
+    validate,
+    onConfirm,
+    onClose,
+    onExited,
+    id: idProp,
+    className,
+    classNames,
+    style,
+    localeText,
+  } = props;
+
+  const reactId = useId();
+  const id = idProp ?? reactId;
+  const text = useMemo(() => ({ ...defaultDialogText, ...localeText }), [localeText]);
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const pressStartedOutside = useRef(false);
+
+  const [value, setValue] = useState(defaultValue);
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  // Reset each time it opens, and keep content mounted through the exit transition.
+  const [previousOpen, setPreviousOpen] = useState(open);
+  const [closing, setClosing] = useState(false);
+  if (previousOpen !== open) {
+    setPreviousOpen(open);
+    setClosing(!open);
+    if (open) {
+      setValue(defaultValue);
+      setError(null);
+      setPending(false);
+    }
+  }
+
+  const exited = useEffectEvent(() => onExited?.());
+  useEffect(() => {
+    if (!closing) return;
+    const timer = setTimeout(() => {
+      setClosing(false);
+      exited();
+    }, EXIT_DURATION);
+    return () => clearTimeout(timer);
+  }, [closing]);
+
+  useEffect(() => {
+    const element = dialogRef.current;
+    if (!element) return;
+    if (open && !element.open) {
+      element.showModal();
+      element.querySelector<HTMLElement>("[data-autofocus]")?.focus();
+    } else if (!open && element.open) {
+      element.close();
+    }
+  }, [open]);
+
+  const confirm = async () => {
+    if (pending || !open) return;
+    if (kind === "prompt") {
+      const message = required && !value.trim() ? text.required : validate?.(value);
+      if (message) {
+        setError(message);
+        return;
+      }
+    }
+    if (onConfirm) {
+      setPending(true);
+      setError(null);
+      try {
+        await onConfirm(value);
+      } catch (reason) {
+        setError(reason instanceof Error ? reason.message : String(reason));
+        setPending(false);
+        return;
+      }
+      setPending(false);
+    }
+    onClose?.("confirm", value);
+  };
+
+  const cancel = () => {
+    if (pending || !open) return;
+    onClose?.("cancel", value);
+  };
+
+  const mounted = open || closing;
+  const resolvedIcon = icon !== undefined ? icon : INTENT_ICONS[intent];
+  // A destructive confirm starts on Cancel, so a stray Enter doesn't delete anything.
+  const focusCancel = kind === "confirm" && intent === "danger";
+  const errorId = `${id}-error`;
+
+  return (
+    <dialog
+      ref={dialogRef}
+      id={id}
+      role="alertdialog"
+      aria-labelledby={`${id}-title`}
+      aria-describedby={description ? `${id}-description` : undefined}
+      className={cx("dl-root", classNames?.root, className)}
+      style={style}
+      data-intent={intent}
+      data-size={size}
+      data-state={open ? "open" : "closed"}
+      onCancel={(event) => {
+        event.preventDefault();
+        if (dismissible) cancel();
+      }}
+      onPointerDown={(event) => {
+        pressStartedOutside.current = outside(event);
+      }}
+      onClick={(event) => {
+        if (dismissible && pressStartedOutside.current && outside(event)) cancel();
+        pressStartedOutside.current = false;
+      }}
+    >
+      {mounted && (
+        <form
+          className="dl-form"
+          noValidate
+          onSubmit={(event) => {
+            event.preventDefault();
+            void confirm();
+          }}
+        >
+          <div className={cx("dl-body", classNames?.body)}>
+            {resolvedIcon != null && (
+              <span className={cx("dl-icon", classNames?.icon)} aria-hidden="true">
+                {resolvedIcon}
+              </span>
+            )}
+            <div className="dl-text">
+              <h2 id={`${id}-title`} className={cx("dl-title", classNames?.title)}>
+                {title}
+              </h2>
+              {description && (
+                <div id={`${id}-description`} className={cx("dl-description", classNames?.description)}>
+                  {description}
+                </div>
+              )}
+              {kind === "prompt" && (
+                <label className="dl-field">
+                  {inputLabel && <span className="dl-label">{inputLabel}</span>}
+                  <input
+                    className={cx("dl-input", classNames?.input)}
+                    type={inputType}
+                    value={value}
+                    placeholder={placeholder}
+                    required={required}
+                    readOnly={pending}
+                    data-autofocus=""
+                    aria-invalid={error ? true : undefined}
+                    aria-describedby={error ? errorId : undefined}
+                    onChange={(event) => {
+                      setValue(event.target.value);
+                      if (error) setError(null);
+                    }}
+                  />
+                </label>
+              )}
+              {error && (
+                <p id={errorId} className="dl-error" role="alert">
+                  {error}
+                </p>
+              )}
+            </div>
+          </div>
+
+          <div className={cx("dl-actions", classNames?.actions)}>
+            {kind !== "alert" && (
+              <button
+                type="button"
+                className={cx("dl-button", classNames?.cancel)}
+                data-variant="secondary"
+                data-autofocus={focusCancel ? "" : undefined}
+                aria-disabled={pending || undefined}
+                onClick={cancel}
+              >
+                {cancelLabel ?? text.cancel}
+              </button>
+            )}
+            <button
+              type="submit"
+              className={cx("dl-button", classNames?.confirm)}
+              data-variant={intent === "danger" ? "danger" : "primary"}
+              data-autofocus={!focusCancel && kind !== "prompt" ? "" : undefined}
+              // aria-disabled rather than disabled, so focus stays on the button while it works.
+              aria-disabled={pending || undefined}
+              aria-busy={pending || undefined}
+            >
+              {pending && <SpinnerIcon />}
+              {confirmLabel ?? (kind === "alert" ? text.ok : text.confirm)}
+            </button>
+          </div>
+        </form>
+      )}
+    </dialog>
+  );
+}

package/source/beta-components/dialog/react/DialogHost.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useState, useSyncExternalStore, type CSSProperties } from "react";
+import { dialogStore } from "../core/dialog";
+import type { DialogStore } from "../core/store";
+import type { DialogLocaleText, DialogRequest } from "../core/types";
+import { Dialog } from "./Dialog";
+import type { DialogSlot } from "./props";
+
+export interface DialogHostProps {
+  /** A store from `createDialogStore()`. Defaults to the one behind `dialog`. */
+  store?: DialogStore;
+  /** Applied to every dialog this host shows. */
+  className?: string;
+  classNames?: Partial<Record<DialogSlot, string>>;
+  style?: CSSProperties;
+  localeText?: Partial<DialogLocaleText>;
+}
+
+/** Mount once. Shows the dialogs requested through `dialog.alert/confirm/prompt`, one at a time. */
+export function DialogHost({ store = dialogStore, ...shared }: DialogHostProps) {
+  const { queue } = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot);
+  const current = queue[0];
+
+  // Keep the last dialog rendered while it animates out.
+  const [shown, setShown] = useState<DialogRequest | undefined>(current);
+  if (current && current !== shown) setShown(current);
+
+  if (!shown) return null;
+
+  return (
+    <Dialog
+      key={shown.id}
+      {...shown.options}
+      {...shared}
+      open={shown === current}
+      kind={shown.kind}
+      onConfirm={shown.options.onConfirm}
+      onClose={(action, value) => store.resolve(shown.id, action === "confirm", value)}
+      onExited={() => {
+        if (store.getSnapshot().queue.length === 0) setShown(undefined);
+      }}
+    />
+  );
+}

package/source/beta-components/dialog/react/icons.tsx

@@ -0,0 +1,51 @@
+import type { SVGProps } from "react";
+
+type IconProps = SVGProps<SVGSVGElement>;
+
+function Svg(props: IconProps) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      {...props}
+    />
+  );
+}
+
+export const InfoIcon = (p: IconProps) => (
+  <Svg {...p}>
+    <circle cx="12" cy="12" r="9" />
+    <path d="M12 11v5M12 7.5h.01" />
+  </Svg>
+);
+export const SuccessIcon = (p: IconProps) => (
+  <Svg {...p}>
+    <circle cx="12" cy="12" r="9" />
+    <path d="m8 12.5 2.5 2.5L16 9.5" />
+  </Svg>
+);
+export const WarningIcon = (p: IconProps) => (
+  <Svg {...p}>
+    <path d="M10.3 3.9 2.4 18a2 2 0 0 0 1.7 3h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" />
+    <path d="M12 9v4M12 17h.01" />
+  </Svg>
+);
+export const DangerIcon = (p: IconProps) => (
+  <Svg {...p}>
+    <circle cx="12" cy="12" r="9" />
+    <path d="M12 7.5v5.5M12 16.5h.01" />
+  </Svg>
+);
+export const SpinnerIcon = (p: IconProps) => (
+  <Svg width={14} height={14} {...p} className="dl-spinner">
+    <path d="M12 3a9 9 0 1 0 9 9" />
+  </Svg>
+);

package/source/beta-components/dialog/react/locale.ts

@@ -0,0 +1,8 @@
+import type { DialogLocaleText } from "../core/types";
+
+export const defaultDialogText: DialogLocaleText = {
+  ok: "OK",
+  confirm: "Confirm",
+  cancel: "Cancel",
+  required: "Please fill in this field",
+};

package/source/beta-components/dialog/react/props.ts

@@ -0,0 +1,13 @@
+export type DialogSlot =
+  | "root"
+  | "body"
+  | "icon"
+  | "title"
+  | "description"
+  | "input"
+  | "actions"
+  | "confirm"
+  | "cancel";
+
+export const cx = (...names: (string | false | null | undefined)[]) =>
+  names.filter(Boolean).join(" ");