@eifi1/ui-kit 0.21.0 → 0.23.0

package/dist/components/danger-confirm.d.ts

@@ -1,166 +1,69 @@
-import * as react from 'react';
-import { Ref, ComponentPropsWithoutRef, ReactNode } from 'react';
-
-/**
- * How typed text is compared with the text it has to repeat — shared by
- * `DangerConfirm`'s `phraseMatch` and `useConfirm`'s `typedMatch`.
- *
- * - `"trim"` ignores spaces around the typed text — a phone keyboard's autocomplete
- *   likes to add one. Case counts: "delete" is not "DELETE".
- * - `"exact"` compares character for character, spaces included.
- * - `"caseless"` trims AND ignores case: for an e-mail address, whose domain is
- *   case-insensitive and whose local part every real mail server treats so. Both apps'
- *   "type the account's address" rules (keksdose's `TYPE_EMAIL`, Kurvenschmiede's
- *   `TypedConfirm`) compared `trim().toLowerCase()`, and a capital the user's keyboard
- *   put at the start must not make the right row look like the wrong one.
- */
-type TypedMatch = "trim" | "exact" | "caseless";
-/** Whether `typed` repeats `target` under `mode` — see {@link TypedMatch}. Exported for
- *  a caller that draws its own field (a dialog that also picks a recipient) and wants
- *  the same rule as the kit's. */
-declare function typedMatches(typed: string, target: string, mode?: TypedMatch): boolean;
-/**
- * Busy-while-a-promise-runs, for an action that MAY return one: `run(result, onResolved)`
- * marks the caller pending until `result` settles, calls `onResolved` if it fulfilled,
- * and only clears the flag if it rejected — the caller shows why and the user retries.
- * Nothing runs after unmount. Shared by `DangerConfirm` and `ReauthDialog`, whose
- * contract is the same: resolve = done, reject = stay put.
- *
- * @internal
- */
-declare function usePromisePending(): {
-    pending: boolean;
-    run: (result: unknown, onResolved: () => void) => boolean;
-};
-/**
- * The "prove it is you" field: a password input the browser's password manager fills
- * with the CURRENT password (`autocomplete="current-password"`), never offers to
- * generate a new one for. `readOnly` rather than `disabled` while busy: disabling the
- * field that has focus (Enter was pressed in it) drops focus to <body>.
- *
- * @internal DangerConfirm's field. ReauthDialog spells it out with the field's own
- * `error`, which keeps the `<input>` mounted while its message comes and goes.
- */
-declare function CurrentPasswordInput({ inputRef, label, value, onValueChange, busy, invalid, describedBy, }: {
-    inputRef?: Ref<HTMLInputElement>;
-    label: string;
-    value: string;
-    onValueChange: (value: string) => void;
-    busy: boolean;
-    invalid?: boolean;
-    describedBy?: string;
-}): react.JSX.Element;
-/**
- * Every string the tile renders — the `dangerConfirm` namespace of
- * `<UiKitProvider labels>`, overridable per instance through `labels`. The arm and
- * confirm buttons are usually worded per action ("Delete budget"), which is what the
- * `armLabel` / `confirmLabel` props are for; these are the fallbacks.
- */
-interface DangerConfirmLabels {
-    /** The button that arms the tile. */
-    arm: string;
-    /** The button that runs the action once the guards are satisfied. */
-    confirm: string;
-    cancel: string;
-    /** The warning above the fields, when no `prompt` is given. */
-    prompt: string;
-    /** Label of the password field (`requirePassword`). */
-    password: string;
-    /** Label of the type-to-confirm field. A FUNCTION of the phrase by default, like
-     *  every message that carries a value: where the phrase sits in the sentence moves
-     *  with the language. A plain STRING is taken as the finished label — for an app
-     *  whose catalogue already words it ("Type DELETE to confirm") and would otherwise
-     *  wrap it as `() => label`. */
-    phrase: string | ((phrase: string) => string);
-    /** Placeholder of the type-to-confirm field — a string, or a function of the
-     *  phrase (`(p) => p` echoes it). Optional and unset by default: the field keeps its
-     *  floating label, as before. Given, the label moves ABOVE the field (a floating
-     *  label occupies the empty field, which is exactly where a placeholder shows) and
-     *  the placeholder fills the field. An empty string means none. */
-    phrasePlaceholder?: string | ((phrase: string) => string);
-}
-/** `satisfies` rather than a type annotation, so `DEFAULT_DANGER_CONFIRM_LABELS.phrase`
- *  stays callable for a caller that composes its own label from it. */
-declare const DEFAULT_DANGER_CONFIRM_LABELS: {
-    arm: string;
-    confirm: string;
-    cancel: string;
-    prompt: string;
-    password: string;
-    phrase: (phrase: string) => string;
-};
-interface DangerConfirmProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
-    /**
-     * Runs the action, with the entered password when `requirePassword` is on.
-     *
-     * Return a promise and the tile manages itself: busy until it settles, disarmed
-     * (fields wiped) when it resolves, still armed when it rejects — so the user can
-     * correct a wrong password and retry. The rejection is not swallowed for you to
-     * miss: handle it (and show why) in the caller, as with any mutation.
-     */
-    onConfirm: (password?: string) => void | Promise<unknown>;
-    /** Show a password field; confirm stays disabled until it is filled. */
-    requirePassword?: boolean;
-    /** Show a "type <phrase> to confirm" field; confirm stays disabled until the field
-     *  matches (case-sensitive; surrounding spaces ignored unless `phraseMatch="exact"`). */
-    phrase?: string;
-    /**
-     * How the typed text is compared with `phrase`. `"trim"` (default) ignores spaces
-     * around it — a phone keyboard's autocomplete likes to add one. `"exact"` compares
-     * character for character, spaces included, for an app whose contract is "type
-     * exactly this". `"caseless"` (0.18) also ignores case — for a phrase that is an
-     * e-mail address (keksdose's "type the user's address" admin rule). See
-     * {@link TypedMatch}.
-     */
-    phraseMatch?: TypedMatch;
-    /** The warning above the fields. Defaults to `labels.prompt`. */
-    prompt?: ReactNode;
-    /** `"danger"` (default) for what cannot be undone; `"warning"` for what can, at a
-     *  cost (loading demo data over your own). Colours the prompt and the confirm. */
-    tone?: "danger" | "warning";
-    /** Visible text of the arm button; defaults to `labels.arm`. */
-    armLabel?: ReactNode;
-    /** Visible text of the confirm button; defaults to `labels.confirm`. */
-    confirmLabel?: ReactNode;
-    /** The action is running: confirm shows a spinner and nothing can be pressed. For a
-     *  caller that tracks the mutation itself (a `useMutation`'s `isPending`); a
-     *  promise returned from `onConfirm` does the same on its own. */
-    busy?: boolean;
-    /** The arm button is disabled. */
-    disabled?: boolean;
-    /**
-     * Why the action is not available — a read-only demo, a write lock, a missing
-     * permission. Disables the arm button like `disabled`, and SAYS so: the sentence is
-     * shown under the button and attached to it with `aria-describedby`, and the button
-     * stays focusable (`aria-disabled`) so a keyboard user can land on it and hear why.
-     *
-     * On the ARM button rather than the confirm: arming asks for a password, and asking
-     * for a password for a write that can never land is the worse of the two.
-     */
-    lockedReason?: ReactNode;
-    /** Controlled armed state. The parent can then collapse the tile from a mutation's
-     *  own `onSuccess` without returning a promise. */
-    armed?: boolean;
-    /** Called with the next armed state — on arm, cancel, and a resolved `onConfirm`. */
-    onArmedChange?: (armed: boolean) => void;
-    /** User-facing strings; see {@link DangerConfirmLabels}. */
-    labels?: Partial<DangerConfirmLabels>;
-}
-/**
- * An "arm → confirm" tile for destructive actions: one button, which expands into a
- * warning, an optional password field, an optional type-to-confirm field and a
- * confirm that stays disabled until every guard is satisfied.
- *
- * Keksdose hand-rolled it three times (load demo data, wipe everything, reset a
- * budget) and then as `shared/components/danger-confirm.tsx`; the only app-specific
- * part was its write-lock hook, which is `lockedReason` here.
- *
- * The fields are a `<form>`, so Enter confirms once the guards allow it. They are
- * wiped every time the tile disarms — a password must not sit in a collapsed tile.
- * Arming moves focus to the first field (or Cancel, when there is none — never to the
- * destructive button itself), and disarming moves it back to the arm button, so the
- * keyboard user is never left on an element that just vanished.
- */
-declare function DangerConfirm({ onConfirm, requirePassword, phrase, phraseMatch, prompt, tone, armLabel, confirmLabel, busy: busyProp, disabled, lockedReason, armed: armedProp, onArmedChange, labels: labelsProp, className, ...rest }: DangerConfirmProps): react.JSX.Element;
-
-export { CurrentPasswordInput, DEFAULT_DANGER_CONFIRM_LABELS, DangerConfirm, type DangerConfirmLabels, type DangerConfirmProps, type TypedMatch, typedMatches, usePromisePending };
+import 'react';
+export { S as CurrentPasswordInput, T as CurrentPasswordInputLabels, U as CurrentPasswordInputProps, a1 as DEFAULT_DANGER_CONFIRM_LABELS, ah as DangerConfirm, ai as DangerConfirmLabels, aj as DangerConfirmProps, ak as DangerConfirmValues, al as DangerConsequence, bT as TypedConfirmField, bU as TypedConfirmFieldLabels, bV as TypedConfirmFieldProps, bW as TypedMatch, c6 as typedMatches, ci as usePromisePending } from '../feedback-BxeQVzwq.js';
+import '../feedback-attachment-fGAzZPf0.js';
+import '../feedback/feedback-inbox.js';
+import 'lucide-react';
+import './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
+import '../data-table-labels-B7OdnM0S.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
+import './mini-calendar.js';
+import './calendar-heatmap.js';
+import './popover.js';
+import './chip.js';
+import './field-sync.js';
+import '../wizard/types.js';
+import '../tour/tour.js';
+import '../search/command-palette.js';
+import '../search/global-search.js';
+import '../search/search-index.js';
+import './month-picker.js';
+import './page-contents.js';
+import './series-chart-labels.js';
+import './pie-chart-labels.js';
+import './sparkline.js';
+import './stat-tile.js';
+import './signature-pad.js';
+import './password-strength.js';
+import './swatch-picker.js';
+import './tile-radio.js';
+import './icon-picker.js';
+import './dialog-frame.js';
+import './modal.js';
+import '../hooks/use-search-param-state.js';
+import './measured-grid.js';
+import './account-settings-labels.js';
+import './floating-panel.js';
+import './bulk-action-bar.js';
+import './list.js';
+import './signed-amount.js';
+import './breadcrumbs.js';
+import './toast.js';
+import './description-list.js';
+import './line-items.js';
+import './progress-bar.js';
+import './error-boundary.js';
+import './authed-image.js';
+import '../hooks/use-authed-src.js';
+import './image-grid.js';
+import './lightbox.js';
+import './write-lock.js';
+import './legal.js';
+import './account-chips.js';
+import '../lib/format.js';
+import './reauth-dialog.js';
+import './server-wake.js';
+import '../lib/server-wake.js';
+import './translation-review-labels.js';
+import '../lib/translation-review.js';
+import './country-select.js';
+import './inline-edit-field.js';
+import '../lib/iban.js';
+import '../lib/phone.js';
+import './sign-chip.js';
+import './column-mapper.js';
+import '../lib/column-mapping.js';
+import '../lib/table-text.js';
+import './field-parts.js';

package/dist/components/danger-confirm.js

@@ -1,10 +1,12 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
 import { cn } from "../lib/cn.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
 import { Button, Input, Label, Spinner } from "./ui.js";
+import { Checkbox } from "./checkbox.js";
 import { Tooltip } from "./tooltip.js";
+import { useCommitReason } from "./write-lock.js";
 function typedMatches(typed, target, mode = "trim") {
   if (mode === "exact") return typed === target;
   if (mode === "trim") return typed.trim() === target;
@@ -36,41 +38,106 @@ function usePromisePending() {
   }, []);
   return { pending, run };
 }
-function CurrentPasswordInput({
-  inputRef,
-  label,
-  value,
+function hasContent(node) {
+  return node !== void 0 && node !== null && node !== false && node !== "";
+}
+const CurrentPasswordInput = forwardRef(
+  function CurrentPasswordInput2({ label, onValueChange, onChange, busy, readOnly, labels: labelsProp, ...rest }, ref) {
+    const labels = useKitLabels("dangerConfirm", DEFAULT_DANGER_CONFIRM_LABELS, labelsProp);
+    const namedOtherwise = rest["aria-label"] !== void 0 || rest["aria-labelledby"] !== void 0;
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        ...rest,
+        ref,
+        type: "password",
+        autoComplete: "current-password",
+        label: label === void 0 ? namedOtherwise ? void 0 : labels.password : hasContent(label) ? label : void 0,
+        readOnly: Boolean(busy) || readOnly,
+        onChange: (e) => {
+          onChange?.(e);
+          onValueChange?.(e.target.value);
+        }
+      }
+    );
+  }
+);
+CurrentPasswordInput.displayName = "CurrentPasswordInput";
+const TypedConfirmField = forwardRef(function TypedConfirmField2({
+  target,
+  match = "trim",
+  value: valueProp,
+  defaultValue = "",
   onValueChange,
+  onMatchedChange,
+  onChange,
+  label: labelProp,
+  placeholder: placeholderProp,
   busy,
-  invalid,
-  describedBy
-}) {
-  return /* @__PURE__ */ jsx(
-    Input,
-    {
-      ref: inputRef,
-      type: "password",
-      autoComplete: "current-password",
-      label,
-      value,
-      readOnly: busy,
-      invalid,
-      "aria-describedby": describedBy,
-      onChange: (e) => onValueChange(e.target.value)
+  readOnly,
+  labels: labelsProp,
+  id,
+  className,
+  ...rest
+}, ref) {
+  const labels = useKitLabels("dangerConfirm", DEFAULT_DANGER_CONFIRM_LABELS, labelsProp);
+  const [own, setOwn] = useState(defaultValue);
+  const value = valueProp ?? own;
+  const matched = typedMatches(value, target, match);
+  const generated = useId();
+  const fieldId = id ?? generated;
+  const label = labelProp !== void 0 ? labelProp : typeof labels.phrase === "function" ? labels.phrase(target) : labels.phrase;
+  const fromLabels = labels.phrasePlaceholder === void 0 ? void 0 : typeof labels.phrasePlaceholder === "function" ? labels.phrasePlaceholder(target) : labels.phrasePlaceholder;
+  const placeholder = placeholderProp ?? fromLabels;
+  const fieldProps = {
+    ...rest,
+    ref,
+    id: fieldId,
+    value,
+    autoComplete: "off",
+    autoCapitalize: "off",
+    autoCorrect: "off",
+    spellCheck: false,
+    readOnly: Boolean(busy) || readOnly,
+    "data-matched": matched || void 0,
+    onChange: (e) => {
+      onChange?.(e);
+      const next = e.target.value;
+      if (valueProp === void 0) setOwn(next);
+      onValueChange?.(next);
+      const nextMatched = typedMatches(next, target, match);
+      if (nextMatched !== matched) onMatchedChange?.(nextMatched);
     }
-  );
-}
+  };
+  if (placeholder) {
+    return (
+      // A static label above, so the placeholder has the empty field to itself.
+      /* @__PURE__ */ jsxs("div", { className: cn("space-y-1.5", className), children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, children: label }),
+        /* @__PURE__ */ jsx(Input, { ...fieldProps, placeholder })
+      ] })
+    );
+  }
+  return /* @__PURE__ */ jsx(Input, { ...fieldProps, label, className });
+});
+TypedConfirmField.displayName = "TypedConfirmField";
 const DEFAULT_DANGER_CONFIRM_LABELS = {
   arm: "Delete\u2026",
   confirm: "Delete",
   cancel: "Cancel",
   prompt: "This cannot be undone.",
   password: "Password",
-  phrase: (phrase) => `Type \u201C${phrase}\u201D to confirm`
+  phrase: (phrase) => `Type \u201C${phrase}\u201D to confirm`,
+  acknowledge: "I have read what this does and want to continue.",
+  needsPhrase: (phrase) => `Type \u201C${phrase}\u201D to confirm`,
+  needsAcknowledge: "Tick the box to confirm",
+  needsPassword: "Enter your password to confirm"
 };
 function DangerConfirm({
   onConfirm,
   requirePassword,
+  requireAcknowledge,
+  consequences,
   phrase,
   phraseMatch = "trim",
   prompt,
@@ -79,7 +146,8 @@ function DangerConfirm({
   confirmLabel,
   busy: busyProp,
   disabled,
-  lockedReason,
+  lockedReason: ownLockedReason,
+  commit,
   armed: armedProp,
   onArmedChange,
   labels: labelsProp,
@@ -87,15 +155,17 @@ function DangerConfirm({
   ...rest
 }) {
   const labels = useKitLabels("dangerConfirm", DEFAULT_DANGER_CONFIRM_LABELS, labelsProp);
+  const lockedReason = useCommitReason(commit, ownLockedReason);
   const [armedState, setArmedState] = useState(false);
   const armed = armedProp ?? armedState;
   const [password, setPassword] = useState("");
   const [typed, setTyped] = useState("");
+  const [acknowledged, setAcknowledged] = useState(false);
   const { pending, run } = usePromisePending();
   const busy = Boolean(busyProp) || pending;
   const promptId = useId();
+  const consequencesId = useId();
   const reasonId = useId();
-  const phraseFieldId = useId();
   const armId = useId();
   const cancelId = useId();
   const firstFieldRef = useRef(null);
@@ -106,6 +176,7 @@ function DangerConfirm({
     if (!armed) {
       setPassword("");
       setTyped("");
+      setAcknowledged(false);
     }
   }
   const prevArmed = useRef(armed);
@@ -127,26 +198,29 @@ function DangerConfirm({
     if (armedProp === void 0) setArmedState(next);
     onArmedChange?.(next);
   };
-  const locked = lockedReason !== void 0 && lockedReason !== null && lockedReason !== false && lockedReason !== "";
+  const locked = hasContent(lockedReason);
+  const acknowledgeLabel = requireAcknowledge === true ? labels.acknowledge : hasContent(requireAcknowledge) ? requireAcknowledge : null;
+  const asksAcknowledge = acknowledgeLabel !== null;
   const passwordOk = !requirePassword || password !== "";
   const phraseOk = phrase === void 0 || typedMatches(typed, phrase, phraseMatch);
-  const canConfirm = passwordOk && phraseOk && !busy;
+  const acknowledgeOk = !asksAcknowledge || acknowledged;
+  const canConfirm = passwordOk && phraseOk && acknowledgeOk && !busy;
+  const guardReason = !acknowledgeOk ? labels.needsAcknowledge : !phraseOk ? typeof labels.needsPhrase === "function" ? labels.needsPhrase(phrase ?? "") : labels.needsPhrase : !passwordOk ? labels.needsPassword : void 0;
+  const confirmReason = locked ? lockedReason : busy ? void 0 : guardReason;
   const submit = (e) => {
     e.preventDefault();
-    if (!canConfirm) return;
-    run(onConfirm(requirePassword ? password : void 0), () => setArmed(false));
-  };
-  const phrasePlaceholder = phrase === void 0 || labels.phrasePlaceholder === void 0 ? void 0 : typeof labels.phrasePlaceholder === "function" ? labels.phrasePlaceholder(phrase) : labels.phrasePlaceholder;
-  const phraseLabel = phrase === void 0 ? "" : typeof labels.phrase === "function" ? labels.phrase(phrase) : labels.phrase;
-  const phraseFieldProps = {
-    ref: firstFieldRef,
-    value: typed,
-    autoComplete: "off",
-    autoCapitalize: "off",
-    spellCheck: false,
-    readOnly: busy,
-    onChange: (e) => setTyped(e.target.value)
+    if (!canConfirm || locked) return;
+    const values = {
+      ...phrase !== void 0 && { typed: phraseMatch === "exact" ? typed : typed.trim() },
+      ...requirePassword && { password },
+      ...asksAcknowledge && { acknowledged: true }
+    };
+    run(onConfirm(values.password, values), () => setArmed(false));
   };
+  const firstField = asksAcknowledge ? "acknowledge" : phrase !== void 0 ? "phrase" : "password";
+  const lines = (consequences ?? []).map(
+    (item, index) => typeof item === "string" ? { key: item, text: item, severe: false } : { key: item.key ?? String(index), text: item.text, severe: Boolean(item.severe) }
+  );
   const toneText = tone === "warning" ? "text-[var(--warning)]" : "text-[var(--danger)]";
   if (!armed) {
     const arm = /* @__PURE__ */ jsx(
@@ -184,23 +258,40 @@ function DangerConfirm({
     "form",
     {
       className: "space-y-2",
-      "aria-describedby": promptId,
+      "aria-describedby": lines.length > 0 ? `${promptId} ${consequencesId}` : promptId,
       "aria-busy": busy || void 0,
       onSubmit: submit,
       noValidate: true,
       children: [
         /* @__PURE__ */ jsx("p", { id: promptId, className: cn("text-xs font-medium", toneText), children: prompt ?? labels.prompt }),
-        phrase !== void 0 && (phrasePlaceholder ? (
-          // A static label above, so the placeholder has the empty field to itself.
-          /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: phraseFieldId, children: phraseLabel }),
-            /* @__PURE__ */ jsx(Input, { id: phraseFieldId, placeholder: phrasePlaceholder, ...phraseFieldProps })
-          ] })
-        ) : /* @__PURE__ */ jsx(Input, { label: phraseLabel, ...phraseFieldProps })),
+        lines.length > 0 && /* @__PURE__ */ jsx("ul", { id: consequencesId, className: "list-disc space-y-1 ps-5 text-xs text-[var(--text-secondary)]", children: lines.map((line) => /* @__PURE__ */ jsx("li", { className: line.severe ? "text-[var(--danger)]" : void 0, children: line.text }, line.key)) }),
+        asksAcknowledge && /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            ref: firstField === "acknowledge" ? firstFieldRef : void 0,
+            label: acknowledgeLabel,
+            checked: acknowledged,
+            onCheckedChange: (next) => {
+              if (!busy) setAcknowledged(next);
+            }
+          }
+        ),
+        phrase !== void 0 && /* @__PURE__ */ jsx(
+          TypedConfirmField,
+          {
+            ref: firstField === "phrase" ? firstFieldRef : void 0,
+            target: phrase,
+            match: phraseMatch,
+            value: typed,
+            onValueChange: setTyped,
+            busy,
+            labels: { phrase: labels.phrase, phrasePlaceholder: labels.phrasePlaceholder }
+          }
+        ),
         requirePassword && /* @__PURE__ */ jsx(
           CurrentPasswordInput,
           {
-            inputRef: phrase === void 0 ? firstFieldRef : void 0,
+            ref: firstField === "password" ? firstFieldRef : void 0,
             label: labels.password,
             value: password,
             busy,
@@ -215,6 +306,7 @@ function DangerConfirm({
               type: "submit",
               variant: tone === "warning" ? "primary" : "danger",
               disabled: !canConfirm,
+              disabledReason: confirmReason,
               "aria-busy": busy || void 0,
               children: [
                 busy && /* @__PURE__ */ jsx(Spinner, { label: null, className: "h-4 w-4" }),
@@ -222,7 +314,8 @@ function DangerConfirm({
               ]
             }
           )
-        ] })
+        ] }),
+        locked && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: lockedReason })
       ]
     }
   ) });
@@ -231,6 +324,7 @@ export {
   CurrentPasswordInput,
   DEFAULT_DANGER_CONFIRM_LABELS,
   DangerConfirm,
+  TypedConfirmField,
   typedMatches,
   usePromisePending
 };