@webority/ui-react 0.17.1 → 0.17.3

package/dist/types/components/AppDataTable.d.ts

@@ -15,14 +15,24 @@
  * @param {(row: object) => import('react').ReactNode} [props.rowActions]
  * @param {string} [props.rowActionsLabel]
  * @param {object} [props.pagination] The footer's state, usually straight from usePagination:
- *   `{ page, totalPages, pageSize, total, firstRow, lastRow, setPage, setPageSize }`, plus the
- *   optional `pageSizes` and `mode` that AppTablePagination takes. The footer shows once `total`
- *   is above 0 and stays in place while `loading`, so the table does not jump between pages.
+ *   `{ page, totalPages, pageSize, total, setPage, setPageSize }`, plus the optional `pageSizes`
+ *   and `mode` that AppTablePagination takes. The footer shows once `total` is above 0 and stays
+ *   in place while `loading`, so the table does not jump between pages.
  * @param {string} [props.ariaLabel]
  * @param {string} [props.className] Extra classes on the <table> (column/table styling).
  * @param {string} [props.wrapperClassName] Extra classes on the `.table-wrap` outer div — the
  *   padding hook. Manage the table's inset from here (e.g. a class that sets `--wui-table-pad`);
  *   the Razor counterpart is a plain `class` on `<app-data-table>`.
+ * @param {'comfortable'|'cozy'|'compact'} [props.density='comfortable'] Row height: 54 / 48 / 40px.
+ *   compact is one line per row (the identity subline is hidden). An avatar with no size of its own
+ *   follows the density (32 / 28 / 24px).
+ * @param {boolean} [props.striped=false] Alternate-row shading in place of divider lines.
+ * @param {string|number} [props.maxHeight] Caps the table's height; the body scrolls inside it with
+ *   the header pinned. Without it there is no scroll box for the header to stick to.
+ * @param {boolean} [props.stickyFirstColumn=false] Pins the first column (and the select/expand
+ *   column before it) while a wide table scrolls sideways.
+ * @param {(row: object) => 'success'|'warning'|'danger'|'info'|undefined} [props.rowStatus] A coloured
+ *   bar on the row's leading edge, e.g. danger for an overdue invoice. Undefined draws none.
  * @param {boolean} [props.selectable=false] Render a leading checkbox column.
  * @param {Set<string|number>} [props.selectedIds] Currently selected row keys.
  * @param {(id: string|number) => void} [props.onToggleRow]
@@ -30,7 +40,7 @@
  * @param {(row: object) => import('react').ReactNode} [props.renderExpanded] When given, each row
  *   gets a leading expand toggle; the returned content renders in a full-width row beneath it.
  */
-export default function AppDataTable({ columns, rows, rowKey, sort, onSort, loading, skeletonRows, empty, emptyFiltered, sourceCount, rowActions, rowActionsLabel, pagination, ariaLabel, className, wrapperClassName, selectable, selectedIds, onToggleRow, onToggleAll, renderExpanded, ...rest }: {
+export default function AppDataTable({ columns, rows, rowKey, sort, onSort, loading, skeletonRows, empty, emptyFiltered, sourceCount, rowActions, rowActionsLabel, pagination, ariaLabel, className, wrapperClassName, selectable, selectedIds, onToggleRow, onToggleAll, renderExpanded, density, striped, maxHeight, stickyFirstColumn, rowStatus, ...rest }: {
     columns: object[];
     rows: object[];
     rowKey?: (row: object, index: number) => string | number;
@@ -50,6 +60,11 @@ export default function AppDataTable({ columns, rows, rowKey, sort, onSort, load
     ariaLabel?: string;
     className?: string;
     wrapperClassName?: string;
+    density?: 'comfortable' | 'cozy' | 'compact';
+    striped?: boolean;
+    maxHeight?: string | number;
+    stickyFirstColumn?: boolean;
+    rowStatus?: (row: object) => 'success' | 'warning' | 'danger' | 'info' | undefined;
     selectable?: boolean;
     selectedIds?: Set<string | number>;
     onToggleRow?: (id: string | number) => void;

package/dist/types/components/AppTablePagination.d.ts

@@ -1,6 +1,9 @@
 /**
  * Pagination footer under a .table. Pair with usePagination.
  *
+ * A page-size menu ("10 per page") beside the page buttons. It shows no row range and no total:
+ * the page buttons already say where you are.
+ *
  * `page` is ONE-BASED, matching `<app-table-pagination page="…">` (the shared 1-based pagination contract). It used to be zero-based here while
  * Razor's was one-based — the same prop name meaning different things on the two surfaces,
  * which no name-level check can see. `pageCount` is likewise now `totalPages`, the name
@@ -10,30 +13,24 @@
  * @param {number} props.page 1-based.
  * @param {number} props.totalPages
  * @param {number} props.pageSize
- * @param {number} props.total
- * @param {number} props.firstRow
- * @param {number} props.lastRow
  * @param {(page: number) => void} props.onPageChange
  * @param {(size: number) => void} props.onPageSizeChange
  * @param {number[]} [props.pageSizes]
- * @param {'prev-next'|'numbered'} [props.mode='prev-next'] prev-next (default) is the arrows-
- *   only nav above. numbered inserts windowed page buttons — first/last plus an ellipsis over
- *   any run of hidden pages — between the arrows.
- * @param {boolean} [props.showPageSize=true] Show the "Rows per page" selector. Set false for a
- *   compact pager that pages but doesn't expose page size (e.g. a dense numbered table).
+ * @param {'numbered'|'prev-next'} [props.mode='numbered'] numbered (default) puts windowed page
+ *   buttons (first/last plus an ellipsis over any run of hidden pages) between the arrows.
+ *   prev-next is the arrows with a "Page N of M" readout.
+ * @param {boolean} [props.showPageSize=true] Show the page-size menu. Set false for a pager that
+ *   pages but doesn't expose page size.
  * @param {string} [props.className] Merged with the component's own table-pagination class.
  */
-export default function AppTablePagination({ page, totalPages, pageSize, total, firstRow, lastRow, onPageChange, onPageSizeChange, pageSizes, mode, showPageSize, className, ...rest }: {
+export default function AppTablePagination({ page, totalPages, pageSize, onPageChange, onPageSizeChange, pageSizes, mode, showPageSize, className, ...rest }: {
     page: number;
     totalPages: number;
     pageSize: number;
-    total: number;
-    firstRow: number;
-    lastRow: number;
     onPageChange: (page: number) => void;
     onPageSizeChange: (size: number) => void;
     pageSizes?: number[];
-    mode?: 'prev-next' | 'numbered';
+    mode?: 'numbered' | 'prev-next';
     showPageSize?: boolean;
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppTableToolbar.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The toolbar above a table: filters on the left, search and actions on the right. While rows are
+ * selected the same strip becomes a bulk bar ("3 selected", the bulk actions, Clear), so the two
+ * never compete for space. Place it directly above `AppDataTable`; Razor counterpart:
+ * `<app-table-toolbar for="…">`.
+ *
+ * Both rows are always rendered and one is `hidden`, so the markup is identical on both surfaces
+ * and the swap never shifts what comes after.
+ *
+ * @param {object} props
+ * @param {import('react').ReactNode} [props.filters] Left side: status segments, chips, a filter menu.
+ * @param {import('react').ReactNode} [props.actions] Right side: search, export, a columns menu.
+ * @param {number} [props.selectedCount=0] Selected rows. Above 0, the bulk bar replaces the toolbar.
+ * @param {import('react').ReactNode} [props.bulkActions] Buttons shown in the bulk bar.
+ * @param {() => void} [props.onClearSelection] Shows a Clear button in the bulk bar that calls this.
+ * @param {string} [props.className]
+ */
+export default function AppTableToolbar({ filters, actions, selectedCount, bulkActions, onClearSelection, className, ...rest }: {
+    filters?: import('react').ReactNode;
+    actions?: import('react').ReactNode;
+    selectedCount?: number;
+    bulkActions?: import('react').ReactNode;
+    onClearSelection?: () => void;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/types/index.d.ts

@@ -72,6 +72,7 @@ export { default as AppStepper } from "./components/AppStepper.jsx";
 export { default as AppSwitch } from "./components/AppSwitch.jsx";
 export { default as AppTableEmptyState } from "./components/AppTableEmptyState.jsx";
 export { default as AppTablePagination } from "./components/AppTablePagination.jsx";
+export { default as AppTableToolbar } from "./components/AppTableToolbar.jsx";
 export { default as AppTabs } from "./components/AppTabs.jsx";
 export { default as AppTagInput } from "./components/AppTagInput.jsx";
 export { default as AppTextarea } from "./components/AppTextarea.jsx";