chordia-ui 4.0.7 → 4.0.8

package/src/components/data/DataTable2.jsx

@@ -18,7 +18,7 @@ import {
   horizontalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { GripVertical, ChevronUp, ChevronDown, ListFilter, ArrowUp, ArrowDown, Settings2, Search, Check, X, ArrowUpDown } from "lucide-react";
+import { GripVertical, ChevronUp, ChevronDown, ListFilter, ArrowUp, ArrowDown, Settings2, Search, Check, X, ArrowUpDown, Minus } from "lucide-react";
 import { createPortal } from "react-dom";
 import Pagination from "../common/Pagination.jsx";
 // TODO: surface column limit errors via callback prop (onMaxColumnsError)
@@ -1189,6 +1189,16 @@ export default function DataTable2({
   // surrounding toolbar wrapper is also skipped if no other toolbar content
   // (e.g. `filtersConfig`) is configured.
   hideColumnPicker = false,
+  // Row selection (opt-in). When `selectable` is true a leading checkbox
+  // column is rendered outside the reorderable/persisted column system, so it
+  // is always visible and unaffected by the column picker or saved prefs.
+  // Selection is controlled by the host: pass `selectedRowIds` (array of ids)
+  // and handle `onSelectionChange(nextIdsArray)`. `getRowId` resolves a row's
+  // id (defaults to `row.id`).
+  selectable = false,
+  selectedRowIds = null,
+  onSelectionChange = null,
+  getRowId = null,
 }) {
   // Get user email for user-specific storage
   const { userData } = useUserContext();
@@ -1864,6 +1874,96 @@ export default function DataTable2({
     }
   }, [sortedData, page, pageSize, isServerSidePagination]);
 
+  // ---- Row selection (opt-in) --------------------------------------------
+  const resolveRowId = useCallback(
+    (row, index) => {
+      if (getRowId) return getRowId(row, index);
+      return row?.id ?? index;
+    },
+    [getRowId]
+  );
+
+  const selectedIdSet = useMemo(
+    () => new Set(Array.isArray(selectedRowIds) ? selectedRowIds : []),
+    [selectedRowIds]
+  );
+
+  const pageRowIds = useMemo(
+    () => paginatedData.map((row, index) => resolveRowId(row, index)),
+    [paginatedData, resolveRowId]
+  );
+
+  const selectedOnPageCount = useMemo(
+    () => pageRowIds.reduce((count, id) => (selectedIdSet.has(id) ? count + 1 : count), 0),
+    [pageRowIds, selectedIdSet]
+  );
+
+  const allOnPageSelected = pageRowIds.length > 0 && selectedOnPageCount === pageRowIds.length;
+  const someOnPageSelected = selectedOnPageCount > 0 && !allOnPageSelected;
+
+  const toggleRowSelection = useCallback(
+    (rowId) => {
+      if (!onSelectionChange) return;
+      const next = new Set(selectedIdSet);
+      if (next.has(rowId)) next.delete(rowId);
+      else next.add(rowId);
+      onSelectionChange(Array.from(next));
+    },
+    [onSelectionChange, selectedIdSet]
+  );
+
+  const toggleSelectAllOnPage = useCallback(() => {
+    if (!onSelectionChange) return;
+    const next = new Set(selectedIdSet);
+    if (allOnPageSelected) {
+      pageRowIds.forEach((id) => next.delete(id));
+    } else {
+      pageRowIds.forEach((id) => next.add(id));
+    }
+    onSelectionChange(Array.from(next));
+  }, [onSelectionChange, selectedIdSet, allOnPageSelected, pageRowIds]);
+
+  // Shared checkbox visual for row selection.
+  const SelectionCheckbox = ({ checked, indeterminate = false, onToggle, ariaLabel }) => (
+    <span
+      role="checkbox"
+      aria-checked={indeterminate ? "mixed" : checked}
+      aria-label={ariaLabel}
+      tabIndex={0}
+      onClick={(e) => {
+        e.stopPropagation();
+        onToggle();
+      }}
+      onKeyDown={(e) => {
+        if (e.key === " " || e.key === "Enter") {
+          e.preventDefault();
+          e.stopPropagation();
+          onToggle();
+        }
+      }}
+      style={{
+        width: 16,
+        height: 16,
+        borderRadius: 5,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: checked || indeterminate ? "#0B0B0B" : "#FFFFFF",
+        border: `1px solid ${checked || indeterminate ? "#0B0B0B" : "#676767"}`,
+        cursor: "pointer",
+        flexShrink: 0,
+      }}
+    >
+      {indeterminate ? (
+        <Minus size={11} color="#FFFFFF" strokeWidth={3} />
+      ) : checked ? (
+        <Check size={11} color="#FFFFFF" strokeWidth={3} />
+      ) : null}
+    </span>
+  );
+
+  const SELECT_COLUMN_WIDTH = 44;
+
   // Handle header click for sorting
   const handleSort = (field) => {
     if (isServerSideSorting && onSort) {
@@ -2804,6 +2904,14 @@ export default function DataTable2({
               </div>
             )}
 
+            {/* Custom actions (e.g. bulk-update buttons) — kept left of the
+                Columns picker so Columns stays the right-most control. */}
+            {filtersConfig?.rightActions && (
+              <div style={{ display: "flex", alignItems: "center", gap: 12, flexShrink: 0 }}>
+                {filtersConfig.rightActions}
+              </div>
+            )}
+
             {/* Columns button — compact */}
             {!hideColumnPicker && (
               <div style={{ position: "relative" }}>
@@ -3038,6 +3146,33 @@ export default function DataTable2({
                 <thead>
                   {/* Header row with column labels */}
                   <tr>
+                    {selectable && (
+                      <th
+                        style={{
+                          width: SELECT_COLUMN_WIDTH,
+                          minWidth: SELECT_COLUMN_WIDTH,
+                          padding: '10px 8px',
+                          textAlign: 'center',
+                          verticalAlign: 'middle',
+                          background: '#f2f2f0',
+                          borderRight: '1px solid #e6e6e6',
+                          borderBottom: '1px solid #e6e6e6',
+                          position: 'sticky',
+                          top: 0,
+                          zIndex: 10,
+                          boxSizing: 'border-box',
+                        }}
+                      >
+                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', lineHeight: 0 }}>
+                          <SelectionCheckbox
+                            checked={allOnPageSelected}
+                            indeterminate={someOnPageSelected}
+                            onToggle={toggleSelectAllOnPage}
+                            ariaLabel="Select all rows on this page"
+                          />
+                        </div>
+                      </th>
+                    )}
                     <SortableContext
                       items={visibleColumns}
                       strategy={horizontalListSortingStrategy}
@@ -3052,7 +3187,7 @@ export default function DataTable2({
                 {!isLoading && paginatedData.length === 0 ? (
                   <tr>
                     <td
-                      colSpan={orderedColumns.length}
+                      colSpan={orderedColumns.length + (selectable ? 1 : 0)}
                             style={{
                               padding: '32px',
                               textAlign: 'center',
@@ -3065,14 +3200,18 @@ export default function DataTable2({
                     </td>
                   </tr>
                 ) : !isLoading && paginatedData.length > 0 ? (
-                  paginatedData.map((row, rowIndex) => (
+                  paginatedData.map((row, rowIndex) => {
+                    const rowId = resolveRowId(row, rowIndex);
+                    const isRowSelected = selectable && selectedIdSet.has(rowId);
+                    return (
                     <tr
                       key={rowIndex}
                       data-row-id={row.id || rowIndex}
                       style={{
                         borderBottom: '1px solid #e6e6e6',
                         cursor: onRowClick ? 'pointer' : 'default',
-                        transition: 'background 0.15s ease'
+                        transition: 'background 0.15s ease',
+                        background: isRowSelected ? '#F2F4F7' : 'transparent',
                       }}
                       onClick={onRowClick ? (e) => {
                         e.stopPropagation();
@@ -3082,9 +3221,31 @@ export default function DataTable2({
                         e.currentTarget.style.background = '#E6E6E6';
                       }}
                       onMouseLeave={(e) => {
-                        e.currentTarget.style.background = 'transparent';
+                        e.currentTarget.style.background = isRowSelected ? '#F2F4F7' : 'transparent';
                       }}
                     >
+                      {selectable && (
+                        <td
+                          onClick={(e) => e.stopPropagation()}
+                          style={{
+                            width: SELECT_COLUMN_WIDTH,
+                            minWidth: SELECT_COLUMN_WIDTH,
+                            padding: '10px 8px',
+                            textAlign: 'center',
+                            verticalAlign: 'middle',
+                            borderRight: '1px solid #e6e6e6',
+                            boxSizing: 'border-box',
+                          }}
+                        >
+                          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', lineHeight: 0 }}>
+                            <SelectionCheckbox
+                              checked={isRowSelected}
+                              onToggle={() => toggleRowSelection(rowId)}
+                              ariaLabel="Select row"
+                            />
+                          </div>
+                        </td>
+                      )}
                       {orderedColumns.map((column) => {
                         const columnId = getColumnId(column);
                         const resolvedWidth = getResolvedColumnWidth(columnId, column.width);
@@ -3123,7 +3284,8 @@ export default function DataTable2({
                         );
                       })}
                     </tr>
-                  ))
+                    );
+                  })
                 ) : null}
               </tbody>
             </table>

package/src/components/policies/PoliciesPage.jsx

@@ -327,7 +327,6 @@ export default function PoliciesPage({
                     policy={policy}
                     variant="browse"
                     onViewDetails={() => openBrowseDetails(policy)}
-                    onApply={isAdmin ? () => openBrowseDetails(policy) : undefined}
                   />
                 ))}
               </CardGrid>