@hubspot/ui-extensions 0.7.1 → 0.7.3

package/README.md

@@ -23,7 +23,7 @@ React components and utilities for extending HubSpot's UI.
 - [Input](#input)
 - [Link](#link)
 - [LoadingSpinner](#loadingspinner)
-- [Multiselect](#multiselect)
+- [MultiSelect](#multiselect)
 - [NumberInput](#numberInput)
 - [ProgressBar](#progressbar)
 - [Select](#select)
@@ -391,7 +391,15 @@ interface DateInputProps {
   max?: { year: number; month: number; date: number };
   minValidationMessage?: string;
   maxValidationMessage?: string;
-  format?: 'YYYY-MM-DD' | 'L' | 'LL' | 'll';
+  format?:
+    | 'YYYY-MM-DD'
+    | 'L'
+    | 'LL'
+    | 'll'
+    | 'short'
+    | 'long'
+    | 'medium'
+    | 'standard';
   timezone?: 'userTz' | 'portalTz';
   clearButtonLabel?: string;
   todayButtonLabel?: string;
@@ -430,7 +438,6 @@ interface DateInputProps {
 - standard: `1986-09-04`
 - L: `09/04/1986`
 - LL: `September 4, 1986`
-- l: `9/4/1986`
 - ll : `Sep 4, 1986`
 - YYYY-MM-DD: `1986-09-04`
 
@@ -999,10 +1006,10 @@ const Extension = () => {
   return <LoadingSpinner label="Loading..." />;
 };
 ```
-### Multiselect
+### MultiSelect
 
 ```javascript
-import { Multiselect } from '@hubspot/ui-extensions';
+import { MultiSelect } from '@hubspot/ui-extensions';
 ```
 
 ### Props

package/dist/crm/components.d.ts

@@ -1,4 +1,4 @@
-import { CrmAssociationPivotProps, CrmAssociationTableProps, CrmDataHighlightProps, CrmObjectPropertyProps, CrmPropertyListProps, CrmReportProps, CrmAssociationPropertyListProps, CrmStageTrackerProps } from '../types';
+import { CrmAssociationPivotProps, CrmAssociationTableProps, CrmDataHighlightProps, CrmObjectPropertyProps, CrmPropertyListProps, CrmReportProps, CrmAssociationPropertyListProps, CrmStageTrackerProps, CrmActionButtonProps, CrmActionLinkProps, CrmCardActionsProps } from '../types';
 declare const CrmObjectProperty: "CrmObjectProperty" & {
     readonly type?: "CrmObjectProperty" | undefined;
     readonly props?: CrmObjectPropertyProps | undefined;
@@ -39,4 +39,19 @@ declare const CrmStageTracker: "CrmStageTracker" & {
     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, };
+declare const CrmActionButton: "CrmActionButton" & {
+    readonly type?: "CrmActionButton" | undefined;
+    readonly props?: CrmActionButtonProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"CrmActionButton", CrmActionButtonProps, true>>;
+declare const CrmActionLink: "CrmActionLink" & {
+    readonly type?: "CrmActionLink" | undefined;
+    readonly props?: CrmActionLinkProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"CrmActionLink", CrmActionLinkProps, true>>;
+declare const CrmCardActions: "CrmCardActions" & {
+    readonly type?: "CrmCardActions" | undefined;
+    readonly props?: CrmCardActionsProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"CrmCardActions", CrmCardActionsProps, true>>;
+export { CrmObjectProperty, CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmStageTracker, CrmActionButton, CrmActionLink, CrmCardActions, };

package/dist/crm/components.js

@@ -7,4 +7,7 @@ const CrmReport = createExtensionComponent('CrmReport');
 const CrmAssociationPivot = createExtensionComponent('CrmAssociationPivot');
 const CrmAssociationPropertyList = createExtensionComponent('CrmAssociationPropertyList');
 const CrmStageTracker = createExtensionComponent('CrmStageTracker');
-export { CrmObjectProperty, CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmStageTracker, };
+const CrmActionButton = createExtensionComponent('CrmActionButton');
+const CrmActionLink = createExtensionComponent('CrmActionLink');
+const CrmCardActions = createExtensionComponent('CrmCardActions');
+export { CrmObjectProperty, CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmStageTracker, CrmActionButton, CrmActionLink, CrmCardActions, };

package/dist/crm/index.d.ts

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

package/dist/crm/index.js

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

package/dist/types.d.ts

@@ -350,6 +350,16 @@ export type AddAlertAction = (args: {
     type?: AlertType;
     message: string;
 }) => void;
+export type NotifyObjectUpdateAction = (args: {
+    objectTypeId: string;
+    objectId: string;
+}) => void;
+export type ListenForObjectUpdateAction = (args: {
+    callback: (args: {
+        objectTypeId: string;
+        objectId: string;
+    }) => void;
+}) => void;
 export type ReloadPageAction = () => void;
 export type FetchCrmObjectPropertiesAction = (properties: string[]) => Promise<Record<string, string>>;
 export type OpenIframeModalAction = (action: OpenIframeActionPayload) => void;
@@ -359,6 +369,8 @@ export interface CrmMiddleExtensionPoint extends ExtensionPointContract {
         reloadPage: ReloadPageAction;
         fetchCrmObjectProperties: FetchCrmObjectPropertiesAction;
         openIframeModal: OpenIframeModalAction;
+        notifyObjectUpdate?: NotifyObjectUpdateAction;
+        listenForObjectUpdate?: ListenForObjectUpdateAction;
     };
     customComponents: {
         CrmPropertyList: ComponentType<CrmPropertyListProps>;
@@ -369,6 +381,20 @@ export interface CrmMiddleExtensionPoint extends ExtensionPointContract {
         CrmObjectProperty?: ComponentType<CrmObjectPropertyProps>;
         CrmAssociationPropertyList?: ComponentType<CrmAssociationPropertyListProps>;
         CrmStageTracker?: ComponentType<CrmStageTrackerProps>;
+        CrmActionButton?: ComponentType<CrmActionButtonProps>;
+        CrmActionLink?: ComponentType<CrmActionLinkProps>;
+        CrmCardActions?: ComponentType<CrmCardActionsProps>;
+    };
+}
+export interface CrmSidebarExtensionPoint extends ExtensionPointContract {
+    actions: {
+        addAlert: AddAlertAction;
+        reloadPage: ReloadPageAction;
+        fetchCrmObjectProperties: FetchCrmObjectPropertiesAction;
+        openIframeModal: OpenIframeModalAction;
+    };
+    customComponents: {
+        [k: string]: never;
     };
 }
 export interface CrmDataHighlightProps {
@@ -432,11 +458,69 @@ export interface CrmStageTrackerProps {
     properties: Array<string>;
     showProperties?: boolean;
 }
-interface CrmSidebarExtensionPoint extends ExtensionPointContract {
-    actions: {
-        reloadPage: ReloadPageAction;
+interface ObjectCoordinates {
+    objectTypeId: string;
+    objectId: number;
+}
+interface OpenRecordAssociationFormArgs {
+    objectTypeId: string;
+    association: {
+        objectTypeId: string;
+        objectId: number;
     };
 }
+interface ActivityCreatorActionArgs {
+    objectTypeId: string;
+    objectId: number;
+    windowVariant?: 'windowed' | 'fullscreen';
+}
+interface ActionArgs {
+    PREVIEW_OBJECT: ObjectCoordinates;
+    ADD_NOTE: ActivityCreatorActionArgs;
+    SEND_EMAIL: ActivityCreatorActionArgs;
+    SCHEDULE_MEETING: ActivityCreatorActionArgs;
+    OPEN_RECORD_ASSOCIATION_FORM: OpenRecordAssociationFormArgs;
+}
+export type ArgsFor<SpecificActionType extends ActionType> = ActionArgs[SpecificActionType];
+export type ActionType = 'PREVIEW_OBJECT' | 'ADD_NOTE' | 'SEND_EMAIL' | 'SCHEDULE_MEETING' | 'OPEN_RECORD_ASSOCIATION_FORM';
+interface BaseActionComponent {
+    children: ReactNode;
+    actionType: ActionType;
+    actionContext: ArgsFor<ActionType>;
+    onError?: (errors: string[]) => void;
+}
+export interface CrmActionButtonProps extends BaseActionComponent {
+    variant?: 'primary' | 'secondary' | 'destructive';
+    type?: 'button' | 'reset' | 'submit';
+}
+export interface CrmActionLinkProps extends BaseActionComponent {
+    variant?: 'primary' | 'light' | 'dark' | 'destructive';
+}
+export interface ActionLibraryButtonCardActionConfig<SpecificActionType extends ActionType = ActionType> {
+    type: 'action-library-button';
+    actionType: SpecificActionType;
+    actionContext: ArgsFor<SpecificActionType>;
+    label?: string;
+    disabled?: boolean;
+    tooltipText?: string;
+}
+export type DropdownCardActionConfigOptions = [
+    ActionLibraryButtonCardActionConfig,
+    ...ActionLibraryButtonCardActionConfig[]
+];
+export interface DropdownCardActionConfig {
+    type: 'dropdown';
+    options: DropdownCardActionConfigOptions;
+    label?: string;
+    disabled?: boolean;
+    tooltipText?: string;
+}
+type ErrorHandler = (errors: string[]) => void;
+type CardActionConfig = ActionLibraryButtonCardActionConfig | DropdownCardActionConfig;
+export type CrmCardActionsProps = {
+    actionConfigs: Array<CardActionConfig>;
+    onError?: ErrorHandler;
+};
 interface RemotePlaygroundExtensionPoint extends ExtensionPointContract {
     actions: {
         warn: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -9,7 +9,9 @@
     "clean": "rm -rf dist/",
     "build": "npm run clean && tsc",
     "watch": "npm run clean && tsc --watch",
-    "prepare": "npm run build"
+    "prepare": "npm run build",
+    "lint": "echo 'No linter configured for @hubspot/ui-extensions'",
+    "test": "echo 'No tests configured for @hubspot/ui-extensions'"
   },
   "files": [
     "dist/**/*"
@@ -48,5 +50,5 @@
   "devDependencies": {
     "typescript": "5.0.4"
   },
-  "gitHead": "f3c6bfa9f758bdb23179e953a1826d1f0c3bd90f"
+  "gitHead": "663cfa5f4b81bb923da5e8679e5be5437d1ddd00"
 }