@hubspot/ui-extensions 0.11.4 → 0.11.6

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
      */

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

@@ -48,16 +48,13 @@ export interface TruncateOptions {
  */
 export type TextProps = {
     /**
-     * The style of text to display. Can be either of:
-     *
-     * - bodytext: the default value which renders the standard text size.
-     * - microcopy: smaller text used for adding context.
+     * The style of text to display.
      *
      * @defaultValue `"bodytext"`
      */
     variant?: 'bodytext' | 'microcopy';
     /**
-     * When set to `true`, inserts a line break.
+     * When set to `true`, will insert text without breaking the line.
      *
      * @defaultValue `false`
      */
@@ -67,26 +64,23 @@ export type TextProps = {
      */
     children: ReactNode;
     /**
-     * @interface
-     * The style of text to display. Can be any of:
-     *
-     * - { fontWeight: 'bold' }
-     * - { fontWeight: 'demibold' }
-     * - { italic: true }
-     * - { lineDecoration: 'strikethrough' }
-     * - { lineDecoration: 'underline' }
-     * - <Text inline={true}>
+     * Text formatting options, which include:
+     * - `{ fontWeight: 'bold' }`
+     * - `{ fontWeight: 'demibold' }`
+     * - `{ italic: true }`
+     * - `{ lineDecoration: 'strikethrough' }`
+     * - `{ lineDecoration: 'underline' }`
+     * - `{ textTransform: '...' }` - Controls text capitalization
      */
     format?: TextFormatOptions;
     /**
-     * @interface
-     * truncates long strings to a single line. If the full string doesn't fit in one line,
-     * it's shown in a tooltip on hover.
+     * Truncates long strings to a single line. If the full string doesn't fit on one line, the excess text will display in a tooltip on hover.
+     * - `false` (default): text is not truncated.
+     * - `true`: truncates text to a single line. Full text will display in a tooltip on hover.
      *
-     * - `false` => no truncation(default).
-     * - `true` => truncates the string to a single line. Full-text will show inside the tooltip.
-     * - { tooltipText: 'some text' } => truncates the string and lets you control the contents of the tooltip.
-     * - { maxWidth: 150 } => sets the width(in pixel) of the line.
+     * Alternatively, set this prop to one of the following objects to specify truncate options:
+     * - `{tooltipText: 'string'}`: truncates the string and sets the contents of the tooltip.
+     * - `{maxWidth: number}`: sets the width of the line in pixels.
      *
      * @defaultValue `false`
      */

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

@@ -11,13 +11,13 @@ export interface TileProps extends BaseComponentProps {
      */
     children: ReactNode;
     /**
-     * When set to `true`, reduces the default amount of padding around the contents of the Tile.
+     * When set to `true`, reduces the amount of padding in the tile.
      *
      * @defaultValue `false`
      */
     compact?: boolean;
     /**
-     * When set to `true`, removes left and right padding from tile contents.
+     * When set to `true`, removes left and right padding from the tile contents.
      *
      * @defaultValue `false`
      */

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

@@ -6,55 +6,53 @@ import { TShirtSizes, BaseComponentProps } from '../shared.ts';
  */
 export interface ToggleProps extends BaseComponentProps {
     /**
-     * The current status of the input.
+     * Whether the toggle is selected.
      */
     checked?: boolean;
     /**
-     * When set to `true`, the option cannot be selected.
+     * When set to `true`, users will not be able to select the toggle.
      */
     readonly?: boolean;
     /**
-     * The unique identifier for the toggle element.
+     * The input's unique identifier.
      */
     name?: string;
     /**
-     * The size variation of the toggle.
+     * The size of the toggle. Only `'md'` sized toggles can display text on the toggle (ON, OFF). All other sizes will hide checked/unchecked text.
      *
-     * @defaultValue `"medium"`
+     * @defaultValue `"md"`
      */
     size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'] | 'default';
     /**
-     * A function that is called when the `checked` input status changes.
+     * A function that is invoked when the toggle is clicked.
      *
      * @event
      */
     onChange?: (checked: boolean) => void;
     /**
-     * When set to `true`, the option will be selected by default. Use it to
-     * set the default `checked` state when the component is **uncontrolled**.
+     * When set to `true`, the toggle will be selected by default. Sets the default `checked` state when the component is uncontrolled.
      */
     initialIsChecked?: boolean;
     /**
-     * The companion text of for Toggle. It can be displayed on top,
-     * inline, or hidden. When hidden, it will remain usable for screen readers.
+     * The text that displays above the input.
      */
     label: string;
     /**
-     * Controls the display setting of the label prop.
+     * The display option for the toggle label.
      *
      * @defaultValue `"inline"`
      */
     labelDisplay?: 'inline' | 'top' | 'hidden';
     /**
-     * The text that appears on the Toggle when `checked={true}`.
+     * The text that displays on the toggle when checked. Extra small and small toggles will not display any text.
      *
      * @defaultValue `"ON"`
      */
     textChecked?: string;
     /**
-     * The text that appears on the Toggle when `checked={false}`.
+     * The text that displays on the toggle when not checked. Extra small and small toggles will not display any text.
      *
-     * @defaultValue `"ON"`
+     * @defaultValue `"OFF"`
      */
     textUnchecked?: string;
 }

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

@@ -6,53 +6,57 @@ import { BaseComponentProps } from '../shared.ts';
  */
 export interface CheckboxProps extends BaseComponentProps {
     /**
-     * A string representing the value of the input. This is not displayed on the client-side,
-     * but on the server this is the value given to the data submitted with the checkbox's name.
+     * The checkbox value. This value is not displayed on the card, but is passed on the server side when submitted, along with the checkbox name.
      */
     value?: string;
     /**
-     * The current status of the input.
+     * When set to `true`, the checkbox is selected.
+     *
+     * @defaultValue `false`
      */
     checked?: boolean;
     /** @deprecated use readOnly instead */
     readonly?: boolean;
     /**
-     * When set to `true`, the option cannot be selected.
+     * When set to `true`, the checkbox cannot be selected.
      */
     readOnly?: boolean;
     /**
-     * The string that displays below the toggle.
+     * Text that describes the field's purpose.
      */
     description?: string;
     /**
-     * The unique identifier for the checkbox element.
+     * The checkbox's unique identifier.
      */
     name?: string;
     /**
-     * The size variation of the checkbox.
+     * The size of the checkbox.
      *
      * @defaultValue `"default"`
      */
     variant?: 'default' | 'small';
     /**
-     * A function that is called when the `checked` input status changes.
+     * A callback function that is called when the checkbox is selected or cleared. Passes the new value.
      *
      * @event
      */
     onChange?: (checked: boolean, value: string) => void;
-    /** The text that displays in the dropdown menu. */
+    /** The text that displays next to the checkbox. */
     children?: React.ReactNode;
     /**
-     * Use the inline prop to arrange checkboxes side-by-side.
+     * When set to `true`, arranges checkboxes side by side.
+     *
+     * @defaultValue `false`
      */
     inline?: boolean;
     /**
-     * When set to `true`, the option will be selected by default. Use it to
-     * set the default `checked` state when the component is **uncontrolled**.
+     * When set to `true`, the checkbox is selected by default.
+     *
+     * @defaultValue `false`
      */
     initialIsChecked?: boolean;
     /**
-     * Accessibility label. It should be present when the checkbox has no label(children).
+     * The checkbox's accessibility label.
      */
     'aria-label'?: string;
 }
@@ -91,15 +95,15 @@ export interface RadioButtonListProps extends ToggleGroupListBaseProps {
 type ToggleType = 'checkboxList' | 'radioButtonList';
 export interface CommonGroupProps extends BaseComponentProps {
     /**
-     * Denotes the type of list to render.
+     * The type of toggle, whether checkboxes or radio buttons. Radio buttons only allow one option to be selected.
      */
     toggleType?: ToggleType;
     /**
-     * The unique identifier for the toggle group element.
+     * The input's unique identifier.
      */
     name: string;
     /**
-     * The label that displays above the toggle group.
+     * The text that displays above the toggles.
      */
     label: string;
     /**
@@ -117,13 +121,13 @@ export interface CommonGroupProps extends BaseComponentProps {
      */
     tooltip?: string;
     /**
-     * When set to `true`, `validationMessage` is displayed as an error message if provided. The input will also render its error state to let the user know there is an error. If left 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 its error state to let the user know there is an error. If left `false`, `validationMessage` is displayed as a success message.
      *
      * @defaultValue `false`
      */
     error?: boolean;
     /**
-     * An array of options to display in the dropdown menu.
+     * An array of options to display in the group.
      *
      * @defaultValue `[]`
      */
@@ -135,11 +139,14 @@ export interface CommonGroupProps extends BaseComponentProps {
      */
     inline?: boolean;
     /**
-     * The size variation of the individual options.
+     * The size of the toggle.
      *
      * @defaultValue `"default"`
      */
     variant?: 'default' | 'small';
+    /**
+     * The value of the toggle group.
+     */
     value?: string[] | string;
 }
 type CheckboxGroupProps = {

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

@@ -6,7 +6,7 @@ export interface TooltipProps extends BaseComponentProps {
      */
     children: ReactNode;
     /**
-     * Sets the position of the tooltip relative to its trigger element.
+     * The position where the tooltip will be displayed, relative to the parent UI component.
      * @default 'top'
      */
     placement?: 'top' | 'bottom' | 'left' | 'right';