@eifi1/ui-kit 0.46.1 → 0.48.0

package/src/feedback/feedback-replies.tsx

@@ -1,15 +1,17 @@
 import { useState } from "react";
 import type { ReactNode } from "react";
-import { BellOff, Paperclip } from "lucide-react";
+import { BellOff } from "lucide-react";
 import { Select } from "../components/select";
 import type { CommitScope } from "../components/write-lock";
+import type { AuthedFetcher } from "../hooks/use-authed-src";
 import { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
 import { formatDate } from "../lib/format";
 import { FeedbackStatusBadge, selectableFeedbackStatuses, type FeedbackStatus } from "./feedback-inbox";
 import { useFeedbackStatusLabels } from "./feedback-labels";
 import type { FeedbackReply } from "./feedback-public-types";
-import { FEEDBACK_DECIDED_STATUSES, FEEDBACK_REPLY_MAX, attachmentName } from "./feedback-record";
+import { FEEDBACK_DECIDED_STATUSES, FEEDBACK_REPLY_MAX } from "./feedback-record";
+import { FeedbackEntryFile, useFeedbackEntryUpload, type FeedbackEntryUploadOptions } from "./feedback-entry-file";
 import { ChatComposer } from "./feedback-thread";
 import { DEFAULT_FEEDBACK_REPLIES_LABELS } from "./feedback-thread-parts-labels";
 import { FeedbackReworkEntryChip } from "./feedback-rework-entry-chip";
@@ -82,10 +84,14 @@ export interface FeedbackReplyTimelineProps {
   renderDate?: (iso: string) => string;
   /** Tag bodies and names `data-private` (a host's screen-share blur). Default true. */
   redact?: boolean;
-  /** 0.40: how a rework entry's file (`attachment_url`) is drawn under its text. Default:
-   *  its name beside a paperclip — the file itself is in the row detail's Attachment
-   *  section, fetched with the app's credentials. */
+  /** How an entry's file (`attachment_url` — a rework's since 0.40, an admin reply's
+   *  since 0.47) is drawn under its text. Default (0.47, §12): {@link FeedbackEntryFile} —
+   *  a picture inline as a thumbnail that opens full size, any other file a download —
+   *  through `fetcher`. */
   renderAttachment?: (url: string) => ReactNode;
+  /** 0.47: the app's authenticated GET (`AuthedImage`'s) for the entries' files. Left
+   *  out, the browser's own fetch with same-origin cookies. */
+  fetcher?: AuthedFetcher | null;
   labels?: LabelOverride<FeedbackRepliesLabels>;
   className?: string;
 }
@@ -118,12 +124,16 @@ function EntryStatus({ reply, statusChanged }: { reply: FeedbackReply; statusCha
  * 0.40 (§10.3): an author's **rework** entry (`kind: "rework"`) stands among them as the
  * author's — their name (`null` → "A user", never "Admin"), the **Rework** chip, the
  * status it moved the report to (none on a migrated one) and its file.
+ *
+ * 0.47 (§12): any entry's file — a rework's, an admin reply's — is drawn under its text,
+ * a picture INLINE ({@link FeedbackEntryFile}).
  */
 export function FeedbackReplyTimeline({
   replies,
   renderDate,
   redact = true,
   renderAttachment,
+  fetcher,
   labels: labelsProp,
   className,
 }: FeedbackReplyTimelineProps) {
@@ -160,15 +170,12 @@ export function FeedbackReplyTimeline({
             <p data-private={priv} dir="auto" className="mt-0.5 whitespace-pre-wrap break-words text-start text-primary">
               {reply.body}
             </p>
-            {rework && reply.attachment_url && (
-              <div className="mt-1 min-w-0" data-private={priv} data-feedback-entry-file="">
+            {reply.attachment_url && (
+              <div className="mt-1 min-w-0" data-private={priv} data-feedback-entry-attachment="">
                 {renderAttachment ? (
                   renderAttachment(reply.attachment_url)
                 ) : (
-                  <span className="inline-flex min-w-0 max-w-full items-center gap-1 text-xs text-secondary">
-                    <Paperclip className="size-3.5 shrink-0" aria-hidden />
-                    <span className="min-w-0 break-all">{attachmentName(reply.attachment_url)}</span>
-                  </span>
+                  <FeedbackEntryFile url={reply.attachment_url} fetcher={fetcher} />
                 )}
               </div>
             )}
@@ -204,15 +211,16 @@ const REPLY_ROW_ALIGN = cn(
   "pointer-coarse:[&_[data-chat-composer-hint]]:sr-only",
 );
 
-export interface FeedbackReplyComposerProps {
+export interface FeedbackReplyComposerProps extends FeedbackEntryUploadOptions {
   /** The report's status now — what "No change" keeps. */
   status: FeedbackStatus;
   /**
    * `POST /feedback/{id}/replies` — the body (1–{@link FEEDBACK_REPLY_MAX} after
-   * trimming) and the status picked, `undefined` for "No change". Return the promise:
-   * the box clears when it resolves, and keeps everything on a rejection.
+   * trimming), the status picked, `undefined` for "No change", and (0.47, §12) the URL
+   * of the one file uploaded with it, `undefined` for none. Return the promise: the box
+   * clears when it resolves, and keeps everything on a rejection.
    */
-  onReply: (body: string, status?: FeedbackStatus) => void | Promise<unknown>;
+  onReply: (body: string, status?: FeedbackStatus, attachmentUrl?: string) => void | Promise<unknown>;
   /** The reply is in flight. */
   pending?: boolean;
   /** Preselect this status and say the author has not been told (§9.7, the nudge) —
@@ -235,6 +243,13 @@ export interface FeedbackReplyComposerProps {
  * With `suggestedStatus` the line "The author has not been told. Add a reply." stands
  * above it and that status is picked, so the reply that answers it records the status
  * and the nudge goes away.
+ *
+ * 0.47 (§12, keksdose live #447): with `onUpload`, one file as the rework note takes it —
+ * a screenshot pasted into the box, a capture (`onCaptureScreenshot`), or a pick; the
+ * contract's types and 10 MB. It is uploaded FIRST; a failed upload toasts and sends
+ * nothing, and the draft and the file stay. `onUpload` here is the composer's own opt-in
+ * (new in 0.47, so no page passed it before); `FeedbackRowDetail` hands it on only with
+ * `replyAttachments`, since its `onUpload` is the rework note's too.
  */
 export function FeedbackReplyComposer({
   status,
@@ -242,10 +257,18 @@ export function FeedbackReplyComposer({
   pending = false,
   suggestedStatus,
   commit,
+  onUpload,
+  onCaptureScreenshot,
+  attachment,
   labels: labelsProp,
   className,
 }: FeedbackReplyComposerProps) {
   const labels = useFeedbackRepliesLabels(labelsProp);
+  const { composerAttachment, upload, uploading } = useFeedbackEntryUpload({
+    onUpload,
+    onCaptureScreenshot,
+    attachment,
+  });
   const statusNames = useFeedbackStatusLabels();
   // The pick, valid for the suggestion it was made under: a new suggestion (another
   // status set from the table) picks itself again.
@@ -255,9 +278,12 @@ export function FeedbackReplyComposer({
   });
   const picked = pick.under === suggestedStatus ? pick.value : (suggestedStatus ?? "");
 
-  const send = (body: string) => {
+  const send = async (body: string, file: File | null) => {
     const sent = picked;
-    return Promise.resolve(onReply(body, sent || undefined)).then(() => {
+    const url = await upload(file);
+    // The third argument only with a file, so a text reply calls as before 0.47.
+    const replied = url === undefined ? onReply(body, sent || undefined) : onReply(body, sent || undefined, url);
+    return Promise.resolve(replied).then(() => {
       setPick((current) => (current.value === sent ? { under: suggestedStatus, value: "" } : current));
     });
   };
@@ -272,7 +298,8 @@ export function FeedbackReplyComposer({
       )}
       <ChatComposer
         onSend={send}
-        pending={pending}
+        pending={pending || uploading}
+        attachment={composerAttachment}
         commit={commit}
         maxLength={FEEDBACK_REPLY_MAX}
         showCount
@@ -284,7 +311,7 @@ export function FeedbackReplyComposer({
           <Select
             aria-label={labels.status}
             value={picked}
-            disabled={pending}
+            disabled={pending || uploading}
             onChange={(event) =>
               setPick({ under: suggestedStatus, value: event.target.value as FeedbackStatus | "" })
             }

package/src/feedback/feedback-row-detail-labels.ts

@@ -24,7 +24,6 @@ export const DEFAULT_FEEDBACK_DETAIL_LABELS: FeedbackDetailLabels = {
   outcomeUpdate: "Update",
   outcomePlaceholder: "What was done, decided, or why this won't be addressed.",
   rework: "Rework",
-  openPage: "Open page",
   reworkTitle: "Send for rework",
   reworkSend: "Send rework",
   reworkPlaceholder: "What still needs refinement? Any new constraints or change of direction.",

package/src/feedback/feedback-row-detail.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
-import type { MouseEvent, ReactNode } from "react";
-import { Download, FileText, RotateCcw } from "lucide-react";
+import type { ReactNode } from "react";
+import { RotateCcw } from "lucide-react";
 import { AuthedImage } from "../components/authed-image";
 import { CopyButton } from "../components/copy-button";
 import { TextLink } from "../components/text-link";
@@ -8,7 +8,6 @@ import { toast } from "../components/toast";
 import { Button } from "../components/button";
 import type { AuthedFetcher } from "../hooks/use-authed-src";
 import { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
-import { filenameFromDisposition, saveBlob } from "../lib/download";
 import { formatDate } from "../lib/format";
 import { DEFAULT_MAX_ATTACHMENT_BYTES } from "./feedback-attachment";
 import { DEFAULT_FEEDBACK_DIALOG_LABELS } from "./feedback-dialog";
@@ -29,7 +28,6 @@ import {
   FEEDBACK_AUTHOR_EDITABLE_STATUSES,
   FEEDBACK_REWORKABLE_STATUSES,
   appendRework,
-  attachmentName,
   isImageAttachment,
   replaceDescription,
   splitBodyAttachments,
@@ -41,6 +39,7 @@ import type { FeedbackStatusChange } from "./feedback-status-undo";
 import type { CommitScope } from "../components/write-lock";
 import { DEFAULT_FEEDBACK_DETAIL_LABELS } from "./feedback-row-detail-labels";
 import { FeedbackReplyComposer, FeedbackReplyTimeline, feedbackReplyNudge } from "./feedback-replies";
+import { FeedbackAttachmentDownload, plainFeedbackFetch } from "./feedback-attachment-download";
 import { FeedbackPublicSwitch } from "./feedback-public-switch";
 import { FeedbackRepliesDrawnAboveContext } from "./feedback-replies-context";
 import { DEFAULT_FEEDBACK_COMMENTS_LABELS } from "./feedback-thread-parts-labels";
@@ -143,10 +142,6 @@ export interface FeedbackDetailLabels {
   outcomePlaceholder: string;
   /** The button that opens section 5 on an answered row. de-CH: "Nacharbeit" */
   rework: string;
-  /** The link to the page the report was filed on. de-CH: "Seite öffnen"
-   *  @deprecated 0.46 — the Replies section's "Open page" button is gone (keksdose live #449:
-   *  it repeated the URL section's link); removed in 0.47. Unused, kept for one release. */
-  openPage: string;
   /** Section 5's heading. de-CH: "Zur Nacharbeit senden" */
   reworkTitle: string;
   /** Section 5's send button. de-CH: "Nacharbeit senden" */
@@ -257,75 +252,6 @@ export function feedbackAttachmentUrls(
   return [...new Set(urls)];
 }
 
-/** The bytes behind a fetcher's answer — a `Blob` as it is, a `Response` checked. */
-async function toBlob(answer: Blob | Response): Promise<Blob> {
-  if (typeof Response !== "undefined" && answer instanceof Response) {
-    if (!answer.ok) throw new Error(`HTTP ${answer.status}`);
-    return answer.blob();
-  }
-  return answer as Blob;
-}
-
-/** No fetcher: the browser's own `fetch`, with the cookies a same-origin app uses. */
-const plainFetch: AuthedFetcher = (url, { signal }) => fetch(url, { signal, credentials: "same-origin" });
-
-/**
- * A PDF or a text log (keksdose `FeedbackFileDownload`, dev #578): the bytes sit behind
- * an authenticated route that serves them as `attachment`, never inline (§3.5), so a
- * plain link would be a 401 the moment it was opened. Fetched through the app's
- * fetcher and saved with {@link saveBlob}; a failure says so in a toast.
- *
- * Saved under the name the server gives it when the fetcher answers with a `Response`
- * (server-kit's `content_disposition` puts the uploader's own name in `filename*`), and
- * under the URL's last segment — the name on the button — when it answers with a bare
- * `Blob`, which has no headers to ask.
- */
-function AttachmentDownload({
-  url,
-  fetcher,
-  labels,
-}: {
-  url: string;
-  fetcher: AuthedFetcher;
-  labels: FeedbackDetailLabels;
-}) {
-  const [busy, setBusy] = useState(false);
-  const name = attachmentName(url);
-  const download = async (event: MouseEvent) => {
-    // The row around the detail may toggle on a click.
-    event.stopPropagation();
-    setBusy(true);
-    try {
-      const answer = await fetcher(url, { signal: new AbortController().signal });
-      const blob = await toBlob(answer);
-      const saveAs =
-        typeof Response !== "undefined" && answer instanceof Response
-          ? filenameFromDisposition(answer.headers.get("Content-Disposition"), name)
-          : name;
-      saveBlob(blob, saveAs);
-    } catch {
-      toast.error(labels.downloadFailed);
-    } finally {
-      setBusy(false);
-    }
-  };
-  return (
-    <Button
-      type="button"
-      variant="secondary"
-      size="sm"
-      pending={busy}
-      onClick={(event) => void download(event)}
-      aria-label={labels.download(name)}
-      className="max-w-full"
-    >
-      <FileText className="size-3.5 shrink-0" aria-hidden />
-      <span className="min-w-0 max-w-[14rem] truncate-until-large">{name}</span>
-      <Download className="size-3.5 shrink-0" aria-hidden />
-    </Button>
-  );
-}
-
 /* ── Who may do what (§3.4, §4.3, §4.4) ───────────────────────────────────── */
 
 /** What the person looking at a row may do with it — {@link feedbackRowAccess}. */
@@ -589,8 +515,8 @@ export interface FeedbackRowDetailProps {
   onUpdate: FeedbackDetailUpdate;
   /** `update.isPending`: the editors' save buttons wait for it. */
   pending?: boolean;
-  /** `POST /feedback/attachments` for the rework's one file. Left out, a rework is a
-   *  note alone. */
+  /** `POST /feedback/attachments` for the rework's one file and, since 0.47 (§12) with
+   *  `replyAttachments`, the admin reply's. Left out, a rework or a reply is text alone. */
   onUpload?: FeedbackUpload;
   /** The app's authenticated GET (`AuthedImage`'s) — the pictures and the downloads go
    *  through it, since the attachment route wants the bearer token (§3.5). Left out,
@@ -603,9 +529,11 @@ export interface FeedbackRowDetailProps {
    * page's mutation (its observer outlives the row a status filter removes).
    */
   statusChange?: FeedbackStatusChange;
-  /** For the rework's "Capture screenshot" — see {@link FeedbackReworkSectionProps}. */
+  /** For the rework's and (0.47, with `replyAttachments`) the reply composer's "Capture screenshot" — see
+   *  {@link FeedbackReworkSectionProps}. */
   onCaptureScreenshot?: () => Promise<File | null>;
-  /** The rework's file field, over the contract's defaults. */
+  /** The rework's and (0.47, with `replyAttachments`) the reply composer's file field,
+   *  over the contract's defaults. */
   reworkAttachment?: Partial<FeedbackNoteAttachment>;
   /** How the `resolved_at` date reads — the app's date cell, as a string. Default: the
    *  kit's `formatDate` in the provider's locale, `medium` style. */
@@ -629,8 +557,23 @@ export interface FeedbackRowDetailProps {
    * reply composer stands under the timeline. Return the promise: the box clears when it
    * resolves. A failure is the app's to toast — the server's `detail`, else
    * `feedbackToast.replyFailed` (0.38.1).
+   *
+   * 0.47 (§12, keksdose live #447): with `replyAttachments` (and `onUpload`) the
+   * composer takes one file as the rework note does — pasted into the box, captured or
+   * picked — uploaded first, and its URL is the third argument (`attachment_url` in the
+   * body; server-kit 0.18).
+   */
+  onReply?: (body: string, status?: FeedbackStatus, attachmentUrl?: string) => void | Promise<unknown>;
+  /**
+   * 0.47 (§12): the reply composer takes one file — through `onUpload`,
+   * `onCaptureScreenshot` and `reworkAttachment`, the rework note's. Off by default:
+   * `onUpload` alone stays the rework's, so a page that passes it and an `onReply` of
+   * `(body, status)` does not grow a file field whose file its reply would drop (round
+   * 0.47 build reviews, keksdose and kastlan B1). Turn it on in the commit that makes
+   * `onReply` send its third argument as `attachment_url`, with server-kit 0.18 (an
+   * older server answers the field with a 422).
    */
-  onReply?: (body: string, status?: FeedbackStatus) => void | Promise<unknown>;
+  replyAttachments?: boolean;
   /** 0.38: the reply is in flight. */
   replying?: boolean;
   /**
@@ -695,6 +638,7 @@ export function FeedbackRowDetail({
   commit,
   showSubject = true,
   onReply,
+  replyAttachments = false,
   replying = false,
   onRework,
   comments,
@@ -719,8 +663,10 @@ export function FeedbackRowDetail({
   const { description } = splitDescription(row.body);
   const pageHref = feedbackPageHref(row.context);
   const pageUrl = feedbackPageUrl(row.context);
-  const files = feedbackAttachmentUrls(row);
-  const fetchFile = fetcher ?? plainFetch;
+  // 0.47 (§12): with the entries, each entry's file is drawn inline in the Replies
+  // timeline, so the Attachment section holds the report's own files.
+  const files = feedbackAttachmentUrls(row.replies ? { ...row, replies: undefined } : row);
+  const fetchFile = fetcher ?? plainFeedbackFetch;
   const dateText = (iso: string) => (renderDate ? renderDate(iso) : formatDate(iso, "medium", { locale }));
 
   const saveDescription = (value: string) => {
@@ -823,7 +769,7 @@ export function FeedbackRowDetail({
                   className="max-h-64 max-w-full rounded border border-subtle"
                 />
               ) : (
-                <AttachmentDownload key={url} url={url} fetcher={fetchFile} labels={labels} />
+                <FeedbackAttachmentDownload key={url} url={url} fetcher={fetchFile} />
               ),
             )}
           </div>
@@ -841,7 +787,7 @@ export function FeedbackRowDetail({
       >
         <div className="space-y-3">
           {replies ? (
-            <FeedbackReplyTimeline replies={replies} />
+            <FeedbackReplyTimeline replies={replies} fetcher={fetchFile} />
           ) : (
             <FeedbackProse>{row.outcome || undefined}</FeedbackProse>
           )}
@@ -851,6 +797,9 @@ export function FeedbackRowDetail({
               status={row.status}
               onReply={onReply}
               pending={replying}
+              onUpload={replyAttachments ? onUpload : undefined}
+              onCaptureScreenshot={replyAttachments ? onCaptureScreenshot : undefined}
+              attachment={replyAttachments ? reworkAttachment : undefined}
               suggestedStatus={feedbackReplyNudge(row)}
               commit={commit}
             />

package/src/feedback/feedback-table.tsx

@@ -7,6 +7,7 @@ import { EMPTY_FORMATTED_VALUE, formatDate, toDate } from "../lib/format";
 import { useKitDateFormatter, useKitLabels, useKitLink, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
 import type { KitLinkProps } from "../i18n/kit-labels";
 import { Chip } from "../components/chip";
+import { Tooltip } from "../components/tooltip";
 import { FloatingAction, FloatingActionGroup } from "../components/floating-panel";
 import type { FloatingCorner } from "../components/floating-panel";
 import { pickLinkRenderer } from "../components/text-link";
@@ -449,6 +450,11 @@ function statusRank(status: FeedbackStatus): number {
  *   filter that never offered it.
  * - The status column owns the status filter, and only it (keksdose live #330's revert:
  *   the phone's filter sheet already exposes every column filter).
+ * - Fitted to the table's width (0.48, keksdose live #451): Subject `grow`s and
+ *   ellipsises, and a narrow table leaves out URL, then Email, then Resolved
+ *   (`fitPriority` 1–3) — the open report repeats all three — then Votes and Category
+ *   (4, 5) before Subject would drop below 10rem. Drop the two keys with
+ *   `{ ...col, grow: undefined, fitPriority: undefined }` for the 0.47 layout.
  * - `/my-feedback` shows the same nine: the Email cell's context fallback exists for it
  *   (the admin list's join is absent there, §3.1), and its phone card drops the submitter
  *   instead ({@link FeedbackMobileCardProps.showSubmitter}).
@@ -479,6 +485,9 @@ export function feedbackColumns<T extends FeedbackTableRow>({
           sortBy: (row) => row.votes ?? 0,
           filter: { type: "number", getValue: (row) => row.votes ?? 0 },
           mobileHidden: true,
+          // Fourth to go (Kurvenschmiede S1, 0.48): with only the first three, Subject was
+          // crushed to 24px at 1100px. Still reachable from the Columns panel.
+          fitPriority: 4,
         },
       ]
     : [];
@@ -508,6 +517,9 @@ export function feedbackColumns<T extends FeedbackTableRow>({
         getValue: (row) => row.category,
         options: FEEDBACK_CATEGORY_ORDER.map((value) => ({ value, label: categoryLabels[value] })),
       },
+      // Last to go (Kurvenschmiede S1, 0.48), before Subject would drop below 10rem:
+      // the open report's Subject section repeats the badge.
+      fitPriority: 5,
     },
     {
       key: "title",
@@ -521,11 +533,25 @@ export function feedbackColumns<T extends FeedbackTableRow>({
         return env ? `${row.title} ${labels.environment(env)}` : row.title;
       },
       mobilePrimary: true,
+      // The rest of the row, one line and an ellipsis (0.48, keksdose live #451: one long
+      // crash title pushed Status and the row actions off the edge).
+      grow: true,
     },
     {
       key: "user",
       header: labels.columnUser,
-      cell: (row) => <span className="text-secondary">{feedbackSubmitter(row, labels)}</span>,
+      // At most 12rem, one line and an ellipsis, the whole value in the kit's Tooltip (0.48 build
+      // review 2, keksdose N2): beside the grow Subject every other cell keeps one line, so
+      // an email standing in for a missing name widened the column and cost Votes and
+      // Category their room first. The open report shows both in full.
+      cell: (row) => {
+        const who = feedbackSubmitter(row, labels);
+        return (
+          <Tooltip label={who} portal lazy>
+            <span className="block max-w-[12rem] truncate-until-large text-secondary">{who}</span>
+          </Tooltip>
+        );
+      },
       sortBy: (row) => feedbackSubmitter(row, labels),
       // Name AND email, so either finds the person; the erased ones by the placeholder
       // (their context holds no name any more).
@@ -552,6 +578,8 @@ export function feedbackColumns<T extends FeedbackTableRow>({
       sortBy: feedbackSubmitterEmail,
       filterBy: feedbackSubmitterEmail,
       mobileHidden: true,
+      // Second to go when the table is narrow: the open report shows the submitter.
+      fitPriority: 2,
     },
     {
       key: "url",
@@ -566,6 +594,8 @@ export function feedbackColumns<T extends FeedbackTableRow>({
       sortBy: (row) => feedbackPagePath(row.context) ?? "",
       filterBy: (row) => feedbackPagePath(row.context) ?? "",
       mobileHidden: true,
+      // First to go when the table is narrow (0.48): the open report repeats the page.
+      fitPriority: 1,
     },
     ...votesColumn,
     {
@@ -600,6 +630,8 @@ export function feedbackColumns<T extends FeedbackTableRow>({
       sortBy: (row) => instant(row.resolved_at),
       filter: { type: "date", getValue: (row) => row.resolved_at },
       mobileHidden: true,
+      // Third to go (0.48).
+      fitPriority: 3,
     },
   ];
 }

package/src/feedback.ts

@@ -30,3 +30,4 @@ export * from "./feedback/feedback-public-types";
 export * from "./feedback/feedback-vote-button";
 export * from "./feedback/feedback-comment-thread";
 export * from "./feedback/feedback-replies";
+export * from "./feedback/feedback-entry-file";

package/src/hooks/use-dismiss.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import type { KeyboardEvent as ReactKeyboardEvent, RefObject } from "react";
 import { isComposing } from "../lib/ime";
 
@@ -220,6 +220,29 @@ 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
@@ -227,6 +250,23 @@ export function useEscapeKey(handler: () => void, enabled = true): void {
  * `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,
@@ -245,17 +285,35 @@ export function useOutsideClick(
   refs: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[],
   handler: () => void,
   enabled = true,
-): void {
+): (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) {
@@ -264,6 +322,10 @@ export function useOutsideClick(
       handlerRef.current();
     };
     document.addEventListener("pointerdown", onPointerDown);
-    return () => document.removeEventListener("pointerdown", onPointerDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      for (const r of watched) watchers.get(r)?.delete(mark);
+    };
   }, [enabled]);
+  return markInside;
 }

package/src/i18n/german.ts

@@ -202,7 +202,6 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       outcomeUpdate: "Aktualisieren",
       outcomePlaceholder: "Was wurde umgesetzt, entschieden oder warum nicht.",
       rework: "Nacharbeit",
-      openPage: "Seite öffnen",
       reworkTitle: "Zur Nacharbeit senden",
       reworkSend: "Nacharbeit senden",
       reworkPlaceholder: "Was muss noch angepasst werden? Neue Anforderungen oder Richtungswechsel.",
@@ -340,6 +339,8 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       opensInNewTab: "öffnet in einem neuen Tab",
       aboutField: (field) => `Hilfe zu „${field}“`,
       help: "Hilfe",
+      showMore: "Mehr",
+      showLess: "Weniger",
     },
     dataTable: {
       columns: "Spalten",
@@ -352,6 +353,7 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       cancelSelection: "Abbrechen",
       rowDetails: "Details",
       autoSize: "Spaltenbreiten anpassen",
+      hiddenForWidth: "aus Platzgründen ausgeblendet",
       loading: "Wird geladen…",
       filters: "Filter",
       // Resets every active filter; "Alle löschen" would read as deleting the filters.
@@ -403,6 +405,8 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       booleanTrue: "Ja",
       booleanFalse: "Nein",
       booleanUnset: "Nicht festgelegt",
+      loadMore: "Mehr laden",
+      allLoaded: "Alle Zeilen geladen",
       sortBy: "Sortieren nach",
       sortDefault: "Standardreihenfolge",
       sortAscending: "Aufsteigend",
@@ -541,7 +545,7 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       add: "Tab hinzufügen",
       remove: (tab) => `${tab} entfernen`,
       more: "Weitere Tabs",
-      backToFirst: "Zurück zum ersten Tab",
+      previous: "Vorherige Tabs",
     },
     appShell: {
       collapse: "Seitenleiste einklappen",
@@ -1184,7 +1188,6 @@ export function germanLabels(numberLocale: string): UiKitLabels {
     notifications: {
       typesTitle: "Benachrichtigungen zu",
       typesDescription: "Wählen Sie, worüber Sie benachrichtigt werden, und wie.",
-      byEmail: "Per E-Mail",
       channelApp: "In der App",
       channelPush: "Push",
       channelEmail: "E-Mail",
@@ -1207,9 +1210,6 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       quietFrom: "Von",
       quietUntil: "Bis",
       quietIncomplete: "Legen Sie eine Start- und eine Endzeit fest. Ruhezeiten gelten erst, wenn beide gesetzt sind.",
-      timeZone: "Zeitzone",
-      deviceZone: (zone) => `Dieses Gerät ist in der Zeitzone ${zone}.`,
-      useDeviceZone: "Übernehmen",
       regions: {
         Africa: "Afrika",
         America: "Amerika",

package/src/i18n/kit-labels.tsx

@@ -189,6 +189,10 @@ export interface CommonLabels {
   aboutField: (field: string) => string;
   /** …and of a `help` "?" on a field with no label and no `aria-label` to name it by. */
   help: string;
+  /** 0.48: the toggle that shows the rest of a clamped text (`AlertBanner clampMobile`)… */
+  showMore: string;
+  /** …and folds it back to its one line. */
+  showLess: string;
 }
 
 /** `DatePicker` / `DateRangePicker` chrome. The calendar inside has its own