@hubspot/ui-extensions 0.11.1 → 0.11.2

package/dist/__synced__/remoteComponents.synced.js

@@ -6,6 +6,9 @@ import { createRemoteComponentRegistry } from './utils/remote-component-registry
  */
 export const __hubSpotComponentRegistry = createRemoteComponentRegistry();
 const { createAndRegisterRemoteReactComponent, createAndRegisterRemoteCompoundReactComponent, } = __hubSpotComponentRegistry;
+////////////////////////////////////////////////////////////
+// STANDARD COMPONENTS
+////////////////////////////////////////////////////////////
 /**
  * The `Alert` component renders an alert within a card. Use this component to give usage guidance, notify users of action results, or warn them about potential issues or failures.
  *
@@ -586,3 +589,98 @@ export const CurrencyInput = createAndRegisterRemoteReactComponent('CurrencyInpu
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/simple-grid Docs}
  */
 export const AutoGrid = createAndRegisterRemoteReactComponent('AutoGrid');
+////////////////////////////////////////////////////////
+// CRM COMPONENTS
+////////////////////////////////////////////////////////
+export const CrmPropertyList = createAndRegisterRemoteReactComponent('CrmPropertyList');
+export const CrmAssociationTable = createAndRegisterRemoteReactComponent('CrmAssociationTable');
+export const CrmDataHighlight = createAndRegisterRemoteReactComponent('CrmDataHighlight');
+export const CrmReport = createAndRegisterRemoteReactComponent('CrmReport');
+export const CrmAssociationPivot = createAndRegisterRemoteReactComponent('CrmAssociationPivot');
+export const CrmAssociationPropertyList = createAndRegisterRemoteReactComponent('CrmAssociationPropertyList');
+export const CrmAssociationStageTracker = createAndRegisterRemoteReactComponent('CrmAssociationStageTracker');
+export const CrmSimpleDeadline = createAndRegisterRemoteReactComponent('CrmSimpleDeadline');
+export const CrmStageTracker = createAndRegisterRemoteReactComponent('CrmStageTracker');
+export const CrmStatistics = createAndRegisterRemoteReactComponent('CrmStatistics');
+export const CrmActionButton = createAndRegisterRemoteReactComponent('CrmActionButton');
+export const CrmActionLink = createAndRegisterRemoteReactComponent('CrmActionLink');
+export const CrmCardActions = createAndRegisterRemoteReactComponent('CrmCardActions');
+////////////////////////////////////////////////////////
+// APP HOME COMPONENTS
+////////////////////////////////////////////////////////
+/**
+ * The `HeaderActions` component renders a container for action buttons in the app home header. It accepts `PrimaryHeaderActionButton` and `SecondaryHeaderActionButton` as children.
+ *
+ */
+export const HeaderActions = createAndRegisterRemoteReactComponent('HeaderActions');
+/**
+ * The `PrimaryHeaderActionButton` component renders a primary action button in the app home header. This button is styled as the main call-to-action and only one should be used per `HeaderActions` container.
+ *
+ */
+export const PrimaryHeaderActionButton = createAndRegisterRemoteReactComponent('PrimaryHeaderActionButton', {
+    fragmentProps: ['overlay'],
+});
+/**
+ * The `SecondaryHeaderActionButton` component renders a secondary action button in the app home header. Multiple secondary actions can be used and they will be grouped appropriately in the header.
+ *
+ */
+export const SecondaryHeaderActionButton = createAndRegisterRemoteReactComponent('SecondaryHeaderActionButton', {
+    fragmentProps: ['overlay'],
+});
+////////////////////////////////////////////////////////
+// EXPERIMENTAL COMPONENTS
+////////////////////////////////////////////////////////
+/**
+ * @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.
+ */
+export const Iframe = createAndRegisterRemoteReactComponent('Iframe');
+/**
+ * @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.
+ */
+export const MediaObject = createAndRegisterRemoteReactComponent('MediaObject', {
+    fragmentProps: ['itemRight', 'itemLeft'],
+});
+/**
+ * @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.
+ */
+export const Stack2 = createAndRegisterRemoteReactComponent('Stack2');
+/**
+ * @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.
+ */
+export const Center = createAndRegisterRemoteReactComponent('Center');
+/**
+ * @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.
+ */
+export const Grid = createAndRegisterRemoteReactComponent('Grid');
+/**
+ * @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.
+ */
+export const GridItem = createAndRegisterRemoteReactComponent('GridItem');
+/**
+ * @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.
+ */
+export const SettingsView = createAndRegisterRemoteReactComponent('SettingsView');
+/**
+ * The `ExpandableText` component renders a text that can be expanded or collapsed based on a maximum height.
+ *
+ * @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.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/expandable-text ExpandableText Docs}
+ */
+export const ExpandableText = createAndRegisterRemoteReactComponent('ExpandableText');
+/**
+ * The `Popover` component renders a popover overlay that can contain other components.
+ *
+ * @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.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/popover Popover Docs}
+ */
+export const Popover = createAndRegisterRemoteReactComponent('Popover');
+/**
+ * @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.
+ */
+export const FileInput = createAndRegisterRemoteReactComponent('FileInput');

package/dist/__synced__/types/components/button.synced.d.ts

@@ -38,6 +38,12 @@ export interface BaseButtonProps {
      * @defaultValue `"md"`
      */
     size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
+    /**
+     * When set to `true`, long button text will be truncated with an ellipsis (`...`) and the full text will appear in a tooltip on hover.
+     *
+     * @defaultValue `false`
+     */
+    truncate?: boolean;
 }
 /**
  * The props type for {@link !components.Button}.

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

@@ -1,20 +1,24 @@
 import { renderHook, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
 import { useAssociations } from '../../../crm/hooks/useAssociations';
 import { fetchAssociations } from '../../../crm/utils/fetchAssociations';
 // Mock the logger module
-jest.mock('../../../logger', () => ({
+vi.mock('../../../logger', () => ({
     logger: {
-        debug: jest.fn(),
-        info: jest.fn(),
-        warn: jest.fn(),
-        error: jest.fn(),
+        debug: vi.fn(),
+        info: vi.fn(),
+        warn: vi.fn(),
+        error: vi.fn(),
     },
 }));
 // Mock the fetchAssociations function, keep utility functions
-jest.mock('../../../crm/utils/fetchAssociations', () => ({
-    ...jest.requireActual('../../../crm/utils/fetchAssociations'),
-    fetchAssociations: jest.fn(),
-}));
+vi.mock('../../../crm/utils/fetchAssociations', async (importOriginal) => {
+    const actual = (await importOriginal());
+    return {
+        ...actual,
+        fetchAssociations: vi.fn(),
+    };
+});
 // Get reference to the mocked function
 const mockFetchAssociations = fetchAssociations;
 describe('useAssociations with Pagination', () => {
@@ -45,7 +49,7 @@ describe('useAssociations with Pagination', () => {
                     hasMore: false,
                     nextOffset: 0,
                 },
-                cleanup: jest.fn(),
+                cleanup: vi.fn(),
             });
             const { result } = renderHook(() => useAssociations({
                 toObjectType: '0-1',
@@ -69,7 +73,7 @@ describe('useAssociations with Pagination', () => {
                     hasMore: false,
                     nextOffset: 0,
                 },
-                cleanup: jest.fn(),
+                cleanup: vi.fn(),
             });
             const { result } = renderHook(() => useAssociations({
                 toObjectType: '0-1',
@@ -99,7 +103,7 @@ describe('useAssociations with Pagination', () => {
                     hasMore: true,
                     nextOffset: 10,
                 },
-                cleanup: jest.fn(),
+                cleanup: vi.fn(),
             });
             const { result } = renderHook(() => useAssociations({
                 toObjectType: '0-1',
@@ -128,7 +132,7 @@ describe('useAssociations with Pagination', () => {
                     hasMore: false,
                     nextOffset: 0,
                 },
-                cleanup: jest.fn(),
+                cleanup: vi.fn(),
             });
             const { result } = renderHook(() => useAssociations({
                 toObjectType: '0-1',
@@ -153,7 +157,7 @@ describe('useAssociations with Pagination', () => {
                     hasMore: true,
                     nextOffset: 10,
                 },
-                cleanup: jest.fn(),
+                cleanup: vi.fn(),
             });
             // Second page response
             mockFetchAssociations.mockResolvedValueOnce({
@@ -162,7 +166,7 @@ describe('useAssociations with Pagination', () => {
                     hasMore: false,
                     nextOffset: 20,
                 },
-                cleanup: jest.fn(),
+                cleanup: vi.fn(),
             });
             const { result } = renderHook(() => useAssociations({
                 toObjectType: '0-1',
@@ -193,7 +197,7 @@ describe('useAssociations with Pagination', () => {
                     hasMore: true,
                     nextOffset: 10,
                 },
-                cleanup: jest.fn(),
+                cleanup: vi.fn(),
             });
             // Second call: page 2 with hasMore: false
             mockFetchAssociations.mockResolvedValueOnce({
@@ -202,7 +206,7 @@ describe('useAssociations with Pagination', () => {
                     hasMore: false,
                     nextOffset: 20,
                 },
-                cleanup: jest.fn(),
+                cleanup: vi.fn(),
             });
             // Third call: back to page 1
             mockFetchAssociations.mockResolvedValueOnce({
@@ -211,7 +215,7 @@ describe('useAssociations with Pagination', () => {
                     hasMore: true,
                     nextOffset: 10,
                 },
-                cleanup: jest.fn(),
+                cleanup: vi.fn(),
             });
             const { result } = renderHook(() => useAssociations({
                 toObjectType: '0-1',
@@ -243,7 +247,7 @@ describe('useAssociations with Pagination', () => {
                     hasMore: true,
                     nextOffset: 10,
                 },
-                cleanup: jest.fn(),
+                cleanup: vi.fn(),
             });
             const { result } = renderHook(() => useAssociations({
                 toObjectType: '0-1',
@@ -277,7 +281,7 @@ describe('useAssociations with Pagination', () => {
                     hasMore: false,
                     nextOffset: 10,
                 },
-                cleanup: jest.fn(),
+                cleanup: vi.fn(),
             });
             const { result } = renderHook(() => useAssociations({
                 toObjectType: '0-1',
@@ -320,7 +324,7 @@ describe('useAssociations with Pagination', () => {
                     hasMore: false,
                     nextOffset: 0,
                 },
-                cleanup: jest.fn(),
+                cleanup: vi.fn(),
             });
             // @ts-expect-error - intentional type issue to check the failure state
             const { result } = renderHook(() => useAssociations(null));
@@ -343,7 +347,7 @@ describe('useAssociations with Pagination', () => {
                     hasMore: false,
                     nextOffset: 0,
                 },
-                cleanup: jest.fn(),
+                cleanup: vi.fn(),
             });
             // @ts-expect-error - intentional type issue to check the failure state
             const { result } = renderHook(() => useAssociations(undefined));
@@ -366,7 +370,7 @@ describe('useAssociations with Pagination', () => {
                     hasMore: false,
                     nextOffset: 0,
                 },
-                cleanup: jest.fn(),
+                cleanup: vi.fn(),
             });
             // @ts-expect-error - intentional type issue to check the failure state
             const { result } = renderHook(() => useAssociations({}));
@@ -389,7 +393,7 @@ describe('useAssociations with Pagination', () => {
                     hasMore: false,
                     nextOffset: 0,
                 },
-                cleanup: jest.fn(),
+                cleanup: vi.fn(),
             });
             const { result } = renderHook(() => 
             // @ts-expect-error - intentional type issue to check the failure state
@@ -415,7 +419,7 @@ describe('useAssociations with Pagination', () => {
                     hasMore: false,
                     nextOffset: 0,
                 },
-                cleanup: jest.fn(),
+                cleanup: vi.fn(),
             });
             const { result } = renderHook(() => useAssociations({
                 toObjectType: '0-1',
@@ -441,7 +445,7 @@ describe('useAssociations with Pagination', () => {
                     hasMore: false,
                     nextOffset: 0,
                 },
-                cleanup: jest.fn(),
+                cleanup: vi.fn(),
             });
             const config = {
                 toObjectType: '0-1',
@@ -469,7 +473,7 @@ describe('useAssociations with Pagination', () => {
                     hasMore: false,
                     nextOffset: 0,
                 },
-                cleanup: jest.fn(),
+                cleanup: vi.fn(),
             });
             const config = {
                 toObjectType: '0-1',
@@ -484,7 +488,7 @@ describe('useAssociations with Pagination', () => {
     });
     describe('lifecycle management', () => {
         it('should call cleanup function on unmount', async () => {
-            const mockCleanup = jest.fn();
+            const mockCleanup = vi.fn();
             mockFetchAssociations.mockResolvedValue({
                 data: {
                     results: [],
@@ -514,7 +518,7 @@ describe('useAssociations with Pagination', () => {
                     hasMore: false,
                     nextOffset: 0,
                 },
-                cleanup: jest.fn(),
+                cleanup: vi.fn(),
             });
             const config = {
                 toObjectType: '0-1',

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

@@ -1,18 +1,19 @@
 import { renderHook, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
 import { useCrmProperties } from '../../../crm/hooks/useCrmProperties';
+import * as fetchCrmPropertiesModule from '../../../crm/utils/fetchCrmProperties';
 // Mock the logger module
-jest.mock('../../../logger', () => ({
+vi.mock('../../../logger', () => ({
     logger: {
-        debug: jest.fn(),
-        info: jest.fn(),
-        warn: jest.fn(),
-        error: jest.fn(),
+        debug: vi.fn(),
+        info: vi.fn(),
+        warn: vi.fn(),
+        error: vi.fn(),
     },
 }));
 // Mock the fetchCrmProperties module
-jest.mock('../../../crm/utils/fetchCrmProperties');
-const mockFetchCrmProperties = jest.fn();
-import * as fetchCrmPropertiesModule from '../../../crm/utils/fetchCrmProperties';
+vi.mock('../../../crm/utils/fetchCrmProperties');
+const mockFetchCrmProperties = vi.fn();
 fetchCrmPropertiesModule.fetchCrmProperties = mockFetchCrmProperties;
 describe('useCrmProperties', () => {
     let originalError;
@@ -46,7 +47,7 @@ describe('useCrmProperties', () => {
                 firstname: 'Test value for firstname',
                 lastname: 'Test value for lastname',
             },
-            cleanup: jest.fn(),
+            cleanup: vi.fn(),
         });
         const propertyNames = ['firstname', 'lastname'];
         const { result } = renderHook(() => useCrmProperties(propertyNames));
@@ -78,7 +79,7 @@ describe('useCrmProperties', () => {
             capturedCallback = propertiesUpdatedCallback;
             return {
                 data: { firstname: 'Initial', lastname: 'Initial' },
-                cleanup: jest.fn(),
+                cleanup: vi.fn(),
             };
         });
         const propertyNames = ['firstname', 'lastname'];
@@ -105,7 +106,7 @@ describe('useCrmProperties', () => {
             capturedCallback = propertiesUpdatedCallback;
             return {
                 data: { firstname: 'Initial', lastname: null },
-                cleanup: jest.fn(),
+                cleanup: vi.fn(),
             };
         });
         const propertyNames = ['firstname', 'lastname'];
@@ -132,7 +133,7 @@ describe('useCrmProperties', () => {
                 firstname: 'John',
                 lastname: 'Doe',
             },
-            cleanup: jest.fn(),
+            cleanup: vi.fn(),
         });
         const propertyNames = ['firstname', 'lastname'];
         const options = {
@@ -148,7 +149,7 @@ describe('useCrmProperties', () => {
             data: {
                 firstname: 'John',
             },
-            cleanup: jest.fn(),
+            cleanup: vi.fn(),
         });
         const propertyNames = ['firstname'];
         const defaultOptions = {};
@@ -162,7 +163,7 @@ describe('useCrmProperties', () => {
             data: {
                 firstname: 'John',
             },
-            cleanup: jest.fn(),
+            cleanup: vi.fn(),
         });
         const propertyNames = ['firstname'];
         const initialOptions = { propertiesToFormat: ['firstname'] };
@@ -181,7 +182,7 @@ describe('useCrmProperties', () => {
             data: {
                 firstname: 'John',
             },
-            cleanup: jest.fn(),
+            cleanup: vi.fn(),
         });
         const propertyNames = ['firstname'];
         const initialOptions = { propertiesToFormat: ['firstname'] };
@@ -201,7 +202,7 @@ describe('useCrmProperties', () => {
         });
     });
     it('should call cleanup function when component unmounts', async () => {
-        const mockCleanup = jest.fn();
+        const mockCleanup = vi.fn();
         mockFetchCrmProperties.mockResolvedValue({
             data: {
                 firstname: 'John',
@@ -217,8 +218,8 @@ describe('useCrmProperties', () => {
         expect(mockCleanup).toHaveBeenCalledTimes(1);
     });
     it('should call cleanup function when dependencies change', async () => {
-        const mockCleanup1 = jest.fn();
-        const mockCleanup2 = jest.fn();
+        const mockCleanup1 = vi.fn();
+        const mockCleanup2 = vi.fn();
         mockFetchCrmProperties
             .mockResolvedValueOnce({
             data: { firstname: 'John' },

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

@@ -1,5 +1,6 @@
+import { vi } from 'vitest';
 // Set up the mock before importing the module
-const mockFetchAssociations = jest.fn();
+const mockFetchAssociations = vi.fn();
 const mockSelf = {
     fetchAssociations: mockFetchAssociations,
 };
@@ -13,13 +14,13 @@ describe('fetchAssociations', () => {
     // Helper functions
     const createMockResponse = (data, overrides = {}) => ({
         ok: true,
-        json: jest.fn().mockResolvedValue({ data, cleanup: jest.fn() }),
+        json: vi.fn().mockResolvedValue({ data, cleanup: vi.fn() }),
         ...overrides,
     });
     const createErrorResponse = (statusText) => ({
         ok: false,
         statusText,
-        json: jest.fn().mockResolvedValue({}),
+        json: vi.fn().mockResolvedValue({}),
     });
     const expectError = async (request, expectedMessage) => {
         await expect(fetchAssociations(request)).rejects.toThrow(expectedMessage);
@@ -30,7 +31,7 @@ describe('fetchAssociations', () => {
         ...overrides,
     });
     beforeEach(() => {
-        jest.clearAllMocks();
+        vi.clearAllMocks();
         // Set up dynamic mock that responds to request parameters
         mockFetchAssociations.mockImplementation((request) => {
             const { pageLength = 100, offset = 0, properties = [] } = request;
@@ -296,12 +297,12 @@ describe('fetchAssociations', () => {
             expect(mockFetchAssociations).toHaveBeenCalledWith(request, undefined);
         });
         it('should return cleanup function from API response', async () => {
-            const mockCleanup = jest.fn();
+            const mockCleanup = vi.fn();
             const emptyData = { results: [], hasMore: false, nextOffset: 0 };
             const mockApiResponse = { data: emptyData, cleanup: mockCleanup };
             mockFetchAssociations.mockResolvedValueOnce({
                 ok: true,
-                json: jest.fn().mockResolvedValue(mockApiResponse),
+                json: vi.fn().mockResolvedValue(mockApiResponse),
             });
             const result = await fetchAssociations(createBasicRequest());
             expect(result.cleanup).toBe(mockCleanup);
@@ -313,7 +314,7 @@ describe('fetchAssociations', () => {
             const mockApiResponse = { data: emptyData }; // no cleanup function provided
             mockFetchAssociations.mockResolvedValueOnce({
                 ok: true,
-                json: jest.fn().mockResolvedValue(mockApiResponse),
+                json: vi.fn().mockResolvedValue(mockApiResponse),
             });
             const result = await fetchAssociations(createBasicRequest());
             expect(typeof result.cleanup).toBe('function');