@trackunit/react-components 0.0.44 → 0.0.47
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/components/alert/Alert.d.ts +2 -2
- package/components/buttons/button/Button.d.ts +2 -2
- package/components/buttons/icon-button/IconButton.d.ts +2 -2
- package/components/buttons/shared/ButtonProps.d.ts +6 -6
- package/components/card/Card.d.ts +3 -3
- package/components/card/DensityContainer.d.ts +3 -2
- package/components/chart/Chart.d.ts +5 -5
- package/components/collapse/Collapse.d.ts +1 -1
- package/components/copyableText/CopyableText.d.ts +18 -0
- package/components/dateField/DateField.d.ts +1 -1
- package/components/heading/Heading.d.ts +4 -4
- package/components/icon/Icon.d.ts +4 -4
- package/components/indicator/Indicator.d.ts +1 -1
- package/components/menu/MenuItem.d.ts +29 -0
- package/components/menu/MenuList.d.ts +19 -1
- package/components/modal/Modal.d.ts +1 -1
- package/components/pageHeading/PageHeading.d.ts +18 -0
- package/components/radioGroup/RadioGroup.d.ts +47 -0
- package/components/radioGroup/RadioItem.d.ts +12 -0
- package/components/select/shared.d.ts +4 -4
- package/components/skeletonLines/SkeletonLines.d.ts +3 -3
- package/components/spacer/Spacer.d.ts +2 -2
- package/components/text/Text.d.ts +9 -9
- package/components/textArea/TextArea.d.ts +111 -0
- package/components/tip/Tip.d.ts +6 -0
- package/components/toggle/Toggle.d.ts +53 -0
- package/components/tooltip/Tooltip.d.ts +4 -4
- package/index.js +16 -10
- package/package.json +1 -1
- package/components/drawer/Drawer.d.ts +0 -32
- package/components/drawer/index.d.ts +0 -1
|
@@ -17,8 +17,8 @@ export interface AlertProps extends CommonProps {
|
|
|
17
17
|
children: React.ReactNode;
|
|
18
18
|
/**
|
|
19
19
|
* Intent of the alert component.
|
|
20
|
+
* @type "info" | "warning" | "danger" | "success"
|
|
20
21
|
*
|
|
21
|
-
* @type {AlertIntent}
|
|
22
22
|
* @memberof AlertProps
|
|
23
23
|
*/
|
|
24
24
|
intent?: AlertIntent;
|
|
@@ -39,7 +39,7 @@ export interface AlertProps extends CommonProps {
|
|
|
39
39
|
/**
|
|
40
40
|
* Action to be performed on clicking the secondary button.
|
|
41
41
|
*
|
|
42
|
-
* @type AlertAction
|
|
42
|
+
* @type {AlertAction}
|
|
43
43
|
* @memberof AlertProps
|
|
44
44
|
*/
|
|
45
45
|
secondaryAction?: AlertAction;
|
|
@@ -19,7 +19,7 @@ export interface ButtonProps extends ButtonCommonProps {
|
|
|
19
19
|
/**
|
|
20
20
|
* Whether button is fullWidth or not.
|
|
21
21
|
*
|
|
22
|
-
* @type
|
|
22
|
+
* @type boolean
|
|
23
23
|
* @memberof ButtonProps
|
|
24
24
|
*/
|
|
25
25
|
fullWidth?: boolean;
|
|
@@ -40,7 +40,7 @@ export interface ButtonProps extends ButtonCommonProps {
|
|
|
40
40
|
/**
|
|
41
41
|
* The type of the button. Values can be "submit" or "button".
|
|
42
42
|
*
|
|
43
|
-
* @type
|
|
43
|
+
* @type "submit" | "button"
|
|
44
44
|
* @memberof ButtonProps
|
|
45
45
|
*/
|
|
46
46
|
type?: ButtonType;
|
|
@@ -11,7 +11,7 @@ export interface IconButtonProps extends ButtonCommonProps {
|
|
|
11
11
|
/**
|
|
12
12
|
* Whether the button is circular or not.
|
|
13
13
|
*
|
|
14
|
-
* @type
|
|
14
|
+
* @type boolean
|
|
15
15
|
* @memberof IconButtonProps
|
|
16
16
|
*/
|
|
17
17
|
circular?: boolean;
|
|
@@ -25,7 +25,7 @@ export interface IconButtonProps extends ButtonCommonProps {
|
|
|
25
25
|
/**
|
|
26
26
|
* The size of the button. Defaults to "small".
|
|
27
27
|
*
|
|
28
|
-
* @type
|
|
28
|
+
* @type "small" | "normal" | "large"
|
|
29
29
|
* @memberof IconButtonProps
|
|
30
30
|
*/
|
|
31
31
|
size?: ButtonSize;
|
|
@@ -9,42 +9,42 @@ export interface ButtonCommonProps extends CommonProps {
|
|
|
9
9
|
/**
|
|
10
10
|
* Whether the button is loading.
|
|
11
11
|
*
|
|
12
|
-
* @type
|
|
12
|
+
* @type boolean
|
|
13
13
|
* @memberof ButtonCommonProps
|
|
14
14
|
*/
|
|
15
15
|
loading?: boolean;
|
|
16
16
|
/**
|
|
17
17
|
* Whether the button is disabled.
|
|
18
18
|
*
|
|
19
|
-
* @type
|
|
19
|
+
* @type boolean
|
|
20
20
|
* @memberof ButtonCommonProps
|
|
21
21
|
*/
|
|
22
22
|
disabled?: boolean;
|
|
23
23
|
/**
|
|
24
24
|
* Button with square aspect ratio.
|
|
25
25
|
*
|
|
26
|
-
* @type
|
|
26
|
+
* @type boolean
|
|
27
27
|
* @memberof ButtonCommonProps
|
|
28
28
|
*/
|
|
29
29
|
square?: boolean;
|
|
30
30
|
/**
|
|
31
31
|
* The button's variant. Values are filled, transparent, plain.
|
|
32
32
|
*
|
|
33
|
-
* @type
|
|
33
|
+
* @type "primary" | "secondary" | "danger" | "warning" | "tertiary"
|
|
34
34
|
* @memberof ButtonCommonProps
|
|
35
35
|
*/
|
|
36
36
|
intent?: ButtonIntent;
|
|
37
37
|
/**
|
|
38
38
|
* The variant of the button.
|
|
39
39
|
*
|
|
40
|
-
* @type
|
|
40
|
+
* @type "filled" | "transparent"
|
|
41
41
|
* @memberof ButtonCommonProps
|
|
42
42
|
*/
|
|
43
43
|
variant?: ButtonVariant;
|
|
44
44
|
/**
|
|
45
45
|
* The size of the button.
|
|
46
46
|
*
|
|
47
|
-
* @type
|
|
47
|
+
* @type "small" | "normal" | "large"
|
|
48
48
|
* @memberof ButtonCommonProps
|
|
49
49
|
*/
|
|
50
50
|
size?: ButtonSize;
|
|
@@ -10,21 +10,21 @@ export interface CardProps extends CommonProps {
|
|
|
10
10
|
/**
|
|
11
11
|
* Whether the card should have full height or not.
|
|
12
12
|
*
|
|
13
|
-
* @type
|
|
13
|
+
* @type boolean
|
|
14
14
|
* @memberof CardProps
|
|
15
15
|
*/
|
|
16
16
|
fullHeight?: boolean;
|
|
17
17
|
/**
|
|
18
18
|
* Whether the card should overflow contents.
|
|
19
19
|
*
|
|
20
|
-
* @type
|
|
20
|
+
* @type "visible" | "hidden" | "scroll" | "auto"
|
|
21
21
|
* @memberof CardProps
|
|
22
22
|
*/
|
|
23
23
|
overflow?: Overflow;
|
|
24
24
|
/**
|
|
25
25
|
*
|
|
26
26
|
* @deprecated Use tailwind based grid layouts instead.
|
|
27
|
-
* @type
|
|
27
|
+
* @type string
|
|
28
28
|
* @memberof CardProps
|
|
29
29
|
*/
|
|
30
30
|
gridArea?: string;
|
|
@@ -15,18 +15,19 @@ interface ContainerProps extends CommonProps {
|
|
|
15
15
|
* "comfortable" = 16px gap and padding.
|
|
16
16
|
* "spacious" = 16px gap, 26px padding.
|
|
17
17
|
*
|
|
18
|
-
* @type
|
|
18
|
+
* @type "none" | "compact" | "comfortable" | "spacious" | "auto"
|
|
19
19
|
* @memberof ContainerProps
|
|
20
20
|
*/
|
|
21
21
|
$density?: Density;
|
|
22
22
|
/**
|
|
23
23
|
* Set gap to be 0px (not preferable)
|
|
24
|
+
* @type boolean
|
|
24
25
|
*/
|
|
25
26
|
$disableGap?: boolean;
|
|
26
27
|
/**
|
|
27
28
|
* The flex direction of the Card. Defaults to "column".
|
|
28
29
|
*
|
|
29
|
-
* @type
|
|
30
|
+
* @type "row" | "row-reverse" | "column" | "column-reverse"
|
|
30
31
|
* @memberof ContainerProps
|
|
31
32
|
*/
|
|
32
33
|
$direction?: "row" | "row-reverse" | "column" | "column-reverse";
|
|
@@ -13,7 +13,7 @@ export interface IChartProps {
|
|
|
13
13
|
/**
|
|
14
14
|
* Whether or not to low the preloader.
|
|
15
15
|
*
|
|
16
|
-
* @type
|
|
16
|
+
* @type boolean
|
|
17
17
|
* @memberof IChartProps
|
|
18
18
|
*/
|
|
19
19
|
showLoading?: boolean;
|
|
@@ -42,13 +42,13 @@ export interface IChartProps {
|
|
|
42
42
|
*/
|
|
43
43
|
onBrushSelected?: (event: any) => void;
|
|
44
44
|
/**
|
|
45
|
-
*
|
|
45
|
+
* Event fired when mouse leaves the chart.
|
|
46
46
|
*
|
|
47
47
|
* @memberof IChartProps
|
|
48
48
|
*/
|
|
49
49
|
mouseLeaveChart?: () => void;
|
|
50
50
|
/**
|
|
51
|
-
*
|
|
51
|
+
* Class values to be passed to the component.
|
|
52
52
|
*
|
|
53
53
|
* @type string
|
|
54
54
|
* @memberof IChartProps
|
|
@@ -70,7 +70,7 @@ export interface IChartProps {
|
|
|
70
70
|
/**
|
|
71
71
|
* Whether to merge with previous option.
|
|
72
72
|
*
|
|
73
|
-
* @type
|
|
73
|
+
* @type boolean
|
|
74
74
|
* @memberof IChartProps
|
|
75
75
|
*/
|
|
76
76
|
merge?: boolean;
|
|
@@ -93,7 +93,7 @@ export interface IChartProps {
|
|
|
93
93
|
/**
|
|
94
94
|
* Type of rendered used. Either "svg" or "canvas".
|
|
95
95
|
*
|
|
96
|
-
* @type
|
|
96
|
+
* @type "svg" | "canvas"
|
|
97
97
|
* @memberof IChartProps
|
|
98
98
|
*/
|
|
99
99
|
renderer?: "svg" | "canvas";
|
|
@@ -1,7 +1,25 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
interface CopyableTextProps {
|
|
3
|
+
/**
|
|
4
|
+
* The text to be displayed.
|
|
5
|
+
*
|
|
6
|
+
* @type string
|
|
7
|
+
* @memberof CopyableTextProps
|
|
8
|
+
*/
|
|
3
9
|
text?: string;
|
|
10
|
+
/**
|
|
11
|
+
* Alternative text to be displayed.
|
|
12
|
+
*
|
|
13
|
+
* @type string
|
|
14
|
+
* @memberof CopyableTextProps
|
|
15
|
+
*/
|
|
4
16
|
alternativeText?: string;
|
|
17
|
+
/**
|
|
18
|
+
* ID of the component to be used while testing.
|
|
19
|
+
*
|
|
20
|
+
* @type string
|
|
21
|
+
* @memberof CopyableTextProps
|
|
22
|
+
*/
|
|
5
23
|
dataTestId?: string;
|
|
6
24
|
}
|
|
7
25
|
export declare const CopyableText: ({ text, alternativeText, dataTestId }: CopyableTextProps) => JSX.Element;
|
|
@@ -26,7 +26,7 @@ export interface DateFieldProps extends Pick<BaseInputProps, "placeholder" | "id
|
|
|
26
26
|
/**
|
|
27
27
|
* A flag that can be used to disable the input, default value is false
|
|
28
28
|
*
|
|
29
|
-
* @type
|
|
29
|
+
* @type boolean
|
|
30
30
|
* @memberof DateFieldProps
|
|
31
31
|
*/
|
|
32
32
|
disabled?: boolean;
|
|
@@ -10,23 +10,23 @@ export interface HeadingProps extends CommonProps {
|
|
|
10
10
|
*/
|
|
11
11
|
children: React.ReactNode;
|
|
12
12
|
/**
|
|
13
|
-
* Size of heading.
|
|
13
|
+
* Size of heading.
|
|
14
14
|
*
|
|
15
|
-
* @type
|
|
15
|
+
* @type "primary" | "secondary" | "tertiary" | "subtitle"
|
|
16
16
|
* @memberof HeadingProps
|
|
17
17
|
*/
|
|
18
18
|
variant: HeadingVariant;
|
|
19
19
|
/**
|
|
20
20
|
* Whether the heading uses inverted styles or not.
|
|
21
21
|
*
|
|
22
|
-
* @type
|
|
22
|
+
* @type boolean
|
|
23
23
|
* @memberof HeadingProps
|
|
24
24
|
*/
|
|
25
25
|
inverted?: boolean;
|
|
26
26
|
/**
|
|
27
27
|
* Whether the heading is a subtitle or not.
|
|
28
28
|
*
|
|
29
|
-
* @type
|
|
29
|
+
* @type boolean
|
|
30
30
|
* @memberof HeadingProps
|
|
31
31
|
*/
|
|
32
32
|
subtle?: boolean;
|
|
@@ -7,7 +7,7 @@ export interface IIconProps extends CommonProps {
|
|
|
7
7
|
* The name of the icon to be rendered.
|
|
8
8
|
* HeroIconName and TrackunitIconName are supported.
|
|
9
9
|
*
|
|
10
|
-
* @type
|
|
10
|
+
* @type TrackunitIconName | HeroIconName
|
|
11
11
|
* @memberof IIconProps
|
|
12
12
|
*/
|
|
13
13
|
name: TrackunitIconName | HeroIconName;
|
|
@@ -16,7 +16,7 @@ export interface IIconProps extends CommonProps {
|
|
|
16
16
|
* Supports any colors from the theme.
|
|
17
17
|
* Custom colors can be used by setting a text color in the className.
|
|
18
18
|
*
|
|
19
|
-
* @type
|
|
19
|
+
* @type Colors
|
|
20
20
|
* @memberof IIconProps
|
|
21
21
|
*/
|
|
22
22
|
color?: Colors;
|
|
@@ -26,7 +26,7 @@ export interface IIconProps extends CommonProps {
|
|
|
26
26
|
* Default value is Large.
|
|
27
27
|
* If a custom size is needed, set it in the className.
|
|
28
28
|
*
|
|
29
|
-
* @type
|
|
29
|
+
* @type "small" | "normal" | "large"
|
|
30
30
|
* @memberof IIconProps
|
|
31
31
|
*/
|
|
32
32
|
size?: "small" | "normal" | "large";
|
|
@@ -35,7 +35,7 @@ export interface IIconProps extends CommonProps {
|
|
|
35
35
|
* Default value depends on the Size prop, small == solid, normal == solid, large == outline.
|
|
36
36
|
* Trackunit icons might not support both outline and Solid.
|
|
37
37
|
*
|
|
38
|
-
* @type
|
|
38
|
+
* @type "solid" | "outline"
|
|
39
39
|
* @memberof IIconProps
|
|
40
40
|
*/
|
|
41
41
|
type?: "solid" | "outline";
|
|
@@ -1,9 +1,38 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export interface IMenuItemProps {
|
|
3
|
+
/**
|
|
4
|
+
* The icon to be rendered in the menu item.
|
|
5
|
+
*
|
|
6
|
+
* @type {(JSX.Element)}
|
|
7
|
+
* @memberof IMenuItemProps
|
|
8
|
+
*/
|
|
3
9
|
icon?: JSX.Element;
|
|
10
|
+
/**
|
|
11
|
+
* Label of the menu item
|
|
12
|
+
*
|
|
13
|
+
* @type string
|
|
14
|
+
* @memberof IMenuItemProps
|
|
15
|
+
*/
|
|
4
16
|
label?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Additional tailwind classes to be applied to the component.
|
|
19
|
+
*
|
|
20
|
+
* @type string
|
|
21
|
+
* @memberof IMenuItemProps
|
|
22
|
+
*/
|
|
5
23
|
className?: string;
|
|
24
|
+
/**
|
|
25
|
+
* Test id to be used for the component.
|
|
26
|
+
*
|
|
27
|
+
* @type string
|
|
28
|
+
* @memberof IMenuItemProps
|
|
29
|
+
*/
|
|
6
30
|
dataTestId?: string;
|
|
31
|
+
/**
|
|
32
|
+
* onClick event.
|
|
33
|
+
*
|
|
34
|
+
* @memberof IMenuItemProps
|
|
35
|
+
*/
|
|
7
36
|
onClick: () => void;
|
|
8
37
|
}
|
|
9
38
|
export declare const MenuItem: ({ className, dataTestId, label, icon, onClick }: IMenuItemProps) => JSX.Element;
|
|
@@ -4,8 +4,26 @@ export interface IMenuListItemProps extends IMenuItemProps {
|
|
|
4
4
|
showDivider?: boolean;
|
|
5
5
|
}
|
|
6
6
|
export interface IMenuListProps {
|
|
7
|
+
/**
|
|
8
|
+
* Additional tailwind classes to be applied to the component.
|
|
9
|
+
*
|
|
10
|
+
* @type string
|
|
11
|
+
* @memberof IMenuListProps
|
|
12
|
+
*/
|
|
7
13
|
className?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Test id to be used for the component.
|
|
16
|
+
*
|
|
17
|
+
* @type string
|
|
18
|
+
* @memberof IMenuListProps
|
|
19
|
+
*/
|
|
8
20
|
dataTestId?: string;
|
|
21
|
+
/**
|
|
22
|
+
* List of menu items to be rendered.
|
|
23
|
+
*
|
|
24
|
+
* @type {IMenuListItemProps[]}
|
|
25
|
+
* @memberof IMenuListProps
|
|
26
|
+
*/
|
|
9
27
|
menuItems: IMenuListItemProps[];
|
|
10
28
|
}
|
|
11
|
-
export declare const MenuList: ({ dataTestId, className, menuItems }: IMenuListProps) => JSX.Element;
|
|
29
|
+
export declare const MenuList: ({ dataTestId, className, menuItems, ...args }: IMenuListProps) => JSX.Element;
|
|
@@ -1,7 +1,25 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
interface PageHeadingProps {
|
|
3
|
+
/**
|
|
4
|
+
* The title of the page.
|
|
5
|
+
*
|
|
6
|
+
* @type {string}
|
|
7
|
+
* @memberof PageHeadingProps
|
|
8
|
+
*/
|
|
3
9
|
title: string;
|
|
10
|
+
/**
|
|
11
|
+
* Subtitle of the page.
|
|
12
|
+
*
|
|
13
|
+
* @type {string}
|
|
14
|
+
* @memberof PageHeadingProps
|
|
15
|
+
*/
|
|
4
16
|
subtitle?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Test id to be used for the component.
|
|
19
|
+
*
|
|
20
|
+
* @type {string}
|
|
21
|
+
* @memberof PageHeadingProps
|
|
22
|
+
*/
|
|
5
23
|
dataTestId?: string;
|
|
6
24
|
badge?: string;
|
|
7
25
|
}
|
|
@@ -1,13 +1,60 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { CommonProps } from "../../common/CommonProps";
|
|
3
3
|
interface RadioGroupProps extends CommonProps {
|
|
4
|
+
/**
|
|
5
|
+
*
|
|
6
|
+
*
|
|
7
|
+
* @type {React.ReactNode}
|
|
8
|
+
* @memberof RadioGroupProps
|
|
9
|
+
*/
|
|
4
10
|
children: React.ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* The id of the radio group.
|
|
13
|
+
*
|
|
14
|
+
* @type string
|
|
15
|
+
* @memberof RadioGroupProps
|
|
16
|
+
*/
|
|
5
17
|
id: string;
|
|
18
|
+
/**
|
|
19
|
+
* onChange handler for the radio group.
|
|
20
|
+
*
|
|
21
|
+
* @memberof RadioGroupProps
|
|
22
|
+
*/
|
|
6
23
|
onChange: (e: React.FormEvent<HTMLInputElement>) => void;
|
|
24
|
+
/**
|
|
25
|
+
* The value of the radio group.
|
|
26
|
+
*
|
|
27
|
+
* @type string | number
|
|
28
|
+
* @memberof RadioGroupProps
|
|
29
|
+
*/
|
|
7
30
|
value: string | number;
|
|
31
|
+
/**
|
|
32
|
+
* The name of the radio group.
|
|
33
|
+
*
|
|
34
|
+
* @type string
|
|
35
|
+
* @memberof RadioGroupProps
|
|
36
|
+
*/
|
|
8
37
|
name?: string;
|
|
38
|
+
/**
|
|
39
|
+
* The label of the radio group.
|
|
40
|
+
*
|
|
41
|
+
* @type string
|
|
42
|
+
* @memberof RadioGroupProps
|
|
43
|
+
*/
|
|
9
44
|
label?: string;
|
|
45
|
+
/**
|
|
46
|
+
* Whether the radiogroup is inline or not.
|
|
47
|
+
*
|
|
48
|
+
* @type boolean
|
|
49
|
+
* @memberof RadioGroupProps
|
|
50
|
+
*/
|
|
10
51
|
inline?: boolean;
|
|
52
|
+
/**
|
|
53
|
+
* Whether the radio group is disabled or not.
|
|
54
|
+
*
|
|
55
|
+
* @type boolean
|
|
56
|
+
* @memberof RadioGroupProps
|
|
57
|
+
*/
|
|
11
58
|
disabled?: boolean;
|
|
12
59
|
}
|
|
13
60
|
export declare const RadioGroup: ({ children, id, name, value, disabled, onChange, label, inline, className, dataTestId, }: RadioGroupProps) => JSX.Element;
|
|
@@ -1,7 +1,19 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { CommonProps } from "../../common/CommonProps";
|
|
3
3
|
interface RadioItemProps extends CommonProps {
|
|
4
|
+
/**
|
|
5
|
+
* The label of the radio item.
|
|
6
|
+
*
|
|
7
|
+
* @type {React.ReactNode}
|
|
8
|
+
* @memberof RadioItemProps
|
|
9
|
+
*/
|
|
4
10
|
label: React.ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* The value of the radio item.
|
|
13
|
+
*
|
|
14
|
+
* @type {(string | number)}
|
|
15
|
+
* @memberof RadioItemProps
|
|
16
|
+
*/
|
|
5
17
|
value: string | number;
|
|
6
18
|
}
|
|
7
19
|
export declare const RadioItem: ({ label, value, dataTestId, className }: RadioItemProps) => JSX.Element;
|
|
@@ -20,7 +20,7 @@ export interface ISelectProps<Option, IsAsync extends boolean, IsMulti extends b
|
|
|
20
20
|
/**
|
|
21
21
|
* To hide the label.
|
|
22
22
|
*
|
|
23
|
-
* @type
|
|
23
|
+
* @type boolean
|
|
24
24
|
* @memberof ISelectProps
|
|
25
25
|
*/
|
|
26
26
|
hideLabel?: boolean;
|
|
@@ -34,14 +34,14 @@ export interface ISelectProps<Option, IsAsync extends boolean, IsMulti extends b
|
|
|
34
34
|
/**
|
|
35
35
|
* Whether the component is invalid.
|
|
36
36
|
*
|
|
37
|
-
* @type
|
|
37
|
+
* @type boolean
|
|
38
38
|
* @memberof ISelectProps
|
|
39
39
|
*/
|
|
40
40
|
isInvalid?: boolean;
|
|
41
41
|
/**
|
|
42
42
|
* Whether the component is disabled.
|
|
43
43
|
*
|
|
44
|
-
* @type
|
|
44
|
+
* @type boolean
|
|
45
45
|
* @memberof ISelectProps
|
|
46
46
|
*/
|
|
47
47
|
isDisabled?: boolean;
|
|
@@ -62,7 +62,7 @@ export interface ISelectProps<Option, IsAsync extends boolean, IsMulti extends b
|
|
|
62
62
|
/**
|
|
63
63
|
* Size of the component.
|
|
64
64
|
*
|
|
65
|
-
* @type
|
|
65
|
+
* @type "small" | "default"
|
|
66
66
|
* @memberof ISelectProps
|
|
67
67
|
*/
|
|
68
68
|
size?: SelectSize;
|
|
@@ -4,21 +4,21 @@ export interface ISkeletonLinesProps extends CommonProps {
|
|
|
4
4
|
/**
|
|
5
5
|
* The number of lines to display.
|
|
6
6
|
*
|
|
7
|
-
* @type
|
|
7
|
+
* @type number
|
|
8
8
|
* @memberof ISkeletonLinesProps
|
|
9
9
|
*/
|
|
10
10
|
lines?: number;
|
|
11
11
|
/**
|
|
12
12
|
* The height of lines. Can be a number or an array of numbers or string.
|
|
13
13
|
*
|
|
14
|
-
* @type
|
|
14
|
+
* @type number | number[] | string
|
|
15
15
|
* @memberof ISkeletonLinesProps
|
|
16
16
|
*/
|
|
17
17
|
height?: number | number[] | string;
|
|
18
18
|
/**
|
|
19
19
|
* The width of each lines. Can be a number or an array of numbers or string.
|
|
20
20
|
*
|
|
21
|
-
* @type
|
|
21
|
+
* @type number | number[] | string
|
|
22
22
|
* @memberof ISkeletonLinesProps
|
|
23
23
|
*/
|
|
24
24
|
width?: number | number[] | string;
|
|
@@ -5,14 +5,14 @@ interface SpacerProps extends CommonProps {
|
|
|
5
5
|
* The minimum height of the spacer. Defaults to 1px.
|
|
6
6
|
* Possible values are "normal"(8px), and "large" (32px). Use className prop to use custom min-height values, example: min-h-[100px].
|
|
7
7
|
*
|
|
8
|
-
* @type
|
|
8
|
+
* @type number | string
|
|
9
9
|
* @memberof SpacerProps
|
|
10
10
|
*/
|
|
11
11
|
minHeight?: string;
|
|
12
12
|
/**
|
|
13
13
|
* The border of the spacer.
|
|
14
14
|
*
|
|
15
|
-
* @type
|
|
15
|
+
* @type boolean
|
|
16
16
|
* @memberof SpacerProps
|
|
17
17
|
*/
|
|
18
18
|
border?: boolean;
|
|
@@ -15,63 +15,63 @@ export interface TextProps extends CommonProps {
|
|
|
15
15
|
/**
|
|
16
16
|
* Type of element. Element can be of types "p", "span", or "div".
|
|
17
17
|
*
|
|
18
|
-
* @type
|
|
18
|
+
* @type "p" | "span" | "div"
|
|
19
19
|
* @memberof TextProps
|
|
20
20
|
*/
|
|
21
21
|
type?: TextType;
|
|
22
22
|
/**
|
|
23
23
|
* Size of element. Values can be "default", "small", or "large".
|
|
24
24
|
*
|
|
25
|
-
* @type
|
|
25
|
+
* @type "small" | "default" | "large"
|
|
26
26
|
* @memberof TextProps
|
|
27
27
|
*/
|
|
28
28
|
size?: TextSize;
|
|
29
29
|
/**
|
|
30
30
|
* Alignment of the text. Values can be "left", "center", or "right".
|
|
31
31
|
*
|
|
32
|
-
* @type
|
|
32
|
+
* @type "left" | "center" | "right"
|
|
33
33
|
* @memberof TextProps
|
|
34
34
|
*/
|
|
35
35
|
align?: TextAlign;
|
|
36
36
|
/**
|
|
37
37
|
* Weight of the text. Values can be "default", "thick", or "bold".
|
|
38
38
|
*
|
|
39
|
-
* @type
|
|
39
|
+
* @type "default" | "thick" | "bold"
|
|
40
40
|
* @memberof TextProps
|
|
41
41
|
*/
|
|
42
42
|
weight?: TextWeight;
|
|
43
43
|
/**
|
|
44
44
|
* Whether font styles are inverted.
|
|
45
45
|
*
|
|
46
|
-
* @type
|
|
46
|
+
* @type boolean
|
|
47
47
|
* @memberof TextProps
|
|
48
48
|
*/
|
|
49
49
|
inverted?: boolean;
|
|
50
50
|
/**
|
|
51
51
|
* Whether font styles are subtle or not.
|
|
52
52
|
*
|
|
53
|
-
* @type
|
|
53
|
+
* @type boolean
|
|
54
54
|
* @memberof TextProps
|
|
55
55
|
*/
|
|
56
56
|
subtle?: boolean;
|
|
57
57
|
/**
|
|
58
58
|
* Whether text is italicized.
|
|
59
59
|
*
|
|
60
|
-
* @type
|
|
60
|
+
* @type boolean
|
|
61
61
|
* @memberof TextProps
|
|
62
62
|
*/
|
|
63
63
|
italicize?: boolean;
|
|
64
64
|
/**
|
|
65
65
|
* Whether text is uppercase.
|
|
66
66
|
*
|
|
67
|
-
* @type
|
|
67
|
+
* @type boolean
|
|
68
68
|
* @memberof TextProps
|
|
69
69
|
*/
|
|
70
70
|
uppercase?: boolean;
|
|
71
71
|
/**
|
|
72
72
|
* Whether text is underlined or not.
|
|
73
73
|
*
|
|
74
|
-
* @type
|
|
74
|
+
* @type boolean
|
|
75
75
|
* @memberof TextProps
|
|
76
76
|
*/
|
|
77
77
|
underline?: boolean;
|
|
@@ -2,24 +2,135 @@ import * as React from "react";
|
|
|
2
2
|
import { CommonProps } from "../../common/CommonProps";
|
|
3
3
|
export declare type TextAreaResize = "none" | "vertical" | "horizontal" | "both";
|
|
4
4
|
export interface TextAreaProps extends CommonProps {
|
|
5
|
+
/**
|
|
6
|
+
* ID of the text area.
|
|
7
|
+
*
|
|
8
|
+
* @type string
|
|
9
|
+
* @memberof TextAreaProps
|
|
10
|
+
*/
|
|
5
11
|
id?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Name of the text area.
|
|
14
|
+
*
|
|
15
|
+
* @type string
|
|
16
|
+
* @memberof TextAreaProps
|
|
17
|
+
*/
|
|
6
18
|
name?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Label of the text area.
|
|
21
|
+
*
|
|
22
|
+
* @type string
|
|
23
|
+
* @memberof TextAreaProps
|
|
24
|
+
*/
|
|
7
25
|
label?: string;
|
|
26
|
+
/**
|
|
27
|
+
* Description of the text area.
|
|
28
|
+
*
|
|
29
|
+
* @type string
|
|
30
|
+
* @memberof TextAreaProps
|
|
31
|
+
*/
|
|
8
32
|
description?: string;
|
|
33
|
+
/**
|
|
34
|
+
* Information about the text area.
|
|
35
|
+
*
|
|
36
|
+
* @type {React.ReactNode}
|
|
37
|
+
* @memberof TextAreaProps
|
|
38
|
+
*/
|
|
9
39
|
info?: React.ReactNode;
|
|
40
|
+
/**
|
|
41
|
+
* Error message of the text area.
|
|
42
|
+
*
|
|
43
|
+
* @type {React.ReactNode}
|
|
44
|
+
* @memberof TextAreaProps
|
|
45
|
+
*/
|
|
10
46
|
error?: React.ReactNode;
|
|
47
|
+
/**
|
|
48
|
+
* Value of the text area.
|
|
49
|
+
*
|
|
50
|
+
* @type {React.ReactText}
|
|
51
|
+
* @memberof TextAreaProps
|
|
52
|
+
*/
|
|
11
53
|
value?: React.ReactText;
|
|
54
|
+
/**
|
|
55
|
+
* Tab index specifies the keyboard tab order of the textarea relative to the other controls on the page.
|
|
56
|
+
*
|
|
57
|
+
* @type number
|
|
58
|
+
* @memberof TextAreaProps
|
|
59
|
+
*/
|
|
12
60
|
tabIndex?: number;
|
|
61
|
+
/**
|
|
62
|
+
* Whether the text area is disabled or not.
|
|
63
|
+
*
|
|
64
|
+
* @type boolean
|
|
65
|
+
* @memberof TextAreaProps
|
|
66
|
+
*/
|
|
13
67
|
disabled?: boolean;
|
|
68
|
+
/**
|
|
69
|
+
* Whether the text area is readonly or not.
|
|
70
|
+
*
|
|
71
|
+
* @type boolean
|
|
72
|
+
* @memberof TextAreaProps
|
|
73
|
+
*/
|
|
14
74
|
readOnly?: boolean;
|
|
75
|
+
/**
|
|
76
|
+
* Number of rows in the text area.
|
|
77
|
+
*
|
|
78
|
+
* @type number
|
|
79
|
+
* @memberof TextAreaProps
|
|
80
|
+
*/
|
|
15
81
|
rows?: number;
|
|
82
|
+
/**
|
|
83
|
+
* Placeholder text for the text area.
|
|
84
|
+
*
|
|
85
|
+
* @type string
|
|
86
|
+
* @memberof TextAreaProps
|
|
87
|
+
*/
|
|
16
88
|
placeholder?: string;
|
|
89
|
+
/**
|
|
90
|
+
* onChange handler of the text area.
|
|
91
|
+
*
|
|
92
|
+
* @memberof TextAreaProps
|
|
93
|
+
*/
|
|
17
94
|
onChange?: (event: React.SyntheticEvent<HTMLTextAreaElement>) => void;
|
|
95
|
+
/**
|
|
96
|
+
* onFocus handler of the text area.
|
|
97
|
+
*
|
|
98
|
+
* @memberof TextAreaProps
|
|
99
|
+
*/
|
|
18
100
|
onFocus?: (event: React.SyntheticEvent<HTMLTextAreaElement>) => void;
|
|
101
|
+
/**
|
|
102
|
+
* onBlur handler of the text area.
|
|
103
|
+
*
|
|
104
|
+
* @memberof TextAreaProps
|
|
105
|
+
*/
|
|
19
106
|
onBlur?: (event: React.SyntheticEvent<HTMLTextAreaElement>) => void;
|
|
107
|
+
/**
|
|
108
|
+
* Maximum length of the text area.
|
|
109
|
+
*
|
|
110
|
+
* @type number
|
|
111
|
+
* @memberof TextAreaProps
|
|
112
|
+
*/
|
|
20
113
|
maxLength?: number;
|
|
114
|
+
/**
|
|
115
|
+
* Resize of the text area.
|
|
116
|
+
*
|
|
117
|
+
* @type "none" | "vertical" | "horizontal" | "both"
|
|
118
|
+
* @memberof TextAreaProps
|
|
119
|
+
*/
|
|
21
120
|
resize?: TextAreaResize;
|
|
121
|
+
/**
|
|
122
|
+
* Default value of the textarea.
|
|
123
|
+
*
|
|
124
|
+
* @type {React.ReactText}
|
|
125
|
+
* @memberof TextAreaProps
|
|
126
|
+
*/
|
|
22
127
|
defaultValue?: React.ReactText;
|
|
128
|
+
/**
|
|
129
|
+
* Whether the text area is required or not.
|
|
130
|
+
*
|
|
131
|
+
* @type boolean
|
|
132
|
+
* @memberof TextAreaProps
|
|
133
|
+
*/
|
|
23
134
|
required?: boolean;
|
|
24
135
|
}
|
|
25
136
|
export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
package/components/tip/Tip.d.ts
CHANGED
|
@@ -3,6 +3,12 @@ import { CommonProps } from "../../common";
|
|
|
3
3
|
import { IIconProps } from "../icon/Icon";
|
|
4
4
|
import { TooltipProps } from "../tooltip";
|
|
5
5
|
export interface TipProps extends CommonProps {
|
|
6
|
+
/**
|
|
7
|
+
* Child nodes to render inside the tip.
|
|
8
|
+
*
|
|
9
|
+
* @type {React.ReactNode}
|
|
10
|
+
* @memberof TipProps
|
|
11
|
+
*/
|
|
6
12
|
children: React.ReactNode;
|
|
7
13
|
iconProps?: Partial<IIconProps>;
|
|
8
14
|
tooltipProps?: Partial<TooltipProps>;
|
|
@@ -2,14 +2,67 @@ import * as React from "react";
|
|
|
2
2
|
import { CommonProps } from "../../common/CommonProps";
|
|
3
3
|
export declare type ToggleSize = "small" | "default";
|
|
4
4
|
export interface ToggleProps extends CommonProps {
|
|
5
|
+
/**
|
|
6
|
+
* ID of the toggle.
|
|
7
|
+
*
|
|
8
|
+
* @type string
|
|
9
|
+
* @memberof ToggleProps
|
|
10
|
+
*/
|
|
5
11
|
id: string;
|
|
12
|
+
/**
|
|
13
|
+
* Whether the toggle is toggled(active) or not.
|
|
14
|
+
*
|
|
15
|
+
* @type boolean
|
|
16
|
+
* @memberof ToggleProps
|
|
17
|
+
*/
|
|
6
18
|
toggled: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* onChange event handler.
|
|
21
|
+
*
|
|
22
|
+
* @memberof ToggleProps
|
|
23
|
+
*/
|
|
7
24
|
onChange: (toggled: boolean, event?: React.ChangeEvent<HTMLInputElement>) => void;
|
|
25
|
+
/**
|
|
26
|
+
* Whether the toggle is disabled or not.
|
|
27
|
+
*
|
|
28
|
+
* @type boolean
|
|
29
|
+
* @memberof ToggleProps
|
|
30
|
+
*/
|
|
8
31
|
disabled?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Size of the toggle.
|
|
34
|
+
*
|
|
35
|
+
* @type "small" | "default"
|
|
36
|
+
* @memberof ToggleProps
|
|
37
|
+
*/
|
|
9
38
|
size?: ToggleSize;
|
|
39
|
+
/**
|
|
40
|
+
* Tab index specifies the keyboard tab order of the toggle relative to the other controls on the page.
|
|
41
|
+
*
|
|
42
|
+
* @type number
|
|
43
|
+
* @memberof ToggleProps
|
|
44
|
+
*/
|
|
10
45
|
tabIndex?: number;
|
|
46
|
+
/**
|
|
47
|
+
* Whether the toggle is required or not.
|
|
48
|
+
*
|
|
49
|
+
* @type boolean
|
|
50
|
+
* @memberof ToggleProps
|
|
51
|
+
*/
|
|
11
52
|
required?: boolean;
|
|
53
|
+
/**
|
|
54
|
+
* Name of the toggle.
|
|
55
|
+
*
|
|
56
|
+
* @type string
|
|
57
|
+
* @memberof ToggleProps
|
|
58
|
+
*/
|
|
12
59
|
name?: string;
|
|
60
|
+
/**
|
|
61
|
+
* onBlur event handler.
|
|
62
|
+
*
|
|
63
|
+
* @type {React.FocusEventHandler<HTMLInputElement>}
|
|
64
|
+
* @memberof ToggleProps
|
|
65
|
+
*/
|
|
13
66
|
onBlur?: React.FocusEventHandler<HTMLInputElement>;
|
|
14
67
|
}
|
|
15
68
|
export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -33,21 +33,21 @@ export interface TooltipProps {
|
|
|
33
33
|
/**
|
|
34
34
|
* Whether the tooltip is disabled or not.
|
|
35
35
|
*
|
|
36
|
-
* @type
|
|
36
|
+
* @type boolean
|
|
37
37
|
* @memberof TooltipProps
|
|
38
38
|
*/
|
|
39
39
|
disabled?: boolean;
|
|
40
40
|
/**
|
|
41
41
|
* To select either "light" or "dark" mode.
|
|
42
42
|
*
|
|
43
|
-
* @type
|
|
43
|
+
* @type "light" | "dark"
|
|
44
44
|
* @memberof TooltipProps
|
|
45
45
|
*/
|
|
46
46
|
mode?: "light" | "dark";
|
|
47
47
|
/**
|
|
48
48
|
* Offset value of the tooltip.
|
|
49
49
|
*
|
|
50
|
-
* @type
|
|
50
|
+
* @type [number, number]
|
|
51
51
|
* @memberof TooltipProps
|
|
52
52
|
*/
|
|
53
53
|
offset?: [number, number];
|
|
@@ -61,7 +61,7 @@ export interface TooltipProps {
|
|
|
61
61
|
/**
|
|
62
62
|
* Type of content.
|
|
63
63
|
*
|
|
64
|
-
* @type
|
|
64
|
+
* @type "p" | "span" | "div"
|
|
65
65
|
* @memberof TooltipProps
|
|
66
66
|
*/
|
|
67
67
|
contentTextType?: TextType;
|
package/index.js
CHANGED
|
@@ -85,7 +85,7 @@ const Spinner = ({
|
|
|
85
85
|
"$centered": centered,
|
|
86
86
|
className: containerClassName
|
|
87
87
|
}, {
|
|
88
|
-
children: jsx(StyledSpinner, {
|
|
88
|
+
children: jsx(StyledSpinner$1, {
|
|
89
89
|
"$size": size,
|
|
90
90
|
"$mode": mode,
|
|
91
91
|
role: "spinbutton",
|
|
@@ -111,7 +111,7 @@ const getSpinnerStyles = () => ({
|
|
|
111
111
|
}
|
|
112
112
|
};
|
|
113
113
|
|
|
114
|
-
const StyledSpinner = tw.span`
|
|
114
|
+
const StyledSpinner$1 = tw.span`
|
|
115
115
|
spinner
|
|
116
116
|
${p => p.$mode === "dark" ? tws`spinner--dark` : null}
|
|
117
117
|
${getSpinnerStyles()}
|
|
@@ -199,7 +199,7 @@ const Button = React.forwardRef((_a, ref) => {
|
|
|
199
199
|
"data-testid": dataTestId,
|
|
200
200
|
ref: ref
|
|
201
201
|
}, rest, {
|
|
202
|
-
children: [loading && jsx(
|
|
202
|
+
children: [loading && jsx(StyledSpinner, {
|
|
203
203
|
centered: true
|
|
204
204
|
}), prefix, children, suffix]
|
|
205
205
|
}));
|
|
@@ -211,6 +211,9 @@ const StyledButton$1 = tw.button`
|
|
|
211
211
|
${getStyles()}
|
|
212
212
|
${getPadding()}
|
|
213
213
|
`;
|
|
214
|
+
const StyledSpinner = tw(Spinner)`
|
|
215
|
+
button__spinner
|
|
216
|
+
`;
|
|
214
217
|
Button.displayName = "Button";
|
|
215
218
|
|
|
216
219
|
const IconButton = React.forwardRef((_a, ref) => {
|
|
@@ -2516,15 +2519,18 @@ const Label = tw.div`
|
|
|
2516
2519
|
menuItem__label
|
|
2517
2520
|
`;
|
|
2518
2521
|
|
|
2519
|
-
const MenuList =
|
|
2520
|
-
|
|
2521
|
-
|
|
2522
|
-
|
|
2523
|
-
|
|
2524
|
-
|
|
2522
|
+
const MenuList = _a => {
|
|
2523
|
+
var {
|
|
2524
|
+
dataTestId,
|
|
2525
|
+
className,
|
|
2526
|
+
menuItems
|
|
2527
|
+
} = _a,
|
|
2528
|
+
args = __rest(_a, ["dataTestId", "className", "menuItems"]);
|
|
2529
|
+
|
|
2530
|
+
const containerProps = useContainerProps(Object.assign({
|
|
2525
2531
|
className,
|
|
2526
2532
|
dataTestId
|
|
2527
|
-
});
|
|
2533
|
+
}, args));
|
|
2528
2534
|
return jsx(Wrapper, {
|
|
2529
2535
|
children: jsx(Container$1, Object.assign({}, containerProps, {
|
|
2530
2536
|
children: menuItems.map((props, index) => {
|
package/package.json
CHANGED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { CommonProps } from "../../common/CommonProps";
|
|
3
|
-
export interface DrawerProps extends CommonProps {
|
|
4
|
-
/**
|
|
5
|
-
* Child nodes
|
|
6
|
-
*
|
|
7
|
-
* @type React.ReactNode
|
|
8
|
-
* @memberof DrawerProps
|
|
9
|
-
*/
|
|
10
|
-
children: React.ReactNode;
|
|
11
|
-
/**
|
|
12
|
-
* Whether the drawer is open or not.
|
|
13
|
-
*
|
|
14
|
-
* @type {boolean}
|
|
15
|
-
* @memberof DrawerProps
|
|
16
|
-
*/
|
|
17
|
-
isOpen?: boolean;
|
|
18
|
-
/**
|
|
19
|
-
* OnClose event.
|
|
20
|
-
*
|
|
21
|
-
* @memberof DrawerProps
|
|
22
|
-
*/
|
|
23
|
-
onClose?: () => void;
|
|
24
|
-
/**
|
|
25
|
-
* Whether the drawer is displayed in-line or not.
|
|
26
|
-
*
|
|
27
|
-
* @type {boolean}
|
|
28
|
-
* @memberof DrawerProps
|
|
29
|
-
*/
|
|
30
|
-
inline?: boolean;
|
|
31
|
-
}
|
|
32
|
-
export declare const Drawer: ({ children, isOpen, onClose, inline, className, dataTestId }: DrawerProps) => JSX.Element;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./Drawer";
|