@hubspot/ui-extensions 0.0.1-prealpha.5 → 0.0.1-prealpha.6

package/README.md

@@ -332,14 +332,14 @@ import { Form } from '@hubspot/ui-extensions';
 ```typescript
 interface FormProps {
   children: ReactNode;
-  onSubmit?: () => void;
+  onSubmit?: (event: RemoteEvent<FormInputValues>) => void;
   preventDefault?: boolean;
 }
 ```
 | Prop | Type | Default | Description |
 | - | - | - | - |
 | `children` | `ReactNode` | `N/A`| Sets the content that will render inside the component.  This prop is passed implicitly by providing sub-components. |
-| `onSubmit` | `function(optional)` | `N/A`| A function that will be called when the form is submitted. It will receive no arguments and it's return value will be ignored. |
+| `onSubmit` | `function(optional)` | `N/A`| A function that will be called when the form is submitted. It will receive a `RemoteEvent` as argument and it's return value will be ignored. |
 | `preventDefault` | `boolean(optional)` | `false`| If set to `true` `event.preventDefault()` will be invoked before your `onSubmit` function is called, preventing the default html form behavior. |
 
 ##### Usage
@@ -362,6 +362,95 @@ const Extension = () => {
 }
 ```
 
+### EmptyState
+
+##### Import
+```javascript
+import { EmptyState } from '@hubspot/ui-extensions';
+```
+
+##### Props
+```typescript
+interface EmptyStateProps {
+  children: ReactNode;
+  flush?: boolean;
+  imageWidth?: number;
+  layout?: 'horizontal' | 'vertical';
+  reverseOrder?: boolean;
+  title?: string;
+}
+```
+| Prop | Type | Default | Description |
+| - | - | - | - |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component.  This prop is passed implicitly by providing sub-components. |
+| `flush` | `boolean(optional)` | `false` | Removes the default vertical margins for the component. |
+| `imageWidth` | `number(optional)` | `250`| The max-width for the image container. |
+| `layout` | `'horizontal' | 'vertical'` `(optional)` | `'horizontal'` | Sets the layout direction for the content. |
+| `reverseOrder` | `boolean(optional)` | `false` | Swaps the visual order of the text (primary) and image (secondary) content. This ensures the primary content is still presented first to assistive technology. |
+| `title` | `string(optional)` | `Intl("All is not lost.")` | The text for the title header rendered above the `children`. |
+
+##### Usage
+```javascript
+const Extension = ({ data }) => {
+  if (!data || !data.length) {
+    return (
+      <EmptyState title="Nothing here yet" layout="vertical" reverseOrder={true}>
+        <Text text="Go out there and get some leads!" />
+      </EmptyState>
+    )
+  }
+
+  return (
+    <Stack>
+      {data.map(...)}
+    </Stack>
+  );
+}
+```
+
+### ErrorState
+
+##### Import
+```javascript
+import { ErrorState } from '@hubspot/ui-extensions';
+```
+
+##### Props
+```typescript
+interface ErrorStateProps {
+  children: ReactNode;
+  title?: string;
+  type?: 'error' | 'support' | 'lock';
+}
+```
+| Prop | Type | Default | Description |
+| - | - | - | - |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component.  This prop is passed implicitly by providing sub-components. |
+| `title` | `string(optional)` | `Intl("All is not lost.")` | The text for the title header rendered above the `children`. |
+| `type` | `'error' | 'support' | 'lock'` `(optional)` | `'error'` | Sets the type of error image that will be shown. |
+
+##### Usage
+```javascript
+const Extension = ({ data, error, fetchData }) => {
+  if (error) {
+    return (
+      <ErrorState title="Trouble fetching properties." layout="vertical" reverseOrder={true}>
+        <Stack>
+          <Text text="Please try again in a few moments." />
+          <Button text="Try again" onClick={fetchData} />
+        </Stack>
+      </ErrorState>
+    )
+  }
+
+  return (
+    <Stack>
+      {data.map(...)}
+    </Stack>
+  );
+}
+```
+
 ### Heading
 
 ##### Import
@@ -472,9 +561,11 @@ interface InputProps {
   tooltip?: string;
   placeholder?: string;
   error?: boolean;
-  errorMessage?: string;
-  onChange: (value: string) => void;
-  onInput: (value: string) => void;
+  validationMessage?: string;
+  onChange?: (value: string) => void;
+  onInput?: (value: string) => void;
+  onBlur?: (value: string) => void;
+  onFocus?: (value: string) => void;
 }
 ```
 | Prop | Type | Default | Description |
@@ -489,8 +580,10 @@ interface InputProps {
 | `placeholder` | `string(optional)` | `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: string) => void` | `N/A`| A callback function that is invoked when the value is committed.  Currently these times are `onBlur` of the input and when the user stops typing.  |
-| `onInput` | `(value: string) => void` | `N/A`| A function that is called and passed the value every time the field is edited by the user.  It is recommended that you do not use this value to update state, that is what `onChange` should be used for. Instead this should be used for validation. |
+| `onChange` | `(value: string) => void(optional)` | `N/A`| A callback function that is invoked when the value is committed.  Currently these times are `onBlur` of the input and when the user submits the form.  |
+| `onInput` | `(value: string) => void(optional)` | `N/A`| A function that is called and passed the value every time the field is edited by the user.  It is recommended that you do not use this value to update state, that is what `onChange` should be used for. Instead this should be used for validation. |
+| `onBlur` | `(value: string) => void(optional)` | `N/A`| A function that is called and passed the value every time the field loses focus. |
+| `onFocus` | `(value: string) => void(optional)` | `N/A`| A function that is called and passed the value every time the field gets focused. |
 
 ##### Usage
 ```javascript
@@ -698,13 +791,15 @@ import { Stack } from '@hubspot/ui-extensions';
 ##### Props
 ```typescript
 interface StackProps {
-  distance?: 'flush' | 'small';
+  distance?: 'flush' | 'small' | 'extra-small' | 'medium' | 'large';
+  direction?: 'row' | 'column';
   children?: ReactNode;
 }
 ```
 | Prop | Type | Default | Description |
 | - | - | - | - |
-| `distance` | `'flush' \| 'small'` | `'small'`| Amount of padding between each child component passed as children |
+| `distance` | `'flush' \| 'extra-small' \| 'small' \| 'medium' \| 'large'` | `'small'`| Amount of space between each child component passed as children |
+| `direction` | `'row' \| 'column'` | `'column'`| Stacks elements in the vertical or horizontal direction. |
 | `children` | `ReactNode` | `N/A`| Sets the content that will render inside the component.  This prop is passed implicitly by providing sub-components. |
 
 ##### Usage
@@ -833,6 +928,14 @@ interface TableProps {
   children: ReactNode;
   flush?: boolean;
   bordered?: boolean;
+  paginated?: boolean;
+  // if paginated=true
+  pageCount: number;
+  onPageChange: (pageNumber: number) => void;
+  showButtonLabels?: boolean;
+  showFirstLastButtons?: boolean;
+  maxVisiblePageButtons?: number;
+  page?: number;
 }
 ```
 | Prop | Type | Default | Description |
@@ -840,6 +943,19 @@ interface TableProps {
 | `children` | `ReactNode` | `N/A`| Sets the content that will render inside the component.  This prop is passed implicitly by providing sub-components. These children should be [TableHead](#tablehead), [TableFooter](#tablefooter), or [TableBody](#tablebody) |
 | `flush` | `boolean(optional)` | `false`| If true the table will not have bottom margin. |
 | `bordered` | `boolean(optional)` | `true`| If false the table will not haver borders around its content. |
+| `paginated` | `boolean(optional)` | `false`| If true, the table will display the paginator component and consumer will have to provide extra pagination props. |
+
+**Props for paginated=true**
+
+| Prop | Type | Default | Description |
+| - | - | - | - |
+| `pageCount` | `number` | `N/A`| The total number of pages available |
+| `onPageChange` | `onPageChange: (pageNumber: number) => void` |`N/A`| A function that will be invoked when the pagination button is clicked.  It receives the new page number as argument. |
+| `showButtonLabels` | `boolean(optional)` | `true` | if `false`, it hides the text labels for the First/Prev/Next/Last buttons. The button labels will still be accessible for screen readers. |
+| `showFirstLastButtons` | `boolean(optional)` | `false` | if `true`, it displays the First page and Last page buttons. |
+| `maxVisiblePageButtons` | `number(optional)` | `5` | Changes how many page buttons are shown. |
+| `page` | `number(optional)` | `N/A` | Denotes the current page. |
+
 
 ##### Usage
 ```javascript
@@ -861,6 +977,64 @@ const Extension = () => {
     </Table>
   );
 }
+
+
+// Paginated example
+
+function generateData(count = 15) {
+  const result = [];
+
+  for (let index = 0; index < count; index++) {
+    result.push({
+      name: `Jane Doe ${index}`,
+      email: `janedoemail${index}@hubspot.com`,
+    });
+  }
+
+  return result;
+}
+
+function PaginatedTable() {
+  const ITEMS_PER_PAGE = 10;
+  const data = generateData(30);
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const pageCount = data.length / ITEMS_PER_PAGE;
+
+  const dataToDisplay = data.slice(
+    (currentPage - 1) * ITEMS_PER_PAGE,
+    currentPage * ITEMS_PER_PAGE
+  );
+
+  return (
+    <Table
+      paginated={true}
+      pageCount={pageCount}
+      page={currentPage}
+      onPageChange={(nextPageNumber: number) => {
+        setCurrentPage(nextPageNumber);
+      }}
+    >
+      <TableHead>
+        <TableRow>
+          <TableHeader>Name</TableHeader>
+          <TableHeader>Email</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {dataToDisplay.map(({ name, email }) => {
+          console.log(name, email);
+          return (
+            <TableRow key={email}>
+              <TableCell>{name}</TableCell>
+              <TableCell>{email}</TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}
 ```
 ### TableBody
 
@@ -1160,13 +1334,17 @@ interface TextProps {
   format?: 'plaintext' | 'markdown';
   text: string;
   variant?: 'bodytext' | 'microcopy';
+  children: ReactNode;
+  tagName?: 'p' | 'span' | 'small';
 }
 ```
 | Prop | Type | Default | Description |
 | - | - | - | - |
 | `format` | `'plaintext' \| 'markdown'` `(optional)`| `'plaintext'`| Type of formatting for the display text. |
-| `text` | `string` | `N/A`| Text to be displayed as body text. If format is `"markdown"`, inline markdown elements (i.e. bold, italics, code, links) are supported |
+| `text` | `string` | `N/A`| Text to be displayed as body text iff format is `"markdown"`. Inline markdown elements (i.e. bold, italics, code, links) are supported |
+| `children` | `string` | `N/A`| Text to be displayed as body text iff format is `"plaintext"`. |
 | `variant` | `'bodytext' \| 'microcopy'` | `'bodytext`| Type of text to display |
+| `tagName` | `'p' \| 'small' \| 'span'` | `'bodytext`| Type of text element(tag) to display. |
 
 #### Markdown
 Markdown syntax supported in the component:

package/dist/coreComponents.d.ts

@@ -1,4 +1,4 @@
-import type { AlertProps, ButtonProps, ButtonRowProps, CardProps, DescriptionListProps, DescriptionListItemProps, DividerProps, FormProps, HeadingProps, ImageProps, InputProps, LoadingSpinnerProps, ProgressBarProps, SelectProps, TagProps, TextProps, TileProps, StackProps, StatisticsProps, StatisticsItemProps, StatisticsTrendProps, TableProps, TableElementProps } from './types';
+import type { AlertProps, ButtonProps, ButtonRowProps, CardProps, DescriptionListProps, DescriptionListItemProps, DividerProps, EmptyStateProps, ErrorStateProps, FormProps, HeadingProps, ImageProps, InputProps, LoadingSpinnerProps, ProgressBarProps, SelectProps, TagProps, TextProps, TileProps, StackProps, StatisticsProps, StatisticsItemProps, StatisticsTrendProps, TableProps, TableElementProps } from './types';
 declare const Alert: "Alert" & {
     readonly type?: "Alert" | undefined;
     readonly props?: AlertProps | undefined;
@@ -34,6 +34,16 @@ declare const Divider: "Divider" & {
     readonly props?: DividerProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Divider", DividerProps, true>>;
+declare const EmptyState: "EmptyState" & {
+    readonly type?: "EmptyState" | undefined;
+    readonly props?: EmptyStateProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"EmptyState", EmptyStateProps, true>>;
+declare const ErrorState: "ErrorState" & {
+    readonly type?: "ErrorState" | undefined;
+    readonly props?: ErrorStateProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"ErrorState", ErrorStateProps, true>>;
 declare const Form: "Form" & {
     readonly type?: "Form" | undefined;
     readonly props?: FormProps | undefined;
@@ -139,4 +149,4 @@ declare const TableHead: "TableHead" & {
     readonly props?: TableElementProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"TableHead", TableElementProps, true>>;
-export { Alert, Button, ButtonRow, Card, DescriptionList, DescriptionListItem, Divider, Form, Heading, Image, Input, LoadingSpinner, ProgressBar, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, Table, TableFooter, TableCell, TableRow, TableBody, TableHeader, TableHead, Tag, Text, Tile, };
+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, Tile, };

package/dist/coreComponents.js

@@ -6,6 +6,8 @@ const Card = createRemoteReactComponent('Card');
 const DescriptionList = createRemoteReactComponent('DescriptionList');
 const DescriptionListItem = createRemoteReactComponent('DescriptionListItem');
 const Divider = createRemoteReactComponent('Divider');
+const EmptyState = createRemoteReactComponent('EmptyState');
+const ErrorState = createRemoteReactComponent('ErrorState');
 const Form = createRemoteReactComponent('Form');
 const Heading = createRemoteReactComponent('Heading');
 const Image = createRemoteReactComponent('Image');
@@ -27,4 +29,4 @@ const TableRow = createRemoteReactComponent('TableRow');
 const TableBody = createRemoteReactComponent('TableBody');
 const TableHeader = createRemoteReactComponent('TableHeader');
 const TableHead = createRemoteReactComponent('TableHead');
-export { Alert, Button, ButtonRow, Card, DescriptionList, DescriptionListItem, Divider, Form, Heading, Image, Input, LoadingSpinner, ProgressBar, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, Table, TableFooter, TableCell, TableRow, TableBody, TableHeader, TableHead, Tag, Text, Tile, };
+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, Tile, };

package/dist/crm/components.d.ts

@@ -1,7 +1,12 @@
-import { CrmPropertyListProps } from '../types';
+import { CrmAssociationsTableProps, CrmPropertyListProps } from '../types';
 declare const CrmPropertyList: "CrmPropertyList" & {
     readonly type?: "CrmPropertyList" | undefined;
     readonly props?: CrmPropertyListProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"CrmPropertyList", CrmPropertyListProps, true>>;
-export { CrmPropertyList };
+declare const CrmAssociationsTable: "CrmAssociationsTable" & {
+    readonly type?: "CrmAssociationsTable" | undefined;
+    readonly props?: CrmAssociationsTableProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"CrmAssociationsTable", CrmAssociationsTableProps, true>>;
+export { CrmPropertyList, CrmAssociationsTable };

package/dist/crm/components.js

@@ -1,3 +1,4 @@
 import { createExtensionComponent } from '../utils/createExtensionComponent';
 const CrmPropertyList = createExtensionComponent('CrmPropertyList');
-export { CrmPropertyList };
+const CrmAssociationsTable = createExtensionComponent('CrmAssociationsTable');
+export { CrmPropertyList, CrmAssociationsTable };

package/dist/crm/index.d.ts

@@ -1,2 +1,2 @@
-import { CrmPropertyList } from './components';
-export { CrmPropertyList };
+import { CrmPropertyList, CrmAssociationsTable } from './components';
+export { CrmPropertyList, CrmAssociationsTable };

package/dist/crm/index.js

@@ -1,2 +1,2 @@
-import { CrmPropertyList } from './components';
-export { CrmPropertyList };
+import { CrmPropertyList, CrmAssociationsTable } from './components';
+export { CrmPropertyList, CrmAssociationsTable };

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export { Alert, Button, ButtonRow, Card, DescriptionList, DescriptionListItem, Divider, Form, Heading, Image, Input, LoadingSpinner, ProgressBar, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, Table, TableFooter, TableCell, TableRow, TableBody, TableHeader, TableHead, Tag, Text, Tile, } from './coreComponents';
+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, Tile, } from './coreComponents';
 export { hubspot } from './hubspot';
 export * from './types';

package/dist/index.js

@@ -1,3 +1,3 @@
-export { Alert, Button, ButtonRow, Card, DescriptionList, DescriptionListItem, Divider, Form, Heading, Image, Input, LoadingSpinner, ProgressBar, Select, Stack, Statistics, StatisticsItem, StatisticsTrend, Table, TableFooter, TableCell, TableRow, TableBody, TableHeader, TableHead, Tag, Text, Tile, } from './coreComponents';
+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, Tile, } from './coreComponents';
 export { hubspot } from './hubspot';
 export * from './types';

package/dist/types.d.ts

@@ -31,9 +31,23 @@ export interface DescriptionListProps {
 export interface DividerProps {
     distance?: 'flush' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
 }
+export interface EmptyStateProps {
+    flush?: boolean;
+    children: ReactNode;
+    title?: string;
+    layout?: 'horizontal' | 'vertical';
+    reverseOrder?: boolean;
+    imageWidth?: number;
+}
+export interface ErrorStateProps {
+    children: ReactNode;
+    title?: string;
+    type?: 'error' | 'support' | 'lock';
+}
+export type FormInputValues = Record<string, string | number>;
 export interface FormProps {
     children: ReactNode;
-    onSubmit?: () => void;
+    onSubmit?: (event: RemoteEvent<FormInputValues>) => void;
     preventDefault?: boolean;
 }
 export interface HeadingProps {
@@ -58,8 +72,10 @@ export interface InputProps {
     placeholder?: string;
     error?: boolean;
     validationMessage?: string;
-    onChange: (value: string) => void;
-    onInput: (value: string) => void;
+    onChange?: (value: string) => void;
+    onInput?: (value: string) => void;
+    onBlur?: (value: string) => void;
+    onFocus?: (value: string) => void;
 }
 export interface ProgressBarProps {
     title?: string;
@@ -72,7 +88,7 @@ export interface ProgressBarProps {
 export interface SelectProps {
     label: string;
     name: string;
-    value?: string | number | boolean;
+    value?: string | number;
     required?: boolean;
     readonly?: boolean;
     description?: string;
@@ -83,7 +99,7 @@ export interface SelectProps {
     onChange?: (value: SelectProps['value']) => void;
     options: {
         label: string;
-        value: string | number | boolean;
+        value: string | number;
     }[];
 }
 export interface TagProps {
@@ -91,11 +107,19 @@ export interface TagProps {
     onClick?: () => void;
     variant?: 'default' | 'warning' | 'success' | 'error';
 }
-export interface TextProps {
-    format?: 'plaintext' | 'markdown';
-    text: string;
+interface BaseTextProps {
     variant?: 'bodytext' | 'microcopy';
+    tagName?: 'p' | 'span' | 'small';
+}
+export interface PlainTextProps extends BaseTextProps {
+    format?: 'plaintext';
+    children: ReactNode;
 }
+export interface MarkdownTextProps extends BaseTextProps {
+    format: 'markdown';
+    text: string;
+}
+export type TextProps = PlainTextProps | MarkdownTextProps;
 export interface TileProps {
     children: ReactNode;
     flush?: boolean;
@@ -123,10 +147,10 @@ export interface Context {
     user: UserContext;
     portal: PortalContext;
 }
-type distanceOptions = 'flush' | 'small';
 export interface StackProps {
-    distance?: distanceOptions;
+    distance?: 'flush' | 'small' | 'extra-small' | 'medium' | 'large';
     children?: React.ReactNode;
+    direction?: 'row' | 'column';
 }
 export interface StatisticsTrendProps {
     value: string;
@@ -141,10 +165,6 @@ export interface StatisticsItemProps {
 export interface StatisticsProps {
     children: ReactNode;
 }
-export interface CrmPropertyListProps {
-    properties: string[];
-    direction?: string;
-}
 export interface ServerlessRunnerParams {
     name: string;
     payload: Record<string, unknown>;
@@ -209,8 +229,33 @@ export interface CrmMiddleExtensionPoint extends ExtensionPointContract {
     };
     customComponents: {
         CrmPropertyList?: ComponentType<CrmPropertyListProps>;
+        CrmAssociationsTable?: ComponentType<CrmAssociationsTableProps>;
     };
 }
+export interface CrmPropertyListProps {
+    properties: string[];
+    direction?: string;
+}
+type CrmSortDescriptor = {
+    columnName: string;
+    direction: 1 | -1;
+};
+interface CrmSearchFilter {
+    operator: 'EQ' | 'NEQ' | 'LT' | 'LTE' | 'GT' | 'GTE' | 'BETWEEN' | 'IN' | 'NOT_IN' | 'HAS_PROPERTY' | 'NOT_HAS_PROPERTY' | 'ROLLING_DATE_RANGE' | 'TIME_UNIT_TO_DATE';
+    value?: string | number;
+    highValue?: string | number;
+    property: string;
+}
+export interface CrmAssociationsTableProps {
+    objectTypeId: string;
+    propertyColumns: Array<string>;
+    quickFilterProperties?: Array<string>;
+    searchable?: boolean;
+    pagination?: boolean;
+    pageSize?: number;
+    preFilters?: Array<CrmSearchFilter>;
+    sort?: Array<CrmSortDescriptor>;
+}
 interface CrmSidebarExtensionPoint extends ExtensionPointContract {
     actions: {
         reloadPage: ReloadPageAction;
@@ -256,8 +301,29 @@ export interface LoadingSpinnerProps {
 export interface TableElementProps {
     children: React.ReactNode;
 }
-export interface TableProps extends TableElementProps {
-    flush?: boolean;
+interface BaseTableProps {
     bordered?: boolean;
+    flush?: boolean;
+    children: React.ReactNode;
+}
+export interface TableNoPaginatedProps extends BaseTableProps {
+    paginated?: false;
+}
+export interface TablePaginatedProps extends BaseTableProps {
+    paginated: true;
+    pageCount: number;
+    onPageChange: (pageNumber: number) => void;
+    showButtonLabels?: boolean;
+    showFirstLastButtons?: boolean;
+    maxVisiblePageButtons?: number;
+    page?: number;
+}
+export type TableProps = TableNoPaginatedProps | TablePaginatedProps;
+export declare class RemoteEvent<V> {
+    type: string;
+    bubbles: boolean;
+    timeStamp: number;
+    targetValue: V;
+    constructor(value: V, event: Event);
 }
 export {};

package/dist/types.js

@@ -1 +1,12 @@
-export {};
+export class RemoteEvent {
+    type;
+    bubbles;
+    timeStamp;
+    targetValue;
+    constructor(value, event) {
+        this.bubbles = event.bubbles;
+        this.type = event.type;
+        this.timeStamp = event.timeStamp;
+        this.targetValue = value;
+    }
+}

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.0.1-prealpha.5",
+  "version": "0.0.1-prealpha.6",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "clean": "rm -rf dist/",
-    "prepare": "npm run clean && tsc",
-    "watch": "npm run clean && tsc --watch"
+    "build": "npm run clean && tsc",
+    "watch": "npm run clean && tsc --watch",
+    "prepare": "npm run build"
   },
   "files": [
     "dist/**/*"
@@ -47,5 +48,5 @@
   "devDependencies": {
     "typescript": "5.0.4"
   },
-  "gitHead": "a4652eb58cbde813dbebc8b7127c36102b9b6ed6"
+  "gitHead": "1dfa4048c08a39c6f50a5f87e92eddf1b19dde5c"
 }