@hubspot/ui-extensions 0.9.2 → 0.9.4

package/dist/experimental/crm/fetchCrmProperties.js

@@ -4,29 +4,35 @@ function isCrmPropertiesResponse(data) {
     // Confirm the data is a defined object
     data === null ||
         typeof data !== 'object' ||
-        // Confirm all keys and values are strings
-        !Object.keys(data).every((key) => typeof key === 'string' && typeof data[key] === 'string')) {
+        // Confirm all keys and values are strings, or null
+        !Object.keys(data).every((key) => typeof key === 'string' &&
+            (typeof data[key] === 'string' || data[key] === null))) {
         return false;
     }
     return true;
 }
-export const fetchCrmProperties = async (propertyNames, propertiesUpdatedCallback) => {
+export const fetchCrmProperties = async (propertyNames, propertiesUpdatedCallback, options) => {
+    let response;
+    let result;
     try {
         // eslint-disable-next-line hubspot-dev/no-confusing-browser-globals
-        const response = await self.fetchCrmProperties(propertyNames, propertiesUpdatedCallback);
-        if (!response.ok) {
-            throw new Error(`Failed to fetch CRM properties: ${response.statusText}`);
-        }
-        const data = await response.json();
-        if (!isCrmPropertiesResponse(data)) {
-            throw new Error('Invalid response format');
-        }
-        return data;
+        response = await self.fetchCrmProperties(propertyNames, propertiesUpdatedCallback, options);
+        result = await response.json();
     }
     catch (error) {
-        if (error instanceof Error) {
-            throw error;
-        }
-        throw new Error('Failed to fetch CRM properties: Unknown error');
+        // Only handle network/parsing errors, not our validation errors
+        throw error instanceof Error
+            ? error
+            : new Error('Failed to fetch CRM properties: Unknown error');
     }
+    if (result.error) {
+        throw new Error(result.error);
+    }
+    if (!response.ok) {
+        throw new Error(`Failed to fetch CRM properties: ${response.statusText}`);
+    }
+    if (!isCrmPropertiesResponse(result.data)) {
+        throw new Error('Invalid response format');
+    }
+    return result;
 };

package/dist/experimental/hooks/useAssociations.d.ts

@@ -0,0 +1,10 @@
+import { type FetchAssociationsRequest, type AssociationsResponse } from '../crm/fetchAssociations';
+import { type FetchCrmPropertiesOptions } from '../crm/fetchCrmProperties';
+export interface AssociationsState {
+    results: AssociationsResponse['results'];
+    error: Error | null;
+    isLoading: boolean;
+    hasMore: boolean;
+    nextOffset: number;
+}
+export declare function useAssociations(request: FetchAssociationsRequest, options?: FetchCrmPropertiesOptions): AssociationsState;

package/dist/experimental/hooks/useAssociations.js

@@ -0,0 +1,116 @@
+import { useEffect, useReducer, useMemo, useRef } from 'react';
+import { logger } from '../../logger';
+import { fetchAssociations, } from '../crm/fetchAssociations';
+const initialState = {
+    results: [],
+    error: null,
+    isLoading: true,
+    hasMore: false,
+    nextOffset: 0,
+};
+function associationsReducer(state, action) {
+    switch (action.type) {
+        case 'FETCH_START':
+            return {
+                ...state,
+                isLoading: true,
+                error: null,
+            };
+        case 'FETCH_SUCCESS':
+            return {
+                ...state,
+                isLoading: false,
+                results: action.payload.results,
+                hasMore: action.payload.hasMore,
+                nextOffset: action.payload.nextOffset,
+                error: null,
+            };
+        case 'FETCH_ERROR':
+            return {
+                ...state,
+                isLoading: false,
+                error: action.payload,
+                results: [],
+                hasMore: false,
+                nextOffset: 0,
+            };
+        default:
+            return state;
+    }
+}
+const DEFAULT_OPTIONS = {};
+export function useAssociations(request, options = DEFAULT_OPTIONS) {
+    const [state, dispatch] = useReducer(associationsReducer, initialState);
+    // Log experimental warning once on mount
+    useEffect(() => {
+        logger.warn('useAssociations is an experimental hook and might change or be removed in the future.');
+    }, []);
+    /**
+     * HOOK OPTIMIZATION:
+     *
+     * Create stable references for request and options to prevent unnecessary re-renders and API calls.
+     * Then, external developers can pass inline objects without worrying about memoization
+     * We handle the deep equality comparison ourselves, and return the same object reference when content is equivalent.
+     */
+    const lastRequestRef = useRef();
+    const lastRequestKeyRef = useRef();
+    const lastOptionsRef = useRef();
+    const lastOptionsKeyRef = useRef();
+    const stableRequest = useMemo(() => {
+        const requestKey = JSON.stringify(request);
+        if (requestKey === lastRequestKeyRef.current) {
+            return lastRequestRef.current;
+        }
+        lastRequestKeyRef.current = requestKey;
+        lastRequestRef.current = request;
+        return request;
+    }, [request]);
+    const stableOptions = useMemo(() => {
+        const optionsKey = JSON.stringify(options);
+        if (optionsKey === lastOptionsKeyRef.current) {
+            return lastOptionsRef.current;
+        }
+        lastOptionsKeyRef.current = optionsKey;
+        lastOptionsRef.current = options;
+        return options;
+    }, [options]);
+    // Fetch the associations
+    useEffect(() => {
+        let cancelled = false;
+        let cleanup = null;
+        const fetchData = async () => {
+            try {
+                dispatch({ type: 'FETCH_START' });
+                const result = await fetchAssociations(stableRequest, stableOptions);
+                if (!cancelled) {
+                    dispatch({
+                        type: 'FETCH_SUCCESS',
+                        payload: {
+                            results: result.data.results,
+                            hasMore: result.data.hasMore,
+                            nextOffset: result.data.nextOffset,
+                        },
+                    });
+                    cleanup = result.cleanup;
+                }
+            }
+            catch (err) {
+                if (!cancelled) {
+                    const errorData = err instanceof Error
+                        ? err
+                        : new Error('Failed to fetch associations');
+                    dispatch({ type: 'FETCH_ERROR', payload: errorData });
+                }
+            }
+        };
+        fetchData();
+        return () => {
+            cancelled = true;
+            // Call cleanup function to release resources
+            if (cleanup) {
+                cleanup();
+            }
+        };
+    }, [stableRequest, stableOptions]);
+    return state;
+}

package/dist/experimental/hooks/useCrmProperties.d.ts

@@ -1,5 +1,6 @@
+import { type FetchCrmPropertiesOptions } from '../crm/fetchCrmProperties';
 export interface CrmPropertiesState {
-    properties: Record<string, string>;
+    properties: Record<string, string | null>;
     error: Error | null;
     isLoading: boolean;
 }
@@ -8,4 +9,4 @@ export interface CrmPropertiesState {
  *
  * @experimental This hook is experimental and might change or be removed in future versions.
  */
-export declare function useCrmProperties(propertyNames: string[]): CrmPropertiesState;
+export declare function useCrmProperties(propertyNames: string[], options?: FetchCrmPropertiesOptions): CrmPropertiesState;

package/dist/experimental/hooks/useCrmProperties.js

@@ -1,49 +1,113 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useReducer, useMemo, useRef } from 'react';
 import { logger } from '../../logger';
-import { fetchCrmProperties } from '../crm/fetchCrmProperties';
+import { fetchCrmProperties, } from '../crm/fetchCrmProperties';
+const initialState = {
+    properties: {},
+    error: null,
+    isLoading: true,
+};
+function crmPropertiesReducer(state, action) {
+    switch (action.type) {
+        case 'FETCH_START':
+            return {
+                ...state,
+                isLoading: true,
+                error: null,
+            };
+        case 'FETCH_SUCCESS':
+            return {
+                ...state,
+                isLoading: false,
+                properties: action.payload,
+                error: null,
+            };
+        case 'FETCH_ERROR':
+            return {
+                ...state,
+                isLoading: false,
+                error: action.payload,
+                properties: {},
+            };
+        default:
+            return state;
+    }
+}
+const DEFAULT_OPTIONS = {};
 /**
  * A hook for using and managing CRM properties.
  *
  * @experimental This hook is experimental and might change or be removed in future versions.
  */
-export function useCrmProperties(propertyNames) {
-    const [properties, setProperties] = useState({});
-    const [isLoading, setIsLoading] = useState(true);
-    const [error, setError] = useState(null);
+export function useCrmProperties(propertyNames, options = DEFAULT_OPTIONS) {
+    const [state, dispatch] = useReducer(crmPropertiesReducer, initialState);
     // Log experimental warning once on mount
     useEffect(() => {
         logger.warn('useCrmProperties is an experimental hook and might change or be removed in the future.');
     }, []);
-    const propertiesUpdatedCallback = (newProperties) => {
-        setProperties(newProperties);
-    };
+    /**
+     * HOOK OPTIMIZATION:
+     *
+     * Create stable references for propertyNames and options to prevent unnecessary re-renders and API calls.
+     * Then, external developers can pass inline arrays/objects without worrying about memoization
+     * We handle the deep equality comparison ourselves, and return the same object reference when content is equivalent.
+     */
+    const lastPropertyNamesRef = useRef();
+    const lastPropertyNamesKeyRef = useRef();
+    const lastOptionsRef = useRef();
+    const lastOptionsKeyRef = useRef();
+    const stablePropertyNames = useMemo(() => {
+        const sortedNames = [...propertyNames].sort();
+        const propertyNamesKey = JSON.stringify(sortedNames);
+        if (propertyNamesKey === lastPropertyNamesKeyRef.current) {
+            return lastPropertyNamesRef.current;
+        }
+        lastPropertyNamesKeyRef.current = propertyNamesKey;
+        lastPropertyNamesRef.current = sortedNames;
+        return sortedNames;
+    }, [propertyNames]);
+    const stableOptions = useMemo(() => {
+        const optionsKey = JSON.stringify(options);
+        if (optionsKey === lastOptionsKeyRef.current) {
+            return lastOptionsRef.current;
+        }
+        lastOptionsKeyRef.current = optionsKey;
+        lastOptionsRef.current = options;
+        return options;
+    }, [options]);
     // Fetch the properties
     useEffect(() => {
-        (async () => {
+        let cancelled = false;
+        let cleanup = null;
+        const fetchData = async () => {
             try {
-                const propertyData = await fetchCrmProperties(propertyNames, propertiesUpdatedCallback);
-                setProperties(propertyData);
-                setError(null);
+                dispatch({ type: 'FETCH_START' });
+                const result = await fetchCrmProperties(stablePropertyNames, (data) => {
+                    if (!cancelled) {
+                        dispatch({ type: 'FETCH_SUCCESS', payload: data });
+                    }
+                }, stableOptions);
+                if (!cancelled) {
+                    dispatch({ type: 'FETCH_SUCCESS', payload: result.data });
+                    cleanup = result.cleanup;
+                }
             }
             catch (err) {
-                const errorData = err instanceof Error
-                    ? err
-                    : new Error('Failed to fetch CRM properties');
-                setError(errorData);
-                setProperties({});
+                if (!cancelled) {
+                    const errorData = err instanceof Error
+                        ? err
+                        : new Error('Failed to fetch CRM properties');
+                    dispatch({ type: 'FETCH_ERROR', payload: errorData });
+                }
             }
-            finally {
-                setIsLoading(false);
+        };
+        fetchData();
+        return () => {
+            cancelled = true;
+            // Call cleanup function to release RPC resources
+            if (cleanup) {
+                cleanup();
             }
-        })().catch((err) => {
-            setError(err);
-            setProperties({});
-            setIsLoading(false);
-        });
-    }, [propertyNames]);
-    return {
-        properties,
-        error,
-        isLoading,
-    };
+        };
+    }, [stablePropertyNames, stableOptions]);
+    return state;
 }

package/dist/experimental/index.d.ts

@@ -1,6 +1,7 @@
 import type * as types from '../types';
 import type * as experimentalTypes from './types';
 export { useCrmProperties } from './hooks/useCrmProperties';
+export { useAssociations } from './hooks/useAssociations';
 /** @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. */
 declare const Iframe: "Iframe" & {
     readonly type?: "Iframe" | undefined;
@@ -83,4 +84,36 @@ declare const FileInput: "FileInput" & {
     readonly props?: experimentalTypes.FileInputProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"FileInput", experimentalTypes.FileInputProps, true>>;
-export { Iframe, MediaObject, Inline, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, };
+/**
+ * The TimeInput component renders an input field where a user can select a time.
+ */
+declare const TimeInput: "TimeInput" & {
+    readonly type?: "TimeInput" | undefined;
+    readonly props?: experimentalTypes.TimeInputProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TimeInput", experimentalTypes.TimeInputProps, true>>;
+/** @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. */
+declare const CurrencyInput: "CurrencyInput" & {
+    readonly type?: "CurrencyInput" | undefined;
+    readonly props?: experimentalTypes.CurrencyInputProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"CurrencyInput", experimentalTypes.CurrencyInputProps, true>>;
+/** @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. */
+declare const HeaderActions: "HeaderActions" & {
+    readonly type?: "HeaderActions" | undefined;
+    readonly props?: experimentalTypes.HeaderActionsProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"HeaderActions", experimentalTypes.HeaderActionsProps, true>>;
+/** @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. */
+declare const PrimaryHeaderActionButton: "PrimaryHeaderActionButton" & {
+    readonly type?: "PrimaryHeaderActionButton" | undefined;
+    readonly props?: experimentalTypes.HeaderActionButtonProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"PrimaryHeaderActionButton", experimentalTypes.HeaderActionButtonProps, true>>;
+/** @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. */
+declare const SecondaryHeaderActionButton: "SecondaryHeaderActionButton" & {
+    readonly type?: "SecondaryHeaderActionButton" | undefined;
+    readonly props?: experimentalTypes.HeaderActionButtonProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"SecondaryHeaderActionButton", experimentalTypes.HeaderActionButtonProps, true>>;
+export { Iframe, MediaObject, Inline, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, TimeInput, CurrencyInput, HeaderActions, PrimaryHeaderActionButton, SecondaryHeaderActionButton, };

package/dist/experimental/index.js

@@ -1,5 +1,6 @@
 import { createRemoteReactComponent } from '@remote-ui/react';
 export { useCrmProperties } from './hooks/useCrmProperties';
+export { useAssociations } from './hooks/useAssociations';
 /** @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. */
 const Iframe = createRemoteReactComponent('Iframe');
 /** @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. */
@@ -34,8 +35,22 @@ const ExpandableText = createRemoteReactComponent('ExpandableText');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/popover Popover Docs}
  */
-const Popover = createRemoteReactComponent('Popover', {
-    fragmentProps: ['header', 'body', 'footer'],
-});
+const Popover = createRemoteReactComponent('Popover');
 const FileInput = createRemoteReactComponent('FileInput');
-export { Iframe, MediaObject, Inline, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, };
+/**
+ * The TimeInput component renders an input field where a user can select a time.
+ */
+const TimeInput = createRemoteReactComponent('TimeInput');
+/** @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. */
+const CurrencyInput = createRemoteReactComponent('CurrencyInput');
+/** @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. */
+const HeaderActions = createRemoteReactComponent('HeaderActions');
+/** @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. */
+const PrimaryHeaderActionButton = createRemoteReactComponent('PrimaryHeaderActionButton', {
+    fragmentProps: ['overlay'],
+});
+/** @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. */
+const SecondaryHeaderActionButton = createRemoteReactComponent('SecondaryHeaderActionButton', {
+    fragmentProps: ['overlay'],
+});
+export { Iframe, MediaObject, Inline, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, TimeInput, CurrencyInput, HeaderActions, PrimaryHeaderActionButton, SecondaryHeaderActionButton, };

package/dist/experimental/types.d.ts

@@ -127,17 +127,39 @@ export interface ExpandableTextProps {
  * @experimental do not use in production
  */
 export interface PopoverProps {
+    /**
+     * A unique ID for the popover. Used to identify the popover in the overlay system.
+     *
+     */
+    id: string;
+    /**
+     * The content to render inside the popover.
+     */
     children: ReactNode;
-    open?: boolean;
-    onOpenChange?: () => void;
+    /**
+     * The placement of the popover.
+     *
+     * @defaultValue `top`
+     */
     placement?: 'left' | 'right' | 'top' | 'bottom';
-    header?: ReactNode;
-    body?: ReactNode;
-    footer?: ReactNode;
+    /**
+     * The variant of the popover.
+     *
+     * @defaultValue `default`
+     */
     variant?: 'default' | 'shepherd' | 'longform';
+    /**
+     * If set to `true`, will show the close button in the popover. PopoverHeader required to display close button.
+     *
+     * @defaultValue `false`
+     */
     showCloseButton?: boolean;
+    /**
+     * The size of the arrow in the popover. If set to `none`, the arrow will not be displayed.
+     *
+     * @defaultValue `small`
+     */
     arrowSize?: 'none' | 'small' | 'medium';
-    onClick?: ReactionsHandler<ExtensionEvent>;
 }
 export interface FileInputProps {
     value?: File | {
@@ -146,4 +168,188 @@ export interface FileInputProps {
     name: string;
     onChange: (event: any) => void;
 }
+/**
+ * @ignore
+ * @experimental do not use in production
+ */
+export interface BaseTime {
+    /** The hour for the time (0 to 23) in 24-hour format (e.g. 0 = 12:00 AM, 9 = 9:00 AM, 15 = 3:00 PM). */
+    hours: number;
+    /** The minutes for the time (0 to 59). */
+    minutes: number;
+}
+/**
+ * Generic collection of props for all inputs (experimental version)
+ * @internal
+ * */
+export interface BaseInputProps<T = string, V = string> {
+    /**
+     * The label text to display for the form input element.
+     */
+    label: string;
+    /**
+     * The unique identifier for the input element, this could be thought of as the HTML5 [Input element's name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name).
+     */
+    name: string;
+    /**
+     * The value of the input.
+     */
+    value?: T;
+    /**
+     * Determines if the required indicator should be displayed.
+     *
+     * @defaultValue `false`
+     */
+    required?: boolean;
+    /**
+     * Determines if the field is editable or not.
+     *
+     * @defaultValue `false`
+     */
+    readOnly?: boolean;
+    /**
+     * Instructional message to display to the user to help understand the purpose of the input.
+     */
+    description?: string;
+    /**
+     * Text that will appear in a tooltip next to the input label.
+     */
+    tooltip?: string;
+    /**
+     * Text that appears in the input when it has no value set.
+     */
+    placeholder?: string;
+    /**
+     * If set to `true`, `validationMessage` is displayed as an error message, if it was provided. The input will also render its error state to let the user know there is an error. If set to `false`, `validationMessage` is displayed as a success message.
+     *
+     * @defaultValue `false`
+     */
+    error?: boolean;
+    /**
+     * The value of the input on the first render.
+     */
+    defaultValue?: T;
+    /**
+     * The text to show under the input for error or success validations.
+     */
+    validationMessage?: string;
+    /**
+     * A callback function that is invoked when the value is committed. Currently these times are `onBlur` of the input and when the user submits the form.
+     *
+     * @event
+     */
+    onChange?: (value: V) => void;
+    /**
+     * A function that is called and passed the value every time the field is edited by the user. It is recommended that you do not use this value to update state, that is what `onChange` should be used for. Instead this should be used for validation.
+     *
+     * @event
+     */
+    onInput?: (value: V) => void;
+    /**
+     * A function that is called and passed the value every time the field loses focus.
+     *
+     * @event
+     */
+    onBlur?: (value: V) => void;
+    /**
+     * A function that is called and passed the value every time the field gets focused.
+     *
+     * @event
+     */
+    onFocus?: (value: V) => void;
+}
+/**
+ * @ignore
+ * @experimental do not use in production
+ *
+ * The values used to invoke events on the TimeInput component
+ */
+export interface TimeInputEventsPayload extends BaseTime {
+}
+/**
+ * @internal
+ * @ignore
+ * */
+type BaseTimeInputForTime = Omit<BaseInputProps<BaseTime | null, TimeInputEventsPayload>, 'onInput' | 'placeholder' | 'onChange'>;
+/**
+ * @ignore
+ * @experimental do not use in production
+ */
+export interface TimeInputProps extends BaseTimeInputForTime {
+    /**
+     * A callback function that is invoked when the value is changed.
+     *
+     * @event
+     */
+    onChange?: (value: TimeInputEventsPayload) => void;
+    /**
+     * Sets the earliest time that will be valid.
+     */
+    min?: BaseTime;
+    /**
+     * Sets the latest time that will be valid.
+     */
+    max?: BaseTime;
+    /**
+     * Sets the interval (in minutes) between the dropdown options.
+     *
+     *  @defaultValue `30`
+     */
+    interval?: number;
+    /**
+     * Sets the timezone that the component will display alongside times in the TimePicker. This will not adjust the available valid inputs.
+     *
+     */
+    timezone?: 'userTz' | 'portalTz';
+}
+/**
+ * @ignore
+ * @experimental do not use in production
+ */
+type BaseInputForNumber = Omit<BaseInputProps<number, number>, 'onInput'>;
+/**
+ * @ignore
+ * @experimental do not use in production
+ */
+export interface CurrencyInputProps extends BaseInputForNumber {
+    /**
+     * ISO 4217 currency code (e.g., "USD", "EUR", "JPY")
+     * @defaultValue "USD"
+     */
+    currency?: string;
+    /**
+     * Sets the number of decimal places for the currency
+     * If not provided, defaults to currency-specific precision
+     */
+    precision?: number;
+    /**
+     * Sets the lower bound of the input
+     */
+    min?: number;
+    /**
+     * Sets the upper bound of the input
+     */
+    max?: number;
+}
+/**
+ * @ignore
+ * @experimental do not use in production
+ */
+export interface HeaderActionsProps {
+    children: ReactNode;
+}
+/**
+ * @ignore
+ * @experimental do not use in production
+ */
+export interface HeaderActionButtonProps {
+    onClick?: ReactionsHandler<ExtensionEvent>;
+    href?: string | {
+        url: string;
+        external?: boolean;
+    };
+    disabled?: boolean;
+    children: ReactNode;
+    overlay?: RemoteFragment;
+}
 export {};