@hubspot/ui-extensions 0.11.5 → 0.11.6

package/dist/shared/types/components/button.d.ts

@@ -3,27 +3,33 @@ import { OverlayComponentProps, HrefProp, TShirtSizes, IconNames, ExtensionEvent
 import { ReactionsHandler } from '../reactions.ts';
 export interface BaseButtonProps extends BaseComponentProps {
     /**
-     * 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.
+     * A function that will be invoked when the button is clicked. It receives no arguments and its return value is ignored.
      *
      * @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.
+     * Include this prop to open a URL on click. Contains the following fields:
+     * - `url` (string): the URL that will open on click.
+     * - `external` (boolean): set to `true` to open the URL in a new tab and display an external link icon. By default:
+     *   - Links to HubSpot app pages will open in the same tab and will not include an icon.
+     *   - Links to non-HubSpot app pages will open in a new tab and include the icon.
+     *
+     * When a button includes both `href` and an `onClick` action, both will be executed on button click.
      */
     href?: HrefProp;
     /**
-     * Determines whether or not the button should be disabled.
+     * When set to `true`, the button will render in a greyed-out state and cannot be clicked.
      */
     disabled?: boolean;
     /**
-     * Sets the color variation of the button.
+     * Sets the color of the button.
      *
      * @defaultValue `"secondary"`
      */
     variant?: 'primary' | 'secondary' | 'destructive' | 'transparent';
     /**
-     * Sets the HTML attribute "role" of the button.
+     * Sets the `role` HTML attribute of the button.
      *
      * @defaultValue `"button"`
      */
@@ -33,13 +39,13 @@ export interface BaseButtonProps extends BaseComponentProps {
      */
     children: ReactNode;
     /**
-     * Sets the size of the button.
+     * The size of the button.
      *
      * @defaultValue `"md"`
      */
     size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
     /**
-     * When set to `true`, long button text will be truncated with an ellipsis (`...`) and the full text will appear in a tooltip on hover.
+     * When set to `true`, long button text will be truncated with an ellipsis (`...`), with the full text displayed in a tooltip on hover.
      *
      * @defaultValue `false`
      */
@@ -71,13 +77,13 @@ export interface LoadingButtonOverlayOptions {
  */
 export interface LoadingButtonProps extends BaseButtonProps, OverlayComponentProps {
     /**
-     * Sets the color variation of the button.
+     * Sets the color of the button.
      *
      * @defaultValue `"secondary"`
      */
     variant?: 'primary' | 'secondary' | 'destructive';
     /**
-     * If true, the loading indicator is shown and the button becomes disabled.
+     * Set to `true` to display the loading indicator and disable the button. Default is `false`.
      *
      * @defaultValue `false`
      */
@@ -87,7 +93,7 @@ export interface LoadingButtonProps extends BaseButtonProps, OverlayComponentPro
      */
     overlayOptions?: LoadingButtonOverlayOptions;
     /**
-     * Controls the icon that's shown after loading is done.
+     * Set to an icon name to display an icon after loading. By default, will display a check mark.
      *
      * @defaultValue `"success"`
      */

package/dist/shared/types/components/chart.d.ts

@@ -13,18 +13,18 @@ export type BarChartProps = ChartProps;
 export type LineChartProps = ChartProps;
 export interface ChartProps extends BaseComponentProps {
     /**
-     * The data used to render the chart. You can optionally provide configuration options.
+     * An object containing the chart's data in an array.
      */
     data: ChartDataRow[] | {
         data: ChartDataRow[];
         options?: ChartDataOptions;
     };
     /**
-     * The configuration for the axes of the chart.
+     * Configures the chart's axes.
      */
     axes: ChartAxisPair;
     /**
-     * Configuration options for the chart as a whole.
+     * Additional chart configuration options.
      */
     options?: ChartOptions;
 }

package/dist/shared/types/components/description-list.d.ts

@@ -12,7 +12,7 @@ export interface DescriptionListItemProps extends BaseComponentProps {
      */
     children: ReactNode;
     /**
-     * Text to be displayed as the label.
+     * Text to display as the label.
      *
      */
     label: string;
@@ -29,7 +29,7 @@ export interface DescriptionListProps extends BaseComponentProps {
      */
     children: ReactNode;
     /**
-     * The direction the label/value pairs are placed in the description list container.
+     * The direction that the label and value pairs are displayed.
      *
      * @defaultValue `"column"`
      */

package/dist/shared/types/components/dropdown.d.ts

@@ -31,8 +31,7 @@ export interface DropdownButtonItemProps extends OverlayComponentProps, BaseComp
      */
     children: ReactNode;
     /**
-     * A function that will be invoked when the item is clicked.
-     * It receives no arguments and its return value is ignored.
+     * The function invoked when the item is clicked.
      *
      * @event
      */
@@ -45,8 +44,9 @@ export interface DropdownButtonItemProps extends OverlayComponentProps, BaseComp
  */
 export interface DropdownProps extends BaseComponentProps {
     /**
-     * The list of options to be rendered within the dropdown menu.
-     * Each option represents an entry in the Dropdown.
+     * The options included in the dropdown menu. Each option includes:
+     * - `label`: the text label for the option.
+     * - `onClick`: the function that gets invoked when the option is selected.
      *
      * @deprecated This prop is deprecated and will be removed in a future release.
      * Use child components instead to define dropdown menu items. For example,
@@ -54,25 +54,25 @@ export interface DropdownProps extends BaseComponentProps {
      */
     options?: DropdownOption[];
     /**
-     * Controls the appearance of the dropdown button
+     * The type of dropdown button to display. `'primary'` and `'secondary'` will display a blue and grey button, respectively, while `'transparent'` will display a blue hyperlink.
      *
      * @defaultValue `"secondary"`
      */
     variant?: 'primary' | 'secondary' | 'transparent';
     /**
-     * Sets the content for the dropdown button.
+     * The button text.
      *
      * @defaultValue `"More"`
      */
     buttonText?: string;
     /**
-     * Sets the size of the dropdown button.
+     * The size of the button.
      *
      * @defaultValue `"md"`
      */
     buttonSize?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
     /**
-     * Disables the ability to focus and click-to-expand of the dropdown button
+     * When set to `true`, the dropdown button cannot be focused or clicked.
      *
      * @defaultValue `false`
      */

package/dist/shared/types/components/empty-state.d.ts

@@ -8,7 +8,7 @@ export type EmptyStateImageName = 'addOnReporting' | 'announcement' | 'api' | 'a
  */
 export interface EmptyStateProps extends BaseComponentProps {
     /**
-     * When set to `true`, removes the default vertical margins in the component.
+     * When set to `true`, removes the default vertical margins for the component.
      *
      * @defaultValue `false`
      */
@@ -21,30 +21,28 @@ export interface EmptyStateProps extends BaseComponentProps {
     /**
      * 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`.
+     * The layout direction of the content.
      *
      * @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.
+     * When set to `true`, swaps out the visual order of the text (primary) and image (secondary) content. This ensures that the primary content is presented first to screen readers.
      *
      * @defaultValue `false`
      */
     reverseOrder?: boolean;
     /**
-     * The max-width(in pixels) for the image container.
+     * The max-width for the image container.
      *
      * @defaultValue `250`
      */
     imageWidth?: number;
     /**
-     * The name of the image to display.
+     * The name of the image.
      *
      * @defaultValue `"emptyStateCharts"`
      */

package/dist/shared/types/components/error-state.d.ts

@@ -12,12 +12,12 @@ export interface ErrorStateProps extends BaseComponentProps {
      */
     children: ReactNode;
     /**
-     * The text of the title header.
+     * The text of the component header.
      *
      */
     title?: string;
     /**
-     * The type of error image that will be shown.
+     * The type of image that will be displayed.
      *
      * @defaultValue `"error"`
      */

package/dist/shared/types/components/form.d.ts

@@ -14,7 +14,7 @@ export interface FormProps extends BaseComponentProps {
      */
     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.
+     * The function that is called when the form is submitted. It will receive a `RemoteEvent` as an argument and its return value will be ignored.
      *
      * @event
      */
@@ -22,7 +22,7 @@ export interface FormProps extends BaseComponentProps {
     /** @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.
+     * Set this field to `'off'` to prevent autocompletion software (e.g., browser, password managers) from auto-filling form fields.
      * @defaultValue `"on"`
      */
     autoComplete?: 'off' | 'on';

package/dist/shared/types/components/heading.d.ts

@@ -12,7 +12,7 @@ export interface HeadingProps extends BaseComponentProps {
      */
     children: ReactNode;
     /**
-     * When set to true, text will not line break.
+     * When set to `true`, text will not line break.
      *
      * @defaultValue `false`
      */

package/dist/shared/types/components/icon.d.ts

@@ -7,23 +7,22 @@ export type IconColor = 'alert' | 'warning' | 'success' | 'inherit';
  */
 export interface IconProps extends BaseComponentProps {
     /**
-     * Sets the icon color. By default, the icon will use `inherit`, which inherits the color from its parent element.
+     * The color of the icon.
      *
      * @defaultValue `"inherit"`
      */
     color?: IconColor;
     /**
-     * Sets the specific icon to display.
+     * Sets the 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.
+     * By default, the size of the icon is set automatically based on the parent component. If you need to override the default size, you can specify one to use instead.
      *
-     * @defaultValue `"medium"`
      */
     size?: TShirtSizes['sm'] | TShirtSizes['md'] | TShirtSizes['lg'];
     /**
-     * Sets the text that a screenreader will read for this icon.
+     * Sets the text that screen readers will read for the icon.
      */
     screenReaderText?: string;
 }

package/dist/shared/types/components/illustration.d.ts

@@ -5,9 +5,21 @@ import { BaseComponentProps } from '../shared.ts';
  * @category Component Props
  */
 export interface IllustrationProps extends BaseComponentProps {
+    /**
+     * The name of the illustration.
+     */
     name: IllustrationNames;
+    /**
+     * The illustration's alt text for accessibility.
+     */
     alt: string;
+    /**
+     * The width of the illustration in pixels.
+     */
     width?: number;
+    /**
+     * The height of the illustration in pixels.
+     */
     height?: number;
 }
 export declare const illustrationNames: {

package/dist/shared/types/components/image.d.ts

@@ -7,23 +7,28 @@ import { ReactionsHandler } from '../reactions.ts';
  */
 export interface ImageProps extends OverlayComponentProps, BaseComponentProps {
     /**
-     * The alt text for the image.
+     * The alt text for the image, similar to the `alt` attribute for the HTML img tag.
      *
      */
     alt?: string;
     /**
-     * If provided, will be used as the href that will be opened in a new browser tab on click.
+     * When provided, sets the URL that will open when the image is clicked. Contains the following fields:
+     * - `url` (string): the URL that will open on click.
+     * - `external` (boolean): set to `true` to open the URL in a new tab. By default:
+     *   - Links to HubSpot app pages will open in the same tab.
+     *   - Links to non-HubSpot app pages will open in a new tab.
      *
+     * When an image includes both `href` and an `onClick` action, both will be executed on button click.
      */
     href?: HrefProp;
     /**
-     * A function that will be called when the image is clicked.
+     * A function that will be called when the image is clicked. This function will receive no arguments and any returned values will be ignored.
      *
      * @event
      */
     onClick?: ReactionsHandler<ExtensionEvent>;
     /**
-     * The URL of the image to display.
+     * The source of the image display. You can specify a URL or you can import the image directly if it's within your project.
      *
      */
     src: string;

package/dist/shared/types/components/inputs.d.ts

@@ -5,11 +5,11 @@ import { BaseComponentProps } from '../shared.ts';
  * */
 interface BaseInputProps<T = string, V = string> extends BaseComponentProps {
     /**
-     * The label text to display for the form input element.
+     * The text that displays above the input. Required if `inputType` is not set to `hidden`.
      */
     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).
+     * The input's unique identifier, similar to the HTML input element name attribute.
      */
     name: string;
     /**
@@ -17,31 +17,31 @@ interface BaseInputProps<T = string, V = string> extends BaseComponentProps {
      */
     value?: T;
     /**
-     * Determines if the required indicator should be displayed.
+     * When set to `true`, displays a required field indicator.
      *
      * @defaultValue `false`
      */
     required?: boolean;
     /**
-     * Determines if the field is editable or not.
+     * When set to `true`, users will not be able to enter a value into the field.
      *
      * @defaultValue `false`
      */
     readOnly?: boolean;
     /**
-     * Instructional message to display to the user to help understand the purpose of the input.
+     * Displayed text that describes the field's purpose.
      */
     description?: string;
     /**
-     * Text that will appear in a tooltip next to the input label.
+     * The text that displays in a tooltip next to the input label.
      */
     tooltip?: string;
     /**
-     * Text that appears in the input when it has no value set.
+     * The text that appears in the input before a value is 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.
+     * When set to `true`, `validationMessage` is displayed as an error message if provided. The input will also render in an error state so that users are aware. If left `false`, `validationMessage` is displayed as a success message.
      *
      * @defaultValue `false`
      */
@@ -51,29 +51,29 @@ interface BaseInputProps<T = string, V = string> extends BaseComponentProps {
      */
     defaultValue?: T;
     /**
-     * The text to show under the input for error or success validations.
+     * The text to show if the input has an error.
      */
     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.
+     * A callback function that is invoked when the value is committed. Currently, these 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.
+     * A function that is called and passes the value when the field is edited by the user. Should be used for validation. It's recommended that you don't use this value to update state (use `onChange` instead).
      *
      * @event
      */
     onInput?: (value: V) => void;
     /**
-     * A function that is called and passed the value every time the field loses focus.
+     * A function that is called and passes the value when the field loses focus.
      *
      * @event
      */
     onBlur?: (value: V) => void;
     /**
-     * A function that is called and passed the value every time the field gets focused.
+     * A function that is called and passed the value when the field gets focused.
      *
      * @event
      */
@@ -86,7 +86,7 @@ interface BaseInputProps<T = string, V = string> extends BaseComponentProps {
  */
 export interface InputProps extends BaseInputProps {
     /**
-     * Sets the type of input to render.
+     * The type of input. An input with the `'password'` type will hide the characters that the user types.
      *
      * @defaultValue `"text"`
      */
@@ -103,7 +103,7 @@ export interface TextAreaProps extends BaseInputProps {
      */
     cols?: number;
     /**
-     * The maximum number of characters (UTF-16 code units) that the user can enter. If not specified, the max length is unlimited.
+     * The maximum number of characters (UTF-16 code units) that the user can enter. If not specified, maximum length is unlimited.
      */
     maxLength?: number;
     /**
@@ -111,7 +111,7 @@ export interface TextAreaProps extends BaseInputProps {
      */
     rows?: number;
     /**
-     * Sets whether the element is resizable, and if so in which directions.
+     * Sets whether the text field is resizable, and if so, in which directions.
      *
      * @defaultValue `"both"`
      */
@@ -137,21 +137,18 @@ type BaseInputForNumber = Omit<BaseInputProps<number, number>, 'onInput'>;
 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).
+     * Formats the input as a decimal or percentage.
      *
      * @defaultValue `"decimal"`
      */
@@ -171,16 +168,15 @@ export interface CurrencyInputProps extends BaseInputForNumber {
      */
     currency?: string;
     /**
-     * Sets the number of decimal places for the currency
-     * If not provided, defaults to currency-specific precision
+     * 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
+     * Sets the lower bound of the input (handled by underlying component).
      */
     min?: number;
     /**
-     * Sets the upper bound of the input
+     * Sets the upper bound of the input (handled by underlying component).
      */
     max?: number;
 }
@@ -190,20 +186,18 @@ export interface CurrencyInputProps extends BaseInputForNumber {
  * @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.
+    /** The amount that the current value will increase or decrease by. Default is `1`.
      * @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.
+     * Text that will appear in a tooltip when the user has reached the minimum value.
      */
-    maxValueReachedTooltip?: string;
+    minValueReachedTooltip?: string;
     /**
-     * Text that will appear in a tooltip next to the step down button when users
-     * can't decrease the current value.
+     * Text that will appear in a tooltip when the user has reached the maximum value.
      */
-    minValueReachedTooltip?: string;
+    maxValueReachedTooltip?: string;
 }
 /** Object that represents dates. */
 export interface BaseDate {
@@ -231,60 +225,53 @@ type BaseDateInputForDate = Omit<BaseInputProps<BaseDate | null, DateInputEvents
  */
 export interface DateInputProps extends BaseDateInputForDate {
     /**
-     * Sets the earliest date that will be valid.
+     * Sets the earliest valid date available using the following format: `{ year: number; month: number; date: number }`
      */
     min?: BaseDate;
     /**
-     * Sets the latest date that will be valid.
+     * Sets the latest valid date available using the following format: `{ year: number; month: number; date: number }`
      */
     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`
+     * The date format.
      *
-     * #### Format Options
+     * - `short`: 09/04/1986
+     * - `long`: September 4, 1986
+     * - `medium`: Sep 4, 1986
+     * - `standard`: 1986-09-04
+     * - `YYYY-MM-DD`: 1986-09-04
+     * - `L`: 09/04/1986
+     * - `LL`: September 4, 1986
+     * - `ll`: Sep 4, 1986
      *
-     * - 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`
+     * @defaultValue `'short'`
      */
     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"`
+     * Sets the label of the button that clears the date.
      */
-    timezone?: 'userTz' | 'portalTz';
+    clearButtonLabel?: string;
     /**
-     * Sets the label of the clear button.
-     *
-     * @defaultValue `"Clear"`
+     * Sets the label of the button that inserts today's date.
      */
-    clearButtonLabel?: string;
+    todayButtonLabel?: string;
     /**
-     * Sets the label of the today button.
+     * Sets the timezone that the component will user to calculate valid dates.
+     *
+     * - `userTz` (default): the user's time zone.
+     * - `portalTz`: the portal's default time zone.
      *
-     * @defaultValue `"Today"`
+     * @defaultValue `'userTz'`
      */
-    todayButtonLabel?: string;
+    timezone?: 'userTz' | 'portalTz';
 }
 /**
  * Object that represents times.
@@ -320,11 +307,11 @@ export interface TimeInputProps extends BaseTimeInputForTime {
      */
     onChange?: (value: TimeInputEventsPayload) => void;
     /**
-     * Sets the earliest time that will be valid.
+     * Sets the earliest valid time available.
      */
     min?: BaseTime;
     /**
-     * Sets the latest time that will be valid.
+     * Sets the latest valid time available.
      */
     max?: BaseTime;
     /**
@@ -334,7 +321,7 @@ export interface TimeInputProps extends BaseTimeInputForTime {
      */
     interval?: number;
     /**
-     * Sets the timezone that the component will display alongside times in the TimeInput. This will not modify the available valid inputs.
+     * Sets the timezone that the component will use to calculate valid times.
      *
      */
     timezone?: 'userTz' | 'portalTz';
@@ -345,7 +332,7 @@ export interface TimeInputProps extends BaseTimeInputForTime {
  * @category Component Props
  */
 export interface SearchInputProps extends BaseInputProps {
-    /** Shows a clear button to clear the input. Default is true. */
+    /** When set to `true`, shows a clear button to clear the input. Default is `true`. */
     clearable?: boolean;
 }
 export {};