@hubspot/ui-extensions 0.9.3 → 0.9.5

package/dist/experimental/hooks/useAssociations.js

@@ -0,0 +1,176 @@
+import { useEffect, useReducer, useMemo, useRef, useCallback } from 'react';
+import { logger } from '../../logger';
+import { fetchAssociations, DEFAULT_PAGE_SIZE, pageToOffset, calculatePaginationFlags, } from '../crm/fetchAssociations';
+function createInitialState(pageSize) {
+    return {
+        results: [],
+        error: null,
+        isLoading: true,
+        currentPage: 1,
+        pageSize,
+        hasMore: false,
+    };
+}
+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,
+                error: null,
+            };
+        case 'FETCH_ERROR':
+            return {
+                ...state,
+                isLoading: false,
+                error: action.payload,
+                results: [],
+                hasMore: false,
+            };
+        case 'NEXT_PAGE':
+            return {
+                ...state,
+                currentPage: state.currentPage + 1,
+            };
+        case 'PREVIOUS_PAGE':
+            return {
+                ...state,
+                currentPage: Math.max(1, state.currentPage - 1),
+            };
+        case 'RESET':
+            return {
+                ...state,
+                currentPage: 1,
+                results: [],
+                hasMore: false,
+                error: null,
+            };
+        default:
+            return state;
+    }
+}
+const DEFAULT_OPTIONS = {};
+export function useAssociations(config, options = DEFAULT_OPTIONS) {
+    const pageSize = config.pageLength ?? DEFAULT_PAGE_SIZE;
+    const [state, dispatch] = useReducer(associationsReducer, useMemo(() => createInitialState(pageSize), [pageSize]));
+    // 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 config 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 lastConfigRef = useRef();
+    const lastConfigKeyRef = useRef();
+    const lastOptionsRef = useRef();
+    const lastOptionsKeyRef = useRef();
+    const stableConfig = useMemo(() => {
+        const configKey = JSON.stringify(config);
+        if (configKey === lastConfigKeyRef.current) {
+            return lastConfigRef.current;
+        }
+        lastConfigKeyRef.current = configKey;
+        lastConfigRef.current = config;
+        return config;
+    }, [config]);
+    const stableOptions = useMemo(() => {
+        const optionsKey = JSON.stringify(options);
+        if (optionsKey === lastOptionsKeyRef.current) {
+            return lastOptionsRef.current;
+        }
+        lastOptionsKeyRef.current = optionsKey;
+        lastOptionsRef.current = options;
+        return options;
+    }, [options]);
+    // Pagination actions
+    const nextPage = useCallback(() => {
+        const paginationFlags = calculatePaginationFlags(state.currentPage, state.hasMore);
+        if (paginationFlags.hasNextPage) {
+            dispatch({ type: 'NEXT_PAGE' });
+        }
+    }, [state.currentPage, state.hasMore]);
+    const previousPage = useCallback(() => {
+        const paginationFlags = calculatePaginationFlags(state.currentPage, state.hasMore);
+        if (paginationFlags.hasPreviousPage) {
+            dispatch({ type: 'PREVIOUS_PAGE' });
+        }
+    }, [state.currentPage, state.hasMore]);
+    const reset = useCallback(() => {
+        dispatch({ type: 'RESET' });
+    }, []);
+    // Fetch the associations
+    useEffect(() => {
+        let cancelled = false;
+        let cleanup = null;
+        const fetchData = async () => {
+            try {
+                dispatch({ type: 'FETCH_START' });
+                // Build request using current page and pagination utilities
+                const request = {
+                    toObjectType: stableConfig.toObjectType,
+                    properties: stableConfig.properties,
+                    pageLength: pageSize,
+                    offset: pageToOffset(state.currentPage, pageSize),
+                };
+                const result = await fetchAssociations(request, {
+                    propertiesToFormat: stableOptions.propertiesToFormat,
+                    formattingOptions: stableOptions.formattingOptions,
+                });
+                if (!cancelled) {
+                    dispatch({
+                        type: 'FETCH_SUCCESS',
+                        payload: {
+                            results: result.data.results,
+                            hasMore: result.data.hasMore,
+                        },
+                    });
+                    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();
+            }
+        };
+    }, [stableConfig, stableOptions, state.currentPage, pageSize]);
+    // Calculate pagination flags
+    const paginationFlags = calculatePaginationFlags(state.currentPage, state.hasMore);
+    return {
+        results: state.results,
+        error: state.error,
+        isLoading: state.isLoading,
+        pagination: {
+            hasNextPage: paginationFlags.hasNextPage,
+            hasPreviousPage: paginationFlags.hasPreviousPage,
+            currentPage: state.currentPage,
+            pageSize: state.pageSize,
+            nextPage,
+            previousPage,
+            reset,
+        },
+    };
+}

package/dist/experimental/hooks/useCrmProperties.js

@@ -1,6 +1,37 @@
-import { useEffect, useState, useMemo, useRef } from 'react';
+import { useEffect, useReducer, useMemo, useRef } from 'react';
 import { logger } from '../../logger';
 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.
@@ -8,9 +39,7 @@ const DEFAULT_OPTIONS = {};
  * @experimental This hook is experimental and might change or be removed in future versions.
  */
 export function useCrmProperties(propertyNames, options = DEFAULT_OPTIONS) {
-    const [properties, setProperties] = useState({});
-    const [isLoading, setIsLoading] = useState(true);
-    const [error, setError] = useState(null);
+    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.');
@@ -51,11 +80,14 @@ export function useCrmProperties(propertyNames, options = DEFAULT_OPTIONS) {
         let cleanup = null;
         const fetchData = async () => {
             try {
-                setIsLoading(true);
-                setError(null);
-                const result = await fetchCrmProperties(stablePropertyNames, setProperties, stableOptions);
+                dispatch({ type: 'FETCH_START' });
+                const result = await fetchCrmProperties(stablePropertyNames, (data) => {
+                    if (!cancelled) {
+                        dispatch({ type: 'FETCH_SUCCESS', payload: data });
+                    }
+                }, stableOptions);
                 if (!cancelled) {
-                    setProperties(result.data);
+                    dispatch({ type: 'FETCH_SUCCESS', payload: result.data });
                     cleanup = result.cleanup;
                 }
             }
@@ -64,13 +96,7 @@ export function useCrmProperties(propertyNames, options = DEFAULT_OPTIONS) {
                     const errorData = err instanceof Error
                         ? err
                         : new Error('Failed to fetch CRM properties');
-                    setError(errorData);
-                    setProperties({});
-                }
-            }
-            finally {
-                if (!cancelled) {
-                    setIsLoading(false);
+                    dispatch({ type: 'FETCH_ERROR', payload: errorData });
                 }
             }
         };
@@ -83,9 +109,5 @@ export function useCrmProperties(propertyNames, options = DEFAULT_OPTIONS) {
             }
         };
     }, [stablePropertyNames, stableOptions]);
-    return {
-        properties,
-        error,
-        isLoading,
-    };
+    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,18 +84,28 @@ 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>>;
-/**
- * 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>>;
-export { Iframe, MediaObject, Inline, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, TimeInput, 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. */
+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, 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. */
@@ -36,10 +37,16 @@ const ExpandableText = createRemoteReactComponent('ExpandableText');
  */
 const Popover = createRemoteReactComponent('Popover');
 const FileInput = createRemoteReactComponent('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');
-export { Iframe, MediaObject, Inline, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, TimeInput, 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, CurrencyInput, HeaderActions, PrimaryHeaderActionButton, SecondaryHeaderActionButton, };

package/dist/experimental/types.d.ts

@@ -168,16 +168,6 @@ 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
@@ -258,50 +248,6 @@ export interface BaseInputProps<T = string, V = string> {
      */
     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
@@ -331,4 +277,25 @@ export interface CurrencyInputProps extends BaseInputForNumber {
      */
     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 {};

package/dist/types.d.ts

@@ -231,6 +231,10 @@ export interface SettingsActions {
     addAlert: AddAlertAction;
 }
 /** @ignore */
+export interface AppHomeActions {
+    addAlert: AddAlertAction;
+}
+/** @ignore */
 export interface UiePlatformActions {
     copyTextToClipboard: Clipboard['writeText'];
     closeOverlay: CloseOverlayAction;
@@ -1182,6 +1186,59 @@ export interface DateInputProps extends BaseDateInputForDate {
      */
     todayButtonLabel?: string;
 }
+/**
+ * Object that represents times.
+ */
+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;
+}
+/**
+ * @ignore
+ *
+ * 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'>;
+/**
+ * The props type for {@link !components.TimeInput}.
+ *
+ * @category Component Props
+ */
+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 TimeInput. This will not modify the available valid inputs.
+     *
+     */
+    timezone?: 'userTz' | 'portalTz';
+}
 /**
  * The props type for {@link !components.SearchInput}.
  *
@@ -2461,6 +2518,10 @@ export interface SettingsContext extends BaseContext {
     location: 'settings';
 }
 /** @ignore */
+export interface AppHomeContext extends BaseContext {
+    location: 'home';
+}
+/** @ignore */
 export interface GenericContext extends BaseContext {
     location: 'uie.playground.middle';
 }
@@ -2793,6 +2854,11 @@ export interface SettingsExtensionPoint extends ExtensionPointContract {
     actions: SettingsActions & UiePlatformActions;
     context: SettingsContext;
 }
+/** @ignore */
+export interface AppHomeExtensionPoint extends ExtensionPointContract {
+    actions: AppHomeActions;
+    context: AppHomeContext;
+}
 export interface ExampleCrmComponentProps {
     name: string;
     size: 'sm' | 'md' | 'lg';
@@ -2808,7 +2874,7 @@ interface RemotePlaygroundExtensionPoint extends ExtensionPointContract {
         ExampleCrmComponent: ComponentType<ExampleCrmComponentProps>;
     };
 }
-export declare const EXTENSION_POINT_LOCATIONS: readonly ["crm.preview", "crm.record.sidebar", "crm.record.tab", "helpdesk.sidebar", "uie.playground.middle", "settings"];
+export declare const EXTENSION_POINT_LOCATIONS: readonly ["crm.preview", "crm.record.sidebar", "crm.record.tab", "helpdesk.sidebar", "uie.playground.middle", "settings", "home"];
 export type ExtensionPointLocation = TypesOfReadOnlyArray<typeof EXTENSION_POINT_LOCATIONS>;
 /** @ignore */
 interface LocationToExtensionPoint {
@@ -2818,6 +2884,7 @@ interface LocationToExtensionPoint {
     'crm.record.sidebar': CrmSidebarExtensionPoint;
     'helpdesk.sidebar': StandardCrmExtensionPoint;
     settings: SettingsExtensionPoint;
+    home: AppHomeExtensionPoint;
 }
 /**
  * While this resolves to the same result as LocationToExtensionPoint, it ensures that every location

package/dist/types.js

@@ -235,6 +235,7 @@ export const EXTENSION_POINT_LOCATIONS = [
     'helpdesk.sidebar',
     'uie.playground.middle',
     'settings',
+    'home',
 ];
 /**
  * @category Serverless

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.9.3",
+  "version": "0.9.5",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -66,5 +66,5 @@
     "ts-jest": "^29.1.1",
     "typescript": "5.0.4"
   },
-  "gitHead": "a5c7f8d19d0dc16b44e9235d3e12dacc2cc14fdf"
+  "gitHead": "8344193a13ab5874924b02d67413dad052558ecf"
 }