@hubspot/ui-extensions 0.8.41 → 0.8.43

package/dist/coreComponents.d.ts

@@ -19,6 +19,7 @@ export declare const Alert: "Alert" & {
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/button Docs}
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/button#usage-examples Examples}
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/design-patterns#button Design Pattern Examples}
  */
 export declare const Button: "Button" & {
     readonly type?: "Button" | undefined;
@@ -329,6 +330,7 @@ export declare const StatisticsTrend: "StatisticsTrend" & {
  * **Links:**
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/design-patterns#table Design Pattern Example}
  */
 export declare const Table: "Table" & {
     readonly type?: "Table" | undefined;

package/dist/coreComponents.js

@@ -15,6 +15,7 @@ export const Alert = createRemoteReactComponent('Alert');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/button Docs}
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/button#usage-examples Examples}
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/design-patterns#button Design Pattern Examples}
  */
 export const Button = createRemoteReactComponent('Button', {
     fragmentProps: ['overlay'],
@@ -215,6 +216,7 @@ export const StatisticsTrend = createRemoteReactComponent('StatisticsTrend');
  * **Links:**
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/table Docs}
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/design-patterns#table Design Pattern Example}
  */
 export const Table = createRemoteReactComponent('Table');
 /**

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

@@ -0,0 +1,8 @@
+import { CrmHostActions } from 'types';
+/**
+ * Core logic for managing CRM property interactions.
+ */
+export declare function createPropertyManager(actions: CrmHostActions): {
+    initializePropertyMonitoring(properties: string[], onInitialFetch: (properties: Record<string, string>) => void, onUpdate: (properties: Record<string, string>) => void): () => void;
+    refreshProperties: import("types").refreshObjectPropertiesAction;
+};

package/dist/experimental/crm/propertyManager.js

@@ -0,0 +1,36 @@
+import { logger } from '../../logger';
+/**
+ * Core logic for managing CRM property interactions.
+ */
+export function createPropertyManager(actions) {
+    const { fetchCrmObjectProperties, onCrmPropertiesUpdate, refreshObjectProperties, } = actions;
+    let cleanup;
+    return {
+        initializePropertyMonitoring(properties, onInitialFetch, onUpdate) {
+            // Clean up any existing listeners.
+            if (cleanup) {
+                cleanup();
+            }
+            // Set up property update listener.
+            let isSubscribed = true;
+            const updateCallback = (props) => {
+                if (isSubscribed) {
+                    onUpdate(props);
+                }
+            };
+            onCrmPropertiesUpdate(properties, updateCallback);
+            // Fetch initial properties
+            fetchCrmObjectProperties(properties)
+                .then(onInitialFetch)
+                .catch((error) => {
+                logger.error(`Error fetching CRM object properties: ${error}`);
+            });
+            // Return cleanup function
+            cleanup = () => {
+                isSubscribed = false;
+            };
+            return cleanup;
+        },
+        refreshProperties: refreshObjectProperties,
+    };
+}

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

@@ -0,0 +1,9 @@
+import { CrmHostActions } from 'types';
+/**
+ * A hook for using and managing CRM properties.
+ *
+ * @experimental This hook is experimental and might change or be removed in future versions.
+ */
+export declare function useCrmProperties(actions: CrmHostActions, properties: string[], callback: (properties: Record<string, string>) => void, onUpdate?: (properties: Record<string, string>) => void | Promise<void> | undefined | null): {
+    onPropertyChanged: import("types").refreshObjectPropertiesAction;
+};

package/dist/experimental/hooks/useCrmProperties.js

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import { createPropertyManager } from '../crm/propertyManager';
+import { logger } from '../../logger';
+/**
+ * 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(actions, properties, callback, onUpdate) {
+    useEffect(() => {
+        logger.warn('useCrmProperties is an experimental hook and might change or be removed in the future.');
+    }, []);
+    useEffect(() => {
+        const propertyManager = createPropertyManager(actions);
+        return propertyManager.initializePropertyMonitoring(properties, (props) => callback(props), (props) => callback(props));
+    }, [actions, properties, callback, onUpdate]);
+    // Return the refresh function
+    const propertyManager = createPropertyManager(actions);
+    return {
+        onPropertyChanged: propertyManager.refreshProperties,
+    };
+}

package/dist/experimental/index.d.ts

@@ -1,5 +1,6 @@
 import type * as types from '../types';
 import type * as experimentalTypes from './types';
+export { useCrmProperties } from './hooks/useCrmProperties';
 /** @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;
@@ -48,4 +49,9 @@ declare const GridItem: "GridItem" & {
     readonly props?: experimentalTypes.GridItemProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"GridItem", experimentalTypes.GridItemProps, true>>;
-export { Iframe, MediaObject, Inline, Stack2, Center, SimpleGrid, GridItem, Grid, };
+declare const SettingsView: "SettingsView" & {
+    readonly type?: "SettingsView" | undefined;
+    readonly props?: experimentalTypes.SettingsViewProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"SettingsView", experimentalTypes.SettingsViewProps, true>>;
+export { Iframe, MediaObject, Inline, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, };

package/dist/experimental/index.js

@@ -1,4 +1,5 @@
 import { createRemoteReactComponent } from '@remote-ui/react';
+export { useCrmProperties } from './hooks/useCrmProperties';
 /** @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. */
@@ -17,4 +18,5 @@ const SimpleGrid = createRemoteReactComponent('SimpleGrid');
 const Grid = createRemoteReactComponent('Grid');
 /** @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 GridItem = createRemoteReactComponent('GridItem');
-export { Iframe, MediaObject, Inline, Stack2, Center, SimpleGrid, GridItem, Grid, };
+const SettingsView = createRemoteReactComponent('SettingsView');
+export { Iframe, MediaObject, Inline, Stack2, Center, SimpleGrid, GridItem, Grid, SettingsView, };

package/dist/experimental/types.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { RemoteFragment } from '@remote-ui/core';
-import type { AllDistances } from '../types';
+import type { AllDistances, ExtensionEvent, ReactionsHandler } from '../types';
 /**
  * @ignore
  * @experimental do not use in production
@@ -79,4 +79,36 @@ export interface GridItemProps {
     children?: ReactNode;
     offset?: number;
 }
+/**
+ * @ignore
+ * @experimental do not use in production
+ */
+export interface SettingsViewProps {
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
+     */
+    children: ReactNode;
+    /**
+     * If set to `true`, will show the save bar with "cancel" and  "save" buttons at the bottom of the page.
+     *
+     * @defaultValue `false`
+     */
+    saveBarVisible?: boolean;
+    /**
+     * Used in the save bar to let the user know how many settings they've changed and not yet saved.
+     */
+    numberOfSettingsChanged?: number;
+    /**
+     * The function that will be invoked when the save button in the save bar is clicked.
+     *
+     * @event
+     */
+    onSave?: ReactionsHandler<ExtensionEvent>;
+    /**
+     * The function that will be invoked when the cancel button in the save bar is clicked.
+     *
+     * @event
+     */
+    onCancel?: ReactionsHandler<ExtensionEvent>;
+}
 export {};

package/dist/types.d.ts

@@ -1634,6 +1634,8 @@ export interface ServerlessErrorResponse {
 export interface ExtensionContextData {
     appId: number | string;
     appName?: string;
+    cardId: string;
+    cardTitle?: string;
     location: keyof ExtensionPoints;
     sourceId?: string | null;
     appAccessLevel: 'PUBLIC' | 'PRIVATE';
@@ -1642,9 +1644,7 @@ export interface ExtensionContextData {
     } | null;
 }
 /** @ignore */
-export interface ExtensionCardContextData extends ExtensionContextData {
-    cardId: string;
-    cardTitle?: string;
+export interface CrmExtensionContextData extends ExtensionContextData {
     objectId: number | string;
     objectTypeId: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.8.41",
+  "version": "0.8.43",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -28,9 +28,9 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@remote-ui/react": "^5.0.0",
-    "@remote-ui/testing": "^1.4.3",
-    "react": "^18.2.0"
+    "@remote-ui/react": "5.0.2",
+    "@remote-ui/testing": "1.4.3",
+    "react": "18.2.0"
   },
   "engines": {
     "node": ">=16"
@@ -60,5 +60,5 @@
     "react-reconciler": "^0.29.0",
     "typescript": "5.0.4"
   },
-  "gitHead": "ce6d6332d471d5c5ac127de88a8fa51dd7506c3e"
+  "gitHead": "a140eea0a991c41c86030a5017b54bfd6151ab4c"
 }