@hubspot/ui-extensions 0.11.5 → 0.11.6

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

@@ -51,7 +51,7 @@ export interface FlexProps extends BaseComponentProps {
      */
     children?: ReactNode;
     /**
-     * Arranges components `horizontally` or `vertically` by setting the main axis.
+     * Arranges the components horizontally or vertically by setting the main axis.
      *
      * @defaultValue `"row"`
      */
@@ -69,12 +69,11 @@ export interface FlexProps extends BaseComponentProps {
      */
     align?: FlexAlign;
     /**
-     * Overrides Flex's `alignItem` value for this element.
-     *
+     * Distributes a child component along the cross-axis using the available free space. Use this prop for nested `Flex` and `Box` components to align them differently from other child components in the `Flex` group.
      */
     alignSelf?: FlexAlign;
     /**
-     * Whether components will wrap instead of trying to fit on one line.
+     * Whether components will wrap rather than trying to fit on one line.
      *
      * @defaultValue `"nowrap"`
      */
@@ -92,21 +91,19 @@ export interface BoxProps extends BaseComponentProps {
      */
     children: ReactNode;
     /**
-     * Overrides Flex's `alignItem` value for this element.
+     * Distributes a child component along the cross-axis using the available free space. Use this prop for nested `Box` components to align them differently from other child components in the `Flex` group.
      *
      * @defaultValue `"auto"`
      */
     alignSelf?: 'start' | 'center' | 'baseline' | 'end' | 'stretch' | 'auto';
     /**
-     * Sets how the item will grow or shrink when it's a direct ancestor of the Flex component.
-     * ##### Options in detail
-     *
-     *- `initial`: The item is sized according to its width and height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container.
-     *- `auto`: The item is sized according to its width and height properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container.
-     *- `none`: The item is sized according to its width and height properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container.
-     *- `number`:  Tells a component to fill all available space, shared evenly amongst other components with the same parent. The larger the flex given, the higher the ratio of space a component will take compared to its siblings.
+     * Distributes components based on the available empty space around them. Options are as follows:
+     * - `initial`: The item is sized according to its width and height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container.
+     * - `auto`: The item is sized according to its width and height properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container.
+     * - `none`: The item is sized according to its width and height properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container.
+     * - Number: tells a component to fill all available space, shared evenly amongst other components with the same parent. The larger the flex given, the higher the ratio of space a component will take compared to its siblings.
      *
-     * @defaultValue `"initial"`
+     * @defaultValue `"auto"`
      */
     flex?: 'initial' | 'auto' | 'none' | number;
 }
@@ -118,21 +115,22 @@ export interface BoxProps extends BaseComponentProps {
 export interface InlineProps extends BaseComponentProps {
     /**
      * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
-     *
      */
     children?: ReactNode;
     /**
      * Distributes components along the main axis using the available free space.
+     *
      * @defaultValue `"start"`
      */
     justify?: FlexJustify;
     /**
      * Distributes components along the cross-axis using the available free space.
-     * @defaultValue `"center"`
+     *
+     * @defaultValue `"stretch"`
      */
     align?: FlexAlign;
     /**
-     * Sets the spacing between components.
+     * The amount of spacing between components.
      *
      * @defaultValue `"flush"`
      */
@@ -145,26 +143,21 @@ export interface InlineProps extends BaseComponentProps {
  */
 export interface AutoGridProps extends BaseComponentProps {
     /**
-     * Sets the width of each column in the grid.
-     * When `flexible` is true, columns will be at least this width (or collapse to container width if smaller), then expand equally to fill available space.
-     * When `flexible` is false, columns are exactly this width.
+     * Sets width of each column in pixels. When `flexible` is `true`, acts as minimum width before expanding.
      */
     columnWidth: number;
     /**
-     * Sets the spacing between grid items.
+     * Sets spacing between grid items.
      *
      * @defaultValue `"flush"`
      */
     gap?: AllDistances;
     /**
      * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
-     *
      */
     children?: ReactNode;
     /**
-     * Whether columns should expand to fill available space.
-     * When true, columns will be at least `columnWidth` but grow equally to fill the container.
-     * When false, columns are exactly `columnWidth`.
+     * When `false`, columns have exact `columnWidth`. When `true`, columns expand equally to fill available space with `columnWidth` as the minimum.
      *
      * @defaultValue `false`
      */

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

@@ -13,24 +13,27 @@ export interface LinkProps extends OverlayComponentProps, BaseComponentProps {
      */
     children: ReactNode;
     /**
-     * The URL that will be opened on click. Links to pages in the HubSpot account will open in the same tab, while non-HubSpot links will open in a new tab.
-     *
+     * Sets the link's URL and open behavior. 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.
      */
     href: HrefProp;
     /**
-     * The color variation of the link.
+     * The color of the link.
      *
      * @defaultValue `"primary"`
      */
     variant?: 'primary' | 'destructive' | 'light' | 'dark';
     /**
-     * A function that will be invoked with the link is clicked.
+     * A function that is invoked when the link is clicked. The function receives no arguments and its return value is ignored.
      *
      * @event
      */
     onClick?: ReactionsHandler<ExtensionEvent>;
     /**
-     * When set to true, `event.preventDefault()` will be invoked before the `onClick` function is called, preventing automatic navigation to the href URL.
+     * When set to `true`, `event.preventDefault()` will be invoked before the `onClick` function is called, preventing automatic navigation to the href URL.
      *
      * @defaultValue `false`
      */

package/dist/shared/types/components/loading-spinner.d.ts

@@ -6,12 +6,12 @@ import { TShirtSizes, BaseComponentProps } from '../shared.ts';
  */
 export interface LoadingSpinnerProps extends BaseComponentProps {
     /**
-     * The text that displays next to the spinner. Note: the label is not shown by default, you must set `showLabel` to `true` to display the label.
+     * The text that displays next to the spinner.
      *
      */
     label: string;
     /**
-     * When set to `true`, the label will appear next to the spinner.
+     * When set to `true`, the `label` will appear next to the spinner.
      *
      * @defaultValue `false`
      */
@@ -23,7 +23,7 @@ export interface LoadingSpinnerProps extends BaseComponentProps {
      */
     size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
     /**
-     * The position of the spinner. Can be one of `inline` or `centered`.
+     * The position of the spinner.
      *
      * @defaultValue `"inline"`
      */

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

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { TShirtSizes, BaseComponentProps } from '../shared.ts';
 export interface ModalProps extends BaseComponentProps {
     /**
-     * Accessibility label.
+     * The modal's accessibility label.
      *
      */
     'aria-label'?: string;
@@ -12,7 +12,7 @@ export interface ModalProps extends BaseComponentProps {
      */
     children?: ReactNode;
     /**
-     * A unique ID for the modal
+     * The unique identifier for the modal.
      *
      */
     id: string;
@@ -27,18 +27,18 @@ export interface ModalProps extends BaseComponentProps {
      */
     onClose?: () => void;
     /**
-     * The width of the modal
+     * The width of the modal.
      *
      * @defaultValue `"sm"`
      */
     width?: TShirtSizes['sm'] | TShirtSizes['md'] | TShirtSizes['lg'];
     /**
-     * The title of the modal
+     * The title of the modal, displayed at in the modal's top bar.
      *
      */
     title?: string;
     /**
-     * The variant of the modal
+     * The type of modal. See the [variants section](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/modal#variants) for more information.
      *
      * @defaultValue `"default"`
      */

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

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { TShirtSizes, BaseComponentProps } from '../shared.ts';
 export interface PanelProps extends BaseComponentProps {
     /**
-     * Accessibility label.
+     * The panel's accessibility label.
      *
      */
     'aria-label'?: string;
@@ -12,7 +12,7 @@ export interface PanelProps extends BaseComponentProps {
      */
     children?: ReactNode;
     /**
-     * A unique ID for the panel
+     * A unique ID for the panel.
      *
      */
     id: string;
@@ -27,18 +27,18 @@ export interface PanelProps extends BaseComponentProps {
      */
     onClose?: () => void;
     /**
-     * The width of the panel
+     * The width of the panel.
      *
      * @defaultValue `"sm"`
      */
     width?: TShirtSizes['sm'] | TShirtSizes['md'] | TShirtSizes['lg'];
     /**
-     * The title of the panel
+     * The text that displays at the top of the panel.
      *
      */
     title?: string;
     /**
-     * The variant of the panel
+     * The panel variant. The `modal` variant includes better screen reader focus on the panel and is recommended for visual and motor accessibility and tab navigation. See [variants](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/standard-components/panel#variants) for more information.
      *
      * @defaultValue `"default"`
      */
@@ -46,13 +46,13 @@ export interface PanelProps extends BaseComponentProps {
 }
 export interface PanelSectionProps extends BaseComponentProps {
     /**
-     * When set to `true`, the section will have no bottom margin
+     * When set to `true`, the section will have no bottom margin.
      *
      * @defaultValue `false`
      */
     flush?: boolean;
     /**
-     * The main content of the section
+     * The main content of the section.
      *
      */
     children: ReactNode;

package/dist/shared/types/components/progress-bar.d.ts

@@ -11,12 +11,12 @@ export interface ProgressBarProps extends BaseComponentProps {
      */
     title?: string;
     /**
-     * Accessibility label.
+     * The accessibility label.
      *
      */
     'aria-label'?: string;
     /**
-     * Whether the progress bar displays the completion percentage.
+     * When set to `true`, the progress bar will display the completion percentage.
      *
      * @defaultValue `false`
      */
@@ -34,12 +34,12 @@ export interface ProgressBarProps extends BaseComponentProps {
      */
     maxValue?: number;
     /**
-     * The text that explains the current state of the value property. For example, "150 out of 250". Displays above the progress bar on the right side.
+     * The text that explains the current state of the `value` property. For example, `"150 out of 250"`.
      *
      */
     valueDescription?: string;
     /**
-     * The color that indicates the type of progress bar.
+     * The color to indicate progress sentiment.
      *
      * @defaultValue `"success"`
      */

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

@@ -5,13 +5,11 @@ import { BaseComponentProps } from '../shared.ts';
  * */
 export interface BaseSelectProps extends BaseComponentProps {
     /**
-     * The text that displays above to the dropdown menu.
-     *
+     * The text that displays above the input.
      */
     label?: string;
     /**
-     * The unique identifier for the select element.
-     *
+     * The input's unique identifier.
      */
     name?: string;
     /**
@@ -21,19 +19,17 @@ export interface BaseSelectProps extends BaseComponentProps {
      */
     required?: boolean;
     /**
-     * When set to `true`, sets the field as read-only on the CRM record, and users will not be able to fill the input field.
+     * When set to `true`, users will not be able to fill the input field.
      *
      * @defaultValue `false`
      */
     readOnly?: boolean;
     /**
-     * Displayed text that describes the field's purpose.
-     *
+     * Text that describes the field's purpose.
      */
     description?: string;
     /**
      * The text that displays in a tooltip next to the label.
-     *
      */
     tooltip?: string;
     /**
@@ -50,12 +46,11 @@ export interface BaseSelectProps extends BaseComponentProps {
      */
     error?: boolean;
     /**
-     * The text to show if the input has an error.
-     *
+     * The text to display if the input has an error.
      */
     validationMessage?: string;
     /**
-     * The variant type for the select.
+     * The visual style of the button
      *
      * @defaultValue `"input"`
      */
@@ -68,8 +63,7 @@ export interface BaseSelectProps extends BaseComponentProps {
  */
 export interface SelectProps extends BaseSelectProps {
     /**
-     * The value of the select input.
-     *
+     * The value of the input.
      */
     value?: string | number | boolean;
     /**
@@ -79,21 +73,19 @@ export interface SelectProps extends BaseSelectProps {
      */
     onChange?: (value: NonNullable<SelectProps['value']>) => void;
     /**
-     * The variant type for the select.
+     * The visual style of the button
      *
      * @defaultValue `"input"`
      */
     variant?: 'transparent' | 'input';
     /**
-     * A function that is called and passed the value every time the search field is
-     * edited by the user. Prefer updating state in onChange as it fires less
-     * frequently, and if you need to update state here, consider debouncing your function.
+     * A callback function that is called and passed the value every time the search field is edited by the user. Prefer updating state in `onChange` as it fires less frequently, and if you need to update state here, consider debouncing your function.
      *
      * @event
      */
     onInput?: (value: string) => void;
     /**
-     * The options to display in the dropdown menu.
+     * The options to display in the dropdown menu. `label` will be used as the display text, and `value` should be the option's unique identifier, which is submitted with the form.
      */
     options: {
         /** Will be used as the display text. **/
@@ -109,8 +101,7 @@ export interface SelectProps extends BaseSelectProps {
  */
 export interface MultiSelectProps extends BaseSelectProps {
     /**
-     * The value of the select input.
-     *
+     * The value of the input.
      */
     value?: (string | number | boolean)[];
     /**

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

@@ -28,11 +28,11 @@ export interface StatisticsTrendProps extends BaseComponentProps {
  */
 export interface StatisticsItemProps extends BaseComponentProps {
     /**
-     * The unique identifier.
+     * The statistic item's unique identifier.
      */
     id?: string;
     /**
-     * The item's label text.
+     * The item's label.
      */
     label: string;
     /**

package/dist/shared/types/components/status-tag.d.ts

@@ -7,15 +7,15 @@ import { BaseComponentProps } from '../shared.ts';
  */
 export interface StatusTagProps extends BaseComponentProps {
     /**
-     * The status tag's indicator color.
+     * The color of the dot indicator.
      *
      * @defaultValue `"default"`
      */
     variant?: 'danger' | 'warning' | 'info' | 'success' | 'default';
     /**
-     * When set to true, the status tag's dot will be a ring instead.
+     * When set to `true`, the status tag's dot will be a ring instead of a filled-in circle.
      *
-     * @defaultValue `false `
+     * @defaultValue `false`
      */
     hollow?: boolean;
     /**
@@ -25,13 +25,13 @@ export interface StatusTagProps extends BaseComponentProps {
      */
     onClick?: () => void;
     /**
-     * When set to true, the status tag will show a small clickable 'x' icon.
+     * When set to `true`, the status tag will include a small, clickable x icon to remove it.
      *
      * @defaultValue `false`
      */
     showRemoveIcon?: boolean;
     /**
-     * A function that will be invoked when the 'x' icon is clicked. It receives no arguments and its return value is ignored.
+     * A function that will be invoked when the remove icon is clicked.
      *
      * @event
      */

package/dist/shared/types/components/step-indicator.d.ts

@@ -22,21 +22,19 @@ export interface StepIndicatorProps extends BaseComponentProps {
      */
     circleSize?: AllSizes;
     /**
-     * The currently active step. Steps are 0-based.
+     * The currently active step. Steps are zero-based, meaning the first step is assigned `0`.
      */
     currentStep?: number;
     /**
-     * The visual style of the component.
-     *
-     * - default: default spacing.
-     * - compact: only shows the title of the currently active step.
-     * - flush: only shows the title of the currently active step and removes left and right margins.
+     * Sets component spacing.
+     * - `compact`: only shows the title of the currently active step.
+     * - `flush`: only shows the title of the currently active step and removes left and right margin.
      *
      * @defaultValue `"default"`
      */
     variant?: 'default' | 'compact' | 'flush';
     /**
-     * A function that will be invoked when a step in the indicator is clicked. The function receives the current step index as an argument (zero-based). Use this to update the currently active step.
+     * A function that is invoked when a step in the indicator is clicked. The function receives the current step index as an argument (zero-based). Use this to update the currently active step.
      *
      * @event
      */

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

@@ -1,9 +1,18 @@
 import { ReactNode } from 'react';
 import { BaseComponentProps } from '../shared.ts';
 export interface AlignmentProps {
+    /**
+     * Sets the alignment of the table element.
+     */
     align?: 'left' | 'center' | 'right';
 }
 export interface WidthProps {
+    /**
+     * Sets the width of the table element.
+     * - `min`: the content will only be as wide as required, overflowing if the content is wider than the table. A horizontal scrollbar will appear when there is overflow.
+     * - `max`: the content will expand to occupy the maximum available width without overflowing.
+     * - `auto`: the content will adjust its width based on the available space without overflowing.
+     */
     width?: 'min' | 'max' | 'auto' | number;
 }
 export interface TableElementProps extends BaseComponentProps {
@@ -17,6 +26,9 @@ export interface TableElementProps extends BaseComponentProps {
  */
 export type BaseTableHeaderProps = TableElementProps & AlignmentProps & WidthProps & BaseComponentProps;
 export type TableCellProps = TableElementProps & AlignmentProps & WidthProps & {
+    /**
+     * Sets the number of columns a cell should span.
+     */
     colSpan?: number;
 } & BaseComponentProps;
 /**
@@ -34,21 +46,19 @@ export interface UnSortedTableHeaderProps extends BaseTableHeaderProps {
  */
 export interface SortedTableHeaderProps extends BaseTableHeaderProps {
     /**
-     * Sets the current direction in which the column is sorted (if any). It's a visual indicator, it doesn't modify the data.
+     * Visually indicates with an arrow which way the rows are sorted.
      *
      * @defaultValue `"none"`
      */
     sortDirection: 'ascending' | 'descending' | 'none';
     /**
-     * A callback function that is invoked when the header is clicked. It recieves the new `sortDirection` as an argument.
-     * It's required when sort = `ascending`, `descending` or `none`.
+     * A function that will be invoked when the header is clicked. It receives a `sortDirection` as an argument (cannot be none or a null value).
      *
      * @event
-     * @defaultValue `"none"`
      */
     onSortChange: (value: NonNullable<SortedTableHeaderProps['sortDirection']>) => void;
     /**
-     * If `true`, users cannot change the sort ordering. It has no effect if sort=`never` or `undefined`.
+     * When set to `true`, users cannot change the sort ordering. It has no effect if `sortDirection` is set to `never` or undefined.
      *
      *  @defaultValue `false`
      */
@@ -62,13 +72,13 @@ export interface SortedTableHeaderProps extends BaseTableHeaderProps {
 export type TableHeaderProps = SortedTableHeaderProps | UnSortedTableHeaderProps;
 interface BaseTableProps extends BaseComponentProps {
     /**
-     * When set to false, the table will not have borders.
+     * When set to `false`, the table will not include borders.
      *
      * @defaultValue `true`
      */
     bordered?: boolean;
     /**
-     * When set to `true`, the table will not have bottom margin.
+     * When set to `true`, the table will not include bottom margin.
      *
      * @defaultValue `false`
      */
@@ -104,27 +114,27 @@ export interface TablePaginatedProps extends BaseTableProps {
      */
     pageCount: number;
     /**
-     * When set to `false`, hides the text labels for the First/Prev/Next buttons. The button labels will still be accessible to screen readers.
+     * When set to `false`, hides the text labels for First/Prev/Next buttons. The button labels will still be accessible to screen readers.
      *
      * @defaultValue `true`
      */
     showButtonLabels?: boolean;
     /**
-     * When set to `true`, displays the **First/Last** page buttons.
+     * When set to `true`, displays the First/Last page buttons.
      *
      * @defaultValue `false`
      */
     showFirstLastButtons?: boolean;
     /**
-     * Sets how many page buttons are displayed.
+     * The maximum number of page buttons to display.
      */
     maxVisiblePageButtons?: number;
     /**
-     * Denotes the current page.
+     * Denotes the current page number.
      */
     page?: number;
     /**
-     * A function that will be invoked when the pagination button is clicked. It receives the new page number as argument.
+     * A function that is invoked when the page pagination button is clicked. It receives the new page number as an argument.
      *
      * @event
      */

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

@@ -6,38 +6,38 @@ export interface TabsProps extends BaseComponentProps {
      */
     children?: ReactNode;
     /**
-     * Callback when the selected tab changes.
+     * A function that gets invoked when the selected tab changes.
      */
     onSelectedChange?: ((selectedId: string) => void) | ((selectedId: number) => void) | ((selectedId: number | string) => void);
     /**
-     * The initially selected tab ID.
+     * The ID of the tab to display by default (as set by the `Tab`'s `tabId` prop).
      */
     defaultSelected?: string | number;
     /**
-     * The currently selected tab ID (controlled component).
+     * The currently selected tab ID, for controlling the component via React state.
      */
     selected?: string | number;
     /**
-     * Visual style variant of the tabs.
+     * Visual style of the tabs.
      * @defaultValue 'default'
      */
     variant?: 'default' | 'enclosed';
     /**
-     * Whether the tab should fill available space.
+     * Whether the tabs should fill the available space.
      */
     fill?: boolean;
 }
 export interface TabProps extends BaseComponentProps {
     /**
-     * Whether the tab is disabled.
+     * Whether the tab should be disabled. When set to `false`, tab will be greyed out and not clickable.
      */
     disabled?: boolean;
     /**
-     * Unique identifier for the tab.
+     * The tab's unique identifier.
      */
     tabId?: string | number;
     /**
-     * The title text of the tab.
+     * The tab's title text.
      */
     title?: string;
     /**
@@ -45,11 +45,11 @@ export interface TabProps extends BaseComponentProps {
      */
     children?: ReactNode;
     /**
-     * The tooltip text of the tab.
+     * The text that appears in a tooltip on hover.
      */
     tooltip?: string;
     /**
-     * The tab's tooltip placement
+     * Where the tooltip should appear, relative to the tab.
      * @defaultValue 'top'
      */
     tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';

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

@@ -12,13 +12,13 @@ export interface TagProps extends OverlayComponentProps, BaseComponentProps {
      */
     children: ReactNode;
     /**
-     * The tag's color. The following variants are available.
+     * The color of the alert.
      *
      * @defaultValue `"default"`
      */
     variant?: 'default' | 'warning' | 'success' | 'error' | 'info';
     /**
-     * A function that will be invoked when the tag is clicked.
+     * A function that will be invoked when the tag is clicked. The function receives no arguments and its return value is ignored.
      *
      * @event
      */