@hubspot/ui-extensions 0.11.5 → 0.12.0

package/dist/__tests__/crm/hooks/useAssociations.spec.js

@@ -21,6 +21,16 @@ vi.mock('../../../crm/utils/fetchAssociations.ts', async (importOriginal) => {
 });
 // Get reference to the mocked function
 const mockFetchAssociations = fetchAssociations;
+// Shared test helpers
+const createAssociation = (id) => ({
+    toObjectId: id,
+    associationTypes: [],
+    properties: {},
+});
+const mockResponse = (results, hasMore = false, nextOffset = 10) => ({
+    data: { results, hasMore, nextOffset },
+    cleanup: vi.fn(),
+});
 describe('useAssociations with Pagination', () => {
     let originalError;
     beforeAll(() => {
@@ -539,4 +549,90 @@ describe('useAssociations with Pagination', () => {
             });
         });
     });
+    describe('refetch', () => {
+        it('should handle complete refetch lifecycle with loading states and data preservation', async () => {
+            const initialData = [createAssociation(1)];
+            const refetchedData = [createAssociation(2)];
+            let resolveRefetch;
+            const refetchPromise = new Promise((resolve) => {
+                resolveRefetch = resolve;
+            });
+            mockFetchAssociations
+                .mockResolvedValueOnce(mockResponse(initialData))
+                .mockImplementationOnce(() => refetchPromise);
+            const { result } = renderHook(() => useAssociations({ toObjectType: '0-1', pageLength: 10 }));
+            await waitFor(() => {
+                expect(result.current.results).toEqual(initialData);
+                expect(result.current.isLoading).toBe(false);
+                expect(result.current.isRefetching).toBe(false);
+            });
+            const refetchCall = result.current.refetch();
+            await waitFor(() => expect(result.current.isRefetching).toBe(true));
+            expect(result.current.results).toEqual(initialData);
+            resolveRefetch(mockResponse(refetchedData, true, 20));
+            await refetchCall;
+            await waitFor(() => {
+                expect(result.current.isRefetching).toBe(false);
+                expect(result.current.results).toEqual(refetchedData);
+            });
+        });
+        it('should handle errors during refetch and allow recovery', async () => {
+            const initialData = [createAssociation(1)];
+            const recoveredData = [createAssociation(2)];
+            mockFetchAssociations
+                .mockResolvedValueOnce(mockResponse(initialData))
+                .mockRejectedValueOnce(new Error('Failed to refetch associations'))
+                .mockResolvedValueOnce(mockResponse(recoveredData));
+            const { result } = renderHook(() => useAssociations({ toObjectType: '0-1', pageLength: 10 }));
+            await waitFor(() => expect(result.current.results).toEqual(initialData));
+            await result.current.refetch();
+            await waitFor(() => {
+                expect(result.current.error?.message).toBe('Failed to refetch associations');
+                expect(result.current.results).toEqual(initialData);
+            });
+            await result.current.refetch();
+            await waitFor(() => {
+                expect(result.current.error).toBeNull();
+                expect(result.current.results).toEqual(recoveredData);
+            });
+        });
+        it('should cancel in-flight refetch when called again', async () => {
+            const initialData = [createAssociation(1)];
+            const firstRefetchCleanup = vi.fn();
+            const secondRefetchCleanup = vi.fn();
+            mockFetchAssociations
+                .mockResolvedValueOnce(mockResponse(initialData))
+                .mockResolvedValueOnce({
+                ...mockResponse([createAssociation(2)], false, 20),
+                cleanup: firstRefetchCleanup,
+            })
+                .mockResolvedValueOnce({
+                ...mockResponse([createAssociation(3)], false, 30),
+                cleanup: secondRefetchCleanup,
+            });
+            const { result } = renderHook(() => useAssociations({ toObjectType: '0-1', pageLength: 10 }));
+            await waitFor(() => expect(result.current.results).toEqual(initialData));
+            await Promise.all([result.current.refetch(), result.current.refetch()]);
+            await waitFor(() => expect(result.current.results).toEqual([createAssociation(3)]));
+            expect(firstRefetchCleanup).toHaveBeenCalledTimes(1);
+            expect(secondRefetchCleanup).not.toHaveBeenCalled();
+        });
+        it('should maintain current page and pagination state during refetch', async () => {
+            mockFetchAssociations
+                .mockResolvedValueOnce(mockResponse([createAssociation(1)], true, 10))
+                .mockResolvedValueOnce(mockResponse([createAssociation(2)], true, 20))
+                .mockResolvedValueOnce(mockResponse([createAssociation(2)], true, 20));
+            const { result } = renderHook(() => useAssociations({ toObjectType: '0-1', pageLength: 10 }));
+            await waitFor(() => expect(result.current.pagination.currentPage).toBe(1));
+            result.current.pagination.nextPage();
+            await waitFor(() => expect(result.current.pagination.currentPage).toBe(2));
+            await result.current.refetch();
+            await waitFor(() => {
+                expect(result.current.pagination.currentPage).toBe(2);
+                expect(result.current.pagination.hasNextPage).toBe(true);
+                expect(result.current.pagination.hasPreviousPage).toBe(true);
+            });
+            expect(mockFetchAssociations).toHaveBeenLastCalledWith(expect.objectContaining({ offset: 10 }), expect.any(Object));
+        });
+    });
 });

package/dist/__tests__/crm/hooks/useCrmProperties.spec.js

@@ -21,7 +21,9 @@ describe('useCrmProperties', () => {
         // Suppress React act() warning coming from @testing-library/react
         originalError = console.error;
         console.error = (...args) => {
-            if (args[0]?.includes('ReactDOMTestUtils.act'))
+            if (typeof args[0] === 'string' &&
+                (args[0].includes('ReactDOMTestUtils.act') ||
+                    args[0].includes('was not wrapped in act')))
                 return;
             originalError.call(console, ...args);
         };
@@ -254,4 +256,171 @@ describe('useCrmProperties', () => {
         });
         expect(mockFetchCrmProperties).toHaveBeenCalledWith(2, expect.any(Function), {});
     });
+    describe('refetch', () => {
+        it('should successfully refetch and update properties', async () => {
+            const initialData = { firstname: 'John', lastname: 'Doe' };
+            const refetchedData = { firstname: 'Jane', lastname: 'Smith' };
+            mockFetchCrmProperties
+                .mockResolvedValueOnce({
+                data: initialData,
+                cleanup: vi.fn(),
+            })
+                .mockResolvedValueOnce({
+                data: refetchedData,
+                cleanup: vi.fn(),
+            });
+            const propertyNames = ['firstname', 'lastname'];
+            const { result } = renderHook(() => useCrmProperties(propertyNames));
+            await waitFor(() => {
+                expect(result.current.properties).toEqual(initialData);
+                expect(result.current.isLoading).toBe(false);
+                expect(result.current.isRefetching).toBe(false);
+            });
+            // Call refetch and wait for it to complete
+            await result.current.refetch();
+            // Wait for state to update with refetched data
+            await waitFor(() => {
+                expect(result.current.properties).toEqual(refetchedData);
+                expect(result.current.isRefetching).toBe(false);
+                expect(result.current.error).toBeNull();
+            });
+            expect(mockFetchCrmProperties).toHaveBeenCalledTimes(2);
+        });
+        it('should set isRefetching to true during refetch', async () => {
+            const initialData = { firstname: 'John', lastname: 'Doe' };
+            const refetchedData = { firstname: 'Jane', lastname: 'Smith' };
+            let resolveRefetch;
+            const refetchPromise = new Promise((resolve) => {
+                resolveRefetch = resolve;
+            });
+            mockFetchCrmProperties
+                .mockResolvedValueOnce({
+                data: initialData,
+                cleanup: vi.fn(),
+            })
+                .mockImplementationOnce(() => refetchPromise);
+            const propertyNames = ['firstname', 'lastname'];
+            const { result } = renderHook(() => useCrmProperties(propertyNames));
+            await waitFor(() => {
+                expect(result.current.properties).toEqual(initialData);
+                expect(result.current.isLoading).toBe(false);
+                expect(result.current.isRefetching).toBe(false);
+            });
+            // Call refetch but don't await it
+            const refetchCall = result.current.refetch();
+            // Check that isRefetching is true immediately after calling refetch
+            await waitFor(() => {
+                expect(result.current.isRefetching).toBe(true);
+            });
+            // Verify properties haven't changed yet
+            expect(result.current.properties).toEqual(initialData);
+            expect(result.current.error).toBeNull();
+            // Resolve the refetch promise
+            resolveRefetch({
+                data: refetchedData,
+                cleanup: vi.fn(),
+            });
+            // Wait for refetch to complete
+            await refetchCall;
+            // Verify isRefetching is false and properties are updated
+            await waitFor(() => {
+                expect(result.current.isRefetching).toBe(false);
+                expect(result.current.properties).toEqual(refetchedData);
+            });
+        });
+        it('should handle refetch errors correctly', async () => {
+            const initialData = { firstname: 'John', lastname: 'Doe' };
+            const errorMessage = 'Failed to refetch CRM properties';
+            mockFetchCrmProperties
+                .mockResolvedValueOnce({
+                data: initialData,
+                cleanup: vi.fn(),
+            })
+                .mockRejectedValueOnce(new Error(errorMessage));
+            const propertyNames = ['firstname', 'lastname'];
+            const { result } = renderHook(() => useCrmProperties(propertyNames));
+            await waitFor(() => {
+                expect(result.current.properties).toEqual(initialData);
+                expect(result.current.isLoading).toBe(false);
+                expect(result.current.error).toBeNull();
+            });
+            // Call refetch and wait for it to complete (will throw error)
+            await result.current.refetch();
+            // Wait for error state to update
+            await waitFor(() => {
+                expect(result.current.error).toBeInstanceOf(Error);
+                expect(result.current.error?.message).toBe(errorMessage);
+                expect(result.current.properties).toEqual(initialData);
+                expect(result.current.isRefetching).toBe(false);
+            });
+        });
+        it('should clear error on successful refetch', async () => {
+            const errorMessage = 'Failed to fetch CRM properties';
+            const refetchedData = { firstname: 'Jane', lastname: 'Smith' };
+            mockFetchCrmProperties
+                .mockRejectedValueOnce(new Error(errorMessage))
+                .mockResolvedValueOnce({
+                data: refetchedData,
+                cleanup: vi.fn(),
+            });
+            const propertyNames = ['firstname', 'lastname'];
+            const { result } = renderHook(() => useCrmProperties(propertyNames));
+            await waitFor(() => {
+                expect(result.current.error).toBeInstanceOf(Error);
+                expect(result.current.error?.message).toBe(errorMessage);
+                expect(result.current.isLoading).toBe(false);
+            });
+            // Call refetch and wait for it to complete
+            await result.current.refetch();
+            // Wait for error to clear and data to update
+            await waitFor(() => {
+                expect(result.current.error).toBeNull();
+                expect(result.current.properties).toEqual(refetchedData);
+                expect(result.current.isRefetching).toBe(false);
+            });
+        });
+        it('should handle multiple rapid refetch calls correctly', async () => {
+            const initialData = { firstname: 'John', lastname: 'Doe' };
+            const firstRefetchData = { firstname: 'First', lastname: 'Refetch' };
+            const secondRefetchData = { firstname: 'Second', lastname: 'Refetch' };
+            const initialCleanup = vi.fn();
+            const firstRefetchCleanup = vi.fn();
+            const secondRefetchCleanup = vi.fn();
+            mockFetchCrmProperties
+                .mockResolvedValueOnce({
+                data: initialData,
+                cleanup: initialCleanup,
+            })
+                .mockResolvedValueOnce({
+                data: firstRefetchData,
+                cleanup: firstRefetchCleanup,
+            })
+                .mockResolvedValueOnce({
+                data: secondRefetchData,
+                cleanup: secondRefetchCleanup,
+            });
+            const propertyNames = ['firstname', 'lastname'];
+            const { result } = renderHook(() => useCrmProperties(propertyNames));
+            // Wait for initial fetch to complete
+            await waitFor(() => {
+                expect(result.current.properties).toEqual(initialData);
+                expect(result.current.isLoading).toBe(false);
+            });
+            // Call refetch twice rapidly (concurrently) - the second should cancel the first
+            const firstRefetch = result.current.refetch();
+            const secondRefetch = result.current.refetch();
+            // Wait for both to complete
+            await Promise.all([firstRefetch, secondRefetch]);
+            // Verify the final refetch's data is in state
+            await waitFor(() => {
+                expect(result.current.properties).toEqual(secondRefetchData);
+                expect(result.current.isRefetching).toBe(false);
+                expect(result.current.error).toBeNull();
+            });
+            // Verify cancellation behavior: first refetch was cancelled and cleaned up
+            expect(firstRefetchCleanup).toHaveBeenCalledTimes(1);
+            // Second refetch's cleanup should NOT be called yet (still active subscription)
+            expect(secondRefetchCleanup).not.toHaveBeenCalled();
+        });
+    });
 });

package/dist/crm/hooks/useAssociations.d.ts

@@ -17,7 +17,9 @@ export interface UseAssociationsResult {
     results: AssociationResult[];
     error: Error | null;
     isLoading: boolean;
+    isRefetching: boolean;
     pagination: UseAssociationsPagination;
+    refetch: () => Promise<void>;
 }
 /**
  * A hook to fetch and manage associations between CRM objects with pagination support.

package/dist/crm/hooks/useAssociations.js

@@ -6,6 +6,7 @@ function createInitialState(pageSize) {
         results: [],
         error: null,
         isLoading: true,
+        isRefetching: false,
         currentPage: 1,
         pageSize,
         hasMore: false,
@@ -75,6 +76,27 @@ function associationsReducer(state, action) {
                 nextOffset: undefined,
                 offsetHistory: [],
             };
+        case 'REFETCH_START':
+            return {
+                ...state,
+                isRefetching: true,
+                error: null,
+            };
+        case 'REFETCH_SUCCESS':
+            return {
+                ...state,
+                isRefetching: false,
+                results: action.payload.results,
+                hasMore: action.payload.hasMore,
+                nextOffset: action.payload.nextOffset,
+                error: null,
+            };
+        case 'REFETCH_ERROR':
+            return {
+                ...state,
+                isRefetching: false,
+                error: action.payload,
+            };
         default:
             return state;
     }
@@ -97,6 +119,10 @@ function useAssociationsInternal(config, options = DEFAULT_OPTIONS) {
     const lastConfigKeyRef = useRef();
     const lastOptionsRef = useRef();
     const lastOptionsKeyRef = useRef();
+    // Track in-flight refetch to support cancellation
+    const refetchAbortRef = useRef(null);
+    // Track refetch cleanup function to prevent memory leaks
+    const refetchCleanupRef = useRef(null);
     const stableConfig = useMemo(() => {
         const configKey = JSON.stringify(config);
         if (configKey === lastConfigKeyRef.current) {
@@ -178,6 +204,11 @@ function useAssociationsInternal(config, options = DEFAULT_OPTIONS) {
             if (cleanup) {
                 cleanup();
             }
+            // Clean up any active refetch subscription
+            if (refetchCleanupRef.current) {
+                refetchCleanupRef.current();
+                refetchCleanupRef.current = null;
+            }
         };
     }, [
         stableConfig,
@@ -186,12 +217,68 @@ function useAssociationsInternal(config, options = DEFAULT_OPTIONS) {
         state.currentOffset,
         pageSize,
     ]);
+    const refetch = useCallback(async () => {
+        if (refetchAbortRef.current) {
+            refetchAbortRef.current.cancelled = true;
+        }
+        if (refetchCleanupRef.current) {
+            refetchCleanupRef.current();
+            refetchCleanupRef.current = null;
+        }
+        const abortSignal = { cancelled: false };
+        refetchAbortRef.current = abortSignal;
+        try {
+            dispatch({ type: 'REFETCH_START' });
+            // Build request using current offset token to refetch current page
+            const request = {
+                toObjectType: stableConfig?.toObjectType,
+                properties: stableConfig?.properties,
+                pageLength: pageSize,
+                offset: state.currentOffset,
+            };
+            const result = await fetchAssociations(request, {
+                propertiesToFormat: stableOptions.propertiesToFormat,
+                formattingOptions: stableOptions.formattingOptions,
+            });
+            if (!abortSignal.cancelled) {
+                dispatch({
+                    type: 'REFETCH_SUCCESS',
+                    payload: {
+                        results: result.data.results,
+                        hasMore: result.data.hasMore,
+                        nextOffset: result.data.nextOffset,
+                    },
+                });
+                refetchCleanupRef.current = result.cleanup;
+            }
+            else {
+                if (result.cleanup) {
+                    result.cleanup();
+                }
+            }
+        }
+        catch (err) {
+            if (!abortSignal.cancelled) {
+                const errorData = err instanceof Error
+                    ? err
+                    : new Error('Failed to refetch associations');
+                dispatch({ type: 'REFETCH_ERROR', payload: errorData });
+            }
+        }
+        finally {
+            if (refetchAbortRef.current === abortSignal) {
+                refetchAbortRef.current = null;
+            }
+        }
+    }, [stableConfig, stableOptions, state.currentOffset, pageSize]);
     // Calculate pagination flags
     const paginationFlags = calculatePaginationFlags(state.currentPage, state.hasMore);
     return {
         results: state.results,
         error: state.error,
         isLoading: state.isLoading,
+        isRefetching: state.isRefetching,
+        refetch,
         pagination: {
             hasNextPage: paginationFlags.hasNextPage,
             hasPreviousPage: paginationFlags.hasPreviousPage,

package/dist/crm/hooks/useCrmProperties.d.ts

@@ -3,10 +3,14 @@ export interface CrmPropertiesState {
     properties: Record<string, string | null>;
     error: Error | null;
     isLoading: boolean;
+    isRefetching: boolean;
+}
+export interface UseCrmPropertiesResult extends CrmPropertiesState {
+    refetch: () => Promise<void>;
 }
 /**
  * A hook for using and managing CRM properties.
  */
-declare function useCrmPropertiesInternal(propertyNames: string[], options?: FetchCrmPropertiesOptions): CrmPropertiesState;
+declare function useCrmPropertiesInternal(propertyNames: string[], options?: FetchCrmPropertiesOptions): UseCrmPropertiesResult;
 export declare const useCrmProperties: typeof useCrmPropertiesInternal;
 export {};

package/dist/crm/hooks/useCrmProperties.js

@@ -1,10 +1,11 @@
-import { useEffect, useReducer, useMemo, useRef } from 'react';
+import { useEffect, useReducer, useMemo, useRef, useCallback } from 'react';
 import { fetchCrmProperties, } from "../utils/fetchCrmProperties.js";
 import { createMockAwareHook } from "../../internal/hook-utils.js";
 const initialState = {
     properties: {},
     error: null,
     isLoading: true,
+    isRefetching: false,
 };
 function crmPropertiesReducer(state, action) {
     switch (action.type) {
@@ -28,6 +29,25 @@ function crmPropertiesReducer(state, action) {
                 error: action.payload,
                 properties: {},
             };
+        case 'REFETCH_START':
+            return {
+                ...state,
+                isRefetching: true,
+                error: null,
+            };
+        case 'REFETCH_SUCCESS':
+            return {
+                ...state,
+                isRefetching: false,
+                properties: action.payload,
+                error: null,
+            };
+        case 'REFETCH_ERROR':
+            return {
+                ...state,
+                isRefetching: false,
+                error: action.payload,
+            };
         default:
             return state;
     }
@@ -49,6 +69,10 @@ function useCrmPropertiesInternal(propertyNames, options = DEFAULT_OPTIONS) {
     const lastPropertyNamesKeyRef = useRef();
     const lastOptionsRef = useRef();
     const lastOptionsKeyRef = useRef();
+    // Track in-flight refetch to support cancellation
+    const refetchAbortRef = useRef(null);
+    // Track refetch cleanup function to prevent memory leaks
+    const refetchCleanupRef = useRef(null);
     const stablePropertyNames = useMemo(() => {
         if (!Array.isArray(propertyNames)) {
             return propertyNames;
@@ -104,8 +128,63 @@ function useCrmPropertiesInternal(propertyNames, options = DEFAULT_OPTIONS) {
             if (cleanup) {
                 cleanup();
             }
+            // Clean up any active refetch subscription
+            if (refetchCleanupRef.current) {
+                refetchCleanupRef.current();
+                refetchCleanupRef.current = null;
+            }
         };
     }, [stablePropertyNames, stableOptions]);
-    return state;
+    const refetch = useCallback(async () => {
+        // Cancel any in-flight refetch
+        if (refetchAbortRef.current) {
+            refetchAbortRef.current.cancelled = true;
+        }
+        // Clean up old refetch subscription to prevent memory leaks
+        if (refetchCleanupRef.current) {
+            refetchCleanupRef.current();
+            refetchCleanupRef.current = null;
+        }
+        // Create new abort signal for this refetch
+        const abortSignal = { cancelled: false };
+        refetchAbortRef.current = abortSignal;
+        try {
+            dispatch({ type: 'REFETCH_START' });
+            const result = await fetchCrmProperties(stablePropertyNames, (data) => {
+                if (!abortSignal.cancelled) {
+                    dispatch({ type: 'REFETCH_SUCCESS', payload: data });
+                }
+            }, stableOptions);
+            if (!abortSignal.cancelled) {
+                dispatch({ type: 'REFETCH_SUCCESS', payload: result.data });
+                // Store cleanup for next refetch or unmount
+                refetchCleanupRef.current = result.cleanup;
+            }
+            else {
+                // If cancelled, clean up immediately
+                if (result.cleanup) {
+                    result.cleanup();
+                }
+            }
+        }
+        catch (err) {
+            if (!abortSignal.cancelled) {
+                const errorData = err instanceof Error
+                    ? err
+                    : new Error('Failed to refetch CRM properties');
+                dispatch({ type: 'REFETCH_ERROR', payload: errorData });
+            }
+        }
+        finally {
+            // Clear the abort ref if this is still the current refetch
+            if (refetchAbortRef.current === abortSignal) {
+                refetchAbortRef.current = null;
+            }
+        }
+    }, [stablePropertyNames, stableOptions]);
+    return {
+        ...state,
+        refetch,
+    };
 }
 export const useCrmProperties = createMockAwareHook('useCrmProperties', useCrmPropertiesInternal);

package/dist/hs-internal/__tests__/createRemoteComponentInternal.spec.d.ts

@@ -0,0 +1 @@
+export {};