@jirawatpyk/aura-react 5.4.0 → 5.5.0

package/README.md

@@ -186,6 +186,19 @@ DataTable with sort and page in the URL (4.17): `onStateChange={({ sort, page })
 - **Time zone**: `timeZone` on AuraProvider, DatePicker, DateRangePicker and Calendar decides "today" (the marker, `min`/`max="today"`, the first month shown); or pass `today` as an ISO date. `todayIn('Asia/Bangkok')` is exported from the root and `/server`.
 - **Toasts** queue past three instead of dropping: six in a row all show, in order, three at a time.
 
+## 5.5 — DataTable is generic over its rows
+
+- The type of `rows` is the table's row type, and every `render`, `sortValue`, `getRowHref` and `onRowActivate` gets it — no annotations, and a typo inside a callback (`r.amuont`) or a callback written for another type is a compile error (column `key`s stay plain strings):
+
+```tsx
+const columns: DataTableColumn<Order>[] = [{ key: 'amount', label: 'AMOUNT', align: 'end', render: (r) => baht(r.amount) }];
+<DataTable label="Orders" rows={orders} columns={columns} onRowActivate={setDetail} getRowHref={(r) => '/orders/' + r.id} />
+```
+
+- `DataTableColumn<Row>` types a column list declared on its own; `<DataTable<Order> …>` names the type explicitly. `rows={[]}` (nothing loaded yet) keeps the untyped default, and so do `any[]`, `Record<string, any>[]` and anything reading `typeof DataTable` (`ComponentProps`, `memo`, wrappers).
+- Two type-level changes: rows that are a union of arrays (`cond ? orders : invoices`) need the type named, `<DataTable<Order | Invoice> …>`; rows typed `Record<string, unknown>[]` give `render` an `unknown` value, so convert it (`String(r.n)`).
+- Types only; nothing changes at run time. `typeof DataTable` is now a generic function type rather than `ForwardRefExoticComponent` (it still takes `ref`).
+
 ## 5.4 — types, and TypeScript across the repo
 
 - **DataTable** takes rows of your own interface (`rows={orders}` with `interface Order {…}`; readonly arrays too), and `render`, `sortValue`, `getRowHref` and `onRowActivate` can be written with it: `render: (r: Order) => baht(r.amount)` — no cast from `Record<string, any>`.

package/dist/aura.bundle.js

@@ -68,7 +68,7 @@ window.Aura = (() => {
     Combobox: () => Combobox,
     Command: () => Command,
     Container: () => Container,
-    DataTable: () => DataTable,
+    DataTable: () => DataTable2,
     DatePicker: () => DatePicker,
     DateRangePicker: () => DateRangePicker,
     Dialog: () => Dialog,
@@ -3982,7 +3982,7 @@ window.Aura = (() => {
   var ROW_H_DEFAULT = 48;
   var OVERSCAN = 8;
   var FLEX_MIN = 160;
-  var DataTable = React28.forwardRef(function DataTable2(props, ref) {
+  var DataTableImpl = React28.forwardRef(function DataTable(props, ref) {
     const t = useStrings();
     const columns = props.columns || DEFAULT_COLUMNS;
     const byKey = {};
@@ -5217,6 +5217,7 @@ window.Aura = (() => {
     }
     return /* @__PURE__ */ React28.createElement("div", { ref, className: cx("aura-table-box", props.className) }, out);
   });
+  var DataTable2 = DataTableImpl;
 
   // src/Card.tsx
   var React29 = __toESM(require_react(), 1);

package/dist/cjs/index.cjs

@@ -49,7 +49,7 @@ __export(index_exports, {
   Combobox: () => Combobox,
   Command: () => Command,
   Container: () => Container,
-  DataTable: () => DataTable,
+  DataTable: () => DataTable2,
   DatePicker: () => DatePicker,
   DateRangePicker: () => DateRangePicker,
   Dialog: () => Dialog,
@@ -3964,7 +3964,7 @@ function hidePx(c) {
 var ROW_H_DEFAULT = 48;
 var OVERSCAN = 8;
 var FLEX_MIN = 160;
-var DataTable = React28.forwardRef(function DataTable2(props, ref) {
+var DataTableImpl = React28.forwardRef(function DataTable(props, ref) {
   const t = useStrings();
   const columns = props.columns || DEFAULT_COLUMNS;
   const byKey = {};
@@ -5199,6 +5199,7 @@ var DataTable = React28.forwardRef(function DataTable2(props, ref) {
   }
   return /* @__PURE__ */ React28.createElement("div", { ref, className: cx("aura-table-box", props.className) }, out);
 });
+var DataTable2 = DataTableImpl;
 
 // src/Card.tsx
 var React29 = __toESM(require("react"), 1);

package/dist/esm/DataTable.js

@@ -27,7 +27,7 @@ function hidePx(c) {
   return px != null && px > 0 ? px : void 0;
 }
 const ROW_H_DEFAULT = 48, OVERSCAN = 8, FLEX_MIN = 160;
-const DataTable = React.forwardRef(function DataTable2(props, ref) {
+const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
   const t = useStrings();
   const columns = props.columns || DEFAULT_COLUMNS;
   const byKey = {};
@@ -1262,6 +1262,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
   }
   return /* @__PURE__ */ React.createElement("div", { ref, className: cx("aura-table-box", props.className) }, out);
 });
+const DataTable2 = DataTableImpl;
 export {
-  DataTable
+  DataTable2 as DataTable
 };

package/dist/index.d.cts

@@ -46,12 +46,18 @@ export interface DataTableState {
 	sort: DataTableSort | null;
 	page: number;
 }
-/** A callback that gets one row. Written with your own row type (`(r: Order) => …`) it still fits (5.4):
- * the row is checked the way method parameters are, so no cast from `Record<string, any>` is needed. */
-export type RowCallback<R> = {
-	bivarianceHack(row: Record<string, any>): R;
+/** Internal helper (exported only because the declarations reference it): `T` as written, but never inferred from
+ * this position (works before TypeScript 5.4's own `NoInfer`), so a table's row type comes from its `rows`. */
+export type NoInferRow<T> = [
+	T
+][T extends any ? 0 : never];
+/** A callback that gets one row of type `Row` and returns `T`. Checked the way method parameters are, so a callback
+ * written for a narrower or wider row type still fits; one written for an unrelated type is an error (5.5). */
+export type RowCallback<T, Row = Record<string, any>> = {
+	bivarianceHack(row: NoInferRow<Row>): T;
 }["bivarianceHack"];
-export interface DataTableColumn {
+/** One column. `Row` is the table's row type (5.5): `DataTableColumn<Order>` types `render` and `sortValue`. */
+export interface DataTableColumn<Row extends Record<string, any> = Record<string, any>> {
 	/** Key into each row object. */
 	key: string;
 	/** Header label (source style: UPPERCASE). */
@@ -67,9 +73,9 @@ export interface DataTableColumn {
 	/** Header becomes a button cycling asc → desc → unsorted. */
 	sortable?: boolean | undefined;
 	/** Value to sort by, when not the cell value (dates, amounts). */
-	sortValue?: RowCallback<string | number | null> | undefined;
+	sortValue?: RowCallback<string | number | null, Row> | undefined;
 	/** Custom cell content. */
-	render?: RowCallback<React$1.ReactNode> | undefined;
+	render?: RowCallback<React$1.ReactNode, Row> | undefined;
 	/** Set false to keep a sized column fixed when the table is `resizable`. */
 	resizable?: boolean | undefined;
 	/** Resize limits in px. Defaults 64 / 480. For the flexible column, minWidth defaults to 160. */
@@ -99,13 +105,14 @@ export interface DataTableEmpty {
 	/** One action, usually a secondary Button. */
 	action?: React$1.ReactNode | undefined;
 }
-/** Enterprise data table: 48px rows, hairline dividers, mono header band. */
-export interface DataTableProps {
+/** Enterprise data table: 48px rows, hairline dividers, mono header band. Generic over the row type (5.5): with
+ * `rows={orders}` every `render`, `sortValue`, `getRowHref` and `onRowActivate` gets an `Order`. */
+export interface DataTableProps<Row extends Record<string, any> = Record<string, any>> {
 	/** Defaults to ID · NAME · STATUS · OWNER (96 / 160 / 112 / auto px). */
-	columns?: DataTableColumn[] | undefined;
-	/** Row objects. Any typed interface works (5.4: before, `interface Order {…}` rows needed a cast); cells show
-	 * the value at each column's key unless the column has `render`. */
-	rows: ReadonlyArray<Record<string, any>>;
+	columns?: DataTableColumn<Row>[] | undefined;
+	/** Row objects, of any interface; their type is the table's row type. Cells show the value at each column's key
+	 * unless the column has `render`. */
+	rows: ReadonlyArray<Row>;
 	/** Column key giving each row a unique React key. Default: the first column's key. */
 	rowKey?: string | undefined;
 	/** Accessible name for the table. */
@@ -152,7 +159,7 @@ export interface DataTableProps {
 	totalRows?: number | undefined;
 	/** Makes each row a link: the first column's content renders as the provider's linkComponent (or `<a>`), and a click
 	 * or Enter anywhere on the row follows it. Ctrl/⌘-click opens a new tab as usual. */
-	getRowHref?: RowCallback<string> | undefined;
+	getRowHref?: RowCallback<string, Row> | undefined;
 	/** Pager arrows become links to these URLs (search-param paging). Without onPageChange the link navigates. */
 	getPageHref?: ((page: number) => string) | undefined;
 	/** Router link for getRowHref / getPageHref. Default: AuraProvider's linkComponent, else `<a>`. */
@@ -160,7 +167,7 @@ export interface DataTableProps {
 	/** Skeleton row count when there is no pageSize. Default 5. */
 	skeletonRows?: number | undefined;
 	/** Called on row click or Enter. */
-	onRowActivate?: RowCallback<void> | undefined;
+	onRowActivate?: RowCallback<void, Row> | undefined;
 	/** Fixed height in px: sticky header, and only the rows in view are rendered. */
 	height?: number | undefined;
 	/** Column menu on every header, drag-to-reorder, and the show/hide columns button. */
@@ -1290,8 +1297,15 @@ export declare const Tooltip: React$1.ForwardRefExoticComponent<TooltipProps & R
 export declare const Dialog: React$1.ForwardRefExoticComponent<DialogProps & React$1.RefAttributes<HTMLDivElement>>;
 /** Side panel over the page: record detail, filters, mobile navigation. Modal (focus trap, scroll lock, focus restore). */
 export declare const Drawer: React$1.ForwardRefExoticComponent<DrawerProps & React$1.RefAttributes<HTMLDivElement>>;
-/** Enterprise data table: 48px rows, hairline dividers, mono header band. */
-export declare const DataTable: React$1.ForwardRefExoticComponent<DataTableProps & React$1.RefAttributes<HTMLDivElement>>;
+/** Enterprise data table: 48px rows, hairline dividers, mono header band. Generic over the row type (5.5): the
+ * type of `rows` types every `render`, `sortValue`, `getRowHref` and `onRowActivate`. */
+export declare const DataTable: {
+	(props: DataTableProps & {
+		rows: readonly never[];
+	} & React$1.RefAttributes<HTMLDivElement>): React$1.ReactElement | null;
+	<Row extends Record<string, any> = Record<string, any>>(props: DataTableProps<Row> & React$1.RefAttributes<HTMLDivElement>): React$1.ReactElement | null;
+	displayName?: string | undefined;
+};
 export declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLElement>>;
 export declare const Tabs: React$1.ForwardRefExoticComponent<TabsProps & React$1.RefAttributes<HTMLDivElement>>;
 /** Side navigation: sections of links or buttons, collapsible groups, counts and badges. Arrow keys move between items. */

package/dist/index.d.ts

@@ -46,12 +46,18 @@ export interface DataTableState {
 	sort: DataTableSort | null;
 	page: number;
 }
-/** A callback that gets one row. Written with your own row type (`(r: Order) => …`) it still fits (5.4):
- * the row is checked the way method parameters are, so no cast from `Record<string, any>` is needed. */
-export type RowCallback<R> = {
-	bivarianceHack(row: Record<string, any>): R;
+/** Internal helper (exported only because the declarations reference it): `T` as written, but never inferred from
+ * this position (works before TypeScript 5.4's own `NoInfer`), so a table's row type comes from its `rows`. */
+export type NoInferRow<T> = [
+	T
+][T extends any ? 0 : never];
+/** A callback that gets one row of type `Row` and returns `T`. Checked the way method parameters are, so a callback
+ * written for a narrower or wider row type still fits; one written for an unrelated type is an error (5.5). */
+export type RowCallback<T, Row = Record<string, any>> = {
+	bivarianceHack(row: NoInferRow<Row>): T;
 }["bivarianceHack"];
-export interface DataTableColumn {
+/** One column. `Row` is the table's row type (5.5): `DataTableColumn<Order>` types `render` and `sortValue`. */
+export interface DataTableColumn<Row extends Record<string, any> = Record<string, any>> {
 	/** Key into each row object. */
 	key: string;
 	/** Header label (source style: UPPERCASE). */
@@ -67,9 +73,9 @@ export interface DataTableColumn {
 	/** Header becomes a button cycling asc → desc → unsorted. */
 	sortable?: boolean | undefined;
 	/** Value to sort by, when not the cell value (dates, amounts). */
-	sortValue?: RowCallback<string | number | null> | undefined;
+	sortValue?: RowCallback<string | number | null, Row> | undefined;
 	/** Custom cell content. */
-	render?: RowCallback<React$1.ReactNode> | undefined;
+	render?: RowCallback<React$1.ReactNode, Row> | undefined;
 	/** Set false to keep a sized column fixed when the table is `resizable`. */
 	resizable?: boolean | undefined;
 	/** Resize limits in px. Defaults 64 / 480. For the flexible column, minWidth defaults to 160. */
@@ -99,13 +105,14 @@ export interface DataTableEmpty {
 	/** One action, usually a secondary Button. */
 	action?: React$1.ReactNode | undefined;
 }
-/** Enterprise data table: 48px rows, hairline dividers, mono header band. */
-export interface DataTableProps {
+/** Enterprise data table: 48px rows, hairline dividers, mono header band. Generic over the row type (5.5): with
+ * `rows={orders}` every `render`, `sortValue`, `getRowHref` and `onRowActivate` gets an `Order`. */
+export interface DataTableProps<Row extends Record<string, any> = Record<string, any>> {
 	/** Defaults to ID · NAME · STATUS · OWNER (96 / 160 / 112 / auto px). */
-	columns?: DataTableColumn[] | undefined;
-	/** Row objects. Any typed interface works (5.4: before, `interface Order {…}` rows needed a cast); cells show
-	 * the value at each column's key unless the column has `render`. */
-	rows: ReadonlyArray<Record<string, any>>;
+	columns?: DataTableColumn<Row>[] | undefined;
+	/** Row objects, of any interface; their type is the table's row type. Cells show the value at each column's key
+	 * unless the column has `render`. */
+	rows: ReadonlyArray<Row>;
 	/** Column key giving each row a unique React key. Default: the first column's key. */
 	rowKey?: string | undefined;
 	/** Accessible name for the table. */
@@ -152,7 +159,7 @@ export interface DataTableProps {
 	totalRows?: number | undefined;
 	/** Makes each row a link: the first column's content renders as the provider's linkComponent (or `<a>`), and a click
 	 * or Enter anywhere on the row follows it. Ctrl/⌘-click opens a new tab as usual. */
-	getRowHref?: RowCallback<string> | undefined;
+	getRowHref?: RowCallback<string, Row> | undefined;
 	/** Pager arrows become links to these URLs (search-param paging). Without onPageChange the link navigates. */
 	getPageHref?: ((page: number) => string) | undefined;
 	/** Router link for getRowHref / getPageHref. Default: AuraProvider's linkComponent, else `<a>`. */
@@ -160,7 +167,7 @@ export interface DataTableProps {
 	/** Skeleton row count when there is no pageSize. Default 5. */
 	skeletonRows?: number | undefined;
 	/** Called on row click or Enter. */
-	onRowActivate?: RowCallback<void> | undefined;
+	onRowActivate?: RowCallback<void, Row> | undefined;
 	/** Fixed height in px: sticky header, and only the rows in view are rendered. */
 	height?: number | undefined;
 	/** Column menu on every header, drag-to-reorder, and the show/hide columns button. */
@@ -1290,8 +1297,15 @@ export declare const Tooltip: React$1.ForwardRefExoticComponent<TooltipProps & R
 export declare const Dialog: React$1.ForwardRefExoticComponent<DialogProps & React$1.RefAttributes<HTMLDivElement>>;
 /** Side panel over the page: record detail, filters, mobile navigation. Modal (focus trap, scroll lock, focus restore). */
 export declare const Drawer: React$1.ForwardRefExoticComponent<DrawerProps & React$1.RefAttributes<HTMLDivElement>>;
-/** Enterprise data table: 48px rows, hairline dividers, mono header band. */
-export declare const DataTable: React$1.ForwardRefExoticComponent<DataTableProps & React$1.RefAttributes<HTMLDivElement>>;
+/** Enterprise data table: 48px rows, hairline dividers, mono header band. Generic over the row type (5.5): the
+ * type of `rows` types every `render`, `sortValue`, `getRowHref` and `onRowActivate`. */
+export declare const DataTable: {
+	(props: DataTableProps & {
+		rows: readonly never[];
+	} & React$1.RefAttributes<HTMLDivElement>): React$1.ReactElement | null;
+	<Row extends Record<string, any> = Record<string, any>>(props: DataTableProps<Row> & React$1.RefAttributes<HTMLDivElement>): React$1.ReactElement | null;
+	displayName?: string | undefined;
+};
 export declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLElement>>;
 export declare const Tabs: React$1.ForwardRefExoticComponent<TabsProps & React$1.RefAttributes<HTMLDivElement>>;
 /** Side navigation: sections of links or buttons, collapsible groups, counts and badges. Arrow keys move between items. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-react",
-  "version": "5.4.0",
+  "version": "5.5.0",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",