@hubspot/ui-extensions 0.10.1 → 0.11.0

package/dist/__synced__/types/components/layouts.synced.d.ts

@@ -0,0 +1,172 @@
+import { ReactNode } from 'react';
+import { AllDistances } from '../shared.synced';
+/**
+ * The props type for {@link !components.Stack}.
+ *
+ * @category Component Props
+ */
+export interface StackProps {
+    /**
+     * Sets the spacing between components.
+     */
+    distance?: AllDistances;
+    /**
+     * Sets the content that will render inside the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Arranges components `horizontally` or `vertically` by setting the main axis.
+     */
+    direction?: 'row' | 'column';
+    /**
+     * Distributes components along the main axis using the available free space.
+     */
+    justify?: 'center' | 'end' | 'start';
+    /**
+     * Distributes components along the cross-axis using the available free space.
+     */
+    align?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
+    /**
+     * Sets the width of the stack.
+     */
+    width?: 'auto' | '100%';
+}
+export type FlexJustify = 'center' | 'end' | 'start' | 'around' | 'between';
+export type FlexAlign = 'start' | 'center' | 'baseline' | 'end' | 'stretch';
+/**
+ * The props type for {@link !components.Flex}.
+ *
+ * @category Component Props
+ */
+export interface FlexProps {
+    /**
+     * Sets the spacing between components.
+     *
+     * @defaultValue `"flush"`
+     */
+    gap?: AllDistances;
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
+     *
+     */
+    children?: ReactNode;
+    /**
+     * Arranges components `horizontally` or `vertically` by setting the main axis.
+     *
+     * @defaultValue `"row"`
+     */
+    direction?: 'row' | 'column';
+    /**
+     * 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 `"stretch"`
+     */
+    align?: FlexAlign;
+    /**
+     * Overrides Flex's `alignItem` value for this element.
+     *
+     */
+    alignSelf?: FlexAlign;
+    /**
+     * Whether components will wrap instead of trying to fit on one line.
+     *
+     * @defaultValue `"nowrap"`
+     */
+    wrap?: boolean | 'wrap' | 'nowrap';
+}
+/**
+ * The props type for {@link !components.Box}.
+ *
+ * @category Component Props
+ */
+export interface BoxProps {
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
+     *
+     */
+    children: ReactNode;
+    /**
+     * Overrides Flex's `alignItem` value for this element.
+     *
+     * @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.
+     *
+     * @defaultValue `"initial"`
+     */
+    flex?: 'initial' | 'auto' | 'none' | number;
+}
+/**
+ * The props type for {@link !components.Inline}.
+ *
+ * @category Component Props
+ */
+export interface InlineProps {
+    /**
+     * 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"`
+     */
+    align?: FlexAlign;
+    /**
+     * Sets the spacing between components.
+     *
+     * @defaultValue `"flush"`
+     */
+    gap?: AllDistances;
+}
+/**
+ * The props type for {@link !components.AutoGrid}.
+ *
+ * @category Component Props
+ */
+export interface AutoGridProps {
+    /**
+     * 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.
+     */
+    columnWidth: number;
+    /**
+     * Sets the 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`.
+     *
+     * @defaultValue `false`
+     */
+    flexible?: boolean;
+}

package/dist/__synced__/types/components/layouts.synced.js

@@ -0,0 +1 @@
+export {};

package/dist/__synced__/types/components/link.synced.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import { OverlayComponentProps, ExtensionEvent, HrefProp } from '../shared.synced';
+import { ReactionsHandler } from '../reactions.synced';
+/**
+ * The props type for {@link !components.Link}.
+ *
+ * @category Component Props
+ */
+export interface LinkProps extends OverlayComponentProps {
+    /**
+     * Sets the content that will render inside the component.
+     *
+     */
+    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.
+     *
+     */
+    href: HrefProp;
+    /**
+     * The color variation of the link.
+     *
+     * @defaultValue `"primary"`
+     */
+    variant?: 'primary' | 'destructive' | 'light' | 'dark';
+    /**
+     * A function that will be invoked with the link is clicked.
+     *
+     * @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.
+     *
+     * @defaultValue `false`
+     */
+    preventDefault?: boolean;
+}

package/dist/__synced__/types/components/link.synced.js

@@ -0,0 +1 @@
+export {};

package/dist/__synced__/types/components/list.synced.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+/**
+ * The props type for {@link !components.List}.
+ *
+ * @category Component Props
+ */
+export interface ListProps {
+    /**
+     * The content of the list. Each child will be wrapped in an `li` tag.
+     */
+    children: ReactNode;
+    /**
+     * The type of list to render.
+     *
+     * @defaultValue `"unordered"`
+     */
+    variant?: 'unordered' | 'unordered-styled' | 'ordered' | 'ordered-styled' | 'inline' | 'inline-divided';
+}

package/dist/__synced__/types/components/list.synced.js

@@ -0,0 +1 @@
+export {};

package/dist/__synced__/types/components/loading-spinner.synced.d.ts

@@ -0,0 +1,31 @@
+import { TShirtSizes } from '../shared.synced';
+/**
+ * The props type for {@link !components.LoadingSpinner}.
+ *
+ * @category Component Props
+ */
+export interface LoadingSpinnerProps {
+    /**
+     * 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.
+     *
+     */
+    label: string;
+    /**
+     * When set to `true`, the label will appear next to the spinner.
+     *
+     * @defaultValue `false`
+     */
+    showLabel?: boolean;
+    /**
+     * The size of the spinner.
+     *
+     * @defaultValue `"sm"`
+     */
+    size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
+    /**
+     * The position of the spinner. Can be one of `inline` or `centered`.
+     *
+     * @defaultValue `"inline"`
+     */
+    layout?: 'inline' | 'centered';
+}

package/dist/__synced__/types/components/loading-spinner.synced.js

@@ -0,0 +1 @@
+export {};

package/dist/__synced__/types/components/modal.synced.d.ts

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+import { TShirtSizes } from '../shared.synced';
+export interface ModalProps {
+    /**
+     * Accessibility label.
+     *
+     */
+    'aria-label'?: string;
+    /**
+     * The main content of the modal when it opens.
+     *
+     */
+    children?: ReactNode;
+    /**
+     * A unique ID for the modal
+     *
+     */
+    id: string;
+    /**
+     * A function that will be invoked when the modal has finished opening.
+     *
+     */
+    onOpen?: () => void;
+    /**
+     * A function that will be invoked when the modal has finished closing.
+     *
+     */
+    onClose?: () => void;
+    /**
+     * The width of the modal
+     *
+     * @defaultValue `"sm"`
+     */
+    width?: TShirtSizes['sm'] | TShirtSizes['md'] | TShirtSizes['lg'];
+    /**
+     * The title of the modal
+     *
+     */
+    title?: string;
+    /**
+     * The variant of the modal
+     *
+     * @defaultValue `"default"`
+     */
+    variant?: 'danger' | 'default';
+}
+export interface ModalBodyProps {
+    /**
+     * The main content of the modal
+     *
+     */
+    children: ReactNode;
+}
+export interface ModalFooterProps {
+    /**
+     * The footer of the modal
+     *
+     */
+    children: ReactNode;
+}

package/dist/__synced__/types/components/modal.synced.js

@@ -0,0 +1 @@
+export {};

package/dist/__synced__/types/components/panel.synced.d.ts

@@ -0,0 +1,73 @@
+import { ReactNode } from 'react';
+import { TShirtSizes } from '../shared.synced';
+export interface PanelProps {
+    /**
+     * Accessibility label.
+     *
+     */
+    'aria-label'?: string;
+    /**
+     * The main content of the panel when it opens.
+     *
+     */
+    children?: ReactNode;
+    /**
+     * A unique ID for the panel
+     *
+     */
+    id: string;
+    /**
+     * A function that will be invoked when the panel has finished opening.
+     *
+     */
+    onOpen?: () => void;
+    /**
+     * A function that will be invoked when the panel has finished closing.
+     *
+     */
+    onClose?: () => void;
+    /**
+     * The width of the panel
+     *
+     * @defaultValue `"sm"`
+     */
+    width?: TShirtSizes['sm'] | TShirtSizes['md'] | TShirtSizes['lg'];
+    /**
+     * The title of the panel
+     *
+     */
+    title?: string;
+    /**
+     * The variant of the panel
+     *
+     * @defaultValue `"default"`
+     */
+    variant?: 'modal' | 'default';
+}
+export interface PanelSectionProps {
+    /**
+     * When set to `true`, the section will have no bottom margin
+     *
+     * @defaultValue `false`
+     */
+    flush?: boolean;
+    /**
+     * The main content of the section
+     *
+     */
+    children: ReactNode;
+}
+export interface PanelBodyProps {
+    /**
+     * The main content of the body
+     *
+     */
+    children: ReactNode;
+}
+export interface PanelFooterProps {
+    /**
+     * The main content of the footer
+     *
+     */
+    children: ReactNode;
+}

package/dist/__synced__/types/components/panel.synced.js

@@ -0,0 +1 @@
+export {};

package/dist/__synced__/types/components/progress-bar.synced.d.ts

@@ -0,0 +1,48 @@
+/**
+ * The props type for {@link !components.ProgressBar}.
+ *
+ * @category Component Props
+ */
+export interface ProgressBarProps {
+    /**
+     * The text that displays above the progress bar.
+     *
+     */
+    title?: string;
+    /**
+     * Accessibility label.
+     *
+     */
+    'aria-label'?: string;
+    /**
+     * Whether the progress bar displays the completion percentage.
+     *
+     * @defaultValue `false`
+     */
+    showPercentage?: boolean;
+    /**
+     * The number representing the progress so far.
+     *
+     * @defaultValue `0`
+     */
+    value?: number;
+    /**
+     * The maximum value of the progress bar.
+     *
+     * @defaultValue `100`
+     */
+    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.
+     *
+     */
+    valueDescription?: string;
+    /**
+     * The color that indicates the type of progress bar.
+     *
+     * @defaultValue `"success"`
+     */
+    variant?: 'success' | 'danger' | 'warning';
+    /** @deprecated use maxValue instead */
+    valueMax?: number;
+}

package/dist/__synced__/types/components/progress-bar.synced.js

@@ -0,0 +1 @@
+export {};

package/dist/__synced__/types/components/selects.synced.d.ts

@@ -0,0 +1,130 @@
+/**
+ * Generic collection of props for select components
+ * @internal
+ * */
+export interface BaseSelectProps {
+    /**
+     * The text that displays above to the dropdown menu.
+     *
+     */
+    label?: string;
+    /**
+     * The unique identifier for the select element.
+     *
+     */
+    name?: string;
+    /**
+     * When set to `true`, displays a required field indicator.
+     *
+     * @defaultValue `false`
+     */
+    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.
+     *
+     * @defaultValue `false`
+     */
+    readOnly?: boolean;
+    /**
+     * Displayed text that describes the field's purpose.
+     *
+     */
+    description?: string;
+    /**
+     * The text that displays in a tooltip next to the label.
+     *
+     */
+    tooltip?: string;
+    /**
+     * Text that appears in the input when no value is set.
+     *
+     */
+    placeholder?: 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's an error.
+     * If left `false` (default), `validationMessage` is displayed as a success message.
+     *
+     * @defaultValue `false`
+     */
+    error?: boolean;
+    /**
+     * The text to show if the input has an error.
+     *
+     */
+    validationMessage?: string;
+    /**
+     * The variant type for the select.
+     *
+     * @defaultValue `"input"`
+     */
+    variant?: 'transparent' | 'input';
+}
+/**
+ * The props type for {@link !components.Select}.
+ *
+ * @category Component Props
+ */
+export interface SelectProps extends BaseSelectProps {
+    /**
+     * The value of the select input.
+     *
+     */
+    value?: string | number | boolean;
+    /**
+     * A callback function that is invoked when the value is committed.
+     *
+     * @event
+     */
+    onChange?: (value: NonNullable<SelectProps['value']>) => void;
+    /**
+     * The variant type for the select.
+     *
+     * @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.
+     *
+     * @event
+     */
+    onInput?: (value: string) => void;
+    /**
+     * The options to display in the dropdown menu.
+     */
+    options: {
+        /** Will be used as the display text. **/
+        label: string;
+        /** Should be the option's unique identifier, which is submitted with the form. **/
+        value: string | number | boolean;
+    }[];
+}
+/**
+ * The props type for {@link !components.MultiSelect}.
+ *
+ * @category Component Props
+ */
+export interface MultiSelectProps extends BaseSelectProps {
+    /**
+     * The value of the select input.
+     *
+     */
+    value?: (string | number | boolean)[];
+    /**
+     * A callback function that is invoked when the value is committed.
+     *
+     * @event
+     */
+    onChange?: (value: NonNullable<MultiSelectProps['value']>) => void;
+    /**
+     * The options to display in the dropdown menu.
+     */
+    options: {
+        /** Will be used as the display text. **/
+        label: string;
+        /** Should be the option's unique identifier, which is submitted with the form. **/
+        value: string | number | boolean;
+    }[];
+}

package/dist/__synced__/types/components/selects.synced.js

@@ -0,0 +1 @@
+export {};

package/dist/__synced__/types/components/statistics.synced.d.ts

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+/**
+ * The props type for {@link !components.StatisticsTrend}.
+ *
+ * @category Component Props
+ */
+export interface StatisticsTrendProps {
+    /**
+     * The text to be displayed as the trend value.
+     */
+    value: string;
+    /**
+     * The direction of the trend arrow.
+     *
+     * @defaultValue `"increase"`
+     */
+    direction: 'increase' | 'decrease';
+    /**
+     * The color of the trend arrow.
+     */
+    color?: 'red' | 'green';
+}
+/**
+ * The props type for {@link !components.StatisticsItem}.
+ *
+ * @category Component Props
+ */
+export interface StatisticsItemProps {
+    /**
+     * The unique identifier.
+     */
+    id?: string;
+    /**
+     * The item's label text.
+     */
+    label: string;
+    /**
+     * The string to be displayed as the item's primary number.
+     */
+    number: string | number;
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. The children should be {@link !components.StatisticsTrend} or {@link !components.Text}.
+     */
+    children?: ReactNode;
+}
+/**
+ * The props type for {@link !components.Statistics}.
+ *
+ * @category Component Props
+ */
+export interface StatisticsProps {
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. The children should be {@link !components.StatisticsItem}.
+     */
+    children: ReactNode;
+}

package/dist/__synced__/types/components/statistics.synced.js

@@ -0,0 +1 @@
+export {};