@hubspot/ui-extensions 0.9.8 → 0.10.1

package/dist/__tests__/{experimental → crm}/hooks/useAssociations.spec.js

@@ -1,6 +1,6 @@
 import { renderHook, waitFor } from '@testing-library/react';
-import { useAssociations } from '../../../experimental/hooks/useAssociations';
-import { fetchAssociations } from '../../../experimental/crm/fetchAssociations';
+import { useAssociations } from '../../../crm/hooks/useAssociations';
+import { fetchAssociations } from '../../../crm/utils/fetchAssociations';
 // Mock the logger module
 jest.mock('../../../logger', () => ({
     logger: {
@@ -11,8 +11,8 @@ jest.mock('../../../logger', () => ({
     },
 }));
 // Mock the fetchAssociations function, keep utility functions
-jest.mock('../../../experimental/crm/fetchAssociations', () => ({
-    ...jest.requireActual('../../../experimental/crm/fetchAssociations'),
+jest.mock('../../../crm/utils/fetchAssociations', () => ({
+    ...jest.requireActual('../../../crm/utils/fetchAssociations'),
     fetchAssociations: jest.fn(),
 }));
 // Get reference to the mocked function
@@ -313,6 +313,125 @@ describe('useAssociations with Pagination', () => {
                 expect(result.current.isLoading).toBe(false);
             });
         });
+        it('should handle null config gracefully', async () => {
+            mockFetchAssociations.mockResolvedValue({
+                data: {
+                    results: [],
+                    hasMore: false,
+                    nextOffset: 0,
+                },
+                cleanup: jest.fn(),
+            });
+            // @ts-expect-error - intentional type issue to check the failure state
+            const { result } = renderHook(() => useAssociations(null));
+            await waitFor(() => {
+                expect(result.current.isLoading).toBe(false);
+                expect(result.current.results).toEqual([]);
+                expect(result.current.pagination.pageSize).toBe(10); // DEFAULT_PAGE_SIZE
+            });
+            expect(mockFetchAssociations).toHaveBeenCalledWith(expect.objectContaining({
+                toObjectType: undefined,
+                properties: undefined,
+                pageLength: 10,
+                offset: undefined,
+            }), expect.any(Object));
+        });
+        it('should handle undefined config gracefully', async () => {
+            mockFetchAssociations.mockResolvedValue({
+                data: {
+                    results: [],
+                    hasMore: false,
+                    nextOffset: 0,
+                },
+                cleanup: jest.fn(),
+            });
+            // @ts-expect-error - intentional type issue to check the failure state
+            const { result } = renderHook(() => useAssociations(undefined));
+            await waitFor(() => {
+                expect(result.current.isLoading).toBe(false);
+                expect(result.current.results).toEqual([]);
+                expect(result.current.pagination.pageSize).toBe(10); // DEFAULT_PAGE_SIZE
+            });
+            expect(mockFetchAssociations).toHaveBeenCalledWith(expect.objectContaining({
+                toObjectType: undefined,
+                properties: undefined,
+                pageLength: 10,
+                offset: undefined,
+            }), expect.any(Object));
+        });
+        it('should handle empty config object gracefully', async () => {
+            mockFetchAssociations.mockResolvedValue({
+                data: {
+                    results: [],
+                    hasMore: false,
+                    nextOffset: 0,
+                },
+                cleanup: jest.fn(),
+            });
+            // @ts-expect-error - intentional type issue to check the failure state
+            const { result } = renderHook(() => useAssociations({}));
+            await waitFor(() => {
+                expect(result.current.isLoading).toBe(false);
+                expect(result.current.results).toEqual([]);
+                expect(result.current.pagination.pageSize).toBe(10); // DEFAULT_PAGE_SIZE
+            });
+            expect(mockFetchAssociations).toHaveBeenCalledWith(expect.objectContaining({
+                toObjectType: undefined,
+                properties: undefined,
+                pageLength: 10,
+                offset: undefined,
+            }), expect.any(Object));
+        });
+        it('should handle config with missing toObjectType', async () => {
+            mockFetchAssociations.mockResolvedValue({
+                data: {
+                    results: [],
+                    hasMore: false,
+                    nextOffset: 0,
+                },
+                cleanup: jest.fn(),
+            });
+            const { result } = renderHook(() => 
+            // @ts-expect-error - intentional type issue to check the failure state
+            useAssociations({
+                properties: ['firstname'],
+                pageLength: 5,
+            }));
+            await waitFor(() => {
+                expect(result.current.isLoading).toBe(false);
+                expect(result.current.pagination.pageSize).toBe(5);
+            });
+            expect(mockFetchAssociations).toHaveBeenCalledWith(expect.objectContaining({
+                toObjectType: undefined,
+                properties: ['firstname'],
+                pageLength: 5,
+                offset: undefined,
+            }), expect.any(Object));
+        });
+        it('should handle config with missing properties', async () => {
+            mockFetchAssociations.mockResolvedValue({
+                data: {
+                    results: [],
+                    hasMore: false,
+                    nextOffset: 0,
+                },
+                cleanup: jest.fn(),
+            });
+            const { result } = renderHook(() => useAssociations({
+                toObjectType: '0-1',
+                pageLength: 8,
+            }));
+            await waitFor(() => {
+                expect(result.current.isLoading).toBe(false);
+                expect(result.current.pagination.pageSize).toBe(8);
+            });
+            expect(mockFetchAssociations).toHaveBeenCalledWith(expect.objectContaining({
+                toObjectType: '0-1',
+                properties: undefined,
+                pageLength: 8,
+                offset: undefined,
+            }), expect.any(Object));
+        });
     });
     describe('options handling', () => {
         it('should pass formatting options to fetchAssociations', async () => {

package/dist/__tests__/{experimental → crm}/hooks/useCrmProperties.spec.js

@@ -1,5 +1,5 @@
 import { renderHook, waitFor } from '@testing-library/react';
-import { useCrmProperties } from '../../../experimental/hooks/useCrmProperties';
+import { useCrmProperties } from '../../../crm/hooks/useCrmProperties';
 // Mock the logger module
 jest.mock('../../../logger', () => ({
     logger: {
@@ -10,9 +10,9 @@ jest.mock('../../../logger', () => ({
     },
 }));
 // Mock the fetchCrmProperties module
-jest.mock('../../../experimental/crm/fetchCrmProperties');
+jest.mock('../../../crm/utils/fetchCrmProperties');
 const mockFetchCrmProperties = jest.fn();
-import * as fetchCrmPropertiesModule from '../../../experimental/crm/fetchCrmProperties';
+import * as fetchCrmPropertiesModule from '../../../crm/utils/fetchCrmProperties';
 fetchCrmPropertiesModule.fetchCrmProperties = mockFetchCrmProperties;
 describe('useCrmProperties', () => {
     let originalError;
@@ -239,4 +239,18 @@ describe('useCrmProperties', () => {
             expect(mockCleanup1).toHaveBeenCalledTimes(1);
         });
     });
+    it('should handle non-array propertyNames without crashing during stabilization', async () => {
+        const errorMessage = 'Properties must be an array of strings';
+        mockFetchCrmProperties.mockRejectedValue(new Error(errorMessage));
+        const nonArrayPropertyNames = 2;
+        const { result } = renderHook(() => 
+        // @ts-expect-error - we are deliberately testing a bad type
+        useCrmProperties(nonArrayPropertyNames));
+        await waitFor(() => {
+            expect(result.current.error).toBeInstanceOf(Error);
+            expect(result.current.error?.message).toBe(errorMessage);
+            expect(result.current.isLoading).toBe(false);
+        });
+        expect(mockFetchCrmProperties).toHaveBeenCalledWith(2, expect.any(Function), {});
+    });
 });

package/dist/__tests__/{experimental/crm → crm/utils}/fetchAssociations.spec.js

@@ -8,7 +8,7 @@ Object.defineProperty(global, 'self', {
     value: mockSelf,
     writable: true,
 });
-import { fetchAssociations, calculatePaginationFlags, } from '../../../experimental/crm/fetchAssociations';
+import { fetchAssociations, calculatePaginationFlags, } from '../../../crm/utils/fetchAssociations';
 describe('fetchAssociations', () => {
     // Helper functions
     const createMockResponse = (data, overrides = {}) => ({

package/dist/__tests__/{experimental/crm → crm/utils}/fetchCrmProperties.spec.js

@@ -8,7 +8,7 @@ Object.defineProperty(global, 'self', {
     value: mockSelf,
     writable: true,
 });
-import { fetchCrmProperties } from '../../../experimental/crm/fetchCrmProperties';
+import { fetchCrmProperties } from '../../../crm/utils/fetchCrmProperties';
 const DEFAULT_OPTIONS = {};
 describe('fetchCrmProperties', () => {
     beforeEach(() => {

package/dist/__tests__/test-d/extension-points.test-d.d.ts

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

package/dist/__tests__/test-d/extension-points.test-d.js

@@ -0,0 +1,29 @@
+import { expectAssignable } from 'tsd';
+// Test app home extension point
+expectAssignable({
+    actions: {
+        addAlert: () => { },
+        copyTextToClipboard: async () => { },
+        closeOverlay: () => { },
+        reloadPage: () => { },
+        openIframeModal: () => { },
+    },
+    context: {
+        user: {
+            id: 123,
+            emails: ['test@example.com'],
+            email: 'test@example.com',
+            firstName: 'John',
+            lastName: 'Doe',
+            roles: [],
+            teams: [],
+            permissions: [],
+        },
+        portal: {
+            id: 456,
+            timezone: 'America/New_York',
+        },
+        location: 'home',
+    },
+    customComponents: {},
+});

package/dist/coreComponents.d.ts

@@ -830,3 +830,15 @@ export declare const CurrencyInput: "CurrencyInput" & {
     readonly props?: types.InlineProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Inline", types.InlineProps, true>>;
+/**
+ * The `AutoGrid` component renders a responsive grid layout that automatically adjusts the number of columns based on available space. Use this component to create flexible grid layouts for cards, tiles, or other content.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/simple-grid Docs}
+ */
+export declare const AutoGrid: "AutoGrid" & {
+    readonly type?: "AutoGrid" | undefined;
+    readonly props?: types.AutoGridProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"AutoGrid", types.AutoGridProps, true>>;

package/dist/coreComponents.js

@@ -558,3 +558,11 @@ export const CurrencyInput = createRemoteReactComponent('CurrencyInput');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/inline Docs}
  */ export const Inline = createRemoteReactComponent('Inline');
+/**
+ * The `AutoGrid` component renders a responsive grid layout that automatically adjusts the number of columns based on available space. Use this component to create flexible grid layouts for cards, tiles, or other content.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/simple-grid Docs}
+ */
+export const AutoGrid = createRemoteReactComponent('AutoGrid');

package/dist/{experimental → crm}/hooks/useAssociations.d.ts

@@ -1,5 +1,5 @@
-import { type FetchAssociationsRequest, type AssociationResult } from '../crm/fetchAssociations';
-import { type FetchCrmPropertiesOptions } from '../crm/fetchCrmProperties';
+import { type FetchAssociationsRequest, type AssociationResult } from '../utils/fetchAssociations';
+import { type FetchCrmPropertiesOptions } from '../utils/fetchCrmProperties';
 export interface UseAssociationsOptions {
     propertiesToFormat?: 'all' | string[];
     formattingOptions?: FetchCrmPropertiesOptions['formattingOptions'];
@@ -19,4 +19,7 @@ export interface UseAssociationsResult {
     isLoading: boolean;
     pagination: UseAssociationsPagination;
 }
+/**
+ * A hook to fetch and manage associations between CRM objects with pagination support.
+ */
 export declare function useAssociations(config: Omit<FetchAssociationsRequest, 'offset'>, options?: UseAssociationsOptions): UseAssociationsResult;

package/dist/{experimental → crm}/hooks/useAssociations.js

@@ -1,6 +1,5 @@
 import { useEffect, useReducer, useMemo, useRef, useCallback } from 'react';
-import { logger } from '../../logger';
-import { fetchAssociations, DEFAULT_PAGE_SIZE, calculatePaginationFlags, } from '../crm/fetchAssociations';
+import { fetchAssociations, DEFAULT_PAGE_SIZE, calculatePaginationFlags, } from '../utils/fetchAssociations';
 function createInitialState(pageSize) {
     return {
         results: [],
@@ -80,13 +79,12 @@ function associationsReducer(state, action) {
     }
 }
 const DEFAULT_OPTIONS = {};
+/**
+ * A hook to fetch and manage associations between CRM objects with pagination support.
+ */
 export function useAssociations(config, options = DEFAULT_OPTIONS) {
-    const pageSize = config.pageLength ?? DEFAULT_PAGE_SIZE;
+    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.');
-    }, []);
     /**
      * HOOK OPTIMIZATION:
      *
@@ -141,8 +139,8 @@ export function useAssociations(config, options = DEFAULT_OPTIONS) {
                 dispatch({ type: 'FETCH_START' });
                 // Build request using current offset token
                 const request = {
-                    toObjectType: stableConfig.toObjectType,
-                    properties: stableConfig.properties,
+                    toObjectType: stableConfig?.toObjectType,
+                    properties: stableConfig?.properties,
                     pageLength: pageSize,
                     offset: state.currentOffset,
                 };

package/dist/{experimental → crm}/hooks/useCrmProperties.d.ts

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

package/dist/{experimental → crm}/hooks/useCrmProperties.js

@@ -1,6 +1,5 @@
 import { useEffect, useReducer, useMemo, useRef } from 'react';
-import { logger } from '../../logger';
-import { fetchCrmProperties, } from '../crm/fetchCrmProperties';
+import { fetchCrmProperties, } from '../utils/fetchCrmProperties';
 const initialState = {
     properties: {},
     error: null,
@@ -35,15 +34,9 @@ function crmPropertiesReducer(state, action) {
 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, options = DEFAULT_OPTIONS) {
     const [state, dispatch] = useReducer(crmPropertiesReducer, initialState);
-    // Log experimental warning once on mount
-    useEffect(() => {
-        logger.warn('useCrmProperties is an experimental hook and might change or be removed in the future.');
-    }, []);
     /**
      * HOOK OPTIMIZATION:
      *
@@ -56,6 +49,9 @@ export function useCrmProperties(propertyNames, options = DEFAULT_OPTIONS) {
     const lastOptionsRef = useRef();
     const lastOptionsKeyRef = useRef();
     const stablePropertyNames = useMemo(() => {
+        if (!Array.isArray(propertyNames)) {
+            return propertyNames;
+        }
         const sortedNames = [...propertyNames].sort();
         const propertyNamesKey = JSON.stringify(sortedNames);
         if (propertyNamesKey === lastPropertyNamesKeyRef.current) {

package/dist/crm/index.d.ts

@@ -1,2 +1,4 @@
 import { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmAssociationStageTracker, CrmSimpleDeadline, CrmStageTracker, CrmStatistics, CrmActionButton, CrmActionLink, CrmCardActions } from './components';
 export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmAssociationStageTracker, CrmSimpleDeadline, CrmStageTracker, CrmStatistics, CrmActionButton, CrmActionLink, CrmCardActions, };
+export { useCrmProperties } from './hooks/useCrmProperties';
+export { useAssociations } from './hooks/useAssociations';

package/dist/crm/index.js

@@ -1,2 +1,4 @@
 import { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmAssociationStageTracker, CrmSimpleDeadline, CrmStageTracker, CrmStatistics, CrmActionButton, CrmActionLink, CrmCardActions, } from './components';
 export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmAssociationStageTracker, CrmSimpleDeadline, CrmStageTracker, CrmStatistics, CrmActionButton, CrmActionLink, CrmCardActions, };
+export { useCrmProperties } from './hooks/useCrmProperties';
+export { useAssociations } from './hooks/useAssociations';

package/dist/experimental/index.d.ts

@@ -1,7 +1,7 @@
 import type * as types from '../types';
 import type * as experimentalTypes from './types';
-export { useCrmProperties } from './hooks/useCrmProperties';
-export { useAssociations } from './hooks/useAssociations';
+export { useCrmProperties } from '../crm/hooks/useCrmProperties';
+export { useAssociations } from '../crm/hooks/useAssociations';
 /** @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 Iframe: "Iframe" & {
     readonly type?: "Iframe" | undefined;
@@ -27,12 +27,6 @@ declare const Center: "Center" & {
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Center", experimentalTypes.CenterProps, 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 SimpleGrid: "SimpleGrid" & {
-    readonly type?: "SimpleGrid" | undefined;
-    readonly props?: experimentalTypes.SimpleGridProps | undefined;
-    readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"SimpleGrid", experimentalTypes.SimpleGridProps, 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 Grid: "Grid" & {
     readonly type?: "Grid" | undefined;
     readonly props?: experimentalTypes.GridProps | undefined;
@@ -78,22 +72,4 @@ 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>>;
-/** @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 HeaderActions: "HeaderActions" & {
-    readonly type?: "HeaderActions" | undefined;
-    readonly props?: experimentalTypes.HeaderActionsProps | undefined;
-    readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"HeaderActions", experimentalTypes.HeaderActionsProps, 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 PrimaryHeaderActionButton: "PrimaryHeaderActionButton" & {
-    readonly type?: "PrimaryHeaderActionButton" | undefined;
-    readonly props?: experimentalTypes.HeaderActionButtonProps | undefined;
-    readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"PrimaryHeaderActionButton", experimentalTypes.HeaderActionButtonProps, 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 SecondaryHeaderActionButton: "SecondaryHeaderActionButton" & {
-    readonly type?: "SecondaryHeaderActionButton" | undefined;
-    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, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, HeaderActions, PrimaryHeaderActionButton, SecondaryHeaderActionButton, };
+export { Iframe, MediaObject, Stack2, Center, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, };

package/dist/experimental/index.js

@@ -1,6 +1,6 @@
 import { createRemoteReactComponent } from '@remote-ui/react';
-export { useCrmProperties } from './hooks/useCrmProperties';
-export { useAssociations } from './hooks/useAssociations';
+export { useCrmProperties } from '../crm/hooks/useCrmProperties';
+export { useAssociations } from '../crm/hooks/useAssociations';
 /** @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 Iframe = createRemoteReactComponent('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. */
@@ -12,8 +12,6 @@ const Stack2 = createRemoteReactComponent('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. */
 const Center = createRemoteReactComponent('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. */
-const SimpleGrid = createRemoteReactComponent('SimpleGrid');
-/** @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 Grid = createRemoteReactComponent('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. */
 const GridItem = createRemoteReactComponent('GridItem');
@@ -35,14 +33,4 @@ const ExpandableText = createRemoteReactComponent('ExpandableText');
  */
 const Popover = createRemoteReactComponent('Popover');
 const FileInput = createRemoteReactComponent('FileInput');
-/** @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 HeaderActions = createRemoteReactComponent('HeaderActions');
-/** @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 PrimaryHeaderActionButton = createRemoteReactComponent('PrimaryHeaderActionButton', {
-    fragmentProps: ['overlay'],
-});
-/** @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 SecondaryHeaderActionButton = createRemoteReactComponent('SecondaryHeaderActionButton', {
-    fragmentProps: ['overlay'],
-});
-export { Iframe, MediaObject, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, HeaderActions, PrimaryHeaderActionButton, SecondaryHeaderActionButton, };
+export { Iframe, MediaObject, Stack2, Center, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, };

package/dist/experimental/types.d.ts

@@ -48,15 +48,6 @@ export interface MediaObjectProps {
     itemLeft?: RemoteFragment;
     itemRight?: RemoteFragment;
 }
-/**
- * @ignore
- * @experimental do not use in production
- */
-export interface SimpleGridProps extends BaseLayout {
-    minColumnWidth: number | string;
-    gap?: AllDistances;
-    children?: ReactNode;
-}
 export interface GridProps {
     justify?: FlexJustify;
     align?: FlexAlign;
@@ -238,29 +229,8 @@ export interface BaseInputProps<T = string, V = string> {
      */
     onFocus?: (value: V) => void;
 }
+export {};
 /**
  * @ignore
  * @experimental do not use in production
  */
-/**
- * @ignore
- * @experimental do not use in production
- */
-export interface HeaderActionsProps {
-    children: ReactNode;
-}
-/**
- * @ignore
- * @experimental do not use in production
- */
-export interface HeaderActionButtonProps {
-    onClick?: ReactionsHandler<ExtensionEvent>;
-    href?: string | {
-        url: string;
-        external?: boolean;
-    };
-    disabled?: boolean;
-    children: ReactNode;
-    overlay?: RemoteFragment;
-}
-export {};

package/dist/experimental/types.js

@@ -1 +1,5 @@
 export {};
+/**
+ * @ignore
+ * @experimental do not use in production
+ */

package/dist/pages/home/components.d.ts

@@ -0,0 +1,28 @@
+import type * as types from '../../types';
+/**
+ * The `HeaderActions` component renders a container for action buttons in the app home header. It accepts `PrimaryHeaderActionButton` and `SecondaryHeaderActionButton` as children.
+ *
+ */
+export declare const HeaderActions: "HeaderActions" & {
+    readonly type?: "HeaderActions" | undefined;
+    readonly props?: types.HeaderActionsProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"HeaderActions", types.HeaderActionsProps, true>>;
+/**
+ * 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 declare const PrimaryHeaderActionButton: "PrimaryHeaderActionButton" & {
+    readonly type?: "PrimaryHeaderActionButton" | undefined;
+    readonly props?: types.HeaderActionButtonProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"PrimaryHeaderActionButton", types.HeaderActionButtonProps, true>>;
+/**
+ * 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 declare const SecondaryHeaderActionButton: "SecondaryHeaderActionButton" & {
+    readonly type?: "SecondaryHeaderActionButton" | undefined;
+    readonly props?: types.HeaderActionButtonProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"SecondaryHeaderActionButton", types.HeaderActionButtonProps, true>>;

package/dist/pages/home/components.js

@@ -0,0 +1,20 @@
+import { createRemoteReactComponent } from '@remote-ui/react';
+/**
+ * The `HeaderActions` component renders a container for action buttons in the app home header. It accepts `PrimaryHeaderActionButton` and `SecondaryHeaderActionButton` as children.
+ *
+ */
+export const HeaderActions = createRemoteReactComponent('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 = createRemoteReactComponent('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 = createRemoteReactComponent('SecondaryHeaderActionButton', {
+    fragmentProps: ['overlay'],
+});

package/dist/types.d.ts

@@ -239,6 +239,7 @@ export interface UiePlatformActions {
     copyTextToClipboard: Clipboard['writeText'];
     closeOverlay: CloseOverlayAction;
     reloadPage: ReloadPageAction;
+    openIframeModal: OpenIframeModalAction;
 }
 /**
  * The props type for {@link !components.Accordion}.
@@ -309,6 +310,42 @@ export interface AlertProps {
      */
     variant?: 'info' | 'warning' | 'success' | 'error' | 'danger' | 'tip';
 }
+/**
+ * The props type for {@link !components.HeaderActions}.
+ *
+ * @category Component Props
+ */
+export interface HeaderActionsProps {
+    /**
+     * Sets the content that will render inside the HeaderActions. This prop is passed implicitly by providing sub-components.
+     */
+    children: ReactNode;
+}
+/**
+ * The props type for {@link !components.HeaderActions}.
+ *
+ * @category Component Props
+ */
+export interface HeaderActionButtonProps extends OverlayComponentProps {
+    /**
+     * A function that will be invoked when the button is clicked. Do not use this function for submitting a form; use Form's `onSubmit` function instead.
+     *
+     * @event
+     */
+    onClick?: ReactionsHandler<ExtensionEvent>;
+    /**
+     * A URL that will be opened when the button is clicked. If the value is a URL external to `hubspot.com` it will be opened in a new tab.
+     */
+    href?: HrefProp;
+    /**
+     * Determines whether or not the button should be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Sets the content that will render inside the HeaderActionButton. This prop is passed implicitly by providing sub-components.
+     */
+    children: ReactNode;
+}
 /**
  * The props type for {@link !components.ButtonRow}.
  *
@@ -683,6 +720,7 @@ export interface DropdownProps {
      */
     disabled?: boolean;
 }
+export type EmptyStateImageName = 'addOnReporting' | 'announcement' | 'api' | 'automatedTesting' | 'beta' | 'building' | 'callingSetUp' | 'companies' | 'components' | 'cone' | 'contacts' | 'contentStrategy' | 'customObjects' | 'customerExperience' | 'customerSupport' | 'deals' | 'developerSecurityUpdate' | 'electronicSignature' | 'electronicSignatureEmptyState' | 'emailConfirmation' | 'emptyStateCharts' | 'idea' | 'integrations' | 'leads' | 'lock' | 'meetings' | 'missedGoal' | 'multipleObjects' | 'object' | 'productsShoppingCart' | 'registration' | 'sandboxAddOn' | 'social' | 'store' | 'storeDisabled' | 'successfullyConnectedEmail' | 'target' | 'task' | 'tickets' | 'voteAndSearch';
 /**
  * The props type for {@link !components.EmptyState}.
  *
@@ -725,6 +763,12 @@ export interface EmptyStateProps {
      * @defaultValue `250`
      */
     imageWidth?: number;
+    /**
+     * The name of the image to display.
+     *
+     * @defaultValue `"emptyStateCharts"`
+     */
+    imageName?: EmptyStateImageName;
 }
 /**
  * The props type for {@link !components.ErrorState}.
@@ -1411,6 +1455,38 @@ export interface InlineProps {
      */
     gap?: AllDistances;
 }
+/**
+ * The props type for {@link !components.AutoGrid}.
+ *
+ * @category Component Props
+ */
+export interface AutoGridProps {
+    /**
+     * Sets the width of each column in the grid.
+     * When `flexible` is true, columns will be at least this width (or collapse to container width if smaller), then expand equally to fill available space.
+     * When `flexible` is false, columns are exactly this width.
+     */
+    columnWidth: number;
+    /**
+     * Sets the spacing between grid items.
+     *
+     * @defaultValue `"flush"`
+     */
+    gap?: AllDistances;
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
+     *
+     */
+    children?: ReactNode;
+    /**
+     * Whether columns should expand to fill available space.
+     * When true, columns will be at least `columnWidth` but grow equally to fill the container.
+     * When false, columns are exactly `columnWidth`.
+     *
+     * @defaultValue `false`
+     */
+    flexible?: boolean;
+}
 /**
  * The props type for {@link !components.Link}.
  *
@@ -2569,10 +2645,12 @@ export interface AppContext {
     appName?: string;
     cardTitle?: string;
 }
+type ProfileVariableValue = string | number | bigint | boolean;
 /** @ignore */
 export interface BaseContext {
     user: UserContext;
     portal: PortalContext;
+    variables?: Record<string, ProfileVariableValue>;
 }
 /** @ignore */
 export interface CrmContext extends BaseContext {
@@ -2923,7 +3001,7 @@ export interface SettingsExtensionPoint extends ExtensionPointContract {
 }
 /** @ignore */
 export interface AppHomeExtensionPoint extends ExtensionPointContract {
-    actions: AppHomeActions;
+    actions: AppHomeActions & UiePlatformActions;
     context: AppHomeContext;
 }
 export interface ExampleCrmComponentProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.9.8",
+  "version": "0.10.1",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -11,8 +11,9 @@
     "watch": "npm run clean && tsc --watch",
     "prepare": "npm run build",
     "lint": "echo 'No linter configured for @hubspot/ui-extensions'",
-    "test": "jest",
-    "jest": "jest --watch"
+    "test": "jest && tsd",
+    "jest": "jest --watch",
+    "test:types": "tsd"
   },
   "files": [
     "dist"
@@ -23,6 +24,7 @@
   "exports": {
     ".": "./dist/index.js",
     "./crm": "./dist/crm/index.js",
+    "./pages/home": "./dist/pages/home/components.js",
     "./experimental": "./dist/experimental/index.js",
     "./experimental/testing": "./dist/experimental/testing/index.js",
     "./experimental/testing/jest-matchers": "./dist/experimental/testing/jest/matchers/index.js"
@@ -64,7 +66,11 @@
     "react-dom": "^18.2.0",
     "react-reconciler": "^0.29.0",
     "ts-jest": "^29.1.1",
+    "tsd": "^0.33.0",
     "typescript": "5.0.4"
   },
-  "gitHead": "68d176099343d6d202421ec241c131f1d07562a8"
+  "tsd": {
+    "directory": "src/__tests__/test-d"
+  },
+  "gitHead": "d3300e12daf61bc1931da0e79d62aede9675a750"
 }