@hubspot/ui-extensions 0.9.4 → 0.9.5

package/dist/__tests__/experimental/crm/fetchAssociations.spec.js

@@ -8,7 +8,7 @@ Object.defineProperty(global, 'self', {
     value: mockSelf,
     writable: true,
 });
-import { fetchAssociations } from '../../../experimental/crm/fetchAssociations';
+import { fetchAssociations, pageToOffset, offsetToPage, calculatePaginationFlags, } from '../../../experimental/crm/fetchAssociations';
 describe('fetchAssociations', () => {
     // Helper functions
     const createMockResponse = (data, overrides = {}) => ({
@@ -393,4 +393,50 @@ describe('fetchAssociations', () => {
             await expect(fetchAssociations(request, options)).rejects.toThrow('Invalid response format');
         });
     });
+    describe('pagination utilities', () => {
+        describe('pageToOffset', () => {
+            it('should convert page numbers to offsets', () => {
+                expect(pageToOffset(1, 10)).toBe(0);
+                expect(pageToOffset(3, 10)).toBe(20);
+                expect(pageToOffset(2, 25)).toBe(25);
+            });
+            it('should always return 0 for page 1', () => {
+                expect(pageToOffset(1, 10)).toBe(0);
+                expect(pageToOffset(1, 50)).toBe(0);
+            });
+        });
+        describe('offsetToPage', () => {
+            it('should convert offsets to page numbers', () => {
+                expect(offsetToPage(0, 10)).toBe(1);
+                expect(offsetToPage(20, 10)).toBe(3);
+                expect(offsetToPage(15, 10)).toBe(2); // partial page
+            });
+            it('should always return 1 for offset 0', () => {
+                expect(offsetToPage(0, 10)).toBe(1);
+                expect(offsetToPage(0, 25)).toBe(1);
+            });
+        });
+        describe('calculatePaginationFlags', () => {
+            it('should calculate pagination flags correctly', () => {
+                // Page 1 scenarios
+                expect(calculatePaginationFlags(1, true)).toEqual({
+                    hasNextPage: true,
+                    hasPreviousPage: false,
+                });
+                expect(calculatePaginationFlags(1, false)).toEqual({
+                    hasNextPage: false,
+                    hasPreviousPage: false,
+                });
+                // Page 2+ scenarios
+                expect(calculatePaginationFlags(2, true)).toEqual({
+                    hasNextPage: true,
+                    hasPreviousPage: true,
+                });
+                expect(calculatePaginationFlags(2, false)).toEqual({
+                    hasNextPage: false,
+                    hasPreviousPage: true,
+                });
+            });
+        });
+    });
 });

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

@@ -1,5 +1,6 @@
 import { renderHook, waitFor } from '@testing-library/react';
 import { useAssociations } from '../../../experimental/hooks/useAssociations';
+import { fetchAssociations } from '../../../experimental/crm/fetchAssociations';
 // Mock the logger module
 jest.mock('../../../logger', () => ({
     logger: {
@@ -9,18 +10,22 @@ jest.mock('../../../logger', () => ({
         error: jest.fn(),
     },
 }));
-// Mock the fetchAssociations module
-jest.mock('../../../experimental/crm/fetchAssociations');
-const mockFetchAssociations = jest.fn();
-import * as fetchAssociationsModule from '../../../experimental/crm/fetchAssociations';
-fetchAssociationsModule.fetchAssociations = mockFetchAssociations;
-describe('useAssociations', () => {
+// Mock the fetchAssociations function, keep utility functions
+jest.mock('../../../experimental/crm/fetchAssociations', () => ({
+    ...jest.requireActual('../../../experimental/crm/fetchAssociations'),
+    fetchAssociations: jest.fn(),
+}));
+// Get reference to the mocked function
+const mockFetchAssociations = fetchAssociations;
+describe('useAssociations with Pagination', () => {
     let originalError;
     beforeAll(() => {
-        // Suppress React act() warning coming from @testing-library/react
+        // Suppress React act() warnings 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);
         };
@@ -33,24 +38,50 @@ describe('useAssociations', () => {
         console.error = originalError;
     });
     describe('initial state', () => {
-        it('should return the initial values for results, error, isLoading, hasMore, and nextOffset', async () => {
+        it('should initialize with proper pagination state', async () => {
+            mockFetchAssociations.mockResolvedValue({
+                data: {
+                    results: [],
+                    hasMore: false,
+                    nextOffset: 0,
+                },
+                cleanup: jest.fn(),
+            });
             const { result } = renderHook(() => useAssociations({
                 toObjectType: '0-1',
                 properties: ['firstname', 'lastname'],
-                pageLength: 25,
-                offset: 0,
+                pageLength: 10,
             }));
             await waitFor(() => {
                 expect(result.current.results).toEqual([]);
                 expect(result.current.error).toBeNull();
-                expect(result.current.isLoading).toBe(true);
-                expect(result.current.hasMore).toBe(false);
-                expect(result.current.nextOffset).toBe(0);
+                expect(result.current.isLoading).toBe(false);
+                expect(result.current.pagination.currentPage).toBe(1);
+                expect(result.current.pagination.pageSize).toBe(10);
+                expect(result.current.pagination.hasNextPage).toBe(false);
+                expect(result.current.pagination.hasPreviousPage).toBe(false);
+            });
+        });
+        it('should use default page size when not specified', async () => {
+            mockFetchAssociations.mockResolvedValue({
+                data: {
+                    results: [],
+                    hasMore: false,
+                    nextOffset: 0,
+                },
+                cleanup: jest.fn(),
+            });
+            const { result } = renderHook(() => useAssociations({
+                toObjectType: '0-1',
+                properties: ['firstname'],
+            }));
+            await waitFor(() => {
+                expect(result.current.pagination.pageSize).toBe(10); // DEFAULT_PAGE_SIZE
             });
         });
     });
-    describe('successful data fetching', () => {
-        it('should successfully fetch and return associations', async () => {
+    describe('data fetching', () => {
+        it('should successfully fetch and return associations with pagination info', async () => {
             mockFetchAssociations.mockResolvedValue({
                 data: {
                     results: [
@@ -64,57 +95,31 @@ describe('useAssociations', () => {
                                 lastname: 'Doe',
                             },
                         },
-                        {
-                            toObjectId: 1002,
-                            associationTypes: [
-                                { category: 'USER_DEFINED', typeId: 100, label: 'Custom' },
-                            ],
-                            properties: {
-                                firstname: 'Jane',
-                                lastname: 'Smith',
-                            },
-                        },
                     ],
                     hasMore: true,
-                    nextOffset: 25,
+                    nextOffset: 10,
                 },
                 cleanup: jest.fn(),
             });
-            const request = {
+            const { result } = renderHook(() => useAssociations({
                 toObjectType: '0-1',
                 properties: ['firstname', 'lastname'],
-                pageLength: 25,
-                offset: 0,
-            };
-            const { result } = renderHook(() => useAssociations(request));
+                pageLength: 10,
+            }));
             await waitFor(() => {
-                expect(result.current.results).toEqual([
-                    {
-                        toObjectId: 1001,
-                        associationTypes: [
-                            { category: 'HUBSPOT_DEFINED', typeId: 1, label: 'Primary' },
-                        ],
-                        properties: {
-                            firstname: 'John',
-                            lastname: 'Doe',
-                        },
-                    },
-                    {
-                        toObjectId: 1002,
-                        associationTypes: [
-                            { category: 'USER_DEFINED', typeId: 100, label: 'Custom' },
-                        ],
-                        properties: {
-                            firstname: 'Jane',
-                            lastname: 'Smith',
-                        },
-                    },
-                ]);
-                expect(result.current.error).toBeNull();
+                expect(result.current.results).toHaveLength(1);
+                expect(result.current.results[0].toObjectId).toBe(1001);
+                expect(result.current.pagination.hasNextPage).toBe(true);
+                expect(result.current.pagination.hasPreviousPage).toBe(false);
+                expect(result.current.pagination.currentPage).toBe(1);
                 expect(result.current.isLoading).toBe(false);
-                expect(result.current.hasMore).toBe(true);
-                expect(result.current.nextOffset).toBe(25);
             });
+            expect(mockFetchAssociations).toHaveBeenCalledWith(expect.objectContaining({
+                toObjectType: '0-1',
+                properties: ['firstname', 'lastname'],
+                pageLength: 10,
+                offset: 0,
+            }), expect.any(Object));
         });
         it('should handle empty results correctly', async () => {
             mockFetchAssociations.mockResolvedValue({
@@ -125,136 +130,186 @@ describe('useAssociations', () => {
                 },
                 cleanup: jest.fn(),
             });
-            const request = {
+            const { result } = renderHook(() => useAssociations({
                 toObjectType: '0-1',
                 properties: ['firstname'],
-                pageLength: 25,
-                offset: 0,
-            };
-            const { result } = renderHook(() => useAssociations(request));
+                pageLength: 5,
+            }));
             await waitFor(() => {
                 expect(result.current.results).toEqual([]);
-                expect(result.current.hasMore).toBe(false);
-                expect(result.current.nextOffset).toBe(0);
+                expect(result.current.pagination.hasNextPage).toBe(false);
+                expect(result.current.pagination.hasPreviousPage).toBe(false);
                 expect(result.current.isLoading).toBe(false);
                 expect(result.current.error).toBeNull();
             });
         });
-        it('should handle different object types correctly', async () => {
-            mockFetchAssociations.mockResolvedValue({
+    });
+    describe('pagination actions', () => {
+        it('should navigate to next page correctly', async () => {
+            // First page response
+            mockFetchAssociations.mockResolvedValueOnce({
                 data: {
-                    results: [
-                        {
-                            toObjectId: 2001,
-                            associationTypes: [
-                                {
-                                    category: 'HUBSPOT_DEFINED',
-                                    typeId: 2,
-                                    label: 'Company Primary',
-                                },
-                            ],
-                            properties: {
-                                name: 'Test Company',
-                            },
-                        },
-                    ],
+                    results: [{ toObjectId: 1, associationTypes: [], properties: {} }],
+                    hasMore: true,
+                    nextOffset: 10,
+                },
+                cleanup: jest.fn(),
+            });
+            // Second page response
+            mockFetchAssociations.mockResolvedValueOnce({
+                data: {
+                    results: [{ toObjectId: 2, associationTypes: [], properties: {} }],
                     hasMore: false,
-                    nextOffset: 25,
+                    nextOffset: 20,
                 },
                 cleanup: jest.fn(),
             });
-            const request = {
-                toObjectType: '0-2',
-                properties: ['name'],
-                pageLength: 25,
-                offset: 0,
-            };
-            const { result } = renderHook(() => useAssociations(request));
+            const { result } = renderHook(() => useAssociations({
+                toObjectType: '0-1',
+                pageLength: 10,
+            }));
+            // Wait for initial load
             await waitFor(() => {
-                expect(result.current.results).toEqual([
-                    {
-                        toObjectId: 2001,
-                        associationTypes: [
-                            {
-                                category: 'HUBSPOT_DEFINED',
-                                typeId: 2,
-                                label: 'Company Primary',
-                            },
-                        ],
-                        properties: {
-                            name: 'Test Company',
-                        },
-                    },
-                ]);
-                expect(result.current.isLoading).toBe(false);
+                expect(result.current.pagination.currentPage).toBe(1);
+                expect(result.current.pagination.hasNextPage).toBe(true);
             });
-            expect(mockFetchAssociations).toHaveBeenCalledWith(expect.objectContaining({
-                toObjectType: '0-2',
-            }), {});
+            // Navigate to next page
+            result.current.pagination.nextPage();
+            await waitFor(() => {
+                expect(result.current.pagination.currentPage).toBe(2);
+                expect(result.current.pagination.hasNextPage).toBe(false);
+                expect(result.current.pagination.hasPreviousPage).toBe(true);
+            });
+            // Verify API was called with correct offset for page 2
+            expect(mockFetchAssociations).toHaveBeenLastCalledWith(expect.objectContaining({
+                offset: 10, // (page 2 - 1) * pageSize 10 = 10
+            }), expect.any(Object));
         });
-    });
-    describe('error handling', () => {
-        it('should handle fetch errors correctly', async () => {
-            const errorMessage = 'Failed to fetch associations';
-            mockFetchAssociations.mockRejectedValue(new Error(errorMessage));
-            const request = {
+        it('should navigate to previous page correctly', async () => {
+            // First call: page 1 with hasMore: true (allows next page)
+            mockFetchAssociations.mockResolvedValueOnce({
+                data: {
+                    results: [{ toObjectId: 1, associationTypes: [], properties: {} }],
+                    hasMore: true,
+                    nextOffset: 10,
+                },
+                cleanup: jest.fn(),
+            });
+            // Second call: page 2 with hasMore: false
+            mockFetchAssociations.mockResolvedValueOnce({
+                data: {
+                    results: [{ toObjectId: 2, associationTypes: [], properties: {} }],
+                    hasMore: false,
+                    nextOffset: 20,
+                },
+                cleanup: jest.fn(),
+            });
+            // Third call: back to page 1
+            mockFetchAssociations.mockResolvedValueOnce({
+                data: {
+                    results: [{ toObjectId: 1, associationTypes: [], properties: {} }],
+                    hasMore: true,
+                    nextOffset: 10,
+                },
+                cleanup: jest.fn(),
+            });
+            const { result } = renderHook(() => useAssociations({
                 toObjectType: '0-1',
-                properties: ['firstname'],
-                pageLength: 25,
-                offset: 0,
-            };
-            const { result } = renderHook(() => useAssociations(request));
+                pageLength: 10,
+            }));
+            // Wait for initial load (page 1)
             await waitFor(() => {
-                expect(result.current.error).toBeInstanceOf(Error);
-                expect(result.current.error?.message).toBe(errorMessage);
-                expect(result.current.results).toEqual([]);
-                expect(result.current.isLoading).toBe(false);
-                expect(result.current.hasMore).toBe(false);
-                expect(result.current.nextOffset).toBe(0);
+                expect(result.current.pagination.currentPage).toBe(1);
+                expect(result.current.pagination.hasNextPage).toBe(true);
+            });
+            // Go to page 2
+            result.current.pagination.nextPage();
+            await waitFor(() => {
+                expect(result.current.pagination.currentPage).toBe(2);
+                expect(result.current.pagination.hasPreviousPage).toBe(true);
+            });
+            // Go back to previous page
+            result.current.pagination.previousPage();
+            await waitFor(() => {
+                expect(result.current.pagination.currentPage).toBe(1);
+                expect(result.current.pagination.hasPreviousPage).toBe(false);
             });
         });
-    });
-    describe('pagination handling', () => {
-        it('should handle pagination correctly', async () => {
+        it('should reset to first page correctly', async () => {
+            // Initial page 1 - has more pages
             mockFetchAssociations.mockResolvedValue({
                 data: {
-                    results: [
-                        {
-                            toObjectId: 1025,
-                            associationTypes: [
-                                { category: 'HUBSPOT_DEFINED', typeId: 1, label: 'Primary' },
-                            ],
-                            properties: {
-                                firstname: 'Page 2 User',
-                            },
-                        },
-                    ],
+                    results: [],
+                    hasMore: true,
+                    nextOffset: 10,
+                },
+                cleanup: jest.fn(),
+            });
+            const { result } = renderHook(() => useAssociations({
+                toObjectType: '0-1',
+                pageLength: 10,
+            }));
+            // Wait for initial load
+            await waitFor(() => {
+                expect(result.current.pagination.currentPage).toBe(1);
+                expect(result.current.pagination.hasNextPage).toBe(true);
+            });
+            // Navigate to page 2, then page 3
+            result.current.pagination.nextPage();
+            await waitFor(() => {
+                expect(result.current.pagination.currentPage).toBe(2);
+            });
+            result.current.pagination.nextPage();
+            await waitFor(() => {
+                expect(result.current.pagination.currentPage).toBe(3);
+            });
+            // Reset to first page
+            result.current.pagination.reset();
+            await waitFor(() => {
+                expect(result.current.pagination.currentPage).toBe(1);
+                expect(result.current.pagination.hasPreviousPage).toBe(false);
+            });
+        });
+        it('should not allow navigation beyond boundaries', async () => {
+            mockFetchAssociations.mockResolvedValue({
+                data: {
+                    results: [],
                     hasMore: false,
-                    nextOffset: 50,
+                    nextOffset: 10,
                 },
                 cleanup: jest.fn(),
             });
-            const request = {
+            const { result } = renderHook(() => useAssociations({
+                toObjectType: '0-1',
+                pageLength: 10,
+            }));
+            await waitFor(() => {
+                expect(result.current.pagination.currentPage).toBe(1);
+                expect(result.current.pagination.hasNextPage).toBe(false);
+            });
+            // Try to go to next page when there isn't one
+            result.current.pagination.nextPage();
+            // Should stay on page 1
+            expect(result.current.pagination.currentPage).toBe(1);
+            // Try to go to previous page from page 1
+            result.current.pagination.previousPage();
+            // Should stay on page 1
+            expect(result.current.pagination.currentPage).toBe(1);
+        });
+    });
+    describe('error handling', () => {
+        it('should handle fetch errors correctly', async () => {
+            const errorMessage = 'Failed to fetch associations';
+            mockFetchAssociations.mockRejectedValue(new Error(errorMessage));
+            const { result } = renderHook(() => useAssociations({
                 toObjectType: '0-1',
                 properties: ['firstname'],
-                pageLength: 25,
-                offset: 25, // Second page
-            };
-            const { result } = renderHook(() => useAssociations(request));
+                pageLength: 10,
+            }));
             await waitFor(() => {
-                expect(result.current.results).toEqual([
-                    {
-                        toObjectId: 1025,
-                        associationTypes: [
-                            { category: 'HUBSPOT_DEFINED', typeId: 1, label: 'Primary' },
-                        ],
-                        properties: {
-                            firstname: 'Page 2 User',
-                        },
-                    },
-                ]);
-                expect(result.current.hasMore).toBe(false);
-                expect(result.current.nextOffset).toBe(50);
+                expect(result.current.error).toBeInstanceOf(Error);
+                expect(result.current.error?.message).toBe(errorMessage);
+                expect(result.current.results).toEqual([]);
                 expect(result.current.isLoading).toBe(false);
             });
         });
@@ -269,11 +324,10 @@ describe('useAssociations', () => {
                 },
                 cleanup: jest.fn(),
             });
-            const request = {
+            const config = {
                 toObjectType: '0-1',
                 properties: ['firstname', 'lastname'],
-                pageLength: 25,
-                offset: 0,
+                pageLength: 10,
             };
             const options = {
                 propertiesToFormat: ['firstname'],
@@ -284,9 +338,9 @@ describe('useAssociations', () => {
                     },
                 },
             };
-            renderHook(() => useAssociations(request, options));
+            renderHook(() => useAssociations(config, options));
             await waitFor(() => {
-                expect(mockFetchAssociations).toHaveBeenCalledWith(request, options);
+                expect(mockFetchAssociations).toHaveBeenCalledWith(expect.objectContaining(config), options);
             });
         });
         it('should use default empty options when no options provided', async () => {
@@ -298,15 +352,14 @@ describe('useAssociations', () => {
                 },
                 cleanup: jest.fn(),
             });
-            const request = {
+            const config = {
                 toObjectType: '0-1',
                 properties: ['firstname'],
-                pageLength: 25,
-                offset: 0,
+                pageLength: 10,
             };
-            renderHook(() => useAssociations(request));
+            renderHook(() => useAssociations(config));
             await waitFor(() => {
-                expect(mockFetchAssociations).toHaveBeenCalledWith(request, {});
+                expect(mockFetchAssociations).toHaveBeenCalledWith(expect.objectContaining(config), {});
             });
         });
     });
@@ -321,13 +374,12 @@ describe('useAssociations', () => {
                 },
                 cleanup: mockCleanup,
             });
-            const request = {
+            const config = {
                 toObjectType: '0-1',
                 properties: ['firstname'],
-                pageLength: 25,
-                offset: 0,
+                pageLength: 10,
             };
-            const { unmount } = renderHook(() => useAssociations(request));
+            const { unmount } = renderHook(() => useAssociations(config));
             await waitFor(() => {
                 expect(mockFetchAssociations).toHaveBeenCalled();
             });
@@ -336,7 +388,7 @@ describe('useAssociations', () => {
                 expect(mockCleanup).toHaveBeenCalled();
             });
         });
-        it('should handle stable reference optimization for request', async () => {
+        it('should handle stable reference optimization for config', async () => {
             mockFetchAssociations.mockResolvedValue({
                 data: {
                     results: [],
@@ -345,20 +397,19 @@ describe('useAssociations', () => {
                 },
                 cleanup: jest.fn(),
             });
-            const request = {
+            const config = {
                 toObjectType: '0-1',
                 properties: ['firstname'],
-                pageLength: 25,
-                offset: 0,
+                pageLength: 10,
             };
-            const { rerender } = renderHook(({ requestProp }) => useAssociations(requestProp), {
-                initialProps: { requestProp: request },
+            const { rerender } = renderHook(({ configProp }) => useAssociations(configProp), {
+                initialProps: { configProp: config },
             });
             await waitFor(() => {
                 expect(mockFetchAssociations).toHaveBeenCalledTimes(1);
             });
-            // Rerender with the same request object content but different reference
-            rerender({ requestProp: { ...request } });
+            // Rerender with the same config object content but different reference
+            rerender({ configProp: { ...config } });
             await waitFor(() => {
                 // Should not call fetchAssociations again due to stable reference optimization
                 expect(mockFetchAssociations).toHaveBeenCalledTimes(1);

package/dist/coreComponents.d.ts

@@ -794,3 +794,15 @@ export declare const SearchInput: "SearchInput" & {
     readonly props?: types.SearchInputProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"SearchInput", types.SearchInputProps, true>>;
+/**
+ * The `TimeInput` component renders an input field where a user can select a time. Commonly used within the `Form` component.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/time-input Docs}
+ */
+export declare const TimeInput: "TimeInput" & {
+    readonly type?: "TimeInput" | undefined;
+    readonly props?: types.TimeInputProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TimeInput", types.TimeInputProps, true>>;

package/dist/coreComponents.js

@@ -534,3 +534,11 @@ export const Tooltip = createRemoteReactComponent('Tooltip');
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/search-input SearchInput Docs}
  */
 export const SearchInput = createRemoteReactComponent('SearchInput');
+/**
+ * The `TimeInput` component renders an input field where a user can select a time. Commonly used within the `Form` component.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/time-input Docs}
+ */
+export const TimeInput = createRemoteReactComponent('TimeInput');

package/dist/experimental/crm/fetchAssociations.d.ts

@@ -1,4 +1,20 @@
 import { FetchCrmPropertiesOptions } from './fetchCrmProperties';
+export declare const DEFAULT_PAGE_SIZE = 10;
+/**
+ * Convert page number and page size to offset for API calls
+ */
+export declare function pageToOffset(page: number, pageSize: number): number;
+/**
+ * Convert offset and page size to page number
+ */
+export declare function offsetToPage(offset: number, pageSize: number): number;
+/**
+ * Calculate pagination flags based on current page and API hasMore flag
+ */
+export declare function calculatePaginationFlags(currentPage: number, hasMore: boolean): {
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+};
 export type AssociationResult = {
     toObjectId: number;
     associationTypes: {

package/dist/experimental/crm/fetchAssociations.js

@@ -1,3 +1,25 @@
+export const DEFAULT_PAGE_SIZE = 10;
+/**
+ * Convert page number and page size to offset for API calls
+ */
+export function pageToOffset(page, pageSize) {
+    return (page - 1) * pageSize;
+}
+/**
+ * Convert offset and page size to page number
+ */
+export function offsetToPage(offset, pageSize) {
+    return Math.floor(offset / pageSize) + 1;
+}
+/**
+ * Calculate pagination flags based on current page and API hasMore flag
+ */
+export function calculatePaginationFlags(currentPage, hasMore) {
+    return {
+        hasNextPage: hasMore,
+        hasPreviousPage: currentPage > 1,
+    };
+}
 function isAssociationsResponse(data) {
     if (data === null ||
         typeof data !== 'object' ||

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

@@ -1,10 +1,22 @@
-import { type FetchAssociationsRequest, type AssociationsResponse } from '../crm/fetchAssociations';
+import { type FetchAssociationsRequest, type AssociationResult } from '../crm/fetchAssociations';
 import { type FetchCrmPropertiesOptions } from '../crm/fetchCrmProperties';
-export interface AssociationsState {
-    results: AssociationsResponse['results'];
+export interface UseAssociationsOptions {
+    propertiesToFormat?: 'all' | string[];
+    formattingOptions?: FetchCrmPropertiesOptions['formattingOptions'];
+}
+export interface UseAssociationsPagination {
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    currentPage: number;
+    pageSize: number;
+    nextPage: () => void;
+    previousPage: () => void;
+    reset: () => void;
+}
+export interface UseAssociationsResult {
+    results: AssociationResult[];
     error: Error | null;
     isLoading: boolean;
-    hasMore: boolean;
-    nextOffset: number;
+    pagination: UseAssociationsPagination;
 }
-export declare function useAssociations(request: FetchAssociationsRequest, options?: FetchCrmPropertiesOptions): AssociationsState;
+export declare function useAssociations(config: Omit<FetchAssociationsRequest, 'offset'>, options?: UseAssociationsOptions): UseAssociationsResult;

package/dist/experimental/hooks/useAssociations.js

@@ -1,13 +1,16 @@
-import { useEffect, useReducer, useMemo, useRef } from 'react';
+import { useEffect, useReducer, useMemo, useRef, useCallback } from 'react';
 import { logger } from '../../logger';
-import { fetchAssociations, } from '../crm/fetchAssociations';
-const initialState = {
-    results: [],
-    error: null,
-    isLoading: true,
-    hasMore: false,
-    nextOffset: 0,
-};
+import { fetchAssociations, DEFAULT_PAGE_SIZE, pageToOffset, calculatePaginationFlags, } from '../crm/fetchAssociations';
+function createInitialState(pageSize) {
+    return {
+        results: [],
+        error: null,
+        isLoading: true,
+        currentPage: 1,
+        pageSize,
+        hasMore: false,
+    };
+}
 function associationsReducer(state, action) {
     switch (action.type) {
         case 'FETCH_START':
@@ -22,7 +25,6 @@ function associationsReducer(state, action) {
                 isLoading: false,
                 results: action.payload.results,
                 hasMore: action.payload.hasMore,
-                nextOffset: action.payload.nextOffset,
                 error: null,
             };
         case 'FETCH_ERROR':
@@ -32,15 +34,33 @@ function associationsReducer(state, action) {
                 error: action.payload,
                 results: [],
                 hasMore: false,
-                nextOffset: 0,
+            };
+        case 'NEXT_PAGE':
+            return {
+                ...state,
+                currentPage: state.currentPage + 1,
+            };
+        case 'PREVIOUS_PAGE':
+            return {
+                ...state,
+                currentPage: Math.max(1, state.currentPage - 1),
+            };
+        case 'RESET':
+            return {
+                ...state,
+                currentPage: 1,
+                results: [],
+                hasMore: false,
+                error: null,
             };
         default:
             return state;
     }
 }
 const DEFAULT_OPTIONS = {};
-export function useAssociations(request, options = DEFAULT_OPTIONS) {
-    const [state, dispatch] = useReducer(associationsReducer, initialState);
+export function useAssociations(config, options = DEFAULT_OPTIONS) {
+    const pageSize = config.pageLength ?? DEFAULT_PAGE_SIZE;
+    const [state, dispatch] = useReducer(associationsReducer, useMemo(() => createInitialState(pageSize), [pageSize]));
     // Log experimental warning once on mount
     useEffect(() => {
         logger.warn('useAssociations is an experimental hook and might change or be removed in the future.');
@@ -48,23 +68,23 @@ export function useAssociations(request, options = DEFAULT_OPTIONS) {
     /**
      * HOOK OPTIMIZATION:
      *
-     * Create stable references for request and options to prevent unnecessary re-renders and API calls.
+     * Create stable references for config and options to prevent unnecessary re-renders and API calls.
      * Then, external developers can pass inline objects without worrying about memoization
      * We handle the deep equality comparison ourselves, and return the same object reference when content is equivalent.
      */
-    const lastRequestRef = useRef();
-    const lastRequestKeyRef = useRef();
+    const lastConfigRef = useRef();
+    const lastConfigKeyRef = useRef();
     const lastOptionsRef = useRef();
     const lastOptionsKeyRef = useRef();
-    const stableRequest = useMemo(() => {
-        const requestKey = JSON.stringify(request);
-        if (requestKey === lastRequestKeyRef.current) {
-            return lastRequestRef.current;
+    const stableConfig = useMemo(() => {
+        const configKey = JSON.stringify(config);
+        if (configKey === lastConfigKeyRef.current) {
+            return lastConfigRef.current;
         }
-        lastRequestKeyRef.current = requestKey;
-        lastRequestRef.current = request;
-        return request;
-    }, [request]);
+        lastConfigKeyRef.current = configKey;
+        lastConfigRef.current = config;
+        return config;
+    }, [config]);
     const stableOptions = useMemo(() => {
         const optionsKey = JSON.stringify(options);
         if (optionsKey === lastOptionsKeyRef.current) {
@@ -74,6 +94,22 @@ export function useAssociations(request, options = DEFAULT_OPTIONS) {
         lastOptionsRef.current = options;
         return options;
     }, [options]);
+    // Pagination actions
+    const nextPage = useCallback(() => {
+        const paginationFlags = calculatePaginationFlags(state.currentPage, state.hasMore);
+        if (paginationFlags.hasNextPage) {
+            dispatch({ type: 'NEXT_PAGE' });
+        }
+    }, [state.currentPage, state.hasMore]);
+    const previousPage = useCallback(() => {
+        const paginationFlags = calculatePaginationFlags(state.currentPage, state.hasMore);
+        if (paginationFlags.hasPreviousPage) {
+            dispatch({ type: 'PREVIOUS_PAGE' });
+        }
+    }, [state.currentPage, state.hasMore]);
+    const reset = useCallback(() => {
+        dispatch({ type: 'RESET' });
+    }, []);
     // Fetch the associations
     useEffect(() => {
         let cancelled = false;
@@ -81,14 +117,23 @@ export function useAssociations(request, options = DEFAULT_OPTIONS) {
         const fetchData = async () => {
             try {
                 dispatch({ type: 'FETCH_START' });
-                const result = await fetchAssociations(stableRequest, stableOptions);
+                // Build request using current page and pagination utilities
+                const request = {
+                    toObjectType: stableConfig.toObjectType,
+                    properties: stableConfig.properties,
+                    pageLength: pageSize,
+                    offset: pageToOffset(state.currentPage, pageSize),
+                };
+                const result = await fetchAssociations(request, {
+                    propertiesToFormat: stableOptions.propertiesToFormat,
+                    formattingOptions: stableOptions.formattingOptions,
+                });
                 if (!cancelled) {
                     dispatch({
                         type: 'FETCH_SUCCESS',
                         payload: {
                             results: result.data.results,
                             hasMore: result.data.hasMore,
-                            nextOffset: result.data.nextOffset,
                         },
                     });
                     cleanup = result.cleanup;
@@ -111,6 +156,21 @@ export function useAssociations(request, options = DEFAULT_OPTIONS) {
                 cleanup();
             }
         };
-    }, [stableRequest, stableOptions]);
-    return state;
+    }, [stableConfig, stableOptions, state.currentPage, pageSize]);
+    // Calculate pagination flags
+    const paginationFlags = calculatePaginationFlags(state.currentPage, state.hasMore);
+    return {
+        results: state.results,
+        error: state.error,
+        isLoading: state.isLoading,
+        pagination: {
+            hasNextPage: paginationFlags.hasNextPage,
+            hasPreviousPage: paginationFlags.hasPreviousPage,
+            currentPage: state.currentPage,
+            pageSize: state.pageSize,
+            nextPage,
+            previousPage,
+            reset,
+        },
+    };
 }

package/dist/experimental/index.d.ts

@@ -84,14 +84,6 @@ declare const FileInput: "FileInput" & {
     readonly props?: experimentalTypes.FileInputProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"FileInput", experimentalTypes.FileInputProps, true>>;
-/**
- * The TimeInput component renders an input field where a user can select a time.
- */
-declare const TimeInput: "TimeInput" & {
-    readonly type?: "TimeInput" | undefined;
-    readonly props?: experimentalTypes.TimeInputProps | undefined;
-    readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TimeInput", experimentalTypes.TimeInputProps, true>>;
 /** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
 declare const CurrencyInput: "CurrencyInput" & {
     readonly type?: "CurrencyInput" | undefined;
@@ -116,4 +108,4 @@ declare const SecondaryHeaderActionButton: "SecondaryHeaderActionButton" & {
     readonly props?: experimentalTypes.HeaderActionButtonProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"SecondaryHeaderActionButton", experimentalTypes.HeaderActionButtonProps, true>>;
-export { Iframe, MediaObject, Inline, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, TimeInput, CurrencyInput, HeaderActions, PrimaryHeaderActionButton, SecondaryHeaderActionButton, };
+export { Iframe, MediaObject, Inline, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, CurrencyInput, HeaderActions, PrimaryHeaderActionButton, SecondaryHeaderActionButton, };

package/dist/experimental/index.js

@@ -37,10 +37,6 @@ const ExpandableText = createRemoteReactComponent('ExpandableText');
  */
 const Popover = createRemoteReactComponent('Popover');
 const FileInput = createRemoteReactComponent('FileInput');
-/**
- * The TimeInput component renders an input field where a user can select a time.
- */
-const TimeInput = createRemoteReactComponent('TimeInput');
 /** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
 const CurrencyInput = createRemoteReactComponent('CurrencyInput');
 /** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
@@ -53,4 +49,4 @@ const PrimaryHeaderActionButton = createRemoteReactComponent('PrimaryHeaderActio
 const SecondaryHeaderActionButton = createRemoteReactComponent('SecondaryHeaderActionButton', {
     fragmentProps: ['overlay'],
 });
-export { Iframe, MediaObject, Inline, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, TimeInput, CurrencyInput, HeaderActions, PrimaryHeaderActionButton, SecondaryHeaderActionButton, };
+export { Iframe, MediaObject, Inline, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, CurrencyInput, HeaderActions, PrimaryHeaderActionButton, SecondaryHeaderActionButton, };

package/dist/experimental/types.d.ts

@@ -168,16 +168,6 @@ export interface FileInputProps {
     name: string;
     onChange: (event: any) => void;
 }
-/**
- * @ignore
- * @experimental do not use in production
- */
-export interface BaseTime {
-    /** The hour for the time (0 to 23) in 24-hour format (e.g. 0 = 12:00 AM, 9 = 9:00 AM, 15 = 3:00 PM). */
-    hours: number;
-    /** The minutes for the time (0 to 59). */
-    minutes: number;
-}
 /**
  * Generic collection of props for all inputs (experimental version)
  * @internal
@@ -258,50 +248,6 @@ export interface BaseInputProps<T = string, V = string> {
      */
     onFocus?: (value: V) => void;
 }
-/**
- * @ignore
- * @experimental do not use in production
- *
- * The values used to invoke events on the TimeInput component
- */
-export interface TimeInputEventsPayload extends BaseTime {
-}
-/**
- * @internal
- * @ignore
- * */
-type BaseTimeInputForTime = Omit<BaseInputProps<BaseTime | null, TimeInputEventsPayload>, 'onInput' | 'placeholder' | 'onChange'>;
-/**
- * @ignore
- * @experimental do not use in production
- */
-export interface TimeInputProps extends BaseTimeInputForTime {
-    /**
-     * A callback function that is invoked when the value is changed.
-     *
-     * @event
-     */
-    onChange?: (value: TimeInputEventsPayload) => void;
-    /**
-     * Sets the earliest time that will be valid.
-     */
-    min?: BaseTime;
-    /**
-     * Sets the latest time that will be valid.
-     */
-    max?: BaseTime;
-    /**
-     * Sets the interval (in minutes) between the dropdown options.
-     *
-     *  @defaultValue `30`
-     */
-    interval?: number;
-    /**
-     * Sets the timezone that the component will display alongside times in the TimePicker. This will not adjust the available valid inputs.
-     *
-     */
-    timezone?: 'userTz' | 'portalTz';
-}
 /**
  * @ignore
  * @experimental do not use in production

package/dist/types.d.ts

@@ -1186,6 +1186,59 @@ export interface DateInputProps extends BaseDateInputForDate {
      */
     todayButtonLabel?: string;
 }
+/**
+ * Object that represents times.
+ */
+export interface BaseTime {
+    /** The hour for the time (0 to 23) in 24-hour format (e.g. 0 = 12:00 AM, 9 = 9:00 AM, 15 = 3:00 PM). */
+    hours: number;
+    /** The minutes for the time (0 to 59). */
+    minutes: number;
+}
+/**
+ * @ignore
+ *
+ * The values used to invoke events on the TimeInput component
+ */
+export interface TimeInputEventsPayload extends BaseTime {
+}
+/**
+ * @internal
+ * @ignore
+ * */
+type BaseTimeInputForTime = Omit<BaseInputProps<BaseTime | null, TimeInputEventsPayload>, 'onInput' | 'placeholder' | 'onChange'>;
+/**
+ * The props type for {@link !components.TimeInput}.
+ *
+ * @category Component Props
+ */
+export interface TimeInputProps extends BaseTimeInputForTime {
+    /**
+     * A callback function that is invoked when the value is changed.
+     *
+     * @event
+     */
+    onChange?: (value: TimeInputEventsPayload) => void;
+    /**
+     * Sets the earliest time that will be valid.
+     */
+    min?: BaseTime;
+    /**
+     * Sets the latest time that will be valid.
+     */
+    max?: BaseTime;
+    /**
+     * Sets the interval (in minutes) between the dropdown options.
+     *
+     *  @defaultValue `30`
+     */
+    interval?: number;
+    /**
+     * Sets the timezone that the component will display alongside times in the TimeInput. This will not modify the available valid inputs.
+     *
+     */
+    timezone?: 'userTz' | 'portalTz';
+}
 /**
  * The props type for {@link !components.SearchInput}.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -66,5 +66,5 @@
     "ts-jest": "^29.1.1",
     "typescript": "5.0.4"
   },
-  "gitHead": "65046f5f3ce4c51652bc454e4425b57bd33aedbf"
+  "gitHead": "8344193a13ab5874924b02d67413dad052558ecf"
 }