@webority/ui-react 0.17.2 → 0.17.4

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

@@ -0,0 +1,23 @@
+/**
+ * A "Columns" menu that hides and shows a table's columns: one checkbox per column marked
+ * `hideable`. Put it in the table toolbar's actions and feed it from `useTableView`, which also
+ * hands the same `hiddenColumns` to `AppDataTable`. Razor counterpart: `<app-column-menu for="…" view-key="…">`.
+ *
+ * @param {object} props
+ * @param {{ key: string, label: import('react').ReactNode, hideable?: boolean }[]} props.columns The table's columns.
+ * @param {string[]} [props.hiddenColumns] Keys of the columns currently hidden.
+ * @param {(key: string) => void} props.onToggle Called with a column's key when its box changes.
+ * @param {string} [props.label="Columns"] Accessible name and tooltip of the button, and the menu heading.
+ * @param {string} [props.className] Extra classes on the menu panel.
+ */
+export default function AppColumnMenu({ columns, hiddenColumns, onToggle, label, className, ...rest }: {
+    columns: {
+        key: string;
+        label: import('react').ReactNode;
+        hideable?: boolean;
+    }[];
+    hiddenColumns?: string[];
+    onToggle: (key: string) => void;
+    label?: string;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -15,14 +15,33 @@
  * @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 {string[]} [props.hiddenColumns] Keys of `hideable` columns to leave out (from useTableView).
+ *   A column that is not hideable always shows.
+ * @param {boolean} [props.stackOnMobile=false] Below 576px, shows each row as a card: the first
+ *   column on top, then "label: value" lines from the column labels, actions at the bottom.
+ * @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) => string} [props.rowHref] Makes the whole row open this URL on click or Enter
+ *   (Ctrl/Cmd or middle click opens a new tab). Checkboxes, buttons, links and menus in the row keep
+ *   their own behaviour. Razor: `data-href` on the <tr>.
+ * @param {(row: object) => void} [props.onRowClick] Called when the row is clicked or Enter is pressed
+ *   on it, for in-page actions (open a drawer). Same nested-control rule as rowHref.
+ * @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 +49,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, stackOnMobile, hiddenColumns, rowStatus, rowHref, onRowClick, ...rest }: {
     columns: object[];
     rows: object[];
     rowKey?: (row: object, index: number) => string | number;
@@ -50,6 +69,15 @@ 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;
+    hiddenColumns?: string[];
+    stackOnMobile?: boolean;
+    stickyFirstColumn?: boolean;
+    rowHref?: (row: object) => string;
+    onRowClick?: (row: object) => void;
+    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

@@ -15,6 +15,7 @@ export { default as AppChip } from "./components/AppChip.jsx";
 export { default as AppChoiceCard } from "./components/AppChoiceCard.jsx";
 export { default as AppChoiceChip } from "./components/AppChoiceChip.jsx";
 export { default as AppColorField } from "./components/AppColorField.jsx";
+export { default as AppColumnMenu } from "./components/AppColumnMenu.jsx";
 export { default as AppCommandPalette } from "./components/AppCommandPalette.jsx";
 export { default as AppCompareTable } from "./components/AppCompareTable.jsx";
 export { default as AppConfirmDialog } from "./components/AppConfirmDialog.jsx";
@@ -72,6 +73,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";
@@ -86,3 +88,4 @@ export { MODAL_ICONS } from "./components/ModalIcons.jsx";
 export { dismissAll, errorToast, toast } from "./components/toast.js";
 export { useCommandPaletteShortcut } from "./lib/useCommandPaletteShortcut.js";
 export { usePagination } from "./lib/usePagination.js";
+export { useTableView } from "./lib/useTableView.js";

package/dist/types/lib/useTableView.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Hidden columns and sort for one table, remembered per browser.
+ *
+ * @param {string} viewKey Names the view, e.g. "invoices". Two tables sharing a key share a view.
+ * @param {{ sort?: { key: string, dir: "asc"|"desc" } }} [options] The sort to start from.
+ * @returns {{ hiddenColumns: string[], toggleColumn: (key: string) => void,
+ *   sort: { key: string, dir: "asc"|"desc" }|undefined, setSort: (next: object|((prev: object) => object)) => void }}
+ */
+export declare function useTableView(viewKey: string, { sort: initialSort }?: {
+    sort?: {
+        key: string;
+        dir: "asc" | "desc";
+    };
+}): {
+    hiddenColumns: string[];
+    toggleColumn: (key: string) => void;
+    sort: {
+        key: string;
+        dir: "asc" | "desc";
+    } | undefined;
+    setSort: (next: object | ((prev: object) => object)) => void;
+};