eidos-ui 2.0.0 → 2.1.0

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

@@ -11,22 +11,22 @@ import {
   useSensors,
   useSortable,
   verticalListSortingStrategy
-} from "./chunk-AJZTVCST.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,13 @@ 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) => {
@@ -203,6 +209,8 @@ function DataGridInner({
   selectedRows: controlledSelectedRows,
   defaultSelectedRows,
   onSelectionChange,
+  selectAllScope = "all",
+  onSelectAllMatching,
   bulkActions,
   // ── Row expansion ────────────────────────────────────────────────────────────
   expandable = false,
@@ -275,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]);
@@ -298,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]
@@ -328,16 +341,36 @@ function DataGridInner({
     () => new Set(isControlledSelection ? controlledSelectedRows ?? [] : [...internalSelectedKeys]),
     [isControlledSelection, controlledSelectedRows, internalSelectedKeys]
   );
-  const allKeys = useMemo(
-    () => localData.map((row, idx) => String(cellOf(row, rowKeyField) ?? idx)),
-    [localData, rowKeyField]
-  );
-  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(cellOf(row, rowKeyField) ?? idx))),
-    [localData, selectedSet, rowKeyField]
+    () => 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]),
@@ -414,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);
@@ -654,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(cellOf(row, rowKeyField) ?? idx))
-      );
-      onSelectionChange?.(keys, rows);
+      onSelectionChange?.(keys, rowsForKeys(keys));
     },
-    [isControlledSelection, rowKeyField, onSelectionChange]
+    [isControlledSelection, onSelectionChange, rowsForKeys]
   );
   const toggleRow = useCallback(
     (key) => {
@@ -668,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) => {
@@ -974,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
@@ -1073,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") {
@@ -1128,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: [
@@ -1148,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" },
@@ -1178,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 ? (
@@ -1202,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,
@@ -1613,4 +1718,4 @@ var DataGrid = Object.assign(DataGridInner, { displayName: "DataGrid" });
 export {
   DataGrid
 };
-//# sourceMappingURL=chunk-MH2CD2QT.js.map
+//# sourceMappingURL=chunk-RKA2OJRT.js.map