@milktop/react-ui 0.2.4 → 0.2.5

package/dist/table/Table.d.ts

@@ -23,7 +23,8 @@
  * - `selectable`: a checkbox per row and a select-all; `selected`,
  *   `defaultSelected`: the selected rows' keys; `onSelectedChange`. Shift-click
  *   a row's checkbox to tick (or clear) the rows between it and the last one
- *   clicked
+ *   clicked. Once a row is ticked, clicking a row ticks (or clears) it too,
+ *   Shift a run, rather than calling `onRowClick`
  * - `loading`: skeleton rows while there are none yet (`loadingRows`, 5),
  *   else dims the rows
  * - `emptyText`, or `empty` (markup), for no rows
@@ -31,7 +32,8 @@
  * - `label`: a caption for assistive tech
  * - `size`: 'sm', 'md' (default) or 'lg' (roomier rows)
  * - `flush`: no border or rounding, to sit edge to edge in a card
- * - `onRowClick`: called with the row when a row is clicked (outside its controls)
+ * - `onRowClick`: called with the row when a row is clicked (outside its
+ *   controls), unless rows are ticked
  *
  * Or write the <table> yourself as its content, for the look alone (no
  * sorting, selection or loading states); `data-align` on cells works too.

package/dist/table/Table.js

@@ -24,7 +24,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * - `selectable`: a checkbox per row and a select-all; `selected`,
  *   `defaultSelected`: the selected rows' keys; `onSelectedChange`. Shift-click
  *   a row's checkbox to tick (or clear) the rows between it and the last one
- *   clicked
+ *   clicked. Once a row is ticked, clicking a row ticks (or clears) it too,
+ *   Shift a run, rather than calling `onRowClick`
  * - `loading`: skeleton rows while there are none yet (`loadingRows`, 5),
  *   else dims the rows
  * - `emptyText`, or `empty` (markup), for no rows
@@ -32,7 +33,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * - `label`: a caption for assistive tech
  * - `size`: 'sm', 'md' (default) or 'lg' (roomier rows)
  * - `flush`: no border or rounding, to sit edge to edge in a card
- * - `onRowClick`: called with the row when a row is clicked (outside its controls)
+ * - `onRowClick`: called with the row when a row is clicked (outside its
+ *   controls), unless rows are ticked
  *
  * Or write the <table> yourself as its content, for the look alone (no
  * sorting, selection or loading states); `data-align` on cells works too.
@@ -97,6 +99,8 @@ export function Table({ columns = [], rows = [], rowKey = 'id', selectable = fal
     const isSelected = (row) => selected.includes(keyOf(row));
     const selectedCount = rows.filter(isSelected).length;
     const allState = selectedCount === 0 ? false : selectedCount === rows.length ? true : 'indeterminate';
+    // Once a row is ticked, a click on a row ticks it rather than opening it.
+    const selecting = selectable && selected.length > 0;
     // Change events don't carry the Shift key, so it's noted on the way in;
     // Shift+mousedown would also select the text between.
     const shift = useRef(false);
@@ -104,7 +108,7 @@ export function Table({ columns = [], rows = [], rowKey = 'id', selectable = fal
     function noteShift(e) {
         const event = e.nativeEvent;
         shift.current = event.shiftKey;
-        if (event.shiftKey && e.type === 'mousedown' && e.target.closest('[data-part=select-cell]'))
+        if (event.shiftKey && e.type === 'mousedown' && (selecting || e.target.closest('[data-part=select-cell]')))
             e.preventDefault();
     }
     function toggleRow(row, on) {
@@ -131,10 +135,13 @@ export function Table({ columns = [], rows = [], rowKey = 'id', selectable = fal
         const control = e.target.closest('a, button, input, label, select, textarea, [data-scope]:not([data-scope=table])');
         if (control && e.currentTarget.contains(control))
             return;
-        onRowClick?.(row);
+        if (selecting)
+            toggleRow(row, !isSelected(row));
+        else
+            onRowClick?.(row);
     }
     const columnCount = columns.length + (selectable ? 1 : 0);
-    return (_jsx("div", { ...rest, ...part('root'), className: cx(className, classes?.root), "data-size": size, "data-flush": flush || undefined, "data-loading": (loading && rows.length > 0) || undefined, children: _jsx("div", { ...part('scroll'), "data-sticky": maxHeight ? '' : undefined, style: maxHeight ? { maxHeight } : undefined, children: !columns.length ? children : (_jsxs("table", { ...part('table'), "aria-busy": loading, children: [label && _jsx("caption", { ...part('caption'), children: label }), _jsx("thead", { children: _jsxs("tr", { children: [selectable && (_jsx("th", { ...part('select-cell'), scope: "col", children: _jsx(Checkbox, { label: t.table.selectAll, labelHidden: true, disabled: !rows.length, checked: allState, onCheckedChange: (on) => toggleAll(on) }) })), columns.map((column) => (_jsx("th", { scope: "col", "data-align": column.align ?? 'start', "aria-sort": ariaSort(column), style: column.width ? { width: column.width } : undefined, children: column.sortable
+    return (_jsx("div", { ...rest, ...part('root'), className: cx(className, classes?.root), "data-size": size, "data-flush": flush || undefined, "data-selecting": selecting || undefined, "data-loading": (loading && rows.length > 0) || undefined, children: _jsx("div", { ...part('scroll'), "data-sticky": maxHeight ? '' : undefined, style: maxHeight ? { maxHeight } : undefined, children: !columns.length ? children : (_jsxs("table", { ...part('table'), "aria-busy": loading, children: [label && _jsx("caption", { ...part('caption'), children: label }), _jsx("thead", { children: _jsxs("tr", { children: [selectable && (_jsx("th", { ...part('select-cell'), scope: "col", children: _jsx(Checkbox, { label: t.table.selectAll, labelHidden: true, disabled: !rows.length, checked: allState, onCheckedChange: (on) => toggleAll(on) }) })), columns.map((column) => (_jsx("th", { scope: "col", "data-align": column.align ?? 'start', "aria-sort": ariaSort(column), style: column.width ? { width: column.width } : undefined, children: column.sortable
                                         ? _jsxs("button", { ...part('sort'), type: "button", "data-dir": sortDir(column) ?? undefined, onClick: () => toggleSort(column), children: [_jsx("span", { children: column.label }), _jsx("span", { ...part('sort-icon'), children: _jsx("iconify-icon", { icon: sortDir(column) === 'asc' ? 'lucide:chevron-up'
                                                             : sortDir(column) === 'desc' ? 'lucide:chevron-down' : 'lucide:chevrons-up-down' }) })] })
                                         : column.label }, column.key)))] }) }), _jsx("tbody", { onPointerDownCapture: noteShift, onMouseDownCapture: noteShift, onKeyDownCapture: noteShift, children: loading && !rows.length

package/dist/table/table.css

@@ -23,6 +23,8 @@
     & tbody tr:last-child td { border-bottom: none; }
     & tbody tr:hover { background: color-mix(in srgb, var(--ui-hover) 60%, transparent); }
     & tbody tr[data-selected] { background: color-mix(in srgb, var(--ui-accent-soft) 45%, transparent); }
+    /* While rows are ticked, a click on a row ticks it. */
+    [data-selecting] > & tbody tr { cursor: pointer; }
     /* Outer cells line up with a card's padding. */
     [data-flush] > & :is(th, td):first-child { padding-left: 1.25rem; }
     [data-flush] > & :is(th, td):last-child { padding-right: 1.25rem; } }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milktop/react-ui",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "React components on Ark UI (Zag state machines), with imba-ui's API and design",
   "license": "MIT",
   "author": "André Goldstein",