@eifi1/ui-kit 0.54.0 → 0.56.0

package/src/hooks/use-debounce.ts

@@ -1,114 +0,0 @@
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-
-/**
- * A value that follows `value`, but only once it has stopped changing for `ms`.
- *
- * kastlan asked for the pair in this module because each of its search boxes carried
- * its own copy of the same six lines — a `useEffect` with a `setTimeout` — and two of
- * them forgot the cleanup, so a stale query landed AFTER the fresh one and replaced
- * its results. The cleanup is the whole point of having one implementation.
- *
- * The first render returns `value` itself, not `undefined`: a list filtered by the
- * debounced query must render its initial state immediately, not after `ms`.
- *
- * **It re-arms when `value`'s IDENTITY changes** (an effect on `[value, ms]`), not its
- * content. Pass a primitive — the typed query, a JSON string — or a value whose
- * identity is stable (state, a `useMemo`). An object or array built in render is a new
- * one every render, so the timer is re-armed on every render and the value never
- * settles — or, when the debounced value feeds the render that built it, settles,
- * renders, builds another and fires again, every `ms`, with nobody typing
- * (Kurvenschmiede's control page, KS U9). Debounce `JSON.stringify(body)`, or a key that
- * changes exactly when the content does, and build the object from that.
- */
-export function useDebounce<T>(value: T, ms: number): T {
-  const [debounced, setDebounced] = useState(value);
-  useEffect(() => {
-    const timer = setTimeout(() => setDebounced(value), ms);
-    return () => clearTimeout(timer);
-  }, [value, ms]);
-  return debounced;
-}
-
-export interface DebouncedCallbackOptions {
-  /**
-   * The longest a call may be held back, however often it is re-triggered. Without
-   * it a user who never stops typing never saves; with it, a draft autosave still
-   * lands every `maxWait` ms while the typing goes on.
-   */
-  maxWait?: number;
-}
-
-/** The debounced function, plus the two escapes a caller needs around it. */
-export type DebouncedFunction<A extends unknown[]> = ((...args: A) => void) & {
-  /** Drop the pending call, if there is one. */
-  cancel: () => void;
-  /** Run the pending call now, if there is one — e.g. on blur or before navigating
-   *  away, so the last keystrokes of a form are not lost. */
-  flush: () => void;
-  /** Whether a call is waiting. */
-  pending: () => boolean;
-};
-
-/**
- * `fn`, called only once calls have stopped arriving for `ms` — with the arguments
- * of the LAST call.
- *
- * The returned function keeps its identity across renders (so it can sit in an
- * effect's dependency list or be handed to a memoised child) and always calls the
- * LATEST `fn`, so a handler that closes over current state never runs a stale copy.
- * A pending call is cancelled on unmount: a debounced save firing into an unmounted
- * form is the bug kastlan reported, not a feature.
- */
-export function useDebouncedCallback<A extends unknown[]>(
-  fn: (...args: A) => void,
-  ms: number,
-  { maxWait }: DebouncedCallbackOptions = {},
-): DebouncedFunction<A> {
-  const fnRef = useRef(fn);
-  // Layout effect, not render-time assignment: a ref written during render is a
-  // side effect React may replay or discard. Nothing can call the debounced function
-  // between this commit and the layout effect, so it is never one render behind.
-  useLayoutEffect(() => {
-    fnRef.current = fn;
-  });
-
-  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const maxTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const lastArgs = useRef<A | null>(null);
-
-  const clear = useCallback(() => {
-    if (timer.current) clearTimeout(timer.current);
-    if (maxTimer.current) clearTimeout(maxTimer.current);
-    timer.current = null;
-    maxTimer.current = null;
-  }, []);
-
-  const invoke = useCallback(() => {
-    const args = lastArgs.current;
-    clear();
-    lastArgs.current = null;
-    if (args) fnRef.current(...args);
-  }, [clear]);
-
-  useEffect(() => clear, [clear]);
-
-  return useMemo(() => {
-    const debounced = ((...args: A) => {
-      lastArgs.current = args;
-      if (timer.current) clearTimeout(timer.current);
-      timer.current = setTimeout(invoke, ms);
-      if (maxWait !== undefined && !maxTimer.current) {
-        maxTimer.current = setTimeout(invoke, maxWait);
-      }
-    }) as DebouncedFunction<A>;
-    debounced.cancel = () => {
-      clear();
-      lastArgs.current = null;
-    };
-    debounced.flush = () => {
-      if (lastArgs.current) invoke();
-    };
-    debounced.pending = () => lastArgs.current !== null;
-    return debounced;
-  }, [ms, maxWait, invoke, clear]);
-}

package/src/hooks/use-dismiss.ts

@@ -1,371 +0,0 @@
-import { useCallback, useEffect, useRef, useSyncExternalStore } from "react";
-import type { KeyboardEvent as ReactKeyboardEvent, RefObject } from "react";
-import { isComposing } from "../lib/ime";
-
-/*
- * # One Escape stack (round 0.34 Wave 2, DUP-1)
- *
- * Escape closes the TOPMOST thing on screen, and only that: a list open in a dialog
- * closes and the dialog stays; the next press closes the dialog.
- *
- * "Who owns Escape" used to be decided five ways. The anchored pickers listened on the
- * document; Modal, FullBleedDialog, PickerSheet and Popover closed in their own panel's
- * `onKeyDown` and stopped the key; CommandPalette closed without stopping it. A dialog's
- * handler sits earlier on the key's path than any document listener, so Escape in an
- * open list inside a Modal closed the MODAL and threw the form away (BUG-1, sev 4,
- * kastlan's lease dialog), and HoverMenu, the numpad and a tooltip could not be
- * dismissed inside a dialog at all. And Modal and FullBleedDialog disagreed on when a
- * child had "claimed" the key: a ChipInput clearing its draft kept a Modal open and
- * closed a FullBleedDialog.
- *
- * Now every overlay and picker pushes a layer while it is open ({@link useDismissLayer}),
- * last in, first out, the way `use-overlay-history` stacks the Back gesture. One
- * capture-phase listener on the document notes which layer is on top as each Escape
- * goes down — before any handler on the page runs, so a layer that closes on the way
- * cannot pass the key on to the one beneath it. That layer, and only that one, is
- * handed the key:
- *
- * - at the first layer element the key passes on its way back up ({@link takeEscape},
- *   which Modal's panel, a picker's search box and the rest call from their
- *   `onKeyDown`). The key is stopped there, so nothing around the layers — a
- *   FloatingPanel, an app's own panel — closes with it;
- * - or, when focus is in none of them (a hover menu, a tooltip, the numpad over its
- *   field, a press on the page), at the document once the key has been everywhere else.
- *
- * Layers stack in the order they OPEN, which is the order their effects run. Two that
- * open in the same commit stack child first — the one case that order gets wrong, and
- * one no overlay in the kit does: each opens on a press, after whatever it sits in.
- *
- * ## Claiming the key: one rule
- *
- * An Escape that means "undo this step" is not a dismissal: ChipInput clearing its
- * draft, InlineEditField cancelling its edit, the date picker's month grid going back to
- * the days. Those call {@link claimEscape}, and no layer is handed the key. The only
- * other claim is the layer owner's OWN handler — a dialog's `onKeyDown` prop calling
- * `preventDefault()` on Escape (Kurvenschmiede's gear wizard asking first), through
- * {@link runOwnKeyDown}. A dialog holding itself open while its request runs passes
- * Modal's `busy` instead (0.51.7, DUP-3), which holds the backdrop and Back as well. A `preventDefault()`
- * anywhere else claims nothing: a search box keeping Chromium from clearing itself
- * must not hold a dialog open (FullBleedDialog's 0.8.0 fix, which Modal never had).
- *
- * The owner's handler hears Escape only while its own layer is on top (0.35, KS). It
- * runs before the stack is asked, so with a tooltip, a hover menu or a list open over
- * the dialog and focus on the panel, the gear wizard asked "Discard this gear?" and the
- * tooltip stayed. Now the layer above takes that press, and the next one is the
- * owner's. Every other key reaches the handler as before.
- *
- * A handler that STOPS the key before it reaches a layer element has taken it too —
- * that is the DOM, and it is what the kit's cell editors and confirm buttons do.
- */
-
-/** A layer's handler, read through a ref so the stack holds one stable entry per open. */
-interface Layer {
-  escape: (e: KeyboardEvent) => void;
-  /** Whether it covers the page — a dialog, a sheet, a popover, a list — rather than
-   *  annotating it (a tooltip). Counted by {@link useOverlayOpen}. */
-  overlay: boolean;
-}
-
-/** What {@link useDismissLayer} hands back: its layer while open, for
- *  {@link runOwnKeyDown} to tell whether that layer is the one on top. */
-export type DismissLayer = RefObject<Layer | null>;
-
-/** Open layers, oldest first. Module-level, because the order is ACROSS instances. */
-const layers: Layer[] = [];
-
-/** Escapes a claimant has taken — see {@link claimEscape}. Weak: an event is garbage
- *  once its dispatch is over. */
-const claimed = new WeakSet<Event>();
-
-/** The Escape on its way through the page: the layer that was topmost as it went down,
- *  and whether that layer has been handed it yet. */
-let inFlight: { event: KeyboardEvent; layer: Layer; done: boolean } | null = null;
-
-function nativeOf(e: KeyboardEvent | ReactKeyboardEvent): KeyboardEvent {
-  return "nativeEvent" in e ? e.nativeEvent : e;
-}
-
-function onCapture(e: KeyboardEvent): void {
-  if (e.key !== "Escape") return;
-  // An Escape inside an IME composition cancels the composition and nothing else.
-  const top = isComposing(e) ? undefined : layers[layers.length - 1];
-  inFlight = top ? { event: e, layer: top, done: false } : null;
-}
-
-/** The fallback: no layer element was on the key's path, or none took it. */
-function onBubble(e: KeyboardEvent): void {
-  handOver(e, false);
-}
-
-function handOver(e: KeyboardEvent | ReactKeyboardEvent, stop: boolean): boolean {
-  const native = nativeOf(e);
-  const flight = inFlight;
-  if (native.key !== "Escape" || !flight || flight.event !== native || flight.done) return false;
-  if (claimed.has(native)) return false;
-  flight.done = true;
-  // Consumed: a type="search" box does not clear itself as well, and a handler further
-  // out that checks `defaultPrevented` (FloatingPanel, an app's own panel) leaves it.
-  e.preventDefault();
-  if (stop) e.stopPropagation();
-  // A layer that closed on the way, by a handler of its own, has had its Escape.
-  if (layers.includes(flight.layer)) flight.layer.escape(native);
-  return true;
-}
-
-function push(layer: Layer): void {
-  if (layers.length === 0) {
-    document.addEventListener("keydown", onCapture, true);
-    document.addEventListener("keydown", onBubble);
-  }
-  layers.push(layer);
-  if (layer.overlay) notifyOverlays();
-}
-
-function pop(layer: Layer): void {
-  const at = layers.indexOf(layer);
-  if (at >= 0) layers.splice(at, 1);
-  if (at >= 0 && layer.overlay) notifyOverlays();
-  if (layers.length > 0) return;
-  document.removeEventListener("keydown", onCapture, true);
-  document.removeEventListener("keydown", onBubble);
-  inFlight = null;
-}
-
-/**
- * An Escape layer on the stack while `open`: the topmost layer is handed the next
- * Escape and calls `onEscape`, every layer under it waits its turn. A list opened inside
- * a dialog is above the dialog; a popover opened from a list, above the list.
- *
- * Where focus can be INSIDE the layer, its element's `onKeyDown` calls
- * {@link takeEscape} too, so the key stops there — see the module note. `onEscape` is
- * read live, so it need not be memoised; the layer is pushed and popped only when
- * `open` flips. The layer it returns is for the owner's {@link runOwnKeyDown}.
- */
-export function useDismissLayer(
-  open: boolean,
-  onEscape: (e: KeyboardEvent) => void,
-  { overlay = true }: { overlay?: boolean } = {},
-): DismissLayer {
-  const handlerRef = useRef(onEscape);
-  const layerRef = useRef<Layer | null>(null);
-  // Written in an effect, not during render, so it satisfies react-hooks/refs: a
-  // render that React starts and then discards — a transition, a Suspense retry —
-  // would otherwise leave this holding a handler from a tree that never committed,
-  // and the stack would go on to call it. Keydown events fire after the commit, so
-  // the ref is always current by the time one arrives.
-  useEffect(() => {
-    handlerRef.current = onEscape;
-  });
-  useEffect(() => {
-    if (!open || typeof document === "undefined") return;
-    const layer: Layer = { escape: (e) => handlerRef.current(e), overlay };
-    layerRef.current = layer;
-    push(layer);
-    return () => {
-      pop(layer);
-      layerRef.current = null;
-    };
-  }, [open, overlay]);
-  return layerRef;
-}
-
-/*
- * Whether an overlay is open (0.49 KIT-11): every layer on the stack but a tooltip's is a
- * dialog, a sheet, a popover, a hover menu or a list covering part of the page, so the
- * stack is also the one place that knows. The floating launchers (`hideWhenOverlay`) step
- * aside while one is open instead of floating over it or beside it.
- */
-const overlayListeners = new Set<() => void>();
-
-function notifyOverlays(): void {
-  for (const listener of overlayListeners) listener();
-}
-
-function subscribeOverlays(listener: () => void): () => void {
-  overlayListeners.add(listener);
-  return () => {
-    overlayListeners.delete(listener);
-  };
-}
-
-function anyOverlayOpen(): boolean {
-  return layers.some((layer) => layer.overlay);
-}
-
-/** True while a kit dialog, sheet, popover, hover menu or list is open (any layer of the
- *  Escape stack but a tooltip's). Internal. */
-export function useOverlayOpen(enabled = true): boolean {
-  const open = useSyncExternalStore(subscribeOverlays, anyOverlayOpen, () => false);
-  return enabled && open;
-}
-
-/**
- * For a layer's own element, in its `onKeyDown`: hands an Escape on its way up to the
- * topmost layer — this one, unless something opened over it without taking focus (a
- * tooltip, the numpad) — and stops it here. True when it did; false for any other key,
- * a claimed Escape, or one already handed over.
- */
-export function takeEscape(e: KeyboardEvent | ReactKeyboardEvent): boolean {
-  return handOver(e, true);
-}
-
-/**
- * For an Escape that means "undo this step", not "close": the key is the caller's, and
- * no layer is handed it. `preventDefault()`s it as well, so a handler further out that
- * checks `defaultPrevented` leaves it alone, as before.
- */
-export function claimEscape(e: KeyboardEvent | ReactKeyboardEvent): void {
-  claimed.add(nativeOf(e));
-  e.preventDefault();
-}
-
-/**
- * Runs a layer owner's own key handler — a dialog's `onKeyDown` prop — and turns a
- * `preventDefault()` it makes on Escape into a claim: the one way, beside
- * {@link claimEscape}, to keep a layer open.
- *
- * Given the owner's `layer` (what {@link useDismissLayer} returned), an Escape that went
- * down while another layer was above that one skips the handler: the press is the
- * layer's on top, and the owner hears the next (0.35, KS). Without it, or while the
- * owner's layer is not open, the handler sees every key, as before.
- */
-export function runOwnKeyDown<E extends ReactKeyboardEvent>(
-  e: E,
-  handler: ((e: E) => void) | undefined,
-  layer?: DismissLayer,
-): void {
-  if (!handler) return;
-  if (layer && aboveOwner(e, layer.current)) return;
-  const before = e.defaultPrevented;
-  handler(e);
-  if (e.key === "Escape" && !before && e.defaultPrevented) claimed.add(nativeOf(e));
-}
-
-/** Whether this Escape went down with a layer above `owner` — the topmost one then was
- *  another, and `owner` is on the stack. An Escape the stack did not note (one inside an
- *  IME composition) is nobody else's. */
-function aboveOwner(e: ReactKeyboardEvent, owner: Layer | null): boolean {
-  const flight = inFlight;
-  if (e.key !== "Escape" || !owner || !flight || flight.event !== nativeOf(e)) return false;
-  return flight.layer !== owner && layers.includes(owner);
-}
-
-/**
- * Calls `handler` on an Escape while `enabled` — as an Escape layer. Since 0.34 this is
- * {@link useDismissLayer} with its arguments the other way round: it hears the key only
- * while nothing opened above it, and inside a dialog it no longer loses the key to the
- * dialog (Wave 2, DUP-1). `handler` is read live, so it need not be memoised.
- */
-export function useEscapeKey(handler: () => void, enabled = true): void {
-  useDismissLayer(enabled, handler);
-}
-
-/** Called with each native press an owner's React tree saw — see {@link useOutsideClick}. */
-type PressMark = (press: Event) => void;
-
-/** The outside-click hooks watching each ref, for {@link pressInside}. */
-const watchers = new WeakMap<RefObject<HTMLElement | null>, Set<PressMark>>();
-
-/** What an `onPointerDownCapture` hands over: a React event, its press inside. */
-type ReactPress = { nativeEvent: Event };
-
-/**
- * An `onPointerDownCapture` for a panel whose `ref` an outside-click hook watches but
- * whose element the hook's owner does not render — {@link DropdownPanel} and
- * `ComboboxPanel` take `panelRef` from `useDropdown` / `useComboboxCore`. Every press
- * that reaches the panel through the React tree, a portalled list opened inside it
- * included, is marked inside for each hook watching `ref`. See {@link useOutsideClick}.
- */
-export function pressInside(ref: RefObject<HTMLElement | null> | undefined): ((e: ReactPress) => void) | undefined {
-  if (!ref) return undefined;
-  return (e) => {
-    watchers.get(ref)?.forEach((mark) => mark(e.nativeEvent));
-  };
-}
-
-/**
- * Calls `handler` on a press that lands outside every supplied element, while
- * `enabled` — the outside-click-to-close half of the same dismissal story. Pass one
- * ref or several (trigger + panel); a press inside any of them is ignored. Refs and
- * `handler` are read live, so an inline `[triggerRef, panelRef]` array is fine and
- * won't churn the listener.
- *
- * ## A panel opened from inside is inside (0.48, keksdose dev#623)
- *
- * A CurrencySelect in a Popover: the currency list is portalled to `<body>`, so in the
- * DOM it is outside the popover's panel, and the first press on a currency closed the
- * POPOVER at pointerdown — the list went with it and the choice never landed. The same
- * for a combobox, a menu, a date picker's popover, a dropdown, at any depth.
- *
- * In the React tree the portal is still where it was opened from, and React passes a
- * press up that tree, through portals. So the hook hands back an
- * `onPointerDownCapture`: put it on the element the press should count as inside of —
- * the kit's Popover panel, HoverMenu, DropdownPanel and ComboboxPanel do — and every
- * press that travels through that element in React, portalled panels opened inside it
- * included, is not outside. React's listeners sit on the root and on each portal's
- * container, so they hear the press before this document listener does. No owner chain
- * to keep: depth is free, and an app's own portal inside a kit panel is covered too. A
- * panel the hook's owner does not render takes {@link pressInside} with the watched ref.
- *
- * **`pointerdown`, not `mousedown`** — one event covering mouse, touch and pen.
- * This listened for `mousedown` alone, which on a touch platform is a SYNTHESISED
- * event: the browser emits it for most taps, which is why nothing obviously broke,
- * but the synthesis is not guaranteed. A tap that begins a scroll, or one that lands
- * on an element which preventDefaults the touch sequence, may never produce one — and
- * on a phone-first PWA whose pickers, menus and flyouts all dismiss through this hook,
- * inheriting that is worse than choosing it.
- *
- * The one behaviour this changes deliberately: a touch-drag that starts outside an
- * open panel now dismisses it at touch-down, where before it did not dismiss at all
- * (a drag synthesises no mousedown). That matches every other platform surface, and
- * the anchored panels re-measure on scroll precisely because the page moves under
- * them.
- */
-export function useOutsideClick(
-  refs: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[],
-  handler: () => void,
-  enabled = true,
-): (e: ReactPress) => void {
-  const refsRef = useRef(refs);
-  const handlerRef = useRef(handler);
-  // The last press this owner's React tree saw: the one the document listener is about
-  // to hear, when it went through a panel the owner marked.
-  const insideRef = useRef<Event | null>(null);
-  // In an effect rather than during render — see the note in useDismissLayer.
-  useEffect(() => {
-    refsRef.current = refs;
-    handlerRef.current = handler;
-  });
-  const markInside = useCallback((e: ReactPress) => {
-    insideRef.current = e.nativeEvent;
-  }, []);
-  useEffect(() => {
-    if (!enabled) return;
-    const mark: PressMark = (press) => {
-      insideRef.current = press;
-    };
-    const watched = Array.isArray(refsRef.current) ? refsRef.current : [refsRef.current];
-    for (const r of watched) {
-      const set = watchers.get(r) ?? new Set<PressMark>();
-      set.add(mark);
-      watchers.set(r, set);
-    }
-    const onPointerDown = (e: Event) => {
-      const inside = insideRef.current === e;
-      insideRef.current = null;
-      if (inside) return;
-      const target = e.target as Node;
-      const list = Array.isArray(refsRef.current) ? refsRef.current : [refsRef.current];
-      for (const r of list) {
-        if (r.current?.contains(target)) return;
-      }
-      handlerRef.current();
-    };
-    document.addEventListener("pointerdown", onPointerDown);
-    return () => {
-      document.removeEventListener("pointerdown", onPointerDown);
-      for (const r of watched) watchers.get(r)?.delete(mark);
-    };
-  }, [enabled]);
-  return markInside;
-}

package/src/hooks/use-document-title.ts

@@ -1,33 +0,0 @@
-import { useEffect } from "react";
-import { useKitDocumentTitle } from "../i18n/kit-labels";
-import { DEFAULT_DOCUMENT_TITLE_FORMAT, formatDocumentTitle } from "../lib/document-title";
-
-/**
- * Writes the window's title (`document.title`) while the calling component is mounted,
- * and puts back the title it found when it unmounts (0.49 KIT-9).
- *
- * `parts` are positional: `[page, section, app]`. The app falls back to the provider's
- * `appName`, the format to the provider's `documentTitleFormat` (default
- * "{page} · {section} · {app}"); a missing part drops with its separator
- * ({@link formatDocumentTitle}). Parts that are ALL empty write nothing — the provider's
- * app alone is not a page's title.
- *
- * `PageHeader` calls it for its `h1` (`documentTitle`); call it yourself for a page
- * without one.
- */
-export function useDocumentTitle(parts: ReadonlyArray<string | null | undefined | false>): void {
-  const { format, appName } = useKitDocumentTitle();
-  const [page, section, app] = parts.map((p) => (typeof p === "string" && p.trim() !== "" ? p : undefined));
-  const any = parts.some((p) => typeof p === "string" && p.trim() !== "");
-  const title = any
-    ? formatDocumentTitle(format ?? DEFAULT_DOCUMENT_TITLE_FORMAT, { page, section, app: app ?? appName })
-    : null;
-  useEffect(() => {
-    if (title === null || title === "") return;
-    const before = document.title;
-    document.title = title;
-    return () => {
-      document.title = before;
-    };
-  }, [title]);
-}

package/src/hooks/use-file-drop.ts

@@ -1,121 +0,0 @@
-import { useRef, useState } from "react";
-import type { DragEvent, ReactElement } from "react";
-import { useFilePicker } from "./use-file-picker";
-import type { UseFilePickerOptions } from "./use-file-picker";
-
-/**
- * Turn ANY element into a file drop target — kastlan's ask, for the document list of
- * a booking and the rows of its gantt, which are drop targets without being a
- * `FileDropzone` (a dashed box with a Browse button inside would be the wrong thing
- * to draw over a list).
- *
- * ```tsx
- * const { dropProps, isOver, element } = useFileDrop({ accept: ".pdf", multiple: true,
- *   maxSize: 10_000_000, onFiles: attach, onReject: ([r]) => setError(r.message) });
- * return <>{element}<ul {...dropProps} data-drop-over={isOver || undefined}>…</ul></>;
- * ```
- *
- * The screening is `useFilePicker`'s own — `accept` re-checked (a drop ignores the
- * dialog's filter), `maxSize`, `maxFiles`, `isValid`, `onPick` — so a file refused by
- * `FileButton` is refused here in the same words. It comes with `open()` as well, so
- * the same options can also back a "choose a file" menu item beside the drop target.
- */
-
-/** `useFilePicker`'s options, minus `capture` (a camera does not take drops). */
-export type UseFileDropOptions = Omit<UseFilePickerOptions, "capture">;
-
-/** Spread onto the drop target. Four handlers, nothing else: the element keeps its
- *  own role, name and focus behaviour. */
-export interface FileDropProps<E extends Element = Element> {
-  onDragEnter: (e: DragEvent<E>) => void;
-  onDragOver: (e: DragEvent<E>) => void;
-  onDragLeave: (e: DragEvent<E>) => void;
-  onDrop: (e: DragEvent<E>) => void;
-}
-
-export interface UseFileDropReturn<E extends Element = Element> {
-  dropProps: FileDropProps<E>;
-  /** A FILE drag is over the target (and it is not `disabled`). Style from this. */
-  isOver: boolean;
-  /** Open the system picker with the same options — from a click handler only. */
-  open: () => void;
-  /** Screen and deliver files that arrived another way (a paste). */
-  take: (files: ArrayLike<File> | null | undefined) => void;
-  /** The live region that speaks a refusal (and the picker's hidden input). Render it
-   *  once, anywhere; without it a refusal reaches `onReject` but is not announced. */
-  element: ReactElement;
-}
-
-/** Whether a drag carries files — a dragged link, text or a row of the page does not,
- *  and must not light the target up or be swallowed by it. */
-export function dragHasFiles(e: DragEvent): boolean {
-  return Array.from(e.dataTransfer?.types ?? []).includes("Files");
-}
-
-/**
- * @internal The drag half on its own, shared with `FileDropzone`.
- *
- * `dragenter`/`dragleave` fire for every CHILD the pointer crosses: moving from the
- * target onto a label inside it is a leave of the target followed by an enter of the
- * label, which bubbles. A boolean flipped by each one flickers off and on across
- * every child, and `relatedTarget` — the usual fix — is `null` in Safari's drag
- * events. So this counts: +1 per enter, -1 per leave, over while above zero, and a
- * drop resets it (the drop replaces the leave that would have balanced the enter).
- *
- * A file drag stops propagating here, so a target nested in another (a row inside a
- * page-wide drop area) takes its own drop, and the outer one's count falls back to
- * zero while the pointer is over the inner one — only one of them lights up.
- */
-export function useDragTarget<E extends Element = Element>({
-  disabled,
-  onDropFiles,
-}: {
-  disabled?: boolean;
-  onDropFiles: (files: FileList | File[]) => void;
-}): { dropProps: FileDropProps<E>; isOver: boolean } {
-  const depth = useRef(0);
-  const [over, setOver] = useState(false);
-
-  const dropProps: FileDropProps<E> = {
-    onDragEnter: (e) => {
-      if (!dragHasFiles(e)) return;
-      e.stopPropagation();
-      e.preventDefault();
-      depth.current += 1;
-      if (!disabled) setOver(true);
-    },
-    onDragOver: (e) => {
-      if (!dragHasFiles(e)) return;
-      e.stopPropagation();
-      // Always cancelled for a file drag, disabled or not: an uncancelled drop makes
-      // the browser NAVIGATE to the file, which loses the page.
-      e.preventDefault();
-      e.dataTransfer.dropEffect = disabled ? "none" : "copy";
-    },
-    onDragLeave: (e) => {
-      if (!dragHasFiles(e)) return;
-      e.stopPropagation();
-      depth.current = Math.max(0, depth.current - 1);
-      if (depth.current === 0) setOver(false);
-    },
-    onDrop: (e) => {
-      if (!dragHasFiles(e)) return;
-      e.stopPropagation();
-      e.preventDefault();
-      depth.current = 0;
-      setOver(false);
-      if (!disabled) onDropFiles(e.dataTransfer.files);
-    },
-  };
-
-  return { dropProps, isOver: over && !disabled };
-}
-
-export function useFileDrop<E extends Element = Element>(options: UseFileDropOptions): UseFileDropReturn<E> {
-  const picker = useFilePicker(options);
-  const { dropProps, isOver } = useDragTarget<E>({
-    disabled: options.disabled,
-    onDropFiles: picker.take,
-  });
-  return { dropProps, isOver, open: picker.open, take: picker.take, element: picker.element };
-}

package/src/hooks/use-file-picker-labels.ts

@@ -1,28 +0,0 @@
-// The English words of the file pickers (./use-file-picker), in a module with no component
-// code: the English catalogue (src/i18n/defaults.ts) imports them without the component, so
-// `en` loads as one chunk like the other languages (0.34, KS U8). In hooks/ beside the hook
-// since 0.34 (MOD-8); components/file-button re-exports them.
-
-import type { FilePickerLabels } from "./use-file-picker";
-
-export const DEFAULT_FILE_PICKER_LABELS: FilePickerLabels = {
-  rejectedType: (name) => `“${name}” is not a supported file type`,
-  rejectedTypeOnly: (accept) => `Only ${accept} files`,
-  rejectedSize: (name, maxSize) => `“${name}” is larger than ${maxSize}`,
-  rejectedCount: (name, maxFiles) =>
-    `“${name}” was not added: at most ${maxFiles} ${maxFiles === 1 ? "file" : "files"}`,
-  rejectedInvalid: (name) => `“${name}” cannot be used here`,
-  rejectedMany: (count) => `${count} files were not added`,
-  rejectedPick: (count) => (count === 1 ? "The file was not added" : `None of the ${count} files were added`),
-  selected: (count, firstName) => (count === 1 ? `“${firstName}” selected` : `${count} files selected`),
-  remove: (name) => `Remove “${name}”`,
-  clearAll: "Remove all files",
-  removed: (name) => `“${name}” removed`,
-  cleared: "All files removed",
-  dropzone: "File upload",
-  browse: "Browse",
-  empty: "Drop a file here",
-  emptyMultiple: "Drop files here",
-  hint: (accept) => (accept ? `Accepted: ${accept}` : "Any file type"),
-  busy: "Uploading…",
-};