hs-uix 1.6.5 → 2.0.0

package/dist/datatable.js

@@ -34,9 +34,22 @@ __export(datatable_exports, {
 module.exports = __toCommonJS(datatable_exports);
 
 // packages/datatable/src/DataTable.jsx
-var import_react = __toESM(require("react"));
+var import_react2 = __toESM(require("react"));
+
+// src/utils/query.js
 var import_fuse = __toESM(require("fuse.js"));
-var import_ui_extensions = require("@hubspot/ui-extensions");
+var getEmptyFilterValue = (filter) => {
+  const type = filter.type || "select";
+  if (type === "multiselect") return [];
+  if (type === "dateRange") return { from: null, to: null };
+  return "";
+};
+var isFilterActive = (filter, value) => {
+  const type = filter.type || "select";
+  if (type === "multiselect") return Array.isArray(value) && value.length > 0;
+  if (type === "dateRange") return value && (value.from || value.to);
+  return !!value;
+};
 var formatDateChip = (dateObj) => {
   if (!dateObj) return "";
   const { year, month, date } = dateObj;
@@ -50,6 +63,109 @@ var dateToTimestamp = (dateObj) => {
   if (!dateObj) return null;
   return new Date(dateObj.year, dateObj.month, dateObj.date).getTime();
 };
+var toStableKey = (value) => {
+  try {
+    return JSON.stringify(value);
+  } catch (_error) {
+    return String(value);
+  }
+};
+var filterRows = (rows, filters, values) => {
+  let result = rows;
+  for (const filter of filters || []) {
+    const value = values[filter.name];
+    if (!isFilterActive(filter, value)) continue;
+    const type = filter.type || "select";
+    if (filter.filterFn) {
+      result = result.filter((row) => filter.filterFn(row, value));
+    } else if (type === "multiselect") {
+      result = result.filter((row) => value.includes(row[filter.name]));
+    } else if (type === "dateRange") {
+      const fromTs = dateToTimestamp(value.from);
+      const toTs = value.to ? dateToTimestamp(value.to) + 864e5 - 1 : null;
+      result = result.filter((row) => {
+        const rowTs = new Date(row[filter.name]).getTime();
+        if (Number.isNaN(rowTs)) return false;
+        if (fromTs && rowTs < fromTs) return false;
+        if (toTs && rowTs > toTs) return false;
+        return true;
+      });
+    } else {
+      result = result.filter((row) => row[filter.name] === value);
+    }
+  }
+  return result;
+};
+var searchRows = (rows, term, fields, opts = {}) => {
+  const { fuzzy = false, fuzzyOptions } = opts;
+  const t = String(term ?? "").toLowerCase();
+  if (!t || !fields || fields.length === 0) return rows;
+  if (fuzzy) {
+    const fuse = new import_fuse.default(rows, {
+      keys: fields,
+      threshold: 0.4,
+      distance: 100,
+      ignoreLocation: true,
+      ...fuzzyOptions
+    });
+    return fuse.search(t).map((r) => r.item);
+  }
+  return rows.filter(
+    (row) => fields.some((field) => {
+      const val = row[field];
+      return val && String(val).toLowerCase().includes(t);
+    })
+  );
+};
+
+// src/utils/interactionHooks.js
+var import_react = require("react");
+var import_ui_extensions = require("@hubspot/ui-extensions");
+var useDebouncedDispatch = (value, debounceMs, dispatch) => {
+  const debounced = (0, import_ui_extensions.useDebounce)(value, debounceMs > 0 ? debounceMs : 300);
+  const pendingRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (debounceMs <= 0) return;
+    if (pendingRef.current == null) return;
+    if (debounced !== pendingRef.current) return;
+    const next = pendingRef.current;
+    pendingRef.current = null;
+    dispatch(next);
+  }, [debounceMs, debounced, dispatch]);
+  return (0, import_react.useCallback)(
+    (next) => {
+      if (debounceMs > 0) {
+        pendingRef.current = next;
+      } else {
+        pendingRef.current = null;
+        dispatch(next);
+      }
+    },
+    [debounceMs, dispatch]
+  );
+};
+var useSelectionReset = ({ resetKey, enabled, isControlled, clearSelection }) => {
+  const ref = (0, import_react.useRef)("");
+  (0, import_react.useEffect)(() => {
+    if (!enabled || isControlled) {
+      ref.current = resetKey;
+      return;
+    }
+    if (ref.current && ref.current !== resetKey) {
+      clearSelection();
+    }
+    ref.current = resetKey;
+  }, [resetKey, enabled, isControlled, clearSelection]);
+};
+
+// packages/datatable/src/editValidation.js
+var editValidationError = (result) => {
+  if (result === true || result === void 0 || result === null) return null;
+  return typeof result === "string" ? result : "Invalid value";
+};
+
+// packages/datatable/src/DataTable.jsx
+var import_ui_extensions2 = require("@hubspot/ui-extensions");
 var NARROW_EDIT_TYPES = /* @__PURE__ */ new Set(["checkbox", "toggle"]);
 var DATE_PATTERN = /^\d{4}[-/]\d{2}[-/]\d{2}/;
 var BOOL_VALUES = /* @__PURE__ */ new Set(["true", "false", "yes", "no", "0", "1"]);
@@ -75,13 +191,6 @@ var serializeSortState = (sortState) => {
   if (!activeField) return null;
   return { field: activeField, direction: sortState[activeField] };
 };
-var toStableKey = (value) => {
-  try {
-    return JSON.stringify(value);
-  } catch (_error) {
-    return String(value);
-  }
-};
 var computeAutoWidths = (columns, data) => {
   if (!data || data.length === 0) return {};
   const sample = data.slice(0, 50);
@@ -133,12 +242,6 @@ var computeAutoWidths = (columns, data) => {
   });
   return results;
 };
-var getEmptyFilterValue = (filter) => {
-  const type = filter.type || "select";
-  if (type === "multiselect") return [];
-  if (type === "dateRange") return { from: null, to: null };
-  return "";
-};
 var BOOLEAN_SELECT_OPTIONS = [
   { label: "Yes", value: true },
   { label: "No", value: false }
@@ -149,12 +252,6 @@ var resolveEditOptions = (col, data) => {
   if (sample && typeof sample[col.field] === "boolean") return BOOLEAN_SELECT_OPTIONS;
   return [];
 };
-var isFilterActive = (filter, value) => {
-  const type = filter.type || "select";
-  if (type === "multiselect") return Array.isArray(value) && value.length > 0;
-  if (type === "dateRange") return value && (value.from || value.to);
-  return !!value;
-};
 var DataTable = ({
   // Data
   data,
@@ -173,8 +270,8 @@ var DataTable = ({
   filters = [],
   showFilterBadges = true,
   // show active filter chips/badges
-  showClearFiltersButton = true,
-  // show "Clear all" filters reset button
+  showClearFiltersButton,
+  // show "Clear all" reset button; defaults to showFilterBadges when omitted
   filterInlineLimit = 2,
   // number of filters shown inline before overflow
   // Pagination
@@ -308,47 +405,46 @@ var DataTable = ({
   renderErrorState
   // ({ error, title, message }) => ReactNode
 }) => {
-  const initialSortState = (0, import_react.useMemo)(() => {
+  const initialSortState = (0, import_react2.useMemo)(() => {
     return normalizeSortState(columns, defaultSort);
   }, [columns, defaultSort]);
-  const [internalSearchTerm, setInternalSearchTerm] = (0, import_react.useState)(
+  const [internalSearchTerm, setInternalSearchTerm] = (0, import_react2.useState)(
     () => serverSide && searchValue != null ? searchValue : ""
   );
-  const [internalFilterValues, setInternalFilterValues] = (0, import_react.useState)(() => {
+  const [internalFilterValues, setInternalFilterValues] = (0, import_react2.useState)(() => {
     const init = {};
     filters.forEach((f) => {
       init[f.name] = getEmptyFilterValue(f);
     });
     return init;
   });
-  const [internalSortState, setInternalSortState] = (0, import_react.useState)(initialSortState);
-  const [currentPage, setCurrentPage] = (0, import_react.useState)(1);
-  const [showMoreFilters, setShowMoreFilters] = (0, import_react.useState)(false);
-  const lastAppliedSearchRef = (0, import_react.useRef)(
+  const [internalSortState, setInternalSortState] = (0, import_react2.useState)(initialSortState);
+  const [currentPage, setCurrentPage] = (0, import_react2.useState)(1);
+  const [showMoreFilters, setShowMoreFilters] = (0, import_react2.useState)(false);
+  const lastAppliedSearchRef = (0, import_react2.useRef)(
     serverSide && searchValue != null ? searchValue : ""
   );
   const searchTerm = serverSide && searchValue != null ? searchValue : internalSearchTerm;
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!serverSide || searchValue == null) return;
     if (searchValue === lastAppliedSearchRef.current) return;
     lastAppliedSearchRef.current = searchValue;
     setInternalSearchTerm(searchValue);
   }, [serverSide, searchValue]);
   const filterValues = serverSide && externalFilterValues != null ? externalFilterValues : internalFilterValues;
-  const externalSortState = (0, import_react.useMemo)(
+  const externalSortState = (0, import_react2.useMemo)(
     () => normalizeSortState(columns, externalSort),
     [columns, externalSort]
   );
   const sortState = serverSide && externalSort != null ? externalSortState : internalSortState;
   const activePage = serverSide && externalPage != null ? externalPage : currentPage;
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!serverSide) setCurrentPage(1);
   }, [internalSearchTerm, internalFilterValues, internalSortState, serverSide]);
-  const debounceRef = (0, import_react.useRef)(null);
-  const fireSearchCallback = (0, import_react.useCallback)((term) => {
+  const fireSearchCallback = (0, import_react2.useCallback)((term) => {
     if (serverSide && onSearchChange) onSearchChange(term);
   }, [serverSide, onSearchChange]);
-  const fireParamsChange = (0, import_react.useCallback)((overrides) => {
+  const fireParamsChange = (0, import_react2.useCallback)((overrides) => {
     if (!onParamsChange) return;
     const nextSortState = overrides.sort != null ? normalizeSortState(columns, overrides.sort) : sortState;
     onParamsChange({
@@ -358,38 +454,35 @@ var DataTable = ({
       page: overrides.page != null ? overrides.page : activePage
     });
   }, [onParamsChange, columns, searchTerm, filterValues, sortState, activePage]);
-  const resetPage = (0, import_react.useCallback)(() => {
+  const resetPage = (0, import_react2.useCallback)(() => {
     if (resetPageOnChange) {
       setCurrentPage(1);
       if (serverSide && onPageChange) onPageChange(1);
     }
   }, [resetPageOnChange, serverSide, onPageChange]);
-  const handleSearchChange = (0, import_react.useCallback)((term) => {
+  const dispatchSearchChange = (0, import_react2.useCallback)((term) => {
+    lastAppliedSearchRef.current = term;
+    fireSearchCallback(term);
+    fireParamsChange({ search: term, page: resetPageOnChange ? 1 : void 0 });
+  }, [fireSearchCallback, fireParamsChange, resetPageOnChange]);
+  const dispatchSearchDebounced = useDebouncedDispatch(
+    internalSearchTerm,
+    searchDebounce,
+    dispatchSearchChange
+  );
+  const handleSearchChange = (0, import_react2.useCallback)((term) => {
     setInternalSearchTerm(term);
     resetPage();
-    const dispatch = () => {
-      lastAppliedSearchRef.current = term;
-      fireSearchCallback(term);
-      fireParamsChange({ search: term, page: resetPageOnChange ? 1 : void 0 });
-    };
-    if (searchDebounce > 0) {
-      if (debounceRef.current) clearTimeout(debounceRef.current);
-      debounceRef.current = setTimeout(dispatch, searchDebounce);
-    } else {
-      dispatch();
-    }
-  }, [searchDebounce, fireSearchCallback, fireParamsChange, resetPage, resetPageOnChange]);
-  (0, import_react.useEffect)(() => () => {
-    if (debounceRef.current) clearTimeout(debounceRef.current);
-  }, []);
-  const handleFilterChange = (0, import_react.useCallback)((name, value) => {
+    dispatchSearchDebounced(term);
+  }, [dispatchSearchDebounced, resetPage]);
+  const handleFilterChange = (0, import_react2.useCallback)((name, value) => {
     const next = { ...filterValues, [name]: value };
     setInternalFilterValues(next);
     if (serverSide && onFilterChange) onFilterChange(next);
     resetPage();
     fireParamsChange({ filters: next, page: resetPageOnChange ? 1 : void 0 });
   }, [filterValues, serverSide, onFilterChange, fireParamsChange, resetPage, resetPageOnChange]);
-  const handleSortChange = (0, import_react.useCallback)((field) => {
+  const handleSortChange = (0, import_react2.useCallback)((field) => {
     const current = sortState[field] || "none";
     const nextDirection = current === "none" ? "ascending" : current === "ascending" ? "descending" : "none";
     const reset = {};
@@ -402,59 +495,23 @@ var DataTable = ({
     resetPage();
     fireParamsChange({ sort: next, page: resetPageOnChange ? 1 : void 0 });
   }, [sortState, columns, serverSide, onSortChange, fireParamsChange, resetPage, resetPageOnChange]);
-  const handlePageChange = (0, import_react.useCallback)((page) => {
+  const handlePageChange = (0, import_react2.useCallback)((page) => {
     setCurrentPage(page);
     if (serverSide && onPageChange) onPageChange(page);
     fireParamsChange({ page });
   }, [serverSide, onPageChange, fireParamsChange]);
-  const filteredData = (0, import_react.useMemo)(() => {
+  const filteredData = (0, import_react2.useMemo)(() => {
     if (serverSide) return data;
-    let result = data;
-    filters.forEach((filter) => {
-      const value = filterValues[filter.name];
-      if (!isFilterActive(filter, value)) return;
-      const type = filter.type || "select";
-      if (filter.filterFn) {
-        result = result.filter((row) => filter.filterFn(row, value));
-      } else if (type === "multiselect") {
-        result = result.filter((row) => value.includes(row[filter.name]));
-      } else if (type === "dateRange") {
-        const fromTs = dateToTimestamp(value.from);
-        const toTs = value.to ? dateToTimestamp(value.to) + 864e5 - 1 : null;
-        result = result.filter((row) => {
-          const rowTs = new Date(row[filter.name]).getTime();
-          if (Number.isNaN(rowTs)) return false;
-          if (fromTs && rowTs < fromTs) return false;
-          if (toTs && rowTs > toTs) return false;
-          return true;
-        });
-      } else {
-        result = result.filter((row) => row[filter.name] === value);
-      }
-    });
+    let result = filterRows(data, filters, filterValues);
     if (searchTerm && searchFields.length > 0) {
-      if (fuzzySearch) {
-        const fuse = new import_fuse.default(result, {
-          keys: searchFields,
-          threshold: 0.4,
-          distance: 100,
-          ignoreLocation: true,
-          ...fuzzyOptions
-        });
-        result = fuse.search(searchTerm).map((r) => r.item);
-      } else {
-        const term = searchTerm.toLowerCase();
-        result = result.filter(
-          (row) => searchFields.some((field) => {
-            const val = row[field];
-            return val && String(val).toLowerCase().includes(term);
-          })
-        );
-      }
+      result = searchRows(result, searchTerm, searchFields, {
+        fuzzy: fuzzySearch,
+        fuzzyOptions
+      });
     }
     return result;
   }, [data, filterValues, searchTerm, filters, searchFields, serverSide, fuzzySearch, fuzzyOptions]);
-  const sortedData = (0, import_react.useMemo)(() => {
+  const sortedData = (0, import_react2.useMemo)(() => {
     if (serverSide) return filteredData;
     const activeField = Object.keys(sortState).find((k) => sortState[k] !== "none");
     if (!activeField) return filteredData;
@@ -483,7 +540,7 @@ var DataTable = ({
       return 0;
     });
   }, [filteredData, sortState, serverSide, columns]);
-  const groupedData = (0, import_react.useMemo)(() => {
+  const groupedData = (0, import_react2.useMemo)(() => {
     if (!groupBy) return null;
     const source = serverSide ? data : sortedData;
     const groups = {};
@@ -507,7 +564,7 @@ var DataTable = ({
       rows: groups[key]
     }));
   }, [sortedData, data, groupBy, serverSide]);
-  const [expandedGroups, setExpandedGroups] = (0, import_react.useState)(() => {
+  const [expandedGroups, setExpandedGroups] = (0, import_react2.useState)(() => {
     if (!groupBy) return /* @__PURE__ */ new Set();
     const defaultExpanded = groupBy.defaultExpanded !== false;
     if (defaultExpanded && groupedData) {
@@ -515,7 +572,7 @@ var DataTable = ({
     }
     return /* @__PURE__ */ new Set();
   });
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!groupedData) return;
     const defaultExpanded = (groupBy == null ? void 0 : groupBy.defaultExpanded) !== false;
     if (defaultExpanded) {
@@ -526,7 +583,7 @@ var DataTable = ({
       });
     }
   }, [groupedData, groupBy]);
-  const toggleGroup = (0, import_react.useCallback)((key) => {
+  const toggleGroup = (0, import_react2.useCallback)((key) => {
     setExpandedGroups((prev) => {
       const next = new Set(prev);
       if (next.has(key)) next.delete(key);
@@ -534,20 +591,20 @@ var DataTable = ({
       return next;
     });
   }, []);
-  const datasetRows = (0, import_react.useMemo)(() => {
+  const datasetRows = (0, import_react2.useMemo)(() => {
     if (!groupedData) return serverSide ? data : sortedData;
     return groupedData.flatMap((group) => group.rows);
   }, [groupedData, sortedData, data, serverSide]);
   const totalItems = serverSide ? totalCount || data.length : datasetRows.length;
   const pageCount = Math.ceil(totalItems / pageSize);
-  const paginatedRows = (0, import_react.useMemo)(() => {
+  const paginatedRows = (0, import_react2.useMemo)(() => {
     if (serverSide) return datasetRows;
     return datasetRows.slice(
       (activePage - 1) * pageSize,
       activePage * pageSize
     );
   }, [serverSide, datasetRows, activePage, pageSize]);
-  const displayRows = (0, import_react.useMemo)(() => {
+  const displayRows = (0, import_react2.useMemo)(() => {
     if (!groupedData) return paginatedRows.map((row) => ({ type: "data", row }));
     const pageRows = new Set(paginatedRows);
     const rows = [];
@@ -562,7 +619,7 @@ var DataTable = ({
     return rows;
   }, [groupedData, paginatedRows, expandedGroups]);
   const footerData = serverSide ? data : filteredData;
-  const activeChips = (0, import_react.useMemo)(() => {
+  const activeChips = (0, import_react2.useMemo)(() => {
     const chips = [];
     filters.forEach((filter) => {
       const value = filterValues[filter.name];
@@ -587,7 +644,7 @@ var DataTable = ({
     });
     return chips;
   }, [filterValues, filters]);
-  const handleFilterRemove = (0, import_react.useCallback)((key) => {
+  const handleFilterRemove = (0, import_react2.useCallback)((key) => {
     if (key === "all") {
       const cleared = {};
       filters.forEach((f) => {
@@ -623,18 +680,19 @@ var DataTable = ({
   const resolvedDateFromLabel = (labels == null ? void 0 : labels.dateFrom) || "From";
   const resolvedDateToLabel = (labels == null ? void 0 : labels.dateTo) || "To";
   const resolvedLoadingLabel = (labels == null ? void 0 : labels.loading) || `Loading ${pluralLabel}...`;
+  const resolvedLoadingMessage = (labels == null ? void 0 : labels.loadingMessage) || "This should only take a moment.";
   const resolvedErrorTitle = (labels == null ? void 0 : labels.errorTitle) || "Something went wrong.";
   const resolvedErrorMessage = (labels == null ? void 0 : labels.errorMessage) || "An error occurred while loading data.";
   const resolvedRetryMessage = (labels == null ? void 0 : labels.retryMessage) || "Please try again.";
+  const resolvedShowClearFiltersButton = showClearFiltersButton ?? showFilterBadges;
   const recordCountLabel = rowCountText ? rowCountText(shownOnPageCount, displayCount) : displayCount === totalDataCount ? `${totalDataCount} ${countLabel(totalDataCount)}` : `${displayCount} of ${totalDataCount} ${countLabel(totalDataCount)}`;
-  const [internalSelectedIds, setInternalSelectedIds] = (0, import_react.useState)(/* @__PURE__ */ new Set());
-  const selectionResetRef = (0, import_react.useRef)("");
-  (0, import_react.useEffect)(() => {
+  const [internalSelectedIds, setInternalSelectedIds] = (0, import_react2.useState)(/* @__PURE__ */ new Set());
+  (0, import_react2.useEffect)(() => {
     if (externalSelectedIds != null) {
       setInternalSelectedIds(new Set(externalSelectedIds));
     }
   }, [externalSelectedIds]);
-  const selectionQueryKey = (0, import_react.useMemo)(() => {
+  const selectionQueryKey = (0, import_react2.useMemo)(() => {
     if (!resetSelectionOnQueryChange) return "";
     return toStableKey({
       search: searchTerm,
@@ -642,47 +700,47 @@ var DataTable = ({
       sort: serializeSortState(sortState)
     });
   }, [searchTerm, filterValues, sortState, resetSelectionOnQueryChange]);
-  const combinedSelectionResetKey = (0, import_react.useMemo)(
+  const combinedSelectionResetKey = (0, import_react2.useMemo)(
     () => `${selectionQueryKey}::${selectionResetKey == null ? "" : toStableKey(selectionResetKey)}`,
     [selectionQueryKey, selectionResetKey]
   );
-  (0, import_react.useEffect)(() => {
-    if (!selectable || externalSelectedIds != null) {
-      selectionResetRef.current = combinedSelectionResetKey;
-      return;
-    }
-    if (selectionResetRef.current && selectionResetRef.current !== combinedSelectionResetKey) {
-      setInternalSelectedIds(/* @__PURE__ */ new Set());
-    }
-    selectionResetRef.current = combinedSelectionResetKey;
-  }, [combinedSelectionResetKey, selectable, externalSelectedIds]);
+  const clearSelection = (0, import_react2.useCallback)(() => setInternalSelectedIds(/* @__PURE__ */ new Set()), []);
+  useSelectionReset({
+    resetKey: combinedSelectionResetKey,
+    enabled: selectable,
+    isControlled: externalSelectedIds != null,
+    clearSelection
+  });
   const selectedIds = externalSelectedIds != null ? new Set(externalSelectedIds) : internalSelectedIds;
   const showToolbarCount = showRowCount && displayCount > 0 && !(showSelectionBar && selectable && selectedIds.size > 0);
-  const hasToolbarContent = showSearch && searchFields.length > 0 || filters.length > 0 || activeChips.length > 0 && (showFilterBadges || showClearFiltersButton) || showToolbarCount;
+  const hasToolbarLeft = showSearch && searchFields.length > 0 || filters.length > 0 || activeChips.length > 0 && (showFilterBadges || resolvedShowClearFiltersButton);
+  const countInTitleRow = !!title && showToolbarCount && !hasToolbarLeft;
+  const countInToolbar = showToolbarCount && !countInTitleRow;
+  const hasToolbarContent = hasToolbarLeft || countInToolbar;
   const showRowActionsColumn = !!rowActions && !(hideRowActionsWhenSelectionActive && selectable && selectedIds.size > 0);
-  const applySelection = (0, import_react.useCallback)((nextSet) => {
+  const applySelection = (0, import_react2.useCallback)((nextSet) => {
     if (externalSelectedIds == null) {
       setInternalSelectedIds(nextSet);
     }
     if (onSelectionChange) onSelectionChange([...nextSet]);
   }, [externalSelectedIds, onSelectionChange]);
-  const pageRowIds = (0, import_react.useMemo)(() => {
+  const pageRowIds = (0, import_react2.useMemo)(() => {
     if (serverSide) {
       return data.map((row) => row[rowIdField]).filter((id) => id != null);
     }
     return displayRows.filter((r) => r.type === "data").map((r) => r.row[rowIdField]).filter((id) => id != null);
   }, [serverSide, data, displayRows, rowIdField]);
-  const allRowIds = (0, import_react.useMemo)(
+  const allRowIds = (0, import_react2.useMemo)(
     () => datasetRows.map((row) => row[rowIdField]).filter((id) => id != null),
     [datasetRows, rowIdField]
   );
-  const handleSelectRow = (0, import_react.useCallback)((rowId, checked) => {
+  const handleSelectRow = (0, import_react2.useCallback)((rowId, checked) => {
     const next = new Set(selectedIds);
     if (checked) next.add(rowId);
     else next.delete(rowId);
     applySelection(next);
   }, [selectedIds, applySelection]);
-  const handleSelectAll = (0, import_react.useCallback)((checked) => {
+  const handleSelectAll = (0, import_react2.useCallback)((checked) => {
     const next = new Set(selectedIds);
     pageRowIds.forEach((id) => {
       if (checked) next.add(id);
@@ -690,10 +748,10 @@ var DataTable = ({
     });
     applySelection(next);
   }, [selectedIds, pageRowIds, applySelection]);
-  const allVisibleSelected = (0, import_react.useMemo)(() => {
+  const allVisibleSelected = (0, import_react2.useMemo)(() => {
     return pageRowIds.length > 0 && pageRowIds.every((id) => selectedIds.has(id));
   }, [pageRowIds, selectedIds]);
-  const handleSelectAllRows = (0, import_react.useCallback)(() => {
+  const handleSelectAllRows = (0, import_react2.useCallback)(() => {
     const idsToAdd = serverSide ? pageRowIds : allRowIds;
     const next = new Set(selectedIds);
     idsToAdd.forEach((id) => next.add(id));
@@ -706,13 +764,13 @@ var DataTable = ({
       });
     }
   }, [serverSide, pageRowIds, allRowIds, selectedIds, applySelection, onSelectAllRequest, totalCount, data.length]);
-  const handleDeselectAll = (0, import_react.useCallback)(() => {
+  const handleDeselectAll = (0, import_react2.useCallback)(() => {
     applySelection(/* @__PURE__ */ new Set());
   }, [applySelection]);
-  const [editingCell, setEditingCell] = (0, import_react.useState)(null);
-  const [editValue, setEditValue] = (0, import_react.useState)(null);
-  const [editError, setEditError] = (0, import_react.useState)(null);
-  const startEditing = (0, import_react.useCallback)((rowId, field, currentValue) => {
+  const [editingCell, setEditingCell] = (0, import_react2.useState)(null);
+  const [editValue, setEditValue] = (0, import_react2.useState)(null);
+  const [editError, setEditError] = (0, import_react2.useState)(null);
+  const startEditing = (0, import_react2.useCallback)((rowId, field, currentValue) => {
     setEditingCell({ rowId, field });
     setEditValue(currentValue);
     setEditError(null);
@@ -721,13 +779,13 @@ var DataTable = ({
       if (row) onEditStart(row, field, currentValue);
     }
   }, [onEditStart, data, rowIdField]);
-  const commitEdit = (0, import_react.useCallback)((row, field, value, options = {}) => {
+  const commitEdit = (0, import_react2.useCallback)((row, field, value, options = {}) => {
     const { keepEditing = false } = options;
     const col = columns.find((c) => c.field === field);
     if (col == null ? void 0 : col.editValidate) {
-      const result = col.editValidate(value, row);
-      if (result !== true && result !== void 0 && result !== null) {
-        setEditError(typeof result === "string" ? result : "Invalid value");
+      const err = editValidationError(col.editValidate(value, row));
+      if (err) {
+        setEditError(err);
         return false;
       }
     }
@@ -755,14 +813,7 @@ var DataTable = ({
     const extra = col.editProps || {};
     const validate = col.editValidate;
     const validationProps = validate && editError ? { error: true, validationMessage: editError } : {};
-    const onInputValidate = validate ? (val) => {
-      const result = validate(val, row);
-      if (result !== true && result !== void 0 && result !== null) {
-        setEditError(typeof result === "string" ? result : "Invalid value");
-      } else {
-        setEditError(null);
-      }
-    } : void 0;
+    const onInputValidate = validate ? (val) => setEditError(editValidationError(validate(val, row))) : void 0;
     const handleInput = (val) => {
       setEditValue(val);
       if (onInputValidate) onInputValidate(val);
@@ -780,42 +831,42 @@ var DataTable = ({
     };
     switch (type) {
       case "textarea":
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.TextArea, { ...extra, name: fieldName, label: "", value: editValue ?? "", onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TextArea, { ...extra, name: fieldName, label: "", value: editValue ?? "", onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
       case "number":
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.NumberInput, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.NumberInput, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
       case "currency":
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.CurrencyInput, { currencyCode: "USD", ...extra, name: fieldName, label: "", value: editValue, onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.CurrencyInput, { currencyCode: "USD", ...extra, name: fieldName, label: "", value: editValue, onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
       case "stepper":
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.StepperInput, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.StepperInput, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
       case "select":
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Select, { variant: "transparent", ...extra, name: fieldName, label: "", value: editValue, onChange: commit, options: resolveEditOptions(col, data) });
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Select, { variant: "transparent", ...extra, name: fieldName, label: "", value: editValue, onChange: commit, options: resolveEditOptions(col, data) });
       case "multiselect":
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.MultiSelect, { ...extra, name: fieldName, label: "", value: editValue || [], onChange: commit, options: resolveEditOptions(col, data) });
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.MultiSelect, { ...extra, name: fieldName, label: "", value: editValue || [], onChange: commit, options: resolveEditOptions(col, data) });
       case "date":
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.DateInput, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit });
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.DateInput, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit });
       case "time":
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.TimeInput, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit });
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TimeInput, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit });
       case "datetime":
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.DateInput, { ...extra, name: `${fieldName}-date`, label: "", value: editValue == null ? void 0 : editValue.date, onChange: (val) => {
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.DateInput, { ...extra, name: `${fieldName}-date`, label: "", value: editValue == null ? void 0 : editValue.date, onChange: (val) => {
           const next = { ...editValue, date: val };
           handleInput(next);
           commitEdit(row, col.field, next, { keepEditing: true });
-        }, onBlur: maybeExitDatetimeEdit }), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: "", value: editValue == null ? void 0 : editValue.time, onChange: (val) => {
+        }, onBlur: maybeExitDatetimeEdit }), /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: "", value: editValue == null ? void 0 : editValue.time, onChange: (val) => {
           const next = { ...editValue, time: val };
           handleInput(next);
           commitEdit(row, col.field, next, { keepEditing: true });
         }, onBlur: maybeExitDatetimeEdit }));
       case "toggle":
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Toggle, { ...extra, name: fieldName, label: "", checked: !!editValue, onChange: commit });
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Toggle, { ...extra, name: fieldName, label: "", checked: !!editValue, onChange: commit });
       case "checkbox":
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Checkbox, { ...extra, name: fieldName, checked: !!editValue, onChange: commit });
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Checkbox, { ...extra, name: fieldName, checked: !!editValue, onChange: commit });
       default:
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Input, { ...extra, name: fieldName, label: "", value: editValue ?? "", onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Input, { ...extra, name: fieldName, label: "", value: editValue ?? "", onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
     }
   };
   const resolvedEditMode = editMode || (columns.some((col) => col.editable) ? "discrete" : null);
   const useColumnRendering = selectable || !!resolvedEditMode || editingRowId != null || showRowActionsColumn || !renderRow;
-  const autoWidths = (0, import_react.useMemo)(
+  const autoWidths = (0, import_react2.useMemo)(
     () => autoWidth ? computeAutoWidths(columns, data) : {},
     [columns, data, autoWidth]
   );
@@ -828,7 +879,7 @@ var DataTable = ({
     var _a;
     return col.cellWidth || col.width || ((_a = autoWidths[col.field]) == null ? void 0 : _a.cellWidth) || defaultWidth;
   };
-  const [inlineErrors, setInlineErrors] = (0, import_react.useState)({});
+  const [inlineErrors, setInlineErrors] = (0, import_react2.useState)({});
   const renderInlineControl = (col, row) => {
     const type = col.editType || "text";
     const rowId = row[rowIdField];
@@ -838,9 +889,9 @@ var DataTable = ({
     const validate = col.editValidate;
     const fire = (val) => {
       if (validate) {
-        const result = validate(val, row);
-        if (result !== true && result !== void 0 && result !== null) {
-          setInlineErrors((prev) => ({ ...prev, [cellKey]: typeof result === "string" ? result : "Invalid value" }));
+        const err = editValidationError(validate(val, row));
+        if (err) {
+          setInlineErrors((prev) => ({ ...prev, [cellKey]: err }));
           return;
         }
         setInlineErrors((prev) => {
@@ -855,16 +906,13 @@ var DataTable = ({
     const cellError = inlineErrors[cellKey];
     const validationProps = cellError ? { error: true, validationMessage: cellError } : {};
     const onInputValidate = validate ? (val) => {
-      const result = validate(val, row);
-      if (result !== true && result !== void 0 && result !== null) {
-        setInlineErrors((prev) => ({ ...prev, [cellKey]: typeof result === "string" ? result : "Invalid value" }));
-      } else {
-        setInlineErrors((prev) => {
-          const next = { ...prev };
-          delete next[cellKey];
-          return next;
-        });
-      }
+      const err = editValidationError(validate(val, row));
+      setInlineErrors((prev) => {
+        if (err) return { ...prev, [cellKey]: err };
+        const next = { ...prev };
+        delete next[cellKey];
+        return next;
+      });
     } : void 0;
     const emitInput = (val) => {
       if (onInputValidate) onInputValidate(val);
@@ -872,33 +920,33 @@ var DataTable = ({
     };
     switch (type) {
       case "textarea":
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.TextArea, { ...extra, name: fieldName, label: "", value: value ?? "", onChange: fire, ...validationProps, onInput: emitInput });
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TextArea, { ...extra, name: fieldName, label: "", value: value ?? "", onChange: fire, ...validationProps, onInput: emitInput });
       case "number":
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.NumberInput, { ...extra, name: fieldName, label: "", value, onChange: fire, ...validationProps, onInput: emitInput });
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.NumberInput, { ...extra, name: fieldName, label: "", value, onChange: fire, ...validationProps, onInput: emitInput });
       case "currency":
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.CurrencyInput, { currencyCode: "USD", ...extra, name: fieldName, label: "", value, onChange: fire, ...validationProps, onInput: emitInput });
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.CurrencyInput, { currencyCode: "USD", ...extra, name: fieldName, label: "", value, onChange: fire, ...validationProps, onInput: emitInput });
       case "stepper":
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.StepperInput, { ...extra, name: fieldName, label: "", value, onChange: fire, ...validationProps, onInput: emitInput });
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.StepperInput, { ...extra, name: fieldName, label: "", value, onChange: fire, ...validationProps, onInput: emitInput });
       case "select":
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Select, { ...extra, name: fieldName, label: "", value, onChange: fire, options: resolveEditOptions(col, data) });
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Select, { ...extra, name: fieldName, label: "", value, onChange: fire, options: resolveEditOptions(col, data) });
       case "multiselect":
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.MultiSelect, { ...extra, name: fieldName, label: "", value: value || [], onChange: fire, options: resolveEditOptions(col, data) });
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.MultiSelect, { ...extra, name: fieldName, label: "", value: value || [], onChange: fire, options: resolveEditOptions(col, data) });
       case "date":
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.DateInput, { ...extra, name: fieldName, label: "", value, onChange: fire });
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.DateInput, { ...extra, name: fieldName, label: "", value, onChange: fire });
       case "time":
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.TimeInput, { ...extra, name: fieldName, label: "", value, onChange: fire });
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TimeInput, { ...extra, name: fieldName, label: "", value, onChange: fire });
       case "datetime":
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.DateInput, { ...extra, name: `${fieldName}-date`, label: "", value: value == null ? void 0 : value.date, onChange: (val) => {
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.DateInput, { ...extra, name: `${fieldName}-date`, label: "", value: value == null ? void 0 : value.date, onChange: (val) => {
           fire({ ...value, date: val });
-        } }), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: "", value: value == null ? void 0 : value.time, onChange: (val) => {
+        } }), /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: "", value: value == null ? void 0 : value.time, onChange: (val) => {
           fire({ ...value, time: val });
         } }));
       case "toggle":
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Toggle, { ...extra, name: fieldName, label: "", checked: !!value, onChange: fire });
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Toggle, { ...extra, name: fieldName, label: "", checked: !!value, onChange: fire });
       case "checkbox":
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Checkbox, { ...extra, name: fieldName, checked: !!value, onChange: fire });
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Checkbox, { ...extra, name: fieldName, checked: !!value, onChange: fire });
       default:
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Input, { ...extra, name: fieldName, label: "", value: value ?? "", onChange: fire, ...validationProps, onInput: emitInput });
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Input, { ...extra, name: fieldName, label: "", value: value ?? "", onChange: fire, ...validationProps, onInput: emitInput });
     }
   };
   const renderCellContent = (row, col) => {
@@ -918,30 +966,30 @@ var DataTable = ({
         if (col.renderCell) {
           const content2 = col.renderCell(rawValue, row);
           if (col.editable) {
-            return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Link, { variant: "dark", onClick: () => startEditing(rowId, col.field, rawValue) }, content2 || "--");
+            return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Link, { variant: "dark", onClick: () => startEditing(rowId, col.field, rawValue) }, content2 || "--");
           }
           return content2;
         }
         if (col.editable) {
-          return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { truncate: { tooltipText: rawStr } }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Link, { variant: "dark", onClick: () => startEditing(rowId, col.field, rawValue) }, rawStr || "--"));
+          return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, { truncate: { tooltipText: rawStr } }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Link, { variant: "dark", onClick: () => startEditing(rowId, col.field, rawValue) }, rawStr || "--"));
         }
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { truncate: { tooltipText: rawStr } }, rawStr);
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, { truncate: { tooltipText: rawStr } }, rawStr);
       }
       const maxLen = typeof col.truncate === "number" ? col.truncate : col.truncate.maxLength || 100;
       if (rawStr.length > maxLen) {
         const truncatedStr = rawStr.slice(0, maxLen) + "\u2026";
         const content2 = col.renderCell ? col.renderCell(truncatedStr, row) : truncatedStr;
         if (col.editable) {
-          return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Link, { variant: "dark", onClick: () => startEditing(rowId, col.field, rawValue) }, content2 || "--");
+          return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Link, { variant: "dark", onClick: () => startEditing(rowId, col.field, rawValue) }, content2 || "--");
         }
-        return col.renderCell ? content2 : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { truncate: { tooltipText: rawStr } }, content2 || "--");
+        return col.renderCell ? content2 : /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, { truncate: { tooltipText: rawStr } }, content2 || "--");
       }
     }
     const content = col.renderCell ? col.renderCell(rawValue, row) : rawValue;
     const isEmpty = content == null || content === "";
     if (col.editable) {
-      return /* @__PURE__ */ import_react.default.createElement(
-        import_ui_extensions.Link,
+      return /* @__PURE__ */ import_react2.default.createElement(
+        import_ui_extensions2.Link,
         {
           variant: "dark",
           onClick: () => startEditing(rowId, col.field, rawValue)
@@ -954,8 +1002,8 @@ var DataTable = ({
   const renderFilterControl = (filter) => {
     const type = filter.type || "select";
     if (type === "multiselect") {
-      return /* @__PURE__ */ import_react.default.createElement(
-        import_ui_extensions.MultiSelect,
+      return /* @__PURE__ */ import_react2.default.createElement(
+        import_ui_extensions2.MultiSelect,
         {
           key: filter.name,
           name: `filter-${filter.name}`,
@@ -969,8 +1017,8 @@ var DataTable = ({
     }
     if (type === "dateRange") {
       const rangeVal = filterValues[filter.name] || { from: null, to: null };
-      return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { key: filter.name, direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ import_react.default.createElement(
-        import_ui_extensions.DateInput,
+      return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { key: filter.name, direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ import_react2.default.createElement(
+        import_ui_extensions2.DateInput,
         {
           name: `filter-${filter.name}-from`,
           label: "",
@@ -979,8 +1027,8 @@ var DataTable = ({
           value: rangeVal.from,
           onChange: (val) => handleFilterChange(filter.name, { ...rangeVal, from: val })
         }
-      ), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Icon, { name: "dataSync", size: "sm" }), /* @__PURE__ */ import_react.default.createElement(
-        import_ui_extensions.DateInput,
+      ), /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Icon, { name: "dataSync", size: "sm" }), /* @__PURE__ */ import_react2.default.createElement(
+        import_ui_extensions2.DateInput,
         {
           size: "sm",
           name: `filter-${filter.name}-to`,
@@ -992,8 +1040,8 @@ var DataTable = ({
         }
       ));
     }
-    return /* @__PURE__ */ import_react.default.createElement(
-      import_ui_extensions.Select,
+    return /* @__PURE__ */ import_react2.default.createElement(
+      import_ui_extensions2.Select,
       {
         key: filter.name,
         name: `filter-${filter.name}`,
@@ -1008,33 +1056,33 @@ var DataTable = ({
       }
     );
   };
-  return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "xs" }, title && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", justify: "between", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { format: { fontWeight: "demibold" } }, title)), hasToolbarContent && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 3 }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ import_react.default.createElement(
-    import_ui_extensions.SearchInput,
+  return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "column", gap: "xs" }, title && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", align: "center", justify: "between", gap: "sm" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, { format: { fontWeight: "demibold" } }, title), countInTitleRow && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)), hasToolbarContent && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Box, { flex: 3 }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ import_react2.default.createElement(
+    import_ui_extensions2.SearchInput,
     {
       name: "datatable-search",
       placeholder: searchPlaceholder,
       value: internalSearchTerm,
       onChange: handleSearchChange
     }
-  ), filters.slice(0, filterInlineLimit).map(renderFilterControl), filters.length > filterInlineLimit && /* @__PURE__ */ import_react.default.createElement(
-    import_ui_extensions.Button,
+  ), filters.slice(0, filterInlineLimit).map(renderFilterControl), filters.length > filterInlineLimit && /* @__PURE__ */ import_react2.default.createElement(
+    import_ui_extensions2.Button,
     {
       variant: "transparent",
       size: "small",
       onClick: () => setShowMoreFilters((prev) => !prev)
     },
-    /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Icon, { name: "filter", size: "sm" }),
+    /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Icon, { name: "filter", size: "sm" }),
     " ",
     resolvedFiltersButtonLabel
-  )), showMoreFilters && filters.length > filterInlineLimit && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, filters.slice(filterInlineLimit).map(renderFilterControl)), activeChips.length > 0 && (showFilterBadges || showClearFiltersButton) && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showFilterBadges && activeChips.map((chip) => /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Tag, { key: chip.key, variant: "default", onDelete: () => handleFilterRemove(chip.key) }, chip.label)), showClearFiltersButton && /* @__PURE__ */ import_react.default.createElement(
-    import_ui_extensions.Button,
+  )), showMoreFilters && filters.length > filterInlineLimit && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, filters.slice(filterInlineLimit).map(renderFilterControl)), activeChips.length > 0 && (showFilterBadges || resolvedShowClearFiltersButton) && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showFilterBadges && activeChips.map((chip) => /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Tag, { key: chip.key, variant: "default", onDelete: () => handleFilterRemove(chip.key) }, chip.label)), resolvedShowClearFiltersButton && /* @__PURE__ */ import_react2.default.createElement(
+    import_ui_extensions2.Button,
     {
       variant: "transparent",
       size: "extra-small",
       onClick: () => handleFilterRemove("all")
     },
     resolvedClearAllLabel
-  )))), showToolbarCount && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 1, alignSelf: "end" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)))), showSelectionBar && selectable && selectedIds.size > 0 && (renderSelectionBar ? renderSelectionBar({
+  )))), countInToolbar && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Box, { flex: 1, alignSelf: "end" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)))), showSelectionBar && selectable && selectedIds.size > 0 && (renderSelectionBar ? renderSelectionBar({
     selectedIds,
     selectedCount: selectedIds.size,
     displayCount,
@@ -1043,23 +1091,27 @@ var DataTable = ({
     onSelectAll: handleSelectAllRows,
     onDeselectAll: handleDeselectAll,
     selectionActions
-  }) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 3 }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "sm", wrap: "nowrap" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { inline: true, format: { fontWeight: "demibold" } }, typeof resolvedSelectedLabel === "function" ? resolvedSelectedLabel(selectedIds.size, countLabel(selectedIds.size)) : resolvedSelectedLabel), selectedIds.size < (serverSide ? totalCount || data.length : allRowIds.length) && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "transparent", size: "extra-small", onClick: handleSelectAllRows }, typeof resolvedSelectAllLabel === "function" ? resolvedSelectAllLabel(displayCount, countLabel(displayCount)) : resolvedSelectAllLabel), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "transparent", size: "extra-small", onClick: handleDeselectAll }, resolvedDeselectAllLabel), selectionActions.map((action, i) => /* @__PURE__ */ import_react.default.createElement(
-    import_ui_extensions.Button,
+  }) : /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Box, { flex: 3 }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", align: "center", gap: "sm", wrap: "nowrap" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, { inline: true, format: { fontWeight: "demibold" } }, typeof resolvedSelectedLabel === "function" ? resolvedSelectedLabel(selectedIds.size, countLabel(selectedIds.size)) : resolvedSelectedLabel), selectedIds.size < (serverSide ? totalCount || data.length : allRowIds.length) && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Button, { variant: "transparent", size: "extra-small", onClick: handleSelectAllRows }, typeof resolvedSelectAllLabel === "function" ? resolvedSelectAllLabel(displayCount, countLabel(displayCount)) : resolvedSelectAllLabel), /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Button, { variant: "transparent", size: "extra-small", onClick: handleDeselectAll }, resolvedDeselectAllLabel), selectionActions.map((action, i) => /* @__PURE__ */ import_react2.default.createElement(
+    import_ui_extensions2.Button,
     {
       key: i,
       variant: action.variant || "transparent",
       size: "extra-small",
       onClick: () => action.onClick([...selectedIds])
     },
-    action.icon && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Icon, { name: action.icon, size: "sm" }),
+    action.icon && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Icon, { name: action.icon, size: "sm" }),
     " ",
     action.label
-  )))), showRowCount && displayCount > 0 && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 1, alignSelf: "center" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel))))), loading ? renderLoadingState ? renderLoadingState({ label: resolvedLoadingLabel }) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.LoadingSpinner, { label: resolvedLoadingLabel, layout: "centered" }) : error ? renderErrorState ? renderErrorState({
+  )))), showRowCount && displayCount > 0 && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Box, { flex: 1, alignSelf: "center" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel))))), loading ? renderLoadingState ? renderLoadingState({ label: resolvedLoadingLabel }) : (
+    // Same EmptyState layout as the empty state, just the "building" image
+    // + a loading message — so loading and empty match with no layout shift.
+    /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Tile, null, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.EmptyState, { title: resolvedLoadingLabel, imageName: "building", layout: "vertical" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, null, resolvedLoadingMessage))))
+  ) : error ? renderErrorState ? renderErrorState({
     error,
     title: typeof error === "string" ? error : resolvedErrorTitle,
     message: typeof error === "string" ? resolvedRetryMessage : resolvedErrorMessage
-  }) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.ErrorState, { title: typeof error === "string" ? error : resolvedErrorTitle }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, null, typeof error === "string" ? resolvedRetryMessage : resolvedErrorMessage)) : displayRows.length === 0 ? renderEmptyState ? renderEmptyState({ title: resolvedEmptyTitle, message: resolvedEmptyMessage }) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.EmptyState, { title: resolvedEmptyTitle, layout: "vertical" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, null, resolvedEmptyMessage))) : /* @__PURE__ */ import_react.default.createElement(
-    import_ui_extensions.Table,
+  }) : /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.ErrorState, { title: typeof error === "string" ? error : resolvedErrorTitle }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, null, typeof error === "string" ? resolvedRetryMessage : resolvedErrorMessage)) : displayRows.length === 0 ? renderEmptyState ? renderEmptyState({ title: resolvedEmptyTitle, message: resolvedEmptyMessage }) : /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Tile, null, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.EmptyState, { title: resolvedEmptyTitle, layout: "vertical" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, null, resolvedEmptyMessage)))) : /* @__PURE__ */ import_react2.default.createElement(
+    import_ui_extensions2.Table,
     {
       bordered,
       flush,
@@ -1071,8 +1123,8 @@ var DataTable = ({
       showButtonLabels,
       ...maxVisiblePageButtons != null ? { maxVisiblePageButtons } : {}
     },
-    /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.TableHead, null, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.TableRow, null, selectable && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.TableHeader, { width: "min" }, /* @__PURE__ */ import_react.default.createElement(
-      import_ui_extensions.Checkbox,
+    /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableHead, null, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableRow, null, selectable && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableHeader, { width: "min" }, /* @__PURE__ */ import_react2.default.createElement(
+      import_ui_extensions2.Checkbox,
       {
         name: "datatable-select-all",
         "aria-label": "Select all rows",
@@ -1081,8 +1133,8 @@ var DataTable = ({
       }
     )), columns.map((col) => {
       const headerAlign = resolvedEditMode === "inline" && col.editable ? void 0 : col.align;
-      return /* @__PURE__ */ import_react.default.createElement(
-        import_ui_extensions.TableHeader,
+      return /* @__PURE__ */ import_react2.default.createElement(
+        import_ui_extensions2.TableHeader,
         {
           key: col.field,
           width: getHeaderWidth(col),
@@ -1090,22 +1142,22 @@ var DataTable = ({
           sortDirection: col.sortable ? sortState[col.field] || "none" : "never",
           onSortChange: col.sortable ? () => handleSortChange(col.field) : void 0
         },
-        col.description ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, col.label, "\xA0", /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Link, { inline: true, variant: "dark", overlay: /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Tooltip, null, col.description) }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Icon, { name: "info", screenReaderText: typeof col.description === "string" ? col.description : void 0 }))) : col.label
+        col.description ? /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, col.label, "\xA0", /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Link, { inline: true, variant: "dark", overlay: /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Tooltip, null, col.description) }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Icon, { name: "info", screenReaderText: typeof col.description === "string" ? col.description : void 0 }))) : col.label
       );
-    }), showRowActionsColumn && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.TableHeader, { width: "min" }))),
-    /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.TableBody, null, displayRows.map(
-      (item, idx) => item.type === "group-header" ? /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.TableRow, { key: `group-${item.group.key}` }, selectable && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.TableCell, { width: "min" }), columns.map((col, colIdx) => {
+    }), showRowActionsColumn && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableHeader, { width: "min" }))),
+    /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableBody, null, displayRows.map(
+      (item, idx) => item.type === "group-header" ? /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableRow, { key: `group-${item.group.key}` }, selectable && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableCell, { width: "min" }), columns.map((col, colIdx) => {
         var _a, _b, _c;
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.TableCell, { key: col.field, width: getCellWidth(col), align: colIdx === 0 ? void 0 : col.align }, colIdx === 0 ? /* @__PURE__ */ import_react.default.createElement(
-          import_ui_extensions.Link,
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableCell, { key: col.field, width: getCellWidth(col), align: colIdx === 0 ? void 0 : col.align }, colIdx === 0 ? /* @__PURE__ */ import_react2.default.createElement(
+          import_ui_extensions2.Link,
           {
             variant: "dark",
             onClick: () => toggleGroup(item.group.key)
           },
-          /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Icon, { name: expandedGroups.has(item.group.key) ? "downCarat" : "right" }), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { format: { fontWeight: "demibold" } }, item.group.label))
+          /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Icon, { name: expandedGroups.has(item.group.key) ? "downCarat" : "right" }), /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, { format: { fontWeight: "demibold" } }, item.group.label))
         ) : ((_a = groupBy.aggregations) == null ? void 0 : _a[col.field]) ? groupBy.aggregations[col.field](item.group.rows, item.group.key) : ((_c = (_b = groupBy.groupValues) == null ? void 0 : _b[item.group.key]) == null ? void 0 : _c[col.field]) ?? "");
-      }), showRowActionsColumn && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.TableCell, { width: "min" })) : useColumnRendering ? /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.TableRow, { key: item.row[rowIdField] ?? idx }, selectable && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.TableCell, { width: "min" }, /* @__PURE__ */ import_react.default.createElement(
-        import_ui_extensions.Checkbox,
+      }), showRowActionsColumn && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableCell, { width: "min" })) : useColumnRendering ? /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableRow, { key: item.row[rowIdField] ?? idx }, selectable && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableCell, { width: "min" }, /* @__PURE__ */ import_react2.default.createElement(
+        import_ui_extensions2.Checkbox,
         {
           name: `select-${item.row[rowIdField]}`,
           "aria-label": "Select row",
@@ -1118,28 +1170,28 @@ var DataTable = ({
         const isRowEditing = editingRowId != null && rowId === editingRowId && col.editable;
         const isShowingInput = isDiscreteEditing || isRowEditing || resolvedEditMode === "inline" && col.editable;
         const cellAlign = isShowingInput ? void 0 : col.align;
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.TableCell, { key: col.field, width: isDiscreteEditing || isRowEditing ? "auto" : getCellWidth(col), align: cellAlign }, renderCellContent(item.row, col));
-      }), showRowActionsColumn && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.TableCell, { width: "min" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, (() => {
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableCell, { key: col.field, width: isDiscreteEditing || isRowEditing ? "auto" : getCellWidth(col), align: cellAlign }, renderCellContent(item.row, col));
+      }), showRowActionsColumn && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableCell, { width: "min" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, (() => {
         const resolvedRowActions = typeof rowActions === "function" ? rowActions(item.row) : rowActions;
         const actions = Array.isArray(resolvedRowActions) ? resolvedRowActions : [];
-        return actions.map((action, i) => /* @__PURE__ */ import_react.default.createElement(
-          import_ui_extensions.Button,
+        return actions.map((action, i) => /* @__PURE__ */ import_react2.default.createElement(
+          import_ui_extensions2.Button,
           {
             key: i,
             variant: action.variant || "transparent",
             size: "extra-small",
             onClick: () => action.onClick(item.row)
           },
-          action.icon && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Icon, { name: action.icon, size: "sm" }),
+          action.icon && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Icon, { name: action.icon, size: "sm" }),
           action.label && ` ${action.label}`
         ));
       })()))) : renderRow(item.row)
     )),
-    (footer || columns.some((col) => col.footer)) && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.TableFooter, null, typeof footer === "function" ? footer(footerData) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.TableRow, null, selectable && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.TableHeader, { width: "min" }), columns.map((col) => {
+    (footer || columns.some((col) => col.footer)) && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableFooter, null, typeof footer === "function" ? footer(footerData) : /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableRow, null, selectable && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableHeader, { width: "min" }), columns.map((col) => {
       const footerDef = col.footer;
       const content = typeof footerDef === "function" ? footerDef(footerData) : footerDef || "";
-      return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.TableHeader, { key: col.field, align: col.align }, content);
-    }), showRowActionsColumn && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.TableHeader, { width: "min" })))
+      return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableHeader, { key: col.field, align: col.align }, content);
+    }), showRowActionsColumn && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableHeader, { width: "min" })))
   ));
 };
 // Annotate the CommonJS export names for ESM import in node: