@hubspot/ui-extensions 0.11.3 → 0.11.5

package/dist/hooks/useExtensionActions.d.ts

@@ -0,0 +1,4 @@
+import type { ExtensionPoints } from '../shared/types/extension-points.ts';
+declare function useExtensionActionsInternal<ExtensionPoint extends keyof ExtensionPoints>(): import("../shared/types/extension-points.ts").ExtensionPointApiActions<ExtensionPoint>;
+export declare const useExtensionActions: typeof useExtensionActionsInternal;
+export {};

package/dist/hooks/useExtensionActions.js

@@ -0,0 +1,6 @@
+import { getWorkerGlobals } from "../internal/global-utils.js";
+import { createMockAwareHook } from "../internal/hook-utils.js";
+function useExtensionActionsInternal() {
+    return getWorkerGlobals().hsWorkerAPI.useExtensionActions();
+}
+export const useExtensionActions = createMockAwareHook('useExtensionActions', useExtensionActionsInternal);

package/dist/hooks/useExtensionContext.d.ts

@@ -0,0 +1,4 @@
+import type { ExtensionPoints } from '../shared/types/extension-points.ts';
+declare function useExtensionContextInternal<ExtensionPoint extends keyof ExtensionPoints>(): import("../shared/types/extension-points.ts").ExtensionPointApiContext<ExtensionPoint>;
+export declare const useExtensionContext: typeof useExtensionContextInternal;
+export {};

package/dist/hooks/useExtensionContext.js

@@ -0,0 +1,6 @@
+import { getWorkerGlobals } from "../internal/global-utils.js";
+import { createMockAwareHook } from "../internal/hook-utils.js";
+function useExtensionContextInternal() {
+    return getWorkerGlobals().hsWorkerAPI.useExtensionContext();
+}
+export const useExtensionContext = createMockAwareHook('useExtensionContext', useExtensionContextInternal);

package/dist/index.d.ts

@@ -3,3 +3,5 @@ export { hubspot } from './hubspot.ts';
 export { logger } from './logger.ts';
 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, 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';

package/dist/index.js

@@ -4,3 +4,5 @@ export { hubspot } from "./hubspot.js";
 export { logger } from "./logger.js";
 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, 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";

package/dist/internal/global-utils.js

@@ -25,6 +25,10 @@ const fakeWorkerGlobals = {
     extend_V2: () => {
         // No-op in test environment
     },
+    // @ts-expect-error we are not using the worker endpoint in tests env.
+    __useExtensionContext: () => {
+        // No-op in test environment
+    },
 };
 /**
  * Gets the worker globals object for the current environment.

package/dist/internal/hook-utils.d.ts

@@ -1,4 +1,4 @@
-import { RendererMocksInternal } from '../experimental/testing/internal/types-internal.ts';
+import { RendererSpies } from '../testing/types.ts';
 type AnyFunction = (...args: any[]) => any;
 /**
  * Creates a mock-aware hook function that can be used to mock the original hook function.
@@ -8,12 +8,19 @@ type AnyFunction = (...args: any[]) => any;
  * @param originalHookFunction The original hook function to call if no mock is found
  * @returns The mocked hook function or the original hook function if no mock is found
  */
-export declare const createMockAwareHook: <THookName extends keyof RendererMocksInternal, THookFunction extends AnyFunction>(hookName: THookName, originalHookFunction: THookFunction) => THookFunction;
+export declare const createMockAwareHook: <THookName extends keyof RendererSpies, THookFunction extends AnyFunction>(hookName: THookName, originalHookFunction: THookFunction) => THookFunction;
+/**
+ * A hook that provides access to the Mocks context.
+ * Returns the mocks object if inside a MocksContextProvider, otherwise returns null.
+ *
+ * @returns The mocks object or null if not in a test environment.
+ */
+export declare function useMocksContext(): RendererSpies<"home" | "settings" | "crm.record.tab" | "crm.record.sidebar" | "crm.preview" | "helpdesk.sidebar" | "uie.playground.middle"> | null;
 /**
  * A React component that provides the Mocks context that can be used to provide mocks to the mock-aware hook functions.
  *
  * @param children The children to render.
  * @returns The children wrapped in the Mocks context provider.
  */
-export declare const MocksContextProvider: import("react").Provider<RendererMocksInternal | null>;
+export declare const MocksContextProvider: import("react").Provider<RendererSpies<"home" | "settings" | "crm.record.tab" | "crm.record.sidebar" | "crm.preview" | "helpdesk.sidebar" | "uie.playground.middle"> | null>;
 export {};

package/dist/internal/hook-utils.js

@@ -10,7 +10,7 @@ const MocksContext = createContext(null);
  */
 export const createMockAwareHook = (hookName, originalHookFunction) => {
     const useWrapper = (...args) => {
-        const mocks = useContext(MocksContext);
+        const mocks = useMocksContext();
         if (!mocks) {
             // If no mocks are provided, call the original hook function
             return originalHookFunction(...args);
@@ -25,6 +25,15 @@ export const createMockAwareHook = (hookName, originalHookFunction) => {
     };
     return useWrapper;
 };
+/**
+ * A hook that provides access to the Mocks context.
+ * Returns the mocks object if inside a MocksContextProvider, otherwise returns null.
+ *
+ * @returns The mocks object or null if not in a test environment.
+ */
+export function useMocksContext() {
+    return useContext(MocksContext);
+}
 /**
  * A React component that provides the Mocks context that can be used to provide mocks to the mock-aware hook functions.
  *

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

@@ -1,5 +1,6 @@
 import { Logger } from './logger.ts';
 import { HubspotExtendFunction } from './extend.ts';
+import type { ExtensionPoints, ExtensionPointApiContext, ExtensionPointApiActions } from './extension-points.ts';
 export interface WorkerGlobalsInternal {
     /**
      * A marker that the current global is a HubSpot extension worker.
@@ -14,4 +15,18 @@ export interface WorkerGlobalsInternal {
      * NOTE: `extend_V2` is used internally by `hubspot.extend` (where `hubspot` is imported from `@hubspot/ui-extensions`).
      */
     extend_V2: HubspotExtendFunction;
+    /**
+     * Namespace where all HubSpot APIs that go on the worker should live.
+     * This avoids polluting the global and reduces the possibility of customer code having collisions with our code.
+     */
+    hsWorkerAPI: {
+        /**
+         * Hook added to worker globals so customer code can access extension context at runtime.
+         */
+        useExtensionContext: <ExtensionPoint extends keyof ExtensionPoints>() => ExtensionPointApiContext<ExtensionPoint>;
+        /**
+         * Hook added to worker globals so customer code can access extension actions at runtime.
+         */
+        useExtensionActions: <ExtensionPoint extends keyof ExtensionPoints>() => ExtensionPointApiActions<ExtensionPoint>;
+    };
 }

package/dist/{experimental/testing → testing}/__tests__/debug.spec.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { describe, expect, it } from 'vitest';
-import { Alert, Button, ButtonRow, List, Text } from "../../../index.js";
+import { Alert, Button, ButtonRow, List, Text } from "../../index.js";
 import { createRenderer, isRenderedTextNode } from "../index.js";
 function MyComponent() {
     return (_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", overlay: _jsx(List, { children: _jsx(Text, { children: "Item 1" }) }), children: "Click me!" }) }), _jsx(Alert, { title: "My Alert" })] }));

package/dist/{experimental/testing → testing}/__tests__/find.spec.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { describe, expect, it } from 'vitest';
-import { Alert, Button, ButtonRow, Text } from "../../../index.js";
+import { Alert, Button, ButtonRow, Text } from "../../index.js";
 import { createRenderer } from "../index.js";
 import { ComponentNotFoundError, FindInvalidComponentError, } from "../internal/errors.js";
 describe('find()', () => {

package/dist/{experimental/testing → testing}/__tests__/findAll.spec.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { describe, expect, it } from 'vitest';
-import { Alert, Button, ButtonRow } from "../../../index.js";
+import { Alert, Button, ButtonRow } from "../../index.js";
 import { createRenderer } from "../index.js";
 describe('findAll()', () => {
     it('should allow finding all matching components', () => {

package/dist/{experimental/testing → testing}/__tests__/findAllChildren.spec.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { describe, expect, it } from 'vitest';
-import { Alert, Button, ButtonRow, Text } from "../../../index.js";
+import { Alert, Button, ButtonRow, Text } from "../../index.js";
 import { createRenderer } from "../index.js";
 describe('findAllChildren()', () => {
     it('should allow finding all direct children from the root node', () => {

package/dist/{experimental/testing → testing}/__tests__/findByTestId.spec.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { describe, expect, it } from 'vitest';
-import { Alert, Button, ButtonRow, Text } from "../../../index.js";
+import { Alert, Button, ButtonRow, Text } from "../../index.js";
 import { createRenderer } from "../index.js";
 import { ComponentMismatchedByTestIdError, ComponentNotFoundByTestIdError, FindInvalidComponentError, } from "../internal/errors.js";
 describe('findByTestId()', () => {

package/dist/{experimental/testing → testing}/__tests__/findChild.spec.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { describe, expect, it } from 'vitest';
-import { Alert, Button, ButtonRow } from "../../../index.js";
+import { Alert, Button, ButtonRow } from "../../index.js";
 import { createRenderer } from "../index.js";
 import { ComponentNotFoundError, FindInvalidComponentError, } from "../internal/errors.js";
 describe('findChild()', () => {

package/dist/{experimental/testing → testing}/__tests__/fragments.spec.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { describe, expect, it } from 'vitest';
-import { Alert, Button, ButtonRow, List, Text } from "../../../index.js";
+import { Alert, Button, ButtonRow, List, Text } from "../../index.js";
 import { createRenderer } from "../index.js";
 import { InvalidFragmentPropArrayError } from "../internal/errors.js";
 describe('fragments', () => {

package/dist/{experimental/testing → testing}/__tests__/invalid-components.spec.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { describe, expect, it } from 'vitest';
-import { Alert, Button, ButtonRow, Text } from "../../../index.js";
+import { Alert, Button, ButtonRow, Text } from "../../index.js";
 import { createRenderer } from "../index.js";
 import { InvalidComponentsError } from "../internal/errors.js";
 import { createDeferred } from "../internal/utils/promise-utils.js";

package/dist/{experimental/testing → testing}/__tests__/isMatch.spec.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { describe, expect, it } from 'vitest';
-import { Alert, Button } from "../../../index.js";
+import { Alert, Button } from "../../index.js";
 import { createRenderer, isMatch, isRenderedFragmentNode, } from "../index.js";
 describe('isMatch()', () => {
     describe('isMatch() utility function', () => {

package/dist/{experimental/testing → testing}/__tests__/logger.spec.js

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { logger } from "../../../logger.js";
+import { logger } from "../../logger.js";
 describe('logger in test environment', () => {
     it('should be available', () => {
         expect(logger.debug).toBeInstanceOf(Function);

package/dist/{experimental/testing → testing}/__tests__/maybeFind.spec.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { describe, expect, it } from 'vitest';
-import { Alert, Button, ButtonRow, Text } from "../../../index.js";
+import { Alert, Button, ButtonRow, Text } from "../../index.js";
 import { createRenderer } from "../index.js";
 describe('maybeFind()', () => {
     it('should return the element when found', () => {

package/dist/{experimental/testing → testing}/__tests__/maybeFindByTestId.spec.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { describe, expect, it } from 'vitest';
-import { Alert, Button, ButtonRow } from "../../../index.js";
+import { Alert, Button, ButtonRow } from "../../index.js";
 import { createRenderer } from "../index.js";
 import { ComponentMismatchedByTestIdError, FindInvalidComponentError, } from "../internal/errors.js";
 describe('maybeFindByTestId()', () => {

package/dist/{experimental/testing → testing}/__tests__/maybeFindChild.spec.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { describe, expect, it } from 'vitest';
-import { Alert, Button, ButtonRow, Text } from "../../../index.js";
+import { Alert, Button, ButtonRow, Text } from "../../index.js";
 import { createRenderer } from "../index.js";
 describe('maybeFindChild()', () => {
     it('should return direct child from the root node', () => {

package/dist/{experimental/testing → testing}/__tests__/mocks.runServerlessFunction.spec.js

@@ -1,6 +1,6 @@
 import { describe, it } from 'vitest';
 import { createRenderer } from "../index.js";
-import { ServerlessExecutionStatus, } from "../../../shared/types/http-requests.js";
+import { ServerlessExecutionStatus, } from "../../shared/types/http-requests.js";
 describe('mock runServerlessFunction', () => {
     it('should provide the ability to spy on the runServerlessFunction function', async () => {
         const { mocks } = createRenderer('crm.record.tab');

package/dist/{experimental/testing → testing}/__tests__/mocks.useAssociations.spec.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { describe, expect, it } from 'vitest';
-import { Text } from "../../../index.js";
+import { Text } from "../../index.js";
 import { createRenderer } from "../index.js";
-import { useAssociations } from "../../../crm/index.js";
+import { useAssociations } from "../../crm/index.js";
 function MyComponent() {
     const { results, isLoading, error } = useAssociations({
         toObjectType: '0-1',

package/dist/{experimental/testing → testing}/__tests__/mocks.useCrmProperties.spec.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { describe, expect, it } from 'vitest';
-import { Text } from "../../../index.js";
+import { Text } from "../../index.js";
 import { createRenderer } from "../index.js";
-import { useCrmProperties } from "../../../crm/index.js";
+import { useCrmProperties } from "../../crm/index.js";
 function MyComponent() {
     const { properties, isLoading, error } = useCrmProperties([
         'firstname',

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createRenderer } from "../index.js";
+import { useExtensionActions } from "../../hooks/useExtensionActions.js";
+import { Button } from "../../index.js";
+function MyActionsCrmComponent() {
+    const actions = useExtensionActions();
+    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 = useExtensionActions();
+    return (_jsx(_Fragment, { children: _jsx(Button, { testId: "copyButton", onClick: () => actions.copyTextToClipboard('Hello world'), children: "Copy Text" }) }));
+}
+describe('mock actions', () => {
+    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/__tests__/mocks.useExtensionContext.spec.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from 'vitest';
+import { Text } from "../../index.js";
+import { createRenderer } from "../index.js";
+import { useExtensionContext } from "../../hooks/useExtensionContext.js";
+function MyComponent() {
+    const context = useExtensionContext();
+    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 })] }))] }));
+}
+describe('mock useExtensionContext', () => {
+    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');
+    });
+});

package/dist/{experimental/testing → testing}/__tests__/props.spec.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { describe, expect, it } from 'vitest';
-import { Button, ButtonRow } from "../../../index.js";
+import { Button, ButtonRow } from "../../index.js";
 import { createRenderer } from "../index.js";
 describe('props', () => {
     it('should remove the children prop from the props object', () => {

package/dist/{experimental/testing → testing}/__tests__/testId.spec.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from "../../../index.js";
+import { Button } from "../../index.js";
 import { createRenderer } from "../index.js";
 import { DuplicateTestIdError } from "../internal/errors.js";
 describe('testId', () => {

package/dist/{experimental/testing → testing}/__tests__/trigger.spec.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { describe, expect, it } from 'vitest';
-import { Button } from "../../../index.js";
+import { Button } from "../../index.js";
 import { createRenderer } from "../index.js";
 import { InvalidEventFunctionError, MissingEventFunctionError, } from "../internal/errors.js";
 describe('trigger()', () => {

package/dist/{experimental/testing → testing}/__tests__/type-utils.spec.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { describe, expect, it } from 'vitest';
-import { Button, ButtonRow, Text } from "../../../index.js";
+import { Button, ButtonRow, Text } from "../../index.js";
 import { createRenderer } from "../index.js";
 import { isRenderedElementNode, isRenderedFragmentNode, isRenderedRootNode, isRenderedTextNode, } from "../type-utils.js";
 import { RenderedNodeType } from "../types.js";

package/dist/testing/__tests__/waitFor.spec.d.ts

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

package/dist/{experimental/testing → testing}/__tests__/waitFor.spec.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { Button } from "../../../index.js";
+import { Button } from "../../index.js";
 import { createRenderer } from "../index.js";
 import { WaitForTimeoutError } from "../internal/errors.js";
 describe('waitFor()', () => {

package/dist/{experimental/testing → testing}/internal/convert.js

@@ -3,7 +3,7 @@ import { createElementNode } from "./element.js";
 import { DuplicateTestIdError, InvalidFragmentPropArrayError, } from "./errors.js";
 import { createFragmentNode } from "./fragment.js";
 import { createTextNode } from "./text.js";
-import { __hubSpotComponentRegistry } from "../../../shared/remoteComponents.js";
+import { __hubSpotComponentRegistry } from "../../shared/remoteComponents.js";
 import { isRenderedTextNode } from "../type-utils.js";
 import { EMPTY_RENDERED_CHILD_NODES } from "./constants.js";
 import { asRenderedParentNode } from "./type-utils-internal.js";

package/dist/{experimental/testing → testing}/internal/element.d.ts

@@ -1,4 +1,4 @@
-import type { UnknownComponentProps } from '../../../shared/types/shared.ts';
+import type { UnknownComponentProps } from '../../shared/types/shared.ts';
 import { RenderedElementNode } from '../types.ts';
 import type { RenderedDocumentInternal } from './types-internal.ts';
 /**

package/dist/{experimental/testing → testing}/internal/errors.js

@@ -1,4 +1,4 @@
-import { EXTENSION_POINT_LOCATIONS } from "../../../shared/types/extension-points.js";
+import { EXTENSION_POINT_LOCATIONS } from "../../shared/types/extension-points.js";
 import { printNode } from "./print.js";
 import { asRenderedNode } from "./type-utils-internal.js";
 /**

package/dist/{experimental/testing → testing}/internal/match.d.ts

@@ -1,4 +1,4 @@
-import { UnknownComponentProps } from '../../../shared/types/shared.ts';
+import { UnknownComponentProps } from '../../shared/types/shared.ts';
 import { ElementMatcher, RenderedElementNode } from '../types.ts';
 /**
  * Checks if the element matches the matcher.

package/dist/{experimental/testing → testing}/internal/mocks/index.d.ts

@@ -1,6 +1,6 @@
 import { RendererSpies } from '../../types.ts';
 import { RendererMocksInternal } from '../types-internal.ts';
-import { ExtensionPointLocation } from '../../../../shared/types/extension-points.ts';
+import { ExtensionPointLocation } from '../../../shared/types/extension-points.ts';
 /**
  * An object containing the mocks and spies.
  */

package/dist/{experimental/testing → testing}/internal/mocks/mock-extension-point-api.d.ts

@@ -1,2 +1,2 @@
-import { ExtensionPointApi, type ExtensionPointLocation } from '../../../../shared/types/extension-points.ts';
+import { ExtensionPointApi, type ExtensionPointLocation } from '../../../shared/types/extension-points.ts';
 export declare const createMockExtensionPointApi: (extensionPointLocation: ExtensionPointLocation) => ExtensionPointApi<ExtensionPointLocation>;

package/dist/{experimental/testing → testing}/internal/mocks/mock-extension-point-api.js

@@ -1,4 +1,4 @@
-import { ServerlessExecutionStatus, } from "../../../../shared/types/http-requests.js";
+import { ServerlessExecutionStatus, } from "../../../shared/types/http-requests.js";
 const fakePrefix = 'fake_';
 const createMockServerlessFuncRunner = () => {
     return () => Promise.resolve({

package/dist/testing/internal/mocks/mock-hooks.d.ts

@@ -0,0 +1,3 @@
+import { RendererMockHooksInternal } from '../types-internal.ts';
+import type { ExtensionPointLocation } from '../../../shared/types/extension-points.ts';
+export declare const createMockHooks: <TExtensionPointLocation extends ExtensionPointLocation>() => RendererMockHooksInternal;

package/dist/{experimental/testing → testing}/internal/mocks/mock-hooks.js

@@ -1,3 +1,4 @@
+import { useMocksContext } from "../../../internal/hook-utils.js";
 /**
  * Creates a record of property names and their fake values.
  *
@@ -55,5 +56,14 @@ export const createMockHooks = () => {
                 },
             };
         },
+        useExtensionContext: () => {
+            const mocks = useMocksContext();
+            return mocks.context;
+        },
+        useExtensionActions: () => {
+            const mocks = useMocksContext();
+            return mocks
+                .actions;
+        },
     };
 };

package/dist/{experimental/testing → testing}/internal/print.js

@@ -1,4 +1,4 @@
-import { __hubSpotComponentRegistry } from "../../../shared/remoteComponents.js";
+import { __hubSpotComponentRegistry } from "../../shared/remoteComponents.js";
 import { isRenderedElementNode, isRenderedFragmentNode, isRenderedRootNode, isRenderedTextNode, } from "../type-utils.js";
 const INDENT_STRING = '  ';
 const printTextNode = (node, indent, printContext) => {

package/dist/{experimental/testing → testing}/internal/query.d.ts

@@ -1,4 +1,4 @@
-import type { HubSpotReactComponent, UnknownComponentProps } from '../../../shared/types/shared.ts';
+import type { HubSpotReactComponent, UnknownComponentProps } from '../../shared/types/shared.ts';
 import type { ElementMatcher, RenderedElementNode } from '../types.ts';
 import type { RenderedDocumentInternal, RenderedParentNodeInternal } from './types-internal.ts';
 /**

package/dist/{experimental/testing → testing}/internal/query.js

@@ -1,4 +1,4 @@
-import { __hubSpotComponentRegistry } from "../../../shared/remoteComponents.js";
+import { __hubSpotComponentRegistry } from "../../shared/remoteComponents.js";
 import { isRenderedElementNode } from "../type-utils.js";
 import { ComponentMismatchedByTestIdError, ComponentNotFoundByTestIdError, ComponentNotFoundError, FindInvalidComponentError, InvalidComponentsError, } from "./errors.js";
 import { checkElementMatches } from "./match.js";

package/dist/{experimental/testing → testing}/internal/types-internal.d.ts

@@ -1,7 +1,9 @@
 import type { RemoteComponent, RemoteFragment, RemoteRoot, RemoteText } from '@remote-ui/core';
-import { ExtensionPointApi, ExtensionPointLocation } from '../../../shared/types/extension-points.ts';
-import { HubSpotReactComponent, UnknownComponentProps } from '../../../shared/types/shared.ts';
-import { useAssociations, useCrmProperties } from '../../../crm/index.ts';
+import { ExtensionPointApi, ExtensionPointLocation } from '../../shared/types/extension-points.ts';
+import { HubSpotReactComponent, UnknownComponentProps } from '../../shared/types/shared.ts';
+import { useAssociations, useCrmProperties } from '../../crm/index.ts';
+import { useExtensionContext } from '../../hooks/useExtensionContext.tsx';
+import { useExtensionActions } from '../../hooks/useExtensionActions.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;
@@ -59,6 +61,8 @@ export type RenderedNodeInternal = RenderedElementNodeInternal | RenderedTextNod
 export interface RendererMockHooksInternal {
     useCrmProperties: typeof useCrmProperties;
     useAssociations: typeof useAssociations;
+    useExtensionContext: typeof useExtensionContext;
+    useExtensionActions: typeof useExtensionActions;
 }
 export type RendererMocksInternal<TExtensionPointLocationName extends ExtensionPointLocation = ExtensionPointLocation> = RendererMockHooksInternal & ExtensionPointApi<TExtensionPointLocationName>;
 export type AnyFunction = (...args: any[]) => any;

package/dist/testing/internal/types-internal.js

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

package/dist/{experimental/testing → testing}/render.d.ts

@@ -1,4 +1,4 @@
-import { ExtensionPointLocation } from '../../shared/types/extension-points.ts';
+import { ExtensionPointLocation } from '../shared/types/extension-points.ts';
 import { Renderer } from './types.ts';
 /**
  * Creates a renderer object with methods for rendering and testing UI extension components.

package/dist/{experimental/testing → testing}/render.js

@@ -4,8 +4,8 @@ import { createRoot as createReactRoot } from '@remote-ui/react';
 import { convertRemoteRoot } from "./internal/convert.js";
 import { createDocument } from "./internal/document.js";
 import { InvalidComponentsError, InvalidExtensionPointLocationError, WaitForTimeoutError, } from "./internal/errors.js";
-import { EXTENSION_POINT_LOCATIONS, } from "../../shared/types/extension-points.js";
-import { MocksContextProvider } from "../../internal/hook-utils.js";
+import { EXTENSION_POINT_LOCATIONS, } from "../shared/types/extension-points.js";
+import { MocksContextProvider } from "../internal/hook-utils.js";
 import { createMocksWithSpies } from "./internal/mocks/index.js";
 import { find, findAll, findAllChildren, findByTestId, findChild, maybeFind, maybeFindByTestId, maybeFindChild, } from "./internal/query.js";
 import { createRootNode } from "./internal/root.js";
@@ -21,7 +21,7 @@ const DEFAULT_WAIT_FOR_OPTIONS = {
  * @param node The React node to render.
  * @returns A render result object
  */
-const render = (node, mocks) => {
+const render = (node, mocksWithSpies) => {
     let dirty = true;
     let waitForChecksQueued = false;
     let waitForList = [];
@@ -75,7 +75,7 @@ const render = (node, mocks) => {
     };
     const remoteRoot = createRemoteRoot(remoteChannel);
     const reactRoot = createReactRoot(remoteRoot);
-    reactRoot.render(_jsx(MocksContextProvider, { value: mocks, children: node }));
+    reactRoot.render(_jsx(MocksContextProvider, { value: mocksWithSpies, children: node }));
     remoteRoot.mount();
     let maybeRenderedRootNode;
     /**
@@ -175,13 +175,13 @@ export const createRenderer = (extensionPointLocation) => {
         return renderResult;
     };
     const getLatestRootNode = () => getRenderResult().getLatestRootNode();
-    const { mocks, spies } = createMocksWithSpies(extensionPointLocation);
+    const { spies: mocksWithSpies } = createMocksWithSpies(extensionPointLocation);
     return {
         render: (node) => {
-            renderResult = render(node, mocks);
+            renderResult = render(node, mocksWithSpies);
             return asRenderedRootNode(renderResult.getLatestRootNode());
         },
-        mocks: spies,
+        mocks: mocksWithSpies,
         find: (component, matcher) => {
             return find(getLatestRootNode(), component, matcher);
         },

package/dist/{experimental/testing → testing}/types.d.ts

@@ -1,9 +1,11 @@
-import { ExtensionPointApi, ExtensionPointApiActions, ExtensionPointLocation } from '../../shared/types/extension-points.ts';
-import { ServerlessFuncRunner } from '../../shared/types/http-requests.ts';
+import { ExtensionPointApi, ExtensionPointApiActions, ExtensionPointLocation } from '../shared/types/extension-points.ts';
+import { ServerlessFuncRunner } from '../shared/types/http-requests.ts';
 import { SpyImpl } from 'tinyspy';
-import { HubSpotReactComponent, HubSpotReactFragmentProp, UnknownComponentProps } from '../../shared/types/shared.ts';
-import { useAssociations, useCrmProperties } from '../../crm/index.ts';
+import { HubSpotReactComponent, HubSpotReactFragmentProp, UnknownComponentProps } from '../shared/types/shared.ts';
+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';
 /**
  * The type of a rendered node.
  */
@@ -258,7 +260,7 @@ export type ExtensionPointApiActionSpies<TExtensionPointLocation extends Extensi
 /**
  * An object containing the spies for the various functions.
  */
-export interface RendererSpies<TExtensionPointLocation extends ExtensionPointLocation> {
+export interface RendererSpies<TExtensionPointLocation extends ExtensionPointLocation = ExtensionPointLocation> {
     /**
      * A spy for the `useCrmProperties` hook function.
      * The spy can be used to track the calls to the hook function and also control the
@@ -277,6 +279,24 @@ export interface RendererSpies<TExtensionPointLocation extends ExtensionPointLoc
      * information about spies and the supported API.
      */
     useAssociations: FunctionSpy<typeof useAssociations>;
+    /**
+     * A spy for the `useExtensionContext` 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.
+     */
+    useExtensionContext: FunctionSpy<typeof useExtensionContext>;
+    /**
+     * A spy for the `useExtensionActions` 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.
+     */
+    useExtensionActions: FunctionSpy<typeof useExtensionActions>;
     /**
      * Mock context object that contains fake context data for the extension point API.
      */

package/dist/{experimental/testing → testing}/utils.d.ts

@@ -1,4 +1,4 @@
-import { type HubSpotReactComponent, type UnknownComponentProps } from '../../shared/types/shared.ts';
+import { type HubSpotReactComponent, type UnknownComponentProps } from '../shared/types/shared.ts';
 import { type ElementMatcher, type RenderedElementNode, type RenderedNode } from './types.ts';
 /**
  * Checks if the node matches the component and matcher.

package/dist/{experimental/testing → testing}/utils.js

@@ -1,5 +1,5 @@
 import { RenderedNodeType, } from "./types.js";
-import { __hubSpotComponentRegistry } from "../../shared/remoteComponents.js";
+import { __hubSpotComponentRegistry } from "../shared/remoteComponents.js";
 import { checkElementMatches } from "./internal/match.js";
 /**
  * Checks if the node matches the component and matcher.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.11.3",
+  "version": "0.11.5",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -28,13 +28,14 @@
     "./crm": "./dist/crm/index.js",
     "./pages/home": "./dist/pages/home/index.js",
     "./experimental": "./dist/experimental/index.js",
-    "./experimental/testing": "./dist/experimental/testing/index.js"
+    "./testing": "./dist/testing/index.js"
   },
   "license": "MIT",
   "dependencies": {
     "@remote-ui/core": "2.2.7",
     "@remote-ui/react": "5.0.2",
     "react": "18.3.1",
+    "react-reconciler": "0.29.2",
     "tinyspy": "4.0.4"
   },
   "engines": {
@@ -73,5 +74,5 @@
   "tsd": {
     "directory": "src/__tests__/test-d"
   },
-  "gitHead": "c97841ad97f7ebb9689a9cde03d179e1c98d7207"
+  "gitHead": "e262c2b6780bb1f65bd09b1df4a2e724cd627c19"
 }

package/dist/experimental/testing/internal/mocks/mock-hooks.d.ts

@@ -1,2 +0,0 @@
-import { RendererMockHooksInternal } from '../types-internal.ts';
-export declare const createMockHooks: () => RendererMockHooksInternal;