hs-uix 1.4.1 → 1.5.0

package/README.md

@@ -14,9 +14,11 @@ npm install hs-uix
 ```jsx
 import { DataTable } from "hs-uix/datatable";
 import { FormBuilder } from "hs-uix/form";
+import { AutoStatusTag, AutoTag, KeyValueList, SectionHeader } from "hs-uix/common-components";
+import { formatCurrency, formatDate } from "hs-uix/utils";
 
 // or import everything from the root
-import { DataTable, FormBuilder } from "hs-uix";
+import { DataTable, FormBuilder, AutoStatusTag, AutoTag } from "hs-uix";
 ```
 
 Requires `react` >= 18.0.0 and `@hubspot/ui-extensions` >= 0.12.0 as peer dependencies (already present in any HubSpot UI Extensions project).
@@ -40,14 +42,30 @@ A drop-in table component for HubSpot UI Extensions. Define your columns, pass y
 
 ```jsx
 import { DataTable } from "hs-uix/datatable";
+import { AutoStatusTag, AutoTag, KeyValueList, SectionHeader } from "hs-uix/common-components";
+import { formatCurrency, formatDate } from "hs-uix/utils";
 
 const COLUMNS = [
   { field: "name", label: "Company", sortable: true, renderCell: (val) => val },
-  { field: "status", label: "Status", renderCell: (val) => <StatusTag>{val}</StatusTag> },
+  { field: "status", label: "Status", renderCell: (val) => <AutoStatusTag value={val} /> },
+  { field: "segment", label: "Segment", renderCell: (val) => <AutoTag value={val} /> },
   { field: "amount", label: "Amount", sortable: true, renderCell: (val) => formatCurrency(val) },
+  { field: "closeDate", label: "Close Date", renderCell: (val) => formatDate(val) },
 ];
 
 <DataTable data={deals} columns={COLUMNS} searchFields={["name"]} pageSize={10} />
+
+<SectionHeader
+  title="Deal Summary"
+  description="A compact summary block using common components."
+/>
+
+<KeyValueList
+  items={[
+    { label: "Open deals", value: 12 },
+    { label: "Pipeline", value: formatCurrency(245000) },
+  ]}
+/>
 ```
 
 That's a searchable, sortable, paginated table with auto-sized columns in 5 lines of config.

package/common-components.d.ts

@@ -0,0 +1,55 @@
+import type { ReactNode } from "react";
+import type {
+  AutoTagOptions,
+  AutoTagVariant,
+  AutoStatusTagOptions,
+  AutoStatusTagVariant,
+} from "./utils";
+
+export interface AutoTagProps extends AutoTagOptions {
+  value?: unknown;
+  tag?: unknown;
+  children?: ReactNode;
+  variant?: AutoTagVariant;
+  onClick?: () => void;
+  onDelete?: () => void;
+  overlay?: unknown;
+  inline?: boolean;
+}
+
+export interface AutoStatusTagProps extends AutoStatusTagOptions {
+  value?: unknown;
+  status?: unknown;
+  children?: ReactNode;
+  variant?: AutoStatusTagVariant;
+  hollow?: boolean;
+  onClick?: () => void;
+  showRemoveIcon?: boolean;
+  onRemoveClick?: () => void;
+}
+
+export interface SectionHeaderProps {
+  title?: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+  children?: ReactNode;
+  gap?: string;
+  titleAs?: string;
+}
+
+export interface KeyValueListItem {
+  key?: string | number;
+  label: ReactNode;
+  value: ReactNode;
+}
+
+export interface KeyValueListProps {
+  items?: KeyValueListItem[];
+  direction?: "row" | "column";
+  gap?: string;
+}
+
+export declare function AutoTag(props: AutoTagProps): ReactNode;
+export declare function AutoStatusTag(props: AutoStatusTagProps): ReactNode;
+export declare function SectionHeader(props: SectionHeaderProps): ReactNode;
+export declare function KeyValueList(props: KeyValueListProps): ReactNode;

package/dist/common-components.js

@@ -0,0 +1,260 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/common-components/index.js
+var common_components_exports = {};
+__export(common_components_exports, {
+  AutoStatusTag: () => AutoStatusTag,
+  AutoTag: () => AutoTag,
+  KeyValueList: () => KeyValueList,
+  SectionHeader: () => SectionHeader
+});
+module.exports = __toCommonJS(common_components_exports);
+
+// src/common-components/AutoTag.js
+var import_react = __toESM(require("react"));
+var import_ui_extensions = 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;
+};
+
+// 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_react.default.createElement(
+    import_ui_extensions.Tag,
+    { variant: resolvedVariant, ...props },
+    displayValue
+  );
+};
+
+// src/common-components/AutoStatusTag.js
+var import_react2 = __toESM(require("react"));
+var import_ui_extensions2 = 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_react2.default.createElement(
+    import_ui_extensions2.StatusTag,
+    { variant: resolvedVariant, ...props },
+    displayValue
+  );
+};
+
+// src/common-components/KeyValueList.js
+var import_react3 = __toESM(require("react"));
+var import_ui_extensions3 = require("@hubspot/ui-extensions");
+var KeyValueList = ({ items = [], direction = "row", gap = "sm" }) => {
+  const rows = items.map(
+    (item, index) => import_react3.default.createElement(
+      import_ui_extensions3.DescriptionListItem,
+      {
+        key: item.key ?? item.label ?? `kv-${index}`,
+        label: item.label
+      },
+      item.value
+    )
+  );
+  return import_react3.default.createElement(
+    import_ui_extensions3.Flex,
+    { direction: "column", gap },
+    import_react3.default.createElement(import_ui_extensions3.DescriptionList, { direction }, ...rows)
+  );
+};
+
+// src/common-components/SectionHeader.js
+var import_react4 = __toESM(require("react"));
+var import_ui_extensions4 = require("@hubspot/ui-extensions");
+var SectionHeader = ({
+  title,
+  description,
+  actions,
+  children,
+  gap = "xs",
+  titleAs = "h2"
+}) => {
+  const body = [];
+  if (title != null) {
+    body.push(import_react4.default.createElement(import_ui_extensions4.Heading, { key: "title", as: titleAs }, title));
+  }
+  if (description != null) {
+    body.push(
+      import_react4.default.createElement(
+        import_ui_extensions4.Text,
+        { key: "description", variant: "microcopy" },
+        description
+      )
+    );
+  }
+  if (children != null) {
+    body.push(children);
+  }
+  const content = import_react4.default.createElement(import_ui_extensions4.Flex, { direction: "column", gap }, ...body);
+  if (actions == null) return content;
+  return import_react4.default.createElement(
+    import_ui_extensions4.Flex,
+    { direction: "row", justify: "between", align: "start", gap: "sm" },
+    content,
+    actions
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AutoStatusTag,
+  AutoTag,
+  KeyValueList,
+  SectionHeader
+});

package/dist/common-components.mjs

@@ -0,0 +1,221 @@
+// src/common-components/AutoTag.js
+import React from "react";
+import { Tag } 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;
+};
+
+// 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 React.createElement(
+    Tag,
+    { variant: resolvedVariant, ...props },
+    displayValue
+  );
+};
+
+// src/common-components/AutoStatusTag.js
+import React2 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 React2.createElement(
+    StatusTag,
+    { variant: resolvedVariant, ...props },
+    displayValue
+  );
+};
+
+// src/common-components/KeyValueList.js
+import React3 from "react";
+import { DescriptionList, DescriptionListItem, Flex } from "@hubspot/ui-extensions";
+var KeyValueList = ({ items = [], direction = "row", gap = "sm" }) => {
+  const rows = items.map(
+    (item, index) => React3.createElement(
+      DescriptionListItem,
+      {
+        key: item.key ?? item.label ?? `kv-${index}`,
+        label: item.label
+      },
+      item.value
+    )
+  );
+  return React3.createElement(
+    Flex,
+    { direction: "column", gap },
+    React3.createElement(DescriptionList, { direction }, ...rows)
+  );
+};
+
+// src/common-components/SectionHeader.js
+import React4 from "react";
+import { Flex as Flex2, Heading, Text } from "@hubspot/ui-extensions";
+var SectionHeader = ({
+  title,
+  description,
+  actions,
+  children,
+  gap = "xs",
+  titleAs = "h2"
+}) => {
+  const body = [];
+  if (title != null) {
+    body.push(React4.createElement(Heading, { key: "title", as: titleAs }, title));
+  }
+  if (description != null) {
+    body.push(
+      React4.createElement(
+        Text,
+        { key: "description", variant: "microcopy" },
+        description
+      )
+    );
+  }
+  if (children != null) {
+    body.push(children);
+  }
+  const content = React4.createElement(Flex2, { direction: "column", gap }, ...body);
+  if (actions == null) return content;
+  return React4.createElement(
+    Flex2,
+    { direction: "row", justify: "between", align: "start", gap: "sm" },
+    content,
+    actions
+  );
+};
+export {
+  AutoStatusTag,
+  AutoTag,
+  KeyValueList,
+  SectionHeader
+};

package/dist/datatable.js

@@ -309,7 +309,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) => {
@@ -320,7 +322,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),
@@ -354,15 +365,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)(() => () => {
@@ -444,10 +456,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;
@@ -455,7 +480,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;
@@ -979,12 +1004,12 @@ var DataTable = ({
       }
     );
   };
-  return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "xs" }, /* @__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(
+  return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "xs" }, /* @__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: "end", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ import_react.default.createElement(
     import_ui_extensions.SearchInput,
     {
       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(