@hubspot/ui-extensions 0.8.50 → 0.8.52

package/dist/coreComponents.d.ts

@@ -721,3 +721,53 @@ export declare const LineChart: "LineChart" & {
     readonly props?: types.ChartProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"LineChart", types.ChartProps, true>>;
+/**
+ * `Tabs` allow you to group related content in a compact space, allowing users to switch between views without leaving the page.
+ * @example
+ * ```tsx
+ * <Tabs defaultSelected="1">
+ *   <Tab tabId="1">First tab content</Tab>
+ *   <Tab tabId="2">Second tab content</Tab>
+ * </Tabs>
+ * ```
+ *
+ * **Links:**
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tabs Documentation}
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/tabs-example Tabs Example}
+ */
+export declare const Tabs: "Tabs" & {
+    readonly type?: "Tabs" | undefined;
+    readonly props?: types.TabsProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Tabs", types.TabsProps, true>>;
+/**
+ * Each `Tab` represents a single tab (or "view") within the parent `Tabs` component.
+ * @example
+ * ```tsx
+ * <Tabs defaultSelected="1">
+ *   <Tab tabId="1">First tab content</Tab>
+ *   <Tab tabId="2">Second tab content</Tab>
+ * </Tabs>
+ * ```
+ *
+ * **Links:**
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tabs Documentation}
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/tabs-example Tabs Example}
+ */
+export declare const Tab: "Tab" & {
+    readonly type?: "Tab" | undefined;
+    readonly props?: types.TabProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Tab", types.TabProps, true>>;
+/**
+ * The `Illustration` component renders an illustration.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/illustration Illustration Docs}
+ */
+export declare const Illustration: "Illustration" & {
+    readonly type?: "Illustration" | undefined;
+    readonly props?: types.IllustrationProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Illustration", types.IllustrationProps, true>>;

package/dist/coreComponents.js

@@ -481,3 +481,41 @@ export const BarChart = createRemoteReactComponent('BarChart');
  * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/charts-example Charts Example}
  */
 export const LineChart = createRemoteReactComponent('LineChart');
+/**
+ * `Tabs` allow you to group related content in a compact space, allowing users to switch between views without leaving the page.
+ * @example
+ * ```tsx
+ * <Tabs defaultSelected="1">
+ *   <Tab tabId="1">First tab content</Tab>
+ *   <Tab tabId="2">Second tab content</Tab>
+ * </Tabs>
+ * ```
+ *
+ * **Links:**
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tabs Documentation}
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/tabs-example Tabs Example}
+ */
+export const Tabs = createRemoteReactComponent('Tabs');
+/**
+ * Each `Tab` represents a single tab (or "view") within the parent `Tabs` component.
+ * @example
+ * ```tsx
+ * <Tabs defaultSelected="1">
+ *   <Tab tabId="1">First tab content</Tab>
+ *   <Tab tabId="2">Second tab content</Tab>
+ * </Tabs>
+ * ```
+ *
+ * **Links:**
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/tabs Documentation}
+ * - {@link https://github.com/HubSpot/ui-extensions-examples/tree/main/tabs-example Tabs Example}
+ */
+export const Tab = createRemoteReactComponent('Tab');
+/**
+ * The `Illustration` component renders an illustration.
+ *
+ * **Links:**
+ *
+ * - {@link https://developers.hubspot.com/docs/reference/ui-components/standard-components/illustration Illustration Docs}
+ */
+export const Illustration = createRemoteReactComponent('Illustration');

package/dist/experimental/index.d.ts

@@ -7,26 +7,6 @@ declare const Iframe: "Iframe" & {
     readonly props?: types.IframeProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Iframe", types.IframeProps, true>>;
-/** @experimental */
-export declare const Tab: "Tab" & {
-    readonly type?: "Tab" | undefined;
-    readonly props?: experimentalTypes.TabProps | undefined;
-    readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Tab", experimentalTypes.TabProps, true>>;
-/** @experimental */
-export declare const Tabs: "Tabs" & {
-    readonly type?: "Tabs" | undefined;
-    readonly props?: experimentalTypes.TabsProps | undefined;
-    readonly children?: ("Tab" & {
-        readonly type?: "Tab" | undefined;
-        readonly props?: experimentalTypes.TabProps | undefined;
-        readonly children?: true | undefined;
-    } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Tab", experimentalTypes.TabProps, true>>) | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Tabs", experimentalTypes.TabsProps, "Tab" & {
-    readonly type?: "Tab" | undefined;
-    readonly props?: experimentalTypes.TabProps | undefined;
-    readonly children?: true | undefined;
-} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Tab", experimentalTypes.TabProps, true>>>>;
 /** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
 declare const MediaObject: "MediaObject" & {
     readonly type?: "MediaObject" | undefined;

package/dist/experimental/index.js

@@ -2,10 +2,6 @@ import { createRemoteReactComponent } from '@remote-ui/react';
 export { useCrmProperties } from './hooks/useCrmProperties';
 /** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
 const Iframe = createRemoteReactComponent('Iframe');
-/** @experimental */
-export const Tab = createRemoteReactComponent('Tab');
-/** @experimental */
-export const Tabs = createRemoteReactComponent('Tabs');
 /** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
 const MediaObject = createRemoteReactComponent('MediaObject', {
     fragmentProps: ['itemRight', 'itemLeft'],

package/dist/experimental/types.d.ts

@@ -1,68 +1,6 @@
 import type { ReactNode } from 'react';
 import type { RemoteFragment } from '@remote-ui/core';
 import type { AllDistances, ExtensionEvent, ReactionsHandler } from '../types';
-/**
- * @ignore
- * @experimental do not use in production
- */
-export interface TabsProps {
-    /**
-     * Sets the content that will render inside the component.
-     */
-    children?: ReactNode;
-    /**
-     * Callback when the selected tab changes.
-     */
-    onSelectedChange?: (selectedId: string | number) => 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;
-}
-/**
- * @ignore
- * @experimental do not use in production
- */
-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';
-}
 /**
  * @ignore
  * @experimental do not use in production

package/dist/types.d.ts

@@ -1256,8 +1256,8 @@ export type TextProps = {
     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.
+     * 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.
@@ -1798,6 +1798,7 @@ export interface CrmHostActions {
 export interface UiePlatformActions {
     copyTextToClipboard: Clipboard['writeText'];
     closeOverlay: CloseOverlayAction;
+    reloadPage: ReloadPageAction;
 }
 /** @ignore */
 export interface StandardCrmExtensionPoint extends ExtensionPointContract {
@@ -2772,4 +2773,111 @@ export type ProxyMetadata = {
     userId?: number;
     portalId?: number;
 };
+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';
+}
+/**
+ * The props type for {@link !components.Illustration}.
+ *
+ * @category Component Props
+ */
+export interface IllustrationProps {
+    name: IllustrationNames;
+    alt: string;
+    width?: number;
+    height?: number;
+}
+export declare const illustrationNames: {
+    readonly lock: "lock";
+    readonly unlock: "unlock";
+    readonly electronicSignature: "electronic-signature";
+    readonly electronicSignatureEmptyState: "electronic-signature-empty-state";
+    readonly callingSetUp: "calling-set-up";
+    readonly companies: "companies";
+    readonly contacts: "contacts";
+    readonly multipleObjects: "multiple-objects";
+    readonly object: "object";
+    readonly task: "task";
+    readonly deals: "deals";
+    readonly registration: "registration";
+    readonly developerSecurityUpdate: "developer-security-update";
+    readonly social: "social";
+    readonly leads: "leads";
+    readonly target: "target";
+    readonly emailConfirmation: "email-confirmation";
+    readonly successfullyConnectedEmail: "successfully-connected-email";
+    readonly contentStrategy: "content-strategy";
+    readonly addOnReporting: "add-on-reporting";
+    readonly productsShoppingCart: "products-shopping-cart";
+    readonly store: "store";
+    readonly storeDisabled: "store-disabled";
+    readonly customerSupport: "customer-support";
+    readonly customerExperience: "customer-experience";
+    readonly api: "api";
+    readonly integrations: "integrations";
+    readonly sandboxAddOn: "sandbox-add-on";
+    readonly customObjects: "custom-objects";
+    readonly paymentsButton: "payments-button";
+    readonly automatedTesting: "automated-testing";
+    readonly middlePaneCards: "middle-pane-cards";
+    readonly propertiesSidebar: "properties-sidebar";
+    readonly emptyStateCharts: "empty-state-charts";
+    readonly meetings: "meetings-small";
+    readonly tickets: "ticket-small";
+    readonly sidebar: "settings-sidebar";
+    readonly errorGeneral: "errors/general";
+    readonly errorHourglass: "errors/hourglass";
+};
+export type IllustrationNames = keyof typeof illustrationNames;
 export {};

package/dist/types.js

@@ -198,3 +198,46 @@ export class RemoteEvent {
         this.targetValue = value;
     }
 }
+export const illustrationNames = {
+    // Standard 1:1 mappings
+    lock: 'lock',
+    unlock: 'unlock',
+    electronicSignature: 'electronic-signature',
+    electronicSignatureEmptyState: 'electronic-signature-empty-state',
+    callingSetUp: 'calling-set-up',
+    companies: 'companies',
+    contacts: 'contacts',
+    multipleObjects: 'multiple-objects',
+    object: 'object',
+    task: 'task',
+    deals: 'deals',
+    registration: 'registration',
+    developerSecurityUpdate: 'developer-security-update',
+    social: 'social',
+    leads: 'leads',
+    target: 'target',
+    emailConfirmation: 'email-confirmation',
+    successfullyConnectedEmail: 'successfully-connected-email',
+    contentStrategy: 'content-strategy',
+    addOnReporting: 'add-on-reporting',
+    productsShoppingCart: 'products-shopping-cart',
+    store: 'store',
+    storeDisabled: 'store-disabled',
+    customerSupport: 'customer-support',
+    customerExperience: 'customer-experience',
+    api: 'api',
+    integrations: 'integrations',
+    sandboxAddOn: 'sandbox-add-on',
+    customObjects: 'custom-objects',
+    paymentsButton: 'payments-button',
+    automatedTesting: 'automated-testing',
+    middlePaneCards: 'middle-pane-cards',
+    propertiesSidebar: 'properties-sidebar',
+    emptyStateCharts: 'empty-state-charts',
+    // Special mappings that are not 1:1
+    meetings: 'meetings-small',
+    tickets: 'ticket-small',
+    sidebar: 'settings-sidebar',
+    errorGeneral: 'errors/general',
+    errorHourglass: 'errors/hourglass',
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.8.50",
+  "version": "0.8.52",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -60,5 +60,5 @@
     "react-reconciler": "^0.29.0",
     "typescript": "5.0.4"
   },
-  "gitHead": "0274315aed3fa8709f2ba403335e98316ceb7d2a"
+  "gitHead": "49d7e6ce23cf06a54cbe038f11bb1b5e57358254"
 }