@paubox/ui 0.3.2 → 0.3.3

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 (8) hide show
  1. package/index.esm.js +880 -759
  2. package/package.json +1 -1
  3. package/src/lib/Table/ContextMenuCell.d.ts +10 -0
  4. package/src/lib/Table/LoadingOverlay.d.ts +1 -0
  5. package/src/lib/Table/Table.d.ts +33 -16
  6. package/src/lib/Table/TableBody.d.ts +11 -0
  7. package/src/lib/Table/TableHeader.d.ts +10 -0
  8. package/src/lib/Table/tableComponents.d.ts +0 -77
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@paubox/ui",
3
3
  "author": "Paubox, Inc.",
4
4
  "description": "Paubox Component Library",
5
- "version": "0.3.2",
5
+ "version": "0.3.3",
6
6
  "type": "module",
7
7
  "peerDependencies": {
8
8
  "@emotion/react": "11.x",
package/src/lib/Table/ContextMenuCell.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import { Row } from '@tanstack/react-table';
2
+ import { RowAction } from './Table';
3
+ interface ContextMenuCellProps<T extends object> {
4
+ row: Row<T>;
5
+ setOpenMenuId: React.Dispatch<React.SetStateAction<string | null>>;
6
+ openMenuId: string | null;
7
+ rowActions: RowAction<T>[];
8
+ }
9
+ export declare const ContextMenuCell: <T extends object>({ row, setOpenMenuId, openMenuId, rowActions, }: ContextMenuCellProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
10
+ export {};
package/src/lib/Table/LoadingOverlay.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const LoadingOverlay: () => import("@emotion/react/jsx-runtime").JSX.Element;
package/src/lib/Table/Table.d.ts CHANGED
@@ -1,15 +1,24 @@
1
1
  import { ColumnDef, OnChangeFn, Row } from '@tanstack/react-table';
2
2
  import { PageInfo } from '../Pagination/Pagination';
3
+ export declare const TableContainer: import("@emotion/styled").StyledComponent<{
4
+ theme?: import("@emotion/react").Theme;
5
+ as?: React.ElementType;
6
+ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
7
+ export declare const TableWrapper: import("@emotion/styled").StyledComponent<{
8
+ theme?: import("@emotion/react").Theme;
9
+ as?: React.ElementType;
10
+ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
11
+ export interface ColumnWidth {
12
+ id: string;
13
+ width: number;
14
+ }
3
15
  export type TableColumn<T> = ColumnDef<T> & {
4
16
  key: string;
5
17
  header: string;
6
18
  width?: number;
7
19
  sortable?: boolean;
20
+ getter?: () => unknown;
8
21
  };
9
- export interface TableSort {
10
- id: string;
11
- desc: boolean;
12
- }
13
22
  export interface RowSelectState {
14
23
  [x: string]: boolean;
15
24
  }
@@ -20,22 +29,30 @@ export interface RowAction<T> {
20
29
  disabled?: boolean | ((row: T) => boolean);
21
30
  show?: (row: T) => boolean;
22
31
  }
23
- export interface TableProps<T extends object> {
32
+ interface TableStyleProps {
33
+ dense?: boolean;
24
34
  height?: number;
25
- data: T[];
26
- columns: TableColumn<T>[];
27
- pageInfo: PageInfo;
28
- getRowId: (originalRow: T, index: number, parent?: Row<T> | undefined) => string;
29
- isLoading?: boolean;
30
- onPageSizeChange: (size: number) => void;
31
- onPageChange: (page: number) => void;
32
- sorting?: TableSort;
33
- onSortChange?: (sorting: TableSort) => void;
35
+ }
36
+ interface TableRowProps<T> {
34
37
  enableRowSelection?: boolean;
35
38
  selectedRows?: RowSelectState;
36
39
  onRowSelectionChange?: OnChangeFn<RowSelectState>;
37
40
  onRowClick?: (row: T) => void;
38
41
  rowActions?: RowAction<T>[];
39
- dense?: boolean;
40
42
  }
41
- export declare const Table: <T extends object>({ height, data, pageInfo, columns, getRowId, isLoading, sorting, onPageSizeChange, onPageChange, onSortChange, enableRowSelection, selectedRows, onRowSelectionChange, onRowClick, rowActions, dense, }: TableProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
43
+ interface TableDataProps<T> {
44
+ columns: TableColumn<T>[];
45
+ data?: T[];
46
+ getRowId: (originalRow: T, index: number, parent?: Row<T> | undefined) => string;
47
+ isLoading?: boolean;
48
+ pageInfo?: PageInfo;
49
+ onPageSizeChange: (size: number) => void;
50
+ onPageChange: (page: number) => void;
51
+ sortBy?: string;
52
+ sortOrder?: string;
53
+ onSortChange?: (sortBy: string, sortOrder: string) => void;
54
+ }
55
+ export interface TableProps<T extends object> extends TableStyleProps, TableRowProps<T>, TableDataProps<T> {
56
+ }
57
+ export declare const Table: <T extends object>({ columns, data, getRowId, isLoading, pageInfo, onPageSizeChange, onPageChange, sortBy, sortOrder, onSortChange, enableRowSelection, selectedRows, onRowSelectionChange, onRowClick, rowActions, dense, height, }: TableProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
58
+ export {};
package/src/lib/Table/TableBody.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { Table } from '@tanstack/react-table';
2
+ import { ColumnWidth } from './Table';
3
+ interface TableBodyProps<T extends object> {
4
+ table: Table<T>;
5
+ columnWidths: ColumnWidth[];
6
+ enableRowSelection?: boolean;
7
+ onRowClick?: (row: T) => void;
8
+ dense: boolean;
9
+ }
10
+ export declare const TableBody: <T extends object>({ table, columnWidths, enableRowSelection, onRowClick, dense, }: TableBodyProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
11
+ export {};
package/src/lib/Table/TableHeader.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import { Table } from '@tanstack/react-table';
2
+ import { ColumnWidth } from './Table';
3
+ interface TableHeaderProps<T> {
4
+ table: Table<T>;
5
+ columnWidths: ColumnWidth[];
6
+ disableControls: boolean;
7
+ dense: boolean;
8
+ }
9
+ export declare const TableHeader: <T extends object>({ table, columnWidths, disableControls, dense, }: TableHeaderProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
10
+ export {};
package/src/lib/Table/tableComponents.d.ts DELETED
@@ -1,77 +0,0 @@
1
- import { Row } from '@tanstack/react-table';
2
- import { RowAction } from './Table';
3
- export declare const TableContainer: import("@emotion/styled").StyledComponent<{
4
- theme?: import("@emotion/react").Theme;
5
- as?: React.ElementType;
6
- }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
7
- export declare const TableWrapper: import("@emotion/styled").StyledComponent<{
8
- theme?: import("@emotion/react").Theme;
9
- as?: React.ElementType;
10
- }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
11
- export declare const StyledTable: import("@emotion/styled").StyledComponent<{
12
- theme?: import("@emotion/react").Theme;
13
- as?: React.ElementType;
14
- }, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
15
- export declare const TableHeader: import("@emotion/styled").StyledComponent<{
16
- theme?: import("@emotion/react").Theme;
17
- as?: React.ElementType;
18
- }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
19
- export declare const Th: import("@emotion/styled").StyledComponent<{
20
- variant: "headline100Regular" | "headline100Semibold" | "headline200Regular" | "headline200Semibold" | "headline300Regular" | "headline300Semibold" | "paragraph100Regular" | "paragraph100Semibold" | "paragraph200Regular" | "paragraph200Semibold" | "paragraph300Regular" | "paragraph300Medium" | "paragraph300Semibold" | "paragraph300Bold" | "button100Medium" | "button200Medium" | "label100Regular" | "label100Medium" | "label100Semibold" | "label200Regular" | "label200Medium" | "label200Semibold";
21
- color?: "primary" | "secondary" | string;
22
- css?: import("@emotion/react").SerializedStyles;
23
- as?: keyof import("react").JSX.IntrinsicElements;
24
- } & import("react").HTMLAttributes<HTMLDivElement> & {
25
- theme?: import("@emotion/react").Theme;
26
- }, {}, {}>;
27
- export declare const Tr: import("@emotion/styled").StyledComponent<{
28
- theme?: import("@emotion/react").Theme;
29
- as?: React.ElementType;
30
- } & {
31
- enableHover: boolean;
32
- }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {}>;
33
- export declare const Td: import("@emotion/styled").StyledComponent<{
34
- variant: "headline100Regular" | "headline100Semibold" | "headline200Regular" | "headline200Semibold" | "headline300Regular" | "headline300Semibold" | "paragraph100Regular" | "paragraph100Semibold" | "paragraph200Regular" | "paragraph200Semibold" | "paragraph300Regular" | "paragraph300Medium" | "paragraph300Semibold" | "paragraph300Bold" | "button100Medium" | "button200Medium" | "label100Regular" | "label100Medium" | "label100Semibold" | "label200Regular" | "label200Medium" | "label200Semibold";
35
- color?: "primary" | "secondary" | string;
36
- css?: import("@emotion/react").SerializedStyles;
37
- as?: keyof import("react").JSX.IntrinsicElements;
38
- } & import("react").HTMLAttributes<HTMLDivElement> & {
39
- theme?: import("@emotion/react").Theme;
40
- }, {}, {}>;
41
- export declare const HeaderContent: import("@emotion/styled").StyledComponent<{
42
- theme?: import("@emotion/react").Theme;
43
- as?: React.ElementType;
44
- }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
45
- export declare const ResizeHandleContainer: import("@emotion/styled").StyledComponent<{
46
- theme?: import("@emotion/react").Theme;
47
- as?: React.ElementType;
48
- }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
49
- export declare const ResizeHandle: import("@emotion/styled").StyledComponent<{
50
- theme?: import("@emotion/react").Theme;
51
- as?: React.ElementType;
52
- }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
53
- export declare const SortIcon: import("@emotion/styled").StyledComponent<{
54
- theme?: import("@emotion/react").Theme;
55
- as?: React.ElementType;
56
- }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
57
- export declare const LoadingOverlay: import("@emotion/styled").StyledComponent<{
58
- theme?: import("@emotion/react").Theme;
59
- as?: React.ElementType;
60
- }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
61
- export declare const ContextMenuButton: import("@emotion/styled").StyledComponent<import("../Button/Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement> & {
62
- theme?: import("@emotion/react").Theme;
63
- }, {}, {}>;
64
- export declare const MenuItem: import("@emotion/styled").StyledComponent<{
65
- theme?: import("@emotion/react").Theme;
66
- as?: React.ElementType;
67
- } & {
68
- disabled?: boolean;
69
- }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
70
- interface ContextMenuCellProps {
71
- row: Row<any>;
72
- setOpenMenuId: React.Dispatch<React.SetStateAction<string | null>>;
73
- openMenuId: string | null;
74
- rowActions: RowAction<any>[];
75
- }
76
- export declare const ContextMenuCell: ({ row, setOpenMenuId, openMenuId, rowActions, }: ContextMenuCellProps) => import("@emotion/react/jsx-runtime").JSX.Element;
77
- export {};