@hubspot/ui-extensions 0.9.1 → 0.9.3

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

@@ -8,15 +8,19 @@ Object.defineProperty(global, 'self', {
     value: mockSelf,
     writable: true,
 });
-import { fetchCrmProperties, } from '../../../experimental/crm/fetchCrmProperties';
+import { fetchCrmProperties } from '../../../experimental/crm/fetchCrmProperties';
+const DEFAULT_OPTIONS = {};
 describe('fetchCrmProperties', () => {
     beforeEach(() => {
         jest.clearAllMocks();
     });
     it('successfully fetches CRM properties', async () => {
         const mockApiResponse = {
-            firstname: 'Test value for firstname',
-            lastname: 'Test value for lastname',
+            data: {
+                firstname: 'Test value for firstname',
+                lastname: 'Test value for lastname',
+            },
+            cleanup: jest.fn(),
         };
         const mockResponse = {
             ok: true,
@@ -24,11 +28,42 @@ describe('fetchCrmProperties', () => {
         };
         mockFetchCrmProperties.mockResolvedValue(mockResponse);
         const propertyNames = ['firstname', 'lastname'];
-        const result = await fetchCrmProperties(propertyNames, jest.fn());
-        expect(mockFetchCrmProperties).toHaveBeenCalledWith(propertyNames, expect.any(Function));
+        const result = await fetchCrmProperties(propertyNames, jest.fn(), DEFAULT_OPTIONS);
+        expect(mockFetchCrmProperties).toHaveBeenCalledWith(propertyNames, expect.any(Function), DEFAULT_OPTIONS);
         expect(result).toEqual({
-            firstname: 'Test value for firstname',
-            lastname: 'Test value for lastname',
+            data: {
+                firstname: 'Test value for firstname',
+                lastname: 'Test value for lastname',
+            },
+            cleanup: expect.any(Function),
+        });
+    });
+    it('successfully fetches CRM properties with null values', async () => {
+        const mockApiResponse = {
+            data: {
+                firstname: 'John',
+                lastname: null,
+                email: 'john@example.com',
+                phone: null,
+            },
+            cleanup: jest.fn(),
+        };
+        const mockResponse = {
+            ok: true,
+            json: jest.fn().mockResolvedValue(mockApiResponse),
+        };
+        mockFetchCrmProperties.mockResolvedValue(mockResponse);
+        const propertyNames = ['firstname', 'lastname', 'email', 'phone'];
+        const result = await fetchCrmProperties(propertyNames, jest.fn(), DEFAULT_OPTIONS);
+        expect(mockFetchCrmProperties).toHaveBeenCalledWith(propertyNames, expect.any(Function), DEFAULT_OPTIONS);
+        expect(result).toEqual({
+            data: {
+                firstname: 'John',
+                lastname: null,
+                email: 'john@example.com',
+                phone: null,
+            },
+            cleanup: expect.any(Function),
         });
     });
     it('throws an error when response is not OK', async () => {
@@ -38,28 +73,51 @@ describe('fetchCrmProperties', () => {
         };
         mockFetchCrmProperties.mockResolvedValue(mockResponse);
         const propertyNames = ['firstname'];
-        await expect(fetchCrmProperties(propertyNames, jest.fn())).rejects.toThrow('Failed to fetch CRM properties: Not Found');
+        await expect(fetchCrmProperties(propertyNames, jest.fn(), DEFAULT_OPTIONS)).rejects.toThrow('Failed to fetch CRM properties: Not Found');
     });
     it('throws an error when fetch fails', async () => {
         mockFetchCrmProperties.mockRejectedValue(new Error('Network error'));
         const propertyNames = ['firstname'];
-        await expect(fetchCrmProperties(propertyNames, jest.fn())).rejects.toThrow('Network error');
+        await expect(fetchCrmProperties(propertyNames, jest.fn(), DEFAULT_OPTIONS)).rejects.toThrow('Network error');
     });
     it('throws an error if the response is not an object', async () => {
-        const mockApiResponse = 'Invalid response';
+        const mockApiResponse = {
+            data: 'Invalid response',
+            cleanup: jest.fn(),
+        };
         const mockResponse = {
             ok: true,
             json: jest.fn().mockResolvedValue(mockApiResponse),
         };
         mockFetchCrmProperties.mockResolvedValue(mockResponse);
         const propertyNames = ['firstname'];
-        await expect(fetchCrmProperties(propertyNames, jest.fn())).rejects.toThrow('Invalid response format');
+        await expect(fetchCrmProperties(propertyNames, jest.fn(), DEFAULT_OPTIONS)).rejects.toThrow('Invalid response format');
+    });
+    it('throws an error if response contains invalid property values', async () => {
+        const mockApiResponse = {
+            data: {
+                firstname: 'John',
+                lastname: 123,
+                email: 'john@example.com',
+            },
+            cleanup: jest.fn(),
+        };
+        const mockResponse = {
+            ok: true,
+            json: jest.fn().mockResolvedValue(mockApiResponse),
+        };
+        mockFetchCrmProperties.mockResolvedValue(mockResponse);
+        const propertyNames = ['firstname', 'lastname', 'email'];
+        await expect(fetchCrmProperties(propertyNames, jest.fn(), DEFAULT_OPTIONS)).rejects.toThrow('Invalid response format');
     });
     it('passes the propertiesUpdatedCallback and allows it to be called', async () => {
         let capturedCallback;
         const mockApiResponse = {
-            firstname: 'Initial',
-            lastname: 'Initial',
+            data: {
+                firstname: 'Initial',
+                lastname: 'Initial',
+            },
+            cleanup: jest.fn(),
         };
         const mockResponse = {
             ok: true,
@@ -71,7 +129,7 @@ describe('fetchCrmProperties', () => {
         });
         const propertyNames = ['firstname', 'lastname'];
         const mockCallback = jest.fn();
-        await fetchCrmProperties(propertyNames, mockCallback);
+        await fetchCrmProperties(propertyNames, mockCallback, DEFAULT_OPTIONS);
         expect(typeof capturedCallback).toBe('function');
         // Simulate the callback being called with new properties
         const updatedProps = { firstname: 'Updated', lastname: 'Updated' };
@@ -80,4 +138,111 @@ describe('fetchCrmProperties', () => {
         }
         expect(mockCallback).toHaveBeenCalledWith(updatedProps);
     });
+    it('passes the propertiesUpdatedCallback and allows it to be called with null values', async () => {
+        let capturedCallback;
+        const mockApiResponse = {
+            data: {
+                firstname: 'Initial',
+                lastname: null,
+            },
+            cleanup: jest.fn(),
+        };
+        const mockResponse = {
+            ok: true,
+            json: jest.fn().mockResolvedValue(mockApiResponse),
+        };
+        mockFetchCrmProperties.mockImplementation((propertyNames, callback) => {
+            capturedCallback = callback;
+            return Promise.resolve(mockResponse);
+        });
+        const propertyNames = ['firstname', 'lastname'];
+        const mockCallback = jest.fn();
+        await fetchCrmProperties(propertyNames, mockCallback, DEFAULT_OPTIONS);
+        expect(typeof capturedCallback).toBe('function');
+        // Simulate the callback being called with new properties including null values
+        const updatedProps = { firstname: null, lastname: 'Updated Value' };
+        if (capturedCallback) {
+            capturedCallback(updatedProps);
+        }
+        expect(mockCallback).toHaveBeenCalledWith(updatedProps);
+    });
+    it('passes formatting options to the underlying fetch function', async () => {
+        const mockApiResponse = {
+            data: {
+                firstname: 'John',
+                lastname: 'Doe',
+            },
+            cleanup: jest.fn(),
+        };
+        const mockResponse = {
+            ok: true,
+            json: jest.fn().mockResolvedValue(mockApiResponse),
+        };
+        mockFetchCrmProperties.mockResolvedValue(mockResponse);
+        const propertyNames = ['firstname', 'lastname'];
+        const options = {
+            propertiesToFormat: ['firstname'],
+            formattingOptions: {
+                date: {
+                    format: 'MM/dd/yyyy',
+                },
+                currency: {
+                    addSymbol: true,
+                },
+            },
+        };
+        await fetchCrmProperties(propertyNames, jest.fn(), options);
+        expect(mockFetchCrmProperties).toHaveBeenCalledWith(propertyNames, expect.any(Function), options);
+    });
+    it('preserves error handling with formatting options', async () => {
+        mockFetchCrmProperties.mockRejectedValue(new Error('Network error'));
+        const propertyNames = ['firstname'];
+        const options = {
+            propertiesToFormat: ['firstname'],
+            formattingOptions: {
+                date: {
+                    format: 'MM/dd/yyyy',
+                },
+            },
+        };
+        await expect(fetchCrmProperties(propertyNames, jest.fn(), options)).rejects.toThrow('Network error');
+        expect(mockFetchCrmProperties).toHaveBeenCalledWith(propertyNames, expect.any(Function), options);
+    });
+    it('preserves response validation with formatting options', async () => {
+        const mockApiResponse = {
+            data: 'Invalid response',
+            cleanup: jest.fn(),
+        };
+        const mockResponse = {
+            ok: true,
+            json: jest.fn().mockResolvedValue(mockApiResponse),
+        };
+        mockFetchCrmProperties.mockResolvedValue(mockResponse);
+        const propertyNames = ['firstname'];
+        const options = {
+            propertiesToFormat: 'all',
+        };
+        await expect(fetchCrmProperties(propertyNames, jest.fn(), options)).rejects.toThrow('Invalid response format');
+    });
+    it('returns cleanup function that can be called', async () => {
+        const mockCleanup = jest.fn();
+        const mockApiResponse = {
+            data: {
+                firstname: 'John',
+            },
+            cleanup: mockCleanup,
+        };
+        const mockResponse = {
+            ok: true,
+            json: jest.fn().mockResolvedValue(mockApiResponse),
+        };
+        mockFetchCrmProperties.mockResolvedValue(mockResponse);
+        const propertyNames = ['firstname'];
+        const result = await fetchCrmProperties(propertyNames, jest.fn(), DEFAULT_OPTIONS);
+        expect(result.cleanup).toBe(mockCleanup);
+        expect(typeof result.cleanup).toBe('function');
+        // Verify cleanup can be called without errors
+        result.cleanup();
+        expect(mockCleanup).toHaveBeenCalledTimes(1);
+    });
 });

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

@@ -42,8 +42,11 @@ describe('useCrmProperties', () => {
     });
     it('should successfully fetch and return CRM properties', async () => {
         mockFetchCrmProperties.mockResolvedValue({
-            firstname: 'Test value for firstname',
-            lastname: 'Test value for lastname',
+            data: {
+                firstname: 'Test value for firstname',
+                lastname: 'Test value for lastname',
+            },
+            cleanup: jest.fn(),
         });
         const propertyNames = ['firstname', 'lastname'];
         const { result } = renderHook(() => useCrmProperties(propertyNames));
@@ -73,7 +76,10 @@ describe('useCrmProperties', () => {
         let capturedCallback;
         mockFetchCrmProperties.mockImplementation((_propertyNames, propertiesUpdatedCallback) => {
             capturedCallback = propertiesUpdatedCallback;
-            return { firstname: 'Initial', lastname: 'Initial' };
+            return {
+                data: { firstname: 'Initial', lastname: 'Initial' },
+                cleanup: jest.fn(),
+            };
         });
         const propertyNames = ['firstname', 'lastname'];
         const { result } = renderHook(() => useCrmProperties(propertyNames));
@@ -87,9 +93,150 @@ describe('useCrmProperties', () => {
         const updatedProperties = { firstname: 'Updated', lastname: 'Updated' };
         await waitFor(() => {
             if (capturedCallback) {
-                capturedCallback(updatedProperties);
+                capturedCallback?.(updatedProperties);
+                expect(result.current.properties).toEqual(updatedProperties);
+            }
+        });
+    });
+    it('should update properties when propertiesUpdatedCallback is called with null values', async () => {
+        // Capture the callback so we can simulate an external update to CRM properties
+        let capturedCallback;
+        mockFetchCrmProperties.mockImplementation((_propertyNames, propertiesUpdatedCallback) => {
+            capturedCallback = propertiesUpdatedCallback;
+            return {
+                data: { firstname: 'Initial', lastname: null },
+                cleanup: jest.fn(),
+            };
+        });
+        const propertyNames = ['firstname', 'lastname'];
+        const { result } = renderHook(() => useCrmProperties(propertyNames));
+        await waitFor(() => {
+            expect(result.current.properties).toEqual({
+                firstname: 'Initial',
+                lastname: null,
+            });
+            expect(result.current.isLoading).toBe(false);
+        });
+        const updatedProperties = { firstname: null, lastname: 'Updated Value' };
+        await waitFor(() => {
+            if (capturedCallback) {
+                capturedCallback?.(updatedProperties);
                 expect(result.current.properties).toEqual(updatedProperties);
             }
         });
     });
+    // This will become "should pass formatting options to fetchCrmProperties" in the next PR
+    it('should pass formatting options to fetchCrmProperties', async () => {
+        mockFetchCrmProperties.mockResolvedValue({
+            data: {
+                firstname: 'John',
+                lastname: 'Doe',
+            },
+            cleanup: jest.fn(),
+        });
+        const propertyNames = ['firstname', 'lastname'];
+        const options = {
+            propertiesToFormat: ['firstname'],
+        };
+        renderHook(() => useCrmProperties(propertyNames, options));
+        await waitFor(() => {
+            expect(mockFetchCrmProperties).toHaveBeenCalledWith(propertyNames, expect.any(Function), options);
+        });
+    });
+    it('should use default empty options when no options provided', async () => {
+        mockFetchCrmProperties.mockResolvedValue({
+            data: {
+                firstname: 'John',
+            },
+            cleanup: jest.fn(),
+        });
+        const propertyNames = ['firstname'];
+        const defaultOptions = {};
+        renderHook(() => useCrmProperties(propertyNames));
+        await waitFor(() => {
+            expect(mockFetchCrmProperties).toHaveBeenCalledWith(['firstname'], expect.any(Function), defaultOptions);
+        });
+    });
+    it('should not re-fetch when options object reference changes but content is the same', async () => {
+        mockFetchCrmProperties.mockResolvedValue({
+            data: {
+                firstname: 'John',
+            },
+            cleanup: jest.fn(),
+        });
+        const propertyNames = ['firstname'];
+        const initialOptions = { propertiesToFormat: ['firstname'] };
+        const { rerender } = renderHook(({ options }) => useCrmProperties(propertyNames, options), { initialProps: { options: initialOptions } });
+        await waitFor(() => {
+            expect(mockFetchCrmProperties).toHaveBeenCalledTimes(1);
+        });
+        const newOptionsWithSameContent = { propertiesToFormat: ['firstname'] };
+        rerender({ options: newOptionsWithSameContent });
+        await waitFor(() => {
+            expect(mockFetchCrmProperties).toHaveBeenCalledTimes(1);
+        });
+    });
+    it('should re-fetch when options content actually changes', async () => {
+        mockFetchCrmProperties.mockResolvedValue({
+            data: {
+                firstname: 'John',
+            },
+            cleanup: jest.fn(),
+        });
+        const propertyNames = ['firstname'];
+        const initialOptions = { propertiesToFormat: ['firstname'] };
+        const { rerender } = renderHook(({ options }) => useCrmProperties(propertyNames, options), { initialProps: { options: initialOptions } });
+        await waitFor(() => {
+            expect(mockFetchCrmProperties).toHaveBeenCalledTimes(1);
+            expect(mockFetchCrmProperties).toHaveBeenLastCalledWith(['firstname'], expect.any(Function), initialOptions);
+        });
+        const newOptions = {
+            propertiesToFormat: ['firstname'],
+            formattingOptions: { dateFormat: 'yyyy-MM-dd' },
+        };
+        rerender({ options: newOptions });
+        await waitFor(() => {
+            expect(mockFetchCrmProperties).toHaveBeenCalledTimes(2);
+            expect(mockFetchCrmProperties).toHaveBeenLastCalledWith(['firstname'], expect.any(Function), newOptions);
+        });
+    });
+    it('should call cleanup function when component unmounts', async () => {
+        const mockCleanup = jest.fn();
+        mockFetchCrmProperties.mockResolvedValue({
+            data: {
+                firstname: 'John',
+            },
+            cleanup: mockCleanup,
+        });
+        const propertyNames = ['firstname'];
+        const { unmount } = renderHook(() => useCrmProperties(propertyNames));
+        await waitFor(() => {
+            expect(mockFetchCrmProperties).toHaveBeenCalledTimes(1);
+        });
+        unmount();
+        expect(mockCleanup).toHaveBeenCalledTimes(1);
+    });
+    it('should call cleanup function when dependencies change', async () => {
+        const mockCleanup1 = jest.fn();
+        const mockCleanup2 = jest.fn();
+        mockFetchCrmProperties
+            .mockResolvedValueOnce({
+            data: { firstname: 'John' },
+            cleanup: mockCleanup1,
+        })
+            .mockResolvedValueOnce({
+            data: { firstname: 'Jane' },
+            cleanup: mockCleanup2,
+        });
+        const { rerender } = renderHook(({ propertyNames }) => useCrmProperties(propertyNames), { initialProps: { propertyNames: ['firstname'] } });
+        await waitFor(() => {
+            expect(mockFetchCrmProperties).toHaveBeenCalledTimes(1);
+        });
+        // Change dependencies to trigger cleanup
+        rerender({ propertyNames: ['lastname'] });
+        await waitFor(() => {
+            expect(mockFetchCrmProperties).toHaveBeenCalledTimes(2);
+            expect(mockCleanup1).toHaveBeenCalledTimes(1);
+        });
+    });
 });

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

@@ -1,4 +1,24 @@
 export type CrmPropertiesResponse = {
-    [key: string]: string;
+    [key: string]: string | null;
 };
-export declare const fetchCrmProperties: (propertyNames: string[], propertiesUpdatedCallback: (properties: Record<string, string>) => void) => Promise<Record<string, string>>;
+export type FetchCrmPropertiesOptions = {
+    propertiesToFormat?: string[] | 'all';
+    formattingOptions?: {
+        date?: {
+            format?: string;
+            relative?: boolean;
+        };
+        dateTime?: {
+            format?: string;
+            relative?: boolean;
+        };
+        currency?: {
+            addSymbol?: boolean;
+        };
+    };
+};
+export interface FetchCrmPropertiesResult {
+    data: Record<string, string | null>;
+    cleanup: () => void;
+}
+export declare const fetchCrmProperties: (propertyNames: string[], propertiesUpdatedCallback: (properties: Record<string, string | null>) => void, options?: FetchCrmPropertiesOptions) => Promise<FetchCrmPropertiesResult>;

package/dist/experimental/crm/fetchCrmProperties.js

@@ -4,24 +4,25 @@ function isCrmPropertiesResponse(data) {
     // Confirm the data is a defined object
     data === null ||
         typeof data !== 'object' ||
-        // Confirm all keys and values are strings
-        !Object.keys(data).every((key) => typeof key === 'string' && typeof data[key] === 'string')) {
+        // Confirm all keys and values are strings, or null
+        !Object.keys(data).every((key) => typeof key === 'string' &&
+            (typeof data[key] === 'string' || data[key] === null))) {
         return false;
     }
     return true;
 }
-export const fetchCrmProperties = async (propertyNames, propertiesUpdatedCallback) => {
+export const fetchCrmProperties = async (propertyNames, propertiesUpdatedCallback, options) => {
     try {
         // eslint-disable-next-line hubspot-dev/no-confusing-browser-globals
-        const response = await self.fetchCrmProperties(propertyNames, propertiesUpdatedCallback);
+        const response = await self.fetchCrmProperties(propertyNames, propertiesUpdatedCallback, options);
         if (!response.ok) {
             throw new Error(`Failed to fetch CRM properties: ${response.statusText}`);
         }
-        const data = await response.json();
-        if (!isCrmPropertiesResponse(data)) {
+        const result = await response.json();
+        if (!isCrmPropertiesResponse(result.data)) {
             throw new Error('Invalid response format');
         }
-        return data;
+        return result;
     }
     catch (error) {
         if (error instanceof Error) {

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

@@ -1,5 +1,6 @@
+import { type FetchCrmPropertiesOptions } from '../crm/fetchCrmProperties';
 export interface CrmPropertiesState {
-    properties: Record<string, string>;
+    properties: Record<string, string | null>;
     error: Error | null;
     isLoading: boolean;
 }
@@ -8,4 +9,4 @@ export interface CrmPropertiesState {
  *
  * @experimental This hook is experimental and might change or be removed in future versions.
  */
-export declare function useCrmProperties(propertyNames: string[]): CrmPropertiesState;
+export declare function useCrmProperties(propertyNames: string[], options?: FetchCrmPropertiesOptions): CrmPropertiesState;

package/dist/experimental/hooks/useCrmProperties.js

@@ -1,12 +1,13 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo, useRef } from 'react';
 import { logger } from '../../logger';
-import { fetchCrmProperties } from '../crm/fetchCrmProperties';
+import { fetchCrmProperties, } from '../crm/fetchCrmProperties';
+const DEFAULT_OPTIONS = {};
 /**
  * A hook for using and managing CRM properties.
  *
  * @experimental This hook is experimental and might change or be removed in future versions.
  */
-export function useCrmProperties(propertyNames) {
+export function useCrmProperties(propertyNames, options = DEFAULT_OPTIONS) {
     const [properties, setProperties] = useState({});
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState(null);
@@ -14,33 +15,74 @@ export function useCrmProperties(propertyNames) {
     useEffect(() => {
         logger.warn('useCrmProperties is an experimental hook and might change or be removed in the future.');
     }, []);
-    const propertiesUpdatedCallback = (newProperties) => {
-        setProperties(newProperties);
-    };
+    /**
+     * HOOK OPTIMIZATION:
+     *
+     * Create stable references for propertyNames and options to prevent unnecessary re-renders and API calls.
+     * Then, external developers can pass inline arrays/objects without worrying about memoization
+     * We handle the deep equality comparison ourselves, and return the same object reference when content is equivalent.
+     */
+    const lastPropertyNamesRef = useRef();
+    const lastPropertyNamesKeyRef = useRef();
+    const lastOptionsRef = useRef();
+    const lastOptionsKeyRef = useRef();
+    const stablePropertyNames = useMemo(() => {
+        const sortedNames = [...propertyNames].sort();
+        const propertyNamesKey = JSON.stringify(sortedNames);
+        if (propertyNamesKey === lastPropertyNamesKeyRef.current) {
+            return lastPropertyNamesRef.current;
+        }
+        lastPropertyNamesKeyRef.current = propertyNamesKey;
+        lastPropertyNamesRef.current = sortedNames;
+        return sortedNames;
+    }, [propertyNames]);
+    const stableOptions = useMemo(() => {
+        const optionsKey = JSON.stringify(options);
+        if (optionsKey === lastOptionsKeyRef.current) {
+            return lastOptionsRef.current;
+        }
+        lastOptionsKeyRef.current = optionsKey;
+        lastOptionsRef.current = options;
+        return options;
+    }, [options]);
     // Fetch the properties
     useEffect(() => {
-        (async () => {
+        let cancelled = false;
+        let cleanup = null;
+        const fetchData = async () => {
             try {
-                const propertyData = await fetchCrmProperties(propertyNames, propertiesUpdatedCallback);
-                setProperties(propertyData);
+                setIsLoading(true);
                 setError(null);
+                const result = await fetchCrmProperties(stablePropertyNames, setProperties, stableOptions);
+                if (!cancelled) {
+                    setProperties(result.data);
+                    cleanup = result.cleanup;
+                }
             }
             catch (err) {
-                const errorData = err instanceof Error
-                    ? err
-                    : new Error('Failed to fetch CRM properties');
-                setError(errorData);
-                setProperties({});
+                if (!cancelled) {
+                    const errorData = err instanceof Error
+                        ? err
+                        : new Error('Failed to fetch CRM properties');
+                    setError(errorData);
+                    setProperties({});
+                }
             }
             finally {
-                setIsLoading(false);
+                if (!cancelled) {
+                    setIsLoading(false);
+                }
             }
-        })().catch((err) => {
-            setError(err);
-            setProperties({});
-            setIsLoading(false);
-        });
-    }, [propertyNames]);
+        };
+        fetchData();
+        return () => {
+            cancelled = true;
+            // Call cleanup function to release RPC resources
+            if (cleanup) {
+                cleanup();
+            }
+        };
+    }, [stablePropertyNames, stableOptions]);
     return {
         properties,
         error,

package/dist/experimental/index.d.ts

@@ -83,4 +83,18 @@ 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>>;
-export { Iframe, MediaObject, Inline, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, };
+/**
+ * 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;
+    readonly props?: experimentalTypes.CurrencyInputProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"CurrencyInput", experimentalTypes.CurrencyInputProps, true>>;
+export { Iframe, MediaObject, Inline, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, TimeInput, CurrencyInput, };

package/dist/experimental/index.js

@@ -34,8 +34,12 @@ const ExpandableText = createRemoteReactComponent('ExpandableText');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/popover Popover Docs}
  */
-const Popover = createRemoteReactComponent('Popover', {
-    fragmentProps: ['header', 'body', 'footer'],
-});
+const Popover = createRemoteReactComponent('Popover');
 const FileInput = createRemoteReactComponent('FileInput');
-export { Iframe, MediaObject, Inline, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, ExpandableText, Popover, 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');
+export { Iframe, MediaObject, Inline, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, TimeInput, CurrencyInput, };

package/dist/experimental/types.d.ts

@@ -127,17 +127,39 @@ export interface ExpandableTextProps {
  * @experimental do not use in production
  */
 export interface PopoverProps {
+    /**
+     * A unique ID for the popover. Used to identify the popover in the overlay system.
+     *
+     */
+    id: string;
+    /**
+     * The content to render inside the popover.
+     */
     children: ReactNode;
-    open?: boolean;
-    onOpenChange?: () => void;
+    /**
+     * The placement of the popover.
+     *
+     * @defaultValue `top`
+     */
     placement?: 'left' | 'right' | 'top' | 'bottom';
-    header?: ReactNode;
-    body?: ReactNode;
-    footer?: ReactNode;
+    /**
+     * The variant of the popover.
+     *
+     * @defaultValue `default`
+     */
     variant?: 'default' | 'shepherd' | 'longform';
+    /**
+     * If set to `true`, will show the close button in the popover. PopoverHeader required to display close button.
+     *
+     * @defaultValue `false`
+     */
     showCloseButton?: boolean;
+    /**
+     * The size of the arrow in the popover. If set to `none`, the arrow will not be displayed.
+     *
+     * @defaultValue `small`
+     */
     arrowSize?: 'none' | 'small' | 'medium';
-    onClick?: ReactionsHandler<ExtensionEvent>;
 }
 export interface FileInputProps {
     value?: File | {
@@ -146,4 +168,167 @@ 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
+ * */
+export interface BaseInputProps<T = string, V = string> {
+    /**
+     * The label text to display for the form input element.
+     */
+    label: string;
+    /**
+     * The unique identifier for the input element, this could be thought of as the HTML5 [Input element's name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name).
+     */
+    name: string;
+    /**
+     * The value of the input.
+     */
+    value?: T;
+    /**
+     * Determines if the required indicator should be displayed.
+     *
+     * @defaultValue `false`
+     */
+    required?: boolean;
+    /**
+     * Determines if the field is editable or not.
+     *
+     * @defaultValue `false`
+     */
+    readOnly?: boolean;
+    /**
+     * Instructional message to display to the user to help understand the purpose of the input.
+     */
+    description?: string;
+    /**
+     * Text that will appear in a tooltip next to the input label.
+     */
+    tooltip?: string;
+    /**
+     * Text that appears in the input when it has no value set.
+     */
+    placeholder?: string;
+    /**
+     * If set to `true`, `validationMessage` is displayed as an error message, if it was provided. The input will also render its error state to let the user know there is an error. If set to `false`, `validationMessage` is displayed as a success message.
+     *
+     * @defaultValue `false`
+     */
+    error?: boolean;
+    /**
+     * The value of the input on the first render.
+     */
+    defaultValue?: T;
+    /**
+     * The text to show under the input for error or success validations.
+     */
+    validationMessage?: string;
+    /**
+     * A callback function that is invoked when the value is committed. Currently these times are `onBlur` of the input and when the user submits the form.
+     *
+     * @event
+     */
+    onChange?: (value: V) => void;
+    /**
+     * A function that is called and passed the value every time the field is edited by the user. It is recommended that you do not use this value to update state, that is what `onChange` should be used for. Instead this should be used for validation.
+     *
+     * @event
+     */
+    onInput?: (value: V) => void;
+    /**
+     * A function that is called and passed the value every time the field loses focus.
+     *
+     * @event
+     */
+    onBlur?: (value: V) => void;
+    /**
+     * A function that is called and passed the value every time the field gets focused.
+     *
+     * @event
+     */
+    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
+ */
+type BaseInputForNumber = Omit<BaseInputProps<number, number>, 'onInput'>;
+/**
+ * @ignore
+ * @experimental do not use in production
+ */
+export interface CurrencyInputProps extends BaseInputForNumber {
+    /**
+     * ISO 4217 currency code (e.g., "USD", "EUR", "JPY")
+     * @defaultValue "USD"
+     */
+    currency?: string;
+    /**
+     * Sets the number of decimal places for the currency
+     * If not provided, defaults to currency-specific precision
+     */
+    precision?: number;
+    /**
+     * Sets the lower bound of the input
+     */
+    min?: number;
+    /**
+     * Sets the upper bound of the input
+     */
+    max?: number;
+}
 export {};

package/dist/types.d.ts

@@ -1164,7 +1164,7 @@ export interface DateInputProps extends BaseDateInputForDate {
      */
     format?: 'YYYY-MM-DD' | 'L' | 'LL' | 'll' | 'short' | 'long' | 'medium' | 'standard';
     /**
-     * Sets the timezone that the component will user to calculate valid dates.
+     * Sets the timezone that the component will use to calculate valid dates.
      *
      * @defaultValue `"userTz"`
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -66,5 +66,5 @@
     "ts-jest": "^29.1.1",
     "typescript": "5.0.4"
   },
-  "gitHead": "c26a19d3df9eaef76a109947dfda71a9cc72451c"
+  "gitHead": "a5c7f8d19d0dc16b44e9235d3e12dacc2cc14fdf"
 }