@hubspot/ui-extensions 0.10.1 → 0.11.1

package/dist/__synced__/types/components/status-tag.synced.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+/**
+ * The props type for {@link !components.StatusTag}.
+ *
+ * @category Component Props
+ */
+export interface StatusTagProps {
+    /**
+     * The status tag's indicator color.
+     *
+     * @defaultValue `"default"`
+     */
+    variant?: 'danger' | 'warning' | 'info' | 'success' | 'default';
+    /**
+     * When set to true, the status tag's dot will be a ring instead.
+     *
+     * @defaultValue `false `
+     */
+    hollow?: boolean;
+    /**
+     * A function that will be invoked when the status tag is clicked. It receives no arguments and its return value is ignored.
+     *
+     * @event
+     */
+    onClick?: () => void;
+    /**
+     * When set to true, the status tag will show a small clickable 'x' icon.
+     *
+     * @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.
+     *
+     * @event
+     */
+    onRemoveClick?: () => void;
+    /**
+     * Sets the content that will render inside the StatusTag. This prop is passed implicitly by providing sub-components. We recommend only using a small amount of text.
+     */
+    children: ReactNode;
+}

package/dist/__synced__/types/components/status-tag.synced.js

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

package/dist/__synced__/types/components/step-indicator.synced.d.ts

@@ -0,0 +1,44 @@
+import { AllSizes } from '../shared.synced';
+/**
+ * The props type for {@link !components.StepIndicator}.
+ *
+ * @category Component Props
+ */
+export interface StepIndicatorProps {
+    /**
+     * An array containing the name of each step.
+     */
+    stepNames: string[];
+    /**
+     * The orientation of the indicator.
+     *
+     * @defaultValue `"horizontal"`
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * The size of the indicator circles.
+     *
+     * @defaultValue `"small"`
+     */
+    circleSize?: AllSizes;
+    /**
+     * The currently active step. Steps are 0-based.
+     */
+    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.
+     *
+     * @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.
+     *
+     * @event
+     */
+    onClick?: (stepIndex: number) => void;
+}

package/dist/__synced__/types/components/step-indicator.synced.js

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

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

@@ -0,0 +1,138 @@
+import { ReactNode } from 'react';
+export interface AlignmentProps {
+    align?: 'left' | 'center' | 'right';
+}
+export interface WidthProps {
+    width?: 'min' | 'max' | 'auto' | number;
+}
+export interface TableElementProps {
+    children: ReactNode;
+}
+/**
+ * @property align Sets the alignment of a table header.
+ * @property width Sets the width of a table header.
+ *
+ * @interface
+ */
+export type BaseTableHeaderProps = TableElementProps & AlignmentProps & WidthProps;
+export type TableCellProps = TableElementProps & AlignmentProps & WidthProps & {
+    colSpan?: number;
+};
+/**
+ * The props type for {@link !components.TableHeader} when sorted === never.
+ *
+ * @category Component Props
+ */
+export interface UnSortedTableHeaderProps extends BaseTableHeaderProps {
+    sortDirection?: 'never';
+}
+/**
+ * The props type for {@link !components.TableHeader} when sorted !== never.
+ *
+ * @category Component Props
+ */
+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.
+     *
+     * @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`.
+     *
+     * @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`.
+     *
+     *  @defaultValue `false`
+     */
+    disabled?: boolean;
+}
+/**
+ * The props type for {@link !components.TableHeader}.
+ *
+ * @category Component Props
+ */
+export type TableHeaderProps = SortedTableHeaderProps | UnSortedTableHeaderProps;
+interface BaseTableProps {
+    /**
+     * When set to false, the table will not have borders.
+     *
+     * @defaultValue `true`
+     */
+    bordered?: boolean;
+    /**
+     * When set to `true`, the table will not have bottom margin.
+     *
+     * @defaultValue `false`
+     */
+    flush?: boolean;
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. The children should be one of Table's subcomponents.
+     */
+    children: ReactNode;
+}
+/**
+ * @internal
+ */
+export interface TableNoPaginatedProps extends BaseTableProps {
+    /**
+     * When set to `true`, the table will include pagination navigation. Take a look at {@link !types.TablePaginatedProps} for pagination props.
+     *
+     * @defaultValue `false`
+     */
+    paginated?: false;
+}
+/**
+ * @internal
+ */
+export interface TablePaginatedProps extends BaseTableProps {
+    /**
+     * When set to `true`, the table will include pagination navigation. Take a look at {@link !types.TablePaginatedProps} for pagination props.
+     *
+     * @defaultValue `false`
+     */
+    paginated: true;
+    /**
+     * The total number of pages available.
+     */
+    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.
+     *
+     * @defaultValue `true`
+     */
+    showButtonLabels?: boolean;
+    /**
+     * When set to `true`, displays the **First/Last** page buttons.
+     *
+     * @defaultValue `false`
+     */
+    showFirstLastButtons?: boolean;
+    /**
+     * Sets how many page buttons are displayed.
+     */
+    maxVisiblePageButtons?: number;
+    /**
+     * Denotes the current page.
+     */
+    page?: number;
+    /**
+     * A function that will be invoked when the pagination button is clicked. It receives the new page number as argument.
+     *
+     * @event
+     */
+    onPageChange: (pageNumber: number) => void;
+}
+/**
+ * The props type for {@link !components.Table}.
+ *
+ * @category Component Props
+ */
+export type TableProps = TableNoPaginatedProps | TablePaginatedProps;
+export {};

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

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

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

@@ -0,0 +1,55 @@
+import { ReactNode } from 'react';
+export interface TabsProps {
+    /**
+     * Sets the content that will render inside the component.
+     */
+    children?: ReactNode;
+    /**
+     * Callback when the selected tab changes.
+     */
+    onSelectedChange?: ((selectedId: string) => void) | ((selectedId: number) => void) | ((selectedId: number | string) => void);
+    /**
+     * The initially selected tab ID.
+     */
+    defaultSelected?: string | number;
+    /**
+     * The currently selected tab ID (controlled component).
+     */
+    selected?: string | number;
+    /**
+     * Visual style variant of the tabs.
+     * @defaultValue 'default'
+     */
+    variant?: 'default' | 'enclosed';
+    /**
+     * Whether the tab should fill available space.
+     */
+    fill?: boolean;
+}
+export interface TabProps {
+    /**
+     * Whether the tab is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Unique identifier for the tab.
+     */
+    tabId?: string | number;
+    /**
+     * The title text of the tab.
+     */
+    title?: string;
+    /**
+     * The content to display when this tab is selected.
+     */
+    children?: ReactNode;
+    /**
+     * The tooltip text of the tab.
+     */
+    tooltip?: string;
+    /**
+     * The tab's tooltip placement
+     * @defaultValue 'top'
+     */
+    tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
+}

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

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

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

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { OverlayComponentProps, ExtensionEvent } from '../shared.synced';
+import { ReactionsHandler } from '../reactions.synced';
+/**
+ * The props type for {@link !components.Tag}.
+ *
+ * @category Component Props
+ */
+export interface TagProps extends OverlayComponentProps {
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
+     */
+    children: ReactNode;
+    /**
+     * The tag's color. The following variants are available.
+     *
+     * @defaultValue `"default"`
+     */
+    variant?: 'default' | 'warning' | 'success' | 'error' | 'info';
+    /**
+     * A function that will be invoked when the tag is clicked.
+     *
+     * @event
+     */
+    onClick?: ReactionsHandler<ExtensionEvent>;
+    /**
+     * When set to true, this component can be aligned side-by-side with text.
+     *
+     * @defaultValue `false`
+     */
+    inline?: boolean;
+}

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

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

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

@@ -0,0 +1,93 @@
+import { ReactNode } from 'react';
+/**
+ * @internal
+ * Format options for text component.
+ */
+export interface TextFormatOptions {
+    /**
+     * Weight of the font.
+     *
+     * @defaultValue `"regular"`
+     */
+    fontWeight?: 'regular' | 'bold' | 'demibold';
+    /**
+     * If `true`, font will be in italicized.
+     *
+     * @defaultValue `false`
+     */
+    italic?: boolean;
+    /**
+     * Line decoration of the font.
+     *
+     * @defaultValue `"none"`
+     */
+    lineDecoration?: 'none' | 'underline' | 'strikethrough';
+    /**
+     * Controls the capitalization of text.
+     *
+     * - `none`: No capitalization changes (default)
+     * - `uppercase`: Transforms all characters to uppercase
+     * - `lowercase`: Transforms all characters to lowercase
+     * - `capitalize`: Capitalizes the first letter of each word
+     * - `sentenceCase`: Capitalizes the first letter of the text and makes the rest lowercase
+     *
+     * @defaultValue `"none"`
+     */
+    textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize' | 'sentenceCase';
+}
+export interface TruncateOptions {
+    maxWidth?: number;
+    tooltipText?: string;
+}
+/**
+ * The props type for {@link !components.Text}.
+ *
+ * @interface
+ * @category Component Props
+ */
+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.
+     *
+     * @defaultValue `"bodytext"`
+     */
+    variant?: 'bodytext' | 'microcopy';
+    /**
+     * When set to `true`, inserts a line break.
+     *
+     * @defaultValue `false`
+     */
+    inline?: boolean;
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
+     */
+    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}>
+     */
+    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.
+     *
+     * - `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.
+     *
+     * @defaultValue `false`
+     */
+    truncate?: boolean | TruncateOptions;
+};

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

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

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

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+/**
+ * The props type for {@link !components.Tile}.
+ *
+ * @category Component Props
+ */
+export interface TileProps {
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
+     */
+    children: ReactNode;
+    /**
+     * When set to `true`, reduces the default amount of padding around the contents of the Tile.
+     *
+     * @defaultValue `false`
+     */
+    compact?: boolean;
+    /**
+     * When set to `true`, removes left and right padding from tile contents.
+     *
+     * @defaultValue `false`
+     */
+    flush?: boolean;
+}

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

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

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

@@ -0,0 +1,60 @@
+import { TShirtSizes } from '../shared.synced';
+/**
+ * The props type for {@link !components.Toggle}.
+ *
+ * @category Component Props
+ */
+export interface ToggleProps {
+    /**
+     * The current status of the input.
+     */
+    checked?: boolean;
+    /**
+     * When set to `true`, the option cannot be selected.
+     */
+    readonly?: boolean;
+    /**
+     * The unique identifier for the toggle element.
+     */
+    name?: string;
+    /**
+     * The size variation of the toggle.
+     *
+     * @defaultValue `"medium"`
+     */
+    size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'] | 'default';
+    /**
+     * A function that is called when the `checked` input status changes.
+     *
+     * @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**.
+     */
+    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.
+     */
+    label: string;
+    /**
+     * Controls the display setting of the label prop.
+     *
+     * @defaultValue `"inline"`
+     */
+    labelDisplay?: 'inline' | 'top' | 'hidden';
+    /**
+     * The text that appears on the Toggle when `checked={true}`.
+     *
+     * @defaultValue `"ON"`
+     */
+    textChecked?: string;
+    /**
+     * The text that appears on the Toggle when `checked={false}`.
+     *
+     * @defaultValue `"ON"`
+     */
+    textUnchecked?: string;
+}

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

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