npm - gbs-add-block - Versions diffs - 1.2.11 → 1.2.13 - Mend

gbs-add-block 1.2.11 → 1.2.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/source/beta-components/toaster/react/ToastItem.tsx ADDED Viewed

@@ -0,0 +1,164 @@
+"use client";
+import {
+  useRef,
+  useState,
+  type CSSProperties,
+  type KeyboardEvent,
+  type MouseEvent,
+  type PointerEvent,
+  type ReactNode,
+} from "react";
+import type { ToastStore } from "../core/store";
+import type { ToastAction, ToasterLocaleText, ToastRecord, ToastType } from "../core/types";
+import { ErrorIcon, InfoIcon, SpinnerIcon, SuccessIcon, WarningIcon, XIcon } from "./icons";
+import { cx, type ToasterSlot } from "./props";
+/** Horizontal drag, in pixels, that dismisses a toast. */
+const SWIPE_DISMISS = 64;
+const DEFAULT_ICONS: Record<ToastType, ReactNode> = {
+  default: null,
+  success: <SuccessIcon />,
+  error: <ErrorIcon />,
+  warning: <WarningIcon />,
+  info: <InfoIcon />,
+  loading: <SpinnerIcon />,
+};
+interface ToastItemProps {
+  toast: ToastRecord;
+  store: ToastStore;
+  closeButton: boolean;
+  icons?: Partial<Record<ToastType, ReactNode>>;
+  classNames?: Partial<Record<ToasterSlot, string>>;
+  text: ToasterLocaleText;
+}
+export function ToastItem({ toast, store, closeButton, icons, classNames, text }: ToastItemProps) {
+  const [swipe, setSwipe] = useState(0);
+  const drag = useRef<{ pointerId: number; startX: number } | null>(null);
+  const { action, cancel, render } = toast;
+  const closing = toast.state === "closing";
+  const dismiss = () => store.dismiss(toast.id);
+  // `null` from the toast or the Toaster hides the icon; `undefined` means "use the default".
+  const icon =
+    toast.icon !== undefined
+      ? toast.icon
+      : icons !== undefined && Object.hasOwn(icons, toast.type)
+        ? icons[toast.type]
+        : DEFAULT_ICONS[toast.type];
+  const runAction = (item: ToastAction, event: MouseEvent<HTMLButtonElement>) => {
+    item.onClick(event);
+    if (!event.defaultPrevented) dismiss();
+  };
+  const onKeyDown = (event: KeyboardEvent<HTMLLIElement>) => {
+    if (event.key !== "Escape" || !toast.dismissible) return;
+    event.preventDefault();
+    // Keep focus in the notification region instead of dropping it on <body>.
+    event.currentTarget.closest<HTMLElement>(".ts-list")?.focus();
+    dismiss();
+  };
+  const onPointerDown = (event: PointerEvent<HTMLLIElement>) => {
+    if (!toast.dismissible || closing || event.button !== 0) return;
+    if ((event.target as Element).closest("button, a, input, select, textarea")) return;
+    drag.current = { pointerId: event.pointerId, startX: event.clientX };
+    event.currentTarget.setPointerCapture(event.pointerId);
+  };
+  const onPointerMove = (event: PointerEvent<HTMLLIElement>) => {
+    const start = drag.current;
+    if (start?.pointerId === event.pointerId) setSwipe(event.clientX - start.startX);
+  };
+  const endSwipe = (event: PointerEvent<HTMLLIElement>) => {
+    const start = drag.current;
+    if (start?.pointerId !== event.pointerId) return;
+    drag.current = null;
+    const far = Math.abs(event.clientX - start.startX) >= SWIPE_DISMISS;
+    if (event.type === "pointerup" && far) dismiss();
+    else setSwipe(0);
+  };
+  return (
+    <li
+      className={cx("ts-toast", classNames?.toast, toast.className)}
+      // The list is a polite live region; errors interrupt.
+      role={toast.type === "error" ? "alert" : undefined}
+      aria-atomic="true"
+      tabIndex={0}
+      data-type={toast.type}
+      data-state={toast.state}
+      data-custom={render ? "" : undefined}
+      data-swiping={swipe !== 0 ? "" : undefined}
+      style={{ "--ts-swipe": `${swipe}px` } as CSSProperties}
+      onKeyDown={onKeyDown}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={endSwipe}
+      onPointerCancel={endSwipe}
+    >
+      {!render && icon != null && (
+        <span className={cx("ts-icon", classNames?.icon)} aria-hidden="true">
+          {icon}
+        </span>
+      )}
+      <div className={cx("ts-content", classNames?.content)}>
+        {render ? (
+          render({ id: toast.id, dismiss })
+        ) : (
+          <>
+            <div className={cx("ts-title", classNames?.title)}>{toast.title}</div>
+            {toast.description != null && (
+              <div className={cx("ts-description", classNames?.description)}>
+                {toast.description}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+      {!render && (action || cancel) && (
+        <div className={cx("ts-actions", classNames?.actions)}>
+          {cancel && (
+            <button
+              type="button"
+              className={cx("ts-button", classNames?.cancel)}
+              data-variant="cancel"
+              onClick={(event) => runAction(cancel, event)}
+            >
+              {cancel.label}
+            </button>
+          )}
+          {action && (
+            <button
+              type="button"
+              className={cx("ts-button", classNames?.action)}
+              data-variant="action"
+              onClick={(event) => runAction(action, event)}
+            >
+              {action.label}
+            </button>
+          )}
+        </div>
+      )}
+      {closeButton && toast.dismissible && (
+        <button
+          type="button"
+          className={cx("ts-close", classNames?.close)}
+          aria-label={text.close}
+          onClick={dismiss}
+        >
+          <XIcon />
+        </button>
+      )}
+    </li>
+  );
+}

package/source/beta-components/toaster/react/Toaster.tsx ADDED Viewed

@@ -0,0 +1,187 @@
+"use client";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useSyncExternalStore,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+import { createPortal } from "react-dom";
+import { visibleToasts, type ToastStore } from "../core/store";
+import { toastStore } from "../core/toast";
+import type { ToasterLocaleText, ToastPosition, ToastType } from "../core/types";
+import { defaultToasterText } from "./locale";
+import { cx, type ToasterSlot } from "./props";
+import { ToastItem } from "./ToastItem";
+import { useToasts } from "./useToasts";
+export interface ToasterProps {
+  /** Default `"top-right"`. */
+  position?: ToastPosition;
+  /** Open toasts on screen at once; the rest wait their turn. Default 3. */
+  limit?: number;
+  /** Default auto-close delay in milliseconds. Default 5000. */
+  duration?: number;
+  /** Show a close button on dismissible toasts. Default true. */
+  closeButton?: boolean;
+  /**
+   * Keys that move focus to the notifications: `KeyboardEvent` modifier names
+   * plus a `code`. Default `["altKey", "KeyT"]`.
+   */
+  hotkey?: readonly string[];
+  /** Replace the icon per type; `null` hides it. */
+  icons?: Partial<Record<ToastType, ReactNode>>;
+  /** A store from `createToastStore()`. Defaults to the one behind `toast()`. */
+  store?: ToastStore;
+  dir?: "ltr" | "rtl" | "auto";
+  className?: string;
+  classNames?: Partial<Record<ToasterSlot, string>>;
+  style?: CSSProperties;
+  localeText?: Partial<ToasterLocaleText>;
+}
+type Modifier = "altKey" | "ctrlKey" | "metaKey" | "shiftKey";
+const MODIFIER_LABELS: Record<Modifier, string> = {
+  altKey: "Alt",
+  ctrlKey: "Ctrl",
+  metaKey: "Meta",
+  shiftKey: "Shift",
+};
+const DEFAULT_HOTKEY: readonly string[] = ["altKey", "KeyT"];
+const isModifier = (key: string): key is Modifier => Object.hasOwn(MODIFIER_LABELS, key);
+const hotkeyLabel = (keys: readonly string[]) =>
+  keys
+    .map((key) => (isModifier(key) ? MODIFIER_LABELS[key] : key.replace(/^(Key|Digit)/, "")))
+    .join("+");
+const subscribeNothing = () => () => {};
+/**
+ * Mount once, anywhere in the app. Toasts come from `toast()` and render in a
+ * portal on `<body>`, so no parent's overflow, transform or z-index can hide them.
+ */
+export function Toaster(props: ToasterProps) {
+  const {
+    position = "top-right",
+    limit,
+    duration,
+    closeButton = true,
+    hotkey = DEFAULT_HOTKEY,
+    icons,
+    store = toastStore,
+    dir,
+    className,
+    classNames,
+    style,
+    localeText,
+  } = props;
+  const snapshot = useToasts(store);
+  // False during a server render and hydration, so the portal never causes a mismatch.
+  const mounted = useSyncExternalStore(
+    subscribeNothing,
+    () => true,
+    () => false,
+  );
+  const text = useMemo(() => ({ ...defaultToasterText, ...localeText }), [localeText]);
+  const listRef = useRef<HTMLOListElement>(null);
+  const pointerInside = useRef(false);
+  const focusInside = useRef(false);
+  useEffect(() => {
+    store.configure({ limit, duration });
+  }, [store, limit, duration]);
+  /** Timers hold while someone is reading: pointer over, focus inside, or tab hidden. */
+  const syncPause = useCallback(() => {
+    const hold =
+      pointerInside.current || focusInside.current || document.visibilityState === "hidden";
+    if (hold) store.pause();
+    else store.resume();
+  }, [store]);
+  useEffect(() => {
+    document.addEventListener("visibilitychange", syncPause);
+    return () => document.removeEventListener("visibilitychange", syncPause);
+  }, [syncPause]);
+  const empty = snapshot.toasts.length === 0;
+  useEffect(() => {
+    if (!empty) return;
+    // A toast that disappears under the pointer never fires pointerleave.
+    pointerInside.current = false;
+    focusInside.current = false;
+    syncPause();
+  }, [empty, syncPause]);
+  useEffect(() => {
+    if (hotkey.length === 0) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      const pressed = hotkey.every((key) => (isModifier(key) ? event[key] : event.code === key));
+      if (!pressed) return;
+      event.preventDefault();
+      listRef.current?.focus();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [hotkey]);
+  if (!mounted) return null;
+  return createPortal(
+    <section
+      className={cx("ts-region", classNames?.region, className)}
+      style={style}
+      dir={dir}
+      data-position={position}
+      aria-label={text.regionLabel(hotkeyLabel(hotkey))}
+      onPointerEnter={() => {
+        pointerInside.current = true;
+        syncPause();
+      }}
+      onPointerLeave={() => {
+        pointerInside.current = false;
+        syncPause();
+      }}
+      onFocus={() => {
+        focusInside.current = true;
+        syncPause();
+      }}
+      onBlur={(event) => {
+        if (event.currentTarget.contains(event.relatedTarget)) return;
+        focusInside.current = false;
+        syncPause();
+      }}
+    >
+      {/* Always mounted, even when empty, so screen readers announce the first toast. */}
+      <ol
+        ref={listRef}
+        tabIndex={-1}
+        className={cx("ts-list", classNames?.list)}
+        aria-live="polite"
+        aria-relevant="additions text"
+      >
+        {visibleToasts(snapshot).map((item) => (
+          <ToastItem
+            key={item.id}
+            toast={item}
+            store={store}
+            closeButton={closeButton}
+            icons={icons}
+            classNames={classNames}
+            text={text}
+          />
+        ))}
+      </ol>
+    </section>,
+    document.body,
+  );
+}

package/source/beta-components/toaster/react/icons.tsx ADDED Viewed

@@ -0,0 +1,56 @@
+import type { SVGProps } from "react";
+type IconProps = SVGProps<SVGSVGElement>;
+function Svg(props: IconProps) {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      {...props}
+    />
+  );
+}
+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 ErrorIcon = (p: IconProps) => (
+  <Svg {...p}>
+    <circle cx="12" cy="12" r="9" />
+    <path d="M12 7.5v5.5M12 16.5h.01" />
+  </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 InfoIcon = (p: IconProps) => (
+  <Svg {...p}>
+    <circle cx="12" cy="12" r="9" />
+    <path d="M12 11v5M12 7.5h.01" />
+  </Svg>
+);
+export const SpinnerIcon = (p: IconProps) => (
+  <Svg {...p} className={["ts-spinner", p.className].filter(Boolean).join(" ")}>
+    <path d="M12 3a9 9 0 1 0 9 9" />
+  </Svg>
+);
+export const XIcon = (p: IconProps) => (
+  <Svg width={14} height={14} {...p}>
+    <path d="M18 6 6 18M6 6l12 12" />
+  </Svg>
+);

package/source/beta-components/toaster/react/locale.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import type { ToasterLocaleText } from "../core/types";
+export const defaultToasterText: ToasterLocaleText = {
+  regionLabel: (hotkey) => `Notifications (${hotkey})`,
+  close: "Close notification",
+};

package/source/beta-components/toaster/react/props.ts ADDED Viewed

@@ -0,0 +1,15 @@
+export type ToasterSlot =
+  | "region"
+  | "list"
+  | "toast"
+  | "icon"
+  | "content"
+  | "title"
+  | "description"
+  | "actions"
+  | "action"
+  | "cancel"
+  | "close";
+export const cx = (...names: (string | false | null | undefined)[]) =>
+  names.filter(Boolean).join(" ");

package/source/beta-components/toaster/react/useToasts.ts ADDED Viewed

@@ -0,0 +1,11 @@
+"use client";
+import { useSyncExternalStore } from "react";
+import type { ToastStore } from "../core/store";
+import { toastStore } from "../core/toast";
+import type { ToastSnapshot } from "../core/types";
+/** The live toast list, for building your own notification UI on the same store. */
+export function useToasts(store: ToastStore = toastStore): ToastSnapshot {
+  return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot);
+}