@eifi1/ui-kit 0.6.0 → 0.7.0

package/src/components/danger-confirm.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useId, useRef, useState } from "react";
-import type { ComponentPropsWithoutRef, FormEvent, ReactNode } from "react";
+import type { ChangeEvent, ComponentPropsWithoutRef, FormEvent, ReactNode } from "react";
 import { cn } from "../lib/cn";
 import { useKitLabels } from "../i18n/kit-labels";
-import { Button, Input, Spinner } from "./ui";
+import { Button, Input, Label, Spinner } from "./ui";
+import { Tooltip } from "./tooltip";
 
 /**
  * Every string the tile renders — the `dangerConfirm` namespace of
@@ -20,20 +21,30 @@ export interface DangerConfirmLabels {
   prompt: string;
   /** Label of the password field (`requirePassword`). */
   password: string;
-  /** Label of the type-to-confirm field, given the phrase to type. A FUNCTION, like
+  /** 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. */
-  phrase: (phrase: string) => string;
+   *  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);
 }
 
-export const DEFAULT_DANGER_CONFIRM_LABELS: DangerConfirmLabels = {
+/** `satisfies` rather than a type annotation, so `DEFAULT_DANGER_CONFIRM_LABELS.phrase`
+ *  stays callable for a caller that composes its own label from it. */
+export const DEFAULT_DANGER_CONFIRM_LABELS = {
   arm: "Delete…",
   confirm: "Delete",
   cancel: "Cancel",
   prompt: "This cannot be undone.",
   password: "Password",
-  phrase: (phrase) => `Type “${phrase}” to confirm`,
-};
+  phrase: (phrase: string) => `Type “${phrase}” to confirm`,
+} satisfies DangerConfirmLabels;
 
 export interface DangerConfirmProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
   /**
@@ -48,8 +59,15 @@ export interface DangerConfirmProps extends Omit<ComponentPropsWithoutRef<"div">
   /** 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 exactly (case-sensitive, surrounding spaces ignored). */
+   *  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".
+   */
+  phraseMatch?: "trim" | "exact";
   /** The warning above the fields. Defaults to `labels.prompt`. */
   prompt?: ReactNode;
   /** `"danger"` (default) for what cannot be undone; `"warning"` for what can, at a
@@ -103,6 +121,7 @@ export function DangerConfirm({
   onConfirm,
   requirePassword,
   phrase,
+  phraseMatch = "trim",
   prompt,
   tone = "danger",
   armLabel,
@@ -127,6 +146,7 @@ export function DangerConfirm({
   // that has focus (Enter was pressed in it) drops focus to <body>.
   const promptId = useId();
   const reasonId = useId();
+  const phraseFieldId = useId();
 
   // The kit's Button takes no ref, so the two buttons focus is moved to are found by id.
   const armId = useId();
@@ -180,7 +200,7 @@ export function DangerConfirm({
 
   const locked = lockedReason !== undefined && lockedReason !== null && lockedReason !== false && lockedReason !== "";
   const passwordOk = !requirePassword || password !== "";
-  const phraseOk = phrase === undefined || typed.trim() === phrase;
+  const phraseOk = phrase === undefined || (phraseMatch === "exact" ? typed : typed.trim()) === phrase;
   const canConfirm = passwordOk && phraseOk && !busy;
 
   const submit = (e: FormEvent) => {
@@ -202,25 +222,61 @@ export function DangerConfirm({
     );
   };
 
+  const phrasePlaceholder =
+    phrase === undefined || labels.phrasePlaceholder === undefined
+      ? undefined
+      : typeof labels.phrasePlaceholder === "function"
+        ? labels.phrasePlaceholder(phrase)
+        : labels.phrasePlaceholder;
+
+  const phraseLabel =
+    phrase === undefined ? "" : 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: ChangeEvent<HTMLInputElement>) => setTyped(e.target.value),
+  };
+
   const toneText = tone === "warning" ? "text-[var(--warning)]" : "text-[var(--danger)]";
 
   if (!armed) {
+    const arm = (
+      <Button
+        id={armId}
+        type="button"
+        variant={tone === "warning" ? "secondary" : "danger"}
+        disabled={disabled}
+        aria-disabled={locked || undefined}
+        aria-describedby={locked ? reasonId : undefined}
+        onClick={() => {
+          if (!locked) setArmed(true);
+        }}
+        className="aria-disabled:cursor-not-allowed aria-disabled:opacity-50"
+      >
+        {armLabel ?? labels.arm}
+      </Button>
+    );
     return (
       <div {...rest} className={cn("space-y-1", className)}>
-        <Button
-          id={armId}
-          type="button"
-          variant={tone === "warning" ? "secondary" : "danger"}
-          disabled={disabled}
-          aria-disabled={locked || undefined}
-          aria-describedby={locked ? reasonId : undefined}
-          onClick={() => {
-            if (!locked) setArmed(true);
-          }}
-          className="aria-disabled:cursor-not-allowed aria-disabled:opacity-50"
-        >
-          {armLabel ?? labels.arm}
-        </Button>
+        {locked ? (
+          // The reason on the button itself too, where the pointer that tried it is —
+          // the line below can sit out of view in a long settings card. Portalled, so
+          // a card that scrolls neither clips it nor grows by it.
+          //
+          // The button in a FRAGMENT on purpose: Tooltip clones an element child to
+          // add the bubble to its `aria-describedby`, and the button is already
+          // described by the visible line below — the same sentence twice, read out
+          // on every focus. A fragment is left as it is, so the bubble stays visual.
+          <Tooltip label={lockedReason} portal>
+            <>{arm}</>
+          </Tooltip>
+        ) : (
+          arm
+        )}
         {locked && (
           <p id={reasonId} className="text-xs text-[var(--text-muted)]">
             {lockedReason}
@@ -242,18 +298,16 @@ export function DangerConfirm({
         <p id={promptId} className={cn("text-xs font-medium", toneText)}>
           {prompt ?? labels.prompt}
         </p>
-        {phrase !== undefined && (
-          <Input
-            ref={firstFieldRef}
-            label={labels.phrase(phrase)}
-            value={typed}
-            autoComplete="off"
-            autoCapitalize="off"
-            spellCheck={false}
-            readOnly={busy}
-            onChange={(e) => setTyped(e.target.value)}
-          />
-        )}
+        {phrase !== undefined &&
+          (phrasePlaceholder ? (
+            // A static label above, so the placeholder has the empty field to itself.
+            <div className="space-y-1.5">
+              <Label htmlFor={phraseFieldId}>{phraseLabel}</Label>
+              <Input id={phraseFieldId} placeholder={phrasePlaceholder} {...phraseFieldProps} />
+            </div>
+          ) : (
+            <Input label={phraseLabel} {...phraseFieldProps} />
+          ))}
         {requirePassword && (
           <Input
             // The phrase field takes the ref when both are there — it comes first.

package/src/components/data-table-pagination.tsx

@@ -2,7 +2,7 @@ import { useMemo } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "../lib/cn";
 import { DEFAULT_DATA_TABLE_LABELS, type DataTableLabels } from "./data-table-labels";
-import { useKitLocale } from "../i18n/kit-labels";
+import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
 
 export const PAGE_SIZE_OPTIONS = [10, 25, 50, 100, 200] as const;
 
@@ -12,8 +12,11 @@ interface PaginationProps {
   pageSize: number;
   total: number;
   onPage: (p: number) => void;
-  onPageSize: (n: number) => void;
-  labels?: DataTableLabels;
+  /** Omit when the page size is not the user's to change (a server that fixes it):
+   *  the select is then not rendered at all, rather than rendered and inert. */
+  onPageSize?: (n: number) => void;
+  /** Over `dataTable` from `<UiKitProvider labels>`, over the English defaults. */
+  labels?: Partial<DataTableLabels>;
   /** For the page numbers and page-size options; falls back to the provider's. */
   locale?: string;
 }
@@ -27,9 +30,14 @@ export function Pagination({
   total,
   onPage,
   onPageSize,
-  labels = DEFAULT_DATA_TABLE_LABELS,
+  labels: labelsProp,
   locale: localeProp,
 }: PaginationProps) {
+  // prop > provider > English, like every other kit component. This defaulted straight
+  // to the English object, so a standalone pager under a translated provider still
+  // said "Rows per page" — only the pager INSIDE a DataTable was translated, because
+  // the table resolved the provider's labels and handed them down.
+  const labels = useKitLabels("dataTable", DEFAULT_DATA_TABLE_LABELS, labelsProp);
   const locale = useKitLocale(localeProp);
   // The bare numbers on the strip and in the select are text too: `String(n)` is
   // always ASCII digits, which is wrong for a locale that writes its own. The range
@@ -60,19 +68,23 @@ export function Pagination({
             ? labels.rowCount(total)
             : labels.pageRange(page * pageSize + 1, Math.min(total, (page + 1) * pageSize), total)}
         </span>
-        <select
-          value={pageSize === Infinity ? "all" : pageSize}
-          onChange={(e) => onPageSize(e.target.value === "all" ? Infinity : Number(e.target.value))}
-          className="rounded border border-[var(--border)] bg-[var(--bg-surface)] px-1 py-0.5 text-xs"
-          aria-label={labels.pageSize}
-        >
-          {PAGE_SIZE_OPTIONS.map((n) => (
-            <option key={n} value={n}>
-              {num.format(n)}
-            </option>
-          ))}
-          <option value="all">{labels.pageSizeAll}</option>
-        </select>
+        {onPageSize && (
+          <select
+            value={pageSize === Infinity ? "all" : pageSize}
+            onChange={(e) =>
+              onPageSize(e.target.value === "all" ? Infinity : Number(e.target.value))
+            }
+            className="rounded border border-[var(--border)] bg-[var(--bg-surface)] px-1 py-0.5 text-xs"
+            aria-label={labels.pageSize}
+          >
+            {PAGE_SIZE_OPTIONS.map((n) => (
+              <option key={n} value={n}>
+                {num.format(n)}
+              </option>
+            ))}
+            <option value="all">{labels.pageSizeAll}</option>
+          </select>
+        )}
       </div>
       {pageSize !== Infinity && totalPages > 1 && (
         <div className="flex items-center gap-1">
@@ -83,7 +95,8 @@ export function Pagination({
             className="rounded p-1 hover:bg-[var(--bg-hover)] disabled:opacity-40"
             aria-label={labels.prevPage}
           >
-            <ChevronLeft className="size-4" />
+            {/* "Previous" points back along the line — left in LTR, right in RTL. */}
+            <ChevronLeft className="size-4 rtl:-scale-x-100" />
           </button>
           {items.map((it, i) =>
             it === "ellipsis" ? (
@@ -117,7 +130,7 @@ export function Pagination({
             className="rounded p-1 hover:bg-[var(--bg-hover)] disabled:opacity-40"
             aria-label={labels.nextPage}
           >
-            <ChevronRight className="size-4" />
+            <ChevronRight className="size-4 rtl:-scale-x-100" />
           </button>
         </div>
       )}