@overdoser/react-toolkit 0.0.10 → 0.0.12

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[])`

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"] }

package/package.json

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

package/recipes/multi-select-in-modal.tsx

@@ -21,6 +21,12 @@ const TAGS = [
  * does NOT need to be sized large enough** to contain the menu. The menu
  * uses `--crk-z-floating` (1060) which sits above `--crk-z-modal` (1050).
  *
+ * Pair this pattern with `closeOnBackdrop={false}`: clicking the modal
+ * backdrop while the menu is open is "outside" the menu (closes the menu)
+ * AND on the backdrop (would close the modal too). Disabling backdrop
+ * dismissal scopes the click to closing only the menu — users dismiss the
+ * modal explicitly via Cancel/Save/×.
+ *
  * If you have a reason to keep the menu inside the modal subtree (e.g.,
  * parent-scoped CSS theming), pass `portal={false}` and size the modal
  * generously.
@@ -32,7 +38,7 @@ export function MultiSelectInModalRecipe() {
   return (
     <>
       <Button onClick={() => setOpen(true)}>Edit tags</Button>
-      <Modal open={open} onClose={() => setOpen(false)} size="sm">
+      <Modal open={open} onClose={() => setOpen(false)} size="sm" closeOnBackdrop={false}>
         <Modal.Header onClose={() => setOpen(false)}>Tags</Modal.Header>
         <Modal.Body>
           <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>