@eifi1/ui-kit 0.10.0 → 0.12.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-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 };

package/dist/feedback/feedback-dialog.js

@@ -4,18 +4,29 @@ import { useEffect, useState } from "react";
 import { Button, Input, PHONE_QUERY, Select, Textarea } from "../components/ui.js";
 import { Modal } from "../components/modal.js";
 import { useMediaQuery } from "../hooks/use-media-query.js";
+import { useKitLabels } from "../i18n/kit-labels.js";
 import {
   DEFAULT_ATTACHMENT_ACCEPT,
   DEFAULT_MAX_ATTACHMENT_BYTES,
   FeedbackAttachmentField
 } from "./feedback-attachment.js";
+const DEFAULT_FEEDBACK_DIALOG_LABELS = {
+  title: "Send feedback",
+  category: "Category",
+  subject: "Subject",
+  body: "What happened?",
+  attachment: "Screenshot",
+  submitHint: "Ctrl/\u2318 + Enter to send",
+  cancel: "Cancel",
+  save: "Send"
+};
 function FeedbackDialog({
   open,
   onClose,
   categories,
   category,
   onCategoryChange,
-  labels,
+  labels: labelsProp,
   onSubmit,
   submitting = false,
   contextSlot,
@@ -28,6 +39,8 @@ function FeedbackDialog({
   const [body, setBody] = useState("");
   const [attachment, setAttachment] = useState(null);
   const isMobile = useMediaQuery(PHONE_QUERY, false);
+  const labels = useKitLabels("feedbackDialog", DEFAULT_FEEDBACK_DIALOG_LABELS, labelsProp);
+  const attachmentLabels = { ...labelsProp, attachment: labels.attachment };
   useEffect(() => {
     if (open) {
       setTitle("");
@@ -48,7 +61,7 @@ function FeedbackDialog({
     {
       value: attachment,
       onChange: setAttachment,
-      labels,
+      labels: attachmentLabels,
       accept: attachmentAccept,
       maxBytes: maxAttachmentBytes,
       onError: onAttachmentError,
@@ -105,6 +118,7 @@ function FeedbackDialog({
   );
 }
 export {
+  DEFAULT_FEEDBACK_DIALOG_LABELS,
   FeedbackDialog
 };
 //# sourceMappingURL=feedback-dialog.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/feedback/feedback-dialog.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Button, Input, PHONE_QUERY, Select, Textarea } from \"../components/ui\";\nimport { Modal } from \"../components/modal\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport {\n  DEFAULT_ATTACHMENT_ACCEPT,\n  DEFAULT_MAX_ATTACHMENT_BYTES,\n  FeedbackAttachmentField,\n} from \"./feedback-attachment\";\n\nexport interface FeedbackCategoryOption {\n  value: string;\n  label: string;\n}\n\nexport interface FeedbackAttachmentLabels {\n  /** The heading over the field. Optional: a note editor puts the buttons\n   *  straight under its textarea, where a second heading is noise. */\n  attachment?: string;\n  attachmentAdd: string;\n  /** Label for the \"capture screenshot\" button. Optional — falls back to the provider's\n   *  `feedbackAttachment.attachmentCapture`, then English. */\n  attachmentCapture?: string;\n  /** The line under the attachment buttons saying a screenshot can be pasted\n   *  straight in. Optional — falls back to the provider's `feedbackAttachment`, then English. */\n  attachmentPaste?: string;\n  attachmentRemove: string;\n}\n\nexport interface FeedbackDialogLabels extends FeedbackAttachmentLabels {\n  title: string;\n  category: string;\n  subject: string;\n  body: string;\n  attachment: string;\n  submitHint: string;\n  cancel: string;\n  save: string;\n}\n\nexport interface FeedbackSubmission {\n  title: string;\n  body: string;\n  category: string;\n  attachment: File | null;\n}\n\n/**\n * The generic feedback form dialog: category + subject + body + an optional image\n * attachment, with Ctrl/Cmd+Enter to submit. Domain-free — the app supplies the\n * category options, labels and an `onSubmit` that talks to its own backend, plus\n * an optional `contextSlot` for app-specific context (user, current URL, …).\n *\n * **A screenshot can be pasted straight in.** Ctrl/Cmd+V anywhere in the dialog\n * takes an image off the clipboard and makes it the attachment, through the same\n * validation and the same preview as the file picker. It is the gesture the two\n * ways in did not cover: `onCaptureScreenshot` snapshots the *whole* app view,\n * and the file picker needs a file — so somebody who wanted to show one panel,\n * or one region of one, had to save a crop to disk first and then find it again\n * (Steering Design feedback #39). The clipboard is where a region snip already\n * is on every platform.\n */\nexport function FeedbackDialog({\n  open,\n  onClose,\n  categories,\n  category,\n  onCategoryChange,\n  labels,\n  onSubmit,\n  submitting = false,\n  contextSlot,\n  attachmentAccept = DEFAULT_ATTACHMENT_ACCEPT,\n  maxAttachmentBytes = DEFAULT_MAX_ATTACHMENT_BYTES,\n  onAttachmentError,\n  onCaptureScreenshot,\n}: {\n  open: boolean;\n  onClose: () => void;\n  categories: FeedbackCategoryOption[];\n  category: string;\n  onCategoryChange: (value: string) => void;\n  labels: FeedbackDialogLabels;\n  onSubmit: (data: FeedbackSubmission) => void | Promise<void>;\n  submitting?: boolean;\n  contextSlot?: ReactNode;\n  attachmentAccept?: string[];\n  maxAttachmentBytes?: number;\n  onAttachmentError?: (kind: \"type\" | \"size\") => void;\n  /**\n   * Optional: capture a screenshot of the underlying app view and return it as a\n   * File. When provided, a \"Capture screenshot\" button is shown next to \"Add\n   * attachment\"; the returned file is fed through the same validation + preview.\n   */\n  onCaptureScreenshot?: () => Promise<File | null>;\n}) {\n  const [title, setTitle] = useState(\"\");\n  const [body, setBody] = useState(\"\");\n  const [attachment, setAttachment] = useState<File | null>(null);\n  const isMobile = useMediaQuery(PHONE_QUERY, false);\n\n  // Reset the form whenever the dialog is (re)opened.\n  useEffect(() => {\n    if (open) {\n      setTitle(\"\");\n      setBody(\"\");\n      setAttachment(null);\n    }\n  }, [open]);\n\n  const canSubmit = !!title && !!body && !submitting;\n  const trySubmit = () => {\n    if (canSubmit) void onSubmit({ title, body, category, attachment });\n  };\n\n  if (!open) return null;\n\n  const categoryField = (\n    <Select label={labels.category} value={category} onChange={(e) => onCategoryChange(e.target.value)}>\n      {categories.map((c) => (\n        <option key={c.value} value={c.value}>\n          {c.label}\n        </option>\n      ))}\n    </Select>\n  );\n  // On a phone the subject leads as a heading rather than as the second of two\n  // identical boxes under a select (Keksdose feedback #179). `variant=\"display\"`\n  // is a no-op above the phone breakpoint, so the desktop dialog is unchanged.\n  const subjectField = (\n    <Input label={labels.subject} value={title} onChange={(e) => setTitle(e.target.value)} variant=\"display\" />\n  );\n  const bodyField = (\n    <Textarea rows={5} label={labels.body} value={body} onChange={(e) => setBody(e.target.value)} />\n  );\n  const attachmentField = (\n    <FeedbackAttachmentField\n      value={attachment}\n      onChange={setAttachment}\n      labels={labels}\n      accept={attachmentAccept}\n      maxBytes={maxAttachmentBytes}\n      onError={onAttachmentError}\n      onCaptureScreenshot={onCaptureScreenshot}\n      // On `document`, not on the panel: the Modal focuses its own panel on open\n      // and traps Tab inside it, so while this dialog is up every paste in the\n      // page is meant for it — including the one made with nothing in\n      // particular focused, which never reaches a React `onPaste` on a child.\n      documentPaste={open}\n    />\n  );\n\n  return (\n    <Modal\n      onClose={onClose}\n      // The one dialog whose subject is the page behind it (Keksdose dev#460: \"Make\n      // the feedback dialog draggable so I can see behind it if it blocks\n      // something\") — you are describing what is under it while you type.\n      draggable\n      onKeyDown={(e) => {\n        if ((e.ctrlKey || e.metaKey) && e.key === \"Enter\") {\n          e.preventDefault();\n          trySubmit();\n        }\n      }}\n    >\n      {/* Also the drag handle: pressing anywhere on the panel's own chrome moves it,\n          and the heading is the strip a user reaches for. */}\n      <h2 className=\"mb-3 text-lg font-semibold\">{labels.title}</h2>\n      <div className=\"space-y-3\">\n        {isMobile ? (\n          // Phone shape, the same reasoning as the transaction editor's (#177):\n          // the desktop order is the DATA MODEL's order — category, then subject,\n          // then body — but nobody opens this dialog to pick a category. What they\n          // came to do is say the thing, so that leads; the classification and the\n          // evidence follow, a tier down.\n          <>\n            {subjectField}\n            {bodyField}\n            <div className=\"space-y-3 border-t border-[var(--border)] pt-3\">\n              {categoryField}\n              {attachmentField}\n              {contextSlot}\n            </div>\n          </>\n        ) : (\n          <>\n            {categoryField}\n            {subjectField}\n            {bodyField}\n            {attachmentField}\n            {contextSlot}\n          </>\n        )}\n        <div className=\"flex items-center justify-between gap-2\">\n          <div className=\"text-xs text-[var(--text-placeholder)]\">{labels.submitHint}</div>\n          <div className=\"flex gap-2\">\n            <Button variant=\"ghost\" onClick={onClose}>\n              {labels.cancel}\n            </Button>\n            <Button onClick={trySubmit} disabled={!canSubmit}>\n              {labels.save}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </Modal>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/feedback/feedback-dialog.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Button, Input, PHONE_QUERY, Select, Textarea } from \"../components/ui\";\nimport { Modal } from \"../components/modal\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport {\n  DEFAULT_ATTACHMENT_ACCEPT,\n  DEFAULT_MAX_ATTACHMENT_BYTES,\n  FeedbackAttachmentField,\n} from \"./feedback-attachment\";\n\nexport interface FeedbackCategoryOption {\n  value: string;\n  label: string;\n}\n\nexport interface FeedbackAttachmentLabels {\n  /** The heading over the field. Optional: a note editor puts the buttons\n   *  straight under its textarea, where a second heading is noise. */\n  attachment?: string;\n  attachmentAdd: string;\n  /** Label for the \"capture screenshot\" button. Optional — falls back to the provider's\n   *  `feedbackAttachment.attachmentCapture`, then English. */\n  attachmentCapture?: string;\n  /** The line under the attachment buttons saying a screenshot can be pasted\n   *  straight in. Optional — falls back to the provider's `feedbackAttachment`, then English. */\n  attachmentPaste?: string;\n  attachmentRemove: string;\n}\n\nexport interface FeedbackDialogLabels extends FeedbackAttachmentLabels {\n  title: string;\n  category: string;\n  subject: string;\n  body: string;\n  attachment: string;\n  submitHint: string;\n  cancel: string;\n  save: string;\n}\n\n/**\n * The dialog's own strings — the `feedbackDialog` namespace of `<UiKitProvider\n * labels>` (0.12.0). The attachment keys are not repeated here: they are the\n * `feedbackAttachment` namespace's, which the field inside already reads.\n *\n * Before, every key was required at the call site, so each app restated ten strings\n * wherever it mounted the dialog (kastlan feedback-button.tsx built the object inline).\n */\nexport interface FeedbackDialogTextLabels {\n  title: string;\n  category: string;\n  subject: string;\n  body: string;\n  /** The heading over the attachment buttons. */\n  attachment: string;\n  /** The line beside the buttons naming the shortcut. */\n  submitHint: string;\n  cancel: string;\n  save: string;\n}\n\nexport const DEFAULT_FEEDBACK_DIALOG_LABELS: FeedbackDialogTextLabels = {\n  title: \"Send feedback\",\n  category: \"Category\",\n  subject: \"Subject\",\n  body: \"What happened?\",\n  attachment: \"Screenshot\",\n  submitHint: \"Ctrl/⌘ + Enter to send\",\n  cancel: \"Cancel\",\n  save: \"Send\",\n};\n\nexport interface FeedbackSubmission {\n  title: string;\n  body: string;\n  category: string;\n  attachment: File | null;\n}\n\n/**\n * The generic feedback form dialog: category + subject + body + an optional image\n * attachment, with Ctrl/Cmd+Enter to submit. Domain-free — the app supplies the\n * category options, labels and an `onSubmit` that talks to its own backend, plus\n * an optional `contextSlot` for app-specific context (user, current URL, …).\n *\n * **A screenshot can be pasted straight in.** Ctrl/Cmd+V anywhere in the dialog\n * takes an image off the clipboard and makes it the attachment, through the same\n * validation and the same preview as the file picker. It is the gesture the two\n * ways in did not cover: `onCaptureScreenshot` snapshots the *whole* app view,\n * and the file picker needs a file — so somebody who wanted to show one panel,\n * or one region of one, had to save a crop to disk first and then find it again\n * (Steering Design feedback #39). The clipboard is where a region snip already\n * is on every platform.\n */\nexport function FeedbackDialog({\n  open,\n  onClose,\n  categories,\n  category,\n  onCategoryChange,\n  labels: labelsProp,\n  onSubmit,\n  submitting = false,\n  contextSlot,\n  attachmentAccept = DEFAULT_ATTACHMENT_ACCEPT,\n  maxAttachmentBytes = DEFAULT_MAX_ATTACHMENT_BYTES,\n  onAttachmentError,\n  onCaptureScreenshot,\n}: {\n  open: boolean;\n  onClose: () => void;\n  categories: FeedbackCategoryOption[];\n  category: string;\n  onCategoryChange: (value: string) => void;\n  /** Prop > `<UiKitProvider labels={{ feedbackDialog, feedbackAttachment }}>` >\n   *  English. Optional since 0.12.0; a whole `FeedbackDialogLabels` still fits. */\n  labels?: Partial<FeedbackDialogLabels>;\n  onSubmit: (data: FeedbackSubmission) => void | Promise<void>;\n  submitting?: boolean;\n  contextSlot?: ReactNode;\n  attachmentAccept?: string[];\n  maxAttachmentBytes?: number;\n  onAttachmentError?: (kind: \"type\" | \"size\") => void;\n  /**\n   * Optional: capture a screenshot of the underlying app view and return it as a\n   * File. When provided, a \"Capture screenshot\" button is shown next to \"Add\n   * attachment\"; the returned file is fed through the same validation + preview.\n   */\n  onCaptureScreenshot?: () => Promise<File | null>;\n}) {\n  const [title, setTitle] = useState(\"\");\n  const [body, setBody] = useState(\"\");\n  const [attachment, setAttachment] = useState<File | null>(null);\n  const isMobile = useMediaQuery(PHONE_QUERY, false);\n  const labels = useKitLabels(\"feedbackDialog\", DEFAULT_FEEDBACK_DIALOG_LABELS, labelsProp);\n  // The attachment field resolves its own keys from `feedbackAttachment`; it gets the\n  // prop's (so a caller's `attachmentAdd` still wins) plus the resolved heading.\n  const attachmentLabels = { ...labelsProp, attachment: labels.attachment };\n\n  // Reset the form whenever the dialog is (re)opened.\n  useEffect(() => {\n    if (open) {\n      setTitle(\"\");\n      setBody(\"\");\n      setAttachment(null);\n    }\n  }, [open]);\n\n  const canSubmit = !!title && !!body && !submitting;\n  const trySubmit = () => {\n    if (canSubmit) void onSubmit({ title, body, category, attachment });\n  };\n\n  if (!open) return null;\n\n  const categoryField = (\n    <Select label={labels.category} value={category} onChange={(e) => onCategoryChange(e.target.value)}>\n      {categories.map((c) => (\n        <option key={c.value} value={c.value}>\n          {c.label}\n        </option>\n      ))}\n    </Select>\n  );\n  // On a phone the subject leads as a heading rather than as the second of two\n  // identical boxes under a select (Keksdose feedback #179). `variant=\"display\"`\n  // is a no-op above the phone breakpoint, so the desktop dialog is unchanged.\n  const subjectField = (\n    <Input label={labels.subject} value={title} onChange={(e) => setTitle(e.target.value)} variant=\"display\" />\n  );\n  const bodyField = (\n    <Textarea rows={5} label={labels.body} value={body} onChange={(e) => setBody(e.target.value)} />\n  );\n  const attachmentField = (\n    <FeedbackAttachmentField\n      value={attachment}\n      onChange={setAttachment}\n      labels={attachmentLabels}\n      accept={attachmentAccept}\n      maxBytes={maxAttachmentBytes}\n      onError={onAttachmentError}\n      onCaptureScreenshot={onCaptureScreenshot}\n      // On `document`, not on the panel: the Modal focuses its own panel on open\n      // and traps Tab inside it, so while this dialog is up every paste in the\n      // page is meant for it — including the one made with nothing in\n      // particular focused, which never reaches a React `onPaste` on a child.\n      documentPaste={open}\n    />\n  );\n\n  return (\n    <Modal\n      onClose={onClose}\n      // The one dialog whose subject is the page behind it (Keksdose dev#460: \"Make\n      // the feedback dialog draggable so I can see behind it if it blocks\n      // something\") — you are describing what is under it while you type.\n      draggable\n      onKeyDown={(e) => {\n        if ((e.ctrlKey || e.metaKey) && e.key === \"Enter\") {\n          e.preventDefault();\n          trySubmit();\n        }\n      }}\n    >\n      {/* Also the drag handle: pressing anywhere on the panel's own chrome moves it,\n          and the heading is the strip a user reaches for. */}\n      <h2 className=\"mb-3 text-lg font-semibold\">{labels.title}</h2>\n      <div className=\"space-y-3\">\n        {isMobile ? (\n          // Phone shape, the same reasoning as the transaction editor's (#177):\n          // the desktop order is the DATA MODEL's order — category, then subject,\n          // then body — but nobody opens this dialog to pick a category. What they\n          // came to do is say the thing, so that leads; the classification and the\n          // evidence follow, a tier down.\n          <>\n            {subjectField}\n            {bodyField}\n            <div className=\"space-y-3 border-t border-[var(--border)] pt-3\">\n              {categoryField}\n              {attachmentField}\n              {contextSlot}\n            </div>\n          </>\n        ) : (\n          <>\n            {categoryField}\n            {subjectField}\n            {bodyField}\n            {attachmentField}\n            {contextSlot}\n          </>\n        )}\n        <div className=\"flex items-center justify-between gap-2\">\n          <div className=\"text-xs text-[var(--text-placeholder)]\">{labels.submitHint}</div>\n          <div className=\"flex gap-2\">\n            <Button variant=\"ghost\" onClick={onClose}>\n              {labels.cancel}\n            </Button>\n            <Button onClick={trySubmit} disabled={!canSubmit}>\n              {labels.save}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </Modal>\n  );\n}\n"],"mappings":"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","names":[]}