@paubox/ui 3.5.0 → 4.0.0

package/index.esm.js

@@ -36210,7 +36210,7 @@ var ResizeHandleContainer = styled.div(_templateObject3$3());
 var ResizeHandle = styled.div(_templateObject4$3(), neutral300$1);
 var SortIcon = styled.span(_templateObject5$2(), spacing(1));
 var TableHeader = function(param) {
-    var table = param.table, disableControls = param.disableControls, dense = param.dense, _param_testId = param.testId, testId = _param_testId === void 0 ? 'table' : _param_testId;
+    var table = param.table, disableControls = param.disableControls, dense = param.dense, tableId = param.tableId;
     return /*#__PURE__*/ jsx(StyledHeader, {
         children: table.getHeaderGroups().map(function(headerGroup) {
             return /*#__PURE__*/ jsx("tr", {
@@ -36244,7 +36244,7 @@ var TableHeader = function(param) {
                                     cursor: header.column.getCanSort() ? 'pointer' : 'default',
                                     justifyContent: justifyContent
                                 },
-                                "data-testid": header.column.getCanSort() ? "".concat(testId, "-column-header-").concat(formatForId(header.id), "-sort-button") : undefined,
+                                "data-testid": header.column.getCanSort() ? "".concat(tableId, "-column-header-").concat(formatForId(header.id), "-sort-button") : undefined,
                                 children: [
                                     flexRender(header.column.columnDef.header, header.getContext()),
                                     header.column.getCanSort() && /*#__PURE__*/ jsxs(SortIcon, {
@@ -36406,7 +36406,7 @@ var ClampWrapper = styled.div(_templateObject8(), function(props) {
     return props.maxLines;
 });
 var TableBody = function(param) {
-    var table = param.table, enableRowSelection = param.enableRowSelection, onRowClick = param.onRowClick, getRowDisabled = param.getRowDisabled, dense = param.dense, _param_testId = param.testId, testId = _param_testId === void 0 ? 'table' : _param_testId;
+    var table = param.table, enableRowSelection = param.enableRowSelection, onRowClick = param.onRowClick, getRowDisabled = param.getRowDisabled, dense = param.dense, tableId = param.tableId;
     return /*#__PURE__*/ jsx(StyledTableBody, {
         children: table.getRowModel().rows.map(function(row) {
             var rowClickEnabled = enableRowSelection || !!onRowClick;
@@ -36422,7 +36422,7 @@ var TableBody = function(param) {
                     cursor: rowClickEnabled ? isDisabled ? 'not-allowed' : 'pointer' : undefined
                 },
                 enableHover: rowClickEnabled,
-                "data-testid": "".concat(testId, "-row-").concat(row.id),
+                "data-testid": "".concat(tableId, "-row-").concat(row.id),
                 children: row.getVisibleCells().map(function(cell) {
                     var cellValue = cell.getValue();
                     var columnDef = cell.column.columnDef;
@@ -36698,11 +36698,25 @@ var BottomBar = styled.div(_templateObject3$1(), spacing(2));
 var TopBarElement = styled.div(_templateObject4$1(), spacing(1));
 var ContextMenuButton = styled(Button)(_templateObject5(), 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, _param_paginationMode = param.paginationMode, paginationMode = _param_paginationMode === void 0 ? 'page' : _param_paginationMode, pageInfo = param.pageInfo, subText = param.subText, onPageSizeChange = param.onPageSizeChange, pageSizeOptions = param.pageSizeOptions, 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, containerStyle = param.containerStyle, error = param.error, _param_testId = param.testId, testId = _param_testId === void 0 ? 'table' : _param_testId, toolbar = param.toolbar;
+    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, pageSizeOptions = param.pageSizeOptions, onPageChange = param.onPageChange, sortBy = param.sortBy, sortOrder = param.sortOrder, onSortChange = param.onSortChange, columnSizingProp = param.columnSizing, onColumnSizingChange = param.onColumnSizingChange, _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, containerStyle = param.containerStyle, error = param.error, tableId = param.tableId, toolbar = param.toolbar;
     var containerRef = useRef(null);
     var ctxMenuAnchorRef = useRef(null);
-    var _useState = _sliced_to_array$1(useState({}), 2), columnSizing = _useState[0], setColumnSizing = _useState[1];
+    // Column widths support both controlled (consumer passes `columnSizing` +
+    // `onColumnSizingChange`, e.g. to persist them) and uncontrolled (internal
+    // state) modes.
+    var _useState = _sliced_to_array$1(useState({}), 2), internalColumnSizing = _useState[0], setInternalColumnSizing = _useState[1];
+    var isSizingControlled = columnSizingProp !== undefined;
+    var columnSizing = isSizingControlled ? columnSizingProp : internalColumnSizing;
     var _useState1 = _sliced_to_array$1(useState(null), 2), ctxMenuRow = _useState1[0], setCtxMenuRow = _useState1[1];
+    var handleColumnSizingChange = useCallback(function(updater) {
+        var next = typeof updater === 'function' ? updater(columnSizing) : updater;
+        if (!isSizingControlled) setInternalColumnSizing(next);
+        onColumnSizingChange === null || onColumnSizingChange === void 0 ? void 0 : onColumnSizingChange(next);
+    }, [
+        columnSizing,
+        isSizingControlled,
+        onColumnSizingChange
+    ]);
     var disableControls = isLoading || !(data === null || data === void 0 ? void 0 : data.length) || !!error;
     var hasSomePageProps = !!(pageInfo || onPageSizeChange || onPageChange);
     var hasPaginationHandlers = !!(onPageSizeChange && onPageChange);
@@ -36753,7 +36767,7 @@ var Table = function(param) {
                     indeterminate: table.getIsSomeRowsSelected(),
                     onChange: table.getToggleAllPageRowsSelectedHandler(),
                     disabled: disableControls,
-                    "data-testid": "".concat(testId, "-header-checkbox")
+                    "data-testid": "".concat(tableId, "-header-checkbox")
                 });
             },
             cell: function(param) {
@@ -36766,13 +36780,13 @@ var Table = function(param) {
                         return e.stopPropagation();
                     },
                     onChange: row.getToggleSelectedHandler(),
-                    "data-testid": "".concat(testId, "-row-").concat(row.id, "-checkbox")
+                    "data-testid": "".concat(tableId, "-row-").concat(row.id, "-checkbox")
                 });
             }
         };
     }, [
         disableControls,
-        testId
+        tableId
     ]);
     var handleContextMenu = useCallback(function(e, row) {
         e.stopPropagation();
@@ -36801,7 +36815,7 @@ var Table = function(param) {
                         e.stopPropagation();
                         handleContextMenu(e, row);
                     },
-                    "data-testid": "".concat(testId, "-row-").concat(row.id, "-context-menu-button"),
+                    "data-testid": "".concat(tableId, "-row-").concat(row.id, "-context-menu-button"),
                     style: {
                         margin: '0 auto'
                     },
@@ -36811,7 +36825,7 @@ var Table = function(param) {
         };
     }, [
         handleContextMenu,
-        testId,
+        tableId,
         ctxMenuRow
     ]);
     var allColumns = useMemo(function() {
@@ -36879,7 +36893,7 @@ var Table = function(param) {
         getFilteredRowModel: getFilteredRowModel(),
         onRowSelectionChange: onRowSelectionChange,
         enableRowSelection: !!enableRowSelection,
-        onColumnSizingChange: setColumnSizing,
+        onColumnSizingChange: handleColumnSizingChange,
         columnResizeMode: 'onChange'
     });
     var renderPagination = function() {
@@ -36892,7 +36906,7 @@ var Table = function(param) {
                 resetContainerScroll();
                 onPageSizeChange(size);
             },
-            testId: "".concat(testId, "-pagination")
+            testId: "".concat(tableId, "-pagination")
         };
         return paginationMode === 'page' && 'currentPage' in pageInfo ? /*#__PURE__*/ jsx(Pagination, _object_spread_props$2(_object_spread$2({
             mode: "page",
@@ -36914,6 +36928,7 @@ var Table = function(param) {
     };
     var showTopBar = hasPaginationHandlers || toolbar;
     return /*#__PURE__*/ jsxs("div", {
+        "data-testid": tableId,
         children: [
             showTopBar && /*#__PURE__*/ jsxs(TopBar, {
                 children: [
@@ -36977,7 +36992,7 @@ var Table = function(param) {
                                         table: table,
                                         disableControls: disableControls,
                                         dense: dense,
-                                        testId: testId
+                                        tableId: tableId
                                     }),
                                     /*#__PURE__*/ jsx(TableBody, {
                                         table: table,
@@ -36985,7 +37000,7 @@ var Table = function(param) {
                                         onRowClick: onRowClick,
                                         getRowDisabled: getRowDisabled,
                                         dense: dense,
-                                        testId: testId
+                                        tableId: tableId
                                     })
                                 ]
                             })

package/package.json

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

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

@@ -1,5 +1,5 @@
 import { CSSProperties, HTMLProps, ReactNode } from 'react';
-import { ColumnDef, OnChangeFn, Row } from '@tanstack/react-table';
+import { ColumnDef, OnChangeFn, Row, ColumnSizingState } from '@tanstack/react-table';
 import { PageInfoPageBased, PageInfoCursorBased } from '../Pagination/Pagination';
 export type CellOverflow = 'truncate' | 'wrap' | 'clamp';
 export type ColumnAlign = 'left' | 'right' | 'center';
@@ -43,6 +43,21 @@ interface TableRowProps<T> {
     getRowDisabled?: (row: T) => boolean;
     contextMenuActions?: RowAction<T>[];
 }
+interface TableSizingProps {
+    /**
+     * Controlled column widths, keyed by column `key`. When provided, the table
+     * is controlled — the consumer owns the value (e.g. seeded from persisted
+     * state) and must update it via `onColumnSizingChange`. When omitted, the
+     * table manages widths internally.
+     */
+    columnSizing?: ColumnSizingState;
+    /**
+     * Called with the fully-resolved next column-sizing state whenever the user
+     * resizes a column. Mirrors `onSortChange`: the consumer receives a plain
+     * value (not a TanStack updater), so it can persist it directly.
+     */
+    onColumnSizingChange?: (columnSizing: ColumnSizingState) => void;
+}
 interface PaginationProps {
     paginationMode?: 'page' | 'cursor';
     pageInfo?: PageInfoPageBased | PageInfoCursorBased;
@@ -53,7 +68,20 @@ interface PaginationProps {
 }
 interface TableDataProps<T> {
     columns: TableColumn<T>[];
-    testId?: string;
+    /**
+     * Stable, app-wide-unique identifier for this table. Required.
+     *
+     * Serves two purposes:
+     *  - Namespaces every derived `data-testid` (rows, checkboxes, headers,
+     *    context menus, pagination) and is rendered as the root `data-testid`.
+     *  - Acts as the persistence key consumers use to store per-table view
+     *    state (sort, column widths).
+     *
+     * Contract: must be stable for the life of the table and unique across the
+     * whole app — NOT just the current page. Changing it orphans any persisted
+     * state and breaks selectors that reference the old value.
+     */
+    tableId: string;
     data?: T[];
     getRowId: (originalRow: T, index: number, parent?: Row<T> | undefined) => string;
     isLoading?: boolean;
@@ -63,7 +91,7 @@ interface TableDataProps<T> {
     error?: string;
     toolbar?: ReactNode | ReactNode[];
 }
-export interface TableProps<T extends object> extends TableStyleProps, TableRowProps<T>, TableDataProps<T>, PaginationProps {
+export interface TableProps<T extends object> extends TableStyleProps, TableRowProps<T>, TableDataProps<T>, TableSizingProps, PaginationProps {
 }
-export declare const Table: <T extends object>({ columns, data, getRowId, isLoading, paginationMode, pageInfo, subText, onPageSizeChange, pageSizeOptions, onPageChange, sortBy, sortOrder, onSortChange, enableRowSelection, selectedRows, onRowSelectionChange, getRowDisabled, onRowClick, contextMenuActions, dense, height, containerStyle, error, testId, toolbar, }: TableProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Table: <T extends object>({ columns, data, getRowId, isLoading, paginationMode, pageInfo, subText, onPageSizeChange, pageSizeOptions, onPageChange, sortBy, sortOrder, onSortChange, columnSizing: columnSizingProp, onColumnSizingChange, enableRowSelection, selectedRows, onRowSelectionChange, getRowDisabled, onRowClick, contextMenuActions, dense, height, containerStyle, error, tableId, toolbar, }: TableProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

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

@@ -6,7 +6,7 @@ interface TableBodyProps<T extends object> {
     title?: string;
     dense: boolean;
     getRowDisabled?: (row: T) => boolean;
-    testId?: string;
+    tableId: string;
 }
-export declare const TableBody: <T extends object>({ table, enableRowSelection, onRowClick, getRowDisabled, dense, testId, }: TableBodyProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TableBody: <T extends object>({ table, enableRowSelection, onRowClick, getRowDisabled, dense, tableId, }: TableBodyProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

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

@@ -3,7 +3,7 @@ interface TableHeaderProps<T> {
     table: Table<T>;
     disableControls: boolean;
     dense: boolean;
-    testId?: string;
+    tableId: string;
 }
-export declare const TableHeader: <T extends object>({ table, disableControls, dense, testId, }: TableHeaderProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TableHeader: <T extends object>({ table, disableControls, dense, tableId, }: TableHeaderProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};