@hubspot/ui-extensions 0.11.0 → 0.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/dist/__synced__/remoteComponents.synced.d.ts +85 -354
  2. package/dist/__synced__/remoteComponents.synced.js +88 -83
  3. package/dist/__synced__/types/components/index.synced.d.ts +38 -38
  4. package/dist/__synced__/types/index.synced.d.ts +7 -7
  5. package/dist/__synced__/types/index.synced.js +1 -9
  6. package/dist/__synced__/types/shared.synced.d.ts +2 -3
  7. package/dist/__synced__/utils/remote-component-registry.synced.d.ts +80 -0
  8. package/dist/__synced__/utils/remote-component-registry.synced.js +64 -0
  9. package/dist/experimental/testing/internal/constants.d.ts +2 -0
  10. package/dist/experimental/testing/internal/constants.js +1 -0
  11. package/dist/experimental/testing/internal/debug.d.ts +8 -0
  12. package/dist/experimental/testing/internal/debug.js +10 -0
  13. package/dist/experimental/testing/internal/element.d.ts +11 -0
  14. package/dist/experimental/testing/internal/element.js +67 -0
  15. package/dist/experimental/testing/internal/errors.d.ts +44 -0
  16. package/dist/experimental/testing/internal/errors.js +52 -0
  17. package/dist/experimental/testing/internal/fragment.d.ts +8 -0
  18. package/dist/experimental/testing/internal/fragment.js +44 -0
  19. package/dist/experimental/testing/internal/print.d.ts +6 -0
  20. package/dist/experimental/testing/internal/print.js +114 -0
  21. package/dist/experimental/testing/internal/query.d.ts +57 -0
  22. package/dist/experimental/testing/internal/query.js +231 -0
  23. package/dist/experimental/testing/internal/root.d.ts +8 -0
  24. package/dist/experimental/testing/internal/root.js +44 -0
  25. package/dist/experimental/testing/internal/text.d.ts +9 -0
  26. package/dist/experimental/testing/internal/text.js +16 -0
  27. package/dist/experimental/testing/types.d.ts +1 -1
  28. package/dist/hubspot.d.ts +1 -1
  29. package/dist/index.d.ts +2 -2
  30. package/dist/index.js +2 -2
  31. package/dist/pages/home/index.d.ts +1 -1
  32. package/dist/pages/home/index.js +1 -1
  33. package/package.json +10 -5
  34. package/dist/coreComponents.d.ts +0 -848
  35. package/dist/coreComponents.js +0 -582
  36. package/dist/experimental/types.d.ts +0 -240
  37. package/dist/experimental/types.js +0 -5
  38. package/dist/types.d.ts +0 -3214
  39. package/dist/types.js +0 -244
package/dist/types.d.ts DELETED
@@ -1,3214 +0,0 @@
1
- import { ReactNode, ComponentType, ReactElement } from 'react';
2
- import { RemoteFragment } from '@remote-ui/core';
3
- export type UnknownComponentProps = Record<string, any>;
4
- /**
5
- * Represents a HubSpot-provided React component.
6
- */
7
- export type HubSpotReactComponent<TProps extends UnknownComponentProps = UnknownComponentProps> = ComponentType<TProps>;
8
- /**
9
- * Represents a fragment property for a HubSpot-provided React component that accepts a React.ReactElement, string, or null.
10
- * NOTE: UI extension components do _not_ support arrays as a fragment property values.
11
- */
12
- export type HubSpotReactFragmentProp = ReactElement | string | null;
13
- export declare class ExtensionEvent {
14
- type: string;
15
- bubbles: boolean;
16
- timeStamp: number;
17
- id: string;
18
- constructor(event: Event);
19
- }
20
- export declare class FormSubmitExtensionEvent<V> extends ExtensionEvent {
21
- targetValue: V;
22
- constructor(value: V, event: Event);
23
- }
24
- export type OverlayComponentProps = {
25
- overlay?: RemoteFragment;
26
- };
27
- export type HrefOptions = {
28
- url: string;
29
- external?: boolean;
30
- };
31
- export type HrefProp = string | HrefOptions;
32
- export interface TShirtSizes {
33
- xs: 'extra-small' | 'xs';
34
- sm: 'small' | 'sm';
35
- md: 'medium' | 'md';
36
- lg: 'large' | 'lg';
37
- xl: 'extra-large' | 'xl';
38
- }
39
- export type AllSizes = TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'] | TShirtSizes['lg'] | TShirtSizes['xl'];
40
- export type AllDistances = 'flush' | AllSizes;
41
- export declare const iconNames: {
42
- readonly success: "success";
43
- readonly remove: "remove";
44
- readonly add: "add";
45
- readonly attach: "attach";
46
- readonly date: "date";
47
- readonly copy: "duplicate";
48
- readonly delete: "delete";
49
- readonly edit: "edit";
50
- readonly email: "email";
51
- readonly exclamation: "exclamation";
52
- readonly question: "question";
53
- readonly home: "home";
54
- readonly location: "location";
55
- readonly upCarat: "upCarat";
56
- readonly downCarat: "downCarat";
57
- readonly warning: "warning";
58
- readonly shoppingCart: "cart";
59
- readonly clock: "time";
60
- readonly comment: "comments";
61
- readonly contact: "contacts";
62
- readonly star: "favorite";
63
- readonly file: "file";
64
- readonly reports: "reports";
65
- readonly video: "video";
66
- readonly robot: "simpleBot";
67
- readonly refresh: "refresh";
68
- readonly faceHappy: "emoji";
69
- readonly faceNeutral: "emojiLineNeutral";
70
- readonly faceSad: "emojiLineSad";
71
- readonly upload: "upload";
72
- readonly download: "download";
73
- readonly left: "left";
74
- readonly right: "right";
75
- readonly dataSync: "dataSync";
76
- readonly imageGallery: "imageGallery";
77
- readonly search: "search";
78
- readonly save: "saveEditableView";
79
- readonly notification: "notification";
80
- readonly bulb: "bulb";
81
- readonly settings: "settings";
82
- readonly filter: "filter";
83
- readonly gauge: "gauge";
84
- readonly enroll: "enroll";
85
- readonly generateChart: "generateChart";
86
- readonly gift: "gift";
87
- readonly flame: "highlyEngagedLead";
88
- readonly inbox: "inbox";
89
- readonly image: "insertImage";
90
- readonly quote: "insertQuote";
91
- readonly insertVideo: "insertVideo";
92
- readonly invoice: "invoice";
93
- readonly key: "key";
94
- readonly book: "knowledgeBase";
95
- readonly globe: "language";
96
- readonly lesson: "lesson";
97
- readonly link: "link";
98
- readonly listView: "listView";
99
- readonly locked: "locked";
100
- readonly mention: "mention";
101
- readonly messages: "messages";
102
- readonly mobile: "mobile";
103
- readonly notificationOff: "notificationOff";
104
- readonly hash: "numericDataType";
105
- readonly objectAssociations: "objectAssociations";
106
- readonly objectAssociationsManyToMany: "objectAssociationsManyToMany";
107
- readonly objectAssociationsManyToOne: "objectAssociationsManyToOne";
108
- readonly office365: "office365";
109
- readonly order: "order";
110
- readonly paymentSubscriptions: "paymentSubscriptions";
111
- readonly product: "product";
112
- readonly powerPointFile: "powerPointFile";
113
- readonly presentation: "presentation";
114
- readonly publish: "publish";
115
- readonly questionAnswer: "questionAnswer";
116
- readonly quickbooks: "quickbooks";
117
- readonly readMore: "readMore";
118
- readonly realEstateListing: "realEstateListing";
119
- readonly readOnlyView: "readOnlyView";
120
- readonly recentlySelected: "recentlySelected";
121
- readonly record: "record";
122
- readonly redo: "redo";
123
- readonly undo: "undo";
124
- readonly registration: "registration";
125
- readonly replace: "replace";
126
- readonly rotate: "rotate";
127
- readonly salesQuote: "salesQuote";
128
- readonly salesTemplates: "salesTemplates";
129
- readonly sequences: "sequences";
130
- readonly spellCheck: "spellCheck";
131
- readonly strike: "strike";
132
- readonly tablet: "tablet";
133
- readonly tag: "tag";
134
- readonly tasks: "tasks";
135
- readonly test: "test";
136
- readonly ticket: "ticket";
137
- readonly thumbsUp: "thumbsUp";
138
- readonly thumbsDown: "thumbsDown";
139
- readonly translate: "translate";
140
- readonly trophy: "trophy";
141
- readonly videoFile: "videoFile";
142
- readonly videoPlayerSubtitles: "videoPlayerSubtitles";
143
- readonly view: "view";
144
- readonly viewDetails: "viewDetails";
145
- readonly website: "website";
146
- readonly workflows: "workflows";
147
- readonly zoomIn: "zoomIn";
148
- readonly zoomOut: "zoomOut";
149
- readonly goal: "goal";
150
- readonly campaigns: "campaigns";
151
- readonly cap: "cap";
152
- readonly block: "block";
153
- readonly bank: "bank";
154
- readonly approvals: "approvals";
155
- readonly appointment: "appointment";
156
- readonly facebook: "socialBlockFacebook";
157
- readonly googlePlus: "socialBlockGoogleplus";
158
- readonly instagram: "socialBlockInstagram";
159
- readonly linkedin: "socialBlockLinkedin";
160
- readonly pinterest: "socialBlockPinterest";
161
- readonly rss: "socialBlockRss";
162
- readonly twitter: "socialBlockTwitter";
163
- readonly x: "socialBlockX";
164
- readonly xing: "socialBlockXing";
165
- readonly youtube: "socialBlockYoutube";
166
- readonly youtubePlay: "socialBlockYoutubeplay";
167
- readonly sortAlpAsc: "sortAlpAsc";
168
- readonly sortAlpDesc: "sortAlpDesc";
169
- readonly sortAmtAsc: "sortAmtAsc";
170
- readonly sortAmtDesc: "sortAmtDesc";
171
- readonly sortNumAsc: "sortNumAsc";
172
- readonly sortNumDesc: "sortNumDesc";
173
- readonly sortTableAsc: "sortTableAsc";
174
- readonly sortTableDesc: "sortTableDesc";
175
- readonly text: "text";
176
- readonly textColor: "textColor";
177
- readonly textDataType: "textDataType";
178
- readonly textSnippet: "textSnippet";
179
- readonly calling: "calling";
180
- readonly callingHangup: "callingHangup";
181
- readonly callingMade: "callingMade";
182
- readonly callingMissed: "callingMissed";
183
- readonly callingVoicemail: "callingVoicemail";
184
- readonly faceHappyFilled: "emojiFillHappy";
185
- readonly faceNeutralFilled: "emojiFillNeutral";
186
- readonly faceSadFilled: "emojiFillSad";
187
- };
188
- export type IconNames = keyof typeof iconNames;
189
- export type TypesOfReadOnlyArray<T extends ReadonlyArray<unknown>> = T extends ReadonlyArray<infer ElementType> ? ElementType : never;
190
- /** @deprecated use ExtensionEvent/FormSubmitExtensionEvent instead */
191
- export declare class RemoteEvent<V> {
192
- type: string;
193
- bubbles: boolean;
194
- timeStamp: number;
195
- targetValue: V;
196
- constructor(value: V, event: Event);
197
- }
198
- /** @ignore */
199
- type AlertType = 'info' | 'warning' | 'success' | 'danger' | 'tip' | undefined;
200
- /** @ignore */
201
- export type AddAlertAction = (args: {
202
- type?: AlertType;
203
- message: string;
204
- title?: string;
205
- }) => void;
206
- /** @ignore */
207
- export type ReloadPageAction = () => void;
208
- /** @ignore */
209
- export type FetchCrmObjectPropertiesAction = (properties: string[] | '*') => Promise<Record<string, string>>;
210
- /** @ignore */
211
- interface OpenIframeActionPayload {
212
- uri: string;
213
- height: number;
214
- width: number;
215
- /** @deprecated This property is no longer functional and has no effect. Please avoid using it, as it will be removed in future updates */
216
- associatedObjectProperties?: string[];
217
- title?: string;
218
- flush?: boolean;
219
- }
220
- /** @ignore */
221
- export type OpenIframeModalAction = (action: OpenIframeActionPayload, onClose?: () => void) => void;
222
- /** @ignore */
223
- export type refreshObjectPropertiesAction = () => void;
224
- /** @ignore */
225
- export type onCrmPropertiesUpdateAction = (properties: string[] | '*', callback: (properties: Record<string, string>, error?: {
226
- message: string;
227
- }) => void) => void;
228
- /** @ignore */
229
- export type CloseOverlayAction = (id: string) => void;
230
- /** @ignore */
231
- export interface CrmHostActions {
232
- addAlert: AddAlertAction;
233
- reloadPage: ReloadPageAction;
234
- fetchCrmObjectProperties: FetchCrmObjectPropertiesAction;
235
- openIframeModal: OpenIframeModalAction;
236
- refreshObjectProperties: refreshObjectPropertiesAction;
237
- onCrmPropertiesUpdate: onCrmPropertiesUpdateAction;
238
- }
239
- /** @ignore */
240
- export interface SettingsActions {
241
- addAlert: AddAlertAction;
242
- }
243
- /** @ignore */
244
- export interface AppHomeActions {
245
- addAlert: AddAlertAction;
246
- }
247
- /** @ignore */
248
- export interface UiePlatformActions {
249
- copyTextToClipboard: Clipboard['writeText'];
250
- closeOverlay: CloseOverlayAction;
251
- reloadPage: ReloadPageAction;
252
- openIframeModal: OpenIframeModalAction;
253
- }
254
- /**
255
- * The props type for {@link !components.Accordion}.
256
- *
257
- * @category Component Props
258
- */
259
- export interface AccordionProps {
260
- /**
261
- * The title text for the accordion.
262
- *
263
- */
264
- title: string;
265
- /**
266
- * The main content of the accordion when it opens.
267
- *
268
- */
269
- children: ReactNode;
270
- /**
271
- * Defines default open behavior on page load. When set to `true`, the accordion will be open by default on initial load.
272
- *
273
- * @defaultValue `false`
274
- */
275
- defaultOpen?: boolean;
276
- /**
277
- * When set to `true`, the accordion's open state cannot be changed.
278
- *
279
- * @defaultValue `false`
280
- */
281
- disabled?: boolean;
282
- /**
283
- * For controlling the accordion's open state programmatically. When set to `true`, the accordion will open. Takes precedence over `defaultOpen`.
284
- *
285
- */
286
- open?: boolean;
287
- /**
288
- * The size of the accordion title.
289
- *
290
- * @defaultValue `"small"`
291
- */
292
- size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
293
- /**
294
- * A function that will be invoked when the title is clicked. It receives no arguments and its return value is ignored.
295
- *
296
- * @event
297
- */
298
- onClick?: () => void;
299
- }
300
- /**
301
- * The props type for {@link !components.Alert}.
302
- *
303
- * @category Component Props
304
- */
305
- export interface AlertProps {
306
- /**
307
- * The bolded title text of the alert.
308
- *
309
- */
310
- title: string;
311
- /**
312
- * The main content of the alert message.
313
- *
314
- */
315
- children?: ReactNode;
316
- /**
317
- * The color of the alert.
318
- *
319
- * @defaultValue `"info"`
320
- */
321
- variant?: 'info' | 'warning' | 'success' | 'error' | 'danger' | 'tip';
322
- }
323
- /**
324
- * The props type for {@link !components.HeaderActions}.
325
- *
326
- * @category Component Props
327
- */
328
- export interface HeaderActionsProps {
329
- /**
330
- * Sets the content that will render inside the HeaderActions. This prop is passed implicitly by providing sub-components.
331
- */
332
- children: ReactNode;
333
- }
334
- /**
335
- * The props type for {@link !components.HeaderActions}.
336
- *
337
- * @category Component Props
338
- */
339
- export interface HeaderActionButtonProps extends OverlayComponentProps {
340
- /**
341
- * A function that will be invoked when the button is clicked. Do not use this function for submitting a form; use Form's `onSubmit` function instead.
342
- *
343
- * @event
344
- */
345
- onClick?: ReactionsHandler<ExtensionEvent>;
346
- /**
347
- * A URL that will be opened when the button is clicked. If the value is a URL external to `hubspot.com` it will be opened in a new tab.
348
- */
349
- href?: HrefProp;
350
- /**
351
- * Determines whether or not the button should be disabled.
352
- */
353
- disabled?: boolean;
354
- /**
355
- * Sets the content that will render inside the HeaderActionButton. This prop is passed implicitly by providing sub-components.
356
- */
357
- children: ReactNode;
358
- }
359
- /**
360
- * The props type for {@link !components.ButtonRow}.
361
- *
362
- * @category Component Props
363
- */
364
- export interface ButtonRowProps {
365
- /**
366
- * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
367
- */
368
- children: ReactNode;
369
- /**
370
- * Disables the dropdown list of buttons that appears when the children expand beyond the horizontal space.
371
- *
372
- * @defaultValue `false`
373
- */
374
- disableDropdown?: boolean;
375
- /**
376
- * Controls the appearance and text content of the dropdown button.
377
- */
378
- dropDownButtonOptions?: ButtonRownDropDownButtonOptionsProps;
379
- }
380
- /** Configures the Dropdown Button in the ButtonRow component */
381
- export interface ButtonRownDropDownButtonOptionsProps {
382
- /**
383
- * Sets the content for the dropdown button.
384
- *
385
- * @defaultValue `"More"`
386
- */
387
- text?: string;
388
- /**
389
- * Sets the size of the dropdown button.
390
- *
391
- * @defaultValue `"md"`
392
- */
393
- size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
394
- /**
395
- * Controls the appearance of the dropdown button
396
- *
397
- * @defaultValue `"secondary"`
398
- */
399
- variant?: 'primary' | 'secondary' | 'transparent';
400
- }
401
- export interface BaseButtonProps {
402
- /**
403
- * A function that will be invoked when the button is clicked. Do not use this function for submitting a form; use Form's `onSubmit` function instead.
404
- *
405
- * @event
406
- */
407
- onClick?: ReactionsHandler<ExtensionEvent>;
408
- /**
409
- * A URL that will be opened when the button is clicked. If the value is a URL external to `hubspot.com` it will be opened in a new tab.
410
- */
411
- href?: HrefProp;
412
- /**
413
- * Determines whether or not the button should be disabled.
414
- */
415
- disabled?: boolean;
416
- /**
417
- * Sets the color variation of the button.
418
- *
419
- * @defaultValue `"secondary"`
420
- */
421
- variant?: 'primary' | 'secondary' | 'destructive' | 'transparent';
422
- /**
423
- * Sets the HTML attribute "role" of the button.
424
- *
425
- * @defaultValue `"button"`
426
- */
427
- type?: 'button' | 'reset' | 'submit';
428
- /**
429
- * Sets the content that will render inside the Button. This prop is passed implicitly by providing sub-components. Only regular text and Icons are permitted.
430
- */
431
- children: ReactNode;
432
- /**
433
- * Sets the size of the button.
434
- *
435
- * @defaultValue `"md"`
436
- */
437
- size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
438
- }
439
- /**
440
- * The props type for {@link !components.Button}.
441
- *
442
- * @category Component Props
443
- */
444
- export interface ButtonProps extends BaseButtonProps, OverlayComponentProps {
445
- }
446
- /**
447
- * Extra configuration passed to the overlay
448
- */
449
- export interface LoadingButtonOverlayOptions {
450
- /**
451
- * If `onLoadingFinish`, the overlay will open once the loading operation is done.
452
- * If `onClick`, the overlay will open as soon as there is a click on the button.
453
- *
454
- * @defaultValue `"onClick"`
455
- */
456
- openBehavior?: 'onClick' | 'onLoadingFinish';
457
- }
458
- /**
459
- * The props type for {@link !components.LoadingButton}.
460
- *
461
- * @category Component Props
462
- */
463
- export interface LoadingButtonProps extends BaseButtonProps, OverlayComponentProps {
464
- /**
465
- * Sets the color variation of the button.
466
- *
467
- * @defaultValue `"secondary"`
468
- */
469
- variant?: 'primary' | 'secondary' | 'destructive';
470
- /**
471
- * If true, the loading indicator is shown and the button becomes disabled.
472
- *
473
- * @defaultValue `false`
474
- */
475
- loading?: boolean;
476
- /**
477
- * Extra configuration passed to the overlay
478
- */
479
- overlayOptions?: LoadingButtonOverlayOptions;
480
- /**
481
- * Controls the icon that's shown after loading is done.
482
- *
483
- * @defaultValue `"success"`
484
- */
485
- resultIconName?: IconNames;
486
- }
487
- /**
488
- * The props type for {@link !components.Card}.
489
- *
490
- * @category Component Props
491
- */
492
- export interface CardProps {
493
- /**
494
- * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
495
- */
496
- children: ReactNode;
497
- }
498
- /**
499
- * The props type for {@link !components.BarChart}.
500
- *
501
- * @category Component Props
502
- */
503
- export type BarChartProps = ChartProps;
504
- /**
505
- * The props type for {@link !components.LineChart}.
506
- *
507
- * @category Component Props
508
- */
509
- export type LineChartProps = ChartProps;
510
- export interface ChartProps {
511
- /**
512
- * The data used to render the chart. You can optionally provide configuration options.
513
- */
514
- data: ChartDataRow[] | {
515
- data: ChartDataRow[];
516
- options?: ChartDataOptions;
517
- };
518
- /**
519
- * The configuration for the axes of the chart.
520
- */
521
- axes: ChartAxisPair;
522
- /**
523
- * Configuration options for the chart as a whole.
524
- */
525
- options?: ChartOptions;
526
- }
527
- export type ChartDataRow = {
528
- [key: string]: number | string;
529
- };
530
- export type ChartDataOptions = {
531
- /**
532
- * A mapping of fields to human-readable labels.
533
- * We recommend pre-formatting your data to be human-readable instead of using this configuration.
534
- */
535
- propertyLabels?: {
536
- [fields: string]: Record<string, string>;
537
- };
538
- };
539
- export type ChartAxisPair = {
540
- /**
541
- * The field to use for the horizontal x-axis.
542
- */
543
- x: ChartAxis;
544
- /**
545
- * The field to use for the vertical y-axis.
546
- */
547
- y: ChartAxis;
548
- /**
549
- * Configuration options for the pair of axes.
550
- */
551
- options?: AxisPairOptions;
552
- };
553
- export type ChartAxis = {
554
- /**
555
- * The dataset field that should be graphed on this axis.
556
- */
557
- field: string;
558
- /**
559
- * The type of data in the field property. Please read the documentation for the expected formats for each fieldType.
560
- */
561
- fieldType: ChartFieldType;
562
- /**
563
- * The axis display label. Note: this will also be used in the legend and the hover tooltips.
564
- */
565
- label?: string;
566
- };
567
- export type AxisPairOptions = {
568
- /**
569
- * If provided, the data will be grouped by color for this field.
570
- */
571
- groupFieldByColor?: string;
572
- /**
573
- * When set to true, grouped data will be stacked.
574
- *
575
- * @defaultValue `false`
576
- */
577
- stacking?: boolean;
578
- /**
579
- * If provided, assigns a color to each specified values of the field provided in `groupFieldByColor`.
580
- */
581
- colors?: {
582
- [key: string]: ChartColor;
583
- };
584
- };
585
- export declare const chartFieldTypes: {
586
- readonly datetime: "datetime";
587
- readonly linear: "linear";
588
- readonly category: "category";
589
- };
590
- /**
591
- * The type of field for this axis.
592
- * - `datetime`: Used for time data, such as JavaScript timestamps.
593
- * - `linear`: Used for numerical data, such as quantities.
594
- * - `category`: Used for categorical data, such as different types of products.
595
- *
596
- * Please read the documentation for recommended usage.
597
- */
598
- export type ChartFieldType = keyof typeof chartFieldTypes;
599
- export type ChartOptions = {
600
- /**
601
- * Renders a title above the chart.
602
- */
603
- title?: string;
604
- /**
605
- * When set to `true`, shows a legend for the chart.
606
- *
607
- * @defaultValue `false`
608
- */
609
- showLegend?: boolean;
610
- /**
611
- * When set to `true`, shows hover tooltips for the charted data.
612
- *
613
- * @defaultValue `false`
614
- */
615
- showTooltips?: boolean;
616
- /**
617
- * When set to `true`, shows labels for the data directly on the chart.
618
- *
619
- * @defaultValue `false`
620
- */
621
- showDataLabels?: boolean;
622
- /**
623
- * Use to choose the order in which our chart colors are assigned to your data. Unspecified colors will be chosen after the ones you've provided here,
624
- * so you don't need to provide a complete list of all possible colors.
625
- * Please read the documentation for guidance on color usage.
626
- */
627
- colorList?: ChartColor[];
628
- /** @deprecated use colorList instead */
629
- colors?: ChartColor[];
630
- };
631
- /**
632
- * The allowed colors for data displayed on the chart.
633
- */
634
- export type ChartColor = 'orange' | 'aqua' | 'purple' | 'yellow' | 'pink' | 'blue' | 'green' | 'darkOrange' | 'darkAqua' | 'darkPurple' | 'darkYellow' | 'darkPink' | 'darkBlue' | 'darkGreen';
635
- /**
636
- * The props type for {@link !components.DescriptionListItem}.
637
- *
638
- * @category Component Props
639
- */
640
- export interface DescriptionListItemProps {
641
- /**
642
- * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
643
- *
644
- */
645
- children: ReactNode;
646
- /**
647
- * Text to be displayed as the label.
648
- *
649
- */
650
- label: string;
651
- }
652
- /**
653
- * The props type for {@link !components.DescriptionList}.
654
- *
655
- * @category Component Props
656
- */
657
- export interface DescriptionListProps {
658
- /**
659
- * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. The children should be {@link !components.DescriptionListItem}.
660
- *
661
- */
662
- children: ReactNode;
663
- /**
664
- * The direction the label/value pairs are placed in the description list container.
665
- *
666
- * @defaultValue `"column"`
667
- */
668
- direction?: 'row' | 'column';
669
- }
670
- /**
671
- * The props type for {@link !components.Divider}.
672
- *
673
- * @category Component Props
674
- */
675
- export interface DividerProps {
676
- /**
677
- * The space between the divider and the content above and below it.
678
- *
679
- * @defaultValue `"small"`
680
- */
681
- distance?: AllDistances;
682
- }
683
- /**
684
- * @deprecated This type is deprecated and will be removed in a future release. Please use the `DropdownButtonItem` component instead.
685
- */
686
- export interface DropdownOption {
687
- /**
688
- * Text to be displayed as the menu item text.
689
- *
690
- */
691
- label: string;
692
- /**
693
- * A function that will be invoked when the item is clicked.
694
- * It receives no arguments and its return value is ignored.
695
- *
696
- * @event
697
- */
698
- onClick?: () => void;
699
- }
700
- /**
701
- * The props type for {@link !components.DropdownButtonItem}.
702
- *
703
- * @category Component Props
704
- */
705
- export interface DropdownButtonItemProps extends OverlayComponentProps {
706
- /**
707
- * Text to be displayed as the menu item text.
708
- * Can also accept ReactNode for more complex content.
709
- */
710
- children: ReactNode;
711
- /**
712
- * A function that will be invoked when the item is clicked.
713
- * It receives no arguments and its return value is ignored.
714
- *
715
- * @event
716
- */
717
- onClick?: ReactionsHandler<ExtensionEvent>;
718
- }
719
- /**
720
- * The props type for {@link !components.Dropdown}.
721
- *
722
- * @category Component Props
723
- */
724
- export interface DropdownProps {
725
- /**
726
- * The list of options to be rendered within the dropdown menu.
727
- * Each option represents an entry in the Dropdown.
728
- *
729
- * @deprecated This prop is deprecated and will be removed in a future release.
730
- * Use child components instead to define dropdown menu items. For example,
731
- * use `<Dropdown.ButtonItem>` to render an action button within a dropdown menu.
732
- */
733
- options?: DropdownOption[];
734
- /**
735
- * Controls the appearance of the dropdown button
736
- *
737
- * @defaultValue `"secondary"`
738
- */
739
- variant?: 'primary' | 'secondary' | 'transparent';
740
- /**
741
- * Sets the content for the dropdown button.
742
- *
743
- * @defaultValue `"More"`
744
- */
745
- buttonText?: string;
746
- /**
747
- * Sets the size of the dropdown button.
748
- *
749
- * @defaultValue `"md"`
750
- */
751
- buttonSize?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
752
- /**
753
- * Disables the ability to focus and click-to-expand of the dropdown button
754
- *
755
- * @defaultValue `false`
756
- */
757
- disabled?: boolean;
758
- /**
759
- * Sets the content that will render inside the Dropdown. You have to use `DropdownOption` component as a child of the `Dropdown` component.
760
- */
761
- children?: ReactNode;
762
- }
763
- 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';
764
- /**
765
- * The props type for {@link !components.EmptyState}.
766
- *
767
- * @category Component Props
768
- */
769
- export interface EmptyStateProps {
770
- /**
771
- * When set to `true`, removes the default vertical margins in the component.
772
- *
773
- * @defaultValue `false`
774
- */
775
- flush?: boolean;
776
- /**
777
- * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
778
- *
779
- */
780
- children: ReactNode;
781
- /**
782
- * The text for the title header.
783
- *
784
- * @defaultValue `"All is not lost."`
785
- *
786
- */
787
- title?: string;
788
- /**
789
- * Sets the layout direction for the content. Can be either `horizontal` or `vertical`.
790
- *
791
- * @defaultValue `"horizontal"`
792
- */
793
- layout?: 'horizontal' | 'vertical';
794
- /**
795
- * When set to `true`, swaps the visual order of the text (primary) and image (secondary) content. This ensures the primary content is still presented first to assistive technology.
796
- *
797
- * @defaultValue `false`
798
- */
799
- reverseOrder?: boolean;
800
- /**
801
- * The max-width(in pixels) for the image container.
802
- *
803
- * @defaultValue `250`
804
- */
805
- imageWidth?: number;
806
- /**
807
- * The name of the image to display.
808
- *
809
- * @defaultValue `"emptyStateCharts"`
810
- */
811
- imageName?: EmptyStateImageName;
812
- }
813
- /**
814
- * The props type for {@link !components.ErrorState}.
815
- *
816
- * @category Component Props
817
- */
818
- export interface ErrorStateProps {
819
- /**
820
- * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
821
- *
822
- */
823
- children: ReactNode;
824
- /**
825
- * The text of the title header.
826
- *
827
- */
828
- title?: string;
829
- /**
830
- * The type of error image that will be shown.
831
- *
832
- * @defaultValue `"error"`
833
- */
834
- type?: 'error' | 'support' | 'lock';
835
- }
836
- export type FormInputValues = Record<string, string | number>;
837
- /**
838
- * The props type for {@link !components.Form}.
839
- *
840
- * @category Component Props
841
- */
842
- export interface FormProps {
843
- /**
844
- * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
845
- *
846
- */
847
- children: ReactNode;
848
- /**
849
- * The function that is called when the form is submitted. It will receive a FormSubmitExtensionEvent as an argument and its return value will be ignored. This function should be used instead of Button's `onClick` for the Form's submit button.
850
- *
851
- * @event
852
- */
853
- onSubmit?: ReactionsHandler<FormSubmitExtensionEvent<FormInputValues>>;
854
- /** @deprecated the value for `preventDefault` is now always `true`, use `onSubmit` to handle all form submission behavior */
855
- preventDefault?: boolean;
856
- /**
857
- * Specifies how autcomplete behaves in the entire form.
858
- * @defaultValue `"on"`
859
- */
860
- autoComplete?: 'off' | 'on';
861
- }
862
- /**
863
- * The props type for {@link !components.Heading}.
864
- *
865
- * @category Component Props
866
- */
867
- export interface HeadingProps {
868
- /**
869
- * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
870
- *
871
- */
872
- children: ReactNode;
873
- /**
874
- * When set to true, text will not line break.
875
- *
876
- * @defaultValue `false`
877
- */
878
- inline?: boolean;
879
- }
880
- export type IconColor = 'alert' | 'warning' | 'success' | 'inherit';
881
- /**
882
- * The props type for {@link !components.Icon}.
883
- *
884
- * @category Component Props
885
- */
886
- export interface IconProps {
887
- /**
888
- * Sets the icon color. By default, the icon will use `inherit`, which inherits the color from its parent element.
889
- *
890
- * @defaultValue `"inherit"`
891
- */
892
- color?: IconColor;
893
- /**
894
- * Sets the specific icon to display.
895
- */
896
- name: IconNames;
897
- /**
898
- * Sets the size of the icon. If this prop is not provided, the icon will default to the size of its parent.
899
- *
900
- * @defaultValue `"medium"`
901
- */
902
- size?: TShirtSizes['sm'] | TShirtSizes['md'] | TShirtSizes['lg'];
903
- /**
904
- * Sets the text that a screenreader will read for this icon.
905
- */
906
- screenReaderText?: string;
907
- }
908
- /**
909
- * The props type for {@link !components.Iframe}.
910
- *
911
- * @ignore
912
- * @experimental
913
- * @category Component Props
914
- */
915
- export interface IframeProps {
916
- /**
917
- * Sets the height of the iframe. If this prop is not provided, the iframe defaults size medium.
918
- *
919
- * @defaultValue `"medium"`
920
- */
921
- height?: TShirtSizes['sm'] | TShirtSizes['md'] | TShirtSizes['lg'];
922
- /**
923
- * The URL to render into the inline iframe.
924
- */
925
- src: string;
926
- }
927
- /**
928
- * The props type for {@link !components.Illustration}.
929
- *
930
- * @category Component Props
931
- */
932
- export interface IllustrationProps {
933
- name: IllustrationNames;
934
- alt: string;
935
- width?: number;
936
- height?: number;
937
- }
938
- export declare const illustrationNames: {
939
- readonly lock: "lock";
940
- readonly unlock: "unlock";
941
- readonly electronicSignature: "electronic-signature";
942
- readonly electronicSignatureEmptyState: "electronic-signature-empty-state";
943
- readonly callingSetUp: "calling-set-up";
944
- readonly companies: "companies";
945
- readonly contacts: "contacts";
946
- readonly multipleObjects: "multiple-objects";
947
- readonly object: "object";
948
- readonly task: "task";
949
- readonly deals: "deals";
950
- readonly registration: "registration";
951
- readonly developerSecurityUpdate: "developer-security-update";
952
- readonly social: "social";
953
- readonly leads: "leads";
954
- readonly target: "target";
955
- readonly emailConfirmation: "email-confirmation";
956
- readonly successfullyConnectedEmail: "successfully-connected-email";
957
- readonly contentStrategy: "content-strategy";
958
- readonly addOnReporting: "add-on-reporting";
959
- readonly productsShoppingCart: "products-shopping-cart";
960
- readonly store: "store";
961
- readonly storeDisabled: "store-disabled";
962
- readonly customerSupport: "customer-support";
963
- readonly customerExperience: "customer-experience";
964
- readonly api: "api";
965
- readonly integrations: "integrations";
966
- readonly sandboxAddOn: "sandbox-add-on";
967
- readonly customObjects: "custom-objects";
968
- readonly paymentsButton: "payments-button";
969
- readonly automatedTesting: "automated-testing";
970
- readonly emptyStateCharts: "empty-state-charts";
971
- readonly meetings: "meetings-small";
972
- readonly tickets: "ticket-small";
973
- readonly errorGeneral: "errors/general";
974
- readonly errorHourglass: "errors/hourglass";
975
- readonly middlePaneCards: "settings-middle-pane-cards";
976
- readonly propertiesSidebar: "settings-properties-sidebar";
977
- readonly sidebar: "settings-sidebar";
978
- };
979
- export type IllustrationNames = keyof typeof illustrationNames;
980
- /**
981
- * The props type for {@link !components.Image}.
982
- *
983
- * @category Component Props
984
- */
985
- export interface ImageProps extends OverlayComponentProps {
986
- /**
987
- * The alt text for the image.
988
- *
989
- */
990
- alt?: string;
991
- /**
992
- * If provided, will be used as the href that will be opened in a new browser tab on click.
993
- *
994
- */
995
- href?: HrefProp;
996
- /**
997
- * A function that will be called when the image is clicked.
998
- *
999
- * @event
1000
- */
1001
- onClick?: ReactionsHandler<ExtensionEvent>;
1002
- /**
1003
- * The URL of the image to display.
1004
- *
1005
- */
1006
- src: string;
1007
- /**
1008
- * The pixel width of the image.
1009
- *
1010
- */
1011
- width?: number;
1012
- /**
1013
- * The pixel height of the image.
1014
- *
1015
- */
1016
- height?: number;
1017
- }
1018
- /**
1019
- * Generic collection of props for all inputs
1020
- * @internal
1021
- * */
1022
- interface BaseInputProps<T = string, V = string> {
1023
- /**
1024
- * The label text to display for the form input element.
1025
- */
1026
- label: string;
1027
- /**
1028
- * The unique identifier for the input element, this could be thought of as the HTML5 [Input element's name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name).
1029
- */
1030
- name: string;
1031
- /**
1032
- * The value of the input.
1033
- */
1034
- value?: T;
1035
- /**
1036
- * Determines if the required indicator should be displayed.
1037
- *
1038
- * @defaultValue `false`
1039
- */
1040
- required?: boolean;
1041
- /**
1042
- * Determines if the field is editable or not.
1043
- *
1044
- * @defaultValue `false`
1045
- */
1046
- readOnly?: boolean;
1047
- /**
1048
- * Instructional message to display to the user to help understand the purpose of the input.
1049
- */
1050
- description?: string;
1051
- /**
1052
- * Text that will appear in a tooltip next to the input label.
1053
- */
1054
- tooltip?: string;
1055
- /**
1056
- * Text that appears in the input when it has no value set.
1057
- */
1058
- placeholder?: string;
1059
- /**
1060
- * If set to `true`, `validationMessage` is displayed as an error message, if it was provided. The input will also render its error state to let the user know there is an error. If set to `false`, `validationMessage` is displayed as a success message.
1061
- *
1062
- * @defaultValue `false`
1063
- */
1064
- error?: boolean;
1065
- /**
1066
- * The value of the input on the first render.
1067
- */
1068
- defaultValue?: T;
1069
- /**
1070
- * The text to show under the input for error or success validations.
1071
- */
1072
- validationMessage?: string;
1073
- /**
1074
- * 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.
1075
- *
1076
- * @event
1077
- */
1078
- onChange?: (value: V) => void;
1079
- /**
1080
- * 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.
1081
- *
1082
- * @event
1083
- */
1084
- onInput?: (value: V) => void;
1085
- /**
1086
- * A function that is called and passed the value every time the field loses focus.
1087
- *
1088
- * @event
1089
- */
1090
- onBlur?: (value: V) => void;
1091
- /**
1092
- * A function that is called and passed the value every time the field gets focused.
1093
- *
1094
- * @event
1095
- */
1096
- onFocus?: (value: V) => void;
1097
- }
1098
- /**
1099
- * The props type for {@link !components.Input}.
1100
- *
1101
- * @category Component Props
1102
- */
1103
- export interface InputProps extends BaseInputProps {
1104
- /**
1105
- * Sets the type of input to render.
1106
- *
1107
- * @defaultValue `"text"`
1108
- */
1109
- type?: 'text' | 'password';
1110
- }
1111
- /**
1112
- * The props type for {@link !components.TextArea}.
1113
- *
1114
- * @category Component Props
1115
- */
1116
- export interface TextAreaProps extends BaseInputProps {
1117
- /**
1118
- * The visible width of the text field in average character widths.
1119
- */
1120
- cols?: number;
1121
- /**
1122
- * The maximum number of characters (UTF-16 code units) that the user can enter. If not specified, the max length is unlimited.
1123
- */
1124
- maxLength?: number;
1125
- /**
1126
- * The number of visible text lines for the text field.
1127
- */
1128
- rows?: number;
1129
- /**
1130
- * Sets whether the element is resizable, and if so in which directions.
1131
- *
1132
- * @defaultValue `"both"`
1133
- */
1134
- resize?: 'vertical' | 'horizontal' | 'both' | 'none';
1135
- }
1136
- /**
1137
- * Textarea was changed to TextArea. Exporting both for backwards compat
1138
- *
1139
- * @ignore
1140
- * @internal
1141
- * */
1142
- export type TextareaProps = TextAreaProps;
1143
- /**
1144
- * @internal
1145
- * @ignore
1146
- * */
1147
- type BaseInputForNumber = Omit<BaseInputProps<number, number>, 'onInput'>;
1148
- /**
1149
- * The props type for {@link !components.NumberInput}.
1150
- *
1151
- * @category Component Props
1152
- */
1153
- export interface NumberInputProps extends BaseInputForNumber {
1154
- /**
1155
- * Sets the lower bound of the input.
1156
- *
1157
- */
1158
- min?: number;
1159
- /**
1160
- * Sets the upper bound of the input.
1161
- *
1162
- */
1163
- max?: number;
1164
- /**
1165
- * Sets the number of digits to the right of the decimal point.
1166
- *
1167
- */
1168
- precision?: number;
1169
- /**
1170
- * Formats the input as a decimal point (decimal) or percentage (percentage).
1171
- *
1172
- * @defaultValue `"decimal"`
1173
- */
1174
- formatStyle?: 'decimal' | 'percentage';
1175
- /** @deprecated use onChange instead. It doesn't guarantee valid format */
1176
- onInput?: (value: number) => void;
1177
- }
1178
- /**
1179
- * The props type for {@link !components.CurrencyInput}.
1180
- *
1181
- * @category Component Props
1182
- */
1183
- export interface CurrencyInputProps extends BaseInputForNumber {
1184
- /**
1185
- * ISO 4217 currency code (e.g., "USD", "EUR", "JPY")
1186
- * @defaultValue "USD"
1187
- */
1188
- currency?: string;
1189
- /**
1190
- * Sets the number of decimal places for the currency
1191
- * If not provided, defaults to currency-specific precision
1192
- */
1193
- precision?: number;
1194
- /**
1195
- * Sets the lower bound of the input
1196
- */
1197
- min?: number;
1198
- /**
1199
- * Sets the upper bound of the input
1200
- */
1201
- max?: number;
1202
- }
1203
- /**
1204
- * The props type for {@link !components.StepperInput}.
1205
- *
1206
- * @category Component Props
1207
- */
1208
- export interface StepperInputProps extends Omit<NumberInputProps, 'onInput'> {
1209
- /** The amount that the current value will increase or decrease on each step button click.
1210
- * @defaultValue `1`
1211
- */
1212
- stepSize?: number;
1213
- /**
1214
- * Text that will appear in a tooltip next to the step up button when users
1215
- * can't increase the current value.
1216
- */
1217
- maxValueReachedTooltip?: string;
1218
- /**
1219
- * Text that will appear in a tooltip next to the step down button when users
1220
- * can't decrease the current value.
1221
- */
1222
- minValueReachedTooltip?: string;
1223
- }
1224
- /** Object that represents dates. */
1225
- export interface BaseDate {
1226
- /** the four-digit year (e.g., 2023). */
1227
- year: number;
1228
- /** starting at 0, the number of the month (e.g., 0 = January, 11 = December). */
1229
- month: number;
1230
- /** the number of the day (e.g., 1 = the first day of the month).*/
1231
- date: number;
1232
- }
1233
- /** The values used to invoke events on the DateInput component */
1234
- export interface DateInputEventsPayload extends BaseDate {
1235
- /** Selected date with formatting option applied. (e.g., 09/04/1986). */
1236
- formattedDate?: string;
1237
- }
1238
- /**
1239
- * @internal
1240
- * @ignore
1241
- * */
1242
- type BaseDateInputForDate = Omit<BaseInputProps<BaseDate | null, DateInputEventsPayload>, 'onInput' | 'placeholder'>;
1243
- /**
1244
- * The props type for {@link !components.DateInput}.
1245
- *
1246
- * @category Component Props
1247
- */
1248
- export interface DateInputProps extends BaseDateInputForDate {
1249
- /**
1250
- * Sets the earliest date that will be valid.
1251
- */
1252
- min?: BaseDate;
1253
- /**
1254
- * Sets the latest date that will be valid.
1255
- */
1256
- max?: BaseDate;
1257
- /**
1258
- * Sets the message that users will see when they hover over dates before the min date.
1259
- *
1260
- * @defaultValue `"You must choose a newer date"`
1261
- */
1262
- minValidationMessage?: string;
1263
- /**
1264
- * Sets the message that users will see when the hover over dates after the max date.
1265
- *
1266
- * @defaultValue `"You must choose an older date"`
1267
- */
1268
- maxValidationMessage?: string;
1269
- /**
1270
- * Sets the date format that input will display to users.
1271
- *
1272
- * @defaultValue `short`
1273
- *
1274
- * #### Format Options
1275
- *
1276
- * - short: `09/04/1986`
1277
- * - long: `September 4, 1986`
1278
- * - medium : `Sep 4, 1986`
1279
- * - standard: `1986-09-04`
1280
- * - L: `09/04/1986`
1281
- * - LL: `September 4, 1986`
1282
- * - ll : `Sep 4, 1986`
1283
- * - YYYY-MM-DD: `1986-09-04`
1284
- */
1285
- format?: 'YYYY-MM-DD' | 'L' | 'LL' | 'll' | 'short' | 'long' | 'medium' | 'standard';
1286
- /**
1287
- * Sets the timezone that the component will use to calculate valid dates.
1288
- *
1289
- * @defaultValue `"userTz"`
1290
- */
1291
- timezone?: 'userTz' | 'portalTz';
1292
- /**
1293
- * Sets the label of the clear button.
1294
- *
1295
- * @defaultValue `"Clear"`
1296
- */
1297
- clearButtonLabel?: string;
1298
- /**
1299
- * Sets the label of the today button.
1300
- *
1301
- * @defaultValue `"Today"`
1302
- */
1303
- todayButtonLabel?: string;
1304
- }
1305
- /**
1306
- * Object that represents times.
1307
- */
1308
- export interface BaseTime {
1309
- /** The hour for the time (0 to 23) in 24-hour format (e.g. 0 = 12:00 AM, 9 = 9:00 AM, 15 = 3:00 PM). */
1310
- hours: number;
1311
- /** The minutes for the time (0 to 59). */
1312
- minutes: number;
1313
- }
1314
- /**
1315
- * @ignore
1316
- *
1317
- * The values used to invoke events on the TimeInput component
1318
- */
1319
- export interface TimeInputEventsPayload extends BaseTime {
1320
- }
1321
- /**
1322
- * @internal
1323
- * @ignore
1324
- * */
1325
- type BaseTimeInputForTime = Omit<BaseInputProps<BaseTime | null, TimeInputEventsPayload>, 'onInput' | 'placeholder' | 'onChange'>;
1326
- /**
1327
- * The props type for {@link !components.TimeInput}.
1328
- *
1329
- * @category Component Props
1330
- */
1331
- export interface TimeInputProps extends BaseTimeInputForTime {
1332
- /**
1333
- * A callback function that is invoked when the value is changed.
1334
- *
1335
- * @event
1336
- */
1337
- onChange?: (value: TimeInputEventsPayload) => void;
1338
- /**
1339
- * Sets the earliest time that will be valid.
1340
- */
1341
- min?: BaseTime;
1342
- /**
1343
- * Sets the latest time that will be valid.
1344
- */
1345
- max?: BaseTime;
1346
- /**
1347
- * Sets the interval (in minutes) between the dropdown options.
1348
- *
1349
- * @defaultValue `30`
1350
- */
1351
- interval?: number;
1352
- /**
1353
- * Sets the timezone that the component will display alongside times in the TimeInput. This will not modify the available valid inputs.
1354
- *
1355
- */
1356
- timezone?: 'userTz' | 'portalTz';
1357
- }
1358
- /**
1359
- * The props type for {@link !components.SearchInput}.
1360
- *
1361
- * @category Component Props
1362
- */
1363
- export interface SearchInputProps extends BaseInputProps {
1364
- /** Shows a clear button to clear the input. Default is true. */
1365
- clearable?: boolean;
1366
- }
1367
- /**
1368
- * The props type for {@link !components.Stack}.
1369
- *
1370
- * @category Component Props
1371
- */
1372
- export interface StackProps {
1373
- /**
1374
- * Sets the spacing between components.
1375
- */
1376
- distance?: AllDistances;
1377
- /**
1378
- * Sets the content that will render inside the component.
1379
- */
1380
- children?: React.ReactNode;
1381
- /**
1382
- * Arranges components `horizontally` or `vertically` by setting the main axis.
1383
- */
1384
- direction?: 'row' | 'column';
1385
- /**
1386
- * Distributes components along the main axis using the available free space.
1387
- */
1388
- justify?: 'center' | 'end' | 'start';
1389
- /**
1390
- * Distributes components along the cross-axis using the available free space.
1391
- */
1392
- align?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
1393
- /**
1394
- * Sets the width of the stack.
1395
- */
1396
- width?: 'auto' | '100%';
1397
- }
1398
- export type FlexJustify = 'center' | 'end' | 'start' | 'around' | 'between';
1399
- export type FlexAlign = 'start' | 'center' | 'baseline' | 'end' | 'stretch';
1400
- /**
1401
- * The props type for {@link !components.Flex}.
1402
- *
1403
- * @category Component Props
1404
- */
1405
- export interface FlexProps {
1406
- /**
1407
- * Sets the spacing between components.
1408
- *
1409
- * @defaultValue `"flush"`
1410
- */
1411
- gap?: AllDistances;
1412
- /**
1413
- * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
1414
- *
1415
- */
1416
- children?: ReactNode;
1417
- /**
1418
- * Arranges components `horizontally` or `vertically` by setting the main axis.
1419
- *
1420
- * @defaultValue `"row"`
1421
- */
1422
- direction?: 'row' | 'column';
1423
- /**
1424
- * Distributes components along the main axis using the available free space.
1425
- *
1426
- * @defaultValue `"start"`
1427
- */
1428
- justify?: FlexJustify;
1429
- /**
1430
- * Distributes components along the cross-axis using the available free space.
1431
- *
1432
- * @defaultValue `"stretch"`
1433
- */
1434
- align?: FlexAlign;
1435
- /**
1436
- * Overrides Flex's `alignItem` value for this element.
1437
- *
1438
- */
1439
- alignSelf?: FlexAlign;
1440
- /**
1441
- * Whether components will wrap instead of trying to fit on one line.
1442
- *
1443
- * @defaultValue `"nowrap"`
1444
- */
1445
- wrap?: boolean | 'wrap' | 'nowrap';
1446
- }
1447
- /**
1448
- * The props type for {@link !components.Box}.
1449
- *
1450
- * @category Component Props
1451
- */
1452
- export interface BoxProps {
1453
- /**
1454
- * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
1455
- *
1456
- */
1457
- children: ReactNode;
1458
- /**
1459
- * Overrides Flex's `alignItem` value for this element.
1460
- *
1461
- * @defaultValue `"auto"`
1462
- */
1463
- alignSelf?: 'start' | 'center' | 'baseline' | 'end' | 'stretch' | 'auto';
1464
- /**
1465
- * Sets how the item will grow or shrink when it's a direct ancestor of the Flex component.
1466
- * ##### Options in detail
1467
- *
1468
- *- `initial`: The item is sized according to its width and height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container.
1469
- *- `auto`: The item is sized according to its width and height properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container.
1470
- *- `none`: The item is sized according to its width and height properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container.
1471
- *- `number`: Tells a component to fill all available space, shared evenly amongst other components with the same parent. The larger the flex given, the higher the ratio of space a component will take compared to its siblings.
1472
- *
1473
- * @defaultValue `"initial"`
1474
- */
1475
- flex?: 'initial' | 'auto' | 'none' | number;
1476
- }
1477
- /**
1478
- * The props type for {@link !components.Inline}.
1479
- *
1480
- * @category Component Props
1481
- */
1482
- export interface InlineProps {
1483
- /**
1484
- * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
1485
- *
1486
- */
1487
- children?: ReactNode;
1488
- /**
1489
- * Distributes components along the main axis using the available free space.
1490
- * @defaultValue `"start"`
1491
- */
1492
- justify?: FlexJustify;
1493
- /**
1494
- * Distributes components along the cross-axis using the available free space.
1495
- * @defaultValue `"center"`
1496
- */
1497
- align?: FlexAlign;
1498
- /**
1499
- * Sets the spacing between components.
1500
- *
1501
- * @defaultValue `"flush"`
1502
- */
1503
- gap?: AllDistances;
1504
- }
1505
- /**
1506
- * The props type for {@link !components.AutoGrid}.
1507
- *
1508
- * @category Component Props
1509
- */
1510
- export interface AutoGridProps {
1511
- /**
1512
- * Sets the width of each column in the grid.
1513
- * 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.
1514
- * When `flexible` is false, columns are exactly this width.
1515
- */
1516
- columnWidth: number;
1517
- /**
1518
- * Sets the spacing between grid items.
1519
- *
1520
- * @defaultValue `"flush"`
1521
- */
1522
- gap?: AllDistances;
1523
- /**
1524
- * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
1525
- *
1526
- */
1527
- children?: ReactNode;
1528
- /**
1529
- * Whether columns should expand to fill available space.
1530
- * When true, columns will be at least `columnWidth` but grow equally to fill the container.
1531
- * When false, columns are exactly `columnWidth`.
1532
- *
1533
- * @defaultValue `false`
1534
- */
1535
- flexible?: boolean;
1536
- }
1537
- /**
1538
- * The props type for {@link !components.Link}.
1539
- *
1540
- * @category Component Props
1541
- */
1542
- export interface LinkProps extends OverlayComponentProps {
1543
- /**
1544
- * Sets the content that will render inside the component.
1545
- *
1546
- */
1547
- children: ReactNode;
1548
- /**
1549
- * The URL that will be opened on click. Links to pages in the HubSpot account will open in the same tab, while non-HubSpot links will open in a new tab.
1550
- *
1551
- */
1552
- href: HrefProp;
1553
- /**
1554
- * The color variation of the link.
1555
- *
1556
- * @defaultValue `"primary"`
1557
- */
1558
- variant?: 'primary' | 'destructive' | 'light' | 'dark';
1559
- /**
1560
- * A function that will be invoked with the link is clicked.
1561
- *
1562
- * @event
1563
- */
1564
- onClick?: ReactionsHandler<ExtensionEvent>;
1565
- /**
1566
- * When set to true, `event.preventDefault()` will be invoked before the `onClick` function is called, preventing automatic navigation to the href URL.
1567
- *
1568
- * @defaultValue `false`
1569
- */
1570
- preventDefault?: boolean;
1571
- }
1572
- /**
1573
- * The props type for {@link !components.List}.
1574
- *
1575
- * @category Component Props
1576
- */
1577
- export interface ListProps {
1578
- /**
1579
- * The content of the list. Each child will be wrapped in an `li` tag.
1580
- */
1581
- children: ReactNode;
1582
- /**
1583
- * The type of list to render.
1584
- *
1585
- * @defaultValue `"unordered"`
1586
- */
1587
- variant?: 'unordered' | 'unordered-styled' | 'ordered' | 'ordered-styled' | 'inline' | 'inline-divided';
1588
- }
1589
- /**
1590
- * The props type for {@link !components.LoadingSpinner}.
1591
- *
1592
- * @category Component Props
1593
- */
1594
- export interface LoadingSpinnerProps {
1595
- /**
1596
- * The text that displays next to the spinner. Note: the label is not shown by default, you must set `showLabel` to `true` to display the label.
1597
- *
1598
- */
1599
- label: string;
1600
- /**
1601
- * When set to `true`, the label will appear next to the spinner.
1602
- *
1603
- * @defaultValue `false`
1604
- */
1605
- showLabel?: boolean;
1606
- /**
1607
- * The size of the spinner.
1608
- *
1609
- * @defaultValue `"sm"`
1610
- */
1611
- size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
1612
- /**
1613
- * The position of the spinner. Can be one of `inline` or `centered`.
1614
- *
1615
- * @defaultValue `"inline"`
1616
- */
1617
- layout?: 'inline' | 'centered';
1618
- }
1619
- export interface ModalProps {
1620
- /**
1621
- * Accessibility label.
1622
- *
1623
- */
1624
- 'aria-label'?: string;
1625
- /**
1626
- * The main content of the modal when it opens.
1627
- *
1628
- */
1629
- children?: ReactNode;
1630
- /**
1631
- * A unique ID for the modal
1632
- *
1633
- */
1634
- id: string;
1635
- /**
1636
- * A function that will be invoked when the modal has finished opening.
1637
- *
1638
- */
1639
- onOpen?: () => void;
1640
- /**
1641
- * A function that will be invoked when the modal has finished closing.
1642
- *
1643
- */
1644
- onClose?: () => void;
1645
- /**
1646
- * The width of the modal
1647
- *
1648
- * @defaultValue `"sm"`
1649
- */
1650
- width?: TShirtSizes['sm'] | TShirtSizes['md'] | TShirtSizes['lg'];
1651
- /**
1652
- * The title of the modal
1653
- *
1654
- */
1655
- title?: string;
1656
- /**
1657
- * The variant of the modal
1658
- *
1659
- * @defaultValue `"default"`
1660
- */
1661
- variant?: 'danger' | 'default';
1662
- }
1663
- export interface ModalBodyProps {
1664
- /**
1665
- * The main content of the modal
1666
- *
1667
- */
1668
- children: ReactNode;
1669
- }
1670
- export interface ModalFooterProps {
1671
- /**
1672
- * The footer of the modal
1673
- *
1674
- */
1675
- children: ReactNode;
1676
- }
1677
- export interface PanelProps {
1678
- /**
1679
- * Accessibility label.
1680
- *
1681
- */
1682
- 'aria-label'?: string;
1683
- /**
1684
- * The main content of the panel when it opens.
1685
- *
1686
- */
1687
- children?: ReactNode;
1688
- /**
1689
- * A unique ID for the panel
1690
- *
1691
- */
1692
- id: string;
1693
- /**
1694
- * A function that will be invoked when the panel has finished opening.
1695
- *
1696
- */
1697
- onOpen?: () => void;
1698
- /**
1699
- * A function that will be invoked when the panel has finished closing.
1700
- *
1701
- */
1702
- onClose?: () => void;
1703
- /**
1704
- * The width of the panel
1705
- *
1706
- * @defaultValue `"sm"`
1707
- */
1708
- width?: TShirtSizes['sm'] | TShirtSizes['md'] | TShirtSizes['lg'];
1709
- /**
1710
- * The title of the panel
1711
- *
1712
- */
1713
- title?: string;
1714
- /**
1715
- * The variant of the panel
1716
- *
1717
- * @defaultValue `"default"`
1718
- */
1719
- variant?: 'modal' | 'default';
1720
- }
1721
- export interface PanelSectionProps {
1722
- /**
1723
- * When set to `true`, the section will have no bottom margin
1724
- *
1725
- * @defaultValue `false`
1726
- */
1727
- flush?: boolean;
1728
- /**
1729
- * The main content of the section
1730
- *
1731
- */
1732
- children: ReactNode;
1733
- }
1734
- export interface PanelBodyProps {
1735
- /**
1736
- * The main content of the body
1737
- *
1738
- */
1739
- children: ReactNode;
1740
- }
1741
- export interface PanelFooterProps {
1742
- /**
1743
- * The main content of the footer
1744
- *
1745
- */
1746
- children: ReactNode;
1747
- }
1748
- /**
1749
- * The props type for {@link !components.ProgressBar}.
1750
- *
1751
- * @category Component Props
1752
- */
1753
- export interface ProgressBarProps {
1754
- /**
1755
- * The text that displays above the progress bar.
1756
- *
1757
- */
1758
- title?: string;
1759
- /**
1760
- * Accessibility label.
1761
- *
1762
- */
1763
- 'aria-label'?: string;
1764
- /**
1765
- * Whether the progress bar displays the completion percentage.
1766
- *
1767
- * @defaultValue `false`
1768
- */
1769
- showPercentage?: boolean;
1770
- /**
1771
- * The number representing the progress so far.
1772
- *
1773
- * @defaultValue `0`
1774
- */
1775
- value?: number;
1776
- /**
1777
- * The maximum value of the progress bar.
1778
- *
1779
- * @defaultValue `100`
1780
- */
1781
- maxValue?: number;
1782
- /**
1783
- * The text that explains the current state of the value property. For example, "150 out of 250". Displays above the progress bar on the right side.
1784
- *
1785
- */
1786
- valueDescription?: string;
1787
- /**
1788
- * The color that indicates the type of progress bar.
1789
- *
1790
- * @defaultValue `"success"`
1791
- */
1792
- variant?: 'success' | 'danger' | 'warning';
1793
- /** @deprecated use maxValue instead */
1794
- valueMax?: number;
1795
- }
1796
- /**
1797
- * Generic collection of props for select components
1798
- * @internal
1799
- * */
1800
- export interface BaseSelectProps {
1801
- /**
1802
- * The text that displays above to the dropdown menu.
1803
- *
1804
- */
1805
- label?: string;
1806
- /**
1807
- * The unique identifier for the select element.
1808
- *
1809
- */
1810
- name?: string;
1811
- /**
1812
- * When set to `true`, displays a required field indicator.
1813
- *
1814
- * @defaultValue `false`
1815
- */
1816
- required?: boolean;
1817
- /**
1818
- * When set to `true`, sets the field as read-only on the CRM record, and users will not be able to fill the input field.
1819
- *
1820
- * @defaultValue `false`
1821
- */
1822
- readOnly?: boolean;
1823
- /**
1824
- * Displayed text that describes the field's purpose.
1825
- *
1826
- */
1827
- description?: string;
1828
- /**
1829
- * The text that displays in a tooltip next to the label.
1830
- *
1831
- */
1832
- tooltip?: string;
1833
- /**
1834
- * Text that appears in the input when no value is set.
1835
- *
1836
- */
1837
- placeholder?: string;
1838
- /**
1839
- * When set to `true`, `validationMessage` is displayed as an error message if provided.
1840
- * The input will also render its error state to let the user know there's an error.
1841
- * If left `false` (default), `validationMessage` is displayed as a success message.
1842
- *
1843
- * @defaultValue `false`
1844
- */
1845
- error?: boolean;
1846
- /**
1847
- * The text to show if the input has an error.
1848
- *
1849
- */
1850
- validationMessage?: string;
1851
- /**
1852
- * The variant type for the select.
1853
- *
1854
- * @defaultValue `"input"`
1855
- */
1856
- variant?: 'transparent' | 'input';
1857
- }
1858
- /**
1859
- * The props type for {@link !components.Select}.
1860
- *
1861
- * @category Component Props
1862
- */
1863
- export interface SelectProps extends BaseSelectProps {
1864
- /**
1865
- * The value of the select input.
1866
- *
1867
- */
1868
- value?: string | number | boolean;
1869
- /**
1870
- * A callback function that is invoked when the value is committed.
1871
- *
1872
- * @event
1873
- */
1874
- onChange?: (value: NonNullable<SelectProps['value']>) => void;
1875
- /**
1876
- * The variant type for the select.
1877
- *
1878
- * @defaultValue `"input"`
1879
- */
1880
- variant?: 'transparent' | 'input';
1881
- /**
1882
- * A function that is called and passed the value every time the search field is
1883
- * edited by the user. Prefer updating state in onChange as it fires less
1884
- * frequently, and if you need to update state here, consider debouncing your function.
1885
- *
1886
- * @event
1887
- */
1888
- onInput?: (value: string) => void;
1889
- /**
1890
- * The options to display in the dropdown menu.
1891
- */
1892
- options: {
1893
- /** Will be used as the display text. **/
1894
- label: string;
1895
- /** Should be the option's unique identifier, which is submitted with the form. **/
1896
- value: string | number | boolean;
1897
- }[];
1898
- }
1899
- /**
1900
- * The props type for {@link !components.MultiSelect}.
1901
- *
1902
- * @category Component Props
1903
- */
1904
- export interface MultiSelectProps extends BaseSelectProps {
1905
- /**
1906
- * The value of the select input.
1907
- *
1908
- */
1909
- value?: (string | number | boolean)[];
1910
- /**
1911
- * A callback function that is invoked when the value is committed.
1912
- *
1913
- * @event
1914
- */
1915
- onChange?: (value: NonNullable<MultiSelectProps['value']>) => void;
1916
- /**
1917
- * The options to display in the dropdown menu.
1918
- */
1919
- options: {
1920
- /** Will be used as the display text. **/
1921
- label: string;
1922
- /** Should be the option's unique identifier, which is submitted with the form. **/
1923
- value: string | number | boolean;
1924
- }[];
1925
- }
1926
- /**
1927
- * The props type for {@link !components.StatisticsTrend}.
1928
- *
1929
- * @category Component Props
1930
- */
1931
- export interface StatisticsTrendProps {
1932
- /**
1933
- * The text to be displayed as the trend value.
1934
- */
1935
- value: string;
1936
- /**
1937
- * The direction of the trend arrow.
1938
- *
1939
- * @defaultValue `"increase"`
1940
- */
1941
- direction: 'increase' | 'decrease';
1942
- /**
1943
- * The color of the trend arrow.
1944
- */
1945
- color?: 'red' | 'green';
1946
- }
1947
- /**
1948
- * The props type for {@link !components.StatisticsItem}.
1949
- *
1950
- * @category Component Props
1951
- */
1952
- export interface StatisticsItemProps {
1953
- /**
1954
- * The unique identifier.
1955
- */
1956
- id?: string;
1957
- /**
1958
- * The item's label text.
1959
- */
1960
- label: string;
1961
- /**
1962
- * The string to be displayed as the item's primary number.
1963
- */
1964
- number: string | number;
1965
- /**
1966
- * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. The children should be {@link !components.StatisticsTrend} or {@link !components.Text}.
1967
- */
1968
- children?: ReactNode;
1969
- }
1970
- /**
1971
- * The props type for {@link !components.Statistics}.
1972
- *
1973
- * @category Component Props
1974
- */
1975
- export interface StatisticsProps {
1976
- /**
1977
- * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. The children should be {@link !components.StatisticsItem}.
1978
- */
1979
- children: ReactNode;
1980
- }
1981
- /**
1982
- * The props type for {@link !components.StatusTag}.
1983
- *
1984
- * @category Component Props
1985
- */
1986
- export interface StatusTagProps {
1987
- /**
1988
- * The status tag's indicator color.
1989
- *
1990
- * @defaultValue `"default"`
1991
- */
1992
- variant?: 'danger' | 'warning' | 'info' | 'success' | 'default';
1993
- /**
1994
- * When set to true, the status tag's dot will be a ring instead.
1995
- *
1996
- * @defaultValue `false `
1997
- */
1998
- hollow?: boolean;
1999
- /**
2000
- * A function that will be invoked when the status tag is clicked. It receives no arguments and its return value is ignored.
2001
- *
2002
- * @event
2003
- */
2004
- onClick?: () => void;
2005
- /**
2006
- * When set to true, the status tag will show a small clickable 'x' icon.
2007
- *
2008
- * @defaultValue `false`
2009
- */
2010
- showRemoveIcon?: boolean;
2011
- /**
2012
- * A function that will be invoked when the 'x' icon is clicked. It receives no arguments and its return value is ignored.
2013
- *
2014
- * @event
2015
- */
2016
- onRemoveClick?: () => void;
2017
- /**
2018
- * Sets the content that will render inside the StatusTag. This prop is passed implicitly by providing sub-components. We recommend only using a small amount of text.
2019
- */
2020
- children: ReactNode;
2021
- }
2022
- /**
2023
- * The props type for {@link !components.StepIndicator}.
2024
- *
2025
- * @category Component Props
2026
- */
2027
- export interface StepIndicatorProps {
2028
- /**
2029
- * An array containing the name of each step.
2030
- */
2031
- stepNames: string[];
2032
- /**
2033
- * The orientation of the indicator.
2034
- *
2035
- * @defaultValue `"horizontal"`
2036
- */
2037
- direction?: 'horizontal' | 'vertical';
2038
- /**
2039
- * The size of the indicator circles.
2040
- *
2041
- * @defaultValue `"small"`
2042
- */
2043
- circleSize?: AllSizes;
2044
- /**
2045
- * The currently active step. Steps are 0-based.
2046
- */
2047
- currentStep?: number;
2048
- /**
2049
- * The visual style of the component.
2050
- *
2051
- * - default: default spacing.
2052
- * - compact: only shows the title of the currently active step.
2053
- * - flush: only shows the title of the currently active step and removes left and right margins.
2054
- *
2055
- * @defaultValue `"default"`
2056
- */
2057
- variant?: 'default' | 'compact' | 'flush';
2058
- /**
2059
- * A function that will be invoked when a step in the indicator is clicked. The function receives the current step index as an argument (zero-based). Use this to update the currently active step.
2060
- *
2061
- * @event
2062
- */
2063
- onClick?: (stepIndex: number) => void;
2064
- }
2065
- export interface AlignmentProps {
2066
- align?: 'left' | 'center' | 'right';
2067
- }
2068
- export interface WidthProps {
2069
- width?: 'min' | 'max' | 'auto' | number;
2070
- }
2071
- export interface TableElementProps {
2072
- children: ReactNode;
2073
- }
2074
- /**
2075
- * @property align Sets the alignment of a table header.
2076
- * @property width Sets the width of a table header.
2077
- *
2078
- * @interface
2079
- */
2080
- export type BaseTableHeaderProps = TableElementProps & AlignmentProps & WidthProps;
2081
- export type TableCellProps = TableElementProps & AlignmentProps & WidthProps & {
2082
- colSpan?: number;
2083
- };
2084
- /**
2085
- * The props type for {@link !components.TableHeader} when sorted === never.
2086
- *
2087
- * @category Component Props
2088
- */
2089
- export interface UnSortedTableHeaderProps extends BaseTableHeaderProps {
2090
- sortDirection?: 'never';
2091
- }
2092
- /**
2093
- * The props type for {@link !components.TableHeader} when sorted !== never.
2094
- *
2095
- * @category Component Props
2096
- */
2097
- export interface SortedTableHeaderProps extends BaseTableHeaderProps {
2098
- /**
2099
- * Sets the current direction in which the column is sorted (if any). It's a visual indicator, it doesn't modify the data.
2100
- *
2101
- * @defaultValue `"none"`
2102
- */
2103
- sortDirection: 'ascending' | 'descending' | 'none';
2104
- /**
2105
- * A callback function that is invoked when the header is clicked. It recieves the new `sortDirection` as an argument.
2106
- * It's required when sort = `ascending`, `descending` or `none`.
2107
- *
2108
- * @event
2109
- * @defaultValue `"none"`
2110
- */
2111
- onSortChange: (value: NonNullable<SortedTableHeaderProps['sortDirection']>) => void;
2112
- /**
2113
- * If `true`, users cannot change the sort ordering. It has no effect if sort=`never` or `undefined`.
2114
- *
2115
- * @defaultValue `false`
2116
- */
2117
- disabled?: boolean;
2118
- }
2119
- /**
2120
- * The props type for {@link !components.TableHeader}.
2121
- *
2122
- * @category Component Props
2123
- */
2124
- export type TableHeaderProps = SortedTableHeaderProps | UnSortedTableHeaderProps;
2125
- interface BaseTableProps {
2126
- /**
2127
- * When set to false, the table will not have borders.
2128
- *
2129
- * @defaultValue `true`
2130
- */
2131
- bordered?: boolean;
2132
- /**
2133
- * When set to `true`, the table will not have bottom margin.
2134
- *
2135
- * @defaultValue `false`
2136
- */
2137
- flush?: boolean;
2138
- /**
2139
- * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. The children should be one of Table's subcomponents.
2140
- */
2141
- children: ReactNode;
2142
- }
2143
- /**
2144
- * @internal
2145
- */
2146
- export interface TableNoPaginatedProps extends BaseTableProps {
2147
- /**
2148
- * When set to `true`, the table will include pagination navigation. Take a look at {@link !types.TablePaginatedProps} for pagination props.
2149
- *
2150
- * @defaultValue `false`
2151
- */
2152
- paginated?: false;
2153
- }
2154
- /**
2155
- * @internal
2156
- */
2157
- export interface TablePaginatedProps extends BaseTableProps {
2158
- /**
2159
- * When set to `true`, the table will include pagination navigation. Take a look at {@link !types.TablePaginatedProps} for pagination props.
2160
- *
2161
- * @defaultValue `false`
2162
- */
2163
- paginated: true;
2164
- /**
2165
- * The total number of pages available.
2166
- */
2167
- pageCount: number;
2168
- /**
2169
- * When set to `false`, hides the text labels for the First/Prev/Next buttons. The button labels will still be accessible to screen readers.
2170
- *
2171
- * @defaultValue `true`
2172
- */
2173
- showButtonLabels?: boolean;
2174
- /**
2175
- * When set to `true`, displays the **First/Last** page buttons.
2176
- *
2177
- * @defaultValue `false`
2178
- */
2179
- showFirstLastButtons?: boolean;
2180
- /**
2181
- * Sets how many page buttons are displayed.
2182
- */
2183
- maxVisiblePageButtons?: number;
2184
- /**
2185
- * Denotes the current page.
2186
- */
2187
- page?: number;
2188
- /**
2189
- * A function that will be invoked when the pagination button is clicked. It receives the new page number as argument.
2190
- *
2191
- * @event
2192
- */
2193
- onPageChange: (pageNumber: number) => void;
2194
- }
2195
- /**
2196
- * The props type for {@link !components.Table}.
2197
- *
2198
- * @category Component Props
2199
- */
2200
- export type TableProps = TableNoPaginatedProps | TablePaginatedProps;
2201
- export interface TabsProps {
2202
- /**
2203
- * Sets the content that will render inside the component.
2204
- */
2205
- children?: ReactNode;
2206
- /**
2207
- * Callback when the selected tab changes.
2208
- */
2209
- onSelectedChange?: ((selectedId: string) => void) | ((selectedId: number) => void) | ((selectedId: number | string) => void);
2210
- /**
2211
- * The initially selected tab ID.
2212
- */
2213
- defaultSelected?: string | number;
2214
- /**
2215
- * The currently selected tab ID (controlled component).
2216
- */
2217
- selected?: string | number;
2218
- /**
2219
- * Visual style variant of the tabs.
2220
- * @defaultValue 'default'
2221
- */
2222
- variant?: 'default' | 'enclosed';
2223
- /**
2224
- * Whether the tab should fill available space.
2225
- */
2226
- fill?: boolean;
2227
- }
2228
- export interface TabProps {
2229
- /**
2230
- * Whether the tab is disabled.
2231
- */
2232
- disabled?: boolean;
2233
- /**
2234
- * Unique identifier for the tab.
2235
- */
2236
- tabId?: string | number;
2237
- /**
2238
- * The title text of the tab.
2239
- */
2240
- title?: string;
2241
- /**
2242
- * The content to display when this tab is selected.
2243
- */
2244
- children?: ReactNode;
2245
- /**
2246
- * The tooltip text of the tab.
2247
- */
2248
- tooltip?: string;
2249
- /**
2250
- * The tab's tooltip placement
2251
- * @defaultValue 'top'
2252
- */
2253
- tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
2254
- }
2255
- /**
2256
- * The props type for {@link !components.Tag}.
2257
- *
2258
- * @category Component Props
2259
- */
2260
- export interface TagProps extends OverlayComponentProps {
2261
- /**
2262
- * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
2263
- */
2264
- children: ReactNode;
2265
- /**
2266
- * The tag's color. The following variants are available.
2267
- *
2268
- * @defaultValue `"default"`
2269
- */
2270
- variant?: 'default' | 'warning' | 'success' | 'error' | 'info';
2271
- /**
2272
- * A function that will be invoked when the tag is clicked.
2273
- *
2274
- * @event
2275
- */
2276
- onClick?: ReactionsHandler<ExtensionEvent>;
2277
- /**
2278
- * When set to true, this component can be aligned side-by-side with text.
2279
- *
2280
- * @defaultValue `false`
2281
- */
2282
- inline?: boolean;
2283
- }
2284
- /**
2285
- * @internal
2286
- * Format options for text component.
2287
- */
2288
- export interface TextFormatOptions {
2289
- /**
2290
- * Weight of the font.
2291
- *
2292
- * @defaultValue `"regular"`
2293
- */
2294
- fontWeight?: 'regular' | 'bold' | 'demibold';
2295
- /**
2296
- * If `true`, font will be in italicized.
2297
- *
2298
- * @defaultValue `false`
2299
- */
2300
- italic?: boolean;
2301
- /**
2302
- * Line decoration of the font.
2303
- *
2304
- * @defaultValue `"none"`
2305
- */
2306
- lineDecoration?: 'none' | 'underline' | 'strikethrough';
2307
- /**
2308
- * Controls the capitalization of text.
2309
- *
2310
- * - `none`: No capitalization changes (default)
2311
- * - `uppercase`: Transforms all characters to uppercase
2312
- * - `lowercase`: Transforms all characters to lowercase
2313
- * - `capitalize`: Capitalizes the first letter of each word
2314
- * - `sentenceCase`: Capitalizes the first letter of the text and makes the rest lowercase
2315
- *
2316
- * @defaultValue `"none"`
2317
- */
2318
- textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize' | 'sentenceCase';
2319
- }
2320
- export interface TruncateOptions {
2321
- maxWidth?: number;
2322
- tooltipText?: string;
2323
- }
2324
- /**
2325
- * The props type for {@link !components.Text}.
2326
- *
2327
- * @interface
2328
- * @category Component Props
2329
- */
2330
- export type TextProps = {
2331
- /**
2332
- * The style of text to display. Can be either of:
2333
- *
2334
- * - bodytext: the default value which renders the standard text size.
2335
- * - microcopy: smaller text used for adding context.
2336
- *
2337
- * @defaultValue `"bodytext"`
2338
- */
2339
- variant?: 'bodytext' | 'microcopy';
2340
- /**
2341
- * When set to `true`, inserts a line break.
2342
- *
2343
- * @defaultValue `false`
2344
- */
2345
- inline?: boolean;
2346
- /**
2347
- * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
2348
- */
2349
- children: ReactNode;
2350
- /**
2351
- * @interface
2352
- * The style of text to display. Can be any of:
2353
- *
2354
- * - { fontWeight: 'bold' }
2355
- * - { fontWeight: 'demibold' }
2356
- * - { italic: true }
2357
- * - { lineDecoration: 'strikethrough' }
2358
- * - { lineDecoration: 'underline' }
2359
- * - <Text inline={true}>
2360
- */
2361
- format?: TextFormatOptions;
2362
- /**
2363
- * @interface
2364
- * truncates long strings to a single line. If the full string doesn't fit in one line,
2365
- * it's shown in a tooltip on hover.
2366
- *
2367
- * - `false` => no truncation(default).
2368
- * - `true` => truncates the string to a single line. Full-text will show inside the tooltip.
2369
- * - { tooltipText: 'some text' } => truncates the string and lets you control the contents of the tooltip.
2370
- * - { maxWidth: 150 } => sets the width(in pixel) of the line.
2371
- *
2372
- * @defaultValue `false`
2373
- */
2374
- truncate?: boolean | TruncateOptions;
2375
- };
2376
- /**
2377
- * The props type for {@link !components.Tile}.
2378
- *
2379
- * @category Component Props
2380
- */
2381
- export interface TileProps {
2382
- /**
2383
- * Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
2384
- */
2385
- children: ReactNode;
2386
- /**
2387
- * When set to `true`, reduces the default amount of padding around the contents of the Tile.
2388
- *
2389
- * @defaultValue `false`
2390
- */
2391
- compact?: boolean;
2392
- /**
2393
- * When set to `true`, removes left and right padding from tile contents.
2394
- *
2395
- * @defaultValue `false`
2396
- */
2397
- flush?: boolean;
2398
- }
2399
- /**
2400
- * The props type for {@link !components.Toggle}.
2401
- *
2402
- * @category Component Props
2403
- */
2404
- export interface ToggleProps {
2405
- /**
2406
- * The current status of the input.
2407
- */
2408
- checked?: boolean;
2409
- /**
2410
- * When set to `true`, the option cannot be selected.
2411
- */
2412
- readonly?: boolean;
2413
- /**
2414
- * The unique identifier for the toggle element.
2415
- */
2416
- name?: string;
2417
- /**
2418
- * The size variation of the toggle.
2419
- *
2420
- * @defaultValue `"medium"`
2421
- */
2422
- size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'] | 'default';
2423
- /**
2424
- * A function that is called when the `checked` input status changes.
2425
- *
2426
- * @event
2427
- */
2428
- onChange?: (checked: boolean) => void;
2429
- /**
2430
- * When set to `true`, the option will be selected by default. Use it to
2431
- * set the default `checked` state when the component is **uncontrolled**.
2432
- */
2433
- initialIsChecked?: boolean;
2434
- /**
2435
- * The companion text of for Toggle. It can be displayed on top,
2436
- * inline, or hidden. When hidden, it will remain usable for screen readers.
2437
- */
2438
- label: string;
2439
- /**
2440
- * Controls the display setting of the label prop.
2441
- *
2442
- * @defaultValue `"inline"`
2443
- */
2444
- labelDisplay?: 'inline' | 'top' | 'hidden';
2445
- /**
2446
- * The text that appears on the Toggle when `checked={true}`.
2447
- *
2448
- * @defaultValue `"ON"`
2449
- */
2450
- textChecked?: string;
2451
- /**
2452
- * The text that appears on the Toggle when `checked={false}`.
2453
- *
2454
- * @defaultValue `"ON"`
2455
- */
2456
- textUnchecked?: string;
2457
- }
2458
- /**
2459
- * The props type for {@link !components.Checkbox}.
2460
- *
2461
- * @category Component Props
2462
- */
2463
- export interface CheckboxProps {
2464
- /**
2465
- * A string representing the value of the input. This is not displayed on the client-side,
2466
- * but on the server this is the value given to the data submitted with the checkbox's name.
2467
- */
2468
- value?: string;
2469
- /**
2470
- * The current status of the input.
2471
- */
2472
- checked?: boolean;
2473
- /** @deprecated use readOnly instead */
2474
- readonly?: boolean;
2475
- /**
2476
- * When set to `true`, the option cannot be selected.
2477
- */
2478
- readOnly?: boolean;
2479
- /**
2480
- * The string that displays below the toggle.
2481
- */
2482
- description?: string;
2483
- /**
2484
- * The unique identifier for the checkbox element.
2485
- */
2486
- name?: string;
2487
- /**
2488
- * The size variation of the checkbox.
2489
- *
2490
- * @defaultValue `"default"`
2491
- */
2492
- variant?: 'default' | 'small';
2493
- /**
2494
- * A function that is called when the `checked` input status changes.
2495
- *
2496
- * @event
2497
- */
2498
- onChange?: (checked: boolean, value: string) => void;
2499
- /** The text that displays in the dropdown menu. */
2500
- children?: React.ReactNode;
2501
- /**
2502
- * Use the inline prop to arrange checkboxes side-by-side.
2503
- */
2504
- inline?: boolean;
2505
- /**
2506
- * When set to `true`, the option will be selected by default. Use it to
2507
- * set the default `checked` state when the component is **uncontrolled**.
2508
- */
2509
- initialIsChecked?: boolean;
2510
- /**
2511
- * Accessibility label. It should be present when the checkbox has no label(children).
2512
- */
2513
- 'aria-label'?: string;
2514
- }
2515
- /**
2516
- * The props type for {@link !components.RadioButton}.
2517
- * @category Component Props
2518
- * @interface
2519
- */
2520
- export type RadioButtonProps = Omit<CheckboxProps, 'aria-label'>;
2521
- export type ToggleGroupOption = {
2522
- /** The text that displays in the dropdown menu. */
2523
- label: string;
2524
- /** The unique value that is submitted with the form. */
2525
- value: string;
2526
- /** When set to `true`, the option will be selected by default. */
2527
- initialIsChecked?: boolean;
2528
- /** When set to `true`, the option cannot be selected. */
2529
- readonly?: boolean;
2530
- /** The string that displays below the toggle. */
2531
- description?: string;
2532
- };
2533
- interface ToggleGroupListBaseProps {
2534
- name: ToggleGroupProps['name'];
2535
- options: ToggleGroupProps['options'];
2536
- variant: ToggleGroupProps['variant'];
2537
- inline?: boolean;
2538
- }
2539
- export interface CheckboxListProps extends ToggleGroupListBaseProps {
2540
- value?: CheckboxGroupProps['value'];
2541
- onChange?: CheckboxGroupProps['onChange'];
2542
- }
2543
- export interface RadioButtonListProps extends ToggleGroupListBaseProps {
2544
- value?: RadioButtonGroupProps['value'];
2545
- onChange?: RadioButtonGroupProps['onChange'];
2546
- }
2547
- type ToggleType = 'checkboxList' | 'radioButtonList';
2548
- export interface CommonGroupProps {
2549
- /**
2550
- * Denotes the type of list to render.
2551
- */
2552
- toggleType?: ToggleType;
2553
- /**
2554
- * The unique identifier for the toggle group element.
2555
- */
2556
- name: string;
2557
- /**
2558
- * The label that displays above the toggle group.
2559
- */
2560
- label: string;
2561
- /**
2562
- * The text to display if the input has an error.
2563
- */
2564
- validationMessage?: string;
2565
- /**
2566
- * When set to `true`, displays a required indicator next to the toggle group.
2567
- *
2568
- * @defaultValue `false`
2569
- */
2570
- required?: boolean;
2571
- /**
2572
- * Text that will appear in a tooltip next to the toggle group label.
2573
- */
2574
- tooltip?: string;
2575
- /**
2576
- * When set to `true`, `validationMessage` is displayed as an error message if provided. The input will also render its error state to let the user know there is an error. If left false, `validationMessage` is displayed as a success message.
2577
- *
2578
- * @defaultValue `false`
2579
- */
2580
- error?: boolean;
2581
- /**
2582
- * An array of options to display in the dropdown menu.
2583
- *
2584
- * @defaultValue `[]`
2585
- */
2586
- options: Array<ToggleGroupOption>;
2587
- /**
2588
- * When set to `true`, stacks the options horizontally.
2589
- *
2590
- * @defaultValue `false`
2591
- */
2592
- inline?: boolean;
2593
- /**
2594
- * The size variation of the individual options.
2595
- *
2596
- * @defaultValue `"default"`
2597
- */
2598
- variant?: 'default' | 'small';
2599
- value?: string[] | string;
2600
- }
2601
- type CheckboxGroupProps = {
2602
- /**
2603
- * Denotes the type of list to render.
2604
- *
2605
- * @defaultValue `"checkboxList"`
2606
- */
2607
- toggleType: 'checkboxList';
2608
- /**
2609
- * A function that is called with the new value or values when the list is updated.
2610
- *
2611
- * @event
2612
- */
2613
- onChange?: (value: string[]) => void;
2614
- /**
2615
- * The value of the toggle group.
2616
- */
2617
- value?: string[];
2618
- } & CommonGroupProps;
2619
- type RadioButtonGroupProps = {
2620
- /**
2621
- * Denotes the type of list to render.
2622
- *
2623
- * @defaultValue `"checkboxList"`
2624
- */
2625
- toggleType: 'radioButtonList';
2626
- /**
2627
- * A function that is called with the new value or values when the list is updated.
2628
- *
2629
- * @event
2630
- */
2631
- onChange?: (value: string) => void;
2632
- /**
2633
- * The value of the toggle group.
2634
- */
2635
- value?: string;
2636
- } & CommonGroupProps;
2637
- type DefaultToggleTypeProps = {
2638
- toggleType?: never;
2639
- } & CheckboxGroupProps;
2640
- /**
2641
- * The props type for {@link !components.ToggleGroup}.
2642
- *
2643
- * @interface
2644
- * @category Component Props
2645
- */
2646
- export type ToggleGroupProps = CheckboxGroupProps | RadioButtonGroupProps | DefaultToggleTypeProps;
2647
- export interface TooltipProps {
2648
- /**
2649
- * Sets the content to render on the screen, and serves as the trigger for the tooltip. This prop is passed implicitly by providing sub-components.
2650
- */
2651
- children: ReactNode;
2652
- /**
2653
- * Sets the position of the tooltip relative to its trigger element.
2654
- * @default 'top'
2655
- */
2656
- placement?: 'top' | 'bottom' | 'left' | 'right';
2657
- }
2658
- /** @ignore */
2659
- interface Team {
2660
- id: number;
2661
- name: string;
2662
- teammates: number[];
2663
- }
2664
- /** @ignore */
2665
- export type Permission = 'integrations-management-write';
2666
- /** @ignore */
2667
- export interface UserContext {
2668
- id: number;
2669
- emails: string[];
2670
- email: string;
2671
- firstName: string;
2672
- lastName: string;
2673
- /** @deprecated Roles will always be empty. Please use teams instead */
2674
- roles: string[];
2675
- teams: Team[];
2676
- locale?: string;
2677
- permissions: Permission[];
2678
- }
2679
- /** @ignore */
2680
- export interface PortalContext {
2681
- id: number;
2682
- timezone: string;
2683
- }
2684
- /** @ignore */
2685
- export interface CrmRecordContext {
2686
- objectId: number;
2687
- objectTypeId: string;
2688
- }
2689
- /** @ignore */
2690
- export interface AppContext {
2691
- appId: number | string;
2692
- appName?: string;
2693
- cardTitle?: string;
2694
- }
2695
- type ProfileVariableValue = string | number | bigint | boolean;
2696
- /** @ignore */
2697
- export interface BaseContext {
2698
- user: UserContext;
2699
- portal: PortalContext;
2700
- variables?: Record<string, ProfileVariableValue>;
2701
- }
2702
- /** @ignore */
2703
- export interface CrmContext extends BaseContext {
2704
- location: 'crm.record.tab' | 'crm.record.sidebar' | 'crm.preview' | 'helpdesk.sidebar';
2705
- crm: CrmRecordContext;
2706
- extension?: AppContext;
2707
- }
2708
- /** @ignore */
2709
- export interface SettingsContext extends BaseContext {
2710
- location: 'settings';
2711
- }
2712
- /** @ignore */
2713
- export interface AppHomeContext extends BaseContext {
2714
- location: 'home';
2715
- }
2716
- /** @ignore */
2717
- export interface GenericContext extends BaseContext {
2718
- location: 'uie.playground.middle';
2719
- }
2720
- /** @ignore */
2721
- export interface BaseExtensionContextData {
2722
- appId: number | string;
2723
- appName?: string;
2724
- cardId: string;
2725
- cardTitle?: string;
2726
- location: keyof ExtensionPoints;
2727
- sourceId?: string | null;
2728
- appAccessLevel: 'PUBLIC' | 'PRIVATE';
2729
- additionalProperties?: {
2730
- [key: string]: string;
2731
- } | null;
2732
- }
2733
- /** @ignore */
2734
- export interface CrmExtensionContextData extends BaseExtensionContextData {
2735
- objectId: number | string;
2736
- objectTypeId: string;
2737
- }
2738
- /** @ignore */
2739
- export interface CrmDataHighlightProps {
2740
- properties: Array<string>;
2741
- objectTypeId?: string;
2742
- objectId?: number;
2743
- }
2744
- /** @ignore */
2745
- export interface CrmReportProps {
2746
- reportId: string;
2747
- use?: 'associations' | 'subject' | 'unfiltered';
2748
- }
2749
- /** @ignore */
2750
- export interface CrmPropertyListProps {
2751
- properties: Array<string>;
2752
- direction?: string;
2753
- objectTypeId?: string;
2754
- objectId?: number;
2755
- }
2756
- /** @ignore */
2757
- type CrmSortDescriptor = {
2758
- columnName: string;
2759
- direction: 1 | -1;
2760
- };
2761
- /** @ignore */
2762
- interface CrmSearchFilter {
2763
- operator: 'EQ' | 'NEQ' | 'LT' | 'LTE' | 'GT' | 'GTE' | 'BETWEEN' | 'IN' | 'NOT_IN' | 'HAS_PROPERTY' | 'NOT_HAS_PROPERTY';
2764
- value?: string | number;
2765
- values?: string | number;
2766
- highValue?: string | number;
2767
- property: string;
2768
- }
2769
- /** @ignore */
2770
- export interface CrmAssociationTableProps {
2771
- objectTypeId: string;
2772
- propertyColumns: Array<string>;
2773
- quickFilterProperties?: Array<string>;
2774
- searchable?: boolean;
2775
- pagination?: boolean;
2776
- associationLabelFilter?: boolean;
2777
- pageSize?: number;
2778
- preFilters?: Array<CrmSearchFilter>;
2779
- sort?: Array<CrmSortDescriptor>;
2780
- }
2781
- /** @ignore */
2782
- export interface CrmAssociationPivotProps {
2783
- objectTypeId: string;
2784
- associationLabels?: Array<string>;
2785
- maxAssociations?: number;
2786
- preFilters?: Array<CrmSearchFilter>;
2787
- sort?: Array<CrmSortDescriptor>;
2788
- }
2789
- /** @ignore */
2790
- export interface CrmAssociationStageTrackerProps {
2791
- objectTypeId: string;
2792
- properties: Array<string>;
2793
- associationLabels?: Array<string>;
2794
- filters?: Array<CrmSearchFilter>;
2795
- showProperties?: boolean;
2796
- sort?: Array<CrmSortDescriptor>;
2797
- }
2798
- /** @ignore */
2799
- export interface CrmSimpleDeadlineProps {
2800
- endDatePropertyName: string;
2801
- properties: Array<string>;
2802
- progressTheme?: ProgressTheme;
2803
- showProperties?: boolean;
2804
- startDatePropertyName: string;
2805
- }
2806
- /** @ignore */
2807
- export interface CrmRelativeTimelineProps {
2808
- properties: Array<string>;
2809
- }
2810
- /** @ignore */
2811
- interface BaseCrmStatisticItem {
2812
- label: string;
2813
- }
2814
- /** @ignore */
2815
- interface FilterGroup {
2816
- filters: Array<CrmSearchFilter>;
2817
- }
2818
- /** @ignore */
2819
- interface ProgressTheme {
2820
- backgroundColor?: string;
2821
- completedColor?: string;
2822
- upcomingColor?: string;
2823
- borderRadius?: string | number;
2824
- height?: string | number;
2825
- completedGradient?: Gradient;
2826
- upcomingGradient?: Gradient;
2827
- }
2828
- /** @ignore */
2829
- interface PercentileMetricItem extends BaseCrmStatisticItem {
2830
- statisticType: 'PERCENTILES';
2831
- propertyName: string;
2832
- percentile: number;
2833
- filterGroups?: Array<FilterGroup>;
2834
- }
2835
- /** @ignore */
2836
- type CrmStatisticItem = BasicMetricItem | PercentileMetricItem;
2837
- /** @ignore */
2838
- export interface CrmStatisticsProps {
2839
- objectTypeId: string;
2840
- statistics: Array<CrmStatisticItem>;
2841
- }
2842
- /** @ignore */
2843
- interface BasicMetricItem extends BaseCrmStatisticItem {
2844
- statisticType: 'SUM' | 'AVG' | 'MIN' | 'MAX' | 'DISTINCT_APPROX' | 'COUNT';
2845
- propertyName: string;
2846
- filterGroups?: Array<FilterGroup>;
2847
- }
2848
- /** @ignore */
2849
- interface Gradient {
2850
- startColor: string;
2851
- endColor: string;
2852
- }
2853
- /** @ignore */
2854
- export interface CrmStageTrackerProps {
2855
- objectId?: number;
2856
- objectTypeId?: string;
2857
- properties: Array<string>;
2858
- showProperties?: boolean;
2859
- }
2860
- /** @ignore */
2861
- export interface CrmAssociationPropertyListProps {
2862
- objectTypeId: string;
2863
- properties: Array<string>;
2864
- associationLabels?: Array<string>;
2865
- filters?: Array<CrmSearchFilter>;
2866
- sort?: Array<CrmSortDescriptor>;
2867
- }
2868
- /** @ignore */
2869
- interface ObjectCoordinates {
2870
- objectTypeId: string;
2871
- objectId: number;
2872
- }
2873
- /** @ignore */
2874
- interface OpenRecordAssociationFormArgs {
2875
- objectTypeId: string;
2876
- association: {
2877
- objectTypeId: string;
2878
- objectId: number;
2879
- };
2880
- }
2881
- /** @ignore */
2882
- interface ActivityCreatorActionArgs {
2883
- objectTypeId: string;
2884
- objectId: number;
2885
- windowVariant?: 'windowed' | 'fullscreen';
2886
- initialEmailBody?: string;
2887
- initialEmailSubject?: string;
2888
- }
2889
- /** @ignore */
2890
- interface EngagementAppLinkArgs {
2891
- objectId: number | string;
2892
- objectTypeId: string;
2893
- engagementId: number | string;
2894
- external?: boolean;
2895
- }
2896
- /** @ignore */
2897
- interface RecordAppLinkArgs {
2898
- includeEschref?: boolean;
2899
- objectId: number;
2900
- objectTypeId: string;
2901
- external?: boolean;
2902
- }
2903
- /** @ignore */
2904
- interface PageAppLinkArgs {
2905
- path: string;
2906
- external?: boolean;
2907
- }
2908
- /** @ignore */
2909
- interface ExternalUrlArgs {
2910
- href: string;
2911
- }
2912
- /** @ignore */
2913
- interface OpenRecordCreatorFormArgs {
2914
- objectTypeId: string;
2915
- }
2916
- /** @ignore */
2917
- interface ActionArgs {
2918
- PREVIEW_OBJECT: ObjectCoordinates;
2919
- ADD_NOTE: ActivityCreatorActionArgs;
2920
- ADD_TASK: ActivityCreatorActionArgs;
2921
- SEND_EMAIL: ActivityCreatorActionArgs;
2922
- SCHEDULE_MEETING: ActivityCreatorActionArgs;
2923
- OPEN_RECORD_CREATOR_FORM: OpenRecordCreatorFormArgs;
2924
- OPEN_RECORD_ASSOCIATION_FORM: OpenRecordAssociationFormArgs;
2925
- ENGAGEMENT_APP_LINK: EngagementAppLinkArgs;
2926
- RECORD_APP_LINK: RecordAppLinkArgs;
2927
- PAGE_APP_LINK: PageAppLinkArgs;
2928
- EXTERNAL_URL: ExternalUrlArgs;
2929
- OPEN_WORKFLOW_ENROLLMENT_MODAL: ObjectCoordinates;
2930
- }
2931
- /** @ignore */
2932
- export type ArgsFor<SpecificActionType extends ActionType> = ActionArgs[SpecificActionType];
2933
- export type ActionType = 'PREVIEW_OBJECT' | 'ADD_NOTE' | 'ADD_TASK' | 'SEND_EMAIL' | 'SCHEDULE_MEETING' | 'OPEN_RECORD_CREATOR_FORM' | 'OPEN_RECORD_ASSOCIATION_FORM' | 'ENGAGEMENT_APP_LINK' | 'RECORD_APP_LINK' | 'PAGE_APP_LINK' | 'EXTERNAL_URL' | 'OPEN_WORKFLOW_ENROLLMENT_MODAL';
2934
- /** @ignore */
2935
- interface BaseActionComponent {
2936
- children: ReactNode;
2937
- actionType: ActionType;
2938
- actionContext: ArgsFor<ActionType>;
2939
- onError?: (errors: string[]) => void;
2940
- }
2941
- /** @ignore */
2942
- export interface CrmActionButtonProps extends BaseActionComponent {
2943
- variant?: 'primary' | 'secondary' | 'destructive';
2944
- type?: 'button' | 'reset' | 'submit';
2945
- size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
2946
- onClick?: () => void;
2947
- }
2948
- /** @ignore */
2949
- export interface CrmActionLinkProps extends BaseActionComponent {
2950
- variant?: 'primary' | 'light' | 'dark' | 'destructive';
2951
- }
2952
- /** @ignore */
2953
- export interface ActionLibraryButtonCardActionConfig<SpecificActionType extends ActionType = ActionType> {
2954
- type: 'action-library-button';
2955
- actionType: SpecificActionType;
2956
- actionContext: ArgsFor<SpecificActionType>;
2957
- label?: string;
2958
- disabled?: boolean;
2959
- tooltipText?: string;
2960
- }
2961
- /** @ignore */
2962
- export type DropdownCardActionConfigOptions = [
2963
- ActionLibraryButtonCardActionConfig,
2964
- ...ActionLibraryButtonCardActionConfig[]
2965
- ];
2966
- /** @ignore */
2967
- export interface DropdownCardActionConfig {
2968
- type: 'dropdown';
2969
- options: DropdownCardActionConfigOptions;
2970
- label?: string;
2971
- disabled?: boolean;
2972
- tooltipText?: string;
2973
- }
2974
- /** @ignore */
2975
- type ErrorHandler = (errors: string[]) => void;
2976
- /** @ignore */
2977
- type CardActionConfig = ActionLibraryButtonCardActionConfig | DropdownCardActionConfig;
2978
- /** @ignore */
2979
- export type CrmCardActionsProps = {
2980
- actionConfigs: Array<CardActionConfig>;
2981
- onError?: ErrorHandler;
2982
- };
2983
- /** @ignore */
2984
- export type ExtensionPointAction = (...args: any[]) => Promise<any> | void;
2985
- /** @ignore */
2986
- export interface ExtensionPointContract {
2987
- actions?: {
2988
- [k: string]: ExtensionPointAction;
2989
- } | {};
2990
- context: BaseContext;
2991
- customComponents: Record<string, ComponentType<any>>;
2992
- }
2993
- /** @ignore */
2994
- export interface StandardCrmExtensionPoint extends ExtensionPointContract {
2995
- actions: CrmHostActions & UiePlatformActions;
2996
- context: CrmContext;
2997
- customComponents: {
2998
- CrmPropertyList: ComponentType<CrmPropertyListProps>;
2999
- CrmAssociationTable: ComponentType<CrmAssociationTableProps>;
3000
- CrmDataHighlight: ComponentType<CrmDataHighlightProps>;
3001
- CrmReport: ComponentType<CrmReportProps>;
3002
- CrmAssociationPivot: ComponentType<CrmAssociationPivotProps>;
3003
- CrmAssociationPropertyList: ComponentType<CrmAssociationPropertyListProps>;
3004
- CrmAssociationStageTracker?: ComponentType<CrmAssociationStageTrackerProps>;
3005
- CrmSimpleDeadline?: ComponentType<CrmSimpleDeadlineProps>;
3006
- CrmRelativeTimeline?: ComponentType<CrmRelativeTimelineProps>;
3007
- CrmStageTracker: ComponentType<CrmStageTrackerProps>;
3008
- CrmStatistics?: ComponentType<CrmStatisticsProps>;
3009
- CrmActionButton?: ComponentType<CrmActionButtonProps>;
3010
- CrmActionLink?: ComponentType<CrmActionLinkProps>;
3011
- CrmCardActions?: ComponentType<CrmCardActionsProps>;
3012
- };
3013
- }
3014
- /** @deprecated this interface has been replaced by StandardCrmExtensionPoint */
3015
- export interface CrmMiddleExtensionPoint extends ExtensionPointContract {
3016
- actions: CrmHostActions;
3017
- context: CrmContext;
3018
- customComponents: {
3019
- CrmPropertyList: ComponentType<CrmPropertyListProps>;
3020
- CrmAssociationTable: ComponentType<CrmAssociationTableProps>;
3021
- CrmDataHighlight: ComponentType<CrmDataHighlightProps>;
3022
- CrmReport: ComponentType<CrmReportProps>;
3023
- CrmAssociationPivot: ComponentType<CrmAssociationPivotProps>;
3024
- CrmAssociationPropertyList: ComponentType<CrmAssociationPropertyListProps>;
3025
- CrmAssociationStageTracker?: ComponentType<CrmAssociationStageTrackerProps>;
3026
- CrmSimpleDeadline?: ComponentType<CrmSimpleDeadlineProps>;
3027
- CrmRelativeTimeline?: ComponentType<CrmRelativeTimelineProps>;
3028
- CrmStageTracker: ComponentType<CrmStageTrackerProps>;
3029
- CrmStatistics?: ComponentType<CrmStatisticsProps>;
3030
- CrmActionButton?: ComponentType<CrmActionButtonProps>;
3031
- CrmActionLink?: ComponentType<CrmActionLinkProps>;
3032
- CrmCardActions?: ComponentType<CrmCardActionsProps>;
3033
- };
3034
- }
3035
- /** @ignore */
3036
- export interface CrmSidebarExtensionPoint extends ExtensionPointContract {
3037
- actions: CrmHostActions & UiePlatformActions;
3038
- context: CrmContext;
3039
- customComponents: {
3040
- CrmActionButton?: ComponentType<CrmActionButtonProps>;
3041
- CrmActionLink?: ComponentType<CrmActionLinkProps>;
3042
- };
3043
- }
3044
- /** @ignore */
3045
- export interface SettingsExtensionPoint extends ExtensionPointContract {
3046
- actions: SettingsActions & UiePlatformActions;
3047
- context: SettingsContext;
3048
- }
3049
- /** @ignore */
3050
- export interface AppHomeExtensionPoint extends ExtensionPointContract {
3051
- actions: AppHomeActions & UiePlatformActions;
3052
- context: AppHomeContext;
3053
- }
3054
- export interface ExampleCrmComponentProps {
3055
- name: string;
3056
- size: 'sm' | 'md' | 'lg';
3057
- count: number;
3058
- }
3059
- /** @ignore */
3060
- interface RemotePlaygroundExtensionPoint extends ExtensionPointContract {
3061
- actions: {
3062
- warn: () => void;
3063
- };
3064
- context: GenericContext;
3065
- customComponents: {
3066
- ExampleCrmComponent: ComponentType<ExampleCrmComponentProps>;
3067
- };
3068
- }
3069
- export declare const EXTENSION_POINT_LOCATIONS: readonly ["crm.preview", "crm.record.sidebar", "crm.record.tab", "helpdesk.sidebar", "uie.playground.middle", "settings", "home"];
3070
- export type ExtensionPointLocation = TypesOfReadOnlyArray<typeof EXTENSION_POINT_LOCATIONS>;
3071
- /** @ignore */
3072
- interface LocationToExtensionPoint {
3073
- 'uie.playground.middle': RemotePlaygroundExtensionPoint;
3074
- 'crm.record.tab': StandardCrmExtensionPoint;
3075
- 'crm.preview': StandardCrmExtensionPoint;
3076
- 'crm.record.sidebar': CrmSidebarExtensionPoint;
3077
- 'helpdesk.sidebar': StandardCrmExtensionPoint;
3078
- settings: SettingsExtensionPoint;
3079
- home: AppHomeExtensionPoint;
3080
- }
3081
- /**
3082
- * While this resolves to the same result as LocationToExtensionPoint, it ensures that every location
3083
- * from ExtensionPointLocation is explicitly included. This way, EXTENSION_POINT_LOCATIONS becomes
3084
- * the single source of truth for defining all locations.
3085
- */
3086
- type _ExtensionPoints = {
3087
- [key in ExtensionPointLocation]: LocationToExtensionPoint[key];
3088
- };
3089
- export interface ExtensionPoints extends _ExtensionPoints {
3090
- }
3091
- /** @ignore */
3092
- export interface ExtensionPointApi<ExtensionPointName extends keyof ExtensionPoints> {
3093
- runServerlessFunction: ServerlessFuncRunner;
3094
- actions: ExtensionPoints[ExtensionPointName]['actions'];
3095
- context: ExtensionPoints[ExtensionPointName]['context'];
3096
- }
3097
- export interface HubSpotFetchOptions {
3098
- method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
3099
- timeout?: number;
3100
- body?: {
3101
- [key: string]: unknown;
3102
- };
3103
- headers?: Headers | Record<string, string>;
3104
- }
3105
- export type HubSpotFetchRequestURI = string | URL;
3106
- export type ProxyMetadata = {
3107
- userEmail?: string;
3108
- userId?: number;
3109
- portalId?: number;
3110
- };
3111
- /**
3112
- * @category Serverless
3113
- */
3114
- export interface ServerlessRunnerParams {
3115
- /**
3116
- * Name of the serverless function
3117
- */
3118
- name: string;
3119
- /**
3120
- * Names of CRM object properties to be retrieved and supplied to the function as `context.propertiesToSend`
3121
- */
3122
- propertiesToSend?: string[];
3123
- /**
3124
- * Additional parameters to be supplied to the function as `context.parameters`
3125
- */
3126
- parameters?: JsonValue;
3127
- /**
3128
- * @deprecated Optional payload supplied to the function as `context.event.payload`.
3129
- * Support for this param may be removed in the future. Use `parameters` instead.
3130
- */
3131
- payload?: JsonValue;
3132
- }
3133
- /**
3134
- * @category Serverless
3135
- */
3136
- export declare enum ServerlessExecutionStatus {
3137
- Success = "SUCCESS",
3138
- Error = "ERROR"
3139
- }
3140
- /**
3141
- * @category Serverless
3142
- */
3143
- export type ServerlessExecutionResult = {
3144
- status: ServerlessExecutionStatus.Success;
3145
- response: JsonValue;
3146
- } | {
3147
- status: ServerlessExecutionStatus.Error;
3148
- message: string;
3149
- };
3150
- /**
3151
- * @category Serverless
3152
- */
3153
- export type ServerlessFuncRunner = (params: ServerlessRunnerParams) => Promise<ServerlessExecutionResult>;
3154
- /**
3155
- * @ignore
3156
- * @category Serverless
3157
- */
3158
- export interface ServerlessExecutionRequest {
3159
- appId: number;
3160
- extensibleCardId: number;
3161
- serverlessFunction: string;
3162
- location: keyof ExtensionPoints;
3163
- objectQuery?: {
3164
- objectId: number;
3165
- objectTypeId: string;
3166
- objectPropertyNames: string[];
3167
- };
3168
- parameters?: JsonValue;
3169
- event?: {
3170
- type: 'SERVERLESS_ACTION_HOOK';
3171
- payload: JsonValue;
3172
- };
3173
- objectId?: number;
3174
- objectTypeId?: string;
3175
- }
3176
- /**
3177
- * @category Serverless
3178
- */
3179
- export interface ServerlessExecutionResponse {
3180
- logId: string;
3181
- response?: JsonValue;
3182
- }
3183
- /**
3184
- * @category Serverless
3185
- */
3186
- export interface ServerlessErrorResponse {
3187
- responseJSON?: {
3188
- message: string;
3189
- correlationId: string;
3190
- category: string;
3191
- subCategory?: string;
3192
- errors?: {
3193
- message: string;
3194
- subCategory: string;
3195
- }[];
3196
- };
3197
- status: number;
3198
- }
3199
- export type JsonValue = string | number | boolean | null | JsonValue[] | {
3200
- [key: string]: JsonValue;
3201
- };
3202
- /** @ignore */
3203
- export type PanelAction = (panelId: string) => void;
3204
- /** @ignore */
3205
- export type ModalAction = (modalId: string) => void;
3206
- /** @ignore */
3207
- export interface Reactions {
3208
- openPanel: PanelAction;
3209
- closePanel: PanelAction;
3210
- openModal: ModalAction;
3211
- closeModal: ModalAction;
3212
- }
3213
- export type ReactionsHandler<T> = (event: T, reactions: Reactions) => void | Promise<void>;
3214
- export {};