@rafal.lemieszewski/tide-ui 0.29.1 → 0.30.1
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/components/index.d.ts +5 -1
- package/dist/components/ui/bookmarks.d.ts +41 -0
- package/dist/components/ui/data-table-settings-menu.d.ts +21 -0
- package/dist/components/ui/data-table.d.ts +15 -9
- package/dist/components/ui/filters.d.ts +16 -1
- package/dist/index.cjs.js +1700 -1700
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.es.js +28477 -27698
- package/dist/index.es.js.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +2 -1
|
@@ -63,8 +63,12 @@ export { Popover, PopoverTrigger, PopoverContent } from './ui/popover';
|
|
|
63
63
|
export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, TableSortHeader, TableGroupHeader, tableVariants, tableRowVariants, tableCellVariants, tableHeaderVariants, } from './ui/table';
|
|
64
64
|
export type { TableProps, TableRowProps, TableHeadProps, TableCellProps, TableSortHeaderProps, } from './ui/table';
|
|
65
65
|
export { DataTable } from './ui/data-table';
|
|
66
|
+
export { DataTableSettingsMenu } from './ui/data-table-settings-menu';
|
|
67
|
+
export type { DataTableSettingsMenuProps, ColumnOption } from './ui/data-table-settings-menu';
|
|
66
68
|
export { Filters, FilterPanelContent, FilterDropdownMenu } from './ui/filters';
|
|
67
|
-
export type { FiltersProps, FilterDefinition, FilterOption, FilterOptionGroup, FilterValue, } from './ui/filters';
|
|
69
|
+
export type { FiltersProps, FilterDefinition, FilterOption, FilterOptionGroup, FilterValue, GlobalSearchTerm, } from './ui/filters';
|
|
70
|
+
export { Bookmarks } from './ui/bookmarks';
|
|
71
|
+
export type { Bookmark, BookmarksProps, FiltersState, TableState, } from './ui/bookmarks';
|
|
68
72
|
export { LinkedChart, createLinkedChartColumns } from './ui/linked-chart';
|
|
69
73
|
export type { LinkedChartProps, LinkedChartColumn } from './ui/linked-chart';
|
|
70
74
|
export { ResizablePanelGroup, ResizablePanel, ResizableHandle } from './ui/resizable';
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { FilterValue } from './filters';
|
|
2
|
+
import { SortingState, VisibilityState, GroupingState, ColumnOrderState } from '@tanstack/react-table';
|
|
3
|
+
export interface FiltersState {
|
|
4
|
+
activeFilters: Record<string, FilterValue>;
|
|
5
|
+
pinnedFilters?: string[];
|
|
6
|
+
globalSearchTerms: string[];
|
|
7
|
+
}
|
|
8
|
+
export interface TableState {
|
|
9
|
+
sorting: SortingState;
|
|
10
|
+
columnVisibility: VisibilityState;
|
|
11
|
+
grouping: GroupingState;
|
|
12
|
+
columnOrder: ColumnOrderState;
|
|
13
|
+
columnSizing: Record<string, number>;
|
|
14
|
+
}
|
|
15
|
+
export interface Bookmark {
|
|
16
|
+
id: string;
|
|
17
|
+
name: string;
|
|
18
|
+
type: "system" | "user";
|
|
19
|
+
isDefault?: boolean;
|
|
20
|
+
createdAt: Date;
|
|
21
|
+
updatedAt: Date;
|
|
22
|
+
count?: number;
|
|
23
|
+
filtersState?: FiltersState;
|
|
24
|
+
tableState?: TableState;
|
|
25
|
+
}
|
|
26
|
+
export interface BookmarksProps {
|
|
27
|
+
variant: "list" | "tabs";
|
|
28
|
+
bookmarks: Bookmark[];
|
|
29
|
+
systemBookmarks: Bookmark[];
|
|
30
|
+
activeBookmarkId?: string;
|
|
31
|
+
defaultBookmarkId?: string;
|
|
32
|
+
isDirty: boolean;
|
|
33
|
+
hideActions?: boolean;
|
|
34
|
+
onSelect: (bookmark: Bookmark) => void;
|
|
35
|
+
onRevert: () => void;
|
|
36
|
+
onSave: (action: "update" | "create", name?: string) => Promise<void>;
|
|
37
|
+
onRename: (id: string, newName: string) => Promise<void>;
|
|
38
|
+
onDelete: (id: string) => Promise<void>;
|
|
39
|
+
onSetDefault: (id: string) => Promise<void>;
|
|
40
|
+
}
|
|
41
|
+
export declare function Bookmarks({ variant, bookmarks, systemBookmarks, activeBookmarkId, isDirty, hideActions, onSelect, onRevert, onSave, onRename, onDelete, onSetDefault, }: BookmarksProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
interface ColumnOption {
|
|
2
|
+
id: string;
|
|
3
|
+
label: string;
|
|
4
|
+
}
|
|
5
|
+
interface DataTableSettingsMenuProps {
|
|
6
|
+
sortableColumns: ColumnOption[];
|
|
7
|
+
selectedSortColumn?: string;
|
|
8
|
+
sortDirection?: 'asc' | 'desc';
|
|
9
|
+
onSortChange?: (columnId: string) => void;
|
|
10
|
+
onSortDirectionChange?: (direction: 'asc' | 'desc') => void;
|
|
11
|
+
groupableColumns: ColumnOption[];
|
|
12
|
+
selectedGroupColumn?: string;
|
|
13
|
+
onGroupChange?: (columnId: string) => void;
|
|
14
|
+
columns: ColumnOption[];
|
|
15
|
+
visibleColumns: string[];
|
|
16
|
+
onColumnVisibilityChange?: (columnId: string, visible: boolean) => void;
|
|
17
|
+
align?: "start" | "end";
|
|
18
|
+
triggerClassName?: string;
|
|
19
|
+
}
|
|
20
|
+
export declare function DataTableSettingsMenu({ sortableColumns, selectedSortColumn, sortDirection, onSortChange, onSortDirectionChange, groupableColumns, selectedGroupColumn, onGroupChange, columns, visibleColumns, onColumnVisibilityChange, align, triggerClassName, }: DataTableSettingsMenuProps): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export type { DataTableSettingsMenuProps, ColumnOption };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ColumnDef, ExpandedState, GroupingState, FilterFn, ColumnResizeMode } from '@tanstack/react-table';
|
|
1
|
+
import { ColumnDef, SortingState, VisibilityState, ExpandedState, GroupingState, ColumnOrderState, FilterFn, ColumnResizeMode } from '@tanstack/react-table';
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
export type FilterVariant = "text" | "select" | "multiselect" | "number" | "date" | "boolean";
|
|
4
4
|
export interface NestedHeaderConfig {
|
|
@@ -32,23 +32,19 @@ interface DataTableToolbarProps<_TData = any> {
|
|
|
32
32
|
table: any;
|
|
33
33
|
searchKey?: string;
|
|
34
34
|
searchPlaceholder?: string;
|
|
35
|
-
showViewOptions?: boolean;
|
|
36
35
|
enableGlobalSearch?: boolean;
|
|
37
36
|
globalSearchPlaceholder?: string;
|
|
38
37
|
globalFilter?: string;
|
|
39
38
|
onGlobalFilterChange?: (value: string) => void;
|
|
40
39
|
enableGlobalFaceting?: boolean;
|
|
41
40
|
enableGrouping?: boolean;
|
|
41
|
+
showSettingsMenu?: boolean;
|
|
42
42
|
}
|
|
43
|
-
declare function DataTableToolbar<TData>({ table, searchKey, searchPlaceholder,
|
|
43
|
+
declare function DataTableToolbar<TData>({ table, searchKey, searchPlaceholder, enableGlobalSearch, globalSearchPlaceholder, globalFilter, onGlobalFilterChange, enableGlobalFaceting, enableGrouping, showSettingsMenu, }: DataTableToolbarProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
44
44
|
interface DataTableFilterProps {
|
|
45
45
|
column: any;
|
|
46
46
|
}
|
|
47
47
|
declare function DataTableFilter({ column }: DataTableFilterProps): import("react/jsx-runtime").JSX.Element;
|
|
48
|
-
interface DataTableViewOptionsProps<_TData = any> {
|
|
49
|
-
table: any;
|
|
50
|
-
}
|
|
51
|
-
declare function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
52
48
|
interface DataTableColumnHeaderProps<_TData = any, _TValue = any> extends React.HTMLAttributes<HTMLDivElement> {
|
|
53
49
|
column: any;
|
|
54
50
|
title: string;
|
|
@@ -109,10 +105,20 @@ export interface DataTableProps<TData, TValue> {
|
|
|
109
105
|
bottom?: string[];
|
|
110
106
|
};
|
|
111
107
|
};
|
|
108
|
+
sorting?: SortingState;
|
|
109
|
+
onSortingChange?: (updaterOrValue: SortingState | ((old: SortingState) => SortingState)) => void;
|
|
110
|
+
columnVisibility?: VisibilityState;
|
|
111
|
+
onColumnVisibilityChange?: (updaterOrValue: VisibilityState | ((old: VisibilityState) => VisibilityState)) => void;
|
|
112
|
+
grouping?: GroupingState;
|
|
113
|
+
onGroupingChange?: (updaterOrValue: GroupingState | ((old: GroupingState) => GroupingState)) => void;
|
|
114
|
+
columnOrder?: ColumnOrderState;
|
|
115
|
+
onColumnOrderChange?: (updaterOrValue: ColumnOrderState | ((old: ColumnOrderState) => ColumnOrderState)) => void;
|
|
116
|
+
columnSizing?: Record<string, number>;
|
|
117
|
+
onColumnSizingChange?: (updaterOrValue: Record<string, number> | ((old: Record<string, number>) => Record<string, number>)) => void;
|
|
112
118
|
renderSectionHeaderRow?: (row: any) => React.ReactNode | null;
|
|
113
119
|
autoExpandChildren?: boolean;
|
|
114
120
|
}
|
|
115
|
-
export declare function DataTable<TData, TValue>({ columns, data, searchKey, searchPlaceholder, title, className, stickyHeader, stickyFirstColumn, stickyLeftColumns, stickyRightColumns, enableResponsiveWrapper, showScrollIndicators, isLoading, loadingRowCount, borderStyle, enableGlobalSearch, globalSearchPlaceholder, enableGlobalFaceting, enableColumnResizing, columnResizeMode, enableColumnResizePersistence, storageKey, enableExpanding, getSubRows, enableGrouping, groupedColumnMode, enableManualGrouping, enableRowPinning, keepPinnedRows, enableVirtualization, nestedHeaders, enableNestedHeaders, enableColumnOrdering, enableRowSelection, showHeader, showPagination, onTableReady, initialState, renderSectionHeaderRow, autoExpandChildren, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
|
|
116
|
-
export { DataTableColumnHeader, DataTableFilter, DataTableToolbar, DataTablePagination, DataTableSkeleton,
|
|
121
|
+
export declare function DataTable<TData, TValue>({ columns, data, searchKey, searchPlaceholder, title, className, stickyHeader, stickyFirstColumn, stickyLeftColumns, stickyRightColumns, enableResponsiveWrapper, showScrollIndicators, isLoading, loadingRowCount, borderStyle, enableGlobalSearch, globalSearchPlaceholder, enableGlobalFaceting, enableColumnResizing, columnResizeMode, enableColumnResizePersistence, storageKey, enableExpanding, getSubRows, enableGrouping, groupedColumnMode, enableManualGrouping, enableRowPinning, keepPinnedRows, enableVirtualization, nestedHeaders, enableNestedHeaders, enableColumnOrdering, enableRowSelection, showHeader, showPagination, onTableReady, initialState, sorting: controlledSorting, onSortingChange: onControlledSortingChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange: onControlledColumnVisibilityChange, grouping: controlledGrouping, onGroupingChange: onControlledGroupingChange, columnOrder: controlledColumnOrder, onColumnOrderChange: onControlledColumnOrderChange, columnSizing: controlledColumnSizing, onColumnSizingChange: onControlledColumnSizingChange, renderSectionHeaderRow, autoExpandChildren, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
|
|
122
|
+
export { DataTableColumnHeader, DataTableFilter, DataTableToolbar, DataTablePagination, DataTableSkeleton, fuzzyFilter, multiSelectFilter };
|
|
117
123
|
export { useReactTable } from '@tanstack/react-table';
|
|
118
124
|
export type { SortingState, ColumnFiltersState, VisibilityState, ExpandedState, GroupingState, ColumnOrderState, FilterFn, ColumnResizeMode, } from '@tanstack/react-table';
|
|
@@ -21,6 +21,15 @@ export interface FilterDefinition {
|
|
|
21
21
|
searchPlaceholder?: string;
|
|
22
22
|
formatValue?: (values: string[], count: number) => string;
|
|
23
23
|
}
|
|
24
|
+
export interface GlobalSearchTerm {
|
|
25
|
+
value: string;
|
|
26
|
+
matchedFilter?: {
|
|
27
|
+
filterId: string;
|
|
28
|
+
icon: React.ComponentType<{
|
|
29
|
+
className?: string;
|
|
30
|
+
}>;
|
|
31
|
+
};
|
|
32
|
+
}
|
|
24
33
|
export interface FiltersProps {
|
|
25
34
|
filters: FilterDefinition[];
|
|
26
35
|
pinnedFilters: string[];
|
|
@@ -29,6 +38,12 @@ export interface FiltersProps {
|
|
|
29
38
|
onFilterChange: (filterId: string, value: FilterValue) => void;
|
|
30
39
|
onFilterClear: (filterId: string) => void;
|
|
31
40
|
onFilterReset: () => void;
|
|
41
|
+
enableGlobalSearch?: boolean;
|
|
42
|
+
globalSearchTerms?: string[];
|
|
43
|
+
onGlobalSearchChange?: (terms: string[]) => void;
|
|
44
|
+
globalSearchPlaceholder?: string;
|
|
45
|
+
hideReset?: boolean;
|
|
46
|
+
actionButtons?: React.ReactNode;
|
|
32
47
|
}
|
|
33
48
|
interface FilterPanelContentProps {
|
|
34
49
|
filter: FilterDefinition;
|
|
@@ -45,5 +60,5 @@ interface FilterDropdownMenuProps {
|
|
|
45
60
|
onFilterChange: (filterId: string, value: FilterValue) => void;
|
|
46
61
|
}
|
|
47
62
|
export declare function FilterDropdownMenu({ filters, pinnedFilters, activeFilters, onPinnedFiltersChange, onFilterChange, }: FilterDropdownMenuProps): import("react/jsx-runtime").JSX.Element;
|
|
48
|
-
export declare function Filters({ filters, pinnedFilters, activeFilters, onPinnedFiltersChange, onFilterChange, onFilterClear, onFilterReset, }: FiltersProps): import("react/jsx-runtime").JSX.Element;
|
|
63
|
+
export declare function Filters({ filters, pinnedFilters, activeFilters, onPinnedFiltersChange, onFilterChange, onFilterClear, onFilterReset, enableGlobalSearch, globalSearchTerms, onGlobalSearchChange, globalSearchPlaceholder, hideReset, actionButtons, }: FiltersProps): import("react/jsx-runtime").JSX.Element;
|
|
49
64
|
export {};
|