@hubspot/ui-extensions 0.12.2 → 0.12.4

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

@@ -15,6 +15,13 @@ const createFakeProperties = (propertyNames) => {
     }, {});
 };
 export const createMockHooks = () => {
+    const useRequiredMocksContext = () => {
+        const mocksContext = useMocksContext();
+        if (!mocksContext) {
+            throw new Error('Illegal State: Mocks context not found.');
+        }
+        return mocksContext;
+    };
     // Build a mocks object with the default mock functions.
     // NOTE: The mock implementations can be overridden by tests using the spies that are provided in the returned `spies` object.
     return {
@@ -61,20 +68,18 @@ export const createMockHooks = () => {
             };
         },
         useExtensionContext: () => {
-            const mocks = useMocksContext();
+            const { mocks } = useRequiredMocksContext();
             return mocks.context;
         },
         useExtensionActions: () => {
-            const mocks = useMocksContext();
-            return mocks
-                .actions;
+            const { mocks } = useRequiredMocksContext();
+            return mocks.actions;
         },
         useExtensionApi: () => {
-            const mocks = useMocksContext();
+            const { mocks } = useRequiredMocksContext();
             return {
                 context: mocks.context,
-                actions: mocks
-                    .actions,
+                actions: mocks.actions,
                 runServerlessFunction: mocks.runServerlessFunction,
             };
         },

package/dist/testing/internal/text.d.ts

@@ -1,6 +1,6 @@
 import { type RemoteRoot, type RemoteText } from '@remote-ui/core';
-import { RenderedTextNode } from '../types.ts';
-import { RenderedDocumentInternal } from './types-internal.ts';
+import type { RenderedTextNode } from '../types.ts';
+import type { RenderedDocumentInternal } from './types-internal.ts';
 /**
  * Creates a rendered text node.
  *

package/dist/testing/internal/type-utils-internal.d.ts

@@ -1,5 +1,5 @@
-import { RenderedElementNode, RenderedFragmentNode, RenderedNode, RenderedParentNode, RenderedRootNode, RenderedTextNode } from '../types.ts';
-import { RenderedElementNodeInternal, RenderedFragmentNodeInternal, RenderedNodeInternal, RenderedRootNodeInternal, RenderedParentNodeInternal, RenderedTextNodeInternal } from './types-internal.ts';
+import type { RenderedElementNode, RenderedFragmentNode, RenderedNode, RenderedParentNode, RenderedRootNode, RenderedTextNode } from '../types.ts';
+import type { RenderedElementNodeInternal, RenderedFragmentNodeInternal, RenderedNodeInternal, RenderedParentNodeInternal, RenderedRootNodeInternal, RenderedTextNodeInternal } from './types-internal.ts';
 /**
  * Converts an internal rendered node to a public rendered node using a type assertion.
  *

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

@@ -1,10 +1,10 @@
 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 { useExtensionContext } from '../../hooks/useExtensionContext.tsx';
-import { useExtensionActions } from '../../hooks/useExtensionActions.tsx';
-import { useExtensionApi } from '../../hooks/useExtensionApi.tsx';
+import type { useAssociations, useCrmProperties } from '../../crm/index.ts';
+import type { useExtensionActions } from '../../hooks/useExtensionActions.tsx';
+import type { useExtensionApi } from '../../hooks/useExtensionApi.tsx';
+import type { useExtensionContext } from '../../hooks/useExtensionContext.tsx';
+import type { ExtensionPointApi, ExtensionPointLocation } from '../../shared/types/extension-points.ts';
+import type { HubSpotReactComponent, UnknownComponentProps } from '../../shared/types/shared.ts';
 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;

package/dist/testing/render.d.ts

@@ -1,5 +1,5 @@
-import { ExtensionPointLocation } from '../shared/types/extension-points.ts';
-import { Renderer } from './types.ts';
+import type { ExtensionPointLocation } from '../shared/types/extension-points.ts';
+import type { Renderer } from './types.ts';
 /**
  * Creates a renderer object with methods for rendering and testing UI extension components.
  * Mocks for supported React hooks and the Extension Point API are automatically provided based on the extension point location.

package/dist/testing/render.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createRemoteRoot } from '@remote-ui/core';
 import { createRoot as createReactRoot } from '@remote-ui/react';
+import { MocksContextProvider } from "../internal/hook-utils.js";
+import { EXTENSION_POINT_LOCATIONS } from "../shared/types/extension-points.js";
 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 { createMocksWithSpies } from "./internal/mocks/index.js";
+import { createRendererMocksContext, } from "./internal/mocks/index.js";
 import { find, findAll, findAllChildren, findByTestId, findChild, maybeFind, maybeFindByTestId, maybeFindChild, } from "./internal/query.js";
 import { createRootNode } from "./internal/root.js";
 import { asRenderedRootNode } from "./internal/type-utils-internal.js";
-import { createDeferred, } from "./internal/utils/promise-utils.js";
+import { createDeferred } from "./internal/utils/promise-utils.js";
 const DEFAULT_WAIT_FOR_TIMEOUT_IN_MS = 1000;
 const DEFAULT_WAIT_FOR_OPTIONS = {
     timeoutInMs: DEFAULT_WAIT_FOR_TIMEOUT_IN_MS,
@@ -21,14 +21,13 @@ const DEFAULT_WAIT_FOR_OPTIONS = {
  * @param node The React node to render.
  * @returns A render result object
  */
-const render = (node, mocksWithSpies) => {
+const render = (node, mocksContext) => {
     let dirty = true;
     let waitForChecksQueued = false;
     let waitForList = [];
     const runWaitForChecks = () => {
         waitForChecksQueued = false;
         waitForList = waitForList.filter((waitFor) => {
-            // eslint-disable-next-line @typescript-eslint/no-use-before-define
             const renderedRootNode = getLatestRootNode();
             if (renderedRootNode.document.hasInvalidComponentNames()) {
                 // Reject the waitFor promise if we detect invalid components in the rendered output.
@@ -50,7 +49,7 @@ const render = (node, mocksWithSpies) => {
                 waitFor.deferred.resolve(); // Resolve the promise that was originally returned by the waitFor function.
                 return false; // Remove the waitFor from the list since the check passed and we resolved the promise
             }
-            catch (error) {
+            catch {
                 return true; // Keep the waitFor in the list since the check failed and we didn't resolve the promise.
             }
         });
@@ -75,7 +74,7 @@ const render = (node, mocksWithSpies) => {
     };
     const remoteRoot = createRemoteRoot(remoteChannel);
     const reactRoot = createReactRoot(remoteRoot);
-    reactRoot.render(_jsx(MocksContextProvider, { value: mocksWithSpies, children: node }));
+    reactRoot.render(_jsx(MocksContextProvider, { value: mocksContext, children: node }));
     remoteRoot.mount();
     let maybeRenderedRootNode;
     /**
@@ -112,7 +111,7 @@ const render = (node, mocksWithSpies) => {
                 // Nothing to wait for since the check passed! Resolve the promise immediately.
                 return Promise.resolve();
             }
-            catch (error) {
+            catch {
                 // If the check failed then we need to put it in the waitForList so that we
                 // can check it again later. We return a promise that will be resolved when
                 // the provided check passes.
@@ -175,13 +174,14 @@ export const createRenderer = (extensionPointLocation) => {
         return renderResult;
     };
     const getLatestRootNode = () => getRenderResult().getLatestRootNode();
-    const { spies: mocksWithSpies } = createMocksWithSpies(extensionPointLocation);
+    const mocksContext = createRendererMocksContext(extensionPointLocation);
+    const { mocks } = mocksContext;
     return {
         render: (node) => {
-            renderResult = render(node, mocksWithSpies);
+            renderResult = render(node, mocksContext);
             return asRenderedRootNode(renderResult.getLatestRootNode());
         },
-        mocks: mocksWithSpies,
+        mocks: mocks,
         find: (component, matcher) => {
             return find(getLatestRootNode(), component, matcher);
         },

package/dist/testing/type-utils.d.ts

@@ -1,4 +1,4 @@
-import { type RenderedElementNode, type RenderedFragmentNode, type RenderedNode, type RenderedRootNode, type RenderedTextNode } from './types.ts';
+import type { RenderedElementNode, RenderedFragmentNode, RenderedNode, RenderedRootNode, RenderedTextNode } from './types.ts';
 /**
  * Type guard to check if a node is a rendered element node.
  *

package/dist/testing/type-utils.js

@@ -1,4 +1,4 @@
-import { RenderedNodeType, } from "./types.js";
+import { RenderedNodeType } from "./types.js";
 /**
  * Type guard to check if a node is a rendered element node.
  *

package/dist/testing/types.d.ts

@@ -1,12 +1,13 @@
-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 { useExtensionContext } from '../hooks/useExtensionContext.tsx';
-import { AnyFunction } from './internal/types-internal.ts';
-import { useExtensionActions } from '../hooks/useExtensionActions.tsx';
-import { useExtensionApi } from '../hooks/useExtensionApi.tsx';
+import type { SpyImpl } from 'tinyspy';
+import type { useAssociations, useCrmProperties } from '../crm/index.ts';
+import type { useAppPageLocation } from '../experimental/pages/internal/useAppPageLocation.tsx';
+import type { useExtensionActions } from '../hooks/useExtensionActions.tsx';
+import type { useExtensionApi } from '../hooks/useExtensionApi.tsx';
+import type { useExtensionContext } from '../hooks/useExtensionContext.tsx';
+import type { ExtensionPointApi, ExtensionPointApiActions, ExtensionPointLocation } from '../shared/types/extension-points.ts';
+import type { ServerlessFuncRunner } from '../shared/types/http-requests.ts';
+import type { AppPageLocation, HubSpotReactComponent, HubSpotReactFragmentProp, UnknownComponentProps } from '../shared/types/shared.ts';
+import type { AnyFunction } from './internal/types-internal.ts';
 /**
  * The type of a rendered node.
  */
@@ -261,7 +262,7 @@ export type ExtensionPointApiActionSpies<TExtensionPointLocation extends Extensi
 /**
  * An object containing the spies for the various functions.
  */
-export interface RendererSpies<TExtensionPointLocation extends ExtensionPointLocation = ExtensionPointLocation> {
+export interface RendererMocks<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
@@ -307,6 +308,15 @@ export interface RendererSpies<TExtensionPointLocation extends ExtensionPointLoc
      * information about spies and the supported API.
      */
     useExtensionApi: FunctionSpy<typeof useExtensionApi>;
+    /**
+     * A spy for the `useAppPageLocation` 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.
+     */
+    useAppPageLocation: FunctionSpy<typeof useAppPageLocation>;
     /**
      * Mock context object that contains fake context data for the extension point API.
      */
@@ -329,6 +339,12 @@ export interface RendererSpies<TExtensionPointLocation extends ExtensionPointLoc
      * information about spies and the supported API.
      */
     runServerlessFunction: FunctionSpy<ServerlessFuncRunner>;
+    /**
+     * Sets the current app page location for testing page routing.
+     *
+     * @param location The app page location to set.
+     */
+    setPageLocation: (location: AppPageLocation) => void;
 }
 /**
  * A result of a render operation.
@@ -363,7 +379,7 @@ export interface Renderer<TExtensionPointLocation extends ExtensionPointLocation
     /**
      * The mocks that can be used to control the behavior of the various functions.
      */
-    mocks: RendererSpies<TExtensionPointLocation>;
+    mocks: RendererMocks<TExtensionPointLocation>;
     /**
      * Finds the first descendant element node that matches the given component and test ID.
      *

package/dist/testing/utils.d.ts

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

package/dist/testing/utils.js

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

package/dist/utils/pagination.d.ts

@@ -0,0 +1,17 @@
+export interface PaginationResult {
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    currentPage: number;
+    pageSize: number;
+    nextPage: () => void;
+    previousPage: () => void;
+    reset: () => void;
+}
+export declare const DEFAULT_PAGE_SIZE = 10;
+/**
+ * Calculate pagination flags based on current page and API hasMore flag
+ */
+export declare function calculatePaginationFlags(currentPage: number, hasMore: boolean): {
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+};

package/dist/utils/pagination.js

@@ -0,0 +1,10 @@
+export const DEFAULT_PAGE_SIZE = 10;
+/**
+ * Calculate pagination flags based on current page and API hasMore flag
+ */
+export function calculatePaginationFlags(currentPage, hasMore) {
+    return {
+        hasNextPage: hasMore,
+        hasPreviousPage: currentPage > 1,
+    };
+}

package/package.json

@@ -1,22 +1,11 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.12.2",
+  "version": "0.12.4",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "scripts": {
-    "clean": "rm -rf dist/",
-    "build": "npm run clean && tsc",
-    "check:tsc": "tsc",
-    "watch": "npm run clean && tsc --watch",
-    "prepare": "npm run build",
-    "lint": "echo 'No linter configured for @hubspot/ui-extensions'",
-    "test": "vitest run && tsd",
-    "test:coverage": "vitest run --coverage",
-    "test:watch": "vitest",
-    "test:types": "tsd"
-  },
+  "prettier": "@private/prettier-config",
   "files": [
     "dist"
   ],
@@ -26,6 +15,7 @@
   "exports": {
     ".": "./dist/index.js",
     "./crm": "./dist/crm/index.js",
+    "./experimental/pages": "./dist/experimental/pages/index.js",
     "./pages/home": "./dist/pages/home/index.js",
     "./experimental": "./dist/experimental/index.js",
     "./testing": "./dist/testing/index.js",
@@ -59,21 +49,39 @@
     }
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^14.1.2",
-    "@types/node": "^22.14.0",
-    "@types/react": "^18.3.1",
-    "@types/react-dom": "^18.3.1",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/react": "14.3.1",
+    "@types/node": "22.19.7",
+    "@types/react": "18.3.26",
+    "@types/react-dom": "18.3.7",
     "@vitest/coverage-v8": "4.0.18",
+    "@vitest/eslint-plugin": "1.6.6",
+    "eslint": "9.39.2",
     "jsdom": "26.1.0",
+    "prettier": "3.8.1",
     "react-dom": "18.3.1",
-    "react-reconciler": "^0.29.0",
-    "tsd": "^0.33.0",
+    "react-reconciler": "0.29.2",
+    "tsd": "0.33.0",
     "typescript": "5.9.3",
-    "vitest": "4.0.18"
+    "vitest": "4.0.18",
+    "@private/eslint-config": "1.0.0",
+    "@private/prettier-config": "1.0.0"
   },
   "tsd": {
     "directory": "src/__tests__/test-d"
   },
-  "gitHead": "b8c8170048a28b28112833cb552be43d4587c2ed"
-}
+  "gitHead": "3da4a07183d48528ef431d46a8d327c053c4fe94",
+  "scripts": {
+    "clean": "rm -rf dist/ *.tsbuildinfo .turbo",
+    "format": "prettier --write . --ignore-path ../../.prettierignore",
+    "format:check": "prettier --check . --ignore-path ../../.prettierignore",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
+    "tsc": "tsc",
+    "test": "vitest run && tsd",
+    "test:coverage": "vitest run --coverage",
+    "test:types": "tsd",
+    "test:watch": "vitest",
+    "tsc:watch": "tsc --watch"
+  }
+}