@hubspot/ui-extensions 0.10.0 → 0.11.0

package/dist/types.d.ts

@@ -1,5 +1,15 @@
-import { ReactNode, ComponentType } from 'react';
+import { ReactNode, ComponentType, ReactElement } from 'react';
 import { RemoteFragment } from '@remote-ui/core';
+export type UnknownComponentProps = Record<string, any>;
+/**
+ * Represents a HubSpot-provided React component.
+ */
+export type HubSpotReactComponent<TProps extends UnknownComponentProps = UnknownComponentProps> = ComponentType<TProps>;
+/**
+ * Represents a fragment property for a HubSpot-provided React component that accepts a React.ReactElement, string, or null.
+ * NOTE: UI extension components do _not_ support arrays as a fragment property values.
+ */
+export type HubSpotReactFragmentProp = ReactElement | string | null;
 export declare class ExtensionEvent {
     type: string;
     bubbles: boolean;
@@ -670,6 +680,9 @@ export interface DividerProps {
      */
     distance?: AllDistances;
 }
+/**
+ * @deprecated This type is deprecated and will be removed in a future release. Please use the `DropdownButtonItem` component instead.
+ */
 export interface DropdownOption {
     /**
      * Text to be displayed as the menu item text.
@@ -684,6 +697,25 @@ export interface DropdownOption {
      */
     onClick?: () => void;
 }
+/**
+ * The props type for {@link !components.DropdownButtonItem}.
+ *
+ * @category Component Props
+ */
+export interface DropdownButtonItemProps extends OverlayComponentProps {
+    /**
+     * Text to be displayed as the menu item text.
+     * Can also accept ReactNode for more complex content.
+     */
+    children: ReactNode;
+    /**
+     * A function that will be invoked when the item is clicked.
+     * It receives no arguments and its return value is ignored.
+     *
+     * @event
+     */
+    onClick?: ReactionsHandler<ExtensionEvent>;
+}
 /**
  * The props type for {@link !components.Dropdown}.
  *
@@ -693,8 +725,12 @@ export interface DropdownProps {
     /**
      * The list of options to be rendered within the dropdown menu.
      * Each option represents an entry in the Dropdown.
+     *
+     * @deprecated This prop is deprecated and will be removed in a future release.
+     * Use child components instead to define dropdown menu items. For example,
+     * use `<Dropdown.ButtonItem>` to render an action button within a dropdown menu.
      */
-    options: DropdownOption[];
+    options?: DropdownOption[];
     /**
      * Controls the appearance of the dropdown button
      *
@@ -719,7 +755,12 @@ export interface DropdownProps {
      * @defaultValue `false`
      */
     disabled?: boolean;
+    /**
+     * Sets the content that will render inside the Dropdown. You have to use `DropdownOption` component as a child of the `Dropdown` component.
+     */
+    children?: ReactNode;
 }
+export type EmptyStateImageName = 'addOnReporting' | 'announcement' | 'api' | 'automatedTesting' | 'beta' | 'building' | 'callingSetUp' | 'companies' | 'components' | 'cone' | 'contacts' | 'contentStrategy' | 'customObjects' | 'customerExperience' | 'customerSupport' | 'deals' | 'developerSecurityUpdate' | 'electronicSignature' | 'electronicSignatureEmptyState' | 'emailConfirmation' | 'emptyStateCharts' | 'idea' | 'integrations' | 'leads' | 'lock' | 'meetings' | 'missedGoal' | 'multipleObjects' | 'object' | 'productsShoppingCart' | 'registration' | 'sandboxAddOn' | 'social' | 'store' | 'storeDisabled' | 'successfullyConnectedEmail' | 'target' | 'task' | 'tickets' | 'voteAndSearch';
 /**
  * The props type for {@link !components.EmptyState}.
  *
@@ -762,6 +803,12 @@ export interface EmptyStateProps {
      * @defaultValue `250`
      */
     imageWidth?: number;
+    /**
+     * The name of the image to display.
+     *
+     * @defaultValue `"emptyStateCharts"`
+     */
+    imageName?: EmptyStateImageName;
 }
 /**
  * The props type for {@link !components.ErrorState}.
@@ -830,12 +877,19 @@ export interface HeadingProps {
      */
     inline?: boolean;
 }
+export type IconColor = 'alert' | 'warning' | 'success' | 'inherit';
 /**
  * The props type for {@link !components.Icon}.
  *
  * @category Component Props
  */
 export interface IconProps {
+    /**
+     * Sets the icon color. By default, the icon will use `inherit`, which inherits the color from its parent element.
+     *
+     * @defaultValue `"inherit"`
+     */
+    color?: IconColor;
     /**
      * Sets the specific icon to display.
      */
@@ -1448,6 +1502,38 @@ export interface InlineProps {
      */
     gap?: AllDistances;
 }
+/**
+ * The props type for {@link !components.AutoGrid}.
+ *
+ * @category Component Props
+ */
+export interface AutoGridProps {
+    /**
+     * Sets the width of each column in the grid.
+     * When `flexible` is true, columns will be at least this width (or collapse to container width if smaller), then expand equally to fill available space.
+     * When `flexible` is false, columns are exactly this width.
+     */
+    columnWidth: number;
+    /**
+     * Sets the spacing between grid items.
+     *
+     * @defaultValue `"flush"`
+     */
+    gap?: AllDistances;
+    /**
+     * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
+     *
+     */
+    children?: ReactNode;
+    /**
+     * Whether columns should expand to fill available space.
+     * When true, columns will be at least `columnWidth` but grow equally to fill the container.
+     * When false, columns are exactly `columnWidth`.
+     *
+     * @defaultValue `false`
+     */
+    flexible?: boolean;
+}
 /**
  * The props type for {@link !components.Link}.
  *
@@ -1820,7 +1906,7 @@ export interface MultiSelectProps extends BaseSelectProps {
      * The value of the select input.
      *
      */
-    value?: (string | number)[];
+    value?: (string | number | boolean)[];
     /**
      * A callback function that is invoked when the value is committed.
      *
@@ -1834,7 +1920,7 @@ export interface MultiSelectProps extends BaseSelectProps {
         /** Will be used as the display text. **/
         label: string;
         /** Should be the option's unique identifier, which is submitted with the form. **/
-        value: string | number;
+        value: string | number | boolean;
     }[];
 }
 /**

package/dist/types.js

@@ -1,6 +1,3 @@
-// ============================================
-// From: shared.ts
-// ============================================
 export class ExtensionEvent {
     type;
     bubbles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -24,15 +24,12 @@
   "exports": {
     ".": "./dist/index.js",
     "./crm": "./dist/crm/index.js",
-    "./pages/home": "./dist/pages/home/components.js",
-    "./experimental": "./dist/experimental/index.js",
-    "./experimental/testing": "./dist/experimental/testing/index.js",
-    "./experimental/testing/jest-matchers": "./dist/experimental/testing/jest/matchers/index.js"
+    "./pages/home": "./dist/pages/home/index.js",
+    "./experimental": "./dist/experimental/index.js"
   },
   "license": "MIT",
   "dependencies": {
     "@remote-ui/react": "5.0.2",
-    "@remote-ui/testing": "1.4.3",
     "react": "18.2.0"
   },
   "engines": {
@@ -72,5 +69,5 @@
   "tsd": {
     "directory": "src/__tests__/test-d"
   },
-  "gitHead": "34ce86d7cfaa1f163bf67838bbb56c054d0f72cc"
+  "gitHead": "aeebbd7fb6aefc9aeb948cc9ca4028e94d5320cc"
 }

package/dist/crm/components.js

@@ -1,15 +0,0 @@
-import { createExtensionComponent } from '../utils/createExtensionComponent';
-const CrmPropertyList = createExtensionComponent('CrmPropertyList');
-const CrmAssociationTable = createExtensionComponent('CrmAssociationTable');
-const CrmDataHighlight = createExtensionComponent('CrmDataHighlight');
-const CrmReport = createExtensionComponent('CrmReport');
-const CrmAssociationPivot = createExtensionComponent('CrmAssociationPivot');
-const CrmAssociationPropertyList = createExtensionComponent('CrmAssociationPropertyList');
-const CrmAssociationStageTracker = createExtensionComponent('CrmAssociationStageTracker');
-const CrmSimpleDeadline = createExtensionComponent('CrmSimpleDeadline');
-const CrmStageTracker = createExtensionComponent('CrmStageTracker');
-const CrmStatistics = createExtensionComponent('CrmStatistics');
-const CrmActionButton = createExtensionComponent('CrmActionButton');
-const CrmActionLink = createExtensionComponent('CrmActionLink');
-const CrmCardActions = createExtensionComponent('CrmCardActions');
-export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmAssociationStageTracker, CrmSimpleDeadline, CrmStageTracker, CrmStatistics, CrmActionButton, CrmActionLink, CrmCardActions, };

package/dist/experimental/testing/index.d.ts

@@ -1,14 +0,0 @@
-import { type RootNode, type Node } from '@remote-ui/testing';
-import type { ReactNode } from 'react';
-type CoreComponentName = keyof typeof import('../../coreComponents');
-type CrmComponentName = keyof typeof import('../../crm');
-interface HubSpotRoot extends RootNode<unknown> {
-    findByName: (name: CoreComponentName | CrmComponentName) => ReturnType<Node<unknown>['find']>;
-}
-interface RenderReturn {
-    extension: HubSpotRoot;
-    flushAsync: () => Promise<void>;
-}
-/** @experimental This function is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
-export declare function render(ui: ReactNode): RenderReturn;
-export {};

package/dist/experimental/testing/index.js

@@ -1,33 +0,0 @@
-import { createRoot } from '@remote-ui/react';
-import { mount } from '@remote-ui/testing';
-/** @experimental This function is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
-export function render(ui) {
-    const mountedExtension = mount((coreRemoteRoot) => {
-        // create the react appliction to render remote react component
-        createRoot(coreRemoteRoot).render(ui);
-    });
-    function findByName(name) {
-        return mountedExtension.find(name);
-    }
-    // @ts-expect-error ts doesn't know the type of object that we are forwarding to
-    const extension = new Proxy({ findByName }, //target object
-    {
-        // traps and modifies calls to target object
-        get(target, key, receiver) {
-            // if target object has the key, invoke.
-            if (Reflect.ownKeys(target).includes(key)) {
-                return Reflect.get(target, key, receiver);
-            }
-            // if our target object doesn't have the key, pass to the extension
-            return Reflect.get(mountedExtension, key);
-        },
-    });
-    function flushAsync() {
-        // the promise with the setTimeout is what flushes the promise stack
-        return new Promise((resolve) => setTimeout(resolve, 0)).then(() => {
-            // the act call on the extension forces the UI to update
-            mountedExtension.act(() => null);
-        });
-    }
-    return { extension, flushAsync };
-}

package/dist/experimental/testing/jest/matchers/index.d.ts

@@ -1,6 +0,0 @@
-/**
- * Direct re-export of shopify matchers. This is a great way
- * to enable internal testing but I don't think it's how we should ship to
- * customers because error messages make reference to shopify internals.
- */
-export * from '@remote-ui/testing/matchers';

package/dist/experimental/testing/jest/matchers/index.js

@@ -1,6 +0,0 @@
-/**
- * Direct re-export of shopify matchers. This is a great way
- * to enable internal testing but I don't think it's how we should ship to
- * customers because error messages make reference to shopify internals.
- */
-export * from '@remote-ui/testing/matchers';

package/dist/utils/createExtensionComponent.d.ts

@@ -1,3 +0,0 @@
-import type { RemoteComponentType } from '@remote-ui/core';
-import type { ReactComponentTypeFromRemoteComponentType } from '@remote-ui/react';
-export declare function createExtensionComponent<ComponentType extends string, Props = Record<string, never>, AllowedChildren extends RemoteComponentType<string, any> | boolean = true>(componentType: ComponentType | RemoteComponentType<ComponentType, Props, AllowedChildren>): RemoteComponentType<ComponentType, Props, AllowedChildren> & ReactComponentTypeFromRemoteComponentType<RemoteComponentType<ComponentType, Props, AllowedChildren>>;

package/dist/utils/createExtensionComponent.js

@@ -1,4 +0,0 @@
-import { createRemoteReactComponent } from '@remote-ui/react';
-export function createExtensionComponent(componentType) {
-    return createRemoteReactComponent(componentType);
-}