gridsmith-ui 0.20.0 → 0.22.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/dist/chat.js +3 -3
- package/dist/chunk-2RV23OBK.js +1349 -0
- package/dist/chunk-2RV23OBK.js.map +1 -0
- package/dist/chunk-7TOJ4G7S.js +197 -0
- package/dist/chunk-7TOJ4G7S.js.map +1 -0
- package/dist/{chunk-6MXHGH3D.js → chunk-AAYCQXZQ.js} +90 -161
- package/dist/chunk-AAYCQXZQ.js.map +1 -0
- package/dist/{chunk-ILIODA7W.js → chunk-CXMV7SXJ.js} +4 -3
- package/dist/chunk-CXMV7SXJ.js.map +1 -0
- package/dist/{chunk-EQDR57AM.js → chunk-EYMGLK4M.js} +3 -3
- package/dist/{chunk-EQDR57AM.js.map → chunk-EYMGLK4M.js.map} +1 -1
- package/dist/chunk-IVCVNAXG.js +115 -0
- package/dist/chunk-IVCVNAXG.js.map +1 -0
- package/dist/chunk-RG4KUCRS.js +9 -0
- package/dist/chunk-RG4KUCRS.js.map +1 -0
- package/dist/{chunk-JXANCXK6.js → chunk-RT7RYGC3.js} +39 -4
- package/dist/chunk-RT7RYGC3.js.map +1 -0
- package/dist/{chunk-XYDIBW3J.js → chunk-SBTBMAIU.js} +4 -3
- package/dist/chunk-SBTBMAIU.js.map +1 -0
- package/dist/data-grid.d.ts +38 -4
- package/dist/data-grid.js +304 -264
- package/dist/data-grid.js.map +1 -1
- package/dist/editor.d.ts +6 -5
- package/dist/editor.js +47 -11
- package/dist/editor.js.map +1 -1
- package/dist/index.d.ts +120 -153
- package/dist/index.js +1156 -1814
- package/dist/index.js.map +1 -1
- package/dist/kanban.js +2 -2
- package/dist/resizable.js +9 -8
- package/dist/resizable.js.map +1 -1
- package/dist/roots.css +10 -0
- package/dist/{table-utils-GounRE6s.d.ts → table-utils-BkjNEWts.d.ts} +5 -1
- package/dist/use-pagination-DiJo0aW5.d.ts +153 -0
- package/dist/virtualized.d.ts +11 -1
- package/dist/virtualized.js +67 -18
- package/dist/virtualized.js.map +1 -1
- package/package.json +1 -1
- package/dist/chunk-6MXHGH3D.js.map +0 -1
- package/dist/chunk-ILIODA7W.js.map +0 -1
- package/dist/chunk-JN37OVTP.js +0 -67
- package/dist/chunk-JN37OVTP.js.map +0 -1
- package/dist/chunk-JXANCXK6.js.map +0 -1
- package/dist/chunk-TKVTZWBN.js +0 -50
- package/dist/chunk-TKVTZWBN.js.map +0 -1
- package/dist/chunk-XVB55M3N.js +0 -42
- package/dist/chunk-XVB55M3N.js.map +0 -1
- package/dist/chunk-XYDIBW3J.js.map +0 -1
package/dist/index.d.ts
CHANGED
|
@@ -2,8 +2,10 @@ import * as react from 'react';
|
|
|
2
2
|
import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, LabelHTMLAttributes, TextareaHTMLAttributes, Ref, ReactElement, CSSProperties, HTMLAttributes, RefObject, KeyboardEvent, AnchorHTMLAttributes, ComponentType } from 'react';
|
|
3
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
4
|
import { IconName } from './icons.js';
|
|
5
|
-
import { C as ColumnKind, B as BreakpointKey } from './table-utils-
|
|
6
|
-
export { a as BreakpointWidthProvider, u as useBreakpoint } from './table-utils-
|
|
5
|
+
import { C as ColumnKind, B as BreakpointKey } from './table-utils-BkjNEWts.js';
|
|
6
|
+
export { a as BreakpointWidthProvider, u as useBreakpoint } from './table-utils-BkjNEWts.js';
|
|
7
|
+
import { P as Pager, A as AppShellPreferences } from './use-pagination-DiJo0aW5.js';
|
|
8
|
+
export { a as PaginationOptions, b as PreferencesContext, R as ResolvedPreferences, p as preferenceActionKey, u as usePagination, c as usePreferences } from './use-pagination-DiJo0aW5.js';
|
|
7
9
|
|
|
8
10
|
type ButtonVariant = "default" | "secondary" | "tertiary" | "outline" | "ghost" | "destructive" | "success" | "warning" | "link";
|
|
9
11
|
type ButtonSize = "xs" | "sm" | "md" | "lg" | "icon-xs" | "icon-sm" | "icon" | "icon-lg";
|
|
@@ -207,7 +209,8 @@ interface ComboboxProps extends FieldControlWiring {
|
|
|
207
209
|
declare function Combobox({ value, onChange: onChangeProp, options, placeholder, disabled, loading, className, ref, container, error, size: sizeProp, ...wiring }: ComboboxProps): react_jsx_runtime.JSX.Element;
|
|
208
210
|
|
|
209
211
|
type CheckboxSize = "sm" | "md";
|
|
210
|
-
|
|
212
|
+
/** A Field passes its wiring (0.21.0): its label names the box, and its hint and error describe it. */
|
|
213
|
+
interface CheckboxProps extends FieldControlWiring {
|
|
211
214
|
checked: boolean;
|
|
212
215
|
onChange: (checked: boolean) => void;
|
|
213
216
|
label?: string;
|
|
@@ -217,7 +220,7 @@ interface CheckboxProps {
|
|
|
217
220
|
className?: string;
|
|
218
221
|
ref?: Ref<HTMLInputElement>;
|
|
219
222
|
}
|
|
220
|
-
declare function Checkbox({ checked, onChange: onChangeProp, label, size, disabled, indeterminate, className, ref }: CheckboxProps): react_jsx_runtime.JSX.Element;
|
|
223
|
+
declare function Checkbox({ checked, onChange: onChangeProp, label, size, disabled, indeterminate, className, ref, ...wiring }: CheckboxProps): react_jsx_runtime.JSX.Element;
|
|
221
224
|
interface CheckboxGroupProps {
|
|
222
225
|
value: string[];
|
|
223
226
|
onChange: (value: string[]) => void;
|
|
@@ -241,7 +244,8 @@ interface RadioOption {
|
|
|
241
244
|
label: string;
|
|
242
245
|
disabled?: boolean;
|
|
243
246
|
}
|
|
244
|
-
|
|
247
|
+
/** A Field passes its wiring (0.21.0): its label names the group, and its hint and error describe it. */
|
|
248
|
+
interface RadioGroupProps extends FieldControlWiring {
|
|
245
249
|
value: string;
|
|
246
250
|
onChange: (value: string) => void;
|
|
247
251
|
options: RadioOption[];
|
|
@@ -249,7 +253,7 @@ interface RadioGroupProps {
|
|
|
249
253
|
className?: string;
|
|
250
254
|
label?: string;
|
|
251
255
|
}
|
|
252
|
-
declare function RadioGroup({ value, onChange: onChangeProp, options, orientation, className, label }: RadioGroupProps): react_jsx_runtime.JSX.Element;
|
|
256
|
+
declare function RadioGroup({ value, onChange: onChangeProp, options, orientation, className, label, ...wiring }: RadioGroupProps): react_jsx_runtime.JSX.Element;
|
|
253
257
|
|
|
254
258
|
interface DatePickerProps extends Omit<FieldControlWiring, "id"> {
|
|
255
259
|
value: Date | null;
|
|
@@ -364,7 +368,10 @@ interface FileUploadProps {
|
|
|
364
368
|
onCancel?: (item: FileUploadItem) => void;
|
|
365
369
|
/** A failed upload's Retry. With `upload`, FileUpload runs it again itself. */
|
|
366
370
|
onRetry?: (item: FileUploadItem) => void;
|
|
367
|
-
/**
|
|
371
|
+
/**
|
|
372
|
+
* A file's Remove. With `files` the page takes it off its list; otherwise FileUpload does, and tells the page. Without
|
|
373
|
+
* it, Remove shows only on a failed file: the page would still have a file the user removed (0.21.0).
|
|
374
|
+
*/
|
|
368
375
|
onRemove?: (item: FileUploadItem) => void;
|
|
369
376
|
/**
|
|
370
377
|
* The types the zone takes, as for an `<input type="file">`: ".csv", "image/*", "application/pdf". The zone says them
|
|
@@ -486,7 +493,8 @@ interface PinInputProps {
|
|
|
486
493
|
}
|
|
487
494
|
declare function PinInput({ value, onChange: onChangeProp, length, mask, disabled, size: sizeProp, className, error, id, }: PinInputProps): react_jsx_runtime.JSX.Element;
|
|
488
495
|
|
|
489
|
-
|
|
496
|
+
/** A Field passes its wiring (0.21.0): its label names the stars, and its hint and error describe them. */
|
|
497
|
+
interface RatingProps extends FieldControlWiring {
|
|
490
498
|
value: number;
|
|
491
499
|
onChange?: (value: number) => void;
|
|
492
500
|
max?: number;
|
|
@@ -496,7 +504,7 @@ interface RatingProps {
|
|
|
496
504
|
className?: string;
|
|
497
505
|
error?: boolean;
|
|
498
506
|
}
|
|
499
|
-
declare function Rating({ value, onChange: onChangeProp, max, allowHalf, readOnly, size, className, error, }: RatingProps): react_jsx_runtime.JSX.Element;
|
|
507
|
+
declare function Rating({ value, onChange: onChangeProp, max, allowHalf, readOnly, size, className, error, ...wiring }: RatingProps): react_jsx_runtime.JSX.Element;
|
|
500
508
|
|
|
501
509
|
interface ColorPickerProps {
|
|
502
510
|
value: string;
|
|
@@ -552,8 +560,10 @@ interface FormWrapperProps {
|
|
|
552
560
|
* them from the page as before.
|
|
553
561
|
*
|
|
554
562
|
* In a Drawer, Dialog or Sheet, return the save's promise: the overlay stops asking before discarding once it
|
|
555
|
-
* resolves, and keeps asking if it's rejected.
|
|
556
|
-
*
|
|
563
|
+
* resolves, and keeps asking if it's rejected. If you catch a failure to show it, throw it again, so the promise
|
|
564
|
+
* rejects: one that resolves is a save. Returning nothing works for a save that keeps the form on screen or shows a
|
|
565
|
+
* confirmation in its place; a submit that moves on to another step keeps the overlay's changes until the flow saves
|
|
566
|
+
* (Sprint 25.12 A15). A field still invalid once the page has answered means nothing saved.
|
|
557
567
|
*/
|
|
558
568
|
onSubmit: (errors: FormErrors) => unknown;
|
|
559
569
|
validationMode?: ValidationMode;
|
|
@@ -677,13 +687,20 @@ interface CardProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
677
687
|
}
|
|
678
688
|
declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
|
|
679
689
|
interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
|
|
690
|
+
/**
|
|
691
|
+
* The header's badges and buttons, in one slot. A badge sits beside the title (D1a); a button, like the ⋯, at the
|
|
692
|
+
* row's end. A header holds a status badge and at most one action or the ⋯ menu (data_display#35).
|
|
693
|
+
*/
|
|
680
694
|
actions?: ReactNode;
|
|
681
695
|
icon?: IconName;
|
|
682
696
|
menuItems?: DropdownMenuEntry[];
|
|
683
697
|
}
|
|
684
698
|
declare const CardHeader: react.ForwardRefExoticComponent<CardHeaderProps & react.RefAttributes<HTMLDivElement>>;
|
|
685
699
|
interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
|
|
686
|
-
/**
|
|
700
|
+
/**
|
|
701
|
+
* Max lines before clamping (with the full title on hover). Default 2, like CardDescription, and 1 in a CardHeader's
|
|
702
|
+
* row, where the title truncates beside its badge and the ⋯ (Sprint 25.13 A1); 0 = no limit.
|
|
703
|
+
*/
|
|
687
704
|
lines?: number;
|
|
688
705
|
}
|
|
689
706
|
declare const CardTitle: react.ForwardRefExoticComponent<CardTitleProps & react.RefAttributes<HTMLHeadingElement>>;
|
|
@@ -726,7 +743,13 @@ interface DataListProps {
|
|
|
726
743
|
declare function DataList({ items, columns, className }: DataListProps): react_jsx_runtime.JSX.Element;
|
|
727
744
|
|
|
728
745
|
interface CardGridProps extends HTMLAttributes<HTMLDivElement> {
|
|
729
|
-
/**
|
|
746
|
+
/**
|
|
747
|
+
* The narrowest a card may be, as a CSS length; the grid takes as many columns as fit at it. By default a collection
|
|
748
|
+
* reads it from its cards' headers (Sprint 25.13 A2): about 20rem when a header is given `actions` (a badge or a
|
|
749
|
+
* button besides the ⋯), so a name shows beside them, and 14rem otherwise (a file grid keeps its smaller cards). A comparison keeps
|
|
750
|
+
* 14rem whatever its headers hold, so its plans stay side by side (D29). Pass one when the cards need their own:
|
|
751
|
+
* the width at which the longest title you expect still shows beside what its header holds.
|
|
752
|
+
*/
|
|
730
753
|
minWidth?: string;
|
|
731
754
|
/** The most cards in a row, however wide the grid is. Default 4. A comparison (`compare`) takes all its cards instead. */
|
|
732
755
|
maxColumns?: number;
|
|
@@ -743,6 +766,13 @@ interface CardGridProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
743
766
|
* the gap is this prop, never a `gap-*` class (which would leave the columns measured for another gap).
|
|
744
767
|
*/
|
|
745
768
|
gap?: string;
|
|
769
|
+
/**
|
|
770
|
+
* A collection whose cards all fit on one row fills it (Sprint 25.13 A32, the owner's R28-61: a short row "looks odd
|
|
771
|
+
* like a fourth card was supposed to be there"): they share the row equally, and a lone card takes at most half. A
|
|
772
|
+
* grid of more rows keeps its columns. Default on; pass false for a collection whose count changes (a filter, a
|
|
773
|
+
* pager's last page), so its cards don't change size as the results change.
|
|
774
|
+
*/
|
|
775
|
+
fill?: boolean;
|
|
746
776
|
children: ReactNode;
|
|
747
777
|
ref?: Ref<HTMLDivElement>;
|
|
748
778
|
}
|
|
@@ -762,7 +792,7 @@ interface CardGridProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
762
792
|
* share three rows (header, content, footer), so their parts line up; a child that is not a Card fills its three rows
|
|
763
793
|
* without lining anything up.
|
|
764
794
|
*/
|
|
765
|
-
declare function CardGrid({ minWidth, maxColumns, compare, gap, className, style, children, ref, ...props }: CardGridProps): react_jsx_runtime.JSX.Element;
|
|
795
|
+
declare function CardGrid({ minWidth, maxColumns, compare, gap, fill, className, style, children, ref, ...props }: CardGridProps): react_jsx_runtime.JSX.Element;
|
|
766
796
|
|
|
767
797
|
interface DescriptionItem {
|
|
768
798
|
label: string;
|
|
@@ -818,11 +848,26 @@ interface AccordionProps {
|
|
|
818
848
|
}
|
|
819
849
|
declare function Accordion({ items, type, defaultOpen, open: controlledOpen, onOpenChange, className }: AccordionProps): react_jsx_runtime.JSX.Element;
|
|
820
850
|
|
|
851
|
+
/** A row: a value or an element for each column's key, and any fields of the page's own (an `id`, say). */
|
|
852
|
+
type TableRow = Record<string, string | number | ReactNode>;
|
|
821
853
|
interface Column {
|
|
822
854
|
key: string;
|
|
823
855
|
header: string;
|
|
824
856
|
align?: "left" | "center" | "right";
|
|
825
857
|
sortable?: boolean;
|
|
858
|
+
/**
|
|
859
|
+
* What the column sorts by, when its cells don't say (Sprint 25.13 A3): a column of elements (an avatar beside a name,
|
|
860
|
+
* a badge, a time) gives each row's name, number or date here, `sortValue: (row) => row.actorName`, and a column of
|
|
861
|
+
* sizes gives bytes. Without it a sortable column sorts by the cell itself, which works for text and numbers; a cell
|
|
862
|
+
* that is an element can't be compared, and the column warns in development (data_display#1).
|
|
863
|
+
*/
|
|
864
|
+
sortValue?: (row: TableRow) => string | number | Date | null | undefined;
|
|
865
|
+
/**
|
|
866
|
+
* Keep the column in view while the table scrolls sideways (Sprint 25.13 A35): "end" for the row's actions, pinned on
|
|
867
|
+
* the right; "start" for the row's name, drawn first and pinned beside the selection while it leaves room. Without a
|
|
868
|
+
* "start" column, the first column is the row's name.
|
|
869
|
+
*/
|
|
870
|
+
pin?: "start" | "end";
|
|
826
871
|
/** Opt-in text truncation. true = 1 line, or { lines: N } for multi-line clamp before truncating. */
|
|
827
872
|
truncate?: boolean | {
|
|
828
873
|
lines: number;
|
|
@@ -843,25 +888,58 @@ type SortDir = "asc" | "desc" | null;
|
|
|
843
888
|
type TableDensity = "default" | "compact";
|
|
844
889
|
interface TableProps {
|
|
845
890
|
columns: Column[];
|
|
846
|
-
|
|
891
|
+
/** Every row. With `pager`, the whole list: the table sorts all of it and draws the pager's part (A3). */
|
|
892
|
+
data: TableRow[];
|
|
847
893
|
className?: string;
|
|
848
894
|
sortable?: boolean;
|
|
849
895
|
sortKey?: string | null;
|
|
850
896
|
sortDir?: SortDir;
|
|
851
897
|
onSortChange?: (key: string | null, dir: SortDir) => void;
|
|
852
898
|
selectable?: boolean;
|
|
899
|
+
/** The selected rows, as indexes into `data`, which a sort or a new page never changes. */
|
|
853
900
|
selectedRows?: number[];
|
|
854
901
|
onSelectionChange?: (rows: number[]) => void;
|
|
855
902
|
expandable?: boolean;
|
|
856
|
-
|
|
903
|
+
/** A row's panel, under it when it's open; `index` is the row's index in `data`. */
|
|
904
|
+
renderExpanded?: (row: TableRow, index: number) => ReactNode;
|
|
905
|
+
/**
|
|
906
|
+
* The field that names a row (default `id`, Sprint 25.13 A46): open rows are kept by it, so a sort, a filter or a
|
|
907
|
+
* new page never moves them. A row with no such field is named by its index in `data`.
|
|
908
|
+
*/
|
|
909
|
+
rowKey?: string;
|
|
910
|
+
/**
|
|
911
|
+
* The open rows, by the field `rowKey` names (A46), controlled with `onExpandedChange`. A record's address opens its
|
|
912
|
+
* row, `expandedRows={id ? [id] : []}`: the row is brought into view, and with a pager its page comes up.
|
|
913
|
+
*/
|
|
914
|
+
expandedRows?: Array<string | number>;
|
|
915
|
+
/** The rows open at first, when the table keeps its own (A46). */
|
|
916
|
+
defaultExpandedRows?: Array<string | number>;
|
|
917
|
+
onExpandedChange?: (rows: Array<string | number>) => void;
|
|
857
918
|
density?: TableDensity;
|
|
858
919
|
stickyHeader?: boolean;
|
|
859
920
|
striped?: boolean;
|
|
860
921
|
loading?: boolean;
|
|
861
922
|
emptyState?: ReactNode;
|
|
862
|
-
|
|
863
|
-
|
|
923
|
+
/**
|
|
924
|
+
* A click on a row, or Enter or Space on it: the page decides what opens. Without it an expandable row opens with a
|
|
925
|
+
* click anywhere on it (P33). A click on a control inside the row stays that control's (A45).
|
|
926
|
+
*/
|
|
927
|
+
onRowClick?: (row: TableRow, index: number) => void;
|
|
928
|
+
/** The screen width below which the table shows cards: the project's responsive.tableToCardsBreakpoint, else "md". */
|
|
864
929
|
mobileBreakpoint?: BreakpointKey;
|
|
930
|
+
/**
|
|
931
|
+
* The table's own width below which it shows cards (Sprint 25.13 A35), in px: about a phone's by default, so a table
|
|
932
|
+
* in a pane, a drawer or a dialog stays a table, scrolling sideways, until its space is a phone's. 0 never switches by
|
|
933
|
+
* width; a narrow screen still does.
|
|
934
|
+
*/
|
|
935
|
+
cardsBelow?: number;
|
|
936
|
+
/**
|
|
937
|
+
* The list's pager (Sprint 25.13 A3), from `usePagination(rows)` over the same rows as `data`: the table sorts every
|
|
938
|
+
* row, draws the pager's part (a page, or every page loaded so far) and, beneath it, the control in the project's
|
|
939
|
+
* style. A new sort starts again at page 1. Give TableToolbar the same pager for the count, and draw no <Pagination>
|
|
940
|
+
* of your own.
|
|
941
|
+
*/
|
|
942
|
+
pager?: Pager<unknown>;
|
|
865
943
|
/**
|
|
866
944
|
* The table's title inside its frame (Sprint 25.9, A1): a heading in CardTitle's style at CardHeader's inset, in a band
|
|
867
945
|
* above the scroll area that never scrolls sideways, and the `<table>`'s name. Title a table this way or with a
|
|
@@ -882,7 +960,7 @@ interface TableProps {
|
|
|
882
960
|
"aria-label"?: string;
|
|
883
961
|
ref?: Ref<HTMLDivElement>;
|
|
884
962
|
}
|
|
885
|
-
declare function Table({ columns, data, className, sortable, sortKey: controlledSortKey, sortDir: controlledSortDir, onSortChange, selectable, selectedRows, onSelectionChange, expandable, renderExpanded, density, stickyHeader, striped, loading, emptyState, onRowClick, mobileBreakpoint: mobileBreakpointProp, title, description, actions, "aria-label": ariaLabel, ref, }: TableProps): react_jsx_runtime.JSX.Element;
|
|
963
|
+
declare function Table({ columns: columnsProp, data, className, sortable, sortKey: controlledSortKey, sortDir: controlledSortDir, onSortChange, selectable, selectedRows, onSelectionChange, expandable, renderExpanded, rowKey, expandedRows: expandedRowsProp, defaultExpandedRows, onExpandedChange, density, stickyHeader, striped, loading, emptyState, onRowClick, mobileBreakpoint: mobileBreakpointProp, cardsBelow, pager, title, description, actions, "aria-label": ariaLabel, ref, }: TableProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
|
|
886
964
|
|
|
887
965
|
interface CalendarEvent {
|
|
888
966
|
id: string;
|
|
@@ -1153,8 +1231,13 @@ interface TimelineProps {
|
|
|
1153
1231
|
minItemWidth?: number;
|
|
1154
1232
|
className?: string;
|
|
1155
1233
|
ref?: Ref<HTMLDivElement>;
|
|
1234
|
+
/**
|
|
1235
|
+
* The list's pager (Sprint 25.13 A3), from `usePagination(items)` over the same items: the timeline draws the pager's
|
|
1236
|
+
* part of every item and, beneath it, the control in the project's style. Draw no <Pagination> of your own.
|
|
1237
|
+
*/
|
|
1238
|
+
pager?: Pager<unknown>;
|
|
1156
1239
|
}
|
|
1157
|
-
declare function Timeline({ items, orientation, minItemWidth, className, ref }: TimelineProps): react_jsx_runtime.JSX.Element;
|
|
1240
|
+
declare function Timeline({ items: allItems, orientation, minItemWidth, className, ref, pager }: TimelineProps): react_jsx_runtime.JSX.Element;
|
|
1158
1241
|
|
|
1159
1242
|
interface CodeBlockProps {
|
|
1160
1243
|
code: string;
|
|
@@ -1467,6 +1550,11 @@ interface StackedListProps {
|
|
|
1467
1550
|
flush?: boolean;
|
|
1468
1551
|
/** @deprecated Sprint 25.4: use variant="articles" (hover="title") — the default variant tints the row. */
|
|
1469
1552
|
hover?: "tint" | "title";
|
|
1553
|
+
/**
|
|
1554
|
+
* The list's pager (Sprint 25.13 A3), from `usePagination(items)` over the same items: the list draws the pager's
|
|
1555
|
+
* part of every item and, beneath it, the control in the project's style. Draw no <Pagination> of your own.
|
|
1556
|
+
*/
|
|
1557
|
+
pager?: Pager<unknown>;
|
|
1470
1558
|
}
|
|
1471
1559
|
declare const StackedList: react.ForwardRefExoticComponent<StackedListProps & react.RefAttributes<HTMLUListElement>>;
|
|
1472
1560
|
|
|
@@ -2230,6 +2318,8 @@ interface PaginationProps {
|
|
|
2230
2318
|
/** The Load more button's label (default "Load more"). */
|
|
2231
2319
|
loadMoreLabel?: string;
|
|
2232
2320
|
className?: string;
|
|
2321
|
+
/** Set by `usePagination` in `pager.props`: which list the control belongs to (Sprint 25.13 A3). */
|
|
2322
|
+
pagerToken?: object;
|
|
2233
2323
|
}
|
|
2234
2324
|
declare function Pagination(props: PaginationProps): react_jsx_runtime.JSX.Element;
|
|
2235
2325
|
|
|
@@ -2825,11 +2915,12 @@ interface ToastProps {
|
|
|
2825
2915
|
pauseOnHover?: boolean;
|
|
2826
2916
|
/**
|
|
2827
2917
|
* The toast's action. Sprint 25.12 A40 (the sourced overlays#18): a toast with an action never closes on a timer while
|
|
2828
|
-
* the action can still be taken. With `actionWindow` the action lapses after that long
|
|
2829
|
-
* message for its `duration
|
|
2918
|
+
* the action can still be taken. With `actionWindow` the action lapses after that long: in a ToastProvider the toast
|
|
2919
|
+
* then stays as a plain message for its `duration`, and a standalone toast closes (onDismiss). Without one it stays until
|
|
2920
|
+
* the user acts or dismisses it.
|
|
2830
2921
|
*/
|
|
2831
2922
|
action?: ToastAction;
|
|
2832
|
-
/** How long the action is offered once the toast shows, in ms (an Undo's window). */
|
|
2923
|
+
/** How long the action is offered once the toast shows, in ms (an Undo's window). A standalone toast closes when it ends. */
|
|
2833
2924
|
actionWindow?: number;
|
|
2834
2925
|
position?: ToastPosition;
|
|
2835
2926
|
mode?: "light" | "dark";
|
|
@@ -2970,71 +3061,6 @@ interface ScrollAreaProps {
|
|
|
2970
3061
|
}
|
|
2971
3062
|
declare function ScrollArea({ children, className, orientation, maxHeight, maxWidth, }: ScrollAreaProps): react_jsx_runtime.JSX.Element;
|
|
2972
3063
|
|
|
2973
|
-
type PreferenceValidationTiming = "onBlur" | "onSubmit" | "onChange";
|
|
2974
|
-
type PreferenceBreakpoint = "sm" | "md" | "lg";
|
|
2975
|
-
type PreferenceEmptyStyle = "illustration-cta" | "text-cta" | "redirect";
|
|
2976
|
-
type PreferenceLoadingStyle = "skeleton" | "spinner" | "progress-bar";
|
|
2977
|
-
type PreferenceDestructiveMode = "dialog" | "undo";
|
|
2978
|
-
/** dataDisplay.paginationStyle — how a long list shows more: page numbers, a Load more button, or loading as the user scrolls. */
|
|
2979
|
-
type PreferencePaginationStyle = "pagination" | "load-more" | "infinite-scroll";
|
|
2980
|
-
interface AppShellPreferences {
|
|
2981
|
-
/** forms.validationTiming — when a field first shows its error. */
|
|
2982
|
-
validationTiming?: PreferenceValidationTiming;
|
|
2983
|
-
/** forms.actions — where a form's buttons sit and how they align. */
|
|
2984
|
-
formActions?: {
|
|
2985
|
-
align?: "start" | "end";
|
|
2986
|
-
placement?: "auto" | "inline";
|
|
2987
|
-
};
|
|
2988
|
-
/** dataDisplay.itemsPerPage — the page size of a paged or load-more list. */
|
|
2989
|
-
itemsPerPage?: number;
|
|
2990
|
-
/** dataDisplay.paginationStyle — page numbers, a Load more button, or loading on scroll; usePagination and Pagination follow it (round 22). */
|
|
2991
|
-
paginationStyle?: PreferencePaginationStyle;
|
|
2992
|
-
/** responsive.tableToCardsBreakpoint — below this width a Table becomes stacked cards. */
|
|
2993
|
-
tableToCardsBreakpoint?: PreferenceBreakpoint;
|
|
2994
|
-
/** emptyStates.emptyStyle — illustration with an action, text with an action, or redirect to creation. */
|
|
2995
|
-
emptyStyle?: PreferenceEmptyStyle;
|
|
2996
|
-
/** emptyStates.loadingStyle — what a page shows while data loads. */
|
|
2997
|
-
loadingStyle?: PreferenceLoadingStyle;
|
|
2998
|
-
/** destructiveActions.mode — confirm in a dialog, or act now with an Undo toast. */
|
|
2999
|
-
destructiveMode?: PreferenceDestructiveMode;
|
|
3000
|
-
/** destructiveActions.highSeverityActions — always confirm in a dialog, even in undo mode. */
|
|
3001
|
-
highSeverityActions?: string[];
|
|
3002
|
-
/** destructiveActions.typeToConfirmActions — the user types the name before the confirm enables. */
|
|
3003
|
-
typeToConfirmActions?: string[];
|
|
3004
|
-
/** destructiveActions.undoWindowSeconds — how long the Undo toast stays. */
|
|
3005
|
-
undoWindowSeconds?: number;
|
|
3006
|
-
}
|
|
3007
|
-
declare const PreferencesContext: react.Context<AppShellPreferences | null>;
|
|
3008
|
-
/** Every preference in force, the shell's value or the house default — what app code reads. */
|
|
3009
|
-
interface ResolvedPreferences {
|
|
3010
|
-
validationTiming: PreferenceValidationTiming;
|
|
3011
|
-
formActions: {
|
|
3012
|
-
align: "start" | "end";
|
|
3013
|
-
placement: "auto" | "inline";
|
|
3014
|
-
};
|
|
3015
|
-
itemsPerPage: number;
|
|
3016
|
-
paginationStyle: PreferencePaginationStyle;
|
|
3017
|
-
tableToCardsBreakpoint: PreferenceBreakpoint;
|
|
3018
|
-
emptyStyle: PreferenceEmptyStyle;
|
|
3019
|
-
loadingStyle: PreferenceLoadingStyle;
|
|
3020
|
-
destructiveMode: PreferenceDestructiveMode;
|
|
3021
|
-
highSeverityActions: string[];
|
|
3022
|
-
typeToConfirmActions: string[];
|
|
3023
|
-
undoWindowSeconds: number;
|
|
3024
|
-
}
|
|
3025
|
-
/**
|
|
3026
|
-
* For app code: every preference in force — the shell's value, else the house default — so a page never writes a
|
|
3027
|
-
* fallback of its own. Round 21 (run 58): with every field optional, TypeScript made the builder write
|
|
3028
|
-
* `const { itemsPerPage = 20 } = usePreferences()`, a second copy of the preference it then edited by hand when the
|
|
3029
|
-
* rule changed. Paged lists use `usePagination`, which reads the page size itself.
|
|
3030
|
-
*/
|
|
3031
|
-
declare function usePreferences(): ResolvedPreferences;
|
|
3032
|
-
/**
|
|
3033
|
-
* "Remove range" → "remove_range": the key the high-severity and type-to-confirm lists use. The engine's `actionKey`
|
|
3034
|
-
* (platform/src/lib/destructive-mode.ts) is the same rule for compliance; a platform test keeps the two identical.
|
|
3035
|
-
*/
|
|
3036
|
-
declare function preferenceActionKey(label: string): string;
|
|
3037
|
-
|
|
3038
3064
|
interface AppShellContextValue {
|
|
3039
3065
|
hasSidebar: boolean;
|
|
3040
3066
|
hasMobileMenu: boolean;
|
|
@@ -3169,68 +3195,6 @@ interface AppShellProps {
|
|
|
3169
3195
|
}
|
|
3170
3196
|
declare const AppShell: react.ForwardRefExoticComponent<AppShellProps & react.RefAttributes<HTMLDivElement>>;
|
|
3171
3197
|
|
|
3172
|
-
/**
|
|
3173
|
-
* A long list in one hook (round 21; all three list styles since round 22). The page size and the list style are the
|
|
3174
|
-
* project's `dataDisplay.itemsPerPage` and `dataDisplay.paginationStyle`, read from the shell, so a mid-build
|
|
3175
|
-
* `update_rule` on either reaches every list with no page edited. The page gets what to show, the props for
|
|
3176
|
-
* `<Pagination>` — page numbers, a Load more button or loading on scroll, whichever the project's style is — and the
|
|
3177
|
-
* numbers the count line needs ("Showing 51–100 of 200 events", or "Showing 40 of 120 members" while a list grows).
|
|
3178
|
-
*
|
|
3179
|
-
* Run 58 hand-wrote the paging; runs 59 and 60 hand-wrote load-more and scroll loading — an IntersectionObserver, a
|
|
3180
|
-
* visible count and a page size copied in as a constant, twice in one app — because the library had no way to.
|
|
3181
|
-
*
|
|
3182
|
-
* const pager = usePagination(sortedEvents, { resetOn: [sortKey, sortDir] })
|
|
3183
|
-
* <TableToolbar resultCount={sortedEvents.length} resultNoun={["event", "events"]} pagination={pager} />
|
|
3184
|
-
* <Table columns={columns} data={pager.items.map(toRow)} />
|
|
3185
|
-
* <Pagination {...pager.props} />
|
|
3186
|
-
*/
|
|
3187
|
-
interface Pager<T> {
|
|
3188
|
-
/** The list style this list follows: the project's, unless `style` was passed. */
|
|
3189
|
-
style: PreferencePaginationStyle;
|
|
3190
|
-
/** What to show: the current page's rows, or every row loaded so far on a list that grows. */
|
|
3191
|
-
items: T[];
|
|
3192
|
-
/** The current page, from 1; on a growing list, how many pages are loaded. */
|
|
3193
|
-
page: number;
|
|
3194
|
-
pageSize: number;
|
|
3195
|
-
totalItems: number;
|
|
3196
|
-
totalPages: number;
|
|
3197
|
-
/** The first and last row numbers on screen, from 1 ("Showing 51–100"); [0, 0] for an empty list. */
|
|
3198
|
-
range: [number, number];
|
|
3199
|
-
/** How many rows are on screen. */
|
|
3200
|
-
shown: number;
|
|
3201
|
-
/** Rows left to show: a next page, or more to load. */
|
|
3202
|
-
hasMore: boolean;
|
|
3203
|
-
/** The next page, or the next `pageSize` rows on a growing list. */
|
|
3204
|
-
loadMore: () => void;
|
|
3205
|
-
setPage: (page: number) => void;
|
|
3206
|
-
/** A page-size selector's choice; it wins over the project's page size and starts again at page 1. */
|
|
3207
|
-
setPageSize: (size: number) => void;
|
|
3208
|
-
/** Spread onto <Pagination>: it renders page numbers, a Load more button or the scroll trigger, as `style` says. */
|
|
3209
|
-
props: {
|
|
3210
|
-
currentPage: number;
|
|
3211
|
-
totalPages: number;
|
|
3212
|
-
onPageChange: (page: number) => void;
|
|
3213
|
-
pageSize: number;
|
|
3214
|
-
onPageSizeChange: (size: number) => void;
|
|
3215
|
-
mode: PreferencePaginationStyle;
|
|
3216
|
-
hasMore: boolean;
|
|
3217
|
-
onLoadMore: () => void;
|
|
3218
|
-
};
|
|
3219
|
-
}
|
|
3220
|
-
interface PaginationOptions {
|
|
3221
|
-
/** A fixed page size for this list, over the project's. Leave it out: the project's page size is the rule. */
|
|
3222
|
-
pageSize?: number;
|
|
3223
|
-
/** Values that start the list again at page 1 when they change — the sort column and direction, a search query. */
|
|
3224
|
-
resetOn?: unknown;
|
|
3225
|
-
/**
|
|
3226
|
-
* A list style for this list only, over the project's. Leave it out: the project's style is the rule. Passing one that
|
|
3227
|
-
* differs is overriding a rule in force — ask the user first, and put `// @gridsmith-override
|
|
3228
|
-
* dataDisplay.paginationStyle: <their reason>` above the call.
|
|
3229
|
-
*/
|
|
3230
|
-
style?: PreferencePaginationStyle;
|
|
3231
|
-
}
|
|
3232
|
-
declare function usePagination<T>(list: readonly T[], options?: PaginationOptions): Pager<T>;
|
|
3233
|
-
|
|
3234
3198
|
interface DestructiveActionOptions {
|
|
3235
3199
|
/** The action's key as the preference lists name it ("remove_range"); derived from `title` when omitted. */
|
|
3236
3200
|
action?: string;
|
|
@@ -3242,8 +3206,11 @@ interface DestructiveActionOptions {
|
|
|
3242
3206
|
confirmLabel?: string;
|
|
3243
3207
|
/** The text the user must type when the action is on the type-to-confirm list (the item's name). */
|
|
3244
3208
|
typeToConfirm?: string;
|
|
3245
|
-
/**
|
|
3246
|
-
|
|
3209
|
+
/**
|
|
3210
|
+
* Performs the action. In undo mode it runs at once. Reject (throw) when it fails: the hook then says so and claims
|
|
3211
|
+
* nothing. Any return is allowed; a promise is awaited.
|
|
3212
|
+
*/
|
|
3213
|
+
onConfirm: () => unknown;
|
|
3247
3214
|
/**
|
|
3248
3215
|
* Restores what the action removed; the Undo toast's action in undo mode. Without it the toast has no Undo. It may
|
|
3249
3216
|
* return a promise: once it resolves the hook confirms with a toast (`restoredMessage`), and a rejection shows an
|
|
@@ -3422,4 +3389,4 @@ interface UseTextOverflowResult {
|
|
|
3422
3389
|
*/
|
|
3423
3390
|
declare function useTextOverflow(options?: UseTextOverflowOptions): UseTextOverflowResult;
|
|
3424
3391
|
|
|
3425
|
-
export { Accordion, ActionPanel, ActionPanelGroup, AddAnother, type AddAnotherProps, Alert, type AlertPlacement, AppShell, type AppShellContextValue, type AppShellFocus,
|
|
3392
|
+
export { Accordion, ActionPanel, ActionPanelGroup, AddAnother, type AddAnotherProps, Alert, type AlertPlacement, AppShell, type AppShellContextValue, type AppShellFocus, AppShellPreferences, type AppShellTheme, AsidePanel, type AsidePanelProps, type AsidePanelSide, Avatar, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarStatus, Badge, type BadgePaletteColor, type BadgeSeverity, type BadgeSize, type BadgeVariant, BottomNav, type BottomNavItem, type BreadcrumbItem$1 as BreadcrumbItem, Breadcrumbs, type BreadcrumbsSeparator, type BreadcrumbsSize, type BreadcrumbsVariant, BreakpointKey, BulkActionBar, Button, ButtonSizeContext, Calendar, type CalendarDay, Card, CardContent, CardDescription, CardFooter, CardGrid, type CardGridProps, CardHeader, type CardSelectType, CardTitle, type CardVariant, Carousel, type ChatMessage, type ChatMessageAction, type ChatMessageLayout, ChatMessageList, type ChatMessageSender, type ChatMessageSource, type ChatMessageStatus, ChatPanel, type ChatPanelProps, type ChatPanelStatusTone, Checkbox, CheckboxGroup, CheckboxGroupItem, CodeBlock, Collapsible, ColorPicker, type Column, Combobox, CommandPalette, ContextMenu, type ControlSize, ControlSizeContext, CornerPanel, type CornerPanelEdge, type CornerPanelProps, DEFAULT_DATE_RANGE_PRESETS, DataList, type DateInput, DatePicker, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DateRangeWords, type DescriptionItem, DescriptionList, type DescriptionListOrientation, type DescriptionListSize, type DestructiveActionHandle, type DestructiveActionOptions, Dialog, Divider, Dock, Drawer, Dropdown, DropdownMenu, type DropdownMenuDivider, type DropdownMenuEntry, type DropdownMenuItem, EmptyState, EntityCell, Field, type FieldControlProps, type FieldLabel, type FieldProps, FileUpload, type FileUploadItem, type FileUploadRequestOptions, type FileUploadStatus, type FitLabelsOptions, type FittedLabel, FormWrapper, Gantt, type GanttGroup, type GanttItem, type GanttProps, type GanttStatus, type GanttTone, type GridKeyboard, type GridKeyboardOptions, HoverCard, InlineFieldError, Input, Kbd, Label, type LabelBox, Launcher, type LauncherEdge, type LauncherProps, type LauncherVariant, type LauncherWhenOpen, Link, type LinkProps, MentionInput, MobileHeaderMenu, type MobileHeaderMenuItemData, type MobileHeaderMenuType, NavItem, type NavItemProps, type NavItemType, NavMenu, type NavMenuItem, Navbar, type NavbarSize, type NavbarType, type NavbarVariant, NotificationCenter, NumberInput, PageContainer, type PageContainerWidth, PageHeader, type PageHeaderBehavior, type PageHeaderIntensity, type PageHeaderProps, type PageHeaderVariant, Pager, Pagination, PinInput, Popover, Progress, type PromiseToastMessages, RadioGroup, Rating, ScrollArea, SectionHeading, type SectionHeadingProps, SegmentedControl, SettingsLayout, type SettingsLayoutProps, type SettingsSection, Sheet, Sidebar, type SidebarContextValue, type SidebarItem, SidebarNav, type SidebarNavSize, type SidebarPosition, type SidebarSection, type SidebarType, Skeleton, SkipLink, SliderRange, type SortDir, Spinner, StackedList, type StackedListVariant, StatsCard, StatusDot, type StatusDotVariant, Stepper, TIME_ZOOMS, type Tab, Table, type TableDensity, type TableProps, type TableRow, TableToolbar, type TableToolbarActiveFilter, type TableToolbarFilterOption, Tabs, Tag, TagInput, type TagPaletteColor, type TagVariant, TextOverflow, type TextOverflowProps, Textarea, TimeBar, type TimeBarProps, TimePicker, TimeRow, type TimeRowProps, type TimeScale, TimeScaleHeader, type TimeScaleHeaderProps, type TimeScaleOptions, type TimeTick, TimeViewport, type TimeViewportHandle, type TimeViewportLayout, type TimeViewportProps, type TimeViewportState, type TimeZoom, Timeline, Toast, type ToastAction, type ToastApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastVariant, Toggle, Tooltip, Tour, TransferList, TreeView, type Trend, type UseTextOverflowOptions, type UseTextOverflowResult, dateOfDay, dayOf, endDayOf, fitLabel, fitLabels, formatDateRange, timeExtent, useAppShell, useContentWidth, useDestructiveAction, useFittedLabels, useFormContext, useGridKeyboard, useSidebar, useTextMeasure, useTextOverflow, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional, useUnsavedChanges };
|