@hubspot/ui-extensions 0.12.4 → 0.13.1

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

@@ -0,0 +1,72 @@
+export interface PaginationResult {
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    currentPage: number;
+    pageSize: number;
+    nextPage: () => void;
+    previousPage: () => void;
+    reset: () => void;
+}
+export type FormattingOptions = {
+    date?: {
+        format?: string;
+        relative?: boolean;
+    };
+    dateTime?: {
+        format?: string;
+        relative?: boolean;
+    };
+    currency?: {
+        addSymbol?: boolean;
+    };
+};
+export type FetchHookOptions = {
+    propertiesToFormat?: string[] | 'all';
+    formattingOptions?: FormattingOptions;
+};
+export type CrmSearchFilter = {
+    propertyName: string;
+    operator: string;
+    value?: string | number | boolean;
+    values?: (string | number | boolean)[];
+    highValue?: string | number | boolean;
+};
+export type CrmSearchFilterGroup = {
+    filters: CrmSearchFilter[];
+};
+export type CrmSearchSort = {
+    propertyName: string;
+    direction: 'ASCENDING' | 'DESCENDING';
+};
+export type FetchCrmSearchRequest = {
+    objectType: string;
+    properties?: string[];
+    query?: string;
+    filterGroups?: CrmSearchFilterGroup[];
+    sorts?: CrmSearchSort[];
+    pageSize?: number;
+    after?: string;
+};
+export type CrmSearchResultItem = {
+    objectId: number;
+    properties: Record<string, string | null>;
+};
+export type CrmSearchResponse = {
+    results: CrmSearchResultItem[];
+    total: number;
+    hasMore: boolean;
+    after?: string;
+};
+export type UseCrmSearchOptions = {
+    propertiesToFormat?: 'all' | string[];
+    formattingOptions?: FetchHookOptions['formattingOptions'];
+};
+export interface UseCrmSearchResult {
+    results: CrmSearchResultItem[];
+    total: number;
+    error: Error | null;
+    isLoading: boolean;
+    isRefetching: boolean;
+    pagination: PaginationResult;
+    refetch: () => Promise<void>;
+}

package/dist/shared/types/hooks.js

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

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

@@ -1,5 +1,13 @@
 import type { ComponentType, ReactElement, ReactNode } from 'react';
 export type UnknownComponentProps = Record<string, any>;
+/**
+ * Represents a JSON-serializable value. Functions, Symbols, BigInts, and
+ * circular references are not JSON-serializable and will cause issues with
+ * utilities that rely on `JSON.stringify` for comparison.
+ */
+export type JsonSerializable = string | number | boolean | null | undefined | JsonSerializable[] | {
+    [key: string]: JsonSerializable;
+};
 /**
  * Represents a HubSpot-provided React component.
  */

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

@@ -1,5 +1,6 @@
 import type { HubspotExtendFunction } from './extend.ts';
 import type { ExtensionPointApiActions, ExtensionPointApiContext, ExtensionPointFullApi, ExtensionPoints } from './extension-points.ts';
+import type { FetchCrmSearchRequest, FetchHookOptions } from './hooks.ts';
 import type { Logger } from './logger.ts';
 import type { AppPageLocation } from './shared.ts';
 export interface WorkersApi {
@@ -19,6 +20,10 @@ export interface WorkersApi {
      * Hook added to worker globals so page router can access the current app page location at runtime.
      */
     useAppPageLocation: () => AppPageLocation;
+    /**
+     * Runner for the CRM search hook, proxies search requests to the host.
+     */
+    fetchCrmSearch: (request: FetchCrmSearchRequest, options?: FetchHookOptions) => Promise<Response>;
 }
 export interface WorkerGlobalsInternal {
     /**

package/dist/testing/__tests__/createRenderer.spec.js

@@ -18,6 +18,6 @@ describe('createRenderer', () => {
         catch (error) {
             errorMessage = String(error);
         }
-        expect(errorMessage).toBe(`InvalidExtensionPointLocationError: Invalid extension point location of "INVALID_LOCATION". Allowed locations are: "crm.preview", "crm.record.sidebar", "crm.record.tab", "helpdesk.sidebar", "uie.playground.middle", "settings", "home"`);
+        expect(errorMessage).toBe(`InvalidExtensionPointLocationError: Invalid extension point location of "INVALID_LOCATION". Allowed locations are: "crm.preview", "crm.record.sidebar", "crm.record.tab", "helpdesk.sidebar", "uie.playground.middle", "settings", "home", "pages"`);
     });
 });

package/dist/testing/internal/mocks/index.d.ts

@@ -1,4 +1,4 @@
-import { type useAppPageLocation } from '../../../experimental/pages/internal/useAppPageLocation.tsx';
+import { type useAppPageLocation } from '../../../pages/internal/useAppPageLocation.tsx';
 import type { ExtensionPointLocation } from '../../../shared/types/extension-points.ts';
 import type { RendererMocks } from '../../types.ts';
 import { type MocksAppPageLocationStore } from './mock-app-page-location.tsx';

package/dist/testing/internal/mocks/mock-extension-point-api.js

@@ -22,8 +22,9 @@ const createMockUiePlatformActions = () => {
     return {
         copyTextToClipboard: async () => { },
         closeOverlay: () => { },
-        reloadPage: () => { },
+        navigateToPage: () => { },
         openIframeModal: () => { },
+        reloadPage: () => { },
     };
 };
 const createMockSettingsActions = () => {
@@ -36,6 +37,11 @@ const createMockAppHomeActions = () => {
         addAlert: () => { },
     };
 };
+const createMockPagesActions = () => {
+    return {
+        addAlert: () => { },
+    };
+};
 const createFakeEmail = () => `${fakePrefix}email@example.com`;
 const createFakeFirstName = () => `${fakePrefix}firstName`;
 const createFakeLastName = () => `${fakePrefix}lastName`;
@@ -156,6 +162,20 @@ const mockCreators = {
             },
         };
     },
+    pages: () => {
+        return {
+            runServerlessFunction: createMockServerlessFuncRunner(),
+            actions: {
+                ...createMockPagesActions(),
+                ...createMockUiePlatformActions(),
+            },
+            context: {
+                location: 'pages',
+                user: createFakeUser(),
+                portal: createFakePortalContext(),
+            },
+        };
+    },
 };
 export const createMockExtensionPointApi = (extensionPointLocation) => {
     const mockCreator = mockCreators[extensionPointLocation];

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

@@ -67,6 +67,32 @@ export const createMockHooks = () => {
                 },
             };
         },
+        useCrmSearch: (config) => {
+            const { properties: propertyNames } = config;
+            const properties = createFakeProperties(propertyNames);
+            return {
+                results: [
+                    {
+                        objectId: 456,
+                        properties,
+                    },
+                ],
+                total: 1,
+                error: null,
+                isLoading: false,
+                isRefetching: false,
+                refetch: async () => { },
+                pagination: {
+                    hasNextPage: false,
+                    hasPreviousPage: false,
+                    currentPage: 1,
+                    pageSize: 10,
+                    nextPage: () => { },
+                    previousPage: () => { },
+                    reset: () => { },
+                },
+            };
+        },
         useExtensionContext: () => {
             const { mocks } = useRequiredMocksContext();
             return mocks.context;

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

@@ -1,5 +1,6 @@
 import type { RemoteComponent, RemoteFragment, RemoteRoot, RemoteText } from '@remote-ui/core';
 import type { useAssociations, useCrmProperties } from '../../crm/index.ts';
+import type { useCrmSearch } from '../../experimental/hooks/useCrmSearch.ts';
 import type { useExtensionActions } from '../../hooks/useExtensionActions.tsx';
 import type { useExtensionApi } from '../../hooks/useExtensionApi.tsx';
 import type { useExtensionContext } from '../../hooks/useExtensionContext.tsx';
@@ -62,6 +63,7 @@ export type RenderedNodeInternal = RenderedElementNodeInternal | RenderedTextNod
 export interface RendererMockHooksInternal {
     useCrmProperties: typeof useCrmProperties;
     useAssociations: typeof useAssociations;
+    useCrmSearch: typeof useCrmSearch;
     useExtensionContext: typeof useExtensionContext;
     useExtensionActions: typeof useExtensionActions;
     useExtensionApi: typeof useExtensionApi;

package/dist/testing/types.d.ts

@@ -1,9 +1,10 @@
 import type { SpyImpl } from 'tinyspy';
 import type { useAssociations, useCrmProperties } from '../crm/index.ts';
-import type { useAppPageLocation } from '../experimental/pages/internal/useAppPageLocation.tsx';
+import type { useCrmSearch } from '../experimental/hooks/useCrmSearch.ts';
 import type { useExtensionActions } from '../hooks/useExtensionActions.tsx';
 import type { useExtensionApi } from '../hooks/useExtensionApi.tsx';
 import type { useExtensionContext } from '../hooks/useExtensionContext.tsx';
+import type { useAppPageLocation } from '../pages/internal/useAppPageLocation.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';
@@ -281,6 +282,15 @@ export interface RendererMocks<TExtensionPointLocation extends ExtensionPointLoc
      * information about spies and the supported API.
      */
     useAssociations: FunctionSpy<typeof useAssociations>;
+    /**
+     * A spy for the `useCrmSearch` 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.
+     */
+    useCrmSearch: FunctionSpy<typeof useCrmSearch>;
     /**
      * A spy for the `useExtensionContext` hook function.
      * The spy can be used to track the calls to the hook function and also control the

package/dist/utils/pagination.d.ts

@@ -1,12 +1,3 @@
-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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.12.4",
+  "version": "0.13.1",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -15,7 +15,7 @@
   "exports": {
     ".": "./dist/index.js",
     "./crm": "./dist/crm/index.js",
-    "./experimental/pages": "./dist/experimental/pages/index.js",
+    "./pages": "./dist/pages/index.js",
     "./pages/home": "./dist/pages/home/index.js",
     "./experimental": "./dist/experimental/index.js",
     "./testing": "./dist/testing/index.js",
@@ -77,6 +77,7 @@
     "format:check": "prettier --check . --ignore-path ../../.prettierignore",
     "lint": "eslint src/",
     "lint:fix": "eslint src/ --fix",
+    "generate": "node scripts/generate-version.js",
     "tsc": "tsc",
     "test": "vitest run && tsd",
     "test:coverage": "vitest run --coverage",

package/dist/experimental/pages/index.d.ts

@@ -1,6 +0,0 @@
-export * from './components/index.ts';
-export * from './create-page-router.tsx';
-export * from './hooks.ts';
-export type * from './types.ts';
-export type * from '../../shared/types/pages/components/index.ts';
-export { PageBreadcrumbs, PageHeader, PageLink, PageTitle, } from '../../shared/remoteComponents.tsx';

package/dist/experimental/pages/index.js

@@ -1,4 +0,0 @@
-export * from "./components/index.js";
-export * from "./create-page-router.js";
-export * from "./hooks.js";
-export { PageBreadcrumbs, PageHeader, PageLink, PageTitle, } from "../../shared/remoteComponents.js";

package/dist/experimental/pages/internal/useAppPageLocation.d.ts

@@ -1 +0,0 @@
-export declare const useAppPageLocation: () => import("../../../index.ts").AppPageLocation;

package/dist/shared/types/pages/app-pages-types.d.ts

@@ -1,75 +0,0 @@
-import type { ComponentType, ReactElement } from 'react';
-import type { EmptyProps, ReactFragmentProps } from '../shared.ts';
-import type { PageRoutesProps } from './components/page-routes.ts';
-/**
- * The props type for a PageRouter component.
- */
-export type PageRouterProps = EmptyProps;
-/**
- * Represents the current page route that has been matched by the page router.
- */
-export interface MatchedPageRoute {
-    /**
-     * The id of the route that has been matched.
-     */
-    routeId?: string;
-    /**
-     * The path of the route that has been matched.
-     */
-    path: string;
-    /**
-     * The parameters of the route that has been matched.
-     */
-    params: Record<string, string>;
-}
-/**
- * The component type for the page router that handles rendering matched routes.
- *
- * @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates.
- */
-export type PageRouterComponent = ComponentType<PageRouterProps>;
-/**
- * The function type for [createPageRouter](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/app-pages/reference#createpagerouter).
- *
- * Example usage:
- *
- * ```tsx
- * const PageRouter = createPageRouter(
- *   <PageRoutes layoutComponent={AppLayout}>
- *     <PageRoutes.IndexRoute component={HomePage} id="home" />
- *     <PageRoutes.Route path="/docs" component={DocsPage} />
- *     <PageRoutes path="/customers" layoutComponent={CustomersLayout}>
- *       <PageRoutes.IndexRoute component={ListCustomersPage} />
- *       <PageRoutes.Route path="/:customerId" component={ViewCustomerPage} />
- *     </PageRoutes>
- *     <PageRoutes.AnyRoute component={NotFoundPage} />
- *   </PageRoutes>
- * );
- *
- * function AppPages() {
- *   return <PageRouter />;
- * }
- *
- * hubspot.extend<"pages">(() => <AppPages />);
- * ```
- *
- * @param routes The routes to render.
- * @returns The page router component.
- *
- * @experimental This function is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates.
- */
-export type CreatePageRouterFunction = (reactPageRoutesElement: ReactElement<PageRoutesProps> | ReactElement<ReactFragmentProps>) => PageRouterComponent;
-/**
- * The function type for [usePageRoute](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/app-pages/reference#usepageroute).
- *
- * Example usage:
- *
- * ```tsx
- * const pageRoute = usePageRoute();
- * ```
- *
- * @returns The current page route.
- *
- * @experimental This hook is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates.
- */
-export type UsePageRouteHook = () => MatchedPageRoute;

package/dist/shared/types/pages/components/page-routes.d.ts

@@ -1,115 +0,0 @@
-import type { ComponentType, ReactNode } from 'react';
-import type { EmptyProps } from '../../shared.ts';
-/**
- * The props type for the layout component of [PageRoutes](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/app-page-components/page-routes#pageroutes).
- */
-export interface PageRoutesLayoutProps {
-    /**
-     * The content to render inside the layout.
-     */
-    children: ReactNode;
-}
-interface BaseRouteProps {
-    /**
-     * The component to render when the route is matched.
-     */
-    component: ComponentType<EmptyProps>;
-    /**
-     * A unique identifier for the route.
-     */
-    id?: string;
-}
-/**
- * The props type for [PageRoutes.IndexRoute](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/app-page-components/page-routes#pageroutes-indexroute).
- */
-export type IndexRouteProps = BaseRouteProps;
-/**
- * The props type for [PageRoutes.Route](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/app-page-components/page-routes#pageroutes-route).
- */
-export interface RouteProps extends BaseRouteProps {
-    /**
-     * The path pattern of the route to match.
-     */
-    path: string;
-}
-/**
- * The props type for [PageRoutes.AnyRoute](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/app-page-components/page-routes#pageroutes-anyroute).
- */
-export type AnyRouteProps = BaseRouteProps;
-/**
- * The component type for the layout component of [PageRoutes](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/app-page-components/page-routes#pageroutes).
- */
-export type PageRoutesLayoutComponent = ComponentType<PageRoutesLayoutProps>;
-/**
- * The props type for [PageRoutes](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/app-page-components/page-routes#pageroutes).
- */
-export interface PageRoutesProps {
-    /**
-     * The path pattern of the route to include with all nested routes.
-     */
-    path?: string;
-    /**
-     * The component to render for the layout of the page routes.
-     */
-    layoutComponent?: PageRoutesLayoutComponent;
-    /**
-     * The nested route definitions.
-     */
-    children: ReactNode;
-}
-/**
- * Used as a descriptor for a collection of page routes.
- *
- * Example usage:
- *
- * ```tsx
- * const PageRouter = createPageRouter(<PageRoutes>
- *   <PageRoutes.IndexRoute component={HomePage} />
- *   <PageRoutes.Route path="/docs" component={DocsPage} />
- *   <PageRoutes.AnyRoute component={NotFoundPage} />
- * </PageRoutes>);
- * ```
- *
- * See [PageRoutes](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/app-page-components/page-routes#pageroutes) for more information.
- *
- * @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates.
- */
-export interface PageRoutesComponent {
-    (props: PageRoutesProps): null;
-    /**
-     * Used as a descriptor for an index (i.e., "/") route.
-     *
-     * Example usage:
-     *
-     * ```tsx
-     * <PageRoutes.IndexRoute component={HomePage} />
-     * ```
-     *
-     * @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.
-     */
-    IndexRoute: (props: IndexRouteProps) => null;
-    /**
-     * Used as a descriptor for a route with a path pattern.
-     *
-     * Example usage:
-     *
-     * ```tsx
-     * <PageRoutes.Route path="/docs" component={DocsPage} />
-     * ```
-     * @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.
-     */
-    Route: (props: RouteProps) => null;
-    /**
-     * Used as a descriptor for a route that matches any path.
-     *
-     * Example usage:
-     *
-     * ```tsx
-     * <PageRoutes.AnyRoute component={NotFoundPage} />
-     * ```
-     *
-     * @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.
-     */
-    AnyRoute: (props: AnyRouteProps) => null;
-}
-export {};

package/dist/shared/types/pages/index.d.ts

@@ -1 +0,0 @@
-export type * from './components/index.ts';

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

@@ -1 +0,0 @@
-export type * from './pages/index.ts';