@hubspot/ui-extensions 0.10.1 → 0.11.0

package/dist/__synced__/types/components/accordion.synced.d.ts

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+import { TShirtSizes } from '../shared.synced';
+/**
+ * The props type for {@link !components.Accordion}.
+ *
+ * @category Component Props
+ */
+export interface AccordionProps {
+    /**
+     * The title text for the accordion.
+     *
+     */
+    title: string;
+    /**
+     * The main content of the accordion when it opens.
+     *
+     */
+    children: ReactNode;
+    /**
+     * Defines default open behavior on page load. When set to `true`, the accordion will be open by default on initial load.
+     *
+     * @defaultValue `false`
+     */
+    defaultOpen?: boolean;
+    /**
+     * When set to `true`, the accordion's open state cannot be changed.
+     *
+     * @defaultValue `false`
+     */
+    disabled?: boolean;
+    /**
+     * For controlling the accordion's open state programmatically. When set to `true`, the accordion will open. Takes precedence over `defaultOpen`.
+     *
+     */
+    open?: boolean;
+    /**
+     * The size of the accordion title.
+     *
+     * @defaultValue `"small"`
+     */
+    size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
+    /**
+     * A function that will be invoked when the title is clicked. It receives no arguments and its return value is ignored.
+     *
+     * @event
+     */
+    onClick?: () => void;
+}

package/dist/__synced__/types/components/accordion.synced.js

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

package/dist/__synced__/types/components/alert.synced.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+/**
+ * The props type for {@link !components.Alert}.
+ *
+ * @category Component Props
+ */
+export interface AlertProps {
+    /**
+     * The bolded title text of the alert.
+     *
+     */
+    title: string;
+    /**
+     * The main content of the alert message.
+     *
+     */
+    children?: ReactNode;
+    /**
+     * The color of the alert.
+     *
+     * @defaultValue `"info"`
+     */
+    variant?: 'info' | 'warning' | 'success' | 'error' | 'danger' | 'tip';
+}

package/dist/__synced__/types/components/alert.synced.js

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

package/dist/__synced__/types/components/app-home-header-actions.synced.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+import { ReactionsHandler } from '../reactions.synced';
+import { ExtensionEvent, OverlayComponentProps, HrefProp } from '../shared.synced';
+/**
+ * The props type for {@link !components.HeaderActions}.
+ *
+ * @category Component Props
+ */
+export interface HeaderActionsProps {
+    /**
+     * Sets the content that will render inside the HeaderActions. This prop is passed implicitly by providing sub-components.
+     */
+    children: ReactNode;
+}
+/**
+ * The props type for {@link !components.HeaderActions}.
+ *
+ * @category Component Props
+ */
+export interface HeaderActionButtonProps 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.
+     *
+     * @event
+     */
+    onClick?: ReactionsHandler<ExtensionEvent>;
+    /**
+     * A URL that will be opened when the button is clicked. If the value is a URL external to `hubspot.com` it will be opened in a new tab.
+     */
+    href?: HrefProp;
+    /**
+     * Determines whether or not the button should be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Sets the content that will render inside the HeaderActionButton. This prop is passed implicitly by providing sub-components.
+     */
+    children: ReactNode;
+}

package/dist/__synced__/types/components/app-home-header-actions.synced.js

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

package/dist/__synced__/types/components/button-row.synced.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import { TShirtSizes } from '../shared.synced';
+/**
+ * The props type for {@link !components.ButtonRow}.
+ *
+ * @category Component Props
+ */
+export interface ButtonRowProps {
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
+     */
+    children: ReactNode;
+    /**
+     * Disables the dropdown list of buttons that appears when the children expand beyond the horizontal space.
+     *
+     * @defaultValue `false`
+     */
+    disableDropdown?: boolean;
+    /**
+     * Controls the appearance and text content of the dropdown button.
+     */
+    dropDownButtonOptions?: ButtonRownDropDownButtonOptionsProps;
+}
+/** Configures the Dropdown Button in the ButtonRow component */
+export interface ButtonRownDropDownButtonOptionsProps {
+    /**
+     * Sets the content for the dropdown button.
+     *
+     * @defaultValue `"More"`
+     */
+    text?: string;
+    /**
+     * Sets the size of the dropdown button.
+     *
+     * @defaultValue `"md"`
+     */
+    size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
+    /**
+     * Controls the appearance of the dropdown button
+     *
+     * @defaultValue `"secondary"`
+     */
+    variant?: 'primary' | 'secondary' | 'transparent';
+}

package/dist/__synced__/types/components/button-row.synced.js

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

package/dist/__synced__/types/components/button.synced.d.ts

@@ -0,0 +1,89 @@
+import { ReactNode } from 'react';
+import { OverlayComponentProps, HrefProp, TShirtSizes, IconNames, ExtensionEvent } from '../shared.synced';
+import { ReactionsHandler } from '../reactions.synced';
+export interface BaseButtonProps {
+    /**
+     * 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.
+     *
+     * @event
+     */
+    onClick?: ReactionsHandler<ExtensionEvent>;
+    /**
+     * A URL that will be opened when the button is clicked. If the value is a URL external to `hubspot.com` it will be opened in a new tab.
+     */
+    href?: HrefProp;
+    /**
+     * Determines whether or not the button should be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Sets the color variation of the button.
+     *
+     * @defaultValue `"secondary"`
+     */
+    variant?: 'primary' | 'secondary' | 'destructive' | 'transparent';
+    /**
+     * Sets the HTML attribute "role" of the button.
+     *
+     * @defaultValue `"button"`
+     */
+    type?: 'button' | 'reset' | 'submit';
+    /**
+     * Sets the content that will render inside the Button. This prop is passed implicitly by providing sub-components. Only regular text and Icons are permitted.
+     */
+    children: ReactNode;
+    /**
+     * Sets the size of the button.
+     *
+     * @defaultValue `"md"`
+     */
+    size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
+}
+/**
+ * The props type for {@link !components.Button}.
+ *
+ * @category Component Props
+ */
+export interface ButtonProps extends BaseButtonProps, OverlayComponentProps {
+}
+/**
+ * Extra configuration passed to the overlay
+ */
+export interface LoadingButtonOverlayOptions {
+    /**
+     * If `onLoadingFinish`, the overlay will open once the loading operation is done.
+     * If `onClick`, the overlay will open as soon as there is a click on the button.
+     *
+     * @defaultValue `"onClick"`
+     */
+    openBehavior?: 'onClick' | 'onLoadingFinish';
+}
+/**
+ * The props type for {@link !components.LoadingButton}.
+ *
+ * @category Component Props
+ */
+export interface LoadingButtonProps extends BaseButtonProps, OverlayComponentProps {
+    /**
+     * Sets the color variation of the button.
+     *
+     * @defaultValue `"secondary"`
+     */
+    variant?: 'primary' | 'secondary' | 'destructive';
+    /**
+     * If true, the loading indicator is shown and the button becomes disabled.
+     *
+     * @defaultValue `false`
+     */
+    loading?: boolean;
+    /**
+     * Extra configuration passed to the overlay
+     */
+    overlayOptions?: LoadingButtonOverlayOptions;
+    /**
+     * Controls the icon that's shown after loading is done.
+     *
+     * @defaultValue `"success"`
+     */
+    resultIconName?: IconNames;
+}

package/dist/__synced__/types/components/button.synced.js

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

package/dist/__synced__/types/components/card.synced.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+/**
+ * The props type for {@link !components.Card}.
+ *
+ * @category Component Props
+ */
+export interface CardProps {
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
+     */
+    children: ReactNode;
+}

package/dist/__synced__/types/components/card.synced.js

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

package/dist/__synced__/types/components/chart.synced.d.ts

@@ -0,0 +1,137 @@
+/**
+ * The props type for {@link !components.BarChart}.
+ *
+ * @category Component Props
+ */
+export type BarChartProps = ChartProps;
+/**
+ * The props type for {@link !components.LineChart}.
+ *
+ * @category Component Props
+ */
+export type LineChartProps = ChartProps;
+export interface ChartProps {
+    /**
+     * The data used to render the chart. You can optionally provide configuration options.
+     */
+    data: ChartDataRow[] | {
+        data: ChartDataRow[];
+        options?: ChartDataOptions;
+    };
+    /**
+     * The configuration for the axes of the chart.
+     */
+    axes: ChartAxisPair;
+    /**
+     * Configuration options for the chart as a whole.
+     */
+    options?: ChartOptions;
+}
+export type ChartDataRow = {
+    [key: string]: number | string;
+};
+export type ChartDataOptions = {
+    /**
+     * A mapping of fields to human-readable labels.
+     * We recommend pre-formatting your data to be human-readable instead of using this configuration.
+     */
+    propertyLabels?: {
+        [fields: string]: Record<string, string>;
+    };
+};
+export type ChartAxisPair = {
+    /**
+     * The field to use for the horizontal x-axis.
+     */
+    x: ChartAxis;
+    /**
+     * The field to use for the vertical y-axis.
+     */
+    y: ChartAxis;
+    /**
+     * Configuration options for the pair of axes.
+     */
+    options?: AxisPairOptions;
+};
+export type ChartAxis = {
+    /**
+     * The dataset field that should be graphed on this axis.
+     */
+    field: string;
+    /**
+     * The type of data in the field property. Please read the documentation for the expected formats for each fieldType.
+     */
+    fieldType: ChartFieldType;
+    /**
+     * The axis display label. Note: this will also be used in the legend and the hover tooltips.
+     */
+    label?: string;
+};
+export type AxisPairOptions = {
+    /**
+     * If provided, the data will be grouped by color for this field.
+     */
+    groupFieldByColor?: string;
+    /**
+     * When set to true, grouped data will be stacked.
+     *
+     * @defaultValue `false`
+     */
+    stacking?: boolean;
+    /**
+     * If provided, assigns a color to each specified values of the field provided in `groupFieldByColor`.
+     */
+    colors?: {
+        [key: string]: ChartColor;
+    };
+};
+export declare const chartFieldTypes: {
+    readonly datetime: "datetime";
+    readonly linear: "linear";
+    readonly category: "category";
+};
+/**
+ * The type of field for this axis.
+ * - `datetime`: Used for time data, such as JavaScript timestamps.
+ * - `linear`: Used for numerical data, such as quantities.
+ * - `category`: Used for categorical data, such as different types of products.
+ *
+ * Please read the documentation for recommended usage.
+ */
+export type ChartFieldType = keyof typeof chartFieldTypes;
+export type ChartOptions = {
+    /**
+     * Renders a title above the chart.
+     */
+    title?: string;
+    /**
+     * When set to `true`, shows a legend for the chart.
+     *
+     * @defaultValue `false`
+     */
+    showLegend?: boolean;
+    /**
+     * When set to `true`, shows hover tooltips for the charted data.
+     *
+     * @defaultValue `false`
+     */
+    showTooltips?: boolean;
+    /**
+     * When set to `true`, shows labels for the data directly on the chart.
+     *
+     * @defaultValue `false`
+     */
+    showDataLabels?: boolean;
+    /**
+     * Use to choose the order in which our chart colors are assigned to your data. Unspecified colors will be chosen after the ones you've provided here,
+     * so you don't need to provide a complete list of all possible colors.
+     * Please read the documentation for guidance on color usage.
+     */
+    colorList?: ChartColor[];
+    /** @deprecated use colorList instead */
+    colors?: ChartColor[];
+};
+/**
+ * The allowed colors for data displayed on the chart.
+ */
+export type ChartColor = 'orange' | 'aqua' | 'purple' | 'yellow' | 'pink' | 'blue' | 'green' | 'darkOrange' | 'darkAqua' | 'darkPurple' | 'darkYellow' | 'darkPink' | 'darkBlue' | 'darkGreen';

package/dist/__synced__/types/components/chart.synced.js

@@ -0,0 +1,5 @@
+export const chartFieldTypes = {
+    datetime: 'datetime',
+    linear: 'linear',
+    category: 'category',
+};

package/dist/__synced__/types/components/description-list.synced.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+/**
+ * The props type for {@link !components.DescriptionListItem}.
+ *
+ * @category Component Props
+ */
+export interface DescriptionListItemProps {
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
+     *
+     */
+    children: ReactNode;
+    /**
+     * Text to be displayed as the label.
+     *
+     */
+    label: string;
+}
+/**
+ * The props type for {@link !components.DescriptionList}.
+ *
+ * @category Component Props
+ */
+export interface DescriptionListProps {
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. The children should be {@link !components.DescriptionListItem}.
+     *
+     */
+    children: ReactNode;
+    /**
+     * The direction the label/value pairs are placed in the description list container.
+     *
+     * @defaultValue `"column"`
+     */
+    direction?: 'row' | 'column';
+}

package/dist/__synced__/types/components/description-list.synced.js

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

package/dist/__synced__/types/components/divider.synced.d.ts

@@ -0,0 +1,14 @@
+import { AllDistances } from '../shared.synced';
+/**
+ * The props type for {@link !components.Divider}.
+ *
+ * @category Component Props
+ */
+export interface DividerProps {
+    /**
+     * The space between the divider and the content above and below it.
+     *
+     * @defaultValue `"small"`
+     */
+    distance?: AllDistances;
+}

package/dist/__synced__/types/components/divider.synced.js

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

package/dist/__synced__/types/components/dropdown.synced.d.ts

@@ -0,0 +1,84 @@
+import type { ReactNode } from 'react';
+import { TShirtSizes } from '../shared.synced';
+import { ExtensionEvent, OverlayComponentProps } from '../shared.synced';
+import { ReactionsHandler } from '../reactions.synced';
+/**
+ * @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.
+     *
+     */
+    label: string;
+    /**
+     * A function that will be invoked when the item is clicked.
+     * It receives no arguments and its return value is ignored.
+     *
+     * @event
+     */
+    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}.
+ *
+ * @category Component Props
+ */
+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[];
+    /**
+     * Controls the appearance of the dropdown button
+     *
+     * @defaultValue `"secondary"`
+     */
+    variant?: 'primary' | 'secondary' | 'transparent';
+    /**
+     * Sets the content for the dropdown button.
+     *
+     * @defaultValue `"More"`
+     */
+    buttonText?: string;
+    /**
+     * Sets the size of the dropdown button.
+     *
+     * @defaultValue `"md"`
+     */
+    buttonSize?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
+    /**
+     * Disables the ability to focus and click-to-expand of the dropdown button
+     *
+     * @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;
+}

package/dist/__synced__/types/components/dropdown.synced.js

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

package/dist/__synced__/types/components/empty-state.synced.d.ts

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+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';
+/**
+ * The props type for {@link !components.EmptyState}.
+ *
+ * @category Component Props
+ */
+export interface EmptyStateProps {
+    /**
+     * When set to `true`, removes the default vertical margins in the component.
+     *
+     * @defaultValue `false`
+     */
+    flush?: boolean;
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
+     *
+     */
+    children: ReactNode;
+    /**
+     * The text for the title header.
+     *
+     * @defaultValue `"All is not lost."`
+     *
+     */
+    title?: string;
+    /**
+     * Sets the layout direction for the content. Can be either `horizontal` or `vertical`.
+     *
+     * @defaultValue `"horizontal"`
+     */
+    layout?: 'horizontal' | 'vertical';
+    /**
+     * When set to `true`, swaps the visual order of the text (primary) and image (secondary) content. This ensures the primary content is still presented first to assistive technology.
+     *
+     * @defaultValue `false`
+     */
+    reverseOrder?: boolean;
+    /**
+     * The max-width(in pixels) for the image container.
+     *
+     * @defaultValue `250`
+     */
+    imageWidth?: number;
+    /**
+     * The name of the image to display.
+     *
+     * @defaultValue `"emptyStateCharts"`
+     */
+    imageName?: EmptyStateImageName;
+}

package/dist/__synced__/types/components/empty-state.synced.js

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

package/dist/__synced__/types/components/error-state.synced.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+/**
+ * The props type for {@link !components.ErrorState}.
+ *
+ * @category Component Props
+ */
+export interface ErrorStateProps {
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
+     *
+     */
+    children: ReactNode;
+    /**
+     * The text of the title header.
+     *
+     */
+    title?: string;
+    /**
+     * The type of error image that will be shown.
+     *
+     * @defaultValue `"error"`
+     */
+    type?: 'error' | 'support' | 'lock';
+}

package/dist/__synced__/types/components/error-state.synced.js

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