eidos-ui 1.2.0 → 2.1.0

package/dist/{chunk-P2ZHWFK4.js → chunk-RKA2OJRT.js}

@@ -11,22 +11,22 @@ import {
   useSensors,
   useSortable,
   verticalListSortingStrategy
-} from "./chunk-6DBCT5MK.js";
+} from "./chunk-EXITZVB2.js";
 import {
   Spinner
 } from "./chunk-6ZAT5CGB.js";
 import {
   SplitButton
-} from "./chunk-3LHQUOGP.js";
+} from "./chunk-NGVOXM7P.js";
 import {
   Pagination
-} from "./chunk-56B6RLOE.js";
+} from "./chunk-GI6VJYOS.js";
 import {
   SegmentedControl
-} from "./chunk-BOB5JJ7F.js";
+} from "./chunk-P7IQY5YH.js";
 import {
   Select
-} from "./chunk-5WROPW7Z.js";
+} from "./chunk-A7WQINIG.js";
 import {
   EmptyState
 } from "./chunk-3TUCQAYL.js";
@@ -35,22 +35,23 @@ import {
 } from "./chunk-H6CWTMAH.js";
 import {
   Combobox
-} from "./chunk-DW2YDWGN.js";
+} from "./chunk-TEJIPPZR.js";
 import {
   Input
-} from "./chunk-WE5FTQGD.js";
+} from "./chunk-VHMOKXUT.js";
 import {
   Menu
-} from "./chunk-JMD3P4CY.js";
+} from "./chunk-ZHFPV43D.js";
 import {
   Dropdown
 } from "./chunk-4BKTBV2I.js";
 import {
   Button
-} from "./chunk-WIE7HDIM.js";
+} from "./chunk-YJXZR7RL.js";
 import {
+  devWarn,
   renderIcon
-} from "./chunk-5CLC3FJO.js";
+} from "./chunk-KBG77JHC.js";
 
 // src/components/DataGrid/DataGrid.component.tsx
 import React, { useState, useEffect, useRef, useCallback, useMemo, useLayoutEffect } from "react";
@@ -61,7 +62,6 @@ import {
   ArrowDown,
   ChevronsUpDown,
   ChevronRight,
-  X,
   Plus,
   AlignJustify,
   Check,
@@ -70,7 +70,14 @@ import {
   MoreVertical
 } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var MIN_COLUMN_WIDTH_PX = 100;
+var MIN_DATA_COLUMN_WIDTH_PX = 100;
+var ACTIONS_COLUMN_WIDTH_PX = 48;
+var CHECKBOX_COLUMN_WIDTH_PX = 40;
+var ROW_NUMBER_COLUMN_WIDTH_PX = 40;
+var DRAG_HANDLE_COLUMN_WIDTH_PX = 32;
+var EXPAND_COLUMN_WIDTH_PX = 32;
+var COMPACT_TOOLBAR_WIDTH_PX = 560;
+var cellOf = (row, key) => row[key];
 var QUICK_FILTER_RESET_VALUE = "";
 var hasFilterValue = (value) => {
   if (value === void 0 || value === null || value === "") return false;
@@ -167,9 +174,9 @@ function ExpandedCardPanel({
 }
 function DataGridInner({
   // ── Existing props ─────────────────────────────────────────────────────────
-  columns,
+  columns: columnsProp,
   data,
-  rowKey = "id",
+  rowKey,
   onChange,
   onRowAdd,
   editable = false,
@@ -202,6 +209,8 @@ function DataGridInner({
   selectedRows: controlledSelectedRows,
   defaultSelectedRows,
   onSelectionChange,
+  selectAllScope = "all",
+  onSelectAllMatching,
   bulkActions,
   // ── Row expansion ────────────────────────────────────────────────────────────
   expandable = false,
@@ -219,6 +228,8 @@ function DataGridInner({
   cardViewBreakpoint = 640,
   cardMinWidth = 280
 }) {
+  const columns = columnsProp;
+  const rowKeyField = rowKey ?? "id";
   const [localData, _setLocalData] = useState(data);
   const localDataRef = useRef(data);
   const [editingCell, _setEditingCell] = useState(null);
@@ -272,22 +283,26 @@ function DataGridInner({
   );
   const [containerWidth, setContainerWidth] = useState(null);
   const resizeObserverRef = useRef(null);
-  const setContainerRef = useCallback(
-    (el) => {
-      resizeObserverRef.current?.disconnect();
-      resizeObserverRef.current = null;
-      if (!el || !hasCardView) return;
-      const observer = new ResizeObserver((entries) => {
-        const width = entries[0]?.contentRect.width;
-        if (width != null) setContainerWidth(width);
-      });
-      observer.observe(el);
-      resizeObserverRef.current = observer;
-    },
-    [hasCardView]
+  const setContainerRef = useCallback((el) => {
+    resizeObserverRef.current?.disconnect();
+    resizeObserverRef.current = null;
+    if (!el) return;
+    const observer = new ResizeObserver((entries) => {
+      const width = entries[0]?.contentRect.width;
+      if (width != null) setContainerWidth(width);
+    });
+    observer.observe(el);
+    resizeObserverRef.current = observer;
+  }, []);
+  const minTableWidth = useMemo(
+    () => columns.reduce(
+      (total, column) => total + (column.type === "actions" ? ACTIONS_COLUMN_WIDTH_PX : MIN_DATA_COLUMN_WIDTH_PX),
+      (showRowNumbers ? ROW_NUMBER_COLUMN_WIDTH_PX : 0) + (draggableRows ? DRAG_HANDLE_COLUMN_WIDTH_PX : 0) + (selectable ? CHECKBOX_COLUMN_WIDTH_PX : 0) + (expandable ? EXPAND_COLUMN_WIDTH_PX : 0)
+    ),
+    [columns, showRowNumbers, draggableRows, selectable, expandable]
   );
-  const columnCountForCardView = columns.length + (showRowNumbers ? 1 : 0) + (draggableRows ? 1 : 0) + (selectable ? 1 : 0) + (expandable ? 1 : 0);
-  const isCardView = hasCardView && containerWidth !== null && (containerWidth < cardViewBreakpoint || containerWidth < columnCountForCardView * MIN_COLUMN_WIDTH_PX);
+  const isCardView = hasCardView && containerWidth !== null && (containerWidth < cardViewBreakpoint || containerWidth < minTableWidth);
+  const isCompactToolbar = containerWidth !== null && containerWidth < COMPACT_TOOLBAR_WIDTH_PX;
   const cardHeaderColumn = useMemo(() => columns.find((c) => c.cardHeader), [columns]);
   const cardSubheaderColumn = useMemo(() => columns.find((c) => c.cardSubheader), [columns]);
   const actionsColumn = useMemo(() => columns.find((c) => c.type === "actions"), [columns]);
@@ -295,6 +310,7 @@ function DataGridInner({
     () => columns.filter((c) => c !== actionsColumn),
     [columns, actionsColumn]
   );
+  const hasCardToolbar = selectable || showRowNumbers || expandable || !!cardHeaderColumn || !!cardSubheaderColumn || !!actionsColumn;
   const cardFieldColumns = useMemo(
     () => dataColumns.filter((c) => c !== cardHeaderColumn && c !== cardSubheaderColumn),
     [dataColumns, cardHeaderColumn, cardSubheaderColumn]
@@ -325,16 +341,36 @@ function DataGridInner({
     () => new Set(isControlledSelection ? controlledSelectedRows ?? [] : [...internalSelectedKeys]),
     [isControlledSelection, controlledSelectedRows, internalSelectedKeys]
   );
-  const allKeys = useMemo(
-    () => localData.map((row, idx) => String(row[rowKey] ?? idx)),
-    [localData, rowKey]
-  );
-  const allSelected = allKeys.length > 0 && allKeys.every((k) => selectedSet.has(k));
-  const someSelected = !allSelected && allKeys.some((k) => selectedSet.has(k));
   const hasSelection = selectedSet.size > 0;
+  const selectedRowCacheRef = useRef(/* @__PURE__ */ new Map());
+  const rowsForKeys = useCallback(
+    (keys) => {
+      const current = /* @__PURE__ */ new Map();
+      localDataRef.current.forEach(
+        (row, idx) => current.set(String(cellOf(row, rowKeyField) ?? idx), row)
+      );
+      const cache = selectedRowCacheRef.current;
+      return keys.map((key) => current.get(key) ?? cache.get(key)).filter((row) => row !== void 0);
+    },
+    [rowKeyField]
+  );
+  useEffect(() => {
+    const cache = selectedRowCacheRef.current;
+    const current = /* @__PURE__ */ new Map();
+    localData.forEach((row, idx) => current.set(String(cellOf(row, rowKeyField) ?? idx), row));
+    const next = /* @__PURE__ */ new Map();
+    selectedSet.forEach((key) => {
+      const row = current.get(key) ?? cache.get(key);
+      if (row) next.set(key, row);
+    });
+    selectedRowCacheRef.current = next;
+  }, [localData, selectedSet, rowKeyField]);
   const selectedItems = useMemo(
-    () => localData.filter((row, idx) => selectedSet.has(String(row[rowKey] ?? idx))),
-    [localData, selectedSet, rowKey]
+    () => rowsForKeys([...selectedSet]),
+    // `localData` isn't read directly here - `rowsForKeys` reads it through a
+    // ref - but it must still retrigger this when the loaded rows change.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [rowsForKeys, selectedSet, localData]
   );
   const expandedSet = useMemo(
     () => new Set(isControlledExpansion ? controlledExpandedRows ?? [] : [...internalExpandedKeys]),
@@ -373,7 +409,7 @@ function DataGridInner({
     if (filterEntries.length === 0) return localData;
     return localData.filter(
       (row) => filterEntries.every(([key, filterValue]) => {
-        const cellValue = row[key];
+        const cellValue = cellOf(row, key);
         if (Array.isArray(filterValue)) {
           return filterValue.includes(String(cellValue ?? ""));
         }
@@ -394,8 +430,8 @@ function DataGridInner({
   const sortedData = useMemo(() => {
     if (onSortChange || !activeSort) return filteredData;
     return [...filteredData].sort((a, b) => {
-      const aVal = a[activeSort.key];
-      const bVal = b[activeSort.key];
+      const aVal = cellOf(a, activeSort.key);
+      const bVal = cellOf(b, activeSort.key);
       if (aVal == null && bVal == null) return 0;
       if (aVal == null) return 1;
       if (bVal == null) return -1;
@@ -411,6 +447,22 @@ function DataGridInner({
   }, [sortedData, showPagination, currentPage, currentPageSize, onPageChange]);
   const totalItemCount = totalRowsProp ?? sortedData.length;
   const totalPages = Math.max(1, Math.ceil(totalItemCount / currentPageSize));
+  const selectAllKeys = useMemo(
+    () => (selectAllScope === "page" ? displayData : localData).map(
+      (row, idx) => String(cellOf(row, rowKeyField) ?? idx)
+    ),
+    [selectAllScope, displayData, localData, rowKeyField]
+  );
+  const allSelected = selectAllKeys.length > 0 && selectAllKeys.every((key) => selectedSet.has(key));
+  const someSelected = !allSelected && selectAllKeys.some((key) => selectedSet.has(key));
+  useEffect(() => {
+    if (!selectable || selectAllScope !== "all") return;
+    if (totalItemCount <= localData.length) return;
+    devWarn(
+      `datagrid-select-all-scope:${localData.length}/${totalItemCount}`,
+      `DataGrid: selectAllScope="all" can only select the ${localData.length} row(s) currently loaded, but there are ${totalItemCount} in total. The keys of rows the grid has never received cannot be known here - use selectAllScope="page" to make the scope explicit, or resolve the full key set yourself and pass it as \`selectedRows\`.`
+    );
+  }, [selectable, selectAllScope, totalItemCount, localData.length]);
   const activeFiltersKey = useMemo(() => JSON.stringify(activeFilters), [activeFilters]);
   useEffect(() => {
     setCurrentPage(1);
@@ -509,7 +561,7 @@ function DataGridInner({
     localData.forEach((row, rowIndex) => {
       for (const col of columns) {
         if (!isCellEditable(col)) continue;
-        const error = validateCell(col, row[col.key]);
+        const error = validateCell(col, cellOf(row, col.key));
         if (error) errors[cellErrorKey(rowIndex, col.key)] = error;
       }
     });
@@ -575,11 +627,12 @@ function DataGridInner({
   );
   const handleCellClick = useCallback(
     (rowIndex, col) => {
-      const value = localDataRef.current[rowIndex]?.[col.key];
+      const row = localDataRef.current[rowIndex];
+      const value = row === void 0 ? void 0 : cellOf(row, col.key);
       if (col.type === "checkbox") {
         if (!editable || col.editable === false) return;
         const newData = localDataRef.current.map(
-          (row, idx) => idx === rowIndex ? { ...row, [col.key]: !value } : row
+          (row2, idx) => idx === rowIndex ? { ...row2, [col.key]: !value } : row2
         );
         setLocalData(newData);
         onChange?.(newData);
@@ -620,7 +673,7 @@ function DataGridInner({
         commitValue(rowIndex, colKey, editValueRef.current);
         if (next) {
           setEditingCell(next);
-          setEditValue(localDataRef.current[next.rowIndex][next.colKey]);
+          setEditValue(cellOf(localDataRef.current[next.rowIndex], next.colKey));
           setEditError(cellErrors[cellErrorKey(next.rowIndex, next.colKey)] ?? null);
         } else {
           setEditingCell(null);
@@ -650,12 +703,9 @@ function DataGridInner({
   const commitSelection = useCallback(
     (keys) => {
       if (!isControlledSelection) setInternalSelectedKeys(new Set(keys));
-      const rows = localDataRef.current.filter(
-        (row, idx) => keys.includes(String(row[rowKey] ?? idx))
-      );
-      onSelectionChange?.(keys, rows);
+      onSelectionChange?.(keys, rowsForKeys(keys));
     },
-    [isControlledSelection, rowKey, onSelectionChange]
+    [isControlledSelection, onSelectionChange, rowsForKeys]
   );
   const toggleRow = useCallback(
     (key) => {
@@ -664,9 +714,30 @@ function DataGridInner({
     },
     [selectedSet, commitSelection]
   );
+  const [isSelectingAllMatching, setIsSelectingAllMatching] = useState(false);
+  const holdsEveryRow = totalItemCount <= localData.length;
+  const hasSelectedAllMatching = !holdsEveryRow && selectedSet.size >= totalItemCount;
+  const canSelectAllMatching = !!onSelectAllMatching && selectable && !holdsEveryRow && allSelected && !hasSelectedAllMatching;
+  const selectAllMatching = useCallback(async () => {
+    if (!onSelectAllMatching) return;
+    setIsSelectingAllMatching(true);
+    try {
+      commitSelection(await onSelectAllMatching());
+    } catch (error) {
+      devWarn(
+        "datagrid-select-all-matching-failed",
+        `DataGrid: onSelectAllMatching() rejected, so the selection was left untouched. ${String(error)}`
+      );
+    } finally {
+      setIsSelectingAllMatching(false);
+    }
+  }, [onSelectAllMatching, commitSelection]);
   const toggleAll = useCallback(() => {
-    commitSelection(allSelected ? [] : allKeys);
-  }, [allSelected, allKeys, commitSelection]);
+    const inScope = new Set(selectAllKeys);
+    commitSelection(
+      allSelected ? [...selectedSet].filter((key) => !inScope.has(key)) : [.../* @__PURE__ */ new Set([...selectedSet, ...selectAllKeys])]
+    );
+  }, [allSelected, selectAllKeys, selectedSet, commitSelection]);
   const clearSelection = useCallback(() => commitSelection([]), [commitSelection]);
   const commitExpanded = useCallback(
     (keys) => {
@@ -757,10 +828,10 @@ function DataGridInner({
       const { active, over } = event;
       if (!over || active.id === over.id) return;
       const oldIndex = localDataRef.current.findIndex(
-        (row, i) => String(row[rowKey] ?? i) === String(active.id)
+        (row, i) => String(cellOf(row, rowKeyField) ?? i) === String(active.id)
       );
       const newIndex = localDataRef.current.findIndex(
-        (row, i) => String(row[rowKey] ?? i) === String(over.id)
+        (row, i) => String(cellOf(row, rowKeyField) ?? i) === String(over.id)
       );
       if (oldIndex === -1 || newIndex === -1) return;
       const newData = arrayMove(localDataRef.current, oldIndex, newIndex);
@@ -768,7 +839,7 @@ function DataGridInner({
       onChange?.(newData);
       onRowReorder?.(newData);
     },
-    [draggableRows, rowKey, setLocalData, onChange, onRowReorder]
+    [draggableRows, rowKeyField, setLocalData, onChange, onRowReorder]
   );
   const renderViewCell = (col, value, row, rowIndex) => {
     if (col.renderCell) return col.renderCell(value, row, rowIndex);
@@ -874,7 +945,7 @@ function DataGridInner({
     }
   };
   const renderCardValue = (col, row, localIndex, baseClassName) => {
-    const value = row[col.key];
+    const value = cellOf(row, col.key);
     const isEditing = editingCell?.rowIndex === localIndex && editingCell?.colKey === col.key;
     const canEdit = isCellEditable(col);
     const isFlagged = cellErrorKey(localIndex, col.key) in cellErrors;
@@ -948,7 +1019,7 @@ function DataGridInner({
     [dataColumns]
   );
   const totalCols = dataColumns.length + (showRowNumbers ? 1 : 0) + (actionsColumn ? 1 : 0) + (draggableRows ? 1 : 0) + (selectable ? 1 : 0) + (expandable ? 1 : 0);
-  const rowIds = displayData.map((row, i) => String(row[rowKey] ?? i));
+  const rowIds = displayData.map((row, i) => String(cellOf(row, rowKeyField) ?? i));
   const containerStyle = {};
   if (stickyHeader && maxHeight) {
     containerStyle.maxHeight = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
@@ -970,6 +1041,7 @@ function DataGridInner({
               size: "sm",
               color: quickFilter.color,
               disabled,
+              fullWidth: isCompactToolbar,
               options: [
                 { value: QUICK_FILTER_RESET_VALUE, label: quickFilter.allLabel ?? "All" },
                 ...quickFilter.options
@@ -1069,12 +1141,43 @@ function DataGridInner({
       children: [
         showToolbar && /* @__PURE__ */ jsxs("div", { className: "eidos-datagrid-toolbar", children: [
           /* @__PURE__ */ jsxs("div", { className: "eidos-datagrid-toolbar-left", children: [
-            showQuickFilters && /* @__PURE__ */ jsx("div", { className: "eidos-datagrid-quick-filters", children: quickFilters.map(renderQuickFilter) }),
+            selectable && isCardView && /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                size: "sm",
+                checked: allSelected,
+                indeterminate: someSelected,
+                onChange: toggleAll,
+                label: "Select all",
+                "aria-label": "Select all rows"
+              }
+            ),
+            showQuickFilters && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: [
+                  "eidos-datagrid-quick-filters",
+                  isCompactToolbar && "eidos-datagrid-quick-filters--compact"
+                ].filter(Boolean).join(" "),
+                children: quickFilters.map(renderQuickFilter)
+              }
+            ),
             selectable && hasSelection && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsxs("span", { className: "eidos-datagrid-selection-count", children: [
                 selectedSet.size,
                 " selected"
               ] }),
+              canSelectAllMatching && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "text",
+                  size: "sm",
+                  loading: isSelectingAllMatching,
+                  onClick: () => void selectAllMatching(),
+                  children: `Select all ${totalItemCount}`
+                }
+              ),
+              hasSelectedAllMatching && /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", color: "secondary", onClick: clearSelection, children: "Clear selection" }),
               bulkActions && bulkActions.length > 0 && /* @__PURE__ */ jsx("div", { className: "eidos-datagrid-bulk-actions", children: bulkActions.map((action) => {
                 const isDisabled = typeof action.disabled === "function" ? action.disabled(selectedItems) : action.disabled ?? false;
                 if (action.type === "split-button") {
@@ -1124,17 +1227,7 @@ function DataGridInner({
                   },
                   action.id
                 ) : null;
-              }) }),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  className: "eidos-datagrid-clear-selection",
-                  onClick: clearSelection,
-                  "aria-label": "Clear selection",
-                  children: /* @__PURE__ */ jsx(X, { size: 14 })
-                }
-              )
+              }) })
             ] })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "eidos-datagrid-toolbar-right", children: [
@@ -1144,7 +1237,7 @@ function DataGridInner({
                 placement: "bottom",
                 align: "end",
                 autoWidth: false,
-                trigger: /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", preIcon: AlignJustify, children: "Density" }),
+                trigger: isCompactToolbar ? /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", icon: AlignJustify, tooltip: "Density" }) : /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", preIcon: AlignJustify, children: "Density" }),
                 content: /* @__PURE__ */ jsx("div", { className: "eidos-table-menu-panel", children: [
                   { value: "compact", label: "Compact" },
                   { value: "comfortable", label: "Comfortable" },
@@ -1174,7 +1267,16 @@ function DataGridInner({
                 onFiltersChange: handleFiltersChange
               }
             ),
-            onRowAdd && /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "sm", preIcon: Plus, onClick: handleRowAdd, children: "Add row" })
+            onRowAdd && (isCompactToolbar ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outlined",
+                size: "sm",
+                icon: Plus,
+                tooltip: "Add row",
+                onClick: handleRowAdd
+              }
+            ) : /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "sm", preIcon: Plus, onClick: handleRowAdd, children: "Add row" }))
           ] })
         ] }),
         isCardView ? (
@@ -1186,7 +1288,7 @@ function DataGridInner({
               style: { "--eidos-datagrid-card-min-width": `${cardMinWidth}px` },
               children: displayData.length > 0 ? displayData.map((row, displayIndex) => {
                 const localIndex = localData.indexOf(row);
-                const rowKeyValue = String(row[rowKey] ?? displayIndex);
+                const rowKeyValue = String(cellOf(row, rowKeyField) ?? displayIndex);
                 const isRowSelected = selectable && selectedSet.has(rowKeyValue);
                 const isRowExpanded = expandable && expandedSet.has(rowKeyValue);
                 const canExpandRow = !isRowExpandable || isRowExpandable(row);
@@ -1198,51 +1300,58 @@ function DataGridInner({
                       isRowSelected && "eidos-datagrid-card--selected"
                     ].filter(Boolean).join(" "),
                     children: [
-                      /* @__PURE__ */ jsxs("div", { className: "eidos-datagrid-card-toolbar", onClick: (e) => e.stopPropagation(), children: [
-                        /* @__PURE__ */ jsxs("div", { className: "eidos-datagrid-card-toolbar-left", children: [
-                          expandable && canExpandRow && /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              type: "button",
-                              className: [
-                                "eidos-datagrid-expand-toggle",
-                                isRowExpanded && "eidos-datagrid-expand-toggle--open"
-                              ].filter(Boolean).join(" "),
-                              onClick: () => toggleExpanded(rowKeyValue),
-                              "aria-expanded": isRowExpanded,
-                              "aria-label": isRowExpanded ? "Collapse row" : "Expand row",
-                              children: /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
-                            }
-                          ),
-                          selectable && /* @__PURE__ */ jsx(
-                            Checkbox,
-                            {
-                              checked: isRowSelected,
-                              onChange: () => toggleRow(rowKeyValue),
-                              size: "sm"
-                            }
-                          ),
-                          showRowNumbers && /* @__PURE__ */ jsxs("span", { className: "eidos-datagrid-card-row-number", children: [
-                            "#",
-                            localIndex + 1
-                          ] })
-                        ] }),
-                        /* @__PURE__ */ jsxs("div", { className: "eidos-datagrid-card-heading", children: [
-                          cardHeaderColumn && renderCardValue(
-                            cardHeaderColumn,
-                            row,
-                            localIndex,
-                            "eidos-datagrid-card-heading-title"
-                          ),
-                          cardSubheaderColumn && renderCardValue(
-                            cardSubheaderColumn,
-                            row,
-                            localIndex,
-                            "eidos-datagrid-card-heading-subtitle"
-                          )
-                        ] }),
-                        /* @__PURE__ */ jsx("div", { className: "eidos-datagrid-card-toolbar-right", children: renderActionsMenu(row, localIndex) })
-                      ] }),
+                      hasCardToolbar && /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          className: "eidos-datagrid-card-toolbar",
+                          onClick: (e) => e.stopPropagation(),
+                          children: [
+                            /* @__PURE__ */ jsxs("div", { className: "eidos-datagrid-card-toolbar-left", children: [
+                              expandable && canExpandRow && /* @__PURE__ */ jsx(
+                                "button",
+                                {
+                                  type: "button",
+                                  className: [
+                                    "eidos-datagrid-expand-toggle",
+                                    isRowExpanded && "eidos-datagrid-expand-toggle--open"
+                                  ].filter(Boolean).join(" "),
+                                  onClick: () => toggleExpanded(rowKeyValue),
+                                  "aria-expanded": isRowExpanded,
+                                  "aria-label": isRowExpanded ? "Collapse row" : "Expand row",
+                                  children: /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
+                                }
+                              ),
+                              selectable && /* @__PURE__ */ jsx(
+                                Checkbox,
+                                {
+                                  checked: isRowSelected,
+                                  onChange: () => toggleRow(rowKeyValue),
+                                  size: "sm"
+                                }
+                              ),
+                              showRowNumbers && /* @__PURE__ */ jsxs("span", { className: "eidos-datagrid-card-row-number", children: [
+                                "#",
+                                localIndex + 1
+                              ] })
+                            ] }),
+                            /* @__PURE__ */ jsxs("div", { className: "eidos-datagrid-card-heading", children: [
+                              cardHeaderColumn && renderCardValue(
+                                cardHeaderColumn,
+                                row,
+                                localIndex,
+                                "eidos-datagrid-card-heading-title"
+                              ),
+                              cardSubheaderColumn && renderCardValue(
+                                cardSubheaderColumn,
+                                row,
+                                localIndex,
+                                "eidos-datagrid-card-heading-subtitle"
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsx("div", { className: "eidos-datagrid-card-toolbar-right", children: renderActionsMenu(row, localIndex) })
+                          ]
+                        }
+                      ),
                       /* @__PURE__ */ jsx("div", { className: "eidos-datagrid-card-fields", children: cardFieldColumns.map((col) => renderCardField(col, row, localIndex)) }),
                       expandable && renderExpandedContent && /* @__PURE__ */ jsx(
                         ExpandedCardPanel,
@@ -1387,7 +1496,7 @@ function DataGridInner({
               ] }) }),
               /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx(SortableContext, { items: rowIds, strategy: verticalListSortingStrategy, children: displayData.length > 0 ? displayData.map((row, displayIndex) => {
                 const localIndex = localData.indexOf(row);
-                const rowKeyValue = String(row[rowKey] ?? displayIndex);
+                const rowKeyValue = String(cellOf(row, rowKeyField) ?? displayIndex);
                 const isRowSelected = selectable && selectedSet.has(rowKeyValue);
                 const isRowExpanded = expandable && expandedSet.has(rowKeyValue);
                 const canExpandRow = !isRowExpandable || isRowExpandable(row);
@@ -1489,7 +1598,7 @@ function DataGridInner({
                             }
                           ),
                           sortedColumns.map((col) => {
-                            const value = row[col.key];
+                            const value = cellOf(row, col.key);
                             const isEditing = editingCell?.rowIndex === localIndex && editingCell?.colKey === col.key;
                             const canEdit = isCellEditable(col);
                             const isFlagged = cellErrorKey(localIndex, col.key) in cellErrors;
@@ -1609,4 +1718,4 @@ var DataGrid = Object.assign(DataGridInner, { displayName: "DataGrid" });
 export {
   DataGrid
 };
-//# sourceMappingURL=chunk-P2ZHWFK4.js.map
+//# sourceMappingURL=chunk-RKA2OJRT.js.map