@morze/ui 0.1.0 → 0.2.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/README.md +112 -10
- package/dist/index.cjs +85 -19
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +78 -63
- package/dist/index.d.ts +78 -63
- package/dist/index.js +85 -19
- package/dist/index.js.map +1 -1
- package/dist/locales/en.cjs +73 -0
- package/dist/locales/en.cjs.map +1 -0
- package/dist/locales/en.d.cts +7 -0
- package/dist/locales/en.d.ts +7 -0
- package/dist/locales/en.js +66 -0
- package/dist/locales/en.js.map +1 -0
- package/dist/locales/ru.cjs +70 -0
- package/dist/locales/ru.cjs.map +1 -0
- package/dist/locales/ru.d.cts +16 -0
- package/dist/locales/ru.d.ts +16 -0
- package/dist/locales/ru.js +63 -0
- package/dist/locales/ru.js.map +1 -0
- package/dist/morze-ui-tokens.css +1 -1
- package/dist/morze-ui.css +1 -1
- package/dist/types-B8jz2FF9.d.cts +75 -0
- package/dist/types-B8jz2FF9.d.ts +75 -0
- package/package.json +13 -2
package/dist/index.d.cts
CHANGED
|
@@ -3,6 +3,8 @@ import * as React from 'react';
|
|
|
3
3
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
4
4
|
import { VariantProps } from 'class-variance-authority';
|
|
5
5
|
import { Toggle as Toggle$1, ToggleGroup as ToggleGroup$1, Checkbox as Checkbox$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Slider as Slider$1, Label as Label$1, Select as Select$1, Tabs as Tabs$1, Accordion as Accordion$1, Progress as Progress$1, Avatar as Avatar$1, Separator as Separator$1, Dialog as Dialog$1, Popover as Popover$1, DropdownMenu as DropdownMenu$1, Tooltip as Tooltip$1 } from 'radix-ui';
|
|
6
|
+
import { D as DataTableLabels } from './types-B8jz2FF9.cjs';
|
|
7
|
+
export { M as MorzeCommonLabels, a as MorzeLocale, d as defaultDataTableLabels, r as resolveLabels } from './types-B8jz2FF9.cjs';
|
|
6
8
|
|
|
7
9
|
/**
|
|
8
10
|
* Class name joiner. Morze UI ships plain, prefixed CSS rather than utility
|
|
@@ -46,18 +48,15 @@ type ButtonProps = React.ComponentProps<'button'> & VariantProps<typeof buttonVa
|
|
|
46
48
|
tone?: Tone;
|
|
47
49
|
/** Swaps the label for a spinner and blocks interaction. */
|
|
48
50
|
loading?: boolean;
|
|
49
|
-
/** Pulsing morse dot before the label — the landing's signature accent. */
|
|
50
|
-
dot?: boolean;
|
|
51
51
|
};
|
|
52
|
-
declare function Button({ className, variant, size, asChild, tone, loading,
|
|
52
|
+
declare function Button({ className, variant, size, asChild, tone, loading, disabled, children, ...props }: ButtonProps): React.JSX.Element;
|
|
53
53
|
|
|
54
54
|
declare const badgeVariants: (props?: ({
|
|
55
55
|
variant?: "outline" | "solid" | "soft" | null | undefined;
|
|
56
56
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
57
|
-
declare function Badge({ className, variant, tone,
|
|
57
|
+
declare function Badge({ className, variant, tone, asChild, children, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
|
|
58
58
|
asChild?: boolean;
|
|
59
59
|
tone?: Tone;
|
|
60
|
-
dot?: boolean;
|
|
61
60
|
}): React.JSX.Element;
|
|
62
61
|
|
|
63
62
|
declare const toggleVariants: (props?: ({
|
|
@@ -364,6 +363,16 @@ type FilterValue = {
|
|
|
364
363
|
} | {
|
|
365
364
|
type: 'boolean';
|
|
366
365
|
value: boolean;
|
|
366
|
+
}
|
|
367
|
+
/**
|
|
368
|
+
* Whatever a host's own filter widget produces. The value travels into
|
|
369
|
+
* `query.filters` untouched — its shape is the host's business — and `label`
|
|
370
|
+
* is what the chip above the table shows.
|
|
371
|
+
*/
|
|
372
|
+
| {
|
|
373
|
+
type: 'custom';
|
|
374
|
+
value: unknown;
|
|
375
|
+
label?: string;
|
|
367
376
|
};
|
|
368
377
|
type DataTableFilters = Record<string, FilterValue>;
|
|
369
378
|
type DataTableQuery = {
|
|
@@ -376,6 +385,18 @@ type SelectOptionDef = {
|
|
|
376
385
|
value: string;
|
|
377
386
|
label: string;
|
|
378
387
|
};
|
|
388
|
+
/** What a `custom` filter's `render` gets to work with. */
|
|
389
|
+
type CustomFilterContext = {
|
|
390
|
+
/** The staged value — the popover's draft, not what the query carries yet. */
|
|
391
|
+
value: unknown;
|
|
392
|
+
label?: string;
|
|
393
|
+
/** Stages a value; it reaches the query when Apply is pressed. */
|
|
394
|
+
onChange: (value: unknown, label?: string) => void;
|
|
395
|
+
/** Stages and applies in one step, then closes the popover. */
|
|
396
|
+
commit: (value: unknown, label?: string) => void;
|
|
397
|
+
/** The table's resolved strings, so a host widget stays translated with it. */
|
|
398
|
+
labels: DataTableLabels;
|
|
399
|
+
};
|
|
379
400
|
/** Declares which control the header popover shows and what it sends back. */
|
|
380
401
|
type ColumnFilterDef = {
|
|
381
402
|
type: 'text';
|
|
@@ -394,6 +415,20 @@ type ColumnFilterDef = {
|
|
|
394
415
|
type: 'boolean';
|
|
395
416
|
trueLabel?: string;
|
|
396
417
|
falseLabel?: string;
|
|
418
|
+
}
|
|
419
|
+
/**
|
|
420
|
+
* A host-supplied control — async multiselect, range slider, presence
|
|
421
|
+
* toggle — rendered inside the kit's popover so it looks like the built-in
|
|
422
|
+
* filters and, unlike a widget smuggled into `column.header`, takes part in
|
|
423
|
+
* `query.filters`.
|
|
424
|
+
*/
|
|
425
|
+
| {
|
|
426
|
+
type: 'custom';
|
|
427
|
+
render: (context: CustomFilterContext) => React.ReactNode;
|
|
428
|
+
/** Chip text for a value; falls back to the label the widget supplied. */
|
|
429
|
+
describe?: (value: unknown) => string;
|
|
430
|
+
/** `false` drops the Apply/Reset footer — for a widget that commits itself. */
|
|
431
|
+
actions?: boolean;
|
|
397
432
|
};
|
|
398
433
|
type EditableDef<T> = {
|
|
399
434
|
type: 'text' | 'number' | 'select';
|
|
@@ -432,6 +467,10 @@ type DataTableColumn<T> = {
|
|
|
432
467
|
editable?: EditableDef<T>;
|
|
433
468
|
headerTitle?: string;
|
|
434
469
|
};
|
|
470
|
+
/** Anything valid on a `<tr>`, plus `data-*` — the row-level escape hatch. */
|
|
471
|
+
type RowAttributes = React.ComponentPropsWithoutRef<'tr'> & {
|
|
472
|
+
[key: `data-${string}`]: string | number | boolean | undefined;
|
|
473
|
+
};
|
|
435
474
|
/** Column layout is UI state, not query state — it never reaches the backend. */
|
|
436
475
|
type ColumnLayout = {
|
|
437
476
|
order: string[];
|
|
@@ -458,60 +497,6 @@ type RowSelectionState = {
|
|
|
458
497
|
};
|
|
459
498
|
declare const emptyQuery: DataTableQuery;
|
|
460
499
|
|
|
461
|
-
/**
|
|
462
|
-
* Every visible string the table owns, in one place. Defaults are English;
|
|
463
|
-
* pass a partial `labels` object to translate or reword any of them.
|
|
464
|
-
*/
|
|
465
|
-
type DataTableLabels = {
|
|
466
|
-
filter: string;
|
|
467
|
-
filterFor: (column: string) => string;
|
|
468
|
-
filterActive: string;
|
|
469
|
-
contains: string;
|
|
470
|
-
apply: string;
|
|
471
|
-
reset: string;
|
|
472
|
-
resetAll: string;
|
|
473
|
-
resetFilters: string;
|
|
474
|
-
clearFilter: string;
|
|
475
|
-
rangeFrom: string;
|
|
476
|
-
rangeTo: string;
|
|
477
|
-
dateFrom: string;
|
|
478
|
-
dateTo: string;
|
|
479
|
-
yes: string;
|
|
480
|
-
no: string;
|
|
481
|
-
columns: string;
|
|
482
|
-
moveUp: (column: string) => string;
|
|
483
|
-
moveDown: (column: string) => string;
|
|
484
|
-
pinning: (column: string, side: string) => string;
|
|
485
|
-
pinnedLeft: string;
|
|
486
|
-
pinnedRight: string;
|
|
487
|
-
notPinned: string;
|
|
488
|
-
show: (column: string) => string;
|
|
489
|
-
hide: (column: string) => string;
|
|
490
|
-
sortBy: (column: string) => string;
|
|
491
|
-
columnWidth: (column: string) => string;
|
|
492
|
-
selectPage: string;
|
|
493
|
-
selectRow: string;
|
|
494
|
-
expandRow: string;
|
|
495
|
-
collapseRow: string;
|
|
496
|
-
details: string;
|
|
497
|
-
empty: string;
|
|
498
|
-
retry: string;
|
|
499
|
-
rowsPerPage: string;
|
|
500
|
-
nothingFound: string;
|
|
501
|
-
of: string;
|
|
502
|
-
firstPage: string;
|
|
503
|
-
previousPage: string;
|
|
504
|
-
nextPage: string;
|
|
505
|
-
lastPage: string;
|
|
506
|
-
selectedCount: (count: string) => string;
|
|
507
|
-
allMatchingSuffix: string;
|
|
508
|
-
selectAllMatching: (total: string) => string;
|
|
509
|
-
clearSelection: string;
|
|
510
|
-
bulkActions: string;
|
|
511
|
-
};
|
|
512
|
-
declare const defaultDataTableLabels: DataTableLabels;
|
|
513
|
-
declare function resolveLabels(labels?: Partial<DataTableLabels>): DataTableLabels;
|
|
514
|
-
|
|
515
500
|
type DataTableProps<T> = {
|
|
516
501
|
columns: DataTableColumn<T>[];
|
|
517
502
|
data: T[];
|
|
@@ -529,6 +514,19 @@ type DataTableProps<T> = {
|
|
|
529
514
|
bulkActions?: (selection: RowSelectionState) => React.ReactNode;
|
|
530
515
|
renderExpanded?: (row: T) => React.ReactNode;
|
|
531
516
|
onRowClick?: (row: T) => void;
|
|
517
|
+
/** Per-row class name — tinting a row by record state, marking it stale. */
|
|
518
|
+
rowClassName?: (row: T, context: {
|
|
519
|
+
rowIndex: number;
|
|
520
|
+
}) => string | undefined;
|
|
521
|
+
/**
|
|
522
|
+
* Extra attributes for the row element: `data-*`, `title`, `aria-*`, a
|
|
523
|
+
* handler of your own. The table's own attributes win, so this cannot break
|
|
524
|
+
* selection, expansion or the pinned-column seam; a `className` here is
|
|
525
|
+
* merged, and an `onClick` runs before `onRowClick`.
|
|
526
|
+
*/
|
|
527
|
+
rowProps?: (row: T, context: {
|
|
528
|
+
rowIndex: number;
|
|
529
|
+
}) => RowAttributes;
|
|
532
530
|
layout?: Partial<ColumnLayout>;
|
|
533
531
|
onLayoutChange?: (layout: ColumnLayout) => void;
|
|
534
532
|
/** localStorage key for widths, order, visibility and pinning. */
|
|
@@ -543,7 +541,20 @@ type DataTableProps<T> = {
|
|
|
543
541
|
density?: 'compact' | 'normal' | 'relaxed';
|
|
544
542
|
stickyHeader?: boolean;
|
|
545
543
|
emptyState?: React.ReactNode;
|
|
546
|
-
|
|
544
|
+
/** `false` — or a single option — hides the rows-per-page select. */
|
|
545
|
+
pageSizeOptions?: number[] | false;
|
|
546
|
+
/** Renders the pager. Defaults to `false` once `onLoadMore` is given. */
|
|
547
|
+
pagination?: boolean;
|
|
548
|
+
/**
|
|
549
|
+
* Appends the next page instead of replacing the current one. Passing it
|
|
550
|
+
* puts a footer inside the table's own scroller — the element an infinite
|
|
551
|
+
* scroll needs to watch, which a host cannot add from the outside.
|
|
552
|
+
*/
|
|
553
|
+
onLoadMore?: () => void;
|
|
554
|
+
/** Whether anything is left to load. Defaults to `data.length < total`. */
|
|
555
|
+
hasMore?: boolean;
|
|
556
|
+
/** `false` waits for a click instead of loading as the footer scrolls in. */
|
|
557
|
+
autoLoadMore?: boolean;
|
|
547
558
|
/** Overrides for any of the table's own strings. Defaults are English. */
|
|
548
559
|
labels?: Partial<DataTableLabels>;
|
|
549
560
|
/** Locale for number formatting; defaults to the browser's. */
|
|
@@ -551,13 +562,17 @@ type DataTableProps<T> = {
|
|
|
551
562
|
caption?: string;
|
|
552
563
|
className?: string;
|
|
553
564
|
};
|
|
554
|
-
declare function DataTable<T>({ columns, data, rowKey, total, loading, error, onRetry, query, onQueryChange, selection, onSelectionChange, bulkActions, renderExpanded, onRowClick, layout: controlledLayout, onLayoutChange, persistKey, toolbar, autoFit, density, stickyHeader, emptyState, pageSizeOptions, labels: labelsProp, locale, caption, className, }: DataTableProps<T>): React.JSX.Element;
|
|
565
|
+
declare function DataTable<T>({ columns, data, rowKey, total, loading, error, onRetry, query, onQueryChange, selection, onSelectionChange, bulkActions, renderExpanded, onRowClick, rowClassName, rowProps, layout: controlledLayout, onLayoutChange, persistKey, toolbar, autoFit, density, stickyHeader, emptyState, pageSizeOptions, pagination, onLoadMore, hasMore, autoLoadMore, labels: labelsProp, locale, caption, className, }: DataTableProps<T>): React.JSX.Element;
|
|
555
566
|
|
|
556
567
|
declare function DataTablePagination({ query, total, rowsOnPage, pageSizeOptions, labels: labelsProp, locale, onQueryChange, }: {
|
|
557
568
|
query: DataTableQuery;
|
|
558
569
|
total?: number;
|
|
559
570
|
rowsOnPage: number;
|
|
560
|
-
|
|
571
|
+
/**
|
|
572
|
+
* `false` — or a single option — hides the control: a host whose backend
|
|
573
|
+
* fixes the page size would otherwise show a select that changes nothing.
|
|
574
|
+
*/
|
|
575
|
+
pageSizeOptions?: number[] | false;
|
|
561
576
|
labels?: Partial<DataTableLabels>;
|
|
562
577
|
/** Number formatting locale; defaults to the browser's. */
|
|
563
578
|
locale?: string;
|
|
@@ -689,4 +704,4 @@ declare function pageCount(total: number | undefined, pageSize: number): number;
|
|
|
689
704
|
declare function serializeSort(sort: DataTableSort[]): string;
|
|
690
705
|
declare function parseSort(raw: string | null): DataTableSort[];
|
|
691
706
|
|
|
692
|
-
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Button, type ButtonProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, ColumnFilter, type ColumnFilterDef, type ColumnLayout, ColumnManager, DataTable, type DataTableColumn, type DataTableFilters,
|
|
707
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Button, type ButtonProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, ColumnFilter, type ColumnFilterDef, type ColumnLayout, ColumnManager, type CustomFilterContext, DataTable, type DataTableColumn, type DataTableFilters, DataTableLabels, DataTablePagination, type DataTableProps, type DataTableQuery, type DataTableSort, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type EditableDef, Field, FieldError, FieldHint, FilterChip, type FilterValue, Input, type InputProps, Label, type MorzeTheme, MorzeThemeProvider, type MorzeThemeProviderProps, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, type RowAttributes, type RowSelectionState, type SavedView, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOptionDef, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, type SidebarMenuButtonProps, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarPanel, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, type SortDir, Spinner, Switch, type SwitchProps, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toggle, ToggleGroup, ToggleGroupItem, type Tone, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseSavedViewsOptions, type UseTableQueryOptions, activeFilters, badgeVariants, buttonVariants, cn, emptyQuery, isFilterActive, pageCount, parseSort, serializeSort, setFilter, sortStateOf, toggleSort, toggleVariants, useColumnLayout, useIsMobile, useMorzeTheme, useRowSelection, useSavedViews, useSidebar, useTableQuery };
|
package/dist/index.d.ts
CHANGED
|
@@ -3,6 +3,8 @@ import * as React from 'react';
|
|
|
3
3
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
4
4
|
import { VariantProps } from 'class-variance-authority';
|
|
5
5
|
import { Toggle as Toggle$1, ToggleGroup as ToggleGroup$1, Checkbox as Checkbox$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Slider as Slider$1, Label as Label$1, Select as Select$1, Tabs as Tabs$1, Accordion as Accordion$1, Progress as Progress$1, Avatar as Avatar$1, Separator as Separator$1, Dialog as Dialog$1, Popover as Popover$1, DropdownMenu as DropdownMenu$1, Tooltip as Tooltip$1 } from 'radix-ui';
|
|
6
|
+
import { D as DataTableLabels } from './types-B8jz2FF9.js';
|
|
7
|
+
export { M as MorzeCommonLabels, a as MorzeLocale, d as defaultDataTableLabels, r as resolveLabels } from './types-B8jz2FF9.js';
|
|
6
8
|
|
|
7
9
|
/**
|
|
8
10
|
* Class name joiner. Morze UI ships plain, prefixed CSS rather than utility
|
|
@@ -46,18 +48,15 @@ type ButtonProps = React.ComponentProps<'button'> & VariantProps<typeof buttonVa
|
|
|
46
48
|
tone?: Tone;
|
|
47
49
|
/** Swaps the label for a spinner and blocks interaction. */
|
|
48
50
|
loading?: boolean;
|
|
49
|
-
/** Pulsing morse dot before the label — the landing's signature accent. */
|
|
50
|
-
dot?: boolean;
|
|
51
51
|
};
|
|
52
|
-
declare function Button({ className, variant, size, asChild, tone, loading,
|
|
52
|
+
declare function Button({ className, variant, size, asChild, tone, loading, disabled, children, ...props }: ButtonProps): React.JSX.Element;
|
|
53
53
|
|
|
54
54
|
declare const badgeVariants: (props?: ({
|
|
55
55
|
variant?: "outline" | "solid" | "soft" | null | undefined;
|
|
56
56
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
57
|
-
declare function Badge({ className, variant, tone,
|
|
57
|
+
declare function Badge({ className, variant, tone, asChild, children, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
|
|
58
58
|
asChild?: boolean;
|
|
59
59
|
tone?: Tone;
|
|
60
|
-
dot?: boolean;
|
|
61
60
|
}): React.JSX.Element;
|
|
62
61
|
|
|
63
62
|
declare const toggleVariants: (props?: ({
|
|
@@ -364,6 +363,16 @@ type FilterValue = {
|
|
|
364
363
|
} | {
|
|
365
364
|
type: 'boolean';
|
|
366
365
|
value: boolean;
|
|
366
|
+
}
|
|
367
|
+
/**
|
|
368
|
+
* Whatever a host's own filter widget produces. The value travels into
|
|
369
|
+
* `query.filters` untouched — its shape is the host's business — and `label`
|
|
370
|
+
* is what the chip above the table shows.
|
|
371
|
+
*/
|
|
372
|
+
| {
|
|
373
|
+
type: 'custom';
|
|
374
|
+
value: unknown;
|
|
375
|
+
label?: string;
|
|
367
376
|
};
|
|
368
377
|
type DataTableFilters = Record<string, FilterValue>;
|
|
369
378
|
type DataTableQuery = {
|
|
@@ -376,6 +385,18 @@ type SelectOptionDef = {
|
|
|
376
385
|
value: string;
|
|
377
386
|
label: string;
|
|
378
387
|
};
|
|
388
|
+
/** What a `custom` filter's `render` gets to work with. */
|
|
389
|
+
type CustomFilterContext = {
|
|
390
|
+
/** The staged value — the popover's draft, not what the query carries yet. */
|
|
391
|
+
value: unknown;
|
|
392
|
+
label?: string;
|
|
393
|
+
/** Stages a value; it reaches the query when Apply is pressed. */
|
|
394
|
+
onChange: (value: unknown, label?: string) => void;
|
|
395
|
+
/** Stages and applies in one step, then closes the popover. */
|
|
396
|
+
commit: (value: unknown, label?: string) => void;
|
|
397
|
+
/** The table's resolved strings, so a host widget stays translated with it. */
|
|
398
|
+
labels: DataTableLabels;
|
|
399
|
+
};
|
|
379
400
|
/** Declares which control the header popover shows and what it sends back. */
|
|
380
401
|
type ColumnFilterDef = {
|
|
381
402
|
type: 'text';
|
|
@@ -394,6 +415,20 @@ type ColumnFilterDef = {
|
|
|
394
415
|
type: 'boolean';
|
|
395
416
|
trueLabel?: string;
|
|
396
417
|
falseLabel?: string;
|
|
418
|
+
}
|
|
419
|
+
/**
|
|
420
|
+
* A host-supplied control — async multiselect, range slider, presence
|
|
421
|
+
* toggle — rendered inside the kit's popover so it looks like the built-in
|
|
422
|
+
* filters and, unlike a widget smuggled into `column.header`, takes part in
|
|
423
|
+
* `query.filters`.
|
|
424
|
+
*/
|
|
425
|
+
| {
|
|
426
|
+
type: 'custom';
|
|
427
|
+
render: (context: CustomFilterContext) => React.ReactNode;
|
|
428
|
+
/** Chip text for a value; falls back to the label the widget supplied. */
|
|
429
|
+
describe?: (value: unknown) => string;
|
|
430
|
+
/** `false` drops the Apply/Reset footer — for a widget that commits itself. */
|
|
431
|
+
actions?: boolean;
|
|
397
432
|
};
|
|
398
433
|
type EditableDef<T> = {
|
|
399
434
|
type: 'text' | 'number' | 'select';
|
|
@@ -432,6 +467,10 @@ type DataTableColumn<T> = {
|
|
|
432
467
|
editable?: EditableDef<T>;
|
|
433
468
|
headerTitle?: string;
|
|
434
469
|
};
|
|
470
|
+
/** Anything valid on a `<tr>`, plus `data-*` — the row-level escape hatch. */
|
|
471
|
+
type RowAttributes = React.ComponentPropsWithoutRef<'tr'> & {
|
|
472
|
+
[key: `data-${string}`]: string | number | boolean | undefined;
|
|
473
|
+
};
|
|
435
474
|
/** Column layout is UI state, not query state — it never reaches the backend. */
|
|
436
475
|
type ColumnLayout = {
|
|
437
476
|
order: string[];
|
|
@@ -458,60 +497,6 @@ type RowSelectionState = {
|
|
|
458
497
|
};
|
|
459
498
|
declare const emptyQuery: DataTableQuery;
|
|
460
499
|
|
|
461
|
-
/**
|
|
462
|
-
* Every visible string the table owns, in one place. Defaults are English;
|
|
463
|
-
* pass a partial `labels` object to translate or reword any of them.
|
|
464
|
-
*/
|
|
465
|
-
type DataTableLabels = {
|
|
466
|
-
filter: string;
|
|
467
|
-
filterFor: (column: string) => string;
|
|
468
|
-
filterActive: string;
|
|
469
|
-
contains: string;
|
|
470
|
-
apply: string;
|
|
471
|
-
reset: string;
|
|
472
|
-
resetAll: string;
|
|
473
|
-
resetFilters: string;
|
|
474
|
-
clearFilter: string;
|
|
475
|
-
rangeFrom: string;
|
|
476
|
-
rangeTo: string;
|
|
477
|
-
dateFrom: string;
|
|
478
|
-
dateTo: string;
|
|
479
|
-
yes: string;
|
|
480
|
-
no: string;
|
|
481
|
-
columns: string;
|
|
482
|
-
moveUp: (column: string) => string;
|
|
483
|
-
moveDown: (column: string) => string;
|
|
484
|
-
pinning: (column: string, side: string) => string;
|
|
485
|
-
pinnedLeft: string;
|
|
486
|
-
pinnedRight: string;
|
|
487
|
-
notPinned: string;
|
|
488
|
-
show: (column: string) => string;
|
|
489
|
-
hide: (column: string) => string;
|
|
490
|
-
sortBy: (column: string) => string;
|
|
491
|
-
columnWidth: (column: string) => string;
|
|
492
|
-
selectPage: string;
|
|
493
|
-
selectRow: string;
|
|
494
|
-
expandRow: string;
|
|
495
|
-
collapseRow: string;
|
|
496
|
-
details: string;
|
|
497
|
-
empty: string;
|
|
498
|
-
retry: string;
|
|
499
|
-
rowsPerPage: string;
|
|
500
|
-
nothingFound: string;
|
|
501
|
-
of: string;
|
|
502
|
-
firstPage: string;
|
|
503
|
-
previousPage: string;
|
|
504
|
-
nextPage: string;
|
|
505
|
-
lastPage: string;
|
|
506
|
-
selectedCount: (count: string) => string;
|
|
507
|
-
allMatchingSuffix: string;
|
|
508
|
-
selectAllMatching: (total: string) => string;
|
|
509
|
-
clearSelection: string;
|
|
510
|
-
bulkActions: string;
|
|
511
|
-
};
|
|
512
|
-
declare const defaultDataTableLabels: DataTableLabels;
|
|
513
|
-
declare function resolveLabels(labels?: Partial<DataTableLabels>): DataTableLabels;
|
|
514
|
-
|
|
515
500
|
type DataTableProps<T> = {
|
|
516
501
|
columns: DataTableColumn<T>[];
|
|
517
502
|
data: T[];
|
|
@@ -529,6 +514,19 @@ type DataTableProps<T> = {
|
|
|
529
514
|
bulkActions?: (selection: RowSelectionState) => React.ReactNode;
|
|
530
515
|
renderExpanded?: (row: T) => React.ReactNode;
|
|
531
516
|
onRowClick?: (row: T) => void;
|
|
517
|
+
/** Per-row class name — tinting a row by record state, marking it stale. */
|
|
518
|
+
rowClassName?: (row: T, context: {
|
|
519
|
+
rowIndex: number;
|
|
520
|
+
}) => string | undefined;
|
|
521
|
+
/**
|
|
522
|
+
* Extra attributes for the row element: `data-*`, `title`, `aria-*`, a
|
|
523
|
+
* handler of your own. The table's own attributes win, so this cannot break
|
|
524
|
+
* selection, expansion or the pinned-column seam; a `className` here is
|
|
525
|
+
* merged, and an `onClick` runs before `onRowClick`.
|
|
526
|
+
*/
|
|
527
|
+
rowProps?: (row: T, context: {
|
|
528
|
+
rowIndex: number;
|
|
529
|
+
}) => RowAttributes;
|
|
532
530
|
layout?: Partial<ColumnLayout>;
|
|
533
531
|
onLayoutChange?: (layout: ColumnLayout) => void;
|
|
534
532
|
/** localStorage key for widths, order, visibility and pinning. */
|
|
@@ -543,7 +541,20 @@ type DataTableProps<T> = {
|
|
|
543
541
|
density?: 'compact' | 'normal' | 'relaxed';
|
|
544
542
|
stickyHeader?: boolean;
|
|
545
543
|
emptyState?: React.ReactNode;
|
|
546
|
-
|
|
544
|
+
/** `false` — or a single option — hides the rows-per-page select. */
|
|
545
|
+
pageSizeOptions?: number[] | false;
|
|
546
|
+
/** Renders the pager. Defaults to `false` once `onLoadMore` is given. */
|
|
547
|
+
pagination?: boolean;
|
|
548
|
+
/**
|
|
549
|
+
* Appends the next page instead of replacing the current one. Passing it
|
|
550
|
+
* puts a footer inside the table's own scroller — the element an infinite
|
|
551
|
+
* scroll needs to watch, which a host cannot add from the outside.
|
|
552
|
+
*/
|
|
553
|
+
onLoadMore?: () => void;
|
|
554
|
+
/** Whether anything is left to load. Defaults to `data.length < total`. */
|
|
555
|
+
hasMore?: boolean;
|
|
556
|
+
/** `false` waits for a click instead of loading as the footer scrolls in. */
|
|
557
|
+
autoLoadMore?: boolean;
|
|
547
558
|
/** Overrides for any of the table's own strings. Defaults are English. */
|
|
548
559
|
labels?: Partial<DataTableLabels>;
|
|
549
560
|
/** Locale for number formatting; defaults to the browser's. */
|
|
@@ -551,13 +562,17 @@ type DataTableProps<T> = {
|
|
|
551
562
|
caption?: string;
|
|
552
563
|
className?: string;
|
|
553
564
|
};
|
|
554
|
-
declare function DataTable<T>({ columns, data, rowKey, total, loading, error, onRetry, query, onQueryChange, selection, onSelectionChange, bulkActions, renderExpanded, onRowClick, layout: controlledLayout, onLayoutChange, persistKey, toolbar, autoFit, density, stickyHeader, emptyState, pageSizeOptions, labels: labelsProp, locale, caption, className, }: DataTableProps<T>): React.JSX.Element;
|
|
565
|
+
declare function DataTable<T>({ columns, data, rowKey, total, loading, error, onRetry, query, onQueryChange, selection, onSelectionChange, bulkActions, renderExpanded, onRowClick, rowClassName, rowProps, layout: controlledLayout, onLayoutChange, persistKey, toolbar, autoFit, density, stickyHeader, emptyState, pageSizeOptions, pagination, onLoadMore, hasMore, autoLoadMore, labels: labelsProp, locale, caption, className, }: DataTableProps<T>): React.JSX.Element;
|
|
555
566
|
|
|
556
567
|
declare function DataTablePagination({ query, total, rowsOnPage, pageSizeOptions, labels: labelsProp, locale, onQueryChange, }: {
|
|
557
568
|
query: DataTableQuery;
|
|
558
569
|
total?: number;
|
|
559
570
|
rowsOnPage: number;
|
|
560
|
-
|
|
571
|
+
/**
|
|
572
|
+
* `false` — or a single option — hides the control: a host whose backend
|
|
573
|
+
* fixes the page size would otherwise show a select that changes nothing.
|
|
574
|
+
*/
|
|
575
|
+
pageSizeOptions?: number[] | false;
|
|
561
576
|
labels?: Partial<DataTableLabels>;
|
|
562
577
|
/** Number formatting locale; defaults to the browser's. */
|
|
563
578
|
locale?: string;
|
|
@@ -689,4 +704,4 @@ declare function pageCount(total: number | undefined, pageSize: number): number;
|
|
|
689
704
|
declare function serializeSort(sort: DataTableSort[]): string;
|
|
690
705
|
declare function parseSort(raw: string | null): DataTableSort[];
|
|
691
706
|
|
|
692
|
-
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Button, type ButtonProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, ColumnFilter, type ColumnFilterDef, type ColumnLayout, ColumnManager, DataTable, type DataTableColumn, type DataTableFilters,
|
|
707
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Button, type ButtonProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, ColumnFilter, type ColumnFilterDef, type ColumnLayout, ColumnManager, type CustomFilterContext, DataTable, type DataTableColumn, type DataTableFilters, DataTableLabels, DataTablePagination, type DataTableProps, type DataTableQuery, type DataTableSort, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type EditableDef, Field, FieldError, FieldHint, FilterChip, type FilterValue, Input, type InputProps, Label, type MorzeTheme, MorzeThemeProvider, type MorzeThemeProviderProps, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, type RowAttributes, type RowSelectionState, type SavedView, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOptionDef, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, type SidebarMenuButtonProps, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarPanel, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, type SortDir, Spinner, Switch, type SwitchProps, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toggle, ToggleGroup, ToggleGroupItem, type Tone, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseSavedViewsOptions, type UseTableQueryOptions, activeFilters, badgeVariants, buttonVariants, cn, emptyQuery, isFilterActive, pageCount, parseSort, serializeSort, setFilter, sortStateOf, toggleSort, toggleVariants, useColumnLayout, useIsMobile, useMorzeTheme, useRowSelection, useSavedViews, useSidebar, useTableQuery };
|