hs-uix 1.6.4 → 1.7.0

package/dist/datatable.mjs

@@ -1,6 +1,135 @@
 // packages/datatable/src/DataTable.jsx
-import React, { useState, useMemo, useEffect, useCallback, useRef } from "react";
+import React, { useState, useMemo, useEffect as useEffect2, useCallback as useCallback2, useRef as useRef2 } from "react";
+
+// src/utils/query.js
 import Fuse from "fuse.js";
+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;
+  return new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  }).format(new Date(year, month, date));
+};
+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 Fuse(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
+import { useRef, useEffect, useCallback } from "react";
+import { useDebounce } from "@hubspot/ui-extensions";
+var useDebouncedDispatch = (value, debounceMs, dispatch) => {
+  const debounced = useDebounce(value, debounceMs > 0 ? debounceMs : 300);
+  const pendingRef = useRef(null);
+  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 useCallback(
+    (next) => {
+      if (debounceMs > 0) {
+        pendingRef.current = next;
+      } else {
+        pendingRef.current = null;
+        dispatch(next);
+      }
+    },
+    [debounceMs, dispatch]
+  );
+};
+var useSelectionReset = ({ resetKey, enabled, isControlled, clearSelection }) => {
+  const ref = useRef("");
+  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
 import {
   Box,
   Button,
@@ -10,11 +139,9 @@ import {
   EmptyState,
   ErrorState,
   Flex,
-  Heading,
   Icon,
   Input,
   Link,
-  LoadingSpinner,
   MultiSelect,
   NumberInput,
   SearchInput,
@@ -28,25 +155,13 @@ import {
   TableHeader,
   TableRow,
   Tag,
+  Tile,
   Text,
   TextArea,
   TimeInput,
   Toggle,
   Tooltip
 } from "@hubspot/ui-extensions";
-var formatDateChip = (dateObj) => {
-  if (!dateObj) return "";
-  const { year, month, date } = dateObj;
-  return new Intl.DateTimeFormat("en-US", {
-    month: "short",
-    day: "numeric",
-    year: "numeric"
-  }).format(new Date(year, month, date));
-};
-var dateToTimestamp = (dateObj) => {
-  if (!dateObj) return null;
-  return new Date(dateObj.year, dateObj.month, dateObj.date).getTime();
-};
 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"]);
@@ -72,13 +187,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);
@@ -130,12 +238,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 }
@@ -146,12 +248,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,
@@ -170,8 +266,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
@@ -184,7 +280,7 @@ var DataTable = ({
   // show First/Last page buttons (default: auto when pageCount > 5)
   // Row count
   title,
-  // optional title shown above the table toolbar
+  // optional title shown as demibold text above the table toolbar
   showRowCount = true,
   // show "X records" / "X of Y records" text
   rowCountBold = false,
@@ -321,11 +417,11 @@ var DataTable = ({
   const [internalSortState, setInternalSortState] = useState(initialSortState);
   const [currentPage, setCurrentPage] = useState(1);
   const [showMoreFilters, setShowMoreFilters] = useState(false);
-  const lastAppliedSearchRef = useRef(
+  const lastAppliedSearchRef = useRef2(
     serverSide && searchValue != null ? searchValue : ""
   );
   const searchTerm = serverSide && searchValue != null ? searchValue : internalSearchTerm;
-  useEffect(() => {
+  useEffect2(() => {
     if (!serverSide || searchValue == null) return;
     if (searchValue === lastAppliedSearchRef.current) return;
     lastAppliedSearchRef.current = searchValue;
@@ -338,14 +434,13 @@ var DataTable = ({
   );
   const sortState = serverSide && externalSort != null ? externalSortState : internalSortState;
   const activePage = serverSide && externalPage != null ? externalPage : currentPage;
-  useEffect(() => {
+  useEffect2(() => {
     if (!serverSide) setCurrentPage(1);
   }, [internalSearchTerm, internalFilterValues, internalSortState, serverSide]);
-  const debounceRef = useRef(null);
-  const fireSearchCallback = useCallback((term) => {
+  const fireSearchCallback = useCallback2((term) => {
     if (serverSide && onSearchChange) onSearchChange(term);
   }, [serverSide, onSearchChange]);
-  const fireParamsChange = useCallback((overrides) => {
+  const fireParamsChange = useCallback2((overrides) => {
     if (!onParamsChange) return;
     const nextSortState = overrides.sort != null ? normalizeSortState(columns, overrides.sort) : sortState;
     onParamsChange({
@@ -355,38 +450,35 @@ var DataTable = ({
       page: overrides.page != null ? overrides.page : activePage
     });
   }, [onParamsChange, columns, searchTerm, filterValues, sortState, activePage]);
-  const resetPage = useCallback(() => {
+  const resetPage = useCallback2(() => {
     if (resetPageOnChange) {
       setCurrentPage(1);
       if (serverSide && onPageChange) onPageChange(1);
     }
   }, [resetPageOnChange, serverSide, onPageChange]);
-  const handleSearchChange = useCallback((term) => {
+  const dispatchSearchChange = useCallback2((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 = useCallback2((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]);
-  useEffect(() => () => {
-    if (debounceRef.current) clearTimeout(debounceRef.current);
-  }, []);
-  const handleFilterChange = useCallback((name, value) => {
+    dispatchSearchDebounced(term);
+  }, [dispatchSearchDebounced, resetPage]);
+  const handleFilterChange = useCallback2((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 = useCallback((field) => {
+  const handleSortChange = useCallback2((field) => {
     const current = sortState[field] || "none";
     const nextDirection = current === "none" ? "ascending" : current === "ascending" ? "descending" : "none";
     const reset = {};
@@ -399,55 +491,19 @@ var DataTable = ({
     resetPage();
     fireParamsChange({ sort: next, page: resetPageOnChange ? 1 : void 0 });
   }, [sortState, columns, serverSide, onSortChange, fireParamsChange, resetPage, resetPageOnChange]);
-  const handlePageChange = useCallback((page) => {
+  const handlePageChange = useCallback2((page) => {
     setCurrentPage(page);
     if (serverSide && onPageChange) onPageChange(page);
     fireParamsChange({ page });
   }, [serverSide, onPageChange, fireParamsChange]);
   const filteredData = 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 Fuse(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]);
@@ -512,7 +568,7 @@ var DataTable = ({
     }
     return /* @__PURE__ */ new Set();
   });
-  useEffect(() => {
+  useEffect2(() => {
     if (!groupedData) return;
     const defaultExpanded = (groupBy == null ? void 0 : groupBy.defaultExpanded) !== false;
     if (defaultExpanded) {
@@ -523,7 +579,7 @@ var DataTable = ({
       });
     }
   }, [groupedData, groupBy]);
-  const toggleGroup = useCallback((key) => {
+  const toggleGroup = useCallback2((key) => {
     setExpandedGroups((prev) => {
       const next = new Set(prev);
       if (next.has(key)) next.delete(key);
@@ -584,7 +640,7 @@ var DataTable = ({
     });
     return chips;
   }, [filterValues, filters]);
-  const handleFilterRemove = useCallback((key) => {
+  const handleFilterRemove = useCallback2((key) => {
     if (key === "all") {
       const cleared = {};
       filters.forEach((f) => {
@@ -620,13 +676,14 @@ 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] = useState(/* @__PURE__ */ new Set());
-  const selectionResetRef = useRef("");
-  useEffect(() => {
+  useEffect2(() => {
     if (externalSelectedIds != null) {
       setInternalSelectedIds(new Set(externalSelectedIds));
     }
@@ -643,22 +700,21 @@ var DataTable = ({
     () => `${selectionQueryKey}::${selectionResetKey == null ? "" : toStableKey(selectionResetKey)}`,
     [selectionQueryKey, selectionResetKey]
   );
-  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 = useCallback2(() => setInternalSelectedIds(/* @__PURE__ */ new Set()), []);
+  useSelectionReset({
+    resetKey: combinedSelectionResetKey,
+    enabled: selectable,
+    isControlled: externalSelectedIds != null,
+    clearSelection
+  });
   const selectedIds = externalSelectedIds != null ? new Set(externalSelectedIds) : internalSelectedIds;
-  const showToolbarCount = showRowCount && !title && displayCount > 0 && !(showSelectionBar && selectable && selectedIds.size > 0);
-  const showTitleCount = showRowCount && !!title && displayCount > 0 && !(showSelectionBar && selectable && selectedIds.size > 0);
-  const hasToolbarContent = showSearch && searchFields.length > 0 || filters.length > 0 || activeChips.length > 0 && (showFilterBadges || showClearFiltersButton) || showToolbarCount;
+  const showToolbarCount = showRowCount && displayCount > 0 && !(showSelectionBar && selectable && selectedIds.size > 0);
+  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 = useCallback((nextSet) => {
+  const applySelection = useCallback2((nextSet) => {
     if (externalSelectedIds == null) {
       setInternalSelectedIds(nextSet);
     }
@@ -674,13 +730,13 @@ var DataTable = ({
     () => datasetRows.map((row) => row[rowIdField]).filter((id) => id != null),
     [datasetRows, rowIdField]
   );
-  const handleSelectRow = useCallback((rowId, checked) => {
+  const handleSelectRow = useCallback2((rowId, checked) => {
     const next = new Set(selectedIds);
     if (checked) next.add(rowId);
     else next.delete(rowId);
     applySelection(next);
   }, [selectedIds, applySelection]);
-  const handleSelectAll = useCallback((checked) => {
+  const handleSelectAll = useCallback2((checked) => {
     const next = new Set(selectedIds);
     pageRowIds.forEach((id) => {
       if (checked) next.add(id);
@@ -691,7 +747,7 @@ var DataTable = ({
   const allVisibleSelected = useMemo(() => {
     return pageRowIds.length > 0 && pageRowIds.every((id) => selectedIds.has(id));
   }, [pageRowIds, selectedIds]);
-  const handleSelectAllRows = useCallback(() => {
+  const handleSelectAllRows = useCallback2(() => {
     const idsToAdd = serverSide ? pageRowIds : allRowIds;
     const next = new Set(selectedIds);
     idsToAdd.forEach((id) => next.add(id));
@@ -704,13 +760,13 @@ var DataTable = ({
       });
     }
   }, [serverSide, pageRowIds, allRowIds, selectedIds, applySelection, onSelectAllRequest, totalCount, data.length]);
-  const handleDeselectAll = useCallback(() => {
+  const handleDeselectAll = useCallback2(() => {
     applySelection(/* @__PURE__ */ new Set());
   }, [applySelection]);
   const [editingCell, setEditingCell] = useState(null);
   const [editValue, setEditValue] = useState(null);
   const [editError, setEditError] = useState(null);
-  const startEditing = useCallback((rowId, field, currentValue) => {
+  const startEditing = useCallback2((rowId, field, currentValue) => {
     setEditingCell({ rowId, field });
     setEditValue(currentValue);
     setEditError(null);
@@ -719,13 +775,13 @@ var DataTable = ({
       if (row) onEditStart(row, field, currentValue);
     }
   }, [onEditStart, data, rowIdField]);
-  const commitEdit = useCallback((row, field, value, options = {}) => {
+  const commitEdit = useCallback2((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;
       }
     }
@@ -753,14 +809,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);
@@ -836,9 +885,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) => {
@@ -853,16 +902,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);
@@ -1006,7 +1052,7 @@ var DataTable = ({
       }
     );
   };
-  return /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "xs" }, title && /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", justify: "between", gap: "sm" }, /* @__PURE__ */ React.createElement(Heading, null, title), showTitleCount && /* @__PURE__ */ React.createElement(Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)), hasToolbarContent && /* @__PURE__ */ React.createElement(Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ React.createElement(Box, { flex: 3 }, /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "xs" }, title && /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", justify: "between", gap: "sm" }, /* @__PURE__ */ React.createElement(Text, { format: { fontWeight: "demibold" } }, title), countInTitleRow && /* @__PURE__ */ React.createElement(Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)), hasToolbarContent && /* @__PURE__ */ React.createElement(Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ React.createElement(Box, { flex: 3 }, /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ React.createElement(
     SearchInput,
     {
       name: "datatable-search",
@@ -1024,7 +1070,7 @@ var DataTable = ({
     /* @__PURE__ */ React.createElement(Icon, { name: "filter", size: "sm" }),
     " ",
     resolvedFiltersButtonLabel
-  )), showMoreFilters && filters.length > filterInlineLimit && /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, filters.slice(filterInlineLimit).map(renderFilterControl)), activeChips.length > 0 && (showFilterBadges || showClearFiltersButton) && /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showFilterBadges && activeChips.map((chip) => /* @__PURE__ */ React.createElement(Tag, { key: chip.key, variant: "default", onDelete: () => handleFilterRemove(chip.key) }, chip.label)), showClearFiltersButton && /* @__PURE__ */ React.createElement(
+  )), showMoreFilters && filters.length > filterInlineLimit && /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, filters.slice(filterInlineLimit).map(renderFilterControl)), activeChips.length > 0 && (showFilterBadges || resolvedShowClearFiltersButton) && /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showFilterBadges && activeChips.map((chip) => /* @__PURE__ */ React.createElement(Tag, { key: chip.key, variant: "default", onDelete: () => handleFilterRemove(chip.key) }, chip.label)), resolvedShowClearFiltersButton && /* @__PURE__ */ React.createElement(
     Button,
     {
       variant: "transparent",
@@ -1032,7 +1078,7 @@ var DataTable = ({
       onClick: () => handleFilterRemove("all")
     },
     resolvedClearAllLabel
-  )))), showToolbarCount && /* @__PURE__ */ React.createElement(Box, { flex: 1, alignSelf: "end" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ React.createElement(Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)))), showSelectionBar && selectable && selectedIds.size > 0 && (renderSelectionBar ? renderSelectionBar({
+  )))), countInToolbar && /* @__PURE__ */ React.createElement(Box, { flex: 1, alignSelf: "end" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ React.createElement(Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)))), showSelectionBar && selectable && selectedIds.size > 0 && (renderSelectionBar ? renderSelectionBar({
     selectedIds,
     selectedCount: selectedIds.size,
     displayCount,
@@ -1052,11 +1098,15 @@ var DataTable = ({
     action.icon && /* @__PURE__ */ React.createElement(Icon, { name: action.icon, size: "sm" }),
     " ",
     action.label
-  )))), showRowCount && displayCount > 0 && /* @__PURE__ */ React.createElement(Box, { flex: 1, alignSelf: "center" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ React.createElement(Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel))))), loading ? renderLoadingState ? renderLoadingState({ label: resolvedLoadingLabel }) : /* @__PURE__ */ React.createElement(LoadingSpinner, { label: resolvedLoadingLabel, layout: "centered" }) : error ? renderErrorState ? renderErrorState({
+  )))), showRowCount && displayCount > 0 && /* @__PURE__ */ React.createElement(Box, { flex: 1, alignSelf: "center" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ React.createElement(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__ */ React.createElement(Tile, null, /* @__PURE__ */ React.createElement(Flex, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ React.createElement(EmptyState, { title: resolvedLoadingLabel, imageName: "building", layout: "vertical" }, /* @__PURE__ */ React.createElement(Text, null, resolvedLoadingMessage))))
+  ) : error ? renderErrorState ? renderErrorState({
     error,
     title: typeof error === "string" ? error : resolvedErrorTitle,
     message: typeof error === "string" ? resolvedRetryMessage : resolvedErrorMessage
-  }) : /* @__PURE__ */ React.createElement(ErrorState, { title: typeof error === "string" ? error : resolvedErrorTitle }, /* @__PURE__ */ React.createElement(Text, null, typeof error === "string" ? resolvedRetryMessage : resolvedErrorMessage)) : displayRows.length === 0 ? renderEmptyState ? renderEmptyState({ title: resolvedEmptyTitle, message: resolvedEmptyMessage }) : /* @__PURE__ */ React.createElement(Flex, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ React.createElement(EmptyState, { title: resolvedEmptyTitle, layout: "vertical" }, /* @__PURE__ */ React.createElement(Text, null, resolvedEmptyMessage))) : /* @__PURE__ */ React.createElement(
+  }) : /* @__PURE__ */ React.createElement(ErrorState, { title: typeof error === "string" ? error : resolvedErrorTitle }, /* @__PURE__ */ React.createElement(Text, null, typeof error === "string" ? resolvedRetryMessage : resolvedErrorMessage)) : displayRows.length === 0 ? renderEmptyState ? renderEmptyState({ title: resolvedEmptyTitle, message: resolvedEmptyMessage }) : /* @__PURE__ */ React.createElement(Tile, null, /* @__PURE__ */ React.createElement(Flex, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ React.createElement(EmptyState, { title: resolvedEmptyTitle, layout: "vertical" }, /* @__PURE__ */ React.createElement(Text, null, resolvedEmptyMessage)))) : /* @__PURE__ */ React.createElement(
     Table,
     {
       bordered,