@hubspot/ui-extensions 0.10.1 → 0.11.0

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

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import { FormSubmitExtensionEvent } from '../shared.synced';
+import { ReactionsHandler } from '../reactions.synced';
+export type FormInputValues = Record<string, string | number>;
+/**
+ * The props type for {@link !components.Form}.
+ *
+ * @category Component Props
+ */
+export interface FormProps {
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
+     *
+     */
+    children: ReactNode;
+    /**
+     * The function that is called when the form is submitted. It will receive a FormSubmitExtensionEvent as an argument and its return value will be ignored. This function should be used instead of Button's `onClick` for the Form's submit button.
+     *
+     * @event
+     */
+    onSubmit?: ReactionsHandler<FormSubmitExtensionEvent<FormInputValues>>;
+    /** @deprecated the value for `preventDefault` is now always `true`, use `onSubmit` to handle all form submission behavior */
+    preventDefault?: boolean;
+    /**
+     * Specifies how autcomplete behaves in the entire form.
+     * @defaultValue `"on"`
+     */
+    autoComplete?: 'off' | 'on';
+}

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

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

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

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+/**
+ * The props type for {@link !components.Heading}.
+ *
+ * @category Component Props
+ */
+export interface HeadingProps {
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
+     *
+     */
+    children: ReactNode;
+    /**
+     * When set to true, text will not line break.
+     *
+     * @defaultValue `false`
+     */
+    inline?: boolean;
+}

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

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

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

@@ -0,0 +1,29 @@
+import { TShirtSizes, IconNames } from '../shared.synced';
+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.
+     */
+    name: IconNames;
+    /**
+     * Sets the size of the icon. If this prop is not provided, the icon will default to the size of its parent.
+     *
+     * @defaultValue `"medium"`
+     */
+    size?: TShirtSizes['sm'] | TShirtSizes['md'] | TShirtSizes['lg'];
+    /**
+     * Sets the text that a screenreader will read for this icon.
+     */
+    screenReaderText?: string;
+}

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

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

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

@@ -0,0 +1,20 @@
+import { TShirtSizes } from '../shared.synced';
+/**
+ * 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;
+}

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

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

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

@@ -0,0 +1,53 @@
+/**
+ * The props type for {@link !components.Illustration}.
+ *
+ * @category Component Props
+ */
+export interface IllustrationProps {
+    name: IllustrationNames;
+    alt: string;
+    width?: number;
+    height?: number;
+}
+export declare const illustrationNames: {
+    readonly lock: "lock";
+    readonly unlock: "unlock";
+    readonly electronicSignature: "electronic-signature";
+    readonly electronicSignatureEmptyState: "electronic-signature-empty-state";
+    readonly callingSetUp: "calling-set-up";
+    readonly companies: "companies";
+    readonly contacts: "contacts";
+    readonly multipleObjects: "multiple-objects";
+    readonly object: "object";
+    readonly task: "task";
+    readonly deals: "deals";
+    readonly registration: "registration";
+    readonly developerSecurityUpdate: "developer-security-update";
+    readonly social: "social";
+    readonly leads: "leads";
+    readonly target: "target";
+    readonly emailConfirmation: "email-confirmation";
+    readonly successfullyConnectedEmail: "successfully-connected-email";
+    readonly contentStrategy: "content-strategy";
+    readonly addOnReporting: "add-on-reporting";
+    readonly productsShoppingCart: "products-shopping-cart";
+    readonly store: "store";
+    readonly storeDisabled: "store-disabled";
+    readonly customerSupport: "customer-support";
+    readonly customerExperience: "customer-experience";
+    readonly api: "api";
+    readonly integrations: "integrations";
+    readonly sandboxAddOn: "sandbox-add-on";
+    readonly customObjects: "custom-objects";
+    readonly paymentsButton: "payments-button";
+    readonly automatedTesting: "automated-testing";
+    readonly emptyStateCharts: "empty-state-charts";
+    readonly meetings: "meetings-small";
+    readonly tickets: "ticket-small";
+    readonly errorGeneral: "errors/general";
+    readonly errorHourglass: "errors/hourglass";
+    readonly middlePaneCards: "settings-middle-pane-cards";
+    readonly propertiesSidebar: "settings-properties-sidebar";
+    readonly sidebar: "settings-sidebar";
+};
+export type IllustrationNames = keyof typeof illustrationNames;

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

@@ -0,0 +1,43 @@
+export const illustrationNames = {
+    // Standard 1:1 mappings
+    lock: 'lock',
+    unlock: 'unlock',
+    electronicSignature: 'electronic-signature',
+    electronicSignatureEmptyState: 'electronic-signature-empty-state',
+    callingSetUp: 'calling-set-up',
+    companies: 'companies',
+    contacts: 'contacts',
+    multipleObjects: 'multiple-objects',
+    object: 'object',
+    task: 'task',
+    deals: 'deals',
+    registration: 'registration',
+    developerSecurityUpdate: 'developer-security-update',
+    social: 'social',
+    leads: 'leads',
+    target: 'target',
+    emailConfirmation: 'email-confirmation',
+    successfullyConnectedEmail: 'successfully-connected-email',
+    contentStrategy: 'content-strategy',
+    addOnReporting: 'add-on-reporting',
+    productsShoppingCart: 'products-shopping-cart',
+    store: 'store',
+    storeDisabled: 'store-disabled',
+    customerSupport: 'customer-support',
+    customerExperience: 'customer-experience',
+    api: 'api',
+    integrations: 'integrations',
+    sandboxAddOn: 'sandbox-add-on',
+    customObjects: 'custom-objects',
+    paymentsButton: 'payments-button',
+    automatedTesting: 'automated-testing',
+    emptyStateCharts: 'empty-state-charts',
+    // Special mappings that are not 1:1
+    meetings: 'meetings-small',
+    tickets: 'ticket-small',
+    errorGeneral: 'errors/general',
+    errorHourglass: 'errors/hourglass',
+    middlePaneCards: 'settings-middle-pane-cards',
+    propertiesSidebar: 'settings-properties-sidebar',
+    sidebar: 'settings-sidebar',
+};

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

@@ -0,0 +1,40 @@
+import { OverlayComponentProps, HrefProp, ExtensionEvent } from '../shared.synced';
+import { ReactionsHandler } from '../reactions.synced';
+/**
+ * The props type for {@link !components.Image}.
+ *
+ * @category Component Props
+ */
+export interface ImageProps extends OverlayComponentProps {
+    /**
+     * The alt text for the image.
+     *
+     */
+    alt?: string;
+    /**
+     * If provided, will be used as the href that will be opened in a new browser tab on click.
+     *
+     */
+    href?: HrefProp;
+    /**
+     * A function that will be called when the image is clicked.
+     *
+     * @event
+     */
+    onClick?: ReactionsHandler<ExtensionEvent>;
+    /**
+     * The URL of the image to display.
+     *
+     */
+    src: string;
+    /**
+     * The pixel width of the image.
+     *
+     */
+    width?: number;
+    /**
+     * The pixel height of the image.
+     *
+     */
+    height?: number;
+}

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

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

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

@@ -0,0 +1,38 @@
+export type { AlertProps } from './alert.synced';
+export type { ButtonProps, LoadingButtonProps } from './button.synced';
+export type { ButtonRowProps } from './button-row.synced';
+export type { CardProps } from './card.synced';
+export type { ChartProps, LineChartProps, BarChartProps } from './chart.synced';
+export type { DescriptionListProps, DescriptionListItemProps, } from './description-list.synced';
+export type { DividerProps } from './divider.synced';
+export type { EmptyStateProps } from './empty-state.synced';
+export type { ErrorStateProps } from './error-state.synced';
+export type { HeadingProps } from './heading.synced';
+export type { FormProps } from './form.synced';
+export type { IconProps } from './icon.synced';
+export type { IllustrationProps } from './illustration.synced';
+export type { IframeProps } from './iframe.synced';
+export type { ImageProps } from './image.synced';
+export type { InputProps, TextAreaProps, TextareaProps, NumberInputProps, DateInputProps, StepperInputProps, SearchInputProps, TimeInputProps, CurrencyInputProps, } from './inputs.synced';
+export type { StackProps, FlexProps, BoxProps, InlineProps, AutoGridProps, } from './layouts.synced';
+export type { LinkProps } from './link.synced';
+export type { ListProps } from './list.synced';
+export type { LoadingSpinnerProps } from './loading-spinner.synced';
+export type { ModalProps, ModalBodyProps, ModalFooterProps } from './modal.synced';
+export type { ProgressBarProps } from './progress-bar.synced';
+export type { PanelProps, PanelFooterProps, PanelBodyProps, PanelSectionProps, } from './panel.synced';
+export type { SelectProps, MultiSelectProps } from './selects.synced';
+export type { StatisticsProps, StatisticsItemProps, StatisticsTrendProps, } from './statistics.synced';
+export type { StatusTagProps } from './status-tag.synced';
+export type { StepIndicatorProps } from './step-indicator.synced';
+export type { TableProps, TableElementProps, TableCellProps, TableHeaderProps, } from './table.synced';
+export type { TabsProps, TabProps } from './tabs.synced';
+export type { TagProps } from './tag.synced';
+export type { TextProps } from './text.synced';
+export type { TileProps } from './tile.synced';
+export type { ToggleProps } from './toggle.synced';
+export type { CheckboxProps, RadioButtonProps, ToggleGroupProps, CheckboxListProps, RadioButtonListProps, } from './toggleInputs.synced';
+export type { AccordionProps } from './accordion.synced';
+export type { DropdownProps, DropdownButtonItemProps } from './dropdown.synced';
+export type { TooltipProps } from './tooltip.synced';
+export type { HeaderActionsProps, HeaderActionButtonProps, } from './app-home-header-actions.synced';

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

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

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

@@ -0,0 +1,350 @@
+/**
+ * Generic collection of props for all inputs
+ * @internal
+ * */
+interface BaseInputProps<T = string, V = string> {
+    /**
+     * The label text to display for the form input element.
+     */
+    label: string;
+    /**
+     * The unique identifier for the input element, this could be thought of as the HTML5 [Input element's name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name).
+     */
+    name: string;
+    /**
+     * The value of the input.
+     */
+    value?: T;
+    /**
+     * Determines if the required indicator should be displayed.
+     *
+     * @defaultValue `false`
+     */
+    required?: boolean;
+    /**
+     * Determines if the field is editable or not.
+     *
+     * @defaultValue `false`
+     */
+    readOnly?: boolean;
+    /**
+     * Instructional message to display to the user to help understand the purpose of the input.
+     */
+    description?: string;
+    /**
+     * Text that will appear in a tooltip next to the input label.
+     */
+    tooltip?: string;
+    /**
+     * Text that appears in the input when it has no value set.
+     */
+    placeholder?: string;
+    /**
+     * If set to `true`, `validationMessage` is displayed as an error message, if it was provided. The input will also render its error state to let the user know there is an error. If set to `false`, `validationMessage` is displayed as a success message.
+     *
+     * @defaultValue `false`
+     */
+    error?: boolean;
+    /**
+     * The value of the input on the first render.
+     */
+    defaultValue?: T;
+    /**
+     * The text to show under the input for error or success validations.
+     */
+    validationMessage?: string;
+    /**
+     * A callback function that is invoked when the value is committed. Currently these times are `onBlur` of the input and when the user submits the form.
+     *
+     * @event
+     */
+    onChange?: (value: V) => void;
+    /**
+     * A function that is called and passed the value every time the field is edited by the user. It is recommended that you do not use this value to update state, that is what `onChange` should be used for. Instead this should be used for validation.
+     *
+     * @event
+     */
+    onInput?: (value: V) => void;
+    /**
+     * A function that is called and passed the value every time the field loses focus.
+     *
+     * @event
+     */
+    onBlur?: (value: V) => void;
+    /**
+     * A function that is called and passed the value every time the field gets focused.
+     *
+     * @event
+     */
+    onFocus?: (value: V) => void;
+}
+/**
+ * The props type for {@link !components.Input}.
+ *
+ * @category Component Props
+ */
+export interface InputProps extends BaseInputProps {
+    /**
+     * Sets the type of input to render.
+     *
+     * @defaultValue `"text"`
+     */
+    type?: 'text' | 'password';
+}
+/**
+ * The props type for {@link !components.TextArea}.
+ *
+ * @category Component Props
+ */
+export interface TextAreaProps extends BaseInputProps {
+    /**
+     * The visible width of the text field in average character widths.
+     */
+    cols?: number;
+    /**
+     * The maximum number of characters (UTF-16 code units) that the user can enter. If not specified, the max length is unlimited.
+     */
+    maxLength?: number;
+    /**
+     * The number of visible text lines for the text field.
+     */
+    rows?: number;
+    /**
+     * Sets whether the element is resizable, and if so in which directions.
+     *
+     * @defaultValue `"both"`
+     */
+    resize?: 'vertical' | 'horizontal' | 'both' | 'none';
+}
+/**
+ * Textarea was changed to TextArea. Exporting both for backwards compat
+ *
+ * @ignore
+ * @internal
+ * */
+export type TextareaProps = TextAreaProps;
+/**
+ * @internal
+ * @ignore
+ * */
+type BaseInputForNumber = Omit<BaseInputProps<number, number>, 'onInput'>;
+/**
+ * The props type for {@link !components.NumberInput}.
+ *
+ * @category Component Props
+ */
+export interface NumberInputProps extends BaseInputForNumber {
+    /**
+     * Sets the lower bound of the input.
+     *
+     */
+    min?: number;
+    /**
+     * Sets the upper bound of the input.
+     *
+     */
+    max?: number;
+    /**
+     * Sets the number of digits to the right of the decimal point.
+     *
+     */
+    precision?: number;
+    /**
+     * Formats the input as a decimal point (decimal) or percentage (percentage).
+     *
+     * @defaultValue `"decimal"`
+     */
+    formatStyle?: 'decimal' | 'percentage';
+    /** @deprecated use onChange instead. It doesn't guarantee valid format */
+    onInput?: (value: number) => void;
+}
+/**
+ * The props type for {@link !components.CurrencyInput}.
+ *
+ * @category Component Props
+ */
+export interface CurrencyInputProps extends BaseInputForNumber {
+    /**
+     * ISO 4217 currency code (e.g., "USD", "EUR", "JPY")
+     * @defaultValue "USD"
+     */
+    currency?: string;
+    /**
+     * Sets the number of decimal places for the currency
+     * If not provided, defaults to currency-specific precision
+     */
+    precision?: number;
+    /**
+     * Sets the lower bound of the input
+     */
+    min?: number;
+    /**
+     * Sets the upper bound of the input
+     */
+    max?: number;
+}
+/**
+ * The props type for {@link !components.StepperInput}.
+ *
+ * @category Component Props
+ */
+export interface StepperInputProps extends Omit<NumberInputProps, 'onInput'> {
+    /** The amount that the current value will increase or decrease on each step button click.
+     * @defaultValue `1`
+     */
+    stepSize?: number;
+    /**
+     * Text that will appear in a tooltip next to the step up button when users
+     * can't increase the current value.
+     */
+    maxValueReachedTooltip?: string;
+    /**
+     * Text that will appear in a tooltip next to the step down button when users
+     * can't decrease the current value.
+     */
+    minValueReachedTooltip?: string;
+}
+/** Object that represents dates. */
+export interface BaseDate {
+    /** the four-digit year (e.g., 2023). */
+    year: number;
+    /** starting at 0, the number of the month (e.g., 0 = January, 11 = December). */
+    month: number;
+    /** the number of the day (e.g., 1 = the first day of the month).*/
+    date: number;
+}
+/** The values used to invoke events on the DateInput component */
+export interface DateInputEventsPayload extends BaseDate {
+    /** Selected date with formatting option applied. (e.g., 09/04/1986). */
+    formattedDate?: string;
+}
+/**
+ * @internal
+ * @ignore
+ * */
+type BaseDateInputForDate = Omit<BaseInputProps<BaseDate | null, DateInputEventsPayload>, 'onInput' | 'placeholder'>;
+/**
+ * The props type for {@link !components.DateInput}.
+ *
+ * @category Component Props
+ */
+export interface DateInputProps extends BaseDateInputForDate {
+    /**
+     * Sets the earliest date that will be valid.
+     */
+    min?: BaseDate;
+    /**
+     * Sets the latest date that will be valid.
+     */
+    max?: BaseDate;
+    /**
+     * Sets the message that users will see when they hover over dates before the min date.
+     *
+     * @defaultValue `"You must choose a newer date"`
+     */
+    minValidationMessage?: string;
+    /**
+     * Sets the message that users will see when the hover over dates after the max date.
+     *
+     * @defaultValue `"You must choose an older date"`
+     */
+    maxValidationMessage?: string;
+    /**
+     * Sets the date format that input will display to users.
+     *
+     * @defaultValue `short`
+     *
+     * #### Format Options
+     *
+     * - short: `09/04/1986`
+     * - long: `September 4, 1986`
+     * - medium : `Sep 4, 1986`
+     * - standard: `1986-09-04`
+     * - L: `09/04/1986`
+     * - LL: `September 4, 1986`
+     * - ll : `Sep 4, 1986`
+     * - YYYY-MM-DD: `1986-09-04`
+     */
+    format?: 'YYYY-MM-DD' | 'L' | 'LL' | 'll' | 'short' | 'long' | 'medium' | 'standard';
+    /**
+     * Sets the timezone that the component will use to calculate valid dates.
+     *
+     * @defaultValue `"userTz"`
+     */
+    timezone?: 'userTz' | 'portalTz';
+    /**
+     * Sets the label of the clear button.
+     *
+     * @defaultValue `"Clear"`
+     */
+    clearButtonLabel?: string;
+    /**
+     * Sets the label of the today button.
+     *
+     * @defaultValue `"Today"`
+     */
+    todayButtonLabel?: string;
+}
+/**
+ * Object that represents times.
+ */
+export interface BaseTime {
+    /** The hour for the time (0 to 23) in 24-hour format (e.g. 0 = 12:00 AM, 9 = 9:00 AM, 15 = 3:00 PM). */
+    hours: number;
+    /** The minutes for the time (0 to 59). */
+    minutes: number;
+}
+/**
+ * @ignore
+ *
+ * The values used to invoke events on the TimeInput component
+ */
+export interface TimeInputEventsPayload extends BaseTime {
+}
+/**
+ * @internal
+ * @ignore
+ * */
+type BaseTimeInputForTime = Omit<BaseInputProps<BaseTime | null, TimeInputEventsPayload>, 'onInput' | 'placeholder' | 'onChange'>;
+/**
+ * The props type for {@link !components.TimeInput}.
+ *
+ * @category Component Props
+ */
+export interface TimeInputProps extends BaseTimeInputForTime {
+    /**
+     * A callback function that is invoked when the value is changed.
+     *
+     * @event
+     */
+    onChange?: (value: TimeInputEventsPayload) => void;
+    /**
+     * Sets the earliest time that will be valid.
+     */
+    min?: BaseTime;
+    /**
+     * Sets the latest time that will be valid.
+     */
+    max?: BaseTime;
+    /**
+     * Sets the interval (in minutes) between the dropdown options.
+     *
+     *  @defaultValue `30`
+     */
+    interval?: number;
+    /**
+     * Sets the timezone that the component will display alongside times in the TimeInput. This will not modify the available valid inputs.
+     *
+     */
+    timezone?: 'userTz' | 'portalTz';
+}
+/**
+ * The props type for {@link !components.SearchInput}.
+ *
+ * @category Component Props
+ */
+export interface SearchInputProps extends BaseInputProps {
+    /** Shows a clear button to clear the input. Default is true. */
+    clearable?: boolean;
+}
+export {};

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

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