@hubspot/ui-extensions 0.11.5 → 0.12.0

package/dist/hs-internal/__tests__/createRemoteComponentInternal.spec.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from 'vitest';
+import { createRenderer } from "../../testing/index.js";
+import { createRemoteComponentInternal } from "../index.js";
+import { __hubSpotComponentRegistry } from "../../shared/remoteComponents.js";
+import { Button, Text } from "../../index.js";
+import { InvalidComponentsError } from "../../testing/internal/errors.js";
+import { useState } from 'react';
+// Create custom components once at the top level
+const CustomButton = createRemoteComponentInternal('TestCustomButton');
+const CustomCard = createRemoteComponentInternal('TestCustomCard', {
+    fragmentProps: ['content'],
+});
+describe('createRemoteComponentInternal', () => {
+    it('should create a component that can be rendered', () => {
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsx(CustomButton, { label: "Click me", onClick: () => { }, testId: "my-button" }));
+        const button = find(CustomButton);
+        expect(button.props.label).toBe('Click me');
+        expect(button.props.testId).toBe('my-button');
+    });
+    it('should register component in the registry', () => {
+        expect(__hubSpotComponentRegistry.isAllowedComponentName('TestCustomButton')).toBe(true);
+    });
+    it('should be findable using renderer.find()', () => {
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsx(CustomButton, { label: "Find me", onClick: () => { } }));
+        const button = find(CustomButton);
+        expect(button).toBeDefined();
+        expect(button.props.label).toBe('Find me');
+    });
+    it('should work with find() using prop matchers', () => {
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(CustomButton, { label: "Button 1", onClick: () => { }, variant: "primary" }), _jsx(CustomButton, { label: "Button 2", onClick: () => { }, variant: "secondary" })] }));
+        const primaryButton = find(CustomButton, { variant: 'primary' });
+        expect(primaryButton.props.label).toBe('Button 1');
+        const secondaryButton = find(CustomButton, { variant: 'secondary' });
+        expect(secondaryButton.props.label).toBe('Button 2');
+    });
+    it('should work with findAll()', () => {
+        const { render, findAll } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(CustomButton, { label: "Button 1", onClick: () => { } }), _jsx(CustomButton, { label: "Button 2", onClick: () => { } }), _jsx(CustomButton, { label: "Button 3", onClick: () => { } })] }));
+        const buttons = findAll(CustomButton);
+        expect(buttons).toHaveLength(3);
+        expect(buttons[0].props.label).toBe('Button 1');
+        expect(buttons[1].props.label).toBe('Button 2');
+        expect(buttons[2].props.label).toBe('Button 3');
+    });
+    it('should work with findByTestId()', () => {
+        const { render, findByTestId } = createRenderer('crm.record.tab');
+        render(_jsx(CustomButton, { label: "Find by ID", onClick: () => { }, testId: "my-custom-button" }));
+        const button = findByTestId(CustomButton, 'my-custom-button');
+        expect(button.props.label).toBe('Find by ID');
+    });
+    it('should work with maybeFind()', () => {
+        const { render, maybeFind } = createRenderer('crm.record.tab');
+        render(_jsx(CustomButton, { label: "Maybe", onClick: () => { } }));
+        const button = maybeFind(CustomButton);
+        expect(button).not.toBeNull();
+        expect(button?.props.label).toBe('Maybe');
+        const nonExistent = maybeFind(Button);
+        expect(nonExistent).toBeNull();
+    });
+    it('should support fragment props', () => {
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsx(CustomCard, { title: "My Card", content: _jsx(Text, { children: "Card content" }), testId: "my-card" }));
+        const card = find(CustomCard);
+        expect(card.props.title).toBe('My Card');
+        expect(card.props.testId).toBe('my-card');
+        expect(card.props.content?.find(Text).text).toBe('Card content');
+    });
+    it('should support event triggering via trigger()', () => {
+        const { render, find } = createRenderer('crm.record.tab');
+        let clicked = false;
+        const handleClick = () => {
+            clicked = true;
+        };
+        render(_jsx(CustomButton, { label: "Click me", onClick: handleClick }));
+        const button = find(CustomButton);
+        button.trigger('onClick');
+        expect(clicked).toBe(true);
+    });
+    it('should not throw InvalidComponentsError during rendering', () => {
+        const { render } = createRenderer('crm.record.tab');
+        expect(() => render(_jsx(CustomButton, { label: "Valid", onClick: () => { } }))).not.toThrow(InvalidComponentsError);
+    });
+    it('should work with state updates', () => {
+        const { render, find } = createRenderer('crm.record.tab');
+        function Counter() {
+            const [count, setCount] = useState(0);
+            const handleClick = () => {
+                setCount(count + 1);
+            };
+            return (_jsx(CustomButton, { label: `Count: ${count}`, onClick: handleClick, testId: "counter" }));
+        }
+        render(_jsx(Counter, {}));
+        const button = find(CustomButton);
+        expect(button.props.label).toBe('Count: 0');
+        button.trigger('onClick');
+        const updatedButton = find(CustomButton);
+        expect(updatedButton.props.label).toBe('Count: 1');
+    });
+    it('should work with nested components', () => {
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsx(CustomCard, { title: "Card with button", content: _jsx(CustomButton, { label: "Nested button", onClick: () => { } }) }));
+        const card = find(CustomCard);
+        expect(card.props.title).toBe('Card with button');
+        // Fragment prop children are found globally, not as direct children
+        const nestedButton = find(CustomButton);
+        expect(nestedButton.props.label).toBe('Nested button');
+    });
+    it('should work with findChild() and findAllChildren()', () => {
+        const { render, findAll, find } = createRenderer('crm.record.tab');
+        render(_jsx(CustomCard, { title: "Card with buttons", content: _jsxs(_Fragment, { children: [_jsx(CustomButton, { label: "Button 1", onClick: () => { } }), _jsx(CustomButton, { label: "Button 2", onClick: () => { } })] }) }));
+        const card = find(CustomCard);
+        expect(card.props.title).toBe('Card with buttons');
+        // Fragment prop children are found globally, not as direct children
+        const buttons = findAll(CustomButton);
+        expect(buttons).toHaveLength(2);
+        expect(buttons[0].props.label).toBe('Button 1');
+        expect(buttons[1].props.label).toBe('Button 2');
+    });
+    it('should allow multiple custom components to coexist', () => {
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(CustomButton, { label: "Button", onClick: () => { } }), _jsx(CustomCard, { title: "Card" })] }));
+        const button = find(CustomButton);
+        const card = find(CustomCard);
+        expect(button.props.label).toBe('Button');
+        expect(card.props.title).toBe('Card');
+    });
+    it('should work alongside built-in HubSpot components', () => {
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(CustomButton, { label: "Custom", onClick: () => { } }), _jsx(Button, { variant: "primary", children: "Built-in" })] }));
+        const customButton = find(CustomButton);
+        const builtInButton = find(Button);
+        expect(customButton.props.label).toBe('Custom');
+        expect(builtInButton.props.variant).toBe('primary');
+    });
+});

package/dist/hs-internal/index.d.ts

@@ -0,0 +1,35 @@
+import type { HubSpotReactComponent, HubSpotReactFragmentProp, UnknownComponentProps } from '../shared/types/shared.ts';
+/**
+ * Utility type for filtering out all of the prop names where the value is a ReactNode.
+ * We use this to know which props are allowed to be used as fragment props.
+ */
+type ComponentFragmentPropName<TProps extends UnknownComponentProps> = {
+    [K in keyof TProps]: HubSpotReactFragmentProp extends Required<TProps>[K] ? K : never;
+}[keyof TProps & string];
+/**
+ * Options for creating a custom remote component.
+ */
+export interface CreateRemoteComponentInternalOptions<TProps extends UnknownComponentProps = UnknownComponentProps> {
+    /**
+     * An array of prop names that are allowed to be used as fragment props (props that accept ReactNode children).
+     */
+    fragmentProps?: ComponentFragmentPropName<TProps>[];
+}
+/**
+ * Creates and registers a custom remote component for internal HubSpot use.
+ *
+ * This function is intended for HubSpot internal teams who need to create
+ * custom remote components that work with the UI Extensions testing utilities.
+ *
+ * Components created with this function will:
+ * - Be registered in the global component registry
+ * - Pass validation in testing utilities (isAllowedComponentName)
+ * - Work with renderer.find(), renderer.findAll(), and other testing utilities
+ *
+ * @param componentName - Unique name for the component (e.g., "FlywheelCustomButton").
+ *                        Recommended to prefix with team name to avoid collisions.
+ * @param options - Optional configuration including fragment props
+ * @returns A typed remote React component that can be rendered in a remote environment
+ */
+export declare function createRemoteComponentInternal<TProps extends UnknownComponentProps>(componentName: string, options?: CreateRemoteComponentInternalOptions<TProps>): HubSpotReactComponent<TProps>;
+export {};

package/dist/hs-internal/index.js

@@ -0,0 +1,20 @@
+import { __hubSpotComponentRegistry } from "../shared/remoteComponents.js";
+/**
+ * Creates and registers a custom remote component for internal HubSpot use.
+ *
+ * This function is intended for HubSpot internal teams who need to create
+ * custom remote components that work with the UI Extensions testing utilities.
+ *
+ * Components created with this function will:
+ * - Be registered in the global component registry
+ * - Pass validation in testing utilities (isAllowedComponentName)
+ * - Work with renderer.find(), renderer.findAll(), and other testing utilities
+ *
+ * @param componentName - Unique name for the component (e.g., "FlywheelCustomButton").
+ *                        Recommended to prefix with team name to avoid collisions.
+ * @param options - Optional configuration including fragment props
+ * @returns A typed remote React component that can be rendered in a remote environment
+ */
+export function createRemoteComponentInternal(componentName, options = {}) {
+    return __hubSpotComponentRegistry.createAndRegisterRemoteReactComponent(componentName, options);
+}

package/dist/index.d.ts

@@ -2,6 +2,6 @@ import './clientTypes.ts';
 export { hubspot } from './hubspot.ts';
 export { logger } from './logger.ts';
 export * from './shared/types/index.ts';
-export { Accordion, Alert, AutoGrid, BarChart, Box, Button, ButtonRow, Card, Checkbox, CurrencyInput, DateInput, DescriptionList, DescriptionListItem, Divider, Dropdown, EmptyState, ErrorState, Flex, Form, Heading, Icon, Illustration, Image, Inline, Input, LineChart, Link, List, LoadingButton, LoadingSpinner, Modal, ModalBody, ModalFooter, MultiSelect, NumberInput, Panel, PanelBody, PanelFooter, PanelSection, ProgressBar, RadioButton, SearchInput, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, StatusTag, StepIndicator, StepperInput, Tab, Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Tag, Text, TextArea, Textarea, Tile, TimeInput, Toggle, ToggleGroup, Tooltip, } from './shared/remoteComponents.tsx';
+export { Accordion, Alert, AutoGrid, BarChart, Box, Button, ButtonRow, Card, Checkbox, CurrencyInput, DateInput, DescriptionList, DescriptionListItem, Divider, Dropdown, EmptyState, ErrorState, Flex, Form, Heading, Icon, Illustration, Image, Inline, Input, LineChart, Link, List, LoadingButton, LoadingSpinner, Modal, ModalBody, ModalFooter, MultiSelect, NumberInput, Panel, PanelBody, PanelFooter, PanelSection, ProgressBar, RadioButton, ScoreCircle, SearchInput, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, StatusTag, StepIndicator, StepperInput, Tab, Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Tag, Text, TextArea, Textarea, Tile, TimeInput, Toggle, ToggleGroup, Tooltip, } from './shared/remoteComponents.tsx';
 export { useExtensionContext } from './hooks/useExtensionContext.tsx';
 export { useExtensionActions } from './hooks/useExtensionActions.tsx';

package/dist/index.js

@@ -3,6 +3,6 @@ import "./clientTypes.js";
 export { hubspot } from "./hubspot.js";
 export { logger } from "./logger.js";
 export * from "./shared/types/index.js";
-export { Accordion, Alert, AutoGrid, BarChart, Box, Button, ButtonRow, Card, Checkbox, CurrencyInput, DateInput, DescriptionList, DescriptionListItem, Divider, Dropdown, EmptyState, ErrorState, Flex, Form, Heading, Icon, Illustration, Image, Inline, Input, LineChart, Link, List, LoadingButton, LoadingSpinner, Modal, ModalBody, ModalFooter, MultiSelect, NumberInput, Panel, PanelBody, PanelFooter, PanelSection, ProgressBar, RadioButton, SearchInput, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, StatusTag, StepIndicator, StepperInput, Tab, Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Tag, Text, TextArea, Textarea, Tile, TimeInput, Toggle, ToggleGroup, Tooltip, } from "./shared/remoteComponents.js";
+export { Accordion, Alert, AutoGrid, BarChart, Box, Button, ButtonRow, Card, Checkbox, CurrencyInput, DateInput, DescriptionList, DescriptionListItem, Divider, Dropdown, EmptyState, ErrorState, Flex, Form, Heading, Icon, Illustration, Image, Inline, Input, LineChart, Link, List, LoadingButton, LoadingSpinner, Modal, ModalBody, ModalFooter, MultiSelect, NumberInput, Panel, PanelBody, PanelFooter, PanelSection, ProgressBar, RadioButton, ScoreCircle, SearchInput, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, StatusTag, StepIndicator, StepperInput, Tab, Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Tag, Text, TextArea, Textarea, Tile, TimeInput, Toggle, ToggleGroup, Tooltip, } from "./shared/remoteComponents.js";
 export { useExtensionContext } from "./hooks/useExtensionContext.js";
 export { useExtensionActions } from "./hooks/useExtensionActions.js";

package/dist/shared/remoteComponents.d.ts

@@ -494,6 +494,15 @@ export declare const BarChart: import("./types/shared.ts").HubSpotReactComponent
  * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/charts-example Charts Example}
  */
 export declare const LineChart: import("./types/shared.ts").HubSpotReactComponent<componentTypes.ChartProps>;
+/**
+ * The `ScoreCircle` component displays a score value (0-100) as a circular progress indicator with color-coded bands.
+ * Scores are color-coded: 0-32 (alert/red), 33-65 (warning/yellow), 66-100 (success/green).
+ * @example
+ * ```tsx
+ *   <ScoreCircle score={75} />
+ * ```
+ */
+export declare const ScoreCircle: import("./types/shared.ts").HubSpotReactComponent<componentTypes.ScoreProps>;
 /**
  * `Tabs` allow you to group related content in a compact space, allowing users to switch between views without leaving the page.
  * @example

package/dist/shared/remoteComponents.js

@@ -504,6 +504,15 @@ export const BarChart = createAndRegisterRemoteReactComponent('BarChart');
  * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/charts-example Charts Example}
  */
 export const LineChart = createAndRegisterRemoteReactComponent('LineChart');
+/**
+ * The `ScoreCircle` component displays a score value (0-100) as a circular progress indicator with color-coded bands.
+ * Scores are color-coded: 0-32 (alert/red), 33-65 (warning/yellow), 66-100 (success/green).
+ * @example
+ * ```tsx
+ *   <ScoreCircle score={75} />
+ * ```
+ */
+export const ScoreCircle = createAndRegisterRemoteReactComponent('ScoreCircle');
 /**
  * `Tabs` allow you to group related content in a compact space, allowing users to switch between views without leaving the page.
  * @example

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;
 }