@hubspot/ui-extensions 0.11.6 → 0.12.0

package/dist/hs-internal/__tests__/createRemoteComponentInternal.spec.d.ts

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

package/dist/hs-internal/__tests__/createRemoteComponentInternal.spec.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from 'vitest';
+import { createRenderer } from "../../testing/index.js";
+import { createRemoteComponentInternal } from "../index.js";
+import { __hubSpotComponentRegistry } from "../../shared/remoteComponents.js";
+import { Button, Text } from "../../index.js";
+import { InvalidComponentsError } from "../../testing/internal/errors.js";
+import { useState } from 'react';
+// Create custom components once at the top level
+const CustomButton = createRemoteComponentInternal('TestCustomButton');
+const CustomCard = createRemoteComponentInternal('TestCustomCard', {
+    fragmentProps: ['content'],
+});
+describe('createRemoteComponentInternal', () => {
+    it('should create a component that can be rendered', () => {
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsx(CustomButton, { label: "Click me", onClick: () => { }, testId: "my-button" }));
+        const button = find(CustomButton);
+        expect(button.props.label).toBe('Click me');
+        expect(button.props.testId).toBe('my-button');
+    });
+    it('should register component in the registry', () => {
+        expect(__hubSpotComponentRegistry.isAllowedComponentName('TestCustomButton')).toBe(true);
+    });
+    it('should be findable using renderer.find()', () => {
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsx(CustomButton, { label: "Find me", onClick: () => { } }));
+        const button = find(CustomButton);
+        expect(button).toBeDefined();
+        expect(button.props.label).toBe('Find me');
+    });
+    it('should work with find() using prop matchers', () => {
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(CustomButton, { label: "Button 1", onClick: () => { }, variant: "primary" }), _jsx(CustomButton, { label: "Button 2", onClick: () => { }, variant: "secondary" })] }));
+        const primaryButton = find(CustomButton, { variant: 'primary' });
+        expect(primaryButton.props.label).toBe('Button 1');
+        const secondaryButton = find(CustomButton, { variant: 'secondary' });
+        expect(secondaryButton.props.label).toBe('Button 2');
+    });
+    it('should work with findAll()', () => {
+        const { render, findAll } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(CustomButton, { label: "Button 1", onClick: () => { } }), _jsx(CustomButton, { label: "Button 2", onClick: () => { } }), _jsx(CustomButton, { label: "Button 3", onClick: () => { } })] }));
+        const buttons = findAll(CustomButton);
+        expect(buttons).toHaveLength(3);
+        expect(buttons[0].props.label).toBe('Button 1');
+        expect(buttons[1].props.label).toBe('Button 2');
+        expect(buttons[2].props.label).toBe('Button 3');
+    });
+    it('should work with findByTestId()', () => {
+        const { render, findByTestId } = createRenderer('crm.record.tab');
+        render(_jsx(CustomButton, { label: "Find by ID", onClick: () => { }, testId: "my-custom-button" }));
+        const button = findByTestId(CustomButton, 'my-custom-button');
+        expect(button.props.label).toBe('Find by ID');
+    });
+    it('should work with maybeFind()', () => {
+        const { render, maybeFind } = createRenderer('crm.record.tab');
+        render(_jsx(CustomButton, { label: "Maybe", onClick: () => { } }));
+        const button = maybeFind(CustomButton);
+        expect(button).not.toBeNull();
+        expect(button?.props.label).toBe('Maybe');
+        const nonExistent = maybeFind(Button);
+        expect(nonExistent).toBeNull();
+    });
+    it('should support fragment props', () => {
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsx(CustomCard, { title: "My Card", content: _jsx(Text, { children: "Card content" }), testId: "my-card" }));
+        const card = find(CustomCard);
+        expect(card.props.title).toBe('My Card');
+        expect(card.props.testId).toBe('my-card');
+        expect(card.props.content?.find(Text).text).toBe('Card content');
+    });
+    it('should support event triggering via trigger()', () => {
+        const { render, find } = createRenderer('crm.record.tab');
+        let clicked = false;
+        const handleClick = () => {
+            clicked = true;
+        };
+        render(_jsx(CustomButton, { label: "Click me", onClick: handleClick }));
+        const button = find(CustomButton);
+        button.trigger('onClick');
+        expect(clicked).toBe(true);
+    });
+    it('should not throw InvalidComponentsError during rendering', () => {
+        const { render } = createRenderer('crm.record.tab');
+        expect(() => render(_jsx(CustomButton, { label: "Valid", onClick: () => { } }))).not.toThrow(InvalidComponentsError);
+    });
+    it('should work with state updates', () => {
+        const { render, find } = createRenderer('crm.record.tab');
+        function Counter() {
+            const [count, setCount] = useState(0);
+            const handleClick = () => {
+                setCount(count + 1);
+            };
+            return (_jsx(CustomButton, { label: `Count: ${count}`, onClick: handleClick, testId: "counter" }));
+        }
+        render(_jsx(Counter, {}));
+        const button = find(CustomButton);
+        expect(button.props.label).toBe('Count: 0');
+        button.trigger('onClick');
+        const updatedButton = find(CustomButton);
+        expect(updatedButton.props.label).toBe('Count: 1');
+    });
+    it('should work with nested components', () => {
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsx(CustomCard, { title: "Card with button", content: _jsx(CustomButton, { label: "Nested button", onClick: () => { } }) }));
+        const card = find(CustomCard);
+        expect(card.props.title).toBe('Card with button');
+        // Fragment prop children are found globally, not as direct children
+        const nestedButton = find(CustomButton);
+        expect(nestedButton.props.label).toBe('Nested button');
+    });
+    it('should work with findChild() and findAllChildren()', () => {
+        const { render, findAll, find } = createRenderer('crm.record.tab');
+        render(_jsx(CustomCard, { title: "Card with buttons", content: _jsxs(_Fragment, { children: [_jsx(CustomButton, { label: "Button 1", onClick: () => { } }), _jsx(CustomButton, { label: "Button 2", onClick: () => { } })] }) }));
+        const card = find(CustomCard);
+        expect(card.props.title).toBe('Card with buttons');
+        // Fragment prop children are found globally, not as direct children
+        const buttons = findAll(CustomButton);
+        expect(buttons).toHaveLength(2);
+        expect(buttons[0].props.label).toBe('Button 1');
+        expect(buttons[1].props.label).toBe('Button 2');
+    });
+    it('should allow multiple custom components to coexist', () => {
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(CustomButton, { label: "Button", onClick: () => { } }), _jsx(CustomCard, { title: "Card" })] }));
+        const button = find(CustomButton);
+        const card = find(CustomCard);
+        expect(button.props.label).toBe('Button');
+        expect(card.props.title).toBe('Card');
+    });
+    it('should work alongside built-in HubSpot components', () => {
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(CustomButton, { label: "Custom", onClick: () => { } }), _jsx(Button, { variant: "primary", children: "Built-in" })] }));
+        const customButton = find(CustomButton);
+        const builtInButton = find(Button);
+        expect(customButton.props.label).toBe('Custom');
+        expect(builtInButton.props.variant).toBe('primary');
+    });
+});

package/dist/hs-internal/index.d.ts

@@ -0,0 +1,35 @@
+import type { HubSpotReactComponent, HubSpotReactFragmentProp, UnknownComponentProps } from '../shared/types/shared.ts';
+/**
+ * Utility type for filtering out all of the prop names where the value is a ReactNode.
+ * We use this to know which props are allowed to be used as fragment props.
+ */
+type ComponentFragmentPropName<TProps extends UnknownComponentProps> = {
+    [K in keyof TProps]: HubSpotReactFragmentProp extends Required<TProps>[K] ? K : never;
+}[keyof TProps & string];
+/**
+ * Options for creating a custom remote component.
+ */
+export interface CreateRemoteComponentInternalOptions<TProps extends UnknownComponentProps = UnknownComponentProps> {
+    /**
+     * An array of prop names that are allowed to be used as fragment props (props that accept ReactNode children).
+     */
+    fragmentProps?: ComponentFragmentPropName<TProps>[];
+}
+/**
+ * Creates and registers a custom remote component for internal HubSpot use.
+ *
+ * This function is intended for HubSpot internal teams who need to create
+ * custom remote components that work with the UI Extensions testing utilities.
+ *
+ * Components created with this function will:
+ * - Be registered in the global component registry
+ * - Pass validation in testing utilities (isAllowedComponentName)
+ * - Work with renderer.find(), renderer.findAll(), and other testing utilities
+ *
+ * @param componentName - Unique name for the component (e.g., "FlywheelCustomButton").
+ *                        Recommended to prefix with team name to avoid collisions.
+ * @param options - Optional configuration including fragment props
+ * @returns A typed remote React component that can be rendered in a remote environment
+ */
+export declare function createRemoteComponentInternal<TProps extends UnknownComponentProps>(componentName: string, options?: CreateRemoteComponentInternalOptions<TProps>): HubSpotReactComponent<TProps>;
+export {};

package/dist/hs-internal/index.js

@@ -0,0 +1,20 @@
+import { __hubSpotComponentRegistry } from "../shared/remoteComponents.js";
+/**
+ * Creates and registers a custom remote component for internal HubSpot use.
+ *
+ * This function is intended for HubSpot internal teams who need to create
+ * custom remote components that work with the UI Extensions testing utilities.
+ *
+ * Components created with this function will:
+ * - Be registered in the global component registry
+ * - Pass validation in testing utilities (isAllowedComponentName)
+ * - Work with renderer.find(), renderer.findAll(), and other testing utilities
+ *
+ * @param componentName - Unique name for the component (e.g., "FlywheelCustomButton").
+ *                        Recommended to prefix with team name to avoid collisions.
+ * @param options - Optional configuration including fragment props
+ * @returns A typed remote React component that can be rendered in a remote environment
+ */
+export function createRemoteComponentInternal(componentName, options = {}) {
+    return __hubSpotComponentRegistry.createAndRegisterRemoteReactComponent(componentName, options);
+}

package/dist/index.d.ts

@@ -2,6 +2,6 @@ import './clientTypes.ts';
 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 { 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';

package/dist/index.js

@@ -3,6 +3,6 @@ import "./clientTypes.js";
 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 { 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";

package/dist/shared/remoteComponents.d.ts

@@ -494,6 +494,15 @@ export declare const BarChart: import("./types/shared.ts").HubSpotReactComponent
  * - {@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>;
+/**
+ * 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).
+ * @example
+ * ```tsx
+ *   <ScoreCircle score={75} />
+ * ```
+ */
+export declare const ScoreCircle: import("./types/shared.ts").HubSpotReactComponent<componentTypes.ScoreProps>;
 /**
  * `Tabs` allow you to group related content in a compact space, allowing users to switch between views without leaving the page.
  * @example

package/dist/shared/remoteComponents.js

@@ -504,6 +504,15 @@ export const BarChart = createAndRegisterRemoteReactComponent('BarChart');
  * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/charts-example Charts Example}
  */
 export const LineChart = createAndRegisterRemoteReactComponent('LineChart');
+/**
+ * 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).
+ * @example
+ * ```tsx
+ *   <ScoreCircle score={75} />
+ * ```
+ */
+export const ScoreCircle = createAndRegisterRemoteReactComponent('ScoreCircle');
 /**
  * `Tabs` allow you to group related content in a compact space, allowing users to switch between views without leaving the page.
  * @example

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

@@ -24,6 +24,7 @@ export type * from './loading-spinner.ts';
 export type * from './modal.ts';
 export type * from './panel.ts';
 export type * from './progress-bar.ts';
+export type * from './score.ts';
 export type * from './selects.ts';
 export type * from './statistics.ts';
 export type * from './status-tag.ts';

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

@@ -272,6 +272,17 @@ export interface DateInputProps extends BaseDateInputForDate {
      * @defaultValue `'userTz'`
      */
     timezone?: 'userTz' | 'portalTz';
+    /**
+     * The value of the input. Must include the year, month, and day.
+     * - `year`: the four-digit year (e.g., `2023`).
+     * - `month`: starting at `0`, the number of the month (e.g., `0` = January, `11` = December).
+     * - `date`: the number of the day (e.g., `1` = the first day of the month).
+     */
+    value?: BaseDate;
+    /**
+     * The default date value. Uses the same format as the value field.
+     */
+    defaultValue?: BaseDate;
 }
 /**
  * Object that represents times.

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

@@ -0,0 +1,13 @@
+import { BaseComponentProps } from '../shared.ts';
+/**
+ * The props type for {@link !components.ScoreCircle}.
+ *
+ * @category Component Props
+ */
+export type ScoreProps = BaseComponentProps & {
+    /**
+     * The numerical score to display. Must be a value between 0 and 100.
+     * Decimal values will be clamped to the nearest integer.
+     */
+    score: number;
+};

package/dist/shared/types/components/score.js

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

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

@@ -3,6 +3,6 @@ export type * from './actions.ts';
 export type * from './context.ts';
 export type * from './crm.ts';
 export type * from './extension-points.ts';
-export type * from './http-requests.ts';
+export * from './http-requests.ts';
 export type * from './reactions.ts';
 export * from './shared.ts';

package/dist/shared/types/index.js

@@ -1 +1,2 @@
+export * from "./http-requests.js"; // NOTE: `http-requests.ts` has some exported enums so we can't use `export type`
 export * from "./shared.js"; // NOTE: `shared.ts` has some exported classes so we can't use `export type` for now

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

@@ -240,5 +240,10 @@ export declare class RemoteEvent<V> {
     constructor(value: V, event: Event);
 }
 export interface BaseComponentProps {
+    /**
+     * Used by `findByTestId()` to locate this component in tests.
+     *
+     * @see {@link https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/testing/reference#findbytestid | Testing utilities reference}
+     */
     testId?: string;
 }

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

@@ -1,6 +1,16 @@
 import { Logger } from './logger.ts';
 import { HubspotExtendFunction } from './extend.ts';
 import type { ExtensionPoints, ExtensionPointApiContext, ExtensionPointApiActions } from './extension-points.ts';
+export interface WorkersApi {
+    /**
+     * 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>;
+}
 export interface WorkerGlobalsInternal {
     /**
      * A marker that the current global is a HubSpot extension worker.
@@ -19,14 +29,5 @@ export interface WorkerGlobalsInternal {
      * 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>;
-    };
+    hsWorkerAPI: WorkersApi;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.11.6",
+  "version": "0.12.0",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -28,7 +28,8 @@
     "./crm": "./dist/crm/index.js",
     "./pages/home": "./dist/pages/home/index.js",
     "./experimental": "./dist/experimental/index.js",
-    "./testing": "./dist/testing/index.js"
+    "./testing": "./dist/testing/index.js",
+    "./hs-internal": "./dist/hs-internal/index.js"
   },
   "license": "MIT",
   "dependencies": {
@@ -74,5 +75,5 @@
   "tsd": {
     "directory": "src/__tests__/test-d"
   },
-  "gitHead": "12a14abf6ad776b12204dc37467a7c665a806adb"
+  "gitHead": "c5b66da065a341df3afd98ce6641bb3e6317aeb4"
 }