@hybr1d-tech/charizard 0.7.174 → 0.7.175
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/index.d.ts +3507 -0
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1 +1,3508 @@
|
|
|
1
|
+
import * as accordion from '@zag-js/accordion';
|
|
2
|
+
import { ActionMeta } from 'react-select';
|
|
3
|
+
import { ClassNames } from 'react-day-picker';
|
|
4
|
+
import { DateRange } from 'react-day-picker';
|
|
5
|
+
import { default as default_2 } from 'react';
|
|
6
|
+
import * as dialog from '@zag-js/dialog';
|
|
7
|
+
import { HTMLInputTypeAttribute } from 'react';
|
|
8
|
+
import { Id } from 'react-toastify';
|
|
9
|
+
import { JSX as JSX_2 } from 'react/jsx-runtime';
|
|
10
|
+
import { Matcher } from 'react-day-picker';
|
|
11
|
+
import { MenuPlacement } from 'react-select';
|
|
12
|
+
import { MultiValue } from 'react-select';
|
|
13
|
+
import { Placement } from '@zag-js/popper';
|
|
14
|
+
import { Placement as Placement_2 } from '@popperjs/core';
|
|
15
|
+
import { PositioningOptions } from '@zag-js/popper';
|
|
16
|
+
import { Props } from 'react-select';
|
|
17
|
+
import { PropsRange } from 'react-day-picker';
|
|
18
|
+
import { PropsSingle } from 'react-day-picker';
|
|
19
|
+
import * as React_2 from 'react';
|
|
20
|
+
import { ReactElement } from 'react';
|
|
21
|
+
import { SingleValue } from 'react-select';
|
|
22
|
+
import { StoreApi } from 'zustand';
|
|
23
|
+
import { StylesConfig } from 'react-select';
|
|
24
|
+
import { ToastOptions } from 'react-toastify';
|
|
25
|
+
import { ToastPosition } from 'react-toastify';
|
|
26
|
+
import { UseBoundStore } from 'zustand';
|
|
27
|
+
import * as zagSwitch from '@zag-js/switch';
|
|
28
|
+
|
|
29
|
+
export declare const Accordion: {
|
|
30
|
+
({ children, defaultActiveKey, customClasses, customStyle, isMulti, }: AccordionProps): JSX_2.Element;
|
|
31
|
+
Item({ eventKey, children }: ItemProps): JSX_2.Element;
|
|
32
|
+
Header({ eventKey, children, customClasses, customStyle }: HeaderProps): JSX_2.Element;
|
|
33
|
+
Collapse({ eventKey, children, customClasses, customStyle }: CollapseProps): JSX_2.Element;
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
declare interface AccordionContextValue {
|
|
37
|
+
api: accordion.Api<any>;
|
|
38
|
+
state: any;
|
|
39
|
+
send: (event: any) => void;
|
|
40
|
+
activeEventKey: string[];
|
|
41
|
+
setActiveEventKey: (key: string[]) => void;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
declare interface AccordionProps {
|
|
45
|
+
children: React.ReactNode;
|
|
46
|
+
defaultActiveKey?: string;
|
|
47
|
+
customClasses?: string;
|
|
48
|
+
customStyle?: React.CSSProperties;
|
|
49
|
+
isMulti?: boolean;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
export declare const ActionsDropdown: React_2.ForwardRefExoticComponent<ActionsDropdownProps & React_2.RefAttributes<unknown>>;
|
|
53
|
+
|
|
54
|
+
export declare interface ActionsDropdownProps {
|
|
55
|
+
variant?: BUTTON_V2_VARIANT;
|
|
56
|
+
disabled?: boolean;
|
|
57
|
+
menuItems: MenuItemV2[];
|
|
58
|
+
customData?: any;
|
|
59
|
+
size?: BUTTON_V2_SIZE;
|
|
60
|
+
positionerProps?: PositioningOptions;
|
|
61
|
+
isTable?: boolean;
|
|
62
|
+
children?: React_2.ReactNode;
|
|
63
|
+
hideDivider?: boolean;
|
|
64
|
+
customStyles?: {
|
|
65
|
+
customMenuStyles?: React_2.CSSProperties;
|
|
66
|
+
customButtonStyles?: React_2.CSSProperties;
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
export declare function Alert({ alertType, actionType, header, body, hide, setHide, showMore, setShowMore, }: AlertPropTypes): false | JSX_2.Element;
|
|
71
|
+
|
|
72
|
+
export declare enum ALERT_ACTION_TYPES {
|
|
73
|
+
CLOSE = "close",
|
|
74
|
+
SHOW_MORE = "show-more"
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
export declare enum ALERT_TYPES {
|
|
78
|
+
DEFAULT = "default",
|
|
79
|
+
NEUTRAL = "neutral",
|
|
80
|
+
POSITIVE = "positive",
|
|
81
|
+
WARNING = "warning",
|
|
82
|
+
NEGATIVE = "negative",
|
|
83
|
+
HIGHLIGHT = "highlight"
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
declare interface AlertPropTypes {
|
|
87
|
+
alertType: ALERT_TYPES;
|
|
88
|
+
actionType?: ALERT_ACTION_TYPES;
|
|
89
|
+
header: React_2.ReactNode;
|
|
90
|
+
body?: React_2.ReactNode;
|
|
91
|
+
hide?: boolean;
|
|
92
|
+
setHide?: React_2.Dispatch<React_2.SetStateAction<boolean>>;
|
|
93
|
+
showMore?: boolean;
|
|
94
|
+
setShowMore?: React_2.Dispatch<React_2.SetStateAction<boolean>>;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
export declare const alertTypeMap: {
|
|
98
|
+
[key: string]: {
|
|
99
|
+
bg: string;
|
|
100
|
+
color: string;
|
|
101
|
+
icon: string;
|
|
102
|
+
};
|
|
103
|
+
};
|
|
104
|
+
|
|
105
|
+
/**
|
|
106
|
+
* Array representing AM/PM values
|
|
107
|
+
* @type {string[]}
|
|
108
|
+
*/
|
|
109
|
+
export declare const amPm: PERIOD[];
|
|
110
|
+
|
|
111
|
+
/**
|
|
112
|
+
* AsyncImage component that displays an image asynchronously.
|
|
113
|
+
* While the image is loading, it shows a skeleton loader.
|
|
114
|
+
*
|
|
115
|
+
* @param {Object} props - The image properties object.
|
|
116
|
+
* @param {string} props.src - The source URL of the image.
|
|
117
|
+
* @param {string} props.alt - The alt text for the image.
|
|
118
|
+
* @param {string} [props.className] - Additional CSS classes for styling the image and skelton.
|
|
119
|
+
* @param {React.ImgHTMLAttributes<HTMLImageElement>} props - Additional props for the img element.
|
|
120
|
+
* @returns {JSX.Element} The rendered component.
|
|
121
|
+
*/
|
|
122
|
+
export declare function AsyncImage({ src, alt, className, ...props }: ImageProps): JSX_2.Element;
|
|
123
|
+
|
|
124
|
+
export declare function Avatar({ user, imageStyles }: AvatarProps): JSX_2.Element;
|
|
125
|
+
|
|
126
|
+
declare interface AvatarProps {
|
|
127
|
+
user: any;
|
|
128
|
+
imageStyles?: React.CSSProperties;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
export declare function Badge({ highlight, status, selected, children, icon, customSvgStyles, onClick, }: BadgeProps): JSX_2.Element;
|
|
132
|
+
|
|
133
|
+
export declare enum BADGE_HIGHLIGHT {
|
|
134
|
+
ICON = "icon",
|
|
135
|
+
DOT = "dot",
|
|
136
|
+
NONE = "none"
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
export declare enum BADGE_STATUS {
|
|
140
|
+
DEFAULT = "default",
|
|
141
|
+
NEUTRAL = "neutral",
|
|
142
|
+
POSITIVE = "positive",
|
|
143
|
+
WARNING = "warning",
|
|
144
|
+
NEGATIVE = "negative",
|
|
145
|
+
HIGHLIGHT = "highlight"
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
declare type BadgeProps = (IconBadgeProps | NonIconBadgeProps) & (SelectableBadgeProps | NonSelectableBadgeProps);
|
|
149
|
+
|
|
150
|
+
declare interface BaseBadgeProps {
|
|
151
|
+
highlight?: BADGE_HIGHLIGHT;
|
|
152
|
+
status?: BADGE_STATUS;
|
|
153
|
+
children: React_2.ReactNode;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
declare interface BaseButtonProps {
|
|
157
|
+
variant?: BUTTON_V2_VARIANT;
|
|
158
|
+
disabled?: boolean;
|
|
159
|
+
onClick?: React_2.MouseEventHandler<HTMLButtonElement>;
|
|
160
|
+
size?: BUTTON_V2_SIZE | 'xs' | 'sm' | 'md' | 'adapt';
|
|
161
|
+
customStyles?: React_2.CSSProperties;
|
|
162
|
+
btnType?: 'button' | 'reset' | 'submit';
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/**
|
|
166
|
+
* Base props for input adornment components. It can be dropdown or non actionable
|
|
167
|
+
*
|
|
168
|
+
* @interface BaseInputAdornmentProps
|
|
169
|
+
*
|
|
170
|
+
* @property {React.ReactNode} children - The elements or text inside the adornment.
|
|
171
|
+
* @property {boolean} [disabled] - Whether the adornment is disabled.
|
|
172
|
+
*/
|
|
173
|
+
declare interface BaseInputAdornmentProps {
|
|
174
|
+
children: React.ReactNode;
|
|
175
|
+
disabled?: boolean;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
declare interface Breadcrumb {
|
|
179
|
+
label: string;
|
|
180
|
+
href?: string;
|
|
181
|
+
active?: boolean;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
declare interface Breadcrumb_2 {
|
|
185
|
+
label: string;
|
|
186
|
+
href?: string;
|
|
187
|
+
active?: boolean;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
export declare function Breadcrumbs(): JSX_2.Element;
|
|
191
|
+
|
|
192
|
+
declare interface BreadcrumbsStore {
|
|
193
|
+
breadcrumbs: Breadcrumb[];
|
|
194
|
+
setBreadcrumbs: (breadcrumbs: Breadcrumb[]) => void;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
export declare function Button({ children, variant, disabled, onClick, type, size, customStyles, }: ButtonProps): JSX_2.Element;
|
|
198
|
+
|
|
199
|
+
export declare namespace Button {
|
|
200
|
+
var MenuButton: ({ children, variant, disabled, menuItems, onClick, isCustomTrigger, isSingleBtnTrigger, customData, size, actionsDropdownOptions, positionerProps, isTable, }: MenuButtonProps) => JSX_2.Element;
|
|
201
|
+
var ActionsDropdown: typeof MenuActionsDropdown;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
export declare enum BUTTON_V2_SIZE {
|
|
205
|
+
SMALL = "small",
|
|
206
|
+
DEFAULT = "default"
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
export declare enum BUTTON_V2_TYPE {
|
|
210
|
+
BASIC = "basic",
|
|
211
|
+
ICON_LEFT = "iconLeft",
|
|
212
|
+
ICON_RIGHT = "iconRight",
|
|
213
|
+
ICON_ONLY = "iconOnly",
|
|
214
|
+
BUTTON = "button",
|
|
215
|
+
RESET = "reset"
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
export declare enum BUTTON_V2_VARIANT {
|
|
219
|
+
PRIMARY = "primary",
|
|
220
|
+
SECONDARY = "secondary",
|
|
221
|
+
TERTIARY = "tertiary",
|
|
222
|
+
GHOST = "tertiary",
|
|
223
|
+
DANGER = "primary",
|
|
224
|
+
LINK = "link",
|
|
225
|
+
MINIMAL = "tertiary"
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
export declare enum BUTTON_VARIANT {
|
|
229
|
+
PRIMARY = "primary",
|
|
230
|
+
SECONDARY = "secondary",
|
|
231
|
+
GHOST = "ghost",
|
|
232
|
+
DANGER = "danger",
|
|
233
|
+
LINK = "link",
|
|
234
|
+
MINIMAL = "minimal"
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
export declare type ButtonProps = {
|
|
238
|
+
children: React_2.ReactNode;
|
|
239
|
+
variant?: BUTTON_VARIANT;
|
|
240
|
+
disabled?: boolean;
|
|
241
|
+
onClick?: React_2.MouseEventHandler<HTMLButtonElement>;
|
|
242
|
+
type?: 'button' | 'submit' | 'reset';
|
|
243
|
+
size?: 'xs' | 'sm' | 'md' | 'adapt';
|
|
244
|
+
customStyles?: React_2.CSSProperties;
|
|
245
|
+
};
|
|
246
|
+
|
|
247
|
+
export declare function ButtonV2({ children, variant, disabled, onClick, type, size, customStyles, icon, btnType, }: ButtonV2Props): JSX_2.Element;
|
|
248
|
+
|
|
249
|
+
export declare namespace ButtonV2 {
|
|
250
|
+
var GroupAction: React_2.ForwardRefExoticComponent<GroupActionProps & React_2.RefAttributes<unknown>>;
|
|
251
|
+
var ActionsDropdown: React_2.ForwardRefExoticComponent<ActionsDropdownProps & React_2.RefAttributes<unknown>>;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
export declare type ButtonV2Props = IconOnlyButtonV2TypeProps | IconButtonV2TypeProps | OtherButtonV2TypeProps;
|
|
255
|
+
|
|
256
|
+
export declare function Checkbox({ id, name, children, onChange, customClasses, customStyles, errorMsg, checked, indeterminate, disabled, }: CheckboxProps): JSX_2.Element;
|
|
257
|
+
|
|
258
|
+
declare interface CheckboxProps {
|
|
259
|
+
/**
|
|
260
|
+
* Checkbox id
|
|
261
|
+
*/
|
|
262
|
+
id: string;
|
|
263
|
+
/**
|
|
264
|
+
* Checkbox name
|
|
265
|
+
*/
|
|
266
|
+
name: string;
|
|
267
|
+
/**
|
|
268
|
+
* children
|
|
269
|
+
*/
|
|
270
|
+
children: React.ReactNode;
|
|
271
|
+
/**
|
|
272
|
+
* handle checkbox clicked
|
|
273
|
+
*/
|
|
274
|
+
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
275
|
+
/**
|
|
276
|
+
* custom classes
|
|
277
|
+
*/
|
|
278
|
+
customClasses?: string;
|
|
279
|
+
/**
|
|
280
|
+
* custom styles
|
|
281
|
+
*/
|
|
282
|
+
customStyles?: React.CSSProperties;
|
|
283
|
+
/**
|
|
284
|
+
* error message
|
|
285
|
+
*/
|
|
286
|
+
errorMsg?: string;
|
|
287
|
+
/**
|
|
288
|
+
* Checkbox checked
|
|
289
|
+
*/
|
|
290
|
+
checked?: boolean;
|
|
291
|
+
/**
|
|
292
|
+
* Checkbox indeterminate state
|
|
293
|
+
*/
|
|
294
|
+
indeterminate?: boolean;
|
|
295
|
+
/**
|
|
296
|
+
* Checkbox disabled
|
|
297
|
+
*/
|
|
298
|
+
disabled?: boolean;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
declare interface CheckboxProps_2 {
|
|
302
|
+
label: string;
|
|
303
|
+
checked?: boolean;
|
|
304
|
+
indeterminate?: boolean;
|
|
305
|
+
disabled?: boolean;
|
|
306
|
+
onChange: (checked: boolean) => void;
|
|
307
|
+
className?: string;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
export declare function CheckboxV2({ label, checked, indeterminate, disabled, onChange, className, }: CheckboxProps_2): JSX_2.Element;
|
|
311
|
+
|
|
312
|
+
export declare const clipboard: (text?: string, showToast?: boolean) => Promise<void>;
|
|
313
|
+
|
|
314
|
+
declare interface CollapseProps {
|
|
315
|
+
eventKey: string;
|
|
316
|
+
children: React.ReactNode;
|
|
317
|
+
customClasses?: string;
|
|
318
|
+
customStyle?: React.CSSProperties;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
export declare function ColorPicker({ name, label, errorMsg, required, onChange, defaultColor, }: ColorPickerProps): JSX_2.Element;
|
|
322
|
+
|
|
323
|
+
declare interface ColorPickerProps {
|
|
324
|
+
name: string;
|
|
325
|
+
label?: string;
|
|
326
|
+
errorMsg?: string | false;
|
|
327
|
+
required?: boolean;
|
|
328
|
+
onChange: (color: string) => void;
|
|
329
|
+
defaultColor?: string;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
declare interface CommonOptions {
|
|
333
|
+
/**
|
|
334
|
+
* Set the delay in ms to close the toast automatically.
|
|
335
|
+
* Use `false` to prevent the toast from closing.
|
|
336
|
+
* `Default: 5000`
|
|
337
|
+
*/
|
|
338
|
+
autoClose?: number | false;
|
|
339
|
+
/**
|
|
340
|
+
* Set the default position to use.
|
|
341
|
+
* `One of: 'top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-center', 'bottom-left'`
|
|
342
|
+
* `Default: 'top-right'`
|
|
343
|
+
*/
|
|
344
|
+
position?: ToastPosition;
|
|
345
|
+
/**
|
|
346
|
+
* Set id to handle multiple container
|
|
347
|
+
*/
|
|
348
|
+
containerId?: Id;
|
|
349
|
+
/**
|
|
350
|
+
* Fired when clicking inside toaster
|
|
351
|
+
*/
|
|
352
|
+
onClick?: (event: React_2.MouseEvent) => void;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
/**
|
|
356
|
+
* Converts a timestamp to a formatted time string.
|
|
357
|
+
*
|
|
358
|
+
* @param {number} timestamp - The timestamp to convert (in milliseconds).
|
|
359
|
+
* @param {TIME_PICKER_FORMAT} [timeFormat=TIME_PICKER_FORMAT.STANDARD] - The desired time format (12-hour or 24-hour).
|
|
360
|
+
* @param {boolean} [enableSeconds=false] - Whether to include seconds in the formatted time string.
|
|
361
|
+
* @returns {string} - The formatted time string.
|
|
362
|
+
*
|
|
363
|
+
* @example
|
|
364
|
+
* // Returns "02:30 PM"
|
|
365
|
+
* convertFromTimestamp(1620000000000, TIME_PICKER_FORMAT.STANDARD);
|
|
366
|
+
*
|
|
367
|
+
* @example
|
|
368
|
+
* // Returns "14:30:45"
|
|
369
|
+
* convertFromTimestamp(1620000000000, TIME_PICKER_FORMAT.MILITARY, true);
|
|
370
|
+
*/
|
|
371
|
+
export declare const convertFromTimestamp: (timestamp: number, timeFormat?: TIME_PICKER_FORMAT, enableSeconds?: boolean) => string;
|
|
372
|
+
|
|
373
|
+
/**
|
|
374
|
+
* Converts a time string (e.g., "12:30 PM") to a timestamp
|
|
375
|
+
* @param {string} timeString - The time string to convert
|
|
376
|
+
* @returns {number} - The timestamp in milliseconds
|
|
377
|
+
*/
|
|
378
|
+
export declare const convertToTimestamp: (timeString: string) => number;
|
|
379
|
+
|
|
380
|
+
export declare const countRegex: RegExp;
|
|
381
|
+
|
|
382
|
+
export declare function CreatableSelect({ options, onChange, name, id, className, placeholder, selectStyles, defaultValue, formatGroupLabel, customContainerStyles, menuPlacement, errorMsg, extraprops, isDisabled, isSearchable, isMulti, isClearable, createNewOption, refetchOptions, }: CreatableSelectProps): JSX_2.Element;
|
|
383
|
+
|
|
384
|
+
declare interface CreatableSelectProps {
|
|
385
|
+
/**
|
|
386
|
+
* The options to be displayed in the select
|
|
387
|
+
* should atleast have {label: string, value: string}
|
|
388
|
+
*/
|
|
389
|
+
options: Array<{
|
|
390
|
+
label: string | '';
|
|
391
|
+
value: string | '';
|
|
392
|
+
profileImgUrl?: string;
|
|
393
|
+
}> | any;
|
|
394
|
+
/**
|
|
395
|
+
* Handle change events on the select
|
|
396
|
+
*/
|
|
397
|
+
onChange: (newValue: string | string[], actionMeta: SelectActionMeta_2) => void;
|
|
398
|
+
/**
|
|
399
|
+
* The name of the select
|
|
400
|
+
*/
|
|
401
|
+
name?: string;
|
|
402
|
+
/**
|
|
403
|
+
* The id of the select
|
|
404
|
+
*/
|
|
405
|
+
id?: string;
|
|
406
|
+
/**
|
|
407
|
+
* The className of the select
|
|
408
|
+
*/
|
|
409
|
+
className?: string;
|
|
410
|
+
/**
|
|
411
|
+
* The placeholder of the select
|
|
412
|
+
*/
|
|
413
|
+
placeholder?: string;
|
|
414
|
+
/**
|
|
415
|
+
* Whether the select is searchable
|
|
416
|
+
*/
|
|
417
|
+
isSearchable?: boolean;
|
|
418
|
+
/**
|
|
419
|
+
* Whether multiple selection is possible
|
|
420
|
+
*/
|
|
421
|
+
isMulti?: boolean;
|
|
422
|
+
/**
|
|
423
|
+
* Whether the select is clearable
|
|
424
|
+
*/
|
|
425
|
+
isClearable?: boolean;
|
|
426
|
+
/**
|
|
427
|
+
* The styles of the select component
|
|
428
|
+
*/
|
|
429
|
+
selectStyles?: StylesConfig<any>;
|
|
430
|
+
/**
|
|
431
|
+
* The default value of the select
|
|
432
|
+
*/
|
|
433
|
+
defaultValue?: {
|
|
434
|
+
label: string;
|
|
435
|
+
value: string;
|
|
436
|
+
profileImgUrl?: string;
|
|
437
|
+
};
|
|
438
|
+
/**
|
|
439
|
+
* Formats group labels in the menu as React components
|
|
440
|
+
*/
|
|
441
|
+
formatGroupLabel?: (data: any) => React_2.ReactNode;
|
|
442
|
+
/**
|
|
443
|
+
* The custom styles of the select container
|
|
444
|
+
*/
|
|
445
|
+
customContainerStyles?: React_2.CSSProperties;
|
|
446
|
+
/**
|
|
447
|
+
* Whether the select is disabled
|
|
448
|
+
*/
|
|
449
|
+
isDisabled?: boolean;
|
|
450
|
+
/**
|
|
451
|
+
* Default placement of the menu in relation to the control. 'auto' will flip when there isn't enough space below the control.
|
|
452
|
+
*/
|
|
453
|
+
menuPlacement?: MenuPlacement;
|
|
454
|
+
/**
|
|
455
|
+
* The error message to be displayed
|
|
456
|
+
*/
|
|
457
|
+
errorMsg?: string | false;
|
|
458
|
+
/**
|
|
459
|
+
* extra props to pass for select component
|
|
460
|
+
*/
|
|
461
|
+
extraprops?: any;
|
|
462
|
+
/**
|
|
463
|
+
* create new option api mutate function
|
|
464
|
+
*/
|
|
465
|
+
createNewOption: (value: string | string[]) => Promise<OptionType | Array<OptionType>>;
|
|
466
|
+
/**
|
|
467
|
+
* refetch options to show options in dropdown
|
|
468
|
+
*/
|
|
469
|
+
refetchOptions?: Function;
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
/**
|
|
473
|
+
* A custom select component based on react-select.
|
|
474
|
+
* @param props - The properties for the SelectV2 component:
|
|
475
|
+
* - `options` (Array<Option>): An array of options to be displayed in the dropdown. Each option can include a label, value, and optional profile image or icon.
|
|
476
|
+
* - `mainContainerClassName` (string, optional): A custom CSS class name to apply to the main container for additional styling.
|
|
477
|
+
* - `variant` (SELECT_VARIANT, optional): Defines the variant of the select component (e.g., 'default', 'users', 'checkbox', 'tags') to control the styling and behavior.
|
|
478
|
+
* - `showDivider` (boolean, optional): Defines whether to add divider between option list.
|
|
479
|
+
* - `errorMsg` (string, optional): An error message to display below the select component for validation purposes.
|
|
480
|
+
* - `onChange` (function): A callback function that is triggered when the selected value(s) change. It receives the selected value(s) and action meta information.
|
|
481
|
+
* - `customStyles` (StylesConfig<any>): custom styles for react select. it will override default styles
|
|
482
|
+
* - `onCreateOption` (Promise<void> | void): function to create new option which is not in the list
|
|
483
|
+
* @returns The SelectV2 component.
|
|
484
|
+
*/
|
|
485
|
+
export declare function CreatableSelectV2(props: CreatableSelectV2Props): JSX_2.Element;
|
|
486
|
+
|
|
487
|
+
export declare interface CreatableSelectV2Props extends SelectV2Props {
|
|
488
|
+
onCreateOption: (value: string) => Promise<void> | void;
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
declare type CustomColCheckedState = {
|
|
492
|
+
id: string;
|
|
493
|
+
label: string;
|
|
494
|
+
checked: boolean;
|
|
495
|
+
group?: string;
|
|
496
|
+
};
|
|
497
|
+
|
|
498
|
+
declare type DateConfig = Partial<DateRangePickerProps>;
|
|
499
|
+
|
|
500
|
+
export declare function DatePicker({ value, onChange, mode, variant, displayDateFormat, errorMsg, disableDatepicker, disabled, buttonVariant, customContainerStyles, popoverConfig, isError, showOutsideDays, trigger, ...props }: DatePickerProps): JSX_2.Element;
|
|
501
|
+
|
|
502
|
+
declare interface DatePickerProps extends PropsSingle {
|
|
503
|
+
value?: Date | string;
|
|
504
|
+
onChange: (value?: Date | string) => void;
|
|
505
|
+
mode: 'single';
|
|
506
|
+
variant?: 'default' | 'form';
|
|
507
|
+
/**
|
|
508
|
+
* @default 'do LLL y'
|
|
509
|
+
* 'do LLL y' => 1st Jan 2021
|
|
510
|
+
* 'dd LLL y' => 01 Jan 2021
|
|
511
|
+
* 'yyyy-MM-dd' => 2021-01-01
|
|
512
|
+
* 'dd/MM/yyyy' => 01/01/2021
|
|
513
|
+
*/
|
|
514
|
+
displayDateFormat?: 'do LLL y' | 'dd LLL y' | 'yyyy-MM-dd' | 'dd/MM/yyyy';
|
|
515
|
+
disableDatepicker?: boolean;
|
|
516
|
+
errorMsg?: string;
|
|
517
|
+
isError?: boolean;
|
|
518
|
+
buttonVariant?: BUTTON_VARIANT;
|
|
519
|
+
customContainerStyles?: React_2.CSSProperties;
|
|
520
|
+
popoverConfig?: {
|
|
521
|
+
placement?: Placement_2;
|
|
522
|
+
};
|
|
523
|
+
showOutsideDays?: boolean;
|
|
524
|
+
disabled?: Matcher | Matcher[];
|
|
525
|
+
trigger?: React_2.ReactNode;
|
|
526
|
+
}
|
|
527
|
+
|
|
528
|
+
export declare function DateRangePicker({ value, onChange, mode, datePickerClassNames, showQuickSelect, disabled, customDisable, disableDatepicker, disableWeekends, showOutsideDays, errorMsg, customInputContentStyles, customClasses, size, onReset, placeholder, trigger, ...props }: DateRangePickerProps): JSX_2.Element;
|
|
529
|
+
|
|
530
|
+
declare interface DateRangePickerProps extends PropsRange {
|
|
531
|
+
value: DateRange;
|
|
532
|
+
onChange: (value: DateRange) => void;
|
|
533
|
+
mode: 'range';
|
|
534
|
+
showQuickSelect?: boolean;
|
|
535
|
+
disabled?: Matcher | Matcher[] | undefined;
|
|
536
|
+
customDisable?: Matcher | Matcher[];
|
|
537
|
+
disableWeekends?: boolean;
|
|
538
|
+
datePickerClassNames?: ClassNames;
|
|
539
|
+
disableDatepicker?: boolean;
|
|
540
|
+
errorMsg?: string;
|
|
541
|
+
placement?: Placement;
|
|
542
|
+
customInputContentStyles?: React_2.CSSProperties;
|
|
543
|
+
showOutsideDays?: boolean;
|
|
544
|
+
onReset?: () => void;
|
|
545
|
+
customClasses?: {
|
|
546
|
+
contentContainer?: string;
|
|
547
|
+
content?: string;
|
|
548
|
+
dateIcon?: string;
|
|
549
|
+
};
|
|
550
|
+
size?: BUTTON_V2_SIZE;
|
|
551
|
+
placeholder?: string;
|
|
552
|
+
trigger?: React_2.ReactNode;
|
|
553
|
+
}
|
|
554
|
+
|
|
555
|
+
/**
|
|
556
|
+
* The default selected time object used to initialize or reset the time picker state.
|
|
557
|
+
*
|
|
558
|
+
* @constant
|
|
559
|
+
* @type {SelectedTime}
|
|
560
|
+
* @property {string} hour - The selected hour, initialized as an empty string.
|
|
561
|
+
* @property {string} minute - The selected minute, initialized as an empty string.
|
|
562
|
+
* @property {string} second - The selected second, initialized as an empty string.
|
|
563
|
+
* @property {PERIOD} period - The selected period (AM/PM), initialized as an empty string casted to PERIOD type.
|
|
564
|
+
*/
|
|
565
|
+
export declare const DEFAULT_SELECTED_TIME: SelectedTime;
|
|
566
|
+
|
|
567
|
+
export declare type DialogFooterButtons = Array<Omit<ButtonV2Props, 'children'> & {
|
|
568
|
+
btnText: string;
|
|
569
|
+
isLoading?: boolean;
|
|
570
|
+
loadingText?: string;
|
|
571
|
+
}>;
|
|
572
|
+
|
|
573
|
+
export declare enum DOCS_TYPE {
|
|
574
|
+
USER_DOCS = "user_document",
|
|
575
|
+
COMPANY_DOCS = "company_document",
|
|
576
|
+
IDENTIFICATION_DOC = "identification_document",
|
|
577
|
+
COMMENT_DOCS = "comment_document",
|
|
578
|
+
ORDER_DOC = "order_document",
|
|
579
|
+
SOFTWARE_DOCS = "software_document",
|
|
580
|
+
SOFTWARE_LOGO = "software_logo",
|
|
581
|
+
INVENTORY_DOCS = "inventory_document",
|
|
582
|
+
INVENTORY_DOCS_EQUIPMENT = "equipment",
|
|
583
|
+
INVENTORY_DOCS_FINANCE = "finance",
|
|
584
|
+
USER_OFFBOARDING_DOCS = "user_offboarding_document",
|
|
585
|
+
LEAVE_DOCS = "leave_document",
|
|
586
|
+
INTEGRATION_DOCS = "integration_document",
|
|
587
|
+
OFFBOARDING_PHOTO_COLLECTION = "offboarding_photo_collection"
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
export declare function Drawer({ isOpen, onClose, children, title, subTitle, customHeader, customFooter, size, showBackdrop, showHeader, showFooter, buttons, footerAddon, headerClassName, contentClassName, footerClassName, showHeaderBorder, drawerPosition, customContainerStyles, }: DrawerProps): JSX_2.Element;
|
|
591
|
+
|
|
592
|
+
declare interface DrawerProps {
|
|
593
|
+
/**
|
|
594
|
+
* Drawer footer className
|
|
595
|
+
*/
|
|
596
|
+
footerClassName?: string;
|
|
597
|
+
/**
|
|
598
|
+
* Drawer header className
|
|
599
|
+
*/
|
|
600
|
+
headerClassName?: string;
|
|
601
|
+
/**
|
|
602
|
+
* Drawer content className
|
|
603
|
+
*/
|
|
604
|
+
contentClassName?: string;
|
|
605
|
+
/**
|
|
606
|
+
* Drawer is open or not
|
|
607
|
+
*/
|
|
608
|
+
isOpen: boolean;
|
|
609
|
+
/**
|
|
610
|
+
* Callback function when drawer is closed
|
|
611
|
+
*/
|
|
612
|
+
onClose: () => void;
|
|
613
|
+
/**
|
|
614
|
+
* Drawer content
|
|
615
|
+
*/
|
|
616
|
+
children: React_2.ReactNode;
|
|
617
|
+
/**
|
|
618
|
+
* Drawer title
|
|
619
|
+
*/
|
|
620
|
+
title?: string;
|
|
621
|
+
/**
|
|
622
|
+
* Drawer subTitle
|
|
623
|
+
*/
|
|
624
|
+
subTitle?: string;
|
|
625
|
+
/**
|
|
626
|
+
* Custom drawer header
|
|
627
|
+
*/
|
|
628
|
+
customHeader?: React_2.ReactNode;
|
|
629
|
+
/**
|
|
630
|
+
* Custom drawer footer
|
|
631
|
+
*/
|
|
632
|
+
customFooter?: React_2.ReactNode;
|
|
633
|
+
/**
|
|
634
|
+
* Drawer size
|
|
635
|
+
*/
|
|
636
|
+
size?: 'sm' | 'md' | 'lg' | 'xlg' | 'xxlg';
|
|
637
|
+
/**
|
|
638
|
+
* Show backdrop or not
|
|
639
|
+
*/
|
|
640
|
+
showBackdrop?: boolean;
|
|
641
|
+
/**
|
|
642
|
+
* Show header or not
|
|
643
|
+
*/
|
|
644
|
+
showHeader?: boolean;
|
|
645
|
+
/**
|
|
646
|
+
* Show footer or not
|
|
647
|
+
*/
|
|
648
|
+
showFooter?: boolean;
|
|
649
|
+
/**
|
|
650
|
+
* footer buttons to show
|
|
651
|
+
*/
|
|
652
|
+
buttons?: FooterButtons;
|
|
653
|
+
footerAddon?: React_2.ReactNode;
|
|
654
|
+
/**
|
|
655
|
+
* show header border or not
|
|
656
|
+
*/
|
|
657
|
+
showHeaderBorder?: boolean;
|
|
658
|
+
/**
|
|
659
|
+
* Drawer position
|
|
660
|
+
*/
|
|
661
|
+
drawerPosition?: 'left' | 'right';
|
|
662
|
+
customContainerStyles?: React_2.CSSProperties;
|
|
663
|
+
}
|
|
664
|
+
|
|
665
|
+
declare interface DrawerProps_2 {
|
|
666
|
+
/**
|
|
667
|
+
* Drawer footer className
|
|
668
|
+
*/
|
|
669
|
+
footerClassName?: string;
|
|
670
|
+
/**
|
|
671
|
+
* Drawer header className
|
|
672
|
+
*/
|
|
673
|
+
headerClassName?: string;
|
|
674
|
+
/**
|
|
675
|
+
* Drawer content className
|
|
676
|
+
*/
|
|
677
|
+
contentClassName?: string;
|
|
678
|
+
/**
|
|
679
|
+
* Drawer is open or not
|
|
680
|
+
*/
|
|
681
|
+
isOpen: boolean;
|
|
682
|
+
/**
|
|
683
|
+
* Callback function when drawer is closed
|
|
684
|
+
*/
|
|
685
|
+
onClose: () => void;
|
|
686
|
+
/**
|
|
687
|
+
* Drawer content
|
|
688
|
+
*/
|
|
689
|
+
children: React_2.ReactNode;
|
|
690
|
+
/**
|
|
691
|
+
* Drawer title
|
|
692
|
+
*/
|
|
693
|
+
title?: string;
|
|
694
|
+
/**
|
|
695
|
+
* Drawer subTitle
|
|
696
|
+
*/
|
|
697
|
+
subTitle?: string;
|
|
698
|
+
/**
|
|
699
|
+
* Custom drawer header
|
|
700
|
+
*/
|
|
701
|
+
customHeader?: React_2.ReactNode;
|
|
702
|
+
/**
|
|
703
|
+
* Custom drawer footer
|
|
704
|
+
*/
|
|
705
|
+
customFooter?: React_2.ReactNode;
|
|
706
|
+
/**
|
|
707
|
+
* Drawer size
|
|
708
|
+
*/
|
|
709
|
+
size?: 'sm' | 'md' | 'lg' | 'xlg' | 'xxlg';
|
|
710
|
+
/**
|
|
711
|
+
* Show backdrop or not
|
|
712
|
+
*/
|
|
713
|
+
showBackdrop?: boolean;
|
|
714
|
+
/**
|
|
715
|
+
* Show header or not
|
|
716
|
+
*/
|
|
717
|
+
showHeader?: boolean;
|
|
718
|
+
/**
|
|
719
|
+
* Show footer or not
|
|
720
|
+
*/
|
|
721
|
+
showFooter?: boolean;
|
|
722
|
+
/**
|
|
723
|
+
* footer buttons to show
|
|
724
|
+
*/
|
|
725
|
+
buttons?: DialogFooterButtons;
|
|
726
|
+
footerAddon?: React_2.ReactNode;
|
|
727
|
+
/**
|
|
728
|
+
* Drawer position
|
|
729
|
+
*/
|
|
730
|
+
drawerPosition?: 'left' | 'right';
|
|
731
|
+
customContainerStyles?: React_2.CSSProperties;
|
|
732
|
+
}
|
|
733
|
+
|
|
734
|
+
export declare function DrawerV2({ isOpen, onClose, children, title, subTitle, customHeader, customFooter, size, showBackdrop, showHeader, showFooter, buttons, footerAddon, headerClassName, contentClassName, footerClassName, drawerPosition, customContainerStyles, }: DrawerProps_2): false | JSX_2.Element;
|
|
735
|
+
|
|
736
|
+
/**
|
|
737
|
+
* Represents an option in a dropdown menu for adornment.
|
|
738
|
+
*
|
|
739
|
+
* @interface DropdownOption
|
|
740
|
+
*
|
|
741
|
+
* @property {string} value - The value associated with the dropdown option.
|
|
742
|
+
* @property {string} label - The label displayed for the dropdown option.
|
|
743
|
+
*
|
|
744
|
+
* @example
|
|
745
|
+
* const options: DropdownOption[] = [
|
|
746
|
+
* { value: '1', label: 'Option 1' },
|
|
747
|
+
* { value: '2', label: 'Option 2' },
|
|
748
|
+
* ];
|
|
749
|
+
*/
|
|
750
|
+
declare interface DropdownOption {
|
|
751
|
+
value: string;
|
|
752
|
+
label: string;
|
|
753
|
+
}
|
|
754
|
+
|
|
755
|
+
/**
|
|
756
|
+
* Props for a dropdown adornment.
|
|
757
|
+
*
|
|
758
|
+
* @interface DropdownProps
|
|
759
|
+
* @extends {BaseInputAdornmentProps}
|
|
760
|
+
*
|
|
761
|
+
* @property {true} isDropdown - Indicates this adornment is a dropdown.
|
|
762
|
+
* @property {DropdownOption[]} options - List of options available in the dropdown.
|
|
763
|
+
* @property {(value: string) => void} onOptionSelect - Callback function when an option is selected.
|
|
764
|
+
* @property {boolean} [hideSearch] - Whether to hide the search bar within the dropdown.
|
|
765
|
+
* @property {boolean} [isLoading] - Whether the dropdown is currently loading options.
|
|
766
|
+
*
|
|
767
|
+
* @example
|
|
768
|
+
* <InputGroupV2>
|
|
769
|
+
* <InputLeftAdornment isDropdown options={options} onOptionSelect={handleSelect}>...</InputLeftAdornment>
|
|
770
|
+
* <InputV2 />
|
|
771
|
+
* </InputGroupV2>
|
|
772
|
+
*/
|
|
773
|
+
declare interface DropdownProps extends BaseInputAdornmentProps {
|
|
774
|
+
isDropdown: true;
|
|
775
|
+
options: DropdownOption[];
|
|
776
|
+
onOptionSelect: (value: string) => void;
|
|
777
|
+
hideSearch?: boolean;
|
|
778
|
+
isLoading?: boolean;
|
|
779
|
+
}
|
|
780
|
+
|
|
781
|
+
/**
|
|
782
|
+
* adapts to parent's width and height
|
|
783
|
+
*/
|
|
784
|
+
export declare function EmptyState({ icon, title, desc, flexDir, btnText, onClick, customSvgClassName, }: EmptyStateProps): JSX_2.Element;
|
|
785
|
+
|
|
786
|
+
declare interface EmptyStateProps {
|
|
787
|
+
icon: string;
|
|
788
|
+
title: string;
|
|
789
|
+
desc?: string;
|
|
790
|
+
flexDir?: 'row' | 'column';
|
|
791
|
+
btnText?: string;
|
|
792
|
+
onClick?: React_2.MouseEventHandler<HTMLButtonElement>;
|
|
793
|
+
customSvgStyles?: React_2.CSSProperties;
|
|
794
|
+
customSvgClassName?: string;
|
|
795
|
+
}
|
|
796
|
+
|
|
797
|
+
export declare function Error404(): JSX_2.Element;
|
|
798
|
+
|
|
799
|
+
export declare function Error500(): JSX_2.Element;
|
|
800
|
+
|
|
801
|
+
export declare function ErrorBoundaryFallback({ error, resetError, isDev, homeRoute, }: ErrorBoundaryFallbackProps): JSX_2.Element;
|
|
802
|
+
|
|
803
|
+
declare interface ErrorBoundaryFallbackProps {
|
|
804
|
+
error: Error;
|
|
805
|
+
resetError: () => void;
|
|
806
|
+
isDev: boolean;
|
|
807
|
+
homeRoute?: string;
|
|
808
|
+
}
|
|
809
|
+
|
|
810
|
+
export declare function ErrorsLayout({ children, showReload, onErrorReset, homeRoute, }: ErrorsLayoutProps): JSX_2.Element;
|
|
811
|
+
|
|
812
|
+
declare interface ErrorsLayoutProps {
|
|
813
|
+
children?: React_2.ReactNode;
|
|
814
|
+
showReload?: boolean;
|
|
815
|
+
onErrorReset?: () => void;
|
|
816
|
+
homeRoute?: string;
|
|
817
|
+
}
|
|
818
|
+
|
|
819
|
+
export declare function ErrorsPage({ isOnly500, homeRoute }: ErrorsPageProps): JSX_2.Element;
|
|
820
|
+
|
|
821
|
+
declare interface ErrorsPageProps {
|
|
822
|
+
isOnly500?: boolean;
|
|
823
|
+
homeRoute?: string;
|
|
824
|
+
}
|
|
825
|
+
|
|
826
|
+
declare enum FILTER_TYPE {
|
|
827
|
+
DATE_RANGE = "date_range",
|
|
828
|
+
MENU = "menu",
|
|
829
|
+
TAB = "tab"
|
|
830
|
+
}
|
|
831
|
+
|
|
832
|
+
/**
|
|
833
|
+
* @param filters comes from an api, must follow the type definition strictly
|
|
834
|
+
* @param isLoading is fetching from api
|
|
835
|
+
* @param isError api threw error
|
|
836
|
+
* @param filterDispatch must be of @type (value) => dispatch({type,payload})
|
|
837
|
+
* this is used to sync the internal table filter state with the external zustand store of the consumer
|
|
838
|
+
* @param filterReset same type as above but is used to reset all the filters
|
|
839
|
+
*
|
|
840
|
+
*
|
|
841
|
+
*/
|
|
842
|
+
declare type FilterConfig = {
|
|
843
|
+
filters: FilterOptions[];
|
|
844
|
+
isLoading: boolean;
|
|
845
|
+
isError: boolean;
|
|
846
|
+
filterDispatch: (value: any) => void;
|
|
847
|
+
filterReset: (value: any) => void;
|
|
848
|
+
};
|
|
849
|
+
|
|
850
|
+
/**
|
|
851
|
+
* @param filters comes from an api, must follow the type definition strictly
|
|
852
|
+
* @param isLoading is fetching from api
|
|
853
|
+
* @param isError api threw error
|
|
854
|
+
* @param filterDispatch must be of @type (value) => dispatch({type,payload})
|
|
855
|
+
* this is used to sync the internal table filter state with the external zustand store of the consumer
|
|
856
|
+
* @param filterReset same type as above but is used to reset all the filters
|
|
857
|
+
* @param headerFilterIds this is used for the filters which should be in the table header itself, and not inside the filters drawer
|
|
858
|
+
*
|
|
859
|
+
*
|
|
860
|
+
*/
|
|
861
|
+
declare type FilterConfig_2 = {
|
|
862
|
+
initialFilters?: {
|
|
863
|
+
[key: string]: string | string[];
|
|
864
|
+
};
|
|
865
|
+
filters?: TableFilters;
|
|
866
|
+
isLoading: boolean;
|
|
867
|
+
isError: boolean;
|
|
868
|
+
filterDispatch: (value: any) => void;
|
|
869
|
+
filterReset: (value: any) => void;
|
|
870
|
+
headerFilterIds?: string[];
|
|
871
|
+
};
|
|
872
|
+
|
|
873
|
+
declare type FilterOptions = {
|
|
874
|
+
id: string;
|
|
875
|
+
name: string;
|
|
876
|
+
key: string;
|
|
877
|
+
options: {
|
|
878
|
+
name: string;
|
|
879
|
+
value: string;
|
|
880
|
+
country_code?: string;
|
|
881
|
+
customName?: string;
|
|
882
|
+
}[];
|
|
883
|
+
config?: {
|
|
884
|
+
hideSearch?: boolean;
|
|
885
|
+
placeholder?: string;
|
|
886
|
+
};
|
|
887
|
+
};
|
|
888
|
+
|
|
889
|
+
declare type FilterOptions_2 = {
|
|
890
|
+
id: string;
|
|
891
|
+
name: string;
|
|
892
|
+
key: string;
|
|
893
|
+
type?: FILTER_TYPE;
|
|
894
|
+
options: {
|
|
895
|
+
name: string;
|
|
896
|
+
value: string;
|
|
897
|
+
country_code?: string;
|
|
898
|
+
customName?: string;
|
|
899
|
+
}[];
|
|
900
|
+
config?: MenuConfig | DateConfig;
|
|
901
|
+
};
|
|
902
|
+
|
|
903
|
+
declare type FooterButtons = Array<{
|
|
904
|
+
variant?: BUTTON_VARIANT | BUTTON_V2_VARIANT;
|
|
905
|
+
onClick: () => void;
|
|
906
|
+
btnText: string;
|
|
907
|
+
btnType?: BUTTON_V2_TYPE | 'submit';
|
|
908
|
+
btnSize?: BUTTON_V2_SIZE;
|
|
909
|
+
disabled?: boolean;
|
|
910
|
+
isLoading?: boolean;
|
|
911
|
+
loadingText?: string;
|
|
912
|
+
icon?: string;
|
|
913
|
+
}>;
|
|
914
|
+
|
|
915
|
+
export declare const formatDate: (value: string) => string;
|
|
916
|
+
|
|
917
|
+
/**
|
|
918
|
+
* Computes and returns colors based on a given word.
|
|
919
|
+
*
|
|
920
|
+
* @param word - The word to derive colors from.
|
|
921
|
+
* @returns An object containing the darker and lighter color values.
|
|
922
|
+
*/
|
|
923
|
+
export declare const getColorsFromWord: (word: string) => {
|
|
924
|
+
darkerColor: string;
|
|
925
|
+
lighterColor: string;
|
|
926
|
+
};
|
|
927
|
+
|
|
928
|
+
export declare const getDefaultFormattedDateTime: (date: string) => string;
|
|
929
|
+
|
|
930
|
+
/**
|
|
931
|
+
* Formats a given value (hours, minutes, seconds) based on the time format (12-hour or 24-hour)
|
|
932
|
+
* @param {number} value - The value to format
|
|
933
|
+
* @param {TIME_PICKER_FORMAT} format - The time format (12-hour or 24-hour)
|
|
934
|
+
* @param {boolean} [isHour=false] - Whether the value is an hour (affects formatting logic)
|
|
935
|
+
* @returns {string} - The formatted time value
|
|
936
|
+
*/
|
|
937
|
+
export declare const getFormattedTime: (value: number, format: TIME_PICKER_FORMAT, isHour?: boolean) => string;
|
|
938
|
+
|
|
939
|
+
export declare const getInitials: (name: string) => string;
|
|
940
|
+
|
|
941
|
+
export declare const getProductIconFromType: (type?: string) => string;
|
|
942
|
+
|
|
943
|
+
export declare const getUsername: (user?: any) => any;
|
|
944
|
+
|
|
945
|
+
export declare interface GroupActionProps {
|
|
946
|
+
children: React_2.ReactNode;
|
|
947
|
+
variant?: BUTTON_V2_VARIANT;
|
|
948
|
+
disabled?: boolean;
|
|
949
|
+
menuItems: MenuItemV2[];
|
|
950
|
+
customData?: any;
|
|
951
|
+
size?: BUTTON_V2_SIZE;
|
|
952
|
+
positionerProps?: PositioningOptions;
|
|
953
|
+
isTable?: boolean;
|
|
954
|
+
customStyles?: {
|
|
955
|
+
customMenuStyles?: React_2.CSSProperties;
|
|
956
|
+
customButtonStyles?: React_2.CSSProperties;
|
|
957
|
+
};
|
|
958
|
+
isCustomTrigger?: boolean;
|
|
959
|
+
isSingleBtnTrigger?: boolean;
|
|
960
|
+
hideDivider?: boolean;
|
|
961
|
+
onClick?: any;
|
|
962
|
+
}
|
|
963
|
+
|
|
964
|
+
declare interface HeaderProps {
|
|
965
|
+
eventKey: string;
|
|
966
|
+
children: React.ReactNode;
|
|
967
|
+
customClasses?: string;
|
|
968
|
+
customStyle?: React.CSSProperties;
|
|
969
|
+
}
|
|
970
|
+
|
|
971
|
+
export declare type HexColor = `#${string}`;
|
|
972
|
+
|
|
973
|
+
/**
|
|
974
|
+
* Array of hours (1-12) formatted as strings
|
|
975
|
+
* @type {string[]}
|
|
976
|
+
*/
|
|
977
|
+
export declare const hours: string[];
|
|
978
|
+
|
|
979
|
+
declare interface IconBadgeProps extends BaseBadgeProps {
|
|
980
|
+
icon: string;
|
|
981
|
+
customSvgStyles?: React_2.CSSProperties;
|
|
982
|
+
}
|
|
983
|
+
|
|
984
|
+
declare interface IconButtonV2TypeProps extends BaseButtonProps {
|
|
985
|
+
type: BUTTON_V2_TYPE.ICON_LEFT | BUTTON_V2_TYPE.ICON_RIGHT;
|
|
986
|
+
icon: React_2.ReactNode;
|
|
987
|
+
children: React_2.ReactNode;
|
|
988
|
+
}
|
|
989
|
+
|
|
990
|
+
declare interface IconOnlyButtonV2TypeProps extends BaseButtonProps {
|
|
991
|
+
type: BUTTON_V2_TYPE.ICON_ONLY;
|
|
992
|
+
icon: React_2.ReactNode;
|
|
993
|
+
children?: React_2.ReactNode;
|
|
994
|
+
}
|
|
995
|
+
|
|
996
|
+
declare interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
|
|
997
|
+
src: string;
|
|
998
|
+
alt: string;
|
|
999
|
+
}
|
|
1000
|
+
|
|
1001
|
+
export declare function Input({ customClasses, customStyles, name, id, value, onChange, restprops, cols, errorMsg, disabled, rows, type, placeholder, onBlur, }: InputProps): JSX_2.Element;
|
|
1002
|
+
|
|
1003
|
+
export declare namespace Input {
|
|
1004
|
+
var displayName: Inputs;
|
|
1005
|
+
var id: Inputs;
|
|
1006
|
+
}
|
|
1007
|
+
|
|
1008
|
+
/**
|
|
1009
|
+
* Enum representing the different components within the input system.
|
|
1010
|
+
* This can be used to identify and manage the different subcomponents
|
|
1011
|
+
* of a more complex and nested input structure.
|
|
1012
|
+
*/
|
|
1013
|
+
declare enum INPUT_COMPONENTS {
|
|
1014
|
+
INPUT = "input",
|
|
1015
|
+
TEXTAREA = "textarea",
|
|
1016
|
+
CONTROL = "control",
|
|
1017
|
+
LABEL = "label",
|
|
1018
|
+
GROUP = "group",
|
|
1019
|
+
LEFT_ICON = "leftIcon",
|
|
1020
|
+
RIGHT_ICON = "rightIcon",
|
|
1021
|
+
LEFT_ADORNMENT = "leftAdornment",
|
|
1022
|
+
RIGHT_ADORNMENT = "rightAdornment",
|
|
1023
|
+
COUNT = "count",
|
|
1024
|
+
NUMBER = "number",
|
|
1025
|
+
NUMBER_ADORNMENT = "numberAdornment"
|
|
1026
|
+
}
|
|
1027
|
+
|
|
1028
|
+
/**
|
|
1029
|
+
* Type representing the possible props for input adornments, which can either be a dropdown or non actionable.
|
|
1030
|
+
*/
|
|
1031
|
+
declare type InputAdornmentProps = DropdownProps | NonDropdownProps;
|
|
1032
|
+
|
|
1033
|
+
export declare function InputContainer({ children, customClassName, customStyles, size, }: InputContainerProps): JSX_2.Element;
|
|
1034
|
+
|
|
1035
|
+
export declare namespace InputContainer {
|
|
1036
|
+
var displayName: Inputs;
|
|
1037
|
+
var id: Inputs;
|
|
1038
|
+
}
|
|
1039
|
+
|
|
1040
|
+
declare interface InputContainerProps {
|
|
1041
|
+
/**
|
|
1042
|
+
* Children of the input container
|
|
1043
|
+
*/
|
|
1044
|
+
children: React.ReactNode;
|
|
1045
|
+
/**
|
|
1046
|
+
* Size of the input container
|
|
1047
|
+
*/
|
|
1048
|
+
size?: 'sm' | 'md' | 'adapt';
|
|
1049
|
+
/**
|
|
1050
|
+
* Custom classes to be applied to the input container
|
|
1051
|
+
*/
|
|
1052
|
+
customClassName?: string;
|
|
1053
|
+
/**
|
|
1054
|
+
* Custom styles to be applied to the input container
|
|
1055
|
+
*/
|
|
1056
|
+
customStyles?: React.CSSProperties;
|
|
1057
|
+
}
|
|
1058
|
+
|
|
1059
|
+
/**
|
|
1060
|
+
* Props for the InputControl component, used as a wrapper to group multiple input-related components.
|
|
1061
|
+
*
|
|
1062
|
+
* @interface InputControlPropsV2
|
|
1063
|
+
* @extends {React.HTMLAttributes<HTMLDivElement>}
|
|
1064
|
+
*
|
|
1065
|
+
* @property {React.ReactNode} children - The elements that will be rendered inside the control.
|
|
1066
|
+
*
|
|
1067
|
+
* @example
|
|
1068
|
+
* <InputControlV2>
|
|
1069
|
+
* <LabelV2>Username</LabelV2>
|
|
1070
|
+
* <InputV2
|
|
1071
|
+
* placeholder="Enter"
|
|
1072
|
+
* errorMsg="This field is required"
|
|
1073
|
+
* />
|
|
1074
|
+
* </InputControlV2>
|
|
1075
|
+
*/
|
|
1076
|
+
declare interface InputControlPropsV2 extends React.HTMLAttributes<HTMLDivElement> {
|
|
1077
|
+
children: React.ReactNode;
|
|
1078
|
+
}
|
|
1079
|
+
|
|
1080
|
+
/**
|
|
1081
|
+
* InputControlV2 is a wrapper component that provides a container for form control elements.
|
|
1082
|
+
* It applies consistent styling to its children, typically used for grouping form elements like
|
|
1083
|
+
* labels, inputs, and additional controls.
|
|
1084
|
+
*
|
|
1085
|
+
* @param {InputControlPropsV2} props - The properties for the InputControlV2 component.
|
|
1086
|
+
* @param {string} [props.className=''] - Additional class names to apply to the control container.
|
|
1087
|
+
* @param {React.ReactNode} props.children - The content to be rendered within the control container.
|
|
1088
|
+
* @param {React.HTMLAttributes<HTMLDivElement>} [props] - Additional HTML attributes to apply to the control container.
|
|
1089
|
+
*
|
|
1090
|
+
* @returns {JSX.Element} The rendered control container with the specified children.
|
|
1091
|
+
*
|
|
1092
|
+
* @example
|
|
1093
|
+
* <InputControlV2>
|
|
1094
|
+
* <LabelV2>Username</LabelV2>
|
|
1095
|
+
* <InputV2
|
|
1096
|
+
* placeholder="Enter"
|
|
1097
|
+
* errorMsg="This field is required"
|
|
1098
|
+
* />
|
|
1099
|
+
* </InputControlV2>
|
|
1100
|
+
*/
|
|
1101
|
+
export declare function InputControlV2({ className, children, ...props }: InputControlPropsV2): JSX_2.Element;
|
|
1102
|
+
|
|
1103
|
+
export declare namespace InputControlV2 {
|
|
1104
|
+
var displayName: INPUT_COMPONENTS;
|
|
1105
|
+
}
|
|
1106
|
+
|
|
1107
|
+
/**
|
|
1108
|
+
* InputCount is a specialized input component that allows users to increment
|
|
1109
|
+
* or decrement a numeric value within a specified range. It includes buttons
|
|
1110
|
+
* for incrementing and decrementing the value, and supports keyboard input for
|
|
1111
|
+
* adjusting the count.
|
|
1112
|
+
*
|
|
1113
|
+
* @param {InputCountProps} props - The properties for the InputCount component.
|
|
1114
|
+
* @param {(value: number) => void} props.onCountChange - Callback function called when the count value changes.
|
|
1115
|
+
* @param {number} [props.min=-Infinity] - The minimum value that the count can be set to.
|
|
1116
|
+
* @param {number} [props.max=Infinity] - The maximum value that the count can be set to.
|
|
1117
|
+
* @param {number} [props.count=0] - The current count value.
|
|
1118
|
+
* @param {string} [props.countContainerClassName] - Additional class names to apply to the container.
|
|
1119
|
+
* @param {boolean} [props.disabled] - Whether the input is disabled.
|
|
1120
|
+
* @param {React.InputHTMLAttributes<HTMLInputElement>} [props] - Additional HTML input attributes.
|
|
1121
|
+
*
|
|
1122
|
+
* @returns {JSX.Element} The rendered InputCount component.
|
|
1123
|
+
*
|
|
1124
|
+
* @example
|
|
1125
|
+
* <InputCount
|
|
1126
|
+
* onCountChange={(value) => console.log(value)}
|
|
1127
|
+
* min={0}
|
|
1128
|
+
* max={10}
|
|
1129
|
+
* count={5}
|
|
1130
|
+
* disabled={false}
|
|
1131
|
+
* />
|
|
1132
|
+
*/
|
|
1133
|
+
export declare function InputCount({ onCountChange, min, max, count, countContainerClassName, disabled, ...props }: InputCountProps): JSX_2.Element;
|
|
1134
|
+
|
|
1135
|
+
export declare namespace InputCount {
|
|
1136
|
+
var displayName: INPUT_COMPONENTS;
|
|
1137
|
+
}
|
|
1138
|
+
|
|
1139
|
+
/**
|
|
1140
|
+
* Props for an input field which can be use as counter i.e. product count.
|
|
1141
|
+
*
|
|
1142
|
+
* @interface InputCountProps
|
|
1143
|
+
* @extends {InputV2Props}
|
|
1144
|
+
*
|
|
1145
|
+
* @property {(value: number) => void} onCountChange - Callback when the count changes.
|
|
1146
|
+
* @property {never} [onChange] - `onChange` is disabled for this component; use `onCountChange`.
|
|
1147
|
+
* @property {number} [min] - Minimum allowable value for the count (by default Infinity).
|
|
1148
|
+
* @property {number} [max] - Maximum allowable value for the count (by default Infinity).
|
|
1149
|
+
* @property {number} [count] - Current count value (enable for two way binding).
|
|
1150
|
+
* @property {string} [countContainerClassName] - Additional className for the count container.
|
|
1151
|
+
*
|
|
1152
|
+
* @example
|
|
1153
|
+
* <InputCount onCountChange={(value) => ...} count={10} min={0} max={100} />
|
|
1154
|
+
*/
|
|
1155
|
+
declare interface InputCountProps extends InputV2Props {
|
|
1156
|
+
onCountChange: (value: number) => void;
|
|
1157
|
+
onChange?: never;
|
|
1158
|
+
min?: number;
|
|
1159
|
+
max?: number;
|
|
1160
|
+
count?: number;
|
|
1161
|
+
countContainerClassName?: string;
|
|
1162
|
+
}
|
|
1163
|
+
|
|
1164
|
+
declare interface InputDirectionAddonProps {
|
|
1165
|
+
/**
|
|
1166
|
+
* Children of the input addon
|
|
1167
|
+
*/
|
|
1168
|
+
children: React_2.ReactNode;
|
|
1169
|
+
/**
|
|
1170
|
+
* to enable dropdown or not
|
|
1171
|
+
*/
|
|
1172
|
+
isDropdown?: boolean;
|
|
1173
|
+
/**
|
|
1174
|
+
* dropdown options
|
|
1175
|
+
*/
|
|
1176
|
+
dropdownOptions?: Array<{
|
|
1177
|
+
label: string;
|
|
1178
|
+
value: string;
|
|
1179
|
+
}>;
|
|
1180
|
+
/**
|
|
1181
|
+
* handle dropdown option click
|
|
1182
|
+
*/
|
|
1183
|
+
handleOptionClick?: (selectedOption: {
|
|
1184
|
+
label: string;
|
|
1185
|
+
value: string;
|
|
1186
|
+
}) => void;
|
|
1187
|
+
/**
|
|
1188
|
+
* show dropdown search
|
|
1189
|
+
*/
|
|
1190
|
+
showDropdownSearch?: boolean;
|
|
1191
|
+
}
|
|
1192
|
+
|
|
1193
|
+
declare interface InputDirectionElementProps {
|
|
1194
|
+
/**
|
|
1195
|
+
* Children of the input element
|
|
1196
|
+
*/
|
|
1197
|
+
children: React.ReactNode;
|
|
1198
|
+
}
|
|
1199
|
+
|
|
1200
|
+
export declare function InputGroup({ children }: InputGroupProps): JSX_2.Element;
|
|
1201
|
+
|
|
1202
|
+
export declare namespace InputGroup {
|
|
1203
|
+
var displayName: Inputs;
|
|
1204
|
+
var id: Inputs;
|
|
1205
|
+
}
|
|
1206
|
+
|
|
1207
|
+
declare interface InputGroupProps {
|
|
1208
|
+
/**
|
|
1209
|
+
* Children of the input group
|
|
1210
|
+
*/
|
|
1211
|
+
children: React_2.ReactNode;
|
|
1212
|
+
}
|
|
1213
|
+
|
|
1214
|
+
/**
|
|
1215
|
+
* Props for the InputGroup component, which groups input icons and adornments elements together.
|
|
1216
|
+
*
|
|
1217
|
+
* @interface InputGroupPropsV2
|
|
1218
|
+
* @extends {React.HTMLAttributes<HTMLDivElement>}
|
|
1219
|
+
*
|
|
1220
|
+
* @property {React.ReactNode} children - The elements to be grouped together.
|
|
1221
|
+
*
|
|
1222
|
+
* @example
|
|
1223
|
+
* <InputGroupV2>
|
|
1224
|
+
* <InputLeftAdornment>+</InputLeftAdornment>
|
|
1225
|
+
* <InputV2 />
|
|
1226
|
+
* <InputRightAdornment>-</InputRightAdornment>
|
|
1227
|
+
* </InputGroupV2>
|
|
1228
|
+
* @example
|
|
1229
|
+
* with label
|
|
1230
|
+
* <InputControlV2>
|
|
1231
|
+
* <LabelV2>Username</LabelV2>
|
|
1232
|
+
* <InputGroupV2>
|
|
1233
|
+
* <InputLeftAdornment>+</InputLeftAdornment>
|
|
1234
|
+
* <InputV2 />
|
|
1235
|
+
* <InputRightAdornment>-</InputRightAdornment>
|
|
1236
|
+
* </InputGroupV2>
|
|
1237
|
+
* </InputControlV2>
|
|
1238
|
+
*/
|
|
1239
|
+
declare interface InputGroupPropsV2 extends React.HTMLAttributes<HTMLDivElement> {
|
|
1240
|
+
children: React.ReactNode;
|
|
1241
|
+
}
|
|
1242
|
+
|
|
1243
|
+
export declare function InputGroupV2({ className, children, ...props }: InputGroupPropsV2): JSX_2.Element;
|
|
1244
|
+
|
|
1245
|
+
export declare namespace InputGroupV2 {
|
|
1246
|
+
var displayName: INPUT_COMPONENTS;
|
|
1247
|
+
}
|
|
1248
|
+
|
|
1249
|
+
/**
|
|
1250
|
+
* Props for the InputIcon component, which is used to display an icon within an input field. It can be left, right or both.
|
|
1251
|
+
*
|
|
1252
|
+
* @interface InputIconProps
|
|
1253
|
+
*
|
|
1254
|
+
* @property {string} icon - The icon to display.
|
|
1255
|
+
* @property {() => void} [onClick] - Optional click handler for the icon.
|
|
1256
|
+
* @property {React.CSSProperties} [iconStyles] - Used for internal styling when grouping it with multiple components. use className for styling icon if clickable.
|
|
1257
|
+
* @property {boolean} [disabled] - Whether the icon should be disabled with input.
|
|
1258
|
+
* @property {string} [className] - Additional classNames for the icon if it is clickable.
|
|
1259
|
+
*
|
|
1260
|
+
* @example
|
|
1261
|
+
* <InputGroupV2>
|
|
1262
|
+
* <InputLeftIcon icon={...} />
|
|
1263
|
+
* <InputV2 />
|
|
1264
|
+
* <InputRightIcon icon={...} />
|
|
1265
|
+
* </InputGroupV2>
|
|
1266
|
+
*/
|
|
1267
|
+
declare interface InputIconProps extends Omit<SVGProps, 'path'> {
|
|
1268
|
+
icon: string;
|
|
1269
|
+
onClick?: () => void;
|
|
1270
|
+
/* Excluded from this release type: iconStyles */
|
|
1271
|
+
disabled?: boolean;
|
|
1272
|
+
className?: string;
|
|
1273
|
+
}
|
|
1274
|
+
|
|
1275
|
+
export declare function InputLabel({ children, customClasses, customStyles, required, htmlFor, restprops, infoText, infoTextTooltipStyles, isDisabled, }: InputLabelProps): JSX_2.Element;
|
|
1276
|
+
|
|
1277
|
+
export declare namespace InputLabel {
|
|
1278
|
+
var displayName: Inputs;
|
|
1279
|
+
var id: Inputs;
|
|
1280
|
+
}
|
|
1281
|
+
|
|
1282
|
+
declare interface InputLabelProps {
|
|
1283
|
+
/**
|
|
1284
|
+
* Children of the input label
|
|
1285
|
+
*/
|
|
1286
|
+
children: React_2.ReactNode;
|
|
1287
|
+
/**
|
|
1288
|
+
* Custom classes to be applied to the input label
|
|
1289
|
+
*/
|
|
1290
|
+
customClasses?: string[] | string;
|
|
1291
|
+
/**
|
|
1292
|
+
* Custom styles to be applied to the input label
|
|
1293
|
+
*/
|
|
1294
|
+
customStyles?: Record<string, string>;
|
|
1295
|
+
/**
|
|
1296
|
+
* Whether the input is required
|
|
1297
|
+
*/
|
|
1298
|
+
required?: boolean;
|
|
1299
|
+
/**
|
|
1300
|
+
* htmlFor attribute of the input label
|
|
1301
|
+
*/
|
|
1302
|
+
htmlFor?: string;
|
|
1303
|
+
/**
|
|
1304
|
+
* Rest props to be applied to the input label
|
|
1305
|
+
*/
|
|
1306
|
+
restprops?: any;
|
|
1307
|
+
/**
|
|
1308
|
+
* info text
|
|
1309
|
+
*/
|
|
1310
|
+
infoText?: string;
|
|
1311
|
+
/**
|
|
1312
|
+
* info text tooltip styles
|
|
1313
|
+
*/
|
|
1314
|
+
infoTextTooltipStyles?: React_2.CSSProperties;
|
|
1315
|
+
/**
|
|
1316
|
+
* Disabled state when component inactive
|
|
1317
|
+
*/
|
|
1318
|
+
isDisabled?: boolean;
|
|
1319
|
+
}
|
|
1320
|
+
|
|
1321
|
+
export declare function InputLeftAddon({ children, isDropdown, dropdownOptions, handleOptionClick, showDropdownSearch, }: InputDirectionAddonProps): JSX_2.Element;
|
|
1322
|
+
|
|
1323
|
+
export declare namespace InputLeftAddon {
|
|
1324
|
+
var displayName: Inputs;
|
|
1325
|
+
var id: Inputs;
|
|
1326
|
+
}
|
|
1327
|
+
|
|
1328
|
+
/**
|
|
1329
|
+
* Component for rendering an adornment on the left side of an input.
|
|
1330
|
+
* It can either display static content or function as a dropdown trigger.
|
|
1331
|
+
*
|
|
1332
|
+
* @param {InputAdornmentProps} props - The properties for the InputLeftAdornment component.
|
|
1333
|
+
* @param {React.ReactNode} props.children - The content to display inside the adornment.
|
|
1334
|
+
* @param {boolean} [props.isLoading=false] - Indicates if the dropdown is in a loading state.
|
|
1335
|
+
* @param {boolean} [props.disabled] - Whether the adornment is disabled.
|
|
1336
|
+
* @param {boolean} [props.isDropdown] - Whether the adornment is a dropdown trigger.
|
|
1337
|
+
* @param {DropdownOption[]} [props.options] - Options to display in the dropdown.
|
|
1338
|
+
* @param {boolean} [props.hideSearch=false] - Whether to hide the search input in the dropdown.
|
|
1339
|
+
* @param {(value: string) => void} [props.onOptionSelect] - Callback for when an option is selected.
|
|
1340
|
+
*
|
|
1341
|
+
* @returns {JSX.Element} The left adornment for an input field.
|
|
1342
|
+
*
|
|
1343
|
+
* @example
|
|
1344
|
+
* <InputGroupV2>
|
|
1345
|
+
* <InputV2 />
|
|
1346
|
+
* <InputLeftAdornment>...</InputLeftAdornment>
|
|
1347
|
+
* </InputGroupV2>
|
|
1348
|
+
*
|
|
1349
|
+
* @example
|
|
1350
|
+
* <InputGroupV2>
|
|
1351
|
+
* <InputLeftAdornment isDropdown options={options} onOptionSelect={handleSelect}>...</InputLeftAdornment>
|
|
1352
|
+
* <InputV2 />
|
|
1353
|
+
* </InputGroupV2>
|
|
1354
|
+
*/
|
|
1355
|
+
export declare function InputLeftAdornment({ children, isLoading, disabled, isDropdown, options, hideSearch, onOptionSelect, }: InputAdornmentProps): JSX_2.Element;
|
|
1356
|
+
|
|
1357
|
+
export declare namespace InputLeftAdornment {
|
|
1358
|
+
var displayName: INPUT_COMPONENTS;
|
|
1359
|
+
}
|
|
1360
|
+
|
|
1361
|
+
export declare function InputLeftElement({ children }: InputDirectionElementProps): JSX_2.Element;
|
|
1362
|
+
|
|
1363
|
+
export declare namespace InputLeftElement {
|
|
1364
|
+
var displayName: Inputs;
|
|
1365
|
+
var id: Inputs;
|
|
1366
|
+
}
|
|
1367
|
+
|
|
1368
|
+
/**
|
|
1369
|
+
* InputLeftIcon renders an icon on the left side of an input field.
|
|
1370
|
+
* If `onClick` is provided, the icon is rendered as a button.
|
|
1371
|
+
*
|
|
1372
|
+
* @param {InputIconProps} props - The properties for the InputLeftIcon component.
|
|
1373
|
+
* @param {string} props.icon - The SVG path for the icon to display.
|
|
1374
|
+
* @param {() => void} [props.onClick] - Optional click handler for the icon. When provided, the icon is rendered as a button.
|
|
1375
|
+
* @param {React.CSSProperties} [props.iconStyles] - Optional inline styles to apply to the icon.
|
|
1376
|
+
* @param {boolean} [props.disabled=false] - Whether the icon or button is disabled.
|
|
1377
|
+
* @param {string} [props.className] - Additional class names to apply to the icon container.
|
|
1378
|
+
*
|
|
1379
|
+
* @returns {JSX.Element} The rendered InputLeftIcon component.
|
|
1380
|
+
*
|
|
1381
|
+
* @example
|
|
1382
|
+
* <InputGroupV2>
|
|
1383
|
+
* <InputLeftIcon icon={...} />
|
|
1384
|
+
* <InputV2 />
|
|
1385
|
+
* </InputGroupV2>
|
|
1386
|
+
*/
|
|
1387
|
+
export declare function InputLeftIcon({ icon, onClick, iconStyles, disabled, className, svgClassName, spanClassName, }: InputIconProps): JSX_2.Element;
|
|
1388
|
+
|
|
1389
|
+
export declare namespace InputLeftIcon {
|
|
1390
|
+
var displayName: INPUT_COMPONENTS;
|
|
1391
|
+
}
|
|
1392
|
+
|
|
1393
|
+
/**
|
|
1394
|
+
* InputNumber is a numeric input component with increment and decrement controls.
|
|
1395
|
+
* It ensures that the value stays within the specified min and max bounds.
|
|
1396
|
+
*
|
|
1397
|
+
* @param {InputNumberProps} props - The properties for the InputNumber component.
|
|
1398
|
+
* @param {(value: number) => void} props.onCountChange - Callback function that is called when the numeric value changes.
|
|
1399
|
+
* @param {number} [props.min=-Infinity] - The minimum value allowed.
|
|
1400
|
+
* @param {number} [props.max=Infinity] - The maximum value allowed.
|
|
1401
|
+
* @param {number} [props.count=0] - The initial value of the input.
|
|
1402
|
+
* @param {string} [props.countContainerClassName] - Additional class names for the container of the numeric input.
|
|
1403
|
+
* @param {boolean} [props.disabled=false] - Whether the input and controls are disabled.
|
|
1404
|
+
* @param {React.InputHTMLAttributes<HTMLInputElement>} props - Additional props are passed to the underlying input component.
|
|
1405
|
+
*
|
|
1406
|
+
* @returns {JSX.Element} The rendered InputNumber component.
|
|
1407
|
+
*
|
|
1408
|
+
* @example
|
|
1409
|
+
* <InputNumber onCountChange={(value) => ...)} count={5} min={0} max={10} />
|
|
1410
|
+
*/
|
|
1411
|
+
export declare function InputNumber({ onCountChange, min, max, count, countContainerClassName, disabled, ...props }: InputNumberProps): JSX_2.Element;
|
|
1412
|
+
|
|
1413
|
+
export declare namespace InputNumber {
|
|
1414
|
+
var displayName: INPUT_COMPONENTS;
|
|
1415
|
+
}
|
|
1416
|
+
|
|
1417
|
+
/**
|
|
1418
|
+
* Props for an input field designed to accept numeric values.
|
|
1419
|
+
*
|
|
1420
|
+
* @interface InputNumberProps
|
|
1421
|
+
* @extends {InputV2Props}
|
|
1422
|
+
*
|
|
1423
|
+
* @property {(value: number) => void} onCountChange - Callback when the numeric value changes.
|
|
1424
|
+
* @property {never} [onChange] - `onChange` is disabled for this component; use `onCountChange`.
|
|
1425
|
+
* @property {number} [min] - Minimum allowable value for the input (by default Infinity)
|
|
1426
|
+
* @property {number} [max] - Maximum allowable value for the input (by default Infinity)
|
|
1427
|
+
* @property {number} [count] - Current numeric value (enable for two way binding).
|
|
1428
|
+
* @property {string} [countContainerClassName] -Additional className for the count container.
|
|
1429
|
+
*
|
|
1430
|
+
* @example
|
|
1431
|
+
* <InputNumber onCountChange={(value) => ...)} count={5} min={0} max={10} />
|
|
1432
|
+
*/
|
|
1433
|
+
declare interface InputNumberProps extends InputV2Props {
|
|
1434
|
+
onCountChange: (value: number) => void;
|
|
1435
|
+
onChange?: never;
|
|
1436
|
+
min?: number;
|
|
1437
|
+
max?: number;
|
|
1438
|
+
count?: number;
|
|
1439
|
+
countContainerClassName?: string;
|
|
1440
|
+
}
|
|
1441
|
+
|
|
1442
|
+
declare interface InputProps {
|
|
1443
|
+
/**
|
|
1444
|
+
* Custom classes to be applied to the input
|
|
1445
|
+
*/
|
|
1446
|
+
customClasses?: string[] | string;
|
|
1447
|
+
/**
|
|
1448
|
+
* Custom styles to be applied to the input
|
|
1449
|
+
*/
|
|
1450
|
+
customStyles?: Record<string, string>;
|
|
1451
|
+
/**
|
|
1452
|
+
* Type of the input
|
|
1453
|
+
*/
|
|
1454
|
+
type?: HTMLInputTypeAttribute | 'textarea';
|
|
1455
|
+
/**
|
|
1456
|
+
* Placeholder of the input
|
|
1457
|
+
*/
|
|
1458
|
+
placeholder?: string;
|
|
1459
|
+
/**
|
|
1460
|
+
* Name of the input
|
|
1461
|
+
*/
|
|
1462
|
+
name?: string;
|
|
1463
|
+
/**
|
|
1464
|
+
* Id of the input
|
|
1465
|
+
*/
|
|
1466
|
+
id?: string;
|
|
1467
|
+
/**
|
|
1468
|
+
* Value of the input
|
|
1469
|
+
*/
|
|
1470
|
+
value?: string | number;
|
|
1471
|
+
/**
|
|
1472
|
+
* On change handler of the input
|
|
1473
|
+
*/
|
|
1474
|
+
onChange?: (e: React_2.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, arg?: any) => void;
|
|
1475
|
+
/**
|
|
1476
|
+
* whether the input is disabled or not
|
|
1477
|
+
*/
|
|
1478
|
+
disabled?: boolean;
|
|
1479
|
+
/**
|
|
1480
|
+
* Rest props of the input
|
|
1481
|
+
*/
|
|
1482
|
+
restprops?: any;
|
|
1483
|
+
/**
|
|
1484
|
+
* Number of rows of the textarea
|
|
1485
|
+
*/
|
|
1486
|
+
rows?: number;
|
|
1487
|
+
/**
|
|
1488
|
+
* Number of cols of the textarea
|
|
1489
|
+
*/
|
|
1490
|
+
cols?: number;
|
|
1491
|
+
/**
|
|
1492
|
+
* Error message of the input
|
|
1493
|
+
*/
|
|
1494
|
+
errorMsg?: string | false;
|
|
1495
|
+
/** Multiple select? */
|
|
1496
|
+
multiple?: boolean;
|
|
1497
|
+
/** Blur event handler */
|
|
1498
|
+
onBlur?: {
|
|
1499
|
+
/** Classic React blur handler, keyed by input name */
|
|
1500
|
+
(e: React_2.FocusEvent<any>): void;
|
|
1501
|
+
/** Preact-like linkState. Will return a handleBlur function. */
|
|
1502
|
+
<T = string | any>(fieldOrEvent: T): T extends string ? (e: any) => void : void;
|
|
1503
|
+
};
|
|
1504
|
+
}
|
|
1505
|
+
|
|
1506
|
+
export declare function InputRightAddon({ children, isDropdown, dropdownOptions, handleOptionClick, showDropdownSearch, }: InputDirectionAddonProps): JSX_2.Element;
|
|
1507
|
+
|
|
1508
|
+
export declare namespace InputRightAddon {
|
|
1509
|
+
var displayName: Inputs;
|
|
1510
|
+
var id: Inputs;
|
|
1511
|
+
}
|
|
1512
|
+
|
|
1513
|
+
/**
|
|
1514
|
+
* Component for rendering an adornment on the right side of an input.
|
|
1515
|
+
* It can either display static content or function as a dropdown trigger.
|
|
1516
|
+
*
|
|
1517
|
+
* @param {InputAdornmentProps} props - The properties for the InputRightAdornment component.
|
|
1518
|
+
* @param {React.ReactNode} props.children - The content to display inside the adornment.
|
|
1519
|
+
* @param {boolean} [props.isLoading=false] - Indicates if the dropdown is in a loading state.
|
|
1520
|
+
* @param {boolean} [props.disabled] - Whether the adornment is disabled.
|
|
1521
|
+
* @param {boolean} [props.isDropdown] - Whether the adornment is a dropdown trigger.
|
|
1522
|
+
* @param {DropdownOption[]} [props.options] - Options to display in the dropdown.
|
|
1523
|
+
* @param {boolean} [props.hideSearch=false] - Whether to hide the search input in the dropdown.
|
|
1524
|
+
* @param {(value: string) => void} [props.onOptionSelect] - Callback for when an option is selected.
|
|
1525
|
+
*
|
|
1526
|
+
* @returns {JSX.Element} The right adornment for an input field.
|
|
1527
|
+
*
|
|
1528
|
+
* @example
|
|
1529
|
+
* <InputGroupV2>
|
|
1530
|
+
* <InputV2 />
|
|
1531
|
+
* <InputRightAdornment>...</InputRightAdornment>
|
|
1532
|
+
* </InputGroupV2>
|
|
1533
|
+
*
|
|
1534
|
+
* @example
|
|
1535
|
+
* <InputGroupV2>
|
|
1536
|
+
* <InputRightAdornment isDropdown options={options} onOptionSelect={handleSelect}>...</InputRightAdornment>
|
|
1537
|
+
* <InputV2 />
|
|
1538
|
+
* </InputGroupV2>
|
|
1539
|
+
*/
|
|
1540
|
+
export declare function InputRightAdornment({ children, isLoading, disabled, isDropdown, options, hideSearch, onOptionSelect, }: InputAdornmentProps): JSX_2.Element;
|
|
1541
|
+
|
|
1542
|
+
export declare namespace InputRightAdornment {
|
|
1543
|
+
var displayName: INPUT_COMPONENTS;
|
|
1544
|
+
}
|
|
1545
|
+
|
|
1546
|
+
export declare function InputRightElement({ children }: InputDirectionElementProps): JSX_2.Element;
|
|
1547
|
+
|
|
1548
|
+
export declare namespace InputRightElement {
|
|
1549
|
+
var displayName: Inputs;
|
|
1550
|
+
var id: Inputs;
|
|
1551
|
+
}
|
|
1552
|
+
|
|
1553
|
+
/**
|
|
1554
|
+
* InputRightIcon renders an icon on the right side of an input field.
|
|
1555
|
+
* If `onClick` is provided, the icon is rendered as a button.
|
|
1556
|
+
*
|
|
1557
|
+
* @param {InputIconProps} props - The properties for the InputRightIcon component.
|
|
1558
|
+
* @param {string} props.icon - The SVG path for the icon to display.
|
|
1559
|
+
* @param {() => void} [props.onClick] - Optional click handler for the icon. When provided, the icon is rendered as a button.
|
|
1560
|
+
* @param {React.CSSProperties} [props.iconStyles] - Optional inline styles to apply to the icon.
|
|
1561
|
+
* @param {boolean} [props.disabled=false] - Whether the icon or button is disabled.
|
|
1562
|
+
* @param {string} [props.className] - Additional class names to apply to the icon container.
|
|
1563
|
+
*
|
|
1564
|
+
* @returns {JSX.Element} The rendered InputRightIcon component.
|
|
1565
|
+
*
|
|
1566
|
+
* @example
|
|
1567
|
+
* <InputGroupV2>
|
|
1568
|
+
* <InputV2 />
|
|
1569
|
+
* <InputRightIcon icon={...} />
|
|
1570
|
+
* </InputGroupV2>
|
|
1571
|
+
*/
|
|
1572
|
+
export declare function InputRightIcon({ icon, onClick, iconStyles, disabled, className, svgClassName, spanClassName, }: InputIconProps): JSX_2.Element;
|
|
1573
|
+
|
|
1574
|
+
export declare namespace InputRightIcon {
|
|
1575
|
+
var displayName: INPUT_COMPONENTS;
|
|
1576
|
+
}
|
|
1577
|
+
|
|
1578
|
+
declare enum Inputs {
|
|
1579
|
+
INPUT_ADDON = "InputAddon",
|
|
1580
|
+
INPUT_LEFT_ADDON = "InputLeftAddon",
|
|
1581
|
+
INPUT_RIGHT_ADDON = "InputRightAddon",
|
|
1582
|
+
INPUT_ELEMENT = "InputElement",
|
|
1583
|
+
INPUT_LEFT_ELEMENT = "InputLeftElement",
|
|
1584
|
+
INPUT_RIGHT_ELEMENT = "InputRightElement",
|
|
1585
|
+
INPUT_CONTAINER = "InputContainer",
|
|
1586
|
+
INPUT_LABEL = "InputLabel",
|
|
1587
|
+
INPUT_GROUP = "InputGroup",
|
|
1588
|
+
INPUT = "Input"
|
|
1589
|
+
}
|
|
1590
|
+
|
|
1591
|
+
/**
|
|
1592
|
+
* InputV2 component - A custom input component with extended functionality and built-in error handling.
|
|
1593
|
+
*
|
|
1594
|
+
* @param {InputV2Props} props - The props object containing configurations and attributes for the input element.
|
|
1595
|
+
* @param {React.Ref<HTMLInputElement>} ref - A React ref that can be used to access the input element directly.
|
|
1596
|
+
*
|
|
1597
|
+
* @returns {JSX.Element} A JSX element representing the custom input field.
|
|
1598
|
+
*
|
|
1599
|
+
* @example
|
|
1600
|
+
* <InputV2 placeholder="Enter your name" />
|
|
1601
|
+
*
|
|
1602
|
+
* @example
|
|
1603
|
+
* <InputV2 errorMsg="Name is required" placeholder="Enter your name" />
|
|
1604
|
+
* @example
|
|
1605
|
+
* with formik
|
|
1606
|
+
* <InputV2 {...formik.getFieldProps(key)} placeholder="Enter your name" />
|
|
1607
|
+
*/
|
|
1608
|
+
export declare const InputV2: React_2.ForwardRefExoticComponent<InputV2Props & React_2.RefAttributes<HTMLInputElement>>;
|
|
1609
|
+
|
|
1610
|
+
/**
|
|
1611
|
+
* Props for the InputV2 component, which extends the standard HTML input element
|
|
1612
|
+
* with additional styling and error handling.
|
|
1613
|
+
*
|
|
1614
|
+
* @interface InputV2Props
|
|
1615
|
+
* @extends {React.InputHTMLAttributes<HTMLInputElement>}
|
|
1616
|
+
*
|
|
1617
|
+
* @property {string} [errorMsg] - Error message to display below the input if there is a validation error.
|
|
1618
|
+
* @property {string} [containerClassName] - Additional class name(s) for the input container div.
|
|
1619
|
+
* @property {React.CSSProperties} [inputStyles] - Used for internal styling when grouping it with multiple components. use className for styling input.
|
|
1620
|
+
* @property {React.CSSProperties} [containerStyles] - Used for internal styling when grouping it with multiple components. use containerClassName for styling input container.
|
|
1621
|
+
*
|
|
1622
|
+
* @example
|
|
1623
|
+
* <InputV2
|
|
1624
|
+
* placeholder="Enter"
|
|
1625
|
+
* errorMsg="This field is required"
|
|
1626
|
+
* />
|
|
1627
|
+
* @example
|
|
1628
|
+
* with formik
|
|
1629
|
+
* <InputV2
|
|
1630
|
+
* {...formik.getFieldProps(key)}
|
|
1631
|
+
* placeholder="Enter"
|
|
1632
|
+
* errorMsg="This field is required"
|
|
1633
|
+
* />
|
|
1634
|
+
*/
|
|
1635
|
+
declare interface InputV2Props extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
1636
|
+
errorMsg?: string;
|
|
1637
|
+
containerClassName?: string;
|
|
1638
|
+
/* Excluded from this release type: inputStyles */
|
|
1639
|
+
/* Excluded from this release type: containerStyles */
|
|
1640
|
+
/* Excluded from this release type: onErrorHeightChange */
|
|
1641
|
+
}
|
|
1642
|
+
|
|
1643
|
+
export declare const isArrayOfString: (arr: unknown) => arr is string[];
|
|
1644
|
+
|
|
1645
|
+
export declare const isDatePassed: (date?: string) => boolean;
|
|
1646
|
+
|
|
1647
|
+
export declare function isDeepEqual(obj1: Record<string, any[]>, obj2: Record<string, any[]> | null): boolean;
|
|
1648
|
+
|
|
1649
|
+
export declare const isExactISODateFormat: (value: string) => boolean;
|
|
1650
|
+
|
|
1651
|
+
export declare const isObject: (value: any) => boolean;
|
|
1652
|
+
|
|
1653
|
+
export declare const isString: (value: any) => boolean;
|
|
1654
|
+
|
|
1655
|
+
declare interface ITask {
|
|
1656
|
+
module_id: string;
|
|
1657
|
+
module_name: string;
|
|
1658
|
+
module_reference: string;
|
|
1659
|
+
icon_url: string;
|
|
1660
|
+
static_module: boolean;
|
|
1661
|
+
external_link: any;
|
|
1662
|
+
form_link: string | null;
|
|
1663
|
+
name: string;
|
|
1664
|
+
date: string;
|
|
1665
|
+
details: Array<{
|
|
1666
|
+
key: string;
|
|
1667
|
+
value: any;
|
|
1668
|
+
}>;
|
|
1669
|
+
status: string;
|
|
1670
|
+
type: string;
|
|
1671
|
+
task_details_id: string | null;
|
|
1672
|
+
leaveFrom?: string;
|
|
1673
|
+
}
|
|
1674
|
+
|
|
1675
|
+
declare interface ItemProps {
|
|
1676
|
+
eventKey: string;
|
|
1677
|
+
children: React.ReactNode;
|
|
1678
|
+
}
|
|
1679
|
+
|
|
1680
|
+
declare type IToastOptions = ToastOptions & CommonOptions;
|
|
1681
|
+
|
|
1682
|
+
/**
|
|
1683
|
+
* Props for the Label component, used to provide descriptive text for form inputs.
|
|
1684
|
+
*
|
|
1685
|
+
* @interface LabelPropsV2
|
|
1686
|
+
* @extends {React.LabelHTMLAttributes<HTMLLabelElement>}
|
|
1687
|
+
*
|
|
1688
|
+
* @property {React.ReactNode} children - The text or elements inside the label.
|
|
1689
|
+
* @property {string} [info] - Additional info to display, such as help text in tooltip.
|
|
1690
|
+
* @property {boolean} [disabled] - Whether the associated input is disabled.
|
|
1691
|
+
* @property {boolean} [required] - Whether the field is required (red * will be shown beside label).
|
|
1692
|
+
* @property {Partial<TooltipV2Props>} [tooltipProps] - Props for the tooltip, if additional information is provided and want to customize tooltip styles.
|
|
1693
|
+
*
|
|
1694
|
+
* @example
|
|
1695
|
+
* <LabelV2 info="Your full name">Name</LabelV2>
|
|
1696
|
+
*/
|
|
1697
|
+
declare interface LabelPropsV2 extends React.LabelHTMLAttributes<HTMLLabelElement> {
|
|
1698
|
+
children: React.ReactNode;
|
|
1699
|
+
info?: string;
|
|
1700
|
+
disabled?: boolean;
|
|
1701
|
+
required?: boolean;
|
|
1702
|
+
tooltipProps?: Partial<TooltipV2Props>;
|
|
1703
|
+
}
|
|
1704
|
+
|
|
1705
|
+
/**
|
|
1706
|
+
* LabelV2 is a label component that can display additional information via a tooltip,
|
|
1707
|
+
* mark the field as required, and adjust styles based on the disabled state.
|
|
1708
|
+
*
|
|
1709
|
+
* @param {LabelPropsV2} props - The properties for the LabelV2 component.
|
|
1710
|
+
* @param {string} [props.className=''] - Additional class names to apply to the label element.
|
|
1711
|
+
* @param {string} [props.info=''] - Information text to be displayed in a tooltip. If provided, an info icon will appear next to the label.
|
|
1712
|
+
* @param {boolean} [props.disabled=false] - Whether the label and its associated input are disabled.
|
|
1713
|
+
* @param {boolean} [props.required=false] - Whether the associated input field is required. If true, an asterisk (*) will be displayed.
|
|
1714
|
+
* @param {object} [props.tooltipProps={}] - Optional props to pass to the TooltipV2 component.
|
|
1715
|
+
* @param {React.ReactNode} props.children - The content of the label, usually text.
|
|
1716
|
+
* @returns {JSX.Element} The rendered LabelV2 component.
|
|
1717
|
+
*
|
|
1718
|
+
* @example
|
|
1719
|
+
* <LabelV2 required info="This field is required">
|
|
1720
|
+
* Username
|
|
1721
|
+
* </LabelV2>
|
|
1722
|
+
*/
|
|
1723
|
+
export declare function LabelV2({ className, info, disabled, required, tooltipProps, children, ...props }: LabelPropsV2): JSX_2.Element;
|
|
1724
|
+
|
|
1725
|
+
export declare namespace LabelV2 {
|
|
1726
|
+
var displayName: INPUT_COMPONENTS;
|
|
1727
|
+
}
|
|
1728
|
+
|
|
1729
|
+
export declare function LayoutTabs({ tabs, defaultValue, tabClassName, onValueChange }: LayoutTabsProps): JSX_2.Element;
|
|
1730
|
+
|
|
1731
|
+
declare interface LayoutTabsProps {
|
|
1732
|
+
tabClassName?: string;
|
|
1733
|
+
/**
|
|
1734
|
+
* tabs to render
|
|
1735
|
+
*/
|
|
1736
|
+
tabs: Array<{
|
|
1737
|
+
label: string;
|
|
1738
|
+
value: string;
|
|
1739
|
+
content: React_2.ReactNode | string;
|
|
1740
|
+
}>;
|
|
1741
|
+
/**
|
|
1742
|
+
* default value (initial tab to render)
|
|
1743
|
+
*/
|
|
1744
|
+
defaultValue: string;
|
|
1745
|
+
/**
|
|
1746
|
+
* callback function when tab is changed
|
|
1747
|
+
*/
|
|
1748
|
+
onValueChange?: (value: string) => void;
|
|
1749
|
+
}
|
|
1750
|
+
|
|
1751
|
+
export declare const lightenHexColor: (hex: string, percent?: number) => string;
|
|
1752
|
+
|
|
1753
|
+
export declare function Loader({ containerStyle, loaderStyle, variant, size, }: LoaderProps): JSX_2.Element;
|
|
1754
|
+
|
|
1755
|
+
export declare enum LOADER_VARIANT {
|
|
1756
|
+
RING = "ring",
|
|
1757
|
+
DUAL_RING = "dual_ring",
|
|
1758
|
+
RIPPLE = "ripple",
|
|
1759
|
+
ELLIPSES = "ellipses",
|
|
1760
|
+
ROLLER = "roller",
|
|
1761
|
+
SPINNER = "spinner",
|
|
1762
|
+
HOURGLASS = "hourglass",
|
|
1763
|
+
GRID = "grid"
|
|
1764
|
+
}
|
|
1765
|
+
|
|
1766
|
+
export declare type LoaderProps = {
|
|
1767
|
+
containerStyle?: React_2.CSSProperties;
|
|
1768
|
+
loaderStyle?: React_2.CSSProperties;
|
|
1769
|
+
size?: number;
|
|
1770
|
+
variant?: LOADER_VARIANT;
|
|
1771
|
+
};
|
|
1772
|
+
|
|
1773
|
+
declare function MenuActionsDropdown({ menuItems, data, variant, isTable, }: MenuActionsDropdownProps): JSX_2.Element;
|
|
1774
|
+
|
|
1775
|
+
export declare type MenuActionsDropdownProps = {
|
|
1776
|
+
menuItems: MenuItem[];
|
|
1777
|
+
data?: any;
|
|
1778
|
+
variant?: 'regular' | 'small';
|
|
1779
|
+
isTable?: boolean;
|
|
1780
|
+
};
|
|
1781
|
+
|
|
1782
|
+
export declare interface MenuButtonProps {
|
|
1783
|
+
children: React_2.ReactNode;
|
|
1784
|
+
variant?: BUTTON_VARIANT;
|
|
1785
|
+
disabled?: boolean;
|
|
1786
|
+
menuItems: MenuItem[];
|
|
1787
|
+
onClick?: React_2.MouseEventHandler<HTMLButtonElement>;
|
|
1788
|
+
isCustomTrigger?: boolean;
|
|
1789
|
+
isSingleBtnTrigger?: boolean;
|
|
1790
|
+
customData?: any;
|
|
1791
|
+
size?: 'sm' | 'md';
|
|
1792
|
+
actionsDropdownOptions?: {
|
|
1793
|
+
setIsActive: React_2.Dispatch<React_2.SetStateAction<boolean>>;
|
|
1794
|
+
};
|
|
1795
|
+
positionerProps?: PositioningOptions;
|
|
1796
|
+
isTable?: boolean;
|
|
1797
|
+
}
|
|
1798
|
+
|
|
1799
|
+
declare type MenuConfig = {
|
|
1800
|
+
hideSearch?: boolean;
|
|
1801
|
+
placeholder?: string;
|
|
1802
|
+
type?: string;
|
|
1803
|
+
};
|
|
1804
|
+
|
|
1805
|
+
export declare type MenuItem = {
|
|
1806
|
+
label: string;
|
|
1807
|
+
iconSrc?: string;
|
|
1808
|
+
onClick: any;
|
|
1809
|
+
filterFn?: any;
|
|
1810
|
+
disabled?: boolean;
|
|
1811
|
+
};
|
|
1812
|
+
|
|
1813
|
+
export declare type MenuItemV2 = {
|
|
1814
|
+
label: string;
|
|
1815
|
+
iconSrc?: string;
|
|
1816
|
+
onClick: any;
|
|
1817
|
+
filterFn?: any;
|
|
1818
|
+
disabled?: boolean;
|
|
1819
|
+
customStyles?: React_2.CSSProperties;
|
|
1820
|
+
customSvgClassName?: string;
|
|
1821
|
+
};
|
|
1822
|
+
|
|
1823
|
+
/**
|
|
1824
|
+
* Array of minutes (0-59) formatted as strings
|
|
1825
|
+
* @type {string[]}
|
|
1826
|
+
*/
|
|
1827
|
+
export declare const minutes: string[];
|
|
1828
|
+
|
|
1829
|
+
export declare function Modal({ isOpen, onClose, children, size, showOverlay, machineProps, }: ModalProps): JSX_2.Element;
|
|
1830
|
+
|
|
1831
|
+
export declare function ModalBody({ children, api, customStyles }: ModalBodyProps): JSX_2.Element;
|
|
1832
|
+
|
|
1833
|
+
declare interface ModalBodyProps {
|
|
1834
|
+
/**
|
|
1835
|
+
* Modal body children
|
|
1836
|
+
*/
|
|
1837
|
+
children: React.ReactNode;
|
|
1838
|
+
/**
|
|
1839
|
+
* Zagjs modal API (no need to pass when using this component)
|
|
1840
|
+
* will be inserted by default
|
|
1841
|
+
*/
|
|
1842
|
+
api?: any;
|
|
1843
|
+
/**
|
|
1844
|
+
* custom styles
|
|
1845
|
+
*/
|
|
1846
|
+
customStyles?: React.CSSProperties;
|
|
1847
|
+
}
|
|
1848
|
+
|
|
1849
|
+
export declare function ModalContent({ children, api, size }: ModalContentProps): JSX_2.Element;
|
|
1850
|
+
|
|
1851
|
+
declare interface ModalContentProps {
|
|
1852
|
+
/**
|
|
1853
|
+
* Modal content children
|
|
1854
|
+
*/
|
|
1855
|
+
children: React_2.ReactNode;
|
|
1856
|
+
/**
|
|
1857
|
+
* Zagjs modal API (no need to pass when using this component)
|
|
1858
|
+
* will be inserted by default
|
|
1859
|
+
*/
|
|
1860
|
+
api?: any;
|
|
1861
|
+
/**
|
|
1862
|
+
* size of the modal
|
|
1863
|
+
*/
|
|
1864
|
+
size?: 'sm' | 'md' | 'fullScreen';
|
|
1865
|
+
}
|
|
1866
|
+
|
|
1867
|
+
export declare function ModalFooter({ children, api, buttons, showBorder }: ModalFooterProps): JSX_2.Element;
|
|
1868
|
+
|
|
1869
|
+
declare interface ModalFooterProps {
|
|
1870
|
+
/**
|
|
1871
|
+
* Modal footer children
|
|
1872
|
+
* if children is passed, default buttons will not be shown
|
|
1873
|
+
* children acts like a custom footer
|
|
1874
|
+
*/
|
|
1875
|
+
children?: React.ReactNode;
|
|
1876
|
+
/**
|
|
1877
|
+
* zagjs modal API (no need to pass when using this component)
|
|
1878
|
+
* will be inserted by default
|
|
1879
|
+
*/
|
|
1880
|
+
api?: any;
|
|
1881
|
+
/**
|
|
1882
|
+
* set of buttons to display
|
|
1883
|
+
*/
|
|
1884
|
+
buttons: FooterButtons;
|
|
1885
|
+
/**
|
|
1886
|
+
* show border or not
|
|
1887
|
+
*/
|
|
1888
|
+
showBorder?: boolean;
|
|
1889
|
+
}
|
|
1890
|
+
|
|
1891
|
+
export declare function ModalHeader({ children, api, showCrossBtn, showBorder, }: ModalHeaderProps): JSX_2.Element;
|
|
1892
|
+
|
|
1893
|
+
declare interface ModalHeaderProps {
|
|
1894
|
+
/**
|
|
1895
|
+
* Modal header children
|
|
1896
|
+
*/
|
|
1897
|
+
children: React.ReactNode;
|
|
1898
|
+
/**
|
|
1899
|
+
* Zagjs modal API (no need to pass when using this component)
|
|
1900
|
+
* will be inserted by default
|
|
1901
|
+
*/
|
|
1902
|
+
api?: any;
|
|
1903
|
+
/**
|
|
1904
|
+
* Show cross button or not
|
|
1905
|
+
*/
|
|
1906
|
+
showCrossBtn?: boolean;
|
|
1907
|
+
/**
|
|
1908
|
+
* Show border or not
|
|
1909
|
+
*/
|
|
1910
|
+
showBorder?: boolean;
|
|
1911
|
+
}
|
|
1912
|
+
|
|
1913
|
+
export declare function ModalOverlay({ api }: ModalOverlayProps): JSX_2.Element;
|
|
1914
|
+
|
|
1915
|
+
declare interface ModalOverlayProps {
|
|
1916
|
+
/**
|
|
1917
|
+
* Zagjs modal API (no need to pass when using this component)
|
|
1918
|
+
* will be inserted by default
|
|
1919
|
+
*/
|
|
1920
|
+
api?: any;
|
|
1921
|
+
}
|
|
1922
|
+
|
|
1923
|
+
declare type ModalProps = {
|
|
1924
|
+
/**
|
|
1925
|
+
* Modal is open or not
|
|
1926
|
+
*/
|
|
1927
|
+
isOpen: boolean;
|
|
1928
|
+
/**
|
|
1929
|
+
* Modal close handler
|
|
1930
|
+
*/
|
|
1931
|
+
onClose: () => void;
|
|
1932
|
+
/**
|
|
1933
|
+
* Modal content
|
|
1934
|
+
*/
|
|
1935
|
+
children: React_2.ReactNode;
|
|
1936
|
+
/**
|
|
1937
|
+
* size of modal
|
|
1938
|
+
*/
|
|
1939
|
+
size?: 'sm' | 'md' | 'fullScreen';
|
|
1940
|
+
/**
|
|
1941
|
+
* show overlay
|
|
1942
|
+
*/
|
|
1943
|
+
showOverlay?: boolean;
|
|
1944
|
+
/**
|
|
1945
|
+
* Machine Props
|
|
1946
|
+
*/
|
|
1947
|
+
machineProps?: dialog.Context | {};
|
|
1948
|
+
};
|
|
1949
|
+
|
|
1950
|
+
/**
|
|
1951
|
+
* ModalV2 component displays a modal dialog with a title, content, and footer buttons.
|
|
1952
|
+
*
|
|
1953
|
+
* @param {ModalV2Props} props - The props for the ModalV2 component.
|
|
1954
|
+
* @returns {JSX.Element} The rendered modal component.
|
|
1955
|
+
*/
|
|
1956
|
+
export declare function ModalV2({ isOpen, title, subTitle, trigger, children, footerButtons, showBackdrop, onClose, customModalClasses, }: ModalV2Props): JSX_2.Element;
|
|
1957
|
+
|
|
1958
|
+
/**
|
|
1959
|
+
* Props for the ModalV2 component.
|
|
1960
|
+
*/
|
|
1961
|
+
declare interface ModalV2Props {
|
|
1962
|
+
/** Indicates if the modal is open. */
|
|
1963
|
+
isOpen?: boolean;
|
|
1964
|
+
/** Callback function to close the modal. */
|
|
1965
|
+
onClose?: () => void;
|
|
1966
|
+
/** Title of the modal. */
|
|
1967
|
+
title: string;
|
|
1968
|
+
/** Optional subtitle of the modal. */
|
|
1969
|
+
subTitle?: string;
|
|
1970
|
+
/** Optional trigger element to open the modal. */
|
|
1971
|
+
trigger?: React_2.ReactNode;
|
|
1972
|
+
/** Content to be displayed inside the modal. */
|
|
1973
|
+
children: React_2.ReactNode;
|
|
1974
|
+
/** Array of footer buttons for the modal. */
|
|
1975
|
+
footerButtons: DialogFooterButtons;
|
|
1976
|
+
/** Indicates whether to show a backdrop behind the modal. */
|
|
1977
|
+
showBackdrop?: boolean;
|
|
1978
|
+
customModalClasses?: string;
|
|
1979
|
+
}
|
|
1980
|
+
|
|
1981
|
+
/**
|
|
1982
|
+
* Props for a non-dropdown adornment within an input field, such as an icon.
|
|
1983
|
+
*
|
|
1984
|
+
* @interface NonDropdownProps
|
|
1985
|
+
* @extends {BaseInputAdornmentProps}
|
|
1986
|
+
*
|
|
1987
|
+
* @property {false} [isDropdown] - Indicates this adornment is not a dropdown.
|
|
1988
|
+
* @property {never} [options] - Options are not applicable to non-dropdown adornments.
|
|
1989
|
+
* @property {never} [hideSearch] - Search hiding is not applicable to non-dropdown adornments.
|
|
1990
|
+
* @property {never} [onOptionSelect] - Option selection is not applicable to non-dropdown adornments.
|
|
1991
|
+
* @property {never} [isLoading] - Loading state is not applicable to non-dropdown adornments.
|
|
1992
|
+
*
|
|
1993
|
+
* @example
|
|
1994
|
+
* @example
|
|
1995
|
+
* <InputGroupV2>
|
|
1996
|
+
* <InputV2 />
|
|
1997
|
+
* <InputRightAdornment>...</InputRightAdornment>
|
|
1998
|
+
* </InputGroupV2>
|
|
1999
|
+
*/
|
|
2000
|
+
declare interface NonDropdownProps extends BaseInputAdornmentProps {
|
|
2001
|
+
isDropdown?: false;
|
|
2002
|
+
options?: never;
|
|
2003
|
+
hideSearch?: never;
|
|
2004
|
+
onOptionSelect?: never;
|
|
2005
|
+
isLoading?: never;
|
|
2006
|
+
}
|
|
2007
|
+
|
|
2008
|
+
declare interface NonIconBadgeProps extends BaseBadgeProps {
|
|
2009
|
+
icon?: never;
|
|
2010
|
+
customSvgStyles?: never;
|
|
2011
|
+
}
|
|
2012
|
+
|
|
2013
|
+
declare interface NonSelectableBadgeProps extends BaseBadgeProps {
|
|
2014
|
+
selected?: false;
|
|
2015
|
+
onClick?: never;
|
|
2016
|
+
}
|
|
2017
|
+
|
|
2018
|
+
export declare const numberInputAllowedKeys: string[];
|
|
2019
|
+
|
|
2020
|
+
declare type Option_2 = OptionWithProfileImg | OptionWithIcon;
|
|
2021
|
+
export { Option_2 as Option }
|
|
2022
|
+
|
|
2023
|
+
export declare type OptionBase = {
|
|
2024
|
+
label: string;
|
|
2025
|
+
value: string;
|
|
2026
|
+
subLabel?: string;
|
|
2027
|
+
color?: HexColor;
|
|
2028
|
+
};
|
|
2029
|
+
|
|
2030
|
+
declare type OptionType = {
|
|
2031
|
+
label: string;
|
|
2032
|
+
value: string;
|
|
2033
|
+
__isNew__?: boolean;
|
|
2034
|
+
};
|
|
2035
|
+
|
|
2036
|
+
export declare type OptionWithIcon = OptionBase & {
|
|
2037
|
+
icon?: string;
|
|
2038
|
+
profileImgUrl?: never;
|
|
2039
|
+
};
|
|
2040
|
+
|
|
2041
|
+
export declare type OptionWithProfileImg = OptionBase & {
|
|
2042
|
+
profileImgUrl?: string;
|
|
2043
|
+
icon?: never;
|
|
2044
|
+
};
|
|
2045
|
+
|
|
2046
|
+
declare interface OtherButtonV2TypeProps extends BaseButtonProps {
|
|
2047
|
+
type?: BUTTON_V2_TYPE.BASIC | BUTTON_V2_TYPE.BUTTON | BUTTON_V2_TYPE.RESET;
|
|
2048
|
+
icon?: React_2.ReactNode;
|
|
2049
|
+
children: React_2.ReactNode;
|
|
2050
|
+
}
|
|
2051
|
+
|
|
2052
|
+
export declare enum PERIOD {
|
|
2053
|
+
AM = "AM",
|
|
2054
|
+
PM = "PM"
|
|
2055
|
+
}
|
|
2056
|
+
|
|
2057
|
+
export declare function Pill({ status, children }: PillProps): JSX_2.Element;
|
|
2058
|
+
|
|
2059
|
+
export declare enum PILL_STATUS {
|
|
2060
|
+
DEFAULT = "default",
|
|
2061
|
+
NEUTRAL = "neutral",
|
|
2062
|
+
POSITIVE = "positive",
|
|
2063
|
+
WARNING = "warning",
|
|
2064
|
+
NEGATIVE = "negative",
|
|
2065
|
+
HIGHLIGHT = "highlight"
|
|
2066
|
+
}
|
|
2067
|
+
|
|
2068
|
+
declare interface PillProps {
|
|
2069
|
+
status?: PILL_STATUS;
|
|
2070
|
+
children: React_2.ReactNode;
|
|
2071
|
+
}
|
|
2072
|
+
|
|
2073
|
+
export declare const pluralize: (count: number, singular: string, plural: string) => string;
|
|
2074
|
+
|
|
2075
|
+
export declare function Popover({ children, placement, popoverProps, closeOnScroll, containerRef, }: PopoverProps): JSX_2.Element;
|
|
2076
|
+
|
|
2077
|
+
export declare function PopoverCloseButton({ children, api, styles, className }: PopoverCloseButtonProps): JSX_2.Element;
|
|
2078
|
+
|
|
2079
|
+
declare interface PopoverCloseButtonProps {
|
|
2080
|
+
/**
|
|
2081
|
+
* The content of the close button.
|
|
2082
|
+
*/
|
|
2083
|
+
children: React.ReactNode;
|
|
2084
|
+
/**
|
|
2085
|
+
* The popover API object.
|
|
2086
|
+
*/
|
|
2087
|
+
api?: any;
|
|
2088
|
+
/**
|
|
2089
|
+
* The styles to apply to the PopoverCloseButton.
|
|
2090
|
+
*/
|
|
2091
|
+
styles?: React.CSSProperties;
|
|
2092
|
+
/**
|
|
2093
|
+
* The className to apply to the PopoverCloseButton.
|
|
2094
|
+
*/
|
|
2095
|
+
className?: string;
|
|
2096
|
+
}
|
|
2097
|
+
|
|
2098
|
+
export declare function PopoverContent({ children, api, bg, styles, className, positionerStyles, showArrow, }: PopoverContentProps): JSX_2.Element;
|
|
2099
|
+
|
|
2100
|
+
declare interface PopoverContentProps {
|
|
2101
|
+
/**
|
|
2102
|
+
* The content of the PopoverContent.
|
|
2103
|
+
*/
|
|
2104
|
+
children: React_2.ReactNode;
|
|
2105
|
+
/**
|
|
2106
|
+
* The popover API object.
|
|
2107
|
+
*/
|
|
2108
|
+
api?: any;
|
|
2109
|
+
/**
|
|
2110
|
+
* The background color of the PopoverContent.
|
|
2111
|
+
*/
|
|
2112
|
+
bg?: 'black' | 'gray' | string;
|
|
2113
|
+
/**
|
|
2114
|
+
* The styles to apply to the PopoverContent.
|
|
2115
|
+
*/
|
|
2116
|
+
styles?: React_2.CSSProperties;
|
|
2117
|
+
/**
|
|
2118
|
+
* The className to apply to the PopoverContent.
|
|
2119
|
+
*/
|
|
2120
|
+
className?: string;
|
|
2121
|
+
/**
|
|
2122
|
+
* The styles to apply to Popover positioner
|
|
2123
|
+
*/
|
|
2124
|
+
positionerStyles?: React_2.CSSProperties;
|
|
2125
|
+
showArrow?: boolean;
|
|
2126
|
+
}
|
|
2127
|
+
|
|
2128
|
+
export declare function PopoverDescription({ children, api, styles, className }: PopoverDescriptionProps): JSX_2.Element;
|
|
2129
|
+
|
|
2130
|
+
declare interface PopoverDescriptionProps {
|
|
2131
|
+
/**
|
|
2132
|
+
* The content of the PopoverDescription.
|
|
2133
|
+
*/
|
|
2134
|
+
children: React.ReactNode;
|
|
2135
|
+
/**
|
|
2136
|
+
* The popover API object.
|
|
2137
|
+
*/
|
|
2138
|
+
api?: any;
|
|
2139
|
+
/**
|
|
2140
|
+
* The styles to apply to the PopoverDescription.
|
|
2141
|
+
*/
|
|
2142
|
+
styles?: React.CSSProperties;
|
|
2143
|
+
/**
|
|
2144
|
+
* The className to apply to the PopoverDescription.
|
|
2145
|
+
*/
|
|
2146
|
+
className?: string;
|
|
2147
|
+
}
|
|
2148
|
+
|
|
2149
|
+
declare interface PopoverProps {
|
|
2150
|
+
/**
|
|
2151
|
+
* Content of the trigger
|
|
2152
|
+
*/
|
|
2153
|
+
children: React_2.ReactNode;
|
|
2154
|
+
/**
|
|
2155
|
+
* Placement of the popover
|
|
2156
|
+
*/
|
|
2157
|
+
placement?: Placement;
|
|
2158
|
+
/**
|
|
2159
|
+
* Props to pass to the popover machine
|
|
2160
|
+
*/
|
|
2161
|
+
popoverProps?: any;
|
|
2162
|
+
/**
|
|
2163
|
+
* close popover on scroll
|
|
2164
|
+
*/
|
|
2165
|
+
closeOnScroll?: boolean;
|
|
2166
|
+
/**
|
|
2167
|
+
* when using closeOnScroll, its necessary to pass containerRef to track scroll movement of the container you want to close the popover with respect to.
|
|
2168
|
+
*/
|
|
2169
|
+
containerRef?: React_2.RefObject<HTMLElement>;
|
|
2170
|
+
}
|
|
2171
|
+
|
|
2172
|
+
export declare function PopoverTitle({ children, api, styles, className }: PopoverTitleProps): JSX_2.Element;
|
|
2173
|
+
|
|
2174
|
+
declare interface PopoverTitleProps {
|
|
2175
|
+
/**
|
|
2176
|
+
* The content of the PopoverTitle.
|
|
2177
|
+
*/
|
|
2178
|
+
children: React.ReactNode;
|
|
2179
|
+
/**
|
|
2180
|
+
* The popover API object.
|
|
2181
|
+
*/
|
|
2182
|
+
api?: any;
|
|
2183
|
+
/**
|
|
2184
|
+
* The styles to apply to the PopoverTitle.
|
|
2185
|
+
*/
|
|
2186
|
+
styles?: React.CSSProperties;
|
|
2187
|
+
/**
|
|
2188
|
+
* The className to apply to the PopoverTitle.
|
|
2189
|
+
*/
|
|
2190
|
+
className?: string;
|
|
2191
|
+
}
|
|
2192
|
+
|
|
2193
|
+
export declare function PopoverTrigger({ children, api, openOnHover, styles, className, }: PopoverTriggerProps): JSX_2.Element;
|
|
2194
|
+
|
|
2195
|
+
declare interface PopoverTriggerProps {
|
|
2196
|
+
/**
|
|
2197
|
+
* The content of the PopoverTrigger.
|
|
2198
|
+
*/
|
|
2199
|
+
children: React.ReactNode;
|
|
2200
|
+
/**
|
|
2201
|
+
* The popover API object.
|
|
2202
|
+
*/
|
|
2203
|
+
api?: any;
|
|
2204
|
+
/**
|
|
2205
|
+
* Whether the popover should open on hover.
|
|
2206
|
+
* @default true
|
|
2207
|
+
* If set to false, the popover will only open on click.
|
|
2208
|
+
*/
|
|
2209
|
+
openOnHover?: boolean;
|
|
2210
|
+
/**
|
|
2211
|
+
* The styles to apply to the PopoverTrigger.
|
|
2212
|
+
*/
|
|
2213
|
+
styles?: React.CSSProperties;
|
|
2214
|
+
/**
|
|
2215
|
+
* The className to apply to the PopoverTrigger.
|
|
2216
|
+
*/
|
|
2217
|
+
className?: string;
|
|
2218
|
+
}
|
|
2219
|
+
|
|
2220
|
+
export declare function Progress({ steps, onCancelClick, onFinalStepClick, stepToShowSkipBtn, lastStepFooterContinueBtnText, showSkipBtn, showHeaderBtns, showFooter, lastStepHeaderContinueBtnText, allowNavigationOnStepClick, skipBtnText, jumpToStep, onSkipClick, }: ProgressProps): JSX_2.Element;
|
|
2221
|
+
|
|
2222
|
+
declare type ProgressProps = {
|
|
2223
|
+
/**
|
|
2224
|
+
* steps to show
|
|
2225
|
+
* if there isError is true, user won't be able to click on Continue or finish button
|
|
2226
|
+
*/
|
|
2227
|
+
steps: {
|
|
2228
|
+
label: string;
|
|
2229
|
+
component: React_2.ReactNode;
|
|
2230
|
+
isError: boolean;
|
|
2231
|
+
onContinueClick?: Function;
|
|
2232
|
+
}[];
|
|
2233
|
+
/**
|
|
2234
|
+
* handle cancel click
|
|
2235
|
+
*/
|
|
2236
|
+
onCancelClick: () => void;
|
|
2237
|
+
/**
|
|
2238
|
+
* handle final step click
|
|
2239
|
+
*/
|
|
2240
|
+
onFinalStepClick: () => void;
|
|
2241
|
+
/**
|
|
2242
|
+
* text to show on footer continue button when the step is last step
|
|
2243
|
+
*/
|
|
2244
|
+
lastStepFooterContinueBtnText: string;
|
|
2245
|
+
/**
|
|
2246
|
+
* show skip button or not
|
|
2247
|
+
*/
|
|
2248
|
+
showSkipBtn?: boolean;
|
|
2249
|
+
/**
|
|
2250
|
+
* show buttons on header
|
|
2251
|
+
*/
|
|
2252
|
+
showHeaderBtns?: boolean;
|
|
2253
|
+
/**
|
|
2254
|
+
* show footer
|
|
2255
|
+
*/
|
|
2256
|
+
showFooter?: boolean;
|
|
2257
|
+
/**
|
|
2258
|
+
* text to show on header continue button when the step is last step
|
|
2259
|
+
*/
|
|
2260
|
+
lastStepHeaderContinueBtnText?: string;
|
|
2261
|
+
/**
|
|
2262
|
+
* allow navigation of steps when user click on certain step
|
|
2263
|
+
*/
|
|
2264
|
+
allowNavigationOnStepClick?: boolean;
|
|
2265
|
+
/**
|
|
2266
|
+
* step to show skip button (counting starts from zero)
|
|
2267
|
+
*/
|
|
2268
|
+
stepToShowSkipBtn?: number;
|
|
2269
|
+
/**
|
|
2270
|
+
* skip button text
|
|
2271
|
+
*/
|
|
2272
|
+
skipBtnText?: string;
|
|
2273
|
+
/**
|
|
2274
|
+
* directly jump to particular step (index starts from 0)
|
|
2275
|
+
*/
|
|
2276
|
+
jumpToStep?: number;
|
|
2277
|
+
/**
|
|
2278
|
+
* on skip click
|
|
2279
|
+
*/
|
|
2280
|
+
onSkipClick?: () => void;
|
|
2281
|
+
};
|
|
2282
|
+
|
|
2283
|
+
export declare function RadioGroup({ items, radioHeading, defaultValue, onChange, required, errorMsg, optionsContainerStyles, disabled, showSkeleton, handleClickManually, }: RadioGroupProps): JSX_2.Element;
|
|
2284
|
+
|
|
2285
|
+
declare interface RadioGroupProps {
|
|
2286
|
+
/**
|
|
2287
|
+
* heading for radio group
|
|
2288
|
+
*/
|
|
2289
|
+
radioHeading?: string;
|
|
2290
|
+
/**
|
|
2291
|
+
* items to show in radio group
|
|
2292
|
+
*/
|
|
2293
|
+
items: Array<{
|
|
2294
|
+
label: {
|
|
2295
|
+
heading: string | React_2.ReactNode;
|
|
2296
|
+
subHeading?: string;
|
|
2297
|
+
};
|
|
2298
|
+
value: string;
|
|
2299
|
+
tooltip?: {
|
|
2300
|
+
txt: string;
|
|
2301
|
+
trigger?: React_2.ReactNode;
|
|
2302
|
+
placement?: string;
|
|
2303
|
+
};
|
|
2304
|
+
}>;
|
|
2305
|
+
/**
|
|
2306
|
+
* default value to be selected on first render
|
|
2307
|
+
*/
|
|
2308
|
+
defaultValue?: string;
|
|
2309
|
+
/**
|
|
2310
|
+
* callback to be called on change of radio group
|
|
2311
|
+
* @param value
|
|
2312
|
+
* value of selected radio
|
|
2313
|
+
* */
|
|
2314
|
+
onChange: (value: string) => void;
|
|
2315
|
+
/**
|
|
2316
|
+
* if radio group is required
|
|
2317
|
+
* */
|
|
2318
|
+
required?: boolean;
|
|
2319
|
+
/**
|
|
2320
|
+
* error msg to display
|
|
2321
|
+
*/
|
|
2322
|
+
errorMsg?: string;
|
|
2323
|
+
optionsContainerStyles?: React_2.CSSProperties;
|
|
2324
|
+
disabled?: boolean;
|
|
2325
|
+
showSkeleton?: boolean;
|
|
2326
|
+
handleClickManually?: boolean;
|
|
2327
|
+
}
|
|
2328
|
+
|
|
2329
|
+
export declare function RadioGroupV2({ items, label, defaultValue, onChange, required, errorMsg, optionsContainerStyles, disabled, isLoading, handleClickManually, }: RadioGroupV2Props): JSX_2.Element;
|
|
2330
|
+
|
|
2331
|
+
declare interface RadioGroupV2Props {
|
|
2332
|
+
/**
|
|
2333
|
+
* heading for radio group
|
|
2334
|
+
*/
|
|
2335
|
+
label?: string;
|
|
2336
|
+
/**
|
|
2337
|
+
* items to show in radio group
|
|
2338
|
+
*/
|
|
2339
|
+
items: Array<{
|
|
2340
|
+
label: {
|
|
2341
|
+
heading: string | React_2.ReactNode;
|
|
2342
|
+
subHeading?: string;
|
|
2343
|
+
};
|
|
2344
|
+
value: string;
|
|
2345
|
+
tooltip?: {
|
|
2346
|
+
txt: string;
|
|
2347
|
+
trigger?: React_2.ReactNode;
|
|
2348
|
+
placement?: string;
|
|
2349
|
+
};
|
|
2350
|
+
}>;
|
|
2351
|
+
/**
|
|
2352
|
+
* default value to be selected on first render
|
|
2353
|
+
*/
|
|
2354
|
+
defaultValue?: string;
|
|
2355
|
+
/**
|
|
2356
|
+
* callback to be called on change of radio group
|
|
2357
|
+
* @param value
|
|
2358
|
+
* value of selected radio
|
|
2359
|
+
* */
|
|
2360
|
+
onChange: (value: string) => void;
|
|
2361
|
+
/**
|
|
2362
|
+
* if radio group is required
|
|
2363
|
+
* */
|
|
2364
|
+
required?: boolean;
|
|
2365
|
+
/**
|
|
2366
|
+
* error msg to display
|
|
2367
|
+
*/
|
|
2368
|
+
errorMsg?: string;
|
|
2369
|
+
optionsContainerStyles?: React_2.CSSProperties;
|
|
2370
|
+
disabled?: boolean;
|
|
2371
|
+
isLoading?: boolean;
|
|
2372
|
+
handleClickManually?: boolean;
|
|
2373
|
+
}
|
|
2374
|
+
|
|
2375
|
+
export declare function Search({ id, search, setSearch, placeholder, clearIconClearFn, customStyles, disabled, }: SearchProps): JSX_2.Element;
|
|
2376
|
+
|
|
2377
|
+
export declare interface SearchProps {
|
|
2378
|
+
id: string;
|
|
2379
|
+
search?: string;
|
|
2380
|
+
setSearch?: React_2.Dispatch<React_2.SetStateAction<string>>;
|
|
2381
|
+
placeholder?: string;
|
|
2382
|
+
clearIconClearFn?: any;
|
|
2383
|
+
customStyles?: {
|
|
2384
|
+
customInputStyles?: React_2.CSSProperties;
|
|
2385
|
+
customIconStyles?: React_2.CSSProperties;
|
|
2386
|
+
};
|
|
2387
|
+
disabled?: boolean;
|
|
2388
|
+
}
|
|
2389
|
+
|
|
2390
|
+
/**
|
|
2391
|
+
* SearchV2 is a customizable search input component that integrates with the `InputV2` component.
|
|
2392
|
+
* It includes search and clear icons, and supports controlled and uncontrolled modes for managing the search input value.
|
|
2393
|
+
*
|
|
2394
|
+
* @param {SearchV2Props} props - The properties for the SearchV2 component.
|
|
2395
|
+
* @param {string} [props.search=''] - The current search term value (used in uncontrolled mode).
|
|
2396
|
+
* @param {React.Dispatch<React.SetStateAction<string>>} [props.setSearch] - Function to update the search term (used in controlled mode).
|
|
2397
|
+
* @param {InputV2Props} [props] - Additional properties to pass to the `InputV2` component.
|
|
2398
|
+
* @returns {JSX.Element} The rendered SearchV2 component.
|
|
2399
|
+
*
|
|
2400
|
+
* @example
|
|
2401
|
+
* <SearchV2
|
|
2402
|
+
* search={searchTerm}
|
|
2403
|
+
* setSearch={setSearchTerm}
|
|
2404
|
+
* placeholder="Search..."
|
|
2405
|
+
* />
|
|
2406
|
+
*/
|
|
2407
|
+
export declare function SearchV2({ search, setSearch, ...props }: SearchV2Props): JSX_2.Element;
|
|
2408
|
+
|
|
2409
|
+
declare interface SearchV2Props extends InputV2Props {
|
|
2410
|
+
search?: string;
|
|
2411
|
+
setSearch?: React.Dispatch<React.SetStateAction<string>>;
|
|
2412
|
+
}
|
|
2413
|
+
|
|
2414
|
+
/**
|
|
2415
|
+
* Array of seconds (0-59) formatted as strings
|
|
2416
|
+
* @type {string[]}
|
|
2417
|
+
*/
|
|
2418
|
+
export declare const seconds: string[];
|
|
2419
|
+
|
|
2420
|
+
export declare function SegmentedControl({ items, defaultValue, handleOnChange }: SegmentedControlProps): JSX_2.Element;
|
|
2421
|
+
|
|
2422
|
+
declare interface SegmentedControlProps {
|
|
2423
|
+
/**
|
|
2424
|
+
* items to show in segmented control
|
|
2425
|
+
*/
|
|
2426
|
+
items: Array<{
|
|
2427
|
+
label: string;
|
|
2428
|
+
value: string;
|
|
2429
|
+
component: React_2.ReactNode;
|
|
2430
|
+
}>;
|
|
2431
|
+
/**
|
|
2432
|
+
* default value to be selected on first render
|
|
2433
|
+
*/
|
|
2434
|
+
defaultValue?: string;
|
|
2435
|
+
/**
|
|
2436
|
+
* handle on change
|
|
2437
|
+
* use this if you are controlling the behavior of segmented control from an external entity
|
|
2438
|
+
*/
|
|
2439
|
+
handleOnChange?: (value: string) => void;
|
|
2440
|
+
}
|
|
2441
|
+
|
|
2442
|
+
export declare function Select({ options, onChange, name, id, className, placeholder, selectStyles, defaultValue, formatGroupLabel, customContainerStyles, customErrorStyles, menuPlacement, errorMsg, extraprops, isDisabled, isSearchable, isMulti, isClearable, customValue, CustomDropdownIndicator, }: SelectProps): JSX_2.Element;
|
|
2443
|
+
|
|
2444
|
+
export declare enum SELECT_VARIANT {
|
|
2445
|
+
DEFAULT = "default",
|
|
2446
|
+
USERS = "users",
|
|
2447
|
+
CHECKBOX = "checkbox",
|
|
2448
|
+
TAGS = "tags"
|
|
2449
|
+
}
|
|
2450
|
+
|
|
2451
|
+
declare interface SelectableBadgeProps extends BaseBadgeProps {
|
|
2452
|
+
selected: true;
|
|
2453
|
+
onClick: () => void;
|
|
2454
|
+
}
|
|
2455
|
+
|
|
2456
|
+
export declare type SelectActionMeta = ActionMeta<Option_2>;
|
|
2457
|
+
|
|
2458
|
+
declare type SelectActionMeta_2 = ActionMeta<{
|
|
2459
|
+
label: string;
|
|
2460
|
+
value: string;
|
|
2461
|
+
}>;
|
|
2462
|
+
|
|
2463
|
+
export declare function SelectAsync({ options, onChange, name, id, className, placeholder, selectStyles, defaultValue, formatGroupLabel, customContainerStyles, menuPlacement, errorMsg, extraProps, isDisabled, isSearchable, isMulti, isClearable, customValue, }: SelectAsyncProps): JSX_2.Element;
|
|
2464
|
+
|
|
2465
|
+
declare interface SelectAsyncProps {
|
|
2466
|
+
/**
|
|
2467
|
+
* The options to be displayed in the select
|
|
2468
|
+
* should atleast have {label: string, value: string}
|
|
2469
|
+
*/
|
|
2470
|
+
options: (inputValue: string) => Promise<Array<{
|
|
2471
|
+
label: string | '';
|
|
2472
|
+
value: string | '';
|
|
2473
|
+
profileImgUrl?: string | null;
|
|
2474
|
+
}> | void>;
|
|
2475
|
+
/**
|
|
2476
|
+
* Handle change events on the select
|
|
2477
|
+
*/
|
|
2478
|
+
onChange: (newValue: string | string[], actionMeta: SelectActionMeta_2) => void;
|
|
2479
|
+
/**
|
|
2480
|
+
* The name of the select
|
|
2481
|
+
*/
|
|
2482
|
+
name?: string;
|
|
2483
|
+
/**
|
|
2484
|
+
* The id of the select
|
|
2485
|
+
*/
|
|
2486
|
+
id?: string;
|
|
2487
|
+
/**
|
|
2488
|
+
* The className of the select
|
|
2489
|
+
*/
|
|
2490
|
+
className?: string;
|
|
2491
|
+
/**
|
|
2492
|
+
* The placeholder of the select
|
|
2493
|
+
*/
|
|
2494
|
+
placeholder?: string;
|
|
2495
|
+
/**
|
|
2496
|
+
* Whether the select is searchable
|
|
2497
|
+
*/
|
|
2498
|
+
isSearchable?: boolean;
|
|
2499
|
+
/**
|
|
2500
|
+
* Whether multiple selection is possible
|
|
2501
|
+
*/
|
|
2502
|
+
isMulti?: boolean;
|
|
2503
|
+
/**
|
|
2504
|
+
* Whether the select is clearable
|
|
2505
|
+
*/
|
|
2506
|
+
isClearable?: boolean;
|
|
2507
|
+
/**
|
|
2508
|
+
* The styles of the select component
|
|
2509
|
+
*/
|
|
2510
|
+
selectStyles?: StylesConfig<any>;
|
|
2511
|
+
/**
|
|
2512
|
+
* The default value of the select
|
|
2513
|
+
*/
|
|
2514
|
+
defaultValue?: any;
|
|
2515
|
+
/**
|
|
2516
|
+
* Formats group labels in the menu as React components
|
|
2517
|
+
*/
|
|
2518
|
+
formatGroupLabel?: (data: any) => React_2.ReactNode;
|
|
2519
|
+
/**
|
|
2520
|
+
* The custom styles of the select container
|
|
2521
|
+
*/
|
|
2522
|
+
customContainerStyles?: React_2.CSSProperties;
|
|
2523
|
+
/**
|
|
2524
|
+
* Whether the select is disabled
|
|
2525
|
+
*/
|
|
2526
|
+
isDisabled?: boolean;
|
|
2527
|
+
/**
|
|
2528
|
+
* Default placement of the menu in relation to the control. 'auto' will flip when there isn't enough space below the control.
|
|
2529
|
+
*/
|
|
2530
|
+
menuPlacement?: MenuPlacement;
|
|
2531
|
+
/**
|
|
2532
|
+
* The error message to be displayed
|
|
2533
|
+
*/
|
|
2534
|
+
errorMsg?: string | string[] | false;
|
|
2535
|
+
/**
|
|
2536
|
+
* extra props to pass for select component
|
|
2537
|
+
*/
|
|
2538
|
+
extraProps?: any;
|
|
2539
|
+
customValue?: any;
|
|
2540
|
+
}
|
|
2541
|
+
|
|
2542
|
+
export declare interface SelectedTime {
|
|
2543
|
+
hour: string;
|
|
2544
|
+
minute: string;
|
|
2545
|
+
second: string;
|
|
2546
|
+
period: PERIOD;
|
|
2547
|
+
}
|
|
2548
|
+
|
|
2549
|
+
export declare type SelectMultiValue = MultiValue<Option_2>;
|
|
2550
|
+
|
|
2551
|
+
export declare function Selectors({ selectors }: SelectorsProps): JSX_2.Element;
|
|
2552
|
+
|
|
2553
|
+
export declare interface SelectorsProps {
|
|
2554
|
+
selectors: {
|
|
2555
|
+
name: string;
|
|
2556
|
+
onClick: any;
|
|
2557
|
+
}[];
|
|
2558
|
+
}
|
|
2559
|
+
|
|
2560
|
+
export declare function SelectorsV2({ options, onChange, value }: SelectorsV2Props): JSX_2.Element;
|
|
2561
|
+
|
|
2562
|
+
export declare interface SelectorsV2Props {
|
|
2563
|
+
options: {
|
|
2564
|
+
label: string;
|
|
2565
|
+
value: string;
|
|
2566
|
+
}[];
|
|
2567
|
+
onChange: (value: string) => void;
|
|
2568
|
+
value: string;
|
|
2569
|
+
}
|
|
2570
|
+
|
|
2571
|
+
declare interface SelectProps {
|
|
2572
|
+
/**
|
|
2573
|
+
* The options to be displayed in the select
|
|
2574
|
+
* should atleast have {label: string, value: string}
|
|
2575
|
+
*/
|
|
2576
|
+
options: Array<{
|
|
2577
|
+
label: string | '';
|
|
2578
|
+
value: string | '';
|
|
2579
|
+
profileImgUrl?: string;
|
|
2580
|
+
}> | any;
|
|
2581
|
+
/**
|
|
2582
|
+
* Handle change events on the select
|
|
2583
|
+
*/
|
|
2584
|
+
onChange: (newValue: string | string[], actionMeta: SelectActionMeta_2) => void;
|
|
2585
|
+
/**
|
|
2586
|
+
* The name of the select
|
|
2587
|
+
*/
|
|
2588
|
+
name?: string;
|
|
2589
|
+
/**
|
|
2590
|
+
* The id of the select
|
|
2591
|
+
*/
|
|
2592
|
+
id?: string;
|
|
2593
|
+
/**
|
|
2594
|
+
* The className of the select
|
|
2595
|
+
*/
|
|
2596
|
+
className?: string;
|
|
2597
|
+
/**
|
|
2598
|
+
* The placeholder of the select
|
|
2599
|
+
*/
|
|
2600
|
+
placeholder?: string;
|
|
2601
|
+
/**
|
|
2602
|
+
* Whether the select is searchable
|
|
2603
|
+
*/
|
|
2604
|
+
isSearchable?: boolean;
|
|
2605
|
+
/**
|
|
2606
|
+
* Whether multiple selection is possible
|
|
2607
|
+
*/
|
|
2608
|
+
isMulti?: boolean;
|
|
2609
|
+
/**
|
|
2610
|
+
* Whether the select is clearable
|
|
2611
|
+
*/
|
|
2612
|
+
isClearable?: boolean;
|
|
2613
|
+
/**
|
|
2614
|
+
* The styles of the select component
|
|
2615
|
+
*/
|
|
2616
|
+
selectStyles?: StylesConfig<any>;
|
|
2617
|
+
/**
|
|
2618
|
+
* The default value of the select
|
|
2619
|
+
*/
|
|
2620
|
+
defaultValue?: {
|
|
2621
|
+
label: string;
|
|
2622
|
+
value: string;
|
|
2623
|
+
profileImgUrl?: string;
|
|
2624
|
+
};
|
|
2625
|
+
/**
|
|
2626
|
+
* Formats group labels in the menu as React components
|
|
2627
|
+
*/
|
|
2628
|
+
formatGroupLabel?: (data: any) => React_2.ReactNode;
|
|
2629
|
+
/**
|
|
2630
|
+
* The custom styles of the select container
|
|
2631
|
+
*/
|
|
2632
|
+
customContainerStyles?: React_2.CSSProperties;
|
|
2633
|
+
customErrorStyles?: React_2.CSSProperties;
|
|
2634
|
+
isDisabled?: boolean;
|
|
2635
|
+
/**
|
|
2636
|
+
* Default placement of the menu in relation to the control. 'auto' will flip when there isn't enough space below the control.
|
|
2637
|
+
*/
|
|
2638
|
+
menuPlacement?: MenuPlacement;
|
|
2639
|
+
/**
|
|
2640
|
+
* The error message to be displayed
|
|
2641
|
+
*/
|
|
2642
|
+
errorMsg?: string | false;
|
|
2643
|
+
/**
|
|
2644
|
+
* extra props to pass for select component
|
|
2645
|
+
*/
|
|
2646
|
+
extraprops?: any;
|
|
2647
|
+
/**
|
|
2648
|
+
* props to add custom dropdown
|
|
2649
|
+
*/
|
|
2650
|
+
CustomDropdownIndicator?: React_2.ReactNode;
|
|
2651
|
+
customValue?: any;
|
|
2652
|
+
}
|
|
2653
|
+
|
|
2654
|
+
export declare type SelectSingleValue = SingleValue<Option_2>;
|
|
2655
|
+
|
|
2656
|
+
/**
|
|
2657
|
+
* A custom select component based on react-select.
|
|
2658
|
+
* @param props - The properties for the SelectV2 component:
|
|
2659
|
+
* - `options` (Array<Option>): An array of options to be displayed in the dropdown. Each option can include a label, value, and optional profile image or icon.
|
|
2660
|
+
* - `mainContainerClassName` (string, optional): A custom CSS class name to apply to the main container for additional styling.
|
|
2661
|
+
* - `variant` (SELECT_VARIANT, optional): Defines the variant of the select component (e.g., 'default', 'users', 'checkbox', 'tags') to control the styling and behavior.
|
|
2662
|
+
* - `showDivider` (boolean, optional): Defines whether to add divider between option list.
|
|
2663
|
+
* - `errorMsg` (string, optional): An error message to display below the select component for validation purposes.
|
|
2664
|
+
* - `onChange` (function): A callback function that is triggered when the selected value(s) change. It receives the selected value(s) and action meta information.
|
|
2665
|
+
* - `customStyles` (StylesConfig<any>): custom styles for react select. it will override default styles
|
|
2666
|
+
* @returns The SelectV2 component.
|
|
2667
|
+
*/
|
|
2668
|
+
export declare function SelectV2(props: SelectV2Props): JSX_2.Element;
|
|
2669
|
+
|
|
2670
|
+
export declare interface SelectV2Props extends Props<any, boolean> {
|
|
2671
|
+
options: Option_2[];
|
|
2672
|
+
onChange: (value: string | string[], actionMeta: SelectActionMeta) => void;
|
|
2673
|
+
mainContainerClassName?: string;
|
|
2674
|
+
variant?: SELECT_VARIANT;
|
|
2675
|
+
showDivider?: boolean;
|
|
2676
|
+
errorMsg?: string;
|
|
2677
|
+
customStyles?: StylesConfig<any>;
|
|
2678
|
+
}
|
|
2679
|
+
|
|
2680
|
+
export declare type SelectValue = SelectMultiValue | SelectSingleValue;
|
|
2681
|
+
|
|
2682
|
+
export declare function Skeleton({ className, ...props }: SkeletonProps): JSX_2.Element;
|
|
2683
|
+
|
|
2684
|
+
declare type SkeletonProps = React.HTMLAttributes<HTMLDivElement>;
|
|
2685
|
+
|
|
2686
|
+
export declare function Status({ status, children }: StatusProps): JSX_2.Element;
|
|
2687
|
+
|
|
2688
|
+
export declare enum STATUS_MAP {
|
|
2689
|
+
SUCCESS = "success",
|
|
2690
|
+
INFO = "info",
|
|
2691
|
+
ERROR = "error",
|
|
2692
|
+
WARNING = "warning",
|
|
2693
|
+
DEFAULT = "default"
|
|
2694
|
+
}
|
|
2695
|
+
|
|
2696
|
+
export declare enum STATUS_STATUS {
|
|
2697
|
+
DISABLED = "disabled",
|
|
2698
|
+
ENABLED = "enabled",
|
|
2699
|
+
INFO = "info",
|
|
2700
|
+
WARNING = "warning",
|
|
2701
|
+
NODATA = "no-data",
|
|
2702
|
+
CANCEL = "cancel",
|
|
2703
|
+
DONE = "done"
|
|
2704
|
+
}
|
|
2705
|
+
|
|
2706
|
+
export declare const statusMap: {
|
|
2707
|
+
neutral: {
|
|
2708
|
+
bg: string;
|
|
2709
|
+
color: string;
|
|
2710
|
+
};
|
|
2711
|
+
default: {
|
|
2712
|
+
bg: string;
|
|
2713
|
+
color: string;
|
|
2714
|
+
};
|
|
2715
|
+
positive: {
|
|
2716
|
+
bg: string;
|
|
2717
|
+
color: string;
|
|
2718
|
+
};
|
|
2719
|
+
highlight: {
|
|
2720
|
+
bg: string;
|
|
2721
|
+
color: string;
|
|
2722
|
+
};
|
|
2723
|
+
warning: {
|
|
2724
|
+
bg: string;
|
|
2725
|
+
color: string;
|
|
2726
|
+
};
|
|
2727
|
+
negative: {
|
|
2728
|
+
bg: string;
|
|
2729
|
+
color: string;
|
|
2730
|
+
};
|
|
2731
|
+
};
|
|
2732
|
+
|
|
2733
|
+
declare interface StatusProps {
|
|
2734
|
+
status?: STATUS_STATUS;
|
|
2735
|
+
children: React_2.ReactNode;
|
|
2736
|
+
}
|
|
2737
|
+
|
|
2738
|
+
export declare function SVG({ path, width, height, spanClassName, svgClassName, customSpanStyles, customSvgStyles, handleClick, }: SVGProps): JSX_2.Element;
|
|
2739
|
+
|
|
2740
|
+
export declare type SVGProps = {
|
|
2741
|
+
path: string;
|
|
2742
|
+
width?: number;
|
|
2743
|
+
height?: number;
|
|
2744
|
+
spanClassName?: string;
|
|
2745
|
+
svgClassName?: string;
|
|
2746
|
+
customSvgStyles?: React.CSSProperties;
|
|
2747
|
+
customSpanStyles?: React.CSSProperties;
|
|
2748
|
+
handleClick?: (e: any) => void;
|
|
2749
|
+
};
|
|
2750
|
+
|
|
2751
|
+
export declare function Switch({ isToggled, handleToggleChange, name, switchClassName, subText, size, disabled, title, }: SwitchProps): JSX_2.Element;
|
|
2752
|
+
|
|
2753
|
+
declare type SwitchProps = {
|
|
2754
|
+
isToggled: boolean | any;
|
|
2755
|
+
handleToggleChange: (val: boolean) => void;
|
|
2756
|
+
name: string;
|
|
2757
|
+
subText?: string | React.ReactNode;
|
|
2758
|
+
switchClassName?: string;
|
|
2759
|
+
size?: 'sm' | 'md' | 'lg';
|
|
2760
|
+
disabled?: boolean;
|
|
2761
|
+
title?: string;
|
|
2762
|
+
};
|
|
2763
|
+
|
|
2764
|
+
/**
|
|
2765
|
+
* SwitchV2 Component
|
|
2766
|
+
*
|
|
2767
|
+
* A custom switch component that utilizes `@zag-js/switch` for accessibility and state management.
|
|
2768
|
+
* It includes an optional label, error message, and an info tooltip triggered by an info icon.
|
|
2769
|
+
*
|
|
2770
|
+
* The switch can be controlled via the `checked` prop and supports accessibility features like
|
|
2771
|
+
* hidden inputs and keyboard navigation.
|
|
2772
|
+
*
|
|
2773
|
+
* @param {SwitchV2Props} props - The props for configuring the switch.
|
|
2774
|
+
* @param {React.ReactNode} [props.children] - Optional label content displayed next to the switch.
|
|
2775
|
+
* @param {string} [props.errorMsg] - Optional error message displayed below the switch.
|
|
2776
|
+
* @param {string} [props.info] - Optional informational text that will be shown inside a tooltip.
|
|
2777
|
+
* @param {Partial<TooltipV2Props>} [props.tooltipProps] - Optional tooltip configuration for the info icon.
|
|
2778
|
+
* @param {boolean} [props.checked] - The checked state of the switch. Controls the on/off state if provided.
|
|
2779
|
+
*
|
|
2780
|
+
* @returns {JSX.Element} The rendered switch component with optional label, error message, and info tooltip.
|
|
2781
|
+
*/
|
|
2782
|
+
export declare function SwitchV2({ children, errorMsg, info, tooltipProps, ...props }: SwitchV2Props): JSX_2.Element;
|
|
2783
|
+
|
|
2784
|
+
declare interface SwitchV2Props extends Omit<zagSwitch.Context, 'id'> {
|
|
2785
|
+
children?: React_2.ReactNode;
|
|
2786
|
+
errorMsg?: string;
|
|
2787
|
+
info?: string;
|
|
2788
|
+
tooltipProps?: Partial<TooltipV2Props>;
|
|
2789
|
+
}
|
|
2790
|
+
|
|
2791
|
+
export declare const Tab: default_2.FC<TabProps>;
|
|
2792
|
+
|
|
2793
|
+
export declare function Table({ data, loaderConfig, columns, filterConfig, sortConfig, rowSelectionConfig, actionsConfig, searchConfig, totalText, paginationConfig, emptyStateConfig, tableStyleConfig, customColumnConfig, exportConfig, customActionItems, }: TableProps): JSX_2.Element;
|
|
2794
|
+
|
|
2795
|
+
declare type TableCustomColsVariant = 'default' | 'selection';
|
|
2796
|
+
|
|
2797
|
+
declare type TableCustomColumns = {
|
|
2798
|
+
checked_state: Array<CustomColCheckedState>;
|
|
2799
|
+
is_default: boolean;
|
|
2800
|
+
table_name: string;
|
|
2801
|
+
};
|
|
2802
|
+
|
|
2803
|
+
export declare function TableDeviceCell({ device, onClick, customStyle }: TableDeviceCellProps): JSX_2.Element;
|
|
2804
|
+
|
|
2805
|
+
declare interface TableDeviceCellProps {
|
|
2806
|
+
device: any;
|
|
2807
|
+
onClick: any;
|
|
2808
|
+
customStyle?: React.CSSProperties;
|
|
2809
|
+
}
|
|
2810
|
+
|
|
2811
|
+
declare type TableFilters = {
|
|
2812
|
+
header?: FilterOptions_2[];
|
|
2813
|
+
drawer?: FilterOptions_2[];
|
|
2814
|
+
};
|
|
2815
|
+
|
|
2816
|
+
export declare function TableLegacy({ data, loaderConfig, columns, filterConfig, sortConfig, rowSelectionConfig, actionsConfig, searchConfig, totalText, selectorConfig, paginationConfig, emptyStateConfig, headerText, infiniteScrollConfig, }: TableLegacyProps): JSX_2.Element;
|
|
2817
|
+
|
|
2818
|
+
export declare interface TableLegacyProps {
|
|
2819
|
+
data: any;
|
|
2820
|
+
columns: any;
|
|
2821
|
+
/**
|
|
2822
|
+
* column for actions dropdown in the last row
|
|
2823
|
+
*/
|
|
2824
|
+
actionsConfig?: {
|
|
2825
|
+
isDropdownActions?: boolean;
|
|
2826
|
+
menuItems?: {
|
|
2827
|
+
label: string;
|
|
2828
|
+
iconSrc?: string;
|
|
2829
|
+
onClick: any;
|
|
2830
|
+
filterFn?: any;
|
|
2831
|
+
disabled?: boolean | ((data: any) => boolean);
|
|
2832
|
+
}[];
|
|
2833
|
+
key?: string;
|
|
2834
|
+
customComp?: (data: any) => React_2.ReactNode | JSX.Element;
|
|
2835
|
+
};
|
|
2836
|
+
loaderConfig: {
|
|
2837
|
+
text?: string;
|
|
2838
|
+
isFetching: boolean;
|
|
2839
|
+
isError: boolean;
|
|
2840
|
+
errMsg?: string;
|
|
2841
|
+
};
|
|
2842
|
+
/**
|
|
2843
|
+
* table search
|
|
2844
|
+
*/
|
|
2845
|
+
searchConfig?: {
|
|
2846
|
+
placeholder?: string;
|
|
2847
|
+
search: string;
|
|
2848
|
+
setSearch: any;
|
|
2849
|
+
};
|
|
2850
|
+
/**
|
|
2851
|
+
* table sorting
|
|
2852
|
+
* @param sortBy used for
|
|
2853
|
+
*/
|
|
2854
|
+
sortConfig?: {
|
|
2855
|
+
sortBy: string;
|
|
2856
|
+
setSortBy: any;
|
|
2857
|
+
sortOrd: 'asc' | 'desc' | '';
|
|
2858
|
+
setSortOrd: any;
|
|
2859
|
+
sortMap: Record<string, string>;
|
|
2860
|
+
};
|
|
2861
|
+
/**
|
|
2862
|
+
* table filtering, data comes from an api
|
|
2863
|
+
*/
|
|
2864
|
+
filterConfig?: FilterConfig;
|
|
2865
|
+
totalText?: string;
|
|
2866
|
+
/**
|
|
2867
|
+
* Row checkbox or radio selection config
|
|
2868
|
+
*
|
|
2869
|
+
* @param rowIdKey: needed to keep the selected rows when search is being used server side https://tanstack.com/table/v8/docs/guide/row-selection#useful-row-ids
|
|
2870
|
+
*/
|
|
2871
|
+
rowSelectionConfig?: {
|
|
2872
|
+
isCheckbox?: boolean;
|
|
2873
|
+
isRadio?: boolean;
|
|
2874
|
+
actions?: {
|
|
2875
|
+
icon: string;
|
|
2876
|
+
text: string;
|
|
2877
|
+
onClick: any;
|
|
2878
|
+
}[];
|
|
2879
|
+
setSelectedRows?: React_2.Dispatch<React_2.SetStateAction<any>>;
|
|
2880
|
+
iconSrc?: string;
|
|
2881
|
+
clearOnSearch?: boolean;
|
|
2882
|
+
rowIdKey?: string;
|
|
2883
|
+
rowSelection?: {};
|
|
2884
|
+
setRowSelection?: React_2.Dispatch<React_2.SetStateAction<{}>>;
|
|
2885
|
+
};
|
|
2886
|
+
selectorConfig?: {
|
|
2887
|
+
selectors: {
|
|
2888
|
+
name: string;
|
|
2889
|
+
onClick: any;
|
|
2890
|
+
}[];
|
|
2891
|
+
};
|
|
2892
|
+
/**
|
|
2893
|
+
* @deprecated use infiniteScrollConfig
|
|
2894
|
+
*/
|
|
2895
|
+
paginationConfig?: {
|
|
2896
|
+
metaData: {
|
|
2897
|
+
total_items: number;
|
|
2898
|
+
items_on_page: number;
|
|
2899
|
+
page_no: number;
|
|
2900
|
+
};
|
|
2901
|
+
loader: React_2.ReactNode;
|
|
2902
|
+
fetchNextPage: () => void;
|
|
2903
|
+
height?: string;
|
|
2904
|
+
scrollThreshold?: string | number;
|
|
2905
|
+
scrollableTarget?: string;
|
|
2906
|
+
};
|
|
2907
|
+
/**
|
|
2908
|
+
* Used for infinite scroll, all the properties comes from useInfiniteQuery
|
|
2909
|
+
*/
|
|
2910
|
+
infiniteScrollConfig?: {
|
|
2911
|
+
fetchNextPage: () => void;
|
|
2912
|
+
isFetchingNextPage: boolean;
|
|
2913
|
+
};
|
|
2914
|
+
emptyStateConfig?: {
|
|
2915
|
+
icon: string;
|
|
2916
|
+
isCustom?: {
|
|
2917
|
+
value: boolean;
|
|
2918
|
+
component: React_2.ReactNode;
|
|
2919
|
+
};
|
|
2920
|
+
title: string;
|
|
2921
|
+
desc: string;
|
|
2922
|
+
btnText: string;
|
|
2923
|
+
onClick: any;
|
|
2924
|
+
columns: number;
|
|
2925
|
+
emptySearchTitle?: string;
|
|
2926
|
+
};
|
|
2927
|
+
headerText?: string;
|
|
2928
|
+
}
|
|
2929
|
+
|
|
2930
|
+
export declare function TablePagination({ paginationConfig }: TablePaginationProps): JSX_2.Element | null;
|
|
2931
|
+
|
|
2932
|
+
declare interface TablePaginationProps {
|
|
2933
|
+
paginationConfig: TableProps['paginationConfig'];
|
|
2934
|
+
}
|
|
2935
|
+
|
|
2936
|
+
export declare interface TableProps {
|
|
2937
|
+
data: any;
|
|
2938
|
+
columns: any;
|
|
2939
|
+
/**
|
|
2940
|
+
* column for actions dropdown in the last row
|
|
2941
|
+
*/
|
|
2942
|
+
actionsConfig?: {
|
|
2943
|
+
isDropdownActions?: boolean;
|
|
2944
|
+
menuItems?: {
|
|
2945
|
+
label: string;
|
|
2946
|
+
iconSrc?: string;
|
|
2947
|
+
onClick: any;
|
|
2948
|
+
filterFn?: any;
|
|
2949
|
+
disabled?: boolean | ((data: any) => boolean);
|
|
2950
|
+
}[];
|
|
2951
|
+
};
|
|
2952
|
+
loaderConfig: {
|
|
2953
|
+
text?: string;
|
|
2954
|
+
isFetching: boolean;
|
|
2955
|
+
isError: boolean;
|
|
2956
|
+
errMsg?: string;
|
|
2957
|
+
};
|
|
2958
|
+
/**
|
|
2959
|
+
* table search
|
|
2960
|
+
*/
|
|
2961
|
+
searchConfig?: {
|
|
2962
|
+
placeholder?: string;
|
|
2963
|
+
search: string;
|
|
2964
|
+
setSearch: any;
|
|
2965
|
+
};
|
|
2966
|
+
/**
|
|
2967
|
+
* table sorting
|
|
2968
|
+
* @param sortBy used for
|
|
2969
|
+
*/
|
|
2970
|
+
sortConfig?: {
|
|
2971
|
+
sortBy: string;
|
|
2972
|
+
setSortBy: any;
|
|
2973
|
+
sortOrd: 'asc' | 'desc' | '';
|
|
2974
|
+
setSortOrd: any;
|
|
2975
|
+
sortMap: Record<string, string>;
|
|
2976
|
+
};
|
|
2977
|
+
/**
|
|
2978
|
+
* table filtering, data comes from an api
|
|
2979
|
+
*/
|
|
2980
|
+
filterConfig?: FilterConfig_2;
|
|
2981
|
+
totalText?: string;
|
|
2982
|
+
/**
|
|
2983
|
+
* Row checkbox or radio selection config
|
|
2984
|
+
*
|
|
2985
|
+
* @param rowIdKey: needed to keep the selected rows when search is being used server side https://tanstack.com/table/v8/docs/guide/row-selection#useful-row-ids
|
|
2986
|
+
* @param entityName: singular format of entity name
|
|
2987
|
+
*/
|
|
2988
|
+
rowSelectionConfig?: {
|
|
2989
|
+
isCheckbox?: boolean;
|
|
2990
|
+
isRadio?: boolean;
|
|
2991
|
+
entityName: string;
|
|
2992
|
+
actions?: {
|
|
2993
|
+
iconSrc: string;
|
|
2994
|
+
label: string;
|
|
2995
|
+
onClick: any;
|
|
2996
|
+
}[];
|
|
2997
|
+
setSelectedRows?: React_2.Dispatch<React_2.SetStateAction<any>>;
|
|
2998
|
+
iconSrc?: string;
|
|
2999
|
+
clearOnSearch?: boolean;
|
|
3000
|
+
rowIdKey: string;
|
|
3001
|
+
rowSelection?: {};
|
|
3002
|
+
setRowSelection?: React_2.Dispatch<React_2.SetStateAction<{}>>;
|
|
3003
|
+
};
|
|
3004
|
+
paginationConfig?: {
|
|
3005
|
+
metaData?: {
|
|
3006
|
+
total_items: number;
|
|
3007
|
+
items_on_page: number;
|
|
3008
|
+
page_no: number;
|
|
3009
|
+
};
|
|
3010
|
+
page: number;
|
|
3011
|
+
setPage: (page: number) => void;
|
|
3012
|
+
limit: number;
|
|
3013
|
+
setLimit: (limit: number) => void;
|
|
3014
|
+
};
|
|
3015
|
+
emptyStateConfig?: {
|
|
3016
|
+
title?: string;
|
|
3017
|
+
desc?: string;
|
|
3018
|
+
btnText?: string;
|
|
3019
|
+
onClick?: any;
|
|
3020
|
+
icon?: string;
|
|
3021
|
+
customStyle?: React_2.CSSProperties;
|
|
3022
|
+
};
|
|
3023
|
+
tableStyleConfig?: {
|
|
3024
|
+
maxHeight?: string;
|
|
3025
|
+
stickyIds?: string[];
|
|
3026
|
+
};
|
|
3027
|
+
/**
|
|
3028
|
+
* custom columns
|
|
3029
|
+
*/
|
|
3030
|
+
customColumnConfig?: {
|
|
3031
|
+
description?: string;
|
|
3032
|
+
columns?: TableCustomColumns;
|
|
3033
|
+
isPending: boolean;
|
|
3034
|
+
isError: boolean;
|
|
3035
|
+
handleSaveColumns: (columns: any) => Promise<void>;
|
|
3036
|
+
variant?: TableCustomColsVariant;
|
|
3037
|
+
};
|
|
3038
|
+
/**
|
|
3039
|
+
* export config (csv)
|
|
3040
|
+
*/
|
|
3041
|
+
exportConfig?: {
|
|
3042
|
+
isPending: boolean;
|
|
3043
|
+
isError: boolean;
|
|
3044
|
+
handleExport: any;
|
|
3045
|
+
isLegacy?: boolean;
|
|
3046
|
+
};
|
|
3047
|
+
customActionItems?: JSX.Element[];
|
|
3048
|
+
}
|
|
3049
|
+
|
|
3050
|
+
/**
|
|
3051
|
+
* Represents a tag item with a name and optional additional properties.
|
|
3052
|
+
*/
|
|
3053
|
+
declare interface TableTagItem {
|
|
3054
|
+
id: string;
|
|
3055
|
+
name: string;
|
|
3056
|
+
[key: string]: any;
|
|
3057
|
+
}
|
|
3058
|
+
|
|
3059
|
+
/**
|
|
3060
|
+
* A generic component to display a list of items as badges with a popover for overflow.
|
|
3061
|
+
*
|
|
3062
|
+
* @param {TableTagsCellProps} props - The component props.
|
|
3063
|
+
* @returns {React.ReactElement} The rendered component.
|
|
3064
|
+
*/
|
|
3065
|
+
export declare function TableTagsCell({ items, maxVisible, renderBadge, renderPopoverContent, customStyles, }: TableTagsCellProps): React_2.ReactElement;
|
|
3066
|
+
|
|
3067
|
+
/**
|
|
3068
|
+
* Props for the TableTags component.
|
|
3069
|
+
* @typedef {Object} TableTagsCellProps@typedef {Object} TableTagsCellProps
|
|
3070
|
+
* @property {TableTagItem[]} items - Array of group items to display.
|
|
3071
|
+
* @property {number} [maxVisible=3] - Maximum number of items to display before showing a count badge.
|
|
3072
|
+
* @property {string} [customStyles] - Optional CSS styles for the container.
|
|
3073
|
+
* @property {(item: TableTagItem) => React.ReactNode} [renderBadge] - Optional custom render function for badges.
|
|
3074
|
+
* @property {(items: TableTagItem[]) => React.ReactNode} [renderPopoverContent] - Optional custom render function for popover content.
|
|
3075
|
+
*/
|
|
3076
|
+
declare interface TableTagsCellProps {
|
|
3077
|
+
items: TableTagItem[];
|
|
3078
|
+
maxVisible?: number;
|
|
3079
|
+
renderBadge?: (item: TableTagItem) => React_2.ReactNode;
|
|
3080
|
+
renderPopoverContent?: (items: TableTagItem[]) => React_2.ReactNode;
|
|
3081
|
+
customStyles?: React_2.CSSProperties;
|
|
3082
|
+
}
|
|
3083
|
+
|
|
3084
|
+
export declare function TableUserCell({ user, onClick, showCopy }: TableUserCellProps): JSX.Element | null;
|
|
3085
|
+
|
|
3086
|
+
declare interface TableUserCellProps {
|
|
3087
|
+
user: any;
|
|
3088
|
+
onClick: any;
|
|
3089
|
+
showCopy?: boolean;
|
|
3090
|
+
}
|
|
3091
|
+
|
|
3092
|
+
export declare interface TabProps {
|
|
3093
|
+
title: string;
|
|
3094
|
+
eventKey: string;
|
|
3095
|
+
isActive: boolean;
|
|
3096
|
+
customClassName?: string;
|
|
3097
|
+
customStyles?: default_2.CSSProperties;
|
|
3098
|
+
children: default_2.ReactNode;
|
|
3099
|
+
onClick: () => void;
|
|
3100
|
+
}
|
|
3101
|
+
|
|
3102
|
+
export declare const Tabs: default_2.FC<TabsProps>;
|
|
3103
|
+
|
|
3104
|
+
declare interface TabsProps {
|
|
3105
|
+
id: string;
|
|
3106
|
+
activeKey: string;
|
|
3107
|
+
onSelect: (key: string) => void;
|
|
3108
|
+
customClassName?: string;
|
|
3109
|
+
customStyles?: default_2.CSSProperties;
|
|
3110
|
+
children: ReactElement[];
|
|
3111
|
+
}
|
|
3112
|
+
|
|
3113
|
+
export declare function Tag({ status, text, icon, customStyles }: TagProps): JSX_2.Element;
|
|
3114
|
+
|
|
3115
|
+
declare interface TagProps {
|
|
3116
|
+
text: string;
|
|
3117
|
+
status: STATUS_MAP;
|
|
3118
|
+
icon?: string;
|
|
3119
|
+
customStyles?: React.CSSProperties;
|
|
3120
|
+
}
|
|
3121
|
+
|
|
3122
|
+
export declare function TaskCards({ headers, data, isLoading, isError, emptyText, paginationConfig, onClicks, }: TaskCardsProps): JSX_2.Element;
|
|
3123
|
+
|
|
3124
|
+
export declare interface TaskCardsProps {
|
|
3125
|
+
headers: string[];
|
|
3126
|
+
data?: ITask[];
|
|
3127
|
+
isLoading?: boolean;
|
|
3128
|
+
isError?: boolean;
|
|
3129
|
+
emptyText?: string;
|
|
3130
|
+
paginationConfig?: {
|
|
3131
|
+
metaData?: {
|
|
3132
|
+
total_items: number;
|
|
3133
|
+
items_on_page: number;
|
|
3134
|
+
page_no: number;
|
|
3135
|
+
};
|
|
3136
|
+
page: number;
|
|
3137
|
+
setPage: (page: number) => void;
|
|
3138
|
+
limit: number;
|
|
3139
|
+
setLimit: (limit: number) => void;
|
|
3140
|
+
};
|
|
3141
|
+
onClicks?: ((data: ITask) => void)[][];
|
|
3142
|
+
}
|
|
3143
|
+
|
|
3144
|
+
/**
|
|
3145
|
+
* TextareaV2 is a styled textarea component with optional error message display.
|
|
3146
|
+
* It provides a flexible way to render a textarea with custom styles and error handling.
|
|
3147
|
+
*
|
|
3148
|
+
* @param {TextareaV2Props} props - The properties for the TextareaV2 component.
|
|
3149
|
+
* @param {string} [props.errorMsg=''] - Error message to display below the textarea.
|
|
3150
|
+
* @param {string} [props.containerClassName=''] - Additional CSS classes to apply to the container.
|
|
3151
|
+
* @param {string} [props.className=''] - Additional CSS classes to apply to the textarea.
|
|
3152
|
+
* @param {React.CSSProperties} [props.inputStyles={}] - Used for internal styling when grouping it with multiple components. use className for styling textarea.
|
|
3153
|
+
* @param {React.CSSProperties} [props.containerStyles={}] -Used for internal styling when grouping it with multiple components. use containerClassName for styling textarea container.
|
|
3154
|
+
* @param {React.TextareaHTMLAttributes<HTMLTextAreaElement>} [props] - Other standard textarea attributes.
|
|
3155
|
+
* @param {React.Ref<HTMLTextAreaElement>} ref - Ref to the underlying textarea element.
|
|
3156
|
+
* @returns {JSX.Element} The rendered TextareaV2 component.
|
|
3157
|
+
*
|
|
3158
|
+
* @example
|
|
3159
|
+
* <TextareaV2
|
|
3160
|
+
* errorMsg="This field is required."
|
|
3161
|
+
* placeholder="Enter text..."
|
|
3162
|
+
* />
|
|
3163
|
+
*/
|
|
3164
|
+
export declare const TextareaV2: React_2.ForwardRefExoticComponent<TextareaV2Props & React_2.RefAttributes<HTMLTextAreaElement>>;
|
|
3165
|
+
|
|
3166
|
+
/**
|
|
3167
|
+
* Props for the TextareaV2 component, which extends the standard HTML textarea element
|
|
3168
|
+
* with additional styling and error handling.
|
|
3169
|
+
*
|
|
3170
|
+
* @interface InputV2Props
|
|
3171
|
+
* @extends {React.TextareaHTMLAttributes<HTMLTextAreaElement>}
|
|
3172
|
+
*
|
|
3173
|
+
*
|
|
3174
|
+
* @property {string} [errorMsg] - Error message to display below the textarea if there is a validation error.
|
|
3175
|
+
* @property {string} [containerClassName] - Additional class name(s) for the textarea container div.
|
|
3176
|
+
* @property {React.CSSProperties} [inputStyles] - Used for internal styling when grouping it with multiple components. use className for styling textarea.
|
|
3177
|
+
* @property {React.CSSProperties} [containerStyles] - Used for internal styling when grouping it with multiple components. use containerClassName for styling textarea container.
|
|
3178
|
+
*
|
|
3179
|
+
* @example
|
|
3180
|
+
* <TextareaV2
|
|
3181
|
+
* placeholder="Enter"
|
|
3182
|
+
* errorMsg="This field is required"
|
|
3183
|
+
* />
|
|
3184
|
+
* @example
|
|
3185
|
+
* with formik
|
|
3186
|
+
* <TextareaV2
|
|
3187
|
+
* {...formik.getFieldProps(key)}
|
|
3188
|
+
* placeholder="Enter"
|
|
3189
|
+
* errorMsg="This field is required"
|
|
3190
|
+
* />
|
|
3191
|
+
*/
|
|
3192
|
+
declare interface TextareaV2Props extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
3193
|
+
errorMsg?: string;
|
|
3194
|
+
containerClassName?: string;
|
|
3195
|
+
/* Excluded from this release type: inputStyles */
|
|
3196
|
+
/* Excluded from this release type: containerStyles */
|
|
3197
|
+
}
|
|
3198
|
+
|
|
3199
|
+
export declare enum TIME_PICKER_FORMAT {
|
|
3200
|
+
STANDARD = "12-hours",
|
|
3201
|
+
DUAL = "24-hours"
|
|
3202
|
+
}
|
|
3203
|
+
|
|
3204
|
+
export declare enum TIME_PICKER_TYPE {
|
|
3205
|
+
HOUR = "hour",
|
|
3206
|
+
MINUTE = "minute",
|
|
3207
|
+
SECOND = "second"
|
|
3208
|
+
}
|
|
3209
|
+
|
|
3210
|
+
/**
|
|
3211
|
+
* TimePicker component for selecting time with optional seconds and 12/24 hour formats
|
|
3212
|
+
* @param {TimePickerProps} props - Props for TimePicker component
|
|
3213
|
+
* @returns {JSX.Element} TimePicker component
|
|
3214
|
+
*/
|
|
3215
|
+
export declare function TimePicker({ timestamp, onTimeChange, format, enableSeconds, className, containerClassName, ...props }: TimePickerProps): JSX_2.Element;
|
|
3216
|
+
|
|
3217
|
+
export declare namespace TimePicker {
|
|
3218
|
+
var displayName: string;
|
|
3219
|
+
}
|
|
3220
|
+
|
|
3221
|
+
/**
|
|
3222
|
+
* TimePicker component props interface
|
|
3223
|
+
* @typedef {Object} TimePickerProps@typedef {Object} TimePickerProps
|
|
3224
|
+
* @property {function} onTimeChange - Callback to handle time change
|
|
3225
|
+
* @property {number} [timestamp] - Timestamp value (optional)
|
|
3226
|
+
* @property {TIME_PICKER_FORMAT} [format] - The time format, either 12-hour or 24-hour
|
|
3227
|
+
* @property {boolean} [enableSeconds=false] - Whether to enable seconds selection
|
|
3228
|
+
*/
|
|
3229
|
+
declare interface TimePickerProps extends InputV2Props {
|
|
3230
|
+
onTimeChange: (timestamp: number) => void;
|
|
3231
|
+
timestamp?: number;
|
|
3232
|
+
format?: TIME_PICKER_FORMAT;
|
|
3233
|
+
enableSeconds?: boolean;
|
|
3234
|
+
}
|
|
3235
|
+
|
|
3236
|
+
export declare function ToastCloseButton({ closeToast }: ToastCloseButtonProps): JSX_2.Element;
|
|
3237
|
+
|
|
3238
|
+
declare type ToastCloseButtonProps = {
|
|
3239
|
+
closeToast: (e: default_2.MouseEvent<HTMLElement, MouseEvent>) => void;
|
|
3240
|
+
};
|
|
3241
|
+
|
|
3242
|
+
export declare const toastError: ToastType;
|
|
3243
|
+
|
|
3244
|
+
export declare const toastInfo: ToastType;
|
|
3245
|
+
|
|
3246
|
+
export declare const toastSuccess: ToastType;
|
|
3247
|
+
|
|
3248
|
+
declare type ToastType = ({ msg, info, options }: ToastTypeArgs) => Id;
|
|
3249
|
+
|
|
3250
|
+
declare type ToastTypeArgs = {
|
|
3251
|
+
msg: string;
|
|
3252
|
+
info?: string;
|
|
3253
|
+
options?: IToastOptions;
|
|
3254
|
+
};
|
|
3255
|
+
|
|
3256
|
+
export declare const toastWarning: ToastType;
|
|
3257
|
+
|
|
3258
|
+
export declare function Tooltip({ children, openDelay, closeDelay, placement, }: TooltipProps): JSX_2.Element;
|
|
3259
|
+
|
|
3260
|
+
export declare namespace Tooltip {
|
|
3261
|
+
var Trigger: typeof TooltipTrigger;
|
|
3262
|
+
var Content: typeof TooltipContent;
|
|
3263
|
+
}
|
|
3264
|
+
|
|
3265
|
+
export declare const TOOLTIP_DEFAULTS: {
|
|
3266
|
+
opacity: number;
|
|
3267
|
+
contentMaxLength: number;
|
|
3268
|
+
portalId: string;
|
|
3269
|
+
};
|
|
3270
|
+
|
|
3271
|
+
declare function TooltipContent({ children, api, bg, positionerStyles, containerStyles, }: TooltipContentProps): JSX_2.Element;
|
|
3272
|
+
|
|
3273
|
+
/**
|
|
3274
|
+
* @author Pratik Awaik <pratik@hybr1d.io>
|
|
3275
|
+
*/
|
|
3276
|
+
declare interface TooltipContentProps {
|
|
3277
|
+
/**
|
|
3278
|
+
* tooltip content children
|
|
3279
|
+
*/
|
|
3280
|
+
children: React.ReactNode;
|
|
3281
|
+
/**
|
|
3282
|
+
* tooltip API object
|
|
3283
|
+
*/
|
|
3284
|
+
api?: any;
|
|
3285
|
+
/**
|
|
3286
|
+
* content background
|
|
3287
|
+
*/
|
|
3288
|
+
bg?: 'black' | 'gray' | string;
|
|
3289
|
+
/**
|
|
3290
|
+
* positioner styles
|
|
3291
|
+
*/
|
|
3292
|
+
positionerStyles?: React.CSSProperties;
|
|
3293
|
+
containerStyles?: React.CSSProperties;
|
|
3294
|
+
}
|
|
3295
|
+
|
|
3296
|
+
declare interface TooltipProps {
|
|
3297
|
+
/**
|
|
3298
|
+
* tooltip children
|
|
3299
|
+
*/
|
|
3300
|
+
children: React_2.ReactNode;
|
|
3301
|
+
/**
|
|
3302
|
+
* open tooltip after delay
|
|
3303
|
+
*/
|
|
3304
|
+
openDelay?: number;
|
|
3305
|
+
/**
|
|
3306
|
+
* close tooltip after delay
|
|
3307
|
+
*/
|
|
3308
|
+
closeDelay?: number;
|
|
3309
|
+
/**
|
|
3310
|
+
* placement of the tooltip
|
|
3311
|
+
*/
|
|
3312
|
+
placement?: Placement;
|
|
3313
|
+
}
|
|
3314
|
+
|
|
3315
|
+
declare function TooltipTrigger({ children, api, customStyles }: TooltipTriggerProps): JSX_2.Element;
|
|
3316
|
+
|
|
3317
|
+
declare interface TooltipTriggerProps {
|
|
3318
|
+
/**
|
|
3319
|
+
* tooltip trigger
|
|
3320
|
+
*/
|
|
3321
|
+
children: React.ReactNode;
|
|
3322
|
+
/**
|
|
3323
|
+
* The tooltip API object.
|
|
3324
|
+
*/
|
|
3325
|
+
api?: any;
|
|
3326
|
+
customStyles?: React.CSSProperties;
|
|
3327
|
+
}
|
|
3328
|
+
|
|
3329
|
+
/**
|
|
3330
|
+
* TooltipV2 component that displays a tooltip on hover or focus of the trigger element.
|
|
3331
|
+
*
|
|
3332
|
+
* @param {TooltipV2Props} props - Props for the TooltipV2 component.
|
|
3333
|
+
* @param {'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'} [props.placement='top'] - The placement of the tooltip relative to the trigger element.
|
|
3334
|
+
* @param {React.ReactNode} props.trigger - The element that triggers the tooltip (usually a button or link).
|
|
3335
|
+
* @param {string | React.ReactNode} props.content - The content to be displayed inside the tooltip. Can be a string or a React element.
|
|
3336
|
+
* @param {'dark' | 'light' | 'success' | 'warning' | 'error' | 'info'} [props.variant='dark'] - The variant or style of the tooltip, which changes its appearance based on the specified type.
|
|
3337
|
+
* @param {React.CSSProperties} [props.customStyle={}] - Inline custom styles to apply to the tooltip container.
|
|
3338
|
+
* @param {string} [props.className=''] - Additional custom CSS classes to apply to the tooltip for further styling.
|
|
3339
|
+
* @param {number} [props.opacity=TOOLTIP_DEFAULTS.opacity] - The opacity of the tooltip (between 0 and 1).
|
|
3340
|
+
* @param {string} [props.portalId] - The ID of the portal element where the tooltip should be rendered. If omitted, the tooltip will be rendered inline.
|
|
3341
|
+
* @param {string} [props.portalClass] - A CSS class used to locate the portal element by class name for tooltip rendering.
|
|
3342
|
+
* @param {number} [props.contentMaxLength=TOOLTIP_DEFAULTS.contentMaxLength] - The maximum length of the tooltip content. If exceeded and content is a string, it will be truncated. if pass null then max width will be removed.
|
|
3343
|
+
*
|
|
3344
|
+
* @returns {JSX.Element} The rendered TooltipV2 component.
|
|
3345
|
+
*
|
|
3346
|
+
* @example
|
|
3347
|
+
* <TooltipV2
|
|
3348
|
+
* placement="bottom"
|
|
3349
|
+
* trigger={<button>Hover me</button>}
|
|
3350
|
+
* content="This is a tooltip"
|
|
3351
|
+
* variant="light"
|
|
3352
|
+
* customStyle={{ color: 'black' }}
|
|
3353
|
+
* opacity={0.9}
|
|
3354
|
+
* portalId="tooltip-portal"
|
|
3355
|
+
* />
|
|
3356
|
+
*/
|
|
3357
|
+
export declare function TooltipV2({ placement, trigger, content, variant, customStyle, className, opacity, portalId, portalClass, contentMaxLength, }: TooltipV2Props): JSX_2.Element;
|
|
3358
|
+
|
|
3359
|
+
declare interface TooltipV2Props {
|
|
3360
|
+
placement?: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
|
|
3361
|
+
trigger: React_2.ReactNode;
|
|
3362
|
+
content: string | React_2.ReactNode;
|
|
3363
|
+
variant?: 'dark' | 'light' | 'success' | 'warning' | 'error' | 'info';
|
|
3364
|
+
customStyle?: React_2.CSSProperties;
|
|
3365
|
+
className?: string;
|
|
3366
|
+
opacity?: number;
|
|
3367
|
+
portalId?: string;
|
|
3368
|
+
portalClass?: string;
|
|
3369
|
+
contentMaxLength?: number | null;
|
|
3370
|
+
}
|
|
3371
|
+
|
|
3372
|
+
export declare const truncate: (text: string, max?: number) => string;
|
|
3373
|
+
|
|
3374
|
+
export declare function Upload({ getUploadDoc, setIsUploading, customComponent, fileUploadLimit, type, isMultiple, uploadFileLimit, singleFileClassName, fileContainerClassName, uploadBtnClassName, alignContent, showUploadIcon, additionalNode, disabled, addDocumentText, customUrl, beforeUploadHandler, extraSubtitleText, inventoryId, softwareId, preLoadedFiles, showFileList, acceptedFileTypes, error, addDocumentSubtitle, handleImageUpload, }: UploadProps): JSX_2.Element;
|
|
3375
|
+
|
|
3376
|
+
export declare enum UPLOAD_ALIGN_BTN_CONTENT {
|
|
3377
|
+
LEFT = "flex-start",
|
|
3378
|
+
CENTER = "center",
|
|
3379
|
+
RIGHT = "flex-end"
|
|
3380
|
+
}
|
|
3381
|
+
|
|
3382
|
+
export declare type UploadFileType = {
|
|
3383
|
+
id?: string;
|
|
3384
|
+
ext: string;
|
|
3385
|
+
type: string;
|
|
3386
|
+
url: string;
|
|
3387
|
+
metaData?: {
|
|
3388
|
+
fileName: string;
|
|
3389
|
+
key: string;
|
|
3390
|
+
};
|
|
3391
|
+
key: string;
|
|
3392
|
+
fileName: string;
|
|
3393
|
+
isUploaded: boolean;
|
|
3394
|
+
size: string;
|
|
3395
|
+
setIntervalFunction?: any;
|
|
3396
|
+
};
|
|
3397
|
+
|
|
3398
|
+
declare interface UploadProps {
|
|
3399
|
+
type: DOCS_TYPE;
|
|
3400
|
+
disabled?: boolean;
|
|
3401
|
+
getUploadDoc: (arg: any) => void;
|
|
3402
|
+
setIsUploading?: (arg: any) => void;
|
|
3403
|
+
customComponent?: React_2.ReactNode;
|
|
3404
|
+
fileUploadLimit?: number;
|
|
3405
|
+
isMultiple?: boolean;
|
|
3406
|
+
singleFileClassName?: string;
|
|
3407
|
+
fileContainerClassName?: string;
|
|
3408
|
+
uploadFileLimit?: number;
|
|
3409
|
+
uploadBtnClassName?: string;
|
|
3410
|
+
alignContent?: UPLOAD_ALIGN_BTN_CONTENT;
|
|
3411
|
+
showUploadIcon?: boolean;
|
|
3412
|
+
additionalNode?: React_2.ReactElement;
|
|
3413
|
+
addDocumentText?: string;
|
|
3414
|
+
customUrl?: string;
|
|
3415
|
+
beforeUploadHandler?: () => void;
|
|
3416
|
+
inventoryId?: string | null;
|
|
3417
|
+
softwareId?: string | null;
|
|
3418
|
+
preLoadedFiles?: Array<UploadFileType>;
|
|
3419
|
+
showFileList?: boolean;
|
|
3420
|
+
acceptedFileTypes?: string;
|
|
3421
|
+
extraSubtitleText?: string;
|
|
3422
|
+
error?: string | null;
|
|
3423
|
+
addDocumentSubtitle?: string;
|
|
3424
|
+
handleImageUpload: (images: any[], type: DOCS_TYPE, key?: string, value?: string, customUrl?: string, inventoryId?: string | null, softwareId?: string | null) => Promise<UploadFileType[]>;
|
|
3425
|
+
variant?: string;
|
|
3426
|
+
}
|
|
3427
|
+
|
|
3428
|
+
export declare const useAccordionStore: UseBoundStore<StoreApi<AccordionContextValue>>;
|
|
3429
|
+
|
|
3430
|
+
export declare const useBreadcrumbs: (breadcrumbs: Breadcrumb_2[]) => void;
|
|
3431
|
+
|
|
3432
|
+
export declare const useBreadcrumbsStore: UseBoundStore<StoreApi<BreadcrumbsStore>>;
|
|
3433
|
+
|
|
3434
|
+
export declare function useColorsFromWord(word: string): {
|
|
3435
|
+
darkerColor: string;
|
|
3436
|
+
lighterColor: string;
|
|
3437
|
+
};
|
|
3438
|
+
|
|
3439
|
+
export declare function useDateRangePicker(monthsBack?: number, defaultFrom?: string, defaultTo?: string): UseDateRangePickerReturnType;
|
|
3440
|
+
|
|
3441
|
+
declare interface UseDateRangePickerReturnType {
|
|
3442
|
+
from: string;
|
|
3443
|
+
to: string;
|
|
3444
|
+
handleDateChange: (values?: DateRange) => void;
|
|
3445
|
+
period: {
|
|
3446
|
+
from: Date | undefined;
|
|
3447
|
+
to: Date | undefined;
|
|
3448
|
+
};
|
|
3449
|
+
}
|
|
3450
|
+
|
|
3451
|
+
export declare function useDebounce(value: string, delay?: number): string;
|
|
3452
|
+
|
|
3453
|
+
export declare const useDisclosure: () => {
|
|
3454
|
+
isOpen: boolean;
|
|
3455
|
+
onOpen: () => void;
|
|
3456
|
+
onClose: () => void;
|
|
3457
|
+
};
|
|
3458
|
+
|
|
3459
|
+
export declare const useLockBodyScroll: (isLocked: boolean) => void;
|
|
3460
|
+
|
|
3461
|
+
export declare function useMediaQuery(query: string): boolean;
|
|
3462
|
+
|
|
3463
|
+
export declare enum USER_CHIP_STATUS {
|
|
3464
|
+
DEFAULT = "default",
|
|
3465
|
+
NEUTRAL = "neutral",
|
|
3466
|
+
POSITIVE = "positive",
|
|
3467
|
+
WARNING = "warning",
|
|
3468
|
+
ERROR = "error",
|
|
3469
|
+
HIGHLIGHT = "highlight",
|
|
3470
|
+
WHITE = "white"
|
|
3471
|
+
}
|
|
3472
|
+
|
|
3473
|
+
export declare function UserChip({ status, selected, username, profileImgUrl, }: UserChipProps): JSX_2.Element;
|
|
3474
|
+
|
|
3475
|
+
declare interface UserChipProps {
|
|
3476
|
+
status?: USER_CHIP_STATUS;
|
|
3477
|
+
selected?: boolean;
|
|
3478
|
+
username?: string;
|
|
3479
|
+
profileImgUrl?: string;
|
|
3480
|
+
}
|
|
3481
|
+
|
|
3482
|
+
export declare function UsersChip({ status, users }: UsersChipProps): JSX_2.Element;
|
|
3483
|
+
|
|
3484
|
+
declare interface UsersChipProps {
|
|
3485
|
+
status?: USER_CHIP_STATUS;
|
|
3486
|
+
users: Array<Partial<UsersChipUser>>;
|
|
3487
|
+
}
|
|
3488
|
+
|
|
3489
|
+
export declare interface UsersChipUser {
|
|
3490
|
+
first_name: string;
|
|
3491
|
+
last_name: string;
|
|
3492
|
+
work_email: string;
|
|
3493
|
+
profile_img_url: string;
|
|
3494
|
+
id: string;
|
|
3495
|
+
middle_name?: string | null;
|
|
3496
|
+
user_position?: string | null;
|
|
3497
|
+
}
|
|
3498
|
+
|
|
3499
|
+
export declare const ZENADMIN_CONTACT = "mailto:customersuccess@zenadmin.ai";
|
|
3500
|
+
|
|
3501
|
+
export declare const ZENADMIN_URL = "https://www.zenadmin.ai";
|
|
3502
|
+
|
|
1
3503
|
export { }
|
|
3504
|
+
|
|
3505
|
+
|
|
3506
|
+
declare namespace NumberAdornment {
|
|
3507
|
+
var displayName: INPUT_COMPONENTS;
|
|
3508
|
+
}
|