@marktiderman/genesis-ui 2.8.0 → 2.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/SKILL.md +75 -4
- package/dist/{AppShell-LXQykEqe.d.ts → AppShell-BVr4V0UK.d.ts} +1 -110
- package/dist/PageHeader-V9lVkZtF.d.ts +114 -0
- package/dist/{chunk-S7NXD37O.js → chunk-25XEXYGC.js} +4 -4
- package/dist/chunk-25XEXYGC.js.map +1 -0
- package/dist/chunk-C7PQ54JI.js +763 -0
- package/dist/chunk-C7PQ54JI.js.map +1 -0
- package/dist/chunk-DIV4BYXX.js +58 -0
- package/dist/chunk-DIV4BYXX.js.map +1 -0
- package/dist/chunk-I4NBE2KL.js +16 -0
- package/dist/chunk-I4NBE2KL.js.map +1 -0
- package/dist/{chunk-DWCAC2E7.js → chunk-RKPS7ERS.js} +5 -4
- package/dist/chunk-RKPS7ERS.js.map +1 -0
- package/dist/components/data/index.d.ts +42 -949
- package/dist/components/data/index.js +962 -777
- package/dist/components/data/index.js.map +1 -1
- package/dist/components/layout/index.d.ts +2 -1
- package/dist/components/layout/index.js +7 -7
- package/dist/components/patterns/index.js +2 -1
- package/dist/components/patterns/sortable-list.js +2 -1
- package/dist/hooks/index.d.ts +8 -1
- package/dist/hooks/index.js +4 -1
- package/dist/hooks/use-resource-page.d.ts +1 -1
- package/dist/hooks/use-resource-page.js +1 -1
- package/dist/hooks/use-resource-url-state.d.ts +68 -0
- package/dist/hooks/use-resource-url-state.js +3 -0
- package/dist/hooks/use-resource-url-state.js.map +1 -0
- package/dist/index.js +21 -20
- package/dist/{use-resource-page-D4byuwAs.d.ts → use-resource-page-DaJzuq3M.d.ts} +63 -2
- package/dist/use-resource-table-DCVf_lEG.d.ts +1113 -0
- package/package.json +4 -8
- package/dist/chunk-DWCAC2E7.js.map +0 -1
- package/dist/chunk-S7NXD37O.js.map +0 -1
|
@@ -1,287 +1,28 @@
|
|
|
1
|
+
export { B as BulkAction, C as ConfirmDeleteDialog, a as ConfirmDeleteDialogProps, D as DataBulkBar, b as DataFilterConfig, c as DataFilters, d as DataGrid, e as DataPageShell, f as DataPageShellProps, g as DetailPanel, h as DetailPanelProps, F as FilterCombobox, i as FilterOption, j as ResourceAction, k as ResourceCardActions, l as ResourceDeleteConfirmCopy, m as ResourceForm, n as ResourceFormProps, o as ResourcePage, p as ResourcePageProps, q as ResourcePageSlotMap, r as ResourcePageSlotProps, s as ResourcePageSlots, R as ResourceTableState, S as SavedViewItem, t as StatusChipOption, v as StatusChipsVariant, u as useResourceTable } from '../../use-resource-table-DCVf_lEG.js';
|
|
2
|
+
export { D as DataTable, c as DataTableColumn, e as DataTableProps, d as DataTableSort, L as LinkCell, R as ResourceActions, a as ResourceColumnDef, T as ThumbnailCell } from '../../use-resource-page-DaJzuq3M.js';
|
|
1
3
|
import * as React from 'react';
|
|
2
|
-
import { ReactNode
|
|
3
|
-
import { f as PageHeaderAction, c as PageHeaderOptions, P as PageHeader$1, A as AppShell$1 } from '../../AppShell-LXQykEqe.js';
|
|
4
|
-
export { a as AppShellOptions, b as AppShellProps, N as NavItem, d as PageHeaderProps, e as ParentNavigation } from '../../AppShell-LXQykEqe.js';
|
|
5
|
-
import { V as ViewMode } from '../../view-toggle-CahQ87PW.js';
|
|
6
|
-
export { a as ViewToggle } from '../../view-toggle-CahQ87PW.js';
|
|
7
|
-
import { LucideIcon } from 'lucide-react';
|
|
8
|
-
import { Density } from '../../hooks/use-view-settings.js';
|
|
9
|
-
import { R as ResourceActions, a as ResourceColumnDef, D as DataTable } from '../../use-resource-page-D4byuwAs.js';
|
|
10
|
-
export { c as DataTableColumn, d as DataTableProps, L as LinkCell, T as ThumbnailCell } from '../../use-resource-page-D4byuwAs.js';
|
|
4
|
+
import { ReactNode } from 'react';
|
|
11
5
|
export { EmptyState } from '../patterns/empty-state.js';
|
|
6
|
+
export { V as ViewMode, a as ViewToggle } from '../../view-toggle-CahQ87PW.js';
|
|
12
7
|
export { V as ViewSettings } from '../../view-settings-kHKCHMjj.js';
|
|
13
|
-
import {
|
|
14
|
-
|
|
15
|
-
|
|
8
|
+
import { LucideIcon } from 'lucide-react';
|
|
9
|
+
import { L as LinkComponent } from '../../navigation-Bha0R3Fu.js';
|
|
10
|
+
export { D as DefaultLink, G as GenesisLinkProps, I as IsPathActiveOptions, a as NavigateFn, N as NavigationNode, R as ResolvedNavigation, d as defaultNavigate, i as isPathActive, r as resolveNavigation } from '../../navigation-Bha0R3Fu.js';
|
|
11
|
+
export { S as SlotOverride, a as SlotPropsFor, b as Slots } from '../../slots-tR0wf89f.js';
|
|
12
|
+
export { ResponsiveViewMode, ViewModeDefault } from '../../hooks/use-view-preference.js';
|
|
13
|
+
import { BaseRecord, Identifier } from '@marktiderman/genesis-core/provider';
|
|
14
|
+
import { UndoableWrite, WizardStep } from '@marktiderman/genesis-core/hooks';
|
|
16
15
|
import { ResourceFormFieldDef } from '@marktiderman/genesis-core';
|
|
17
16
|
export { FieldType, ResourceFormFieldDef, SelectOption } from '@marktiderman/genesis-core';
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
export {
|
|
21
|
-
import {
|
|
22
|
-
export {
|
|
23
|
-
|
|
17
|
+
import { Control, UseFormReturn, FieldErrors } from 'react-hook-form';
|
|
18
|
+
import { A as AppShell$1 } from '../../AppShell-BVr4V0UK.js';
|
|
19
|
+
export { a as AppShellOptions, b as AppShellProps, N as NavItem, P as ParentNavigation } from '../../AppShell-BVr4V0UK.js';
|
|
20
|
+
import { P as PageHeader$1 } from '../../PageHeader-V9lVkZtF.js';
|
|
21
|
+
export { a as PageHeaderOptions, b as PageHeaderProps } from '../../PageHeader-V9lVkZtF.js';
|
|
22
|
+
export { Density } from '../../hooks/use-view-settings.js';
|
|
24
23
|
export { CommandPalette, CommandPaletteItem, CommandPaletteProps, useCommandPaletteHotkey } from '../ui/command-palette.js';
|
|
25
24
|
export { UseSavedViewsReturn, useSavedViews } from '../../hooks/use-saved-views.js';
|
|
26
|
-
|
|
27
|
-
interface DataPageShellProps {
|
|
28
|
-
/** Display title for the page */
|
|
29
|
-
title: string;
|
|
30
|
-
icon?: LucideIcon;
|
|
31
|
-
/** Singular entity name for generated text, e.g. "session" */
|
|
32
|
-
entityName?: string;
|
|
33
|
-
/** Subtitle text */
|
|
34
|
-
subtitle?: string;
|
|
35
|
-
createAction?: ReactNode;
|
|
36
|
-
/** Extra actions, rendered in the header's one overflow menu. */
|
|
37
|
-
secondaryActions?: PageHeaderAction[];
|
|
38
|
-
isLoading?: boolean;
|
|
39
|
-
isEmpty?: boolean;
|
|
40
|
-
emptyIcon?: LucideIcon;
|
|
41
|
-
emptyMessage?: string;
|
|
42
|
-
/**
|
|
43
|
-
* A sentence under the empty-state title — what this list is for, or what
|
|
44
|
-
* to do first. Forwarded to `EmptyState`'s `description`; hidden while
|
|
45
|
-
* filters are active, where "no results" is the whole story.
|
|
46
|
-
*/
|
|
47
|
-
emptyDescription?: string;
|
|
48
|
-
emptyAction?: ReactNode;
|
|
49
|
-
/** Error state */
|
|
50
|
-
hasError?: boolean;
|
|
51
|
-
errorMessage?: string;
|
|
52
|
-
onRetry?: () => void;
|
|
53
|
-
/** Number of filtered/visible items */
|
|
54
|
-
count?: number;
|
|
55
|
-
/** Total items before filtering */
|
|
56
|
-
totalCount?: number;
|
|
57
|
-
viewMode?: ViewMode;
|
|
58
|
-
onViewModeChange?: (mode: ViewMode) => void;
|
|
59
|
-
/** View settings */
|
|
60
|
-
pageSize?: number;
|
|
61
|
-
onPageSizeChange?: (size: number) => void;
|
|
62
|
-
density?: Density;
|
|
63
|
-
onDensityChange?: (density: Density) => void;
|
|
64
|
-
/**
|
|
65
|
-
* Slot for a stat cards row. Forwarded to the header, which renders it
|
|
66
|
-
* full width under the title block and above the filters — but only when
|
|
67
|
-
* `headerOptions.showStats` is on (default off), so a page that gains
|
|
68
|
-
* `stats` shows nothing new until the developer or user opts in.
|
|
69
|
-
*/
|
|
70
|
-
stats?: ReactNode;
|
|
71
|
-
/** Slot for filter bar */
|
|
72
|
-
filters?: ReactNode;
|
|
73
|
-
/** Whether filters are currently active */
|
|
74
|
-
hasActiveFilters?: boolean;
|
|
75
|
-
onClearFilters?: () => void;
|
|
76
|
-
/**
|
|
77
|
-
* When true, filters render inside PageHeader details (collapsed by default).
|
|
78
|
-
* Default false preserves always-visible filters on existing boards.
|
|
79
|
-
*/
|
|
80
|
-
filtersCollapsible?: boolean;
|
|
81
|
-
defaultFiltersOpen?: boolean;
|
|
82
|
-
filtersOpen?: boolean;
|
|
83
|
-
onFiltersOpenChange?: (open: boolean) => void;
|
|
84
|
-
filtersLabel?: string;
|
|
85
|
-
filtersHint?: ReactNode;
|
|
86
|
-
/**
|
|
87
|
-
* PageHeader chrome config — developer defaults; users can further
|
|
88
|
-
* customize via the in-header Header options menu.
|
|
89
|
-
*/
|
|
90
|
-
headerOptions?: PageHeaderOptions;
|
|
91
|
-
/** Persist user header-option overrides (localStorage) */
|
|
92
|
-
headerOptionsStorageKey?: string;
|
|
93
|
-
children: ReactNode;
|
|
94
|
-
/** Merged onto the root, not replacing its layout. */
|
|
95
|
-
className?: string;
|
|
96
|
-
/**
|
|
97
|
-
* Replace the header outright. It receives exactly the props
|
|
98
|
-
* `DataPageShell` would have given `PageHeader`, so the common case is a
|
|
99
|
-
* wrapper that renders `PageHeader` with one thing added — an overflow
|
|
100
|
-
* menu, a status strip, a second row — rather than a reimplementation.
|
|
101
|
-
*
|
|
102
|
-
* `null` ejects it: shell layout, states and filter row, no header.
|
|
103
|
-
*
|
|
104
|
-
* `"toolbar"` keeps the header's actions — count, view toggle, view
|
|
105
|
-
* settings, create, overflow menu — and drops the title block, for a list
|
|
106
|
-
* embedded in a tab or card whose page already has the heading. `title`
|
|
107
|
-
* still feeds the generated copy ("Failed to load …", the count's noun).
|
|
108
|
-
*/
|
|
109
|
-
header?: ComponentType<ComponentProps<typeof PageHeader$1>> | null | "toolbar";
|
|
110
|
-
}
|
|
111
|
-
declare function DataPageShell({ title, icon, entityName, subtitle, createAction, secondaryActions, isLoading, isEmpty, emptyIcon, emptyMessage, emptyDescription, emptyAction, hasError, errorMessage, onRetry, count, totalCount, viewMode, onViewModeChange, pageSize, onPageSizeChange, density, onDensityChange, stats, filters, hasActiveFilters, onClearFilters, filtersCollapsible, defaultFiltersOpen, filtersOpen, onFiltersOpenChange, filtersLabel, filtersHint, headerOptions, headerOptionsStorageKey, children, className, header, }: DataPageShellProps): React.JSX.Element;
|
|
112
|
-
|
|
113
|
-
interface FilterOption {
|
|
114
|
-
value: string;
|
|
115
|
-
label?: string;
|
|
116
|
-
count?: number;
|
|
117
|
-
}
|
|
118
|
-
interface FilterComboboxProps {
|
|
119
|
-
label: string;
|
|
120
|
-
icon: LucideIcon;
|
|
121
|
-
options: FilterOption[];
|
|
122
|
-
selected: string[];
|
|
123
|
-
onChange: (selected: string[]) => void;
|
|
124
|
-
searchPlaceholder?: string;
|
|
125
|
-
allLabel?: string;
|
|
126
|
-
/** Optional map of value -> display label */
|
|
127
|
-
labelMap?: Record<string, string>;
|
|
128
|
-
}
|
|
129
|
-
declare function FilterCombobox({ label, icon: Icon, options, selected, onChange, searchPlaceholder, allLabel, labelMap, }: FilterComboboxProps): React.JSX.Element;
|
|
130
|
-
|
|
131
|
-
interface DataFilterConfig {
|
|
132
|
-
key: string;
|
|
133
|
-
label: string;
|
|
134
|
-
icon: LucideIcon;
|
|
135
|
-
options: FilterOption[];
|
|
136
|
-
selected: string[];
|
|
137
|
-
onChange: (values: string[]) => void;
|
|
138
|
-
searchPlaceholder?: string;
|
|
139
|
-
allLabel?: string;
|
|
140
|
-
labelMap?: Record<string, string>;
|
|
141
|
-
}
|
|
142
|
-
interface SavedViewItem {
|
|
143
|
-
id: string;
|
|
144
|
-
name: string;
|
|
145
|
-
filters: Record<string, unknown>;
|
|
146
|
-
}
|
|
147
|
-
/**
|
|
148
|
-
* One status chip. A plain string is shorthand for `{ value, label: value }`.
|
|
149
|
-
* `count` renders as a muted number after the label.
|
|
150
|
-
*/
|
|
151
|
-
interface StatusChipOption {
|
|
152
|
-
value: string;
|
|
153
|
-
label?: string;
|
|
154
|
-
count?: number;
|
|
155
|
-
}
|
|
156
|
-
/** Rendering of the status chips — a row of pills, or one segmented strip. */
|
|
157
|
-
type StatusChipsVariant = "chips" | "tabs";
|
|
158
|
-
interface DataFiltersProps {
|
|
159
|
-
search: string;
|
|
160
|
-
onSearchChange: (value: string) => void;
|
|
161
|
-
searchPlaceholder?: string;
|
|
162
|
-
sort: string;
|
|
163
|
-
onSortChange: (sort: string) => void;
|
|
164
|
-
sortOptions: Array<{
|
|
165
|
-
value: string;
|
|
166
|
-
label: string;
|
|
167
|
-
}>;
|
|
168
|
-
filters?: DataFilterConfig[];
|
|
169
|
-
/** Status chip toggles */
|
|
170
|
-
statusChips?: {
|
|
171
|
-
options: Array<string | StatusChipOption>;
|
|
172
|
-
selected: string[];
|
|
173
|
-
onChange: (values: string[]) => void;
|
|
174
|
-
/**
|
|
175
|
-
* `"chips"` (default) renders pills inside the filter row. `"tabs"`
|
|
176
|
-
* renders a segmented strip on its own row above the search row —
|
|
177
|
-
* the same border-and-fill look as `ViewToggle`. Selection is
|
|
178
|
-
* multi-select in both.
|
|
179
|
-
*/
|
|
180
|
-
variant?: StatusChipsVariant;
|
|
181
|
-
};
|
|
182
|
-
/** Saved views */
|
|
183
|
-
savedViews?: SavedViewItem[];
|
|
184
|
-
onLoadView?: (filters: Record<string, unknown>) => void;
|
|
185
|
-
onSaveView?: (name: string) => void;
|
|
186
|
-
onDeleteView?: (id: string) => void;
|
|
187
|
-
canSaveViews?: boolean;
|
|
188
|
-
/** Called after a view is saved successfully */
|
|
189
|
-
onViewSaved?: (name: string) => void;
|
|
190
|
-
/** Called when an error occurs */
|
|
191
|
-
onError?: (message: string) => void;
|
|
192
|
-
/** Called when "Clear all" is clicked */
|
|
193
|
-
onClearAll?: () => void;
|
|
194
|
-
/** Expose the search input ref for keyboard nav "/" shortcut */
|
|
195
|
-
searchInputRef?: React.RefObject<HTMLInputElement | null>;
|
|
196
|
-
/** Show the search box. Default `true`; turn off when the data source can't search. */
|
|
197
|
-
showSearch?: boolean;
|
|
198
|
-
/** Show the sort select. Default `true`; turn off when the data source can't sort. */
|
|
199
|
-
showSort?: boolean;
|
|
200
|
-
}
|
|
201
|
-
declare function DataFilters({ search, onSearchChange, searchPlaceholder, sort, onSortChange, sortOptions, filters, statusChips, savedViews, onLoadView, onSaveView, onDeleteView, canSaveViews, onViewSaved, onClearAll, searchInputRef, showSearch, showSort, }: DataFiltersProps): React.JSX.Element;
|
|
202
|
-
|
|
203
|
-
interface DataGridProps<T> {
|
|
204
|
-
items: T[];
|
|
205
|
-
viewMode: ViewMode;
|
|
206
|
-
/** Items per infinite scroll batch (grid only). Default 48 */
|
|
207
|
-
batchSize?: number;
|
|
208
|
-
/** Tailwind grid column classes */
|
|
209
|
-
gridCols?: string;
|
|
210
|
-
/** Render a single card in grid mode */
|
|
211
|
-
renderCard: (item: T, index: number) => ReactNode;
|
|
212
|
-
/** Render the table view (receives currently visible items) */
|
|
213
|
-
renderTable?: (items: T[]) => ReactNode;
|
|
214
|
-
/** Render a compact list row */
|
|
215
|
-
renderListItem?: (item: T, index: number) => ReactNode;
|
|
216
|
-
/** Animate cards with staggered fade-in. Default true */
|
|
217
|
-
staggerAnimation?: boolean;
|
|
218
|
-
/** Unique key extractor. Defaults to (item as any).id */
|
|
219
|
-
getKey?: (item: T) => string;
|
|
220
|
-
/** Keyboard navigation: focused item index (-1 = none) */
|
|
221
|
-
focusedIndex?: number;
|
|
222
|
-
/** Keyboard navigation: container ref for scroll management */
|
|
223
|
-
keyboardContainerRef?: RefObject<HTMLDivElement | null>;
|
|
224
|
-
/**
|
|
225
|
-
* Open an item. Makes each card (and list row) one keyboard-reachable
|
|
226
|
-
* button: click, Enter or Space activates it, with a focus ring. Clicks on
|
|
227
|
-
* a link, button or input inside the card are left to that control, so a
|
|
228
|
-
* card can still carry its own actions. Use this instead of wrapping cards
|
|
229
|
-
* in a hand-rolled `div role="button"`.
|
|
230
|
-
*/
|
|
231
|
-
onItemClick?: ((item: T) => void) | undefined;
|
|
232
|
-
/** Accessible name for an activatable item, e.g. `Open ${item.name}`. Used with `onItemClick`. */
|
|
233
|
-
getItemLabel?: ((item: T) => string) | undefined;
|
|
234
|
-
}
|
|
235
|
-
declare function DataGrid<T>({ items, viewMode, batchSize, gridCols, renderCard, renderTable, renderListItem, staggerAnimation, getKey, focusedIndex, keyboardContainerRef, onItemClick, getItemLabel, }: DataGridProps<T>): React.JSX.Element;
|
|
236
|
-
|
|
237
|
-
/**
|
|
238
|
-
* One button in the bulk action bar.
|
|
239
|
-
*
|
|
240
|
-
* @stability Stable
|
|
241
|
-
*/
|
|
242
|
-
interface BulkAction {
|
|
243
|
-
label: string;
|
|
244
|
-
icon: LucideIcon;
|
|
245
|
-
onClick: () => void;
|
|
246
|
-
variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
|
|
247
|
-
/**
|
|
248
|
-
* Makes this action inert: it renders with the Button primitive's native
|
|
249
|
-
* `disabled` attribute, so it is neither clickable nor focusable, and it
|
|
250
|
-
* picks up the disabled styling.
|
|
251
|
-
*
|
|
252
|
-
* The case this exists for is an in-flight bulk mutation. A consumer that
|
|
253
|
-
* fires a move/duplicate/delete over the selected ids wants every bulk
|
|
254
|
-
* action dead until it settles, so a user cannot double-fire a destructive
|
|
255
|
-
* operation on the same selection. Without this field the only guard
|
|
256
|
-
* available is an early return inside `onClick` — which does stop the
|
|
257
|
-
* second call, but leaves the button looking live, so the affordance lies
|
|
258
|
-
* about what pressing it will do. Concretely, that is what blocks a real
|
|
259
|
-
* consumer's hand-rolled bulk bar from migrating to `DataBulkBar`: it
|
|
260
|
-
* would have to give up its double-submit guard to do so.
|
|
261
|
-
*
|
|
262
|
-
* Optional and defaulted off — omitting it behaves exactly as before.
|
|
263
|
-
*/
|
|
264
|
-
disabled?: boolean;
|
|
265
|
-
/**
|
|
266
|
-
* `data-testid` on the rendered button.
|
|
267
|
-
*
|
|
268
|
-
* Without it, a consumer migrating a hand-rolled bulk bar to `DataBulkBar`
|
|
269
|
-
* loses every selector its e2e suite uses to drive one — which is a real
|
|
270
|
-
* reason not to migrate, and the kind of small missing affordance that
|
|
271
|
-
* keeps a parallel implementation alive.
|
|
272
|
-
*/
|
|
273
|
-
testId?: string;
|
|
274
|
-
}
|
|
275
|
-
interface DataBulkBarProps {
|
|
276
|
-
selected: Set<string>;
|
|
277
|
-
totalCount: number;
|
|
278
|
-
onToggleAll: () => void;
|
|
279
|
-
onClearSelection: () => void;
|
|
280
|
-
actions: BulkAction[];
|
|
281
|
-
/** Merged onto the bar, not replacing its positioning. */
|
|
282
|
-
className?: string;
|
|
283
|
-
}
|
|
284
|
-
declare function DataBulkBar({ selected, totalCount, onToggleAll, onClearSelection, actions, className, }: DataBulkBarProps): React.JSX.Element | null;
|
|
25
|
+
import '../../hooks/use-resource-url-state.js';
|
|
285
26
|
|
|
286
27
|
/**
|
|
287
28
|
* DateCell -- shows relative date by default, formatted date otherwise.
|
|
@@ -348,12 +89,16 @@ interface KanbanBoardProps<T> {
|
|
|
348
89
|
/** A stable key per item. Without one, cards are keyed by position. */
|
|
349
90
|
getKey?: (item: T) => string;
|
|
350
91
|
/**
|
|
351
|
-
* Move an item to another column. When set
|
|
352
|
-
*
|
|
353
|
-
*
|
|
92
|
+
* Move an item to another column. When set (with `getKey`), every card can
|
|
93
|
+
* be moved four ways: dragged with a mouse; dragged by its handle on a
|
|
94
|
+
* touch screen; picked up from the keyboard with its handle (Space, then
|
|
95
|
+
* ←/→ to choose a column, Space to drop, Escape to cancel; Alt+←/→ moves
|
|
96
|
+
* straight away); or from its "Move to…" menu. A finished move is
|
|
97
|
+
* announced to screen readers. A rejected promise leaves the card where it
|
|
98
|
+
* was and announces that the move failed.
|
|
354
99
|
*/
|
|
355
100
|
onMoveItem?: (item: T, toColumn: string) => void | Promise<void>;
|
|
356
|
-
/** A name for an item, for
|
|
101
|
+
/** A name for an item, for its handle, menu and announcements ("Move Ana Ruiz"). */
|
|
357
102
|
getItemLabel?: (item: T) => string;
|
|
358
103
|
/** Under a column's cards, e.g. a "Load more" button. */
|
|
359
104
|
renderColumnFooter?: (column: KanbanColumn<T>) => ReactNode;
|
|
@@ -361,10 +106,12 @@ interface KanbanBoardProps<T> {
|
|
|
361
106
|
/**
|
|
362
107
|
* Columns of cards, optionally movable between columns.
|
|
363
108
|
*
|
|
364
|
-
*
|
|
365
|
-
*
|
|
366
|
-
* "Move to…" menu
|
|
367
|
-
*
|
|
109
|
+
* Moving uses the same engine as SortableList: native drag and drop for the
|
|
110
|
+
* mouse, pointer events on the handle for touch, a keyboard pick-up on the
|
|
111
|
+
* handle, and a "Move to…" menu, with every finished move announced in a
|
|
112
|
+
* polite live region. Radix has no drag and drop and native drag and drop
|
|
113
|
+
* can't be done from a keyboard or a touch screen (docs/FRAMEWORK.md rule 3),
|
|
114
|
+
* so dragging is never the only way to move a card.
|
|
368
115
|
*/
|
|
369
116
|
declare function KanbanBoard<T>({ columns, renderCard, emptyMessage, className, getKey, onMoveItem, getItemLabel, renderColumnFooter, }: KanbanBoardProps<T>): React.JSX.Element;
|
|
370
117
|
|
|
@@ -376,669 +123,6 @@ interface DataListProps<T> {
|
|
|
376
123
|
}
|
|
377
124
|
declare function DataList<T>({ items, renderItem, emptyMessage, className, }: DataListProps<T>): React.JSX.Element;
|
|
378
125
|
|
|
379
|
-
/**
|
|
380
|
-
* Props for {@link DetailPanel} — a shell-agnostic record detail view.
|
|
381
|
-
* `layout` selects only the surrounding shell (inline / dialog / sheet);
|
|
382
|
-
* the header and content below it render identically across all three.
|
|
383
|
-
*
|
|
384
|
-
* @stability Beta
|
|
385
|
-
*/
|
|
386
|
-
interface DetailPanelProps<T> {
|
|
387
|
-
/** The record to display */
|
|
388
|
-
item: T | null;
|
|
389
|
-
/** Whether panel is visible */
|
|
390
|
-
open: boolean;
|
|
391
|
-
/** Close handler */
|
|
392
|
-
onClose: () => void;
|
|
393
|
-
/** Header title */
|
|
394
|
-
title?: string;
|
|
395
|
-
/** Header subtitle */
|
|
396
|
-
subtitle?: string;
|
|
397
|
-
/** Shows edit button if provided */
|
|
398
|
-
onEdit?: (item: T) => void;
|
|
399
|
-
/** Shows delete button if provided */
|
|
400
|
-
onDelete?: (item: T) => void;
|
|
401
|
-
/** Custom content renderer */
|
|
402
|
-
children?: (item: T) => ReactNode;
|
|
403
|
-
/** Field definitions for auto-rendering */
|
|
404
|
-
fields?: Array<{
|
|
405
|
-
key: string;
|
|
406
|
-
label: string;
|
|
407
|
-
render?: (value: unknown, item: T) => ReactNode;
|
|
408
|
-
}>;
|
|
409
|
-
/**
|
|
410
|
-
* Panel width. For `"sheet"` / `"inline"` this is a fixed pixel width
|
|
411
|
-
* (matching this component's original, pre-`layout` sizing exactly). For
|
|
412
|
-
* `"dialog"` it maps to Tailwind's modal max-width scale instead, since a
|
|
413
|
-
* centered modal has a different sizing idiom than an edge-anchored panel.
|
|
414
|
-
*/
|
|
415
|
-
width?: "sm" | "md" | "lg";
|
|
416
|
-
/**
|
|
417
|
-
* Rendering shell for the header + content below.
|
|
418
|
-
* - `"sheet"` (default): fixed, right-anchored slide-in panel, composed
|
|
419
|
-
* from the shared `Sheet` primitive. Matches this component's original
|
|
420
|
-
* (pre-`layout`-prop) behavior — existing consumers that don't pass
|
|
421
|
-
* `layout` see no change, other than an overlay now present at all
|
|
422
|
-
* breakpoints (previously mobile-only) since it's a real `Sheet`.
|
|
423
|
-
* - `"dialog"`: centered modal overlay, composed from the shared `Dialog`
|
|
424
|
-
* primitive.
|
|
425
|
-
* - `"inline"`: plain in-flow panel — no overlay, backdrop, or fixed
|
|
426
|
-
* positioning — for master-detail / split-pane layouts.
|
|
427
|
-
*/
|
|
428
|
-
layout?: "inline" | "dialog" | "sheet";
|
|
429
|
-
}
|
|
430
|
-
declare function DetailPanel<T extends Record<string, unknown>>({ item, open, onClose, title, subtitle, onEdit, onDelete, children, fields, width, layout, }: DetailPanelProps<T>): React.JSX.Element | null;
|
|
431
|
-
|
|
432
|
-
interface ResourceFormProps {
|
|
433
|
-
resource: string;
|
|
434
|
-
action: "create" | "edit";
|
|
435
|
-
item?: Record<string, unknown>;
|
|
436
|
-
open: boolean;
|
|
437
|
-
onOpenChange: (open: boolean) => void;
|
|
438
|
-
title?: string;
|
|
439
|
-
fields?: ResourceFormFieldDef[];
|
|
440
|
-
/** Full dataset used to auto-detect select fields from unique values. */
|
|
441
|
-
listData?: Record<string, unknown>[];
|
|
442
|
-
renderForm?: (form: UseFormReturn<Record<string, unknown>>, fields: ResourceFormFieldDef[]) => ReactNode;
|
|
443
|
-
onSuccess?: (data: Record<string, unknown>) => void;
|
|
444
|
-
onError?: (error: Error) => void;
|
|
445
|
-
/** Layout mode for the form container. Default "dialog". */
|
|
446
|
-
layout?: "dialog" | "sheet" | "page";
|
|
447
|
-
/** Form presentation mode. Default "standard". */
|
|
448
|
-
mode?: "standard" | "wizard";
|
|
449
|
-
/** Wizard step definitions. Required when mode is "wizard". */
|
|
450
|
-
steps?: WizardStep[];
|
|
451
|
-
/** Number of columns for the form layout. Default 1. */
|
|
452
|
-
columns?: 1 | 2;
|
|
453
|
-
/**
|
|
454
|
-
* Pre-fill a create form from the page URL: a query param named like a
|
|
455
|
-
* field (`?status=draft`) becomes that field's starting value. Default
|
|
456
|
-
* `true`, as before. Pass `false` when the page's query string means
|
|
457
|
-
* something else — a list's own filters, say — and must not leak into the
|
|
458
|
-
* new record.
|
|
459
|
-
*/
|
|
460
|
-
prefillFromUrl?: boolean;
|
|
461
|
-
/**
|
|
462
|
-
* Generate a placeholder ("Enter name") for fields whose `placeholder` is
|
|
463
|
-
* unset. Default `false`: a placeholder that restates the label adds noise,
|
|
464
|
-
* and reads as a filled value at a glance. A field's own `placeholder`
|
|
465
|
-
* always shows. (Select fields keep their "Select…" prompt either way.)
|
|
466
|
-
*/
|
|
467
|
-
autoPlaceholder?: boolean;
|
|
468
|
-
}
|
|
469
|
-
declare function ResourceForm(props: ResourceFormProps): React.JSX.Element | null;
|
|
470
|
-
|
|
471
|
-
/**
|
|
472
|
-
* Props for {@link ConfirmDeleteDialog}.
|
|
473
|
-
*
|
|
474
|
-
* @stability Beta
|
|
475
|
-
*/
|
|
476
|
-
interface ConfirmDeleteDialogProps {
|
|
477
|
-
open: boolean;
|
|
478
|
-
onOpenChange: (open: boolean) => void;
|
|
479
|
-
/**
|
|
480
|
-
* Runs the delete. The dialog stays open while it is pending, closes when
|
|
481
|
-
* it resolves, and shows the error's message (staying open, so the user
|
|
482
|
-
* can retry or cancel) when it rejects.
|
|
483
|
-
*/
|
|
484
|
-
onConfirm: () => void | Promise<void>;
|
|
485
|
-
/** Default "Delete this record?". */
|
|
486
|
-
title?: string;
|
|
487
|
-
/** Default "This can't be undone." */
|
|
488
|
-
description?: ReactNode;
|
|
489
|
-
/** Default "Delete". */
|
|
490
|
-
confirmLabel?: string;
|
|
491
|
-
/** Default "Cancel". */
|
|
492
|
-
cancelLabel?: string;
|
|
493
|
-
}
|
|
494
|
-
/**
|
|
495
|
-
* The confirm step in front of a destructive delete: an `AlertDialog` (Radix
|
|
496
|
-
* owns focus trap, Escape and focus return), a pending state, and the
|
|
497
|
-
* failure shown in place rather than swallowed. `ResourcePage` renders it
|
|
498
|
-
* for `allowDelete` / `confirmDelete`, as its `deleteDialog` slot.
|
|
499
|
-
*
|
|
500
|
-
* @stability Beta
|
|
501
|
-
*/
|
|
502
|
-
declare function ConfirmDeleteDialog({ open, onOpenChange, onConfirm, title, description, confirmLabel, cancelLabel, }: ConfirmDeleteDialogProps): React.JSX.Element;
|
|
503
|
-
|
|
504
|
-
/**
|
|
505
|
-
* Row-bound actions handed to `renderCard`, on top of the resource-wide
|
|
506
|
-
* `ResourceActions`. `open` is per-row, which is why it lives here rather
|
|
507
|
-
* than on `ResourceActions` — that object is built once and shared by every
|
|
508
|
-
* row and column, so it cannot carry a row-specific callback.
|
|
509
|
-
*
|
|
510
|
-
* @stability Beta
|
|
511
|
-
*/
|
|
512
|
-
interface ResourceCardActions<T> extends ResourceActions<T> {
|
|
513
|
-
/**
|
|
514
|
-
* Activate this row — opens the configured detail panel / modal / route,
|
|
515
|
-
* exactly as clicking the built-in card does. Wire it to your card's
|
|
516
|
-
* `onClick` (and call `stopPropagation` on any nested control that should
|
|
517
|
-
* not also activate the row).
|
|
518
|
-
*/
|
|
519
|
-
open: () => void;
|
|
520
|
-
}
|
|
521
|
-
/**
|
|
522
|
-
* Config-driven resource page: wires data-fetching (or a pre-fetched `data`
|
|
523
|
-
* array), search/filter/sort, table/grid/list views, and a detail
|
|
524
|
-
* panel/modal/route around a `DataProvider` resource — the CRUD page most
|
|
525
|
-
* apps hand-roll, expressed as one component tree. `renderCard` lets a
|
|
526
|
-
* consumer fully own item presentation while ResourcePage keeps handling
|
|
527
|
-
* data-fetching, filtering, and layout; see also the built-in
|
|
528
|
-
* `useKeyboardNavigation` wiring (`keyboardNavigation` prop) and `gridCols`.
|
|
529
|
-
*
|
|
530
|
-
* Three levels of control, and each option is available at all three:
|
|
531
|
-
*
|
|
532
|
-
* 1. **The primitive offers it** — table / grid / list views, search, sort,
|
|
533
|
-
* status chips, column visibility and resizing, density, page size,
|
|
534
|
-
* detail panel / modal / route, built-in create and edit forms.
|
|
535
|
-
* 2. **The instance turns it on or off** — every one of those is a prop, so
|
|
536
|
-
* a given page decides which affordances it offers at all.
|
|
537
|
-
* 3. **The end user picks their own, and it sticks** — for the options left
|
|
538
|
-
* on at level 2, the user's choice persists to their own storage:
|
|
539
|
-
* `viewSettingsKey` for page size and density, `columnVisibilityKey` and
|
|
540
|
-
* `resizeKey` for column layout, `savedViews` (pair with `useSavedViews`)
|
|
541
|
-
* for named filter sets. Persistence needs a key; without one the choice
|
|
542
|
-
* lasts only for the session.
|
|
543
|
-
*
|
|
544
|
-
* A server-paginated list drives the same component through the controlled
|
|
545
|
-
* props (`page`, `perPage`, `onPageChange`, `onSortChange`, `onSearchChange`
|
|
546
|
-
* and friends) — supplying any of them stops ResourcePage from searching,
|
|
547
|
-
* sorting or paging the `data` a second time. See that block in
|
|
548
|
-
* {@link ResourcePageProps}.
|
|
549
|
-
*
|
|
550
|
-
* @stability Beta
|
|
551
|
-
*/
|
|
552
|
-
/**
|
|
553
|
-
* Every interior part `ResourcePage` composes, with the props it composes it
|
|
554
|
-
* with. Each key is a slot: replace it via `slots`, feed it more props via
|
|
555
|
-
* `slotProps`, or eject it with `null`.
|
|
556
|
-
*
|
|
557
|
-
* The map is the contract. A part that is not named here cannot be reached,
|
|
558
|
-
* so adding a part to the render tree means adding it here in the same
|
|
559
|
-
* change — otherwise the next surface that needs it forks the whole page.
|
|
560
|
-
*/
|
|
561
|
-
type ResourcePageSlotMap<T extends Record<string, unknown> = Record<string, unknown>> = {
|
|
562
|
-
/** The page shell: header, count pill, loading / empty / error states. */
|
|
563
|
-
shell: ComponentProps<typeof DataPageShell>;
|
|
564
|
-
/** The filter row — search, sort, facets, saved views. */
|
|
565
|
-
filters: ComponentProps<typeof DataFilters>;
|
|
566
|
-
/** The selection bar. Ejecting it leaves selection working, just unshown. */
|
|
567
|
-
bulkBar: ComponentProps<typeof DataBulkBar>;
|
|
568
|
-
/** The card/table switch. */
|
|
569
|
-
grid: ComponentProps<typeof DataGrid<T>>;
|
|
570
|
-
/** The table inside the grid. `renderTable` stays the terser way to swap. */
|
|
571
|
-
table: ComponentProps<typeof DataTable<T>>;
|
|
572
|
-
/** The detail peek. */
|
|
573
|
-
detail: ComponentProps<typeof DetailPanel<T>>;
|
|
574
|
-
/** The create / edit form. */
|
|
575
|
-
form: ComponentProps<typeof ResourceForm>;
|
|
576
|
-
/**
|
|
577
|
-
* The confirm step in front of a delete. Rendered only when a delete is
|
|
578
|
-
* confirmed (`allowDelete`, or `onDelete` with `confirmDelete`).
|
|
579
|
-
*/
|
|
580
|
-
deleteDialog: ComponentProps<typeof ConfirmDeleteDialog>;
|
|
581
|
-
};
|
|
582
|
-
/**
|
|
583
|
-
* `slots` for {@link ResourcePage}, with one asymmetry the map cannot express:
|
|
584
|
-
* every part may be ejected with `null` EXCEPT `shell`.
|
|
585
|
-
*
|
|
586
|
-
* The shell is not an interior part, it is the page — `Shell` is what the
|
|
587
|
-
* render returns, so ejecting it does not remove a piece, it removes the
|
|
588
|
-
* component (`const Shell = slots?.shell ?? DataPageShell` would become
|
|
589
|
-
* `null`, and React throws on the element). A caller who wants no shell wants
|
|
590
|
-
* rung 3 of the ladder, not a `null` here. Replacing it stays supported, which
|
|
591
|
-
* is the way to wrap it and change one thing.
|
|
592
|
-
*/
|
|
593
|
-
type ResourcePageSlots<T extends Record<string, unknown> = Record<string, unknown>> = Omit<Slots<ResourcePageSlotMap<T>>, "shell"> & {
|
|
594
|
-
shell?: ComponentType<ComponentProps<typeof DataPageShell>>;
|
|
595
|
-
};
|
|
596
|
-
/**
|
|
597
|
-
* `slotProps` for {@link ResourcePage}: extra props merged into a part you
|
|
598
|
-
* are keeping, winning over ResourcePage's own.
|
|
599
|
-
*/
|
|
600
|
-
type ResourcePageSlotProps<T extends Record<string, unknown> = Record<string, unknown>> = SlotPropsFor<ResourcePageSlotMap<T>>;
|
|
601
|
-
/**
|
|
602
|
-
* Copy for the built-in delete confirmation. Every field is optional;
|
|
603
|
-
* omitted ones fall back to `ConfirmDeleteDialog`'s defaults.
|
|
604
|
-
*
|
|
605
|
-
* @stability Beta
|
|
606
|
-
*/
|
|
607
|
-
interface ResourceDeleteConfirmCopy<T> {
|
|
608
|
-
/** Default "Delete this record?". A function receives the row. */
|
|
609
|
-
title?: string | ((item: T) => string);
|
|
610
|
-
/** Default "This can't be undone." */
|
|
611
|
-
description?: ReactNode | ((item: T) => ReactNode);
|
|
612
|
-
/** Default "Delete". */
|
|
613
|
-
confirmLabel?: string;
|
|
614
|
-
/** Default "Cancel". */
|
|
615
|
-
cancelLabel?: string;
|
|
616
|
-
}
|
|
617
|
-
interface ResourcePageProps<T extends Record<string, unknown> = Record<string, unknown>> {
|
|
618
|
-
/** Client-side mode: resource name passed to useResource / DataProvider. */
|
|
619
|
-
resource?: string;
|
|
620
|
-
/** Server-data mode: pre-fetched data array. */
|
|
621
|
-
data?: T[];
|
|
622
|
-
/**
|
|
623
|
-
* Server-data mode: total record count (before client-side filtering).
|
|
624
|
-
*
|
|
625
|
-
* Required whenever `onPageChange` is supplied. It cannot be derived from
|
|
626
|
-
* `data`, which holds only the current page. Omitted, `displayTotal` falls
|
|
627
|
-
* back to `0`, so the range span reads "No records" and `Next` stays
|
|
628
|
-
* disabled while the rows render directly below it. Rather than show a
|
|
629
|
-
* pager that contradicts the list, the component refuses to render the
|
|
630
|
-
* pager and shows an error instead. See {@link perPage} and
|
|
631
|
-
* {@link onPageChange}.
|
|
632
|
-
*/
|
|
633
|
-
total?: number;
|
|
634
|
-
/**
|
|
635
|
-
* How `resource` mode reaches rows past the first page. Ignored with
|
|
636
|
-
* `data` (server-data mode pages through the controlled props instead).
|
|
637
|
-
*
|
|
638
|
-
* - `"client"` (default): fetch up to `clientRowLimit` rows in one request
|
|
639
|
-
* and search, sort, filter and page them in the browser — header-click
|
|
640
|
-
* sort and instant search keep working. If the resource holds more rows
|
|
641
|
-
* than that, a notice under the list says how many are shown (and a
|
|
642
|
-
* console warning names this prop), rather than silently truncating.
|
|
643
|
-
* - `"server"`: fetch one page at a time. The pager under the list drives
|
|
644
|
-
* `useResource`'s page, the header's page size its `perPage`, and
|
|
645
|
-
* search / sort / status chips become provider queries (search is
|
|
646
|
-
* debounced), and the current page stays on screen while the next one
|
|
647
|
-
* loads. Give `statusFilter` explicit `options` here — derived ones can
|
|
648
|
-
* only see the current page's values. Search needs `searchFields` (or
|
|
649
|
-
* `resourceOptions.searchFields`) — the provider must be told which
|
|
650
|
-
* columns to match — so the search box is hidden without them. Table
|
|
651
|
-
* header sorting is withdrawn, as in server-data mode; the sort control
|
|
652
|
-
* in the filter row drives the query.
|
|
653
|
-
*/
|
|
654
|
-
pagination?: "client" | "server";
|
|
655
|
-
/**
|
|
656
|
-
* `pagination="client"` only: the most rows fetched. Default 1000. An
|
|
657
|
-
* explicit `resourceOptions.defaultPerPage` wins.
|
|
658
|
-
*/
|
|
659
|
-
clientRowLimit?: number;
|
|
660
|
-
title: string;
|
|
661
|
-
/** Page subtitle shown below the title. */
|
|
662
|
-
subtitle?: string;
|
|
663
|
-
icon?: LucideIcon;
|
|
664
|
-
columns?: Array<string | ResourceColumnDef<T>>;
|
|
665
|
-
/**
|
|
666
|
-
* A row's identity, for React keys and bulk selection. Defaults to
|
|
667
|
-
* `String(item.id)`. Supply it for rows keyed some other way — a composite
|
|
668
|
-
* key (`encodeRecordKey` from `@marktiderman/genesis-core/schema`), or a
|
|
669
|
-
* table whose key column isn't called `id`. Detail `route` mode still
|
|
670
|
-
* navigates by `item.id`.
|
|
671
|
-
*/
|
|
672
|
-
getKey?: (item: T) => string;
|
|
673
|
-
/** How row-click detail is shown. Default "panel". */
|
|
674
|
-
detail?: "panel" | "modal" | "route" | "none";
|
|
675
|
-
detailWidth?: "sm" | "md" | "lg";
|
|
676
|
-
titleField?: string;
|
|
677
|
-
subtitleField?: string;
|
|
678
|
-
/**
|
|
679
|
-
* Name a record from more than one field (`${first} ${last}`). Wins over
|
|
680
|
-
* `titleField` for the detail title and the card's accessible name.
|
|
681
|
-
*/
|
|
682
|
-
getTitle?: (item: T) => string;
|
|
683
|
-
/**
|
|
684
|
-
* The detail peek's subtitle, computed from the row ("2 staff", "Due
|
|
685
|
-
* Friday"). Wins over `subtitleField`, which can only show one column
|
|
686
|
-
* verbatim.
|
|
687
|
-
*/
|
|
688
|
-
getSubtitle?: (item: T) => string | undefined;
|
|
689
|
-
renderDetail?: (item: T) => ReactNode;
|
|
690
|
-
detailFields?: Array<{
|
|
691
|
-
key: string;
|
|
692
|
-
label: string;
|
|
693
|
-
render?: (value: unknown, item: T) => ReactNode;
|
|
694
|
-
}>;
|
|
695
|
-
/**
|
|
696
|
-
* Adds a status-chip filter. There is no dedicated status-change
|
|
697
|
-
* callback: chip clicks update the same filter state that already
|
|
698
|
-
* reports through `onFiltersChange`, whether or not the page is in
|
|
699
|
-
* server-controlled mode. A caller combining `statusFilter` with server
|
|
700
|
-
* pagination (`onPageChange` et al.) must supply `onFiltersChange` — see
|
|
701
|
-
* that prop — or status changes will update the chip UI without ever
|
|
702
|
-
* reaching the server. In server-controlled mode a status change also
|
|
703
|
-
* resets to page 1 via `onPageChange(1)` — see {@link onPageChange}.
|
|
704
|
-
*/
|
|
705
|
-
statusFilter?: string | {
|
|
706
|
-
field: string;
|
|
707
|
-
options?: string[];
|
|
708
|
-
};
|
|
709
|
-
searchFields?: string[];
|
|
710
|
-
searchPlaceholder?: string;
|
|
711
|
-
initialFilters?: FilterParam[];
|
|
712
|
-
onFiltersChange?: (filters: FilterParam[]) => void;
|
|
713
|
-
/**
|
|
714
|
-
* Extra multi-select filter comboboxes, handed straight to `DataFilters`
|
|
715
|
-
* and rendered beside the status chips. Each config owns its own
|
|
716
|
-
* `selected` array and `onChange` — ResourcePage never reads or writes
|
|
717
|
-
* them, because it cannot know what a caller's "Grade" or "Subject"
|
|
718
|
-
* combobox means against the row shape. That is deliberate rather than a
|
|
719
|
-
* gap: the built-in machinery (`searchFields`, `statusFilter`) covers the
|
|
720
|
-
* two shapes it *can* interpret, and this prop covers everything else by
|
|
721
|
-
* getting out of the way.
|
|
722
|
-
*
|
|
723
|
-
* Two consequences of that hands-off stance, stated rather than hidden:
|
|
724
|
-
* - These selections are invisible to `page.hasActiveFilters`, so the
|
|
725
|
-
* header's "Clear filters" affordance does not appear for them alone,
|
|
726
|
-
* and `onClearFilters` does not reset them. DataFilters' own "Clear all"
|
|
727
|
-
* does call each config's `onChange([])`, so wire real clearing there.
|
|
728
|
-
* - In client-side mode the rows are NOT re-filtered by these selections.
|
|
729
|
-
* A caller using them is expected to filter its own `data` (or ask the
|
|
730
|
-
* server to), exactly as it already does in server-controlled mode.
|
|
731
|
-
*/
|
|
732
|
-
filters?: DataFilterConfig[];
|
|
733
|
-
/** Current page, 1-based. Server-controlled mode only. */
|
|
734
|
-
page?: number;
|
|
735
|
-
/**
|
|
736
|
-
* Rows per page the server was asked for. Required whenever
|
|
737
|
-
* `onPageChange` is supplied: pager math (total pages, range start, Next)
|
|
738
|
-
* cannot be inferred from `data.length`, because a short final page is
|
|
739
|
-
* smaller than the real page size. Wins over the per-user page size
|
|
740
|
-
* persisted by `viewSettingsKey` — an explicit prop always beats a stored
|
|
741
|
-
* preference.
|
|
742
|
-
*
|
|
743
|
-
* Required whenever `onPageChange` is supplied. A short final page (the
|
|
744
|
-
* server's last page returning fewer rows than its page size) is
|
|
745
|
-
* indistinguishable from a small page size — there is no correct way to
|
|
746
|
-
* infer the divisor from the rows handed back. Rather than guess and
|
|
747
|
-
* render a wrong range or a stuck Next button, the component refuses to
|
|
748
|
-
* render the pager and shows an error instead when `onPageChange` is
|
|
749
|
-
* present without `perPage`.
|
|
750
|
-
*
|
|
751
|
-
* `total` is required on the same terms — see {@link total}. The error
|
|
752
|
-
* names every missing prop, not just the first.
|
|
753
|
-
*/
|
|
754
|
-
perPage?: number;
|
|
755
|
-
/**
|
|
756
|
-
* Called with the next 1-based page number. The pager only renders when
|
|
757
|
-
* this is supplied AND both `perPage` and `total` are supplied — see
|
|
758
|
-
* {@link perPage} and {@link total}. Supplying this without either one
|
|
759
|
-
* renders an error naming the missing props instead of a pager.
|
|
760
|
-
*
|
|
761
|
-
* Status changes reach the server through `onFiltersChange` — not a
|
|
762
|
-
* dedicated callback here — because `statusFilter` state is tracked by
|
|
763
|
-
* the same filter machinery that already calls `onFiltersChange`
|
|
764
|
-
* regardless of controlled mode (see {@link statusFilter}). In
|
|
765
|
-
* server-controlled mode a status change also calls `onPageChange(1)`
|
|
766
|
-
* directly, since the previous page number is meaningless against a new
|
|
767
|
-
* filtered result set.
|
|
768
|
-
*/
|
|
769
|
-
onPageChange?: (page: number) => void;
|
|
770
|
-
/** Called when the user picks a different page size in the header's view settings. */
|
|
771
|
-
onPerPageChange?: (perPage: number) => void;
|
|
772
|
-
/** Called when the user changes the sort, with `null` when the sort is cleared. */
|
|
773
|
-
onSortChange?: (sort: SortParam | null) => void;
|
|
774
|
-
/** Called when the user changes the search text (including clearing it). */
|
|
775
|
-
onSearchChange?: (search: string) => void;
|
|
776
|
-
/**
|
|
777
|
-
* Server-data mode: the caller's fetch is in flight, so render the shell's
|
|
778
|
-
* loading skeleton instead of the (as yet meaningless) `data`. Ignored in
|
|
779
|
-
* client-side mode, where `useResource`'s own loading state is used.
|
|
780
|
-
*/
|
|
781
|
-
loading?: boolean;
|
|
782
|
-
/**
|
|
783
|
-
* Server-data mode: the caller's fetch failed, so render the shell's error
|
|
784
|
-
* panel instead of an empty table. Takes effect even when `data` is
|
|
785
|
-
* non-empty — stale rows beside no indication of failure are exactly the
|
|
786
|
-
* silent-failure this prop exists to prevent. Ignored in client-side mode,
|
|
787
|
-
* where `useResource`'s own error state is used.
|
|
788
|
-
*/
|
|
789
|
-
error?: boolean;
|
|
790
|
-
/**
|
|
791
|
-
* Message shown in the error panel, in place of the shell's generic
|
|
792
|
-
* "Failed to load …". Forwarded in both modes — it is inert unless an
|
|
793
|
-
* error state is actually showing — so a client-side page can also give
|
|
794
|
-
* its failure a human sentence.
|
|
795
|
-
*/
|
|
796
|
-
errorMessage?: string;
|
|
797
|
-
/**
|
|
798
|
-
* Server-data mode: invoked by the error panel's Retry button. The button
|
|
799
|
-
* only appears when this is supplied, so a caller with no way to retry
|
|
800
|
-
* simply omits it and gets an error panel without a dead control. In
|
|
801
|
-
* client-side mode the button is already wired to `useResource`'s own
|
|
802
|
-
* `refetch` and this prop is ignored.
|
|
803
|
-
*/
|
|
804
|
-
onRetry?: () => void;
|
|
805
|
-
/** Saved filter views to offer. Pair with `useSavedViews` for per-user storage. */
|
|
806
|
-
savedViews?: SavedViewItem[];
|
|
807
|
-
onLoadView?: (filters: Record<string, unknown>) => void;
|
|
808
|
-
onSaveView?: (name: string) => void;
|
|
809
|
-
onDeleteView?: (id: string) => void;
|
|
810
|
-
/** Show the "save current view" affordance. */
|
|
811
|
-
canSaveViews?: boolean;
|
|
812
|
-
/**
|
|
813
|
-
* What the data source can do. A control it can't serve is hidden rather
|
|
814
|
-
* than left to error (DATA-STUDIO.md decision 9): `search: false` hides the
|
|
815
|
-
* search box, `sort: false` the sort select. Pass a provider's
|
|
816
|
-
* `capabilities()` straight in. Omitted, both show, as before.
|
|
817
|
-
*/
|
|
818
|
-
capabilities?: {
|
|
819
|
-
search?: boolean;
|
|
820
|
-
sort?: boolean;
|
|
821
|
-
};
|
|
822
|
-
/** Show the column-visibility dropdown. DataTable's default is `true`. */
|
|
823
|
-
columnVisibility?: boolean;
|
|
824
|
-
/** Persist key for the user's column-visibility picks. */
|
|
825
|
-
columnVisibilityKey?: string;
|
|
826
|
-
/** Allow drag-resizing columns. DataTable's default is `true`. */
|
|
827
|
-
resizableColumns?: boolean;
|
|
828
|
-
/** Persist key for the user's column widths. */
|
|
829
|
-
resizeKey?: string;
|
|
830
|
-
/** Keep the table header visible while scrolling. DataTable's default is `true`. */
|
|
831
|
-
stickyHeader?: boolean;
|
|
832
|
-
/** Keep the first column visible while scrolling horizontally. */
|
|
833
|
-
stickyFirstColumn?: boolean;
|
|
834
|
-
/**
|
|
835
|
-
* Page-size choices offered by `DataTable`'s own pager. Client-side mode
|
|
836
|
-
* only — server-controlled mode switches that pager off. (The header's
|
|
837
|
-
* view-settings popover has its own fixed 10/25/50/100 list.)
|
|
838
|
-
*/
|
|
839
|
-
pageSizeOptions?: number[];
|
|
840
|
-
onCreate?: () => void;
|
|
841
|
-
onEdit?: (item: T) => void;
|
|
842
|
-
/**
|
|
843
|
-
* Delete handler, shown as the detail peek's Delete button. Called
|
|
844
|
-
* directly, as before, unless `confirmDelete` is set — then it runs after
|
|
845
|
-
* the confirm dialog, which shows its error if the returned promise
|
|
846
|
-
* rejects, and closes the peek when it resolves.
|
|
847
|
-
*/
|
|
848
|
-
onDelete?: (item: T) => void | Promise<void>;
|
|
849
|
-
/**
|
|
850
|
-
* Whether the signed-in user may change this record at all: shorthand for
|
|
851
|
-
* `canEdit` and `canDelete` together. When it returns false the peek
|
|
852
|
-
* offers neither Edit nor Delete.
|
|
853
|
-
*
|
|
854
|
-
* Precedence: `canEditItem` is checked first. A row it refuses gets no Edit
|
|
855
|
-
* and no Delete, whatever `canEdit` / `canDelete` say. A row it allows is
|
|
856
|
-
* then gated by `canEdit` (Edit) and `canDelete` (Delete) when given. Use
|
|
857
|
-
* `canEditItem` alone for one owner rule, or the pair for separate rules.
|
|
858
|
-
*/
|
|
859
|
-
canEditItem?: (item: T) => boolean;
|
|
860
|
-
createLabel?: string;
|
|
861
|
-
/**
|
|
862
|
-
* Whether this row may be edited. The peek's Edit button is hidden for a
|
|
863
|
-
* row that returns `false` (and the built-in edit form will not open for
|
|
864
|
-
* it). Omitted, every row is editable, as before. A UI gate only: the
|
|
865
|
-
* server must still refuse the write.
|
|
866
|
-
*/
|
|
867
|
-
canEdit?: (item: T) => boolean;
|
|
868
|
-
/**
|
|
869
|
-
* Whether this row may be deleted. The peek's Delete button is hidden for
|
|
870
|
-
* a row that returns `false`. Omitted, every row is deletable. A UI gate
|
|
871
|
-
* only: the server must still refuse the write.
|
|
872
|
-
*/
|
|
873
|
-
canDelete?: (item: T) => boolean;
|
|
874
|
-
/**
|
|
875
|
-
* Built-in delete for `resource` mode (ignored if `onDelete` is
|
|
876
|
-
* provided): the peek's Delete button opens a confirm dialog, then calls
|
|
877
|
-
* `useResource`'s `remove` with the row's `getKey` (when supplied) or its
|
|
878
|
-
* `id` — which invalidates the list — and closes the peek. A failure shows
|
|
879
|
-
* in the dialog.
|
|
880
|
-
*/
|
|
881
|
-
allowDelete?: boolean;
|
|
882
|
-
/**
|
|
883
|
-
* Confirm before deleting. Defaults to `true` for `allowDelete` and
|
|
884
|
-
* `false` for `onDelete` (which keeps its old, unconfirmed behaviour).
|
|
885
|
-
* Pass an object to set the dialog's copy.
|
|
886
|
-
*/
|
|
887
|
-
confirmDelete?: boolean | ResourceDeleteConfirmCopy<T>;
|
|
888
|
-
/** Called after a confirmed or built-in delete succeeds — e.g. a toast. */
|
|
889
|
-
onDeleted?: (item: T) => void;
|
|
890
|
-
/**
|
|
891
|
-
* Extra header actions beyond the create button, in one overflow menu.
|
|
892
|
-
* See {@link PageHeaderAction} — the budget is one primary, the rest here.
|
|
893
|
-
*/
|
|
894
|
-
secondaryActions?: PageHeaderAction[];
|
|
895
|
-
/** Enable built-in create form (ignored if onCreate callback is provided). */
|
|
896
|
-
allowCreate?: boolean;
|
|
897
|
-
/** Enable built-in edit form (ignored if onEdit callback is provided). */
|
|
898
|
-
allowEdit?: boolean;
|
|
899
|
-
/** Field definitions for the built-in form. */
|
|
900
|
-
formFields?: ResourceFormFieldDef[];
|
|
901
|
-
/** Custom form renderer — receives form instance and resolved fields. */
|
|
902
|
-
renderForm?: (form: UseFormReturn<Record<string, unknown>>, fields: ResourceFormFieldDef[]) => ReactNode;
|
|
903
|
-
/** Form presentation mode. Default "standard". */
|
|
904
|
-
formMode?: "standard" | "wizard";
|
|
905
|
-
/** Wizard step definitions. Required when formMode is "wizard". */
|
|
906
|
-
formSteps?: WizardStep[];
|
|
907
|
-
/** Layout mode for the built-in form container. If not set, defaults to sheet for edit, dialog for create. */
|
|
908
|
-
formLayout?: "dialog" | "sheet" | "page";
|
|
909
|
-
bulkActions?: Array<{
|
|
910
|
-
label: string;
|
|
911
|
-
icon?: LucideIcon;
|
|
912
|
-
variant?: "default" | "destructive";
|
|
913
|
-
onAction: (ids: string[]) => void | Promise<void>;
|
|
914
|
-
/**
|
|
915
|
-
* Forwarded straight to the rendered bulk button (see `BulkAction`).
|
|
916
|
-
* Exists so a consumer can kill every bulk action while one of them is
|
|
917
|
-
* in flight — an early return inside `onAction` blocks the second call
|
|
918
|
-
* but leaves the button looking live, which misstates what it will do.
|
|
919
|
-
*/
|
|
920
|
-
disabled?: boolean;
|
|
921
|
-
/** `data-testid` on the rendered bulk button, so e2e can drive it. */
|
|
922
|
-
testId?: string;
|
|
923
|
-
}>;
|
|
924
|
-
/**
|
|
925
|
-
* Override the default card renderer used for grid view (and, absent a
|
|
926
|
-
* dedicated list layout, list view too — DataGrid falls back to the same
|
|
927
|
-
* renderer there). ResourcePage still owns data-fetching, filtering,
|
|
928
|
-
* sorting, and layout (grid columns, infinite-scroll batching, stagger
|
|
929
|
-
* animation) — this only swaps what's rendered inside each item slot.
|
|
930
|
-
*
|
|
931
|
-
* Receives `ResourceCardActions`: the row's `update`/`remove`/`refetch`
|
|
932
|
-
* plus `open()` to activate the row (opening the configured detail
|
|
933
|
-
* panel/modal/route). Row activation is *not* applied automatically to a
|
|
934
|
-
* custom card — wrapping it would double-fire against cards that bring
|
|
935
|
-
* their own click handling and would hijack clicks on nested buttons — so
|
|
936
|
-
* call `actions.open()` from wherever your card should activate.
|
|
937
|
-
*/
|
|
938
|
-
renderCard?: (item: T, index: number, actions: ResourceCardActions<T>) => ReactNode;
|
|
939
|
-
/**
|
|
940
|
-
* Replace the built-in `DataTable` that table view renders, keeping every
|
|
941
|
-
* other piece of the page — header, counts, view settings, filters,
|
|
942
|
-
* bulk bar, detail panel, form, pager — exactly as it is. The counterpart
|
|
943
|
-
* to `renderCard`, which does the same for grid and list view.
|
|
944
|
-
*
|
|
945
|
-
* Receives the rows for the current view, which in server-controlled mode
|
|
946
|
-
* is precisely the page the server returned. Ownership is total: row
|
|
947
|
-
* click-through, selection, density, column visibility and resizing are
|
|
948
|
-
* all things the built-in table wires for you and a custom table must
|
|
949
|
-
* wire for itself. That is the trade this prop makes, and it is why
|
|
950
|
-
* `renderCard` remains the lighter option when only the *cells* need to
|
|
951
|
-
* change — a `ResourceColumnDef.render` is lighter still.
|
|
952
|
-
*
|
|
953
|
-
* Omitted, the default `DataTable` render is used unchanged.
|
|
954
|
-
*/
|
|
955
|
-
renderTable?: (items: T[]) => ReactNode;
|
|
956
|
-
/**
|
|
957
|
-
* With a custom `renderCard`: make each whole card (and list row) one
|
|
958
|
-
* keyboard-reachable button that opens the detail, so the card needs no
|
|
959
|
-
* `actions.open()` wiring and no hand-rolled `div role="button"`. Links and
|
|
960
|
-
* buttons inside the card keep their own clicks. Off by default, because
|
|
961
|
-
* an existing card that already calls `open()` would fire it twice.
|
|
962
|
-
*/
|
|
963
|
-
openOnCardClick?: boolean;
|
|
964
|
-
/**
|
|
965
|
-
* Tailwind grid-column classes for the card grid, passed through to
|
|
966
|
-
* `DataGrid`'s `gridCols` — e.g. `"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"`.
|
|
967
|
-
* Defaults to DataGrid's own responsive 1/2/3/4-column ramp.
|
|
968
|
-
*/
|
|
969
|
-
gridCols?: string;
|
|
970
|
-
/**
|
|
971
|
-
* Built-in list keyboard navigation via `useKeyboardNavigation`: j/k (or
|
|
972
|
-
* Arrow Up/Down) move a focus cursor, Enter opens the focused item,
|
|
973
|
-
* Backspace (⌫) closes an open detail view, and x toggles the focused
|
|
974
|
-
* item's selection when `bulkActions` are configured. Set to `false` to
|
|
975
|
-
* opt out.
|
|
976
|
-
*
|
|
977
|
-
* Default-on, and scoped so that being on by default stays safe:
|
|
978
|
-
* - Only while the grid or list view is showing. Table view keeps its own
|
|
979
|
-
* independent sort/pagination, so a flat focus index can't reliably map
|
|
980
|
-
* onto its visible rows.
|
|
981
|
-
* - Cursor keys suspend while a detail panel/modal or the built-in form
|
|
982
|
-
* is open, so they can't drive the list behind the overlay; ⌫ stays
|
|
983
|
-
* live there so it can close it.
|
|
984
|
-
* - Backspace is only intercepted while there's an open detail to close.
|
|
985
|
-
* - Modified chords (Ctrl/Cmd/Alt) are never captured, so an app's
|
|
986
|
-
* Cmd+K-style shortcuts keep working.
|
|
987
|
-
*/
|
|
988
|
-
keyboardNavigation?: boolean;
|
|
989
|
-
toolbar?: ReactNode;
|
|
990
|
-
/** The empty state's action, e.g. the create button. */
|
|
991
|
-
emptyState?: ReactNode;
|
|
992
|
-
/** The empty state's icon. */
|
|
993
|
-
emptyIcon?: LucideIcon;
|
|
994
|
-
/** The empty state's title, e.g. "No tasks yet". Default "No results found". */
|
|
995
|
-
emptyMessage?: string;
|
|
996
|
-
/** A sentence under the empty-state title — forwarded to `DataPageShell`. */
|
|
997
|
-
emptyDescription?: string;
|
|
998
|
-
/**
|
|
999
|
-
* `"page"` (default) renders the full header with the title. `"toolbar"`
|
|
1000
|
-
* keeps the header's actions (count, view toggle, settings, create) and
|
|
1001
|
-
* drops the title block — for a list inside a tab or card whose page
|
|
1002
|
-
* already has the heading. See `DataPageShell`'s `header`.
|
|
1003
|
-
*/
|
|
1004
|
-
header?: "page" | "toolbar";
|
|
1005
|
-
/**
|
|
1006
|
-
* Imperative navigation used only when `detail="route"` (navigates to
|
|
1007
|
-
* `/{resource}/{id}` on row click). Defaults to a full-page navigation.
|
|
1008
|
-
* Router consumers pass their navigate fn — e.g. RR `useNavigate()` or
|
|
1009
|
-
* Next `router.push`.
|
|
1010
|
-
*/
|
|
1011
|
-
onNavigate?: NavigateFn;
|
|
1012
|
-
resourceOptions?: UseResourceOptions<T>;
|
|
1013
|
-
/**
|
|
1014
|
-
* The view shown until the user picks one with the view toggle. Default
|
|
1015
|
-
* `"table"`. Pass `{ mobile: "grid", desktop: "table" }` for cards on
|
|
1016
|
-
* phones and a table on desktops. Only an explicit pick is persisted, so
|
|
1017
|
-
* the responsive default stays responsive until the user chooses.
|
|
1018
|
-
*/
|
|
1019
|
-
defaultView?: ViewModeDefault;
|
|
1020
|
-
/**
|
|
1021
|
-
* Persist key for density / page size via `useViewSettings`.
|
|
1022
|
-
* Defaults to `resource` or a slug of `title`.
|
|
1023
|
-
*/
|
|
1024
|
-
viewSettingsKey?: string;
|
|
1025
|
-
/**
|
|
1026
|
-
* The interior parts `ResourcePage` composes, by name. Replace one with your
|
|
1027
|
-
* own component, or pass `null` to eject it entirely — see
|
|
1028
|
-
* {@link ResourcePageSlots}.
|
|
1029
|
-
*
|
|
1030
|
-
* This is the reason a surface that needs one part to differ does not have
|
|
1031
|
-
* to drop to the primitives and re-derive the pagination, selection and
|
|
1032
|
-
* detail wiring that were already correct.
|
|
1033
|
-
*/
|
|
1034
|
-
slots?: ResourcePageSlots<T>;
|
|
1035
|
-
/** Extra props merged into a part you are KEEPING. Wins over ours. */
|
|
1036
|
-
slotProps?: ResourcePageSlotProps<T>;
|
|
1037
|
-
/** Merged onto the page shell's root. */
|
|
1038
|
-
className?: string;
|
|
1039
|
-
}
|
|
1040
|
-
declare function ResourcePage<T extends Record<string, unknown> = Record<string, unknown>>(props: ResourcePageProps<T>): React.JSX.Element;
|
|
1041
|
-
|
|
1042
126
|
interface ResourceDetailPageProps<T extends BaseRecord = BaseRecord> {
|
|
1043
127
|
/** Resource name, resolved through the mounted `DataProvider`. */
|
|
1044
128
|
resource: string;
|
|
@@ -1118,6 +202,15 @@ interface ResourceDetailPageProps<T extends BaseRecord = BaseRecord> {
|
|
|
1118
202
|
*/
|
|
1119
203
|
declare function ResourceDetailPage<T extends BaseRecord = BaseRecord>({ resource, id, titleField, subtitleField, select, breadcrumb, actions, sidebar, children, className, testID, }: ResourceDetailPageProps<T>): React.JSX.Element;
|
|
1120
204
|
|
|
205
|
+
/**
|
|
206
|
+
* The undo toast for an `undoable` write (core's `onUndoable`): a sonner
|
|
207
|
+
* toast with an Undo button, shown for as long as the undo is offered.
|
|
208
|
+
* Needs a mounted `<Toaster />`.
|
|
209
|
+
*/
|
|
210
|
+
declare function showUndoToast(write: UndoableWrite): void;
|
|
211
|
+
/** The default error report for writes that fail after the form has closed. */
|
|
212
|
+
declare function showWriteErrorToast(error: Error): void;
|
|
213
|
+
|
|
1121
214
|
interface RelationFieldProps {
|
|
1122
215
|
field: ResourceFormFieldDef;
|
|
1123
216
|
value: string;
|
|
@@ -1183,4 +276,4 @@ declare const AppShell: typeof AppShell$1;
|
|
|
1183
276
|
*/
|
|
1184
277
|
declare const PageHeader: typeof PageHeader$1;
|
|
1185
278
|
|
|
1186
|
-
export { AppShell, BadgeCell, type
|
|
279
|
+
export { AppShell, BadgeCell, type ColumnStatus, CurrencyCell, DataList, type DataListProps, DateCell, FieldArrayRenderer, FileUploadField, KanbanBoard, type KanbanBoardProps, type KanbanColumn, LinkComponent, NumberCell, PageHeader, RelationField, ResourceDetailPage, type ResourceDetailPageProps, StatCard, type StatCardColor, type StatCardProps, WizardForm, showUndoToast, showWriteErrorToast };
|