@hubspot/ui-extensions 0.2.0 → 0.3.1

package/README.md

@@ -20,6 +20,7 @@ React components and utilities for extending HubSpot's UI.
 - [Input](#input)
 - [Link](#link)
 - [LoadingSpinner](#loadingspinner)
+- [Multiselect](#multiselect)
 - [NumberInput](#numberInput)
 - [ProgressBar](#progressbar)
 - [Select](#select)
@@ -37,7 +38,7 @@ React components and utilities for extending HubSpot's UI.
   - [TableRow](#tablerow)
 - [Tag](#tag)
 - [Text](#text)
-- [Textarea](#textarea)
+- [TextArea](#textarea)
 - [Tile](#tile)
 - [ToggleGroup](#togglegroup)
 
@@ -792,6 +793,70 @@ const Extension = () => {
   return <LoadingSpinner label="Loading..." />;
 };
 ```
+### Multiselect
+
+```javascript
+import { Multiselect } from '@hubspot/ui-extensions';
+```
+
+### Props
+
+```typescript
+interface MultiSelectProps {
+  label: string;
+  name: string;
+  value?: (string | number)[];
+  required?: boolean;
+  readOnly?: boolean;
+  description?: string;
+  tooltip?: string;
+  placeholder?: string;
+  error?: boolean;
+  errorMessage?: string;
+  onChange: (value: (string | number)[]) => void;
+  options: {
+    label: string;
+    value: string | number;
+  }[];
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `label` | `string` | `N/A` | The label text to display for the select element. |
+| `name` | `string` | `N/A` | The unique identifier for the select element. |
+| `value` | `Array<string \| number>` | `N/A` | The value of the select input. |
+| `required` | `boolean` | `false` | Determines if the required indicator should be displayed. |
+| `readOnly` | `boolean` | `false` | Determines if the field is editable or not. |
+| `description` | `string` | `N/A` | Instructional message to display to the user to help understand the purpose of the input. |
+| `tooltip` | `string` | `N/A` | Text that will appear in a tooltip next to the input label. |
+| `placeholder` | `string` | `N/A` | Text that appears in the input when it has no value set. |
+| `error` | `boolean(optional)` | `false` | If set to true, `validationMessage` is displayed as an error message, if it was provided. The input will also render it's error state to let the user know there is an error. If false, `validationMessage` is displayed as a success message. |
+| `validationMessage` | `string(optional)` | `''` | The text to show if the input has an error. |
+| `onChange` | `(value: Array<string \| number>) => void` | `N/A` | Function that is called with the new value when it is updated. |
+| `options` | `Array<{label: string; value: string \| number}>` | `N/A` | Array of options to be displayed in the select. `label` will be used as the display text in the dropdown list and `value` should be a **unique** identifier. `value` is the data that will be submitted with the form. |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  const options = [
+    { label: 'Ice cream', value: 'ice-cream' },
+    { label: 'Pizza', value: 'pizza' },
+    { label: 'Burger', value: 'burger' },
+    { label: 'Soda', value: 'soda' },
+  ];
+
+  return (
+    <MultiSelect
+      name="favorite-food"
+      label="Favorite Food"
+      options={options}
+    />
+  );
+};
+```
+
 ### NumberInput
 
 ##### Import
@@ -1726,12 +1791,12 @@ const Extension = () => {
 };
 ```
 
-### Textarea
+### TextArea
 
 ##### Import
 
 ```javascript
-import { Textarea } from '@hubspot/ui-extensions';
+import { TextArea } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
@@ -1762,7 +1827,7 @@ interface TextareaProps {
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `label` | `string` | `N/A` | The label text to display for the textarea element |
-| `name` | `string` | `N/A` | The unique identifier for the textarea element, this could be thought of as the HTML5 [Textarea element's name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#name) |
+| `name` | `string` | `N/A` | The unique identifier for the textarea element, this could be thought of as the HTML5 [textarea element's name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#name) |
 | `value` | `string(optional)` | `''` | The value of the textarea |
 | `required` | `boolean(optional)` | `false` | Determines if the required indicator should be displayed |
 | `readOnly` | `boolean(optional)` | `false` | Determines if the field is editable or not. |
@@ -1792,7 +1857,7 @@ const Extension = () => {
 
   return (
     <Form>
-      <Textarea
+      <TextArea
         label="Description"
         name="description"
         tooltip="Provide as much detail as possible"

package/dist/coreComponents.d.ts

@@ -1,186 +1,196 @@
-import type { AlertProps, ButtonProps, ButtonRowProps, CardProps, DescriptionListProps, DescriptionListItemProps, DividerProps, EmptyStateProps, ErrorStateProps, FormProps, HeadingProps, ImageProps, InputProps, TextareaProps, LoadingSpinnerProps, ProgressBarProps, SelectProps, TagProps, TextProps, TileProps, StackProps, StatisticsProps, StatisticsItemProps, StatisticsTrendProps, TableProps, TableElementProps, ToggleGroupProps, LinkProps, NumberInputProps, BoxProps, StepIndicatorProps, AccordionProps } from './types';
+import type * as types from './types';
 export declare const Alert: "Alert" & {
     readonly type?: "Alert" | undefined;
-    readonly props?: AlertProps | undefined;
+    readonly props?: types.AlertProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Alert", AlertProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Alert", types.AlertProps, true>>;
 export declare const Button: "Button" & {
     readonly type?: "Button" | undefined;
-    readonly props?: ButtonProps | undefined;
+    readonly props?: types.ButtonProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Button", ButtonProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Button", types.ButtonProps, true>>;
 export declare const ButtonRow: "ButtonRow" & {
     readonly type?: "ButtonRow" | undefined;
-    readonly props?: ButtonRowProps | undefined;
+    readonly props?: types.ButtonRowProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ButtonRow", ButtonRowProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ButtonRow", types.ButtonRowProps, true>>;
 export declare const Card: "Card" & {
     readonly type?: "Card" | undefined;
-    readonly props?: CardProps | undefined;
+    readonly props?: types.CardProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Card", CardProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Card", types.CardProps, true>>;
 export declare const DescriptionList: "DescriptionList" & {
     readonly type?: "DescriptionList" | undefined;
-    readonly props?: DescriptionListProps | undefined;
+    readonly props?: types.DescriptionListProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"DescriptionList", DescriptionListProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"DescriptionList", types.DescriptionListProps, true>>;
 export declare const DescriptionListItem: "DescriptionListItem" & {
     readonly type?: "DescriptionListItem" | undefined;
-    readonly props?: DescriptionListItemProps | undefined;
+    readonly props?: types.DescriptionListItemProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"DescriptionListItem", DescriptionListItemProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"DescriptionListItem", types.DescriptionListItemProps, true>>;
 export declare const Divider: "Divider" & {
     readonly type?: "Divider" | undefined;
-    readonly props?: DividerProps | undefined;
+    readonly props?: types.DividerProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Divider", DividerProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Divider", types.DividerProps, true>>;
 export declare const EmptyState: "EmptyState" & {
     readonly type?: "EmptyState" | undefined;
-    readonly props?: EmptyStateProps | undefined;
+    readonly props?: types.EmptyStateProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"EmptyState", EmptyStateProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"EmptyState", types.EmptyStateProps, true>>;
 export declare const ErrorState: "ErrorState" & {
     readonly type?: "ErrorState" | undefined;
-    readonly props?: ErrorStateProps | undefined;
+    readonly props?: types.ErrorStateProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ErrorState", ErrorStateProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ErrorState", types.ErrorStateProps, true>>;
 export declare const Form: "Form" & {
     readonly type?: "Form" | undefined;
-    readonly props?: FormProps | undefined;
+    readonly props?: types.FormProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Form", FormProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Form", types.FormProps, true>>;
 export declare const Heading: "Heading" & {
     readonly type?: "Heading" | undefined;
-    readonly props?: HeadingProps | undefined;
+    readonly props?: types.HeadingProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Heading", HeadingProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Heading", types.HeadingProps, true>>;
 export declare const Image: "Image" & {
     readonly type?: "Image" | undefined;
-    readonly props?: ImageProps | undefined;
+    readonly props?: types.ImageProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Image", ImageProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Image", types.ImageProps, true>>;
 export declare const Input: "Input" & {
     readonly type?: "Input" | undefined;
-    readonly props?: InputProps<string> | undefined;
+    readonly props?: types.InputProps<string> | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Input", InputProps<string>, true>>;
-export declare const Textarea: "Textarea" & {
-    readonly type?: "Textarea" | undefined;
-    readonly props?: TextareaProps | undefined;
-    readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Textarea", TextareaProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Input", types.InputProps<string>, true>>;
 export declare const Link: "Link" & {
     readonly type?: "Link" | undefined;
-    readonly props?: LinkProps | undefined;
+    readonly props?: types.LinkProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Link", types.LinkProps, true>>;
+export declare const TextArea: "TextArea" & {
+    readonly type?: "TextArea" | undefined;
+    readonly props?: types.TextAreaProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Link", LinkProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TextArea", types.TextAreaProps, true>>;
+export declare const Textarea: "Textarea" & {
+    readonly type?: "Textarea" | undefined;
+    readonly props?: types.TextAreaProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Textarea", types.TextAreaProps, true>>;
 export declare const LoadingSpinner: "LoadingSpinner" & {
     readonly type?: "LoadingSpinner" | undefined;
-    readonly props?: LoadingSpinnerProps | undefined;
+    readonly props?: types.LoadingSpinnerProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"LoadingSpinner", LoadingSpinnerProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"LoadingSpinner", types.LoadingSpinnerProps, true>>;
 export declare const ProgressBar: "ProgressBar" & {
     readonly type?: "ProgressBar" | undefined;
-    readonly props?: ProgressBarProps | undefined;
+    readonly props?: types.ProgressBarProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ProgressBar", ProgressBarProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ProgressBar", types.ProgressBarProps, true>>;
 export declare const Select: "Select" & {
     readonly type?: "Select" | undefined;
-    readonly props?: SelectProps | undefined;
+    readonly props?: types.SelectProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Select", SelectProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Select", types.SelectProps, true>>;
 export declare const Tag: "Tag" & {
     readonly type?: "Tag" | undefined;
-    readonly props?: TagProps | undefined;
+    readonly props?: types.TagProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Tag", TagProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Tag", types.TagProps, true>>;
 export declare const Text: "Text" & {
     readonly type?: "Text" | undefined;
-    readonly props?: TextProps | undefined;
+    readonly props?: types.TextProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Text", TextProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Text", types.TextProps, true>>;
 export declare const Tile: "Tile" & {
     readonly type?: "Tile" | undefined;
-    readonly props?: TileProps | undefined;
+    readonly props?: types.TileProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Tile", TileProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Tile", types.TileProps, true>>;
 export declare const Stack: "Stack" & {
     readonly type?: "Stack" | undefined;
-    readonly props?: StackProps | undefined;
+    readonly props?: types.StackProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Stack", StackProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Stack", types.StackProps, true>>;
 export declare const ToggleGroup: "ToggleGroup" & {
     readonly type?: "ToggleGroup" | undefined;
-    readonly props?: ToggleGroupProps | undefined;
+    readonly props?: types.ToggleGroupProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ToggleGroup", ToggleGroupProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ToggleGroup", types.ToggleGroupProps, true>>;
 export declare const StatisticsItem: "StatisticsItem" & {
     readonly type?: "StatisticsItem" | undefined;
-    readonly props?: StatisticsItemProps | undefined;
+    readonly props?: types.StatisticsItemProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"StatisticsItem", StatisticsItemProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"StatisticsItem", types.StatisticsItemProps, true>>;
 export declare const Statistics: "Statistics" & {
     readonly type?: "Statistics" | undefined;
-    readonly props?: StatisticsProps | undefined;
+    readonly props?: types.StatisticsProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Statistics", StatisticsProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Statistics", types.StatisticsProps, true>>;
 export declare const StatisticsTrend: "StatisticsTrend" & {
     readonly type?: "StatisticsTrend" | undefined;
-    readonly props?: StatisticsTrendProps | undefined;
+    readonly props?: types.StatisticsTrendProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"StatisticsTrend", StatisticsTrendProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"StatisticsTrend", types.StatisticsTrendProps, true>>;
 export declare const Table: "Table" & {
     readonly type?: "Table" | undefined;
-    readonly props?: TableProps | undefined;
+    readonly props?: types.TableProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Table", TableProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Table", types.TableProps, true>>;
 export declare const TableFooter: "TableFooter" & {
     readonly type?: "TableFooter" | undefined;
-    readonly props?: TableElementProps | undefined;
+    readonly props?: types.TableElementProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableFooter", TableElementProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableFooter", types.TableElementProps, true>>;
 export declare const TableCell: "TableCell" & {
     readonly type?: "TableCell" | undefined;
-    readonly props?: TableElementProps | undefined;
+    readonly props?: types.TableElementProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableCell", TableElementProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableCell", types.TableElementProps, true>>;
 export declare const TableRow: "TableRow" & {
     readonly type?: "TableRow" | undefined;
-    readonly props?: TableElementProps | undefined;
+    readonly props?: types.TableElementProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableRow", TableElementProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableRow", types.TableElementProps, true>>;
 export declare const TableBody: "TableBody" & {
     readonly type?: "TableBody" | undefined;
-    readonly props?: TableElementProps | undefined;
+    readonly props?: types.TableElementProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableBody", TableElementProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableBody", types.TableElementProps, true>>;
 export declare const TableHeader: "TableHeader" & {
     readonly type?: "TableHeader" | undefined;
-    readonly props?: TableElementProps | undefined;
+    readonly props?: types.TableElementProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableHeader", TableElementProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableHeader", types.TableElementProps, true>>;
 export declare const TableHead: "TableHead" & {
     readonly type?: "TableHead" | undefined;
-    readonly props?: TableElementProps | undefined;
+    readonly props?: types.TableElementProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableHead", TableElementProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableHead", types.TableElementProps, true>>;
 export declare const NumberInput: "NumberInput" & {
     readonly type?: "NumberInput" | undefined;
-    readonly props?: NumberInputProps | undefined;
+    readonly props?: types.NumberInputProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"NumberInput", NumberInputProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"NumberInput", types.NumberInputProps, true>>;
 export declare const Box: "Box" & {
     readonly type?: "Box" | undefined;
-    readonly props?: BoxProps | undefined;
+    readonly props?: types.BoxProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Box", BoxProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Box", types.BoxProps, true>>;
 export declare const StepIndicator: "StepIndicator" & {
     readonly type?: "StepIndicator" | undefined;
-    readonly props?: StepIndicatorProps | undefined;
+    readonly props?: types.StepIndicatorProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"StepIndicator", StepIndicatorProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"StepIndicator", types.StepIndicatorProps, true>>;
 export declare const Accordion: "Accordion" & {
     readonly type?: "Accordion" | undefined;
-    readonly props?: AccordionProps | undefined;
+    readonly props?: types.AccordionProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Accordion", types.AccordionProps, true>>;
+export declare const MultiSelect: "MultiSelect" & {
+    readonly type?: "MultiSelect" | undefined;
+    readonly props?: types.MultiSelectProps | undefined;
     readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Accordion", AccordionProps, true>>;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"MultiSelect", types.MultiSelectProps, true>>;

package/dist/coreComponents.js

@@ -12,8 +12,11 @@ export const Form = createRemoteReactComponent('Form');
 export const Heading = createRemoteReactComponent('Heading');
 export const Image = createRemoteReactComponent('Image');
 export const Input = createRemoteReactComponent('Input');
-export const Textarea = createRemoteReactComponent('Textarea');
 export const Link = createRemoteReactComponent('Link');
+export const TextArea = createRemoteReactComponent('TextArea');
+// Textarea was changed to TextArea
+// Exporting both for backwards compat
+export const Textarea = createRemoteReactComponent('Textarea');
 export const LoadingSpinner = createRemoteReactComponent('LoadingSpinner');
 export const ProgressBar = createRemoteReactComponent('ProgressBar');
 export const Select = createRemoteReactComponent('Select');
@@ -36,3 +39,4 @@ export const NumberInput = createRemoteReactComponent('NumberInput');
 export const Box = createRemoteReactComponent('Box');
 export const StepIndicator = createRemoteReactComponent('StepIndicator');
 export const Accordion = createRemoteReactComponent('Accordion');
+export const MultiSelect = createRemoteReactComponent('MultiSelect');

package/dist/crm/components.d.ts

@@ -1,4 +1,4 @@
-import { CrmAssociationPivotProps, CrmAssociationTableProps, CrmDataHighlightProps, CrmObjectPropertyProps, CrmPropertyListProps, CrmReportProps, CrmAssociationPropertyListProps } from '../types';
+import { CrmAssociationPivotProps, CrmAssociationTableProps, CrmDataHighlightProps, CrmObjectPropertyProps, CrmPropertyListProps, CrmReportProps, CrmAssociationPropertyListProps, CrmStageTrackerProps } from '../types';
 declare const CrmObjectProperty: "CrmObjectProperty" & {
     readonly type?: "CrmObjectProperty" | undefined;
     readonly props?: CrmObjectPropertyProps | undefined;
@@ -34,4 +34,9 @@ declare const CrmAssociationPropertyList: "CrmAssociationPropertyList" & {
     readonly props?: CrmAssociationPropertyListProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"CrmAssociationPropertyList", CrmAssociationPropertyListProps, true>>;
-export { CrmObjectProperty, CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, };
+declare const CrmStageTracker: "CrmStageTracker" & {
+    readonly type?: "CrmStageTracker" | undefined;
+    readonly props?: CrmStageTrackerProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"CrmStageTracker", CrmStageTrackerProps, true>>;
+export { CrmObjectProperty, CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmStageTracker, };

package/dist/crm/components.js

@@ -6,4 +6,5 @@ const CrmDataHighlight = createExtensionComponent('CrmDataHighlight');
 const CrmReport = createExtensionComponent('CrmReport');
 const CrmAssociationPivot = createExtensionComponent('CrmAssociationPivot');
 const CrmAssociationPropertyList = createExtensionComponent('CrmAssociationPropertyList');
-export { CrmObjectProperty, CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, };
+const CrmStageTracker = createExtensionComponent('CrmStageTracker');
+export { CrmObjectProperty, CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmStageTracker, };

package/dist/crm/index.d.ts

@@ -1,2 +1,2 @@
-import { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmObjectProperty, CrmAssociationPropertyList } from './components';
-export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmObjectProperty, CrmAssociationPropertyList, };
+import { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmObjectProperty, CrmAssociationPropertyList, CrmStageTracker } from './components';
+export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmObjectProperty, CrmAssociationPropertyList, CrmStageTracker, };

package/dist/crm/index.js

@@ -1,2 +1,2 @@
-import { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmObjectProperty, CrmAssociationPropertyList, } from './components';
-export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmObjectProperty, CrmAssociationPropertyList, };
+import { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmObjectProperty, CrmAssociationPropertyList, CrmStageTracker, } from './components';
+export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmObjectProperty, CrmAssociationPropertyList, CrmStageTracker, };

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export { Alert, Button, ButtonRow, Card, DescriptionList, DescriptionListItem, Divider, EmptyState, ErrorState, Form, Heading, Image, Input, LoadingSpinner, ProgressBar, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, Table, TableFooter, TableCell, TableRow, TableBody, TableHeader, TableHead, Tag, Text, Textarea, Tile, ToggleGroup, Link, NumberInput, Box, Accordion, } from './coreComponents';
 export { hubspot } from './hubspot';
+export * from './coreComponents';
 export * from './types';

package/dist/index.js

@@ -1,3 +1,3 @@
-export { Alert, Button, ButtonRow, Card, DescriptionList, DescriptionListItem, Divider, EmptyState, ErrorState, Form, Heading, Image, Input, LoadingSpinner, ProgressBar, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, Table, TableFooter, TableCell, TableRow, TableBody, TableHeader, TableHead, Tag, Text, Textarea, Tile, ToggleGroup, Link, NumberInput, Box, Accordion, } from './coreComponents';
 export { hubspot } from './hubspot';
+export * from './coreComponents';
 export * from './types';

package/dist/types.d.ts

@@ -78,12 +78,13 @@ export interface InputProps<T = string> {
     onBlur?: (value: T) => void;
     onFocus?: (value: T) => void;
 }
-export interface TextareaProps extends InputProps {
+export interface TextAreaProps extends InputProps {
     cols?: number;
     maxLength?: number;
     rows?: number;
     resize?: 'vertical' | 'horizontal' | 'both' | 'none';
 }
+export type TextareaProps = TextAreaProps;
 export interface NumberInputProps extends InputProps<number> {
     min?: number;
     max?: number;
@@ -99,10 +100,9 @@ export interface ProgressBarProps {
     valueDescription?: string;
     variant?: 'success' | 'danger' | 'warning';
 }
-export interface SelectProps {
+export interface BaseSelectProps {
     label: string;
     name: string;
-    value?: string | number;
     required?: boolean;
     readOnly?: boolean;
     description?: string;
@@ -110,12 +110,19 @@ export interface SelectProps {
     placeholder?: string;
     error?: boolean;
     validationMessage?: string;
-    onChange?: (value: SelectProps['value']) => void;
     options: {
         label: string;
         value: string | number;
     }[];
 }
+export interface SelectProps extends BaseSelectProps {
+    value?: string | number;
+    onChange?: (value: SelectProps['value']) => void;
+}
+export interface MultiSelectProps extends BaseSelectProps {
+    value?: (string | number)[];
+    onChange?: (value: MultiSelectProps['value']) => void;
+}
 export interface TagProps {
     children: ReactNode;
     onClick?: () => void;
@@ -325,6 +332,7 @@ export interface CrmMiddleExtensionPoint extends ExtensionPointContract {
         CrmAssociationPivot: ComponentType<CrmAssociationPivotProps>;
         CrmObjectProperty?: ComponentType<CrmObjectPropertyProps>;
         CrmAssociationPropertyList?: ComponentType<CrmAssociationPropertyListProps>;
+        CrmStageTracker?: ComponentType<CrmStageTrackerProps>;
     };
 }
 export interface CrmDataHighlightProps {
@@ -363,6 +371,7 @@ export interface CrmAssociationTableProps {
     quickFilterProperties?: Array<string>;
     searchable?: boolean;
     pagination?: boolean;
+    associationLabelFilter?: boolean;
     pageSize?: number;
     preFilters?: Array<CrmSearchFilter>;
     sort?: Array<CrmSortDescriptor>;
@@ -381,6 +390,11 @@ export interface CrmAssociationPropertyListProps {
     filters?: Array<CrmSearchFilter>;
     sort?: Array<CrmSortDescriptor>;
 }
+export interface CrmStageTrackerProps {
+    objectId?: number;
+    objectTypeId?: string;
+    properties: Array<string>;
+}
 interface CrmSidebarExtensionPoint extends ExtensionPointContract {
     actions: {
         reloadPage: ReloadPageAction;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -48,5 +48,5 @@
   "devDependencies": {
     "typescript": "5.0.4"
   },
-  "gitHead": "ab7ad192e9d98163d2613d77f68677e3b48898aa"
+  "gitHead": "3da4a07183d48528ef431d46a8d327c053c4fe94"
 }