@hubspot/ui-extensions 0.8.23 → 0.8.25

package/dist/coreComponents.js

@@ -1,6 +1,8 @@
 import { createRemoteReactComponent } from '@remote-ui/react';
 export const Alert = createRemoteReactComponent('Alert');
-export const Button = createRemoteReactComponent('Button');
+export const Button = createRemoteReactComponent('Button', {
+    fragmentProps: ['overlay'],
+});
 export const ButtonRow = createRemoteReactComponent('ButtonRow');
 export const Card = createRemoteReactComponent('Card');
 export const DescriptionList = createRemoteReactComponent('DescriptionList');
@@ -10,9 +12,13 @@ export const EmptyState = createRemoteReactComponent('EmptyState');
 export const ErrorState = createRemoteReactComponent('ErrorState');
 export const Form = createRemoteReactComponent('Form');
 export const Heading = createRemoteReactComponent('Heading');
-export const Image = createRemoteReactComponent('Image');
+export const Image = createRemoteReactComponent('Image', {
+    fragmentProps: ['overlay'],
+});
 export const Input = createRemoteReactComponent('Input');
-export const Link = createRemoteReactComponent('Link');
+export const Link = createRemoteReactComponent('Link', {
+    fragmentProps: ['overlay'],
+});
 export const TextArea = createRemoteReactComponent('TextArea');
 // Textarea was changed to TextArea
 // Exporting both for backwards compat
@@ -21,7 +27,9 @@ export const Textarea = createRemoteReactComponent('Textarea');
 export const LoadingSpinner = createRemoteReactComponent('LoadingSpinner');
 export const ProgressBar = createRemoteReactComponent('ProgressBar');
 export const Select = createRemoteReactComponent('Select');
-export const Tag = createRemoteReactComponent('Tag');
+export const Tag = createRemoteReactComponent('Tag', {
+    fragmentProps: ['overlay'],
+});
 export const Text = createRemoteReactComponent('Text');
 export const Tile = createRemoteReactComponent('Tile');
 /** @deprecated use Flex instead. It will be removed in the next release. */

package/dist/crm/components.d.ts

@@ -1,4 +1,4 @@
-import { CrmAssociationPivotProps, CrmAssociationTableProps, CrmDataHighlightProps, CrmPropertyListProps, CrmReportProps, CrmAssociationPropertyListProps, CrmStageTrackerProps, CrmStatisticsProps, CrmActionButtonProps, CrmActionLinkProps, CrmCardActionsProps } from '../types';
+import { CrmAssociationPivotProps, CrmAssociationTableProps, CrmDataHighlightProps, CrmPropertyListProps, CrmReportProps, CrmAssociationPropertyListProps, CrmAssociationStageTrackerProps, CrmStageTrackerProps, CrmStatisticsProps, CrmActionButtonProps, CrmActionLinkProps, CrmCardActionsProps } from '../types';
 declare const CrmPropertyList: "CrmPropertyList" & {
     readonly type?: "CrmPropertyList" | undefined;
     readonly props?: CrmPropertyListProps | undefined;
@@ -29,6 +29,11 @@ declare const CrmAssociationPropertyList: "CrmAssociationPropertyList" & {
     readonly props?: CrmAssociationPropertyListProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"CrmAssociationPropertyList", CrmAssociationPropertyListProps, true>>;
+declare const CrmAssociationStageTracker: "CrmAssociationStageTracker" & {
+    readonly type?: "CrmAssociationStageTracker" | undefined;
+    readonly props?: CrmAssociationStageTrackerProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"CrmAssociationStageTracker", CrmAssociationStageTrackerProps, true>>;
 declare const CrmStageTracker: "CrmStageTracker" & {
     readonly type?: "CrmStageTracker" | undefined;
     readonly props?: CrmStageTrackerProps | undefined;
@@ -54,4 +59,4 @@ declare const CrmCardActions: "CrmCardActions" & {
     readonly props?: CrmCardActionsProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"CrmCardActions", CrmCardActionsProps, true>>;
-export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmStageTracker, CrmStatistics, CrmActionButton, CrmActionLink, CrmCardActions, };
+export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmAssociationStageTracker, CrmStageTracker, CrmStatistics, CrmActionButton, CrmActionLink, CrmCardActions, };

package/dist/crm/components.js

@@ -5,9 +5,10 @@ const CrmDataHighlight = createExtensionComponent('CrmDataHighlight');
 const CrmReport = createExtensionComponent('CrmReport');
 const CrmAssociationPivot = createExtensionComponent('CrmAssociationPivot');
 const CrmAssociationPropertyList = createExtensionComponent('CrmAssociationPropertyList');
+const CrmAssociationStageTracker = createExtensionComponent('CrmAssociationStageTracker');
 const CrmStageTracker = createExtensionComponent('CrmStageTracker');
 const CrmStatistics = createExtensionComponent('CrmStatistics');
 const CrmActionButton = createExtensionComponent('CrmActionButton');
 const CrmActionLink = createExtensionComponent('CrmActionLink');
 const CrmCardActions = createExtensionComponent('CrmCardActions');
-export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmStageTracker, CrmStatistics, CrmActionButton, CrmActionLink, CrmCardActions, };
+export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmAssociationStageTracker, CrmStageTracker, CrmStatistics, CrmActionButton, CrmActionLink, CrmCardActions, };

package/dist/crm/index.d.ts

@@ -1,2 +1,2 @@
-import { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmStageTracker, CrmStatistics, CrmActionButton, CrmActionLink, CrmCardActions } from './components';
-export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmStageTracker, CrmStatistics, CrmActionButton, CrmActionLink, CrmCardActions, };
+import { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmAssociationStageTracker, CrmStageTracker, CrmStatistics, CrmActionButton, CrmActionLink, CrmCardActions } from './components';
+export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmAssociationStageTracker, CrmStageTracker, CrmStatistics, CrmActionButton, CrmActionLink, CrmCardActions, };

package/dist/crm/index.js

@@ -1,2 +1,2 @@
-import { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmStageTracker, CrmStatistics, CrmActionButton, CrmActionLink, CrmCardActions, } from './components';
-export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmStageTracker, CrmStatistics, CrmActionButton, CrmActionLink, CrmCardActions, };
+import { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmAssociationStageTracker, CrmStageTracker, CrmStatistics, CrmActionButton, CrmActionLink, CrmCardActions, } from './components';
+export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmAssociationStageTracker, CrmStageTracker, CrmStatistics, CrmActionButton, CrmActionLink, CrmCardActions, };

package/dist/experimental/index.d.ts

@@ -11,4 +11,16 @@ declare const Slider: "Slider" & {
     readonly props?: types.SliderProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Slider", types.SliderProps, true>>;
-export { Tooltip, Slider };
+/** @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 StatusTag: "StatusTag" & {
+    readonly type?: "StatusTag" | undefined;
+    readonly props?: types.StatusTagProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"StatusTag", types.StatusTagProps, 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 Iframe: "Iframe" & {
+    readonly type?: "Iframe" | undefined;
+    readonly props?: types.IframeProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Iframe", types.IframeProps, true>>;
+export { Tooltip, Slider, StatusTag, Iframe };

package/dist/experimental/index.js

@@ -3,4 +3,8 @@ import { createRemoteReactComponent } from '@remote-ui/react';
 const Tooltip = createRemoteReactComponent('Tooltip');
 /** @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 Slider = createRemoteReactComponent('Slider');
-export { Tooltip, Slider };
+/** @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 StatusTag = createRemoteReactComponent('StatusTag');
+/** @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');
+export { Tooltip, Slider, StatusTag, Iframe };

package/dist/types.d.ts

@@ -1,3 +1,4 @@
+import { RemoteFragment } from '@remote-ui/core';
 import { ReactNode, ComponentType } from 'react';
 export declare class ExtensionEvent {
     type: string;
@@ -11,6 +12,9 @@ export declare class FormSubmitExtensionEvent<V> extends ExtensionEvent {
     constructor(value: V, event: Event);
 }
 export type ReactionsHandler<T> = (event: T, reactions: Reactions) => void | Promise<void>;
+export type OverlayComponentProps = {
+    overlay?: RemoteFragment;
+};
 /**
  * The props type for {@link !components.Alert}.
  *
@@ -39,7 +43,7 @@ export interface AlertProps {
  *
  * @category Component Props
  */
-export interface ButtonProps {
+export interface ButtonProps extends OverlayComponentProps {
     /**
      * A function that will be invoked when the button is clicked. Do not use this function for submitting a form; use Form's `onSubmit` function instead.
      *
@@ -283,6 +287,25 @@ export interface HeadingProps {
      */
     inline?: boolean;
 }
+/**
+ * The props type for {@link !components.Iframe}.
+ *
+ * @ignore
+ * @experimental
+ * @category Component Props
+ */
+export interface IframeProps {
+    /**
+     * Sets the height of the iframe. If this prop is not provided, the iframe defaults size medium.
+     *
+     * @defaultValue `"medium"`
+     */
+    height?: TShirtSizes['sm'] | TShirtSizes['md'] | TShirtSizes['lg'];
+    /**
+     * The URL to render into the inline iframe.
+     */
+    src: string;
+}
 /**
  * The props type for {@link !components.Icon}.
  *
@@ -331,6 +354,7 @@ export declare const iconNames: {
     readonly robot: "simpleBot";
     readonly refresh: "refresh";
     readonly faceHappy: "emoji";
+    readonly faceNeutral: "emojiLineNeutral";
     readonly faceSad: "emojiLineSad";
     readonly upload: "upload";
     readonly download: "download";
@@ -348,7 +372,7 @@ export type IconNames = keyof typeof iconNames;
  *
  * @category Component Props
  */
-export interface ImageProps {
+export interface ImageProps extends OverlayComponentProps {
     /**
      * The alt text for the image.
      *
@@ -804,12 +828,59 @@ export interface MultiSelectProps extends BaseSelectProps {
      */
     onChange?: (value: NonNullable<MultiSelectProps['value']>) => void;
 }
+/**
+ * The props type for {@link !components.StatusTag}.
+ *
+ * @category Component Props
+ */
+export interface StatusTagProps {
+    /**
+     * The status tag's indicator color.
+     *
+     * @defaultValue `"default"`
+     */
+    variant?: 'danger' | 'warning' | 'info' | 'success' | 'default';
+    /**
+     * When set to true, the status tag's dot will be a ring instead.
+     *
+     * @defaultValue `false `
+     */
+    hollow?: boolean;
+    /**
+     * When set to true, adjusts the styling of a status tag for better spacing on the same line as other status tags or text
+     *
+     * @defaultValue `false`
+     */
+    inline?: boolean;
+    /**
+     * A function that will be invoked when the status tag is clicked. It receives no arguments and its return value is ignored.
+     *
+     * @event
+     */
+    onClick?: () => void;
+    /**
+     * When set to true, the status tag will show a small clickable 'x' icon.
+     *
+     * @defaultValue `false`
+     */
+    showRemoveIcon?: boolean;
+    /**
+     * A function that will be invoked when the 'x' icon is clicked. It receives no arguments and its return value is ignored.
+     *
+     * @event
+     */
+    onRemoveClick?: () => void;
+    /**
+     * Sets the content that will render inside the StatusTag. This prop is passed implicitly by providing sub-components. We recommend only using a small amount of text.
+     */
+    children: ReactNode;
+}
 /**
  * The props type for {@link !components.Tag}.
  *
  * @category Component Props
  */
-export interface TagProps {
+export interface TagProps extends OverlayComponentProps {
     /**
      * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
      */
@@ -1409,6 +1480,7 @@ export interface StandardCrmExtensionPoint extends ExtensionPointContract {
         CrmReport: ComponentType<CrmReportProps>;
         CrmAssociationPivot: ComponentType<CrmAssociationPivotProps>;
         CrmAssociationPropertyList: ComponentType<CrmAssociationPropertyListProps>;
+        CrmAssociationStageTracker?: ComponentType<CrmAssociationStageTrackerProps>;
         CrmStageTracker: ComponentType<CrmStageTrackerProps>;
         CrmStatistics?: ComponentType<CrmStatisticsProps>;
         CrmActionButton?: ComponentType<CrmActionButtonProps>;
@@ -1433,6 +1505,7 @@ export interface CrmMiddleExtensionPoint extends ExtensionPointContract {
         CrmReport: ComponentType<CrmReportProps>;
         CrmAssociationPivot: ComponentType<CrmAssociationPivotProps>;
         CrmAssociationPropertyList: ComponentType<CrmAssociationPropertyListProps>;
+        CrmAssociationStageTracker?: ComponentType<CrmAssociationStageTrackerProps>;
         CrmStageTracker: ComponentType<CrmStageTrackerProps>;
         CrmStatistics?: ComponentType<CrmStatisticsProps>;
         CrmActionButton?: ComponentType<CrmActionButtonProps>;
@@ -1516,6 +1589,15 @@ export interface CrmAssociationPropertyListProps {
     sort?: Array<CrmSortDescriptor>;
 }
 /** @ignore */
+export interface CrmAssociationStageTrackerProps {
+    objectTypeId: string;
+    properties: Array<string>;
+    associationLabels?: Array<string>;
+    filters?: Array<CrmSearchFilter>;
+    showProperties?: boolean;
+    sort?: Array<CrmSortDescriptor>;
+}
+/** @ignore */
 export interface CrmStageTrackerProps {
     objectId?: number;
     objectTypeId?: string;
@@ -1854,7 +1936,7 @@ export declare class RemoteEvent<V> {
  *
  * @category Component Props
  */
-export interface LinkProps {
+export interface LinkProps extends OverlayComponentProps {
     /**
      * Sets the content that will render inside the component.
      *

package/dist/types.js

@@ -42,6 +42,7 @@ export const iconNames = {
     robot: 'simpleBot',
     refresh: 'refresh',
     faceHappy: 'emoji',
+    faceNeutral: 'emojiLineNeutral',
     faceSad: 'emojiLineSad',
     upload: 'upload',
     download: 'download',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.8.23",
+  "version": "0.8.25",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -51,5 +51,5 @@
   "devDependencies": {
     "typescript": "5.0.4"
   },
-  "gitHead": "4e1721543d4dd631fb2aedbcd314d92b66f56e33"
+  "gitHead": "36b80f541eceededf57ac1c4ba6149b184564707"
 }