hs-uix 1.6.4 → 1.7.0

package/dist/kanban.mjs

@@ -1,6 +1,127 @@
 // packages/kanban/src/Kanban.jsx
-import React2, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React2, { useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef as useRef2, useState } 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]);
+};
 
 // src/common-components/StyledText.js
 import React from "react";
@@ -254,6 +375,7 @@ var DEFAULT_LABELS = {
   emptyTitle: "No cards",
   emptyMessage: "Nothing matches the current filters.",
   loading: "Loading board...",
+  loadingMessage: "This should only take a moment.",
   errorTitle: "Something went wrong.",
   errorMessage: "An error occurred while loading data.",
   cardCount: (n) => String(n),
@@ -281,38 +403,6 @@ var makeRotatedLabelDataUri = (label) => makeStyledTextDataUri(label, {
   format: { fontWeight: "demibold" },
   orientation: "vertical-down"
 });
-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 canStageReceiveRow = (stage, row, canMove) => {
   if (!stage) return false;
   if (typeof canMove === "function" && !canMove(row, stage.value)) return false;
@@ -520,7 +610,7 @@ var KanbanColumn = ({
   children
 }) => {
   const countLabel = labels.cardCount(totalCount != null ? totalCount : bucketCount);
-  const countNode = countDisplay === "text" ? /* @__PURE__ */ React2.createElement(Text, { format: { fontWeight: "demibold" } }, countLabel) : countDisplay === "none" ? null : /* @__PURE__ */ React2.createElement(Tag2, { variant: "subtle" }, countLabel);
+  const countNode = countDisplay === "text" ? /* @__PURE__ */ React2.createElement(Text, { format: { fontWeight: "demibold" } }, countLabel) : countDisplay === "none" ? null : /* @__PURE__ */ React2.createElement(Tag2, { variant: "default" }, countLabel);
   if (collapsed) {
     const rotated = makeRotatedLabelDataUri(stage.label);
     const rotatedCount = countDisplay === "none" ? null : makeRotatedTagDataUri(countLabel);
@@ -853,7 +943,7 @@ var Kanban = ({
   filters,
   filterInlineLimit = DEFAULT_FILTER_INLINE_LIMIT,
   showFilterBadges = true,
-  showClearFiltersButton = true,
+  showClearFiltersButton,
   sortOptions,
   defaultSort,
   sort,
@@ -899,15 +989,15 @@ var Kanban = ({
   const [internalSelection, setInternalSelection] = useState([]);
   const [internalShowMetrics, setInternalShowMetrics] = useState(false);
   const [transitionPrompts, setTransitionPrompts] = useState({});
-  const selectionResetRef = useRef("");
   const resolvedShowMetrics = controlledShowMetrics != null ? controlledShowMetrics : internalShowMetrics;
-  const toggleMetrics = useCallback(() => {
+  const toggleMetrics = useCallback2(() => {
     const next = !resolvedShowMetrics;
     if (onMetricsToggle) onMetricsToggle(next);
     if (controlledShowMetrics == null) setInternalShowMetrics(next);
   }, [resolvedShowMetrics, onMetricsToggle, controlledShowMetrics]);
   const effectiveColumnWidth = Math.max(MIN_COLUMN_WIDTH, columnWidth || DEFAULT_COLUMN_WIDTH);
   const resolvedSearch = searchValue != null ? searchValue : internalSearch;
+  const searchInputValue = searchDebounce > 0 ? internalSearch : resolvedSearch;
   const resolvedFilters = filterValues != null ? filterValues : internalFilters;
   const resolvedSort = sort != null ? sort : internalSort;
   const resolvedCollapsed = collapsedStages != null ? collapsedStages : internalCollapsed;
@@ -921,7 +1011,7 @@ var Kanban = ({
     }
     return map;
   }, [stages]);
-  const fireParamsChange = useCallback((overrides = {}) => {
+  const fireParamsChange = useCallback2((overrides = {}) => {
     if (!onParamsChange) return;
     onParamsChange({
       search: overrides.search != null ? overrides.search : resolvedSearch,
@@ -930,27 +1020,30 @@ var Kanban = ({
       collapsedStages: overrides.collapsedStages != null ? overrides.collapsedStages : resolvedCollapsed
     });
   }, [onParamsChange, resolvedCollapsed, resolvedFilters, resolvedSearch, resolvedSort]);
-  const debounceRef = useRef(null);
-  useEffect(() => () => {
-    if (debounceRef.current) clearTimeout(debounceRef.current);
-  }, []);
-  const handleSearch = useCallback(
+  const lastAppliedSearchRef = useRef2(searchValue != null ? searchValue : "");
+  useEffect2(() => {
+    if (searchValue == null) return;
+    if (searchValue === lastAppliedSearchRef.current) return;
+    lastAppliedSearchRef.current = searchValue;
+    setInternalSearch(searchValue);
+  }, [searchValue]);
+  const dispatchSearch = useCallback2(
     (val) => {
-      if (searchValue == null) setInternalSearch(val);
-      const dispatch = () => {
-        if (onSearchChange) onSearchChange(val);
-        fireParamsChange({ search: val });
-      };
-      if (searchDebounce > 0) {
-        if (debounceRef.current) clearTimeout(debounceRef.current);
-        debounceRef.current = setTimeout(dispatch, searchDebounce);
-      } else {
-        dispatch();
-      }
+      lastAppliedSearchRef.current = val;
+      if (onSearchChange) onSearchChange(val);
+      fireParamsChange({ search: val });
     },
-    [fireParamsChange, onSearchChange, searchValue, searchDebounce]
+    [fireParamsChange, onSearchChange]
   );
-  const handleFilter = useCallback(
+  const dispatchSearchDebounced = useDebouncedDispatch(internalSearch, searchDebounce, dispatchSearch);
+  const handleSearch = useCallback2(
+    (val) => {
+      setInternalSearch(val);
+      dispatchSearchDebounced(val);
+    },
+    [dispatchSearchDebounced]
+  );
+  const handleFilter = useCallback2(
     (name, val) => {
       const next = { ...resolvedFilters, [name]: val };
       if (filterValues == null) setInternalFilters(next);
@@ -959,7 +1052,7 @@ var Kanban = ({
     },
     [fireParamsChange, onFilterChange, filterValues, resolvedFilters]
   );
-  const handleFilterRemove = useCallback(
+  const handleFilterRemove = useCallback2(
     (key) => {
       if (key === "all") {
         const cleared = {};
@@ -980,7 +1073,7 @@ var Kanban = ({
     },
     [filters, filterValues, fireParamsChange, onFilterChange, resolvedFilters]
   );
-  const handleSort = useCallback(
+  const handleSort = useCallback2(
     (val) => {
       if (onSortChange) onSortChange(val);
       if (sort == null) setInternalSort(val);
@@ -988,7 +1081,7 @@ var Kanban = ({
     },
     [fireParamsChange, onSortChange, sort]
   );
-  const handleCollapsed = useCallback(
+  const handleCollapsed = useCallback2(
     (stageValue) => {
       const next = resolvedCollapsed.includes(stageValue) ? resolvedCollapsed.filter((v) => v !== stageValue) : [...resolvedCollapsed, stageValue];
       if (onCollapsedStagesChange) onCollapsedStagesChange(next);
@@ -997,7 +1090,7 @@ var Kanban = ({
     },
     [fireParamsChange, resolvedCollapsed, collapsedStages, onCollapsedStagesChange]
   );
-  const handleExpanded = useCallback(
+  const handleExpanded = useCallback2(
     (stageValue) => {
       const next = resolvedExpanded.includes(stageValue) ? resolvedExpanded.filter((v) => v !== stageValue) : [...resolvedExpanded, stageValue];
       if (onExpandedStagesChange) onExpandedStagesChange(next);
@@ -1005,7 +1098,7 @@ var Kanban = ({
     },
     [resolvedExpanded, expandedStages, onExpandedStagesChange]
   );
-  const handleToggleSelect = useCallback(
+  const handleToggleSelect = useCallback2(
     (rowId) => {
       const next = resolvedSelection.includes(rowId) ? resolvedSelection.filter((id) => id !== rowId) : [...resolvedSelection, rowId];
       if (onSelectionChange) onSelectionChange(next);
@@ -1013,7 +1106,7 @@ var Kanban = ({
     },
     [resolvedSelection, selectedIds, onSelectionChange]
   );
-  const clearTransitionPrompt = useCallback((rowId) => {
+  const clearTransitionPrompt = useCallback2((rowId) => {
     setTransitionPrompts((prev) => {
       if (!Object.prototype.hasOwnProperty.call(prev, rowId)) return prev;
       const next = { ...prev };
@@ -1021,7 +1114,7 @@ var Kanban = ({
       return next;
     });
   }, []);
-  const commitStageChange = useCallback(
+  const commitStageChange = useCallback2(
     (row, newStage, oldStage, result) => {
       clearTransitionPrompt(row[rowIdField]);
       if (onStageChange) onStageChange(row, newStage, oldStage, result);
@@ -1040,17 +1133,14 @@ var Kanban = ({
     () => `${selectionQueryKey}::${selectionResetKey == null ? "" : toStableKey(selectionResetKey)}`,
     [selectionQueryKey, selectionResetKey]
   );
-  useEffect(() => {
-    if (!selectable || selectedIds != null) {
-      selectionResetRef.current = combinedSelectionResetKey;
-      return;
-    }
-    if (selectionResetRef.current && selectionResetRef.current !== combinedSelectionResetKey) {
-      setInternalSelection([]);
-    }
-    selectionResetRef.current = combinedSelectionResetKey;
-  }, [combinedSelectionResetKey, selectable, selectedIds]);
-  const getStageFor = useCallback(
+  const clearSelection = useCallback2(() => setInternalSelection([]), []);
+  useSelectionReset({
+    resetKey: combinedSelectionResetKey,
+    enabled: selectable,
+    isControlled: selectedIds != null,
+    clearSelection
+  });
+  const getStageFor = useCallback2(
     (row) => {
       if (typeof groupBy === "function") return groupBy(row);
       return row[groupBy];
@@ -1058,47 +1148,13 @@ var Kanban = ({
     [groupBy]
   );
   const filteredData = useMemo(() => {
-    let result = data;
-    for (const filter of filters || []) {
-      const val = resolvedFilters[filter.name];
-      if (!isFilterActive(filter, val)) continue;
-      const type = filter.type || "select";
-      if (filter.filterFn) {
-        result = result.filter((row) => filter.filterFn(row, val));
-      } else if (type === "multiselect") {
-        result = result.filter((row) => val.includes(row[filter.name]));
-      } else if (type === "dateRange") {
-        const fromTs = dateToTimestamp(val.from);
-        const toTs = val.to ? dateToTimestamp(val.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] === val);
-      }
-    }
+    let result = filterRows(data, filters, resolvedFilters);
     const searchLower = (resolvedSearch || "").toLowerCase().trim();
     if (searchEnabled && searchLower) {
-      if (fuzzySearch) {
-        const fuse = new Fuse(result, {
-          keys: searchFields,
-          threshold: 0.4,
-          distance: 100,
-          ignoreLocation: true,
-          ...fuzzyOptions
-        });
-        result = fuse.search(searchLower).map((r) => r.item);
-      } else {
-        result = result.filter(
-          (row) => searchFields.some(
-            (f) => String(row[f] || "").toLowerCase().includes(searchLower)
-          )
-        );
-      }
+      result = searchRows(result, searchLower, searchFields, {
+        fuzzy: fuzzySearch,
+        fuzzyOptions
+      });
     }
     return result;
   }, [data, resolvedSearch, resolvedFilters, filters, searchEnabled, searchFields, fuzzySearch, fuzzyOptions]);
@@ -1159,7 +1215,7 @@ var Kanban = ({
   const resolvedMaxBody = maxBodyLines || (cardDensity === "comfortable" ? 5 : 3);
   const resolvedStageControl = stageControl || (cardDensity === "comfortable" ? "select" : "menu");
   const resolvedStageControlPlacement = stageControlPlacement || (resolvedStageControl === "menu" ? "inline" : "separateRow");
-  const handleStageChangeRequest = useCallback(
+  const handleStageChangeRequest = useCallback2(
     (row, newStage, oldStage) => {
       var _a2;
       if (!newStage || newStage === oldStage) return;
@@ -1181,7 +1237,7 @@ var Kanban = ({
     },
     [canMove, commitStageChange, rowIdField, stagesByValue]
   );
-  const renderCardNode = useCallback(
+  const renderCardNode = useCallback2(
     (row, stage) => {
       var _a2;
       const rowId = row[rowIdField];
@@ -1280,10 +1336,14 @@ var Kanban = ({
     error,
     title: labels.errorTitle,
     message: typeof error === "string" ? error : labels.errorMessage
-  }) : /* @__PURE__ */ React2.createElement(Alert, { variant: "danger", title: labels.errorTitle }, typeof error === "string" ? error : labels.errorMessage) : loading && data.length === 0 ? renderLoadingState ? renderLoadingState({ label: labels.loading }) : /* @__PURE__ */ React2.createElement(LoadingSpinner, { size: "md", layout: "centered", label: labels.loading }) : filteredData.length === 0 ? renderEmptyState ? renderEmptyState({
+  }) : /* @__PURE__ */ React2.createElement(Alert, { variant: "danger", title: labels.errorTitle }, typeof error === "string" ? error : labels.errorMessage) : loading && data.length === 0 ? renderLoadingState ? renderLoadingState({ label: labels.loading }) : (
+    // Same EmptyState layout as the empty state (just the "building" image +
+    // a loading message) so loading and empty match with no layout shift.
+    /* @__PURE__ */ React2.createElement(Tile, null, /* @__PURE__ */ React2.createElement(Flex, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ React2.createElement(EmptyState, { title: labels.loading, imageName: "building", layout: "vertical" }, /* @__PURE__ */ React2.createElement(Text, null, labels.loadingMessage))))
+  ) : filteredData.length === 0 ? renderEmptyState ? renderEmptyState({
     title: labels.emptyTitle,
     message: labels.emptyMessage
-  }) : /* @__PURE__ */ React2.createElement(Tile, null, /* @__PURE__ */ React2.createElement(EmptyState, { title: labels.emptyTitle, layout: "vertical", reverseOrder: true }, /* @__PURE__ */ React2.createElement(Text, null, labels.emptyMessage))) : /* @__PURE__ */ React2.createElement(Flex, { direction: "row", gap: "sm", wrap: "nowrap" }, stages.map((stage) => {
+  }) : /* @__PURE__ */ React2.createElement(Tile, null, /* @__PURE__ */ React2.createElement(Flex, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ React2.createElement(EmptyState, { title: labels.emptyTitle, layout: "vertical" }, /* @__PURE__ */ React2.createElement(Text, null, labels.emptyMessage)))) : /* @__PURE__ */ React2.createElement(Flex, { direction: "row", gap: "sm", wrap: "nowrap" }, stages.map((stage) => {
     const stageRows = sortedBuckets[stage.value] || [];
     const meta = stageMeta == null ? void 0 : stageMeta[stage.value];
     const isExpanded = resolvedExpanded.includes(stage.value);
@@ -1312,11 +1372,12 @@ var Kanban = ({
       visibleRows.map((row) => renderCardNode(row, stage))
     ));
   }));
+  const resolvedShowClearFiltersButton = showClearFiltersButton ?? showFilterBadges;
   return /* @__PURE__ */ React2.createElement(Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ React2.createElement(
     KanbanToolbar,
     {
       showSearch: searchEnabled,
-      searchValue: resolvedSearch,
+      searchValue: searchInputValue,
       searchPlaceholder: resolvedSearchPlaceholder,
       onSearchChange: handleSearch,
       filters,
@@ -1324,7 +1385,7 @@ var Kanban = ({
       onFilterChange: handleFilter,
       filterInlineLimit,
       showFilterBadges,
-      showClearFiltersButton,
+      showClearFiltersButton: resolvedShowClearFiltersButton,
       activeChips,
       onFilterRemove: handleFilterRemove,
       sortOptions,