@hubspot/ui-extensions 0.8.53 → 0.8.55

package/dist/__tests__/experimental/crm/fetchCrmProperties.spec.js

@@ -24,8 +24,8 @@ describe('fetchCrmProperties', () => {
         };
         mockFetchCrmProperties.mockResolvedValue(mockResponse);
         const propertyNames = ['firstname', 'lastname'];
-        const result = await fetchCrmProperties(propertyNames);
-        expect(mockFetchCrmProperties).toHaveBeenCalledWith(propertyNames);
+        const result = await fetchCrmProperties(propertyNames, jest.fn());
+        expect(mockFetchCrmProperties).toHaveBeenCalledWith(propertyNames, expect.any(Function));
         expect(result).toEqual({
             firstname: 'Test value for firstname',
             lastname: 'Test value for lastname',
@@ -38,12 +38,12 @@ describe('fetchCrmProperties', () => {
         };
         mockFetchCrmProperties.mockResolvedValue(mockResponse);
         const propertyNames = ['firstname'];
-        await expect(fetchCrmProperties(propertyNames)).rejects.toThrow('Failed to fetch CRM properties: Not Found');
+        await expect(fetchCrmProperties(propertyNames, jest.fn())).rejects.toThrow('Failed to fetch CRM properties: Not Found');
     });
     it('throws an error when fetch fails', async () => {
         mockFetchCrmProperties.mockRejectedValue(new Error('Network error'));
         const propertyNames = ['firstname'];
-        await expect(fetchCrmProperties(propertyNames)).rejects.toThrow('Network error');
+        await expect(fetchCrmProperties(propertyNames, jest.fn())).rejects.toThrow('Network error');
     });
     it('throws an error if the response is not an object', async () => {
         const mockApiResponse = 'Invalid response';
@@ -53,6 +53,31 @@ describe('fetchCrmProperties', () => {
         };
         mockFetchCrmProperties.mockResolvedValue(mockResponse);
         const propertyNames = ['firstname'];
-        await expect(fetchCrmProperties(propertyNames)).rejects.toThrow('Invalid response format');
+        await expect(fetchCrmProperties(propertyNames, jest.fn())).rejects.toThrow('Invalid response format');
+    });
+    it('passes the propertiesUpdatedCallback and allows it to be called', async () => {
+        let capturedCallback;
+        const mockApiResponse = {
+            firstname: 'Initial',
+            lastname: 'Initial',
+        };
+        const mockResponse = {
+            ok: true,
+            json: jest.fn().mockResolvedValue(mockApiResponse),
+        };
+        mockFetchCrmProperties.mockImplementation((propertyNames, callback) => {
+            capturedCallback = callback;
+            return Promise.resolve(mockResponse);
+        });
+        const propertyNames = ['firstname', 'lastname'];
+        const mockCallback = jest.fn();
+        await fetchCrmProperties(propertyNames, mockCallback);
+        expect(typeof capturedCallback).toBe('function');
+        // Simulate the callback being called with new properties
+        const updatedProps = { firstname: 'Updated', lastname: 'Updated' };
+        if (capturedCallback) {
+            capturedCallback(updatedProps);
+        }
+        expect(mockCallback).toHaveBeenCalledWith(updatedProps);
     });
 });

package/dist/__tests__/experimental/hooks/useCrmProperties.spec.js

@@ -68,4 +68,28 @@ describe('useCrmProperties', () => {
             expect(result.current.isLoading).toBe(false);
         });
     });
+    it('should update properties when propertiesUpdatedCallback is called', async () => {
+        // Capture the callback so we can simulate an external update to CRM properties
+        let capturedCallback;
+        mockFetchCrmProperties.mockImplementation((_propertyNames, propertiesUpdatedCallback) => {
+            capturedCallback = propertiesUpdatedCallback;
+            return { firstname: 'Initial', lastname: 'Initial' };
+        });
+        const propertyNames = ['firstname', 'lastname'];
+        const { result } = renderHook(() => useCrmProperties(propertyNames));
+        await waitFor(() => {
+            expect(result.current.properties).toEqual({
+                firstname: 'Initial',
+                lastname: 'Initial',
+            });
+            expect(result.current.isLoading).toBe(false);
+        });
+        const updatedProperties = { firstname: 'Updated', lastname: 'Updated' };
+        await waitFor(() => {
+            if (capturedCallback) {
+                capturedCallback(updatedProperties);
+                expect(result.current.properties).toEqual(updatedProperties);
+            }
+        });
+    });
 });

package/dist/coreComponents.d.ts

@@ -733,7 +733,7 @@ export declare const LineChart: "LineChart" & {
  *
  * **Links:**
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tabs Documentation}
- * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/tabs-example Tabs Example}
+ * - {@link https://github.com/hubspotdev/uie-tabbed-product-carousel Tabs Example}
  */
 export declare const Tabs: "Tabs" & {
     readonly type?: "Tabs" | undefined;
@@ -752,7 +752,7 @@ export declare const Tabs: "Tabs" & {
  *
  * **Links:**
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tabs Documentation}
- * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/tabs-example Tabs Example}
+ * - {@link https://github.com/hubspotdev/uie-tabbed-product-carousel Tabs Example}
  */
 export declare const Tab: "Tab" & {
     readonly type?: "Tab" | undefined;

package/dist/coreComponents.js

@@ -493,7 +493,7 @@ export const LineChart = createRemoteReactComponent('LineChart');
  *
  * **Links:**
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tabs Documentation}
- * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/tabs-example Tabs Example}
+ * - {@link https://github.com/hubspotdev/uie-tabbed-product-carousel Tabs Example}
  */
 export const Tabs = createRemoteReactComponent('Tabs');
 /**
@@ -508,7 +508,7 @@ export const Tabs = createRemoteReactComponent('Tabs');
  *
  * **Links:**
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tabs Documentation}
- * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/tabs-example Tabs Example}
+ * - {@link https://github.com/hubspotdev/uie-tabbed-product-carousel Tabs Example}
  */
 export const Tab = createRemoteReactComponent('Tab');
 /**

package/dist/experimental/crm/fetchCrmProperties.d.ts

@@ -1,4 +1,4 @@
 export type CrmPropertiesResponse = {
     [key: string]: string;
 };
-export declare const fetchCrmProperties: (propertyNames: string[]) => Promise<Record<string, string>>;
+export declare const fetchCrmProperties: (propertyNames: string[], propertiesUpdatedCallback: (properties: Record<string, string>) => void) => Promise<Record<string, string>>;

package/dist/experimental/crm/fetchCrmProperties.js

@@ -10,10 +10,10 @@ function isCrmPropertiesResponse(data) {
     }
     return true;
 }
-export const fetchCrmProperties = async (propertyNames) => {
+export const fetchCrmProperties = async (propertyNames, propertiesUpdatedCallback) => {
     try {
         // eslint-disable-next-line hubspot-dev/no-confusing-browser-globals
-        const response = await self.fetchCrmProperties(propertyNames);
+        const response = await self.fetchCrmProperties(propertyNames, propertiesUpdatedCallback);
         if (!response.ok) {
             throw new Error(`Failed to fetch CRM properties: ${response.statusText}`);
         }

package/dist/experimental/hooks/useCrmProperties.js

@@ -14,11 +14,14 @@ export function useCrmProperties(propertyNames) {
     useEffect(() => {
         logger.warn('useCrmProperties is an experimental hook and might change or be removed in the future.');
     }, []);
+    const propertiesUpdatedCallback = (newProperties) => {
+        setProperties(newProperties);
+    };
     // Fetch the properties
     useEffect(() => {
         (async () => {
             try {
-                const propertyData = await fetchCrmProperties(propertyNames);
+                const propertyData = await fetchCrmProperties(propertyNames, propertiesUpdatedCallback);
                 setProperties(propertyData);
                 setError(null);
             }

package/dist/experimental/index.d.ts

@@ -66,4 +66,16 @@ declare const ExpandableText: "ExpandableText" & {
     readonly props?: experimentalTypes.ExpandableTextProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ExpandableText", experimentalTypes.ExpandableTextProps, true>>;
-export { Iframe, MediaObject, Inline, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, ExpandableText, };
+/**
+ * The `Popover` component renders a popover overlay that can contain other components.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/popover Popover Docs}
+ */
+declare const Popover: "Popover" & {
+    readonly type?: "Popover" | undefined;
+    readonly props?: experimentalTypes.PopoverProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Popover", experimentalTypes.PopoverProps, true>>;
+export { Iframe, MediaObject, Inline, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, ExpandableText, Popover, };

package/dist/experimental/index.js

@@ -27,4 +27,14 @@ const SettingsView = createRemoteReactComponent('SettingsView');
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/expandable-text ExpandableText Docs}
  */
 const ExpandableText = createRemoteReactComponent('ExpandableText');
-export { Iframe, MediaObject, Inline, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, ExpandableText, };
+/**
+ * The `Popover` component renders a popover overlay that can contain other components.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/popover Popover Docs}
+ */
+const Popover = createRemoteReactComponent('Popover', {
+    fragmentProps: ['header', 'body', 'footer'],
+});
+export { Iframe, MediaObject, Inline, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, ExpandableText, Popover, };

package/dist/experimental/types.d.ts

@@ -122,4 +122,21 @@ export interface ExpandableTextProps {
     collapseButtonText?: string;
     expanded?: boolean;
 }
+/**
+ * @ignore
+ * @experimental do not use in production
+ */
+export interface PopoverProps {
+    children: ReactNode;
+    open?: boolean;
+    onOpenChange?: () => void;
+    placement?: 'left' | 'right' | 'top' | 'bottom';
+    header?: ReactNode;
+    body?: ReactNode;
+    footer?: ReactNode;
+    variant?: 'default' | 'shepherd' | 'longform';
+    showCloseButton?: boolean;
+    arrowSize?: 'none' | 'small' | 'medium';
+    onClick?: ReactionsHandler<ExtensionEvent>;
+}
 export {};

package/dist/types.d.ts

@@ -227,6 +227,10 @@ export interface CrmHostActions {
     onCrmPropertiesUpdate: onCrmPropertiesUpdateAction;
 }
 /** @ignore */
+export interface SettingsActions {
+    addAlert: AddAlertAction;
+}
+/** @ignore */
 export interface UiePlatformActions {
     copyTextToClipboard: Clipboard['writeText'];
     closeOverlay: CloseOverlayAction;
@@ -1345,7 +1349,7 @@ export interface ListProps {
  */
 export interface LoadingSpinnerProps {
     /**
-     * The text that displays next to the spinner.
+     * The text that displays next to the spinner. Note: the label is not shown by default, you must set `showLabel` to `true` to display the label.
      *
      */
     label: string;
@@ -1821,7 +1825,9 @@ export interface TableElementProps {
  * @interface
  */
 export type BaseTableHeaderProps = TableElementProps & AlignmentProps & WidthProps;
-export type TableCellProps = TableElementProps & AlignmentProps & WidthProps;
+export type TableCellProps = TableElementProps & AlignmentProps & WidthProps & {
+    colSpan?: number;
+};
 /**
  * The props type for {@link !components.TableHeader} when sorted === never.
  *
@@ -2045,6 +2051,18 @@ export interface TextFormatOptions {
      * @defaultValue `"none"`
      */
     lineDecoration?: 'none' | 'underline' | 'strikethrough';
+    /**
+     * Controls the capitalization of text.
+     *
+     * - `none`: No capitalization changes (default)
+     * - `uppercase`: Transforms all characters to uppercase
+     * - `lowercase`: Transforms all characters to lowercase
+     * - `capitalize`: Capitalizes the first letter of each word
+     * - `sentenceCase`: Capitalizes the first letter of the text and makes the rest lowercase
+     *
+     * @defaultValue `"none"`
+     */
+    textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize' | 'sentenceCase';
 }
 export interface TruncateOptions {
     maxWidth?: number;
@@ -2750,7 +2768,7 @@ export interface CrmSidebarExtensionPoint extends ExtensionPointContract {
 }
 /** @ignore */
 export interface SettingsExtensionPoint extends ExtensionPointContract {
-    actions: UiePlatformActions;
+    actions: SettingsActions & UiePlatformActions;
     context: SettingsContext;
 }
 export interface ExampleCrmComponentProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.8.53",
+  "version": "0.8.55",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -66,5 +66,5 @@
     "ts-jest": "^29.1.1",
     "typescript": "5.0.4"
   },
-  "gitHead": "2bad593e0b073687424cd1d365f68849fb448940"
+  "gitHead": "93b19d28469b6b8ccf6f757ab301634fcc6ef993"
 }