@overdoser/react-toolkit 0.0.11 → 0.0.13

package/llms.txt

@@ -106,6 +106,8 @@ Props:
 - `hoverable?: boolean` — default `false`
 - `compact?: boolean` — default `false`
 - `rowKey?: keyof T & string` — column key to use as React key; falls back to row index.
+- `rowClassName?: string | ((row: T, index: number) => string | undefined)` — per-row class. Pass a string for a static class or a callback to compute it dynamically (e.g. highlight rows matching a predicate).
+- `rowStyle?: CSSProperties | ((row: T, index: number) => CSSProperties | undefined)` — per-row inline style. Same shape as `rowClassName`.
 - `emptyMessage?: ReactNode` — default `'No data'`
 - `pagination?: PaginationConfig` — see below. When omitted, all rows render.
 - `classes?: Partial<TableClasses>` where `TableClasses = { wrapper, root, headerCell, row, cell, emptyCell, paginator, pageButton }`
@@ -162,6 +164,20 @@ Server-side (controlled) example:
 />
 ```
 
+Row-level styling (highlight rows of interest):
+```tsx
+<Table
+  data={orders}
+  columns={columns}
+  rowClassName={(row) => (row.flagged ? 'crk-row-flagged' : undefined)}
+  // …or inline:
+  rowStyle={(row) =>
+    row.amount > 10000 ? { backgroundColor: 'var(--crk-color-warning-light)' } : undefined
+  }
+/>
+```
+Both accept a static value or `(row, index) => …`. Returned `undefined` is treated as no class/style.
+
 ### `useTableSort` (hook)
 Import: `import { useTableSort } from '@overdoser/react-toolkit'`
 Signature: `useTableSort<T>(data: T[], initialSort?: SortConfig[])`
@@ -368,6 +384,7 @@ Props:
 - `onValueChange?: (value: string) => void` — single-mode value-only callback.
 - `onValuesChange?: (values: string[]) => void` — multi-mode callback.
 - `clearSearchOnSelect?: boolean` — default `true`. Multi-mode only.
+- `closeOnSelect?: boolean` — default `true`. Multi-mode only. The menu closes after each add/remove (and after a `Create` row click). Set to `false` for the "stay open until done" pattern when picking many values rapidly.
 - `allowCreate?: boolean` — default `false`. Multi-mode only. Adds a "Create '<query>'" row when the search query doesn't match an existing option. Pressing Enter (or clicking the row) pushes the trimmed query into `onValuesChange` and fires `onCreate`.
 - `onCreate?: (value: string) => void` — Multi-mode only, paired with `allowCreate`. Fires with the new value; consumers typically persist it (e.g. push it back into `options`).
 - `createLabel?: (query: string) => ReactNode` — Multi-mode only. Custom render for the create row. Default: `Create "<query>"`.

package/manifest.json

@@ -78,6 +78,8 @@
         "hoverable": { "type": "boolean", "default": false },
         "compact": { "type": "boolean", "default": false },
         "rowKey": { "type": "keyof T & string" },
+        "rowClassName": { "type": "string | ((row: T, index: number) => string | undefined)", "notes": "Per-row class. Use a callback to highlight rows matching a predicate." },
+        "rowStyle": { "type": "CSSProperties | ((row: T, index: number) => CSSProperties | undefined)", "notes": "Per-row inline style. Same shape as rowClassName." },
         "emptyMessage": { "type": "ReactNode", "default": "No data" },
         "pagination": { "type": "PaginationConfig" },
         "classes": { "type": "Partial<TableClasses>", "shape": ["wrapper", "root", "headerCell", "row", "cell", "emptyCell", "paginator", "pageButton"] }
@@ -254,6 +256,7 @@
         "onValueChange": { "type": "(value: string) => void", "notes": "Single-mode value-only callback." },
         "onValuesChange": { "type": "(values: string[]) => void", "notes": "Multi-mode callback." },
         "clearSearchOnSelect": { "type": "boolean", "default": true, "notes": "Multi-mode only." },
+        "closeOnSelect": { "type": "boolean", "default": true, "notes": "Multi-mode only. Menu closes after each add/remove/create. Set false for the stay-open pattern." },
         "allowCreate": { "type": "boolean", "default": false, "notes": "Multi-mode only. Adds a 'Create <query>' row when the query doesn't match an existing option; pressing Enter (or clicking it) pushes the trimmed query into onValuesChange and fires onCreate." },
         "onCreate": { "type": "(value: string) => void", "notes": "Multi-mode only. Paired with allowCreate." },
         "createLabel": { "type": "(query: string) => ReactNode", "notes": "Multi-mode only. Custom render for the Create row." },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@overdoser/react-toolkit",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "type": "module",
   "main": "./index.js",
   "module": "./index.js",