hs-uix 1.4.1 → 1.5.0

package/dist/index.mjs

@@ -304,7 +304,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 +317,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 +360,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 +451,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 +475,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;
@@ -974,12 +999,12 @@ var DataTable = ({
       }
     );
   };
-  return /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "xs" }, /* @__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" }, /* @__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: "end", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ React.createElement(
     SearchInput,
     {
       name: "datatable-search",
       placeholder: searchPlaceholder,
-      value: searchTerm,
+      value: internalSearchTerm,
       onChange: handleSearchChange
     }
   ), filters.slice(0, filterInlineLimit).map(renderFilterControl), filters.length > filterInlineLimit && /* @__PURE__ */ React.createElement(
@@ -3482,8 +3507,211 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     formContent
   );
 });
+
+// src/common-components/AutoTag.js
+import React3 from "react";
+import { Tag as Tag2 } from "@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 React3.createElement(
+    Tag2,
+    { variant: resolvedVariant, ...props },
+    displayValue
+  );
+};
+
+// src/common-components/AutoStatusTag.js
+import React4 from "react";
+import { StatusTag } from "@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 React4.createElement(
+    StatusTag,
+    { variant: resolvedVariant, ...props },
+    displayValue
+  );
+};
+
+// src/common-components/KeyValueList.js
+import React5 from "react";
+import { DescriptionList, DescriptionListItem, Flex as Flex3 } from "@hubspot/ui-extensions";
+
+// src/common-components/SectionHeader.js
+import React6 from "react";
+import { Flex as Flex4, Heading, Text as Text3 } from "@hubspot/ui-extensions";
 export {
+  AutoStatusTag,
+  AutoTag,
   DataTable,
   FormBuilder,
+  createStatusTagSortComparator,
+  getAutoStatusTagVariant,
+  getAutoTagVariant,
   useFormPrefill
 };

package/dist/utils.js

@@ -0,0 +1,269 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/index.js
+var utils_exports = {};
+__export(utils_exports, {
+  buildOptions: () => buildOptions,
+  createStatusTagSortComparator: () => createStatusTagSortComparator,
+  findOptionLabel: () => findOptionLabel,
+  formatCurrency: () => formatCurrency,
+  formatDate: () => formatDate,
+  formatDateTime: () => formatDateTime,
+  formatPercentage: () => formatPercentage,
+  getAutoStatusTagVariant: () => getAutoStatusTagVariant,
+  getAutoTagDisplayValue: () => getAutoTagDisplayValue,
+  getAutoTagVariant: () => getAutoTagVariant,
+  isDateTimeValueObject: () => isDateTimeValueObject,
+  isDateValueObject: () => isDateValueObject,
+  isTimeValueObject: () => isTimeValueObject,
+  sumBy: () => sumBy
+});
+module.exports = __toCommonJS(utils_exports);
+
+// src/utils/collections.js
+var sumBy = (items, keyOrFn) => (items || []).reduce((total, item) => {
+  const value = typeof keyOrFn === "function" ? keyOrFn(item) : item == null ? void 0 : item[keyOrFn];
+  return total + Number(value || 0);
+}, 0);
+
+// src/utils/formatters.js
+var DEFAULT_LOCALE = "en-US";
+var formatCurrency = (value, { locale = DEFAULT_LOCALE, currency = "USD", maximumFractionDigits = 0, ...options } = {}) => new Intl.NumberFormat(locale, {
+  style: "currency",
+  currency,
+  maximumFractionDigits,
+  ...options
+}).format(Number(value || 0));
+var formatDate = (value, { locale = DEFAULT_LOCALE, month = "short", day = "numeric", year = "numeric", ...options } = {}) => {
+  if (value == null || value === "") return "";
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  return date.toLocaleDateString(locale, {
+    month,
+    day,
+    year,
+    ...options
+  });
+};
+var formatDateTime = (value, {
+  locale = DEFAULT_LOCALE,
+  month = "short",
+  day = "numeric",
+  year = "numeric",
+  hour = "numeric",
+  minute = "2-digit",
+  ...options
+} = {}) => {
+  if (value == null || value === "") return "";
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  return date.toLocaleString(locale, {
+    month,
+    day,
+    year,
+    hour,
+    minute,
+    ...options
+  });
+};
+var formatPercentage = (value, { locale = DEFAULT_LOCALE, minimumFractionDigits = 0, maximumFractionDigits = 0, ...options } = {}) => new Intl.NumberFormat(locale, {
+  style: "percent",
+  minimumFractionDigits,
+  maximumFractionDigits,
+  ...options
+}).format(Number(value || 0));
+
+// src/utils/hubspotValues.js
+var isDateValueObject = (value) => Boolean(
+  value && typeof value === "object" && typeof value.year === "number" && typeof value.month === "number" && typeof value.date === "number"
+);
+var isTimeValueObject = (value) => Boolean(
+  value && typeof value === "object" && typeof value.hours === "number" && typeof value.minutes === "number"
+);
+var isDateTimeValueObject = (value) => Boolean(
+  value && typeof value === "object" && (value.date == null || isDateValueObject(value.date)) && (value.time == null || isTimeValueObject(value.time))
+);
+
+// src/utils/options.js
+var buildOptions = (items, { labelKey = "label", valueKey = "value", descriptionKey, mapLabel, mapValue, mapDescription } = {}) => (items || []).map((item) => {
+  const label = mapLabel ? mapLabel(item) : (item == null ? void 0 : item[labelKey]) ?? item;
+  const value = mapValue ? mapValue(item) : (item == null ? void 0 : item[valueKey]) ?? item;
+  const description = descriptionKey ? item == null ? void 0 : item[descriptionKey] : void 0;
+  const mappedDescription = mapDescription ? mapDescription(item) : description;
+  return mappedDescription == null ? { label, value } : { label, value, description: mappedDescription };
+});
+var findOptionLabel = (options, value, fallback = "") => {
+  const match = (options || []).find((option) => (option == null ? void 0 : option.value) === value);
+  return (match == null ? void 0 : match.label) ?? fallback;
+};
+
+// 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));
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  buildOptions,
+  createStatusTagSortComparator,
+  findOptionLabel,
+  formatCurrency,
+  formatDate,
+  formatDateTime,
+  formatPercentage,
+  getAutoStatusTagVariant,
+  getAutoTagDisplayValue,
+  getAutoTagVariant,
+  isDateTimeValueObject,
+  isDateValueObject,
+  isTimeValueObject,
+  sumBy
+});