@dxc-technology/halstack-react 14.1.0 → 15.0.0
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.mts +432 -566
- package/dist/index.d.ts +432 -566
- package/dist/index.js +6383 -6059
- package/dist/index.mjs +6296 -5940
- package/package.json +2 -2
package/dist/index.d.mts
CHANGED
|
@@ -1,36 +1,45 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
1
|
import * as react from 'react';
|
|
3
|
-
import { ReactNode } from 'react';
|
|
2
|
+
import { ReactNode, SVGProps, ReactElement, MouseEvent, ReactEventHandler } from 'react';
|
|
3
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
4
|
import { SortColumn } from 'react-data-grid';
|
|
5
5
|
import * as styled_components from 'styled-components';
|
|
6
6
|
|
|
7
|
-
type Space$
|
|
8
|
-
type Margin
|
|
9
|
-
top?: Space$
|
|
10
|
-
bottom?: Space$
|
|
11
|
-
left?: Space$
|
|
12
|
-
right?: Space$
|
|
7
|
+
type Space$1 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
8
|
+
type Margin = {
|
|
9
|
+
top?: Space$1;
|
|
10
|
+
bottom?: Space$1;
|
|
11
|
+
left?: Space$1;
|
|
12
|
+
right?: Space$1;
|
|
13
13
|
};
|
|
14
|
-
type SVG
|
|
15
|
-
|
|
14
|
+
type SVG = ReactNode & SVGProps<SVGSVGElement>;
|
|
15
|
+
|
|
16
|
+
type AccordionItemProps = {
|
|
16
17
|
/**
|
|
17
18
|
* The panel label.
|
|
18
19
|
*/
|
|
19
20
|
label: string;
|
|
20
21
|
/**
|
|
21
|
-
*
|
|
22
|
+
* Additional info label positioned under the label.
|
|
22
23
|
*/
|
|
23
|
-
|
|
24
|
+
subLabel?: string;
|
|
24
25
|
/**
|
|
25
|
-
*
|
|
26
|
-
* expanded. If undefined, the component will be uncontrolled and its
|
|
27
|
-
* value will be managed internally by the component.
|
|
26
|
+
* Badge component to add extra value to the accordion.
|
|
28
27
|
*/
|
|
29
|
-
|
|
28
|
+
badge?: {
|
|
29
|
+
position: "before" | "after";
|
|
30
|
+
element: ReactNode;
|
|
31
|
+
};
|
|
32
|
+
/**
|
|
33
|
+
* Status light component to add extra value to the accordion.
|
|
34
|
+
*/
|
|
35
|
+
statusLight?: ReactNode;
|
|
30
36
|
/**
|
|
31
|
-
* Material Symbol name or SVG element used as the icon that will be
|
|
37
|
+
* Material Symbol name or SVG element used as the icon that will be
|
|
38
|
+
* placed next to panel label. When using Material Symbols, replace spaces with underscores.
|
|
39
|
+
* By default they are outlined if you want it to be filled
|
|
40
|
+
* prefix the symbol name with "filled_".
|
|
32
41
|
*/
|
|
33
|
-
icon?: string | SVG
|
|
42
|
+
icon?: string | SVG;
|
|
34
43
|
/**
|
|
35
44
|
* Assistive text to be placed on the right side of the panel.
|
|
36
45
|
*/
|
|
@@ -39,156 +48,170 @@ type Props$K = {
|
|
|
39
48
|
* If true, the component will be disabled.
|
|
40
49
|
*/
|
|
41
50
|
disabled?: boolean;
|
|
42
|
-
/**
|
|
43
|
-
* This function will be called when the user clicks the accordion to expand or collapse
|
|
44
|
-
* the panel. The new state of the panel will be passed as a parameter.
|
|
45
|
-
*/
|
|
46
|
-
onChange?: (isExpanded: boolean) => void;
|
|
47
51
|
/**
|
|
48
52
|
* The expanded panel of the accordion. This area can be used to render
|
|
49
53
|
* custom content.
|
|
50
54
|
*/
|
|
51
|
-
children:
|
|
52
|
-
/**
|
|
53
|
-
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
54
|
-
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
55
|
-
*/
|
|
56
|
-
margin?: Space$t | Margin$o;
|
|
55
|
+
children: ReactNode;
|
|
57
56
|
/**
|
|
58
57
|
* Value of the tabindex attribute.
|
|
59
58
|
*/
|
|
60
59
|
tabIndex?: number;
|
|
61
60
|
};
|
|
62
|
-
|
|
63
|
-
declare const DxcAccordion: ({ label, defaultIsExpanded, isExpanded, icon, assistiveText, disabled, onChange, children, margin, tabIndex, }: Props$K) => JSX.Element;
|
|
64
|
-
|
|
65
|
-
type Space$s = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
66
|
-
type Margin$n = {
|
|
67
|
-
top?: Space$s;
|
|
68
|
-
bottom?: Space$s;
|
|
69
|
-
left?: Space$s;
|
|
70
|
-
right?: Space$s;
|
|
71
|
-
};
|
|
72
|
-
type SVG$i = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
73
|
-
type AccordionPropsType = {
|
|
61
|
+
type CommonProps$9 = {
|
|
74
62
|
/**
|
|
75
|
-
*
|
|
63
|
+
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
64
|
+
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
76
65
|
*/
|
|
77
|
-
|
|
66
|
+
margin?: Space$1 | Margin;
|
|
78
67
|
/**
|
|
79
|
-
*
|
|
68
|
+
* Contains one or more accordion items.
|
|
80
69
|
*/
|
|
81
|
-
|
|
70
|
+
children: ReactElement<AccordionItemProps>[] | ReactElement<AccordionItemProps>;
|
|
71
|
+
};
|
|
72
|
+
type IndependentProps = CommonProps$9 & {
|
|
82
73
|
/**
|
|
83
|
-
*
|
|
74
|
+
* When true, limits the user to single-open section at a time. When false, multiple sections can be opened simultaneously.
|
|
84
75
|
*/
|
|
85
|
-
|
|
76
|
+
independent: true;
|
|
86
77
|
/**
|
|
87
|
-
*
|
|
78
|
+
* Initially active accordion, only when it is uncontrolled.If the accordion is not independent,
|
|
79
|
+
* several accordions can be activated by default.
|
|
88
80
|
*/
|
|
89
|
-
|
|
81
|
+
defaultIndexActive?: number;
|
|
90
82
|
/**
|
|
91
|
-
* The
|
|
92
|
-
*
|
|
83
|
+
* The index of the active accordion. If undefined, the component will be uncontrolled and the active
|
|
84
|
+
* accordion will be managed internally by the component. If null, the component will be controlled and all
|
|
85
|
+
* accordions will be closed. If the accordion is not independent, several accordions can be activated.
|
|
93
86
|
*/
|
|
94
|
-
|
|
87
|
+
indexActive?: number;
|
|
88
|
+
/**
|
|
89
|
+
* This function will be called when the user clicks on an accordion. The index of the clicked accordion will be passed as a parameter.
|
|
90
|
+
*/
|
|
91
|
+
onActiveChange?: (index: number) => void;
|
|
95
92
|
};
|
|
96
|
-
type
|
|
93
|
+
type NonIndependentProps = CommonProps$9 & {
|
|
97
94
|
/**
|
|
98
|
-
*
|
|
95
|
+
* When true, limits the user to single-open section at a time. When false, multiple sections can be opened simultaneously.
|
|
99
96
|
*/
|
|
100
|
-
|
|
97
|
+
independent?: false;
|
|
101
98
|
/**
|
|
102
|
-
*
|
|
103
|
-
*
|
|
99
|
+
* Initially active accordion, only when it is uncontrolled. If the accordion is not independent,
|
|
100
|
+
* several accordions can be activated by default.
|
|
104
101
|
*/
|
|
105
|
-
|
|
102
|
+
defaultIndexActive?: number[];
|
|
106
103
|
/**
|
|
107
|
-
* If
|
|
104
|
+
* The index of the active accordion. If undefined, the component will be uncontrolled and the active
|
|
105
|
+
* accordion will be managed internally by the component. If null, the component will be controlled and all
|
|
106
|
+
* accordions will be closed. If the accordion is not independent, several accordions can be activated.
|
|
108
107
|
*/
|
|
109
|
-
|
|
108
|
+
indexActive?: number[];
|
|
110
109
|
/**
|
|
111
110
|
* This function will be called when the user clicks on an accordion. The index of the clicked accordion will be passed as a parameter.
|
|
112
111
|
*/
|
|
113
|
-
onActiveChange?: (
|
|
112
|
+
onActiveChange?: (index: number[]) => void;
|
|
113
|
+
};
|
|
114
|
+
type Props$J = IndependentProps | NonIndependentProps;
|
|
115
|
+
|
|
116
|
+
declare const DxcAccordion: {
|
|
117
|
+
(props: Props$J): JSX.Element;
|
|
118
|
+
AccordionItem: ({ label, subLabel, badge, statusLight, icon, assistiveText, disabled, children, tabIndex, }: AccordionItemProps) => JSX.Element;
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
type Action$2 = {
|
|
114
122
|
/**
|
|
115
|
-
*
|
|
116
|
-
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
123
|
+
* The icon of the action. It can be a string with the name of the icon or an SVG component.
|
|
117
124
|
*/
|
|
118
|
-
|
|
125
|
+
icon?: string | SVG;
|
|
119
126
|
/**
|
|
120
|
-
*
|
|
127
|
+
* The label of the action.
|
|
121
128
|
*/
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
Accordion: ({ ...childProps }: AccordionPropsType) => JSX.Element;
|
|
129
|
+
label: string;
|
|
130
|
+
/**
|
|
131
|
+
* The function that will be executed when the user clicks on the action button.
|
|
132
|
+
*/
|
|
133
|
+
onClick: () => void;
|
|
128
134
|
};
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
135
|
+
type Message = {
|
|
136
|
+
/**
|
|
137
|
+
* The function that will be executed when the user clicks on the close action button.
|
|
138
|
+
*/
|
|
139
|
+
onClose?: () => void;
|
|
140
|
+
/**
|
|
141
|
+
* The content of the message. The only Halstack component allowed within the text of an alert is the Link component,
|
|
142
|
+
* and it should be used exclusively to direct users to additional resources or relevant pages.
|
|
143
|
+
* No other components are permitted within the content of an alert.
|
|
144
|
+
*/
|
|
145
|
+
text: ReactNode;
|
|
136
146
|
};
|
|
137
|
-
type
|
|
147
|
+
type CommonProps$8 = {
|
|
138
148
|
/**
|
|
139
|
-
*
|
|
149
|
+
* If true, the alert will have a close button that will remove the message from the alert,
|
|
150
|
+
* only in banner and inline modes. The rest of the functionality will depend
|
|
151
|
+
* on the onClose event of each message (e.g. closing the modal alert).
|
|
140
152
|
*/
|
|
141
|
-
|
|
153
|
+
closable?: boolean;
|
|
142
154
|
/**
|
|
143
|
-
*
|
|
144
|
-
* 'inline': If onClose function is received, close button will be visible and the function will be executed when it's clicked.
|
|
145
|
-
* There is no overlay layer. Position should be decided by the user.
|
|
146
|
-
* 'modal': The alert will be displayed in the middle of the screen with an overlay layer behind.
|
|
147
|
-
* The onClose function will be executed when the X button or the overlay is clicked. d
|
|
148
|
-
* The user has the responsibility of hiding the modal in the onClose function, otherwise the modal will remain visible.
|
|
155
|
+
* Primary action of the alert.
|
|
149
156
|
*/
|
|
150
|
-
|
|
157
|
+
primaryAction?: Action$2;
|
|
151
158
|
/**
|
|
152
|
-
*
|
|
159
|
+
* Secondary action of the alert.
|
|
153
160
|
*/
|
|
154
|
-
|
|
161
|
+
secondaryAction?: Action$2;
|
|
155
162
|
/**
|
|
156
|
-
*
|
|
163
|
+
* Specifies the semantic meaning of the alert.
|
|
157
164
|
*/
|
|
158
|
-
|
|
165
|
+
semantic?: "error" | "info" | "success" | "warning";
|
|
159
166
|
/**
|
|
160
|
-
*
|
|
167
|
+
* Title of the alert.
|
|
161
168
|
*/
|
|
162
|
-
|
|
169
|
+
title: string;
|
|
170
|
+
};
|
|
171
|
+
type ModeSpecificProps = {
|
|
163
172
|
/**
|
|
164
|
-
*
|
|
165
|
-
*
|
|
173
|
+
* List of messages to be displayed. Each message has a close action that will,
|
|
174
|
+
* apart from remove from the alert the current message, call the onClose if it is defined.
|
|
175
|
+
* If the message is an array, the alert will show a navigation bar to move between the messages.
|
|
176
|
+
* The modal mode only allows one message per alert. In this case, the message must be an object
|
|
177
|
+
* and the presence of the onClose attribute is mandatory, since the management of the closing
|
|
178
|
+
* of the alert relies completely on the user.
|
|
166
179
|
*/
|
|
167
|
-
|
|
180
|
+
message?: Message | Message[];
|
|
168
181
|
/**
|
|
169
|
-
*
|
|
182
|
+
* The mode of the alert.
|
|
170
183
|
*/
|
|
171
|
-
|
|
184
|
+
mode?: "inline" | "banner";
|
|
185
|
+
} | {
|
|
172
186
|
/**
|
|
173
|
-
*
|
|
187
|
+
* List of messages to be displayed. Each message has a close action that will,
|
|
188
|
+
* apart from remove from the alert the current message, call the onClose if it is defined.
|
|
189
|
+
* If the message is an array, the alert will show a navigation bar to move between the messages.
|
|
190
|
+
* The modal mode only allows one message per alert. In this case, the message must be an object
|
|
191
|
+
* and the presence of the onClose attribute is mandatory, since the management of the closing
|
|
192
|
+
* of the alert relies completely on the user.
|
|
174
193
|
*/
|
|
175
|
-
|
|
194
|
+
message: Required<Message>;
|
|
195
|
+
/**
|
|
196
|
+
* The mode of the alert.
|
|
197
|
+
*/
|
|
198
|
+
mode: "modal";
|
|
176
199
|
};
|
|
200
|
+
type Props$I = CommonProps$8 & ModeSpecificProps;
|
|
177
201
|
|
|
178
|
-
declare
|
|
202
|
+
declare function DxcAlert({ closable, message, mode, primaryAction, secondaryAction, semantic, title, }: Props$I): react_jsx_runtime.JSX.Element;
|
|
179
203
|
|
|
180
|
-
type SVG$h = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
181
204
|
type SidenavTitlePropsType = {
|
|
182
205
|
/**
|
|
183
206
|
* The area inside the sidenav title. This area can be used to render custom content.
|
|
184
207
|
*/
|
|
185
|
-
children:
|
|
208
|
+
children: ReactNode;
|
|
186
209
|
};
|
|
187
210
|
type SidenavSectionPropsType = {
|
|
188
211
|
/**
|
|
189
212
|
* The area inside the sidenav section. This area can be used to render sidenav groups, links and custom content.
|
|
190
213
|
*/
|
|
191
|
-
children:
|
|
214
|
+
children: ReactNode;
|
|
192
215
|
};
|
|
193
216
|
type SidenavGroupPropsType = {
|
|
194
217
|
/**
|
|
@@ -203,11 +226,11 @@ type SidenavGroupPropsType = {
|
|
|
203
226
|
/**
|
|
204
227
|
* Material Symbol name or SVG icon to be displayed next to the title of the group.
|
|
205
228
|
*/
|
|
206
|
-
icon?: string | SVG
|
|
229
|
+
icon?: string | SVG;
|
|
207
230
|
/**
|
|
208
231
|
* The area inside the sidenav group. This area can be used to render sidenav links.
|
|
209
232
|
*/
|
|
210
|
-
children:
|
|
233
|
+
children: ReactNode;
|
|
211
234
|
};
|
|
212
235
|
type SidenavLinkPropsType = {
|
|
213
236
|
/**
|
|
@@ -221,7 +244,7 @@ type SidenavLinkPropsType = {
|
|
|
221
244
|
/**
|
|
222
245
|
* The Material symbol or SVG element used as the icon that will be placed to the left of the link text.
|
|
223
246
|
*/
|
|
224
|
-
icon?: string | SVG
|
|
247
|
+
icon?: string | SVG;
|
|
225
248
|
/**
|
|
226
249
|
* If true, the link will be marked as selected. Moreover, in that same case,
|
|
227
250
|
* if it is contained within a collapsed group, and consequently, the currently selected link is not visible,
|
|
@@ -231,11 +254,11 @@ type SidenavLinkPropsType = {
|
|
|
231
254
|
/**
|
|
232
255
|
* This function will be called when the user clicks the link and the event will be passed to this function.
|
|
233
256
|
*/
|
|
234
|
-
onClick?: (event:
|
|
257
|
+
onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
|
|
235
258
|
/**
|
|
236
259
|
* The area inside the sidenav link.
|
|
237
260
|
*/
|
|
238
|
-
children:
|
|
261
|
+
children: ReactNode;
|
|
239
262
|
/**
|
|
240
263
|
* Value of the tabindex.
|
|
241
264
|
*/
|
|
@@ -245,22 +268,14 @@ type Props$H = {
|
|
|
245
268
|
/**
|
|
246
269
|
* The area assigned to render the sidenav title. It is highly recommended to use the sidenav title.
|
|
247
270
|
*/
|
|
248
|
-
title?:
|
|
271
|
+
title?: ReactNode;
|
|
249
272
|
/**
|
|
250
273
|
* The area inside the sidenav. This area can be used to render the content inside the sidenav.
|
|
251
274
|
*/
|
|
252
|
-
children:
|
|
275
|
+
children: ReactNode;
|
|
253
276
|
};
|
|
254
277
|
|
|
255
|
-
type Space$q = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
256
|
-
type Margin$l = {
|
|
257
|
-
top?: Space$q;
|
|
258
|
-
bottom?: Space$q;
|
|
259
|
-
left?: Space$q;
|
|
260
|
-
right?: Space$q;
|
|
261
|
-
};
|
|
262
278
|
type Size$4 = "small" | "medium" | "large" | "fillParent" | "fitContent";
|
|
263
|
-
type SVG$g = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
264
279
|
type Option$1 = {
|
|
265
280
|
/**
|
|
266
281
|
* Option display value.
|
|
@@ -269,7 +284,7 @@ type Option$1 = {
|
|
|
269
284
|
/**
|
|
270
285
|
* Material Symbol name or SVG element as the icon that will be placed next to the label.
|
|
271
286
|
*/
|
|
272
|
-
icon?: string | SVG
|
|
287
|
+
icon?: string | SVG;
|
|
273
288
|
/**
|
|
274
289
|
* Option inner value.
|
|
275
290
|
*/
|
|
@@ -288,7 +303,7 @@ type Props$G = {
|
|
|
288
303
|
/**
|
|
289
304
|
* Material Symbol name or SVG element as the icon that will be placed next to the label.
|
|
290
305
|
*/
|
|
291
|
-
icon?: string | SVG
|
|
306
|
+
icon?: string | SVG;
|
|
292
307
|
/**
|
|
293
308
|
* Whether the icon should appear after or before the label.
|
|
294
309
|
*/
|
|
@@ -319,7 +334,7 @@ type Props$G = {
|
|
|
319
334
|
* You can pass an object with 'top', 'bottom', 'left' and 'right'
|
|
320
335
|
* properties in order to specify different margin sizes.
|
|
321
336
|
*/
|
|
322
|
-
margin?: Space$
|
|
337
|
+
margin?: Space$1 | Margin;
|
|
323
338
|
/**
|
|
324
339
|
* Size of the component.
|
|
325
340
|
*/
|
|
@@ -335,7 +350,6 @@ type Props$G = {
|
|
|
335
350
|
title?: string;
|
|
336
351
|
};
|
|
337
352
|
|
|
338
|
-
type Space$p = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
339
353
|
type Props$F = {
|
|
340
354
|
/**
|
|
341
355
|
* Whether a contrast line should appear at the bottom of the header.
|
|
@@ -346,12 +360,12 @@ type Props$F = {
|
|
|
346
360
|
* for the first child in the content, so we recommend the use of React.Fragment
|
|
347
361
|
* to be applied correctly. Otherwise, the styles can be modified.
|
|
348
362
|
*/
|
|
349
|
-
content?:
|
|
363
|
+
content?: ReactNode;
|
|
350
364
|
/**
|
|
351
365
|
* Content shown in responsive version. It receives the close menu handler that can
|
|
352
366
|
* be used to add that functionality when a element is clicked.
|
|
353
367
|
*/
|
|
354
|
-
responsiveContent?: (closeHandler: () => void) =>
|
|
368
|
+
responsiveContent?: (closeHandler: () => void) => ReactNode;
|
|
355
369
|
/**
|
|
356
370
|
* This function will be called when the user clicks the header logo.
|
|
357
371
|
*/
|
|
@@ -359,7 +373,7 @@ type Props$F = {
|
|
|
359
373
|
/**
|
|
360
374
|
* Size of the bottom margin to be applied to the header.
|
|
361
375
|
*/
|
|
362
|
-
margin?: Space$
|
|
376
|
+
margin?: Space$1;
|
|
363
377
|
/**
|
|
364
378
|
* Value of the tabindex for all interactive elements, except those inside the
|
|
365
379
|
* custom area.
|
|
@@ -367,8 +381,6 @@ type Props$F = {
|
|
|
367
381
|
tabIndex?: number;
|
|
368
382
|
};
|
|
369
383
|
|
|
370
|
-
type Space$o = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
371
|
-
type SVG$f = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
372
384
|
type SocialLink = {
|
|
373
385
|
/**
|
|
374
386
|
* URL of the page the link goes to.
|
|
@@ -377,7 +389,7 @@ type SocialLink = {
|
|
|
377
389
|
/**
|
|
378
390
|
* Material Symbol name or SVG element as the icon used for the link.
|
|
379
391
|
*/
|
|
380
|
-
logo: string | SVG
|
|
392
|
+
logo: string | SVG;
|
|
381
393
|
/**
|
|
382
394
|
* Value for the HTML properties title and aria-label.
|
|
383
395
|
*/
|
|
@@ -412,11 +424,11 @@ type FooterPropsType = {
|
|
|
412
424
|
* The center section of the footer. Can be used to render custom
|
|
413
425
|
* content in this area.
|
|
414
426
|
*/
|
|
415
|
-
children?:
|
|
427
|
+
children?: ReactNode;
|
|
416
428
|
/**
|
|
417
429
|
* Size of the top margin to be applied to the footer.
|
|
418
430
|
*/
|
|
419
|
-
margin?: Space$
|
|
431
|
+
margin?: Space$1;
|
|
420
432
|
/**
|
|
421
433
|
* Value of the tabindex for all interactive elements, except those
|
|
422
434
|
* inside the custom area.
|
|
@@ -434,7 +446,7 @@ type AppLayoutMainPropsType = {
|
|
|
434
446
|
/**
|
|
435
447
|
* Everything between the tags will be displayed as the content of the main part of the application.
|
|
436
448
|
*/
|
|
437
|
-
children:
|
|
449
|
+
children: ReactNode;
|
|
438
450
|
};
|
|
439
451
|
type ApplicationLayoutPropsType = {
|
|
440
452
|
/**
|
|
@@ -445,19 +457,19 @@ type ApplicationLayoutPropsType = {
|
|
|
445
457
|
/**
|
|
446
458
|
* Header content.
|
|
447
459
|
*/
|
|
448
|
-
header?:
|
|
460
|
+
header?: ReactNode;
|
|
449
461
|
/**
|
|
450
462
|
* Sidenav content
|
|
451
463
|
*/
|
|
452
|
-
sidenav?:
|
|
464
|
+
sidenav?: ReactNode;
|
|
453
465
|
/**
|
|
454
466
|
* Footer content
|
|
455
467
|
*/
|
|
456
|
-
footer?:
|
|
468
|
+
footer?: ReactNode;
|
|
457
469
|
/**
|
|
458
470
|
* Use the DxcApplicationLayout.Main provided to render main content.
|
|
459
471
|
*/
|
|
460
|
-
children:
|
|
472
|
+
children: ReactElement<AppLayoutMainPropsType>;
|
|
461
473
|
};
|
|
462
474
|
|
|
463
475
|
declare const DxcApplicationLayout: {
|
|
@@ -475,10 +487,9 @@ declare const DxcApplicationLayout: {
|
|
|
475
487
|
Link: react.ForwardRefExoticComponent<SidenavLinkPropsType & react.RefAttributes<HTMLAnchorElement>>;
|
|
476
488
|
Title: ({ children }: SidenavTitlePropsType) => JSX.Element;
|
|
477
489
|
};
|
|
478
|
-
useResponsiveSidenavVisibility: () => (
|
|
490
|
+
useResponsiveSidenavVisibility: () => ((_isSidenavVisible: boolean) => void) | null;
|
|
479
491
|
};
|
|
480
492
|
|
|
481
|
-
type SVG$e = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
482
493
|
type ContextualProps = {
|
|
483
494
|
/**
|
|
484
495
|
* Text to be placed in the badge.
|
|
@@ -523,7 +534,7 @@ type CommonProps$7 = {
|
|
|
523
534
|
/**
|
|
524
535
|
* Material Symbol name or SVG element used as the icon that will be placed next to the badge label in contextual mode.
|
|
525
536
|
*/
|
|
526
|
-
icon?: string | SVG
|
|
537
|
+
icon?: string | SVG;
|
|
527
538
|
/**
|
|
528
539
|
* Size of the component.
|
|
529
540
|
*/
|
|
@@ -657,7 +668,7 @@ type Props$D = {
|
|
|
657
668
|
/**
|
|
658
669
|
* Custom content inside the bleed.
|
|
659
670
|
*/
|
|
660
|
-
children:
|
|
671
|
+
children: ReactNode;
|
|
661
672
|
};
|
|
662
673
|
|
|
663
674
|
declare const Bleed: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$D) => react_jsx_runtime.JSX.Element;
|
|
@@ -700,7 +711,6 @@ type Props$C = {
|
|
|
700
711
|
|
|
701
712
|
declare const DxcBreadcrumbs: ({ ariaLabel, items, itemsBeforeCollapse, onItemClick, showRoot, }: Props$C) => react_jsx_runtime.JSX.Element;
|
|
702
713
|
|
|
703
|
-
type SVG$d = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
704
714
|
type IconProps = {
|
|
705
715
|
/**
|
|
706
716
|
* Defines the style of the bullet point in the list.
|
|
@@ -709,11 +719,11 @@ type IconProps = {
|
|
|
709
719
|
/**
|
|
710
720
|
* Icon to display as bullet.
|
|
711
721
|
*/
|
|
712
|
-
icon: string | SVG
|
|
722
|
+
icon: string | SVG;
|
|
713
723
|
/**
|
|
714
724
|
* Text to be shown in the list.
|
|
715
725
|
*/
|
|
716
|
-
children:
|
|
726
|
+
children: ReactNode;
|
|
717
727
|
};
|
|
718
728
|
type OtherProps = {
|
|
719
729
|
/**
|
|
@@ -727,7 +737,7 @@ type OtherProps = {
|
|
|
727
737
|
/**
|
|
728
738
|
* Text to be shown in the list.
|
|
729
739
|
*/
|
|
730
|
-
children:
|
|
740
|
+
children: ReactNode;
|
|
731
741
|
};
|
|
732
742
|
type Props$B = IconProps | OtherProps;
|
|
733
743
|
|
|
@@ -735,7 +745,7 @@ type BulletedListItemPropsType = {
|
|
|
735
745
|
/**
|
|
736
746
|
* Text to be shown in the list.
|
|
737
747
|
*/
|
|
738
|
-
children?:
|
|
748
|
+
children?: ReactNode;
|
|
739
749
|
};
|
|
740
750
|
|
|
741
751
|
declare const DxcBulletedList: {
|
|
@@ -743,14 +753,6 @@ declare const DxcBulletedList: {
|
|
|
743
753
|
Item: ({ children }: BulletedListItemPropsType) => JSX.Element;
|
|
744
754
|
};
|
|
745
755
|
|
|
746
|
-
type Space$n = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
747
|
-
type Margin$k = {
|
|
748
|
-
top?: Space$n;
|
|
749
|
-
bottom?: Space$n;
|
|
750
|
-
left?: Space$n;
|
|
751
|
-
right?: Space$n;
|
|
752
|
-
};
|
|
753
|
-
type SVG$c = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
754
756
|
type Size$3 = {
|
|
755
757
|
/**
|
|
756
758
|
* Height of the component.
|
|
@@ -790,7 +792,7 @@ type Props$A = {
|
|
|
790
792
|
/**
|
|
791
793
|
* Material Symbol name or SVG element as the icon that will be placed next to the label.
|
|
792
794
|
*/
|
|
793
|
-
icon?: string | SVG
|
|
795
|
+
icon?: string | SVG;
|
|
794
796
|
/**
|
|
795
797
|
* This function will be called when the user clicks the button.
|
|
796
798
|
*/
|
|
@@ -799,7 +801,7 @@ type Props$A = {
|
|
|
799
801
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
800
802
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
801
803
|
*/
|
|
802
|
-
margin?: Space$
|
|
804
|
+
margin?: Space$1 | Margin;
|
|
803
805
|
/**
|
|
804
806
|
* Size of the component.
|
|
805
807
|
*/
|
|
@@ -812,12 +814,11 @@ type Props$A = {
|
|
|
812
814
|
|
|
813
815
|
declare const DxcButton: ({ label, mode, semantic, disabled, iconPosition, title, type, icon, onClick, margin, size, tabIndex, }: Props$A) => JSX.Element;
|
|
814
816
|
|
|
815
|
-
type Space$m = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
816
817
|
type Size$2 = {
|
|
817
|
-
top?: Space$
|
|
818
|
-
bottom?: Space$
|
|
819
|
-
left?: Space$
|
|
820
|
-
right?: Space$
|
|
818
|
+
top?: Space$1;
|
|
819
|
+
bottom?: Space$1;
|
|
820
|
+
left?: Space$1;
|
|
821
|
+
right?: Space$1;
|
|
821
822
|
};
|
|
822
823
|
type Props$z = {
|
|
823
824
|
/**
|
|
@@ -835,7 +836,7 @@ type Props$z = {
|
|
|
835
836
|
* component. You can pass an object with 'top', 'bottom', 'left'
|
|
836
837
|
* and 'right' properties in order to specify different padding sizes.
|
|
837
838
|
*/
|
|
838
|
-
imagePadding?: Space$
|
|
839
|
+
imagePadding?: Space$1 | Size$2;
|
|
839
840
|
/**
|
|
840
841
|
* Whether the image should appear in relation to the content.
|
|
841
842
|
*/
|
|
@@ -858,7 +859,7 @@ type Props$z = {
|
|
|
858
859
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
859
860
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
860
861
|
*/
|
|
861
|
-
margin?: Space$
|
|
862
|
+
margin?: Space$1 | Size$2;
|
|
862
863
|
/**
|
|
863
864
|
* Value of the tabindex attribute applied when the component is clickable.
|
|
864
865
|
*/
|
|
@@ -870,18 +871,11 @@ type Props$z = {
|
|
|
870
871
|
/**
|
|
871
872
|
* Custom content that will be placed inside the component.
|
|
872
873
|
*/
|
|
873
|
-
children?:
|
|
874
|
+
children?: ReactNode;
|
|
874
875
|
};
|
|
875
876
|
|
|
876
877
|
declare const DxcCard: ({ imageSrc, imageBgColor, imagePadding, imagePosition, linkHref, onClick, imageCover, margin, tabIndex, outlined, children, }: Props$z) => JSX.Element;
|
|
877
878
|
|
|
878
|
-
type Space$l = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
879
|
-
type Margin$j = {
|
|
880
|
-
top?: Space$l;
|
|
881
|
-
bottom?: Space$l;
|
|
882
|
-
left?: Space$l;
|
|
883
|
-
right?: Space$l;
|
|
884
|
-
};
|
|
885
879
|
type Props$y = {
|
|
886
880
|
/**
|
|
887
881
|
* Initial state of the checkbox, only when it is uncontrolled.
|
|
@@ -932,7 +926,7 @@ type Props$y = {
|
|
|
932
926
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties
|
|
933
927
|
* in order to specify different margin sizes.
|
|
934
928
|
*/
|
|
935
|
-
margin?: Space$
|
|
929
|
+
margin?: Space$1 | Margin;
|
|
936
930
|
/**
|
|
937
931
|
* Size of the component.
|
|
938
932
|
*/
|
|
@@ -941,18 +935,14 @@ type Props$y = {
|
|
|
941
935
|
* Value of the tabindex.
|
|
942
936
|
*/
|
|
943
937
|
tabIndex?: number;
|
|
938
|
+
/**
|
|
939
|
+
* Specifies a string to be used as the name for the checkbox element when no `label` is provided.
|
|
940
|
+
*/
|
|
941
|
+
ariaLabel?: string;
|
|
944
942
|
};
|
|
945
943
|
|
|
946
944
|
declare const DxcCheckbox: react.ForwardRefExoticComponent<Props$y & react.RefAttributes<HTMLDivElement>>;
|
|
947
945
|
|
|
948
|
-
type Space$k = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
949
|
-
type Margin$i = {
|
|
950
|
-
top?: Space$k;
|
|
951
|
-
bottom?: Space$k;
|
|
952
|
-
left?: Space$k;
|
|
953
|
-
right?: Space$k;
|
|
954
|
-
};
|
|
955
|
-
type SVG$b = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
956
946
|
type Props$x = {
|
|
957
947
|
/**
|
|
958
948
|
* Text to be placed on the chip.
|
|
@@ -961,11 +951,11 @@ type Props$x = {
|
|
|
961
951
|
/**
|
|
962
952
|
* Element or path used as icon to be placed after the chip label.
|
|
963
953
|
*/
|
|
964
|
-
suffixIcon?: string | SVG
|
|
954
|
+
suffixIcon?: string | SVG;
|
|
965
955
|
/**
|
|
966
956
|
* Element or path used as icon to be placed before the chip label.
|
|
967
957
|
*/
|
|
968
|
-
prefixIcon?: string | SVG
|
|
958
|
+
prefixIcon?: string | SVG;
|
|
969
959
|
/**
|
|
970
960
|
* This function will be called when the suffix is clicked.
|
|
971
961
|
*/
|
|
@@ -982,7 +972,7 @@ type Props$x = {
|
|
|
982
972
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
983
973
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
984
974
|
*/
|
|
985
|
-
margin?: Space$
|
|
975
|
+
margin?: Space$1 | Margin;
|
|
986
976
|
/**
|
|
987
977
|
* Value of the tabindex attribute.
|
|
988
978
|
*/
|
|
@@ -991,12 +981,11 @@ type Props$x = {
|
|
|
991
981
|
|
|
992
982
|
declare const DxcChip: ({ label, suffixIcon, prefixIcon, onClickSuffix, onClickPrefix, disabled, margin, tabIndex, }: Props$x) => JSX.Element;
|
|
993
983
|
|
|
994
|
-
type
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
left?: SpacingValues;
|
|
984
|
+
type Space = Space$1 | {
|
|
985
|
+
top?: Space$1;
|
|
986
|
+
right?: Space$1;
|
|
987
|
+
bottom?: Space$1;
|
|
988
|
+
left?: Space$1;
|
|
1000
989
|
};
|
|
1001
990
|
type Inset$1 = {
|
|
1002
991
|
top?: string;
|
|
@@ -1065,7 +1054,7 @@ type Props$w = {
|
|
|
1065
1054
|
/**
|
|
1066
1055
|
* Custom content inside the container.
|
|
1067
1056
|
*/
|
|
1068
|
-
children:
|
|
1057
|
+
children: ReactNode;
|
|
1069
1058
|
/**
|
|
1070
1059
|
* Sets the display CSS property.
|
|
1071
1060
|
* The set of values is limited to the ones related to the outer display type.
|
|
@@ -1097,7 +1086,7 @@ type Props$w = {
|
|
|
1097
1086
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties
|
|
1098
1087
|
* in order to specify different margin sizes.
|
|
1099
1088
|
*/
|
|
1100
|
-
margin?: Space
|
|
1089
|
+
margin?: Space;
|
|
1101
1090
|
/**
|
|
1102
1091
|
* Sets the max-height CSS property.
|
|
1103
1092
|
*
|
|
@@ -1138,7 +1127,7 @@ type Props$w = {
|
|
|
1138
1127
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties
|
|
1139
1128
|
* in order to specify different margin sizes.
|
|
1140
1129
|
*/
|
|
1141
|
-
padding?: Space
|
|
1130
|
+
padding?: Space;
|
|
1142
1131
|
/**
|
|
1143
1132
|
* Sets the position CSS property.
|
|
1144
1133
|
*
|
|
@@ -1159,12 +1148,11 @@ type Props$w = {
|
|
|
1159
1148
|
zIndex?: "auto" | number;
|
|
1160
1149
|
};
|
|
1161
1150
|
|
|
1162
|
-
declare
|
|
1151
|
+
declare function DxcContainer({ display, width, height, overflow, ...props }: Props$w): react_jsx_runtime.JSX.Element;
|
|
1163
1152
|
|
|
1164
|
-
type SVG$a = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
1165
1153
|
type CommonItemProps = {
|
|
1166
|
-
badge?:
|
|
1167
|
-
icon?: string | SVG
|
|
1154
|
+
badge?: ReactElement;
|
|
1155
|
+
icon?: string | SVG;
|
|
1168
1156
|
label: string;
|
|
1169
1157
|
};
|
|
1170
1158
|
type Item = CommonItemProps & {
|
|
@@ -1186,21 +1174,13 @@ type Props$v = {
|
|
|
1186
1174
|
items: (Item | GroupItem)[] | Section[];
|
|
1187
1175
|
};
|
|
1188
1176
|
|
|
1189
|
-
declare
|
|
1177
|
+
declare function DxcContextualMenu({ items }: Props$v): react_jsx_runtime.JSX.Element;
|
|
1190
1178
|
|
|
1191
|
-
type Space$i = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
1192
|
-
type Margin$h = {
|
|
1193
|
-
top?: Space$i;
|
|
1194
|
-
bottom?: Space$i;
|
|
1195
|
-
left?: Space$i;
|
|
1196
|
-
right?: Space$i;
|
|
1197
|
-
};
|
|
1198
|
-
type SVG$9 = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
1199
1179
|
type ActionCellsPropsType = {
|
|
1200
1180
|
actions: ActionsPropsType;
|
|
1201
1181
|
};
|
|
1202
1182
|
type ActionsPropsType = Array<{
|
|
1203
|
-
icon: string | SVG
|
|
1183
|
+
icon: string | SVG;
|
|
1204
1184
|
title: string;
|
|
1205
1185
|
onClick: () => void;
|
|
1206
1186
|
disabled?: boolean;
|
|
@@ -1219,12 +1199,12 @@ type Props$u = {
|
|
|
1219
1199
|
* The center section of the table. Can be used to render custom
|
|
1220
1200
|
* content in this area.
|
|
1221
1201
|
*/
|
|
1222
|
-
children:
|
|
1202
|
+
children: ReactNode;
|
|
1223
1203
|
/**
|
|
1224
1204
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
1225
1205
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
1226
1206
|
*/
|
|
1227
|
-
margin?: Space$
|
|
1207
|
+
margin?: Space$1 | Margin;
|
|
1228
1208
|
/**
|
|
1229
1209
|
* Determines the visual style and layout
|
|
1230
1210
|
* - "default": Default table size.
|
|
@@ -1253,7 +1233,7 @@ type GridColumn = {
|
|
|
1253
1233
|
/**
|
|
1254
1234
|
* Custom criteria for sorting the column.
|
|
1255
1235
|
*/
|
|
1256
|
-
sortFn?: (_a: ReactNode, _b: ReactNode) =>
|
|
1236
|
+
sortFn?: (_a: ReactNode, _b: ReactNode) => 0 | 1 | -1;
|
|
1257
1237
|
/**
|
|
1258
1238
|
* Whether the column is draggable or not.
|
|
1259
1239
|
*/
|
|
@@ -1421,13 +1401,6 @@ declare const DxcDataGrid: {
|
|
|
1421
1401
|
ActionsCell: ({ actions }: ActionCellsPropsType) => JSX.Element;
|
|
1422
1402
|
};
|
|
1423
1403
|
|
|
1424
|
-
type Space$h = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
1425
|
-
type Margin$g = {
|
|
1426
|
-
top?: Space$h;
|
|
1427
|
-
bottom?: Space$h;
|
|
1428
|
-
left?: Space$h;
|
|
1429
|
-
right?: Space$h;
|
|
1430
|
-
};
|
|
1431
1404
|
type Props$s = {
|
|
1432
1405
|
/**
|
|
1433
1406
|
* Initial value of the input element, only when it is uncontrolled.
|
|
@@ -1519,7 +1492,7 @@ type Props$s = {
|
|
|
1519
1492
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
1520
1493
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
1521
1494
|
*/
|
|
1522
|
-
margin?: Space$
|
|
1495
|
+
margin?: Space$1 | Margin;
|
|
1523
1496
|
/**
|
|
1524
1497
|
* Size of the component.
|
|
1525
1498
|
*/
|
|
@@ -1528,6 +1501,10 @@ type Props$s = {
|
|
|
1528
1501
|
* Value of the tabindex attribute.
|
|
1529
1502
|
*/
|
|
1530
1503
|
tabIndex?: number;
|
|
1504
|
+
/**
|
|
1505
|
+
* Specifies a string to be used as the name for the date input element when no `label` is provided.
|
|
1506
|
+
*/
|
|
1507
|
+
ariaLabel?: string;
|
|
1531
1508
|
};
|
|
1532
1509
|
|
|
1533
1510
|
declare const DxcDateInput: react.ForwardRefExoticComponent<Props$s & react.RefAttributes<HTMLDivElement>>;
|
|
@@ -1536,7 +1513,7 @@ type Props$r = {
|
|
|
1536
1513
|
/**
|
|
1537
1514
|
* If true, the close button will be visible.
|
|
1538
1515
|
*/
|
|
1539
|
-
|
|
1516
|
+
closable?: boolean;
|
|
1540
1517
|
/**
|
|
1541
1518
|
* This function will be called when the user clicks the close button.
|
|
1542
1519
|
* The responsibility of hiding the dialog lies with the user.
|
|
@@ -1558,7 +1535,7 @@ type Props$r = {
|
|
|
1558
1535
|
* can lead to unpredictable behaviour for keyboard users, affecting
|
|
1559
1536
|
* the order of focus and focus locking within the dialog.
|
|
1560
1537
|
*/
|
|
1561
|
-
children:
|
|
1538
|
+
children: ReactNode;
|
|
1562
1539
|
/**
|
|
1563
1540
|
* Value of the tabindex applied to the close button.
|
|
1564
1541
|
* Note that values greater than 0 are strongly discouraged. It can
|
|
@@ -1567,7 +1544,7 @@ type Props$r = {
|
|
|
1567
1544
|
tabIndex?: number;
|
|
1568
1545
|
};
|
|
1569
1546
|
|
|
1570
|
-
declare const DxcDialog: ({
|
|
1547
|
+
declare const DxcDialog: ({ children, closable, onBackgroundClick, onCloseClick, overlay, tabIndex, }: Props$r) => JSX.Element;
|
|
1571
1548
|
|
|
1572
1549
|
type Props$q = {
|
|
1573
1550
|
/**
|
|
@@ -1594,13 +1571,6 @@ declare const DxcDivider: ({ orientation, weight, color, decorative, }: Props$q)
|
|
|
1594
1571
|
|
|
1595
1572
|
declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$G) => JSX.Element;
|
|
1596
1573
|
|
|
1597
|
-
type Space$g = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
1598
|
-
type Margin$f = {
|
|
1599
|
-
top?: Space$g;
|
|
1600
|
-
bottom?: Space$g;
|
|
1601
|
-
left?: Space$g;
|
|
1602
|
-
right?: Space$g;
|
|
1603
|
-
};
|
|
1604
1574
|
type FileData = {
|
|
1605
1575
|
/**
|
|
1606
1576
|
* Selected file.
|
|
@@ -1666,7 +1636,7 @@ type CommonProps$5 = {
|
|
|
1666
1636
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
1667
1637
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
1668
1638
|
*/
|
|
1669
|
-
margin?: Space$
|
|
1639
|
+
margin?: Space$1 | Margin;
|
|
1670
1640
|
/**
|
|
1671
1641
|
* Value of the tabindex attribute.
|
|
1672
1642
|
*/
|
|
@@ -1787,7 +1757,7 @@ type Props$o = CommonProps$4 & {
|
|
|
1787
1757
|
/**
|
|
1788
1758
|
* Custom content inside the flex container.
|
|
1789
1759
|
*/
|
|
1790
|
-
children:
|
|
1760
|
+
children: ReactNode;
|
|
1791
1761
|
};
|
|
1792
1762
|
|
|
1793
1763
|
declare const DxcFlex: ({ basis, direction, gap, grow, order, shrink, wrap, ...props }: Props$o) => react_jsx_runtime.JSX.Element;
|
|
@@ -1846,7 +1816,7 @@ type GridItemProps = {
|
|
|
1846
1816
|
/**
|
|
1847
1817
|
* Custom content inside the grid container.
|
|
1848
1818
|
*/
|
|
1849
|
-
children:
|
|
1819
|
+
children: ReactNode;
|
|
1850
1820
|
};
|
|
1851
1821
|
type Props$n = GridItemProps & {
|
|
1852
1822
|
/**
|
|
@@ -1910,13 +1880,6 @@ declare const DxcGrid: {
|
|
|
1910
1880
|
Item: styled_components.StyledComponent<"div", any, GridItemProps, never>;
|
|
1911
1881
|
};
|
|
1912
1882
|
|
|
1913
|
-
type Space$f = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
1914
|
-
type Margin$e = {
|
|
1915
|
-
top?: Space$f;
|
|
1916
|
-
bottom?: Space$f;
|
|
1917
|
-
left?: Space$f;
|
|
1918
|
-
right?: Space$f;
|
|
1919
|
-
};
|
|
1920
1883
|
type Props$m = {
|
|
1921
1884
|
/**
|
|
1922
1885
|
* Defines the heading level from 1 to 5. The styles of the heading are applied according to the level.
|
|
@@ -1940,7 +1903,7 @@ type Props$m = {
|
|
|
1940
1903
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
1941
1904
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
1942
1905
|
*/
|
|
1943
|
-
margin?: Space$
|
|
1906
|
+
margin?: Space$1 | Margin;
|
|
1944
1907
|
};
|
|
1945
1908
|
|
|
1946
1909
|
declare const DxcHeading: ({ level, text, as, weight, margin }: Props$m) => JSX.Element;
|
|
@@ -2004,14 +1967,14 @@ type Props$l = {
|
|
|
2004
1967
|
/**
|
|
2005
1968
|
* This function will be called when the image is loaded.
|
|
2006
1969
|
*/
|
|
2007
|
-
onLoad?:
|
|
1970
|
+
onLoad?: ReactEventHandler<HTMLImageElement>;
|
|
2008
1971
|
/**
|
|
2009
1972
|
* This function will be called when the image fails to load.
|
|
2010
1973
|
*/
|
|
2011
|
-
onError?:
|
|
1974
|
+
onError?: ReactEventHandler<HTMLImageElement>;
|
|
2012
1975
|
};
|
|
2013
1976
|
|
|
2014
|
-
declare
|
|
1977
|
+
declare function DxcImage({ alt, caption, lazyLoading, src, srcSet, sizes, width, height, objectFit, objectPosition, onLoad, onError, }: Props$l): react_jsx_runtime.JSX.Element;
|
|
2015
1978
|
|
|
2016
1979
|
type Props$k = {
|
|
2017
1980
|
/**
|
|
@@ -2045,19 +2008,11 @@ type Props$k = {
|
|
|
2045
2008
|
/**
|
|
2046
2009
|
* Custom content inside the inset.
|
|
2047
2010
|
*/
|
|
2048
|
-
children:
|
|
2011
|
+
children: ReactNode;
|
|
2049
2012
|
};
|
|
2050
2013
|
|
|
2051
2014
|
declare const Inset: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$k) => react_jsx_runtime.JSX.Element;
|
|
2052
2015
|
|
|
2053
|
-
type Space$e = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2054
|
-
type Margin$d = {
|
|
2055
|
-
top?: Space$e;
|
|
2056
|
-
bottom?: Space$e;
|
|
2057
|
-
left?: Space$e;
|
|
2058
|
-
right?: Space$e;
|
|
2059
|
-
};
|
|
2060
|
-
type SVG$8 = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
2061
2016
|
type LinkProps = {
|
|
2062
2017
|
/**
|
|
2063
2018
|
* If true, the link is disabled.
|
|
@@ -2070,7 +2025,7 @@ type LinkProps = {
|
|
|
2070
2025
|
/**
|
|
2071
2026
|
* Material Symbol name or SVG element as the icon that will be placed next to the link text.
|
|
2072
2027
|
*/
|
|
2073
|
-
icon?: string | SVG
|
|
2028
|
+
icon?: string | SVG;
|
|
2074
2029
|
/**
|
|
2075
2030
|
* Indicates the position of the icon in the component.
|
|
2076
2031
|
*/
|
|
@@ -2096,7 +2051,7 @@ type LinkProps = {
|
|
|
2096
2051
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
2097
2052
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
2098
2053
|
*/
|
|
2099
|
-
margin?: Space$
|
|
2054
|
+
margin?: Space$1 | Margin;
|
|
2100
2055
|
/**
|
|
2101
2056
|
* Value of the tabindex.
|
|
2102
2057
|
*/
|
|
@@ -2105,7 +2060,6 @@ type LinkProps = {
|
|
|
2105
2060
|
|
|
2106
2061
|
declare const DxcLink: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
|
|
2107
2062
|
|
|
2108
|
-
type SVG$7 = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
2109
2063
|
type TabProps$1 = {
|
|
2110
2064
|
/**
|
|
2111
2065
|
* Whether the tab is active or not.
|
|
@@ -2122,7 +2076,7 @@ type TabProps$1 = {
|
|
|
2122
2076
|
/**
|
|
2123
2077
|
* Material Symbol name or SVG element used as the icon that will be displayed in the tab.
|
|
2124
2078
|
*/
|
|
2125
|
-
icon?: string | SVG
|
|
2079
|
+
icon?: string | SVG;
|
|
2126
2080
|
/**
|
|
2127
2081
|
* If the value is 'true', an empty badge will appear.
|
|
2128
2082
|
* If it is 'false', no badge will appear.
|
|
@@ -2144,7 +2098,7 @@ type Props$j = {
|
|
|
2144
2098
|
/**
|
|
2145
2099
|
* Contains one or more DxcNavTabs.Tab.
|
|
2146
2100
|
*/
|
|
2147
|
-
children:
|
|
2101
|
+
children: ReactNode;
|
|
2148
2102
|
/**
|
|
2149
2103
|
* Value of the tabindex attribute applied to each tab.
|
|
2150
2104
|
*/
|
|
@@ -2156,13 +2110,6 @@ declare const DxcNavTabs: {
|
|
|
2156
2110
|
Tab: react.ForwardRefExoticComponent<TabProps$1 & react.RefAttributes<HTMLAnchorElement>>;
|
|
2157
2111
|
};
|
|
2158
2112
|
|
|
2159
|
-
type Space$d = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2160
|
-
type Margin$c = {
|
|
2161
|
-
top?: Space$d;
|
|
2162
|
-
bottom?: Space$d;
|
|
2163
|
-
left?: Space$d;
|
|
2164
|
-
right?: Space$d;
|
|
2165
|
-
};
|
|
2166
2113
|
type Props$i = {
|
|
2167
2114
|
/**
|
|
2168
2115
|
* Text to be placed above the number.
|
|
@@ -2271,7 +2218,7 @@ type Props$i = {
|
|
|
2271
2218
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
2272
2219
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
2273
2220
|
*/
|
|
2274
|
-
margin?: Space$
|
|
2221
|
+
margin?: Space$1 | Margin;
|
|
2275
2222
|
/**
|
|
2276
2223
|
* Size of the component.
|
|
2277
2224
|
*/
|
|
@@ -2280,6 +2227,14 @@ type Props$i = {
|
|
|
2280
2227
|
* Value of the tabindex attribute.
|
|
2281
2228
|
*/
|
|
2282
2229
|
tabIndex?: number;
|
|
2230
|
+
/**
|
|
2231
|
+
* Specifies a string to be used as the name for the number input element when no `label` is provided.
|
|
2232
|
+
*/
|
|
2233
|
+
ariaLabel?: string;
|
|
2234
|
+
/**
|
|
2235
|
+
* Decides whether the number input has actions to increase or decrease the value, following the defined step.
|
|
2236
|
+
*/
|
|
2237
|
+
showControls?: boolean;
|
|
2283
2238
|
};
|
|
2284
2239
|
|
|
2285
2240
|
declare const DxcNumberInput: react.ForwardRefExoticComponent<Props$i & react.RefAttributes<HTMLDivElement>>;
|
|
@@ -2324,17 +2279,10 @@ type Props$h = {
|
|
|
2324
2279
|
|
|
2325
2280
|
declare const DxcPaginator: ({ currentPage, itemsPerPage, itemsPerPageOptions, totalItems, showGoToPage, onPageChange, itemsPerPageFunction, tabIndex, }: Props$h) => JSX.Element;
|
|
2326
2281
|
|
|
2327
|
-
declare
|
|
2328
|
-
children:
|
|
2329
|
-
})
|
|
2282
|
+
declare function DxcParagraph({ children }: {
|
|
2283
|
+
children: ReactNode;
|
|
2284
|
+
}): react_jsx_runtime.JSX.Element;
|
|
2330
2285
|
|
|
2331
|
-
type Space$c = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2332
|
-
type Margin$b = {
|
|
2333
|
-
top?: Space$c;
|
|
2334
|
-
bottom?: Space$c;
|
|
2335
|
-
left?: Space$c;
|
|
2336
|
-
right?: Space$c;
|
|
2337
|
-
};
|
|
2338
2286
|
type Props$g = {
|
|
2339
2287
|
/**
|
|
2340
2288
|
* Text to be placed above the password input.
|
|
@@ -2424,7 +2372,7 @@ type Props$g = {
|
|
|
2424
2372
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
2425
2373
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
2426
2374
|
*/
|
|
2427
|
-
margin?: Space$
|
|
2375
|
+
margin?: Space$1 | Margin;
|
|
2428
2376
|
/**
|
|
2429
2377
|
* Size of the component.
|
|
2430
2378
|
*/
|
|
@@ -2433,16 +2381,19 @@ type Props$g = {
|
|
|
2433
2381
|
* Value of the tabindex attribute.
|
|
2434
2382
|
*/
|
|
2435
2383
|
tabIndex?: number;
|
|
2384
|
+
/**
|
|
2385
|
+
* Specifies a string to be used as the name for the password input element when no `label` is provided.
|
|
2386
|
+
*/
|
|
2387
|
+
ariaLabel?: string;
|
|
2436
2388
|
};
|
|
2437
2389
|
|
|
2438
2390
|
declare const DxcPasswordInput: react.ForwardRefExoticComponent<Props$g & react.RefAttributes<HTMLDivElement>>;
|
|
2439
2391
|
|
|
2440
|
-
type Space$b = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2441
2392
|
type Size$1 = {
|
|
2442
|
-
top?: Space$
|
|
2443
|
-
bottom?: Space$
|
|
2444
|
-
left?: Space$
|
|
2445
|
-
right?: Space$
|
|
2393
|
+
top?: Space$1;
|
|
2394
|
+
bottom?: Space$1;
|
|
2395
|
+
left?: Space$1;
|
|
2396
|
+
right?: Space$1;
|
|
2446
2397
|
};
|
|
2447
2398
|
type Props$f = {
|
|
2448
2399
|
/**
|
|
@@ -2471,10 +2422,14 @@ type Props$f = {
|
|
|
2471
2422
|
* an object with 'top', 'bottom', 'left' and 'right' properties
|
|
2472
2423
|
* in order to specify different margin sizes.
|
|
2473
2424
|
*/
|
|
2474
|
-
margin?: Space$
|
|
2425
|
+
margin?: Space$1 | Size$1;
|
|
2426
|
+
/**
|
|
2427
|
+
* Specifies a string to be used as the name for the progress bar element when no `label` is provided.
|
|
2428
|
+
*/
|
|
2429
|
+
ariaLabel?: string;
|
|
2475
2430
|
};
|
|
2476
2431
|
|
|
2477
|
-
declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, }: Props$f) => JSX.Element;
|
|
2432
|
+
declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, ariaLabel, }: Props$f) => JSX.Element;
|
|
2478
2433
|
|
|
2479
2434
|
type Link = {
|
|
2480
2435
|
/**
|
|
@@ -2594,22 +2549,19 @@ type RadioGroupProps = {
|
|
|
2594
2549
|
* Value of the tabindex attribute.
|
|
2595
2550
|
*/
|
|
2596
2551
|
tabIndex?: number;
|
|
2552
|
+
/**
|
|
2553
|
+
* Specifies a string to be used as the name for the radio group when no `label` is provided.
|
|
2554
|
+
*/
|
|
2555
|
+
ariaLabel?: string;
|
|
2597
2556
|
};
|
|
2598
2557
|
|
|
2599
2558
|
declare const DxcRadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
|
|
2600
2559
|
|
|
2601
|
-
type Space$a = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2602
|
-
type Margin$a = {
|
|
2603
|
-
top?: Space$a;
|
|
2604
|
-
bottom?: Space$a;
|
|
2605
|
-
left?: Space$a;
|
|
2606
|
-
right?: Space$a;
|
|
2607
|
-
};
|
|
2608
2560
|
type Column = {
|
|
2609
2561
|
/**
|
|
2610
2562
|
* Column display value.
|
|
2611
2563
|
*/
|
|
2612
|
-
displayValue:
|
|
2564
|
+
displayValue: ReactNode;
|
|
2613
2565
|
/**
|
|
2614
2566
|
* Boolean value to indicate whether the column is sortable or not.
|
|
2615
2567
|
*/
|
|
@@ -2619,7 +2571,7 @@ type Cell = {
|
|
|
2619
2571
|
/**
|
|
2620
2572
|
* Value to be displayed in the cell.
|
|
2621
2573
|
*/
|
|
2622
|
-
displayValue:
|
|
2574
|
+
displayValue: ReactNode;
|
|
2623
2575
|
/**
|
|
2624
2576
|
* Value to be used when sorting the table by that
|
|
2625
2577
|
* column. If not indicated displayValue will be used for sorting.
|
|
@@ -2641,7 +2593,7 @@ type CommonProps$3 = {
|
|
|
2641
2593
|
* Size of the margin to be applied to the component. You can pass an object with 'top',
|
|
2642
2594
|
* 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
2643
2595
|
*/
|
|
2644
|
-
margin?: Space$
|
|
2596
|
+
margin?: Space$1 | Margin;
|
|
2645
2597
|
/**
|
|
2646
2598
|
* Value of the tabindex attribute applied to the sortable icon.
|
|
2647
2599
|
*/
|
|
@@ -2703,14 +2655,6 @@ declare const DxcResultsetTable: {
|
|
|
2703
2655
|
ActionsCell: ({ actions }: ActionCellsPropsType) => JSX.Element;
|
|
2704
2656
|
};
|
|
2705
2657
|
|
|
2706
|
-
type Space$9 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2707
|
-
type Margin$9 = {
|
|
2708
|
-
top?: Space$9;
|
|
2709
|
-
bottom?: Space$9;
|
|
2710
|
-
left?: Space$9;
|
|
2711
|
-
right?: Space$9;
|
|
2712
|
-
};
|
|
2713
|
-
type SVG$6 = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
2714
2658
|
type ListOptionGroupType = {
|
|
2715
2659
|
/**
|
|
2716
2660
|
* Label of the group to be shown in the select's listbox.
|
|
@@ -2728,7 +2672,7 @@ type ListOptionType = {
|
|
|
2728
2672
|
* is the chosen one, take into account that the component's
|
|
2729
2673
|
* color styling tokens will not be applied to the image.
|
|
2730
2674
|
*/
|
|
2731
|
-
icon?: string | SVG
|
|
2675
|
+
icon?: string | SVG;
|
|
2732
2676
|
/**
|
|
2733
2677
|
* Label of the option to be shown in the select's listbox.
|
|
2734
2678
|
*/
|
|
@@ -2794,7 +2738,7 @@ type CommonProps$2 = {
|
|
|
2794
2738
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
2795
2739
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
2796
2740
|
*/
|
|
2797
|
-
margin?: Space$
|
|
2741
|
+
margin?: Space$1 | Margin;
|
|
2798
2742
|
/**
|
|
2799
2743
|
* Size of the component.
|
|
2800
2744
|
*/
|
|
@@ -2803,6 +2747,10 @@ type CommonProps$2 = {
|
|
|
2803
2747
|
* Value of the tabindex attribute.
|
|
2804
2748
|
*/
|
|
2805
2749
|
tabIndex?: number;
|
|
2750
|
+
/**
|
|
2751
|
+
* Specifies a string to be used as the name for the select element when no `label` is provided.
|
|
2752
|
+
*/
|
|
2753
|
+
ariaLabel?: string;
|
|
2806
2754
|
};
|
|
2807
2755
|
type SingleSelect = CommonProps$2 & {
|
|
2808
2756
|
/**
|
|
@@ -2880,13 +2828,6 @@ type Props$c = SingleSelect | MultipleSelect;
|
|
|
2880
2828
|
|
|
2881
2829
|
declare const DxcSelect: react.ForwardRefExoticComponent<Props$c & react.RefAttributes<HTMLDivElement>>;
|
|
2882
2830
|
|
|
2883
|
-
type Space$8 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2884
|
-
type Margin$8 = {
|
|
2885
|
-
top?: Space$8;
|
|
2886
|
-
bottom?: Space$8;
|
|
2887
|
-
left?: Space$8;
|
|
2888
|
-
right?: Space$8;
|
|
2889
|
-
};
|
|
2890
2831
|
type Props$b = {
|
|
2891
2832
|
/**
|
|
2892
2833
|
* Text to be placed above the slider.
|
|
@@ -2955,22 +2896,19 @@ type Props$b = {
|
|
|
2955
2896
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
2956
2897
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
2957
2898
|
*/
|
|
2958
|
-
margin?: Space$
|
|
2899
|
+
margin?: Space$1 | Margin;
|
|
2959
2900
|
/**
|
|
2960
2901
|
* Size of the component.
|
|
2961
2902
|
*/
|
|
2962
2903
|
size?: "medium" | "large" | "fillParent";
|
|
2904
|
+
/**
|
|
2905
|
+
* Specifies a string to be used as the name for the slider element when no `label` is provided.
|
|
2906
|
+
*/
|
|
2907
|
+
ariaLabel?: string;
|
|
2963
2908
|
};
|
|
2964
2909
|
|
|
2965
2910
|
declare const DxcSlider: react.ForwardRefExoticComponent<Props$b & react.RefAttributes<HTMLDivElement>>;
|
|
2966
2911
|
|
|
2967
|
-
type Space$7 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2968
|
-
type Margin$7 = {
|
|
2969
|
-
top?: Space$7;
|
|
2970
|
-
bottom?: Space$7;
|
|
2971
|
-
left?: Space$7;
|
|
2972
|
-
right?: Space$7;
|
|
2973
|
-
};
|
|
2974
2912
|
type Props$a = {
|
|
2975
2913
|
/**
|
|
2976
2914
|
* Text to be placed inside the spinner.
|
|
@@ -2993,10 +2931,14 @@ type Props$a = {
|
|
|
2993
2931
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
2994
2932
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
2995
2933
|
*/
|
|
2996
|
-
margin?: Space$
|
|
2934
|
+
margin?: Space$1 | Margin;
|
|
2935
|
+
/**
|
|
2936
|
+
* Specifies a string to be used as the name for the spinner element when no `label` is provided or the `mode` is set to small.
|
|
2937
|
+
*/
|
|
2938
|
+
ariaLabel?: string;
|
|
2997
2939
|
};
|
|
2998
2940
|
|
|
2999
|
-
declare const DxcSpinner: ({ label, value, showValue, mode, margin }: Props$a) => JSX.Element;
|
|
2941
|
+
declare const DxcSpinner: ({ label, value, showValue, mode, margin, ariaLabel, }: Props$a) => JSX.Element;
|
|
3000
2942
|
|
|
3001
2943
|
type Mode = "default" | "info" | "success" | "warning" | "error";
|
|
3002
2944
|
type Size = "small" | "medium" | "large";
|
|
@@ -3017,13 +2959,6 @@ type Props$9 = {
|
|
|
3017
2959
|
|
|
3018
2960
|
declare const DxcStatusLight: ({ mode, label, size }: Props$9) => JSX.Element;
|
|
3019
2961
|
|
|
3020
|
-
type Space$6 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3021
|
-
type Margin$6 = {
|
|
3022
|
-
top?: Space$6;
|
|
3023
|
-
bottom?: Space$6;
|
|
3024
|
-
left?: Space$6;
|
|
3025
|
-
right?: Space$6;
|
|
3026
|
-
};
|
|
3027
2962
|
type Props$8 = {
|
|
3028
2963
|
/**
|
|
3029
2964
|
* Initial state of the switch, only when it is uncontrolled.
|
|
@@ -3068,7 +3003,7 @@ type Props$8 = {
|
|
|
3068
3003
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
3069
3004
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
3070
3005
|
*/
|
|
3071
|
-
margin?: Space$
|
|
3006
|
+
margin?: Space$1 | Margin;
|
|
3072
3007
|
/**
|
|
3073
3008
|
* Size of the component.
|
|
3074
3009
|
*/
|
|
@@ -3077,6 +3012,10 @@ type Props$8 = {
|
|
|
3077
3012
|
* Value of the tabindex.
|
|
3078
3013
|
*/
|
|
3079
3014
|
tabIndex?: number;
|
|
3015
|
+
/**
|
|
3016
|
+
* Specifies a string to be used as the name for the switch element when no `label` is provided.
|
|
3017
|
+
*/
|
|
3018
|
+
ariaLabel?: string;
|
|
3080
3019
|
};
|
|
3081
3020
|
|
|
3082
3021
|
declare const DxcSwitch: react.ForwardRefExoticComponent<Props$8 & react.RefAttributes<HTMLDivElement>>;
|
|
@@ -3086,14 +3025,6 @@ declare const DxcTable: {
|
|
|
3086
3025
|
ActionsCell: ({ actions }: ActionCellsPropsType) => JSX.Element;
|
|
3087
3026
|
};
|
|
3088
3027
|
|
|
3089
|
-
type Space$5 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3090
|
-
type Margin$5 = {
|
|
3091
|
-
top?: Space$5;
|
|
3092
|
-
bottom?: Space$5;
|
|
3093
|
-
left?: Space$5;
|
|
3094
|
-
right?: Space$5;
|
|
3095
|
-
};
|
|
3096
|
-
type SVG$5 = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
3097
3028
|
type TabCommonProps = {
|
|
3098
3029
|
/**
|
|
3099
3030
|
* Whether the tab is disabled or not.
|
|
@@ -3116,7 +3047,7 @@ type TabLabelProps = TabCommonProps & {
|
|
|
3116
3047
|
/**
|
|
3117
3048
|
* Material Symbol name or SVG element used as the icon that will be displayed in the tab.
|
|
3118
3049
|
*/
|
|
3119
|
-
icon?: string | SVG
|
|
3050
|
+
icon?: string | SVG;
|
|
3120
3051
|
};
|
|
3121
3052
|
type TabIconProps = TabCommonProps & {
|
|
3122
3053
|
/**
|
|
@@ -3126,17 +3057,17 @@ type TabIconProps = TabCommonProps & {
|
|
|
3126
3057
|
/**
|
|
3127
3058
|
* Material Symbol name or SVG element used as the icon that will be displayed in the tab.
|
|
3128
3059
|
*/
|
|
3129
|
-
icon: string | SVG
|
|
3060
|
+
icon: string | SVG;
|
|
3130
3061
|
};
|
|
3131
3062
|
type TabProps = {
|
|
3132
3063
|
defaultActive?: boolean;
|
|
3133
3064
|
active?: boolean;
|
|
3134
|
-
icon?: string | SVG
|
|
3135
|
-
label
|
|
3065
|
+
icon?: string | SVG;
|
|
3066
|
+
label: string;
|
|
3136
3067
|
title?: string;
|
|
3137
3068
|
disabled?: boolean;
|
|
3138
3069
|
notificationNumber?: boolean | number;
|
|
3139
|
-
children:
|
|
3070
|
+
children: ReactNode;
|
|
3140
3071
|
onClick?: () => void;
|
|
3141
3072
|
onHover?: () => void;
|
|
3142
3073
|
};
|
|
@@ -3167,12 +3098,12 @@ type LegacyProps = {
|
|
|
3167
3098
|
* This function will be called when the user hovers a tab.The index of the
|
|
3168
3099
|
* hovered tab will be passed as a parameter.
|
|
3169
3100
|
*/
|
|
3170
|
-
onTabHover?: (index: number) => void;
|
|
3101
|
+
onTabHover?: (index: number | null) => void;
|
|
3171
3102
|
/**
|
|
3172
3103
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
3173
3104
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
3174
3105
|
*/
|
|
3175
|
-
margin?: Space$
|
|
3106
|
+
margin?: Space$1 | Margin;
|
|
3176
3107
|
/**
|
|
3177
3108
|
* Value of the tabindex attribute applied to each tab.
|
|
3178
3109
|
*/
|
|
@@ -3187,7 +3118,7 @@ type NewProps = {
|
|
|
3187
3118
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
3188
3119
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
3189
3120
|
*/
|
|
3190
|
-
margin?: Space$
|
|
3121
|
+
margin?: Space$1 | Margin;
|
|
3191
3122
|
/**
|
|
3192
3123
|
* Value of the tabindex attribute applied to each tab.
|
|
3193
3124
|
*/
|
|
@@ -3195,23 +3126,15 @@ type NewProps = {
|
|
|
3195
3126
|
/**
|
|
3196
3127
|
* Contains one or more DxcTabs.Tab.
|
|
3197
3128
|
*/
|
|
3198
|
-
children?:
|
|
3129
|
+
children?: ReactNode;
|
|
3199
3130
|
};
|
|
3200
3131
|
type Props$7 = LegacyProps & NewProps;
|
|
3201
3132
|
|
|
3202
3133
|
declare const DxcTabs: {
|
|
3203
|
-
({ defaultActiveTabIndex, activeTabIndex, tabs, onTabClick, onTabHover, margin, iconPosition, tabIndex, children, }: Props$7): JSX.Element;
|
|
3134
|
+
({ defaultActiveTabIndex, activeTabIndex, tabs, onTabClick, onTabHover, margin, iconPosition, tabIndex, children, }: Props$7): false | react_jsx_runtime.JSX.Element;
|
|
3204
3135
|
Tab: react.ForwardRefExoticComponent<TabProps & react.RefAttributes<HTMLButtonElement>>;
|
|
3205
3136
|
};
|
|
3206
3137
|
|
|
3207
|
-
type Space$4 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3208
|
-
type Margin$4 = {
|
|
3209
|
-
top?: Space$4;
|
|
3210
|
-
bottom?: Space$4;
|
|
3211
|
-
left?: Space$4;
|
|
3212
|
-
right?: Space$4;
|
|
3213
|
-
};
|
|
3214
|
-
type SVG$4 = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
3215
3138
|
type TagCommonProps = {
|
|
3216
3139
|
/**
|
|
3217
3140
|
* If defined, the tag will be displayed as an anchor, using this prop as "href".
|
|
@@ -3240,7 +3163,7 @@ type TagCommonProps = {
|
|
|
3240
3163
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
3241
3164
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
3242
3165
|
*/
|
|
3243
|
-
margin?: Space$
|
|
3166
|
+
margin?: Space$1 | Margin;
|
|
3244
3167
|
/**
|
|
3245
3168
|
* Size of the component.
|
|
3246
3169
|
*/
|
|
@@ -3254,7 +3177,7 @@ type TagLabelProps = TagCommonProps & {
|
|
|
3254
3177
|
/**
|
|
3255
3178
|
* Material Symbol name or SVG element used as the icon that will be placed next to the label.
|
|
3256
3179
|
*/
|
|
3257
|
-
icon?: string | SVG
|
|
3180
|
+
icon?: string | SVG;
|
|
3258
3181
|
/**
|
|
3259
3182
|
* Text to be placed next inside the tag.
|
|
3260
3183
|
*/
|
|
@@ -3264,7 +3187,7 @@ type TagIconProps = TagCommonProps & {
|
|
|
3264
3187
|
/**
|
|
3265
3188
|
* Material Symbol name or SVG element used as the icon that will be placed next to the label.
|
|
3266
3189
|
*/
|
|
3267
|
-
icon: string | SVG
|
|
3190
|
+
icon: string | SVG;
|
|
3268
3191
|
/**
|
|
3269
3192
|
* Text to be placed next inside the tag.
|
|
3270
3193
|
*/
|
|
@@ -3277,13 +3200,6 @@ type Props$6 = TagLabelProps | TagIconProps;
|
|
|
3277
3200
|
*/
|
|
3278
3201
|
declare const DxcTag: ({ icon, label, linkHref, onClick, iconBgColor, labelPosition, newWindow, margin, size, tabIndex, }: Props$6) => JSX.Element;
|
|
3279
3202
|
|
|
3280
|
-
type Space$3 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3281
|
-
type Margin$3 = {
|
|
3282
|
-
top?: Space$3;
|
|
3283
|
-
bottom?: Space$3;
|
|
3284
|
-
left?: Space$3;
|
|
3285
|
-
right?: Space$3;
|
|
3286
|
-
};
|
|
3287
3203
|
type Props$5 = {
|
|
3288
3204
|
/**
|
|
3289
3205
|
* Text to be placed above the textarea.
|
|
@@ -3403,7 +3319,7 @@ type Props$5 = {
|
|
|
3403
3319
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
3404
3320
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
3405
3321
|
*/
|
|
3406
|
-
margin?: Space$
|
|
3322
|
+
margin?: Space$1 | Margin;
|
|
3407
3323
|
/**
|
|
3408
3324
|
* Size of the component.
|
|
3409
3325
|
*/
|
|
@@ -3412,18 +3328,14 @@ type Props$5 = {
|
|
|
3412
3328
|
* Value of the tabindex attribute.
|
|
3413
3329
|
*/
|
|
3414
3330
|
tabIndex?: number;
|
|
3331
|
+
/**
|
|
3332
|
+
* Specifies a string to be used as the name for the textarea element when no `label` is provided.
|
|
3333
|
+
*/
|
|
3334
|
+
ariaLabel?: string;
|
|
3415
3335
|
};
|
|
3416
3336
|
|
|
3417
3337
|
declare const DxcTextarea: react.ForwardRefExoticComponent<Props$5 & react.RefAttributes<HTMLDivElement>>;
|
|
3418
3338
|
|
|
3419
|
-
type Space$2 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3420
|
-
type Margin$2 = {
|
|
3421
|
-
top?: Space$2;
|
|
3422
|
-
bottom?: Space$2;
|
|
3423
|
-
left?: Space$2;
|
|
3424
|
-
right?: Space$2;
|
|
3425
|
-
};
|
|
3426
|
-
type SVG$3 = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
3427
3339
|
type Action$1 = {
|
|
3428
3340
|
/**
|
|
3429
3341
|
* This function will be called when the user clicks the action.
|
|
@@ -3432,7 +3344,7 @@ type Action$1 = {
|
|
|
3432
3344
|
/**
|
|
3433
3345
|
* Icon to be placed in the action..
|
|
3434
3346
|
*/
|
|
3435
|
-
icon: string | SVG
|
|
3347
|
+
icon: string | SVG;
|
|
3436
3348
|
/**
|
|
3437
3349
|
* Text representing advisory information related
|
|
3438
3350
|
* to the button's action. Under the hood, this prop also serves
|
|
@@ -3574,7 +3486,7 @@ type Props$4 = {
|
|
|
3574
3486
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
3575
3487
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
3576
3488
|
*/
|
|
3577
|
-
margin?: Space$
|
|
3489
|
+
margin?: Space$1 | Margin;
|
|
3578
3490
|
/**
|
|
3579
3491
|
* Size of the component.
|
|
3580
3492
|
*/
|
|
@@ -3583,44 +3495,69 @@ type Props$4 = {
|
|
|
3583
3495
|
* Value of the tabindex attribute.
|
|
3584
3496
|
*/
|
|
3585
3497
|
tabIndex?: number;
|
|
3498
|
+
/**
|
|
3499
|
+
* Specifies a string to be used as the name for the textInput element when no `label` is provided.
|
|
3500
|
+
*/
|
|
3501
|
+
ariaLabel?: string;
|
|
3586
3502
|
};
|
|
3587
3503
|
|
|
3588
3504
|
declare const DxcTextInput: react.ForwardRefExoticComponent<Props$4 & react.RefAttributes<HTMLDivElement>>;
|
|
3589
3505
|
|
|
3590
|
-
type SVG$2 = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
3591
3506
|
type Action = {
|
|
3592
|
-
|
|
3507
|
+
/**
|
|
3508
|
+
* The icon of the action. It can be a string with the name of the icon or an SVG component.
|
|
3509
|
+
*/
|
|
3510
|
+
icon?: string | SVG;
|
|
3511
|
+
/**
|
|
3512
|
+
* The label of the action.
|
|
3513
|
+
*/
|
|
3593
3514
|
label: string;
|
|
3515
|
+
/**
|
|
3516
|
+
* The function that will be executed when the user clicks on the action button.
|
|
3517
|
+
*/
|
|
3594
3518
|
onClick: () => void;
|
|
3595
3519
|
};
|
|
3596
3520
|
type CommonProps$1 = {
|
|
3521
|
+
/**
|
|
3522
|
+
* Tertiary button which performs a custom action, specified by the user.
|
|
3523
|
+
*/
|
|
3597
3524
|
action?: Action;
|
|
3525
|
+
/**
|
|
3526
|
+
* Message to be displayed as a toast.
|
|
3527
|
+
*/
|
|
3598
3528
|
message: string;
|
|
3599
3529
|
};
|
|
3600
3530
|
type DefaultToast = CommonProps$1 & {
|
|
3601
|
-
|
|
3531
|
+
/**
|
|
3532
|
+
* Material Symbol name or SVG element as the icon that will be placed next to the panel label.
|
|
3533
|
+
* When using Material Symbols, replace spaces with underscores.
|
|
3534
|
+
* By default they are outlined if you want it to be filled prefix the symbol name with "filled_".
|
|
3535
|
+
*/
|
|
3536
|
+
icon?: string | SVG;
|
|
3602
3537
|
};
|
|
3603
3538
|
type LoadingToast = CommonProps$1 & {
|
|
3604
3539
|
loading: boolean;
|
|
3605
3540
|
};
|
|
3606
3541
|
type SemanticToast = CommonProps$1 & {
|
|
3542
|
+
/**
|
|
3543
|
+
* Flag that allows to hide the semantic icon of the toast.
|
|
3544
|
+
*/
|
|
3607
3545
|
hideSemanticIcon?: boolean;
|
|
3608
3546
|
};
|
|
3609
3547
|
type ToastsQueuePropsType = {
|
|
3548
|
+
/**
|
|
3549
|
+
* Duration in milliseconds before a toast automatically hides itself.
|
|
3550
|
+
* The range goes from 3000ms to 5000ms, any other value will not be taken into consideration.
|
|
3551
|
+
*/
|
|
3610
3552
|
duration?: number;
|
|
3611
|
-
|
|
3553
|
+
/**
|
|
3554
|
+
* Tree of components from which the useToast hook can be triggered.
|
|
3555
|
+
*/
|
|
3556
|
+
children: ReactNode;
|
|
3612
3557
|
};
|
|
3613
3558
|
|
|
3614
3559
|
declare const DxcToastsQueue: ({ children, duration }: ToastsQueuePropsType) => react_jsx_runtime.JSX.Element;
|
|
3615
3560
|
|
|
3616
|
-
type Space$1 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3617
|
-
type Margin$1 = {
|
|
3618
|
-
top?: Space$1;
|
|
3619
|
-
bottom?: Space$1;
|
|
3620
|
-
left?: Space$1;
|
|
3621
|
-
right?: Space$1;
|
|
3622
|
-
};
|
|
3623
|
-
type SVG$1 = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
3624
3561
|
type OptionIcon = {
|
|
3625
3562
|
/**
|
|
3626
3563
|
* String with the option display value.
|
|
@@ -3629,7 +3566,7 @@ type OptionIcon = {
|
|
|
3629
3566
|
/**
|
|
3630
3567
|
* Material Symbols icon or SVG element. Icon and label can't be used at same time.
|
|
3631
3568
|
*/
|
|
3632
|
-
icon: string | SVG
|
|
3569
|
+
icon: string | SVG;
|
|
3633
3570
|
/**
|
|
3634
3571
|
* Value for the HTML properties title and aria-label.
|
|
3635
3572
|
* When a label is defined, this prop can not be use.
|
|
@@ -3644,7 +3581,7 @@ type OptionLabel = {
|
|
|
3644
3581
|
/**
|
|
3645
3582
|
* Material Symbols icon or SVG element. Icon and label can't be used at same time.
|
|
3646
3583
|
*/
|
|
3647
|
-
icon?: string | SVG
|
|
3584
|
+
icon?: string | SVG;
|
|
3648
3585
|
/**
|
|
3649
3586
|
* Value for the HTML properties title and aria-label.
|
|
3650
3587
|
* When a label is defined, this prop can not be use.
|
|
@@ -3678,7 +3615,7 @@ type CommonProps = {
|
|
|
3678
3615
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
3679
3616
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
3680
3617
|
*/
|
|
3681
|
-
margin?: Space$1 | Margin
|
|
3618
|
+
margin?: Space$1 | Margin;
|
|
3682
3619
|
/**
|
|
3683
3620
|
* Value of the tabindex.
|
|
3684
3621
|
*/
|
|
@@ -3736,17 +3673,19 @@ type Props$2 = {
|
|
|
3736
3673
|
/**
|
|
3737
3674
|
* Text to be displayed inside the tooltip.
|
|
3738
3675
|
*/
|
|
3739
|
-
label
|
|
3676
|
+
label?: string;
|
|
3740
3677
|
/**
|
|
3741
3678
|
* Content in which the Tooltip will be displayed.
|
|
3742
3679
|
*/
|
|
3743
|
-
children:
|
|
3680
|
+
children: ReactNode;
|
|
3744
3681
|
};
|
|
3745
3682
|
|
|
3746
3683
|
declare function DxcTooltip(props: Props$2): react_jsx_runtime.JSX.Element;
|
|
3747
3684
|
|
|
3748
3685
|
type Props$1 = {
|
|
3749
|
-
as?:
|
|
3686
|
+
as?: "a" | "blockquote" | "cite" | "code" | "div" | "em" | "figcaption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "pre" | "small" | "span" | "strong";
|
|
3687
|
+
children: ReactNode;
|
|
3688
|
+
color?: string;
|
|
3750
3689
|
display?: "inline" | "block";
|
|
3751
3690
|
fontFamily?: "Open Sans, sans-serif" | "Source Code Pro, monospace";
|
|
3752
3691
|
fontSize?: "0.75rem" | "0.875rem" | "1rem" | "1.25rem" | "1.5rem" | "2rem" | "3rem" | "3.75rem";
|
|
@@ -3755,23 +3694,13 @@ type Props$1 = {
|
|
|
3755
3694
|
letterSpacing?: "-0.025em" | "-0.0125em" | "0em" | "0.025em" | "0.05em" | "0.1em";
|
|
3756
3695
|
lineHeight?: "1em" | "1.25em" | "1.365em" | "1.5em" | "1.715em" | "2em";
|
|
3757
3696
|
textAlign?: "left" | "center" | "right";
|
|
3758
|
-
color?: string;
|
|
3759
3697
|
textDecoration?: "none" | "underline" | "line-through";
|
|
3760
3698
|
textOverflow?: "clip" | "ellipsis" | "unset";
|
|
3761
3699
|
whiteSpace?: "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap";
|
|
3762
|
-
children: React.ReactNode;
|
|
3763
3700
|
};
|
|
3764
3701
|
|
|
3765
|
-
declare
|
|
3702
|
+
declare function DxcTypography({ children, ...props }: Props$1): react_jsx_runtime.JSX.Element;
|
|
3766
3703
|
|
|
3767
|
-
type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3768
|
-
type Margin = {
|
|
3769
|
-
top?: Space;
|
|
3770
|
-
bottom?: Space;
|
|
3771
|
-
left?: Space;
|
|
3772
|
-
right?: Space;
|
|
3773
|
-
};
|
|
3774
|
-
type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
3775
3704
|
type StepProps = {
|
|
3776
3705
|
/**
|
|
3777
3706
|
* Step label.
|
|
@@ -3820,7 +3749,7 @@ type Props = {
|
|
|
3820
3749
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
3821
3750
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
3822
3751
|
*/
|
|
3823
|
-
margin?: Space | Margin;
|
|
3752
|
+
margin?: Space$1 | Margin;
|
|
3824
3753
|
/**
|
|
3825
3754
|
* Value of the tabindex attribute that is given to all the steps.
|
|
3826
3755
|
*/
|
|
@@ -3833,28 +3762,28 @@ declare const componentTokens: {
|
|
|
3833
3762
|
accordion: {
|
|
3834
3763
|
backgroundColor: string;
|
|
3835
3764
|
hoverBackgroundColor: string;
|
|
3765
|
+
focusBackgroundColor: string;
|
|
3766
|
+
activeBackgroundColor: string;
|
|
3836
3767
|
arrowColor: string;
|
|
3837
3768
|
disabledArrowColor: string;
|
|
3769
|
+
subLabelFontFamily: string;
|
|
3770
|
+
subLabelFontSize: string;
|
|
3771
|
+
subLabelFontWeight: string;
|
|
3772
|
+
subLabelFontStyle: string;
|
|
3773
|
+
subLabelFontColor: string;
|
|
3774
|
+
disabledSubLabelFontColor: string;
|
|
3838
3775
|
assistiveTextFontFamily: string;
|
|
3839
3776
|
assistiveTextFontSize: string;
|
|
3840
3777
|
assistiveTextFontWeight: string;
|
|
3841
3778
|
assistiveTextFontStyle: string;
|
|
3842
|
-
assistiveTextLetterSpacing: string;
|
|
3843
3779
|
assistiveTextFontColor: string;
|
|
3844
3780
|
disabledAssistiveTextFontColor: string;
|
|
3845
|
-
assistiveTextMinWidth: string;
|
|
3846
|
-
assistiveTextPaddingRight: string;
|
|
3847
|
-
assistiveTextPaddingLeft: string;
|
|
3848
3781
|
titleLabelFontFamily: string;
|
|
3849
3782
|
titleLabelFontSize: string;
|
|
3850
3783
|
titleLabelFontWeight: string;
|
|
3851
3784
|
titleLabelFontStyle: string;
|
|
3852
3785
|
titleLabelFontColor: string;
|
|
3853
3786
|
disabledTitleLabelFontColor: string;
|
|
3854
|
-
titleLabelPaddingTop: string;
|
|
3855
|
-
titleLabelPaddingBottom: string;
|
|
3856
|
-
titleLabelPaddingLeft: string;
|
|
3857
|
-
titleLabelPaddingRight: string;
|
|
3858
3787
|
focusBorderColor: string;
|
|
3859
3788
|
focusBorderStyle: string;
|
|
3860
3789
|
focusBorderThickness: string;
|
|
@@ -3862,59 +3791,34 @@ declare const componentTokens: {
|
|
|
3862
3791
|
boxShadowOffsetX: string;
|
|
3863
3792
|
boxShadowOffsetY: string;
|
|
3864
3793
|
boxShadowBlur: string;
|
|
3794
|
+
boxShadowSpread: string;
|
|
3865
3795
|
boxShadowColor: string;
|
|
3866
3796
|
iconColor: string;
|
|
3867
3797
|
disabledIconColor: string;
|
|
3868
3798
|
iconSize: string;
|
|
3869
|
-
|
|
3870
|
-
|
|
3871
|
-
|
|
3872
|
-
accordionGroupSeparatorBorderThickness: string;
|
|
3873
|
-
accordionGroupSeparatorBorderRadius: string;
|
|
3874
|
-
accordionGroupSeparatorBorderStyle: string;
|
|
3799
|
+
accordionSeparatorBorderColor: string;
|
|
3800
|
+
accordionSeparatorBorderThickness: string;
|
|
3801
|
+
accordionSeparatorBorderStyle: string;
|
|
3875
3802
|
};
|
|
3876
3803
|
alert: {
|
|
3877
|
-
|
|
3878
|
-
titleFontColor: string;
|
|
3879
|
-
titleFontSize: string;
|
|
3880
|
-
titleFontStyle: string;
|
|
3881
|
-
titleFontWeight: string;
|
|
3882
|
-
titleTextTransform: string;
|
|
3883
|
-
titlePaddingRight: string;
|
|
3884
|
-
titlePaddingLeft: string;
|
|
3885
|
-
inlineTextFontFamily: string;
|
|
3886
|
-
inlineTextFontColor: string;
|
|
3887
|
-
inlineTextFontSize: string;
|
|
3888
|
-
inlineTextFontStyle: string;
|
|
3889
|
-
inlineTextFontWeight: string;
|
|
3890
|
-
inlineTextPaddingLeft: string;
|
|
3891
|
-
inlineTextPaddingRight: string;
|
|
3892
|
-
contentPaddingLeft: string;
|
|
3893
|
-
contentPaddingRight: string;
|
|
3894
|
-
contentPaddingTop: string;
|
|
3895
|
-
contentPaddingBottom: string;
|
|
3896
|
-
borderRadius: string;
|
|
3897
|
-
borderStyle: string;
|
|
3898
|
-
borderThickness: string;
|
|
3899
|
-
infoBorderColor: string;
|
|
3900
|
-
successBorderColor: string;
|
|
3901
|
-
warningBorderColor: string;
|
|
3902
|
-
errorBorderColor: string;
|
|
3903
|
-
iconSize: string;
|
|
3904
|
-
iconPaddingLeft: string;
|
|
3905
|
-
iconPaddingRight: string;
|
|
3906
|
-
infoIconColor: string;
|
|
3907
|
-
successIconColor: string;
|
|
3908
|
-
warningIconColor: string;
|
|
3804
|
+
errorBackgroundColor: string;
|
|
3909
3805
|
errorIconColor: string;
|
|
3806
|
+
fontColor: string;
|
|
3807
|
+
fontFamily: string;
|
|
3808
|
+
fontSize: string;
|
|
3809
|
+
fontStyle: string;
|
|
3810
|
+
fontWeight: string;
|
|
3811
|
+
iconSize: string;
|
|
3910
3812
|
infoBackgroundColor: string;
|
|
3813
|
+
infoIconColor: string;
|
|
3814
|
+
modalBackgroundColor: string;
|
|
3815
|
+
modalTitleFontSize: string;
|
|
3816
|
+
modalTitleFontWeight: string;
|
|
3817
|
+
overlayColor: string;
|
|
3911
3818
|
successBackgroundColor: string;
|
|
3819
|
+
successIconColor: string;
|
|
3912
3820
|
warningBackgroundColor: string;
|
|
3913
|
-
|
|
3914
|
-
hoverActionBackgroundColor: string;
|
|
3915
|
-
activeActionBackgroundColor: string;
|
|
3916
|
-
focusActionBorderColor: string;
|
|
3917
|
-
overlayColor: string;
|
|
3821
|
+
warningIconColor: string;
|
|
3918
3822
|
};
|
|
3919
3823
|
bulletedList: {
|
|
3920
3824
|
fontColor: string;
|
|
@@ -4240,15 +4144,8 @@ declare const componentTokens: {
|
|
|
4240
4144
|
dialog: {
|
|
4241
4145
|
overlayColor: string;
|
|
4242
4146
|
backgroundColor: string;
|
|
4243
|
-
closeIconSize: string;
|
|
4244
|
-
closeIconTopPosition: string;
|
|
4245
|
-
closeIconRightPosition: string;
|
|
4246
4147
|
closeIconBackgroundColor: string;
|
|
4247
|
-
closeIconBorderColor: string;
|
|
4248
4148
|
closeIconColor: string;
|
|
4249
|
-
closeIconBorderThickness: string;
|
|
4250
|
-
closeIconBorderStyle: string;
|
|
4251
|
-
closeIconBorderRadius: string;
|
|
4252
4149
|
boxShadowOffsetX: string;
|
|
4253
4150
|
boxShadowOffsetY: string;
|
|
4254
4151
|
boxShadowBlur: string;
|
|
@@ -4383,15 +4280,15 @@ declare const componentTokens: {
|
|
|
4383
4280
|
};
|
|
4384
4281
|
header: {
|
|
4385
4282
|
backgroundColor: string;
|
|
4386
|
-
|
|
4387
|
-
|
|
4388
|
-
|
|
4389
|
-
|
|
4390
|
-
|
|
4391
|
-
|
|
4392
|
-
|
|
4393
|
-
|
|
4394
|
-
|
|
4283
|
+
hamburgerFocusColor: string;
|
|
4284
|
+
hamburgerFontFamily: string;
|
|
4285
|
+
hamburgerFontStyle: string;
|
|
4286
|
+
hamburgerFontColor: string;
|
|
4287
|
+
hamburgerFontSize: string;
|
|
4288
|
+
hamburgerFontWeight: string;
|
|
4289
|
+
hamburgerTextTransform: string;
|
|
4290
|
+
hamburgerIconColor: string;
|
|
4291
|
+
hamburgerHoverColor: string;
|
|
4395
4292
|
logo: string;
|
|
4396
4293
|
logoResponsive: string;
|
|
4397
4294
|
logoHeight: string;
|
|
@@ -5142,6 +5039,7 @@ type OpinionatedTheme = {
|
|
|
5142
5039
|
accordion: {
|
|
5143
5040
|
accentColor: string;
|
|
5144
5041
|
titleFontColor: string;
|
|
5042
|
+
subLabelFontColor: string;
|
|
5145
5043
|
assistiveTextFontColor: string;
|
|
5146
5044
|
};
|
|
5147
5045
|
alert: {
|
|
@@ -5203,7 +5101,7 @@ type OpinionatedTheme = {
|
|
|
5203
5101
|
accentColor: string;
|
|
5204
5102
|
fontColor: string;
|
|
5205
5103
|
menuBaseColor: string;
|
|
5206
|
-
|
|
5104
|
+
hamburgerColor: string;
|
|
5207
5105
|
logo: string;
|
|
5208
5106
|
logoResponsive: string;
|
|
5209
5107
|
contentColor: string;
|
|
@@ -5297,10 +5195,10 @@ declare const defaultTranslatedComponentLabels: {
|
|
|
5297
5195
|
visibilityToggleTitle: string;
|
|
5298
5196
|
};
|
|
5299
5197
|
alert: {
|
|
5300
|
-
|
|
5301
|
-
|
|
5302
|
-
|
|
5303
|
-
|
|
5198
|
+
previousMessageActionTitle: string;
|
|
5199
|
+
nextMessageActionTitle: string;
|
|
5200
|
+
closeAlertActionTitle: string;
|
|
5201
|
+
closeMessageActionTitle: string;
|
|
5304
5202
|
};
|
|
5305
5203
|
calendar: {
|
|
5306
5204
|
daysShort: string[];
|
|
@@ -5337,7 +5235,7 @@ declare const defaultTranslatedComponentLabels: {
|
|
|
5337
5235
|
};
|
|
5338
5236
|
header: {
|
|
5339
5237
|
closeIcon: string;
|
|
5340
|
-
|
|
5238
|
+
hamburgerTitle: string;
|
|
5341
5239
|
};
|
|
5342
5240
|
numberInput: {
|
|
5343
5241
|
valueGreaterThanOrEqualToErrorMessage: (value: number) => string;
|
|
@@ -5381,32 +5279,39 @@ declare const defaultTranslatedComponentLabels: {
|
|
|
5381
5279
|
};
|
|
5382
5280
|
type TranslatedLabels = typeof defaultTranslatedComponentLabels;
|
|
5383
5281
|
|
|
5384
|
-
|
|
5282
|
+
/**
|
|
5283
|
+
* This type is used to allow partial themes and labels objects to be passed to the HalstackProvider.
|
|
5284
|
+
* This is an extension of the already existing Partial type, which only allows one level of partiality.
|
|
5285
|
+
*/
|
|
5286
|
+
type DeepPartial<T> = {
|
|
5287
|
+
[P in keyof T]?: Partial<T[P]>;
|
|
5288
|
+
};
|
|
5289
|
+
declare const HalstackContext: react.Context<{
|
|
5385
5290
|
accordion: {
|
|
5386
5291
|
backgroundColor: string;
|
|
5387
5292
|
hoverBackgroundColor: string;
|
|
5293
|
+
focusBackgroundColor: string;
|
|
5294
|
+
activeBackgroundColor: string;
|
|
5388
5295
|
arrowColor: string;
|
|
5389
5296
|
disabledArrowColor: string;
|
|
5297
|
+
subLabelFontFamily: string;
|
|
5298
|
+
subLabelFontSize: string;
|
|
5299
|
+
subLabelFontWeight: string;
|
|
5300
|
+
subLabelFontStyle: string;
|
|
5301
|
+
subLabelFontColor: string;
|
|
5302
|
+
disabledSubLabelFontColor: string;
|
|
5390
5303
|
assistiveTextFontFamily: string;
|
|
5391
5304
|
assistiveTextFontSize: string;
|
|
5392
5305
|
assistiveTextFontWeight: string;
|
|
5393
5306
|
assistiveTextFontStyle: string;
|
|
5394
|
-
assistiveTextLetterSpacing: string;
|
|
5395
5307
|
assistiveTextFontColor: string;
|
|
5396
5308
|
disabledAssistiveTextFontColor: string;
|
|
5397
|
-
assistiveTextMinWidth: string;
|
|
5398
|
-
assistiveTextPaddingRight: string;
|
|
5399
|
-
assistiveTextPaddingLeft: string;
|
|
5400
5309
|
titleLabelFontFamily: string;
|
|
5401
5310
|
titleLabelFontSize: string;
|
|
5402
5311
|
titleLabelFontWeight: string;
|
|
5403
5312
|
titleLabelFontStyle: string;
|
|
5404
5313
|
titleLabelFontColor: string;
|
|
5405
5314
|
disabledTitleLabelFontColor: string;
|
|
5406
|
-
titleLabelPaddingTop: string;
|
|
5407
|
-
titleLabelPaddingBottom: string;
|
|
5408
|
-
titleLabelPaddingLeft: string;
|
|
5409
|
-
titleLabelPaddingRight: string;
|
|
5410
5315
|
focusBorderColor: string;
|
|
5411
5316
|
focusBorderStyle: string;
|
|
5412
5317
|
focusBorderThickness: string;
|
|
@@ -5414,59 +5319,34 @@ declare const HalstackContext: react.Context<DeepPartial<{
|
|
|
5414
5319
|
boxShadowOffsetX: string;
|
|
5415
5320
|
boxShadowOffsetY: string;
|
|
5416
5321
|
boxShadowBlur: string;
|
|
5322
|
+
boxShadowSpread: string;
|
|
5417
5323
|
boxShadowColor: string;
|
|
5418
5324
|
iconColor: string;
|
|
5419
5325
|
disabledIconColor: string;
|
|
5420
5326
|
iconSize: string;
|
|
5421
|
-
|
|
5422
|
-
|
|
5423
|
-
|
|
5424
|
-
accordionGroupSeparatorBorderThickness: string;
|
|
5425
|
-
accordionGroupSeparatorBorderRadius: string;
|
|
5426
|
-
accordionGroupSeparatorBorderStyle: string;
|
|
5327
|
+
accordionSeparatorBorderColor: string;
|
|
5328
|
+
accordionSeparatorBorderThickness: string;
|
|
5329
|
+
accordionSeparatorBorderStyle: string;
|
|
5427
5330
|
};
|
|
5428
5331
|
alert: {
|
|
5429
|
-
|
|
5430
|
-
titleFontColor: string;
|
|
5431
|
-
titleFontSize: string;
|
|
5432
|
-
titleFontStyle: string;
|
|
5433
|
-
titleFontWeight: string;
|
|
5434
|
-
titleTextTransform: string;
|
|
5435
|
-
titlePaddingRight: string;
|
|
5436
|
-
titlePaddingLeft: string;
|
|
5437
|
-
inlineTextFontFamily: string;
|
|
5438
|
-
inlineTextFontColor: string;
|
|
5439
|
-
inlineTextFontSize: string;
|
|
5440
|
-
inlineTextFontStyle: string;
|
|
5441
|
-
inlineTextFontWeight: string;
|
|
5442
|
-
inlineTextPaddingLeft: string;
|
|
5443
|
-
inlineTextPaddingRight: string;
|
|
5444
|
-
contentPaddingLeft: string;
|
|
5445
|
-
contentPaddingRight: string;
|
|
5446
|
-
contentPaddingTop: string;
|
|
5447
|
-
contentPaddingBottom: string;
|
|
5448
|
-
borderRadius: string;
|
|
5449
|
-
borderStyle: string;
|
|
5450
|
-
borderThickness: string;
|
|
5451
|
-
infoBorderColor: string;
|
|
5452
|
-
successBorderColor: string;
|
|
5453
|
-
warningBorderColor: string;
|
|
5454
|
-
errorBorderColor: string;
|
|
5455
|
-
iconSize: string;
|
|
5456
|
-
iconPaddingLeft: string;
|
|
5457
|
-
iconPaddingRight: string;
|
|
5458
|
-
infoIconColor: string;
|
|
5459
|
-
successIconColor: string;
|
|
5460
|
-
warningIconColor: string;
|
|
5332
|
+
errorBackgroundColor: string;
|
|
5461
5333
|
errorIconColor: string;
|
|
5334
|
+
fontColor: string;
|
|
5335
|
+
fontFamily: string;
|
|
5336
|
+
fontSize: string;
|
|
5337
|
+
fontStyle: string;
|
|
5338
|
+
fontWeight: string;
|
|
5339
|
+
iconSize: string;
|
|
5462
5340
|
infoBackgroundColor: string;
|
|
5341
|
+
infoIconColor: string;
|
|
5342
|
+
modalBackgroundColor: string;
|
|
5343
|
+
modalTitleFontSize: string;
|
|
5344
|
+
modalTitleFontWeight: string;
|
|
5345
|
+
overlayColor: string;
|
|
5463
5346
|
successBackgroundColor: string;
|
|
5347
|
+
successIconColor: string;
|
|
5464
5348
|
warningBackgroundColor: string;
|
|
5465
|
-
|
|
5466
|
-
hoverActionBackgroundColor: string;
|
|
5467
|
-
activeActionBackgroundColor: string;
|
|
5468
|
-
focusActionBorderColor: string;
|
|
5469
|
-
overlayColor: string;
|
|
5349
|
+
warningIconColor: string;
|
|
5470
5350
|
};
|
|
5471
5351
|
bulletedList: {
|
|
5472
5352
|
fontColor: string;
|
|
@@ -5792,15 +5672,8 @@ declare const HalstackContext: react.Context<DeepPartial<{
|
|
|
5792
5672
|
dialog: {
|
|
5793
5673
|
overlayColor: string;
|
|
5794
5674
|
backgroundColor: string;
|
|
5795
|
-
closeIconSize: string;
|
|
5796
|
-
closeIconTopPosition: string;
|
|
5797
|
-
closeIconRightPosition: string;
|
|
5798
5675
|
closeIconBackgroundColor: string;
|
|
5799
|
-
closeIconBorderColor: string;
|
|
5800
5676
|
closeIconColor: string;
|
|
5801
|
-
closeIconBorderThickness: string;
|
|
5802
|
-
closeIconBorderStyle: string;
|
|
5803
|
-
closeIconBorderRadius: string;
|
|
5804
5677
|
boxShadowOffsetX: string;
|
|
5805
5678
|
boxShadowOffsetY: string;
|
|
5806
5679
|
boxShadowBlur: string;
|
|
@@ -5935,15 +5808,15 @@ declare const HalstackContext: react.Context<DeepPartial<{
|
|
|
5935
5808
|
};
|
|
5936
5809
|
header: {
|
|
5937
5810
|
backgroundColor: string;
|
|
5938
|
-
|
|
5939
|
-
|
|
5940
|
-
|
|
5941
|
-
|
|
5942
|
-
|
|
5943
|
-
|
|
5944
|
-
|
|
5945
|
-
|
|
5946
|
-
|
|
5811
|
+
hamburgerFocusColor: string;
|
|
5812
|
+
hamburgerFontFamily: string;
|
|
5813
|
+
hamburgerFontStyle: string;
|
|
5814
|
+
hamburgerFontColor: string;
|
|
5815
|
+
hamburgerFontSize: string;
|
|
5816
|
+
hamburgerFontWeight: string;
|
|
5817
|
+
hamburgerTextTransform: string;
|
|
5818
|
+
hamburgerIconColor: string;
|
|
5819
|
+
hamburgerHoverColor: string;
|
|
5947
5820
|
logo: string;
|
|
5948
5821
|
logoResponsive: string;
|
|
5949
5822
|
logoHeight: string;
|
|
@@ -6688,16 +6561,16 @@ declare const HalstackContext: react.Context<DeepPartial<{
|
|
|
6688
6561
|
separatorColor: string;
|
|
6689
6562
|
focusColor: string;
|
|
6690
6563
|
};
|
|
6691
|
-
}
|
|
6692
|
-
declare const HalstackLanguageContext: react.Context<
|
|
6564
|
+
}>;
|
|
6565
|
+
declare const HalstackLanguageContext: react.Context<{
|
|
6693
6566
|
applicationLayout: {
|
|
6694
6567
|
visibilityToggleTitle: string;
|
|
6695
6568
|
};
|
|
6696
6569
|
alert: {
|
|
6697
|
-
|
|
6698
|
-
|
|
6699
|
-
|
|
6700
|
-
|
|
6570
|
+
previousMessageActionTitle: string;
|
|
6571
|
+
nextMessageActionTitle: string;
|
|
6572
|
+
closeAlertActionTitle: string;
|
|
6573
|
+
closeMessageActionTitle: string;
|
|
6701
6574
|
};
|
|
6702
6575
|
calendar: {
|
|
6703
6576
|
daysShort: string[];
|
|
@@ -6734,7 +6607,7 @@ declare const HalstackLanguageContext: react.Context<DeepPartial<{
|
|
|
6734
6607
|
};
|
|
6735
6608
|
header: {
|
|
6736
6609
|
closeIcon: string;
|
|
6737
|
-
|
|
6610
|
+
hamburgerTitle: string;
|
|
6738
6611
|
};
|
|
6739
6612
|
numberInput: {
|
|
6740
6613
|
valueGreaterThanOrEqualToErrorMessage: (value: number) => string;
|
|
@@ -6775,28 +6648,21 @@ declare const HalstackLanguageContext: react.Context<DeepPartial<{
|
|
|
6775
6648
|
toast: {
|
|
6776
6649
|
clearToastActionTitle: string;
|
|
6777
6650
|
};
|
|
6778
|
-
}
|
|
6779
|
-
/**
|
|
6780
|
-
* This type is used to allow partial themes and labels objects to be passed to the HalstackProvider.
|
|
6781
|
-
* This is an extension of the already existing Partial type, which only allows one level of partiality.
|
|
6782
|
-
*/
|
|
6783
|
-
type DeepPartial<T> = {
|
|
6784
|
-
[P in keyof T]?: Partial<T[P]>;
|
|
6785
|
-
};
|
|
6651
|
+
}>;
|
|
6786
6652
|
type HalstackProviderPropsType = {
|
|
6787
6653
|
theme?: DeepPartial<OpinionatedTheme>;
|
|
6788
6654
|
advancedTheme?: DeepPartial<AdvancedTheme>;
|
|
6789
6655
|
labels?: DeepPartial<TranslatedLabels>;
|
|
6790
|
-
children:
|
|
6656
|
+
children: ReactNode;
|
|
6791
6657
|
};
|
|
6792
6658
|
declare const HalstackProvider: ({ theme, advancedTheme, labels, children }: HalstackProviderPropsType) => JSX.Element;
|
|
6793
6659
|
|
|
6794
6660
|
declare const useToast: () => {
|
|
6795
|
-
default: (toast: DefaultToast) => () => void;
|
|
6796
|
-
success: (toast: SemanticToast) => () => void;
|
|
6797
|
-
warning: (toast: SemanticToast) => () => void;
|
|
6798
|
-
info: (toast: SemanticToast) => () => void;
|
|
6799
|
-
loading: (toast: Omit<LoadingToast, "loading">) => () => void;
|
|
6661
|
+
default: (toast: DefaultToast) => (() => void) | undefined;
|
|
6662
|
+
success: (toast: SemanticToast) => (() => void) | undefined;
|
|
6663
|
+
warning: (toast: SemanticToast) => (() => void) | undefined;
|
|
6664
|
+
info: (toast: SemanticToast) => (() => void) | undefined;
|
|
6665
|
+
loading: (toast: Omit<LoadingToast, "loading">) => (() => void) | undefined;
|
|
6800
6666
|
};
|
|
6801
6667
|
|
|
6802
|
-
export { DxcAccordion,
|
|
6668
|
+
export { DxcAccordion, DxcAlert, DxcApplicationLayout, DxcBadge, Bleed as DxcBleed, DxcBreadcrumbs, DxcBulletedList, DxcButton, DxcCard, DxcCheckbox, DxcChip, DxcContainer, DxcContextualMenu, DxcDataGrid, DxcDateInput, DxcDialog, DxcDivider, DxcDropdown, DxcFileInput, DxcFlex, DxcGrid, DxcHeading, DxcImage, Inset as DxcInset, DxcLink, DxcNavTabs, DxcNumberInput, DxcPaginator, DxcParagraph, DxcPasswordInput, DxcProgressBar, DxcQuickNav, DxcRadioGroup, DxcResultsetTable, DxcSelect, DxcSlider, DxcSpinner, DxcStatusLight, DxcSwitch, DxcTable, DxcTabs, DxcTag, DxcTextInput, DxcTextarea, DxcToastsQueue, DxcToggleGroup, DxcTooltip, DxcTypography, DxcWizard, HalstackContext, HalstackLanguageContext, HalstackProvider, useToast };
|