@eifi1/ui-kit 0.11.0 → 0.13.0

package/dist/{data-table-filters-Dh9uF_S-.d.ts → data-table-Drun8Fk9.d.ts}

@@ -1,9 +1,253 @@
 import * as react from 'react';
 import { ReactNode, TdHTMLAttributes, ThHTMLAttributes } from 'react';
-import { SortDir, SortState, SortCycle } from './components/data-table-sort.js';
+import { SortState, SortDir, SortCycle } from './components/data-table-sort.js';
 import { SwipeAction } from './components/swipeable-row.js';
 import { DataTableLabels } from './components/data-table-labels.js';
 
+/** How a column is filtered. `text`/`select`/`date`/`number` each read a value
+ *  off the row and compare it against the user's {@link FilterValue}. */
+type ColumnFilter<T> = {
+    type: "text";
+    getValue: (row: T) => string;
+} | {
+    type: "select";
+    getValue: (row: T) => string;
+    options?: {
+        value: string;
+        label?: string;
+    }[];
+} | {
+    type: "date";
+    getValue: (row: T) => string | null | undefined;
+} | {
+    type: "number";
+    getValue: (row: T) => number | null | undefined;
+};
+/** The current state of a column's filter (what the user has entered). */
+type FilterValue = {
+    type: "text";
+    q: string;
+} | {
+    type: "select";
+    values: string[];
+} | {
+    type: "date";
+    from: string;
+    to: string;
+} | {
+    type: "number";
+    min: string;
+    max: string;
+    abs: boolean;
+};
+/** A column's filter config, falling back to a plain text filter over `filterBy`. */
+declare function resolveFilter<T>(col: DataTableColumn<T>): ColumnFilter<T> | null;
+/** Whether a filter value is actually narrowing anything (vs its empty default). */
+declare function isFilterActive(v: FilterValue | undefined): boolean;
+/**
+ * Whether `row` passes column `col`'s filter given the user's `state`.
+ *
+ * `locale` is for the text filter's case folding. Plain `toLowerCase` folds by the
+ * root rules, under which a Turkish user typing "istanbul" does not find "İSTANBUL";
+ * `toLocaleLowerCase(locale)` does. Optional, and `undefined` is the runtime's default.
+ */
+declare function rowMatches<T>(col: DataTableColumn<T>, row: T, state: FilterValue, locale?: string): boolean;
+/** The empty filter state for a column's filter type. */
+declare function defaultFilterState<T>(filter: ColumnFilter<T>): FilterValue;
+/** URL-safe encoding of a filter value (`f.<column>` param), null when empty. */
+declare function encodeFilterValue(v: FilterValue): string | null;
+/** Inverse of {@link encodeFilterValue} given just the filter type — for
+ *  callers that know a column's type without holding its full config. */
+declare function decodeFilterValueOfType(type: FilterValue["type"], raw: string): FilterValue;
+/** Inverse of {@link encodeFilterValue}, typed by the column's filter config. */
+declare function decodeFilterValue<T>(filter: ColumnFilter<T>, raw: string): FilterValue;
+/** A free-text filter over `getValue`. */
+declare function textFilter<T>(getValue: (row: T) => string): ColumnFilter<T>;
+/**
+ * A multi-select filter. `options` is an options array, or a `{ value: label }` record
+ * (a translated status map) — kept in its key order. Left out, the table derives the
+ * options from the rows it holds.
+ */
+declare function selectFilter<T>(getValue: (row: T) => string, options?: {
+    value: string;
+    label?: string;
+}[] | Record<string, string>): ColumnFilter<T>;
+/** A from/to date filter over an ISO date (or date-time) string. */
+declare function dateFilter<T>(getValue: (row: T) => string | null | undefined): ColumnFilter<T>;
+/** A min/max (and absolute-value) filter over a number. */
+declare function numberFilter<T>(getValue: (row: T) => number | null | undefined): ColumnFilter<T>;
+/**
+ * A link to a list page with one column filter already applied — in the table's own URL
+ * scheme (`f.<column>=<encoded>`), which a table with `urlSync` (or
+ * {@link useTableUrlState}) reads on mount. kastlan's `buildListUrl`, which had to
+ * restate the `f.` prefix to do it.
+ *
+ * `value` is a string for a text filter, an array for a select filter, or any
+ * {@link FilterValue}. A filter that narrows nothing returns `path` unchanged. A `path`
+ * that already carries a query keeps it; a `#fragment` stays at the end.
+ *
+ *     filterHref("/units", "status", ["vacant"]) // "/units?f.status=vacant"
+ */
+declare function filterHref(path: string, column: string, value: string | string[] | FilterValue, 
+/** The target table's `urlSync` prefix, if it has one (`{ prefix: "inv." }` →
+ *  `inv.f.<column>`). */
+options?: {
+    prefix?: string;
+}): string;
+
+declare const DEFAULT_PERSIST_PREFIX = "hbui-table:";
+/**
+ * How a table is mirrored into the URL: `true`, or `{ prefix }` for a table that shares
+ * its page with another URL-synced one. The prefix is put verbatim in front of EVERY key
+ * the table writes and reads — `{ prefix: "inv." }` gives `inv.f.<column>`, `inv.sort`,
+ * `inv.p`, `inv.ps` (and `inv.q`) — so two tables on one page stop sharing a sort and a
+ * page. Without one the keys are unprefixed, as they always were.
+ */
+type TableUrlSync = boolean | {
+    prefix?: string;
+};
+/** What {@link readTableUrlState} found in a query string. */
+interface TableUrlState {
+    sorts?: SortState[];
+    filters?: FilterState;
+    /** `Infinity` for `ps=all`. */
+    pageSize?: number;
+    /** 0-based (the URL's `p` is 1-based). */
+    page?: number;
+}
+/**
+ * What a table's URL says, read out of a query string: the column filters (`f.<key>`),
+ * the sort, the page size and the 0-based page. Absent keys are absent here too, so a
+ * caller can tell "not in the link" from "the default". The same reader `urlSync` uses
+ * on mount, exported for an owner that keeps the state itself — see
+ * {@link useTableUrlState}.
+ *
+ * Pass the ROUTER's query string — the one `setSearchParams` writes — and the table's
+ * `prefix` when it has one (see {@link TableUrlSync}).
+ *
+ * This read `window.location.search` until 0.7.0, which is the same string only under a
+ * BrowserRouter. Under a HashRouter the router's query lives after the `#`
+ * (`/#/tx?f.payee=Rewe`) and `window.location.search` is empty: a shared link opened
+ * unfiltered, and the table's first write then replaced the link's filter with its own
+ * empty state. Reading and writing through `useSearchParams` is one source for both
+ * directions under every router, MemoryRouter included.
+ */
+declare function readTableUrlState<T>(sp: URLSearchParams, columns: DataTableColumn<T>[], prefix?: string): TableUrlState;
+/**
+ * Where a table's view lives: what it is sorted and filtered by, which page, how wide
+ * the columns are and which are hidden — plus the two places that outlives a render.
+ *
+ * Lifted out of `DataTable`, which was 984 lines and twenty hooks in one function. This
+ * is the part that is genuinely about STATE rather than about drawing, and the three
+ * rules it encodes are easy to lose among the markup:
+ *
+ * * **The URL is read once, on mount.** A shared or deep link populates the initial view;
+ *   after that the state is local, or the browser's own history would fight the user's
+ *   next click.
+ * * **Sorting and filtering are optionally CONTROLLED.** A server-driven table passes
+ *   state and a callback and owns them; everything else is self-owned. That is the
+ *   `sortsProp ?? internalSorts` pair, and it is why the setters are exposed separately.
+ * * **Persistence writes on every change, the URL only when asked.** `storageKey` is the
+ *   per-table identity; `urlSync` is opt-in because only some tables want their view in
+ *   a shareable address.
+ * * **A controlled filter or sort that changes sends the table back to page 1.** See
+ *   the note at the reset below.
+ */
+declare function useTableState<T>({ columns, storageKey, storageKeyPrefix, urlSync: urlSyncOption, defaultPageSize, sortsProp, filtersProp, }: {
+    columns: DataTableColumn<T>[];
+    storageKey?: string;
+    storageKeyPrefix: string;
+    urlSync?: TableUrlSync;
+    defaultPageSize: number;
+    sortsProp?: SortState[];
+    filtersProp?: FilterState;
+}): {
+    sorts: SortState[];
+    filters: FilterState;
+    setInternalSorts: react.Dispatch<react.SetStateAction<SortState[]>>;
+    setInternalFilters: react.Dispatch<react.SetStateAction<FilterState>>;
+    page: number;
+    setPage: react.Dispatch<react.SetStateAction<number>>;
+    pageSize: number;
+    setPageSize: react.Dispatch<react.SetStateAction<number>>;
+    widths: Record<string, number>;
+    setWidths: react.Dispatch<react.SetStateAction<Record<string, number>>>;
+    hiddenCols: Set<string>;
+    setHiddenCols: react.Dispatch<react.SetStateAction<Set<string>>>;
+    showSettings: boolean;
+    setShowSettings: react.Dispatch<react.SetStateAction<boolean>>;
+    headRefs: Map<string, HTMLTableCellElement>;
+};
+interface UseTableUrlStateOptions<T> {
+    /** The table's columns — read for their keys and filter types only. */
+    columns: DataTableColumn<T>[];
+    /** Default 25. A page size equal to it is left out of the URL. */
+    defaultPageSize?: number;
+    /** Mirror the state into the URL and seed it from there on mount. Default true.
+     *  `{ prefix }` puts a prefix in front of every key, for a page with two URL-synced
+     *  tables — see {@link TableUrlSync}. */
+    urlSync?: TableUrlSync;
+    /** Shorthand for `urlSync: { prefix }`; wins over a prefix given there. */
+    urlPrefix?: string;
+    /** Also hold a free-text search term, under `q`. Off by default, so a `q` that
+     *  belongs to someone else on the page is never touched. */
+    search?: boolean;
+}
+/** The part of {@link DataTableProps} a server-driven table takes from its owner. */
+interface TableUrlStateProps {
+    serverPagination: ServerPagination;
+    filters: FilterState;
+    onFiltersChange: (next: FilterState) => void;
+    sorts: SortState[];
+    onSortsChange: (next: SortState[]) => void;
+}
+interface UseTableUrlStateReturn {
+    /** 0-based. */
+    page: number;
+    setPage: (page: number) => void;
+    pageSize: number;
+    /** Also back to the first page. */
+    setPageSize: (pageSize: number) => void;
+    filters: FilterState;
+    /** Also back to the first page. */
+    setFilters: (next: FilterState) => void;
+    sorts: SortState[];
+    /** Also back to the first page. */
+    setSorts: (next: SortState[]) => void;
+    /** The search term (`""` unless `search: true`). */
+    search: string;
+    /** Also back to the first page. */
+    setSearch: (next: string) => void;
+    /**
+     * Everything the table needs, to spread onto it:
+     * `<DataTable {...table.tableProps(data?.total ?? 0, { isLoading })} rows={…} … />`.
+     */
+    tableProps: (total: number, options?: {
+        isLoading?: boolean;
+    }) => TableUrlStateProps;
+}
+/**
+ * The controlled state of a `serverPagination` table — filters, sorts, page, page size
+ * and optionally a search term — kept by the OWNER and mirrored into the URL in the
+ * table's own scheme (`f.<key>`, `sort`, `p`, `ps`, and `q`).
+ *
+ * A server-driven table owns none of this: the owner has to hold it to turn it into
+ * the query that fetches `rows`, and until now it also had to restate the table's URL
+ * codec to keep the view bookmarkable (kastlan's use-server-table.ts copied
+ * `readUrlState` / `writeUrlState` to do it). Same rules as `urlSync`:
+ *
+ * * **The URL is read once, on mount** — a shared or deep link (see {@link filterHref})
+ *   seeds the view; after that the state is local and written out with `replace`.
+ * * **Any change but the page itself goes back to page 1** — a narrower filter must not
+ *   leave the user on page 7 of 2.
+ * * **Written by value**: an unchanged view writes nothing, however often the owner
+ *   renders.
+ *
+ * Mapping the state onto the backend's query parameters stays the owner's: that is the
+ * part the kit cannot know.
+ */
+declare function useTableUrlState<T>({ columns, defaultPageSize, urlSync: urlSyncOption, urlPrefix: urlPrefixOption, search: manageSearch, }: UseTableUrlStateOptions<T>): UseTableUrlStateReturn;
+
 interface DataTableColumn<T> {
     key: string;
     header: ReactNode;
@@ -144,8 +388,11 @@ interface DataTableProps<T> {
      * shareable and bookmarkable. URL params used: `f.<column>`, `sort`, `p`, `ps`.
      * URL state takes precedence over localStorage on initial load. Requires the
      * consuming app to render inside a react-router Router.
+     *
+     * `{ prefix }` namespaces them, for two URL-synced tables on one page:
+     * `urlSync={{ prefix: "inv." }}` uses `inv.f.<column>`, `inv.sort`, `inv.p`, `inv.ps`.
      */
-    urlSync?: boolean;
+    urlSync?: TableUrlSync;
     /**
      * When true (desktop only), the table fills its parent's height and scrolls
      * INTERNALLY, with the header pinned — so the page itself doesn't add a second,
@@ -336,6 +583,60 @@ interface DataTableProps<T> {
     /** Extra classes for the table's root element (the card, or with `frame={false}`
      *  the plain wrapper). Merged last, so a caller's margin or width wins. */
     className?: string;
+    /**
+     * Per-row actions: an actions column of icon buttons at the row's end on desktop,
+     * and the same actions as swipe actions on a phone card (where the column is not
+     * shown). kastlan's `ResourceListPage` appended this column by hand to every CRUD
+     * list — the edit pencil, the delete bin, a `useConfirm` before the delete, and a
+     * `stopPropagation` on each so a press did not also open the row.
+     *
+     * `kind: "edit"` / `"delete"` bring the icon, the label (`labels.edit` /
+     * `labels.delete`), the tone and the swipe side; any other action states its own
+     * `label` and `icon`. `confirm` is the hook-in for a confirmation: pass the kit's
+     * `useConfirm()` (or anything answering a boolean) and the action runs only on a yes.
+     *
+     *     const confirm = useConfirm();
+     *     rowActions={[
+     *       { kind: "edit", onAction: openEditor },
+     *       { kind: "delete", onAction: (r) => remove(r.id),
+     *         confirm: (r) => confirm({ title: t("delete", { name: r.name }), tone: "danger" }) },
+     *     ]}
+     *
+     * A function receives the row, for actions that differ per row. An explicit
+     * `mobileSwipeActions` wins over the swipes derived from here.
+     */
+    rowActions?: DataTableRowAction<T>[] | ((row: T) => DataTableRowAction<T>[]);
+    /**
+     * The bar above the table — a search field, filter chips, a create button. Inside
+     * the table's frame, above the header, on desktop and phone alike (resource-list
+     * pages set a search box in a `div` above the card, outside the frame it filters).
+     */
+    toolbar?: ReactNode;
+}
+/** One entry of {@link DataTableProps.rowActions}. */
+interface DataTableRowAction<T> {
+    /** A preset: `"edit"` (pencil, `labels.edit`, swipes toward the END) or `"delete"`
+     *  (bin, `labels.delete`, danger tone, swipes toward the START). */
+    kind?: "edit" | "delete";
+    /** The action's name — its tooltip, accessible name and swipe label. Required
+     *  without a `kind`. */
+    label?: string;
+    /** The glyph. Required without a `kind`. */
+    icon?: ReactNode;
+    /** Runs after `confirm` (when given) has said yes. */
+    onAction: (row: T) => void;
+    /** Asked before `onAction`; a `false` (or a promise of one) cancels. */
+    confirm?: (row: T) => boolean | Promise<boolean>;
+    /** Default: `"danger"` for `kind: "delete"`, else `"default"`. */
+    tone?: "default" | "danger";
+    /** Leave the action out for this row. */
+    hidden?: (row: T) => boolean;
+    /** Why the action is locked for this row — the button stays focusable and says so,
+     *  and the row gets no swipe for it. See `IconButton`'s `disabledReason`. */
+    disabledReason?: (row: T) => ReactNode;
+    /** Which way the phone card is dragged to commit it, or `false` for no swipe.
+     *  Default: `"start"` for a danger action, `"end"` otherwise. */
+    swipe?: "start" | "end" | false;
 }
 /** See {@link DataTableProps.chrome}. */
 type DataTableChrome = "full" | "minimal";
@@ -354,64 +655,7 @@ interface MobileSwipeActions {
     /** Committed by dragging physically RIGHT, whatever the direction. */
     right?: SwipeAction[];
 }
-declare function DataTable<T>({ rows, columns, rowKey, defaultPageSize, onRowClick, rowHref, expandedRow, isExpanded, rowClassName, rowAttributes, paginated, empty, storageKey, urlSync, fillHeight, maxBodyHeight, serverPagination, filters: filtersProp, onFiltersChange, sorts: sortsProp, onSortsChange, selection, labels: labelsProp, locale: localeProp, storageKeyPrefix, mobileExpandAsDialog, mobileGroupBy, mobileGroupLabel, mobileCard, mobileSwipeActions, leadingRow, density, sortCycle, chrome, columnSettings: columnSettingsProp, resizable: resizableProp, multiSort: multiSortProp, frame, className, }: DataTableProps<T>): react.JSX.Element;
 
-/** How a column is filtered. `text`/`select`/`date`/`number` each read a value
- *  off the row and compare it against the user's {@link FilterValue}. */
-type ColumnFilter<T> = {
-    type: "text";
-    getValue: (row: T) => string;
-} | {
-    type: "select";
-    getValue: (row: T) => string;
-    options?: {
-        value: string;
-        label?: string;
-    }[];
-} | {
-    type: "date";
-    getValue: (row: T) => string | null | undefined;
-} | {
-    type: "number";
-    getValue: (row: T) => number | null | undefined;
-};
-/** The current state of a column's filter (what the user has entered). */
-type FilterValue = {
-    type: "text";
-    q: string;
-} | {
-    type: "select";
-    values: string[];
-} | {
-    type: "date";
-    from: string;
-    to: string;
-} | {
-    type: "number";
-    min: string;
-    max: string;
-    abs: boolean;
-};
-/** A column's filter config, falling back to a plain text filter over `filterBy`. */
-declare function resolveFilter<T>(col: DataTableColumn<T>): ColumnFilter<T> | null;
-/** Whether a filter value is actually narrowing anything (vs its empty default). */
-declare function isFilterActive(v: FilterValue | undefined): boolean;
-/**
- * Whether `row` passes column `col`'s filter given the user's `state`.
- *
- * `locale` is for the text filter's case folding. Plain `toLowerCase` folds by the
- * root rules, under which a Turkish user typing "istanbul" does not find "İSTANBUL";
- * `toLocaleLowerCase(locale)` does. Optional, and `undefined` is the runtime's default.
- */
-declare function rowMatches<T>(col: DataTableColumn<T>, row: T, state: FilterValue, locale?: string): boolean;
-/** The empty filter state for a column's filter type. */
-declare function defaultFilterState<T>(filter: ColumnFilter<T>): FilterValue;
-/** URL-safe encoding of a filter value (`f.<column>` param), null when empty. */
-declare function encodeFilterValue(v: FilterValue): string | null;
-/** Inverse of {@link encodeFilterValue} given just the filter type — for
- *  callers that know a column's type without holding its full config. */
-declare function decodeFilterValueOfType(type: FilterValue["type"], raw: string): FilterValue;
-/** Inverse of {@link encodeFilterValue}, typed by the column's filter config. */
-declare function decodeFilterValue<T>(filter: ColumnFilter<T>, raw: string): FilterValue;
+declare function DataTable<T>({ rows, columns: columnsProp, rowKey, defaultPageSize, onRowClick, rowHref, expandedRow, isExpanded, rowClassName, rowAttributes, paginated, empty, storageKey, urlSync, fillHeight, maxBodyHeight, serverPagination, filters: filtersProp, onFiltersChange, sorts: sortsProp, onSortsChange, selection, labels: labelsProp, locale: localeProp, storageKeyPrefix, mobileExpandAsDialog, mobileGroupBy, mobileGroupLabel, mobileCard, mobileSwipeActions, leadingRow, density, sortCycle, chrome, columnSettings: columnSettingsProp, resizable: resizableProp, multiSort: multiSortProp, frame, className, rowActions, toolbar, }: DataTableProps<T>): react.JSX.Element;
 
-export { type ColumnFilter as C, DataTable as D, type FilterState as F, type MobileSwipeActions as M, type ServerPagination as S, type DataTableChrome as a, type DataTableColumn as b, type DataTableDensity as c, type DataTableProps as d, type FilterValue as e, decodeFilterValue as f, decodeFilterValueOfType as g, defaultFilterState as h, encodeFilterValue as i, isFilterActive as j, rowMatches as k, type DataTableCellProps as l, type DataTableHeadProps as m, resolveFilter as r };
+export { useTableState as A, type ColumnFilter as C, DataTable as D, type FilterState as F, type MobileSwipeActions as M, type ServerPagination as S, type TableUrlState as T, type UseTableUrlStateOptions as U, type DataTableChrome as a, type DataTableColumn as b, type DataTableDensity as c, type DataTableProps as d, type DataTableRowAction as e, type FilterValue as f, type TableUrlStateProps as g, type TableUrlSync as h, type UseTableUrlStateReturn as i, dateFilter as j, decodeFilterValue as k, decodeFilterValueOfType as l, defaultFilterState as m, encodeFilterValue as n, filterHref as o, isFilterActive as p, numberFilter as q, readTableUrlState as r, resolveFilter as s, rowMatches as t, selectFilter as u, textFilter as v, useTableUrlState as w, type DataTableCellProps as x, type DataTableHeadProps as y, DEFAULT_PERSIST_PREFIX as z };

package/dist/data-table.d.ts

@@ -1,7 +1,8 @@
 export { DEFAULT_DATA_TABLE_LABELS, DataTableLabels, missingDataTableLabels, resolveDataTableLabels } from './components/data-table-labels.js';
 export { SortCycle, SortDir, SortState, SortStepOptions, decodeSorts, encodeSorts, nextSorts, normalizeSorts } from './components/data-table-sort.js';
-export { C as ColumnFilter, D as DataTable, a as DataTableChrome, b as DataTableColumn, c as DataTableDensity, d as DataTableProps, F as FilterState, e as FilterValue, M as MobileSwipeActions, S as ServerPagination, f as decodeFilterValue, g as decodeFilterValueOfType, h as defaultFilterState, i as encodeFilterValue, j as isFilterActive, r as resolveFilter, k as rowMatches } from './data-table-filters-Dh9uF_S-.js';
+export { C as ColumnFilter, D as DataTable, a as DataTableChrome, b as DataTableColumn, c as DataTableDensity, d as DataTableProps, e as DataTableRowAction, F as FilterState, f as FilterValue, M as MobileSwipeActions, S as ServerPagination, T as TableUrlState, g as TableUrlStateProps, h as TableUrlSync, U as UseTableUrlStateOptions, i as UseTableUrlStateReturn, j as dateFilter, k as decodeFilterValue, l as decodeFilterValueOfType, m as defaultFilterState, n as encodeFilterValue, o as filterHref, p as isFilterActive, q as numberFilter, r as readTableUrlState, s as resolveFilter, t as rowMatches, u as selectFilter, v as textFilter, w as useTableUrlState } from './data-table-Drun8Fk9.js';
 export { PAGE_SIZE_OPTIONS, Pagination } from './components/data-table-pagination.js';
 export { FilterPopover } from './components/data-table-filter-popover.js';
+export { BooleanColumnOptions, BooleanMark, BooleanMarkProps, booleanColumn } from './components/data-table-cells.js';
 import 'react';
 import './components/swipeable-row.js';

package/dist/data-table.js

@@ -5,8 +5,12 @@ export * from "./components/data-table-filters.js";
 export * from "./components/data-table-pagination.js";
 import { FilterPopover } from "./components/data-table-filter-popover.js";
 import { DataTable } from "./components/data-table.js";
+export * from "./components/data-table-cells.js";
+import { useTableUrlState, readTableUrlState } from "./components/use-table-state.js";
 export {
   DataTable,
-  FilterPopover
+  FilterPopover,
+  readTableUrlState,
+  useTableUrlState
 };
 //# sourceMappingURL=data-table.js.map

package/dist/data-table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/data-table.ts"],"sourcesContent":["// `@eifi1/ui-kit/data-table` — the table suite.\n//\n// A re-slicing of the main barrel, not a new API. This entry point requires\n// `react-router`: DataTable calls useSearchParams unconditionally, above any `urlSync`\n// branch, so a Router is needed even with URL sync switched off.\nexport * from \"./components/data-table-labels\";\nexport * from \"./components/data-table-sort\";\nexport * from \"./components/data-table-filters\";\nexport * from \"./components/data-table-pagination\";\nexport { FilterPopover } from \"./components/data-table-filter-popover\";\n// `SortState` comes from data-table-sort above; re-exporting the module wholesale\n// would collide with it, which is why the main barrel names these explicitly too.\nexport { DataTable } from \"./components/data-table\";\nexport type {\n  DataTableColumn,\n  DataTableProps,\n  ServerPagination,\n  FilterState,\n  MobileSwipeActions,\n  DataTableDensity,\n  DataTableChrome,\n} from \"./components/data-table\";\n"],"mappings":";AAKA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,qBAAqB;AAG9B,SAAS,iBAAiB;","names":[]}
+{"version":3,"sources":["../src/data-table.ts"],"sourcesContent":["// `@eifi1/ui-kit/data-table` — the table suite.\n//\n// A re-slicing of the main barrel, not a new API. This entry point requires\n// `react-router`: DataTable calls useSearchParams unconditionally, above any `urlSync`\n// branch, so a Router is needed even with URL sync switched off.\nexport * from \"./components/data-table-labels\";\nexport * from \"./components/data-table-sort\";\nexport * from \"./components/data-table-filters\";\nexport * from \"./components/data-table-pagination\";\nexport { FilterPopover } from \"./components/data-table-filter-popover\";\n// `SortState` comes from data-table-sort above; re-exporting the module wholesale\n// would collide with it, which is why the main barrel names these explicitly too.\nexport { DataTable } from \"./components/data-table\";\nexport type {\n  DataTableColumn,\n  DataTableProps,\n  ServerPagination,\n  FilterState,\n  MobileSwipeActions,\n  DataTableDensity,\n  DataTableChrome,\n  DataTableRowAction,\n} from \"./components/data-table\";\nexport * from \"./components/data-table-cells\";\nexport { useTableUrlState, readTableUrlState } from \"./components/use-table-state\";\nexport type {\n  TableUrlState,\n  TableUrlSync,\n  TableUrlStateProps,\n  UseTableUrlStateOptions,\n  UseTableUrlStateReturn,\n} from \"./components/use-table-state\";\n"],"mappings":";AAKA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,qBAAqB;AAG9B,SAAS,iBAAiB;AAW1B,cAAc;AACd,SAAS,kBAAkB,yBAAyB;","names":[]}

package/dist/feedback/feedback-attachment.js

@@ -25,18 +25,16 @@ function FeedbackAttachmentField({
   pasteFrom,
   className
 }) {
-  const [preview, setPreview] = useState(null);
+  const [previewFor, setPreviewFor] = useState(null);
+  const preview = value && previewFor?.file === value ? previewFor.url : null;
   const [capturing, setCapturing] = useState(false);
   const fileInputRef = useRef(null);
   const fileText = useKitFileLabels();
   const text = useKitLabels("feedbackAttachment", DEFAULT_FEEDBACK_ATTACHMENT_LABELS, labelsProp);
   useEffect(() => {
-    if (!value) {
-      setPreview(null);
-      return;
-    }
+    if (!value) return;
     const url = URL.createObjectURL(value);
-    setPreview(url);
+    setPreviewFor({ file: value, url });
     return () => URL.revokeObjectURL(url);
   }, [value]);
   const pick = (file) => {

package/dist/feedback/feedback-attachment.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/feedback/feedback-attachment.tsx"],"sourcesContent":["import { cn } from \"../lib/cn\";\nimport { useEffect, useRef, useState, type RefObject } from \"react\";\nimport { Camera, FileText, Paperclip, X } from \"lucide-react\";\nimport { Button } from \"../components/ui\";\nimport { useKitFileLabels, useKitLabels } from \"../i18n/kit-labels\";\nimport type { FeedbackAttachmentLabels } from \"./feedback-dialog\";\n\nexport const DEFAULT_ATTACHMENT_ACCEPT = [\"image/png\", \"image/jpeg\", \"image/webp\", \"image/gif\"];\nexport const DEFAULT_MAX_ATTACHMENT_BYTES = 10 * 1024 * 1024;\n\n/**\n * The field's own strings — the `feedbackAttachment` namespace of `<UiKitProvider\n * labels>`. The keys are {@link FeedbackAttachmentLabels}' own, so the `labels` prop\n * (and a whole `FeedbackDialogLabels` handed down by the dialog) merges over them\n * one to one. The optional heading, `attachment`, stays a prop: a note editor puts\n * the buttons straight under its textarea and wants none.\n *\n * Before 0.7.0 the two optional keys fell back to hard-coded English, so a German app\n * that relied on its provider got \"Capture screenshot\" under a German form.\n */\nexport interface FeedbackAttachmentFieldLabels {\n  attachmentAdd: string;\n  attachmentCapture: string;\n  attachmentPaste: string;\n  attachmentRemove: string;\n}\n\nexport const DEFAULT_FEEDBACK_ATTACHMENT_LABELS: FeedbackAttachmentFieldLabels = {\n  attachmentAdd: \"Attach image\",\n  attachmentCapture: \"Capture screenshot\",\n  attachmentPaste: \"…or paste a screenshot from the clipboard.\",\n  attachmentRemove: \"Remove attachment\",\n};\n\n/**\n * Picking one picture: the file dialog, a capture of the app view, or a paste.\n *\n * Lifted out of {@link FeedbackDialog} so the *reply* half of the feature can\n * have it too (Steering Design feedback #128). A report is a conversation — it\n * is filed, it is answered, and the reporter sends it back saying that is not\n * what they meant — and the screenshot showing what they mean is taken at\n * whichever of those points they looked. Only the first of them had a way to\n * attach one, so everything after it had to be described in words.\n *\n * **Three ways in, and they are three because no one of them covers the others.**\n * The file dialog needs a file on disk; `onCaptureScreenshot` snapshots the\n * *whole* app view; and the clipboard is where a region snip already is on every\n * platform (Steering Design feedback #39). Somebody who wanted to show one panel\n * had to save a crop and then find it again.\n *\n * `documentPaste` and `pasteFrom` decide where the paste is listened for, and\n * it is a real choice rather than a flag with a default. A modal traps focus,\n * so while it is up every paste in the page is meant for it — including one\n * made with nothing in particular focused, which never reaches a React\n * `onPaste` on a child: that is `documentPaste`. An editor **inline on a\n * page** is not that: the page around it has its own fields, so it listens\n * within its own subtree and a paste elsewhere stays where it was aimed. But\n * \"its own subtree\" has to include the text box the paste is actually made in,\n * and that box is this field's *sibling*, not its child — a paste in it bubbles\n * to their common parent and never through here. `pasteFrom` is that parent\n * (Steering Design feedback #140): the element whose subtree is listened to,\n * handed in by whoever renders both the box and this field side by side.\n */\nexport function FeedbackAttachmentField({\n  value,\n  onChange,\n  labels: labelsProp,\n  accept = DEFAULT_ATTACHMENT_ACCEPT,\n  maxBytes = DEFAULT_MAX_ATTACHMENT_BYTES,\n  onError,\n  onCaptureScreenshot,\n  documentPaste = false,\n  pasteFrom,\n  className,\n}: {\n  value: File | null;\n  onChange: (file: File | null) => void;\n  /** Prop > `<UiKitProvider labels={{ feedbackAttachment }}>` > English. Optional\n   *  since 0.7.0; `attachment` (the heading) is only ever read from here. */\n  labels?: Partial<FeedbackAttachmentLabels>;\n  accept?: string[];\n  maxBytes?: number;\n  onError?: (kind: \"type\" | \"size\") => void;\n  /** Snapshot the app view behind this and return it as a File. A \"Capture\n   *  screenshot\" button appears only when it is given. */\n  onCaptureScreenshot?: () => Promise<File | null>;\n  /** Listen for the paste on `document` rather than on this field's own\n   *  subtree. For a modal, which owns the whole page while it is up. */\n  documentPaste?: boolean;\n  /** Listen for the paste within this element's subtree rather than this\n   *  field's own — for a field standing *beside* the text box a paste is made\n   *  in, whose common parent is where the event bubbles to. Ignored when\n   *  `documentPaste` is set. */\n  pasteFrom?: RefObject<HTMLElement | null>;\n  className?: string;\n}) {\n  const [preview, setPreview] = useState<string | null>(null);\n  const [capturing, setCapturing] = useState(false);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  // `file.size` from `<UiKitProvider labels>`, formatted in its locale — see FileDropzone.\n  const fileText = useKitFileLabels();\n  const text = useKitLabels(\"feedbackAttachment\", DEFAULT_FEEDBACK_ATTACHMENT_LABELS, labelsProp);\n\n  // Object-URL preview lifecycle (create on change, revoke on cleanup).\n  useEffect(() => {\n    if (!value) {\n      setPreview(null);\n      return;\n    }\n    const url = URL.createObjectURL(value);\n    setPreview(url);\n    return () => URL.revokeObjectURL(url);\n  }, [value]);\n\n  const pick = (file: File | undefined | null) => {\n    if (!file) return;\n    if (!accept.includes(file.type)) {\n      onError?.(\"type\");\n      return;\n    }\n    if (file.size > maxBytes) {\n      onError?.(\"size\");\n      return;\n    }\n    onChange(file);\n  };\n\n  // The paste handler is registered once rather than per render, so it reads\n  // `pick` — which closes over props that change identity on every render — out\n  // of a ref rather than out of its own dependency list.\n  const latest = useRef(pick);\n  useEffect(() => {\n    latest.current = pick;\n  });\n\n  const takeImage = (clipboard: DataTransfer | null, stop: () => void) => {\n    const items = Array.from(clipboard?.items ?? []);\n    const image = items.find((item) => item.kind === \"file\" && item.type.startsWith(\"image/\"));\n    const file = image?.getAsFile();\n    if (!file) return;\n    // Only once there IS an image: a paste of text into a field must stay a\n    // paste of text, and a clipboard holding both is a copy whose text half is\n    // what the field was focused for.\n    stop();\n    // Clipboard images arrive named \"image.png\" at best and unnamed at worst,\n    // and the name is what the inbox shows beside the thumbnail. A name that\n    // says where it came from is more use than the browser's.\n    latest.current(new File([file], pastedName(file.type), { type: file.type }));\n  };\n\n  // The element listened on, where it is not this field's own subtree: the\n  // document for a modal, the given parent for an inline editor. Read inside\n  // the effect rather than in render, because a ref's `current` is only set\n  // once the parent has mounted — which it has by the time effects run.\n  useEffect(() => {\n    const target: EventTarget | null = documentPaste ? document : (pasteFrom?.current ?? null);\n    if (!target) return;\n    const onPaste = (event: Event) => {\n      const clipboard = (event as ClipboardEvent).clipboardData;\n      takeImage(clipboard, () => event.preventDefault());\n    };\n    target.addEventListener(\"paste\", onPaste);\n    return () => target.removeEventListener(\"paste\", onPaste);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- takeImage reads `latest`, which is a ref\n  }, [documentPaste, pasteFrom]);\n  const listensElsewhere = documentPaste || pasteFrom !== undefined;\n\n  return (\n    <div\n      // `relative` for the same reason as FileDropzone: the `sr-only` file input below\n      // is `position: absolute`, and without a positioned ancestor it is laid out\n      // against the initial containing block — extending the DOCUMENT height to its own\n      // offset and producing a phantom second scrollbar on any long page.\n      className={cn(\"relative\", className)}\n      onPaste={\n        listensElsewhere\n          ? undefined\n          : (event) => takeImage(event.clipboardData, () => event.preventDefault())\n      }\n    >\n      {labelsProp?.attachment && (\n        <div className=\"mb-1 text-xs font-medium uppercase tracking-wide text-[var(--text-muted)]\">\n          {labelsProp.attachment}\n        </div>\n      )}\n      {value ? (\n        <div className=\"flex items-start gap-2\">\n          {value.type.startsWith(\"image/\") && preview ? (\n            <img\n              src={preview}\n              alt={value.name}\n              className=\"h-20 w-20 rounded border border-[var(--border)] object-cover\"\n            />\n          ) : (\n            // Non-image attachments (PDF, text) can't preview as an <img>, so\n            // show a neutral file tile with the name/size beside it instead.\n            <div className=\"flex h-20 w-20 items-center justify-center rounded border border-[var(--border)] text-[var(--text-placeholder)]\">\n              <FileText className=\"size-8\" />\n            </div>\n          )}\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"truncate text-sm text-[var(--text-secondary)]\">{value.name}</div>\n            <div className=\"text-xs text-[var(--text-muted)]\">\n              {fileText.size(value.size)}\n            </div>\n          </div>\n          <button\n            type=\"button\"\n            onClick={() => onChange(null)}\n            aria-label={text.attachmentRemove}\n            className=\"rounded p-1.5 text-[var(--text-placeholder)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]\"\n          >\n            <X className=\"size-4\" />\n          </button>\n        </div>\n      ) : (\n        <div className=\"space-y-1.5\">\n          <div className=\"flex flex-wrap gap-2\">\n            <Button type=\"button\" variant=\"secondary\" onClick={() => fileInputRef.current?.click()}>\n              <Paperclip className=\"size-4\" /> {text.attachmentAdd}\n            </Button>\n            {onCaptureScreenshot && (\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                disabled={capturing}\n                onClick={() => {\n                  if (capturing) return;\n                  setCapturing(true);\n                  void onCaptureScreenshot()\n                    .then((file) => {\n                      if (file) pick(file);\n                    })\n                    .finally(() => setCapturing(false));\n                }}\n              >\n                <Camera className=\"size-4\" />{\" \"}\n                {capturing ? \"…\" : text.attachmentCapture}\n              </Button>\n            )}\n          </div>\n          {/* Said out loud, because a gesture with no affordance is a gesture\n              nobody finds. */}\n          <p className=\"text-xs text-[var(--text-muted)]\">\n            {text.attachmentPaste}\n          </p>\n        </div>\n      )}\n      <input\n        ref={fileInputRef}\n        type=\"file\"\n        accept={accept.join(\",\")}\n        className=\"sr-only\"\n        onChange={(e) => {\n          pick(e.target.files?.[0]);\n          e.target.value = \"\";\n        }}\n      />\n    </div>\n  );\n}\n\n/** What a pasted image is called once it is an attachment.\n *\n *  The extension is read off the mime type rather than assumed to be `.png`:\n *  Safari puts TIFF on the clipboard and a file called `pasted.png` that is not\n *  a PNG is one the receiving end opens wrong. */\nexport function pastedName(type: string): string {\n  const subtype = type.split(\"/\")[1] ?? \"png\";\n  // `image/svg+xml` and friends carry a suffix that is not part of the\n  // extension, and none of them are in the accepted list anyway.\n  return `pasted.${subtype.split(\"+\")[0]}`;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/feedback/feedback-attachment.tsx"],"sourcesContent":["import { cn } from \"../lib/cn\";\nimport { useEffect, useRef, useState, type RefObject } from \"react\";\nimport { Camera, FileText, Paperclip, X } from \"lucide-react\";\nimport { Button } from \"../components/ui\";\nimport { useKitFileLabels, useKitLabels } from \"../i18n/kit-labels\";\nimport type { FeedbackAttachmentLabels } from \"./feedback-dialog\";\n\nexport const DEFAULT_ATTACHMENT_ACCEPT = [\"image/png\", \"image/jpeg\", \"image/webp\", \"image/gif\"];\nexport const DEFAULT_MAX_ATTACHMENT_BYTES = 10 * 1024 * 1024;\n\n/**\n * The field's own strings — the `feedbackAttachment` namespace of `<UiKitProvider\n * labels>`. The keys are {@link FeedbackAttachmentLabels}' own, so the `labels` prop\n * (and a whole `FeedbackDialogLabels` handed down by the dialog) merges over them\n * one to one. The optional heading, `attachment`, stays a prop: a note editor puts\n * the buttons straight under its textarea and wants none.\n *\n * Before 0.7.0 the two optional keys fell back to hard-coded English, so a German app\n * that relied on its provider got \"Capture screenshot\" under a German form.\n */\nexport interface FeedbackAttachmentFieldLabels {\n  attachmentAdd: string;\n  attachmentCapture: string;\n  attachmentPaste: string;\n  attachmentRemove: string;\n}\n\nexport const DEFAULT_FEEDBACK_ATTACHMENT_LABELS: FeedbackAttachmentFieldLabels = {\n  attachmentAdd: \"Attach image\",\n  attachmentCapture: \"Capture screenshot\",\n  attachmentPaste: \"…or paste a screenshot from the clipboard.\",\n  attachmentRemove: \"Remove attachment\",\n};\n\n/**\n * Picking one picture: the file dialog, a capture of the app view, or a paste.\n *\n * Lifted out of {@link FeedbackDialog} so the *reply* half of the feature can\n * have it too (Steering Design feedback #128). A report is a conversation — it\n * is filed, it is answered, and the reporter sends it back saying that is not\n * what they meant — and the screenshot showing what they mean is taken at\n * whichever of those points they looked. Only the first of them had a way to\n * attach one, so everything after it had to be described in words.\n *\n * **Three ways in, and they are three because no one of them covers the others.**\n * The file dialog needs a file on disk; `onCaptureScreenshot` snapshots the\n * *whole* app view; and the clipboard is where a region snip already is on every\n * platform (Steering Design feedback #39). Somebody who wanted to show one panel\n * had to save a crop and then find it again.\n *\n * `documentPaste` and `pasteFrom` decide where the paste is listened for, and\n * it is a real choice rather than a flag with a default. A modal traps focus,\n * so while it is up every paste in the page is meant for it — including one\n * made with nothing in particular focused, which never reaches a React\n * `onPaste` on a child: that is `documentPaste`. An editor **inline on a\n * page** is not that: the page around it has its own fields, so it listens\n * within its own subtree and a paste elsewhere stays where it was aimed. But\n * \"its own subtree\" has to include the text box the paste is actually made in,\n * and that box is this field's *sibling*, not its child — a paste in it bubbles\n * to their common parent and never through here. `pasteFrom` is that parent\n * (Steering Design feedback #140): the element whose subtree is listened to,\n * handed in by whoever renders both the box and this field side by side.\n */\nexport function FeedbackAttachmentField({\n  value,\n  onChange,\n  labels: labelsProp,\n  accept = DEFAULT_ATTACHMENT_ACCEPT,\n  maxBytes = DEFAULT_MAX_ATTACHMENT_BYTES,\n  onError,\n  onCaptureScreenshot,\n  documentPaste = false,\n  pasteFrom,\n  className,\n}: {\n  value: File | null;\n  onChange: (file: File | null) => void;\n  /** Prop > `<UiKitProvider labels={{ feedbackAttachment }}>` > English. Optional\n   *  since 0.7.0; `attachment` (the heading) is only ever read from here. */\n  labels?: Partial<FeedbackAttachmentLabels>;\n  accept?: string[];\n  maxBytes?: number;\n  onError?: (kind: \"type\" | \"size\") => void;\n  /** Snapshot the app view behind this and return it as a File. A \"Capture\n   *  screenshot\" button appears only when it is given. */\n  onCaptureScreenshot?: () => Promise<File | null>;\n  /** Listen for the paste on `document` rather than on this field's own\n   *  subtree. For a modal, which owns the whole page while it is up. */\n  documentPaste?: boolean;\n  /** Listen for the paste within this element's subtree rather than this\n   *  field's own — for a field standing *beside* the text box a paste is made\n   *  in, whose common parent is where the event bubbles to. Ignored when\n   *  `documentPaste` is set. */\n  pasteFrom?: RefObject<HTMLElement | null>;\n  className?: string;\n}) {\n  // The object URL is keyed to the file it was made for, so a stale one (from the\n  // previous file, or after `value` is cleared) is never shown — no reset needed.\n  const [previewFor, setPreviewFor] = useState<{ file: File; url: string } | null>(null);\n  const preview = value && previewFor?.file === value ? previewFor.url : null;\n  const [capturing, setCapturing] = useState(false);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  // `file.size` from `<UiKitProvider labels>`, formatted in its locale — see FileDropzone.\n  const fileText = useKitFileLabels();\n  const text = useKitLabels(\"feedbackAttachment\", DEFAULT_FEEDBACK_ATTACHMENT_LABELS, labelsProp);\n\n  // Object-URL preview lifecycle (create on change, revoke on cleanup).\n  useEffect(() => {\n    if (!value) return;\n    const url = URL.createObjectURL(value);\n    // The URL is an external resource that must be created and revoked in step\n    // with the effect (a render-time `createObjectURL` would leak, and StrictMode's\n    // remount would revoke a memoised one out from under the <img>).\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- publishing an external resource's handle\n    setPreviewFor({ file: value, url });\n    return () => URL.revokeObjectURL(url);\n  }, [value]);\n\n  const pick = (file: File | undefined | null) => {\n    if (!file) return;\n    if (!accept.includes(file.type)) {\n      onError?.(\"type\");\n      return;\n    }\n    if (file.size > maxBytes) {\n      onError?.(\"size\");\n      return;\n    }\n    onChange(file);\n  };\n\n  // The paste handler is registered once rather than per render, so it reads\n  // `pick` — which closes over props that change identity on every render — out\n  // of a ref rather than out of its own dependency list.\n  const latest = useRef(pick);\n  useEffect(() => {\n    latest.current = pick;\n  });\n\n  const takeImage = (clipboard: DataTransfer | null, stop: () => void) => {\n    const items = Array.from(clipboard?.items ?? []);\n    const image = items.find((item) => item.kind === \"file\" && item.type.startsWith(\"image/\"));\n    const file = image?.getAsFile();\n    if (!file) return;\n    // Only once there IS an image: a paste of text into a field must stay a\n    // paste of text, and a clipboard holding both is a copy whose text half is\n    // what the field was focused for.\n    stop();\n    // Clipboard images arrive named \"image.png\" at best and unnamed at worst,\n    // and the name is what the inbox shows beside the thumbnail. A name that\n    // says where it came from is more use than the browser's.\n    latest.current(new File([file], pastedName(file.type), { type: file.type }));\n  };\n\n  // The element listened on, where it is not this field's own subtree: the\n  // document for a modal, the given parent for an inline editor. Read inside\n  // the effect rather than in render, because a ref's `current` is only set\n  // once the parent has mounted — which it has by the time effects run.\n  useEffect(() => {\n    const target: EventTarget | null = documentPaste ? document : (pasteFrom?.current ?? null);\n    if (!target) return;\n    const onPaste = (event: Event) => {\n      const clipboard = (event as ClipboardEvent).clipboardData;\n      takeImage(clipboard, () => event.preventDefault());\n    };\n    target.addEventListener(\"paste\", onPaste);\n    return () => target.removeEventListener(\"paste\", onPaste);\n  }, [documentPaste, pasteFrom]);\n  const listensElsewhere = documentPaste || pasteFrom !== undefined;\n\n  return (\n    <div\n      // `relative` for the same reason as FileDropzone: the `sr-only` file input below\n      // is `position: absolute`, and without a positioned ancestor it is laid out\n      // against the initial containing block — extending the DOCUMENT height to its own\n      // offset and producing a phantom second scrollbar on any long page.\n      className={cn(\"relative\", className)}\n      onPaste={\n        listensElsewhere\n          ? undefined\n          : (event) => takeImage(event.clipboardData, () => event.preventDefault())\n      }\n    >\n      {labelsProp?.attachment && (\n        <div className=\"mb-1 text-xs font-medium uppercase tracking-wide text-[var(--text-muted)]\">\n          {labelsProp.attachment}\n        </div>\n      )}\n      {value ? (\n        <div className=\"flex items-start gap-2\">\n          {value.type.startsWith(\"image/\") && preview ? (\n            <img\n              src={preview}\n              alt={value.name}\n              className=\"h-20 w-20 rounded border border-[var(--border)] object-cover\"\n            />\n          ) : (\n            // Non-image attachments (PDF, text) can't preview as an <img>, so\n            // show a neutral file tile with the name/size beside it instead.\n            <div className=\"flex h-20 w-20 items-center justify-center rounded border border-[var(--border)] text-[var(--text-placeholder)]\">\n              <FileText className=\"size-8\" />\n            </div>\n          )}\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"truncate text-sm text-[var(--text-secondary)]\">{value.name}</div>\n            <div className=\"text-xs text-[var(--text-muted)]\">\n              {fileText.size(value.size)}\n            </div>\n          </div>\n          <button\n            type=\"button\"\n            onClick={() => onChange(null)}\n            aria-label={text.attachmentRemove}\n            className=\"rounded p-1.5 text-[var(--text-placeholder)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]\"\n          >\n            <X className=\"size-4\" />\n          </button>\n        </div>\n      ) : (\n        <div className=\"space-y-1.5\">\n          <div className=\"flex flex-wrap gap-2\">\n            <Button type=\"button\" variant=\"secondary\" onClick={() => fileInputRef.current?.click()}>\n              <Paperclip className=\"size-4\" /> {text.attachmentAdd}\n            </Button>\n            {onCaptureScreenshot && (\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                disabled={capturing}\n                onClick={() => {\n                  if (capturing) return;\n                  setCapturing(true);\n                  void onCaptureScreenshot()\n                    .then((file) => {\n                      if (file) pick(file);\n                    })\n                    .finally(() => setCapturing(false));\n                }}\n              >\n                <Camera className=\"size-4\" />{\" \"}\n                {capturing ? \"…\" : text.attachmentCapture}\n              </Button>\n            )}\n          </div>\n          {/* Said out loud, because a gesture with no affordance is a gesture\n              nobody finds. */}\n          <p className=\"text-xs text-[var(--text-muted)]\">\n            {text.attachmentPaste}\n          </p>\n        </div>\n      )}\n      <input\n        ref={fileInputRef}\n        type=\"file\"\n        accept={accept.join(\",\")}\n        className=\"sr-only\"\n        onChange={(e) => {\n          pick(e.target.files?.[0]);\n          e.target.value = \"\";\n        }}\n      />\n    </div>\n  );\n}\n\n/** What a pasted image is called once it is an attachment.\n *\n *  The extension is read off the mime type rather than assumed to be `.png`:\n *  Safari puts TIFF on the clipboard and a file called `pasted.png` that is not\n *  a PNG is one the receiving end opens wrong. */\nexport function pastedName(type: string): string {\n  const subtype = type.split(\"/\")[1] ?? \"png\";\n  // `image/svg+xml` and friends carry a suffix that is not part of the\n  // extension, and none of them are in the accepted list anyway.\n  return `pasted.${subtype.split(\"+\")[0]}`;\n}\n"],"mappings":"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","names":[]}

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

@@ -28,6 +28,27 @@ interface FeedbackDialogLabels extends FeedbackAttachmentLabels {
     cancel: string;
     save: string;
 }
+/**
+ * The dialog's own strings — the `feedbackDialog` namespace of `<UiKitProvider
+ * labels>` (0.12.0). The attachment keys are not repeated here: they are the
+ * `feedbackAttachment` namespace's, which the field inside already reads.
+ *
+ * Before, every key was required at the call site, so each app restated ten strings
+ * wherever it mounted the dialog (kastlan feedback-button.tsx built the object inline).
+ */
+interface FeedbackDialogTextLabels {
+    title: string;
+    category: string;
+    subject: string;
+    body: string;
+    /** The heading over the attachment buttons. */
+    attachment: string;
+    /** The line beside the buttons naming the shortcut. */
+    submitHint: string;
+    cancel: string;
+    save: string;
+}
+declare const DEFAULT_FEEDBACK_DIALOG_LABELS: FeedbackDialogTextLabels;
 interface FeedbackSubmission {
     title: string;
     body: string;
@@ -49,13 +70,15 @@ interface FeedbackSubmission {
  * (Steering Design feedback #39). The clipboard is where a region snip already
  * is on every platform.
  */
-declare function FeedbackDialog({ open, onClose, categories, category, onCategoryChange, labels, onSubmit, submitting, contextSlot, attachmentAccept, maxAttachmentBytes, onAttachmentError, onCaptureScreenshot, }: {
+declare function FeedbackDialog({ open, onClose, categories, category, onCategoryChange, labels: labelsProp, onSubmit, submitting, contextSlot, attachmentAccept, maxAttachmentBytes, onAttachmentError, onCaptureScreenshot, }: {
     open: boolean;
     onClose: () => void;
     categories: FeedbackCategoryOption[];
     category: string;
     onCategoryChange: (value: string) => void;
-    labels: FeedbackDialogLabels;
+    /** Prop > `<UiKitProvider labels={{ feedbackDialog, feedbackAttachment }}>` >
+     *  English. Optional since 0.12.0; a whole `FeedbackDialogLabels` still fits. */
+    labels?: Partial<FeedbackDialogLabels>;
     onSubmit: (data: FeedbackSubmission) => void | Promise<void>;
     submitting?: boolean;
     contextSlot?: ReactNode;
@@ -70,4 +93,4 @@ declare function FeedbackDialog({ open, onClose, categories, category, onCategor
     onCaptureScreenshot?: () => Promise<File | null>;
 }): react.JSX.Element | null;
 
-export { type FeedbackAttachmentLabels, type FeedbackCategoryOption, FeedbackDialog, type FeedbackDialogLabels, type FeedbackSubmission };
+export { DEFAULT_FEEDBACK_DIALOG_LABELS, type FeedbackAttachmentLabels, type FeedbackCategoryOption, FeedbackDialog, type FeedbackDialogLabels, type FeedbackDialogTextLabels, type FeedbackSubmission };