@hubspot/ui-extensions 0.8.40 → 0.8.42

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;
@@ -108,6 +109,7 @@ export declare const ErrorState: "ErrorState" & {
  * **Links:**
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/form Docs}
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/design-patterns#form Design Pattern Examples}
  */
 export declare const Form: "Form" & {
     readonly type?: "Form" | undefined;
@@ -328,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;
@@ -555,6 +558,7 @@ export declare const Dropdown: "Dropdown" & {
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/panel Docs}
  * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/overlay-example Overlay Example}
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/design-patterns#panel Design Pattern Examples}
  */
 export declare const Panel: "Panel" & {
     readonly type?: "Panel" | undefined;
@@ -619,6 +623,7 @@ export declare const StepperInput: "StepperInput" & {
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/modal Docs}
  * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/overlay-example Overlay Example}
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/design-patterns#modal Design Pattern Examples}
  */
 export declare const Modal: "Modal" & {
     readonly type?: "Modal" | 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'],
@@ -74,6 +75,7 @@ export const ErrorState = createRemoteReactComponent('ErrorState');
  * **Links:**
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/form Docs}
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/design-patterns#form Design Pattern Examples}
  */
 export const Form = createRemoteReactComponent('Form');
 /**
@@ -214,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');
 /**
@@ -365,6 +368,7 @@ export const Dropdown = createRemoteReactComponent('Dropdown');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/panel Docs}
  * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/overlay-example Overlay Example}
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/design-patterns#panel Design Pattern Examples}
  */
 export const Panel = createRemoteReactComponent('Panel');
 /**
@@ -409,6 +413,7 @@ export const StepperInput = createRemoteReactComponent('StepperInput');
  *
  * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/modal Docs}
  * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/overlay-example Overlay Example}
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/design-patterns#modal Design Pattern Examples}
  */
 export const Modal = createRemoteReactComponent('Modal');
 /**

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;
@@ -30,4 +31,22 @@ declare const Center: "Center" & {
     readonly props?: experimentalTypes.CenterProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Center", experimentalTypes.CenterProps, true>>;
-export { Iframe, MediaObject, Inline, Stack2, Center };
+/** @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 SimpleGrid: "SimpleGrid" & {
+    readonly type?: "SimpleGrid" | undefined;
+    readonly props?: experimentalTypes.SimpleGridProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"SimpleGrid", experimentalTypes.SimpleGridProps, 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 Grid: "Grid" & {
+    readonly type?: "Grid" | undefined;
+    readonly props?: experimentalTypes.GridProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Grid", experimentalTypes.GridProps, 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 GridItem: "GridItem" & {
+    readonly type?: "GridItem" | undefined;
+    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, };

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. */
@@ -11,4 +12,10 @@ const Inline = createRemoteReactComponent('Inline');
 const Stack2 = createRemoteReactComponent('Stack2');
 /** @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 Center = createRemoteReactComponent('Center');
-export { Iframe, MediaObject, Inline, Stack2, Center };
+/** @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 SimpleGrid = createRemoteReactComponent('SimpleGrid');
+/** @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 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, };

package/dist/experimental/types.d.ts

@@ -58,4 +58,25 @@ export interface MediaObjectProps {
     itemLeft?: RemoteFragment;
     itemRight?: RemoteFragment;
 }
+/**
+ * @ignore
+ * @experimental do not use in production
+ */
+export interface SimpleGridProps extends BaseLayout {
+    minColumnWidth: number | string;
+    gap?: AllDistances;
+    children?: ReactNode;
+}
+export interface GridProps {
+    justify?: FlexJustify;
+    align?: FlexAlign;
+    gap?: AllDistances;
+    size?: number;
+    children?: ReactNode;
+}
+export interface GridItemProps {
+    size?: number;
+    children?: ReactNode;
+    offset?: number;
+}
 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;
 }
@@ -2049,6 +2049,7 @@ interface OpenIframeActionPayload {
     uri: string;
     height: number;
     width: number;
+    /** @deprecated This property is no longer functional and has no effect. Please avoid using it, as it will be removed in future updates */
     associatedObjectProperties?: string[];
     title?: string;
     flush?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.8.40",
+  "version": "0.8.42",
   "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": "1f4550a901eeba1e56943ef50c6ea7af30f95bc1"
+  "gitHead": "adebd2d54ad45cfedb1ab6b173eda06c8642965c"
 }