hs-uix 1.4.1 → 1.5.1

package/dist/datatable.mjs

@@ -30,7 +30,8 @@ import {
   Text,
   TextArea,
   TimeInput,
-  Toggle
+  Toggle,
+  Tooltip
 } from "@hubspot/ui-extensions";
 var formatDateChip = (dateObj) => {
   if (!dateObj) return "";
@@ -304,7 +305,9 @@ var DataTable = ({
   const initialSortState = useMemo(() => {
     return normalizeSortState(columns, defaultSort);
   }, [columns, defaultSort]);
-  const [internalSearchTerm, setInternalSearchTerm] = useState("");
+  const [internalSearchTerm, setInternalSearchTerm] = useState(
+    () => serverSide && searchValue != null ? searchValue : ""
+  );
   const [internalFilterValues, setInternalFilterValues] = useState(() => {
     const init = {};
     filters.forEach((f) => {
@@ -315,7 +318,16 @@ var DataTable = ({
   const [internalSortState, setInternalSortState] = useState(initialSortState);
   const [currentPage, setCurrentPage] = useState(1);
   const [showMoreFilters, setShowMoreFilters] = useState(false);
+  const lastAppliedSearchRef = useRef(
+    serverSide && searchValue != null ? searchValue : ""
+  );
   const searchTerm = serverSide && searchValue != null ? searchValue : internalSearchTerm;
+  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 = useMemo(
     () => normalizeSortState(columns, externalSort),
@@ -349,15 +361,16 @@ var DataTable = ({
   const handleSearchChange = 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(() => {
-        fireSearchCallback(term);
-        fireParamsChange({ search: term, page: resetPageOnChange ? 1 : void 0 });
-      }, searchDebounce);
+      debounceRef.current = setTimeout(dispatch, searchDebounce);
     } else {
-      fireSearchCallback(term);
-      fireParamsChange({ search: term, page: resetPageOnChange ? 1 : void 0 });
+      dispatch();
     }
   }, [searchDebounce, fireSearchCallback, fireParamsChange, resetPage, resetPageOnChange]);
   useEffect(() => () => {
@@ -439,10 +452,23 @@ var DataTable = ({
     if (serverSide) return filteredData;
     const activeField = Object.keys(sortState).find((k) => sortState[k] !== "none");
     if (!activeField) return filteredData;
+    const activeCol = columns.find((c) => c.field === activeField);
+    const sortOrder = Array.isArray(activeCol == null ? void 0 : activeCol.sortOrder) ? activeCol.sortOrder : null;
+    const sortOrderIndex = (val) => {
+      const idx = sortOrder.indexOf(val);
+      return idx === -1 ? sortOrder.length : idx;
+    };
     return [...filteredData].sort((a, b) => {
       const dir = sortState[activeField] === "ascending" ? 1 : -1;
       const aVal = a[activeField];
       const bVal = b[activeField];
+      if (typeof (activeCol == null ? void 0 : activeCol.sortComparator) === "function") {
+        return dir * activeCol.sortComparator(aVal, bVal, a, b);
+      }
+      if (sortOrder) {
+        const diff = sortOrderIndex(aVal) - sortOrderIndex(bVal);
+        if (diff !== 0) return dir * diff;
+      }
       if (aVal == null && bVal == null) return 0;
       if (aVal == null) return 1;
       if (bVal == null) return -1;
@@ -450,7 +476,7 @@ var DataTable = ({
       if (aVal > bVal) return dir;
       return 0;
     });
-  }, [filteredData, sortState, serverSide]);
+  }, [filteredData, sortState, serverSide, columns]);
   const groupedData = useMemo(() => {
     if (!groupBy) return null;
     const source = serverSide ? data : sortedData;
@@ -979,7 +1005,7 @@ var DataTable = ({
     {
       name: "datatable-search",
       placeholder: searchPlaceholder,
-      value: searchTerm,
+      value: internalSearchTerm,
       onChange: handleSearchChange
     }
   ), filters.slice(0, filterInlineLimit).map(renderFilterControl), filters.length > filterInlineLimit && /* @__PURE__ */ React.createElement(
@@ -992,7 +1018,7 @@ var DataTable = ({
     /* @__PURE__ */ React.createElement(Icon, { name: "filter", size: "sm" }),
     " ",
     resolvedFiltersButtonLabel
-  )), showMoreFilters && filters.length > filterInlineLimit && /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "end", 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 || 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(
     Button,
     {
       variant: "transparent",
@@ -1056,7 +1082,7 @@ var DataTable = ({
           sortDirection: col.sortable ? sortState[col.field] || "none" : "never",
           onSortChange: col.sortable ? () => handleSortChange(col.field) : void 0
         },
-        col.label
+        col.description ? /* @__PURE__ */ React.createElement(React.Fragment, null, col.label, "\xA0", /* @__PURE__ */ React.createElement(Link, { inline: true, variant: "dark", overlay: /* @__PURE__ */ React.createElement(Tooltip, null, col.description) }, /* @__PURE__ */ React.createElement(Icon, { name: "info", screenReaderText: typeof col.description === "string" ? col.description : void 0 }))) : col.label
       );
     }), showRowActionsColumn && /* @__PURE__ */ React.createElement(TableHeader, { width: "min" }))),
     /* @__PURE__ */ React.createElement(TableBody, null, displayRows.map(

package/dist/index.js

@@ -29,8 +29,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.js
 var src_exports = {};
 __export(src_exports, {
+  AutoStatusTag: () => AutoStatusTag,
+  AutoTag: () => AutoTag,
   DataTable: () => DataTable,
   FormBuilder: () => FormBuilder,
+  createStatusTagSortComparator: () => createStatusTagSortComparator,
+  getAutoStatusTagVariant: () => getAutoStatusTagVariant,
+  getAutoTagVariant: () => getAutoTagVariant,
   useFormPrefill: () => useFormPrefill
 });
 module.exports = __toCommonJS(src_exports);
@@ -311,7 +316,9 @@ var DataTable = ({
   const initialSortState = (0, import_react.useMemo)(() => {
     return normalizeSortState(columns, defaultSort);
   }, [columns, defaultSort]);
-  const [internalSearchTerm, setInternalSearchTerm] = (0, import_react.useState)("");
+  const [internalSearchTerm, setInternalSearchTerm] = (0, import_react.useState)(
+    () => serverSide && searchValue != null ? searchValue : ""
+  );
   const [internalFilterValues, setInternalFilterValues] = (0, import_react.useState)(() => {
     const init = {};
     filters.forEach((f) => {
@@ -322,7 +329,16 @@ var DataTable = ({
   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)(
+    serverSide && searchValue != null ? searchValue : ""
+  );
   const searchTerm = serverSide && searchValue != null ? searchValue : internalSearchTerm;
+  (0, import_react.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)(
     () => normalizeSortState(columns, externalSort),
@@ -356,15 +372,16 @@ var DataTable = ({
   const handleSearchChange = (0, import_react.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(() => {
-        fireSearchCallback(term);
-        fireParamsChange({ search: term, page: resetPageOnChange ? 1 : void 0 });
-      }, searchDebounce);
+      debounceRef.current = setTimeout(dispatch, searchDebounce);
     } else {
-      fireSearchCallback(term);
-      fireParamsChange({ search: term, page: resetPageOnChange ? 1 : void 0 });
+      dispatch();
     }
   }, [searchDebounce, fireSearchCallback, fireParamsChange, resetPage, resetPageOnChange]);
   (0, import_react.useEffect)(() => () => {
@@ -446,10 +463,23 @@ var DataTable = ({
     if (serverSide) return filteredData;
     const activeField = Object.keys(sortState).find((k) => sortState[k] !== "none");
     if (!activeField) return filteredData;
+    const activeCol = columns.find((c) => c.field === activeField);
+    const sortOrder = Array.isArray(activeCol == null ? void 0 : activeCol.sortOrder) ? activeCol.sortOrder : null;
+    const sortOrderIndex = (val) => {
+      const idx = sortOrder.indexOf(val);
+      return idx === -1 ? sortOrder.length : idx;
+    };
     return [...filteredData].sort((a, b) => {
       const dir = sortState[activeField] === "ascending" ? 1 : -1;
       const aVal = a[activeField];
       const bVal = b[activeField];
+      if (typeof (activeCol == null ? void 0 : activeCol.sortComparator) === "function") {
+        return dir * activeCol.sortComparator(aVal, bVal, a, b);
+      }
+      if (sortOrder) {
+        const diff = sortOrderIndex(aVal) - sortOrderIndex(bVal);
+        if (diff !== 0) return dir * diff;
+      }
       if (aVal == null && bVal == null) return 0;
       if (aVal == null) return 1;
       if (bVal == null) return -1;
@@ -457,7 +487,7 @@ var DataTable = ({
       if (aVal > bVal) return dir;
       return 0;
     });
-  }, [filteredData, sortState, serverSide]);
+  }, [filteredData, sortState, serverSide, columns]);
   const groupedData = (0, import_react.useMemo)(() => {
     if (!groupBy) return null;
     const source = serverSide ? data : sortedData;
@@ -986,7 +1016,7 @@ var DataTable = ({
     {
       name: "datatable-search",
       placeholder: searchPlaceholder,
-      value: searchTerm,
+      value: internalSearchTerm,
       onChange: handleSearchChange
     }
   ), filters.slice(0, filterInlineLimit).map(renderFilterControl), filters.length > filterInlineLimit && /* @__PURE__ */ import_react.default.createElement(
@@ -999,7 +1029,7 @@ var DataTable = ({
     /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Icon, { name: "filter", size: "sm" }),
     " ",
     resolvedFiltersButtonLabel
-  )), showMoreFilters && filters.length > filterInlineLimit && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "end", 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(
+  )), 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,
     {
       variant: "transparent",
@@ -1063,7 +1093,7 @@ var DataTable = ({
           sortDirection: col.sortable ? sortState[col.field] || "none" : "never",
           onSortChange: col.sortable ? () => handleSortChange(col.field) : void 0
         },
-        col.label
+        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
       );
     }), showRowActionsColumn && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.TableHeader, { width: "min" }))),
     /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.TableBody, null, displayRows.map(
@@ -3449,9 +3479,212 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     formContent
   );
 });
+
+// src/common-components/AutoTag.js
+var import_react3 = __toESM(require("react"));
+var import_ui_extensions3 = require("@hubspot/ui-extensions");
+
+// src/utils/tagVariants.js
+var DEFAULT_VARIANT = "default";
+var DANGER_VARIANT = "danger";
+var ERROR_VARIANT = "error";
+var SUCCESS_MATCHERS = [
+  "active",
+  "success",
+  "succeeded",
+  "complete",
+  "completed",
+  "approved",
+  "won",
+  "healthy",
+  "enabled",
+  "connected",
+  "paid",
+  "live",
+  "published",
+  "available",
+  "synced",
+  "resolved"
+];
+var WARNING_MATCHERS = [
+  "warning",
+  "at risk",
+  "risky",
+  "pending",
+  "paused",
+  "pause",
+  "on hold",
+  "hold",
+  "review",
+  "expiring",
+  "trial",
+  "in progress",
+  "awaiting",
+  "scheduled"
+];
+var DANGER_MATCHERS = [
+  "danger",
+  "error",
+  "failed",
+  "failure",
+  "inactive",
+  "disabled",
+  "blocked",
+  "cancelled",
+  "canceled",
+  "rejected",
+  "denied",
+  "churned",
+  "lost",
+  "overdue",
+  "expired",
+  "offline",
+  "deleted",
+  "archived",
+  "unpaid"
+];
+var INFO_MATCHERS = [
+  "info",
+  "new",
+  "queued",
+  "processing",
+  "progress",
+  "upcoming",
+  "draft",
+  "open"
+];
+var normalizeTagValue = (value) => {
+  if (value == null) return "";
+  if (typeof value === "boolean") return value ? "true" : "false";
+  return String(value).trim().toLowerCase().replace(/[_-]+/g, " ").replace(/\s+/g, " ");
+};
+var matchesAny = (value, matchers) => matchers.some((matcher) => {
+  if (value === matcher) return true;
+  return ` ${value} `.includes(` ${matcher} `);
+});
+var getSemanticVariant = (value, options = {}) => {
+  const normalized = normalizeTagValue(value);
+  const fallback = options.fallback || DEFAULT_VARIANT;
+  if (!normalized) return fallback;
+  if (options.overrides) {
+    const overrideKey = Object.keys(options.overrides).find(
+      (key) => normalizeTagValue(key) === normalized
+    );
+    if (overrideKey) return options.overrides[overrideKey];
+  }
+  if (normalized === "true") return "success";
+  if (normalized === "false") return fallback;
+  if (matchesAny(normalized, SUCCESS_MATCHERS)) return "success";
+  if (matchesAny(normalized, DANGER_MATCHERS)) return DANGER_VARIANT;
+  if (matchesAny(normalized, WARNING_MATCHERS)) return "warning";
+  if (matchesAny(normalized, INFO_MATCHERS)) return "info";
+  return fallback;
+};
+var getAutoTagVariant = (value, options = {}) => {
+  const semanticVariant = getSemanticVariant(value, options);
+  return semanticVariant === DANGER_VARIANT ? ERROR_VARIANT : semanticVariant;
+};
+var getAutoStatusTagVariant = (value, options = {}) => getSemanticVariant(value, options);
+var getAutoTagDisplayValue = (value) => {
+  if (typeof value === "boolean") return value ? "True" : "False";
+  return value;
+};
+var DEFAULT_STATUS_TAG_COLOR_ORDER = [
+  "success",
+  "warning",
+  "danger",
+  "error",
+  "info",
+  "default"
+];
+var createStatusTagSortComparator = (options = {}) => {
+  const {
+    variantOrder = DEFAULT_STATUS_TAG_COLOR_ORDER,
+    overrides,
+    fallback,
+    getLabel
+  } = options;
+  const variantIndex = (variant) => {
+    const idx = variantOrder.indexOf(variant);
+    return idx === -1 ? variantOrder.length : idx;
+  };
+  const labelOf = (value) => {
+    if (getLabel) return String(getLabel(value) ?? "");
+    if (value == null) return "";
+    return String(getAutoTagDisplayValue(value) ?? "");
+  };
+  return (aVal, bVal) => {
+    const aVariant = getSemanticVariant(aVal, { overrides, fallback });
+    const bVariant = getSemanticVariant(bVal, { overrides, fallback });
+    const diff = variantIndex(aVariant) - variantIndex(bVariant);
+    if (diff !== 0) return diff;
+    return labelOf(aVal).localeCompare(labelOf(bVal));
+  };
+};
+
+// src/common-components/AutoTag.js
+var AutoTag = ({
+  value,
+  tag,
+  children,
+  variant,
+  overrides,
+  fallback,
+  ...props
+}) => {
+  const resolvedValue = value ?? tag ?? children;
+  const displayValue = children ?? getAutoTagDisplayValue(resolvedValue);
+  const resolvedVariant = variant || getAutoTagVariant(resolvedValue, {
+    overrides,
+    fallback
+  });
+  return import_react3.default.createElement(
+    import_ui_extensions3.Tag,
+    { variant: resolvedVariant, ...props },
+    displayValue
+  );
+};
+
+// src/common-components/AutoStatusTag.js
+var import_react4 = __toESM(require("react"));
+var import_ui_extensions4 = require("@hubspot/ui-extensions");
+var AutoStatusTag = ({
+  value,
+  status,
+  children,
+  variant,
+  overrides,
+  fallback,
+  ...props
+}) => {
+  const resolvedValue = value ?? status ?? children;
+  const displayValue = children ?? getAutoTagDisplayValue(resolvedValue);
+  const resolvedVariant = variant || getAutoStatusTagVariant(resolvedValue, {
+    overrides,
+    fallback
+  });
+  return import_react4.default.createElement(
+    import_ui_extensions4.StatusTag,
+    { variant: resolvedVariant, ...props },
+    displayValue
+  );
+};
+
+// src/common-components/KeyValueList.js
+var import_react5 = __toESM(require("react"));
+var import_ui_extensions5 = require("@hubspot/ui-extensions");
+
+// src/common-components/SectionHeader.js
+var import_react6 = __toESM(require("react"));
+var import_ui_extensions6 = require("@hubspot/ui-extensions");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AutoStatusTag,
+  AutoTag,
   DataTable,
   FormBuilder,
+  createStatusTagSortComparator,
+  getAutoStatusTagVariant,
+  getAutoTagVariant,
   useFormPrefill
 });