@hubspot/ui-extensions 0.8.3 → 0.8.5

package/dist/coreComponents.d.ts

@@ -232,3 +232,8 @@ export declare const Panel: "Panel" & {
     readonly props?: types.PanelProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Panel", types.PanelProps, true>>;
+export declare const Dropdown: "Dropdown" & {
+    readonly type?: "Dropdown" | undefined;
+    readonly props?: types.DropdownProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Dropdown", types.DropdownProps, true>>;

package/dist/coreComponents.js

@@ -52,3 +52,4 @@ export const Toggle = createRemoteReactComponent('Toggle');
 export const Panel = createRemoteReactComponent('Panel', {
     fragmentProps: ['footer'],
 });
+export const Dropdown = createRemoteReactComponent('Dropdown');

package/dist/experimental/experimentalComponents.d.ts

@@ -0,0 +1,7 @@
+import type * as types from '../types';
+/** @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 declare const Panel: "Panel" & {
+    readonly type?: "Panel" | undefined;
+    readonly props?: types.PanelProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Panel", types.PanelProps, true>>;

package/dist/experimental/experimentalComponents.js

@@ -0,0 +1,5 @@
+import { createRemoteReactComponent } from '@remote-ui/react';
+/** @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 const Panel = createRemoteReactComponent('Panel', {
+    fragmentProps: ['footer'],
+});

package/dist/experimental/index.d.ts

@@ -0,0 +1,2 @@
+import { Panel } from './experimentalComponents';
+export { Panel };

package/dist/experimental/index.js

@@ -0,0 +1,2 @@
+import { Panel } from './experimentalComponents';
+export { Panel };

package/dist/hubspot.d.ts

@@ -1,7 +1,8 @@
 import { ReactElement } from 'react';
-import type { ExtensionPoints, ExtensionPointApi } from './types';
+import type { ExtensionPoints, ExtensionPointApi, ServerlessRunnerParams } from './types';
+export declare function extend_V2<ExtensionPointName extends keyof ExtensionPoints>(renderExtensionCallback: (api: ExtensionPointApi<ExtensionPointName>) => ReactElement<any>): any;
+export declare function serverless<T = any>(name: ServerlessRunnerParams['name'], options?: Omit<ServerlessRunnerParams, 'name'>): Promise<T>;
 export declare const hubspot: {
-    extend: typeof render;
+    extend: typeof extend_V2;
+    serverless: typeof serverless;
 };
-declare function render<ExtensionPointName extends keyof ExtensionPoints>(renderCallback: (api: ExtensionPointApi<ExtensionPointName>) => ReactElement<any>): any;
-export {};

package/dist/hubspot.js

@@ -1,17 +1,10 @@
-/* eslint-disable hubspot-dev/no-confusing-browser-globals */
-import { createRoot } from '@remote-ui/react';
-import { isValidElement } from 'react';
+export function extend_V2(renderExtensionCallback) {
+    return self.extend_V2(renderExtensionCallback);
+}
+export function serverless(name, options) {
+    return self.serverless(name, options);
+}
 export const hubspot = {
-    extend: render,
+    extend: extend_V2,
+    serverless,
 };
-const extend = (...args) => self.extend(...args);
-function render(renderCallback) {
-    return extend((root, api) => {
-        const renderCallbackResult = renderCallback(api);
-        if (!isValidElement(renderCallbackResult)) {
-            throw new Error(`[hubspot.extend]: Expected callback function to return a valid element, got: ${renderCallbackResult}`);
-        }
-        createRoot(root).render(renderCallbackResult);
-        root.mount();
-    });
-}

package/dist/types.d.ts

@@ -1,4 +1,16 @@
 import { ReactNode, ComponentType } from 'react';
+export declare class ExtensionEvent {
+    type: string;
+    bubbles: boolean;
+    timeStamp: number;
+    id: string;
+    constructor(event: Event);
+}
+export declare class FormSubmitExtensionEvent<V> extends ExtensionEvent {
+    targetValue: V;
+    constructor(value: V, event: Event);
+}
+export type ReactionsHandler<T> = (event: T, reactions: Reactions) => void | Promise<void>;
 /**
  * The props type for {@link !components.Alert}.
  *
@@ -29,11 +41,11 @@ export interface AlertProps {
  */
 export interface ButtonProps {
     /**
-     * A function that will be invoked when the button is clicked. It receives no arguments and its return value is ignored.
+     * A function that will be invoked when the button is clicked.
      *
      * @event
      */
-    onClick?: () => void;
+    onClick?: ReactionsHandler<ExtensionEvent>;
     /**
      * A URL that will be opened when the button is clicked. If the value is a URL external to `hubspot.com` it will be opened in a new tab.
      */
@@ -58,6 +70,12 @@ export interface ButtonProps {
      * The displayable text for the Button.
      */
     children: ReactNode;
+    /**
+     * Sets the size of the button.
+     *
+     * @defaultValue `"md"`
+     */
+    size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
 }
 /**
  * The props type for {@link !components.ButtonRow}.
@@ -214,11 +232,11 @@ export interface FormProps {
      */
     children: ReactNode;
     /**
-     * The function that is called when the form is submitted. It will receive a RemoteEvent as an argument and its return value will be ignored.
+     * The function that is called when the form is submitted. It will receive a FormSubmitExtensionEvent as an argument and its return value will be ignored.
      *
      * @event
      */
-    onSubmit?: (event: RemoteEvent<FormInputValues>) => void;
+    onSubmit?: ReactionsHandler<FormSubmitExtensionEvent<FormInputValues>>;
     /**
      * When set to `true`, `event.preventDefault()` will be invoked before the `onSubmit` function is called, preventing the default HTML form behavior.
      *
@@ -261,11 +279,11 @@ export interface ImageProps {
      */
     href?: string;
     /**
-     * A function that will be called when the image is clicked. This function will receive no arguments and any returned values will be ignored.
+     * A function that will be called when the image is clicked.
      *
      * @event
      */
-    onClick?: () => void;
+    onClick?: ReactionsHandler<ExtensionEvent>;
     /**
      * The URL of the image to display.
      *
@@ -701,11 +719,11 @@ export interface TagProps {
      */
     variant?: 'default' | 'warning' | 'success' | 'error';
     /**
-     * A function that will be invoked when the tag is clicked. It receives no argument and its return value is ignored.
+     * A function that will be invoked when the tag is clicked.
      *
      * @event
      */
-    onClick?: () => void;
+    onClick?: ReactionsHandler<ExtensionEvent>;
 }
 /**
  * @internal
@@ -769,7 +787,24 @@ export type TextProps = {
      * - <Text inline={true}>
      */
     format?: TextFormatOptions;
+    /**
+     * @interface
+     * truncates long strings to a single line. If the full string doesn’t fit in one line,
+     * it’s shown in a tooltip on hover.
+     *
+     * - `false` => no truncation(default).
+     * - `true` => truncates the string to a single line. Full-text will show inside the tooltip.
+     * - { tooltipText: 'some text' } => truncates the string and lets you control the contents of the tooltip.
+     * - { maxWidth: 150 } => sets the width(in pixel) of the line.
+     *
+     * @defaultValue `false`
+     */
+    truncate?: boolean | TruncateOptions;
 };
+export interface TruncateOptions {
+    maxWidth?: number;
+    tooltipText?: string;
+}
 /**
  * The props type for {@link !components.Tile}.
  *
@@ -1094,11 +1129,11 @@ export interface StatisticsItemProps {
     /**
      * The string to be displayed as the item's primary number.
      */
-    number: string;
+    number: string | number;
     /**
      * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. The children should be {@link !components.StatisticsTrend} or {@link !components.Text}.
      */
-    children: ReactNode;
+    children?: ReactNode;
 }
 /**
  * The props type for {@link !components.Statistics}.
@@ -1473,14 +1508,14 @@ export interface ExampleCrmComponentProps {
 /** @ignore */
 export type PanelAction = (panelId: string) => void;
 /** @ignore */
-export interface GlobalActions {
+export interface Reactions {
     openPanel: PanelAction;
     closePanel: PanelAction;
 }
 /** @ignore */
 export interface ExtensionPointApi<ExtensionPointName extends keyof ExtensionPoints> {
     runServerlessFunction: ServerlessFuncRunner;
-    actions: ExtensionPoints[ExtensionPointName]['actions'] & GlobalActions;
+    actions: ExtensionPoints[ExtensionPointName]['actions'];
     context: ExtensionPoints[ExtensionPointName]['context'];
 }
 /** @ignore */
@@ -1654,6 +1689,7 @@ export interface TablePaginatedProps extends BaseTableProps {
  * @category Component Props
  */
 export type TableProps = TableNoPaginatedProps | TablePaginatedProps;
+/** @deprecated use ExtensionEvent/FormSubmitExtensionEvent instead */
 export declare class RemoteEvent<V> {
     type: string;
     bubbles: boolean;
@@ -1684,11 +1720,11 @@ export interface LinkProps {
      */
     variant?: 'primary' | 'destructive' | 'light' | 'dark';
     /**
-     * A function that will be invoked with the link is clicked. The function receives no arguments and its return value is ignored.
+     * A function that will be invoked with the link is clicked.
      *
      * @event
      */
-    onClick?: () => void;
+    onClick?: ReactionsHandler<ExtensionEvent>;
     /**
      * When set to true, `event.preventDefault()` will be invoked before the `onClick` function is called, preventing automatic navigation to the href URL.
      *
@@ -1865,9 +1901,9 @@ export interface ToggleProps {
     /**
      * The size variation of the toggle.
      *
-     * @defaultValue `"default"`
+     * @defaultValue `"medium"`
      */
-    size?: TShirtSizes['sm'] | TShirtSizes['xs'] | 'default';
+    size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'] | 'default';
     /**
      * A function that is called when the `checked` input status changes.
      *
@@ -1958,4 +1994,48 @@ export interface PanelProps {
      */
     variant?: 'modal' | 'default';
 }
+export interface DropdownOption {
+    /**
+     * Text to be displayed as the menu item text.
+     *
+     */
+    label: string;
+    /**
+     * A function that will be invoked when the item is clicked.
+     * It receives no arguments and its return value is ignored.
+     *
+     * @event
+     */
+    onClick?: () => void;
+}
+/**
+ * The props type for {@link !components.Dropdown}.
+ *
+ * @category Component Props
+ */
+export interface DropdownProps {
+    /**
+     * The list of options to be rendered within the dropdown menu.
+     * Each option represents an entry in the Dropdown.
+     */
+    options: DropdownOption[];
+    /**
+     * Controls the appearance of the dropdown button
+     *
+     * @defaultValue `"secondary"`
+     */
+    variant?: 'primary' | 'secondary' | 'transparent';
+    /**
+     * Sets the content for the dropdown button.
+     *
+     * @defaultValue `"More"`
+     */
+    buttonText?: string;
+    /**
+     * Sets the size of the dropdown button.
+     *
+     * @defaultValue `"md"`
+     */
+    buttonSize?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
+}
 export {};

package/dist/types.js

@@ -1,3 +1,22 @@
+export class ExtensionEvent {
+    type;
+    bubbles;
+    timeStamp;
+    id;
+    constructor(event) {
+        this.bubbles = event.bubbles;
+        this.type = event.type;
+        this.timeStamp = event.timeStamp;
+        this.id = crypto.randomUUID();
+    }
+}
+export class FormSubmitExtensionEvent extends ExtensionEvent {
+    targetValue;
+    constructor(value, event) {
+        super(event);
+        this.targetValue = value;
+    }
+}
 /**
  * @category Serverless
  */
@@ -6,6 +25,7 @@ export var ServerlessExecutionStatus;
     ServerlessExecutionStatus["Success"] = "SUCCESS";
     ServerlessExecutionStatus["Error"] = "ERROR";
 })(ServerlessExecutionStatus || (ServerlessExecutionStatus = {}));
+/** @deprecated use ExtensionEvent/FormSubmitExtensionEvent instead */
 export class RemoteEvent {
     type;
     bubbles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.8.3",
+  "version": "0.8.5",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -21,7 +21,8 @@
   },
   "exports": {
     ".": "./dist/index.js",
-    "./crm": "./dist/crm/index.js"
+    "./crm": "./dist/crm/index.js",
+    "./experimental": "./dist/experimental/index.js"
   },
   "license": "MIT",
   "dependencies": {
@@ -50,5 +51,5 @@
   "devDependencies": {
     "typescript": "5.0.4"
   },
-  "gitHead": "ab25629916c542f19bf8cde83a10ad8bd225078f"
+  "gitHead": "c9d6a64b37208e4387fa09655c3ada9733dd8602"
 }