@hubspot/ui-extensions 0.12.0 → 0.12.1

package/dist/hooks/useExtensionActions.d.ts

@@ -1,4 +1,20 @@
 import type { ExtensionPoints } from '../shared/types/extension-points.ts';
-declare function useExtensionActionsInternal<ExtensionPoint extends keyof ExtensionPoints>(): import("../shared/types/extension-points.ts").ExtensionPointApiActions<ExtensionPoint>;
+declare function useExtensionActionsInternal<TExtensionPoint extends keyof ExtensionPoints>(): import("../shared/types/extension-points.ts").ExtensionPointApiActions<TExtensionPoint>;
+/**
+ * Hook that provides access to extension actions for the specified extension point.
+ *
+ * Actions are methods provided by the host application that extensions can invoke to
+ * interact with the platform, such as showing notifications, opening modals, or
+ * navigating to different views.
+ *
+ * @typeParam TExtensionPoint - The extension point location (e.g., 'crm.record.tab', 'settings')
+ * @returns The actions object containing all available action methods for the extension point
+ *
+ * @example
+ * ```tsx
+ * const actions = useExtensionActions<'crm.record.tab'>();
+ * // Use actions like: actions.openIframeModal(...)
+ * ```
+ */
 export declare const useExtensionActions: typeof useExtensionActionsInternal;
 export {};

package/dist/hooks/useExtensionActions.js

@@ -3,4 +3,20 @@ import { createMockAwareHook } from "../internal/hook-utils.js";
 function useExtensionActionsInternal() {
     return getWorkerGlobals().hsWorkerAPI.useExtensionActions();
 }
+/**
+ * Hook that provides access to extension actions for the specified extension point.
+ *
+ * Actions are methods provided by the host application that extensions can invoke to
+ * interact with the platform, such as showing notifications, opening modals, or
+ * navigating to different views.
+ *
+ * @typeParam TExtensionPoint - The extension point location (e.g., 'crm.record.tab', 'settings')
+ * @returns The actions object containing all available action methods for the extension point
+ *
+ * @example
+ * ```tsx
+ * const actions = useExtensionActions<'crm.record.tab'>();
+ * // Use actions like: actions.openIframeModal(...)
+ * ```
+ */
 export const useExtensionActions = createMockAwareHook('useExtensionActions', useExtensionActionsInternal);

package/dist/hooks/useExtensionApi.d.ts

@@ -0,0 +1,20 @@
+import type { ExtensionPoints } from '../shared/types/extension-points.ts';
+declare function useExtensionApiInternal<TExtensionPoint extends keyof ExtensionPoints>(): import("../shared/types/extension-points.ts").ExtensionPointFullApi<TExtensionPoint>;
+/**
+ * Hook that provides access to the full extension API for the specified extension point.
+ *
+ * The extension API includes:
+ * - `actions`: Methods to interact with the host application
+ * - `context`: Contextual data about the current environment
+ * - `runServerlessFunction`: Function to execute serverless functions (deprecated)
+ *
+ * @typeParam TExtensionPoint - The extension point location (e.g., 'crm.record.tab', 'settings')
+ * @returns The complete extension API object containing actions, context, and runServerlessFunction
+ *
+ * @example
+ * ```tsx
+ * const { actions, context, runServerlessFunction } = useExtensionApi<'crm.record.tab'>();
+ * ```
+ */
+export declare const useExtensionApi: typeof useExtensionApiInternal;
+export {};

package/dist/hooks/useExtensionApi.js

@@ -0,0 +1,22 @@
+import { getWorkerGlobals } from "../internal/global-utils.js";
+import { createMockAwareHook } from "../internal/hook-utils.js";
+function useExtensionApiInternal() {
+    return getWorkerGlobals().hsWorkerAPI.useExtensionApi();
+}
+/**
+ * Hook that provides access to the full extension API for the specified extension point.
+ *
+ * The extension API includes:
+ * - `actions`: Methods to interact with the host application
+ * - `context`: Contextual data about the current environment
+ * - `runServerlessFunction`: Function to execute serverless functions (deprecated)
+ *
+ * @typeParam TExtensionPoint - The extension point location (e.g., 'crm.record.tab', 'settings')
+ * @returns The complete extension API object containing actions, context, and runServerlessFunction
+ *
+ * @example
+ * ```tsx
+ * const { actions, context, runServerlessFunction } = useExtensionApi<'crm.record.tab'>();
+ * ```
+ */
+export const useExtensionApi = createMockAwareHook('useExtensionApi', useExtensionApiInternal);

package/dist/hooks/useExtensionContext.d.ts

@@ -1,4 +1,20 @@
 import type { ExtensionPoints } from '../shared/types/extension-points.ts';
-declare function useExtensionContextInternal<ExtensionPoint extends keyof ExtensionPoints>(): import("../shared/types/extension-points.ts").ExtensionPointApiContext<ExtensionPoint>;
+declare function useExtensionContextInternal<TExtensionPoint extends keyof ExtensionPoints>(): import("../shared/types/extension-points.ts").ExtensionPointApiContext<TExtensionPoint>;
+/**
+ * Hook that provides access to contextual data for the specified extension point.
+ *
+ * The context contains information about the current environment where the extension
+ * is running, such as the current CRM object, user information, portal settings,
+ * and other relevant data specific to the extension point location.
+ *
+ * @typeParam TExtensionPoint - The extension point location (e.g., 'crm.record.tab', 'settings')
+ * @returns The context object containing environment-specific data for the extension point
+ *
+ * @example
+ * ```tsx
+ * const context = useExtensionContext<'crm.record.tab'>();
+ * // Access properties like: context.crm.objectId, context.user, context.portal
+ * ```
+ */
 export declare const useExtensionContext: typeof useExtensionContextInternal;
 export {};

package/dist/hooks/useExtensionContext.js

@@ -3,4 +3,20 @@ import { createMockAwareHook } from "../internal/hook-utils.js";
 function useExtensionContextInternal() {
     return getWorkerGlobals().hsWorkerAPI.useExtensionContext();
 }
+/**
+ * Hook that provides access to contextual data for the specified extension point.
+ *
+ * The context contains information about the current environment where the extension
+ * is running, such as the current CRM object, user information, portal settings,
+ * and other relevant data specific to the extension point location.
+ *
+ * @typeParam TExtensionPoint - The extension point location (e.g., 'crm.record.tab', 'settings')
+ * @returns The context object containing environment-specific data for the extension point
+ *
+ * @example
+ * ```tsx
+ * const context = useExtensionContext<'crm.record.tab'>();
+ * // Access properties like: context.crm.objectId, context.user, context.portal
+ * ```
+ */
 export const useExtensionContext = createMockAwareHook('useExtensionContext', useExtensionContextInternal);

package/dist/index.d.ts

@@ -5,3 +5,4 @@ export * from './shared/types/index.ts';
 export { Accordion, Alert, AutoGrid, BarChart, Box, Button, ButtonRow, Card, Checkbox, CurrencyInput, DateInput, DescriptionList, DescriptionListItem, Divider, Dropdown, EmptyState, ErrorState, Flex, Form, Heading, Icon, Illustration, Image, Inline, Input, LineChart, Link, List, LoadingButton, LoadingSpinner, Modal, ModalBody, ModalFooter, MultiSelect, NumberInput, Panel, PanelBody, PanelFooter, PanelSection, ProgressBar, RadioButton, ScoreCircle, SearchInput, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, StatusTag, StepIndicator, StepperInput, Tab, Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Tag, Text, TextArea, Textarea, Tile, TimeInput, Toggle, ToggleGroup, Tooltip, } from './shared/remoteComponents.tsx';
 export { useExtensionContext } from './hooks/useExtensionContext.tsx';
 export { useExtensionActions } from './hooks/useExtensionActions.tsx';
+export { useExtensionApi } from './hooks/useExtensionApi.tsx';

package/dist/index.js

@@ -6,3 +6,4 @@ export * from "./shared/types/index.js";
 export { Accordion, Alert, AutoGrid, BarChart, Box, Button, ButtonRow, Card, Checkbox, CurrencyInput, DateInput, DescriptionList, DescriptionListItem, Divider, Dropdown, EmptyState, ErrorState, Flex, Form, Heading, Icon, Illustration, Image, Inline, Input, LineChart, Link, List, LoadingButton, LoadingSpinner, Modal, ModalBody, ModalFooter, MultiSelect, NumberInput, Panel, PanelBody, PanelFooter, PanelSection, ProgressBar, RadioButton, ScoreCircle, SearchInput, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, StatusTag, StepIndicator, StepperInput, Tab, Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Tag, Text, TextArea, Textarea, Tile, TimeInput, Toggle, ToggleGroup, Tooltip, } from "./shared/remoteComponents.js";
 export { useExtensionContext } from "./hooks/useExtensionContext.js";
 export { useExtensionActions } from "./hooks/useExtensionActions.js";
+export { useExtensionApi } from "./hooks/useExtensionApi.js";

package/dist/shared/remoteComponents.d.ts

@@ -483,7 +483,7 @@ export declare const LoadingButton: import("./types/shared.ts").HubSpotReactComp
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/charts Charts Docs}
  * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/charts-example Charts Example}
  */
-export declare const BarChart: import("./types/shared.ts").HubSpotReactComponent<componentTypes.ChartProps>;
+export declare const BarChart: import("./types/shared.ts").HubSpotReactComponent<componentTypes.BarChartProps>;
 /**
  * The `LineChart` component renders a line chart for visualizing data. This type of chart is best suited for time series plots or trend data.
  *
@@ -493,7 +493,7 @@ export declare const BarChart: import("./types/shared.ts").HubSpotReactComponent
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/charts Charts Docs}
  * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/charts-example Charts Example}
  */
-export declare const LineChart: import("./types/shared.ts").HubSpotReactComponent<componentTypes.ChartProps>;
+export declare const LineChart: import("./types/shared.ts").HubSpotReactComponent<componentTypes.LineChartProps>;
 /**
  * The `ScoreCircle` component displays a score value (0-100) as a circular progress indicator with color-coded bands.
  * Scores are color-coded: 0-32 (alert/red), 33-65 (warning/yellow), 66-100 (success/green).

package/dist/shared/types/components/chart.d.ts

@@ -1,32 +1,93 @@
 import { BaseComponentProps } from '../shared.ts';
+export interface ChartProps extends BaseComponentProps {
+    /**
+     * An object containing the chart's data in an array.
+     */
+    data: ChartDataRow[] | {
+        data: ChartDataRow[];
+        options?: ChartDataOptions;
+    };
+    /**
+     * Configures the chart's axes.
+     */
+    axes: ChartAxisPair;
+    /**
+     * Additional chart configuration options. Options include:
+     * - `title` (string): a title for the chart.
+     * - `showLegend` (boolean): set to `true` to display a legend above the chart.
+     * - `showDataLabels` (boolean): set to `true` to display labels above data points.
+     * - `showTooltips` (boolean): set to `true` to display tooltips for data points on hover.
+     * - `colorList` (array): specify a custom order for colors to be used in the report.
+     *
+     * Learn more about [chart options](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/charts/overview#chart-options).
+     */
+    options?: ChartOptions;
+}
 /**
  * The props type for {@link !components.BarChart}.
  *
  * @category Component Props
  */
-export type BarChartProps = ChartProps;
+export interface BarChartProps extends ChartProps {
+    /**
+     * An object containing the chart's data in an array.
+     * - Data should be formatted as comma-separated objects containing key-value pairs.
+     * - Data will be displayed in the order it's provided, so any sorting will need to be done before passing it to the component.
+     * - While it's recommended to pre-format your data to be human-readable, you can also provide the `propertyLabels` parameter via this prop's `options` to relabel data values. See example in the [Stacking section](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/charts/bar-chart#stacking).
+     *
+     * Learn more about [formatting data](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/charts/overview#formatting-data).
+     */
+    data: ChartDataRow[] | {
+        data: ChartDataRow[];
+        options?: ChartDataOptions;
+    };
+    /**
+     * Configures the chart's axes. Using the `x` and `y` fields, you'll configure each axis individually with `field` and `fieldType` parameters, along with an optional `label` parameter:
+     * - `field` (Required): the field from your dataset to use. This value will be used as the displayed axis label if no `label` is specified.
+     * - `fieldType` (Required): the type of field. Can be `category`, `datetime`, or `linear`. Learn more about [field types](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/charts/overview#configuring-axes).
+     * - `label`: the axis label. If not specified, the `field` value will be used.
+     *
+     * You can also include an `options` field to further configure the axes with the following options:
+     * - `groupFieldByColor` (string): specify a field to [apply color](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/charts/bar-chart#colors) to for visual clarity.
+     * - `stacking` (boolean): [stack grouped data](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/charts/bar-chart#stacking) instead of always rendering separate bars.
+     * - `colors` (object): [specify colors for values](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/charts/bar-chart#specify-colors-per-field-value) in the field specified in `groupFieldByColor`.
+     *
+     * Learn more about [chart axes](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/charts/overview#configuring-axes).
+     */
+    axes: ChartAxisPair;
+}
 /**
  * The props type for {@link !components.LineChart}.
  *
  * @category Component Props
  */
-export type LineChartProps = ChartProps;
-export interface ChartProps extends BaseComponentProps {
+export interface LineChartProps extends ChartProps {
     /**
      * An object containing the chart's data in an array.
+     * - Data should be formatted as comma-separated objects containing key-value pairs.
+     * - Data will be displayed in the order it's provided, so any sorting will need to be done before passing it to the component.
+     * - While it's recommended to pre-format your data to be human-readable, you can also provide the `propertyLabels` parameter via this prop's `options` to relabel data values. See example in the [Stacking section](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/charts/line-chart#stacking).
+     *
+     * Learn more about [formatting data](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/charts/overview#formatting-data).
      */
     data: ChartDataRow[] | {
         data: ChartDataRow[];
         options?: ChartDataOptions;
     };
     /**
-     * Configures the chart's axes.
+     * Configures the chart's axes. Using the `x` and `y` fields, you'll configure each axis individually with `field` and `fieldType` parameters, along with an optional `label` parameter:
+     * - `field` (Required): the field from your dataset to use. This value will be used as the displayed axis label if no `label` is specified.
+     * - `fieldType` (Required): the type of field. Can be `category`, `datetime`, or `linear`. Learn more about [field types](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/charts/overview#configuring-axes).
+     * - `label`: the axis label. If not specified, the `field` value will be used.
+     *
+     * You can also include an `options` field to further configure the axes with the following options:
+     * - `groupFieldByColor` (string): specify a field to [apply color](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/charts/line-chart#colors) to for visual clarity.
+     * - `stacking` (boolean): [stack grouped data](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/charts/line-chart#stacking) instead of always rendering separated lines.
+     * - `colors` (object): [specify colors for values](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/charts/line-chart#specify-colors-per-field-value) in the field specified in `groupFieldByColor`.
+     *
+     * Learn more about [chart axes](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/charts/overview#configuring-axes).
      */
     axes: ChartAxisPair;
-    /**
-     * Additional chart configuration options.
-     */
-    options?: ChartOptions;
 }
 export type ChartDataRow = {
     [key: string]: number | string;

package/dist/shared/types/context.d.ts

@@ -52,10 +52,12 @@ export interface CrmContext extends BaseContext {
 /** @ignore */
 export interface SettingsContext extends BaseContext {
     location: 'settings';
+    extension?: AppContext;
 }
 /** @ignore */
 export interface AppHomeContext extends BaseContext {
     location: 'home';
+    extension?: AppContext;
 }
 /** @ignore */
 export interface GenericContext extends BaseContext {

package/dist/shared/types/extension-points.d.ts

@@ -115,9 +115,10 @@ export interface ExtensionPoints extends _ExtensionPoints {
 }
 /** @ignore */
 export interface ExtensionPointApi<TExtensionPointLocation extends ExtensionPointLocation> {
-    runServerlessFunction: ServerlessFuncRunner;
     actions: ExtensionPoints[TExtensionPointLocation]['actions'];
     context: ExtensionPoints[TExtensionPointLocation]['context'];
+    /** @deprecated */
+    runServerlessFunction: ServerlessFuncRunner;
 }
 /**
  * The actions of the extension point API.
@@ -127,4 +128,8 @@ export type ExtensionPointApiActions<TExtensionPointLocation extends ExtensionPo
  * The context of the extension point API.
  */
 export type ExtensionPointApiContext<TExtensionPointLocation extends ExtensionPointLocation> = ExtensionPointApi<TExtensionPointLocation>['context'];
+/**
+ * The full API of the extension point.
+ */
+export type ExtensionPointFullApi<TExtensionPointLocation extends ExtensionPointLocation> = ExtensionPointApi<TExtensionPointLocation>;
 export {};

package/dist/shared/types/worker-globals.d.ts

@@ -1,6 +1,6 @@
 import { Logger } from './logger.ts';
 import { HubspotExtendFunction } from './extend.ts';
-import type { ExtensionPoints, ExtensionPointApiContext, ExtensionPointApiActions } from './extension-points.ts';
+import type { ExtensionPoints, ExtensionPointApiContext, ExtensionPointApiActions, ExtensionPointFullApi } from './extension-points.ts';
 export interface WorkersApi {
     /**
      * Hook added to worker globals so customer code can access extension context at runtime.
@@ -10,6 +10,10 @@ export interface WorkersApi {
      * Hook added to worker globals so customer code can access extension actions at runtime.
      */
     useExtensionActions: <ExtensionPoint extends keyof ExtensionPoints>() => ExtensionPointApiActions<ExtensionPoint>;
+    /**
+     * Hook added to worker globals so customer code can access extension API at runtime.
+     */
+    useExtensionApi: <ExtensionPoint extends keyof ExtensionPoints>() => ExtensionPointFullApi<ExtensionPoint>;
 }
 export interface WorkerGlobalsInternal {
     /**

package/dist/testing/__tests__/mocks.useExtensionApi.spec.d.ts

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

package/dist/testing/__tests__/mocks.useExtensionApi.spec.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from 'vitest';
+import { Button, Text } from "../../index.js";
+import { createRenderer } from "../index.js";
+import { useExtensionApi } from "../../hooks/useExtensionApi.js";
+function MyComponent() {
+    const { context } = useExtensionApi();
+    return (_jsxs(_Fragment, { children: [_jsx(Text, { testId: "location-text", children: context.location }), _jsx(Text, { testId: "user-email", children: context.user.email }), _jsx(Text, { testId: "user-firstName", children: context.user.firstName }), _jsx(Text, { testId: "user-lastName", children: context.user.lastName }), _jsx(Text, { testId: "portal-id", children: context.portal.id }), _jsx(Text, { testId: "portal-timezone", children: context.portal.timezone }), 'crm' in context && (_jsxs(_Fragment, { children: [_jsx(Text, { testId: "crm-objectId", children: context.crm.objectId }), _jsx(Text, { testId: "crm-objectTypeId", children: context.crm.objectTypeId })] }))] }));
+}
+function MyActionsCrmComponent() {
+    const { actions } = useExtensionApi();
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { testId: "reloadButton", onClick: () => actions.reloadPage(), children: "Reload Page" }), _jsx(Button, { testId: "fetchButton", onClick: () => {
+                    actions.fetchCrmObjectProperties(['firstname', 'lastname']);
+                }, children: "Fetch Properties" })] }));
+}
+function MyActionsHomeComponent() {
+    const { actions } = useExtensionApi();
+    return (_jsx(_Fragment, { children: _jsx(Button, { testId: "copyButton", onClick: () => actions.copyTextToClipboard('Hello world'), children: "Copy Text" }) }));
+}
+describe('mock useExtensionApi', () => {
+    it('should provide a CRM mock implementation', () => {
+        const { render, findByTestId } = createRenderer('crm.record.tab');
+        render(_jsx(MyComponent, {}));
+        expect(findByTestId(Text, 'location-text').text).toEqual('crm.record.tab');
+        expect(findByTestId(Text, 'user-email').text).toEqual('fake_email@example.com');
+        expect(findByTestId(Text, 'user-firstName').text).toEqual('fake_firstName');
+        expect(findByTestId(Text, 'user-lastName').text).toEqual('fake_lastName');
+        expect(findByTestId(Text, 'portal-id').text).toEqual('123');
+        expect(findByTestId(Text, 'portal-timezone').text).toEqual('America/New_York');
+        expect(findByTestId(Text, 'crm-objectId').text).toEqual('123');
+        expect(findByTestId(Text, 'crm-objectTypeId').text).toEqual('0-1');
+    });
+    it('should provide a generic mock implementation without CRM properties', () => {
+        const { render, findByTestId, maybeFindByTestId } = createRenderer('settings');
+        render(_jsx(MyComponent, {}));
+        expect(findByTestId(Text, 'location-text').text).toEqual('settings');
+        expect(findByTestId(Text, 'user-email').text).toEqual('fake_email@example.com');
+        expect(findByTestId(Text, 'user-firstName').text).toEqual('fake_firstName');
+        expect(findByTestId(Text, 'user-lastName').text).toEqual('fake_lastName');
+        expect(findByTestId(Text, 'portal-id').text).toEqual('123');
+        expect(findByTestId(Text, 'portal-timezone').text).toEqual('America/New_York');
+        // doesn't have the CRM properties
+        expect(maybeFindByTestId(Text, 'crm-objectId')).toBeNull();
+        expect(maybeFindByTestId(Text, 'crm-objectTypeId')).toBeNull();
+    });
+    it('should use the mutated context', () => {
+        const newName = 'Gracie';
+        const { render, findByTestId, mocks } = createRenderer('settings');
+        mocks.context.user.firstName = newName;
+        render(_jsx(MyComponent, {}));
+        // no longer has the default context value, it has the mutate context
+        expect(findByTestId(Text, 'user-firstName').text).toEqual(newName);
+        // other properties stay the same
+        expect(findByTestId(Text, 'location-text').text).toEqual('settings');
+    });
+    it('should provide the ability to spy on the actions for the "crm.record.tab" extension point', () => {
+        const { mocks, render, findByTestId } = createRenderer('crm.record.tab');
+        const { actions } = mocks;
+        render(_jsx(MyActionsCrmComponent, {}));
+        findByTestId(Button, 'reloadButton').trigger('onClick');
+        expect(actions.reloadPage.callCount).toBe(1);
+        findByTestId(Button, 'fetchButton').trigger('onClick');
+        expect(actions.fetchCrmObjectProperties.callCount).toBe(1);
+    });
+    it('should provide the ability to spy on the actions for the "home" extension point', () => {
+        const { mocks, render, findByTestId } = createRenderer('home');
+        const { actions } = mocks;
+        render(_jsx(MyActionsHomeComponent, {}));
+        findByTestId(Button, 'copyButton').trigger('onClick');
+        expect(actions.copyTextToClipboard.callCount).toBe(1);
+    });
+});

package/dist/testing/internal/mocks/mock-hooks.js

@@ -69,5 +69,14 @@ export const createMockHooks = () => {
             return mocks
                 .actions;
         },
+        useExtensionApi: () => {
+            const mocks = useMocksContext();
+            return {
+                context: mocks.context,
+                actions: mocks
+                    .actions,
+                runServerlessFunction: mocks.runServerlessFunction,
+            };
+        },
     };
 };

package/dist/testing/internal/types-internal.d.ts

@@ -4,6 +4,7 @@ import { HubSpotReactComponent, UnknownComponentProps } from '../../shared/types
 import { useAssociations, useCrmProperties } from '../../crm/index.ts';
 import { useExtensionContext } from '../../hooks/useExtensionContext.tsx';
 import { useExtensionActions } from '../../hooks/useExtensionActions.tsx';
+import { useExtensionApi } from '../../hooks/useExtensionApi.tsx';
 import type { ElementMatcher, RenderedElementNode, RenderedFragmentNode, RenderedNode, RenderedParentNode, RenderedRootNode, RenderedTextNode } from '../types.ts';
 export type RemoteChildNode = RemoteComponent<any, RemoteRoot> | RemoteText<RemoteRoot>;
 export type RemoteParentNode = RemoteRoot | RemoteComponent<any, RemoteRoot> | RemoteFragment;
@@ -63,6 +64,7 @@ export interface RendererMockHooksInternal {
     useAssociations: typeof useAssociations;
     useExtensionContext: typeof useExtensionContext;
     useExtensionActions: typeof useExtensionActions;
+    useExtensionApi: typeof useExtensionApi;
 }
 export type RendererMocksInternal<TExtensionPointLocationName extends ExtensionPointLocation = ExtensionPointLocation> = RendererMockHooksInternal & ExtensionPointApi<TExtensionPointLocationName>;
 export type AnyFunction = (...args: any[]) => any;

package/dist/testing/types.d.ts

@@ -6,6 +6,7 @@ import { useAssociations, useCrmProperties } from '../crm/index.ts';
 import { useExtensionContext } from '../hooks/useExtensionContext.tsx';
 import { AnyFunction } from './internal/types-internal.ts';
 import { useExtensionActions } from '../hooks/useExtensionActions.tsx';
+import { useExtensionApi } from '../hooks/useExtensionApi.tsx';
 /**
  * The type of a rendered node.
  */
@@ -297,6 +298,15 @@ export interface RendererSpies<TExtensionPointLocation extends ExtensionPointLoc
      * information about spies and the supported API.
      */
     useExtensionActions: FunctionSpy<typeof useExtensionActions>;
+    /**
+     * A spy for the `useExtensionApi` hook function.
+     * The spy can be used to track the calls to the hook function and also control the
+     * return result of the hook function.
+     *
+     * See the [tinyspy](https://github.com/tiny-spy/tinyspy) library for more
+     * information about spies and the supported API.
+     */
+    useExtensionApi: FunctionSpy<typeof useExtensionApi>;
     /**
      * Mock context object that contains fake context data for the extension point API.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -75,5 +75,5 @@
   "tsd": {
     "directory": "src/__tests__/test-d"
   },
-  "gitHead": "c5b66da065a341df3afd98ce6641bb3e6317aeb4"
+  "gitHead": "3da4a07183d48528ef431d46a8d327c053c4fe94"
 }