@paubox/ui 0.23.0 → 1.0.0

package/index.esm.js

@@ -29032,7 +29032,7 @@ function _templateObject1$6() {
 var PaginationContainer = styled.div(_templateObject$7(), spacing(2), spacing(1), spacing(1));
 var PageControls = styled.div(_templateObject1$6());
 var Pagination = function(param) {
-    var pageInfo = param.pageInfo, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, onPageSizeChange = param.onPageSizeChange, subText = param.subText, onPageChange = param.onPageChange, _param_testId = param.testId, testId = _param_testId === void 0 ? 'pagination' : _param_testId;
+    var mode = param.mode, pageInfo = param.pageInfo, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, onPageSizeChange = param.onPageSizeChange, subText = param.subText, onPageChange = param.onPageChange, _param_testId = param.testId, testId = _param_testId === void 0 ? 'pagination' : _param_testId;
     return /*#__PURE__*/ jsxs(PaginationContainer, {
         children: [
             /*#__PURE__*/ jsxs(PageControls, {
@@ -29058,7 +29058,7 @@ var Pagination = function(param) {
                                 label: '100'
                             }
                         ],
-                        value: pageInfo.items,
+                        value: pageInfo.pageSize,
                         setValue: function(value) {
                             onPageSizeChange(Number(value));
                         },
@@ -29077,38 +29077,79 @@ var Pagination = function(param) {
             }),
             /*#__PURE__*/ jsxs(PageControls, {
                 children: [
-                    /*#__PURE__*/ jsx(Typography, {
-                        variant: "paragraph300Regular",
-                        as: "span",
-                        children: "".concat(pageInfo.items * (pageInfo.currentPage - 1) + 1, " – ").concat(pageInfo.currentPage >= pageInfo.pageCount ? pageInfo.itemCount : pageInfo.items * pageInfo.currentPage, " of ").concat(pageInfo.itemCount)
-                    }),
-                    /*#__PURE__*/ jsx(Button, {
-                        color: "secondary",
-                        onClick: function() {
-                            return onPageChange(pageInfo.currentPage - 1);
-                        },
-                        disabled: isLoading || pageInfo.currentPage === 1,
-                        style: {
-                            fontSize: 10,
-                            padding: spacing(1),
-                            marginLeft: spacing(1)
-                        },
-                        "data-testid": "".concat(testId, "-prev-button"),
-                        children: /*#__PURE__*/ jsx(ChevronLeft, {})
+                    mode === 'page' && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(Typography, {
+                                variant: "paragraph300Regular",
+                                as: "span",
+                                children: "".concat(pageInfo.pageSize * (pageInfo.currentPage - 1) + 1, " – ").concat(pageInfo.currentPage >= pageInfo.pageCount ? pageInfo.itemCount : pageInfo.pageSize * pageInfo.currentPage, " of ").concat(pageInfo.itemCount)
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                color: "secondary",
+                                onClick: function() {
+                                    return onPageChange(pageInfo.currentPage - 1);
+                                },
+                                disabled: isLoading || pageInfo.currentPage === 1,
+                                style: {
+                                    fontSize: 10,
+                                    padding: spacing(1),
+                                    marginLeft: spacing(1)
+                                },
+                                "data-testid": "".concat(testId, "-prev-button"),
+                                children: /*#__PURE__*/ jsx(ChevronLeft, {})
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                color: "secondary",
+                                onClick: function() {
+                                    return onPageChange(pageInfo.currentPage + 1);
+                                },
+                                disabled: isLoading || pageInfo.currentPage >= pageInfo.pageCount,
+                                style: {
+                                    fontSize: 10,
+                                    padding: spacing(1),
+                                    marginLeft: spacing(1)
+                                },
+                                "data-testid": "".concat(testId, "-next-button"),
+                                children: /*#__PURE__*/ jsx(ChevronRight, {})
+                            })
+                        ]
                     }),
-                    /*#__PURE__*/ jsx(Button, {
-                        color: "secondary",
-                        onClick: function() {
-                            return onPageChange(pageInfo.currentPage + 1);
-                        },
-                        disabled: isLoading || pageInfo.currentPage >= pageInfo.pageCount,
-                        style: {
-                            fontSize: 10,
-                            padding: spacing(1),
-                            marginLeft: spacing(1)
-                        },
-                        "data-testid": "".concat(testId, "-next-button"),
-                        children: /*#__PURE__*/ jsx(ChevronRight, {})
+                    mode === 'cursor' && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(Typography, {
+                                variant: "paragraph300Regular",
+                                as: "span",
+                                children: "".concat(pageInfo.pageIndex * pageInfo.pageSize + 1, " – ").concat((pageInfo.pageIndex + 1) * pageInfo.pageSize > pageInfo.itemCount ? pageInfo.itemCount : (pageInfo.pageIndex + 1) * pageInfo.pageSize, " of ").concat(pageInfo.itemCount)
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                color: "secondary",
+                                onClick: function() {
+                                    return onPageChange('prev');
+                                },
+                                disabled: isLoading || !pageInfo.hasPrevPage,
+                                style: {
+                                    fontSize: 10,
+                                    padding: spacing(1),
+                                    marginLeft: spacing(1)
+                                },
+                                "data-testid": "".concat(testId, "-prev-button"),
+                                children: /*#__PURE__*/ jsx(ChevronLeft, {})
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                color: "secondary",
+                                onClick: function() {
+                                    return onPageChange('next');
+                                },
+                                disabled: isLoading || !pageInfo.hasNextPage,
+                                style: {
+                                    fontSize: 10,
+                                    padding: spacing(1),
+                                    marginLeft: spacing(1)
+                                },
+                                "data-testid": "".concat(testId, "-next-button"),
+                                children: /*#__PURE__*/ jsx(ChevronRight, {})
+                            })
+                        ]
                     })
                 ]
             })
@@ -33082,22 +33123,6 @@ function getCoreRowModel() {
         }));
     };
 }
-function expandRows(rowModel) {
-    var expandedRows = [];
-    var handleRow = function(row) {
-        var _row$subRows;
-        expandedRows.push(row);
-        if ((_row$subRows = row.subRows) != null && _row$subRows.length && row.getIsExpanded()) {
-            row.subRows.forEach(handleRow);
-        }
-    };
-    rowModel.rows.forEach(handleRow);
-    return {
-        rows: expandedRows,
-        flatRows: rowModel.flatRows,
-        rowsById: rowModel.rowsById
-    };
-}
 function filterRows(rows, filterRowImpl, table) {
     if (table.options.filterFromLeafRows) {
         return filterRowModelFromLeafs(rows, filterRowImpl, table);
@@ -33298,49 +33323,6 @@ function getFilteredRowModel() {
         }));
     };
 }
-function getPaginationRowModel(opts) {
-    return function(table) {
-        return memo(function() {
-            return [
-                table.getState().pagination,
-                table.getPrePaginationRowModel(),
-                table.options.paginateExpandedRows ? undefined : table.getState().expanded
-            ];
-        }, function(pagination, rowModel) {
-            if (!rowModel.rows.length) {
-                return rowModel;
-            }
-            var pageSize = pagination.pageSize, pageIndex = pagination.pageIndex;
-            var rows = rowModel.rows, flatRows = rowModel.flatRows, rowsById = rowModel.rowsById;
-            var pageStart = pageSize * pageIndex;
-            var pageEnd = pageStart + pageSize;
-            rows = rows.slice(pageStart, pageEnd);
-            var paginatedRowModel;
-            if (!table.options.paginateExpandedRows) {
-                paginatedRowModel = expandRows({
-                    rows: rows,
-                    flatRows: flatRows,
-                    rowsById: rowsById
-                });
-            } else {
-                paginatedRowModel = {
-                    rows: rows,
-                    flatRows: flatRows,
-                    rowsById: rowsById
-                };
-            }
-            paginatedRowModel.flatRows = [];
-            var handleRow = function(row) {
-                paginatedRowModel.flatRows.push(row);
-                if (row.subRows.length) {
-                    row.subRows.forEach(handleRow);
-                }
-            };
-            paginatedRowModel.rows.forEach(handleRow);
-            return paginatedRowModel;
-        }, getMemoOptions(table.options, 'debugTable', 'getPaginationRowModel'));
-    };
-}
 function getSortedRowModel() {
     return function(table) {
         return memo(function() {
@@ -33882,30 +33864,28 @@ var TableBody = function(param) {
 
 var RowContextMenu = function(param) {
     var anchorRef = param.anchorRef, _param_actions = param.actions, actions = _param_actions === void 0 ? [] : _param_actions, activeRow = param.activeRow, setActiveRow = param.setActiveRow;
-    return /*#__PURE__*/ jsx(Fragment, {
-        children: /*#__PURE__*/ jsx(Popper, {
-            open: !!activeRow,
-            anchorRef: anchorRef,
-            onClose: function() {
-                anchorRef.current = null;
-                setActiveRow(null);
-            },
-            offset: 4,
-            style: {
-                padding: "".concat(spacing(1), "px 0")
-            },
-            children: actions.map(function(action, i) {
-                return /*#__PURE__*/ jsx(MenuItem, {
-                    disabled: activeRow == null ? true : typeof action.disabled === 'function' ? action.disabled(activeRow) : action.disabled,
-                    onClick: function(e) {
-                        e.stopPropagation();
-                        if (activeRow) action.onClick(activeRow);
-                        anchorRef.current = null;
-                        setActiveRow(null);
-                    },
-                    label: action.label
-                }, i);
-            })
+    return /*#__PURE__*/ jsx(Popper, {
+        open: !!activeRow,
+        anchorRef: anchorRef,
+        onClose: function() {
+            anchorRef.current = null;
+            setActiveRow(null);
+        },
+        offset: 4,
+        style: {
+            padding: "".concat(spacing(1), "px 0")
+        },
+        children: actions.map(function(action, i) {
+            return /*#__PURE__*/ jsx(MenuItem, {
+                disabled: activeRow == null ? true : typeof action.disabled === 'function' ? action.disabled(activeRow) : action.disabled,
+                onClick: function(e) {
+                    e.stopPropagation();
+                    if (activeRow) action.onClick(activeRow);
+                    anchorRef.current = null;
+                    setActiveRow(null);
+                },
+                label: action.label
+            }, i);
         })
     });
 };
@@ -34063,7 +34043,7 @@ var TableContainer = styled(/*#__PURE__*/ forwardRef(function(props, ref) {
 var TableWrapper = styled.table(_templateObject1$2());
 var ContextMenuButton = styled(Button)(_templateObject2$2(), spacing(0.5));
 var Table = function(param) {
-    var columns = param.columns, _param_data = param.data, data = _param_data === void 0 ? [] : _param_data, getRowId = param.getRowId, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, pageInfo = param.pageInfo, subText = param.subText, onPageSizeChange = param.onPageSizeChange, onPageChange = param.onPageChange, sortBy = param.sortBy, sortOrder = param.sortOrder, onSortChange = param.onSortChange, _param_enableRowSelection = param.enableRowSelection, enableRowSelection = _param_enableRowSelection === void 0 ? false : _param_enableRowSelection, _param_selectedRows = param.selectedRows, selectedRows = _param_selectedRows === void 0 ? {} : _param_selectedRows, onRowSelectionChange = param.onRowSelectionChange, getRowDisabled = param.getRowDisabled, onRowClick = param.onRowClick, contextMenuActions = param.contextMenuActions, _param_dense = param.dense, dense = _param_dense === void 0 ? false : _param_dense, height = param.height, error = param.error, _param_testId = param.testId, testId = _param_testId === void 0 ? 'table' : _param_testId;
+    var columns = param.columns, _param_data = param.data, data = _param_data === void 0 ? [] : _param_data, getRowId = param.getRowId, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_paginationMode = param.paginationMode, paginationMode = _param_paginationMode === void 0 ? 'page' : _param_paginationMode, pageInfo = param.pageInfo, subText = param.subText, onPageSizeChange = param.onPageSizeChange, onPageChange = param.onPageChange, sortBy = param.sortBy, sortOrder = param.sortOrder, onSortChange = param.onSortChange, _param_enableRowSelection = param.enableRowSelection, enableRowSelection = _param_enableRowSelection === void 0 ? false : _param_enableRowSelection, _param_selectedRows = param.selectedRows, selectedRows = _param_selectedRows === void 0 ? {} : _param_selectedRows, onRowSelectionChange = param.onRowSelectionChange, getRowDisabled = param.getRowDisabled, onRowClick = param.onRowClick, contextMenuActions = param.contextMenuActions, _param_dense = param.dense, dense = _param_dense === void 0 ? false : _param_dense, height = param.height, error = param.error, _param_testId = param.testId, testId = _param_testId === void 0 ? 'table' : _param_testId;
     var containerRef = useRef(null);
     var ctxMenuAnchorRef = useRef(null);
     var _useState = _sliced_to_array$1(useState({}), 2), columnSizing = _useState[0], setColumnSizing = _useState[1];
@@ -34208,10 +34188,6 @@ var Table = function(param) {
             sortDescFirst: false
         },
         state: {
-            pagination: pageInfo && {
-                pageIndex: pageInfo.currentPage - 1,
-                pageSize: pageInfo.items
-            },
             columnSizing: columnSizing,
             sorting: sortBy ? [
                 {
@@ -34224,12 +34200,11 @@ var Table = function(param) {
         onSortingChange: handleSortingChange,
         manualPagination: true,
         manualSorting: true,
-        pageCount: pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.pageCount,
+        pageCount: paginationMode === 'page' && pageInfo && 'currentPage' in pageInfo ? pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.pageCount : undefined,
         enableColumnResizing: true,
         getCoreRowModel: getCoreRowModel(),
         getSortedRowModel: getSortedRowModel(),
         getFilteredRowModel: getFilteredRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
         onRowSelectionChange: onRowSelectionChange,
         enableRowSelection: !!enableRowSelection,
         onColumnSizingChange: setColumnSizing,
@@ -34243,47 +34218,57 @@ var Table = function(param) {
     });
     return /*#__PURE__*/ jsxs("div", {
         children: [
-            /*#__PURE__*/ jsxs(TableContainer, {
+            /*#__PURE__*/ jsxs("div", {
                 style: {
-                    height: height
+                    position: 'relative',
+                    borderRadius: "".concat(spacing(1), "px"),
+                    overflow: 'hidden'
                 },
-                ref: containerRef,
                 children: [
                     isLoading && /*#__PURE__*/ jsx(LoadingOverlay, {}),
-                    Boolean(!isLoading && (!(data === null || data === void 0 ? void 0 : data.length) || error)) && /*#__PURE__*/ jsx(Typography, {
-                        variant: "paragraph200Regular",
-                        as: "div",
+                    /*#__PURE__*/ jsxs(TableContainer, {
                         style: {
-                            position: 'absolute',
-                            left: '50%',
-                            top: '50%',
-                            transform: 'translate(-50%, -50%)'
+                            height: height
                         },
-                        children: !error ? 'No results found.' : error
-                    }),
-                    /*#__PURE__*/ jsxs(TableWrapper, {
+                        ref: containerRef,
                         children: [
-                            /*#__PURE__*/ jsx(TableHeader, {
-                                table: table,
-                                columnWidths: columnWidths,
-                                disableControls: disableControls,
-                                dense: dense,
-                                testId: testId
+                            Boolean(!isLoading && (!(data === null || data === void 0 ? void 0 : data.length) || error)) && /*#__PURE__*/ jsx(Typography, {
+                                variant: "paragraph200Regular",
+                                as: "div",
+                                style: {
+                                    position: 'absolute',
+                                    left: '50%',
+                                    top: '50%',
+                                    transform: 'translate(-50%, -50%)'
+                                },
+                                children: !error ? 'No results found.' : error
                             }),
-                            /*#__PURE__*/ jsx(TableBody, {
-                                table: table,
-                                columnWidths: columnWidths,
-                                enableRowSelection: enableRowSelection,
-                                onRowClick: onRowClick,
-                                getRowDisabled: getRowDisabled,
-                                dense: dense,
-                                testId: testId
+                            /*#__PURE__*/ jsxs(TableWrapper, {
+                                children: [
+                                    /*#__PURE__*/ jsx(TableHeader, {
+                                        table: table,
+                                        columnWidths: columnWidths,
+                                        disableControls: disableControls,
+                                        dense: dense,
+                                        testId: testId
+                                    }),
+                                    /*#__PURE__*/ jsx(TableBody, {
+                                        table: table,
+                                        columnWidths: columnWidths,
+                                        enableRowSelection: enableRowSelection,
+                                        onRowClick: onRowClick,
+                                        getRowDisabled: getRowDisabled,
+                                        dense: dense,
+                                        testId: testId
+                                    })
+                                ]
                             })
                         ]
                     })
                 ]
             }),
-            onPageSizeChange && onPageChange && pageInfo && /*#__PURE__*/ jsx(Pagination, {
+            onPageSizeChange && onPageChange && pageInfo && (paginationMode === 'page' && 'currentPage' in pageInfo ? /*#__PURE__*/ jsx(Pagination, {
+                mode: "page",
                 pageInfo: pageInfo,
                 subText: subText,
                 isLoading: isLoading,
@@ -34296,7 +34281,21 @@ var Table = function(param) {
                     onPageChange(page);
                 },
                 testId: "".concat(testId, "-pagination")
-            }),
+            }) : /*#__PURE__*/ jsx(Pagination, {
+                mode: "cursor",
+                pageInfo: pageInfo,
+                subText: subText,
+                isLoading: isLoading,
+                onPageSizeChange: function(size) {
+                    resetContainerScroll();
+                    onPageSizeChange(size);
+                },
+                onPageChange: function(page) {
+                    resetContainerScroll();
+                    onPageChange(page);
+                },
+                testId: "".concat(testId, "-pagination")
+            })),
             /*#__PURE__*/ jsx(RowContextMenu, {
                 anchorRef: ctxMenuAnchorRef,
                 actions: contextMenuActions,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@paubox/ui",
   "author": "Paubox, Inc.",
   "description": "Paubox Component Library",
-  "version": "0.23.0",
+  "version": "1.0.0",
   "type": "module",
   "private": false,
   "publishConfig": {

package/src/lib/Pagination/Pagination.d.ts

@@ -1,16 +1,33 @@
-export interface PageInfo {
+export interface PageInfoPageBased {
+    currentPage: number;
+    pageSize: number;
     pageCount: number;
     itemCount: number;
-    currentPage: number;
-    items: number;
 }
-interface PaginationProps {
-    pageInfo: PageInfo;
+export interface PageInfoCursorBased {
+    pageSize: number;
+    itemCount: number;
+    currentCursor: string[];
+    hasNextPage: boolean;
+    hasPrevPage: boolean;
+    pageIndex: number;
+}
+interface BasePaginationProps {
     isLoading: boolean;
     subText?: string;
     onPageSizeChange: (size: number) => void;
-    onPageChange: (page: number) => void;
     testId?: string;
 }
-export declare const Pagination: ({ pageInfo, isLoading, onPageSizeChange, subText, onPageChange, testId, }: PaginationProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+interface PagePaginationProps extends BasePaginationProps {
+    mode: 'page';
+    pageInfo: PageInfoPageBased;
+    onPageChange: (page: number) => void;
+}
+interface CursorPaginationProps extends BasePaginationProps {
+    mode: 'cursor';
+    pageInfo: PageInfoCursorBased;
+    onPageChange: (page: 'next' | 'prev') => void;
+}
+export type PaginationProps = PagePaginationProps | CursorPaginationProps;
+export declare const Pagination: ({ mode, pageInfo, isLoading, onPageSizeChange, subText, onPageChange, testId, }: PaginationProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/Table/Table.d.ts

@@ -1,6 +1,6 @@
 import { HTMLProps } from 'react';
 import { ColumnDef, OnChangeFn, Row } from '@tanstack/react-table';
-import { PageInfo } from '../Pagination/Pagination';
+import { PageInfoPageBased, PageInfoCursorBased } from '../Pagination/Pagination';
 export declare const TableContainer: import("@emotion/styled").StyledComponent<Omit<HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
@@ -43,10 +43,11 @@ interface TableRowProps<T> {
     contextMenuActions?: RowAction<T>[];
 }
 interface PaginationProps {
-    pageInfo?: PageInfo;
+    paginationMode?: 'page' | 'cursor';
+    pageInfo?: PageInfoPageBased | PageInfoCursorBased;
     subText?: string;
     onPageSizeChange?: (size: number) => void;
-    onPageChange?: (page: number) => void;
+    onPageChange?: (page: any) => void;
 }
 interface TableDataProps<T> {
     columns: TableColumn<T>[];
@@ -61,5 +62,5 @@ interface TableDataProps<T> {
 }
 export interface TableProps<T extends object> extends TableStyleProps, TableRowProps<T>, TableDataProps<T>, PaginationProps {
 }
-export declare const Table: <T extends object>({ columns, data, getRowId, isLoading, pageInfo, subText, onPageSizeChange, onPageChange, sortBy, sortOrder, onSortChange, enableRowSelection, selectedRows, onRowSelectionChange, getRowDisabled, onRowClick, contextMenuActions, dense, height, error, testId, }: TableProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Table: <T extends object>({ columns, data, getRowId, isLoading, paginationMode, pageInfo, subText, onPageSizeChange, onPageChange, sortBy, sortOrder, onSortChange, enableRowSelection, selectedRows, onRowSelectionChange, getRowDisabled, onRowClick, contextMenuActions, dense, height, error, testId, }: TableProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};