@eifi1/ui-kit 0.22.0 → 0.24.0

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

@@ -1,288 +1,67 @@
-import { k as FeedbackAttachmentLabels } from '../feedback-attachment-NhUm7Zga.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, G as ChatComposerSlotContext, a6 as DEFAULT_FEEDBACK_COMPOSER_LABELS, a8 as DEFAULT_FEEDBACK_THREAD_LABELS, aV as FeedbackComposer, aW as FeedbackComposerAttachment, aX as FeedbackComposerHandle, aY as FeedbackComposerLabels, aZ as FeedbackComposerProps, a_ as FeedbackComposerSlotContext, bf as FeedbackThread, bg as FeedbackThreadAttachment, bh as FeedbackThreadEvent, bi as FeedbackThreadItem, bj as FeedbackThreadLabels, bk as FeedbackThreadMessage, bl as FeedbackThreadProps } from '../feedback-DOwPu-Il.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;
-    /**
-     * `"sm"` for a narrow host — keksdose's assistant launcher, a small floating panel
-     * (0.22): a small Send button, and the send hint ("Enter to send, Shift + Enter for a
-     * new line") hidden from view but kept as the box's description, so a keyboard or
-     * screen-reader user still learns the shortcut. Default `"md"`.
-     */
-    size?: "md" | "sm";
-    /**
-     * On the composer's root — the box, or the `disabledReason` line in its place —
-     * with any `data-*` attribute beside it (keksdose K17). keksdose's assistant tour
-     * points at the chat box with `[data-tour="assistant-ask"]`, and a composer that
-     * dropped every attribute it was not told about left the anchor nowhere: the
-     * assistant kept its hand-built box rather than lose the tour step.
-     */
-    id?: string;
-    /** `data-*` attributes for the root, as `id` — a tour anchor, a test id. */
-    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
-}
-/**
- * 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, id, size, ...rest }: FeedbackComposerProps): react.JSX.Element;
-/**
- * {@link FeedbackComposer} under a name that is not about feedback (keksdose K17).
- *
- * The component was never feedback-specific: a textarea, an optional picture or a
- * host's upload slot, Send, `sendOn="enter"` for the chat way. keksdose's assistant
- * and support chat are chats, not reports, and an import of `FeedbackComposer` there
- * reads as a mistake to the next person. The same function, not a wrapper, so the
- * two names cannot drift.
- */
-declare const ChatComposer: typeof FeedbackComposer;
-/** {@link FeedbackComposerProps}, for {@link ChatComposer}. */
-type ChatComposerProps = FeedbackComposerProps;
-/** {@link FeedbackComposerHandle}, for {@link ChatComposer}. */
-type ChatComposerHandle = FeedbackComposerHandle;
-/** {@link FeedbackComposerLabels}, for {@link ChatComposer} — still the `feedbackComposer`
- *  namespace of the provider. */
-type ChatComposerLabels = FeedbackComposerLabels;
-
-export { ChatComposer, type ChatComposerHandle, type ChatComposerLabels, type ChatComposerProps, 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

@@ -237,6 +237,9 @@ function FeedbackComposer({
   sendOn = "mod-enter",
   disabledReason,
   rows = 3,
+  maxLength,
+  showCount,
+  countLabels,
   placeholder,
   value,
   onValueChange,
@@ -294,7 +297,8 @@ function FeedbackComposer({
   if (disabledReason != null && disabledReason !== false) {
     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;
@@ -306,6 +310,10 @@ function FeedbackComposer({
     });
   };
   const config = attachment === true ? {} : attachment || null;
+  const slot = typeof attachmentSlot === "function" ? (
+    // eslint-disable-next-line react-hooks/refs -- handed on for an effect, not read here
+    attachmentSlot({ root, pending })
+  ) : attachmentSlot;
   return /* @__PURE__ */ jsxs("div", { ...rootAttributes, ref: root, className: cn("space-y-2", className), children: [
     /* @__PURE__ */ jsx(
       Textarea,
@@ -314,6 +322,9 @@ function FeedbackComposer({
         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,
@@ -330,7 +341,7 @@ function FeedbackComposer({
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-end justify-between gap-2", children: [
-      config || attachmentSlot != null ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-end gap-2", children: [
+      config || slot != null ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-end gap-2", children: [
         config && /* @__PURE__ */ jsx(
           FeedbackAttachmentField,
           {
@@ -341,10 +352,12 @@ function FeedbackComposer({
             maxBytes: config.maxBytes,
             onError: config.onError,
             onCaptureScreenshot: config.onCaptureScreenshot,
+            buttonVariant: config.buttonVariant,
+            buttonSize: config.buttonSize,
             pasteFrom: root
           }
         ),
-        attachmentSlot
+        slot
       ] }) : /* @__PURE__ */ jsx("span", {}),
       /* @__PURE__ */ jsxs("div", { className: "ms-auto flex items-center gap-2", children: [
         /* @__PURE__ */ jsx(