@webority/ui-react 0.17.3 → 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

@@ -29,8 +29,17 @@
  * @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.
@@ -40,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, density, striped, maxHeight, stickyFirstColumn, rowStatus, ...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;
@@ -63,7 +72,11 @@ export default function AppDataTable({ columns, rows, rowKey, sort, onSort, load
     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>;

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";
@@ -87,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;
+};