@rebasepro/ui 0.0.1-canary.1 → 0.0.1-canary.4d4fb3e

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.
Files changed (51) hide show
  1. package/dist/components/CircularProgressCenter.d.ts +11 -0
  2. package/dist/components/ErrorBoundary.d.ts +11 -0
  3. package/dist/components/MultiSelect.d.ts +1 -1
  4. package/dist/components/SearchBar.d.ts +2 -6
  5. package/dist/components/Tabs.d.ts +1 -1
  6. package/dist/components/VirtualTable/VirtualTable.d.ts +11 -0
  7. package/dist/components/VirtualTable/VirtualTableCell.d.ts +20 -0
  8. package/dist/components/VirtualTable/VirtualTableHeader.d.ts +29 -0
  9. package/dist/components/VirtualTable/VirtualTableHeaderRow.d.ts +2 -0
  10. package/dist/components/VirtualTable/VirtualTableProps.d.ts +238 -0
  11. package/dist/components/VirtualTable/VirtualTableRow.d.ts +3 -0
  12. package/dist/components/VirtualTable/index.d.ts +3 -0
  13. package/dist/components/VirtualTable/types.d.ts +37 -0
  14. package/dist/components/index.d.ts +3 -0
  15. package/dist/hooks/index.d.ts +2 -0
  16. package/dist/hooks/useDebounceCallback.d.ts +1 -0
  17. package/dist/hooks/useDebouncedCallback.d.ts +1 -0
  18. package/dist/index.es.js +1537 -213
  19. package/dist/index.es.js.map +1 -1
  20. package/dist/index.umd.js +1533 -213
  21. package/dist/index.umd.js.map +1 -1
  22. package/dist/util/cls.d.ts +0 -4
  23. package/package.json +12 -14
  24. package/src/components/BooleanSwitchWithLabel.tsx +1 -1
  25. package/src/components/Button.tsx +1 -1
  26. package/src/components/CircularProgressCenter.tsx +27 -0
  27. package/src/components/ErrorBoundary.tsx +41 -0
  28. package/src/components/LoadingButton.tsx +1 -1
  29. package/src/components/MultiSelect.tsx +1 -1
  30. package/src/components/SearchBar.tsx +9 -13
  31. package/src/components/Select.tsx +1 -1
  32. package/src/components/Sheet.tsx +4 -4
  33. package/src/components/Tabs.tsx +17 -17
  34. package/src/components/TextField.tsx +1 -1
  35. package/src/components/VirtualTable/VirtualTable.performance.test.tsx +386 -0
  36. package/src/components/VirtualTable/VirtualTable.tsx +627 -0
  37. package/src/components/VirtualTable/VirtualTableCell.tsx +56 -0
  38. package/src/components/VirtualTable/VirtualTableHeader.tsx +272 -0
  39. package/src/components/VirtualTable/VirtualTableHeaderRow.tsx +249 -0
  40. package/src/components/VirtualTable/VirtualTableProps.tsx +298 -0
  41. package/src/components/VirtualTable/VirtualTableRow.tsx +51 -0
  42. package/src/components/VirtualTable/index.tsx +3 -0
  43. package/src/components/VirtualTable/types.tsx +46 -0
  44. package/src/components/index.tsx +3 -1
  45. package/src/hooks/index.ts +2 -0
  46. package/src/hooks/useDebounceCallback.tsx +20 -0
  47. package/src/hooks/useDebouncedCallback.ts +39 -0
  48. package/src/util/cls.ts +1 -7
  49. package/dist/scripts/generateIconKeys.d.ts +0 -1
  50. package/dist/scripts/generateIcons.d.ts +0 -1
  51. package/dist/scripts/saveIconFiles.d.ts +0 -1
@@ -0,0 +1,11 @@
1
+ import { CircularProgressProps } from "./CircularProgress";
2
+ /**
3
+ *
4
+ * @param text
5
+ * @param props
6
+
7
+ * @ignore
8
+ */
9
+ export declare function CircularProgressCenter({ text, ...props }: CircularProgressProps & {
10
+ text?: string;
11
+ }): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,11 @@
1
+ import React, { ErrorInfo, PropsWithChildren } from "react";
2
+ export declare class ErrorBoundary extends React.Component<PropsWithChildren<Record<string, unknown>>, {
3
+ error: Error | null;
4
+ }> {
5
+ constructor(props: any);
6
+ static getDerivedStateFromError(error: Error): {
7
+ error: Error;
8
+ };
9
+ componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
10
+ render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
11
+ }
@@ -5,7 +5,7 @@ interface MultiSelectContextProps<T extends MultiSelectValue = string> {
5
5
  fieldValue?: T[];
6
6
  onItemClick: (v: T) => void;
7
7
  }
8
- export declare const MultiSelectContext: React.Context<MultiSelectContextProps<any>>;
8
+ export declare const MultiSelectContext: React.Context<MultiSelectContextProps<MultiSelectValue>>;
9
9
  /**
10
10
  * Props for MultiSelect component
11
11
  */
@@ -10,11 +10,7 @@ interface SearchBarProps {
10
10
  * - "medium": 44px height (matches TextField medium)
11
11
  * @default "medium"
12
12
  */
13
- size?: "small" | "medium";
14
- /**
15
- * @deprecated Use size="medium" or size="small" instead. This prop will be removed in a future version.
16
- */
17
- large?: boolean;
13
+ size?: "smallest" | "small" | "medium";
18
14
  innerClassName?: string;
19
15
  className?: string;
20
16
  autoFocus?: boolean;
@@ -22,5 +18,5 @@ interface SearchBarProps {
22
18
  loading?: boolean;
23
19
  inputRef?: React.Ref<HTMLInputElement>;
24
20
  }
25
- export declare function SearchBar({ onClick, onTextSearch, placeholder, expandable, size, large, innerClassName, className, autoFocus, disabled, loading, inputRef }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
21
+ export declare function SearchBar({ onClick, onTextSearch, placeholder, expandable, size, innerClassName, className, autoFocus, disabled, loading, inputRef }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
26
22
  export {};
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- export type TabVariant = "standard" | "underline" | "invisible";
2
+ export type TabVariant = "standard" | "boxy" | "pill";
3
3
  export type TabsProps = {
4
4
  value: string;
5
5
  children: React.ReactNode;
@@ -0,0 +1,11 @@
1
+ import React from "react";
2
+ import { VirtualTableProps } from "./VirtualTableProps";
3
+ /**
4
+ * This is a Table component that allows displaying arbitrary data, not
5
+ * necessarily related to entities or properties. It is the component
6
+ * that powers the entity collections but has a generic API, so it
7
+ * can be reused.
8
+ *
9
+ * @group Components
10
+ */
11
+ export declare const VirtualTable: React.NamedExoticComponent<VirtualTableProps<any>>;
@@ -0,0 +1,20 @@
1
+ import React from "react";
2
+ import { CellRendererParams, VirtualTableColumn } from "./VirtualTableProps";
3
+ type VirtualTableCellProps<T extends any> = {
4
+ dataKey: string;
5
+ column: VirtualTableColumn;
6
+ columns: VirtualTableColumn[];
7
+ rowData: any;
8
+ cellData: any;
9
+ rowIndex: any;
10
+ columnIndex: number;
11
+ cellRenderer: (props: CellRendererParams<T>) => React.ReactNode;
12
+ sortableNodeRef?: (node: HTMLElement | null) => void;
13
+ sortableStyle?: React.CSSProperties;
14
+ sortableAttributes?: Record<string, any>;
15
+ isDragging?: boolean;
16
+ isDraggable?: boolean;
17
+ frozen?: boolean;
18
+ };
19
+ export declare const VirtualTableCell: React.NamedExoticComponent<VirtualTableCellProps<any>>;
20
+ export {};
@@ -0,0 +1,29 @@
1
+ import React from "react";
2
+ import { VirtualTableColumn, VirtualTableSort, VirtualTableWhereFilterOp } from "./VirtualTableProps";
3
+ export type FilterFormFieldProps<CustomProps> = {
4
+ id: React.Key;
5
+ filterValue: [VirtualTableWhereFilterOp, any] | undefined;
6
+ setFilterValue: (filterValue?: [VirtualTableWhereFilterOp, any]) => void;
7
+ column: VirtualTableColumn<CustomProps>;
8
+ hidden: boolean;
9
+ setHidden: (hidden: boolean) => void;
10
+ };
11
+ type VirtualTableHeaderProps<M extends Record<string, any>> = {
12
+ resizeHandleRef: React.Ref<HTMLDivElement>;
13
+ columnIndex: number;
14
+ isResizingIndex: number;
15
+ column: VirtualTableColumn<any>;
16
+ onColumnSort: (key: Extract<keyof M, string>) => void;
17
+ filter?: [VirtualTableWhereFilterOp, any];
18
+ sort: VirtualTableSort;
19
+ onFilterUpdate: (column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, any]) => void;
20
+ onClickResizeColumn?: (columnIndex: number, column: VirtualTableColumn) => void;
21
+ createFilterField?: (props: FilterFormFieldProps<any>) => React.ReactNode;
22
+ AdditionalHeaderWidget?: (props: {
23
+ onHover: boolean;
24
+ }) => React.ReactNode;
25
+ isDragging?: boolean;
26
+ isDraggable?: boolean;
27
+ };
28
+ export declare const VirtualTableHeader: React.FunctionComponent<VirtualTableHeaderProps<any>>;
29
+ export {};
@@ -0,0 +1,2 @@
1
+ import { VirtualTableContextProps } from "./types";
2
+ export declare const VirtualTableHeaderRow: ({ columns, currentSort, onColumnSort, onFilterUpdate, sortByProperty, filter, onColumnResize, onColumnResizeEnd, createFilterField, AddColumnComponent, onColumnsOrderChange, data, cellRenderer: CellRenderer, rowHeight, draggingColumnId, headerHeight }: VirtualTableContextProps<any>) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,238 @@
1
+ import React from "react";
2
+ import { FilterFormFieldProps } from "./VirtualTableHeader";
3
+ export type OnRowClickParams<T extends Record<string, any>> = {
4
+ rowData: T;
5
+ rowIndex: number;
6
+ event: React.SyntheticEvent;
7
+ };
8
+ /**
9
+ * @see Table
10
+ * @group Components
11
+ */
12
+ export interface VirtualTableProps<T extends Record<string, any>> {
13
+ /**
14
+ * Array of arbitrary data
15
+ */
16
+ data?: T[];
17
+ /**
18
+ * Properties displayed in this collection. If this property is not set
19
+ * every property is displayed, you can filter
20
+ */
21
+ columns: VirtualTableColumn[];
22
+ /**
23
+ * Custom cell renderer
24
+ * The renderer receives props `{ cellData, columns, column, columnIndex, rowData, rowIndex, container, isScrolling }`
25
+ */
26
+ cellRenderer: (props: CellRendererParams<T>) => React.ReactNode;
27
+ /**
28
+ * Set this callback if you want to support some combinations
29
+ * of filter combinations only.
30
+ * @param filterValues
31
+ * @param sortBy
32
+ */
33
+ checkFilterCombination?: (filterValues: VirtualTableFilterValues<Extract<keyof T, string>>, sortBy?: [string, "asc" | "desc"]) => boolean;
34
+ /**
35
+ * A callback function when scrolling the table to near the end
36
+ */
37
+ onEndReached?: () => void;
38
+ /**
39
+ * Offset in pixels where the onEndReached callback is triggered
40
+ */
41
+ endOffset?: number;
42
+ /**
43
+ * When the pagination should be reset. E.g. the filters or sorting
44
+ * has been reset.
45
+ */
46
+ onResetPagination?: () => void;
47
+ /**
48
+ * Callback when a row is clicked
49
+ */
50
+ onRowClick?: (props: OnRowClickParams<T>) => void;
51
+ /**
52
+ * Callback when a column is resized
53
+ */
54
+ onColumnResize?: (params: OnVirtualTableColumnResizeParams) => void;
55
+ onColumnResizeEnd?: (params: OnVirtualTableColumnResizeParams) => void;
56
+ /**
57
+ * Size of the table
58
+ */
59
+ rowHeight?: number;
60
+ headerHeight?: number;
61
+ /**
62
+ * In case this table should have some filters set by default
63
+ */
64
+ filter?: VirtualTableFilterValues<any>;
65
+ /**
66
+ * Callback used when filters are updated
67
+ * @param filter
68
+ */
69
+ onFilterUpdate?: (filter?: VirtualTableFilterValues<any> | undefined) => void;
70
+ /**
71
+ * Callback when the table is scrolled
72
+ * @param props
73
+ */
74
+ onScroll?: (props: {
75
+ scrollDirection: "forward" | "backward";
76
+ scrollOffset: number;
77
+ scrollUpdateWasRequested: boolean;
78
+ }) => void;
79
+ /**
80
+ * Default sort applied to this collection
81
+ */
82
+ sortBy?: [string, "asc" | "desc"];
83
+ /**
84
+ * Callback used when sorting is updated
85
+ * @param sortBy
86
+ */
87
+ onSortByUpdate?: (sortBy?: [string, "asc" | "desc"]) => void;
88
+ /**
89
+ * If there is an error loading data you can pass it here, so it gets
90
+ * displayed instead of the content
91
+ */
92
+ error?: Error;
93
+ /**
94
+ * Message displayed when there is no data
95
+ */
96
+ emptyComponent?: React.ReactNode;
97
+ /**
98
+ * Is the table in a loading state
99
+ */
100
+ loading?: boolean;
101
+ /**
102
+ * Should apply a different style when hovering
103
+ */
104
+ hoverRow?: boolean;
105
+ /**
106
+ * Apply a custom class name to the row
107
+ * @param rowData
108
+ */
109
+ rowClassName?: (rowData: T) => string | undefined;
110
+ /**
111
+ * Callback to create a filter field, displayed in the header as a dropdown
112
+ * @param props
113
+ */
114
+ createFilterField?: (props: FilterFormFieldProps<any>) => React.ReactNode;
115
+ /**
116
+ * Class name applied to the table
117
+ */
118
+ className?: string;
119
+ /**
120
+ * Style applied to the table
121
+ */
122
+ style?: React.CSSProperties;
123
+ /**
124
+ * Component rendered at the end of the table, after scroll
125
+ */
126
+ endAdornment?: React.ReactNode;
127
+ /**
128
+ * If adding this callback, a button to add a new column is displayed.
129
+ * @param column
130
+ */
131
+ AddColumnComponent?: React.ComponentType;
132
+ /**
133
+ * Initial scroll position
134
+ */
135
+ initialScroll?: number;
136
+ /**
137
+ * Callback when columns are reordered via drag-and-drop.
138
+ * @param columns The new column order
139
+ */
140
+ onColumnsOrderChange?: (columns: VirtualTableColumn[]) => void;
141
+ }
142
+ export type CellRendererParams<T = any> = {
143
+ column: VirtualTableColumn;
144
+ columns: VirtualTableColumn[];
145
+ columnIndex: number;
146
+ rowData?: T;
147
+ rowIndex: number;
148
+ width: number;
149
+ isScrolling?: boolean;
150
+ sortableNodeRef?: (node: HTMLElement | null) => void;
151
+ sortableStyle?: React.CSSProperties;
152
+ sortableAttributes?: Record<string, any>;
153
+ isDragging?: boolean;
154
+ isDraggable?: boolean;
155
+ frozen?: boolean;
156
+ };
157
+ /**
158
+ * @see Table
159
+ * @group Components
160
+ */
161
+ export interface VirtualTableColumn<CustomProps = any> {
162
+ /**
163
+ * Data key for the cell value, could be "a.b.c"
164
+ */
165
+ key: string;
166
+ /**
167
+ * The width of the column, gutter width is not included
168
+ */
169
+ width: number;
170
+ /**
171
+ * Label displayed in the header
172
+ */
173
+ title?: string;
174
+ /**
175
+ * This column is frozen to the left
176
+ */
177
+ frozen?: boolean;
178
+ /**
179
+ * How is the
180
+ */
181
+ headerAlign?: "left" | "center" | "right";
182
+ /**
183
+ * Icon displayed in the header
184
+ */
185
+ icon?: React.ReactNode;
186
+ /**
187
+ *
188
+ */
189
+ filter?: boolean;
190
+ /**
191
+ * Alignment of the column cell
192
+ */
193
+ align?: "left" | "right" | "center";
194
+ /**
195
+ * Whether the column is sortable, defaults to false
196
+ */
197
+ sortable?: boolean;
198
+ /**
199
+ * Can it be resized
200
+ */
201
+ resizable?: boolean;
202
+ /**
203
+ * Custom props passed to the cell renderer
204
+ */
205
+ custom?: CustomProps;
206
+ /**
207
+ * Additional children to be rendered in the header when hovering
208
+ */
209
+ AdditionalHeaderWidget?: (props: {
210
+ onHover: boolean;
211
+ }) => React.ReactNode;
212
+ }
213
+ /**
214
+ * @see Table
215
+ * @group Collection components
216
+ */
217
+ export type OnVirtualTableColumnResizeParams = {
218
+ width: number;
219
+ key: string;
220
+ column: VirtualTableColumn;
221
+ };
222
+ /**
223
+ * @see Table
224
+ * @group Components
225
+ */
226
+ export type VirtualTableSort = "asc" | "desc" | undefined;
227
+ /**
228
+ * @see Table
229
+ * @group Components
230
+ */
231
+ export type VirtualTableFilterValues<Key extends string> = Partial<Record<Key, [VirtualTableWhereFilterOp, any]>>;
232
+ /**
233
+ * Filter conditions in a `Query.where()` clause are specified using the
234
+ * strings `<`, `<=`, `==`, `>=`, `>`, `array-contains`, `in`, and `array-contains-any`.
235
+ * @see Table
236
+ * @group Models
237
+ */
238
+ export type VirtualTableWhereFilterOp = "<" | "<=" | "==" | "!=" | ">=" | ">" | "array-contains" | "in" | "not-in" | "array-contains-any";
@@ -0,0 +1,3 @@
1
+ import React from "react";
2
+ import { VirtualTableRowProps } from "./types";
3
+ export declare const VirtualTableRow: React.NamedExoticComponent<VirtualTableRowProps<any>>;
@@ -0,0 +1,3 @@
1
+ export { VirtualTable } from "./VirtualTable";
2
+ export * from "./VirtualTableProps";
3
+ export type { FilterFormFieldProps } from "./VirtualTableHeader";
@@ -0,0 +1,37 @@
1
+ import React from "react";
2
+ import { CellRendererParams, OnRowClickParams, OnVirtualTableColumnResizeParams, VirtualTableColumn, VirtualTableFilterValues, VirtualTableWhereFilterOp } from "./VirtualTableProps";
3
+ import { FilterFormFieldProps } from "./VirtualTableHeader";
4
+ export type VirtualTableRowProps<T> = {
5
+ style: any;
6
+ rowHeight: number;
7
+ rowData: T;
8
+ rowIndex: number;
9
+ onRowClick?: (props: OnRowClickParams<any>) => void;
10
+ children: React.ReactNode[];
11
+ columns: VirtualTableColumn[];
12
+ hoverRow?: boolean;
13
+ rowClassName?: (rowData: T) => string | undefined;
14
+ };
15
+ export type VirtualTableContextProps<T extends any> = {
16
+ data?: T[];
17
+ rowHeight?: number;
18
+ headerHeight?: number;
19
+ columns: VirtualTableColumn[];
20
+ cellRenderer: React.ComponentType<CellRendererParams<T>>;
21
+ currentSort: "asc" | "desc" | undefined;
22
+ filter?: VirtualTableFilterValues<any>;
23
+ onRowClick?: (props: OnRowClickParams<any>) => void;
24
+ onColumnSort: (key: string) => any;
25
+ onColumnResize: (params: OnVirtualTableColumnResizeParams) => void;
26
+ onColumnResizeEnd: (params: OnVirtualTableColumnResizeParams) => void;
27
+ onFilterUpdate: (column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, any]) => void;
28
+ sortByProperty?: string;
29
+ customView?: React.ReactNode;
30
+ hoverRow: boolean;
31
+ createFilterField?: (props: FilterFormFieldProps<any>) => React.ReactNode;
32
+ rowClassName?: (rowData: T) => string | undefined;
33
+ endAdornment?: React.ReactNode;
34
+ AddColumnComponent?: React.ComponentType;
35
+ onColumnsOrderChange?: (columns: VirtualTableColumn[]) => void;
36
+ draggingColumnId?: string | null;
37
+ };
@@ -10,6 +10,8 @@ export * from "./CenteredView";
10
10
  export * from "./Container";
11
11
  export * from "./Collapse";
12
12
  export * from "./CircularProgress";
13
+ export * from "./CircularProgressCenter";
14
+ export * from "./ErrorBoundary";
13
15
  export * from "./Checkbox";
14
16
  export * from "./Chip";
15
17
  export * from "./ColorPicker";
@@ -48,3 +50,4 @@ export * from "./Badge";
48
50
  export * from "./DebouncedTextField";
49
51
  export * from "./Skeleton";
50
52
  export * from "./ToggleButtonGroup";
53
+ export * from "./VirtualTable";
@@ -1,5 +1,7 @@
1
1
  export * from "./useInjectStyles";
2
2
  export * from "./useOutsideAlerter";
3
+ export * from "./useDebouncedCallback";
4
+ export * from "./useDebounceCallback";
3
5
  export * from "./useDebounceValue";
4
6
  export * from "./useIconStyles";
5
7
  export * from "./PortalContainerContext";
@@ -0,0 +1 @@
1
+ export declare function useDebounceCallback<T extends (...args: any[]) => any>(callback?: T, delay?: number): T;
@@ -0,0 +1 @@
1
+ export declare function useDebouncedCallback<T>(value: T, callback: () => void, immediate: boolean, timeoutMs?: number): void;