@dxc-technology/halstack-react 0.0.0-154d393 → 0.0.0-157878e
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 +916 -895
- package/dist/index.d.ts +916 -895
- package/dist/index.js +14334 -18204
- package/dist/index.mjs +14294 -17944
- package/package.json +8 -10
package/dist/index.d.mts
CHANGED
|
@@ -1,16 +1,19 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
1
|
import * as react from 'react';
|
|
2
|
+
import { ReactNode, SVGProps, ReactElement, MouseEvent, ReactEventHandler } from 'react';
|
|
3
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
|
+
import { SortColumn } from 'react-data-grid';
|
|
3
5
|
import * as styled_components from 'styled-components';
|
|
4
6
|
|
|
5
|
-
type Space$
|
|
6
|
-
type Margin
|
|
7
|
-
top?: Space$
|
|
8
|
-
bottom?: Space$
|
|
9
|
-
left?: Space$
|
|
10
|
-
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;
|
|
11
13
|
};
|
|
12
|
-
type SVG
|
|
13
|
-
|
|
14
|
+
type SVG = ReactNode & SVGProps<SVGSVGElement>;
|
|
15
|
+
|
|
16
|
+
type Props$K = {
|
|
14
17
|
/**
|
|
15
18
|
* The panel label.
|
|
16
19
|
*/
|
|
@@ -28,7 +31,7 @@ type Props$L = {
|
|
|
28
31
|
/**
|
|
29
32
|
* Material Symbol name or SVG element used as the icon that will be placed next to panel label.
|
|
30
33
|
*/
|
|
31
|
-
icon?: string | SVG
|
|
34
|
+
icon?: string | SVG;
|
|
32
35
|
/**
|
|
33
36
|
* Assistive text to be placed on the right side of the panel.
|
|
34
37
|
*/
|
|
@@ -46,28 +49,20 @@ type Props$L = {
|
|
|
46
49
|
* The expanded panel of the accordion. This area can be used to render
|
|
47
50
|
* custom content.
|
|
48
51
|
*/
|
|
49
|
-
children:
|
|
52
|
+
children: ReactNode;
|
|
50
53
|
/**
|
|
51
54
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
52
55
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
53
56
|
*/
|
|
54
|
-
margin?: Space$
|
|
57
|
+
margin?: Space$1 | Margin;
|
|
55
58
|
/**
|
|
56
59
|
* Value of the tabindex attribute.
|
|
57
60
|
*/
|
|
58
61
|
tabIndex?: number;
|
|
59
62
|
};
|
|
60
63
|
|
|
61
|
-
declare const DxcAccordion: ({ label, defaultIsExpanded, isExpanded, icon, assistiveText, disabled, onChange, children, margin, tabIndex, }: Props$
|
|
64
|
+
declare const DxcAccordion: ({ label, defaultIsExpanded, isExpanded, icon, assistiveText, disabled, onChange, children, margin, tabIndex, }: Props$K) => JSX.Element;
|
|
62
65
|
|
|
63
|
-
type Space$t = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
64
|
-
type Margin$o = {
|
|
65
|
-
top?: Space$t;
|
|
66
|
-
bottom?: Space$t;
|
|
67
|
-
left?: Space$t;
|
|
68
|
-
right?: Space$t;
|
|
69
|
-
};
|
|
70
|
-
type SVG$h = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
71
66
|
type AccordionPropsType = {
|
|
72
67
|
/**
|
|
73
68
|
* The panel label.
|
|
@@ -76,7 +71,7 @@ type AccordionPropsType = {
|
|
|
76
71
|
/**
|
|
77
72
|
* Material Symbol name or SVG element used as the icon that will be placed next to panel label.
|
|
78
73
|
*/
|
|
79
|
-
icon?: string | SVG
|
|
74
|
+
icon?: string | SVG;
|
|
80
75
|
/**
|
|
81
76
|
* Assistive text to be placed on the right side of the panel.
|
|
82
77
|
*/
|
|
@@ -89,9 +84,9 @@ type AccordionPropsType = {
|
|
|
89
84
|
* The expanded panel of the accordion. This area can be used to render
|
|
90
85
|
* custom content.
|
|
91
86
|
*/
|
|
92
|
-
children:
|
|
87
|
+
children: ReactNode;
|
|
93
88
|
};
|
|
94
|
-
type Props$
|
|
89
|
+
type Props$J = {
|
|
95
90
|
/**
|
|
96
91
|
* Initially active accordion, only when it is uncontrolled.
|
|
97
92
|
*/
|
|
@@ -113,80 +108,112 @@ type Props$K = {
|
|
|
113
108
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
114
109
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
115
110
|
*/
|
|
116
|
-
margin?: Space$
|
|
111
|
+
margin?: Space$1 | Margin;
|
|
117
112
|
/**
|
|
118
113
|
* Customized accordion(s) that are allowed inside an Accordion Group.
|
|
119
114
|
*/
|
|
120
|
-
children:
|
|
115
|
+
children: ReactElement<AccordionPropsType>[] | ReactElement<AccordionPropsType>;
|
|
121
116
|
};
|
|
122
117
|
|
|
123
118
|
declare const DxcAccordionGroup: {
|
|
124
|
-
({ defaultIndexActive, indexActive, disabled, onActiveChange, margin, children, }: Props$
|
|
119
|
+
({ defaultIndexActive, indexActive, disabled, onActiveChange, margin, children, }: Props$J): JSX.Element;
|
|
125
120
|
Accordion: ({ ...childProps }: AccordionPropsType) => JSX.Element;
|
|
126
121
|
};
|
|
127
122
|
|
|
128
|
-
type
|
|
129
|
-
type Margin$n = {
|
|
130
|
-
top?: Space$s;
|
|
131
|
-
bottom?: Space$s;
|
|
132
|
-
left?: Space$s;
|
|
133
|
-
right?: Space$s;
|
|
134
|
-
};
|
|
135
|
-
type Props$J = {
|
|
123
|
+
type Action$2 = {
|
|
136
124
|
/**
|
|
137
|
-
*
|
|
125
|
+
* The icon of the action. It can be a string with the name of the icon or an SVG component.
|
|
138
126
|
*/
|
|
139
|
-
|
|
127
|
+
icon?: string | SVG;
|
|
140
128
|
/**
|
|
141
|
-
*
|
|
142
|
-
* 'inline': If onClose function is received, close button will be visible and the function will be executed when it's clicked.
|
|
143
|
-
* There is no overlay layer. Position should be decided by the user.
|
|
144
|
-
* 'modal': The alert will be displayed in the middle of the screen with an overlay layer behind.
|
|
145
|
-
* The onClose function will be executed when the X button or the overlay is clicked. d
|
|
146
|
-
* The user has the responsibility of hiding the modal in the onClose function, otherwise the modal will remain visible.
|
|
129
|
+
* The label of the action.
|
|
147
130
|
*/
|
|
148
|
-
|
|
131
|
+
label: string;
|
|
149
132
|
/**
|
|
150
|
-
*
|
|
133
|
+
* The function that will be executed when the user clicks on the action button.
|
|
151
134
|
*/
|
|
152
|
-
|
|
135
|
+
onClick: () => void;
|
|
136
|
+
};
|
|
137
|
+
type Message = {
|
|
153
138
|
/**
|
|
154
|
-
*
|
|
139
|
+
* The function that will be executed when the user clicks on the close action button.
|
|
155
140
|
*/
|
|
156
141
|
onClose?: () => void;
|
|
157
142
|
/**
|
|
158
|
-
* The
|
|
143
|
+
* The content of the message. The only Halstack component allowed within the text of an alert is the Link component,
|
|
144
|
+
* and it should be used exclusively to direct users to additional resources or relevant pages.
|
|
145
|
+
* No other components are permitted within the content of an alert.
|
|
159
146
|
*/
|
|
160
|
-
|
|
147
|
+
text: ReactNode;
|
|
148
|
+
};
|
|
149
|
+
type CommonProps$8 = {
|
|
161
150
|
/**
|
|
162
|
-
*
|
|
163
|
-
*
|
|
151
|
+
* If true, the alert will have a close button that will remove the message from the alert,
|
|
152
|
+
* only in banner and inline modes. The rest of the functionality will depend
|
|
153
|
+
* on the onClose event of each message (e.g. closing the modal alert).
|
|
164
154
|
*/
|
|
165
|
-
|
|
155
|
+
closable?: boolean;
|
|
166
156
|
/**
|
|
167
|
-
*
|
|
157
|
+
* Primary action of the alert.
|
|
168
158
|
*/
|
|
169
|
-
|
|
159
|
+
primaryAction?: Action$2;
|
|
170
160
|
/**
|
|
171
|
-
*
|
|
161
|
+
* Secondary action of the alert.
|
|
172
162
|
*/
|
|
173
|
-
|
|
163
|
+
secondaryAction?: Action$2;
|
|
164
|
+
/**
|
|
165
|
+
* Specifies the semantic meaning of the alert.
|
|
166
|
+
*/
|
|
167
|
+
semantic?: "error" | "info" | "success" | "warning";
|
|
168
|
+
/**
|
|
169
|
+
* Title of the alert.
|
|
170
|
+
*/
|
|
171
|
+
title: string;
|
|
172
|
+
};
|
|
173
|
+
type ModeSpecificProps = {
|
|
174
|
+
/**
|
|
175
|
+
* List of messages to be displayed. Each message has a close action that will,
|
|
176
|
+
* apart from remove from the alert the current message, call the onClose if it is defined.
|
|
177
|
+
* If the message is an array, the alert will show a navigation bar to move between the messages.
|
|
178
|
+
* The modal mode only allows one message per alert. In this case, the message must be an object
|
|
179
|
+
* and the presence of the onClose attribute is mandatory, since the management of the closing
|
|
180
|
+
* of the alert relies completely on the user.
|
|
181
|
+
*/
|
|
182
|
+
message?: Message | Message[];
|
|
183
|
+
/**
|
|
184
|
+
* The mode of the alert.
|
|
185
|
+
*/
|
|
186
|
+
mode?: "inline" | "banner";
|
|
187
|
+
} | {
|
|
188
|
+
/**
|
|
189
|
+
* List of messages to be displayed. Each message has a close action that will,
|
|
190
|
+
* apart from remove from the alert the current message, call the onClose if it is defined.
|
|
191
|
+
* If the message is an array, the alert will show a navigation bar to move between the messages.
|
|
192
|
+
* The modal mode only allows one message per alert. In this case, the message must be an object
|
|
193
|
+
* and the presence of the onClose attribute is mandatory, since the management of the closing
|
|
194
|
+
* of the alert relies completely on the user.
|
|
195
|
+
*/
|
|
196
|
+
message: Required<Message>;
|
|
197
|
+
/**
|
|
198
|
+
* The mode of the alert.
|
|
199
|
+
*/
|
|
200
|
+
mode: "modal";
|
|
174
201
|
};
|
|
202
|
+
type Props$I = CommonProps$8 & ModeSpecificProps;
|
|
175
203
|
|
|
176
|
-
declare
|
|
204
|
+
declare function DxcAlert({ closable, message, mode, primaryAction, secondaryAction, semantic, title, }: Props$I): react_jsx_runtime.JSX.Element;
|
|
177
205
|
|
|
178
|
-
type SVG$g = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
179
206
|
type SidenavTitlePropsType = {
|
|
180
207
|
/**
|
|
181
208
|
* The area inside the sidenav title. This area can be used to render custom content.
|
|
182
209
|
*/
|
|
183
|
-
children:
|
|
210
|
+
children: ReactNode;
|
|
184
211
|
};
|
|
185
212
|
type SidenavSectionPropsType = {
|
|
186
213
|
/**
|
|
187
214
|
* The area inside the sidenav section. This area can be used to render sidenav groups, links and custom content.
|
|
188
215
|
*/
|
|
189
|
-
children:
|
|
216
|
+
children: ReactNode;
|
|
190
217
|
};
|
|
191
218
|
type SidenavGroupPropsType = {
|
|
192
219
|
/**
|
|
@@ -201,11 +228,11 @@ type SidenavGroupPropsType = {
|
|
|
201
228
|
/**
|
|
202
229
|
* Material Symbol name or SVG icon to be displayed next to the title of the group.
|
|
203
230
|
*/
|
|
204
|
-
icon?: string | SVG
|
|
231
|
+
icon?: string | SVG;
|
|
205
232
|
/**
|
|
206
233
|
* The area inside the sidenav group. This area can be used to render sidenav links.
|
|
207
234
|
*/
|
|
208
|
-
children:
|
|
235
|
+
children: ReactNode;
|
|
209
236
|
};
|
|
210
237
|
type SidenavLinkPropsType = {
|
|
211
238
|
/**
|
|
@@ -219,7 +246,7 @@ type SidenavLinkPropsType = {
|
|
|
219
246
|
/**
|
|
220
247
|
* The Material symbol or SVG element used as the icon that will be placed to the left of the link text.
|
|
221
248
|
*/
|
|
222
|
-
icon?: string | SVG
|
|
249
|
+
icon?: string | SVG;
|
|
223
250
|
/**
|
|
224
251
|
* If true, the link will be marked as selected. Moreover, in that same case,
|
|
225
252
|
* if it is contained within a collapsed group, and consequently, the currently selected link is not visible,
|
|
@@ -229,99 +256,28 @@ type SidenavLinkPropsType = {
|
|
|
229
256
|
/**
|
|
230
257
|
* This function will be called when the user clicks the link and the event will be passed to this function.
|
|
231
258
|
*/
|
|
232
|
-
onClick?: (event:
|
|
259
|
+
onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
|
|
233
260
|
/**
|
|
234
261
|
* The area inside the sidenav link.
|
|
235
262
|
*/
|
|
236
|
-
children:
|
|
263
|
+
children: ReactNode;
|
|
237
264
|
/**
|
|
238
265
|
* Value of the tabindex.
|
|
239
266
|
*/
|
|
240
267
|
tabIndex?: number;
|
|
241
268
|
};
|
|
242
|
-
type Props$
|
|
269
|
+
type Props$H = {
|
|
243
270
|
/**
|
|
244
271
|
* The area assigned to render the sidenav title. It is highly recommended to use the sidenav title.
|
|
245
272
|
*/
|
|
246
|
-
title?:
|
|
273
|
+
title?: ReactNode;
|
|
247
274
|
/**
|
|
248
275
|
* The area inside the sidenav. This area can be used to render the content inside the sidenav.
|
|
249
276
|
*/
|
|
250
|
-
children:
|
|
277
|
+
children: ReactNode;
|
|
251
278
|
};
|
|
252
279
|
|
|
253
|
-
type Space$r = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
254
|
-
type SVG$f = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
255
|
-
type SocialLink = {
|
|
256
|
-
/**
|
|
257
|
-
* URL of the page the link goes to.
|
|
258
|
-
*/
|
|
259
|
-
href: string;
|
|
260
|
-
/**
|
|
261
|
-
* Material Symbol name or SVG element as the icon used for the link.
|
|
262
|
-
*/
|
|
263
|
-
logo: string | SVG$f;
|
|
264
|
-
/**
|
|
265
|
-
* Value for the HTML properties title and aria-label.
|
|
266
|
-
*/
|
|
267
|
-
title: string;
|
|
268
|
-
};
|
|
269
|
-
type BottomLink = {
|
|
270
|
-
/**
|
|
271
|
-
* URL of the page the link goes to.
|
|
272
|
-
*/
|
|
273
|
-
href: string;
|
|
274
|
-
/**
|
|
275
|
-
* Text for the link.
|
|
276
|
-
*/
|
|
277
|
-
text: string;
|
|
278
|
-
};
|
|
279
|
-
type FooterPropsType = {
|
|
280
|
-
/**
|
|
281
|
-
* An array of objects representing the links that will be rendered as
|
|
282
|
-
* icons at the top-right side of the footer.
|
|
283
|
-
*/
|
|
284
|
-
socialLinks?: SocialLink[];
|
|
285
|
-
/**
|
|
286
|
-
* An array of objects representing the links that will be rendered at
|
|
287
|
-
* the bottom part of the footer.
|
|
288
|
-
*/
|
|
289
|
-
bottomLinks?: BottomLink[];
|
|
290
|
-
/**
|
|
291
|
-
* The text that will be displayed as copyright disclaimer.
|
|
292
|
-
*/
|
|
293
|
-
copyright?: string;
|
|
294
|
-
/**
|
|
295
|
-
* The center section of the footer. Can be used to render custom
|
|
296
|
-
* content in this area.
|
|
297
|
-
*/
|
|
298
|
-
children?: React.ReactNode;
|
|
299
|
-
/**
|
|
300
|
-
* Size of the top margin to be applied to the footer.
|
|
301
|
-
*/
|
|
302
|
-
margin?: Space$r;
|
|
303
|
-
/**
|
|
304
|
-
* Value of the tabindex for all interactive elements, except those
|
|
305
|
-
* inside the custom area.
|
|
306
|
-
*/
|
|
307
|
-
tabIndex?: number;
|
|
308
|
-
/**
|
|
309
|
-
* Determines the visual style and layout
|
|
310
|
-
* - "default": The default mode with full content and styling.
|
|
311
|
-
* - "reduced": A reduced mode with minimal content and styling.
|
|
312
|
-
*/
|
|
313
|
-
mode?: "default" | "reduced";
|
|
314
|
-
};
|
|
315
|
-
|
|
316
|
-
type Space$q = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
317
|
-
type Margin$m = {
|
|
318
|
-
top?: Space$q;
|
|
319
|
-
bottom?: Space$q;
|
|
320
|
-
left?: Space$q;
|
|
321
|
-
right?: Space$q;
|
|
322
|
-
};
|
|
323
280
|
type Size$4 = "small" | "medium" | "large" | "fillParent" | "fitContent";
|
|
324
|
-
type SVG$e = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
325
281
|
type Option$1 = {
|
|
326
282
|
/**
|
|
327
283
|
* Option display value.
|
|
@@ -330,13 +286,13 @@ type Option$1 = {
|
|
|
330
286
|
/**
|
|
331
287
|
* Material Symbol name or SVG element as the icon that will be placed next to the label.
|
|
332
288
|
*/
|
|
333
|
-
icon?: string | SVG
|
|
289
|
+
icon?: string | SVG;
|
|
334
290
|
/**
|
|
335
291
|
* Option inner value.
|
|
336
292
|
*/
|
|
337
293
|
value: string;
|
|
338
294
|
};
|
|
339
|
-
type Props$
|
|
295
|
+
type Props$G = {
|
|
340
296
|
/**
|
|
341
297
|
* An array of objects representing the options.
|
|
342
298
|
*/
|
|
@@ -349,7 +305,7 @@ type Props$H = {
|
|
|
349
305
|
/**
|
|
350
306
|
* Material Symbol name or SVG element as the icon that will be placed next to the label.
|
|
351
307
|
*/
|
|
352
|
-
icon?: string | SVG
|
|
308
|
+
icon?: string | SVG;
|
|
353
309
|
/**
|
|
354
310
|
* Whether the icon should appear after or before the label.
|
|
355
311
|
*/
|
|
@@ -380,7 +336,7 @@ type Props$H = {
|
|
|
380
336
|
* You can pass an object with 'top', 'bottom', 'left' and 'right'
|
|
381
337
|
* properties in order to specify different margin sizes.
|
|
382
338
|
*/
|
|
383
|
-
margin?: Space$
|
|
339
|
+
margin?: Space$1 | Margin;
|
|
384
340
|
/**
|
|
385
341
|
* Size of the component.
|
|
386
342
|
*/
|
|
@@ -389,10 +345,14 @@ type Props$H = {
|
|
|
389
345
|
* Value of the tabindex attribute.
|
|
390
346
|
*/
|
|
391
347
|
tabIndex?: number;
|
|
348
|
+
/**
|
|
349
|
+
* Text representing advisory information related to the dropdown's trigger action.
|
|
350
|
+
* Under the hood, this prop also serves as an accessible label for the component.
|
|
351
|
+
*/
|
|
352
|
+
title?: string;
|
|
392
353
|
};
|
|
393
354
|
|
|
394
|
-
type
|
|
395
|
-
type Props$G = {
|
|
355
|
+
type Props$F = {
|
|
396
356
|
/**
|
|
397
357
|
* Whether a contrast line should appear at the bottom of the header.
|
|
398
358
|
*/
|
|
@@ -402,12 +362,12 @@ type Props$G = {
|
|
|
402
362
|
* for the first child in the content, so we recommend the use of React.Fragment
|
|
403
363
|
* to be applied correctly. Otherwise, the styles can be modified.
|
|
404
364
|
*/
|
|
405
|
-
content?:
|
|
365
|
+
content?: ReactNode;
|
|
406
366
|
/**
|
|
407
367
|
* Content shown in responsive version. It receives the close menu handler that can
|
|
408
368
|
* be used to add that functionality when a element is clicked.
|
|
409
369
|
*/
|
|
410
|
-
responsiveContent?: (closeHandler: () => void) =>
|
|
370
|
+
responsiveContent?: (closeHandler: () => void) => ReactNode;
|
|
411
371
|
/**
|
|
412
372
|
* This function will be called when the user clicks the header logo.
|
|
413
373
|
*/
|
|
@@ -415,7 +375,7 @@ type Props$G = {
|
|
|
415
375
|
/**
|
|
416
376
|
* Size of the bottom margin to be applied to the header.
|
|
417
377
|
*/
|
|
418
|
-
margin?: Space$
|
|
378
|
+
margin?: Space$1;
|
|
419
379
|
/**
|
|
420
380
|
* Value of the tabindex for all interactive elements, except those inside the
|
|
421
381
|
* custom area.
|
|
@@ -423,13 +383,74 @@ type Props$G = {
|
|
|
423
383
|
tabIndex?: number;
|
|
424
384
|
};
|
|
425
385
|
|
|
386
|
+
type SocialLink = {
|
|
387
|
+
/**
|
|
388
|
+
* URL of the page the link goes to.
|
|
389
|
+
*/
|
|
390
|
+
href: string;
|
|
391
|
+
/**
|
|
392
|
+
* Material Symbol name or SVG element as the icon used for the link.
|
|
393
|
+
*/
|
|
394
|
+
logo: string | SVG;
|
|
395
|
+
/**
|
|
396
|
+
* Value for the HTML properties title and aria-label.
|
|
397
|
+
*/
|
|
398
|
+
title: string;
|
|
399
|
+
};
|
|
400
|
+
type BottomLink = {
|
|
401
|
+
/**
|
|
402
|
+
* URL of the page the link goes to.
|
|
403
|
+
*/
|
|
404
|
+
href: string;
|
|
405
|
+
/**
|
|
406
|
+
* Text for the link.
|
|
407
|
+
*/
|
|
408
|
+
text: string;
|
|
409
|
+
};
|
|
410
|
+
type FooterPropsType = {
|
|
411
|
+
/**
|
|
412
|
+
* An array of objects representing the links that will be rendered as
|
|
413
|
+
* icons at the top-right side of the footer.
|
|
414
|
+
*/
|
|
415
|
+
socialLinks?: SocialLink[];
|
|
416
|
+
/**
|
|
417
|
+
* An array of objects representing the links that will be rendered at
|
|
418
|
+
* the bottom part of the footer.
|
|
419
|
+
*/
|
|
420
|
+
bottomLinks?: BottomLink[];
|
|
421
|
+
/**
|
|
422
|
+
* The text that will be displayed as copyright disclaimer.
|
|
423
|
+
*/
|
|
424
|
+
copyright?: string;
|
|
425
|
+
/**
|
|
426
|
+
* The center section of the footer. Can be used to render custom
|
|
427
|
+
* content in this area.
|
|
428
|
+
*/
|
|
429
|
+
children?: ReactNode;
|
|
430
|
+
/**
|
|
431
|
+
* Size of the top margin to be applied to the footer.
|
|
432
|
+
*/
|
|
433
|
+
margin?: Space$1;
|
|
434
|
+
/**
|
|
435
|
+
* Value of the tabindex for all interactive elements, except those
|
|
436
|
+
* inside the custom area.
|
|
437
|
+
*/
|
|
438
|
+
tabIndex?: number;
|
|
439
|
+
/**
|
|
440
|
+
* Determines the visual style and layout
|
|
441
|
+
* - "default": The default mode with full content and styling.
|
|
442
|
+
* - "reduced": A reduced mode with minimal content and styling.
|
|
443
|
+
*/
|
|
444
|
+
mode?: "default" | "reduced";
|
|
445
|
+
};
|
|
446
|
+
|
|
426
447
|
type AppLayoutMainPropsType = {
|
|
427
448
|
/**
|
|
428
449
|
* Everything between the tags will be displayed as the content of the main part of the application.
|
|
429
450
|
*/
|
|
430
|
-
children:
|
|
451
|
+
children: ReactNode;
|
|
431
452
|
};
|
|
432
|
-
type
|
|
453
|
+
type ApplicationLayoutPropsType = {
|
|
433
454
|
/**
|
|
434
455
|
* Text to be placed next to the hamburger button that toggles the
|
|
435
456
|
* visibility of the sidenav.
|
|
@@ -438,40 +459,39 @@ type AppLayoutPropsType = {
|
|
|
438
459
|
/**
|
|
439
460
|
* Header content.
|
|
440
461
|
*/
|
|
441
|
-
header?:
|
|
462
|
+
header?: ReactNode;
|
|
442
463
|
/**
|
|
443
464
|
* Sidenav content
|
|
444
465
|
*/
|
|
445
|
-
sidenav?:
|
|
466
|
+
sidenav?: ReactNode;
|
|
446
467
|
/**
|
|
447
468
|
* Footer content
|
|
448
469
|
*/
|
|
449
|
-
footer?:
|
|
470
|
+
footer?: ReactNode;
|
|
450
471
|
/**
|
|
451
472
|
* Use the DxcApplicationLayout.Main provided to render main content.
|
|
452
473
|
*/
|
|
453
|
-
children:
|
|
474
|
+
children: ReactElement<AppLayoutMainPropsType>;
|
|
454
475
|
};
|
|
455
476
|
|
|
456
477
|
declare const DxcApplicationLayout: {
|
|
457
|
-
({ visibilityToggleLabel, header, sidenav, footer, children, }:
|
|
478
|
+
({ visibilityToggleLabel, header, sidenav, footer, children, }: ApplicationLayoutPropsType): JSX.Element;
|
|
479
|
+
Footer: ({ socialLinks, bottomLinks, copyright, children, margin, tabIndex, mode, }: FooterPropsType) => JSX.Element;
|
|
458
480
|
Header: {
|
|
459
|
-
({ underlined, content, responsiveContent, onClick, margin, tabIndex, }: Props$
|
|
460
|
-
Dropdown: (props: react.ComponentProps<({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, }: Props$
|
|
481
|
+
({ underlined, content, responsiveContent, onClick, margin, tabIndex, }: Props$F): JSX.Element;
|
|
482
|
+
Dropdown: (props: react.ComponentProps<({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$G) => JSX.Element>) => react_jsx_runtime.JSX.Element;
|
|
461
483
|
};
|
|
462
484
|
Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
|
|
463
|
-
Footer: ({ socialLinks, bottomLinks, copyright, children, margin, tabIndex, mode, }: FooterPropsType) => JSX.Element;
|
|
464
485
|
SideNav: {
|
|
465
|
-
({ title, children }: Props$
|
|
486
|
+
({ title, children }: Props$H): JSX.Element;
|
|
466
487
|
Section: ({ children }: SidenavSectionPropsType) => JSX.Element;
|
|
467
488
|
Group: ({ title, collapsable, icon, children }: SidenavGroupPropsType) => JSX.Element;
|
|
468
489
|
Link: react.ForwardRefExoticComponent<SidenavLinkPropsType & react.RefAttributes<HTMLAnchorElement>>;
|
|
469
490
|
Title: ({ children }: SidenavTitlePropsType) => JSX.Element;
|
|
470
491
|
};
|
|
471
|
-
useResponsiveSidenavVisibility: () => (
|
|
492
|
+
useResponsiveSidenavVisibility: () => ((_isSidenavVisible: boolean) => void) | null;
|
|
472
493
|
};
|
|
473
494
|
|
|
474
|
-
type SVG$d = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
475
495
|
type ContextualProps = {
|
|
476
496
|
/**
|
|
477
497
|
* Text to be placed in the badge.
|
|
@@ -508,7 +528,7 @@ type NotificationProps = {
|
|
|
508
528
|
*/
|
|
509
529
|
color?: never;
|
|
510
530
|
};
|
|
511
|
-
type CommonProps$
|
|
531
|
+
type CommonProps$7 = {
|
|
512
532
|
/**
|
|
513
533
|
* Text representing advisory information related to the badge. Under the hood, this prop also serves as an accessible label for the component.
|
|
514
534
|
*/
|
|
@@ -516,89 +536,144 @@ type CommonProps$6 = {
|
|
|
516
536
|
/**
|
|
517
537
|
* Material Symbol name or SVG element used as the icon that will be placed next to the badge label in contextual mode.
|
|
518
538
|
*/
|
|
519
|
-
icon?: string | SVG
|
|
539
|
+
icon?: string | SVG;
|
|
520
540
|
/**
|
|
521
541
|
* Size of the component.
|
|
522
542
|
*/
|
|
523
543
|
size?: "small" | "medium" | "large";
|
|
524
544
|
};
|
|
525
|
-
type Props$
|
|
545
|
+
type Props$E = (ContextualProps | NotificationProps) & CommonProps$7;
|
|
526
546
|
|
|
527
|
-
declare const DxcBadge: ({ label, title, mode, color, icon, notificationLimit, size, }: Props$
|
|
547
|
+
declare const DxcBadge: ({ label, title, mode, color, icon, notificationLimit, size, }: Props$E) => JSX.Element;
|
|
528
548
|
|
|
529
|
-
|
|
530
|
-
|
|
549
|
+
/**
|
|
550
|
+
* Halstack Color Palette
|
|
551
|
+
* @link https://developer.dxc.com/halstack/next/principles/color/#color-tokens-core-color-tokens
|
|
552
|
+
*/
|
|
553
|
+
declare const CoreColorTokens: {
|
|
554
|
+
color_black: string;
|
|
555
|
+
color_white: string;
|
|
556
|
+
color_transparent: string;
|
|
557
|
+
color_grey_50: string;
|
|
558
|
+
color_grey_100: string;
|
|
559
|
+
color_grey_200: string;
|
|
560
|
+
color_grey_300: string;
|
|
561
|
+
color_grey_400: string;
|
|
562
|
+
color_grey_500: string;
|
|
563
|
+
color_grey_600: string;
|
|
564
|
+
color_grey_700: string;
|
|
565
|
+
color_grey_800: string;
|
|
566
|
+
color_grey_900: string;
|
|
567
|
+
color_grey_50_a: string;
|
|
568
|
+
color_grey_100_a: string;
|
|
569
|
+
color_grey_200_a: string;
|
|
570
|
+
color_grey_300_a: string;
|
|
571
|
+
color_grey_400_a: string;
|
|
572
|
+
color_grey_500_a: string;
|
|
573
|
+
color_grey_600_a: string;
|
|
574
|
+
color_grey_700_a: string;
|
|
575
|
+
color_grey_800_a: string;
|
|
576
|
+
color_grey_900_a: string;
|
|
577
|
+
color_purple_50: string;
|
|
578
|
+
color_purple_100: string;
|
|
579
|
+
color_purple_200: string;
|
|
580
|
+
color_purple_300: string;
|
|
581
|
+
color_purple_400: string;
|
|
582
|
+
color_purple_500: string;
|
|
583
|
+
color_purple_600: string;
|
|
584
|
+
color_purple_700: string;
|
|
585
|
+
color_purple_800: string;
|
|
586
|
+
color_purple_900: string;
|
|
587
|
+
color_blue_50: string;
|
|
588
|
+
color_blue_100: string;
|
|
589
|
+
color_blue_200: string;
|
|
590
|
+
color_blue_300: string;
|
|
591
|
+
color_blue_400: string;
|
|
592
|
+
color_blue_500: string;
|
|
593
|
+
color_blue_600: string;
|
|
594
|
+
color_blue_700: string;
|
|
595
|
+
color_blue_800: string;
|
|
596
|
+
color_blue_900: string;
|
|
597
|
+
color_red_50: string;
|
|
598
|
+
color_red_100: string;
|
|
599
|
+
color_red_200: string;
|
|
600
|
+
color_red_300: string;
|
|
601
|
+
color_red_400: string;
|
|
602
|
+
color_red_500: string;
|
|
603
|
+
color_red_600: string;
|
|
604
|
+
color_red_700: string;
|
|
605
|
+
color_red_800: string;
|
|
606
|
+
color_red_900: string;
|
|
607
|
+
color_green_50: string;
|
|
608
|
+
color_green_100: string;
|
|
609
|
+
color_green_200: string;
|
|
610
|
+
color_green_300: string;
|
|
611
|
+
color_green_400: string;
|
|
612
|
+
color_green_500: string;
|
|
613
|
+
color_green_600: string;
|
|
614
|
+
color_green_700: string;
|
|
615
|
+
color_green_800: string;
|
|
616
|
+
color_green_900: string;
|
|
617
|
+
color_yellow_50: string;
|
|
618
|
+
color_yellow_100: string;
|
|
619
|
+
color_yellow_200: string;
|
|
620
|
+
color_yellow_300: string;
|
|
621
|
+
color_yellow_400: string;
|
|
622
|
+
color_yellow_500: string;
|
|
623
|
+
color_yellow_600: string;
|
|
624
|
+
color_yellow_700: string;
|
|
625
|
+
color_yellow_800: string;
|
|
626
|
+
color_yellow_900: string;
|
|
627
|
+
color_orange_50: string;
|
|
628
|
+
color_orange_100: string;
|
|
629
|
+
color_orange_200: string;
|
|
630
|
+
color_orange_300: string;
|
|
631
|
+
color_orange_400: string;
|
|
632
|
+
color_orange_500: string;
|
|
633
|
+
color_orange_600: string;
|
|
634
|
+
color_orange_700: string;
|
|
635
|
+
color_orange_800: string;
|
|
636
|
+
color_orange_900: string;
|
|
637
|
+
};
|
|
638
|
+
type CoreColorTokensType = keyof typeof CoreColorTokens;
|
|
639
|
+
type CoreSpacingTokensType = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "0.75rem" | "1rem" | "1.5rem" | "2rem" | "2.5rem" | "3rem" | "3.5rem" | "4rem" | "5rem" | "6rem" | "7rem";
|
|
640
|
+
|
|
641
|
+
type Props$D = {
|
|
531
642
|
/**
|
|
532
643
|
* Applies the spacing scale to all sides.
|
|
533
644
|
*/
|
|
534
|
-
space?:
|
|
645
|
+
space?: CoreSpacingTokensType;
|
|
535
646
|
/**
|
|
536
647
|
* Applies the spacing scale to the left and right sides.
|
|
537
648
|
*/
|
|
538
|
-
horizontal?:
|
|
649
|
+
horizontal?: CoreSpacingTokensType;
|
|
539
650
|
/**
|
|
540
651
|
* Applies the spacing scale to the top and bottom sides.
|
|
541
652
|
*/
|
|
542
|
-
vertical?:
|
|
653
|
+
vertical?: CoreSpacingTokensType;
|
|
543
654
|
/**
|
|
544
655
|
* Applies the spacing scale to the top side.
|
|
545
656
|
*/
|
|
546
|
-
top?:
|
|
657
|
+
top?: CoreSpacingTokensType;
|
|
547
658
|
/**
|
|
548
659
|
* Applies the spacing scale to the right side.
|
|
549
660
|
*/
|
|
550
|
-
right?:
|
|
661
|
+
right?: CoreSpacingTokensType;
|
|
551
662
|
/**
|
|
552
663
|
* Applies the spacing scale to the bottom side.
|
|
553
664
|
*/
|
|
554
|
-
bottom?:
|
|
665
|
+
bottom?: CoreSpacingTokensType;
|
|
555
666
|
/**
|
|
556
667
|
* Applies the spacing scale to the left side.
|
|
557
668
|
*/
|
|
558
|
-
left?:
|
|
669
|
+
left?: CoreSpacingTokensType;
|
|
559
670
|
/**
|
|
560
671
|
* Custom content inside the bleed.
|
|
561
672
|
*/
|
|
562
|
-
children:
|
|
673
|
+
children: ReactNode;
|
|
563
674
|
};
|
|
564
675
|
|
|
565
|
-
declare
|
|
566
|
-
|
|
567
|
-
type Space$o = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
568
|
-
type Margin$l = {
|
|
569
|
-
top?: Space$o;
|
|
570
|
-
bottom?: Space$o;
|
|
571
|
-
left?: Space$o;
|
|
572
|
-
right?: Space$o;
|
|
573
|
-
};
|
|
574
|
-
type Props$D = {
|
|
575
|
-
/**
|
|
576
|
-
* The size of the shadow to be displayed around the box.
|
|
577
|
-
*/
|
|
578
|
-
shadowDepth?: 0 | 1 | 2;
|
|
579
|
-
/**
|
|
580
|
-
* Changes the display CSS property of the box div.
|
|
581
|
-
*/
|
|
582
|
-
display?: string;
|
|
583
|
-
/**
|
|
584
|
-
* Custom content that will be placed in the box component.
|
|
585
|
-
*/
|
|
586
|
-
children: React.ReactNode;
|
|
587
|
-
/**
|
|
588
|
-
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
589
|
-
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
590
|
-
*/
|
|
591
|
-
margin?: Space$o | Margin$l;
|
|
592
|
-
/**
|
|
593
|
-
* Size of the component.
|
|
594
|
-
*/
|
|
595
|
-
size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
|
|
596
|
-
};
|
|
597
|
-
|
|
598
|
-
/**
|
|
599
|
-
* @deprecated
|
|
600
|
-
*/
|
|
601
|
-
declare const DxcBox: ({ shadowDepth, display, children, margin, size, }: Props$D) => JSX.Element;
|
|
676
|
+
declare const Bleed: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$D) => react_jsx_runtime.JSX.Element;
|
|
602
677
|
|
|
603
678
|
type Item$1 = {
|
|
604
679
|
href?: string;
|
|
@@ -638,7 +713,6 @@ type Props$C = {
|
|
|
638
713
|
|
|
639
714
|
declare const DxcBreadcrumbs: ({ ariaLabel, items, itemsBeforeCollapse, onItemClick, showRoot, }: Props$C) => react_jsx_runtime.JSX.Element;
|
|
640
715
|
|
|
641
|
-
type SVG$c = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
642
716
|
type IconProps = {
|
|
643
717
|
/**
|
|
644
718
|
* Defines the style of the bullet point in the list.
|
|
@@ -647,11 +721,11 @@ type IconProps = {
|
|
|
647
721
|
/**
|
|
648
722
|
* Icon to display as bullet.
|
|
649
723
|
*/
|
|
650
|
-
icon: string | SVG
|
|
724
|
+
icon: string | SVG;
|
|
651
725
|
/**
|
|
652
726
|
* Text to be shown in the list.
|
|
653
727
|
*/
|
|
654
|
-
children:
|
|
728
|
+
children: ReactNode;
|
|
655
729
|
};
|
|
656
730
|
type OtherProps = {
|
|
657
731
|
/**
|
|
@@ -665,7 +739,7 @@ type OtherProps = {
|
|
|
665
739
|
/**
|
|
666
740
|
* Text to be shown in the list.
|
|
667
741
|
*/
|
|
668
|
-
children:
|
|
742
|
+
children: ReactNode;
|
|
669
743
|
};
|
|
670
744
|
type Props$B = IconProps | OtherProps;
|
|
671
745
|
|
|
@@ -673,7 +747,7 @@ type BulletedListItemPropsType = {
|
|
|
673
747
|
/**
|
|
674
748
|
* Text to be shown in the list.
|
|
675
749
|
*/
|
|
676
|
-
children?:
|
|
750
|
+
children?: ReactNode;
|
|
677
751
|
};
|
|
678
752
|
|
|
679
753
|
declare const DxcBulletedList: {
|
|
@@ -681,14 +755,6 @@ declare const DxcBulletedList: {
|
|
|
681
755
|
Item: ({ children }: BulletedListItemPropsType) => JSX.Element;
|
|
682
756
|
};
|
|
683
757
|
|
|
684
|
-
type Space$n = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
685
|
-
type Margin$k = {
|
|
686
|
-
top?: Space$n;
|
|
687
|
-
bottom?: Space$n;
|
|
688
|
-
left?: Space$n;
|
|
689
|
-
right?: Space$n;
|
|
690
|
-
};
|
|
691
|
-
type SVG$b = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
692
758
|
type Size$3 = {
|
|
693
759
|
/**
|
|
694
760
|
* Height of the component.
|
|
@@ -728,7 +794,7 @@ type Props$A = {
|
|
|
728
794
|
/**
|
|
729
795
|
* Material Symbol name or SVG element as the icon that will be placed next to the label.
|
|
730
796
|
*/
|
|
731
|
-
icon?: string | SVG
|
|
797
|
+
icon?: string | SVG;
|
|
732
798
|
/**
|
|
733
799
|
* This function will be called when the user clicks the button.
|
|
734
800
|
*/
|
|
@@ -737,7 +803,7 @@ type Props$A = {
|
|
|
737
803
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
738
804
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
739
805
|
*/
|
|
740
|
-
margin?: Space$
|
|
806
|
+
margin?: Space$1 | Margin;
|
|
741
807
|
/**
|
|
742
808
|
* Size of the component.
|
|
743
809
|
*/
|
|
@@ -750,12 +816,11 @@ type Props$A = {
|
|
|
750
816
|
|
|
751
817
|
declare const DxcButton: ({ label, mode, semantic, disabled, iconPosition, title, type, icon, onClick, margin, size, tabIndex, }: Props$A) => JSX.Element;
|
|
752
818
|
|
|
753
|
-
type Space$m = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
754
819
|
type Size$2 = {
|
|
755
|
-
top?: Space$
|
|
756
|
-
bottom?: Space$
|
|
757
|
-
left?: Space$
|
|
758
|
-
right?: Space$
|
|
820
|
+
top?: Space$1;
|
|
821
|
+
bottom?: Space$1;
|
|
822
|
+
left?: Space$1;
|
|
823
|
+
right?: Space$1;
|
|
759
824
|
};
|
|
760
825
|
type Props$z = {
|
|
761
826
|
/**
|
|
@@ -773,7 +838,7 @@ type Props$z = {
|
|
|
773
838
|
* component. You can pass an object with 'top', 'bottom', 'left'
|
|
774
839
|
* and 'right' properties in order to specify different padding sizes.
|
|
775
840
|
*/
|
|
776
|
-
imagePadding?: Space$
|
|
841
|
+
imagePadding?: Space$1 | Size$2;
|
|
777
842
|
/**
|
|
778
843
|
* Whether the image should appear in relation to the content.
|
|
779
844
|
*/
|
|
@@ -796,7 +861,7 @@ type Props$z = {
|
|
|
796
861
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
797
862
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
798
863
|
*/
|
|
799
|
-
margin?: Space$
|
|
864
|
+
margin?: Space$1 | Size$2;
|
|
800
865
|
/**
|
|
801
866
|
* Value of the tabindex attribute applied when the component is clickable.
|
|
802
867
|
*/
|
|
@@ -808,18 +873,11 @@ type Props$z = {
|
|
|
808
873
|
/**
|
|
809
874
|
* Custom content that will be placed inside the component.
|
|
810
875
|
*/
|
|
811
|
-
children?:
|
|
876
|
+
children?: ReactNode;
|
|
812
877
|
};
|
|
813
878
|
|
|
814
879
|
declare const DxcCard: ({ imageSrc, imageBgColor, imagePadding, imagePosition, linkHref, onClick, imageCover, margin, tabIndex, outlined, children, }: Props$z) => JSX.Element;
|
|
815
880
|
|
|
816
|
-
type Space$l = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
817
|
-
type Margin$j = {
|
|
818
|
-
top?: Space$l;
|
|
819
|
-
bottom?: Space$l;
|
|
820
|
-
left?: Space$l;
|
|
821
|
-
right?: Space$l;
|
|
822
|
-
};
|
|
823
881
|
type Props$y = {
|
|
824
882
|
/**
|
|
825
883
|
* Initial state of the checkbox, only when it is uncontrolled.
|
|
@@ -870,7 +928,7 @@ type Props$y = {
|
|
|
870
928
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties
|
|
871
929
|
* in order to specify different margin sizes.
|
|
872
930
|
*/
|
|
873
|
-
margin?: Space$
|
|
931
|
+
margin?: Space$1 | Margin;
|
|
874
932
|
/**
|
|
875
933
|
* Size of the component.
|
|
876
934
|
*/
|
|
@@ -879,18 +937,14 @@ type Props$y = {
|
|
|
879
937
|
* Value of the tabindex.
|
|
880
938
|
*/
|
|
881
939
|
tabIndex?: number;
|
|
940
|
+
/**
|
|
941
|
+
* Specifies a string to be used as the name for the checkbox element when no `label` is provided.
|
|
942
|
+
*/
|
|
943
|
+
ariaLabel?: string;
|
|
882
944
|
};
|
|
883
945
|
|
|
884
946
|
declare const DxcCheckbox: react.ForwardRefExoticComponent<Props$y & react.RefAttributes<HTMLDivElement>>;
|
|
885
947
|
|
|
886
|
-
type Space$k = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
887
|
-
type Margin$i = {
|
|
888
|
-
top?: Space$k;
|
|
889
|
-
bottom?: Space$k;
|
|
890
|
-
left?: Space$k;
|
|
891
|
-
right?: Space$k;
|
|
892
|
-
};
|
|
893
|
-
type SVG$a = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
894
948
|
type Props$x = {
|
|
895
949
|
/**
|
|
896
950
|
* Text to be placed on the chip.
|
|
@@ -899,133 +953,41 @@ type Props$x = {
|
|
|
899
953
|
/**
|
|
900
954
|
* Element or path used as icon to be placed after the chip label.
|
|
901
955
|
*/
|
|
902
|
-
suffixIcon?: string | SVG
|
|
903
|
-
/**
|
|
904
|
-
* Element or path used as icon to be placed before the chip label.
|
|
905
|
-
*/
|
|
906
|
-
prefixIcon?: string | SVG
|
|
907
|
-
/**
|
|
908
|
-
* This function will be called when the suffix is clicked.
|
|
909
|
-
*/
|
|
910
|
-
onClickSuffix?: () => void;
|
|
911
|
-
/**
|
|
912
|
-
* This function will be called when the prefix is clicked.
|
|
913
|
-
*/
|
|
914
|
-
onClickPrefix?: () => void;
|
|
915
|
-
/**
|
|
916
|
-
* If true, the component will be disabled.
|
|
917
|
-
*/
|
|
918
|
-
disabled?: boolean;
|
|
919
|
-
/**
|
|
920
|
-
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
921
|
-
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
922
|
-
*/
|
|
923
|
-
margin?: Space$
|
|
924
|
-
/**
|
|
925
|
-
* Value of the tabindex attribute.
|
|
926
|
-
*/
|
|
927
|
-
tabIndex?: number;
|
|
928
|
-
};
|
|
929
|
-
|
|
930
|
-
declare const DxcChip: ({ label, suffixIcon, prefixIcon, onClickSuffix, onClickPrefix, disabled, margin, tabIndex, }: Props$x) => JSX.Element;
|
|
931
|
-
|
|
932
|
-
/**
|
|
933
|
-
* Halstack Color Palette
|
|
934
|
-
* @link https://developer.dxc.com/halstack/next/principles/color/#color-tokens-core-color-tokens
|
|
935
|
-
*/
|
|
936
|
-
declare const CoreColorTokens: {
|
|
937
|
-
color_black: string;
|
|
938
|
-
color_white: string;
|
|
939
|
-
color_transparent: string;
|
|
940
|
-
color_grey_50: string;
|
|
941
|
-
color_grey_100: string;
|
|
942
|
-
color_grey_200: string;
|
|
943
|
-
color_grey_300: string;
|
|
944
|
-
color_grey_400: string;
|
|
945
|
-
color_grey_500: string;
|
|
946
|
-
color_grey_600: string;
|
|
947
|
-
color_grey_700: string;
|
|
948
|
-
color_grey_800: string;
|
|
949
|
-
color_grey_900: string;
|
|
950
|
-
color_grey_50_a: string;
|
|
951
|
-
color_grey_100_a: string;
|
|
952
|
-
color_grey_200_a: string;
|
|
953
|
-
color_grey_300_a: string;
|
|
954
|
-
color_grey_400_a: string;
|
|
955
|
-
color_grey_500_a: string;
|
|
956
|
-
color_grey_600_a: string;
|
|
957
|
-
color_grey_700_a: string;
|
|
958
|
-
color_grey_800_a: string;
|
|
959
|
-
color_grey_900_a: string;
|
|
960
|
-
color_purple_50: string;
|
|
961
|
-
color_purple_100: string;
|
|
962
|
-
color_purple_200: string;
|
|
963
|
-
color_purple_300: string;
|
|
964
|
-
color_purple_400: string;
|
|
965
|
-
color_purple_500: string;
|
|
966
|
-
color_purple_600: string;
|
|
967
|
-
color_purple_700: string;
|
|
968
|
-
color_purple_800: string;
|
|
969
|
-
color_purple_900: string;
|
|
970
|
-
color_blue_50: string;
|
|
971
|
-
color_blue_100: string;
|
|
972
|
-
color_blue_200: string;
|
|
973
|
-
color_blue_300: string;
|
|
974
|
-
color_blue_400: string;
|
|
975
|
-
color_blue_500: string;
|
|
976
|
-
color_blue_600: string;
|
|
977
|
-
color_blue_700: string;
|
|
978
|
-
color_blue_800: string;
|
|
979
|
-
color_blue_900: string;
|
|
980
|
-
color_red_50: string;
|
|
981
|
-
color_red_100: string;
|
|
982
|
-
color_red_200: string;
|
|
983
|
-
color_red_300: string;
|
|
984
|
-
color_red_400: string;
|
|
985
|
-
color_red_500: string;
|
|
986
|
-
color_red_600: string;
|
|
987
|
-
color_red_700: string;
|
|
988
|
-
color_red_800: string;
|
|
989
|
-
color_red_900: string;
|
|
990
|
-
color_green_50: string;
|
|
991
|
-
color_green_100: string;
|
|
992
|
-
color_green_200: string;
|
|
993
|
-
color_green_300: string;
|
|
994
|
-
color_green_400: string;
|
|
995
|
-
color_green_500: string;
|
|
996
|
-
color_green_600: string;
|
|
997
|
-
color_green_700: string;
|
|
998
|
-
color_green_800: string;
|
|
999
|
-
color_green_900: string;
|
|
1000
|
-
color_yellow_50: string;
|
|
1001
|
-
color_yellow_100: string;
|
|
1002
|
-
color_yellow_200: string;
|
|
1003
|
-
color_yellow_300: string;
|
|
1004
|
-
color_yellow_400: string;
|
|
1005
|
-
color_yellow_500: string;
|
|
1006
|
-
color_yellow_600: string;
|
|
1007
|
-
color_yellow_700: string;
|
|
1008
|
-
color_yellow_800: string;
|
|
1009
|
-
color_yellow_900: string;
|
|
1010
|
-
color_orange_50: string;
|
|
1011
|
-
color_orange_100: string;
|
|
1012
|
-
color_orange_200: string;
|
|
1013
|
-
color_orange_300: string;
|
|
1014
|
-
color_orange_400: string;
|
|
1015
|
-
color_orange_500: string;
|
|
1016
|
-
color_orange_600: string;
|
|
1017
|
-
color_orange_700: string;
|
|
1018
|
-
color_orange_800: string;
|
|
1019
|
-
color_orange_900: string;
|
|
956
|
+
suffixIcon?: string | SVG;
|
|
957
|
+
/**
|
|
958
|
+
* Element or path used as icon to be placed before the chip label.
|
|
959
|
+
*/
|
|
960
|
+
prefixIcon?: string | SVG;
|
|
961
|
+
/**
|
|
962
|
+
* This function will be called when the suffix is clicked.
|
|
963
|
+
*/
|
|
964
|
+
onClickSuffix?: () => void;
|
|
965
|
+
/**
|
|
966
|
+
* This function will be called when the prefix is clicked.
|
|
967
|
+
*/
|
|
968
|
+
onClickPrefix?: () => void;
|
|
969
|
+
/**
|
|
970
|
+
* If true, the component will be disabled.
|
|
971
|
+
*/
|
|
972
|
+
disabled?: boolean;
|
|
973
|
+
/**
|
|
974
|
+
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
975
|
+
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
976
|
+
*/
|
|
977
|
+
margin?: Space$1 | Margin;
|
|
978
|
+
/**
|
|
979
|
+
* Value of the tabindex attribute.
|
|
980
|
+
*/
|
|
981
|
+
tabIndex?: number;
|
|
1020
982
|
};
|
|
1021
|
-
type CoreColorTokensType = keyof typeof CoreColorTokens;
|
|
1022
983
|
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
984
|
+
declare const DxcChip: ({ label, suffixIcon, prefixIcon, onClickSuffix, onClickPrefix, disabled, margin, tabIndex, }: Props$x) => JSX.Element;
|
|
985
|
+
|
|
986
|
+
type Space = Space$1 | {
|
|
987
|
+
top?: Space$1;
|
|
988
|
+
right?: Space$1;
|
|
989
|
+
bottom?: Space$1;
|
|
990
|
+
left?: Space$1;
|
|
1029
991
|
};
|
|
1030
992
|
type Inset$1 = {
|
|
1031
993
|
top?: string;
|
|
@@ -1094,7 +1056,7 @@ type Props$w = {
|
|
|
1094
1056
|
/**
|
|
1095
1057
|
* Custom content inside the container.
|
|
1096
1058
|
*/
|
|
1097
|
-
children:
|
|
1059
|
+
children: ReactNode;
|
|
1098
1060
|
/**
|
|
1099
1061
|
* Sets the display CSS property.
|
|
1100
1062
|
* The set of values is limited to the ones related to the outer display type.
|
|
@@ -1126,7 +1088,7 @@ type Props$w = {
|
|
|
1126
1088
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties
|
|
1127
1089
|
* in order to specify different margin sizes.
|
|
1128
1090
|
*/
|
|
1129
|
-
margin?: Space
|
|
1091
|
+
margin?: Space;
|
|
1130
1092
|
/**
|
|
1131
1093
|
* Sets the max-height CSS property.
|
|
1132
1094
|
*
|
|
@@ -1167,7 +1129,7 @@ type Props$w = {
|
|
|
1167
1129
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties
|
|
1168
1130
|
* in order to specify different margin sizes.
|
|
1169
1131
|
*/
|
|
1170
|
-
padding?: Space
|
|
1132
|
+
padding?: Space;
|
|
1171
1133
|
/**
|
|
1172
1134
|
* Sets the position CSS property.
|
|
1173
1135
|
*
|
|
@@ -1188,12 +1150,11 @@ type Props$w = {
|
|
|
1188
1150
|
zIndex?: "auto" | number;
|
|
1189
1151
|
};
|
|
1190
1152
|
|
|
1191
|
-
declare
|
|
1153
|
+
declare function DxcContainer({ display, width, height, overflow, ...props }: Props$w): react_jsx_runtime.JSX.Element;
|
|
1192
1154
|
|
|
1193
|
-
type SVG$9 = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
1194
1155
|
type CommonItemProps = {
|
|
1195
|
-
badge?:
|
|
1196
|
-
icon?: string | SVG
|
|
1156
|
+
badge?: ReactElement;
|
|
1157
|
+
icon?: string | SVG;
|
|
1197
1158
|
label: string;
|
|
1198
1159
|
};
|
|
1199
1160
|
type Item = CommonItemProps & {
|
|
@@ -1215,42 +1176,134 @@ type Props$v = {
|
|
|
1215
1176
|
items: (Item | GroupItem)[] | Section[];
|
|
1216
1177
|
};
|
|
1217
1178
|
|
|
1218
|
-
declare
|
|
1179
|
+
declare function DxcContextualMenu({ items }: Props$v): react_jsx_runtime.JSX.Element;
|
|
1180
|
+
|
|
1181
|
+
type ActionCellsPropsType = {
|
|
1182
|
+
actions: ActionsPropsType;
|
|
1183
|
+
};
|
|
1184
|
+
type ActionsPropsType = Array<{
|
|
1185
|
+
icon: string | SVG;
|
|
1186
|
+
title: string;
|
|
1187
|
+
onClick: () => void;
|
|
1188
|
+
disabled?: boolean;
|
|
1189
|
+
tabIndex?: number;
|
|
1190
|
+
options?: never;
|
|
1191
|
+
} | {
|
|
1192
|
+
icon?: never;
|
|
1193
|
+
title: string;
|
|
1194
|
+
onClick: (value?: string) => void;
|
|
1195
|
+
disabled?: boolean;
|
|
1196
|
+
tabIndex?: number;
|
|
1197
|
+
options: Option$1[];
|
|
1198
|
+
}>;
|
|
1199
|
+
type Props$u = {
|
|
1200
|
+
/**
|
|
1201
|
+
* The center section of the table. Can be used to render custom
|
|
1202
|
+
* content in this area.
|
|
1203
|
+
*/
|
|
1204
|
+
children: ReactNode;
|
|
1205
|
+
/**
|
|
1206
|
+
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
1207
|
+
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
1208
|
+
*/
|
|
1209
|
+
margin?: Space$1 | Margin;
|
|
1210
|
+
/**
|
|
1211
|
+
* Determines the visual style and layout
|
|
1212
|
+
* - "default": Default table size.
|
|
1213
|
+
* - "reduced": More compact table with less spacing for high density information.
|
|
1214
|
+
*/
|
|
1215
|
+
mode?: "default" | "reduced";
|
|
1216
|
+
};
|
|
1219
1217
|
|
|
1220
1218
|
type GridColumn = {
|
|
1219
|
+
/**
|
|
1220
|
+
* Key that will be rendered from each row in rows.
|
|
1221
|
+
*/
|
|
1221
1222
|
key: string;
|
|
1223
|
+
/**
|
|
1224
|
+
* Label that will be used for the column header.
|
|
1225
|
+
*/
|
|
1222
1226
|
label: string;
|
|
1227
|
+
/**
|
|
1228
|
+
* Whether the column is resizable or not.
|
|
1229
|
+
*/
|
|
1223
1230
|
resizable?: boolean;
|
|
1231
|
+
/**
|
|
1232
|
+
* Whether the column is sortable or not.
|
|
1233
|
+
*/
|
|
1224
1234
|
sortable?: boolean;
|
|
1235
|
+
/**
|
|
1236
|
+
* Custom criteria for sorting the column.
|
|
1237
|
+
*/
|
|
1238
|
+
sortFn?: (_a: ReactNode, _b: ReactNode) => 0 | 1 | -1;
|
|
1239
|
+
/**
|
|
1240
|
+
* Whether the column is draggable or not.
|
|
1241
|
+
*/
|
|
1225
1242
|
draggable?: boolean;
|
|
1243
|
+
/**
|
|
1244
|
+
* Whether the column cells are editable or not.
|
|
1245
|
+
*/
|
|
1226
1246
|
textEditable?: boolean;
|
|
1247
|
+
/**
|
|
1248
|
+
* Value that will be rendered from the summaryRow.
|
|
1249
|
+
*/
|
|
1227
1250
|
summaryKey?: string;
|
|
1251
|
+
/**
|
|
1252
|
+
* Sets the alignment inside the cells.
|
|
1253
|
+
*/
|
|
1228
1254
|
alignment?: "left" | "right" | "center";
|
|
1229
1255
|
};
|
|
1230
1256
|
type GridRow = {
|
|
1231
|
-
|
|
1257
|
+
/**
|
|
1258
|
+
* List of rows that will be rendered in each cell based on the key in each column.
|
|
1259
|
+
*/
|
|
1260
|
+
[key: string]: ReactNode | undefined;
|
|
1232
1261
|
};
|
|
1233
1262
|
type HierarchyGridRow = GridRow & {
|
|
1234
1263
|
childRows?: HierarchyGridRow[] | GridRow[];
|
|
1235
1264
|
};
|
|
1236
1265
|
type ExpandableGridRow = GridRow & {
|
|
1237
|
-
expandedContent?:
|
|
1266
|
+
expandedContent?: ReactNode;
|
|
1238
1267
|
expandedContentHeight?: number;
|
|
1239
1268
|
};
|
|
1240
1269
|
type ExpandableRows = {
|
|
1241
1270
|
rows: ExpandableGridRow[];
|
|
1271
|
+
/**
|
|
1272
|
+
* Whether the rows can expand or not.
|
|
1273
|
+
*/
|
|
1242
1274
|
expandable: true;
|
|
1275
|
+
/**
|
|
1276
|
+
* This prop indicates the unique key that can be used to identify each row. This prop is mandatory if selectable is set to true, expandable is set to true or rows is of type HierarchyGridRow[].
|
|
1277
|
+
*/
|
|
1243
1278
|
uniqueRowId: string;
|
|
1244
1279
|
};
|
|
1245
1280
|
type HierarchyRows = {
|
|
1246
1281
|
rows: HierarchyGridRow[];
|
|
1282
|
+
/**
|
|
1283
|
+
* This prop indicates the unique key that can be used to identify each row. This prop is mandatory if selectable is set to true, expandable is set to true or rows is of type HierarchyGridRow[].
|
|
1284
|
+
*/
|
|
1247
1285
|
uniqueRowId: string;
|
|
1286
|
+
/**
|
|
1287
|
+
* Whether the rows can expand or not.
|
|
1288
|
+
*/
|
|
1248
1289
|
expandable?: false;
|
|
1249
1290
|
};
|
|
1250
1291
|
type SelectableGridProps = {
|
|
1292
|
+
/**
|
|
1293
|
+
* Whether the rows are selectable or not.
|
|
1294
|
+
*/
|
|
1251
1295
|
selectable: true;
|
|
1296
|
+
/**
|
|
1297
|
+
* Set of selected rows. This prop is mandatory if selectable is set to true. The uniqueRowId key will be used to identify the each row.
|
|
1298
|
+
*/
|
|
1252
1299
|
selectedRows: Set<string | number>;
|
|
1300
|
+
/**
|
|
1301
|
+
* Function called whenever the selected values changes. This prop is mandatory if selectable is set to true.The uniqueRowId key will be used to identify the rows.
|
|
1302
|
+
*/
|
|
1253
1303
|
onSelectRows: (selectedRows: Set<number | string>) => void;
|
|
1304
|
+
/**
|
|
1305
|
+
* This prop indicates the unique key that can be used to identify each row. This prop is mandatory if selectable is set to true, expandable is set to true or rows is of type HierarchyGridRow[].
|
|
1306
|
+
*/
|
|
1254
1307
|
uniqueRowId: string;
|
|
1255
1308
|
} | {
|
|
1256
1309
|
selectable?: false;
|
|
@@ -1258,27 +1311,99 @@ type SelectableGridProps = {
|
|
|
1258
1311
|
onSelectRows?: never;
|
|
1259
1312
|
uniqueRowId?: string;
|
|
1260
1313
|
};
|
|
1261
|
-
type
|
|
1314
|
+
type PaginatedProps$1 = {
|
|
1315
|
+
/**
|
|
1316
|
+
* If true, paginator will be displayed.
|
|
1317
|
+
*/
|
|
1318
|
+
showPaginator?: true;
|
|
1319
|
+
/**
|
|
1320
|
+
* Number of total items.
|
|
1321
|
+
*/
|
|
1322
|
+
totalItems?: number;
|
|
1323
|
+
/**
|
|
1324
|
+
* If true, a select component for navigation between pages will be displayed.
|
|
1325
|
+
*/
|
|
1326
|
+
showGoToPage?: boolean;
|
|
1327
|
+
/**
|
|
1328
|
+
* Number of items per page.
|
|
1329
|
+
*/
|
|
1330
|
+
itemsPerPage?: number;
|
|
1331
|
+
/**
|
|
1332
|
+
* An array of numbers representing the items per page options.
|
|
1333
|
+
*/
|
|
1334
|
+
itemsPerPageOptions?: number[];
|
|
1335
|
+
/**
|
|
1336
|
+
* This function will be called when the user selects an item per page
|
|
1337
|
+
* option. The value selected will be passed as a parameter.
|
|
1338
|
+
*/
|
|
1339
|
+
itemsPerPageFunction?: (value: number) => void;
|
|
1340
|
+
/**
|
|
1341
|
+
* Function called whenever the current page is changed.
|
|
1342
|
+
*/
|
|
1343
|
+
onPageChange?: (_page: number) => void;
|
|
1344
|
+
};
|
|
1345
|
+
type NonPaginatedProps$1 = {
|
|
1346
|
+
/**
|
|
1347
|
+
* If true, paginator will be displayed.
|
|
1348
|
+
*/
|
|
1349
|
+
showPaginator: false;
|
|
1350
|
+
/**
|
|
1351
|
+
* Number of total items.
|
|
1352
|
+
*/
|
|
1353
|
+
totalItems?: never;
|
|
1354
|
+
/**
|
|
1355
|
+
* If true, a select component for navigation between pages will be displayed.
|
|
1356
|
+
*/
|
|
1357
|
+
showGoToPage?: never;
|
|
1358
|
+
/**
|
|
1359
|
+
* Number of items per page.
|
|
1360
|
+
*/
|
|
1361
|
+
itemsPerPage?: never;
|
|
1362
|
+
/**
|
|
1363
|
+
* An array of numbers representing the items per page options.
|
|
1364
|
+
*/
|
|
1365
|
+
itemsPerPageOptions?: never;
|
|
1366
|
+
/**
|
|
1367
|
+
* This function will be called when the user selects an item per page
|
|
1368
|
+
* option. The value selected will be passed as a parameter.
|
|
1369
|
+
*/
|
|
1370
|
+
itemsPerPageFunction?: never;
|
|
1371
|
+
/**
|
|
1372
|
+
* Function called whenever the current page is changed.
|
|
1373
|
+
*/
|
|
1374
|
+
onPageChange?: never;
|
|
1375
|
+
};
|
|
1376
|
+
type CommonProps$6 = {
|
|
1262
1377
|
columns: GridColumn[];
|
|
1378
|
+
/**
|
|
1379
|
+
* Extra row that will be always visible.
|
|
1380
|
+
*/
|
|
1263
1381
|
summaryRow?: GridRow;
|
|
1264
|
-
|
|
1382
|
+
/**
|
|
1383
|
+
* Function called whenever a cell is edited.
|
|
1384
|
+
*/
|
|
1385
|
+
onGridRowsChange?: (_rows: GridRow[] | HierarchyGridRow[] | ExpandableGridRow[]) => void;
|
|
1386
|
+
/**
|
|
1387
|
+
* Function called whenever a column is sorted. Receives the sorted
|
|
1388
|
+
* column and direction, or `undefined` if no sorting is applied.
|
|
1389
|
+
*/
|
|
1390
|
+
onSort?: (_sortColumn?: SortColumn) => void;
|
|
1265
1391
|
};
|
|
1266
1392
|
type BasicGridProps = {
|
|
1267
1393
|
rows: GridRow[];
|
|
1394
|
+
/**
|
|
1395
|
+
* Whether the rows can expand or not.
|
|
1396
|
+
*/
|
|
1268
1397
|
expandable?: false;
|
|
1269
1398
|
};
|
|
1270
|
-
type Props$
|
|
1399
|
+
type Props$t = CommonProps$6 & (PaginatedProps$1 | NonPaginatedProps$1) & ((BasicGridProps & SelectableGridProps) | (ExpandableRows & SelectableGridProps) | (HierarchyRows & SelectableGridProps));
|
|
1271
1400
|
|
|
1272
|
-
declare const DxcDataGrid:
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
type Margin$h = {
|
|
1276
|
-
top?: Space$i;
|
|
1277
|
-
bottom?: Space$i;
|
|
1278
|
-
left?: Space$i;
|
|
1279
|
-
right?: Space$i;
|
|
1401
|
+
declare const DxcDataGrid: {
|
|
1402
|
+
({ columns, rows, selectable, expandable, onSelectRows, selectedRows, uniqueRowId, summaryRow, onGridRowsChange, showPaginator, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, onSort, onPageChange, totalItems, }: Props$t): JSX.Element;
|
|
1403
|
+
ActionsCell: ({ actions }: ActionCellsPropsType) => JSX.Element;
|
|
1280
1404
|
};
|
|
1281
|
-
|
|
1405
|
+
|
|
1406
|
+
type Props$s = {
|
|
1282
1407
|
/**
|
|
1283
1408
|
* Initial value of the input element, only when it is uncontrolled.
|
|
1284
1409
|
*/
|
|
@@ -1369,24 +1494,28 @@ type Props$t = {
|
|
|
1369
1494
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
1370
1495
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
1371
1496
|
*/
|
|
1372
|
-
margin?: Space$
|
|
1497
|
+
margin?: Space$1 | Margin;
|
|
1373
1498
|
/**
|
|
1374
1499
|
* Size of the component.
|
|
1375
1500
|
*/
|
|
1376
|
-
size?: "medium" | "large" | "fillParent";
|
|
1501
|
+
size?: "small" | "medium" | "large" | "fillParent";
|
|
1377
1502
|
/**
|
|
1378
1503
|
* Value of the tabindex attribute.
|
|
1379
1504
|
*/
|
|
1380
1505
|
tabIndex?: number;
|
|
1506
|
+
/**
|
|
1507
|
+
* Specifies a string to be used as the name for the date input element when no `label` is provided.
|
|
1508
|
+
*/
|
|
1509
|
+
ariaLabel?: string;
|
|
1381
1510
|
};
|
|
1382
1511
|
|
|
1383
|
-
declare const DxcDateInput: react.ForwardRefExoticComponent<Props$
|
|
1512
|
+
declare const DxcDateInput: react.ForwardRefExoticComponent<Props$s & react.RefAttributes<HTMLDivElement>>;
|
|
1384
1513
|
|
|
1385
|
-
type Props$
|
|
1514
|
+
type Props$r = {
|
|
1386
1515
|
/**
|
|
1387
1516
|
* If true, the close button will be visible.
|
|
1388
1517
|
*/
|
|
1389
|
-
|
|
1518
|
+
closable?: boolean;
|
|
1390
1519
|
/**
|
|
1391
1520
|
* This function will be called when the user clicks the close button.
|
|
1392
1521
|
* The responsibility of hiding the dialog lies with the user.
|
|
@@ -1408,7 +1537,7 @@ type Props$s = {
|
|
|
1408
1537
|
* can lead to unpredictable behaviour for keyboard users, affecting
|
|
1409
1538
|
* the order of focus and focus locking within the dialog.
|
|
1410
1539
|
*/
|
|
1411
|
-
children:
|
|
1540
|
+
children: ReactNode;
|
|
1412
1541
|
/**
|
|
1413
1542
|
* Value of the tabindex applied to the close button.
|
|
1414
1543
|
* Note that values greater than 0 are strongly discouraged. It can
|
|
@@ -1417,9 +1546,9 @@ type Props$s = {
|
|
|
1417
1546
|
tabIndex?: number;
|
|
1418
1547
|
};
|
|
1419
1548
|
|
|
1420
|
-
declare const DxcDialog: ({
|
|
1549
|
+
declare const DxcDialog: ({ children, closable, onBackgroundClick, onCloseClick, overlay, tabIndex, }: Props$r) => JSX.Element;
|
|
1421
1550
|
|
|
1422
|
-
type Props$
|
|
1551
|
+
type Props$q = {
|
|
1423
1552
|
/**
|
|
1424
1553
|
* The divider can be shown in horizontal or vertical.
|
|
1425
1554
|
*/
|
|
@@ -1440,17 +1569,10 @@ type Props$r = {
|
|
|
1440
1569
|
decorative?: boolean;
|
|
1441
1570
|
};
|
|
1442
1571
|
|
|
1443
|
-
declare const DxcDivider: ({ orientation, weight, color, decorative, }: Props$
|
|
1572
|
+
declare const DxcDivider: ({ orientation, weight, color, decorative, }: Props$q) => JSX.Element;
|
|
1444
1573
|
|
|
1445
|
-
declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, }: Props$
|
|
1574
|
+
declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$G) => JSX.Element;
|
|
1446
1575
|
|
|
1447
|
-
type Space$h = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
1448
|
-
type Margin$g = {
|
|
1449
|
-
top?: Space$h;
|
|
1450
|
-
bottom?: Space$h;
|
|
1451
|
-
left?: Space$h;
|
|
1452
|
-
right?: Space$h;
|
|
1453
|
-
};
|
|
1454
1576
|
type FileData = {
|
|
1455
1577
|
/**
|
|
1456
1578
|
* Selected file.
|
|
@@ -1465,7 +1587,7 @@ type FileData = {
|
|
|
1465
1587
|
*/
|
|
1466
1588
|
preview?: string;
|
|
1467
1589
|
};
|
|
1468
|
-
type CommonProps$
|
|
1590
|
+
type CommonProps$5 = {
|
|
1469
1591
|
/**
|
|
1470
1592
|
* Text to be placed above the component.
|
|
1471
1593
|
*/
|
|
@@ -1516,13 +1638,13 @@ type CommonProps$4 = {
|
|
|
1516
1638
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
1517
1639
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
1518
1640
|
*/
|
|
1519
|
-
margin?: Space$
|
|
1641
|
+
margin?: Space$1 | Margin;
|
|
1520
1642
|
/**
|
|
1521
1643
|
* Value of the tabindex attribute.
|
|
1522
1644
|
*/
|
|
1523
1645
|
tabIndex?: number;
|
|
1524
1646
|
};
|
|
1525
|
-
type DropModeProps = CommonProps$
|
|
1647
|
+
type DropModeProps = CommonProps$5 & {
|
|
1526
1648
|
/**
|
|
1527
1649
|
* Uses one of the available file input modes:
|
|
1528
1650
|
* 'file': Files are selected by clicking the button and selecting it through the file explorer.
|
|
@@ -1536,7 +1658,7 @@ type DropModeProps = CommonProps$4 & {
|
|
|
1536
1658
|
*/
|
|
1537
1659
|
dropAreaLabel?: string;
|
|
1538
1660
|
};
|
|
1539
|
-
type FileModeProps = CommonProps$
|
|
1661
|
+
type FileModeProps = CommonProps$5 & {
|
|
1540
1662
|
/**
|
|
1541
1663
|
* Uses one of the available file input modes:
|
|
1542
1664
|
* 'file': Files are selected by clicking the button and selecting it through the file explorer.
|
|
@@ -1550,31 +1672,30 @@ type FileModeProps = CommonProps$4 & {
|
|
|
1550
1672
|
*/
|
|
1551
1673
|
dropAreaLabel?: never;
|
|
1552
1674
|
};
|
|
1553
|
-
type Props$
|
|
1675
|
+
type Props$p = DropModeProps | FileModeProps;
|
|
1554
1676
|
|
|
1555
|
-
declare const DxcFileInput: react.ForwardRefExoticComponent<Props$
|
|
1677
|
+
declare const DxcFileInput: react.ForwardRefExoticComponent<Props$p & react.RefAttributes<HTMLDivElement>>;
|
|
1556
1678
|
|
|
1557
|
-
type Spaces$1 = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
|
|
1558
1679
|
type Gap$1 = {
|
|
1559
|
-
rowGap:
|
|
1560
|
-
columnGap?:
|
|
1680
|
+
rowGap: CoreSpacingTokensType;
|
|
1681
|
+
columnGap?: CoreSpacingTokensType;
|
|
1561
1682
|
} | {
|
|
1562
|
-
rowGap?:
|
|
1563
|
-
columnGap:
|
|
1564
|
-
} |
|
|
1565
|
-
type CommonProps$
|
|
1683
|
+
rowGap?: CoreSpacingTokensType;
|
|
1684
|
+
columnGap: CoreSpacingTokensType;
|
|
1685
|
+
} | CoreSpacingTokensType;
|
|
1686
|
+
type CommonProps$4 = {
|
|
1566
1687
|
/**
|
|
1567
1688
|
* Sets the justify-content CSS property.
|
|
1568
1689
|
*
|
|
1569
1690
|
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
|
|
1570
1691
|
*/
|
|
1571
|
-
justifyContent?: "flex-start" | "flex-end" | "start" | "end" | "left" | "right" | "center" | "space-between" | "space-around" | "space-evenly";
|
|
1692
|
+
justifyContent?: "flex-start" | "flex-end" | "start" | "end" | "left" | "normal" | "right" | "center" | "space-between" | "space-around" | "space-evenly";
|
|
1572
1693
|
/**
|
|
1573
1694
|
* Sets the align-items CSS property.
|
|
1574
1695
|
*
|
|
1575
1696
|
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
|
|
1576
1697
|
*/
|
|
1577
|
-
alignItems?: "stretch" | "flex-start" | "flex-end" | "start" | "end" | "self-start" | "self-end" | "center" | "baseline";
|
|
1698
|
+
alignItems?: "stretch" | "flex-start" | "flex-end" | "start" | "end" | "self-start" | "self-end" | "center" | "baseline" | "normal";
|
|
1578
1699
|
/**
|
|
1579
1700
|
* Sets the align-content CSS property.
|
|
1580
1701
|
*
|
|
@@ -1588,7 +1709,7 @@ type CommonProps$3 = {
|
|
|
1588
1709
|
*/
|
|
1589
1710
|
alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
|
|
1590
1711
|
};
|
|
1591
|
-
type Props$
|
|
1712
|
+
type Props$o = CommonProps$4 & {
|
|
1592
1713
|
/**
|
|
1593
1714
|
* Sets the flex-direction CSS property.
|
|
1594
1715
|
*
|
|
@@ -1638,19 +1759,18 @@ type Props$p = CommonProps$3 & {
|
|
|
1638
1759
|
/**
|
|
1639
1760
|
* Custom content inside the flex container.
|
|
1640
1761
|
*/
|
|
1641
|
-
children:
|
|
1762
|
+
children: ReactNode;
|
|
1642
1763
|
};
|
|
1643
1764
|
|
|
1644
|
-
declare const DxcFlex: ({
|
|
1765
|
+
declare const DxcFlex: ({ basis, direction, gap, grow, order, shrink, wrap, ...props }: Props$o) => react_jsx_runtime.JSX.Element;
|
|
1645
1766
|
|
|
1646
|
-
type Spaces = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
|
|
1647
1767
|
type Gap = {
|
|
1648
|
-
rowGap:
|
|
1649
|
-
columnGap?:
|
|
1768
|
+
rowGap: CoreSpacingTokensType;
|
|
1769
|
+
columnGap?: CoreSpacingTokensType;
|
|
1650
1770
|
} | {
|
|
1651
|
-
rowGap?:
|
|
1652
|
-
columnGap:
|
|
1653
|
-
} |
|
|
1771
|
+
rowGap?: CoreSpacingTokensType;
|
|
1772
|
+
columnGap: CoreSpacingTokensType;
|
|
1773
|
+
} | CoreSpacingTokensType;
|
|
1654
1774
|
type GridCell = {
|
|
1655
1775
|
start: number | string;
|
|
1656
1776
|
end: number | string;
|
|
@@ -1698,9 +1818,9 @@ type GridItemProps = {
|
|
|
1698
1818
|
/**
|
|
1699
1819
|
* Custom content inside the grid container.
|
|
1700
1820
|
*/
|
|
1701
|
-
children:
|
|
1821
|
+
children: ReactNode;
|
|
1702
1822
|
};
|
|
1703
|
-
type Props$
|
|
1823
|
+
type Props$n = GridItemProps & {
|
|
1704
1824
|
/**
|
|
1705
1825
|
* Sets the grid-auto-columns CSS property.
|
|
1706
1826
|
*
|
|
@@ -1724,7 +1844,7 @@ type Props$o = GridItemProps & {
|
|
|
1724
1844
|
*
|
|
1725
1845
|
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/gap
|
|
1726
1846
|
*/
|
|
1727
|
-
gap?:
|
|
1847
|
+
gap?: CoreSpacingTokensType | Gap;
|
|
1728
1848
|
/**
|
|
1729
1849
|
* Sets the place-content CSS property.
|
|
1730
1850
|
*
|
|
@@ -1758,18 +1878,11 @@ type Props$o = GridItemProps & {
|
|
|
1758
1878
|
};
|
|
1759
1879
|
|
|
1760
1880
|
declare const DxcGrid: {
|
|
1761
|
-
(props: Props$
|
|
1881
|
+
(props: Props$n): react_jsx_runtime.JSX.Element;
|
|
1762
1882
|
Item: styled_components.StyledComponent<"div", any, GridItemProps, never>;
|
|
1763
1883
|
};
|
|
1764
1884
|
|
|
1765
|
-
type
|
|
1766
|
-
type Margin$f = {
|
|
1767
|
-
top?: Space$g;
|
|
1768
|
-
bottom?: Space$g;
|
|
1769
|
-
left?: Space$g;
|
|
1770
|
-
right?: Space$g;
|
|
1771
|
-
};
|
|
1772
|
-
type Props$n = {
|
|
1885
|
+
type Props$m = {
|
|
1773
1886
|
/**
|
|
1774
1887
|
* Defines the heading level from 1 to 5. The styles of the heading are applied according to the level.
|
|
1775
1888
|
* The html tag of the heading will be the one specified in the 'as' prop.
|
|
@@ -1792,12 +1905,12 @@ type Props$n = {
|
|
|
1792
1905
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
1793
1906
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
1794
1907
|
*/
|
|
1795
|
-
margin?: Space$
|
|
1908
|
+
margin?: Space$1 | Margin;
|
|
1796
1909
|
};
|
|
1797
1910
|
|
|
1798
|
-
declare const DxcHeading: ({ level, text, as, weight, margin }: Props$
|
|
1911
|
+
declare const DxcHeading: ({ level, text, as, weight, margin }: Props$m) => JSX.Element;
|
|
1799
1912
|
|
|
1800
|
-
type Props$
|
|
1913
|
+
type Props$l = {
|
|
1801
1914
|
/**
|
|
1802
1915
|
* Alternative text description displayed when the specified image is not loaded.
|
|
1803
1916
|
*
|
|
@@ -1856,61 +1969,52 @@ type Props$m = {
|
|
|
1856
1969
|
/**
|
|
1857
1970
|
* This function will be called when the image is loaded.
|
|
1858
1971
|
*/
|
|
1859
|
-
onLoad?:
|
|
1972
|
+
onLoad?: ReactEventHandler<HTMLImageElement>;
|
|
1860
1973
|
/**
|
|
1861
1974
|
* This function will be called when the image fails to load.
|
|
1862
1975
|
*/
|
|
1863
|
-
onError?:
|
|
1976
|
+
onError?: ReactEventHandler<HTMLImageElement>;
|
|
1864
1977
|
};
|
|
1865
1978
|
|
|
1866
|
-
declare
|
|
1979
|
+
declare function DxcImage({ alt, caption, lazyLoading, src, srcSet, sizes, width, height, objectFit, objectPosition, onLoad, onError, }: Props$l): react_jsx_runtime.JSX.Element;
|
|
1867
1980
|
|
|
1868
|
-
type
|
|
1869
|
-
type Props$l = {
|
|
1981
|
+
type Props$k = {
|
|
1870
1982
|
/**
|
|
1871
1983
|
* Applies the spacing scale to all sides.
|
|
1872
1984
|
*/
|
|
1873
|
-
space?:
|
|
1985
|
+
space?: CoreSpacingTokensType;
|
|
1874
1986
|
/**
|
|
1875
1987
|
* Applies the spacing scale to the left and right sides.
|
|
1876
1988
|
*/
|
|
1877
|
-
horizontal?:
|
|
1989
|
+
horizontal?: CoreSpacingTokensType;
|
|
1878
1990
|
/**
|
|
1879
1991
|
* Applies the spacing scale to the top and bottom sides.
|
|
1880
1992
|
*/
|
|
1881
|
-
vertical?:
|
|
1993
|
+
vertical?: CoreSpacingTokensType;
|
|
1882
1994
|
/**
|
|
1883
1995
|
* Applies the spacing scale to the top side.
|
|
1884
1996
|
*/
|
|
1885
|
-
top?:
|
|
1997
|
+
top?: CoreSpacingTokensType;
|
|
1886
1998
|
/**
|
|
1887
1999
|
* Applies the spacing scale to the right side.
|
|
1888
2000
|
*/
|
|
1889
|
-
right?:
|
|
2001
|
+
right?: CoreSpacingTokensType;
|
|
1890
2002
|
/**
|
|
1891
2003
|
* Applies the spacing scale to the bottom side.
|
|
1892
2004
|
*/
|
|
1893
|
-
bottom?:
|
|
2005
|
+
bottom?: CoreSpacingTokensType;
|
|
1894
2006
|
/**
|
|
1895
2007
|
* Applies the spacing scale to the left side.
|
|
1896
2008
|
*/
|
|
1897
|
-
left?:
|
|
2009
|
+
left?: CoreSpacingTokensType;
|
|
1898
2010
|
/**
|
|
1899
2011
|
* Custom content inside the inset.
|
|
1900
2012
|
*/
|
|
1901
|
-
children:
|
|
2013
|
+
children: ReactNode;
|
|
1902
2014
|
};
|
|
1903
2015
|
|
|
1904
|
-
declare
|
|
2016
|
+
declare const Inset: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$k) => react_jsx_runtime.JSX.Element;
|
|
1905
2017
|
|
|
1906
|
-
type Space$f = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
1907
|
-
type Margin$e = {
|
|
1908
|
-
top?: Space$f;
|
|
1909
|
-
bottom?: Space$f;
|
|
1910
|
-
left?: Space$f;
|
|
1911
|
-
right?: Space$f;
|
|
1912
|
-
};
|
|
1913
|
-
type SVG$8 = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
1914
2018
|
type LinkProps = {
|
|
1915
2019
|
/**
|
|
1916
2020
|
* If true, the link is disabled.
|
|
@@ -1923,7 +2027,7 @@ type LinkProps = {
|
|
|
1923
2027
|
/**
|
|
1924
2028
|
* Material Symbol name or SVG element as the icon that will be placed next to the link text.
|
|
1925
2029
|
*/
|
|
1926
|
-
icon?: string | SVG
|
|
2030
|
+
icon?: string | SVG;
|
|
1927
2031
|
/**
|
|
1928
2032
|
* Indicates the position of the icon in the component.
|
|
1929
2033
|
*/
|
|
@@ -1949,7 +2053,7 @@ type LinkProps = {
|
|
|
1949
2053
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
1950
2054
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
1951
2055
|
*/
|
|
1952
|
-
margin?: Space$
|
|
2056
|
+
margin?: Space$1 | Margin;
|
|
1953
2057
|
/**
|
|
1954
2058
|
* Value of the tabindex.
|
|
1955
2059
|
*/
|
|
@@ -1958,8 +2062,7 @@ type LinkProps = {
|
|
|
1958
2062
|
|
|
1959
2063
|
declare const DxcLink: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
|
|
1960
2064
|
|
|
1961
|
-
type
|
|
1962
|
-
type TabProps = {
|
|
2065
|
+
type TabProps$1 = {
|
|
1963
2066
|
/**
|
|
1964
2067
|
* Whether the tab is active or not.
|
|
1965
2068
|
*/
|
|
@@ -1975,7 +2078,7 @@ type TabProps = {
|
|
|
1975
2078
|
/**
|
|
1976
2079
|
* Material Symbol name or SVG element used as the icon that will be displayed in the tab.
|
|
1977
2080
|
*/
|
|
1978
|
-
icon?: string | SVG
|
|
2081
|
+
icon?: string | SVG;
|
|
1979
2082
|
/**
|
|
1980
2083
|
* If the value is 'true', an empty badge will appear.
|
|
1981
2084
|
* If it is 'false', no badge will appear.
|
|
@@ -1989,7 +2092,7 @@ type TabProps = {
|
|
|
1989
2092
|
*/
|
|
1990
2093
|
children: string;
|
|
1991
2094
|
};
|
|
1992
|
-
type Props$
|
|
2095
|
+
type Props$j = {
|
|
1993
2096
|
/**
|
|
1994
2097
|
* Whether the icon should appear above or to the left of the label.
|
|
1995
2098
|
*/
|
|
@@ -1997,7 +2100,7 @@ type Props$k = {
|
|
|
1997
2100
|
/**
|
|
1998
2101
|
* Contains one or more DxcNavTabs.Tab.
|
|
1999
2102
|
*/
|
|
2000
|
-
children:
|
|
2103
|
+
children: ReactNode;
|
|
2001
2104
|
/**
|
|
2002
2105
|
* Value of the tabindex attribute applied to each tab.
|
|
2003
2106
|
*/
|
|
@@ -2005,18 +2108,11 @@ type Props$k = {
|
|
|
2005
2108
|
};
|
|
2006
2109
|
|
|
2007
2110
|
declare const DxcNavTabs: {
|
|
2008
|
-
({ iconPosition, tabIndex, children }: Props$
|
|
2009
|
-
Tab: react.ForwardRefExoticComponent<TabProps & react.RefAttributes<HTMLAnchorElement>>;
|
|
2111
|
+
({ iconPosition, tabIndex, children }: Props$j): JSX.Element;
|
|
2112
|
+
Tab: react.ForwardRefExoticComponent<TabProps$1 & react.RefAttributes<HTMLAnchorElement>>;
|
|
2010
2113
|
};
|
|
2011
2114
|
|
|
2012
|
-
type
|
|
2013
|
-
type Margin$d = {
|
|
2014
|
-
top?: Space$e;
|
|
2015
|
-
bottom?: Space$e;
|
|
2016
|
-
left?: Space$e;
|
|
2017
|
-
right?: Space$e;
|
|
2018
|
-
};
|
|
2019
|
-
type Props$j = {
|
|
2115
|
+
type Props$i = {
|
|
2020
2116
|
/**
|
|
2021
2117
|
* Text to be placed above the number.
|
|
2022
2118
|
*/
|
|
@@ -2124,7 +2220,7 @@ type Props$j = {
|
|
|
2124
2220
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
2125
2221
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
2126
2222
|
*/
|
|
2127
|
-
margin?: Space$
|
|
2223
|
+
margin?: Space$1 | Margin;
|
|
2128
2224
|
/**
|
|
2129
2225
|
* Size of the component.
|
|
2130
2226
|
*/
|
|
@@ -2133,11 +2229,15 @@ type Props$j = {
|
|
|
2133
2229
|
* Value of the tabindex attribute.
|
|
2134
2230
|
*/
|
|
2135
2231
|
tabIndex?: number;
|
|
2232
|
+
/**
|
|
2233
|
+
* Specifies a string to be used as the name for the number input element when no `label` is provided.
|
|
2234
|
+
*/
|
|
2235
|
+
ariaLabel?: string;
|
|
2136
2236
|
};
|
|
2137
2237
|
|
|
2138
|
-
declare const DxcNumberInput: react.ForwardRefExoticComponent<Props$
|
|
2238
|
+
declare const DxcNumberInput: react.ForwardRefExoticComponent<Props$i & react.RefAttributes<HTMLDivElement>>;
|
|
2139
2239
|
|
|
2140
|
-
type Props$
|
|
2240
|
+
type Props$h = {
|
|
2141
2241
|
/**
|
|
2142
2242
|
* Number of the current selected page.
|
|
2143
2243
|
*/
|
|
@@ -2175,20 +2275,13 @@ type Props$i = {
|
|
|
2175
2275
|
tabIndex?: number;
|
|
2176
2276
|
};
|
|
2177
2277
|
|
|
2178
|
-
declare const DxcPaginator: ({ currentPage, itemsPerPage, itemsPerPageOptions, totalItems, showGoToPage, onPageChange, itemsPerPageFunction, tabIndex, }: Props$
|
|
2278
|
+
declare const DxcPaginator: ({ currentPage, itemsPerPage, itemsPerPageOptions, totalItems, showGoToPage, onPageChange, itemsPerPageFunction, tabIndex, }: Props$h) => JSX.Element;
|
|
2179
2279
|
|
|
2180
|
-
declare
|
|
2181
|
-
children:
|
|
2182
|
-
})
|
|
2280
|
+
declare function DxcParagraph({ children }: {
|
|
2281
|
+
children: ReactNode;
|
|
2282
|
+
}): react_jsx_runtime.JSX.Element;
|
|
2183
2283
|
|
|
2184
|
-
type
|
|
2185
|
-
type Margin$c = {
|
|
2186
|
-
top?: Space$d;
|
|
2187
|
-
bottom?: Space$d;
|
|
2188
|
-
left?: Space$d;
|
|
2189
|
-
right?: Space$d;
|
|
2190
|
-
};
|
|
2191
|
-
type Props$h = {
|
|
2284
|
+
type Props$g = {
|
|
2192
2285
|
/**
|
|
2193
2286
|
* Text to be placed above the password input.
|
|
2194
2287
|
*/
|
|
@@ -2277,7 +2370,7 @@ type Props$h = {
|
|
|
2277
2370
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
2278
2371
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
2279
2372
|
*/
|
|
2280
|
-
margin?: Space$
|
|
2373
|
+
margin?: Space$1 | Margin;
|
|
2281
2374
|
/**
|
|
2282
2375
|
* Size of the component.
|
|
2283
2376
|
*/
|
|
@@ -2286,18 +2379,21 @@ type Props$h = {
|
|
|
2286
2379
|
* Value of the tabindex attribute.
|
|
2287
2380
|
*/
|
|
2288
2381
|
tabIndex?: number;
|
|
2382
|
+
/**
|
|
2383
|
+
* Specifies a string to be used as the name for the password input element when no `label` is provided.
|
|
2384
|
+
*/
|
|
2385
|
+
ariaLabel?: string;
|
|
2289
2386
|
};
|
|
2290
2387
|
|
|
2291
|
-
declare const DxcPasswordInput: react.ForwardRefExoticComponent<Props$
|
|
2388
|
+
declare const DxcPasswordInput: react.ForwardRefExoticComponent<Props$g & react.RefAttributes<HTMLDivElement>>;
|
|
2292
2389
|
|
|
2293
|
-
type Space$c = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2294
2390
|
type Size$1 = {
|
|
2295
|
-
top?: Space$
|
|
2296
|
-
bottom?: Space$
|
|
2297
|
-
left?: Space$
|
|
2298
|
-
right?: Space$
|
|
2391
|
+
top?: Space$1;
|
|
2392
|
+
bottom?: Space$1;
|
|
2393
|
+
left?: Space$1;
|
|
2394
|
+
right?: Space$1;
|
|
2299
2395
|
};
|
|
2300
|
-
type Props$
|
|
2396
|
+
type Props$f = {
|
|
2301
2397
|
/**
|
|
2302
2398
|
* Text to be placed above the progress bar.
|
|
2303
2399
|
*/
|
|
@@ -2324,10 +2420,14 @@ type Props$g = {
|
|
|
2324
2420
|
* an object with 'top', 'bottom', 'left' and 'right' properties
|
|
2325
2421
|
* in order to specify different margin sizes.
|
|
2326
2422
|
*/
|
|
2327
|
-
margin?: Space$
|
|
2423
|
+
margin?: Space$1 | Size$1;
|
|
2424
|
+
/**
|
|
2425
|
+
* Specifies a string to be used as the name for the progress bar element when no `label` is provided.
|
|
2426
|
+
*/
|
|
2427
|
+
ariaLabel?: string;
|
|
2328
2428
|
};
|
|
2329
2429
|
|
|
2330
|
-
declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, }: Props$
|
|
2430
|
+
declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, ariaLabel, }: Props$f) => JSX.Element;
|
|
2331
2431
|
|
|
2332
2432
|
type Link = {
|
|
2333
2433
|
/**
|
|
@@ -2339,7 +2439,7 @@ type Link = {
|
|
|
2339
2439
|
*/
|
|
2340
2440
|
links?: Link[];
|
|
2341
2441
|
};
|
|
2342
|
-
type Props$
|
|
2442
|
+
type Props$e = {
|
|
2343
2443
|
/**
|
|
2344
2444
|
* Title of the quick nav component.
|
|
2345
2445
|
*/
|
|
@@ -2350,7 +2450,7 @@ type Props$f = {
|
|
|
2350
2450
|
links: Link[];
|
|
2351
2451
|
};
|
|
2352
2452
|
|
|
2353
|
-
declare const DxcQuickNav: ({ title, links }: Props$
|
|
2453
|
+
declare const DxcQuickNav: ({ title, links }: Props$e) => JSX.Element;
|
|
2354
2454
|
|
|
2355
2455
|
type RadioOption = {
|
|
2356
2456
|
/**
|
|
@@ -2447,66 +2547,19 @@ type RadioGroupProps = {
|
|
|
2447
2547
|
* Value of the tabindex attribute.
|
|
2448
2548
|
*/
|
|
2449
2549
|
tabIndex?: number;
|
|
2450
|
-
};
|
|
2451
|
-
|
|
2452
|
-
declare const DxcRadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
|
|
2453
|
-
|
|
2454
|
-
type Space$b = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2455
|
-
type Margin$b = {
|
|
2456
|
-
top?: Space$b;
|
|
2457
|
-
bottom?: Space$b;
|
|
2458
|
-
left?: Space$b;
|
|
2459
|
-
right?: Space$b;
|
|
2460
|
-
};
|
|
2461
|
-
type SVG$6 = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
2462
|
-
type ActionCellsPropsType = {
|
|
2463
|
-
actions: Array<{
|
|
2464
|
-
icon: string | SVG$6;
|
|
2465
|
-
title: string;
|
|
2466
|
-
onClick: () => void;
|
|
2467
|
-
disabled?: boolean;
|
|
2468
|
-
tabIndex?: number;
|
|
2469
|
-
options?: never;
|
|
2470
|
-
} | {
|
|
2471
|
-
icon?: never;
|
|
2472
|
-
title: string;
|
|
2473
|
-
onClick: (value?: string) => void;
|
|
2474
|
-
disabled?: boolean;
|
|
2475
|
-
tabIndex?: number;
|
|
2476
|
-
options: Option$1[];
|
|
2477
|
-
}>;
|
|
2478
|
-
};
|
|
2479
|
-
type Props$e = {
|
|
2480
|
-
/**
|
|
2481
|
-
* The center section of the table. Can be used to render custom
|
|
2482
|
-
* content in this area.
|
|
2483
|
-
*/
|
|
2484
|
-
children: React.ReactNode;
|
|
2485
|
-
/**
|
|
2486
|
-
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
2487
|
-
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
2488
|
-
*/
|
|
2489
|
-
margin?: Space$b | Margin$b;
|
|
2490
2550
|
/**
|
|
2491
|
-
*
|
|
2492
|
-
* - "default": Default table size.
|
|
2493
|
-
* - "reduced": More compact table with less spacing for high density information.
|
|
2551
|
+
* Specifies a string to be used as the name for the radio group when no `label` is provided.
|
|
2494
2552
|
*/
|
|
2495
|
-
|
|
2553
|
+
ariaLabel?: string;
|
|
2496
2554
|
};
|
|
2497
2555
|
|
|
2498
|
-
|
|
2499
|
-
|
|
2500
|
-
top?: Space$a;
|
|
2501
|
-
bottom?: Space$a;
|
|
2502
|
-
left?: Space$a;
|
|
2503
|
-
right?: Space$a;
|
|
2504
|
-
};
|
|
2556
|
+
declare const DxcRadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
|
|
2557
|
+
|
|
2505
2558
|
type Column = {
|
|
2506
2559
|
/**
|
|
2507
2560
|
* Column display value.
|
|
2508
2561
|
*/
|
|
2509
|
-
displayValue:
|
|
2562
|
+
displayValue: ReactNode;
|
|
2510
2563
|
/**
|
|
2511
2564
|
* Boolean value to indicate whether the column is sortable or not.
|
|
2512
2565
|
*/
|
|
@@ -2516,7 +2569,7 @@ type Cell = {
|
|
|
2516
2569
|
/**
|
|
2517
2570
|
* Value to be displayed in the cell.
|
|
2518
2571
|
*/
|
|
2519
|
-
displayValue:
|
|
2572
|
+
displayValue: ReactNode;
|
|
2520
2573
|
/**
|
|
2521
2574
|
* Value to be used when sorting the table by that
|
|
2522
2575
|
* column. If not indicated displayValue will be used for sorting.
|
|
@@ -2524,7 +2577,7 @@ type Cell = {
|
|
|
2524
2577
|
sortValue?: string | number | Date;
|
|
2525
2578
|
};
|
|
2526
2579
|
type Row = Cell[];
|
|
2527
|
-
type CommonProps$
|
|
2580
|
+
type CommonProps$3 = {
|
|
2528
2581
|
/**
|
|
2529
2582
|
* An array of objects representing the columns of the table.
|
|
2530
2583
|
*/
|
|
@@ -2538,7 +2591,7 @@ type CommonProps$2 = {
|
|
|
2538
2591
|
* Size of the margin to be applied to the component. You can pass an object with 'top',
|
|
2539
2592
|
* 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
2540
2593
|
*/
|
|
2541
|
-
margin?: Space$
|
|
2594
|
+
margin?: Space$1 | Margin;
|
|
2542
2595
|
/**
|
|
2543
2596
|
* Value of the tabindex attribute applied to the sortable icon.
|
|
2544
2597
|
*/
|
|
@@ -2550,7 +2603,7 @@ type CommonProps$2 = {
|
|
|
2550
2603
|
*/
|
|
2551
2604
|
mode?: "default" | "reduced";
|
|
2552
2605
|
};
|
|
2553
|
-
type PaginatedProps = CommonProps$
|
|
2606
|
+
type PaginatedProps = CommonProps$3 & {
|
|
2554
2607
|
hidePaginator?: false;
|
|
2555
2608
|
/**
|
|
2556
2609
|
* If true, a select component for navigation between pages will be displayed.
|
|
@@ -2570,7 +2623,7 @@ type PaginatedProps = CommonProps$2 & {
|
|
|
2570
2623
|
*/
|
|
2571
2624
|
itemsPerPageFunction?: (value: number) => void;
|
|
2572
2625
|
};
|
|
2573
|
-
type NonPaginatedProps = CommonProps$
|
|
2626
|
+
type NonPaginatedProps = CommonProps$3 & {
|
|
2574
2627
|
/**
|
|
2575
2628
|
* If true, paginator will not be displayed.
|
|
2576
2629
|
*/
|
|
@@ -2600,14 +2653,6 @@ declare const DxcResultsetTable: {
|
|
|
2600
2653
|
ActionsCell: ({ actions }: ActionCellsPropsType) => JSX.Element;
|
|
2601
2654
|
};
|
|
2602
2655
|
|
|
2603
|
-
type Space$9 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2604
|
-
type Margin$9 = {
|
|
2605
|
-
top?: Space$9;
|
|
2606
|
-
bottom?: Space$9;
|
|
2607
|
-
left?: Space$9;
|
|
2608
|
-
right?: Space$9;
|
|
2609
|
-
};
|
|
2610
|
-
type SVG$5 = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
2611
2656
|
type ListOptionGroupType = {
|
|
2612
2657
|
/**
|
|
2613
2658
|
* Label of the group to be shown in the select's listbox.
|
|
@@ -2625,7 +2670,7 @@ type ListOptionType = {
|
|
|
2625
2670
|
* is the chosen one, take into account that the component's
|
|
2626
2671
|
* color styling tokens will not be applied to the image.
|
|
2627
2672
|
*/
|
|
2628
|
-
icon?: string | SVG
|
|
2673
|
+
icon?: string | SVG;
|
|
2629
2674
|
/**
|
|
2630
2675
|
* Label of the option to be shown in the select's listbox.
|
|
2631
2676
|
*/
|
|
@@ -2637,7 +2682,7 @@ type ListOptionType = {
|
|
|
2637
2682
|
*/
|
|
2638
2683
|
value: string;
|
|
2639
2684
|
};
|
|
2640
|
-
type CommonProps$
|
|
2685
|
+
type CommonProps$2 = {
|
|
2641
2686
|
/**
|
|
2642
2687
|
* Text to be placed above the select.
|
|
2643
2688
|
*/
|
|
@@ -2691,7 +2736,7 @@ type CommonProps$1 = {
|
|
|
2691
2736
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
2692
2737
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
2693
2738
|
*/
|
|
2694
|
-
margin?: Space$
|
|
2739
|
+
margin?: Space$1 | Margin;
|
|
2695
2740
|
/**
|
|
2696
2741
|
* Size of the component.
|
|
2697
2742
|
*/
|
|
@@ -2700,8 +2745,12 @@ type CommonProps$1 = {
|
|
|
2700
2745
|
* Value of the tabindex attribute.
|
|
2701
2746
|
*/
|
|
2702
2747
|
tabIndex?: number;
|
|
2748
|
+
/**
|
|
2749
|
+
* Specifies a string to be used as the name for the select element when no `label` is provided.
|
|
2750
|
+
*/
|
|
2751
|
+
ariaLabel?: string;
|
|
2703
2752
|
};
|
|
2704
|
-
type SingleSelect = CommonProps$
|
|
2753
|
+
type SingleSelect = CommonProps$2 & {
|
|
2705
2754
|
/**
|
|
2706
2755
|
* If true, the select component will support multiple selected options.
|
|
2707
2756
|
* In that case, value will be an array of strings with each selected
|
|
@@ -2737,7 +2786,7 @@ type SingleSelect = CommonProps$1 & {
|
|
|
2737
2786
|
error?: string;
|
|
2738
2787
|
}) => void;
|
|
2739
2788
|
};
|
|
2740
|
-
type MultipleSelect = CommonProps$
|
|
2789
|
+
type MultipleSelect = CommonProps$2 & {
|
|
2741
2790
|
/**
|
|
2742
2791
|
* If true, the select component will support multiple selected options.
|
|
2743
2792
|
* In that case, value will be an array of strings with each selected
|
|
@@ -2777,13 +2826,6 @@ type Props$c = SingleSelect | MultipleSelect;
|
|
|
2777
2826
|
|
|
2778
2827
|
declare const DxcSelect: react.ForwardRefExoticComponent<Props$c & react.RefAttributes<HTMLDivElement>>;
|
|
2779
2828
|
|
|
2780
|
-
type Space$8 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2781
|
-
type Margin$8 = {
|
|
2782
|
-
top?: Space$8;
|
|
2783
|
-
bottom?: Space$8;
|
|
2784
|
-
left?: Space$8;
|
|
2785
|
-
right?: Space$8;
|
|
2786
|
-
};
|
|
2787
2829
|
type Props$b = {
|
|
2788
2830
|
/**
|
|
2789
2831
|
* Text to be placed above the slider.
|
|
@@ -2852,22 +2894,19 @@ type Props$b = {
|
|
|
2852
2894
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
2853
2895
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
2854
2896
|
*/
|
|
2855
|
-
margin?: Space$
|
|
2897
|
+
margin?: Space$1 | Margin;
|
|
2856
2898
|
/**
|
|
2857
2899
|
* Size of the component.
|
|
2858
2900
|
*/
|
|
2859
2901
|
size?: "medium" | "large" | "fillParent";
|
|
2902
|
+
/**
|
|
2903
|
+
* Specifies a string to be used as the name for the slider element when no `label` is provided.
|
|
2904
|
+
*/
|
|
2905
|
+
ariaLabel?: string;
|
|
2860
2906
|
};
|
|
2861
2907
|
|
|
2862
2908
|
declare const DxcSlider: react.ForwardRefExoticComponent<Props$b & react.RefAttributes<HTMLDivElement>>;
|
|
2863
2909
|
|
|
2864
|
-
type Space$7 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2865
|
-
type Margin$7 = {
|
|
2866
|
-
top?: Space$7;
|
|
2867
|
-
bottom?: Space$7;
|
|
2868
|
-
left?: Space$7;
|
|
2869
|
-
right?: Space$7;
|
|
2870
|
-
};
|
|
2871
2910
|
type Props$a = {
|
|
2872
2911
|
/**
|
|
2873
2912
|
* Text to be placed inside the spinner.
|
|
@@ -2890,10 +2929,14 @@ type Props$a = {
|
|
|
2890
2929
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
2891
2930
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
2892
2931
|
*/
|
|
2893
|
-
margin?: Space$
|
|
2932
|
+
margin?: Space$1 | Margin;
|
|
2933
|
+
/**
|
|
2934
|
+
* 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.
|
|
2935
|
+
*/
|
|
2936
|
+
ariaLabel?: string;
|
|
2894
2937
|
};
|
|
2895
2938
|
|
|
2896
|
-
declare const DxcSpinner: ({ label, value, showValue, mode, margin }: Props$a) => JSX.Element;
|
|
2939
|
+
declare const DxcSpinner: ({ label, value, showValue, mode, margin, ariaLabel, }: Props$a) => JSX.Element;
|
|
2897
2940
|
|
|
2898
2941
|
type Mode = "default" | "info" | "success" | "warning" | "error";
|
|
2899
2942
|
type Size = "small" | "medium" | "large";
|
|
@@ -2914,13 +2957,6 @@ type Props$9 = {
|
|
|
2914
2957
|
|
|
2915
2958
|
declare const DxcStatusLight: ({ mode, label, size }: Props$9) => JSX.Element;
|
|
2916
2959
|
|
|
2917
|
-
type Space$6 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2918
|
-
type Margin$6 = {
|
|
2919
|
-
top?: Space$6;
|
|
2920
|
-
bottom?: Space$6;
|
|
2921
|
-
left?: Space$6;
|
|
2922
|
-
right?: Space$6;
|
|
2923
|
-
};
|
|
2924
2960
|
type Props$8 = {
|
|
2925
2961
|
/**
|
|
2926
2962
|
* Initial state of the switch, only when it is uncontrolled.
|
|
@@ -2965,7 +3001,7 @@ type Props$8 = {
|
|
|
2965
3001
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
2966
3002
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
2967
3003
|
*/
|
|
2968
|
-
margin?: Space$
|
|
3004
|
+
margin?: Space$1 | Margin;
|
|
2969
3005
|
/**
|
|
2970
3006
|
* Size of the component.
|
|
2971
3007
|
*/
|
|
@@ -2974,23 +3010,19 @@ type Props$8 = {
|
|
|
2974
3010
|
* Value of the tabindex.
|
|
2975
3011
|
*/
|
|
2976
3012
|
tabIndex?: number;
|
|
3013
|
+
/**
|
|
3014
|
+
* Specifies a string to be used as the name for the switch element when no `label` is provided.
|
|
3015
|
+
*/
|
|
3016
|
+
ariaLabel?: string;
|
|
2977
3017
|
};
|
|
2978
3018
|
|
|
2979
3019
|
declare const DxcSwitch: react.ForwardRefExoticComponent<Props$8 & react.RefAttributes<HTMLDivElement>>;
|
|
2980
3020
|
|
|
2981
3021
|
declare const DxcTable: {
|
|
2982
|
-
({ children, margin, mode }: Props$
|
|
3022
|
+
({ children, margin, mode }: Props$u): JSX.Element;
|
|
2983
3023
|
ActionsCell: ({ actions }: ActionCellsPropsType) => JSX.Element;
|
|
2984
3024
|
};
|
|
2985
3025
|
|
|
2986
|
-
type Space$5 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2987
|
-
type Margin$5 = {
|
|
2988
|
-
top?: Space$5;
|
|
2989
|
-
bottom?: Space$5;
|
|
2990
|
-
left?: Space$5;
|
|
2991
|
-
right?: Space$5;
|
|
2992
|
-
};
|
|
2993
|
-
type SVG$4 = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
2994
3026
|
type TabCommonProps = {
|
|
2995
3027
|
/**
|
|
2996
3028
|
* Whether the tab is disabled or not.
|
|
@@ -3013,7 +3045,7 @@ type TabLabelProps = TabCommonProps & {
|
|
|
3013
3045
|
/**
|
|
3014
3046
|
* Material Symbol name or SVG element used as the icon that will be displayed in the tab.
|
|
3015
3047
|
*/
|
|
3016
|
-
icon?: string | SVG
|
|
3048
|
+
icon?: string | SVG;
|
|
3017
3049
|
};
|
|
3018
3050
|
type TabIconProps = TabCommonProps & {
|
|
3019
3051
|
/**
|
|
@@ -3023,9 +3055,21 @@ type TabIconProps = TabCommonProps & {
|
|
|
3023
3055
|
/**
|
|
3024
3056
|
* Material Symbol name or SVG element used as the icon that will be displayed in the tab.
|
|
3025
3057
|
*/
|
|
3026
|
-
icon: string | SVG
|
|
3058
|
+
icon: string | SVG;
|
|
3059
|
+
};
|
|
3060
|
+
type TabProps = {
|
|
3061
|
+
defaultActive?: boolean;
|
|
3062
|
+
active?: boolean;
|
|
3063
|
+
icon?: string | SVG;
|
|
3064
|
+
label: string;
|
|
3065
|
+
title?: string;
|
|
3066
|
+
disabled?: boolean;
|
|
3067
|
+
notificationNumber?: boolean | number;
|
|
3068
|
+
children: ReactNode;
|
|
3069
|
+
onClick?: () => void;
|
|
3070
|
+
onHover?: () => void;
|
|
3027
3071
|
};
|
|
3028
|
-
type
|
|
3072
|
+
type LegacyProps = {
|
|
3029
3073
|
/**
|
|
3030
3074
|
* Initially active tab, only when it is uncontrolled.
|
|
3031
3075
|
*/
|
|
@@ -3038,7 +3082,7 @@ type Props$7 = {
|
|
|
3038
3082
|
/**
|
|
3039
3083
|
* An array of objects representing the tabs.
|
|
3040
3084
|
*/
|
|
3041
|
-
tabs
|
|
3085
|
+
tabs?: (TabLabelProps | TabIconProps)[];
|
|
3042
3086
|
/**
|
|
3043
3087
|
* Whether the icon should appear above or to the left of the label.
|
|
3044
3088
|
*/
|
|
@@ -3052,28 +3096,43 @@ type Props$7 = {
|
|
|
3052
3096
|
* This function will be called when the user hovers a tab.The index of the
|
|
3053
3097
|
* hovered tab will be passed as a parameter.
|
|
3054
3098
|
*/
|
|
3055
|
-
onTabHover?: (index: number) => void;
|
|
3099
|
+
onTabHover?: (index: number | null) => void;
|
|
3100
|
+
/**
|
|
3101
|
+
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
3102
|
+
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
3103
|
+
*/
|
|
3104
|
+
margin?: Space$1 | Margin;
|
|
3105
|
+
/**
|
|
3106
|
+
* Value of the tabindex attribute applied to each tab.
|
|
3107
|
+
*/
|
|
3108
|
+
tabIndex?: number;
|
|
3109
|
+
};
|
|
3110
|
+
type NewProps = {
|
|
3111
|
+
/**
|
|
3112
|
+
* Whether the icon should appear above or to the left of the label.
|
|
3113
|
+
*/
|
|
3114
|
+
iconPosition?: "top" | "left";
|
|
3056
3115
|
/**
|
|
3057
3116
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
3058
3117
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
3059
3118
|
*/
|
|
3060
|
-
margin?: Space$
|
|
3119
|
+
margin?: Space$1 | Margin;
|
|
3061
3120
|
/**
|
|
3062
3121
|
* Value of the tabindex attribute applied to each tab.
|
|
3063
3122
|
*/
|
|
3064
3123
|
tabIndex?: number;
|
|
3124
|
+
/**
|
|
3125
|
+
* Contains one or more DxcTabs.Tab.
|
|
3126
|
+
*/
|
|
3127
|
+
children?: ReactNode;
|
|
3065
3128
|
};
|
|
3129
|
+
type Props$7 = LegacyProps & NewProps;
|
|
3066
3130
|
|
|
3067
|
-
declare const DxcTabs:
|
|
3131
|
+
declare const DxcTabs: {
|
|
3132
|
+
({ defaultActiveTabIndex, activeTabIndex, tabs, onTabClick, onTabHover, margin, iconPosition, tabIndex, children, }: Props$7): false | react_jsx_runtime.JSX.Element;
|
|
3133
|
+
Tab: react.ForwardRefExoticComponent<TabProps & react.RefAttributes<HTMLButtonElement>>;
|
|
3134
|
+
};
|
|
3068
3135
|
|
|
3069
|
-
type Space$4 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3070
|
-
type Margin$4 = {
|
|
3071
|
-
top?: Space$4;
|
|
3072
|
-
bottom?: Space$4;
|
|
3073
|
-
left?: Space$4;
|
|
3074
|
-
right?: Space$4;
|
|
3075
|
-
};
|
|
3076
|
-
type SVG$3 = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
3077
3136
|
type TagCommonProps = {
|
|
3078
3137
|
/**
|
|
3079
3138
|
* If defined, the tag will be displayed as an anchor, using this prop as "href".
|
|
@@ -3102,7 +3161,7 @@ type TagCommonProps = {
|
|
|
3102
3161
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
3103
3162
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
3104
3163
|
*/
|
|
3105
|
-
margin?: Space$
|
|
3164
|
+
margin?: Space$1 | Margin;
|
|
3106
3165
|
/**
|
|
3107
3166
|
* Size of the component.
|
|
3108
3167
|
*/
|
|
@@ -3116,7 +3175,7 @@ type TagLabelProps = TagCommonProps & {
|
|
|
3116
3175
|
/**
|
|
3117
3176
|
* Material Symbol name or SVG element used as the icon that will be placed next to the label.
|
|
3118
3177
|
*/
|
|
3119
|
-
icon?: string | SVG
|
|
3178
|
+
icon?: string | SVG;
|
|
3120
3179
|
/**
|
|
3121
3180
|
* Text to be placed next inside the tag.
|
|
3122
3181
|
*/
|
|
@@ -3126,7 +3185,7 @@ type TagIconProps = TagCommonProps & {
|
|
|
3126
3185
|
/**
|
|
3127
3186
|
* Material Symbol name or SVG element used as the icon that will be placed next to the label.
|
|
3128
3187
|
*/
|
|
3129
|
-
icon: string | SVG
|
|
3188
|
+
icon: string | SVG;
|
|
3130
3189
|
/**
|
|
3131
3190
|
* Text to be placed next inside the tag.
|
|
3132
3191
|
*/
|
|
@@ -3134,15 +3193,11 @@ type TagIconProps = TagCommonProps & {
|
|
|
3134
3193
|
};
|
|
3135
3194
|
type Props$6 = TagLabelProps | TagIconProps;
|
|
3136
3195
|
|
|
3196
|
+
/**
|
|
3197
|
+
* @deprecated
|
|
3198
|
+
*/
|
|
3137
3199
|
declare const DxcTag: ({ icon, label, linkHref, onClick, iconBgColor, labelPosition, newWindow, margin, size, tabIndex, }: Props$6) => JSX.Element;
|
|
3138
3200
|
|
|
3139
|
-
type Space$3 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3140
|
-
type Margin$3 = {
|
|
3141
|
-
top?: Space$3;
|
|
3142
|
-
bottom?: Space$3;
|
|
3143
|
-
left?: Space$3;
|
|
3144
|
-
right?: Space$3;
|
|
3145
|
-
};
|
|
3146
3201
|
type Props$5 = {
|
|
3147
3202
|
/**
|
|
3148
3203
|
* Text to be placed above the textarea.
|
|
@@ -3262,7 +3317,7 @@ type Props$5 = {
|
|
|
3262
3317
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
3263
3318
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
3264
3319
|
*/
|
|
3265
|
-
margin?: Space$
|
|
3320
|
+
margin?: Space$1 | Margin;
|
|
3266
3321
|
/**
|
|
3267
3322
|
* Size of the component.
|
|
3268
3323
|
*/
|
|
@@ -3271,19 +3326,15 @@ type Props$5 = {
|
|
|
3271
3326
|
* Value of the tabindex attribute.
|
|
3272
3327
|
*/
|
|
3273
3328
|
tabIndex?: number;
|
|
3329
|
+
/**
|
|
3330
|
+
* Specifies a string to be used as the name for the textarea element when no `label` is provided.
|
|
3331
|
+
*/
|
|
3332
|
+
ariaLabel?: string;
|
|
3274
3333
|
};
|
|
3275
3334
|
|
|
3276
3335
|
declare const DxcTextarea: react.ForwardRefExoticComponent<Props$5 & react.RefAttributes<HTMLDivElement>>;
|
|
3277
3336
|
|
|
3278
|
-
type
|
|
3279
|
-
type Margin$2 = {
|
|
3280
|
-
top?: Space$2;
|
|
3281
|
-
bottom?: Space$2;
|
|
3282
|
-
left?: Space$2;
|
|
3283
|
-
right?: Space$2;
|
|
3284
|
-
};
|
|
3285
|
-
type SVG$2 = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
3286
|
-
type Action = {
|
|
3337
|
+
type Action$1 = {
|
|
3287
3338
|
/**
|
|
3288
3339
|
* This function will be called when the user clicks the action.
|
|
3289
3340
|
*/
|
|
@@ -3291,7 +3342,7 @@ type Action = {
|
|
|
3291
3342
|
/**
|
|
3292
3343
|
* Icon to be placed in the action..
|
|
3293
3344
|
*/
|
|
3294
|
-
icon: string | SVG
|
|
3345
|
+
icon: string | SVG;
|
|
3295
3346
|
/**
|
|
3296
3347
|
* Text representing advisory information related
|
|
3297
3348
|
* to the button's action. Under the hood, this prop also serves
|
|
@@ -3327,7 +3378,7 @@ type Props$4 = {
|
|
|
3327
3378
|
/**
|
|
3328
3379
|
* Action to be shown in the input.
|
|
3329
3380
|
*/
|
|
3330
|
-
action?: Action;
|
|
3381
|
+
action?: Action$1;
|
|
3331
3382
|
/**
|
|
3332
3383
|
* If true, the input will have an action to clear the entered value.
|
|
3333
3384
|
*/
|
|
@@ -3433,7 +3484,7 @@ type Props$4 = {
|
|
|
3433
3484
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
3434
3485
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
3435
3486
|
*/
|
|
3436
|
-
margin?: Space$
|
|
3487
|
+
margin?: Space$1 | Margin;
|
|
3437
3488
|
/**
|
|
3438
3489
|
* Size of the component.
|
|
3439
3490
|
*/
|
|
@@ -3442,18 +3493,69 @@ type Props$4 = {
|
|
|
3442
3493
|
* Value of the tabindex attribute.
|
|
3443
3494
|
*/
|
|
3444
3495
|
tabIndex?: number;
|
|
3496
|
+
/**
|
|
3497
|
+
* Specifies a string to be used as the name for the textInput element when no `label` is provided.
|
|
3498
|
+
*/
|
|
3499
|
+
ariaLabel?: string;
|
|
3445
3500
|
};
|
|
3446
3501
|
|
|
3447
3502
|
declare const DxcTextInput: react.ForwardRefExoticComponent<Props$4 & react.RefAttributes<HTMLDivElement>>;
|
|
3448
3503
|
|
|
3449
|
-
type
|
|
3450
|
-
|
|
3451
|
-
|
|
3452
|
-
|
|
3453
|
-
|
|
3454
|
-
|
|
3504
|
+
type Action = {
|
|
3505
|
+
/**
|
|
3506
|
+
* The icon of the action. It can be a string with the name of the icon or an SVG component.
|
|
3507
|
+
*/
|
|
3508
|
+
icon?: string | SVG;
|
|
3509
|
+
/**
|
|
3510
|
+
* The label of the action.
|
|
3511
|
+
*/
|
|
3512
|
+
label: string;
|
|
3513
|
+
/**
|
|
3514
|
+
* The function that will be executed when the user clicks on the action button.
|
|
3515
|
+
*/
|
|
3516
|
+
onClick: () => void;
|
|
3517
|
+
};
|
|
3518
|
+
type CommonProps$1 = {
|
|
3519
|
+
/**
|
|
3520
|
+
* Tertiary button which performs a custom action, specified by the user.
|
|
3521
|
+
*/
|
|
3522
|
+
action?: Action;
|
|
3523
|
+
/**
|
|
3524
|
+
* Message to be displayed as a toast.
|
|
3525
|
+
*/
|
|
3526
|
+
message: string;
|
|
3527
|
+
};
|
|
3528
|
+
type DefaultToast = CommonProps$1 & {
|
|
3529
|
+
/**
|
|
3530
|
+
* Material Symbol name or SVG element as the icon that will be placed next to the panel label.
|
|
3531
|
+
* When using Material Symbols, replace spaces with underscores.
|
|
3532
|
+
* By default they are outlined if you want it to be filled prefix the symbol name with "filled_".
|
|
3533
|
+
*/
|
|
3534
|
+
icon?: string | SVG;
|
|
3535
|
+
};
|
|
3536
|
+
type LoadingToast = CommonProps$1 & {
|
|
3537
|
+
loading: boolean;
|
|
3538
|
+
};
|
|
3539
|
+
type SemanticToast = CommonProps$1 & {
|
|
3540
|
+
/**
|
|
3541
|
+
* Flag that allows to hide the semantic icon of the toast.
|
|
3542
|
+
*/
|
|
3543
|
+
hideSemanticIcon?: boolean;
|
|
3544
|
+
};
|
|
3545
|
+
type ToastsQueuePropsType = {
|
|
3546
|
+
/**
|
|
3547
|
+
* Duration in milliseconds before a toast automatically hides itself.
|
|
3548
|
+
* The range goes from 3000ms to 5000ms, any other value will not be taken into consideration.
|
|
3549
|
+
*/
|
|
3550
|
+
duration?: number;
|
|
3551
|
+
/**
|
|
3552
|
+
* Tree of components from which the useToast hook can be triggered.
|
|
3553
|
+
*/
|
|
3554
|
+
children: ReactNode;
|
|
3455
3555
|
};
|
|
3456
|
-
|
|
3556
|
+
|
|
3557
|
+
declare const DxcToastsQueue: ({ children, duration }: ToastsQueuePropsType) => react_jsx_runtime.JSX.Element;
|
|
3558
|
+
|
|
3457
3559
|
type OptionIcon = {
|
|
3458
3560
|
/**
|
|
3459
3561
|
* String with the option display value.
|
|
@@ -3462,7 +3564,7 @@ type OptionIcon = {
|
|
|
3462
3564
|
/**
|
|
3463
3565
|
* Material Symbols icon or SVG element. Icon and label can't be used at same time.
|
|
3464
3566
|
*/
|
|
3465
|
-
icon: string | SVG
|
|
3567
|
+
icon: string | SVG;
|
|
3466
3568
|
/**
|
|
3467
3569
|
* Value for the HTML properties title and aria-label.
|
|
3468
3570
|
* When a label is defined, this prop can not be use.
|
|
@@ -3477,7 +3579,7 @@ type OptionLabel = {
|
|
|
3477
3579
|
/**
|
|
3478
3580
|
* Material Symbols icon or SVG element. Icon and label can't be used at same time.
|
|
3479
3581
|
*/
|
|
3480
|
-
icon?: string | SVG
|
|
3582
|
+
icon?: string | SVG;
|
|
3481
3583
|
/**
|
|
3482
3584
|
* Value for the HTML properties title and aria-label.
|
|
3483
3585
|
* When a label is defined, this prop can not be use.
|
|
@@ -3511,7 +3613,7 @@ type CommonProps = {
|
|
|
3511
3613
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
3512
3614
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
3513
3615
|
*/
|
|
3514
|
-
margin?: Space$1 | Margin
|
|
3616
|
+
margin?: Space$1 | Margin;
|
|
3515
3617
|
/**
|
|
3516
3618
|
* Value of the tabindex.
|
|
3517
3619
|
*/
|
|
@@ -3569,17 +3671,19 @@ type Props$2 = {
|
|
|
3569
3671
|
/**
|
|
3570
3672
|
* Text to be displayed inside the tooltip.
|
|
3571
3673
|
*/
|
|
3572
|
-
label
|
|
3674
|
+
label?: string;
|
|
3573
3675
|
/**
|
|
3574
3676
|
* Content in which the Tooltip will be displayed.
|
|
3575
3677
|
*/
|
|
3576
|
-
children:
|
|
3678
|
+
children: ReactNode;
|
|
3577
3679
|
};
|
|
3578
3680
|
|
|
3579
|
-
declare
|
|
3681
|
+
declare function DxcTooltip(props: Props$2): react_jsx_runtime.JSX.Element;
|
|
3580
3682
|
|
|
3581
3683
|
type Props$1 = {
|
|
3582
|
-
as?:
|
|
3684
|
+
as?: "a" | "blockquote" | "cite" | "code" | "div" | "em" | "figcaption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "pre" | "small" | "span" | "strong";
|
|
3685
|
+
children: ReactNode;
|
|
3686
|
+
color?: string;
|
|
3583
3687
|
display?: "inline" | "block";
|
|
3584
3688
|
fontFamily?: "Open Sans, sans-serif" | "Source Code Pro, monospace";
|
|
3585
3689
|
fontSize?: "0.75rem" | "0.875rem" | "1rem" | "1.25rem" | "1.5rem" | "2rem" | "3rem" | "3.75rem";
|
|
@@ -3588,23 +3692,13 @@ type Props$1 = {
|
|
|
3588
3692
|
letterSpacing?: "-0.025em" | "-0.0125em" | "0em" | "0.025em" | "0.05em" | "0.1em";
|
|
3589
3693
|
lineHeight?: "1em" | "1.25em" | "1.365em" | "1.5em" | "1.715em" | "2em";
|
|
3590
3694
|
textAlign?: "left" | "center" | "right";
|
|
3591
|
-
color?: string;
|
|
3592
3695
|
textDecoration?: "none" | "underline" | "line-through";
|
|
3593
3696
|
textOverflow?: "clip" | "ellipsis" | "unset";
|
|
3594
3697
|
whiteSpace?: "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap";
|
|
3595
|
-
children: React.ReactNode;
|
|
3596
3698
|
};
|
|
3597
3699
|
|
|
3598
|
-
declare
|
|
3700
|
+
declare function DxcTypography({ children, ...props }: Props$1): react_jsx_runtime.JSX.Element;
|
|
3599
3701
|
|
|
3600
|
-
type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3601
|
-
type Margin = {
|
|
3602
|
-
top?: Space;
|
|
3603
|
-
bottom?: Space;
|
|
3604
|
-
left?: Space;
|
|
3605
|
-
right?: Space;
|
|
3606
|
-
};
|
|
3607
|
-
type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
3608
3702
|
type StepProps = {
|
|
3609
3703
|
/**
|
|
3610
3704
|
* Step label.
|
|
@@ -3653,7 +3747,7 @@ type Props = {
|
|
|
3653
3747
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
3654
3748
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
3655
3749
|
*/
|
|
3656
|
-
margin?: Space | Margin;
|
|
3750
|
+
margin?: Space$1 | Margin;
|
|
3657
3751
|
/**
|
|
3658
3752
|
* Value of the tabindex attribute that is given to all the steps.
|
|
3659
3753
|
*/
|
|
@@ -3707,69 +3801,24 @@ declare const componentTokens: {
|
|
|
3707
3801
|
accordionGroupSeparatorBorderStyle: string;
|
|
3708
3802
|
};
|
|
3709
3803
|
alert: {
|
|
3710
|
-
|
|
3711
|
-
titleFontColor: string;
|
|
3712
|
-
titleFontSize: string;
|
|
3713
|
-
titleFontStyle: string;
|
|
3714
|
-
titleFontWeight: string;
|
|
3715
|
-
titleTextTransform: string;
|
|
3716
|
-
titlePaddingRight: string;
|
|
3717
|
-
titlePaddingLeft: string;
|
|
3718
|
-
inlineTextFontFamily: string;
|
|
3719
|
-
inlineTextFontColor: string;
|
|
3720
|
-
inlineTextFontSize: string;
|
|
3721
|
-
inlineTextFontStyle: string;
|
|
3722
|
-
inlineTextFontWeight: string;
|
|
3723
|
-
inlineTextPaddingLeft: string;
|
|
3724
|
-
inlineTextPaddingRight: string;
|
|
3725
|
-
contentPaddingLeft: string;
|
|
3726
|
-
contentPaddingRight: string;
|
|
3727
|
-
contentPaddingTop: string;
|
|
3728
|
-
contentPaddingBottom: string;
|
|
3729
|
-
borderRadius: string;
|
|
3730
|
-
borderStyle: string;
|
|
3731
|
-
borderThickness: string;
|
|
3732
|
-
infoBorderColor: string;
|
|
3733
|
-
successBorderColor: string;
|
|
3734
|
-
warningBorderColor: string;
|
|
3735
|
-
errorBorderColor: string;
|
|
3736
|
-
iconSize: string;
|
|
3737
|
-
iconPaddingLeft: string;
|
|
3738
|
-
iconPaddingRight: string;
|
|
3739
|
-
infoIconColor: string;
|
|
3740
|
-
successIconColor: string;
|
|
3741
|
-
warningIconColor: string;
|
|
3804
|
+
errorBackgroundColor: string;
|
|
3742
3805
|
errorIconColor: string;
|
|
3806
|
+
fontColor: string;
|
|
3807
|
+
fontFamily: string;
|
|
3808
|
+
fontSize: string;
|
|
3809
|
+
fontStyle: string;
|
|
3810
|
+
fontWeight: string;
|
|
3811
|
+
iconSize: string;
|
|
3743
3812
|
infoBackgroundColor: string;
|
|
3813
|
+
infoIconColor: string;
|
|
3814
|
+
modalBackgroundColor: string;
|
|
3815
|
+
modalTitleFontSize: string;
|
|
3816
|
+
modalTitleFontWeight: string;
|
|
3817
|
+
overlayColor: string;
|
|
3744
3818
|
successBackgroundColor: string;
|
|
3819
|
+
successIconColor: string;
|
|
3745
3820
|
warningBackgroundColor: string;
|
|
3746
|
-
|
|
3747
|
-
hoverActionBackgroundColor: string;
|
|
3748
|
-
activeActionBackgroundColor: string;
|
|
3749
|
-
focusActionBorderColor: string;
|
|
3750
|
-
overlayColor: string;
|
|
3751
|
-
};
|
|
3752
|
-
box: {
|
|
3753
|
-
backgroundColor: string;
|
|
3754
|
-
borderRadius: string;
|
|
3755
|
-
borderThickness: string;
|
|
3756
|
-
borderStyle: string;
|
|
3757
|
-
borderColor: string;
|
|
3758
|
-
noneShadowDepthShadowOffsetX: string;
|
|
3759
|
-
noneShadowDepthShadowOffsetY: string;
|
|
3760
|
-
noneShadowDepthShadowBlur: string;
|
|
3761
|
-
noneShadowDepthShadowSpread: string;
|
|
3762
|
-
noneShadowDepthShadowColor: string;
|
|
3763
|
-
oneShadowDepthShadowOffsetX: string;
|
|
3764
|
-
oneShadowDepthShadowOffsetY: string;
|
|
3765
|
-
oneShadowDepthShadowBlur: string;
|
|
3766
|
-
oneShadowDepthShadowSpread: string;
|
|
3767
|
-
oneShadowDepthShadowColor: string;
|
|
3768
|
-
twoShadowDepthShadowOffsetX: string;
|
|
3769
|
-
twoShadowDepthShadowOffsetY: string;
|
|
3770
|
-
twoShadowDepthShadowBlur: string;
|
|
3771
|
-
twoShadowDepthShadowSpread: string;
|
|
3772
|
-
twoShadowDepthShadowColor: string;
|
|
3821
|
+
warningIconColor: string;
|
|
3773
3822
|
};
|
|
3774
3823
|
bulletedList: {
|
|
3775
3824
|
fontColor: string;
|
|
@@ -4050,6 +4099,16 @@ declare const componentTokens: {
|
|
|
4050
4099
|
focusColor: string;
|
|
4051
4100
|
scrollBarThumbColor: string;
|
|
4052
4101
|
scrollBarTrackColor: string;
|
|
4102
|
+
actionIconColor: string;
|
|
4103
|
+
disabledActionIconColor: string;
|
|
4104
|
+
hoverActionIconColor: string;
|
|
4105
|
+
focusActionIconColor: string;
|
|
4106
|
+
activeActionIconColor: string;
|
|
4107
|
+
actionBackgroundColor: string;
|
|
4108
|
+
disabledActionBackgroundColor: string;
|
|
4109
|
+
hoverActionBackgroundColor: string;
|
|
4110
|
+
focusActionBorderColor: string;
|
|
4111
|
+
activeActionBackgroundColor: string;
|
|
4053
4112
|
};
|
|
4054
4113
|
dateInput: {
|
|
4055
4114
|
pickerBackgroundColor: string;
|
|
@@ -4085,15 +4144,8 @@ declare const componentTokens: {
|
|
|
4085
4144
|
dialog: {
|
|
4086
4145
|
overlayColor: string;
|
|
4087
4146
|
backgroundColor: string;
|
|
4088
|
-
closeIconSize: string;
|
|
4089
|
-
closeIconTopPosition: string;
|
|
4090
|
-
closeIconRightPosition: string;
|
|
4091
4147
|
closeIconBackgroundColor: string;
|
|
4092
|
-
closeIconBorderColor: string;
|
|
4093
4148
|
closeIconColor: string;
|
|
4094
|
-
closeIconBorderThickness: string;
|
|
4095
|
-
closeIconBorderStyle: string;
|
|
4096
|
-
closeIconBorderRadius: string;
|
|
4097
4149
|
boxShadowOffsetX: string;
|
|
4098
4150
|
boxShadowOffsetY: string;
|
|
4099
4151
|
boxShadowBlur: string;
|
|
@@ -4157,7 +4209,7 @@ declare const componentTokens: {
|
|
|
4157
4209
|
helperTextFontColor: string;
|
|
4158
4210
|
dropLabelFontColor: string;
|
|
4159
4211
|
disabledLabelFontColor: string;
|
|
4160
|
-
|
|
4212
|
+
disabledHelperTextFontColor: string;
|
|
4161
4213
|
disabledDropLabelFontColor: string;
|
|
4162
4214
|
focusDropBorderColor: string;
|
|
4163
4215
|
disabledDropBorderColor: string;
|
|
@@ -4228,15 +4280,15 @@ declare const componentTokens: {
|
|
|
4228
4280
|
};
|
|
4229
4281
|
header: {
|
|
4230
4282
|
backgroundColor: string;
|
|
4231
|
-
|
|
4232
|
-
|
|
4233
|
-
|
|
4234
|
-
|
|
4235
|
-
|
|
4236
|
-
|
|
4237
|
-
|
|
4238
|
-
|
|
4239
|
-
|
|
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;
|
|
4240
4292
|
logo: string;
|
|
4241
4293
|
logoResponsive: string;
|
|
4242
4294
|
logoHeight: string;
|
|
@@ -4878,7 +4930,7 @@ declare const componentTokens: {
|
|
|
4878
4930
|
labelFontColor: string;
|
|
4879
4931
|
disabledLabelFontColor: string;
|
|
4880
4932
|
helperTextFontColor: string;
|
|
4881
|
-
|
|
4933
|
+
disabledHelperTextFontColor: string;
|
|
4882
4934
|
unselectedBackgroundColor: string;
|
|
4883
4935
|
unselectedHoverBackgroundColor: string;
|
|
4884
4936
|
unselectedActiveBackgroundColor: string;
|
|
@@ -4994,9 +5046,6 @@ type OpinionatedTheme = {
|
|
|
4994
5046
|
accentColor: string;
|
|
4995
5047
|
overlayColor: string;
|
|
4996
5048
|
};
|
|
4997
|
-
box: {
|
|
4998
|
-
baseColor: string;
|
|
4999
|
-
};
|
|
5000
5049
|
button: {
|
|
5001
5050
|
baseColor: string;
|
|
5002
5051
|
primaryFontColor: string;
|
|
@@ -5051,7 +5100,7 @@ type OpinionatedTheme = {
|
|
|
5051
5100
|
accentColor: string;
|
|
5052
5101
|
fontColor: string;
|
|
5053
5102
|
menuBaseColor: string;
|
|
5054
|
-
|
|
5103
|
+
hamburgerColor: string;
|
|
5055
5104
|
logo: string;
|
|
5056
5105
|
logoResponsive: string;
|
|
5057
5106
|
contentColor: string;
|
|
@@ -5141,22 +5190,20 @@ type OpinionatedTheme = {
|
|
|
5141
5190
|
};
|
|
5142
5191
|
};
|
|
5143
5192
|
declare const defaultTranslatedComponentLabels: {
|
|
5144
|
-
formFields: {
|
|
5145
|
-
optionalLabel: string;
|
|
5146
|
-
requiredSelectionErrorMessage: string;
|
|
5147
|
-
requiredValueErrorMessage: string;
|
|
5148
|
-
formatRequestedErrorMessage: string;
|
|
5149
|
-
lengthErrorMessage: (minLength?: number, maxLength?: number) => string;
|
|
5150
|
-
logoAlternativeText: string;
|
|
5151
|
-
};
|
|
5152
5193
|
applicationLayout: {
|
|
5153
5194
|
visibilityToggleTitle: string;
|
|
5154
5195
|
};
|
|
5155
5196
|
alert: {
|
|
5156
|
-
|
|
5157
|
-
|
|
5158
|
-
|
|
5159
|
-
|
|
5197
|
+
previousMessageActionTitle: string;
|
|
5198
|
+
nextMessageActionTitle: string;
|
|
5199
|
+
closeAlertActionTitle: string;
|
|
5200
|
+
closeMessageActionTitle: string;
|
|
5201
|
+
};
|
|
5202
|
+
calendar: {
|
|
5203
|
+
daysShort: string[];
|
|
5204
|
+
months: string[];
|
|
5205
|
+
previousMonthTitle: string;
|
|
5206
|
+
nextMonthTitle: string;
|
|
5160
5207
|
};
|
|
5161
5208
|
dateInput: {
|
|
5162
5209
|
invalidDateErrorMessage: string;
|
|
@@ -5177,9 +5224,17 @@ declare const defaultTranslatedComponentLabels: {
|
|
|
5177
5224
|
footer: {
|
|
5178
5225
|
copyrightText: (year: number) => string;
|
|
5179
5226
|
};
|
|
5227
|
+
formFields: {
|
|
5228
|
+
optionalLabel: string;
|
|
5229
|
+
requiredSelectionErrorMessage: string;
|
|
5230
|
+
requiredValueErrorMessage: string;
|
|
5231
|
+
formatRequestedErrorMessage: string;
|
|
5232
|
+
lengthErrorMessage: (minLength?: number, maxLength?: number) => string;
|
|
5233
|
+
logoAlternativeText: string;
|
|
5234
|
+
};
|
|
5180
5235
|
header: {
|
|
5181
5236
|
closeIcon: string;
|
|
5182
|
-
|
|
5237
|
+
hamburgerTitle: string;
|
|
5183
5238
|
};
|
|
5184
5239
|
numberInput: {
|
|
5185
5240
|
valueGreaterThanOrEqualToErrorMessage: (value: number) => string;
|
|
@@ -5217,16 +5272,20 @@ declare const defaultTranslatedComponentLabels: {
|
|
|
5217
5272
|
searchingMessage: string;
|
|
5218
5273
|
fetchingDataErrorMessage: string;
|
|
5219
5274
|
};
|
|
5220
|
-
|
|
5221
|
-
|
|
5222
|
-
months: string[];
|
|
5223
|
-
previousMonthTitle: string;
|
|
5224
|
-
nextMonthTitle: string;
|
|
5275
|
+
toast: {
|
|
5276
|
+
clearToastActionTitle: string;
|
|
5225
5277
|
};
|
|
5226
5278
|
};
|
|
5227
5279
|
type TranslatedLabels = typeof defaultTranslatedComponentLabels;
|
|
5228
5280
|
|
|
5229
|
-
|
|
5281
|
+
/**
|
|
5282
|
+
* This type is used to allow partial themes and labels objects to be passed to the HalstackProvider.
|
|
5283
|
+
* This is an extension of the already existing Partial type, which only allows one level of partiality.
|
|
5284
|
+
*/
|
|
5285
|
+
type DeepPartial<T> = {
|
|
5286
|
+
[P in keyof T]?: Partial<T[P]>;
|
|
5287
|
+
};
|
|
5288
|
+
declare const HalstackContext: react.Context<{
|
|
5230
5289
|
accordion: {
|
|
5231
5290
|
backgroundColor: string;
|
|
5232
5291
|
hoverBackgroundColor: string;
|
|
@@ -5271,69 +5330,24 @@ declare const HalstackContext: react.Context<DeepPartial<{
|
|
|
5271
5330
|
accordionGroupSeparatorBorderStyle: string;
|
|
5272
5331
|
};
|
|
5273
5332
|
alert: {
|
|
5274
|
-
|
|
5275
|
-
titleFontColor: string;
|
|
5276
|
-
titleFontSize: string;
|
|
5277
|
-
titleFontStyle: string;
|
|
5278
|
-
titleFontWeight: string;
|
|
5279
|
-
titleTextTransform: string;
|
|
5280
|
-
titlePaddingRight: string;
|
|
5281
|
-
titlePaddingLeft: string;
|
|
5282
|
-
inlineTextFontFamily: string;
|
|
5283
|
-
inlineTextFontColor: string;
|
|
5284
|
-
inlineTextFontSize: string;
|
|
5285
|
-
inlineTextFontStyle: string;
|
|
5286
|
-
inlineTextFontWeight: string;
|
|
5287
|
-
inlineTextPaddingLeft: string;
|
|
5288
|
-
inlineTextPaddingRight: string;
|
|
5289
|
-
contentPaddingLeft: string;
|
|
5290
|
-
contentPaddingRight: string;
|
|
5291
|
-
contentPaddingTop: string;
|
|
5292
|
-
contentPaddingBottom: string;
|
|
5293
|
-
borderRadius: string;
|
|
5294
|
-
borderStyle: string;
|
|
5295
|
-
borderThickness: string;
|
|
5296
|
-
infoBorderColor: string;
|
|
5297
|
-
successBorderColor: string;
|
|
5298
|
-
warningBorderColor: string;
|
|
5299
|
-
errorBorderColor: string;
|
|
5300
|
-
iconSize: string;
|
|
5301
|
-
iconPaddingLeft: string;
|
|
5302
|
-
iconPaddingRight: string;
|
|
5303
|
-
infoIconColor: string;
|
|
5304
|
-
successIconColor: string;
|
|
5305
|
-
warningIconColor: string;
|
|
5333
|
+
errorBackgroundColor: string;
|
|
5306
5334
|
errorIconColor: string;
|
|
5335
|
+
fontColor: string;
|
|
5336
|
+
fontFamily: string;
|
|
5337
|
+
fontSize: string;
|
|
5338
|
+
fontStyle: string;
|
|
5339
|
+
fontWeight: string;
|
|
5340
|
+
iconSize: string;
|
|
5307
5341
|
infoBackgroundColor: string;
|
|
5342
|
+
infoIconColor: string;
|
|
5343
|
+
modalBackgroundColor: string;
|
|
5344
|
+
modalTitleFontSize: string;
|
|
5345
|
+
modalTitleFontWeight: string;
|
|
5346
|
+
overlayColor: string;
|
|
5308
5347
|
successBackgroundColor: string;
|
|
5348
|
+
successIconColor: string;
|
|
5309
5349
|
warningBackgroundColor: string;
|
|
5310
|
-
|
|
5311
|
-
hoverActionBackgroundColor: string;
|
|
5312
|
-
activeActionBackgroundColor: string;
|
|
5313
|
-
focusActionBorderColor: string;
|
|
5314
|
-
overlayColor: string;
|
|
5315
|
-
};
|
|
5316
|
-
box: {
|
|
5317
|
-
backgroundColor: string;
|
|
5318
|
-
borderRadius: string;
|
|
5319
|
-
borderThickness: string;
|
|
5320
|
-
borderStyle: string;
|
|
5321
|
-
borderColor: string;
|
|
5322
|
-
noneShadowDepthShadowOffsetX: string;
|
|
5323
|
-
noneShadowDepthShadowOffsetY: string;
|
|
5324
|
-
noneShadowDepthShadowBlur: string;
|
|
5325
|
-
noneShadowDepthShadowSpread: string;
|
|
5326
|
-
noneShadowDepthShadowColor: string;
|
|
5327
|
-
oneShadowDepthShadowOffsetX: string;
|
|
5328
|
-
oneShadowDepthShadowOffsetY: string;
|
|
5329
|
-
oneShadowDepthShadowBlur: string;
|
|
5330
|
-
oneShadowDepthShadowSpread: string;
|
|
5331
|
-
oneShadowDepthShadowColor: string;
|
|
5332
|
-
twoShadowDepthShadowOffsetX: string;
|
|
5333
|
-
twoShadowDepthShadowOffsetY: string;
|
|
5334
|
-
twoShadowDepthShadowBlur: string;
|
|
5335
|
-
twoShadowDepthShadowSpread: string;
|
|
5336
|
-
twoShadowDepthShadowColor: string;
|
|
5350
|
+
warningIconColor: string;
|
|
5337
5351
|
};
|
|
5338
5352
|
bulletedList: {
|
|
5339
5353
|
fontColor: string;
|
|
@@ -5614,6 +5628,16 @@ declare const HalstackContext: react.Context<DeepPartial<{
|
|
|
5614
5628
|
focusColor: string;
|
|
5615
5629
|
scrollBarThumbColor: string;
|
|
5616
5630
|
scrollBarTrackColor: string;
|
|
5631
|
+
actionIconColor: string;
|
|
5632
|
+
disabledActionIconColor: string;
|
|
5633
|
+
hoverActionIconColor: string;
|
|
5634
|
+
focusActionIconColor: string;
|
|
5635
|
+
activeActionIconColor: string;
|
|
5636
|
+
actionBackgroundColor: string;
|
|
5637
|
+
disabledActionBackgroundColor: string;
|
|
5638
|
+
hoverActionBackgroundColor: string;
|
|
5639
|
+
focusActionBorderColor: string;
|
|
5640
|
+
activeActionBackgroundColor: string;
|
|
5617
5641
|
};
|
|
5618
5642
|
dateInput: {
|
|
5619
5643
|
pickerBackgroundColor: string;
|
|
@@ -5649,15 +5673,8 @@ declare const HalstackContext: react.Context<DeepPartial<{
|
|
|
5649
5673
|
dialog: {
|
|
5650
5674
|
overlayColor: string;
|
|
5651
5675
|
backgroundColor: string;
|
|
5652
|
-
closeIconSize: string;
|
|
5653
|
-
closeIconTopPosition: string;
|
|
5654
|
-
closeIconRightPosition: string;
|
|
5655
5676
|
closeIconBackgroundColor: string;
|
|
5656
|
-
closeIconBorderColor: string;
|
|
5657
5677
|
closeIconColor: string;
|
|
5658
|
-
closeIconBorderThickness: string;
|
|
5659
|
-
closeIconBorderStyle: string;
|
|
5660
|
-
closeIconBorderRadius: string;
|
|
5661
5678
|
boxShadowOffsetX: string;
|
|
5662
5679
|
boxShadowOffsetY: string;
|
|
5663
5680
|
boxShadowBlur: string;
|
|
@@ -5721,7 +5738,7 @@ declare const HalstackContext: react.Context<DeepPartial<{
|
|
|
5721
5738
|
helperTextFontColor: string;
|
|
5722
5739
|
dropLabelFontColor: string;
|
|
5723
5740
|
disabledLabelFontColor: string;
|
|
5724
|
-
|
|
5741
|
+
disabledHelperTextFontColor: string;
|
|
5725
5742
|
disabledDropLabelFontColor: string;
|
|
5726
5743
|
focusDropBorderColor: string;
|
|
5727
5744
|
disabledDropBorderColor: string;
|
|
@@ -5792,15 +5809,15 @@ declare const HalstackContext: react.Context<DeepPartial<{
|
|
|
5792
5809
|
};
|
|
5793
5810
|
header: {
|
|
5794
5811
|
backgroundColor: string;
|
|
5795
|
-
|
|
5796
|
-
|
|
5797
|
-
|
|
5798
|
-
|
|
5799
|
-
|
|
5800
|
-
|
|
5801
|
-
|
|
5802
|
-
|
|
5803
|
-
|
|
5812
|
+
hamburgerFocusColor: string;
|
|
5813
|
+
hamburgerFontFamily: string;
|
|
5814
|
+
hamburgerFontStyle: string;
|
|
5815
|
+
hamburgerFontColor: string;
|
|
5816
|
+
hamburgerFontSize: string;
|
|
5817
|
+
hamburgerFontWeight: string;
|
|
5818
|
+
hamburgerTextTransform: string;
|
|
5819
|
+
hamburgerIconColor: string;
|
|
5820
|
+
hamburgerHoverColor: string;
|
|
5804
5821
|
logo: string;
|
|
5805
5822
|
logoResponsive: string;
|
|
5806
5823
|
logoHeight: string;
|
|
@@ -6442,7 +6459,7 @@ declare const HalstackContext: react.Context<DeepPartial<{
|
|
|
6442
6459
|
labelFontColor: string;
|
|
6443
6460
|
disabledLabelFontColor: string;
|
|
6444
6461
|
helperTextFontColor: string;
|
|
6445
|
-
|
|
6462
|
+
disabledHelperTextFontColor: string;
|
|
6446
6463
|
unselectedBackgroundColor: string;
|
|
6447
6464
|
unselectedHoverBackgroundColor: string;
|
|
6448
6465
|
unselectedActiveBackgroundColor: string;
|
|
@@ -6545,24 +6562,22 @@ declare const HalstackContext: react.Context<DeepPartial<{
|
|
|
6545
6562
|
separatorColor: string;
|
|
6546
6563
|
focusColor: string;
|
|
6547
6564
|
};
|
|
6548
|
-
}
|
|
6549
|
-
declare const HalstackLanguageContext: react.Context<
|
|
6550
|
-
formFields: {
|
|
6551
|
-
optionalLabel: string;
|
|
6552
|
-
requiredSelectionErrorMessage: string;
|
|
6553
|
-
requiredValueErrorMessage: string;
|
|
6554
|
-
formatRequestedErrorMessage: string;
|
|
6555
|
-
lengthErrorMessage: (minLength?: number, maxLength?: number) => string;
|
|
6556
|
-
logoAlternativeText: string;
|
|
6557
|
-
};
|
|
6565
|
+
}>;
|
|
6566
|
+
declare const HalstackLanguageContext: react.Context<{
|
|
6558
6567
|
applicationLayout: {
|
|
6559
6568
|
visibilityToggleTitle: string;
|
|
6560
6569
|
};
|
|
6561
6570
|
alert: {
|
|
6562
|
-
|
|
6563
|
-
|
|
6564
|
-
|
|
6565
|
-
|
|
6571
|
+
previousMessageActionTitle: string;
|
|
6572
|
+
nextMessageActionTitle: string;
|
|
6573
|
+
closeAlertActionTitle: string;
|
|
6574
|
+
closeMessageActionTitle: string;
|
|
6575
|
+
};
|
|
6576
|
+
calendar: {
|
|
6577
|
+
daysShort: string[];
|
|
6578
|
+
months: string[];
|
|
6579
|
+
previousMonthTitle: string;
|
|
6580
|
+
nextMonthTitle: string;
|
|
6566
6581
|
};
|
|
6567
6582
|
dateInput: {
|
|
6568
6583
|
invalidDateErrorMessage: string;
|
|
@@ -6583,9 +6598,17 @@ declare const HalstackLanguageContext: react.Context<DeepPartial<{
|
|
|
6583
6598
|
footer: {
|
|
6584
6599
|
copyrightText: (year: number) => string;
|
|
6585
6600
|
};
|
|
6601
|
+
formFields: {
|
|
6602
|
+
optionalLabel: string;
|
|
6603
|
+
requiredSelectionErrorMessage: string;
|
|
6604
|
+
requiredValueErrorMessage: string;
|
|
6605
|
+
formatRequestedErrorMessage: string;
|
|
6606
|
+
lengthErrorMessage: (minLength?: number, maxLength?: number) => string;
|
|
6607
|
+
logoAlternativeText: string;
|
|
6608
|
+
};
|
|
6586
6609
|
header: {
|
|
6587
6610
|
closeIcon: string;
|
|
6588
|
-
|
|
6611
|
+
hamburgerTitle: string;
|
|
6589
6612
|
};
|
|
6590
6613
|
numberInput: {
|
|
6591
6614
|
valueGreaterThanOrEqualToErrorMessage: (value: number) => string;
|
|
@@ -6623,26 +6646,24 @@ declare const HalstackLanguageContext: react.Context<DeepPartial<{
|
|
|
6623
6646
|
searchingMessage: string;
|
|
6624
6647
|
fetchingDataErrorMessage: string;
|
|
6625
6648
|
};
|
|
6626
|
-
|
|
6627
|
-
|
|
6628
|
-
months: string[];
|
|
6629
|
-
previousMonthTitle: string;
|
|
6630
|
-
nextMonthTitle: string;
|
|
6649
|
+
toast: {
|
|
6650
|
+
clearToastActionTitle: string;
|
|
6631
6651
|
};
|
|
6632
|
-
}
|
|
6633
|
-
/**
|
|
6634
|
-
* This type is used to allow partial themes and labels objects to be passed to the HalstackProvider.
|
|
6635
|
-
* This is an extension of the already existing Partial type, which only allows one level of partiality.
|
|
6636
|
-
*/
|
|
6637
|
-
type DeepPartial<T> = {
|
|
6638
|
-
[P in keyof T]?: Partial<T[P]>;
|
|
6639
|
-
};
|
|
6652
|
+
}>;
|
|
6640
6653
|
type HalstackProviderPropsType = {
|
|
6641
6654
|
theme?: DeepPartial<OpinionatedTheme>;
|
|
6642
6655
|
advancedTheme?: DeepPartial<AdvancedTheme>;
|
|
6643
6656
|
labels?: DeepPartial<TranslatedLabels>;
|
|
6644
|
-
children:
|
|
6657
|
+
children: ReactNode;
|
|
6645
6658
|
};
|
|
6646
6659
|
declare const HalstackProvider: ({ theme, advancedTheme, labels, children }: HalstackProviderPropsType) => JSX.Element;
|
|
6647
6660
|
|
|
6648
|
-
|
|
6661
|
+
declare const useToast: () => {
|
|
6662
|
+
default: (toast: DefaultToast) => (() => void) | undefined;
|
|
6663
|
+
success: (toast: SemanticToast) => (() => void) | undefined;
|
|
6664
|
+
warning: (toast: SemanticToast) => (() => void) | undefined;
|
|
6665
|
+
info: (toast: SemanticToast) => (() => void) | undefined;
|
|
6666
|
+
loading: (toast: Omit<LoadingToast, "loading">) => (() => void) | undefined;
|
|
6667
|
+
};
|
|
6668
|
+
|
|
6669
|
+
export { DxcAccordion, DxcAccordionGroup, 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 };
|