@hubspot/ui-extensions 0.10.1 → 0.11.0

package/dist/experimental/index.d.ts

@@ -1,75 +1,4 @@
-import type * as types from '../types';
-import type * as experimentalTypes from './types';
 export { useCrmProperties } from '../crm/hooks/useCrmProperties';
 export { useAssociations } from '../crm/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;
-    readonly props?: types.IframeProps | undefined;
-    readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Iframe", types.IframeProps, 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 MediaObject: "MediaObject" & {
-    readonly type?: "MediaObject" | undefined;
-    readonly props?: experimentalTypes.MediaObjectProps | undefined;
-    readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"MediaObject", experimentalTypes.MediaObjectProps, 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 Stack2: "Stack2" & {
-    readonly type?: "Stack2" | undefined;
-    readonly props?: experimentalTypes.Stack2Props | undefined;
-    readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Stack2", experimentalTypes.Stack2Props, 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 Center: "Center" & {
-    readonly type?: "Center" | undefined;
-    readonly props?: experimentalTypes.CenterProps | undefined;
-    readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Center", experimentalTypes.CenterProps, 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>>;
-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>>;
-/**
- * The `ExpandableText` component renders a text that can be expanded or collapsed based on a maximum height.
- *
- * **Links:**
- *
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/expandable-text ExpandableText Docs}
- */
-declare const ExpandableText: "ExpandableText" & {
-    readonly type?: "ExpandableText" | undefined;
-    readonly props?: experimentalTypes.ExpandableTextProps | undefined;
-    readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ExpandableText", experimentalTypes.ExpandableTextProps, true>>;
-/**
- * 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>>;
-declare const FileInput: "FileInput" & {
-    readonly type?: "FileInput" | undefined;
-    readonly props?: experimentalTypes.FileInputProps | undefined;
-    readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"FileInput", experimentalTypes.FileInputProps, true>>;
-export { Iframe, MediaObject, Stack2, Center, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, };
+export { Iframe, MediaObject, Stack2, Center, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, } from '../__synced__/experimentalRemoteComponents.synced';
+export type * from '../__synced__/experimental/types.synced';

package/dist/experimental/index.js

@@ -1,36 +1,3 @@
-import { createRemoteReactComponent } from '@remote-ui/react';
 export { useCrmProperties } from '../crm/hooks/useCrmProperties';
 export { useAssociations } from '../crm/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. */
-const MediaObject = createRemoteReactComponent('MediaObject', {
-    fragmentProps: ['itemRight', 'itemLeft'],
-});
-/** @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 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');
-/** @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');
-const SettingsView = createRemoteReactComponent('SettingsView');
-/**
- * The `ExpandableText` component renders a text that can be expanded or collapsed based on a maximum height.
- *
- * **Links:**
- *
- * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/expandable-text ExpandableText Docs}
- */
-const ExpandableText = createRemoteReactComponent('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');
-const FileInput = createRemoteReactComponent('FileInput');
-export { Iframe, MediaObject, Stack2, Center, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, };
+export { Iframe, MediaObject, Stack2, Center, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, } from '../__synced__/experimentalRemoteComponents.synced';

package/dist/experimental/testing/internal/types-internal.d.ts

@@ -0,0 +1,47 @@
+import type { RemoteComponent, RemoteFragment, RemoteRoot, RemoteText } from '@remote-ui/core';
+import type { RenderedElementNode, RenderedFragmentNode, RenderedNode, RenderedParentNode, RenderedRootNode, RenderedTextNode } from '../types';
+export type RemoteChildNode = RemoteComponent<any, RemoteRoot> | RemoteText<RemoteRoot>;
+export type RemoteParentNode = RemoteRoot | RemoteComponent<any, RemoteRoot> | RemoteFragment;
+/**
+ * Represents a rendered document.
+ */
+export interface RenderedDocumentInternal {
+    /**
+     * The root node of the document.
+     */
+    rootNode: RenderedRootNodeInternal | null;
+    /**
+     * Adds the name of an invalid component to the document.
+     *
+     * @param name The name of the invalid component.
+     */
+    addInvalidComponentName: (name: string) => void;
+    /**
+     * @returns the names of the invalid components.
+     */
+    getInvalidComponentNames: () => string[];
+    /**
+     * @returns Returns `true` if the document has invalid component types. `false` otherwise.
+     */
+    hasInvalidComponentNames: () => boolean;
+    /**
+     * Used to wrap the execution of a function that updates the rendered DOM.
+     * This is used to validate the rendered DOM after the function has been executed.
+     *
+     * @param run The function to execute.
+     */
+    batchUpdate: (run: () => void) => void;
+}
+/**
+ * Adds the `document` property to the rendered node. We do not include this in the public types because it is not
+ * part of the public API, but we need it for internal use.
+ */
+type MakeRenderedNodeInternal<TRenderedNode extends RenderedNode> = TRenderedNode & {
+    document: RenderedDocumentInternal;
+};
+export type RenderedElementNodeInternal = MakeRenderedNodeInternal<RenderedElementNode>;
+export type RenderedTextNodeInternal = MakeRenderedNodeInternal<RenderedTextNode>;
+export type RenderedRootNodeInternal = MakeRenderedNodeInternal<RenderedRootNode>;
+export type RenderedFragmentNodeInternal = MakeRenderedNodeInternal<RenderedFragmentNode>;
+export type RenderedParentNodeInternal = MakeRenderedNodeInternal<RenderedParentNode>;
+export {};

package/dist/experimental/testing/internal/types-internal.js

@@ -0,0 +1 @@
+export {};

package/dist/experimental/testing/type-utils.d.ts

@@ -0,0 +1,29 @@
+import { type RenderedElementNode, type RenderedFragmentNode, type RenderedNode, type RenderedRootNode, type RenderedTextNode } from './types';
+/**
+ * Type guard to check if a node is a rendered element node.
+ *
+ * @param node The node to check.
+ * @returns `true` if the node is a rendered element node.
+ */
+export declare const isRenderedElementNode: (node: RenderedNode | null | undefined) => node is RenderedElementNode<import("../..").UnknownComponentProps>;
+/**
+ * Type guard to check if a node is a rendered text node.
+ *
+ * @param node The node to check.
+ * @returns `true` if the node is a rendered text node.
+ */
+export declare const isRenderedTextNode: (node: RenderedNode | null | undefined) => node is RenderedTextNode;
+/**
+ * Type guard to check if a node is a rendered root node.
+ *
+ * @param node The node to check.
+ * @returns `true` if the node is a rendered root node.
+ */
+export declare const isRenderedRootNode: (node: RenderedNode | null | undefined) => node is RenderedRootNode;
+/**
+ * Type guard to check if a node is a rendered fragment node.
+ *
+ * @param node The node to check.
+ * @returns `true` if the node is a rendered fragment node.
+ */
+export declare const isRenderedFragmentNode: (node: RenderedNode | null | undefined) => node is RenderedFragmentNode;

package/dist/experimental/testing/type-utils.js

@@ -0,0 +1,37 @@
+import { RenderedNodeType, } from './types';
+/**
+ * Type guard to check if a node is a rendered element node.
+ *
+ * @param node The node to check.
+ * @returns `true` if the node is a rendered element node.
+ */
+export const isRenderedElementNode = (node) => {
+    return node?.nodeType === RenderedNodeType.Element;
+};
+/**
+ * Type guard to check if a node is a rendered text node.
+ *
+ * @param node The node to check.
+ * @returns `true` if the node is a rendered text node.
+ */
+export const isRenderedTextNode = (node) => {
+    return node?.nodeType === RenderedNodeType.Text;
+};
+/**
+ * Type guard to check if a node is a rendered root node.
+ *
+ * @param node The node to check.
+ * @returns `true` if the node is a rendered root node.
+ */
+export const isRenderedRootNode = (node) => {
+    return node?.nodeType === RenderedNodeType.Root;
+};
+/**
+ * Type guard to check if a node is a rendered fragment node.
+ *
+ * @param node The node to check.
+ * @returns `true` if the node is a rendered fragment node.
+ */
+export const isRenderedFragmentNode = (node) => {
+    return node?.nodeType === RenderedNodeType.Fragment;
+};

package/dist/experimental/testing/types.d.ts

@@ -0,0 +1,240 @@
+import { HubSpotReactComponent, HubSpotReactFragmentProp, UnknownComponentProps } from '../../types';
+/**
+ * The type of a rendered node.
+ */
+export declare enum RenderedNodeType {
+    Root = "root",
+    Fragment = "fragment",
+    Element = "element",
+    Text = "text"
+}
+/**
+ * Extracts event property names from a props type, filtering for properties that are functions
+ */
+type EventNamesForProps<TProps extends UnknownComponentProps> = {
+    [K in keyof Required<TProps>]: Required<TProps>[K] extends Function ? K : never;
+}[keyof TProps];
+interface CommonQueryMethods {
+    /**
+     * Finds the first descendant element node that matches the given component.
+     *
+     * @param component The component to find.
+     * @param matcher An optional matcher to filter the elements.
+     * @returns The first element node that matches the given component or `null` if no match is found.
+     */
+    maybeFind<TProps extends UnknownComponentProps>(component: HubSpotReactComponent<TProps>, matcher?: ElementMatcher<TProps>): RenderedElementNode<TProps> | null;
+    /**
+     * Finds the first descendant element node that matches the given component. If no match is found, an error will be thrown.
+     *
+     * @param component The component to find.
+     * @param matcher An optional matcher to filter the elements.
+     * @returns The first element node that matches the given component.
+     */
+    find<TProps extends UnknownComponentProps>(component: HubSpotReactComponent<TProps>, matcher?: ElementMatcher<TProps>): RenderedElementNode<TProps>;
+    /**
+     * Finds all descendant element nodes that match the given component.
+     *
+     * @param component The component to find.
+     * @param matcher An optional matcher to filter the elements.
+     * @returns An array of element nodes that match the given component.
+     */
+    findAll<TProps extends UnknownComponentProps>(component: HubSpotReactComponent<TProps>, matcher?: ElementMatcher<TProps>): RenderedElementNode<TProps>[];
+    /**
+     * Finds the first direct child element node that matches the given component.
+     *
+     * @param component The component to find.
+     * @param matcher An optional matcher to filter the elements.
+     * @returns The first child element node that matches the given component.
+     */
+    findChild<TProps extends UnknownComponentProps>(component: HubSpotReactComponent<TProps>, matcher?: ElementMatcher<TProps>): RenderedElementNode<TProps>;
+    /**
+     * Finds the first direct child element node that matches the given component.
+     *
+     * @param component The component to find.
+     * @param matcher An optional matcher to filter the elements.
+     * @returns The first child element node that matches the given component or `null` if no match is found.
+     */
+    maybeFindChild<TProps extends UnknownComponentProps>(component: HubSpotReactComponent<TProps>, matcher?: ElementMatcher<TProps>): RenderedElementNode<TProps> | null;
+    /**
+     * Finds all direct child element nodes that match the given component.
+     *
+     * @param component The component to find.
+     * @param matcher An optional matcher to filter the elements.
+     * @returns An array of child element nodes that match the given component.
+     */
+    findAllChildren<TProps extends UnknownComponentProps>(component: HubSpotReactComponent<TProps>, matcher?: ElementMatcher<TProps>): RenderedElementNode<TProps>[];
+}
+interface BaseRenderedParentNode {
+    /**
+     * The child nodes
+     */
+    children: RenderedChildNode[];
+}
+/**
+ * Represents a root node of a rendered component.
+ *
+ * NOTE: Rendered root nodes are immutable and are part of a snapshot for a single render cycle. They become immediately stale when a new render occurs.
+ */
+export interface RenderedRootNode extends BaseRenderedParentNode, CommonQueryMethods {
+    /**
+     * The type of the node (always `RenderedNodeType.Root` for a root node).
+     */
+    nodeType: RenderedNodeType.Root;
+    /**
+     * The text content of the root node or `null` if the root node does not have any text content.
+     */
+    text: string | null;
+    /**
+     * Logs a string representation of the root node as a console log.
+     */
+    debugLog: (label?: string) => void;
+    /**
+     * Returns a string representation of the root node.
+     *
+     * @returns A string representation of the root node.
+     */
+    toString: () => string;
+}
+/**
+ * Represents a fragment node passed as a prop to a rendered component.
+ *
+ * NOTE: Rendered fragment nodes are immutable and are part of a snapshot for a single render cycle. They become immediately stale when a new render occurs.
+ */
+export interface RenderedFragmentNode extends BaseRenderedParentNode, CommonQueryMethods {
+    /**
+     * The type of the node (always `RenderedNodeType.Fragment` for a fragment node).
+     */
+    nodeType: RenderedNodeType.Fragment;
+    /**
+     * The text content of the fragment node or `null` if the fragment node does not have any text content.
+     */
+    text: string | null;
+    /**
+     * Logs a string representation of the fragment node as a console log.
+     */
+    debugLog: (label?: string) => void;
+    /**
+     * Returns a string representation of the fragment node.
+     */
+    toString: () => string;
+}
+type RenderPropsFromComponentProps<TProps extends UnknownComponentProps> = {
+    [K in keyof TProps]: HubSpotReactFragmentProp extends TProps[K] ? RenderedFragmentNode : TProps[K];
+};
+/**
+ * Represents an element node of a rendered component.
+ *
+ * NOTE: Rendered elements are immutable and are part of a snapshot for a single render cycle. They become immediately stale when a new render occurs.
+ */
+export interface RenderedElementNode<TProps extends UnknownComponentProps = UnknownComponentProps> extends BaseRenderedParentNode, CommonQueryMethods {
+    /**
+     * The type of the node (always `RenderedNodeType.Element` for an element node).
+     */
+    nodeType: RenderedNodeType.Element;
+    /**
+     * The name of the element node.
+     */
+    name: string;
+    /**
+     * The props passed to the element node.
+     */
+    props: RenderPropsFromComponentProps<TProps>;
+    /**
+     * The text content of the element node or `null` if the element node does not have any text content.
+     */
+    text: string | null;
+    /**
+     * Logs a string representation of the element node as a console log.
+     *
+     * @param label The label to log.
+     */
+    debugLog: (label?: string) => void;
+    /**
+     * Returns a string representation of the element node.
+     */
+    toString: () => string;
+    /**
+     * Triggers an event function on the element node.
+     *
+     * @param eventPropName The name of the event to trigger.
+     * @param eventArg The argument to pass to the event.
+     */
+    trigger<TEventPropName extends EventNamesForProps<TProps>>(eventPropName: TEventPropName, eventArg?: TProps[TEventPropName]): void;
+}
+/**
+ * Represents a text node of a rendered component.
+ *
+ * NOTE: Rendered text nodes are immutable and are part of a snapshot for a single render cycle. They become immediately stale when a new render occurs.
+ */
+export interface RenderedTextNode {
+    /**
+     * The type of the node (always `RenderedNodeType.Text` for a text node).
+     */
+    nodeType: RenderedNodeType.Text;
+    /**
+     * The text content of the text node.
+     */
+    text: string;
+    /**
+     * Returns a string representation of the text node.
+     */
+    toString: () => string;
+}
+/**
+ * Represents a child node of a parent node.
+ *
+ * NOTE: Rendered child nodes are immutable and are part of a snapshot for a single render cycle. They become immediately stale when a new render occurs.
+ */
+export type RenderedChildNode = RenderedElementNode<UnknownComponentProps> | RenderedTextNode;
+/**
+ * Represents a parent node of a rendered component.
+ *
+ * NOTE: Rendered parent nodes are immutable and are part of a snapshot for a single render cycle. They become immediately stale when a new render occurs.
+ */
+export type RenderedParentNode = RenderedElementNode<UnknownComponentProps> | RenderedRootNode | RenderedFragmentNode;
+/**
+ * A predicate that matches an element node.
+ *
+ * @param node The node to match.
+ * @returns Whether the node matches the predicate.
+ */
+export type ElementMatcherPredicate<TProps extends UnknownComponentProps> = (node: RenderedElementNode<TProps>) => boolean;
+/**
+ * A matcher that matches an element node based on either a predicate or a partial set of properties.
+ */
+export type ElementMatcher<TProps extends UnknownComponentProps> = ElementMatcherPredicate<TProps> | Partial<TProps>;
+/**
+ * Options for the waitFor function.
+ */
+export interface WaitForOptions {
+    /**
+     * The timeout in milliseconds. Defaults to 1000.
+     */
+    timeoutInMs?: number;
+}
+/**
+ * A result of a render operation.
+ */
+export interface RenderResult extends CommonQueryMethods {
+    /**
+     * Waits for the given check to pass. If the check does not pass within the allowed amount of time, an error will be thrown.
+     *
+     * @param check The check to wait for.
+     * @returns A promise that resolves when the check passes.
+     */
+    waitFor: (check: () => void, options?: WaitForOptions) => Promise<void>;
+    /**
+     * Logs a string representation of the rendered output as a console log.
+     *
+     * @param label The label to log.
+     */
+    debugLog: (label?: string) => void;
+    /**
+     * Returns the root node.
+     *
+     * @returns The root node.
+     */
+    getRootNode: () => RenderedRootNode;
+}
+export type RenderedNode = RenderedElementNode<any> | RenderedRootNode | RenderedFragmentNode | RenderedTextNode;
+export {};

package/dist/experimental/testing/types.js

@@ -0,0 +1,10 @@
+/**
+ * The type of a rendered node.
+ */
+export var RenderedNodeType;
+(function (RenderedNodeType) {
+    RenderedNodeType["Root"] = "root";
+    RenderedNodeType["Fragment"] = "fragment";
+    RenderedNodeType["Element"] = "element";
+    RenderedNodeType["Text"] = "text";
+})(RenderedNodeType || (RenderedNodeType = {}));

package/dist/experimental/types.d.ts

@@ -142,6 +142,10 @@ export interface PopoverProps {
      */
     arrowSize?: 'none' | 'small' | 'medium';
 }
+/**
+ * @ignore
+ * @experimental do not use in production
+ */
 export interface FileInputProps {
     value?: File | {
         name: string;

package/dist/pages/home/index.d.ts

@@ -0,0 +1 @@
+export type { HeaderActions, PrimaryHeaderActionButton, SecondaryHeaderActionButton, } from '../../__synced__/appHomeRemoteComponents.synced';

package/dist/pages/home/index.js

@@ -0,0 +1 @@
+export {};

package/dist/types.d.ts

@@ -1,5 +1,15 @@
-import { ReactNode, ComponentType } from 'react';
+import { ReactNode, ComponentType, ReactElement } from 'react';
 import { RemoteFragment } from '@remote-ui/core';
+export type UnknownComponentProps = Record<string, any>;
+/**
+ * Represents a HubSpot-provided React component.
+ */
+export type HubSpotReactComponent<TProps extends UnknownComponentProps = UnknownComponentProps> = ComponentType<TProps>;
+/**
+ * Represents a fragment property for a HubSpot-provided React component that accepts a React.ReactElement, string, or null.
+ * NOTE: UI extension components do _not_ support arrays as a fragment property values.
+ */
+export type HubSpotReactFragmentProp = ReactElement | string | null;
 export declare class ExtensionEvent {
     type: string;
     bubbles: boolean;
@@ -670,6 +680,9 @@ export interface DividerProps {
      */
     distance?: AllDistances;
 }
+/**
+ * @deprecated This type is deprecated and will be removed in a future release. Please use the `DropdownButtonItem` component instead.
+ */
 export interface DropdownOption {
     /**
      * Text to be displayed as the menu item text.
@@ -684,6 +697,25 @@ export interface DropdownOption {
      */
     onClick?: () => void;
 }
+/**
+ * The props type for {@link !components.DropdownButtonItem}.
+ *
+ * @category Component Props
+ */
+export interface DropdownButtonItemProps extends OverlayComponentProps {
+    /**
+     * Text to be displayed as the menu item text.
+     * Can also accept ReactNode for more complex content.
+     */
+    children: ReactNode;
+    /**
+     * A function that will be invoked when the item is clicked.
+     * It receives no arguments and its return value is ignored.
+     *
+     * @event
+     */
+    onClick?: ReactionsHandler<ExtensionEvent>;
+}
 /**
  * The props type for {@link !components.Dropdown}.
  *
@@ -693,8 +725,12 @@ export interface DropdownProps {
     /**
      * The list of options to be rendered within the dropdown menu.
      * Each option represents an entry in the Dropdown.
+     *
+     * @deprecated This prop is deprecated and will be removed in a future release.
+     * Use child components instead to define dropdown menu items. For example,
+     * use `<Dropdown.ButtonItem>` to render an action button within a dropdown menu.
      */
-    options: DropdownOption[];
+    options?: DropdownOption[];
     /**
      * Controls the appearance of the dropdown button
      *
@@ -719,6 +755,10 @@ export interface DropdownProps {
      * @defaultValue `false`
      */
     disabled?: boolean;
+    /**
+     * Sets the content that will render inside the Dropdown. You have to use `DropdownOption` component as a child of the `Dropdown` component.
+     */
+    children?: ReactNode;
 }
 export type EmptyStateImageName = 'addOnReporting' | 'announcement' | 'api' | 'automatedTesting' | 'beta' | 'building' | 'callingSetUp' | 'companies' | 'components' | 'cone' | 'contacts' | 'contentStrategy' | 'customObjects' | 'customerExperience' | 'customerSupport' | 'deals' | 'developerSecurityUpdate' | 'electronicSignature' | 'electronicSignatureEmptyState' | 'emailConfirmation' | 'emptyStateCharts' | 'idea' | 'integrations' | 'leads' | 'lock' | 'meetings' | 'missedGoal' | 'multipleObjects' | 'object' | 'productsShoppingCart' | 'registration' | 'sandboxAddOn' | 'social' | 'store' | 'storeDisabled' | 'successfullyConnectedEmail' | 'target' | 'task' | 'tickets' | 'voteAndSearch';
 /**
@@ -837,12 +877,19 @@ export interface HeadingProps {
      */
     inline?: boolean;
 }
+export type IconColor = 'alert' | 'warning' | 'success' | 'inherit';
 /**
  * The props type for {@link !components.Icon}.
  *
  * @category Component Props
  */
 export interface IconProps {
+    /**
+     * Sets the icon color. By default, the icon will use `inherit`, which inherits the color from its parent element.
+     *
+     * @defaultValue `"inherit"`
+     */
+    color?: IconColor;
     /**
      * Sets the specific icon to display.
      */
@@ -1859,7 +1906,7 @@ export interface MultiSelectProps extends BaseSelectProps {
      * The value of the select input.
      *
      */
-    value?: (string | number)[];
+    value?: (string | number | boolean)[];
     /**
      * A callback function that is invoked when the value is committed.
      *
@@ -1873,7 +1920,7 @@ export interface MultiSelectProps extends BaseSelectProps {
         /** Will be used as the display text. **/
         label: string;
         /** Should be the option's unique identifier, which is submitted with the form. **/
-        value: string | number;
+        value: string | number | boolean;
     }[];
 }
 /**

package/dist/types.js

@@ -1,6 +1,3 @@
-// ============================================
-// From: shared.ts
-// ============================================
 export class ExtensionEvent {
     type;
     bubbles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -24,15 +24,12 @@
   "exports": {
     ".": "./dist/index.js",
     "./crm": "./dist/crm/index.js",
-    "./pages/home": "./dist/pages/home/components.js",
-    "./experimental": "./dist/experimental/index.js",
-    "./experimental/testing": "./dist/experimental/testing/index.js",
-    "./experimental/testing/jest-matchers": "./dist/experimental/testing/jest/matchers/index.js"
+    "./pages/home": "./dist/pages/home/index.js",
+    "./experimental": "./dist/experimental/index.js"
   },
   "license": "MIT",
   "dependencies": {
     "@remote-ui/react": "5.0.2",
-    "@remote-ui/testing": "1.4.3",
     "react": "18.2.0"
   },
   "engines": {
@@ -72,5 +69,5 @@
   "tsd": {
     "directory": "src/__tests__/test-d"
   },
-  "gitHead": "d3300e12daf61bc1931da0e79d62aede9675a750"
+  "gitHead": "aeebbd7fb6aefc9aeb948cc9ca4028e94d5320cc"
 }