@hubspot/ui-extensions 0.11.4 → 0.11.6

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

@@ -7,7 +7,7 @@ import { TShirtSizes, BaseComponentProps } from '../shared.ts';
  */
 export interface AccordionProps extends BaseComponentProps {
     /**
-     * The title text for the accordion.
+     * The accordion's title text.
      *
      */
     title: string;
@@ -17,19 +17,19 @@ export interface AccordionProps extends BaseComponentProps {
      */
     children: ReactNode;
     /**
-     * Defines default open behavior on page load. When set to `true`, the accordion will be open by default on initial load.
+     * When set to `true`, the accordion will be open on initial page load. The `open` prop takes precedence over this prop.
      *
      * @defaultValue `false`
      */
     defaultOpen?: boolean;
     /**
-     * When set to `true`, the accordion's open state cannot be changed.
+     * When set to `true`, the accordion's 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`.
+     * Controls the accordion's open state programmatically. When set to `true`, the accordion will open. Takes precedence over `defaultOpen`.
      *
      */
     open?: boolean;
@@ -40,7 +40,7 @@ export interface AccordionProps extends BaseComponentProps {
      */
     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.
+     * A function that will be invoked when the accordion title is clicked. This function receives no arguments and its returned value is ignored.
      *
      * @event
      */

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

@@ -7,7 +7,7 @@ import { BaseComponentProps } from '../shared.ts';
  */
 export interface AlertProps extends BaseComponentProps {
     /**
-     * The bolded title text of the alert.
+     * The bolded text of the alert.
      *
      */
     title: string;
@@ -17,7 +17,7 @@ export interface AlertProps extends BaseComponentProps {
      */
     children?: ReactNode;
     /**
-     * The color of the alert.
+     * The color of the alert. See [variants](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/alert#variants) for more information.
      *
      * @defaultValue `"info"`
      */

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

@@ -11,13 +11,16 @@ export interface ButtonRowProps extends BaseComponentProps {
      */
     children: ReactNode;
     /**
-     * Disables the dropdown list of buttons that appears when the children expand beyond the horizontal space.
+     * By default, when the number of buttons exceeds the available horizontal space, the extra buttons will collapse into a single dropdown menu button. Set this prop to `true` to prevent the dropdown button from being interacted with.
      *
      * @defaultValue `false`
      */
     disableDropdown?: boolean;
     /**
-     * Controls the appearance and text content of the dropdown button.
+     * When the included buttons exceed the available space, use this prop to customize the dropdown button. This prop takes an object containing the following `key: 'value'` pairs:
+     * - `size`: the size of the button. Can be `'xs'`, `'sm'`, or `'md'` (default).
+     * - `text`: the button's text. By default, is set to `More`. If set to an empty value, will display a gear icon.
+     * - `variant`: the button variation. Can be `'primary'`, `'secondary'` (default), or `'transparent'`.
      */
     dropDownButtonOptions?: ButtonRownDropDownButtonOptionsProps;
 }

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;