@eifi1/ui-kit 0.14.0 → 0.14.2

package/src/components/page-header.tsx

@@ -1,3 +1,4 @@
+import { useLayoutEffect, useRef, useState } from "react";
 import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
 import { cn } from "../lib/cn";
 import { SECTION_LABEL_CLASS } from "./text";
@@ -42,11 +43,15 @@ const ROW: Record<PageHeaderMobileLayout, string> = {
  */
 export type PageHeaderActionsAlign = "start" | "center" | "end";
 
-/** Per layout, because `stacked` is a column on a phone — a `self-center` there would
- *  centre the actions HORIZONTALLY — so it only aligns from `sm` up. */
-const ACTIONS_ALIGN: Record<PageHeaderMobileLayout, Record<PageHeaderActionsAlign, string>> = {
-  stacked: { start: "sm:self-start", center: "sm:self-center", end: "sm:self-end" },
-  inline: { start: "self-start", center: "self-center", end: "self-end" },
+/** Applied to the ROW, so the title block and the actions are aligned against each
+ *  other on one cross axis. 0.14.0 put `self-*` on the actions box alone, which moved
+ *  nothing when the actions were the taller item — they already filled the row, and
+ *  the title stayed at the top (keksdose H2, reports-page's two-line labelled
+ *  CurrencySelect). Per layout, because `stacked` is a column on a phone, where
+ *  `items-center` would centre everything HORIZONTALLY — so it aligns from `sm` up. */
+const ROW_ALIGN: Record<PageHeaderMobileLayout, Record<PageHeaderActionsAlign, string>> = {
+  stacked: { start: "sm:items-start", center: "sm:items-center", end: "sm:items-end" },
+  inline: { start: "items-start", center: "items-center", end: "items-end" },
 };
 
 export interface PageHeaderProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
@@ -106,7 +111,9 @@ export interface PageHeaderProps extends Omit<ComponentPropsWithoutRef<"div">, "
    * `CurrencySelect` as its action: a field with its label on top is taller than the
    * title, and `stacked`'s default top alignment hangs it from the title's cap height
    * with its control well below the title's line. `center` sets it on the title's
-   * middle, as that page's hand-written `items-center` row did.
+   * middle, as that page's hand-written `items-center` row did. It aligns the whole row
+   * (title block and actions against each other), since 0.14.1: 0.14.0 moved only the
+   * actions box, which did nothing when the actions were the taller item (keksdose H2).
    */
   actionsAlign?: PageHeaderActionsAlign;
   /**
@@ -155,7 +162,44 @@ export function PageHeader({
   const Heading = as as ElementType;
   const hasSecondary = secondaryActions != null;
   const wrapsSecondary = hasSecondary && mobileLayout === "inline";
-  const align = actionsAlign != null ? ACTIONS_ALIGN[mobileLayout][actionsAlign] : undefined;
+  const align = actionsAlign != null ? ROW_ALIGN[mobileLayout][actionsAlign] : undefined;
+  // keksdose H1: in `inline` the title block could shrink below its longest word, and
+  // `break-words` then split "Monatsbudget" into "Monatsbudg" / "et" beside the actions.
+  // Unless it truncates, the title keeps its longest word (min-content) and the ROW
+  // wraps instead: actions that do not fit go to a line of their own, as the app's old
+  // `flex-wrap` header did.
+  const keepsWords = mobileLayout === "inline" && !truncateTitle;
+  // keksdose, after H1: once the actions have wrapped below the title, the phone's
+  // header was THREE rows — title / actions / secondary — where the app's old header
+  // shared the second row between the month nav and the toggles (~48px of phone
+  // height). So the secondary group's full-width basis (G6b: a row of its own) is
+  // dropped exactly when the actions already sit below the title; then it joins their
+  // row if it fits, and wraps under them if not. While the actions share the title's
+  // row, nothing changes: the secondary group never climbs onto the title's row.
+  //
+  // CSS cannot see "the previous item wrapped", so it is measured — by a
+  // ResizeObserver, whose first callback runs on `observe`. It is stable: the
+  // secondary group comes after the actions, so its basis cannot move them. No
+  // ResizeObserver (jsdom) or no layout keeps the basis, the 0.14.0 layout.
+  const measuresWrap = keepsWords && hasSecondary && actions != null;
+  const titleRef = useRef<HTMLDivElement>(null);
+  const actionsRef = useRef<HTMLDivElement>(null);
+  const [actionsWrapped, setActionsWrapped] = useState(false);
+  useLayoutEffect(() => {
+    const titleBox = titleRef.current;
+    const actionsBox = actionsRef.current;
+    if (!measuresWrap || !titleBox || !actionsBox || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      const t = titleBox.getBoundingClientRect();
+      const a = actionsBox.getBoundingClientRect();
+      // Unmeasured (display: none, no layout): keep the full-width basis.
+      setActionsWrapped(t.height > 0 && a.height > 0 && a.top >= t.bottom - 1);
+    });
+    observer.observe(titleBox);
+    observer.observe(actionsBox);
+    if (titleBox.parentElement) observer.observe(titleBox.parentElement);
+    return () => observer.disconnect();
+  }, [measuresWrap]);
   return (
     <div {...rest} className={cn("flex min-w-0 flex-col gap-2", className)}>
       {breadcrumbs}
@@ -164,8 +208,15 @@ export function PageHeader({
           basis would size a column item's HEIGHT); from `sm` up the row stops wrapping
           and the order utilities seat it between the title and the actions. Without
           one, nothing changes. */}
-      <div className={cn("flex min-w-0", ROW[mobileLayout], wrapsSecondary && "flex-wrap sm:flex-nowrap")}>
-        <div className="min-w-0 flex-1">
+      <div
+        className={cn(
+          "flex min-w-0",
+          ROW[mobileLayout],
+          keepsWords ? "flex-wrap" : wrapsSecondary && "flex-wrap sm:flex-nowrap",
+          align,
+        )}
+      >
+        <div ref={titleRef} className={cn("flex-1", keepsWords ? "min-w-min" : "min-w-0")}>
           {eyebrow != null && <p className={cn(SECTION_LABEL_CLASS.xs, "mb-1")}>{eyebrow}</p>}
           <Heading
             className={cn(
@@ -179,7 +230,10 @@ export function PageHeader({
           {description != null && <p className="mt-1 text-sm text-[var(--text-muted)]">{description}</p>}
         </div>
         {actions != null && (
-          <div className={cn("flex shrink-0 flex-wrap items-center gap-2", hasSecondary && "sm:order-2", align)}>
+          <div
+            ref={actionsRef}
+            className={cn("flex shrink-0 flex-wrap items-center gap-2", hasSecondary && "sm:order-2")}
+          >
             {actions}
           </div>
         )}
@@ -187,8 +241,7 @@ export function PageHeader({
           <div
             className={cn(
               "flex flex-wrap items-center gap-2 sm:order-1 sm:shrink-0",
-              wrapsSecondary && "basis-full sm:basis-auto",
-              align,
+              wrapsSecondary && (measuresWrap && actionsWrapped ? "sm:basis-auto" : "basis-full sm:basis-auto"),
             )}
           >
             {secondaryActions}

package/src/components/text-link.tsx

@@ -4,6 +4,7 @@ import type { LucideIcon } from "lucide-react";
 import { cn } from "../lib/cn";
 import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from "../i18n/kit-labels";
 import type { KitLinkComponent } from "../i18n/kit-labels";
+import { documentNavigation } from "../lib/document-navigation";
 
 /* ── Choosing what draws a link ──────────────────────────────────────────── */
 
@@ -98,7 +99,7 @@ export function replacingClick(
     onClick?.(event);
     if (!isPlainNavigationClick(event)) return;
     event.preventDefault();
-    window.location.replace(href);
+    documentNavigation.replace(href);
   };
 }
 

package/src/feedback/feedback-dialog.tsx

@@ -53,6 +53,9 @@ export interface FeedbackDialogTextLabels {
   category: string;
   subject: string;
   body: string;
+  /** The body's label when `requireBody={false}`: "What happened? (optional)".
+   *  Optional, so a complete `UiKitLabels` typed before 0.14.2 still compiles. */
+  bodyOptional?: string;
   /** The heading over the attachment buttons. */
   attachment: string;
   /** The line beside the buttons naming the shortcut. */
@@ -66,6 +69,7 @@ export const DEFAULT_FEEDBACK_DIALOG_LABELS: FeedbackDialogTextLabels = {
   category: "Category",
   subject: "Subject",
   body: "What happened?",
+  bodyOptional: "What happened? (optional)",
   attachment: "Screenshot",
   submitHint: "Ctrl/⌘ + Enter to send",
   cancel: "Cancel",
@@ -108,6 +112,7 @@ export function FeedbackDialog({
   maxAttachmentBytes = DEFAULT_MAX_ATTACHMENT_BYTES,
   onAttachmentError,
   onCaptureScreenshot,
+  requireBody = true,
 }: {
   open: boolean;
   onClose: () => void;
@@ -129,6 +134,12 @@ export function FeedbackDialog({
    * attachment"; the returned file is fed through the same validation + preview.
    */
   onCaptureScreenshot?: () => Promise<File | null>;
+  /**
+   * `false`: a report with only a subject can be sent, and the body's label says it is
+   * optional (`bodyOptional`, unless `labels.body` is passed). Default `true`, the
+   * dialog's behaviour until 0.14.2 (keksdose K1: its backend takes title-only reports).
+   */
+  requireBody?: boolean;
 }) {
   const [title, setTitle] = useState("");
   const [body, setBody] = useState("");
@@ -151,7 +162,9 @@ export function FeedbackDialog({
     }
   }
 
-  const canSubmit = !!title && !!body && !submitting;
+  // Trimmed: a subject or body of spaces is empty (keksdose's API answers a blank title
+  // with a 422, and a blank report is no report).
+  const canSubmit = !!title.trim() && (!requireBody || !!body.trim()) && !submitting;
   const trySubmit = () => {
     if (canSubmit) void onSubmit({ title, body, category, attachment });
   };
@@ -174,7 +187,12 @@ export function FeedbackDialog({
     <Input label={labels.subject} value={title} onChange={(e) => setTitle(e.target.value)} variant="display" />
   );
   const bodyField = (
-    <Textarea rows={5} label={labels.body} value={body} onChange={(e) => setBody(e.target.value)} />
+    <Textarea
+      rows={5}
+      label={requireBody ? labels.body : (labelsProp?.body ?? labels.bodyOptional ?? labels.body)}
+      value={body}
+      onChange={(e) => setBody(e.target.value)}
+    />
   );
   const attachmentField = (
     <FeedbackAttachmentField

package/src/i18n/locales/de.ts

@@ -26,6 +26,7 @@ export function uiKitLabelsDe(numberLocale = "de-DE"): UiKitLabels {
       category: "Kategorie",
       subject: "Betreff",
       body: "Was ist passiert?",
+      bodyOptional: "Was ist passiert? (optional)",
       attachment: "Screenshot",
       submitHint: "Strg/⌘ + Enter zum Senden",
       cancel: "Abbrechen",

package/src/i18n/locales/es.ts

@@ -27,6 +27,7 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
       category: "Categoría",
       subject: "Asunto",
       body: "¿Qué ha pasado?",
+      bodyOptional: "¿Qué ha pasado? (opcional)",
       attachment: "Captura de pantalla",
       submitHint: "Ctrl/⌘ + Intro para enviar",
       cancel: "Cancelar",

package/src/i18n/locales/fr.ts

@@ -27,6 +27,7 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
       category: "Catégorie",
       subject: "Objet",
       body: "Que s’est-il passé\u202f?",
+      bodyOptional: "Que s’est-il passé\u202f? (facultatif)",
       attachment: "Capture d’écran",
       submitHint: "Ctrl/⌘ + Entrée pour envoyer",
       cancel: "Annuler",

package/src/i18n/locales/hu.ts

@@ -26,6 +26,7 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
       category: "Kategória",
       subject: "Tárgy",
       body: "Mi történt?",
+      bodyOptional: "Mi történt? (nem kötelező)",
       attachment: "Képernyőkép",
       submitHint: "Ctrl/⌘ + Enter a küldéshez",
       cancel: "Mégse",

package/src/i18n/locales/it.ts

@@ -27,6 +27,7 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
       category: "Categoria",
       subject: "Oggetto",
       body: "Cosa è successo?",
+      bodyOptional: "Cosa è successo? (facoltativo)",
       attachment: "Screenshot",
       submitHint: "Ctrl/⌘ + Invio per inviare",
       cancel: "Annulla",

package/src/i18n/locales/zh.ts

@@ -26,6 +26,7 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
       category: "类别",
       subject: "主题",
       body: "发生了什么？",
+      bodyOptional: "发生了什么？（可选）",
       attachment: "截图",
       submitHint: "Ctrl/⌘ + Enter 发送",
       cancel: "取消",

package/src/index.ts

@@ -83,6 +83,7 @@ export * from "./components/numpad-sheet";
 export * from "./components/number-input";
 export * from "./components/currency-select";
 export * from "./components/amount-input";
+export * from "./components/money-field";
 export * from "./components/combobox";
 export * from "./components/picker-sheet";
 export * from "./components/entity-combobox";

package/src/lib/document-navigation.ts

@@ -0,0 +1,17 @@
+/**
+ * The full-document navigations the kit makes, behind one object the tests can spy on.
+ *
+ * jsdom implements neither `location.reload` nor `location.replace`, and its
+ * `window.location` is unforgeable: a test cannot stub it by redefining the property
+ * once the suite runs each file in its own VM context (`pool: "vmThreads"`, which took
+ * the suite from ~3 minutes to ~1). `vi.spyOn(documentNavigation, "reload")` works in
+ * every pool. Internal, not part of the package's surface.
+ */
+export const documentNavigation = {
+  reload(): void {
+    window.location.reload();
+  },
+  replace(href: string): void {
+    window.location.replace(href);
+  },
+};