zidane-ui 9.1.1 → 9.1.3

package/src/components/floating/useAnchoredPosition.ts

@@ -1,186 +0,0 @@
-/**
- * Fixed-position placement for a floating surface: next to an element or at
- * a point (a right-click), on the preferred side, flipped when it would not
- * fit, clamped inside the viewport. Re-measures on resize, scroll and when
- * the surface's own size changes.
- */
-import { useLayoutEffect, useState } from 'react';
-
-/** The side of the anchor a surface is placed on. */
-export type Side = 'top' | 'bottom' | 'right' | 'left';
-/** How a surface lines up along the anchor's edge: with its start, its centre or its end. */
-export type Align = 'start' | 'center' | 'end';
-/**
- * What a surface is placed against: an element, or a viewport point such as a right-click.
- * An element of `null` yields no placement.
- */
-export type Anchor = { element: HTMLElement | null } | { point: { x: number; y: number } };
-
-/** Where {@link useAnchoredPosition} puts a surface, in viewport coordinates. */
-export interface Placement {
-  /** Distance from the viewport's top edge, in px. */
-  top: number;
-  /** Distance from the viewport's left edge, in px. */
-  left: number;
-  /** The side actually used, which differs from the preferred one when the surface was flipped. */
-  side: Side;
-  /** CSS transform-origin that grows the surface out of its anchor. */
-  origin: string;
-}
-
-const MARGIN = 8;
-
-/**
- * Where a surface placed on `side` starts its enter: `px` back toward its
- * anchor, so it slides out of it (a menu above its trigger rises, one to the
- * right moves right). Menus nudge 4px, tooltips 2px.
- *
- * @param side - The side of the anchor the surface is placed on.
- * @param px - How far back toward the anchor the enter starts, in px.
- * @returns The `x` and `y` offset to start the enter from.
- */
-export function anchorNudge(side: Side, px: number): { x: number; y: number } {
-  if (side === 'top') return { x: 0, y: px };
-  if (side === 'bottom') return { x: 0, y: -px };
-  if (side === 'left') return { x: px, y: 0 };
-  return { x: -px, y: 0 };
-}
-
-/** A rectangle in viewport coordinates, like a `DOMRect`. */
-export interface Rect {
-  /** Top edge. */
-  top: number;
-  /** Left edge. */
-  left: number;
-  /** Right edge. */
-  right: number;
-  /** Bottom edge. */
-  bottom: number;
-  /** Width. */
-  width: number;
-  /** Height. */
-  height: number;
-}
-
-function anchorRect(anchor: Anchor): Rect | null {
-  if ('point' in anchor) {
-    const { x, y } = anchor.point;
-    return { top: y, left: x, right: x, bottom: y, width: 0, height: 0 };
-  }
-  return anchor.element?.getBoundingClientRect() ?? null;
-}
-
-/**
- * Computes where a surface goes next to an anchor. It tries `side`, flips to the opposite side
- * when `side` does not fit but the opposite does, then clamps the result 8px inside the viewport.
- *
- * @param a - The anchor's rectangle.
- * @param size - The surface's measured width and height.
- * @param side - The preferred side of the anchor.
- * @param align - How the surface lines up along the anchor's edge.
- * @param offset - Gap between anchor and surface, in px.
- * @param viewport - The viewport size to fit in. Defaults to the window's inner size.
- * @returns The position, the side used and the `transform-origin` that grows the surface out of the
- * anchor.
- */
-export function placeSurface(
-  a: Rect,
-  size: { width: number; height: number },
-  side: Side,
-  align: Align,
-  offset: number,
-  viewport = { width: window.innerWidth, height: window.innerHeight },
-): Placement {
-  const fits = (s: Side) =>
-    s === 'top'
-      ? a.top - offset - size.height >= MARGIN
-      : s === 'bottom'
-        ? a.bottom + offset + size.height <= viewport.height - MARGIN
-        : s === 'left'
-          ? a.left - offset - size.width >= MARGIN
-          : a.right + offset + size.width <= viewport.width - MARGIN;
-  const opposite: Record<Side, Side> = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' };
-  const chosen = fits(side) || !fits(opposite[side]) ? side : opposite[side];
-
-  let top: number;
-  let left: number;
-  if (chosen === 'top' || chosen === 'bottom') {
-    top = chosen === 'top' ? a.top - offset - size.height : a.bottom + offset;
-    left = align === 'start' ? a.left : align === 'end' ? a.right - size.width : a.left + a.width / 2 - size.width / 2;
-  } else {
-    left = chosen === 'left' ? a.left - offset - size.width : a.right + offset;
-    top = align === 'start' ? a.top : align === 'end' ? a.bottom - size.height : a.top + a.height / 2 - size.height / 2;
-  }
-  left = Math.min(Math.max(MARGIN, left), Math.max(MARGIN, viewport.width - size.width - MARGIN));
-  top = Math.min(Math.max(MARGIN, top), Math.max(MARGIN, viewport.height - size.height - MARGIN));
-
-  const vertical = chosen === 'top' ? 'bottom' : chosen === 'bottom' ? 'top' : 'center';
-  const horizontal =
-    chosen === 'left'
-      ? 'right'
-      : chosen === 'right'
-        ? 'left'
-        : align === 'end'
-          ? 'right'
-          : align === 'start'
-            ? 'left'
-            : 'center';
-  return { top, left, side: chosen, origin: `${vertical} ${horizontal}` };
-}
-
-/**
- * Measures where a surface goes next to its anchor and keeps it current. It re-measures on
- * resize, on scroll outside the surface and when the surface's own size changes.
- *
- * @param open - Whether the surface is shown. No placement is computed while it is closed.
- * @param anchor - The element or point to place against.
- * @param surfaceRef - Ref to the surface element, measured for its size.
- * @param options - The preferred `side` (default `bottom`), `align` (default `start`) and `offset`
- * in px (default 6).
- * @returns The placement, or `null` while closed or before the first measurement.
- */
-export function useAnchoredPosition(
-  open: boolean,
-  anchor: Anchor,
-  surfaceRef: React.RefObject<HTMLElement | null>,
-  { side = 'bottom', align = 'start', offset = 6 }: { side?: Side; align?: Align; offset?: number } = {},
-): Placement | null {
-  const [placement, setPlacement] = useState<Placement | null>(null);
-  const element = 'element' in anchor ? anchor.element : null;
-  const px = 'point' in anchor ? anchor.point.x : null;
-  const py = 'point' in anchor ? anchor.point.y : null;
-
-  useLayoutEffect(() => {
-    if (!open) {
-      setPlacement(null);
-      return undefined;
-    }
-    const measure = () => {
-      const a = anchorRect(px !== null && py !== null ? { point: { x: px, y: py } } : { element });
-      const surface = surfaceRef.current;
-      if (!a || !surface) return;
-      const next = placeSurface(a, { width: surface.offsetWidth, height: surface.offsetHeight }, side, align, offset);
-      setPlacement((prev) =>
-        prev && prev.top === next.top && prev.left === next.left && prev.side === next.side ? prev : next,
-      );
-    };
-    // Scrolling the surface's own list moves nothing it is placed by.
-    const onScroll = (event: Event) => {
-      if (event.target instanceof Node && surfaceRef.current?.contains(event.target)) return;
-      measure();
-    };
-    measure();
-    // jsdom has no ResizeObserver; placement still runs once and on resize.
-    const ro = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure);
-    if (surfaceRef.current) ro?.observe(surfaceRef.current);
-    window.addEventListener('resize', measure);
-    window.addEventListener('scroll', onScroll, true);
-    return () => {
-      ro?.disconnect();
-      window.removeEventListener('resize', measure);
-      window.removeEventListener('scroll', onScroll, true);
-    };
-  }, [open, element, px, py, surfaceRef, side, align, offset]);
-
-  return placement;
-}

package/src/components/floating/usePopover.ts

@@ -1,158 +0,0 @@
-/**
- * Open state for anything that floats off a trigger: outside press closes,
- * Esc closes WITHOUT reaching App's global Esc (which would clear the active
- * session), focus returns to the trigger on Esc and when the content closes
- * itself (a pick) while it holds focus. `onDismiss` fires for every close the
- * content did not ask for itself (Esc, outside press, trigger).
- *
- * `useDismiss` is that outside-press / Esc wiring on its own, for a surface
- * whose open state lives with its caller (`RowActionsMenu`).
- */
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-
-/** State and refs returned by {@link usePopover}. */
-export interface PopoverState {
-  /** Whether the surface is open. */
-  open: boolean;
-  /** Opens or closes the surface. Closing this way fires `onDismiss`. */
-  setOpen: (open: boolean) => void;
-  /** Opens the surface when closed, closes it when open. Closing fires `onDismiss`. */
-  toggle: () => void;
-  /** Close because the content finished (a pick): does not fire `onDismiss`. */
-  close: () => void;
-  /**
-   * Ref for the trigger element. Presses on it do not count as outside presses, and focus returns
-   * to it on Esc.
-   */
-  triggerRef: React.RefObject<HTMLElement | null>;
-  /** Ref for the floating surface. Presses inside it do not count as outside presses. */
-  surfaceRef: React.RefObject<HTMLElement | null>;
-}
-
-/** Callbacks of {@link useDismiss}. */
-export interface DismissHandlers {
-  /** A press outside every `inside` element. */
-  onOutsidePress: () => void;
-  /** Esc, already kept from App's global handler. */
-  onEscape: () => void;
-  /** Any other key while open (capture phase, before the focused element). */
-  onKeyDown?: (event: KeyboardEvent) => void;
-}
-
-/**
- * Outside press and Esc for an open surface. Listens in the capture phase so
- * Esc can be stopped before App's global handler. The handlers are read
- * fresh on each event, so callers may pass new closures every render
- * without re-subscribing.
- *
- * @param open - Whether the surface is open. Listeners are attached only while it is.
- * @param inside - Refs of the elements that count as inside the surface, usually the trigger and
- * the surface itself.
- * @param handlers - The callbacks to run, see {@link DismissHandlers}.
- */
-export function useDismiss(
-  open: boolean,
-  inside: ReadonlyArray<React.RefObject<HTMLElement | null> | undefined>,
-  handlers: DismissHandlers,
-) {
-  const latest = useRef({ inside, handlers });
-  useLayoutEffect(() => {
-    latest.current = { inside, handlers };
-  });
-
-  useEffect(() => {
-    if (!open) return undefined;
-    const onDown = (e: PointerEvent) => {
-      const target = e.target as Node | null;
-      if (!target) return;
-      if (latest.current.inside.some((ref) => ref?.current?.contains(target))) return;
-      latest.current.handlers.onOutsidePress();
-    };
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key !== 'Escape') {
-        latest.current.handlers.onKeyDown?.(e);
-        return;
-      }
-      e.preventDefault();
-      e.stopPropagation();
-      latest.current.handlers.onEscape();
-    };
-    document.addEventListener('pointerdown', onDown, true);
-    window.addEventListener('keydown', onKey, true);
-    return () => {
-      document.removeEventListener('pointerdown', onDown, true);
-      window.removeEventListener('keydown', onKey, true);
-    };
-  }, [open]);
-}
-
-/**
- * Send focus back to `target` after a surface closes, but only when the
- * surface held it (or nobody does): a pick that moved focus on purpose (into
- * the editor, a rename field) keeps it.
- *
- * @param target - The element to focus, normally the trigger. Ignored when it is `null` or
- * disconnected.
- * @param surface - The closing surface. Focus moves only when it held focus, or when nothing did.
- */
-export function returnFocus(target: HTMLElement | null | undefined, surface: HTMLElement | null | undefined) {
-  if (!target?.isConnected) return;
-  const active = document.activeElement;
-  if (!active || active === document.body || surface?.contains(active)) target.focus({ preventScroll: true });
-}
-
-/**
- * Owns the open state of a surface that floats off a trigger. An outside press or Esc closes
- * it and calls `onDismiss`; Esc also returns focus to the trigger without reaching the app's
- * global Esc handler.
- *
- * @param options - Options: `onDismiss`, called for every close the content did not ask for itself,
- * and `initialOpen`, whether it starts open (default `false`).
- * @returns The state, setters and the refs to attach to the trigger and the surface.
- */
-export function usePopover({
-  onDismiss,
-  initialOpen = false,
-}: { onDismiss?: () => void; initialOpen?: boolean } = {}): PopoverState {
-  const [open, setOpenState] = useState(initialOpen);
-  const openRef = useRef(open);
-  const triggerRef = useRef<HTMLElement | null>(null);
-  const surfaceRef = useRef<HTMLElement | null>(null);
-  const dismissRef = useRef(onDismiss);
-  useLayoutEffect(() => {
-    openRef.current = open;
-    dismissRef.current = onDismiss;
-  });
-
-  const dismiss = useCallback(() => {
-    setOpenState(false);
-    dismissRef.current?.();
-  }, []);
-
-  useDismiss(open, [triggerRef, surfaceRef], {
-    onOutsidePress: dismiss,
-    onEscape: () => {
-      dismiss();
-      triggerRef.current?.focus({ preventScroll: true });
-    },
-  });
-
-  const setOpen = useCallback(
-    (next: boolean) => {
-      if (next) setOpenState(true);
-      else dismiss();
-    },
-    [dismiss],
-  );
-  // The dismiss side effect stays out of the state updater: StrictMode runs updaters twice.
-  const toggle = useCallback(() => {
-    if (openRef.current) dismiss();
-    else setOpenState(true);
-  }, [dismiss]);
-  const close = useCallback(() => {
-    setOpenState(false);
-    returnFocus(triggerRef.current, surfaceRef.current);
-  }, []);
-
-  return { open, setOpen, toggle, close, triggerRef, surfaceRef };
-}

package/src/components/image-clipboard.ts

@@ -1,70 +0,0 @@
-/**
- * An image to the clipboard, from its address: as an image (PNG: the one
- * image type every clipboard takes, so others are drawn into one first), as
- * Base64 (the file's own bytes) or as a data URL. The bytes are fetched
- * again: the browser serves them from its cache.
- */
-
-async function bytesOf(src: string): Promise<Blob> {
-  const res = await fetch(src);
-  if (!res.ok) throw new Error(`image: ${res.status}`);
-  return res.blob();
-}
-
-/** The blob as a data URL, read by the browser (no string built byte by byte here). */
-function dataUrlOf(blob: Blob): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => resolve(String(reader.result));
-    reader.onerror = () => reject(reader.error ?? new Error('image: unreadable'));
-    reader.readAsDataURL(blob);
-  });
-}
-
-/** The image drawn into a PNG at its own size. An SVG without one takes its view's. */
-async function toPng(blob: Blob): Promise<Blob> {
-  const url = URL.createObjectURL(blob);
-  try {
-    const image = new Image();
-    image.src = url;
-    await image.decode();
-    const canvas = new OffscreenCanvas(
-      image.naturalWidth || image.width || 1,
-      image.naturalHeight || image.height || 1,
-    );
-    canvas.getContext('2d')!.drawImage(image, 0, 0, canvas.width, canvas.height);
-    return await canvas.convertToBlob({ type: 'image/png' });
-  } finally {
-    URL.revokeObjectURL(url);
-  }
-}
-
-/**
- * Puts the image at `src` on the clipboard as an image (PNG).
- *
- * @param src - The image's address.
- */
-export async function copyImage(src: string): Promise<void> {
-  const blob = await bytesOf(src);
-  const png = blob.type === 'image/png' ? blob : await toPng(blob);
-  await navigator.clipboard.write([new ClipboardItem({ 'image/png': png })]);
-}
-
-/**
- * Puts the image's bytes on the clipboard as Base64 (no `data:` prefix).
- *
- * @param src - The image's address.
- */
-export async function copyImageBase64(src: string): Promise<void> {
-  const url = await dataUrlOf(await bytesOf(src));
-  await navigator.clipboard.writeText(url.slice(url.indexOf(',') + 1));
-}
-
-/**
- * Puts the image on the clipboard as a data URL (`data:image/png;base64,…`).
- *
- * @param src - The image's address.
- */
-export async function copyImageDataUrl(src: string): Promise<void> {
-  await navigator.clipboard.writeText(await dataUrlOf(await bytesOf(src)));
-}

package/src/components/keyboard-layout.ts

@@ -1,115 +0,0 @@
-/**
- * The punctuation keys binding specs name by their US character (backquote,
- * `[`, `/`, …), tied to the physical keys (`KeyboardEvent.code`) that type
- * them on a US layout. On other layouts the same physical key types
- * something else. When that is no printable ASCII (a dead key, `²`, `ù`),
- * matchers fall back to the physical key and keycaps show what the user's
- * layout prints on it (`navigator.keyboard.getLayoutMap()`, Chromium only:
- * elsewhere the US character stays). An ASCII character there (`<` on a
- * French Mac) names a binding of its own, so the keycap keeps the spec name.
- */
-import { useSyncExternalStore } from 'react';
-
-/** Spec character → physical keys. macOS ISO keyboards swap `Backquote` and `IntlBackslash`. */
-export const PUNCTUATION_CODES: Readonly<Record<string, readonly string[]>> = {
-  '`': ['Backquote', 'IntlBackslash'],
-  '[': ['BracketLeft'],
-  ']': ['BracketRight'],
-  '\\': ['Backslash'],
-  '-': ['Minus'],
-  '=': ['Equal'],
-  ';': ['Semicolon'],
-  "'": ['Quote'],
-  ',': ['Comma'],
-  '.': ['Period'],
-  '/': ['Slash'],
-};
-
-interface LayoutMapLike {
-  get(code: string): string | undefined;
-}
-interface KeyboardLike {
-  getLayoutMap?: () => Promise<LayoutMapLike>;
-}
-
-let layout: LayoutMapLike | null = null;
-let requested = false;
-const listeners = new Set<() => void>();
-
-/** Ask the browser for the layout once; listeners hear when it lands. */
-function requestLayout(): void {
-  if (requested) return;
-  requested = true;
-  const keyboard = typeof navigator === 'undefined' ? undefined : (navigator as { keyboard?: KeyboardLike }).keyboard;
-  if (!keyboard?.getLayoutMap) return;
-  keyboard
-    .getLayoutMap()
-    .then((map) => {
-      layout = map;
-      for (const l of listeners) l();
-    })
-    .catch(() => undefined);
-}
-
-/**
- * Whether `key` (an `event.key` or a layout character) stands in for the
- * spec key at its physical position: a dead key or a single character other
- * than printable ASCII (never a named key like `Process`). The one rule shared by the matcher and keycap labels.
- *
- * @param key - An `event.key` value or a character from the layout map.
- */
-export function typesStandIn(key: string): boolean {
-  return key === 'Dead' || ([...key].length === 1 && !/^[\x21-\x7e]$/.test(key));
-}
-
-/**
- * The character the user's layout types on physical key `code` (unshifted),
- * or `undefined` while the layout is unknown. The first call starts loading it.
- */
-function layoutCharacter(code: string): string | undefined {
-  requestLayout();
-  const ch = layout?.get(code);
-  return ch && ch.length > 0 ? ch : undefined;
-}
-
-/**
- * How to label spec key `name` on this layout: for a punctuation key whose
- * physical key types a stand-in (`typesStandIn`), that character, so the
- * keycap names exactly what the matcher accepts; otherwise `name`.
- *
- * @param name - A binding spec's key name (`[`, `/`, `k`, `Enter`…).
- */
-export function layoutKeyLabel(name: string): string {
-  const code = PUNCTUATION_CODES[name]?.[0];
-  const ch = code ? layoutCharacter(code) : undefined;
-  if (!ch || !typesStandIn(ch)) return name;
-  return ch;
-}
-
-function subscribe(listener: () => void): () => void {
-  listeners.add(listener);
-  requestLayout();
-  return () => listeners.delete(listener);
-}
-const noSubscribe = () => () => undefined;
-const snapshot = () => layout;
-
-/**
- * Re-renders once the keyboard layout is known (for keycap labels).
- *
- * @param enabled - `false` neither subscribes nor starts loading the layout.
- */
-export function useKeyboardLayout(enabled = true): void {
-  useSyncExternalStore(enabled ? subscribe : noSubscribe, snapshot, snapshot);
-}
-
-/**
- * Tests: drop the cached layout (and re-request on next use), or install a fake one.
- *
- * @param next - A layout map to use instead (no request is made then); `null` clears it.
- */
-export function _resetKeyboardLayout(next: LayoutMapLike | null = null): void {
-  layout = next;
-  requested = next !== null;
-  for (const l of listeners) l();
-}