@hubspot/ui-extensions 0.8.52 → 0.8.53
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.
- package/dist/__tests__/experimental/crm/fetchCrmProperties.spec.d.ts +1 -0
- package/dist/__tests__/experimental/crm/fetchCrmProperties.spec.js +58 -0
- package/dist/__tests__/experimental/hooks/useCrmProperties.spec.d.ts +1 -0
- package/dist/__tests__/experimental/hooks/useCrmProperties.spec.js +71 -0
- package/dist/experimental/crm/fetchCrmProperties.d.ts +4 -0
- package/dist/experimental/crm/fetchCrmProperties.js +32 -0
- package/dist/experimental/hooks/useCrmProperties.d.ts +6 -4
- package/dist/experimental/hooks/useCrmProperties.js +33 -9
- package/dist/experimental/index.d.ts +13 -1
- package/dist/experimental/index.js +9 -1
- package/dist/experimental/types.d.ts +11 -0
- package/dist/types.d.ts +1756 -1724
- package/dist/types.js +27 -24
- package/package.json +9 -3
- package/dist/experimental/crm/propertyManager.d.ts +0 -8
- package/dist/experimental/crm/propertyManager.js +0 -36
package/dist/types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { RemoteFragment } from '@remote-ui/core';
|
|
2
1
|
import { ReactNode, ComponentType } from 'react';
|
|
2
|
+
import { RemoteFragment } from '@remote-ui/core';
|
|
3
3
|
export declare class ExtensionEvent {
|
|
4
4
|
type: string;
|
|
5
5
|
bubbles: boolean;
|
|
@@ -7,59 +7,363 @@ export declare class ExtensionEvent {
|
|
|
7
7
|
id: string;
|
|
8
8
|
constructor(event: Event);
|
|
9
9
|
}
|
|
10
|
-
export type TypesOfReadOnlyArray<T extends ReadonlyArray<unknown>> = T extends ReadonlyArray<infer ElementType> ? ElementType : never;
|
|
11
10
|
export declare class FormSubmitExtensionEvent<V> extends ExtensionEvent {
|
|
12
11
|
targetValue: V;
|
|
13
12
|
constructor(value: V, event: Event);
|
|
14
13
|
}
|
|
15
|
-
export type ReactionsHandler<T> = (event: T, reactions: Reactions) => void | Promise<void>;
|
|
16
14
|
export type OverlayComponentProps = {
|
|
17
15
|
overlay?: RemoteFragment;
|
|
18
16
|
};
|
|
17
|
+
export type HrefOptions = {
|
|
18
|
+
url: string;
|
|
19
|
+
external?: boolean;
|
|
20
|
+
};
|
|
21
|
+
export type HrefProp = string | HrefOptions;
|
|
22
|
+
export interface TShirtSizes {
|
|
23
|
+
xs: 'extra-small' | 'xs';
|
|
24
|
+
sm: 'small' | 'sm';
|
|
25
|
+
md: 'medium' | 'md';
|
|
26
|
+
lg: 'large' | 'lg';
|
|
27
|
+
xl: 'extra-large' | 'xl';
|
|
28
|
+
}
|
|
29
|
+
export type AllSizes = TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'] | TShirtSizes['lg'] | TShirtSizes['xl'];
|
|
30
|
+
export type AllDistances = 'flush' | AllSizes;
|
|
31
|
+
export declare const iconNames: {
|
|
32
|
+
readonly success: "success";
|
|
33
|
+
readonly remove: "remove";
|
|
34
|
+
readonly add: "add";
|
|
35
|
+
readonly attach: "attach";
|
|
36
|
+
readonly date: "date";
|
|
37
|
+
readonly copy: "duplicate";
|
|
38
|
+
readonly delete: "delete";
|
|
39
|
+
readonly edit: "edit";
|
|
40
|
+
readonly email: "email";
|
|
41
|
+
readonly exclamation: "exclamation";
|
|
42
|
+
readonly question: "question";
|
|
43
|
+
readonly home: "home";
|
|
44
|
+
readonly location: "location";
|
|
45
|
+
readonly upCarat: "upCarat";
|
|
46
|
+
readonly downCarat: "downCarat";
|
|
47
|
+
readonly warning: "warning";
|
|
48
|
+
readonly shoppingCart: "cart";
|
|
49
|
+
readonly clock: "time";
|
|
50
|
+
readonly comment: "comments";
|
|
51
|
+
readonly contact: "contacts";
|
|
52
|
+
readonly star: "favorite";
|
|
53
|
+
readonly file: "file";
|
|
54
|
+
readonly reports: "reports";
|
|
55
|
+
readonly video: "video";
|
|
56
|
+
readonly robot: "simpleBot";
|
|
57
|
+
readonly refresh: "refresh";
|
|
58
|
+
readonly faceHappy: "emoji";
|
|
59
|
+
readonly faceNeutral: "emojiLineNeutral";
|
|
60
|
+
readonly faceSad: "emojiLineSad";
|
|
61
|
+
readonly upload: "upload";
|
|
62
|
+
readonly download: "download";
|
|
63
|
+
readonly left: "left";
|
|
64
|
+
readonly right: "right";
|
|
65
|
+
readonly dataSync: "dataSync";
|
|
66
|
+
readonly imageGallery: "imageGallery";
|
|
67
|
+
readonly search: "search";
|
|
68
|
+
readonly save: "saveEditableView";
|
|
69
|
+
readonly notification: "notification";
|
|
70
|
+
readonly bulb: "bulb";
|
|
71
|
+
readonly settings: "settings";
|
|
72
|
+
readonly filter: "filter";
|
|
73
|
+
readonly gauge: "gauge";
|
|
74
|
+
readonly enroll: "enroll";
|
|
75
|
+
readonly generateChart: "generateChart";
|
|
76
|
+
readonly gift: "gift";
|
|
77
|
+
readonly flame: "highlyEngagedLead";
|
|
78
|
+
readonly inbox: "inbox";
|
|
79
|
+
readonly image: "insertImage";
|
|
80
|
+
readonly quote: "insertQuote";
|
|
81
|
+
readonly insertVideo: "insertVideo";
|
|
82
|
+
readonly invoice: "invoice";
|
|
83
|
+
readonly key: "key";
|
|
84
|
+
readonly book: "knowledgeBase";
|
|
85
|
+
readonly globe: "language";
|
|
86
|
+
readonly lesson: "lesson";
|
|
87
|
+
readonly link: "link";
|
|
88
|
+
readonly listView: "listView";
|
|
89
|
+
readonly locked: "locked";
|
|
90
|
+
readonly mention: "mention";
|
|
91
|
+
readonly messages: "messages";
|
|
92
|
+
readonly mobile: "mobile";
|
|
93
|
+
readonly notificationOff: "notificationOff";
|
|
94
|
+
readonly hash: "numericDataType";
|
|
95
|
+
readonly objectAssociations: "objectAssociations";
|
|
96
|
+
readonly objectAssociationsManyToMany: "objectAssociationsManyToMany";
|
|
97
|
+
readonly objectAssociationsManyToOne: "objectAssociationsManyToOne";
|
|
98
|
+
readonly office365: "office365";
|
|
99
|
+
readonly order: "order";
|
|
100
|
+
readonly paymentSubscriptions: "paymentSubscriptions";
|
|
101
|
+
readonly product: "product";
|
|
102
|
+
readonly powerPointFile: "powerPointFile";
|
|
103
|
+
readonly presentation: "presentation";
|
|
104
|
+
readonly publish: "publish";
|
|
105
|
+
readonly questionAnswer: "questionAnswer";
|
|
106
|
+
readonly quickbooks: "quickbooks";
|
|
107
|
+
readonly readMore: "readMore";
|
|
108
|
+
readonly realEstateListing: "realEstateListing";
|
|
109
|
+
readonly readOnlyView: "readOnlyView";
|
|
110
|
+
readonly recentlySelected: "recentlySelected";
|
|
111
|
+
readonly record: "record";
|
|
112
|
+
readonly redo: "redo";
|
|
113
|
+
readonly undo: "undo";
|
|
114
|
+
readonly registration: "registration";
|
|
115
|
+
readonly replace: "replace";
|
|
116
|
+
readonly rotate: "rotate";
|
|
117
|
+
readonly salesQuote: "salesQuote";
|
|
118
|
+
readonly salesTemplates: "salesTemplates";
|
|
119
|
+
readonly sequences: "sequences";
|
|
120
|
+
readonly spellCheck: "spellCheck";
|
|
121
|
+
readonly strike: "strike";
|
|
122
|
+
readonly tablet: "tablet";
|
|
123
|
+
readonly tag: "tag";
|
|
124
|
+
readonly tasks: "tasks";
|
|
125
|
+
readonly test: "test";
|
|
126
|
+
readonly ticket: "ticket";
|
|
127
|
+
readonly thumbsUp: "thumbsUp";
|
|
128
|
+
readonly thumbsDown: "thumbsDown";
|
|
129
|
+
readonly translate: "translate";
|
|
130
|
+
readonly trophy: "trophy";
|
|
131
|
+
readonly videoFile: "videoFile";
|
|
132
|
+
readonly videoPlayerSubtitles: "videoPlayerSubtitles";
|
|
133
|
+
readonly view: "view";
|
|
134
|
+
readonly viewDetails: "viewDetails";
|
|
135
|
+
readonly website: "website";
|
|
136
|
+
readonly workflows: "workflows";
|
|
137
|
+
readonly zoomIn: "zoomIn";
|
|
138
|
+
readonly zoomOut: "zoomOut";
|
|
139
|
+
readonly goal: "goal";
|
|
140
|
+
readonly campaigns: "campaigns";
|
|
141
|
+
readonly cap: "cap";
|
|
142
|
+
readonly block: "block";
|
|
143
|
+
readonly bank: "bank";
|
|
144
|
+
readonly approvals: "approvals";
|
|
145
|
+
readonly appointment: "appointment";
|
|
146
|
+
readonly facebook: "socialBlockFacebook";
|
|
147
|
+
readonly googlePlus: "socialBlockGoogleplus";
|
|
148
|
+
readonly instagram: "socialBlockInstagram";
|
|
149
|
+
readonly linkedin: "socialBlockLinkedin";
|
|
150
|
+
readonly pinterest: "socialBlockPinterest";
|
|
151
|
+
readonly rss: "socialBlockRss";
|
|
152
|
+
readonly twitter: "socialBlockTwitter";
|
|
153
|
+
readonly x: "socialBlockX";
|
|
154
|
+
readonly xing: "socialBlockXing";
|
|
155
|
+
readonly youtube: "socialBlockYoutube";
|
|
156
|
+
readonly youtubePlay: "socialBlockYoutubeplay";
|
|
157
|
+
readonly sortAlpAsc: "sortAlpAsc";
|
|
158
|
+
readonly sortAlpDesc: "sortAlpDesc";
|
|
159
|
+
readonly sortAmtAsc: "sortAmtAsc";
|
|
160
|
+
readonly sortAmtDesc: "sortAmtDesc";
|
|
161
|
+
readonly sortNumAsc: "sortNumAsc";
|
|
162
|
+
readonly sortNumDesc: "sortNumDesc";
|
|
163
|
+
readonly sortTableAsc: "sortTableAsc";
|
|
164
|
+
readonly sortTableDesc: "sortTableDesc";
|
|
165
|
+
readonly text: "text";
|
|
166
|
+
readonly textColor: "textColor";
|
|
167
|
+
readonly textDataType: "textDataType";
|
|
168
|
+
readonly textSnippet: "textSnippet";
|
|
169
|
+
readonly calling: "calling";
|
|
170
|
+
readonly callingHangup: "callingHangup";
|
|
171
|
+
readonly callingMade: "callingMade";
|
|
172
|
+
readonly callingMissed: "callingMissed";
|
|
173
|
+
readonly callingVoicemail: "callingVoicemail";
|
|
174
|
+
readonly faceHappyFilled: "emojiFillHappy";
|
|
175
|
+
readonly faceNeutralFilled: "emojiFillNeutral";
|
|
176
|
+
readonly faceSadFilled: "emojiFillSad";
|
|
177
|
+
};
|
|
178
|
+
export type IconNames = keyof typeof iconNames;
|
|
179
|
+
export type TypesOfReadOnlyArray<T extends ReadonlyArray<unknown>> = T extends ReadonlyArray<infer ElementType> ? ElementType : never;
|
|
180
|
+
/** @deprecated use ExtensionEvent/FormSubmitExtensionEvent instead */
|
|
181
|
+
export declare class RemoteEvent<V> {
|
|
182
|
+
type: string;
|
|
183
|
+
bubbles: boolean;
|
|
184
|
+
timeStamp: number;
|
|
185
|
+
targetValue: V;
|
|
186
|
+
constructor(value: V, event: Event);
|
|
187
|
+
}
|
|
188
|
+
/** @ignore */
|
|
189
|
+
type AlertType = 'info' | 'warning' | 'success' | 'danger' | 'tip' | undefined;
|
|
190
|
+
/** @ignore */
|
|
191
|
+
export type AddAlertAction = (args: {
|
|
192
|
+
type?: AlertType;
|
|
193
|
+
message: string;
|
|
194
|
+
title?: string;
|
|
195
|
+
}) => void;
|
|
196
|
+
/** @ignore */
|
|
197
|
+
export type ReloadPageAction = () => void;
|
|
198
|
+
/** @ignore */
|
|
199
|
+
export type FetchCrmObjectPropertiesAction = (properties: string[] | '*') => Promise<Record<string, string>>;
|
|
200
|
+
/** @ignore */
|
|
201
|
+
interface OpenIframeActionPayload {
|
|
202
|
+
uri: string;
|
|
203
|
+
height: number;
|
|
204
|
+
width: number;
|
|
205
|
+
/** @deprecated This property is no longer functional and has no effect. Please avoid using it, as it will be removed in future updates */
|
|
206
|
+
associatedObjectProperties?: string[];
|
|
207
|
+
title?: string;
|
|
208
|
+
flush?: boolean;
|
|
209
|
+
}
|
|
210
|
+
/** @ignore */
|
|
211
|
+
export type OpenIframeModalAction = (action: OpenIframeActionPayload, onClose?: () => void) => void;
|
|
212
|
+
/** @ignore */
|
|
213
|
+
export type refreshObjectPropertiesAction = () => void;
|
|
214
|
+
/** @ignore */
|
|
215
|
+
export type onCrmPropertiesUpdateAction = (properties: string[] | '*', callback: (properties: Record<string, string>, error?: {
|
|
216
|
+
message: string;
|
|
217
|
+
}) => void) => void;
|
|
218
|
+
/** @ignore */
|
|
219
|
+
export type CloseOverlayAction = (id: string) => void;
|
|
220
|
+
/** @ignore */
|
|
221
|
+
export interface CrmHostActions {
|
|
222
|
+
addAlert: AddAlertAction;
|
|
223
|
+
reloadPage: ReloadPageAction;
|
|
224
|
+
fetchCrmObjectProperties: FetchCrmObjectPropertiesAction;
|
|
225
|
+
openIframeModal: OpenIframeModalAction;
|
|
226
|
+
refreshObjectProperties: refreshObjectPropertiesAction;
|
|
227
|
+
onCrmPropertiesUpdate: onCrmPropertiesUpdateAction;
|
|
228
|
+
}
|
|
229
|
+
/** @ignore */
|
|
230
|
+
export interface UiePlatformActions {
|
|
231
|
+
copyTextToClipboard: Clipboard['writeText'];
|
|
232
|
+
closeOverlay: CloseOverlayAction;
|
|
233
|
+
reloadPage: ReloadPageAction;
|
|
234
|
+
}
|
|
19
235
|
/**
|
|
20
|
-
* The props type for {@link !components.
|
|
236
|
+
* The props type for {@link !components.Accordion}.
|
|
21
237
|
*
|
|
22
238
|
* @category Component Props
|
|
23
239
|
*/
|
|
24
|
-
export interface
|
|
240
|
+
export interface AccordionProps {
|
|
25
241
|
/**
|
|
26
|
-
* The
|
|
242
|
+
* The title text for the accordion.
|
|
27
243
|
*
|
|
28
244
|
*/
|
|
29
245
|
title: string;
|
|
30
246
|
/**
|
|
31
|
-
* The main content of the
|
|
247
|
+
* The main content of the accordion when it opens.
|
|
32
248
|
*
|
|
33
249
|
*/
|
|
34
|
-
children
|
|
250
|
+
children: ReactNode;
|
|
35
251
|
/**
|
|
36
|
-
*
|
|
252
|
+
* Defines default open behavior on page load. When set to `true`, the accordion will be open by default on initial load.
|
|
37
253
|
*
|
|
38
|
-
* @defaultValue `
|
|
254
|
+
* @defaultValue `false`
|
|
39
255
|
*/
|
|
40
|
-
|
|
41
|
-
}
|
|
42
|
-
export interface BaseButtonProps {
|
|
256
|
+
defaultOpen?: boolean;
|
|
43
257
|
/**
|
|
44
|
-
*
|
|
258
|
+
* When set to `true`, the accordion's open state cannot be changed.
|
|
45
259
|
*
|
|
46
|
-
* @
|
|
47
|
-
*/
|
|
48
|
-
onClick?: ReactionsHandler<ExtensionEvent>;
|
|
49
|
-
/**
|
|
50
|
-
* 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.
|
|
51
|
-
*/
|
|
52
|
-
href?: HrefProp;
|
|
53
|
-
/**
|
|
54
|
-
* Determines whether or not the button should be disabled.
|
|
260
|
+
* @defaultValue `false`
|
|
55
261
|
*/
|
|
56
262
|
disabled?: boolean;
|
|
57
263
|
/**
|
|
58
|
-
*
|
|
264
|
+
* For controlling the accordion's open state programmatically. When set to `true`, the accordion will open. Takes precedence over `defaultOpen`.
|
|
59
265
|
*
|
|
60
|
-
* @defaultValue `"secondary"`
|
|
61
266
|
*/
|
|
62
|
-
|
|
267
|
+
open?: boolean;
|
|
268
|
+
/**
|
|
269
|
+
* The size of the accordion title.
|
|
270
|
+
*
|
|
271
|
+
* @defaultValue `"small"`
|
|
272
|
+
*/
|
|
273
|
+
size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
|
|
274
|
+
/**
|
|
275
|
+
* A function that will be invoked when the title is clicked. It receives no arguments and its return value is ignored.
|
|
276
|
+
*
|
|
277
|
+
* @event
|
|
278
|
+
*/
|
|
279
|
+
onClick?: () => void;
|
|
280
|
+
}
|
|
281
|
+
/**
|
|
282
|
+
* The props type for {@link !components.Alert}.
|
|
283
|
+
*
|
|
284
|
+
* @category Component Props
|
|
285
|
+
*/
|
|
286
|
+
export interface AlertProps {
|
|
287
|
+
/**
|
|
288
|
+
* The bolded title text of the alert.
|
|
289
|
+
*
|
|
290
|
+
*/
|
|
291
|
+
title: string;
|
|
292
|
+
/**
|
|
293
|
+
* The main content of the alert message.
|
|
294
|
+
*
|
|
295
|
+
*/
|
|
296
|
+
children?: ReactNode;
|
|
297
|
+
/**
|
|
298
|
+
* The color of the alert.
|
|
299
|
+
*
|
|
300
|
+
* @defaultValue `"info"`
|
|
301
|
+
*/
|
|
302
|
+
variant?: 'info' | 'warning' | 'success' | 'error' | 'danger' | 'tip';
|
|
303
|
+
}
|
|
304
|
+
/**
|
|
305
|
+
* The props type for {@link !components.ButtonRow}.
|
|
306
|
+
*
|
|
307
|
+
* @category Component Props
|
|
308
|
+
*/
|
|
309
|
+
export interface ButtonRowProps {
|
|
310
|
+
/**
|
|
311
|
+
* Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
|
|
312
|
+
*/
|
|
313
|
+
children: ReactNode;
|
|
314
|
+
/**
|
|
315
|
+
* Disables the dropdown list of buttons that appears when the children expand beyond the horizontal space.
|
|
316
|
+
*
|
|
317
|
+
* @defaultValue `false`
|
|
318
|
+
*/
|
|
319
|
+
disableDropdown?: boolean;
|
|
320
|
+
/**
|
|
321
|
+
* Controls the appearance and text content of the dropdown button.
|
|
322
|
+
*/
|
|
323
|
+
dropDownButtonOptions?: ButtonRownDropDownButtonOptionsProps;
|
|
324
|
+
}
|
|
325
|
+
/** Configures the Dropdown Button in the ButtonRow component */
|
|
326
|
+
export interface ButtonRownDropDownButtonOptionsProps {
|
|
327
|
+
/**
|
|
328
|
+
* Sets the content for the dropdown button.
|
|
329
|
+
*
|
|
330
|
+
* @defaultValue `"More"`
|
|
331
|
+
*/
|
|
332
|
+
text?: string;
|
|
333
|
+
/**
|
|
334
|
+
* Sets the size of the dropdown button.
|
|
335
|
+
*
|
|
336
|
+
* @defaultValue `"md"`
|
|
337
|
+
*/
|
|
338
|
+
size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
|
|
339
|
+
/**
|
|
340
|
+
* Controls the appearance of the dropdown button
|
|
341
|
+
*
|
|
342
|
+
* @defaultValue `"secondary"`
|
|
343
|
+
*/
|
|
344
|
+
variant?: 'primary' | 'secondary' | 'transparent';
|
|
345
|
+
}
|
|
346
|
+
export interface BaseButtonProps {
|
|
347
|
+
/**
|
|
348
|
+
* 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.
|
|
349
|
+
*
|
|
350
|
+
* @event
|
|
351
|
+
*/
|
|
352
|
+
onClick?: ReactionsHandler<ExtensionEvent>;
|
|
353
|
+
/**
|
|
354
|
+
* 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.
|
|
355
|
+
*/
|
|
356
|
+
href?: HrefProp;
|
|
357
|
+
/**
|
|
358
|
+
* Determines whether or not the button should be disabled.
|
|
359
|
+
*/
|
|
360
|
+
disabled?: boolean;
|
|
361
|
+
/**
|
|
362
|
+
* Sets the color variation of the button.
|
|
363
|
+
*
|
|
364
|
+
* @defaultValue `"secondary"`
|
|
365
|
+
*/
|
|
366
|
+
variant?: 'primary' | 'secondary' | 'destructive' | 'transparent';
|
|
63
367
|
/**
|
|
64
368
|
* Sets the HTML attribute "role" of the button.
|
|
65
369
|
*
|
|
@@ -125,48 +429,6 @@ export interface LoadingButtonProps extends BaseButtonProps, OverlayComponentPro
|
|
|
125
429
|
*/
|
|
126
430
|
resultIconName?: IconNames;
|
|
127
431
|
}
|
|
128
|
-
/**
|
|
129
|
-
* The props type for {@link !components.ButtonRow}.
|
|
130
|
-
*
|
|
131
|
-
* @category Component Props
|
|
132
|
-
*/
|
|
133
|
-
export interface ButtonRowProps {
|
|
134
|
-
/**
|
|
135
|
-
* Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
|
|
136
|
-
*/
|
|
137
|
-
children: ReactNode;
|
|
138
|
-
/**
|
|
139
|
-
* Disables the dropdown list of buttons that appears when the children expand beyond the horizontal space.
|
|
140
|
-
*
|
|
141
|
-
* @defaultValue `false`
|
|
142
|
-
*/
|
|
143
|
-
disableDropdown?: boolean;
|
|
144
|
-
/**
|
|
145
|
-
* Controls the appearance and text content of the dropdown button.
|
|
146
|
-
*/
|
|
147
|
-
dropDownButtonOptions?: ButtonRownDropDownButtonOptionsProps;
|
|
148
|
-
}
|
|
149
|
-
/** Configures the Dropdown Button in the ButtonRow component */
|
|
150
|
-
export interface ButtonRownDropDownButtonOptionsProps {
|
|
151
|
-
/**
|
|
152
|
-
* Sets the content for the dropdown button.
|
|
153
|
-
*
|
|
154
|
-
* @defaultValue `"More"`
|
|
155
|
-
*/
|
|
156
|
-
text?: string;
|
|
157
|
-
/**
|
|
158
|
-
* Sets the size of the dropdown button.
|
|
159
|
-
*
|
|
160
|
-
* @defaultValue `"md"`
|
|
161
|
-
*/
|
|
162
|
-
size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
|
|
163
|
-
/**
|
|
164
|
-
* Controls the appearance of the dropdown button
|
|
165
|
-
*
|
|
166
|
-
* @defaultValue `"secondary"`
|
|
167
|
-
*/
|
|
168
|
-
variant?: 'primary' | 'secondary' | 'transparent';
|
|
169
|
-
}
|
|
170
432
|
/**
|
|
171
433
|
* The props type for {@link !components.Card}.
|
|
172
434
|
*
|
|
@@ -363,6 +625,56 @@ export interface DividerProps {
|
|
|
363
625
|
*/
|
|
364
626
|
distance?: AllDistances;
|
|
365
627
|
}
|
|
628
|
+
export interface DropdownOption {
|
|
629
|
+
/**
|
|
630
|
+
* Text to be displayed as the menu item text.
|
|
631
|
+
*
|
|
632
|
+
*/
|
|
633
|
+
label: string;
|
|
634
|
+
/**
|
|
635
|
+
* A function that will be invoked when the item is clicked.
|
|
636
|
+
* It receives no arguments and its return value is ignored.
|
|
637
|
+
*
|
|
638
|
+
* @event
|
|
639
|
+
*/
|
|
640
|
+
onClick?: () => void;
|
|
641
|
+
}
|
|
642
|
+
/**
|
|
643
|
+
* The props type for {@link !components.Dropdown}.
|
|
644
|
+
*
|
|
645
|
+
* @category Component Props
|
|
646
|
+
*/
|
|
647
|
+
export interface DropdownProps {
|
|
648
|
+
/**
|
|
649
|
+
* The list of options to be rendered within the dropdown menu.
|
|
650
|
+
* Each option represents an entry in the Dropdown.
|
|
651
|
+
*/
|
|
652
|
+
options: DropdownOption[];
|
|
653
|
+
/**
|
|
654
|
+
* Controls the appearance of the dropdown button
|
|
655
|
+
*
|
|
656
|
+
* @defaultValue `"secondary"`
|
|
657
|
+
*/
|
|
658
|
+
variant?: 'primary' | 'secondary' | 'transparent';
|
|
659
|
+
/**
|
|
660
|
+
* Sets the content for the dropdown button.
|
|
661
|
+
*
|
|
662
|
+
* @defaultValue `"More"`
|
|
663
|
+
*/
|
|
664
|
+
buttonText?: string;
|
|
665
|
+
/**
|
|
666
|
+
* Sets the size of the dropdown button.
|
|
667
|
+
*
|
|
668
|
+
* @defaultValue `"md"`
|
|
669
|
+
*/
|
|
670
|
+
buttonSize?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
|
|
671
|
+
/**
|
|
672
|
+
* Disables the ability to focus and click-to-expand of the dropdown button
|
|
673
|
+
*
|
|
674
|
+
* @defaultValue `false`
|
|
675
|
+
*/
|
|
676
|
+
disabled?: boolean;
|
|
677
|
+
}
|
|
366
678
|
/**
|
|
367
679
|
* The props type for {@link !components.EmptyState}.
|
|
368
680
|
*
|
|
@@ -473,6 +785,27 @@ export interface HeadingProps {
|
|
|
473
785
|
*/
|
|
474
786
|
inline?: boolean;
|
|
475
787
|
}
|
|
788
|
+
/**
|
|
789
|
+
* The props type for {@link !components.Icon}.
|
|
790
|
+
*
|
|
791
|
+
* @category Component Props
|
|
792
|
+
*/
|
|
793
|
+
export interface IconProps {
|
|
794
|
+
/**
|
|
795
|
+
* Sets the specific icon to display.
|
|
796
|
+
*/
|
|
797
|
+
name: IconNames;
|
|
798
|
+
/**
|
|
799
|
+
* Sets the size of the icon. If this prop is not provided, the icon will default to the size of its parent.
|
|
800
|
+
*
|
|
801
|
+
* @defaultValue `"medium"`
|
|
802
|
+
*/
|
|
803
|
+
size?: TShirtSizes['sm'] | TShirtSizes['md'] | TShirtSizes['lg'];
|
|
804
|
+
/**
|
|
805
|
+
* Sets the text that a screenreader will read for this icon.
|
|
806
|
+
*/
|
|
807
|
+
screenReaderText?: string;
|
|
808
|
+
}
|
|
476
809
|
/**
|
|
477
810
|
* The props type for {@link !components.Iframe}.
|
|
478
811
|
*
|
|
@@ -493,174 +826,58 @@ export interface IframeProps {
|
|
|
493
826
|
src: string;
|
|
494
827
|
}
|
|
495
828
|
/**
|
|
496
|
-
* The props type for {@link !components.
|
|
829
|
+
* The props type for {@link !components.Illustration}.
|
|
497
830
|
*
|
|
498
831
|
* @category Component Props
|
|
499
832
|
*/
|
|
500
|
-
export interface
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
/**
|
|
506
|
-
* Sets the size of the icon. If this prop is not provided, the icon will default to the size of its parent.
|
|
507
|
-
*
|
|
508
|
-
* @defaultValue `"medium"`
|
|
509
|
-
*/
|
|
510
|
-
size?: TShirtSizes['sm'] | TShirtSizes['md'] | TShirtSizes['lg'];
|
|
511
|
-
/**
|
|
512
|
-
* Sets the text that a screenreader will read for this icon.
|
|
513
|
-
*/
|
|
514
|
-
screenReaderText?: string;
|
|
833
|
+
export interface IllustrationProps {
|
|
834
|
+
name: IllustrationNames;
|
|
835
|
+
alt: string;
|
|
836
|
+
width?: number;
|
|
837
|
+
height?: number;
|
|
515
838
|
}
|
|
516
|
-
export declare const
|
|
517
|
-
readonly
|
|
518
|
-
readonly
|
|
519
|
-
readonly
|
|
520
|
-
readonly
|
|
521
|
-
readonly
|
|
522
|
-
readonly
|
|
523
|
-
readonly
|
|
524
|
-
readonly
|
|
525
|
-
readonly
|
|
526
|
-
readonly
|
|
527
|
-
readonly
|
|
528
|
-
readonly home: "home";
|
|
529
|
-
readonly location: "location";
|
|
530
|
-
readonly upCarat: "upCarat";
|
|
531
|
-
readonly downCarat: "downCarat";
|
|
532
|
-
readonly warning: "warning";
|
|
533
|
-
readonly shoppingCart: "cart";
|
|
534
|
-
readonly clock: "time";
|
|
535
|
-
readonly comment: "comments";
|
|
536
|
-
readonly contact: "contacts";
|
|
537
|
-
readonly star: "favorite";
|
|
538
|
-
readonly file: "file";
|
|
539
|
-
readonly reports: "reports";
|
|
540
|
-
readonly video: "video";
|
|
541
|
-
readonly robot: "simpleBot";
|
|
542
|
-
readonly refresh: "refresh";
|
|
543
|
-
readonly faceHappy: "emoji";
|
|
544
|
-
readonly faceNeutral: "emojiLineNeutral";
|
|
545
|
-
readonly faceSad: "emojiLineSad";
|
|
546
|
-
readonly upload: "upload";
|
|
547
|
-
readonly download: "download";
|
|
548
|
-
readonly left: "left";
|
|
549
|
-
readonly right: "right";
|
|
550
|
-
readonly dataSync: "dataSync";
|
|
551
|
-
readonly imageGallery: "imageGallery";
|
|
552
|
-
readonly search: "search";
|
|
553
|
-
readonly save: "saveEditableView";
|
|
554
|
-
readonly notification: "notification";
|
|
555
|
-
readonly bulb: "bulb";
|
|
556
|
-
readonly settings: "settings";
|
|
557
|
-
readonly filter: "filter";
|
|
558
|
-
readonly gauge: "gauge";
|
|
559
|
-
readonly enroll: "enroll";
|
|
560
|
-
readonly generateChart: "generateChart";
|
|
561
|
-
readonly gift: "gift";
|
|
562
|
-
readonly flame: "highlyEngagedLead";
|
|
563
|
-
readonly inbox: "inbox";
|
|
564
|
-
readonly image: "insertImage";
|
|
565
|
-
readonly quote: "insertQuote";
|
|
566
|
-
readonly insertVideo: "insertVideo";
|
|
567
|
-
readonly invoice: "invoice";
|
|
568
|
-
readonly key: "key";
|
|
569
|
-
readonly book: "knowledgeBase";
|
|
570
|
-
readonly globe: "language";
|
|
571
|
-
readonly lesson: "lesson";
|
|
572
|
-
readonly link: "link";
|
|
573
|
-
readonly listView: "listView";
|
|
574
|
-
readonly locked: "locked";
|
|
575
|
-
readonly mention: "mention";
|
|
576
|
-
readonly messages: "messages";
|
|
577
|
-
readonly mobile: "mobile";
|
|
578
|
-
readonly notificationOff: "notificationOff";
|
|
579
|
-
readonly hash: "numericDataType";
|
|
580
|
-
readonly objectAssociations: "objectAssociations";
|
|
581
|
-
readonly objectAssociationsManyToMany: "objectAssociationsManyToMany";
|
|
582
|
-
readonly objectAssociationsManyToOne: "objectAssociationsManyToOne";
|
|
583
|
-
readonly office365: "office365";
|
|
584
|
-
readonly order: "order";
|
|
585
|
-
readonly paymentSubscriptions: "paymentSubscriptions";
|
|
586
|
-
readonly product: "product";
|
|
587
|
-
readonly powerPointFile: "powerPointFile";
|
|
588
|
-
readonly presentation: "presentation";
|
|
589
|
-
readonly publish: "publish";
|
|
590
|
-
readonly questionAnswer: "questionAnswer";
|
|
591
|
-
readonly quickbooks: "quickbooks";
|
|
592
|
-
readonly readMore: "readMore";
|
|
593
|
-
readonly realEstateListing: "realEstateListing";
|
|
594
|
-
readonly readOnlyView: "readOnlyView";
|
|
595
|
-
readonly recentlySelected: "recentlySelected";
|
|
596
|
-
readonly record: "record";
|
|
597
|
-
readonly redo: "redo";
|
|
598
|
-
readonly undo: "undo";
|
|
839
|
+
export declare const illustrationNames: {
|
|
840
|
+
readonly lock: "lock";
|
|
841
|
+
readonly unlock: "unlock";
|
|
842
|
+
readonly electronicSignature: "electronic-signature";
|
|
843
|
+
readonly electronicSignatureEmptyState: "electronic-signature-empty-state";
|
|
844
|
+
readonly callingSetUp: "calling-set-up";
|
|
845
|
+
readonly companies: "companies";
|
|
846
|
+
readonly contacts: "contacts";
|
|
847
|
+
readonly multipleObjects: "multiple-objects";
|
|
848
|
+
readonly object: "object";
|
|
849
|
+
readonly task: "task";
|
|
850
|
+
readonly deals: "deals";
|
|
599
851
|
readonly registration: "registration";
|
|
600
|
-
readonly
|
|
601
|
-
readonly
|
|
602
|
-
readonly
|
|
603
|
-
readonly
|
|
604
|
-
readonly
|
|
605
|
-
readonly
|
|
606
|
-
readonly
|
|
607
|
-
readonly
|
|
608
|
-
readonly
|
|
609
|
-
readonly
|
|
610
|
-
readonly
|
|
611
|
-
readonly
|
|
612
|
-
readonly
|
|
613
|
-
readonly
|
|
614
|
-
readonly
|
|
615
|
-
readonly
|
|
616
|
-
readonly
|
|
617
|
-
readonly
|
|
618
|
-
readonly
|
|
619
|
-
readonly
|
|
620
|
-
readonly
|
|
621
|
-
readonly
|
|
622
|
-
readonly
|
|
623
|
-
readonly
|
|
624
|
-
readonly
|
|
625
|
-
readonly
|
|
626
|
-
readonly
|
|
627
|
-
readonly block: "block";
|
|
628
|
-
readonly bank: "bank";
|
|
629
|
-
readonly approvals: "approvals";
|
|
630
|
-
readonly appointment: "appointment";
|
|
631
|
-
readonly facebook: "socialBlockFacebook";
|
|
632
|
-
readonly googlePlus: "socialBlockGoogleplus";
|
|
633
|
-
readonly instagram: "socialBlockInstagram";
|
|
634
|
-
readonly linkedin: "socialBlockLinkedin";
|
|
635
|
-
readonly pinterest: "socialBlockPinterest";
|
|
636
|
-
readonly rss: "socialBlockRss";
|
|
637
|
-
readonly twitter: "socialBlockTwitter";
|
|
638
|
-
readonly x: "socialBlockX";
|
|
639
|
-
readonly xing: "socialBlockXing";
|
|
640
|
-
readonly youtube: "socialBlockYoutube";
|
|
641
|
-
readonly youtubePlay: "socialBlockYoutubeplay";
|
|
642
|
-
readonly sortAlpAsc: "sortAlpAsc";
|
|
643
|
-
readonly sortAlpDesc: "sortAlpDesc";
|
|
644
|
-
readonly sortAmtAsc: "sortAmtAsc";
|
|
645
|
-
readonly sortAmtDesc: "sortAmtDesc";
|
|
646
|
-
readonly sortNumAsc: "sortNumAsc";
|
|
647
|
-
readonly sortNumDesc: "sortNumDesc";
|
|
648
|
-
readonly sortTableAsc: "sortTableAsc";
|
|
649
|
-
readonly sortTableDesc: "sortTableDesc";
|
|
650
|
-
readonly text: "text";
|
|
651
|
-
readonly textColor: "textColor";
|
|
652
|
-
readonly textDataType: "textDataType";
|
|
653
|
-
readonly textSnippet: "textSnippet";
|
|
654
|
-
readonly calling: "calling";
|
|
655
|
-
readonly callingHangup: "callingHangup";
|
|
656
|
-
readonly callingMade: "callingMade";
|
|
657
|
-
readonly callingMissed: "callingMissed";
|
|
658
|
-
readonly callingVoicemail: "callingVoicemail";
|
|
659
|
-
readonly faceHappyFilled: "emojiFillHappy";
|
|
660
|
-
readonly faceNeutralFilled: "emojiFillNeutral";
|
|
661
|
-
readonly faceSadFilled: "emojiFillSad";
|
|
852
|
+
readonly developerSecurityUpdate: "developer-security-update";
|
|
853
|
+
readonly social: "social";
|
|
854
|
+
readonly leads: "leads";
|
|
855
|
+
readonly target: "target";
|
|
856
|
+
readonly emailConfirmation: "email-confirmation";
|
|
857
|
+
readonly successfullyConnectedEmail: "successfully-connected-email";
|
|
858
|
+
readonly contentStrategy: "content-strategy";
|
|
859
|
+
readonly addOnReporting: "add-on-reporting";
|
|
860
|
+
readonly productsShoppingCart: "products-shopping-cart";
|
|
861
|
+
readonly store: "store";
|
|
862
|
+
readonly storeDisabled: "store-disabled";
|
|
863
|
+
readonly customerSupport: "customer-support";
|
|
864
|
+
readonly customerExperience: "customer-experience";
|
|
865
|
+
readonly api: "api";
|
|
866
|
+
readonly integrations: "integrations";
|
|
867
|
+
readonly sandboxAddOn: "sandbox-add-on";
|
|
868
|
+
readonly customObjects: "custom-objects";
|
|
869
|
+
readonly paymentsButton: "payments-button";
|
|
870
|
+
readonly automatedTesting: "automated-testing";
|
|
871
|
+
readonly emptyStateCharts: "empty-state-charts";
|
|
872
|
+
readonly meetings: "meetings-small";
|
|
873
|
+
readonly tickets: "ticket-small";
|
|
874
|
+
readonly errorGeneral: "errors/general";
|
|
875
|
+
readonly errorHourglass: "errors/hourglass";
|
|
876
|
+
readonly middlePaneCards: "settings-middle-pane-cards";
|
|
877
|
+
readonly propertiesSidebar: "settings-properties-sidebar";
|
|
878
|
+
readonly sidebar: "settings-sidebar";
|
|
662
879
|
};
|
|
663
|
-
export type
|
|
880
|
+
export type IllustrationNames = keyof typeof illustrationNames;
|
|
664
881
|
/**
|
|
665
882
|
* The props type for {@link !components.Image}.
|
|
666
883
|
*
|
|
@@ -962,638 +1179,495 @@ export interface DateInputProps extends BaseDateInputForDate {
|
|
|
962
1179
|
todayButtonLabel?: string;
|
|
963
1180
|
}
|
|
964
1181
|
/**
|
|
965
|
-
* The props type for {@link !components.
|
|
1182
|
+
* The props type for {@link !components.Stack}.
|
|
966
1183
|
*
|
|
967
1184
|
* @category Component Props
|
|
968
1185
|
*/
|
|
969
|
-
export interface
|
|
970
|
-
/**
|
|
971
|
-
* The text that displays above the progress bar.
|
|
972
|
-
*
|
|
973
|
-
*/
|
|
974
|
-
title?: string;
|
|
1186
|
+
export interface StackProps {
|
|
975
1187
|
/**
|
|
976
|
-
*
|
|
977
|
-
*
|
|
1188
|
+
* Sets the spacing between components.
|
|
978
1189
|
*/
|
|
979
|
-
|
|
1190
|
+
distance?: AllDistances;
|
|
980
1191
|
/**
|
|
981
|
-
*
|
|
982
|
-
*
|
|
983
|
-
* @defaultValue `false`
|
|
1192
|
+
* Sets the content that will render inside the component.
|
|
984
1193
|
*/
|
|
985
|
-
|
|
1194
|
+
children?: React.ReactNode;
|
|
986
1195
|
/**
|
|
987
|
-
*
|
|
988
|
-
*
|
|
989
|
-
* @defaultValue `0`
|
|
1196
|
+
* Arranges components `horizontally` or `vertically` by setting the main axis.
|
|
990
1197
|
*/
|
|
991
|
-
|
|
1198
|
+
direction?: 'row' | 'column';
|
|
992
1199
|
/**
|
|
993
|
-
*
|
|
994
|
-
*
|
|
995
|
-
* @defaultValue `100`
|
|
1200
|
+
* Distributes components along the main axis using the available free space.
|
|
996
1201
|
*/
|
|
997
|
-
|
|
1202
|
+
justify?: 'center' | 'end' | 'start';
|
|
998
1203
|
/**
|
|
999
|
-
*
|
|
1000
|
-
*
|
|
1204
|
+
* Distributes components along the cross-axis using the available free space.
|
|
1001
1205
|
*/
|
|
1002
|
-
|
|
1206
|
+
align?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
|
|
1003
1207
|
/**
|
|
1004
|
-
*
|
|
1005
|
-
*
|
|
1006
|
-
* @defaultValue `"success"`
|
|
1208
|
+
* Sets the width of the stack.
|
|
1007
1209
|
*/
|
|
1008
|
-
|
|
1009
|
-
/** @deprecated use maxValue instead */
|
|
1010
|
-
valueMax?: number;
|
|
1210
|
+
width?: 'auto' | '100%';
|
|
1011
1211
|
}
|
|
1012
1212
|
/**
|
|
1013
|
-
*
|
|
1014
|
-
*
|
|
1015
|
-
*
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
* The text that displays above to the dropdown menu.
|
|
1019
|
-
*
|
|
1020
|
-
*/
|
|
1021
|
-
label?: string;
|
|
1213
|
+
* The props type for {@link !components.Flex}.
|
|
1214
|
+
*
|
|
1215
|
+
* @category Component Props
|
|
1216
|
+
*/
|
|
1217
|
+
export interface FlexProps {
|
|
1022
1218
|
/**
|
|
1023
|
-
*
|
|
1219
|
+
* Sets the spacing between components.
|
|
1024
1220
|
*
|
|
1221
|
+
* @defaultValue `"flush"`
|
|
1025
1222
|
*/
|
|
1026
|
-
|
|
1223
|
+
gap?: AllDistances;
|
|
1027
1224
|
/**
|
|
1028
|
-
*
|
|
1225
|
+
* Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
|
|
1029
1226
|
*
|
|
1030
|
-
* @defaultValue `false`
|
|
1031
1227
|
*/
|
|
1032
|
-
|
|
1228
|
+
children?: ReactNode;
|
|
1033
1229
|
/**
|
|
1034
|
-
*
|
|
1230
|
+
* Arranges components `horizontally` or `vertically` by setting the main axis.
|
|
1035
1231
|
*
|
|
1036
|
-
* @defaultValue `
|
|
1232
|
+
* @defaultValue `"row"`
|
|
1037
1233
|
*/
|
|
1038
|
-
|
|
1234
|
+
direction?: 'row' | 'column';
|
|
1039
1235
|
/**
|
|
1040
|
-
*
|
|
1236
|
+
* Distributes components along the main axis using the available free space.
|
|
1041
1237
|
*
|
|
1238
|
+
* @defaultValue `"start"`
|
|
1042
1239
|
*/
|
|
1043
|
-
|
|
1240
|
+
justify?: 'center' | 'end' | 'start' | 'around' | 'between';
|
|
1044
1241
|
/**
|
|
1045
|
-
*
|
|
1242
|
+
* Distributes components along the cross-axis using the available free space.
|
|
1046
1243
|
*
|
|
1244
|
+
* @defaultValue `"stretch"`
|
|
1047
1245
|
*/
|
|
1048
|
-
|
|
1246
|
+
align?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
|
|
1049
1247
|
/**
|
|
1050
|
-
*
|
|
1248
|
+
* Overrides Flex's `alignItem` value for this element.
|
|
1051
1249
|
*
|
|
1052
1250
|
*/
|
|
1053
|
-
|
|
1251
|
+
alignSelf?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
|
|
1054
1252
|
/**
|
|
1055
|
-
*
|
|
1056
|
-
* The input will also render its error state to let the user know there's an error.
|
|
1057
|
-
* If left `false` (default), `validationMessage` is displayed as a success message.
|
|
1253
|
+
* Whether components will wrap instead of trying to fit on one line.
|
|
1058
1254
|
*
|
|
1059
|
-
* @defaultValue `
|
|
1255
|
+
* @defaultValue `"nowrap"`
|
|
1060
1256
|
*/
|
|
1061
|
-
|
|
1257
|
+
wrap?: boolean | 'wrap' | 'nowrap';
|
|
1258
|
+
}
|
|
1259
|
+
/**
|
|
1260
|
+
* The props type for {@link !components.Box}.
|
|
1261
|
+
*
|
|
1262
|
+
* @category Component Props
|
|
1263
|
+
*/
|
|
1264
|
+
export interface BoxProps {
|
|
1062
1265
|
/**
|
|
1063
|
-
*
|
|
1266
|
+
* Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
|
|
1064
1267
|
*
|
|
1065
1268
|
*/
|
|
1066
|
-
|
|
1269
|
+
children: ReactNode;
|
|
1067
1270
|
/**
|
|
1068
|
-
*
|
|
1271
|
+
* Overrides Flex's `alignItem` value for this element.
|
|
1272
|
+
*
|
|
1273
|
+
* @defaultValue `"auto"`
|
|
1069
1274
|
*/
|
|
1070
|
-
|
|
1071
|
-
/** Will be used as the display text. **/
|
|
1072
|
-
label: string;
|
|
1073
|
-
/** Should be the option's unique identifier, which is submitted with the form. **/
|
|
1074
|
-
value: string | number;
|
|
1075
|
-
}[];
|
|
1275
|
+
alignSelf?: 'start' | 'center' | 'baseline' | 'end' | 'stretch' | 'auto';
|
|
1076
1276
|
/**
|
|
1077
|
-
*
|
|
1277
|
+
* Sets how the item will grow or shrink when it's a direct ancestor of the Flex component.
|
|
1278
|
+
* ##### Options in detail
|
|
1078
1279
|
*
|
|
1079
|
-
|
|
1280
|
+
*- `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.
|
|
1281
|
+
*- `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.
|
|
1282
|
+
*- `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.
|
|
1283
|
+
*- `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.
|
|
1284
|
+
*
|
|
1285
|
+
* @defaultValue `"initial"`
|
|
1080
1286
|
*/
|
|
1081
|
-
|
|
1287
|
+
flex?: 'initial' | 'auto' | 'none' | number;
|
|
1082
1288
|
}
|
|
1083
1289
|
/**
|
|
1084
|
-
* The props type for {@link !components.
|
|
1290
|
+
* The props type for {@link !components.Link}.
|
|
1085
1291
|
*
|
|
1086
1292
|
* @category Component Props
|
|
1087
1293
|
*/
|
|
1088
|
-
export interface
|
|
1294
|
+
export interface LinkProps extends OverlayComponentProps {
|
|
1089
1295
|
/**
|
|
1090
|
-
*
|
|
1296
|
+
* Sets the content that will render inside the component.
|
|
1091
1297
|
*
|
|
1092
1298
|
*/
|
|
1093
|
-
|
|
1299
|
+
children: ReactNode;
|
|
1094
1300
|
/**
|
|
1095
|
-
*
|
|
1301
|
+
* 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.
|
|
1302
|
+
*
|
|
1303
|
+
*/
|
|
1304
|
+
href: HrefProp;
|
|
1305
|
+
/**
|
|
1306
|
+
* The color variation of the link.
|
|
1307
|
+
*
|
|
1308
|
+
* @defaultValue `"primary"`
|
|
1309
|
+
*/
|
|
1310
|
+
variant?: 'primary' | 'destructive' | 'light' | 'dark';
|
|
1311
|
+
/**
|
|
1312
|
+
* A function that will be invoked with the link is clicked.
|
|
1096
1313
|
*
|
|
1097
1314
|
* @event
|
|
1098
1315
|
*/
|
|
1099
|
-
|
|
1316
|
+
onClick?: ReactionsHandler<ExtensionEvent>;
|
|
1100
1317
|
/**
|
|
1101
|
-
*
|
|
1318
|
+
* When set to true, `event.preventDefault()` will be invoked before the `onClick` function is called, preventing automatic navigation to the href URL.
|
|
1102
1319
|
*
|
|
1103
|
-
* @defaultValue `
|
|
1320
|
+
* @defaultValue `false`
|
|
1104
1321
|
*/
|
|
1105
|
-
|
|
1322
|
+
preventDefault?: boolean;
|
|
1106
1323
|
}
|
|
1107
1324
|
/**
|
|
1108
|
-
* The props type for {@link !components.
|
|
1325
|
+
* The props type for {@link !components.List}.
|
|
1109
1326
|
*
|
|
1110
1327
|
* @category Component Props
|
|
1111
1328
|
*/
|
|
1112
|
-
export interface
|
|
1329
|
+
export interface ListProps {
|
|
1113
1330
|
/**
|
|
1114
|
-
* The
|
|
1115
|
-
*
|
|
1331
|
+
* The content of the list. Each child will be wrapped in an `li` tag.
|
|
1116
1332
|
*/
|
|
1117
|
-
|
|
1333
|
+
children: ReactNode;
|
|
1118
1334
|
/**
|
|
1119
|
-
*
|
|
1335
|
+
* The type of list to render.
|
|
1120
1336
|
*
|
|
1121
|
-
* @
|
|
1337
|
+
* @defaultValue `"unordered"`
|
|
1122
1338
|
*/
|
|
1123
|
-
|
|
1339
|
+
variant?: 'unordered' | 'unordered-styled' | 'ordered' | 'ordered-styled' | 'inline' | 'inline-divided';
|
|
1124
1340
|
}
|
|
1125
1341
|
/**
|
|
1126
|
-
* The props type for {@link !components.
|
|
1342
|
+
* The props type for {@link !components.LoadingSpinner}.
|
|
1127
1343
|
*
|
|
1128
1344
|
* @category Component Props
|
|
1129
1345
|
*/
|
|
1130
|
-
export interface
|
|
1346
|
+
export interface LoadingSpinnerProps {
|
|
1131
1347
|
/**
|
|
1132
|
-
* The
|
|
1348
|
+
* The text that displays next to the spinner.
|
|
1133
1349
|
*
|
|
1134
|
-
* @defaultValue `"default"`
|
|
1135
1350
|
*/
|
|
1136
|
-
|
|
1351
|
+
label: string;
|
|
1137
1352
|
/**
|
|
1138
|
-
* When set to true
|
|
1353
|
+
* When set to `true`, the label will appear next to the spinner.
|
|
1139
1354
|
*
|
|
1140
|
-
* @defaultValue `false
|
|
1355
|
+
* @defaultValue `false`
|
|
1141
1356
|
*/
|
|
1142
|
-
|
|
1357
|
+
showLabel?: boolean;
|
|
1143
1358
|
/**
|
|
1144
|
-
*
|
|
1359
|
+
* The size of the spinner.
|
|
1145
1360
|
*
|
|
1146
|
-
* @
|
|
1361
|
+
* @defaultValue `"sm"`
|
|
1147
1362
|
*/
|
|
1148
|
-
|
|
1363
|
+
size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
|
|
1149
1364
|
/**
|
|
1150
|
-
*
|
|
1365
|
+
* The position of the spinner. Can be one of `inline` or `centered`.
|
|
1151
1366
|
*
|
|
1152
|
-
* @defaultValue `
|
|
1367
|
+
* @defaultValue `"inline"`
|
|
1153
1368
|
*/
|
|
1154
|
-
|
|
1369
|
+
layout?: 'inline' | 'centered';
|
|
1370
|
+
}
|
|
1371
|
+
export interface ModalProps {
|
|
1155
1372
|
/**
|
|
1156
|
-
*
|
|
1373
|
+
* Accessibility label.
|
|
1157
1374
|
*
|
|
1158
|
-
* @event
|
|
1159
1375
|
*/
|
|
1160
|
-
|
|
1376
|
+
'aria-label'?: string;
|
|
1161
1377
|
/**
|
|
1162
|
-
*
|
|
1378
|
+
* The main content of the modal when it opens.
|
|
1379
|
+
*
|
|
1163
1380
|
*/
|
|
1164
|
-
children
|
|
1165
|
-
}
|
|
1166
|
-
/**
|
|
1167
|
-
* The props type for {@link !components.Tag}.
|
|
1168
|
-
*
|
|
1169
|
-
* @category Component Props
|
|
1170
|
-
*/
|
|
1171
|
-
export interface TagProps extends OverlayComponentProps {
|
|
1381
|
+
children?: ReactNode;
|
|
1172
1382
|
/**
|
|
1173
|
-
*
|
|
1383
|
+
* A unique ID for the modal
|
|
1384
|
+
*
|
|
1174
1385
|
*/
|
|
1175
|
-
|
|
1386
|
+
id: string;
|
|
1176
1387
|
/**
|
|
1177
|
-
*
|
|
1388
|
+
* A function that will be invoked when the modal has finished opening.
|
|
1178
1389
|
*
|
|
1179
|
-
* @defaultValue `"default"`
|
|
1180
1390
|
*/
|
|
1181
|
-
|
|
1391
|
+
onOpen?: () => void;
|
|
1182
1392
|
/**
|
|
1183
|
-
* A function that will be invoked when the
|
|
1393
|
+
* A function that will be invoked when the modal has finished closing.
|
|
1184
1394
|
*
|
|
1185
|
-
* @event
|
|
1186
1395
|
*/
|
|
1187
|
-
|
|
1396
|
+
onClose?: () => void;
|
|
1188
1397
|
/**
|
|
1189
|
-
*
|
|
1398
|
+
* The width of the modal
|
|
1190
1399
|
*
|
|
1191
|
-
* @defaultValue `
|
|
1400
|
+
* @defaultValue `"sm"`
|
|
1192
1401
|
*/
|
|
1193
|
-
|
|
1194
|
-
}
|
|
1195
|
-
/**
|
|
1196
|
-
* @internal
|
|
1197
|
-
* Format options for text component.
|
|
1198
|
-
*/
|
|
1199
|
-
export interface TextFormatOptions {
|
|
1402
|
+
width?: TShirtSizes['sm'] | TShirtSizes['md'] | TShirtSizes['lg'];
|
|
1200
1403
|
/**
|
|
1201
|
-
*
|
|
1404
|
+
* The title of the modal
|
|
1202
1405
|
*
|
|
1203
|
-
* @defaultValue `"regular"`
|
|
1204
1406
|
*/
|
|
1205
|
-
|
|
1407
|
+
title?: string;
|
|
1206
1408
|
/**
|
|
1207
|
-
*
|
|
1409
|
+
* The variant of the modal
|
|
1208
1410
|
*
|
|
1209
|
-
* @defaultValue `
|
|
1411
|
+
* @defaultValue `"default"`
|
|
1210
1412
|
*/
|
|
1211
|
-
|
|
1413
|
+
variant?: 'danger' | 'default';
|
|
1414
|
+
}
|
|
1415
|
+
export interface ModalBodyProps {
|
|
1212
1416
|
/**
|
|
1213
|
-
*
|
|
1417
|
+
* The main content of the modal
|
|
1214
1418
|
*
|
|
1215
|
-
* @defaultValue `"none"`
|
|
1216
1419
|
*/
|
|
1217
|
-
|
|
1420
|
+
children: ReactNode;
|
|
1218
1421
|
}
|
|
1219
|
-
|
|
1220
|
-
* The props type for {@link !components.Text}.
|
|
1221
|
-
*
|
|
1222
|
-
* @interface
|
|
1223
|
-
* @category Component Props
|
|
1224
|
-
*/
|
|
1225
|
-
export type TextProps = {
|
|
1422
|
+
export interface ModalFooterProps {
|
|
1226
1423
|
/**
|
|
1227
|
-
* The
|
|
1424
|
+
* The footer of the modal
|
|
1228
1425
|
*
|
|
1229
|
-
|
|
1230
|
-
|
|
1426
|
+
*/
|
|
1427
|
+
children: ReactNode;
|
|
1428
|
+
}
|
|
1429
|
+
export interface PanelProps {
|
|
1430
|
+
/**
|
|
1431
|
+
* Accessibility label.
|
|
1231
1432
|
*
|
|
1232
|
-
* @defaultValue `"bodytext"`
|
|
1233
1433
|
*/
|
|
1234
|
-
|
|
1434
|
+
'aria-label'?: string;
|
|
1235
1435
|
/**
|
|
1236
|
-
*
|
|
1436
|
+
* The main content of the panel when it opens.
|
|
1237
1437
|
*
|
|
1238
|
-
* @defaultValue `false`
|
|
1239
1438
|
*/
|
|
1240
|
-
|
|
1439
|
+
children?: ReactNode;
|
|
1241
1440
|
/**
|
|
1242
|
-
*
|
|
1441
|
+
* A unique ID for the panel
|
|
1442
|
+
*
|
|
1243
1443
|
*/
|
|
1244
|
-
|
|
1444
|
+
id: string;
|
|
1245
1445
|
/**
|
|
1246
|
-
*
|
|
1247
|
-
* The style of text to display. Can be any of:
|
|
1446
|
+
* A function that will be invoked when the panel has finished opening.
|
|
1248
1447
|
*
|
|
1249
|
-
* - { fontWeight: 'bold' }
|
|
1250
|
-
* - { fontWeight: 'demibold' }
|
|
1251
|
-
* - { italic: true }
|
|
1252
|
-
* - { lineDecoration: 'strikethrough' }
|
|
1253
|
-
* - { lineDecoration: 'underline' }
|
|
1254
|
-
* - <Text inline={true}>
|
|
1255
1448
|
*/
|
|
1256
|
-
|
|
1449
|
+
onOpen?: () => void;
|
|
1257
1450
|
/**
|
|
1258
|
-
*
|
|
1259
|
-
* truncates long strings to a single line. If the full string doesn't fit in one line,
|
|
1260
|
-
* it's shown in a tooltip on hover.
|
|
1451
|
+
* A function that will be invoked when the panel has finished closing.
|
|
1261
1452
|
*
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
*
|
|
1453
|
+
*/
|
|
1454
|
+
onClose?: () => void;
|
|
1455
|
+
/**
|
|
1456
|
+
* The width of the panel
|
|
1266
1457
|
*
|
|
1267
|
-
* @defaultValue `
|
|
1458
|
+
* @defaultValue `"sm"`
|
|
1268
1459
|
*/
|
|
1269
|
-
|
|
1270
|
-
};
|
|
1271
|
-
export interface TruncateOptions {
|
|
1272
|
-
maxWidth?: number;
|
|
1273
|
-
tooltipText?: string;
|
|
1274
|
-
}
|
|
1275
|
-
/**
|
|
1276
|
-
* The props type for {@link !components.Tile}.
|
|
1277
|
-
*
|
|
1278
|
-
* @category Component Props
|
|
1279
|
-
*/
|
|
1280
|
-
export interface TileProps {
|
|
1460
|
+
width?: TShirtSizes['sm'] | TShirtSizes['md'] | TShirtSizes['lg'];
|
|
1281
1461
|
/**
|
|
1282
|
-
*
|
|
1462
|
+
* The title of the panel
|
|
1463
|
+
*
|
|
1283
1464
|
*/
|
|
1284
|
-
|
|
1465
|
+
title?: string;
|
|
1285
1466
|
/**
|
|
1286
|
-
*
|
|
1467
|
+
* The variant of the panel
|
|
1287
1468
|
*
|
|
1288
|
-
* @defaultValue `
|
|
1469
|
+
* @defaultValue `"default"`
|
|
1289
1470
|
*/
|
|
1290
|
-
|
|
1471
|
+
variant?: 'modal' | 'default';
|
|
1472
|
+
}
|
|
1473
|
+
export interface PanelSectionProps {
|
|
1291
1474
|
/**
|
|
1292
|
-
* When set to `true`,
|
|
1475
|
+
* When set to `true`, the section will have no bottom margin
|
|
1293
1476
|
*
|
|
1294
1477
|
* @defaultValue `false`
|
|
1295
1478
|
*/
|
|
1296
1479
|
flush?: boolean;
|
|
1297
|
-
}
|
|
1298
|
-
/** @ignore */
|
|
1299
|
-
interface Team {
|
|
1300
|
-
id: number;
|
|
1301
|
-
name: string;
|
|
1302
|
-
teammates: number[];
|
|
1303
|
-
}
|
|
1304
|
-
/**
|
|
1305
|
-
* The props type for {@link !components.Checkbox}.
|
|
1306
|
-
*
|
|
1307
|
-
* @category Component Props
|
|
1308
|
-
*/
|
|
1309
|
-
export interface CheckboxProps {
|
|
1310
1480
|
/**
|
|
1311
|
-
*
|
|
1312
|
-
*
|
|
1481
|
+
* The main content of the section
|
|
1482
|
+
*
|
|
1313
1483
|
*/
|
|
1314
|
-
|
|
1484
|
+
children: ReactNode;
|
|
1485
|
+
}
|
|
1486
|
+
export interface PanelBodyProps {
|
|
1315
1487
|
/**
|
|
1316
|
-
* The
|
|
1488
|
+
* The main content of the body
|
|
1489
|
+
*
|
|
1317
1490
|
*/
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1491
|
+
children: ReactNode;
|
|
1492
|
+
}
|
|
1493
|
+
export interface PanelFooterProps {
|
|
1321
1494
|
/**
|
|
1322
|
-
*
|
|
1495
|
+
* The main content of the footer
|
|
1496
|
+
*
|
|
1323
1497
|
*/
|
|
1324
|
-
|
|
1498
|
+
children: ReactNode;
|
|
1499
|
+
}
|
|
1500
|
+
/**
|
|
1501
|
+
* The props type for {@link !components.ProgressBar}.
|
|
1502
|
+
*
|
|
1503
|
+
* @category Component Props
|
|
1504
|
+
*/
|
|
1505
|
+
export interface ProgressBarProps {
|
|
1325
1506
|
/**
|
|
1326
|
-
* The
|
|
1507
|
+
* The text that displays above the progress bar.
|
|
1508
|
+
*
|
|
1327
1509
|
*/
|
|
1328
|
-
|
|
1510
|
+
title?: string;
|
|
1329
1511
|
/**
|
|
1330
|
-
*
|
|
1512
|
+
* Accessibility label.
|
|
1513
|
+
*
|
|
1331
1514
|
*/
|
|
1332
|
-
|
|
1515
|
+
'aria-label'?: string;
|
|
1333
1516
|
/**
|
|
1334
|
-
*
|
|
1517
|
+
* Whether the progress bar displays the completion percentage.
|
|
1335
1518
|
*
|
|
1336
|
-
* @defaultValue `
|
|
1519
|
+
* @defaultValue `false`
|
|
1337
1520
|
*/
|
|
1338
|
-
|
|
1521
|
+
showPercentage?: boolean;
|
|
1339
1522
|
/**
|
|
1340
|
-
*
|
|
1523
|
+
* The number representing the progress so far.
|
|
1341
1524
|
*
|
|
1342
|
-
* @
|
|
1525
|
+
* @defaultValue `0`
|
|
1343
1526
|
*/
|
|
1344
|
-
|
|
1345
|
-
/** The text that displays in the dropdown menu. */
|
|
1346
|
-
children?: React.ReactNode;
|
|
1527
|
+
value?: number;
|
|
1347
1528
|
/**
|
|
1348
|
-
*
|
|
1529
|
+
* The maximum value of the progress bar.
|
|
1530
|
+
*
|
|
1531
|
+
* @defaultValue `100`
|
|
1349
1532
|
*/
|
|
1350
|
-
|
|
1533
|
+
maxValue?: number;
|
|
1351
1534
|
/**
|
|
1352
|
-
*
|
|
1353
|
-
*
|
|
1535
|
+
* 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.
|
|
1536
|
+
*
|
|
1354
1537
|
*/
|
|
1355
|
-
|
|
1538
|
+
valueDescription?: string;
|
|
1356
1539
|
/**
|
|
1357
|
-
*
|
|
1540
|
+
* The color that indicates the type of progress bar.
|
|
1541
|
+
*
|
|
1542
|
+
* @defaultValue `"success"`
|
|
1358
1543
|
*/
|
|
1359
|
-
'
|
|
1544
|
+
variant?: 'success' | 'danger' | 'warning';
|
|
1545
|
+
/** @deprecated use maxValue instead */
|
|
1546
|
+
valueMax?: number;
|
|
1360
1547
|
}
|
|
1361
1548
|
/**
|
|
1362
|
-
*
|
|
1363
|
-
* @
|
|
1364
|
-
*
|
|
1365
|
-
|
|
1366
|
-
export type RadioButtonProps = Omit<CheckboxProps, 'aria-label'>;
|
|
1367
|
-
export type ToggleGroupOption = {
|
|
1368
|
-
/** The text that displays in the dropdown menu. */
|
|
1369
|
-
label: string;
|
|
1370
|
-
/** The unique value that is submitted with the form. */
|
|
1371
|
-
value: string;
|
|
1372
|
-
/** When set to `true`, the option will be selected by default. */
|
|
1373
|
-
initialIsChecked?: boolean;
|
|
1374
|
-
/** When set to `true`, the option cannot be selected. */
|
|
1375
|
-
readonly?: boolean;
|
|
1376
|
-
/** The string that displays below the toggle. */
|
|
1377
|
-
description?: string;
|
|
1378
|
-
};
|
|
1379
|
-
interface ToggleGroupListBaseProps {
|
|
1380
|
-
name: ToggleGroupProps['name'];
|
|
1381
|
-
options: ToggleGroupProps['options'];
|
|
1382
|
-
variant: ToggleGroupProps['variant'];
|
|
1383
|
-
inline?: boolean;
|
|
1384
|
-
}
|
|
1385
|
-
export interface CheckboxListProps extends ToggleGroupListBaseProps {
|
|
1386
|
-
value?: CheckboxGroupProps['value'];
|
|
1387
|
-
onChange?: CheckboxGroupProps['onChange'];
|
|
1388
|
-
}
|
|
1389
|
-
export interface RadioButtonListProps extends ToggleGroupListBaseProps {
|
|
1390
|
-
value?: RadioButtonGroupProps['value'];
|
|
1391
|
-
onChange?: RadioButtonGroupProps['onChange'];
|
|
1392
|
-
}
|
|
1393
|
-
type ToggleType = 'checkboxList' | 'radioButtonList';
|
|
1394
|
-
export interface CommonGroupProps {
|
|
1549
|
+
* Generic collection of props for select components
|
|
1550
|
+
* @internal
|
|
1551
|
+
* */
|
|
1552
|
+
export interface BaseSelectProps {
|
|
1395
1553
|
/**
|
|
1396
|
-
*
|
|
1554
|
+
* The text that displays above to the dropdown menu.
|
|
1555
|
+
*
|
|
1397
1556
|
*/
|
|
1398
|
-
|
|
1557
|
+
label?: string;
|
|
1399
1558
|
/**
|
|
1400
|
-
* The unique identifier for the
|
|
1559
|
+
* The unique identifier for the select element.
|
|
1560
|
+
*
|
|
1401
1561
|
*/
|
|
1402
|
-
name
|
|
1562
|
+
name?: string;
|
|
1403
1563
|
/**
|
|
1404
|
-
*
|
|
1564
|
+
* When set to `true`, displays a required field indicator.
|
|
1565
|
+
*
|
|
1566
|
+
* @defaultValue `false`
|
|
1405
1567
|
*/
|
|
1406
|
-
|
|
1568
|
+
required?: boolean;
|
|
1407
1569
|
/**
|
|
1408
|
-
*
|
|
1570
|
+
* 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.
|
|
1571
|
+
*
|
|
1572
|
+
* @defaultValue `false`
|
|
1409
1573
|
*/
|
|
1410
|
-
|
|
1574
|
+
readOnly?: boolean;
|
|
1411
1575
|
/**
|
|
1412
|
-
*
|
|
1576
|
+
* Displayed text that describes the field's purpose.
|
|
1413
1577
|
*
|
|
1414
|
-
* @defaultValue `false`
|
|
1415
1578
|
*/
|
|
1416
|
-
|
|
1579
|
+
description?: string;
|
|
1417
1580
|
/**
|
|
1418
|
-
*
|
|
1581
|
+
* The text that displays in a tooltip next to the label.
|
|
1582
|
+
*
|
|
1419
1583
|
*/
|
|
1420
1584
|
tooltip?: string;
|
|
1421
1585
|
/**
|
|
1422
|
-
*
|
|
1586
|
+
* Text that appears in the input when no value is set.
|
|
1587
|
+
*
|
|
1588
|
+
*/
|
|
1589
|
+
placeholder?: string;
|
|
1590
|
+
/**
|
|
1591
|
+
* When set to `true`, `validationMessage` is displayed as an error message if provided.
|
|
1592
|
+
* The input will also render its error state to let the user know there's an error.
|
|
1593
|
+
* If left `false` (default), `validationMessage` is displayed as a success message.
|
|
1423
1594
|
*
|
|
1424
1595
|
* @defaultValue `false`
|
|
1425
1596
|
*/
|
|
1426
1597
|
error?: boolean;
|
|
1427
1598
|
/**
|
|
1428
|
-
*
|
|
1599
|
+
* The text to show if the input has an error.
|
|
1429
1600
|
*
|
|
1430
|
-
* @defaultValue `[]`
|
|
1431
1601
|
*/
|
|
1432
|
-
|
|
1602
|
+
validationMessage?: string;
|
|
1433
1603
|
/**
|
|
1434
|
-
*
|
|
1435
|
-
*
|
|
1436
|
-
* @defaultValue `false`
|
|
1604
|
+
* The options to display in the dropdown menu.
|
|
1437
1605
|
*/
|
|
1438
|
-
|
|
1606
|
+
options: {
|
|
1607
|
+
/** Will be used as the display text. **/
|
|
1608
|
+
label: string;
|
|
1609
|
+
/** Should be the option's unique identifier, which is submitted with the form. **/
|
|
1610
|
+
value: string | number;
|
|
1611
|
+
}[];
|
|
1439
1612
|
/**
|
|
1440
|
-
* The
|
|
1613
|
+
* The variant type for the select.
|
|
1441
1614
|
*
|
|
1442
|
-
* @defaultValue `"
|
|
1615
|
+
* @defaultValue `"input"`
|
|
1443
1616
|
*/
|
|
1444
|
-
variant?: '
|
|
1445
|
-
value?: string[] | string;
|
|
1617
|
+
variant?: 'transparent' | 'input';
|
|
1446
1618
|
}
|
|
1447
|
-
|
|
1619
|
+
/**
|
|
1620
|
+
* The props type for {@link !components.Select}.
|
|
1621
|
+
*
|
|
1622
|
+
* @category Component Props
|
|
1623
|
+
*/
|
|
1624
|
+
export interface SelectProps extends BaseSelectProps {
|
|
1448
1625
|
/**
|
|
1449
|
-
*
|
|
1626
|
+
* The value of the select input.
|
|
1450
1627
|
*
|
|
1451
|
-
* @defaultValue `"checkboxList"`
|
|
1452
1628
|
*/
|
|
1453
|
-
|
|
1629
|
+
value?: string | number;
|
|
1454
1630
|
/**
|
|
1455
|
-
* A function that is
|
|
1631
|
+
* A callback function that is invoked when the value is committed.
|
|
1456
1632
|
*
|
|
1457
1633
|
* @event
|
|
1458
1634
|
*/
|
|
1459
|
-
onChange?: (value:
|
|
1635
|
+
onChange?: (value: NonNullable<SelectProps['value']>) => void;
|
|
1460
1636
|
/**
|
|
1461
|
-
* The
|
|
1637
|
+
* The variant type for the select.
|
|
1638
|
+
*
|
|
1639
|
+
* @defaultValue `"input"`
|
|
1462
1640
|
*/
|
|
1463
|
-
|
|
1464
|
-
} & CommonGroupProps;
|
|
1465
|
-
type RadioButtonGroupProps = {
|
|
1641
|
+
variant?: 'transparent' | 'input';
|
|
1466
1642
|
/**
|
|
1467
|
-
*
|
|
1643
|
+
* A function that is called and passed the value every time the search field is
|
|
1644
|
+
* edited by the user. Prefer updating state in onChange as it fires less
|
|
1645
|
+
* frequently, and if you need to update state here, consider debouncing your function.
|
|
1468
1646
|
*
|
|
1469
|
-
* @
|
|
1647
|
+
* @event
|
|
1470
1648
|
*/
|
|
1471
|
-
|
|
1649
|
+
onInput?: (value: string) => void;
|
|
1650
|
+
}
|
|
1651
|
+
/**
|
|
1652
|
+
* The props type for {@link !components.MultiSelect}.
|
|
1653
|
+
*
|
|
1654
|
+
* @category Component Props
|
|
1655
|
+
*/
|
|
1656
|
+
export interface MultiSelectProps extends BaseSelectProps {
|
|
1472
1657
|
/**
|
|
1473
|
-
*
|
|
1658
|
+
* The value of the select input.
|
|
1474
1659
|
*
|
|
1475
|
-
* @event
|
|
1476
1660
|
*/
|
|
1477
|
-
|
|
1661
|
+
value?: (string | number)[];
|
|
1478
1662
|
/**
|
|
1479
|
-
*
|
|
1663
|
+
* A callback function that is invoked when the value is committed.
|
|
1664
|
+
*
|
|
1665
|
+
* @event
|
|
1480
1666
|
*/
|
|
1481
|
-
|
|
1482
|
-
}
|
|
1483
|
-
type DefaultToggleTypeProps = {
|
|
1484
|
-
toggleType?: never;
|
|
1485
|
-
} & CheckboxGroupProps;
|
|
1667
|
+
onChange?: (value: NonNullable<MultiSelectProps['value']>) => void;
|
|
1668
|
+
}
|
|
1486
1669
|
/**
|
|
1487
|
-
* The props type for {@link !components.
|
|
1488
|
-
*
|
|
1489
|
-
* @interface
|
|
1490
|
-
* @category Component Props
|
|
1491
|
-
*/
|
|
1492
|
-
export type ToggleGroupProps = CheckboxGroupProps | RadioButtonGroupProps | DefaultToggleTypeProps;
|
|
1493
|
-
/** @ignore */
|
|
1494
|
-
export interface UserContext {
|
|
1495
|
-
id: number;
|
|
1496
|
-
emails: string[];
|
|
1497
|
-
email: string;
|
|
1498
|
-
firstName: string;
|
|
1499
|
-
lastName: string;
|
|
1500
|
-
/** @deprecated Roles will always be empty. Please use teams instead */
|
|
1501
|
-
roles: string[];
|
|
1502
|
-
teams: Team[];
|
|
1503
|
-
locale?: string;
|
|
1504
|
-
}
|
|
1505
|
-
/** @ignore */
|
|
1506
|
-
export interface PortalContext {
|
|
1507
|
-
id: number;
|
|
1508
|
-
timezone: string;
|
|
1509
|
-
}
|
|
1510
|
-
/** @ignore */
|
|
1511
|
-
export interface CrmRecordContext {
|
|
1512
|
-
objectId: number;
|
|
1513
|
-
objectTypeId: string;
|
|
1514
|
-
}
|
|
1515
|
-
/** @ignore */
|
|
1516
|
-
export interface AppContext {
|
|
1517
|
-
appId: number | string;
|
|
1518
|
-
appName?: string;
|
|
1519
|
-
cardTitle?: string;
|
|
1520
|
-
}
|
|
1521
|
-
/** @ignore */
|
|
1522
|
-
export interface BaseContext {
|
|
1523
|
-
user: UserContext;
|
|
1524
|
-
portal: PortalContext;
|
|
1525
|
-
}
|
|
1526
|
-
/** @ignore */
|
|
1527
|
-
export interface CrmContext extends BaseContext {
|
|
1528
|
-
location: 'crm.record.tab' | 'crm.record.sidebar' | 'crm.preview' | 'helpdesk.sidebar';
|
|
1529
|
-
crm: CrmRecordContext;
|
|
1530
|
-
extension?: AppContext;
|
|
1531
|
-
}
|
|
1532
|
-
/** @ignore */
|
|
1533
|
-
export interface SettingsContext extends BaseContext {
|
|
1534
|
-
location: 'settings';
|
|
1535
|
-
}
|
|
1536
|
-
/** @ignore */
|
|
1537
|
-
export interface GenericContext extends BaseContext {
|
|
1538
|
-
location: 'uie.playground.middle';
|
|
1539
|
-
}
|
|
1540
|
-
export interface StackProps {
|
|
1541
|
-
distance?: AllDistances;
|
|
1542
|
-
children?: React.ReactNode;
|
|
1543
|
-
direction?: 'row' | 'column';
|
|
1544
|
-
justify?: 'center' | 'end' | 'start';
|
|
1545
|
-
align?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
|
|
1546
|
-
width?: 'auto' | '100%';
|
|
1547
|
-
}
|
|
1548
|
-
/**
|
|
1549
|
-
* The props type for {@link !components.Flex}.
|
|
1550
|
-
*
|
|
1551
|
-
* @category Component Props
|
|
1552
|
-
*/
|
|
1553
|
-
export interface FlexProps {
|
|
1554
|
-
/**
|
|
1555
|
-
* Sets the spacing between components.
|
|
1556
|
-
*
|
|
1557
|
-
* @defaultValue `"flush"`
|
|
1558
|
-
*/
|
|
1559
|
-
gap?: AllDistances;
|
|
1560
|
-
/**
|
|
1561
|
-
* Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
|
|
1562
|
-
*
|
|
1563
|
-
*/
|
|
1564
|
-
children?: ReactNode;
|
|
1565
|
-
/**
|
|
1566
|
-
* Arranges components `horizontally` or `vertically` by setting the main axis.
|
|
1567
|
-
*
|
|
1568
|
-
* @defaultValue `"row"`
|
|
1569
|
-
*/
|
|
1570
|
-
direction?: 'row' | 'column';
|
|
1571
|
-
/**
|
|
1572
|
-
* Distributes components along the main axis using the available free space.
|
|
1573
|
-
*
|
|
1574
|
-
* @defaultValue `"start"`
|
|
1575
|
-
*/
|
|
1576
|
-
justify?: 'center' | 'end' | 'start' | 'around' | 'between';
|
|
1577
|
-
/**
|
|
1578
|
-
* Distributes components along the cross-axis using the available free space.
|
|
1579
|
-
*
|
|
1580
|
-
* @defaultValue `"stretch"`
|
|
1581
|
-
*/
|
|
1582
|
-
align?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
|
|
1583
|
-
/**
|
|
1584
|
-
* Distributes a child component along the cross-axis using the available free space. Use this prop for nested child Flex and Box components to align them differently from other child components in the Flex.
|
|
1585
|
-
*
|
|
1586
|
-
*/
|
|
1587
|
-
alignSelf?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
|
|
1588
|
-
/**
|
|
1589
|
-
* Whether components will wrap instead of trying to fit on one line.
|
|
1590
|
-
*
|
|
1591
|
-
* @defaultValue `"nowrap"`
|
|
1592
|
-
*/
|
|
1593
|
-
wrap?: boolean | 'wrap' | 'nowrap';
|
|
1594
|
-
}
|
|
1595
|
-
/**
|
|
1596
|
-
* The props type for {@link !components.StatisticsTrend}.
|
|
1670
|
+
* The props type for {@link !components.StatisticsTrend}.
|
|
1597
1671
|
*
|
|
1598
1672
|
* @category Component Props
|
|
1599
1673
|
*/
|
|
@@ -1648,1116 +1722,1078 @@ export interface StatisticsProps {
|
|
|
1648
1722
|
children: ReactNode;
|
|
1649
1723
|
}
|
|
1650
1724
|
/**
|
|
1651
|
-
* @
|
|
1725
|
+
* The props type for {@link !components.StatusTag}.
|
|
1726
|
+
*
|
|
1727
|
+
* @category Component Props
|
|
1652
1728
|
*/
|
|
1653
|
-
export interface
|
|
1729
|
+
export interface StatusTagProps {
|
|
1654
1730
|
/**
|
|
1655
|
-
*
|
|
1731
|
+
* The status tag's indicator color.
|
|
1732
|
+
*
|
|
1733
|
+
* @defaultValue `"default"`
|
|
1656
1734
|
*/
|
|
1657
|
-
|
|
1735
|
+
variant?: 'danger' | 'warning' | 'info' | 'success' | 'default';
|
|
1658
1736
|
/**
|
|
1659
|
-
*
|
|
1737
|
+
* When set to true, the status tag's dot will be a ring instead.
|
|
1738
|
+
*
|
|
1739
|
+
* @defaultValue `false `
|
|
1660
1740
|
*/
|
|
1661
|
-
|
|
1741
|
+
hollow?: boolean;
|
|
1662
1742
|
/**
|
|
1663
|
-
*
|
|
1743
|
+
* A function that will be invoked when the status tag is clicked. It receives no arguments and its return value is ignored.
|
|
1744
|
+
*
|
|
1745
|
+
* @event
|
|
1664
1746
|
*/
|
|
1665
|
-
|
|
1747
|
+
onClick?: () => void;
|
|
1666
1748
|
/**
|
|
1667
|
-
*
|
|
1668
|
-
*
|
|
1749
|
+
* When set to true, the status tag will show a small clickable 'x' icon.
|
|
1750
|
+
*
|
|
1751
|
+
* @defaultValue `false`
|
|
1669
1752
|
*/
|
|
1670
|
-
|
|
1753
|
+
showRemoveIcon?: boolean;
|
|
1754
|
+
/**
|
|
1755
|
+
* A function that will be invoked when the 'x' icon is clicked. It receives no arguments and its return value is ignored.
|
|
1756
|
+
*
|
|
1757
|
+
* @event
|
|
1758
|
+
*/
|
|
1759
|
+
onRemoveClick?: () => void;
|
|
1760
|
+
/**
|
|
1761
|
+
* 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.
|
|
1762
|
+
*/
|
|
1763
|
+
children: ReactNode;
|
|
1671
1764
|
}
|
|
1672
1765
|
/**
|
|
1673
|
-
* @
|
|
1766
|
+
* The props type for {@link !components.StepIndicator}.
|
|
1767
|
+
*
|
|
1768
|
+
* @category Component Props
|
|
1674
1769
|
*/
|
|
1675
|
-
export
|
|
1676
|
-
|
|
1677
|
-
|
|
1770
|
+
export interface StepIndicatorProps {
|
|
1771
|
+
/**
|
|
1772
|
+
* An array containing the name of each step.
|
|
1773
|
+
*/
|
|
1774
|
+
stepNames: string[];
|
|
1775
|
+
/**
|
|
1776
|
+
* The orientation of the indicator.
|
|
1777
|
+
*
|
|
1778
|
+
* @defaultValue `"horizontal"`
|
|
1779
|
+
*/
|
|
1780
|
+
direction?: 'horizontal' | 'vertical';
|
|
1781
|
+
/**
|
|
1782
|
+
* The size of the indicator circles.
|
|
1783
|
+
*
|
|
1784
|
+
* @defaultValue `"small"`
|
|
1785
|
+
*/
|
|
1786
|
+
circleSize?: AllSizes;
|
|
1787
|
+
/**
|
|
1788
|
+
* The currently active step. Steps are 0-based.
|
|
1789
|
+
*/
|
|
1790
|
+
currentStep?: number;
|
|
1791
|
+
/**
|
|
1792
|
+
* The visual style of the component.
|
|
1793
|
+
*
|
|
1794
|
+
* - default: default spacing.
|
|
1795
|
+
* - compact: only shows the title of the currently active step.
|
|
1796
|
+
* - flush: only shows the title of the currently active step and removes left and right margins.
|
|
1797
|
+
*
|
|
1798
|
+
* @defaultValue `"default"`
|
|
1799
|
+
*/
|
|
1800
|
+
variant?: 'default' | 'compact' | 'flush';
|
|
1801
|
+
/**
|
|
1802
|
+
* 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.
|
|
1803
|
+
*
|
|
1804
|
+
* @event
|
|
1805
|
+
*/
|
|
1806
|
+
onClick?: (stepIndex: number) => void;
|
|
1807
|
+
}
|
|
1808
|
+
export interface AlignmentProps {
|
|
1809
|
+
align?: 'left' | 'center' | 'right';
|
|
1810
|
+
}
|
|
1811
|
+
export interface WidthProps {
|
|
1812
|
+
width?: 'min' | 'max' | 'auto' | number;
|
|
1813
|
+
}
|
|
1814
|
+
export interface TableElementProps {
|
|
1815
|
+
children: ReactNode;
|
|
1678
1816
|
}
|
|
1679
1817
|
/**
|
|
1680
|
-
* @
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
response: JsonValue;
|
|
1685
|
-
} | {
|
|
1686
|
-
status: ServerlessExecutionStatus.Error;
|
|
1687
|
-
message: string;
|
|
1688
|
-
};
|
|
1689
|
-
/**
|
|
1690
|
-
* @category Serverless
|
|
1818
|
+
* @property align Sets the alignment of a table header.
|
|
1819
|
+
* @property width Sets the width of a table header.
|
|
1820
|
+
*
|
|
1821
|
+
* @interface
|
|
1691
1822
|
*/
|
|
1692
|
-
export type
|
|
1823
|
+
export type BaseTableHeaderProps = TableElementProps & AlignmentProps & WidthProps;
|
|
1824
|
+
export type TableCellProps = TableElementProps & AlignmentProps & WidthProps;
|
|
1693
1825
|
/**
|
|
1694
|
-
*
|
|
1695
|
-
*
|
|
1826
|
+
* The props type for {@link !components.TableHeader} when sorted === never.
|
|
1827
|
+
*
|
|
1828
|
+
* @category Component Props
|
|
1696
1829
|
*/
|
|
1697
|
-
export interface
|
|
1698
|
-
|
|
1699
|
-
extensibleCardId: number;
|
|
1700
|
-
serverlessFunction: string;
|
|
1701
|
-
location: keyof ExtensionPoints;
|
|
1702
|
-
objectQuery?: {
|
|
1703
|
-
objectId: number;
|
|
1704
|
-
objectTypeId: string;
|
|
1705
|
-
objectPropertyNames: string[];
|
|
1706
|
-
};
|
|
1707
|
-
parameters?: JsonValue;
|
|
1708
|
-
event?: {
|
|
1709
|
-
type: 'SERVERLESS_ACTION_HOOK';
|
|
1710
|
-
payload: JsonValue;
|
|
1711
|
-
};
|
|
1712
|
-
objectId?: number;
|
|
1713
|
-
objectTypeId?: string;
|
|
1830
|
+
export interface UnSortedTableHeaderProps extends BaseTableHeaderProps {
|
|
1831
|
+
sortDirection?: 'never';
|
|
1714
1832
|
}
|
|
1715
1833
|
/**
|
|
1716
|
-
* @
|
|
1834
|
+
* The props type for {@link !components.TableHeader} when sorted !== never.
|
|
1835
|
+
*
|
|
1836
|
+
* @category Component Props
|
|
1717
1837
|
*/
|
|
1718
|
-
export interface
|
|
1719
|
-
|
|
1720
|
-
|
|
1838
|
+
export interface SortedTableHeaderProps extends BaseTableHeaderProps {
|
|
1839
|
+
/**
|
|
1840
|
+
* Sets the current direction in which the column is sorted (if any). It's a visual indicator, it doesn't modify the data.
|
|
1841
|
+
*
|
|
1842
|
+
* @defaultValue `"none"`
|
|
1843
|
+
*/
|
|
1844
|
+
sortDirection: 'ascending' | 'descending' | 'none';
|
|
1845
|
+
/**
|
|
1846
|
+
* A callback function that is invoked when the header is clicked. It recieves the new `sortDirection` as an argument.
|
|
1847
|
+
* It's required when sort = `ascending`, `descending` or `none`.
|
|
1848
|
+
*
|
|
1849
|
+
* @event
|
|
1850
|
+
* @defaultValue `"none"`
|
|
1851
|
+
*/
|
|
1852
|
+
onSortChange: (value: NonNullable<SortedTableHeaderProps['sortDirection']>) => void;
|
|
1853
|
+
/**
|
|
1854
|
+
* If `true`, users cannot change the sort ordering. It has no effect if sort=`never` or `undefined`.
|
|
1855
|
+
*
|
|
1856
|
+
* @defaultValue `false`
|
|
1857
|
+
*/
|
|
1858
|
+
disabled?: boolean;
|
|
1721
1859
|
}
|
|
1722
1860
|
/**
|
|
1723
|
-
* @
|
|
1724
|
-
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
|
|
1728
|
-
|
|
1729
|
-
|
|
1730
|
-
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
|
|
1735
|
-
|
|
1736
|
-
|
|
1861
|
+
* The props type for {@link !components.TableHeader}.
|
|
1862
|
+
*
|
|
1863
|
+
* @category Component Props
|
|
1864
|
+
*/
|
|
1865
|
+
export type TableHeaderProps = SortedTableHeaderProps | UnSortedTableHeaderProps;
|
|
1866
|
+
interface BaseTableProps {
|
|
1867
|
+
/**
|
|
1868
|
+
* When set to false, the table will not have borders.
|
|
1869
|
+
*
|
|
1870
|
+
* @defaultValue `true`
|
|
1871
|
+
*/
|
|
1872
|
+
bordered?: boolean;
|
|
1873
|
+
/**
|
|
1874
|
+
* When set to `true`, the table will not have bottom margin.
|
|
1875
|
+
*
|
|
1876
|
+
* @defaultValue `false`
|
|
1877
|
+
*/
|
|
1878
|
+
flush?: boolean;
|
|
1879
|
+
/**
|
|
1880
|
+
* 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.
|
|
1881
|
+
*/
|
|
1882
|
+
children: ReactNode;
|
|
1737
1883
|
}
|
|
1738
|
-
/**
|
|
1739
|
-
|
|
1740
|
-
|
|
1741
|
-
|
|
1742
|
-
|
|
1743
|
-
|
|
1744
|
-
|
|
1745
|
-
|
|
1746
|
-
|
|
1747
|
-
|
|
1748
|
-
[key: string]: string;
|
|
1749
|
-
} | null;
|
|
1884
|
+
/**
|
|
1885
|
+
* @internal
|
|
1886
|
+
*/
|
|
1887
|
+
export interface TableNoPaginatedProps extends BaseTableProps {
|
|
1888
|
+
/**
|
|
1889
|
+
* When set to `true`, the table will include pagination navigation. Take a look at {@link !types.TablePaginatedProps} for pagination props.
|
|
1890
|
+
*
|
|
1891
|
+
* @defaultValue `false`
|
|
1892
|
+
*/
|
|
1893
|
+
paginated?: false;
|
|
1750
1894
|
}
|
|
1751
|
-
/**
|
|
1752
|
-
|
|
1753
|
-
|
|
1754
|
-
|
|
1895
|
+
/**
|
|
1896
|
+
* @internal
|
|
1897
|
+
*/
|
|
1898
|
+
export interface TablePaginatedProps extends BaseTableProps {
|
|
1899
|
+
/**
|
|
1900
|
+
* When set to `true`, the table will include pagination navigation. Take a look at {@link !types.TablePaginatedProps} for pagination props.
|
|
1901
|
+
*
|
|
1902
|
+
* @defaultValue `false`
|
|
1903
|
+
*/
|
|
1904
|
+
paginated: true;
|
|
1905
|
+
/**
|
|
1906
|
+
* The total number of pages available.
|
|
1907
|
+
*/
|
|
1908
|
+
pageCount: number;
|
|
1909
|
+
/**
|
|
1910
|
+
* When set to `false`, hides the text labels for the First/Prev/Next buttons. The button labels will still be accessible to screen readers.
|
|
1911
|
+
*
|
|
1912
|
+
* @defaultValue `true`
|
|
1913
|
+
*/
|
|
1914
|
+
showButtonLabels?: boolean;
|
|
1915
|
+
/**
|
|
1916
|
+
* When set to `true`, displays the **First/Last** page buttons.
|
|
1917
|
+
*
|
|
1918
|
+
* @defaultValue `false`
|
|
1919
|
+
*/
|
|
1920
|
+
showFirstLastButtons?: boolean;
|
|
1921
|
+
/**
|
|
1922
|
+
* Sets how many page buttons are displayed.
|
|
1923
|
+
*/
|
|
1924
|
+
maxVisiblePageButtons?: number;
|
|
1925
|
+
/**
|
|
1926
|
+
* Denotes the current page.
|
|
1927
|
+
*/
|
|
1928
|
+
page?: number;
|
|
1929
|
+
/**
|
|
1930
|
+
* A function that will be invoked when the pagination button is clicked. It receives the new page number as argument.
|
|
1931
|
+
*
|
|
1932
|
+
* @event
|
|
1933
|
+
*/
|
|
1934
|
+
onPageChange: (pageNumber: number) => void;
|
|
1755
1935
|
}
|
|
1756
|
-
/**
|
|
1757
|
-
|
|
1758
|
-
|
|
1759
|
-
|
|
1760
|
-
|
|
1761
|
-
|
|
1762
|
-
|
|
1763
|
-
|
|
1764
|
-
|
|
1936
|
+
/**
|
|
1937
|
+
* The props type for {@link !components.Table}.
|
|
1938
|
+
*
|
|
1939
|
+
* @category Component Props
|
|
1940
|
+
*/
|
|
1941
|
+
export type TableProps = TableNoPaginatedProps | TablePaginatedProps;
|
|
1942
|
+
export interface TabsProps {
|
|
1943
|
+
/**
|
|
1944
|
+
* Sets the content that will render inside the component.
|
|
1945
|
+
*/
|
|
1946
|
+
children?: ReactNode;
|
|
1947
|
+
/**
|
|
1948
|
+
* Callback when the selected tab changes.
|
|
1949
|
+
*/
|
|
1950
|
+
onSelectedChange?: ((selectedId: string) => void) | ((selectedId: number) => void) | ((selectedId: number | string) => void);
|
|
1951
|
+
/**
|
|
1952
|
+
* The initially selected tab ID.
|
|
1953
|
+
*/
|
|
1954
|
+
defaultSelected?: string | number;
|
|
1955
|
+
/**
|
|
1956
|
+
* The currently selected tab ID (controlled component).
|
|
1957
|
+
*/
|
|
1958
|
+
selected?: string | number;
|
|
1959
|
+
/**
|
|
1960
|
+
* Visual style variant of the tabs.
|
|
1961
|
+
* @defaultValue 'default'
|
|
1962
|
+
*/
|
|
1963
|
+
variant?: 'default' | 'enclosed';
|
|
1964
|
+
/**
|
|
1965
|
+
* Whether the tab should fill available space.
|
|
1966
|
+
*/
|
|
1967
|
+
fill?: boolean;
|
|
1765
1968
|
}
|
|
1766
|
-
|
|
1767
|
-
|
|
1768
|
-
|
|
1769
|
-
|
|
1770
|
-
|
|
1771
|
-
|
|
1969
|
+
export interface TabProps {
|
|
1970
|
+
/**
|
|
1971
|
+
* Whether the tab is disabled.
|
|
1972
|
+
*/
|
|
1973
|
+
disabled?: boolean;
|
|
1974
|
+
/**
|
|
1975
|
+
* Unique identifier for the tab.
|
|
1976
|
+
*/
|
|
1977
|
+
tabId?: string | number;
|
|
1978
|
+
/**
|
|
1979
|
+
* The title text of the tab.
|
|
1980
|
+
*/
|
|
1772
1981
|
title?: string;
|
|
1773
|
-
|
|
1774
|
-
|
|
1775
|
-
|
|
1776
|
-
|
|
1777
|
-
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
|
|
1783
|
-
|
|
1784
|
-
|
|
1785
|
-
|
|
1786
|
-
/** @ignore */
|
|
1787
|
-
export type CloseOverlayAction = (id: string) => void;
|
|
1788
|
-
/** @ignore */
|
|
1789
|
-
export interface CrmHostActions {
|
|
1790
|
-
addAlert: AddAlertAction;
|
|
1791
|
-
reloadPage: ReloadPageAction;
|
|
1792
|
-
fetchCrmObjectProperties: FetchCrmObjectPropertiesAction;
|
|
1793
|
-
openIframeModal: OpenIframeModalAction;
|
|
1794
|
-
refreshObjectProperties: refreshObjectPropertiesAction;
|
|
1795
|
-
onCrmPropertiesUpdate: onCrmPropertiesUpdateAction;
|
|
1796
|
-
}
|
|
1797
|
-
/** @ignore */
|
|
1798
|
-
export interface UiePlatformActions {
|
|
1799
|
-
copyTextToClipboard: Clipboard['writeText'];
|
|
1800
|
-
closeOverlay: CloseOverlayAction;
|
|
1801
|
-
reloadPage: ReloadPageAction;
|
|
1982
|
+
/**
|
|
1983
|
+
* The content to display when this tab is selected.
|
|
1984
|
+
*/
|
|
1985
|
+
children?: ReactNode;
|
|
1986
|
+
/**
|
|
1987
|
+
* The tooltip text of the tab.
|
|
1988
|
+
*/
|
|
1989
|
+
tooltip?: string;
|
|
1990
|
+
/**
|
|
1991
|
+
* The tab's tooltip placement
|
|
1992
|
+
* @defaultValue 'top'
|
|
1993
|
+
*/
|
|
1994
|
+
tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
|
|
1802
1995
|
}
|
|
1803
|
-
/**
|
|
1804
|
-
|
|
1805
|
-
|
|
1806
|
-
|
|
1807
|
-
|
|
1808
|
-
|
|
1809
|
-
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
|
|
1818
|
-
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
|
|
1996
|
+
/**
|
|
1997
|
+
* The props type for {@link !components.Tag}.
|
|
1998
|
+
*
|
|
1999
|
+
* @category Component Props
|
|
2000
|
+
*/
|
|
2001
|
+
export interface TagProps extends OverlayComponentProps {
|
|
2002
|
+
/**
|
|
2003
|
+
* Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
|
|
2004
|
+
*/
|
|
2005
|
+
children: ReactNode;
|
|
2006
|
+
/**
|
|
2007
|
+
* The tag's color. The following variants are available.
|
|
2008
|
+
*
|
|
2009
|
+
* @defaultValue `"default"`
|
|
2010
|
+
*/
|
|
2011
|
+
variant?: 'default' | 'warning' | 'success' | 'error' | 'info';
|
|
2012
|
+
/**
|
|
2013
|
+
* A function that will be invoked when the tag is clicked.
|
|
2014
|
+
*
|
|
2015
|
+
* @event
|
|
2016
|
+
*/
|
|
2017
|
+
onClick?: ReactionsHandler<ExtensionEvent>;
|
|
2018
|
+
/**
|
|
2019
|
+
* When set to true, this component can be aligned side-by-side with text.
|
|
2020
|
+
*
|
|
2021
|
+
* @defaultValue `false`
|
|
2022
|
+
*/
|
|
2023
|
+
inline?: boolean;
|
|
1823
2024
|
}
|
|
1824
|
-
/**
|
|
1825
|
-
|
|
1826
|
-
|
|
1827
|
-
|
|
1828
|
-
|
|
1829
|
-
|
|
1830
|
-
|
|
1831
|
-
|
|
1832
|
-
|
|
1833
|
-
|
|
1834
|
-
|
|
1835
|
-
|
|
1836
|
-
|
|
1837
|
-
|
|
1838
|
-
|
|
1839
|
-
|
|
1840
|
-
|
|
1841
|
-
|
|
1842
|
-
|
|
1843
|
-
|
|
1844
|
-
|
|
1845
|
-
|
|
1846
|
-
|
|
1847
|
-
actions: CrmHostActions & UiePlatformActions;
|
|
1848
|
-
context: CrmContext;
|
|
1849
|
-
customComponents: {
|
|
1850
|
-
CrmActionButton?: ComponentType<CrmActionButtonProps>;
|
|
1851
|
-
CrmActionLink?: ComponentType<CrmActionLinkProps>;
|
|
1852
|
-
};
|
|
1853
|
-
}
|
|
1854
|
-
/** @ignore */
|
|
1855
|
-
export interface SettingsExtensionPoint extends ExtensionPointContract {
|
|
1856
|
-
actions: UiePlatformActions;
|
|
1857
|
-
context: SettingsContext;
|
|
1858
|
-
}
|
|
1859
|
-
/** @ignore */
|
|
1860
|
-
export interface CrmDataHighlightProps {
|
|
1861
|
-
properties: Array<string>;
|
|
1862
|
-
objectTypeId?: string;
|
|
1863
|
-
objectId?: number;
|
|
1864
|
-
}
|
|
1865
|
-
/** @ignore */
|
|
1866
|
-
export interface CrmReportProps {
|
|
1867
|
-
reportId: string;
|
|
1868
|
-
use?: 'associations' | 'subject' | 'unfiltered';
|
|
1869
|
-
}
|
|
1870
|
-
/** @ignore */
|
|
1871
|
-
export interface CrmPropertyListProps {
|
|
1872
|
-
properties: Array<string>;
|
|
1873
|
-
direction?: string;
|
|
1874
|
-
objectTypeId?: string;
|
|
1875
|
-
objectId?: number;
|
|
1876
|
-
}
|
|
1877
|
-
/** @ignore */
|
|
1878
|
-
type CrmSortDescriptor = {
|
|
1879
|
-
columnName: string;
|
|
1880
|
-
direction: 1 | -1;
|
|
1881
|
-
};
|
|
1882
|
-
/** @ignore */
|
|
1883
|
-
interface CrmSearchFilter {
|
|
1884
|
-
operator: 'EQ' | 'NEQ' | 'LT' | 'LTE' | 'GT' | 'GTE' | 'BETWEEN' | 'IN' | 'NOT_IN' | 'HAS_PROPERTY' | 'NOT_HAS_PROPERTY';
|
|
1885
|
-
value?: string | number;
|
|
1886
|
-
values?: string | number;
|
|
1887
|
-
highValue?: string | number;
|
|
1888
|
-
property: string;
|
|
1889
|
-
}
|
|
1890
|
-
/** @ignore */
|
|
1891
|
-
export interface CrmAssociationTableProps {
|
|
1892
|
-
objectTypeId: string;
|
|
1893
|
-
propertyColumns: Array<string>;
|
|
1894
|
-
quickFilterProperties?: Array<string>;
|
|
1895
|
-
searchable?: boolean;
|
|
1896
|
-
pagination?: boolean;
|
|
1897
|
-
associationLabelFilter?: boolean;
|
|
1898
|
-
pageSize?: number;
|
|
1899
|
-
preFilters?: Array<CrmSearchFilter>;
|
|
1900
|
-
sort?: Array<CrmSortDescriptor>;
|
|
1901
|
-
}
|
|
1902
|
-
/** @ignore */
|
|
1903
|
-
export interface CrmAssociationPivotProps {
|
|
1904
|
-
objectTypeId: string;
|
|
1905
|
-
associationLabels?: Array<string>;
|
|
1906
|
-
maxAssociations?: number;
|
|
1907
|
-
preFilters?: Array<CrmSearchFilter>;
|
|
1908
|
-
sort?: Array<CrmSortDescriptor>;
|
|
1909
|
-
}
|
|
1910
|
-
/** @ignore */
|
|
1911
|
-
export interface CrmAssociationPropertyListProps {
|
|
1912
|
-
objectTypeId: string;
|
|
1913
|
-
properties: Array<string>;
|
|
1914
|
-
associationLabels?: Array<string>;
|
|
1915
|
-
filters?: Array<CrmSearchFilter>;
|
|
1916
|
-
sort?: Array<CrmSortDescriptor>;
|
|
1917
|
-
}
|
|
1918
|
-
/** @ignore */
|
|
1919
|
-
export interface CrmAssociationStageTrackerProps {
|
|
1920
|
-
objectTypeId: string;
|
|
1921
|
-
properties: Array<string>;
|
|
1922
|
-
associationLabels?: Array<string>;
|
|
1923
|
-
filters?: Array<CrmSearchFilter>;
|
|
1924
|
-
showProperties?: boolean;
|
|
1925
|
-
sort?: Array<CrmSortDescriptor>;
|
|
1926
|
-
}
|
|
1927
|
-
/** @ignore */
|
|
1928
|
-
export interface CrmSimpleDeadlineProps {
|
|
1929
|
-
endDatePropertyName: string;
|
|
1930
|
-
properties: Array<string>;
|
|
1931
|
-
progressTheme?: ProgressTheme;
|
|
1932
|
-
showProperties?: boolean;
|
|
1933
|
-
startDatePropertyName: string;
|
|
1934
|
-
}
|
|
1935
|
-
/** @ignore */
|
|
1936
|
-
export interface CrmRelativeTimelineProps {
|
|
1937
|
-
properties: Array<string>;
|
|
1938
|
-
}
|
|
1939
|
-
/** @ignore */
|
|
1940
|
-
export interface CrmStageTrackerProps {
|
|
1941
|
-
objectId?: number;
|
|
1942
|
-
objectTypeId?: string;
|
|
1943
|
-
properties: Array<string>;
|
|
1944
|
-
showProperties?: boolean;
|
|
1945
|
-
}
|
|
1946
|
-
/** @ignore */
|
|
1947
|
-
interface BaseCrmStatisticItem {
|
|
1948
|
-
label: string;
|
|
1949
|
-
}
|
|
1950
|
-
/** @ignore */
|
|
1951
|
-
interface FilterGroup {
|
|
1952
|
-
filters: Array<CrmSearchFilter>;
|
|
1953
|
-
}
|
|
1954
|
-
/** @ignore */
|
|
1955
|
-
interface ProgressTheme {
|
|
1956
|
-
backgroundColor?: string;
|
|
1957
|
-
completedColor?: string;
|
|
1958
|
-
upcomingColor?: string;
|
|
1959
|
-
borderRadius?: string | number;
|
|
1960
|
-
height?: string | number;
|
|
1961
|
-
completedGradient?: Gradient;
|
|
1962
|
-
upcomingGradient?: Gradient;
|
|
1963
|
-
}
|
|
1964
|
-
/** @ignore */
|
|
1965
|
-
interface Gradient {
|
|
1966
|
-
startColor: string;
|
|
1967
|
-
endColor: string;
|
|
1968
|
-
}
|
|
1969
|
-
/** @ignore */
|
|
1970
|
-
interface BasicMetricItem extends BaseCrmStatisticItem {
|
|
1971
|
-
statisticType: 'SUM' | 'AVG' | 'MIN' | 'MAX' | 'DISTINCT_APPROX' | 'COUNT';
|
|
1972
|
-
propertyName: string;
|
|
1973
|
-
filterGroups?: Array<FilterGroup>;
|
|
1974
|
-
}
|
|
1975
|
-
/** @ignore */
|
|
1976
|
-
interface PercentileMetricItem extends BaseCrmStatisticItem {
|
|
1977
|
-
statisticType: 'PERCENTILES';
|
|
1978
|
-
propertyName: string;
|
|
1979
|
-
percentile: number;
|
|
1980
|
-
filterGroups?: Array<FilterGroup>;
|
|
1981
|
-
}
|
|
1982
|
-
/** @ignore */
|
|
1983
|
-
type CrmStatisticItem = BasicMetricItem | PercentileMetricItem;
|
|
1984
|
-
/** @ignore */
|
|
1985
|
-
export interface CrmStatisticsProps {
|
|
1986
|
-
objectTypeId: string;
|
|
1987
|
-
statistics: Array<CrmStatisticItem>;
|
|
1988
|
-
}
|
|
1989
|
-
/** @ignore */
|
|
1990
|
-
interface ObjectCoordinates {
|
|
1991
|
-
objectTypeId: string;
|
|
1992
|
-
objectId: number;
|
|
1993
|
-
}
|
|
1994
|
-
/** @ignore */
|
|
1995
|
-
interface OpenRecordAssociationFormArgs {
|
|
1996
|
-
objectTypeId: string;
|
|
1997
|
-
association: {
|
|
1998
|
-
objectTypeId: string;
|
|
1999
|
-
objectId: number;
|
|
2000
|
-
};
|
|
2001
|
-
}
|
|
2002
|
-
/** @ignore */
|
|
2003
|
-
interface ActivityCreatorActionArgs {
|
|
2004
|
-
objectTypeId: string;
|
|
2005
|
-
objectId: number;
|
|
2006
|
-
windowVariant?: 'windowed' | 'fullscreen';
|
|
2007
|
-
}
|
|
2008
|
-
/** @ignore */
|
|
2009
|
-
interface EngagementAppLinkArgs {
|
|
2010
|
-
objectId: number | string;
|
|
2011
|
-
objectTypeId: string;
|
|
2012
|
-
engagementId: number | string;
|
|
2013
|
-
external?: boolean;
|
|
2014
|
-
}
|
|
2015
|
-
/** @ignore */
|
|
2016
|
-
interface RecordAppLinkArgs {
|
|
2017
|
-
includeEschref?: boolean;
|
|
2018
|
-
objectId: number;
|
|
2019
|
-
objectTypeId: string;
|
|
2020
|
-
external?: boolean;
|
|
2021
|
-
}
|
|
2022
|
-
/** @ignore */
|
|
2023
|
-
interface PageAppLinkArgs {
|
|
2024
|
-
path: string;
|
|
2025
|
-
external?: boolean;
|
|
2026
|
-
}
|
|
2027
|
-
/** @ignore */
|
|
2028
|
-
interface ExternalUrlArgs {
|
|
2029
|
-
href: string;
|
|
2030
|
-
}
|
|
2031
|
-
interface OpenRecordCreatorFormArgs {
|
|
2032
|
-
objectTypeId: string;
|
|
2033
|
-
}
|
|
2034
|
-
/** @ignore */
|
|
2035
|
-
interface ActionArgs {
|
|
2036
|
-
PREVIEW_OBJECT: ObjectCoordinates;
|
|
2037
|
-
ADD_NOTE: ActivityCreatorActionArgs;
|
|
2038
|
-
ADD_TASK: ActivityCreatorActionArgs;
|
|
2039
|
-
SEND_EMAIL: ActivityCreatorActionArgs;
|
|
2040
|
-
SCHEDULE_MEETING: ActivityCreatorActionArgs;
|
|
2041
|
-
OPEN_RECORD_CREATOR_FORM: OpenRecordCreatorFormArgs;
|
|
2042
|
-
OPEN_RECORD_ASSOCIATION_FORM: OpenRecordAssociationFormArgs;
|
|
2043
|
-
ENGAGEMENT_APP_LINK: EngagementAppLinkArgs;
|
|
2044
|
-
RECORD_APP_LINK: RecordAppLinkArgs;
|
|
2045
|
-
PAGE_APP_LINK: PageAppLinkArgs;
|
|
2046
|
-
EXTERNAL_URL: ExternalUrlArgs;
|
|
2047
|
-
OPEN_WORKFLOW_ENROLLMENT_MODAL: ObjectCoordinates;
|
|
2048
|
-
}
|
|
2049
|
-
/** @ignore */
|
|
2050
|
-
export type ArgsFor<SpecificActionType extends ActionType> = ActionArgs[SpecificActionType];
|
|
2051
|
-
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';
|
|
2052
|
-
/** @ignore */
|
|
2053
|
-
interface BaseActionComponent {
|
|
2054
|
-
children: ReactNode;
|
|
2055
|
-
actionType: ActionType;
|
|
2056
|
-
actionContext: ArgsFor<ActionType>;
|
|
2057
|
-
onError?: (errors: string[]) => void;
|
|
2058
|
-
}
|
|
2059
|
-
/** @ignore */
|
|
2060
|
-
export interface CrmActionButtonProps extends BaseActionComponent {
|
|
2061
|
-
variant?: 'primary' | 'secondary' | 'destructive';
|
|
2062
|
-
type?: 'button' | 'reset' | 'submit';
|
|
2063
|
-
size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
|
|
2064
|
-
onClick?: () => void;
|
|
2065
|
-
}
|
|
2066
|
-
/** @ignore */
|
|
2067
|
-
export interface CrmActionLinkProps extends BaseActionComponent {
|
|
2068
|
-
variant?: 'primary' | 'light' | 'dark' | 'destructive';
|
|
2069
|
-
}
|
|
2070
|
-
/** @ignore */
|
|
2071
|
-
export interface ActionLibraryButtonCardActionConfig<SpecificActionType extends ActionType = ActionType> {
|
|
2072
|
-
type: 'action-library-button';
|
|
2073
|
-
actionType: SpecificActionType;
|
|
2074
|
-
actionContext: ArgsFor<SpecificActionType>;
|
|
2075
|
-
label?: string;
|
|
2076
|
-
disabled?: boolean;
|
|
2077
|
-
tooltipText?: string;
|
|
2025
|
+
/**
|
|
2026
|
+
* @internal
|
|
2027
|
+
* Format options for text component.
|
|
2028
|
+
*/
|
|
2029
|
+
export interface TextFormatOptions {
|
|
2030
|
+
/**
|
|
2031
|
+
* Weight of the font.
|
|
2032
|
+
*
|
|
2033
|
+
* @defaultValue `"regular"`
|
|
2034
|
+
*/
|
|
2035
|
+
fontWeight?: 'regular' | 'bold' | 'demibold';
|
|
2036
|
+
/**
|
|
2037
|
+
* If `true`, font will be in italicized.
|
|
2038
|
+
*
|
|
2039
|
+
* @defaultValue `false`
|
|
2040
|
+
*/
|
|
2041
|
+
italic?: boolean;
|
|
2042
|
+
/**
|
|
2043
|
+
* Line decoration of the font.
|
|
2044
|
+
*
|
|
2045
|
+
* @defaultValue `"none"`
|
|
2046
|
+
*/
|
|
2047
|
+
lineDecoration?: 'none' | 'underline' | 'strikethrough';
|
|
2078
2048
|
}
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
ActionLibraryButtonCardActionConfig,
|
|
2082
|
-
...ActionLibraryButtonCardActionConfig[]
|
|
2083
|
-
];
|
|
2084
|
-
/** @ignore */
|
|
2085
|
-
export interface DropdownCardActionConfig {
|
|
2086
|
-
type: 'dropdown';
|
|
2087
|
-
options: DropdownCardActionConfigOptions;
|
|
2088
|
-
label?: string;
|
|
2089
|
-
disabled?: boolean;
|
|
2049
|
+
export interface TruncateOptions {
|
|
2050
|
+
maxWidth?: number;
|
|
2090
2051
|
tooltipText?: string;
|
|
2091
2052
|
}
|
|
2092
|
-
/** @ignore */
|
|
2093
|
-
type ErrorHandler = (errors: string[]) => void;
|
|
2094
|
-
/** @ignore */
|
|
2095
|
-
type CardActionConfig = ActionLibraryButtonCardActionConfig | DropdownCardActionConfig;
|
|
2096
|
-
/** @ignore */
|
|
2097
|
-
export type CrmCardActionsProps = {
|
|
2098
|
-
actionConfigs: Array<CardActionConfig>;
|
|
2099
|
-
onError?: ErrorHandler;
|
|
2100
|
-
};
|
|
2101
|
-
/** @ignore */
|
|
2102
|
-
interface RemotePlaygroundExtensionPoint extends ExtensionPointContract {
|
|
2103
|
-
actions: {
|
|
2104
|
-
warn: () => void;
|
|
2105
|
-
};
|
|
2106
|
-
context: GenericContext;
|
|
2107
|
-
customComponents: {
|
|
2108
|
-
ExampleCrmComponent: ComponentType<ExampleCrmComponentProps>;
|
|
2109
|
-
};
|
|
2110
|
-
}
|
|
2111
|
-
export declare const EXTENSION_POINT_LOCATIONS: readonly ["crm.preview", "crm.record.sidebar", "crm.record.tab", "helpdesk.sidebar", "uie.playground.middle", "settings"];
|
|
2112
|
-
export type ExtensionPointLocation = TypesOfReadOnlyArray<typeof EXTENSION_POINT_LOCATIONS>;
|
|
2113
|
-
/** @ignore */
|
|
2114
|
-
interface LocationToExtensionPoint {
|
|
2115
|
-
'uie.playground.middle': RemotePlaygroundExtensionPoint;
|
|
2116
|
-
'crm.record.tab': StandardCrmExtensionPoint;
|
|
2117
|
-
'crm.preview': StandardCrmExtensionPoint;
|
|
2118
|
-
'crm.record.sidebar': CrmSidebarExtensionPoint;
|
|
2119
|
-
'helpdesk.sidebar': StandardCrmExtensionPoint;
|
|
2120
|
-
settings: SettingsExtensionPoint;
|
|
2121
|
-
}
|
|
2122
2053
|
/**
|
|
2123
|
-
*
|
|
2124
|
-
*
|
|
2125
|
-
*
|
|
2054
|
+
* The props type for {@link !components.Text}.
|
|
2055
|
+
*
|
|
2056
|
+
* @interface
|
|
2057
|
+
* @category Component Props
|
|
2126
2058
|
*/
|
|
2127
|
-
type
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
/**
|
|
2138
|
-
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
|
|
2142
|
-
|
|
2143
|
-
|
|
2144
|
-
|
|
2145
|
-
|
|
2146
|
-
|
|
2147
|
-
|
|
2148
|
-
|
|
2149
|
-
|
|
2150
|
-
|
|
2151
|
-
|
|
2152
|
-
|
|
2153
|
-
}
|
|
2154
|
-
|
|
2155
|
-
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
|
|
2159
|
-
/**
|
|
2160
|
-
|
|
2161
|
-
|
|
2162
|
-
|
|
2163
|
-
|
|
2059
|
+
export type TextProps = {
|
|
2060
|
+
/**
|
|
2061
|
+
* The style of text to display. Can be either of:
|
|
2062
|
+
*
|
|
2063
|
+
* - bodytext: the default value which renders the standard text size.
|
|
2064
|
+
* - microcopy: smaller text used for adding context.
|
|
2065
|
+
*
|
|
2066
|
+
* @defaultValue `"bodytext"`
|
|
2067
|
+
*/
|
|
2068
|
+
variant?: 'bodytext' | 'microcopy';
|
|
2069
|
+
/**
|
|
2070
|
+
* When set to `true`, inserts a line break.
|
|
2071
|
+
*
|
|
2072
|
+
* @defaultValue `false`
|
|
2073
|
+
*/
|
|
2074
|
+
inline?: boolean;
|
|
2075
|
+
/**
|
|
2076
|
+
* Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
|
|
2077
|
+
*/
|
|
2078
|
+
children: ReactNode;
|
|
2079
|
+
/**
|
|
2080
|
+
* @interface
|
|
2081
|
+
* The style of text to display. Can be any of:
|
|
2082
|
+
*
|
|
2083
|
+
* - { fontWeight: 'bold' }
|
|
2084
|
+
* - { fontWeight: 'demibold' }
|
|
2085
|
+
* - { italic: true }
|
|
2086
|
+
* - { lineDecoration: 'strikethrough' }
|
|
2087
|
+
* - { lineDecoration: 'underline' }
|
|
2088
|
+
* - <Text inline={true}>
|
|
2089
|
+
*/
|
|
2090
|
+
format?: TextFormatOptions;
|
|
2091
|
+
/**
|
|
2092
|
+
* @interface
|
|
2093
|
+
* truncates long strings to a single line. If the full string doesn't fit in one line,
|
|
2094
|
+
* it's shown in a tooltip on hover.
|
|
2095
|
+
*
|
|
2096
|
+
* - `false` => no truncation(default).
|
|
2097
|
+
* - `true` => truncates the string to a single line. Full-text will show inside the tooltip.
|
|
2098
|
+
* - { tooltipText: 'some text' } => truncates the string and lets you control the contents of the tooltip.
|
|
2099
|
+
* - { maxWidth: 150 } => sets the width(in pixel) of the line.
|
|
2100
|
+
*
|
|
2101
|
+
* @defaultValue `false`
|
|
2102
|
+
*/
|
|
2103
|
+
truncate?: boolean | TruncateOptions;
|
|
2104
|
+
};
|
|
2164
2105
|
/**
|
|
2165
|
-
* The props type for {@link !components.
|
|
2106
|
+
* The props type for {@link !components.Tile}.
|
|
2166
2107
|
*
|
|
2167
2108
|
* @category Component Props
|
|
2168
2109
|
*/
|
|
2169
|
-
export interface
|
|
2110
|
+
export interface TileProps {
|
|
2170
2111
|
/**
|
|
2171
|
-
*
|
|
2172
|
-
*
|
|
2112
|
+
* Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
|
|
2173
2113
|
*/
|
|
2174
|
-
|
|
2114
|
+
children: ReactNode;
|
|
2175
2115
|
/**
|
|
2176
|
-
* When set to `true`, the
|
|
2116
|
+
* When set to `true`, reduces the default amount of padding around the contents of the Tile.
|
|
2177
2117
|
*
|
|
2178
2118
|
* @defaultValue `false`
|
|
2179
2119
|
*/
|
|
2180
|
-
|
|
2181
|
-
/**
|
|
2182
|
-
* The size of the spinner.
|
|
2183
|
-
*
|
|
2184
|
-
* @defaultValue `"sm"`
|
|
2185
|
-
*/
|
|
2186
|
-
size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
|
|
2120
|
+
compact?: boolean;
|
|
2187
2121
|
/**
|
|
2188
|
-
*
|
|
2122
|
+
* When set to `true`, removes left and right padding from tile contents.
|
|
2189
2123
|
*
|
|
2190
|
-
* @defaultValue `
|
|
2124
|
+
* @defaultValue `false`
|
|
2191
2125
|
*/
|
|
2192
|
-
|
|
2193
|
-
}
|
|
2194
|
-
export interface AlignmentProps {
|
|
2195
|
-
align?: 'left' | 'center' | 'right';
|
|
2196
|
-
}
|
|
2197
|
-
export interface WidthProps {
|
|
2198
|
-
width?: 'min' | 'max' | 'auto' | number;
|
|
2199
|
-
}
|
|
2200
|
-
export interface TableElementProps {
|
|
2201
|
-
children: React.ReactNode;
|
|
2202
|
-
}
|
|
2203
|
-
/**
|
|
2204
|
-
* @property align Sets the alignment of a table header.
|
|
2205
|
-
* @property width Sets the width of a table header.
|
|
2206
|
-
*
|
|
2207
|
-
* @interface
|
|
2208
|
-
*/
|
|
2209
|
-
export type BaseTableHeaderProps = TableElementProps & AlignmentProps & WidthProps;
|
|
2210
|
-
export type TableCellProps = TableElementProps & AlignmentProps & WidthProps;
|
|
2211
|
-
/**
|
|
2212
|
-
* The props type for {@link !components.TableHeader} when sorted === never.
|
|
2213
|
-
*
|
|
2214
|
-
* @category Component Props
|
|
2215
|
-
*/
|
|
2216
|
-
export interface UnSortedTableHeaderProps extends BaseTableHeaderProps {
|
|
2217
|
-
sortDirection?: 'never';
|
|
2126
|
+
flush?: boolean;
|
|
2218
2127
|
}
|
|
2219
2128
|
/**
|
|
2220
|
-
* The props type for {@link !components.
|
|
2129
|
+
* The props type for {@link !components.Toggle}.
|
|
2221
2130
|
*
|
|
2222
2131
|
* @category Component Props
|
|
2223
2132
|
*/
|
|
2224
|
-
export interface
|
|
2133
|
+
export interface ToggleProps {
|
|
2225
2134
|
/**
|
|
2226
|
-
*
|
|
2135
|
+
* The current status of the input.
|
|
2136
|
+
*/
|
|
2137
|
+
checked?: boolean;
|
|
2138
|
+
/**
|
|
2139
|
+
* When set to `true`, the option cannot be selected.
|
|
2140
|
+
*/
|
|
2141
|
+
readonly?: boolean;
|
|
2142
|
+
/**
|
|
2143
|
+
* The unique identifier for the toggle element.
|
|
2144
|
+
*/
|
|
2145
|
+
name?: string;
|
|
2146
|
+
/**
|
|
2147
|
+
* The size variation of the toggle.
|
|
2227
2148
|
*
|
|
2228
|
-
* @defaultValue `"
|
|
2149
|
+
* @defaultValue `"medium"`
|
|
2229
2150
|
*/
|
|
2230
|
-
|
|
2151
|
+
size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'] | 'default';
|
|
2231
2152
|
/**
|
|
2232
|
-
* A
|
|
2233
|
-
* It's required when sort = `ascending`, `descending` or `none`.
|
|
2153
|
+
* A function that is called when the `checked` input status changes.
|
|
2234
2154
|
*
|
|
2235
2155
|
* @event
|
|
2236
|
-
* @defaultValue `"none"`
|
|
2237
2156
|
*/
|
|
2238
|
-
|
|
2157
|
+
onChange?: (checked: boolean) => void;
|
|
2239
2158
|
/**
|
|
2240
|
-
*
|
|
2159
|
+
* When set to `true`, the option will be selected by default. Use it to
|
|
2160
|
+
* set the default `checked` state when the component is **uncontrolled**.
|
|
2161
|
+
*/
|
|
2162
|
+
initialIsChecked?: boolean;
|
|
2163
|
+
/**
|
|
2164
|
+
* The companion text of for Toggle. It can be displayed on top,
|
|
2165
|
+
* inline, or hidden. When hidden, it will remain usable for screen readers.
|
|
2166
|
+
*/
|
|
2167
|
+
label: string;
|
|
2168
|
+
/**
|
|
2169
|
+
* Controls the display setting of the label prop.
|
|
2241
2170
|
*
|
|
2242
|
-
*
|
|
2171
|
+
* @defaultValue `"inline"`
|
|
2243
2172
|
*/
|
|
2244
|
-
|
|
2173
|
+
labelDisplay?: 'inline' | 'top' | 'hidden';
|
|
2174
|
+
/**
|
|
2175
|
+
* The text that appears on the Toggle when `checked={true}`.
|
|
2176
|
+
*
|
|
2177
|
+
* @defaultValue `"ON"`
|
|
2178
|
+
*/
|
|
2179
|
+
textChecked?: string;
|
|
2180
|
+
/**
|
|
2181
|
+
* The text that appears on the Toggle when `checked={false}`.
|
|
2182
|
+
*
|
|
2183
|
+
* @defaultValue `"ON"`
|
|
2184
|
+
*/
|
|
2185
|
+
textUnchecked?: string;
|
|
2245
2186
|
}
|
|
2246
2187
|
/**
|
|
2247
|
-
* The props type for {@link !components.
|
|
2188
|
+
* The props type for {@link !components.Checkbox}.
|
|
2248
2189
|
*
|
|
2249
2190
|
* @category Component Props
|
|
2250
2191
|
*/
|
|
2251
|
-
export
|
|
2252
|
-
interface BaseTableProps {
|
|
2192
|
+
export interface CheckboxProps {
|
|
2253
2193
|
/**
|
|
2254
|
-
*
|
|
2194
|
+
* A string representing the value of the input. This is not displayed on the client-side,
|
|
2195
|
+
* but on the server this is the value given to the data submitted with the checkbox's name.
|
|
2196
|
+
*/
|
|
2197
|
+
value?: string;
|
|
2198
|
+
/**
|
|
2199
|
+
* The current status of the input.
|
|
2200
|
+
*/
|
|
2201
|
+
checked?: boolean;
|
|
2202
|
+
/** @deprecated use readOnly instead */
|
|
2203
|
+
readonly?: boolean;
|
|
2204
|
+
/**
|
|
2205
|
+
* When set to `true`, the option cannot be selected.
|
|
2206
|
+
*/
|
|
2207
|
+
readOnly?: boolean;
|
|
2208
|
+
/**
|
|
2209
|
+
* The string that displays below the toggle.
|
|
2210
|
+
*/
|
|
2211
|
+
description?: string;
|
|
2212
|
+
/**
|
|
2213
|
+
* The unique identifier for the checkbox element.
|
|
2214
|
+
*/
|
|
2215
|
+
name?: string;
|
|
2216
|
+
/**
|
|
2217
|
+
* The size variation of the checkbox.
|
|
2255
2218
|
*
|
|
2256
|
-
* @defaultValue `
|
|
2219
|
+
* @defaultValue `"default"`
|
|
2257
2220
|
*/
|
|
2258
|
-
|
|
2221
|
+
variant?: 'default' | 'small';
|
|
2259
2222
|
/**
|
|
2260
|
-
*
|
|
2223
|
+
* A function that is called when the `checked` input status changes.
|
|
2261
2224
|
*
|
|
2262
|
-
* @
|
|
2225
|
+
* @event
|
|
2263
2226
|
*/
|
|
2264
|
-
|
|
2227
|
+
onChange?: (checked: boolean, value: string) => void;
|
|
2228
|
+
/** The text that displays in the dropdown menu. */
|
|
2229
|
+
children?: React.ReactNode;
|
|
2265
2230
|
/**
|
|
2266
|
-
*
|
|
2231
|
+
* Use the inline prop to arrange checkboxes side-by-side.
|
|
2267
2232
|
*/
|
|
2268
|
-
|
|
2269
|
-
}
|
|
2270
|
-
/**
|
|
2271
|
-
* @internal
|
|
2272
|
-
*/
|
|
2273
|
-
export interface TableNoPaginatedProps extends BaseTableProps {
|
|
2233
|
+
inline?: boolean;
|
|
2274
2234
|
/**
|
|
2275
|
-
* When set to `true`, the
|
|
2276
|
-
*
|
|
2277
|
-
* @defaultValue `false`
|
|
2235
|
+
* When set to `true`, the option will be selected by default. Use it to
|
|
2236
|
+
* set the default `checked` state when the component is **uncontrolled**.
|
|
2278
2237
|
*/
|
|
2279
|
-
|
|
2238
|
+
initialIsChecked?: boolean;
|
|
2239
|
+
/**
|
|
2240
|
+
* Accessibility label. It should be present when the checkbox has no label(children).
|
|
2241
|
+
*/
|
|
2242
|
+
'aria-label'?: string;
|
|
2280
2243
|
}
|
|
2281
2244
|
/**
|
|
2282
|
-
* @
|
|
2245
|
+
* The props type for {@link !components.RadioButton}.
|
|
2246
|
+
* @category Component Props
|
|
2247
|
+
* @interface
|
|
2283
2248
|
*/
|
|
2284
|
-
export
|
|
2249
|
+
export type RadioButtonProps = Omit<CheckboxProps, 'aria-label'>;
|
|
2250
|
+
export type ToggleGroupOption = {
|
|
2251
|
+
/** The text that displays in the dropdown menu. */
|
|
2252
|
+
label: string;
|
|
2253
|
+
/** The unique value that is submitted with the form. */
|
|
2254
|
+
value: string;
|
|
2255
|
+
/** When set to `true`, the option will be selected by default. */
|
|
2256
|
+
initialIsChecked?: boolean;
|
|
2257
|
+
/** When set to `true`, the option cannot be selected. */
|
|
2258
|
+
readonly?: boolean;
|
|
2259
|
+
/** The string that displays below the toggle. */
|
|
2260
|
+
description?: string;
|
|
2261
|
+
};
|
|
2262
|
+
interface ToggleGroupListBaseProps {
|
|
2263
|
+
name: ToggleGroupProps['name'];
|
|
2264
|
+
options: ToggleGroupProps['options'];
|
|
2265
|
+
variant: ToggleGroupProps['variant'];
|
|
2266
|
+
inline?: boolean;
|
|
2267
|
+
}
|
|
2268
|
+
export interface CheckboxListProps extends ToggleGroupListBaseProps {
|
|
2269
|
+
value?: CheckboxGroupProps['value'];
|
|
2270
|
+
onChange?: CheckboxGroupProps['onChange'];
|
|
2271
|
+
}
|
|
2272
|
+
export interface RadioButtonListProps extends ToggleGroupListBaseProps {
|
|
2273
|
+
value?: RadioButtonGroupProps['value'];
|
|
2274
|
+
onChange?: RadioButtonGroupProps['onChange'];
|
|
2275
|
+
}
|
|
2276
|
+
type ToggleType = 'checkboxList' | 'radioButtonList';
|
|
2277
|
+
export interface CommonGroupProps {
|
|
2285
2278
|
/**
|
|
2286
|
-
*
|
|
2287
|
-
*
|
|
2288
|
-
* @defaultValue `false`
|
|
2279
|
+
* Denotes the type of list to render.
|
|
2289
2280
|
*/
|
|
2290
|
-
|
|
2281
|
+
toggleType?: ToggleType;
|
|
2291
2282
|
/**
|
|
2292
|
-
* The
|
|
2283
|
+
* The unique identifier for the toggle group element.
|
|
2293
2284
|
*/
|
|
2294
|
-
|
|
2285
|
+
name: string;
|
|
2295
2286
|
/**
|
|
2296
|
-
*
|
|
2287
|
+
* The label that displays above the toggle group.
|
|
2288
|
+
*/
|
|
2289
|
+
label: string;
|
|
2290
|
+
/**
|
|
2291
|
+
* The text to display if the input has an error.
|
|
2292
|
+
*/
|
|
2293
|
+
validationMessage?: string;
|
|
2294
|
+
/**
|
|
2295
|
+
* When set to `true`, displays a required indicator next to the toggle group.
|
|
2297
2296
|
*
|
|
2298
|
-
* @defaultValue `
|
|
2297
|
+
* @defaultValue `false`
|
|
2299
2298
|
*/
|
|
2300
|
-
|
|
2299
|
+
required?: boolean;
|
|
2301
2300
|
/**
|
|
2302
|
-
*
|
|
2301
|
+
* Text that will appear in a tooltip next to the toggle group label.
|
|
2302
|
+
*/
|
|
2303
|
+
tooltip?: string;
|
|
2304
|
+
/**
|
|
2305
|
+
* 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.
|
|
2303
2306
|
*
|
|
2304
2307
|
* @defaultValue `false`
|
|
2305
2308
|
*/
|
|
2306
|
-
|
|
2309
|
+
error?: boolean;
|
|
2307
2310
|
/**
|
|
2308
|
-
*
|
|
2311
|
+
* An array of options to display in the dropdown menu.
|
|
2312
|
+
*
|
|
2313
|
+
* @defaultValue `[]`
|
|
2309
2314
|
*/
|
|
2310
|
-
|
|
2315
|
+
options: Array<ToggleGroupOption>;
|
|
2311
2316
|
/**
|
|
2312
|
-
*
|
|
2317
|
+
* When set to `true`, stacks the options horizontally.
|
|
2318
|
+
*
|
|
2319
|
+
* @defaultValue `false`
|
|
2313
2320
|
*/
|
|
2314
|
-
|
|
2321
|
+
inline?: boolean;
|
|
2315
2322
|
/**
|
|
2316
|
-
*
|
|
2323
|
+
* The size variation of the individual options.
|
|
2317
2324
|
*
|
|
2318
|
-
* @
|
|
2325
|
+
* @defaultValue `"default"`
|
|
2319
2326
|
*/
|
|
2320
|
-
|
|
2321
|
-
|
|
2322
|
-
/**
|
|
2323
|
-
* The props type for {@link !components.Table}.
|
|
2324
|
-
*
|
|
2325
|
-
* @category Component Props
|
|
2326
|
-
*/
|
|
2327
|
-
export type TableProps = TableNoPaginatedProps | TablePaginatedProps;
|
|
2328
|
-
/** @deprecated use ExtensionEvent/FormSubmitExtensionEvent instead */
|
|
2329
|
-
export declare class RemoteEvent<V> {
|
|
2330
|
-
type: string;
|
|
2331
|
-
bubbles: boolean;
|
|
2332
|
-
timeStamp: number;
|
|
2333
|
-
targetValue: V;
|
|
2334
|
-
constructor(value: V, event: Event);
|
|
2327
|
+
variant?: 'default' | 'small';
|
|
2328
|
+
value?: string[] | string;
|
|
2335
2329
|
}
|
|
2336
|
-
|
|
2337
|
-
url: string;
|
|
2338
|
-
external?: boolean;
|
|
2339
|
-
};
|
|
2340
|
-
export type HrefProp = string | HrefOptions;
|
|
2341
|
-
/**
|
|
2342
|
-
* The props type for {@link !components.Link}.
|
|
2343
|
-
*
|
|
2344
|
-
* @category Component Props
|
|
2345
|
-
*/
|
|
2346
|
-
export interface LinkProps extends OverlayComponentProps {
|
|
2330
|
+
type CheckboxGroupProps = {
|
|
2347
2331
|
/**
|
|
2348
|
-
*
|
|
2332
|
+
* Denotes the type of list to render.
|
|
2349
2333
|
*
|
|
2334
|
+
* @defaultValue `"checkboxList"`
|
|
2350
2335
|
*/
|
|
2351
|
-
|
|
2336
|
+
toggleType: 'checkboxList';
|
|
2352
2337
|
/**
|
|
2353
|
-
*
|
|
2338
|
+
* A function that is called with the new value or values when the list is updated.
|
|
2354
2339
|
*
|
|
2340
|
+
* @event
|
|
2355
2341
|
*/
|
|
2356
|
-
|
|
2342
|
+
onChange?: (value: string[]) => void;
|
|
2357
2343
|
/**
|
|
2358
|
-
* The
|
|
2344
|
+
* The value of the toggle group.
|
|
2345
|
+
*/
|
|
2346
|
+
value?: string[];
|
|
2347
|
+
} & CommonGroupProps;
|
|
2348
|
+
type RadioButtonGroupProps = {
|
|
2349
|
+
/**
|
|
2350
|
+
* Denotes the type of list to render.
|
|
2359
2351
|
*
|
|
2360
|
-
* @defaultValue `"
|
|
2352
|
+
* @defaultValue `"checkboxList"`
|
|
2361
2353
|
*/
|
|
2362
|
-
|
|
2354
|
+
toggleType: 'radioButtonList';
|
|
2363
2355
|
/**
|
|
2364
|
-
* A function that
|
|
2356
|
+
* A function that is called with the new value or values when the list is updated.
|
|
2365
2357
|
*
|
|
2366
2358
|
* @event
|
|
2367
2359
|
*/
|
|
2368
|
-
|
|
2360
|
+
onChange?: (value: string) => void;
|
|
2369
2361
|
/**
|
|
2370
|
-
*
|
|
2371
|
-
*
|
|
2372
|
-
* @defaultValue `false`
|
|
2362
|
+
* The value of the toggle group.
|
|
2373
2363
|
*/
|
|
2374
|
-
|
|
2364
|
+
value?: string;
|
|
2365
|
+
} & CommonGroupProps;
|
|
2366
|
+
type DefaultToggleTypeProps = {
|
|
2367
|
+
toggleType?: never;
|
|
2368
|
+
} & CheckboxGroupProps;
|
|
2369
|
+
/**
|
|
2370
|
+
* The props type for {@link !components.ToggleGroup}.
|
|
2371
|
+
*
|
|
2372
|
+
* @interface
|
|
2373
|
+
* @category Component Props
|
|
2374
|
+
*/
|
|
2375
|
+
export type ToggleGroupProps = CheckboxGroupProps | RadioButtonGroupProps | DefaultToggleTypeProps;
|
|
2376
|
+
/** @ignore */
|
|
2377
|
+
interface Team {
|
|
2378
|
+
id: number;
|
|
2379
|
+
name: string;
|
|
2380
|
+
teammates: number[];
|
|
2381
|
+
}
|
|
2382
|
+
/** @ignore */
|
|
2383
|
+
export interface UserContext {
|
|
2384
|
+
id: number;
|
|
2385
|
+
emails: string[];
|
|
2386
|
+
email: string;
|
|
2387
|
+
firstName: string;
|
|
2388
|
+
lastName: string;
|
|
2389
|
+
/** @deprecated Roles will always be empty. Please use teams instead */
|
|
2390
|
+
roles: string[];
|
|
2391
|
+
teams: Team[];
|
|
2392
|
+
locale?: string;
|
|
2393
|
+
}
|
|
2394
|
+
/** @ignore */
|
|
2395
|
+
export interface PortalContext {
|
|
2396
|
+
id: number;
|
|
2397
|
+
timezone: string;
|
|
2398
|
+
}
|
|
2399
|
+
/** @ignore */
|
|
2400
|
+
export interface CrmRecordContext {
|
|
2401
|
+
objectId: number;
|
|
2402
|
+
objectTypeId: string;
|
|
2403
|
+
}
|
|
2404
|
+
/** @ignore */
|
|
2405
|
+
export interface AppContext {
|
|
2406
|
+
appId: number | string;
|
|
2407
|
+
appName?: string;
|
|
2408
|
+
cardTitle?: string;
|
|
2409
|
+
}
|
|
2410
|
+
/** @ignore */
|
|
2411
|
+
export interface BaseContext {
|
|
2412
|
+
user: UserContext;
|
|
2413
|
+
portal: PortalContext;
|
|
2414
|
+
}
|
|
2415
|
+
/** @ignore */
|
|
2416
|
+
export interface CrmContext extends BaseContext {
|
|
2417
|
+
location: 'crm.record.tab' | 'crm.record.sidebar' | 'crm.preview' | 'helpdesk.sidebar';
|
|
2418
|
+
crm: CrmRecordContext;
|
|
2419
|
+
extension?: AppContext;
|
|
2420
|
+
}
|
|
2421
|
+
/** @ignore */
|
|
2422
|
+
export interface SettingsContext extends BaseContext {
|
|
2423
|
+
location: 'settings';
|
|
2424
|
+
}
|
|
2425
|
+
/** @ignore */
|
|
2426
|
+
export interface GenericContext extends BaseContext {
|
|
2427
|
+
location: 'uie.playground.middle';
|
|
2428
|
+
}
|
|
2429
|
+
/** @ignore */
|
|
2430
|
+
export interface BaseExtensionContextData {
|
|
2431
|
+
appId: number | string;
|
|
2432
|
+
appName?: string;
|
|
2433
|
+
cardId: string;
|
|
2434
|
+
cardTitle?: string;
|
|
2435
|
+
location: keyof ExtensionPoints;
|
|
2436
|
+
sourceId?: string | null;
|
|
2437
|
+
appAccessLevel: 'PUBLIC' | 'PRIVATE';
|
|
2438
|
+
additionalProperties?: {
|
|
2439
|
+
[key: string]: string;
|
|
2440
|
+
} | null;
|
|
2441
|
+
}
|
|
2442
|
+
/** @ignore */
|
|
2443
|
+
export interface CrmExtensionContextData extends BaseExtensionContextData {
|
|
2444
|
+
objectId: number | string;
|
|
2445
|
+
objectTypeId: string;
|
|
2446
|
+
}
|
|
2447
|
+
/** @ignore */
|
|
2448
|
+
export interface CrmDataHighlightProps {
|
|
2449
|
+
properties: Array<string>;
|
|
2450
|
+
objectTypeId?: string;
|
|
2451
|
+
objectId?: number;
|
|
2452
|
+
}
|
|
2453
|
+
/** @ignore */
|
|
2454
|
+
export interface CrmReportProps {
|
|
2455
|
+
reportId: string;
|
|
2456
|
+
use?: 'associations' | 'subject' | 'unfiltered';
|
|
2457
|
+
}
|
|
2458
|
+
/** @ignore */
|
|
2459
|
+
export interface CrmPropertyListProps {
|
|
2460
|
+
properties: Array<string>;
|
|
2461
|
+
direction?: string;
|
|
2462
|
+
objectTypeId?: string;
|
|
2463
|
+
objectId?: number;
|
|
2464
|
+
}
|
|
2465
|
+
/** @ignore */
|
|
2466
|
+
type CrmSortDescriptor = {
|
|
2467
|
+
columnName: string;
|
|
2468
|
+
direction: 1 | -1;
|
|
2469
|
+
};
|
|
2470
|
+
/** @ignore */
|
|
2471
|
+
interface CrmSearchFilter {
|
|
2472
|
+
operator: 'EQ' | 'NEQ' | 'LT' | 'LTE' | 'GT' | 'GTE' | 'BETWEEN' | 'IN' | 'NOT_IN' | 'HAS_PROPERTY' | 'NOT_HAS_PROPERTY';
|
|
2473
|
+
value?: string | number;
|
|
2474
|
+
values?: string | number;
|
|
2475
|
+
highValue?: string | number;
|
|
2476
|
+
property: string;
|
|
2477
|
+
}
|
|
2478
|
+
/** @ignore */
|
|
2479
|
+
export interface CrmAssociationTableProps {
|
|
2480
|
+
objectTypeId: string;
|
|
2481
|
+
propertyColumns: Array<string>;
|
|
2482
|
+
quickFilterProperties?: Array<string>;
|
|
2483
|
+
searchable?: boolean;
|
|
2484
|
+
pagination?: boolean;
|
|
2485
|
+
associationLabelFilter?: boolean;
|
|
2486
|
+
pageSize?: number;
|
|
2487
|
+
preFilters?: Array<CrmSearchFilter>;
|
|
2488
|
+
sort?: Array<CrmSortDescriptor>;
|
|
2489
|
+
}
|
|
2490
|
+
/** @ignore */
|
|
2491
|
+
export interface CrmAssociationPivotProps {
|
|
2492
|
+
objectTypeId: string;
|
|
2493
|
+
associationLabels?: Array<string>;
|
|
2494
|
+
maxAssociations?: number;
|
|
2495
|
+
preFilters?: Array<CrmSearchFilter>;
|
|
2496
|
+
sort?: Array<CrmSortDescriptor>;
|
|
2497
|
+
}
|
|
2498
|
+
/** @ignore */
|
|
2499
|
+
export interface CrmAssociationStageTrackerProps {
|
|
2500
|
+
objectTypeId: string;
|
|
2501
|
+
properties: Array<string>;
|
|
2502
|
+
associationLabels?: Array<string>;
|
|
2503
|
+
filters?: Array<CrmSearchFilter>;
|
|
2504
|
+
showProperties?: boolean;
|
|
2505
|
+
sort?: Array<CrmSortDescriptor>;
|
|
2506
|
+
}
|
|
2507
|
+
/** @ignore */
|
|
2508
|
+
export interface CrmSimpleDeadlineProps {
|
|
2509
|
+
endDatePropertyName: string;
|
|
2510
|
+
properties: Array<string>;
|
|
2511
|
+
progressTheme?: ProgressTheme;
|
|
2512
|
+
showProperties?: boolean;
|
|
2513
|
+
startDatePropertyName: string;
|
|
2514
|
+
}
|
|
2515
|
+
/** @ignore */
|
|
2516
|
+
export interface CrmRelativeTimelineProps {
|
|
2517
|
+
properties: Array<string>;
|
|
2518
|
+
}
|
|
2519
|
+
/** @ignore */
|
|
2520
|
+
interface BaseCrmStatisticItem {
|
|
2521
|
+
label: string;
|
|
2522
|
+
}
|
|
2523
|
+
/** @ignore */
|
|
2524
|
+
interface FilterGroup {
|
|
2525
|
+
filters: Array<CrmSearchFilter>;
|
|
2526
|
+
}
|
|
2527
|
+
/** @ignore */
|
|
2528
|
+
interface ProgressTheme {
|
|
2529
|
+
backgroundColor?: string;
|
|
2530
|
+
completedColor?: string;
|
|
2531
|
+
upcomingColor?: string;
|
|
2532
|
+
borderRadius?: string | number;
|
|
2533
|
+
height?: string | number;
|
|
2534
|
+
completedGradient?: Gradient;
|
|
2535
|
+
upcomingGradient?: Gradient;
|
|
2536
|
+
}
|
|
2537
|
+
/** @ignore */
|
|
2538
|
+
interface PercentileMetricItem extends BaseCrmStatisticItem {
|
|
2539
|
+
statisticType: 'PERCENTILES';
|
|
2540
|
+
propertyName: string;
|
|
2541
|
+
percentile: number;
|
|
2542
|
+
filterGroups?: Array<FilterGroup>;
|
|
2543
|
+
}
|
|
2544
|
+
/** @ignore */
|
|
2545
|
+
type CrmStatisticItem = BasicMetricItem | PercentileMetricItem;
|
|
2546
|
+
/** @ignore */
|
|
2547
|
+
export interface CrmStatisticsProps {
|
|
2548
|
+
objectTypeId: string;
|
|
2549
|
+
statistics: Array<CrmStatisticItem>;
|
|
2550
|
+
}
|
|
2551
|
+
/** @ignore */
|
|
2552
|
+
interface BasicMetricItem extends BaseCrmStatisticItem {
|
|
2553
|
+
statisticType: 'SUM' | 'AVG' | 'MIN' | 'MAX' | 'DISTINCT_APPROX' | 'COUNT';
|
|
2554
|
+
propertyName: string;
|
|
2555
|
+
filterGroups?: Array<FilterGroup>;
|
|
2375
2556
|
}
|
|
2376
|
-
|
|
2377
|
-
|
|
2378
|
-
|
|
2379
|
-
|
|
2380
|
-
* The props type for {@link !components.Box}.
|
|
2381
|
-
*
|
|
2382
|
-
* @category Component Props
|
|
2383
|
-
*/
|
|
2384
|
-
export interface BoxProps {
|
|
2385
|
-
/**
|
|
2386
|
-
* Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components.
|
|
2387
|
-
*
|
|
2388
|
-
*/
|
|
2389
|
-
children: ReactNode;
|
|
2390
|
-
/**
|
|
2391
|
-
* Overrides Flex's `alignItem` value for this element.
|
|
2392
|
-
*
|
|
2393
|
-
* @defaultValue `"auto"`
|
|
2394
|
-
*/
|
|
2395
|
-
alignSelf?: 'start' | 'center' | 'baseline' | 'end' | 'stretch' | 'auto';
|
|
2396
|
-
/**
|
|
2397
|
-
* Sets how the item will grow or shrink when it's a direct ancestor of the Flex component.
|
|
2398
|
-
* ##### Options in detail
|
|
2399
|
-
*
|
|
2400
|
-
*- `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.
|
|
2401
|
-
*- `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.
|
|
2402
|
-
*- `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.
|
|
2403
|
-
*- `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.
|
|
2404
|
-
*
|
|
2405
|
-
* @defaultValue `"initial"`
|
|
2406
|
-
*/
|
|
2407
|
-
flex?: 'initial' | 'auto' | 'none' | number;
|
|
2557
|
+
/** @ignore */
|
|
2558
|
+
interface Gradient {
|
|
2559
|
+
startColor: string;
|
|
2560
|
+
endColor: string;
|
|
2408
2561
|
}
|
|
2409
|
-
|
|
2410
|
-
|
|
2411
|
-
|
|
2412
|
-
|
|
2413
|
-
|
|
2414
|
-
|
|
2562
|
+
/** @ignore */
|
|
2563
|
+
export interface CrmStageTrackerProps {
|
|
2564
|
+
objectId?: number;
|
|
2565
|
+
objectTypeId?: string;
|
|
2566
|
+
properties: Array<string>;
|
|
2567
|
+
showProperties?: boolean;
|
|
2415
2568
|
}
|
|
2416
|
-
|
|
2417
|
-
export
|
|
2418
|
-
|
|
2419
|
-
|
|
2420
|
-
|
|
2421
|
-
|
|
2422
|
-
|
|
2423
|
-
export interface StepIndicatorProps {
|
|
2424
|
-
/**
|
|
2425
|
-
* An array containing the name of each step.
|
|
2426
|
-
*/
|
|
2427
|
-
stepNames: string[];
|
|
2428
|
-
/**
|
|
2429
|
-
* The orientation of the indicator.
|
|
2430
|
-
*
|
|
2431
|
-
* @defaultValue `"horizontal"`
|
|
2432
|
-
*/
|
|
2433
|
-
direction?: 'horizontal' | 'vertical';
|
|
2434
|
-
/**
|
|
2435
|
-
* The size of the indicator circles.
|
|
2436
|
-
*
|
|
2437
|
-
* @defaultValue `"small"`
|
|
2438
|
-
*/
|
|
2439
|
-
circleSize?: AllSizes;
|
|
2440
|
-
/**
|
|
2441
|
-
* The currently active step. Steps are 0-based.
|
|
2442
|
-
*/
|
|
2443
|
-
currentStep?: number;
|
|
2444
|
-
/**
|
|
2445
|
-
* The visual style of the component.
|
|
2446
|
-
*
|
|
2447
|
-
* - default: default spacing.
|
|
2448
|
-
* - compact: only shows the title of the currently active step.
|
|
2449
|
-
* - flush: only shows the title of the currently active step and removes left and right margins.
|
|
2450
|
-
*
|
|
2451
|
-
* @defaultValue `"default"`
|
|
2452
|
-
*/
|
|
2453
|
-
variant?: 'default' | 'compact' | 'flush';
|
|
2454
|
-
/**
|
|
2455
|
-
* 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.
|
|
2456
|
-
*
|
|
2457
|
-
* @event
|
|
2458
|
-
*/
|
|
2459
|
-
onClick?: (stepIndex: number) => void;
|
|
2569
|
+
/** @ignore */
|
|
2570
|
+
export interface CrmAssociationPropertyListProps {
|
|
2571
|
+
objectTypeId: string;
|
|
2572
|
+
properties: Array<string>;
|
|
2573
|
+
associationLabels?: Array<string>;
|
|
2574
|
+
filters?: Array<CrmSearchFilter>;
|
|
2575
|
+
sort?: Array<CrmSortDescriptor>;
|
|
2460
2576
|
}
|
|
2461
|
-
/**
|
|
2462
|
-
|
|
2463
|
-
|
|
2464
|
-
|
|
2465
|
-
*/
|
|
2466
|
-
export interface AccordionProps {
|
|
2467
|
-
/**
|
|
2468
|
-
* The title text for the accordion.
|
|
2469
|
-
*
|
|
2470
|
-
*/
|
|
2471
|
-
title: string;
|
|
2472
|
-
/**
|
|
2473
|
-
* The main content of the accordion when it opens.
|
|
2474
|
-
*
|
|
2475
|
-
*/
|
|
2476
|
-
children: ReactNode;
|
|
2477
|
-
/**
|
|
2478
|
-
* Defines default open behavior on page load. When set to `true`, the accordion will be open by default on initial load.
|
|
2479
|
-
*
|
|
2480
|
-
* @defaultValue `false`
|
|
2481
|
-
*/
|
|
2482
|
-
defaultOpen?: boolean;
|
|
2483
|
-
/**
|
|
2484
|
-
* When set to `true`, the accordion's open state cannot be changed.
|
|
2485
|
-
*
|
|
2486
|
-
* @defaultValue `false`
|
|
2487
|
-
*/
|
|
2488
|
-
disabled?: boolean;
|
|
2489
|
-
/**
|
|
2490
|
-
* For controlling the accordion's open state programmatically. When set to `true`, the accordion will open. Takes precedence over `defaultOpen`.
|
|
2491
|
-
*
|
|
2492
|
-
*/
|
|
2493
|
-
open?: boolean;
|
|
2494
|
-
/**
|
|
2495
|
-
* The size of the accordion title.
|
|
2496
|
-
*
|
|
2497
|
-
* @defaultValue `"small"`
|
|
2498
|
-
*/
|
|
2499
|
-
size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
|
|
2500
|
-
/**
|
|
2501
|
-
* A function that will be invoked when the title is clicked. It receives no arguments and its return value is ignored.
|
|
2502
|
-
*
|
|
2503
|
-
* @event
|
|
2504
|
-
*/
|
|
2505
|
-
onClick?: () => void;
|
|
2577
|
+
/** @ignore */
|
|
2578
|
+
interface ObjectCoordinates {
|
|
2579
|
+
objectTypeId: string;
|
|
2580
|
+
objectId: number;
|
|
2506
2581
|
}
|
|
2507
|
-
/**
|
|
2508
|
-
|
|
2509
|
-
|
|
2510
|
-
|
|
2511
|
-
|
|
2512
|
-
|
|
2513
|
-
|
|
2514
|
-
* The content of the list. Each child will be wrapped in an `li` tag.
|
|
2515
|
-
*/
|
|
2516
|
-
children: ReactNode;
|
|
2517
|
-
/**
|
|
2518
|
-
* The type of list to render.
|
|
2519
|
-
*
|
|
2520
|
-
* @defaultValue `"unordered"`
|
|
2521
|
-
*/
|
|
2522
|
-
variant?: 'unordered' | 'unordered-styled' | 'ordered' | 'ordered-styled' | 'inline' | 'inline-divided';
|
|
2582
|
+
/** @ignore */
|
|
2583
|
+
interface OpenRecordAssociationFormArgs {
|
|
2584
|
+
objectTypeId: string;
|
|
2585
|
+
association: {
|
|
2586
|
+
objectTypeId: string;
|
|
2587
|
+
objectId: number;
|
|
2588
|
+
};
|
|
2523
2589
|
}
|
|
2524
|
-
/**
|
|
2525
|
-
|
|
2526
|
-
|
|
2527
|
-
|
|
2528
|
-
|
|
2529
|
-
|
|
2530
|
-
|
|
2531
|
-
|
|
2532
|
-
|
|
2533
|
-
|
|
2534
|
-
|
|
2535
|
-
|
|
2536
|
-
|
|
2537
|
-
|
|
2538
|
-
|
|
2539
|
-
|
|
2540
|
-
|
|
2541
|
-
|
|
2542
|
-
|
|
2543
|
-
|
|
2544
|
-
|
|
2545
|
-
|
|
2546
|
-
|
|
2547
|
-
|
|
2548
|
-
|
|
2549
|
-
|
|
2550
|
-
|
|
2551
|
-
|
|
2552
|
-
*/
|
|
2553
|
-
onChange?: (checked: boolean) => void;
|
|
2554
|
-
/**
|
|
2555
|
-
* When set to `true`, the option will be selected by default. Use it to
|
|
2556
|
-
* set the default `checked` state when the component is **uncontrolled**.
|
|
2557
|
-
*/
|
|
2558
|
-
initialIsChecked?: boolean;
|
|
2559
|
-
/**
|
|
2560
|
-
* The companion text of for Toggle. It can be displayed on top,
|
|
2561
|
-
* inline, or hidden. When hidden, it will remain usable for screen readers.
|
|
2562
|
-
*/
|
|
2563
|
-
label: string;
|
|
2564
|
-
/**
|
|
2565
|
-
* Controls the display setting of the label prop.
|
|
2566
|
-
*
|
|
2567
|
-
* @defaultValue `"inline"`
|
|
2568
|
-
*/
|
|
2569
|
-
labelDisplay?: 'inline' | 'top' | 'hidden';
|
|
2570
|
-
/**
|
|
2571
|
-
* The text that appears on the Toggle when `checked={true}`.
|
|
2572
|
-
*
|
|
2573
|
-
* @defaultValue `"ON"`
|
|
2574
|
-
*/
|
|
2575
|
-
textChecked?: string;
|
|
2576
|
-
/**
|
|
2577
|
-
* The text that appears on the Toggle when `checked={false}`.
|
|
2578
|
-
*
|
|
2579
|
-
* @defaultValue `"ON"`
|
|
2580
|
-
*/
|
|
2581
|
-
textUnchecked?: string;
|
|
2590
|
+
/** @ignore */
|
|
2591
|
+
interface ActivityCreatorActionArgs {
|
|
2592
|
+
objectTypeId: string;
|
|
2593
|
+
objectId: number;
|
|
2594
|
+
windowVariant?: 'windowed' | 'fullscreen';
|
|
2595
|
+
}
|
|
2596
|
+
/** @ignore */
|
|
2597
|
+
interface EngagementAppLinkArgs {
|
|
2598
|
+
objectId: number | string;
|
|
2599
|
+
objectTypeId: string;
|
|
2600
|
+
engagementId: number | string;
|
|
2601
|
+
external?: boolean;
|
|
2602
|
+
}
|
|
2603
|
+
/** @ignore */
|
|
2604
|
+
interface RecordAppLinkArgs {
|
|
2605
|
+
includeEschref?: boolean;
|
|
2606
|
+
objectId: number;
|
|
2607
|
+
objectTypeId: string;
|
|
2608
|
+
external?: boolean;
|
|
2609
|
+
}
|
|
2610
|
+
/** @ignore */
|
|
2611
|
+
interface PageAppLinkArgs {
|
|
2612
|
+
path: string;
|
|
2613
|
+
external?: boolean;
|
|
2614
|
+
}
|
|
2615
|
+
/** @ignore */
|
|
2616
|
+
interface ExternalUrlArgs {
|
|
2617
|
+
href: string;
|
|
2582
2618
|
}
|
|
2583
|
-
|
|
2584
|
-
|
|
2585
|
-
|
|
2586
|
-
*
|
|
2587
|
-
*/
|
|
2588
|
-
'aria-label'?: string;
|
|
2589
|
-
/**
|
|
2590
|
-
* The main content of the panel when it opens.
|
|
2591
|
-
*
|
|
2592
|
-
*/
|
|
2593
|
-
children?: React.ReactNode;
|
|
2594
|
-
/**
|
|
2595
|
-
* A unique ID for the panel
|
|
2596
|
-
*
|
|
2597
|
-
*/
|
|
2598
|
-
id: string;
|
|
2599
|
-
/**
|
|
2600
|
-
* A function that will be invoked when the panel has finished opening.
|
|
2601
|
-
*
|
|
2602
|
-
*/
|
|
2603
|
-
onOpen?: () => void;
|
|
2604
|
-
/**
|
|
2605
|
-
* A function that will be invoked when the panel has finished closing.
|
|
2606
|
-
*
|
|
2607
|
-
*/
|
|
2608
|
-
onClose?: () => void;
|
|
2609
|
-
/**
|
|
2610
|
-
* The width of the panel
|
|
2611
|
-
*
|
|
2612
|
-
* @defaultValue `"sm"`
|
|
2613
|
-
*/
|
|
2614
|
-
width?: TShirtSizes['sm'] | TShirtSizes['md'] | TShirtSizes['lg'];
|
|
2615
|
-
/**
|
|
2616
|
-
* The title of the panel
|
|
2617
|
-
*
|
|
2618
|
-
*/
|
|
2619
|
-
title?: string;
|
|
2620
|
-
/**
|
|
2621
|
-
* The variant of the panel
|
|
2622
|
-
*
|
|
2623
|
-
* @defaultValue `"default"`
|
|
2624
|
-
*/
|
|
2625
|
-
variant?: 'modal' | 'default';
|
|
2619
|
+
/** @ignore */
|
|
2620
|
+
interface OpenRecordCreatorFormArgs {
|
|
2621
|
+
objectTypeId: string;
|
|
2626
2622
|
}
|
|
2627
|
-
|
|
2628
|
-
|
|
2629
|
-
|
|
2630
|
-
|
|
2631
|
-
|
|
2632
|
-
|
|
2633
|
-
|
|
2634
|
-
|
|
2635
|
-
|
|
2636
|
-
|
|
2637
|
-
|
|
2638
|
-
|
|
2623
|
+
/** @ignore */
|
|
2624
|
+
interface ActionArgs {
|
|
2625
|
+
PREVIEW_OBJECT: ObjectCoordinates;
|
|
2626
|
+
ADD_NOTE: ActivityCreatorActionArgs;
|
|
2627
|
+
ADD_TASK: ActivityCreatorActionArgs;
|
|
2628
|
+
SEND_EMAIL: ActivityCreatorActionArgs;
|
|
2629
|
+
SCHEDULE_MEETING: ActivityCreatorActionArgs;
|
|
2630
|
+
OPEN_RECORD_CREATOR_FORM: OpenRecordCreatorFormArgs;
|
|
2631
|
+
OPEN_RECORD_ASSOCIATION_FORM: OpenRecordAssociationFormArgs;
|
|
2632
|
+
ENGAGEMENT_APP_LINK: EngagementAppLinkArgs;
|
|
2633
|
+
RECORD_APP_LINK: RecordAppLinkArgs;
|
|
2634
|
+
PAGE_APP_LINK: PageAppLinkArgs;
|
|
2635
|
+
EXTERNAL_URL: ExternalUrlArgs;
|
|
2636
|
+
OPEN_WORKFLOW_ENROLLMENT_MODAL: ObjectCoordinates;
|
|
2639
2637
|
}
|
|
2640
|
-
|
|
2641
|
-
|
|
2642
|
-
|
|
2643
|
-
|
|
2644
|
-
|
|
2645
|
-
|
|
2646
|
-
|
|
2647
|
-
|
|
2648
|
-
|
|
2649
|
-
*/
|
|
2650
|
-
children?: React.ReactNode;
|
|
2651
|
-
/**
|
|
2652
|
-
* A unique ID for the modal
|
|
2653
|
-
*
|
|
2654
|
-
*/
|
|
2655
|
-
id: string;
|
|
2656
|
-
/**
|
|
2657
|
-
* A function that will be invoked when the modal has finished opening.
|
|
2658
|
-
*
|
|
2659
|
-
*/
|
|
2660
|
-
onOpen?: () => void;
|
|
2661
|
-
/**
|
|
2662
|
-
* A function that will be invoked when the modal has finished closing.
|
|
2663
|
-
*
|
|
2664
|
-
*/
|
|
2665
|
-
onClose?: () => void;
|
|
2666
|
-
/**
|
|
2667
|
-
* The width of the modal
|
|
2668
|
-
*
|
|
2669
|
-
* @defaultValue `"sm"`
|
|
2670
|
-
*/
|
|
2671
|
-
width?: TShirtSizes['sm'] | TShirtSizes['md'] | TShirtSizes['lg'];
|
|
2672
|
-
/**
|
|
2673
|
-
* The title of the modal
|
|
2674
|
-
*
|
|
2675
|
-
*/
|
|
2676
|
-
title?: string;
|
|
2677
|
-
/**
|
|
2678
|
-
* The variant of the modal
|
|
2679
|
-
*
|
|
2680
|
-
* @defaultValue `"default"`
|
|
2681
|
-
*/
|
|
2682
|
-
variant?: 'danger' | 'default';
|
|
2638
|
+
/** @ignore */
|
|
2639
|
+
export type ArgsFor<SpecificActionType extends ActionType> = ActionArgs[SpecificActionType];
|
|
2640
|
+
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';
|
|
2641
|
+
/** @ignore */
|
|
2642
|
+
interface BaseActionComponent {
|
|
2643
|
+
children: ReactNode;
|
|
2644
|
+
actionType: ActionType;
|
|
2645
|
+
actionContext: ArgsFor<ActionType>;
|
|
2646
|
+
onError?: (errors: string[]) => void;
|
|
2683
2647
|
}
|
|
2684
|
-
|
|
2685
|
-
|
|
2686
|
-
|
|
2687
|
-
|
|
2688
|
-
|
|
2689
|
-
|
|
2648
|
+
/** @ignore */
|
|
2649
|
+
export interface CrmActionButtonProps extends BaseActionComponent {
|
|
2650
|
+
variant?: 'primary' | 'secondary' | 'destructive';
|
|
2651
|
+
type?: 'button' | 'reset' | 'submit';
|
|
2652
|
+
size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
|
|
2653
|
+
onClick?: () => void;
|
|
2690
2654
|
}
|
|
2691
|
-
|
|
2692
|
-
|
|
2693
|
-
|
|
2694
|
-
*
|
|
2695
|
-
*/
|
|
2696
|
-
children: React.ReactNode;
|
|
2655
|
+
/** @ignore */
|
|
2656
|
+
export interface CrmActionLinkProps extends BaseActionComponent {
|
|
2657
|
+
variant?: 'primary' | 'light' | 'dark' | 'destructive';
|
|
2697
2658
|
}
|
|
2698
|
-
|
|
2699
|
-
|
|
2700
|
-
|
|
2701
|
-
|
|
2702
|
-
|
|
2703
|
-
|
|
2659
|
+
/** @ignore */
|
|
2660
|
+
export interface ActionLibraryButtonCardActionConfig<SpecificActionType extends ActionType = ActionType> {
|
|
2661
|
+
type: 'action-library-button';
|
|
2662
|
+
actionType: SpecificActionType;
|
|
2663
|
+
actionContext: ArgsFor<SpecificActionType>;
|
|
2664
|
+
label?: string;
|
|
2665
|
+
disabled?: boolean;
|
|
2666
|
+
tooltipText?: string;
|
|
2704
2667
|
}
|
|
2705
|
-
|
|
2706
|
-
|
|
2707
|
-
|
|
2708
|
-
|
|
2709
|
-
|
|
2710
|
-
|
|
2668
|
+
/** @ignore */
|
|
2669
|
+
export type DropdownCardActionConfigOptions = [
|
|
2670
|
+
ActionLibraryButtonCardActionConfig,
|
|
2671
|
+
...ActionLibraryButtonCardActionConfig[]
|
|
2672
|
+
];
|
|
2673
|
+
/** @ignore */
|
|
2674
|
+
export interface DropdownCardActionConfig {
|
|
2675
|
+
type: 'dropdown';
|
|
2676
|
+
options: DropdownCardActionConfigOptions;
|
|
2677
|
+
label?: string;
|
|
2678
|
+
disabled?: boolean;
|
|
2679
|
+
tooltipText?: string;
|
|
2680
|
+
}
|
|
2681
|
+
/** @ignore */
|
|
2682
|
+
type ErrorHandler = (errors: string[]) => void;
|
|
2683
|
+
/** @ignore */
|
|
2684
|
+
type CardActionConfig = ActionLibraryButtonCardActionConfig | DropdownCardActionConfig;
|
|
2685
|
+
/** @ignore */
|
|
2686
|
+
export type CrmCardActionsProps = {
|
|
2687
|
+
actionConfigs: Array<CardActionConfig>;
|
|
2688
|
+
onError?: ErrorHandler;
|
|
2689
|
+
};
|
|
2690
|
+
/** @ignore */
|
|
2691
|
+
export type ExtensionPointAction = (...args: any[]) => Promise<any> | void;
|
|
2692
|
+
/** @ignore */
|
|
2693
|
+
export interface ExtensionPointContract {
|
|
2694
|
+
actions?: {
|
|
2695
|
+
[k: string]: ExtensionPointAction;
|
|
2696
|
+
} | {};
|
|
2697
|
+
context: BaseContext;
|
|
2698
|
+
customComponents: Record<string, ComponentType<any>>;
|
|
2699
|
+
}
|
|
2700
|
+
/** @ignore */
|
|
2701
|
+
export interface StandardCrmExtensionPoint extends ExtensionPointContract {
|
|
2702
|
+
actions: CrmHostActions & UiePlatformActions;
|
|
2703
|
+
context: CrmContext;
|
|
2704
|
+
customComponents: {
|
|
2705
|
+
CrmPropertyList: ComponentType<CrmPropertyListProps>;
|
|
2706
|
+
CrmAssociationTable: ComponentType<CrmAssociationTableProps>;
|
|
2707
|
+
CrmDataHighlight: ComponentType<CrmDataHighlightProps>;
|
|
2708
|
+
CrmReport: ComponentType<CrmReportProps>;
|
|
2709
|
+
CrmAssociationPivot: ComponentType<CrmAssociationPivotProps>;
|
|
2710
|
+
CrmAssociationPropertyList: ComponentType<CrmAssociationPropertyListProps>;
|
|
2711
|
+
CrmAssociationStageTracker?: ComponentType<CrmAssociationStageTrackerProps>;
|
|
2712
|
+
CrmSimpleDeadline?: ComponentType<CrmSimpleDeadlineProps>;
|
|
2713
|
+
CrmRelativeTimeline?: ComponentType<CrmRelativeTimelineProps>;
|
|
2714
|
+
CrmStageTracker: ComponentType<CrmStageTrackerProps>;
|
|
2715
|
+
CrmStatistics?: ComponentType<CrmStatisticsProps>;
|
|
2716
|
+
CrmActionButton?: ComponentType<CrmActionButtonProps>;
|
|
2717
|
+
CrmActionLink?: ComponentType<CrmActionLinkProps>;
|
|
2718
|
+
CrmCardActions?: ComponentType<CrmCardActionsProps>;
|
|
2719
|
+
};
|
|
2720
|
+
}
|
|
2721
|
+
/** @deprecated this interface has been replaced by StandardCrmExtensionPoint */
|
|
2722
|
+
export interface CrmMiddleExtensionPoint extends ExtensionPointContract {
|
|
2723
|
+
actions: CrmHostActions;
|
|
2724
|
+
context: CrmContext;
|
|
2725
|
+
customComponents: {
|
|
2726
|
+
CrmPropertyList: ComponentType<CrmPropertyListProps>;
|
|
2727
|
+
CrmAssociationTable: ComponentType<CrmAssociationTableProps>;
|
|
2728
|
+
CrmDataHighlight: ComponentType<CrmDataHighlightProps>;
|
|
2729
|
+
CrmReport: ComponentType<CrmReportProps>;
|
|
2730
|
+
CrmAssociationPivot: ComponentType<CrmAssociationPivotProps>;
|
|
2731
|
+
CrmAssociationPropertyList: ComponentType<CrmAssociationPropertyListProps>;
|
|
2732
|
+
CrmAssociationStageTracker?: ComponentType<CrmAssociationStageTrackerProps>;
|
|
2733
|
+
CrmSimpleDeadline?: ComponentType<CrmSimpleDeadlineProps>;
|
|
2734
|
+
CrmRelativeTimeline?: ComponentType<CrmRelativeTimelineProps>;
|
|
2735
|
+
CrmStageTracker: ComponentType<CrmStageTrackerProps>;
|
|
2736
|
+
CrmStatistics?: ComponentType<CrmStatisticsProps>;
|
|
2737
|
+
CrmActionButton?: ComponentType<CrmActionButtonProps>;
|
|
2738
|
+
CrmActionLink?: ComponentType<CrmActionLinkProps>;
|
|
2739
|
+
CrmCardActions?: ComponentType<CrmCardActionsProps>;
|
|
2740
|
+
};
|
|
2741
|
+
}
|
|
2742
|
+
/** @ignore */
|
|
2743
|
+
export interface CrmSidebarExtensionPoint extends ExtensionPointContract {
|
|
2744
|
+
actions: CrmHostActions & UiePlatformActions;
|
|
2745
|
+
context: CrmContext;
|
|
2746
|
+
customComponents: {
|
|
2747
|
+
CrmActionButton?: ComponentType<CrmActionButtonProps>;
|
|
2748
|
+
CrmActionLink?: ComponentType<CrmActionLinkProps>;
|
|
2749
|
+
};
|
|
2750
|
+
}
|
|
2751
|
+
/** @ignore */
|
|
2752
|
+
export interface SettingsExtensionPoint extends ExtensionPointContract {
|
|
2753
|
+
actions: UiePlatformActions;
|
|
2754
|
+
context: SettingsContext;
|
|
2755
|
+
}
|
|
2756
|
+
export interface ExampleCrmComponentProps {
|
|
2757
|
+
name: string;
|
|
2758
|
+
size: 'sm' | 'md' | 'lg';
|
|
2759
|
+
count: number;
|
|
2760
|
+
}
|
|
2761
|
+
/** @ignore */
|
|
2762
|
+
interface RemotePlaygroundExtensionPoint extends ExtensionPointContract {
|
|
2763
|
+
actions: {
|
|
2764
|
+
warn: () => void;
|
|
2765
|
+
};
|
|
2766
|
+
context: GenericContext;
|
|
2767
|
+
customComponents: {
|
|
2768
|
+
ExampleCrmComponent: ComponentType<ExampleCrmComponentProps>;
|
|
2769
|
+
};
|
|
2711
2770
|
}
|
|
2712
|
-
export
|
|
2713
|
-
|
|
2714
|
-
|
|
2715
|
-
|
|
2716
|
-
|
|
2717
|
-
|
|
2718
|
-
|
|
2719
|
-
|
|
2720
|
-
|
|
2721
|
-
|
|
2722
|
-
* @event
|
|
2723
|
-
*/
|
|
2724
|
-
onClick?: () => void;
|
|
2771
|
+
export declare const EXTENSION_POINT_LOCATIONS: readonly ["crm.preview", "crm.record.sidebar", "crm.record.tab", "helpdesk.sidebar", "uie.playground.middle", "settings"];
|
|
2772
|
+
export type ExtensionPointLocation = TypesOfReadOnlyArray<typeof EXTENSION_POINT_LOCATIONS>;
|
|
2773
|
+
/** @ignore */
|
|
2774
|
+
interface LocationToExtensionPoint {
|
|
2775
|
+
'uie.playground.middle': RemotePlaygroundExtensionPoint;
|
|
2776
|
+
'crm.record.tab': StandardCrmExtensionPoint;
|
|
2777
|
+
'crm.preview': StandardCrmExtensionPoint;
|
|
2778
|
+
'crm.record.sidebar': CrmSidebarExtensionPoint;
|
|
2779
|
+
'helpdesk.sidebar': StandardCrmExtensionPoint;
|
|
2780
|
+
settings: SettingsExtensionPoint;
|
|
2725
2781
|
}
|
|
2726
2782
|
/**
|
|
2727
|
-
*
|
|
2728
|
-
*
|
|
2729
|
-
*
|
|
2783
|
+
* While this resolves to the same result as LocationToExtensionPoint, it ensures that every location
|
|
2784
|
+
* from ExtensionPointLocation is explicitly included. This way, EXTENSION_POINT_LOCATIONS becomes
|
|
2785
|
+
* the single source of truth for defining all locations.
|
|
2730
2786
|
*/
|
|
2731
|
-
|
|
2732
|
-
|
|
2733
|
-
|
|
2734
|
-
|
|
2735
|
-
|
|
2736
|
-
|
|
2737
|
-
|
|
2738
|
-
|
|
2739
|
-
|
|
2740
|
-
|
|
2741
|
-
*/
|
|
2742
|
-
variant?: 'primary' | 'secondary' | 'transparent';
|
|
2743
|
-
/**
|
|
2744
|
-
* Sets the content for the dropdown button.
|
|
2745
|
-
*
|
|
2746
|
-
* @defaultValue `"More"`
|
|
2747
|
-
*/
|
|
2748
|
-
buttonText?: string;
|
|
2749
|
-
/**
|
|
2750
|
-
* Sets the size of the dropdown button.
|
|
2751
|
-
*
|
|
2752
|
-
* @defaultValue `"md"`
|
|
2753
|
-
*/
|
|
2754
|
-
buttonSize?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
|
|
2755
|
-
/**
|
|
2756
|
-
* Disables the ability to focus and click-to-expand of the dropdown button
|
|
2757
|
-
*
|
|
2758
|
-
* @defaultValue `false`
|
|
2759
|
-
*/
|
|
2760
|
-
disabled?: boolean;
|
|
2787
|
+
type _ExtensionPoints = {
|
|
2788
|
+
[key in ExtensionPointLocation]: LocationToExtensionPoint[key];
|
|
2789
|
+
};
|
|
2790
|
+
export interface ExtensionPoints extends _ExtensionPoints {
|
|
2791
|
+
}
|
|
2792
|
+
/** @ignore */
|
|
2793
|
+
export interface ExtensionPointApi<ExtensionPointName extends keyof ExtensionPoints> {
|
|
2794
|
+
runServerlessFunction: ServerlessFuncRunner;
|
|
2795
|
+
actions: ExtensionPoints[ExtensionPointName]['actions'];
|
|
2796
|
+
context: ExtensionPoints[ExtensionPointName]['context'];
|
|
2761
2797
|
}
|
|
2762
2798
|
export interface HubSpotFetchOptions {
|
|
2763
2799
|
method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
|
|
@@ -2773,111 +2809,107 @@ export type ProxyMetadata = {
|
|
|
2773
2809
|
userId?: number;
|
|
2774
2810
|
portalId?: number;
|
|
2775
2811
|
};
|
|
2776
|
-
|
|
2777
|
-
|
|
2778
|
-
|
|
2779
|
-
|
|
2780
|
-
children?: ReactNode;
|
|
2781
|
-
/**
|
|
2782
|
-
* Callback when the selected tab changes.
|
|
2783
|
-
*/
|
|
2784
|
-
onSelectedChange?: ((selectedId: string) => void) | ((selectedId: number) => void) | ((selectedId: number | string) => void);
|
|
2812
|
+
/**
|
|
2813
|
+
* @category Serverless
|
|
2814
|
+
*/
|
|
2815
|
+
export interface ServerlessRunnerParams {
|
|
2785
2816
|
/**
|
|
2786
|
-
*
|
|
2817
|
+
* Name of the serverless function
|
|
2787
2818
|
*/
|
|
2788
|
-
|
|
2819
|
+
name: string;
|
|
2789
2820
|
/**
|
|
2790
|
-
*
|
|
2821
|
+
* Names of CRM object properties to be retrieved and supplied to the function as `context.propertiesToSend`
|
|
2791
2822
|
*/
|
|
2792
|
-
|
|
2823
|
+
propertiesToSend?: string[];
|
|
2793
2824
|
/**
|
|
2794
|
-
*
|
|
2795
|
-
* @defaultValue 'default'
|
|
2825
|
+
* Additional parameters to be supplied to the function as `context.parameters`
|
|
2796
2826
|
*/
|
|
2797
|
-
|
|
2827
|
+
parameters?: JsonValue;
|
|
2798
2828
|
/**
|
|
2799
|
-
*
|
|
2829
|
+
* @deprecated Optional payload supplied to the function as `context.event.payload`.
|
|
2830
|
+
* Support for this param may be removed in the future. Use `parameters` instead.
|
|
2800
2831
|
*/
|
|
2801
|
-
|
|
2832
|
+
payload?: JsonValue;
|
|
2802
2833
|
}
|
|
2803
|
-
|
|
2804
|
-
|
|
2805
|
-
|
|
2806
|
-
|
|
2807
|
-
|
|
2808
|
-
|
|
2809
|
-
* Unique identifier for the tab.
|
|
2810
|
-
*/
|
|
2811
|
-
tabId?: string | number;
|
|
2812
|
-
/**
|
|
2813
|
-
* The title text of the tab.
|
|
2814
|
-
*/
|
|
2815
|
-
title?: string;
|
|
2816
|
-
/**
|
|
2817
|
-
* The content to display when this tab is selected.
|
|
2818
|
-
*/
|
|
2819
|
-
children?: ReactNode;
|
|
2820
|
-
/**
|
|
2821
|
-
* The tooltip text of the tab.
|
|
2822
|
-
*/
|
|
2823
|
-
tooltip?: string;
|
|
2824
|
-
/**
|
|
2825
|
-
* The tab's tooltip placement
|
|
2826
|
-
* @defaultValue 'top'
|
|
2827
|
-
*/
|
|
2828
|
-
tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
|
|
2834
|
+
/**
|
|
2835
|
+
* @category Serverless
|
|
2836
|
+
*/
|
|
2837
|
+
export declare enum ServerlessExecutionStatus {
|
|
2838
|
+
Success = "SUCCESS",
|
|
2839
|
+
Error = "ERROR"
|
|
2829
2840
|
}
|
|
2830
2841
|
/**
|
|
2831
|
-
*
|
|
2832
|
-
*
|
|
2833
|
-
* @category Component Props
|
|
2842
|
+
* @category Serverless
|
|
2834
2843
|
*/
|
|
2835
|
-
export
|
|
2836
|
-
|
|
2837
|
-
|
|
2838
|
-
|
|
2839
|
-
|
|
2844
|
+
export type ServerlessExecutionResult = {
|
|
2845
|
+
status: ServerlessExecutionStatus.Success;
|
|
2846
|
+
response: JsonValue;
|
|
2847
|
+
} | {
|
|
2848
|
+
status: ServerlessExecutionStatus.Error;
|
|
2849
|
+
message: string;
|
|
2850
|
+
};
|
|
2851
|
+
/**
|
|
2852
|
+
* @category Serverless
|
|
2853
|
+
*/
|
|
2854
|
+
export type ServerlessFuncRunner = (params: ServerlessRunnerParams) => Promise<ServerlessExecutionResult>;
|
|
2855
|
+
/**
|
|
2856
|
+
* @ignore
|
|
2857
|
+
* @category Serverless
|
|
2858
|
+
*/
|
|
2859
|
+
export interface ServerlessExecutionRequest {
|
|
2860
|
+
appId: number;
|
|
2861
|
+
extensibleCardId: number;
|
|
2862
|
+
serverlessFunction: string;
|
|
2863
|
+
location: keyof ExtensionPoints;
|
|
2864
|
+
objectQuery?: {
|
|
2865
|
+
objectId: number;
|
|
2866
|
+
objectTypeId: string;
|
|
2867
|
+
objectPropertyNames: string[];
|
|
2868
|
+
};
|
|
2869
|
+
parameters?: JsonValue;
|
|
2870
|
+
event?: {
|
|
2871
|
+
type: 'SERVERLESS_ACTION_HOOK';
|
|
2872
|
+
payload: JsonValue;
|
|
2873
|
+
};
|
|
2874
|
+
objectId?: number;
|
|
2875
|
+
objectTypeId?: string;
|
|
2840
2876
|
}
|
|
2841
|
-
|
|
2842
|
-
|
|
2843
|
-
|
|
2844
|
-
|
|
2845
|
-
|
|
2846
|
-
|
|
2847
|
-
|
|
2848
|
-
|
|
2849
|
-
|
|
2850
|
-
|
|
2851
|
-
|
|
2852
|
-
|
|
2853
|
-
|
|
2854
|
-
|
|
2855
|
-
|
|
2856
|
-
|
|
2857
|
-
|
|
2858
|
-
|
|
2859
|
-
|
|
2860
|
-
|
|
2861
|
-
|
|
2862
|
-
|
|
2863
|
-
|
|
2864
|
-
|
|
2865
|
-
|
|
2866
|
-
readonly customerExperience: "customer-experience";
|
|
2867
|
-
readonly api: "api";
|
|
2868
|
-
readonly integrations: "integrations";
|
|
2869
|
-
readonly sandboxAddOn: "sandbox-add-on";
|
|
2870
|
-
readonly customObjects: "custom-objects";
|
|
2871
|
-
readonly paymentsButton: "payments-button";
|
|
2872
|
-
readonly automatedTesting: "automated-testing";
|
|
2873
|
-
readonly middlePaneCards: "middle-pane-cards";
|
|
2874
|
-
readonly propertiesSidebar: "properties-sidebar";
|
|
2875
|
-
readonly emptyStateCharts: "empty-state-charts";
|
|
2876
|
-
readonly meetings: "meetings-small";
|
|
2877
|
-
readonly tickets: "ticket-small";
|
|
2878
|
-
readonly sidebar: "settings-sidebar";
|
|
2879
|
-
readonly errorGeneral: "errors/general";
|
|
2880
|
-
readonly errorHourglass: "errors/hourglass";
|
|
2877
|
+
/**
|
|
2878
|
+
* @category Serverless
|
|
2879
|
+
*/
|
|
2880
|
+
export interface ServerlessExecutionResponse {
|
|
2881
|
+
logId: string;
|
|
2882
|
+
response?: JsonValue;
|
|
2883
|
+
}
|
|
2884
|
+
/**
|
|
2885
|
+
* @category Serverless
|
|
2886
|
+
*/
|
|
2887
|
+
export interface ServerlessErrorResponse {
|
|
2888
|
+
responseJSON?: {
|
|
2889
|
+
message: string;
|
|
2890
|
+
correlationId: string;
|
|
2891
|
+
category: string;
|
|
2892
|
+
subCategory?: string;
|
|
2893
|
+
errors?: {
|
|
2894
|
+
message: string;
|
|
2895
|
+
subCategory: string;
|
|
2896
|
+
}[];
|
|
2897
|
+
};
|
|
2898
|
+
status: number;
|
|
2899
|
+
}
|
|
2900
|
+
export type JsonValue = string | number | boolean | null | JsonValue[] | {
|
|
2901
|
+
[key: string]: JsonValue;
|
|
2881
2902
|
};
|
|
2882
|
-
|
|
2903
|
+
/** @ignore */
|
|
2904
|
+
export type PanelAction = (panelId: string) => void;
|
|
2905
|
+
/** @ignore */
|
|
2906
|
+
export type ModalAction = (modalId: string) => void;
|
|
2907
|
+
/** @ignore */
|
|
2908
|
+
export interface Reactions {
|
|
2909
|
+
openPanel: PanelAction;
|
|
2910
|
+
closePanel: PanelAction;
|
|
2911
|
+
openModal: ModalAction;
|
|
2912
|
+
closeModal: ModalAction;
|
|
2913
|
+
}
|
|
2914
|
+
export type ReactionsHandler<T> = (event: T, reactions: Reactions) => void | Promise<void>;
|
|
2883
2915
|
export {};
|