@eifi1/ui-kit 0.21.0 → 0.23.0

package/dist/feedback/feedback-thread.d.ts

@@ -1,254 +1,69 @@
-import { j as FeedbackAttachmentLabels } from '../feedback-attachment-WFiXJ8We.js';
-import { FeedbackNoteAttachment } from './feedback-inbox.js';
-import * as react from 'react';
-import { ReactNode, Ref } from 'react';
+import 'react';
+export { z as ChatComposer, D as ChatComposerHandle, E as ChatComposerLabels, F as ChatComposerProps, a3 as DEFAULT_FEEDBACK_COMPOSER_LABELS, a4 as DEFAULT_FEEDBACK_THREAD_LABELS, ax as FeedbackComposer, ay as FeedbackComposerAttachment, az as FeedbackComposerHandle, aA as FeedbackComposerLabels, aB as FeedbackComposerProps, aC as FeedbackThread, aD as FeedbackThreadAttachment, aE as FeedbackThreadEvent, aF as FeedbackThreadItem, aG as FeedbackThreadLabels, aH as FeedbackThreadMessage, aI as FeedbackThreadProps } from '../feedback-BxeQVzwq.js';
+import '../feedback-attachment-fGAzZPf0.js';
+import './feedback-inbox.js';
+import '../components/tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
+import '../data-table-labels-B7OdnM0S.js';
+import '../components/data-table-sort.js';
+import '../components/swipeable-row.js';
+import '../components/mini-calendar.js';
+import '../components/calendar-heatmap.js';
+import '../components/popover.js';
+import '../components/chip.js';
 import 'lucide-react';
-
-/**
- * The conversation under a report: who said what, when, with what attached — and the
- * box to answer in.
- *
- * Both apps had written it by hand. kastlan's feedback page grew a comment list of
- * bordered boxes with `slate-*` literals (feedback-page.tsx, "keksdose left this
- * unbuilt"), and keksdose built the same thing a second time for support
- * (support-thread.tsx) with sides, bubbles and a composer that clears only what it
- * sent. This is that second one, generalised: the kit owns the look and the
- * behaviour, the app owns the data, the upload and every word it does not share.
- *
- * **Own vs other** is the caller's per message (`own`), not a comparison the kit makes
- * against a user id: whose message sits at the END side depends on who is reading,
- * and only the app knows that (keksdose's support thread labelled a member's question
- * "Du" in the admin panel the first time round, by reading the wrong field).
- *
- * **Redaction.** A thread is somebody's words about their own data — exactly what a
- * host's demo / screen-share mode blurs. Bodies, authors and attachments carry
- * `data-private` (the attribute `Tooltip redact` and `StatTile sensitive` use) unless
- * `redact={false}`.
- *
- * **RTL.** Sides are logical — `justify-end` is the reading end, and the bubble's
- * tucked corner is `rounded-ee` / `rounded-es` — and each body is `dir="auto"`, so a
- * Hebrew reply in an English thread (or the reverse) lays out as its own language.
- *
- * **A chat, too** (keksdose G4/G5). keksdose's support chat is the same conversation
- * read the chat way: status lines between the messages ("Closed automatically",
- * "Reopened"), a day line where the date changes, clock times under it, Enter to send
- * and several files uploaded ahead of the send. Each of those is an opt-in here
- * (`kind: "event"`, `daySeparators`, `timeFormat="clock"`, `sendOn="enter"`,
- * `attachmentSlot` + `canSend`), so the feedback thread's defaults stay as they were.
- */
-/** The `feedbackThread` namespace of `<UiKitProvider labels>`. */
-interface FeedbackThreadLabels {
-    /** Accessible name of the message list. */
-    thread: string;
-    empty: string;
-    loading: string;
-    /** Author line of an `own` message that has no `author` of its own. */
-    you: string;
-    /** The badge beside a `staff` author. */
-    staff: string;
-    /** Accessible name of a message's attachment list. */
-    attachments: string;
-}
-declare const DEFAULT_FEEDBACK_THREAD_LABELS: FeedbackThreadLabels;
-/** The `feedbackComposer` namespace of `<UiKitProvider labels>`. The attach buttons'
- *  words are `feedbackAttachment`'s, shared with the dialog and the note editor. */
-interface FeedbackComposerLabels {
-    /** Accessible name of the text box. */
-    field: string;
-    placeholder: string;
-    send: string;
-    /** The shortcut line, given the platform's modifier ("Ctrl" or "⌘"). */
-    sendHint: (modifier: string) => string;
-    /** The shortcut line under `sendOn="enter"` (keksdose G5): Enter sends, so say how a
-     *  new line is made. */
-    sendHintEnter: string;
-}
-declare const DEFAULT_FEEDBACK_COMPOSER_LABELS: FeedbackComposerLabels;
-interface FeedbackThreadAttachment {
-    id?: string | number;
-    name: string;
-    /** Where to open it. Left out, the attachment is listed by name only. */
-    url?: string;
-    /** MIME type; an `image/*` with a `url` is shown as a thumbnail. */
-    type?: string;
-    /** Bytes, shown beside a non-image. */
-    size?: number;
-}
-interface FeedbackThreadMessage {
-    /** Leave out, or `"message"`. `"event"` is a {@link FeedbackThreadEvent}. */
-    kind?: "message";
-    id: string | number;
-    /** Who wrote it. Left out on an `own` message, it reads "You". */
-    author?: ReactNode;
-    /** A `Date`, an ISO string or epoch ms. */
-    createdAt: Date | string | number;
-    body: string;
-    attachments?: readonly FeedbackThreadAttachment[];
-    /** Written by whoever is reading: sits at the end side, in the brand tint. */
-    own?: boolean;
-    /** Written by the team rather than a user: gets the "Staff" badge. */
-    staff?: boolean;
-}
-/**
- * A line in the thread that nobody wrote — "Closed automatically", "Marked as
- * resolved", "Reopened" — drawn centred and muted with its time, no author, no side,
- * no bubble.
- *
- * keksdose G4: its support chat interleaves these with the messages, and as a message
- * they came out as a bubble from nobody at the start side, which reads as the member
- * having said "resolved". Word it for the READER, as with `own`: the app knows whether
- * "you reopened it" or "Anna reopened it" is true for the person looking.
- *
- * The text is the app's, not somebody's words about their data, so it is NOT tagged
- * `data-private`; one that names a person can wrap the name in its own
- * `<span data-private>` (`body` is a node for that reason).
- */
-interface FeedbackThreadEvent {
-    kind: "event";
-    id: string | number;
-    /** A `Date`, an ISO string or epoch ms. */
-    createdAt: Date | string | number;
-    body: ReactNode;
-}
-/** One row of a {@link FeedbackThread}: a message, or an event line between them. */
-type FeedbackThreadItem = FeedbackThreadMessage | FeedbackThreadEvent;
-interface FeedbackThreadProps {
-    /** Oldest first. Event lines ({@link FeedbackThreadEvent}) sit among the messages. */
-    messages: readonly FeedbackThreadItem[];
-    loading?: boolean;
-    /** Replaces the default "No comments yet". */
-    empty?: ReactNode;
-    /**
-     * Draw one attachment yourself — for files behind auth, which a plain `<img src>`
-     * cannot fetch (kastlan's `AuthedImage`), or a lightbox. The default is a thumbnail
-     * link for an image with a `url`, a file link otherwise.
-     */
-    renderAttachment?: (attachment: FeedbackThreadAttachment, message: FeedbackThreadMessage) => ReactNode;
-    /** Tag bodies, authors and attachments `data-private`. Default true. */
-    redact?: boolean;
-    /**
-     * How a row's time reads. `"relative"` (default): "5 minutes ago", a date past six
-     * days — right for a report's comments, read days apart. `"clock"`: the time of day
-     * in the locale ("14:05", "2:05 PM") — the chat look, keksdose G4; pair it with
-     * `daySeparators`, which say which day that clock time is on. Either way the full
-     * date and time is in the Tooltip.
-     */
-    timeFormat?: "relative" | "clock";
-    /**
-     * A centred day line before the first row and wherever the next row is on another
-     * calendar day (the device's zone): "Today", "Yesterday", else the date — keksdose
-     * G4. "Today" / "Yesterday" are `Intl.RelativeTimeFormat`'s own words in the kit
-     * locale, so there is no label to translate. Default false.
-     */
-    daySeparators?: boolean;
-    /** "Now" for the relative times and the day lines — pin it in tests and stories.
-     *  Default: the clock. */
-    now?: Date | number;
-    /** Overrides the provider's locale for the times. */
-    locale?: string;
-    labels?: Partial<FeedbackThreadLabels>;
-    className?: string;
-}
-declare function FeedbackThread({ messages, loading, empty, renderAttachment, redact, now, locale: localeProp, timeFormat, daySeparators, labels: labelsProp, className, }: FeedbackThreadProps): react.JSX.Element;
-/** What the composer's attach control takes — {@link FeedbackNoteAttachment} with the
- *  labels optional, since the field reads `feedbackAttachment` from the provider. */
-type FeedbackComposerAttachment = Omit<FeedbackNoteAttachment, "labels"> & {
-    labels?: Partial<FeedbackAttachmentLabels>;
-};
-interface FeedbackComposerProps {
-    /**
-     * Send the comment. Return the promise: the box clears when it RESOLVES, and only of
-     * what was sent — text typed while it was in flight stays. A rejection keeps
-     * everything for a retry (surface the error yourself; the composer stays quiet).
-     *
-     * `attachment` is the built-in field's one picture. Files the host uploaded ahead
-     * (`attachmentSlot`) are the host's state, read by the host here — and `body` may be
-     * `""` when `canSend` let an attachments-only message go.
-     */
-    onSend: (body: string, attachment: File | null) => void | Promise<unknown>;
-    /** The send is in flight: a spinner on the button and no second send. */
-    pending?: boolean;
-    /** Offer one picture with the comment (file, paste or `onCaptureScreenshot`).
-     *  `true` for the defaults. Left out, the composer is text only. */
-    attachment?: boolean | FeedbackComposerAttachment;
-    /**
-     * The host's own attach control, in the row with Send where the built-in field sits
-     * (after it, if both are on) — keksdose G5: its support chat uploads up to N files
-     * AHEAD of the send and sends their refs, which one `File` in `onSend` cannot carry.
-     * The slot is the host's picker plus the chips of what is uploaded; the upload, the
-     * refs and clearing them once `onSend` resolves stay with the host. Pair it with
-     * `canSend`.
-     */
-    attachmentSlot?: ReactNode;
-    /**
-     * Whether Send is enabled, over the composer's own rule (some text in the box) —
-     * for state the composer cannot see, i.e. `attachmentSlot`'s (keksdose G5): `true`
-     * with files ready makes an empty draft sendable (`onSend("", null)`), `false` while
-     * an upload is still running holds even a written reply back. Left out, the text
-     * decides. `pending` blocks a send either way.
-     */
-    canSend?: boolean;
-    /**
-     * Which key sends. `"mod-enter"` (default): Ctrl/⌘+Enter, the report dialog's and
-     * note editor's shortcut, with plain Enter a new line — feedback is written in
-     * paragraphs. `"enter"`: the chat way (keksdose G5) — Enter sends, Shift+Enter is a
-     * new line, Ctrl/⌘+Enter still sends; an Enter that confirms an IME composition
-     * (Japanese, Chinese input) is the IME's, never a send.
-     */
-    sendOn?: "mod-enter" | "enter";
-    /** Rendered INSTEAD of the composer — the thread is closed, or read-only for this
-     *  reader. */
-    disabledReason?: ReactNode;
-    rows?: number;
-    /**
-     * The box's hint, over the `placeholder` label — keksdose F9: an admin answering a
-     * support ticket is asked something else ("Reply to Anna…") than a member adding to
-     * their own report, and one provider-wide label cannot say both.
-     */
-    placeholder?: string;
-    /**
-     * The draft, controlled — for a host that keeps it itself (saves it per ticket,
-     * prefills a template). Left out, the composer keeps its own. Either way a send
-     * that resolves clears only what was sent: controlled, that is an
-     * `onValueChange("")` the host receives like any keystroke, and only if the draft
-     * is still the one that went out.
-     */
-    value?: string;
-    /** Every change to the draft — typing, {@link FeedbackComposerHandle.insertText}, the
-     *  clear after a send. Required to change a controlled `value`. */
-    onValueChange?: (value: string) => void;
-    /** {@link FeedbackComposerHandle}: put text into the draft from outside (canned-reply
-     *  chips) or focus the box. */
-    ref?: Ref<FeedbackComposerHandle>;
-    labels?: Partial<FeedbackComposerLabels>;
-    className?: string;
-}
-/**
- * What a {@link FeedbackComposer} `ref` holds.
- *
- * keksdose F9: the support admin answers the same five questions all day and wants
- * chips above the box ("Thanks, fixed in the next release") that drop their text in
- * where the caret is. A controlled `value` alone cannot do that well — the host sees
- * the string, not the caret, so it could only append — so the composer, which owns
- * the textarea, does the splice.
- */
-interface FeedbackComposerHandle {
-    /**
-     * Insert `text` at the caret, replacing any selection (the caret the box last had:
-     * a click on a chip blurs it, and the selection survives the blur), then focus the
-     * box with the caret after the inserted text so the reply can go on. Nothing is
-     * added around it — put a space or a newline in `text` if the reply needs one. A
-     * no-op while `disabledReason` replaces the box.
-     */
-    insertText: (text: string) => void;
-    focus: () => void;
-}
-/**
- * The answer box under a {@link FeedbackThread}: a textarea, an optional picture,
- * and Send — Ctrl/⌘+Enter sends, the shortcut the report dialog and the note editor
- * use, so the habit carries across the feature. Plain Enter is a new line: feedback is
- * written in paragraphs, unlike a chat — which `sendOn="enter"` is for (keksdose G5).
- */
-declare function FeedbackComposer({ onSend, pending, attachment, attachmentSlot, canSend: canSendProp, sendOn, disabledReason, rows, placeholder, value, onValueChange, ref, labels: labelsProp, className, }: FeedbackComposerProps): react.JSX.Element;
-
-export { DEFAULT_FEEDBACK_COMPOSER_LABELS, DEFAULT_FEEDBACK_THREAD_LABELS, FeedbackComposer, type FeedbackComposerAttachment, type FeedbackComposerHandle, type FeedbackComposerLabels, type FeedbackComposerProps, FeedbackThread, type FeedbackThreadAttachment, type FeedbackThreadEvent, type FeedbackThreadItem, type FeedbackThreadLabels, type FeedbackThreadMessage, type FeedbackThreadProps };
+import '../components/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 '../components/month-picker.js';
+import '../components/page-contents.js';
+import '../components/series-chart-labels.js';
+import '../components/pie-chart-labels.js';
+import '../components/sparkline.js';
+import '../components/stat-tile.js';
+import '../components/signature-pad.js';
+import '../components/password-strength.js';
+import '../components/swatch-picker.js';
+import '../components/tile-radio.js';
+import '../components/icon-picker.js';
+import '../components/dialog-frame.js';
+import '../components/modal.js';
+import '../hooks/use-search-param-state.js';
+import '../components/measured-grid.js';
+import '../components/account-settings-labels.js';
+import '../components/floating-panel.js';
+import '../components/bulk-action-bar.js';
+import '../components/list.js';
+import '../components/signed-amount.js';
+import '../components/breadcrumbs.js';
+import '../components/toast.js';
+import '../components/description-list.js';
+import '../components/line-items.js';
+import '../components/progress-bar.js';
+import '../components/error-boundary.js';
+import '../components/authed-image.js';
+import '../hooks/use-authed-src.js';
+import '../components/image-grid.js';
+import '../components/lightbox.js';
+import '../components/write-lock.js';
+import '../components/legal.js';
+import '../components/account-chips.js';
+import '../lib/format.js';
+import '../components/reauth-dialog.js';
+import '../components/server-wake.js';
+import '../lib/server-wake.js';
+import '../components/translation-review-labels.js';
+import '../lib/translation-review.js';
+import '../components/country-select.js';
+import '../components/inline-edit-field.js';
+import '../lib/iban.js';
+import '../lib/phone.js';
+import '../components/sign-chip.js';
+import '../components/column-mapper.js';
+import '../lib/column-mapping.js';
+import '../lib/table-text.js';
+import '../components/field-parts.js';

package/dist/feedback/feedback-thread.js

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import { ImageIcon, ImageOff, Paperclip, Send } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { formatDate, formatRelativeTime } from "../lib/format.js";
@@ -237,14 +237,22 @@ function FeedbackComposer({
   sendOn = "mod-enter",
   disabledReason,
   rows = 3,
+  maxLength,
+  showCount,
+  countLabels,
   placeholder,
   value,
   onValueChange,
   ref,
   labels: labelsProp,
-  className
+  className,
+  id,
+  size = "md",
+  ...rest
 }) {
   const labels = useKitLabels("feedbackComposer", DEFAULT_FEEDBACK_COMPOSER_LABELS, labelsProp);
+  const rootAttributes = { id, ...dataAttributes(rest) };
+  const hintId = useId();
   const [ownDraft, setOwnDraft] = useState("");
   const controlled = value !== void 0;
   const draft = controlled ? value : ownDraft;
@@ -287,9 +295,10 @@ function FeedbackComposer({
     () => "Ctrl"
   );
   if (disabledReason != null && disabledReason !== false) {
-    return /* @__PURE__ */ jsx("p", { className: cn("text-xs text-[var(--text-muted)]", className), children: disabledReason });
+    return /* @__PURE__ */ jsx("p", { ...rootAttributes, className: cn("text-xs text-[var(--text-muted)]", className), children: disabledReason });
   }
-  const canSend = (canSendProp ?? draft.trim().length > 0) && !pending;
+  const tooLong = maxLength !== void 0 && draft.length > maxLength;
+  const canSend = (canSendProp ?? draft.trim().length > 0) && !pending && !tooLong;
   const send = () => {
     if (!canSend) return;
     const sentDraft = draft;
@@ -301,13 +310,17 @@ function FeedbackComposer({
     });
   };
   const config = attachment === true ? {} : attachment || null;
-  return /* @__PURE__ */ jsxs("div", { ref: root, className: cn("space-y-2", className), children: [
+  return /* @__PURE__ */ jsxs("div", { ...rootAttributes, ref: root, className: cn("space-y-2", className), children: [
     /* @__PURE__ */ jsx(
       Textarea,
       {
         rows,
         dir: "auto",
         "aria-label": labels.field,
+        "aria-describedby": size === "sm" ? hintId : void 0,
+        maxLength,
+        ...showCount !== void 0 ? { showCount } : null,
+        countLabels,
         ref: box,
         placeholder: placeholder ?? labels.placeholder,
         value: draft,
@@ -341,16 +354,39 @@ function FeedbackComposer({
         attachmentSlot
       ] }) : /* @__PURE__ */ jsx("span", {}),
       /* @__PURE__ */ jsxs("div", { className: "ms-auto flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--text-placeholder)]", children: sendOn === "enter" ? labels.sendHintEnter : labels.sendHint(modifier) }),
-        /* @__PURE__ */ jsxs(Button, { onClick: send, disabled: !canSend, "aria-busy": pending || void 0, children: [
-          pending ? /* @__PURE__ */ jsx(Spinner, { label: null, className: "size-4" }) : /* @__PURE__ */ jsx(Send, { className: "size-4 rtl:-scale-x-100", "aria-hidden": true }),
-          labels.send
-        ] })
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            id: hintId,
+            className: size === "sm" ? "sr-only" : "text-xs text-[var(--text-placeholder)]",
+            children: sendOn === "enter" ? labels.sendHintEnter : labels.sendHint(modifier)
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            onClick: send,
+            disabled: !canSend,
+            "aria-busy": pending || void 0,
+            size: size === "sm" ? "sm" : void 0,
+            children: [
+              pending ? /* @__PURE__ */ jsx(Spinner, { label: null, className: "size-4" }) : /* @__PURE__ */ jsx(Send, { className: "size-4 rtl:-scale-x-100", "aria-hidden": true }),
+              labels.send
+            ]
+          }
+        )
       ] })
     ] })
   ] });
 }
+function dataAttributes(props) {
+  const out = {};
+  for (const [key, value] of Object.entries(props)) if (key.startsWith("data-")) out[key] = value;
+  return out;
+}
+const ChatComposer = FeedbackComposer;
 export {
+  ChatComposer,
   DEFAULT_FEEDBACK_COMPOSER_LABELS,
   DEFAULT_FEEDBACK_THREAD_LABELS,
   FeedbackComposer,