@livechat/design-system-react-components 1.18.0 → 1.19.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ActionMenu/ActionMenu.d.ts +2 -55
- package/dist/components/ActionMenu/types.d.ts +57 -0
- package/dist/components/Button/Button.d.ts +1 -1
- package/dist/components/Search/Search.d.ts +4 -0
- package/dist/foundations/design-token.d.ts +46 -0
- package/dist/index.cjs.js +1 -1
- package/dist/index.es.js +1536 -1468
- package/dist/preview-stats.json +513 -510
- package/dist/style.css +1 -1
- package/package.json +3 -3
|
@@ -1,56 +1,3 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
import { IActionMenuOption } from './types';
|
|
5
|
-
export interface ActionMenuProps extends ComponentCoreProps {
|
|
6
|
-
/**
|
|
7
|
-
* The CSS class for trigger container
|
|
8
|
-
*/
|
|
9
|
-
triggerClassName?: string;
|
|
10
|
-
/**
|
|
11
|
-
* Array of menu options
|
|
12
|
-
*/
|
|
13
|
-
options: IActionMenuOption[];
|
|
14
|
-
/**
|
|
15
|
-
* Array of selected menu options keys
|
|
16
|
-
*/
|
|
17
|
-
selectedOptions?: string[];
|
|
18
|
-
/**
|
|
19
|
-
* Trigger element
|
|
20
|
-
*/
|
|
21
|
-
triggerRenderer: React.ReactElement;
|
|
22
|
-
/**
|
|
23
|
-
* The menu placement
|
|
24
|
-
*/
|
|
25
|
-
placement?: Placement;
|
|
26
|
-
/**
|
|
27
|
-
* Will open menu on component initialization
|
|
28
|
-
*/
|
|
29
|
-
openedOnInit?: boolean;
|
|
30
|
-
/**
|
|
31
|
-
* Menu will stay open after option click
|
|
32
|
-
*/
|
|
33
|
-
keepOpenOnClick?: boolean;
|
|
34
|
-
/**
|
|
35
|
-
* Set the menu placement to keep it in view
|
|
36
|
-
*/
|
|
37
|
-
flipOptions?: Parameters<typeof flip>[0];
|
|
38
|
-
/**
|
|
39
|
-
* Set to control the menu visibility
|
|
40
|
-
*/
|
|
41
|
-
visible?: boolean;
|
|
42
|
-
/**
|
|
43
|
-
* Optional handler called on menu close
|
|
44
|
-
*/
|
|
45
|
-
onClose?: () => void;
|
|
46
|
-
/**
|
|
47
|
-
* Optional handler called on menu open
|
|
48
|
-
*/
|
|
49
|
-
onOpen?: () => void;
|
|
50
|
-
/**
|
|
51
|
-
* Set the type of CSS position property to use
|
|
52
|
-
* https://floating-ui.com/docs/usefloating#strategy
|
|
53
|
-
*/
|
|
54
|
-
floatingStrategy?: Strategy;
|
|
55
|
-
}
|
|
56
|
-
export declare const ActionMenu: React.FC<ActionMenuProps>;
|
|
2
|
+
import { IActionMenuProps } from './types';
|
|
3
|
+
export declare const ActionMenu: React.FC<IActionMenuProps>;
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { Placement, flip, Strategy } from '@floating-ui/react';
|
|
3
|
+
import { ComponentCoreProps } from '../../utils/types';
|
|
2
4
|
export interface IActionMenuOption {
|
|
3
5
|
key: string;
|
|
4
6
|
element: React.ReactNode;
|
|
@@ -7,3 +9,58 @@ export interface IActionMenuOption {
|
|
|
7
9
|
withDivider?: boolean;
|
|
8
10
|
onClick?: () => void;
|
|
9
11
|
}
|
|
12
|
+
export interface IActionMenuProps extends ComponentCoreProps {
|
|
13
|
+
/**
|
|
14
|
+
* The CSS class for trigger container
|
|
15
|
+
*/
|
|
16
|
+
triggerClassName?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Array of menu options
|
|
19
|
+
*/
|
|
20
|
+
options: IActionMenuOption[];
|
|
21
|
+
/**
|
|
22
|
+
* Array of selected menu options keys
|
|
23
|
+
*/
|
|
24
|
+
selectedOptions?: string[];
|
|
25
|
+
/**
|
|
26
|
+
* Trigger element
|
|
27
|
+
*/
|
|
28
|
+
triggerRenderer: React.ReactElement;
|
|
29
|
+
/**
|
|
30
|
+
* The menu placement
|
|
31
|
+
*/
|
|
32
|
+
placement?: Placement;
|
|
33
|
+
/**
|
|
34
|
+
* Will open menu on component initialization
|
|
35
|
+
*/
|
|
36
|
+
openedOnInit?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Menu will stay open after option click
|
|
39
|
+
*/
|
|
40
|
+
keepOpenOnClick?: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* Set the menu placement to keep it in view
|
|
43
|
+
*/
|
|
44
|
+
flipOptions?: Parameters<typeof flip>[0];
|
|
45
|
+
/**
|
|
46
|
+
* Set to control the menu visibility
|
|
47
|
+
*/
|
|
48
|
+
visible?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* Optional handler called on menu close
|
|
51
|
+
*/
|
|
52
|
+
onClose?: () => void;
|
|
53
|
+
/**
|
|
54
|
+
* Optional handler called on menu open
|
|
55
|
+
*/
|
|
56
|
+
onOpen?: () => void;
|
|
57
|
+
/**
|
|
58
|
+
* Set the type of CSS position property to use
|
|
59
|
+
* https://floating-ui.com/docs/usefloating#strategy
|
|
60
|
+
*/
|
|
61
|
+
floatingStrategy?: Strategy;
|
|
62
|
+
/**
|
|
63
|
+
* Optional footer element
|
|
64
|
+
*/
|
|
65
|
+
footer?: React.ReactNode;
|
|
66
|
+
}
|
|
@@ -58,5 +58,5 @@ export declare const Button: React.ForwardRefExoticComponent<{
|
|
|
58
58
|
/**
|
|
59
59
|
* Specify the place to render element given in `icon` prop
|
|
60
60
|
*/
|
|
61
|
-
iconPosition?: "
|
|
61
|
+
iconPosition?: "left" | "right" | undefined;
|
|
62
62
|
} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;
|
|
@@ -1,24 +1,32 @@
|
|
|
1
1
|
export declare const DesignToken: {
|
|
2
|
+
/** @deprecated */
|
|
2
3
|
Background: string;
|
|
3
4
|
Background01: string;
|
|
4
5
|
Background02: string;
|
|
5
6
|
Background03: string;
|
|
7
|
+
/** @deprecated */
|
|
6
8
|
SurfaceBasicDefault: string;
|
|
7
9
|
SurfacePrimaryDefault: string;
|
|
10
|
+
/** @deprecated */
|
|
8
11
|
SurfaceBasicSubtle: string;
|
|
9
12
|
SurfaceSecondaryDefault: string;
|
|
10
13
|
SurfaceSecondaryHover: string;
|
|
11
14
|
SurfaceSecondaryActive: string;
|
|
12
15
|
SurfaceSecondaryDisabled: string;
|
|
16
|
+
/** @deprecated */
|
|
13
17
|
SurfacePrimaryHoverOpacity: string;
|
|
18
|
+
/** @deprecated */
|
|
14
19
|
SurfaceBasicHover: string;
|
|
15
20
|
SurfacePrimaryHover: string;
|
|
21
|
+
/** @deprecated */
|
|
16
22
|
SurfaceBasicActive: string;
|
|
17
23
|
SurfacePrimaryActive: string;
|
|
18
24
|
SurfacePrimaryActiveColored: string;
|
|
25
|
+
/** @deprecated */
|
|
19
26
|
SurfaceBasicDisabled: string;
|
|
20
27
|
SurfacePrimaryDisabled: string;
|
|
21
28
|
SurfaceTertiaryDefault: string;
|
|
29
|
+
/** @deprecated */
|
|
22
30
|
SurfaceSecondarySubtle: string;
|
|
23
31
|
SurfaceModerateDefault: string;
|
|
24
32
|
SurfaceModerateHover: string;
|
|
@@ -26,12 +34,16 @@ export declare const DesignToken: {
|
|
|
26
34
|
SurfaceTertiaryHover: string;
|
|
27
35
|
SurfaceTertiaryActive: string;
|
|
28
36
|
SurfaceTertiaryDisabled: string;
|
|
37
|
+
/** @deprecated */
|
|
29
38
|
SurfaceFeedbackInfo: string;
|
|
30
39
|
SurfaceAccentEmphasisLowInfo: string;
|
|
40
|
+
/** @deprecated */
|
|
31
41
|
SurfaceFeedbackNegative: string;
|
|
32
42
|
SurfaceAccentEmphasisLowNegative: string;
|
|
43
|
+
/** @deprecated */
|
|
33
44
|
SurfaceFeedbackWarning: string;
|
|
34
45
|
SurfaceAccentEmphasisLowWarning: string;
|
|
46
|
+
/** @deprecated */
|
|
35
47
|
SurfaceFeedbackPositive: string;
|
|
36
48
|
SurfaceAccentEmphasisLowPositive: string;
|
|
37
49
|
SurfaceAccentEmphasisLowPurple: string;
|
|
@@ -52,8 +64,10 @@ export declare const DesignToken: {
|
|
|
52
64
|
SurfaceAccentEmphasisSubtleWarning: string;
|
|
53
65
|
SurfaceAccentEmphasisSubtleInfo: string;
|
|
54
66
|
SurfaceAccentEmphasisSubtlePositive: string;
|
|
67
|
+
/** @deprecated */
|
|
55
68
|
SurfaceInvertDefault: string;
|
|
56
69
|
SurfaceInvertPrimary: string;
|
|
70
|
+
/** @deprecated */
|
|
57
71
|
SurfaceInvertSubtle: string;
|
|
58
72
|
SurfaceInvertSecondary: string;
|
|
59
73
|
SurfaceInvertDisabled: string;
|
|
@@ -70,6 +84,11 @@ export declare const DesignToken: {
|
|
|
70
84
|
SurfaceAccentEmphasisHighWarning: string;
|
|
71
85
|
SurfaceAccentEmphasisHighPositive: string;
|
|
72
86
|
SurfaceAccentEmphasisHighPurple: string;
|
|
87
|
+
SurfaceOpacityBasicHover: string;
|
|
88
|
+
SurfaceOpacityBasicActive: string;
|
|
89
|
+
SurfaceOpacityInvertHover: string;
|
|
90
|
+
SurfaceOpacityInvertActive: string;
|
|
91
|
+
/** @deprecated */
|
|
73
92
|
SurfaceOverlay: string;
|
|
74
93
|
SurfaceGradient01: string;
|
|
75
94
|
SurfaceGradient02: string;
|
|
@@ -92,10 +111,13 @@ export declare const DesignToken: {
|
|
|
92
111
|
SurfaceOtherInternalNoteHover: string;
|
|
93
112
|
SurfaceOtherVisitor: string;
|
|
94
113
|
SurfaceOtherVisitorHover: string;
|
|
114
|
+
/** @deprecated */
|
|
95
115
|
ContentDefault: string;
|
|
96
116
|
ContentBasicPrimary: string;
|
|
117
|
+
/** @deprecated */
|
|
97
118
|
ContentSubtle: string;
|
|
98
119
|
ContentBasicSecondary: string;
|
|
120
|
+
/** @deprecated */
|
|
99
121
|
ContentDisabled: string;
|
|
100
122
|
ContentBasicDisabled: string;
|
|
101
123
|
ContentBasicNegative: string;
|
|
@@ -104,27 +126,35 @@ export declare const DesignToken: {
|
|
|
104
126
|
ContentBasicInfo: string;
|
|
105
127
|
ContentBasicPurple: string;
|
|
106
128
|
ContentBasicGradient01: string;
|
|
129
|
+
/** @deprecated */
|
|
107
130
|
ContentWhiteLocked: string;
|
|
108
131
|
ContentLockedWhite: string;
|
|
132
|
+
/** @deprecated */
|
|
109
133
|
ContentBlackLocked: string;
|
|
110
134
|
ContentLockedBlack: string;
|
|
111
135
|
ContentLockedDefault: string;
|
|
112
136
|
ContentLockedHover: string;
|
|
113
137
|
ContentLockedActive: string;
|
|
114
138
|
ContentLockedDisabled: string;
|
|
139
|
+
/** @deprecated */
|
|
115
140
|
ContentInvertDefault: string;
|
|
116
141
|
ContentInvertPrimary: string;
|
|
142
|
+
/** @deprecated */
|
|
117
143
|
ContentInvertSubtle: string;
|
|
118
144
|
ContentInvertSecondary: string;
|
|
119
145
|
ContentInvertDisabled: string;
|
|
120
146
|
ContentInvertGradient01: string;
|
|
147
|
+
/** @deprecated */
|
|
121
148
|
BorderDefault: string;
|
|
122
149
|
BorderBasicPrimary: string;
|
|
123
150
|
BorderBasicSecondary: string;
|
|
151
|
+
/** @deprecated */
|
|
124
152
|
BorderSubtle: string;
|
|
125
153
|
BorderBasicTertiary: string;
|
|
154
|
+
/** @deprecated */
|
|
126
155
|
BorderHover: string;
|
|
127
156
|
BorderBasicHover: string;
|
|
157
|
+
/** @deprecated */
|
|
128
158
|
BorderDisabled: string;
|
|
129
159
|
BorderBasicDisabled: string;
|
|
130
160
|
BorderBasicNegative: string;
|
|
@@ -133,38 +163,53 @@ export declare const DesignToken: {
|
|
|
133
163
|
BorderBasicInfo: string;
|
|
134
164
|
BorderBasicPurple: string;
|
|
135
165
|
BorderBasicContrast: string;
|
|
166
|
+
/** @deprecated */
|
|
136
167
|
BorderInvertDefault: string;
|
|
137
168
|
BorderInvertPrimary: string;
|
|
169
|
+
/** @deprecated */
|
|
138
170
|
BorderInvertSubtle: string;
|
|
139
171
|
BorderInvertSecondary: string;
|
|
140
172
|
BorderInvertHover: string;
|
|
141
173
|
BorderInvertDisabled: string;
|
|
174
|
+
/** @deprecated */
|
|
142
175
|
ColorActionActive: string;
|
|
143
176
|
ActionPrimaryActive: string;
|
|
177
|
+
/** @deprecated */
|
|
144
178
|
ColorActionHover: string;
|
|
145
179
|
ActionPrimaryHover: string;
|
|
180
|
+
/** @deprecated */
|
|
146
181
|
ColorActionDefault: string;
|
|
147
182
|
ActionPrimaryDefault: string;
|
|
148
183
|
ColorActionDefaultRgb: string;
|
|
184
|
+
/** @deprecated */
|
|
149
185
|
ColorActionDisabled: string;
|
|
150
186
|
ActionPrimaryDisabled: string;
|
|
187
|
+
/** @deprecated */
|
|
151
188
|
ColorNegativeActive: string;
|
|
152
189
|
ActionNegativeActive: string;
|
|
190
|
+
/** @deprecated */
|
|
153
191
|
ColorNegativeHover: string;
|
|
154
192
|
ActionNegativeHover: string;
|
|
193
|
+
/** @deprecated */
|
|
155
194
|
ColorNegativeDefault: string;
|
|
156
195
|
ActionNegativeDefault: string;
|
|
196
|
+
/** @deprecated */
|
|
157
197
|
ColorNegativeDisabled: string;
|
|
158
198
|
ActionNegativeDisabled: string;
|
|
199
|
+
/** @deprecated */
|
|
159
200
|
ColorWarningDefault: string;
|
|
160
201
|
ActionWarningDefault: string;
|
|
202
|
+
/** @deprecated */
|
|
161
203
|
ColorWarningHover: string;
|
|
162
204
|
ActionWarningHover: string;
|
|
163
205
|
ActionWarningDisabled: string;
|
|
206
|
+
/** @deprecated */
|
|
164
207
|
ColorPositiveDefault: string;
|
|
165
208
|
ActionPositiveDefault: string;
|
|
209
|
+
/** @deprecated */
|
|
166
210
|
ColorPositiveHover: string;
|
|
167
211
|
ActionPositiveHover: string;
|
|
212
|
+
/** @deprecated */
|
|
168
213
|
ColorPositiveDisabled: string;
|
|
169
214
|
ActionPositiveDisabled: string;
|
|
170
215
|
ActionNeutralDefault: string;
|
|
@@ -174,6 +219,7 @@ export declare const DesignToken: {
|
|
|
174
219
|
ActionHighContrastHover: string;
|
|
175
220
|
ActionHighContrastActive: string;
|
|
176
221
|
ActionHighContrastDisabled: string;
|
|
222
|
+
/** @deprecated */
|
|
177
223
|
ColorBot: string;
|
|
178
224
|
SurfaceOtherBot: string;
|
|
179
225
|
SurfaceOtherBotHover: string;
|