@growth-operations/ui-shared 1.10.0 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-operations/ui-shared",
-  "version": "1.10.0",
+  "version": "1.12.0",
   "description": "Shared HubSpot UI-extension modules (Home, Billing) for Growth Operations apps.",
   "license": "MIT",
   "private": false,

package/src/forms/OptionSelect.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Select, LoadingSpinner, Alert, Flex, Text, Link } from "@hubspot/ui-extensions";
 import { useToken } from "../sdk/index";
 import { getForms } from "../sdk/hubspot/forms";
@@ -6,6 +6,11 @@ import { getLists } from "../sdk/hubspot/lists";
 import { getPipelines, getPipelineStages } from "../sdk/hubspot/pipeline";
 import { useStrictModeEffect } from "../lib/useStrictModeEffect";
 
+// How long to wait after the user stops typing before re-querying the
+// source. HubSpot's Select docs recommend debouncing onInput, which
+// fires on every keystroke.
+const SEARCH_DEBOUNCE_MS = 300;
+
 // OptionSelect — one shared HubSpot-options dropdown, replacing the per-app
 // FormSelector / SegmentSelector / PipelineStageSelector that every app
 // re-implemented (fetch options → map to {label,value} → <Select> → save on
@@ -71,16 +76,34 @@ export function OptionSelect({
 }) {
   const [options, setOptions] = useState([]);
   const [loading, setLoading] = useState(true);
+  const [initialLoad, setInitialLoad] = useState(true);
   const [error, setError] = useState(null);
+  // The live search term, committed only after SEARCH_DEBOUNCE_MS of no
+  // typing — this is what actually triggers a re-fetch. `Select`'s
+  // `onInput` fires on every keystroke; debouncing here is what HubSpot's
+  // docs recommend instead of updating state directly in that callback.
+  const [searchTerm, setSearchTerm] = useState(opts.query ?? "");
+  const debounceRef = useRef(null);
   const { ensureValidToken } = useToken();
 
-  // Re-fetch when the source or its key args change (e.g. pipelineId).
+  const handleInput = (v) => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => setSearchTerm(v), SEARCH_DEBOUNCE_MS);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, []);
+
+  // Re-fetch when the source, its key args, or the search term change.
   const depKey = JSON.stringify({
     source,
     pipelineId: opts.pipelineId,
     objectType: opts.objectType,
-    query: opts.query,
     objectTypeId: opts.objectTypeId,
+    searchTerm,
   });
 
   useStrictModeEffect(
@@ -90,18 +113,25 @@ export function OptionSelect({
         if (!token || !mounted.current) return;
         const loader =
           fetchOptions ?? SOURCES[source] ?? (async () => []);
-        const opted = await loader(context, token, opts);
+        const opted = await loader(context, token, { ...opts, query: searchTerm });
         if (mounted.current) setOptions(opted);
       } catch (e) {
         if (mounted.current) setError(String(e?.message ?? e));
       } finally {
-        if (mounted.current) setLoading(false);
+        if (mounted.current) {
+          setLoading(false);
+          setInitialLoad(false);
+        }
       }
     },
     [context, depKey]
   );
 
-  if (loading) {
+  // Only the first fetch replaces the whole component with a spinner.
+  // Re-fetches triggered by typing a search term keep `Select` mounted
+  // (with its current options) so the dropdown doesn't visibly close
+  // and the user doesn't lose focus/typed text mid-search.
+  if (loading && initialLoad) {
     return <LoadingSpinner size="small" label={`Loading ${label.toLowerCase()}…`} showLabel />;
   }
   if (error) {
@@ -123,6 +153,7 @@ export function OptionSelect({
         options={options}
         value={value ?? ""}
         onChange={(v) => onChange?.(v)}
+        onInput={handleInput}
       />
       {actionLinks.length > 0 && (
         <Flex direction="row" gap="small">

package/src/lib/useStrictModeEffect.js

@@ -4,9 +4,10 @@ import { useEffect, useRef } from 'react';
  * A custom hook that handles React Strict Mode's double-mount pattern for async effects.
  *
  * This hook prevents duplicate API calls in development by:
- * 1. Using a ref to track if the effect has already run
+ * 1. Using a ref to track if the effect has already run for the current dependencies
  * 2. Properly resetting state when the component unmounts during async operations
- * 3. Allowing the effect to run again when the component remounts
+ * 3. Allowing the effect to run again when the component remounts, OR when
+ *    the dependency array actually changes (e.g. a search term or selected id)
  *
  * @param {Function} effect - Async function to run. Will receive a cleanup object with:
  *   - mounted: ref to check if component is still mounted
@@ -36,11 +37,20 @@ import { useEffect, useRef } from 'react';
  */
 export function useStrictModeEffect(effect, dependencies = [], options = {}) {
   const fetchedRef = useRef(false);
+  const prevDependenciesRef = useRef(dependencies);
   const { setLoading } = options;
 
   useEffect(() => {
-    // Prevent duplicate fetches in React Strict Mode
-    if (fetchedRef.current) return;
+    // A genuine dependency change (e.g. a search term or selected
+    // pipeline) must always re-run the effect — only Strict Mode's
+    // same-render double-invocation should be suppressed. Without
+    // this, fetchedRef.current stays true forever after the first
+    // successful fetch and no dependency change ever re-fetches.
+    const dependenciesChanged = dependencies.some(
+      (dep, i) => dep !== prevDependenciesRef.current[i]
+    );
+    prevDependenciesRef.current = dependencies;
+    if (fetchedRef.current && !dependenciesChanged) return;
 
     const mounted = { current: true };
 

package/src/sdk/hubspot/lists.js

@@ -1,7 +1,9 @@
 // HubSpot list fetcher (for list-selection pickers).
 //
-// Paginates crm/v3/lists/search until all DYNAMIC lists are collected. The POST
-// body is a plain OBJECT — callHubSpotApi sends it as-is (NEVER JSON.stringify).
+// Paginates crm/v3/lists/search until all lists are collected — MANUAL
+// (static), DYNAMIC (active), and SNAPSHOT, so a picker isn't silently
+// missing hand-curated test/segment lists. The POST body is a plain OBJECT —
+// callHubSpotApi sends it as-is (NEVER JSON.stringify).
 import { buildHubSpotUrl, callHubSpotApi } from "./base";
 
 // context is accepted for signature consistency. query: optional name filter.
@@ -20,7 +22,7 @@ export async function getLists(context, token, query = "", objectTypeId = null)
       query: query,
       count: count,
       offset: offset,
-      processingTypes: ["DYNAMIC"],
+      processingTypes: ["MANUAL", "DYNAMIC", "SNAPSHOT"],
       ...(objectTypeId ? { objectTypeId } : {}),
     };