@dxc-technology/halstack-react 0.0.0-d2c7176 → 0.0.0-d2ed61f
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 +194 -283
- package/dist/index.d.ts +194 -283
- package/dist/index.js +1510 -1748
- package/dist/index.mjs +1508 -1745
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -111,10 +111,10 @@ type NonIndependentProps = CommonProps$9 & {
|
|
|
111
111
|
*/
|
|
112
112
|
onActiveChange?: (index: number[]) => void;
|
|
113
113
|
};
|
|
114
|
-
type Props$
|
|
114
|
+
type Props$I = IndependentProps | NonIndependentProps;
|
|
115
115
|
|
|
116
116
|
declare const DxcAccordion: {
|
|
117
|
-
(props: Props$
|
|
117
|
+
(props: Props$I): JSX.Element;
|
|
118
118
|
AccordionItem: ({ label, subLabel, badge, statusLight, icon, assistiveText, disabled, children, tabIndex, }: AccordionItemProps) => JSX.Element;
|
|
119
119
|
};
|
|
120
120
|
|
|
@@ -197,9 +197,9 @@ type ModeSpecificProps = {
|
|
|
197
197
|
*/
|
|
198
198
|
mode: "modal";
|
|
199
199
|
};
|
|
200
|
-
type Props$
|
|
200
|
+
type Props$H = CommonProps$8 & ModeSpecificProps;
|
|
201
201
|
|
|
202
|
-
declare function DxcAlert({ closable, message, mode, primaryAction, secondaryAction, semantic, title, }: Props$
|
|
202
|
+
declare function DxcAlert({ closable, message, mode, primaryAction, secondaryAction, semantic, title, }: Props$H): react_jsx_runtime.JSX.Element;
|
|
203
203
|
|
|
204
204
|
type SidenavTitlePropsType = {
|
|
205
205
|
/**
|
|
@@ -264,7 +264,7 @@ type SidenavLinkPropsType = {
|
|
|
264
264
|
*/
|
|
265
265
|
tabIndex?: number;
|
|
266
266
|
};
|
|
267
|
-
type Props$
|
|
267
|
+
type Props$G = {
|
|
268
268
|
/**
|
|
269
269
|
* The area assigned to render the sidenav title. It is highly recommended to use the sidenav title.
|
|
270
270
|
*/
|
|
@@ -290,7 +290,7 @@ type Option$2 = {
|
|
|
290
290
|
*/
|
|
291
291
|
value: string;
|
|
292
292
|
};
|
|
293
|
-
type Props$
|
|
293
|
+
type Props$F = {
|
|
294
294
|
/**
|
|
295
295
|
* An array of objects representing the options.
|
|
296
296
|
*/
|
|
@@ -350,7 +350,7 @@ type Props$G = {
|
|
|
350
350
|
title?: string;
|
|
351
351
|
};
|
|
352
352
|
|
|
353
|
-
type Props$
|
|
353
|
+
type Props$E = {
|
|
354
354
|
/**
|
|
355
355
|
* Whether a contrast line should appear at the bottom of the header.
|
|
356
356
|
*/
|
|
@@ -476,12 +476,12 @@ declare const DxcApplicationLayout: {
|
|
|
476
476
|
({ visibilityToggleLabel, header, sidenav, footer, children, }: ApplicationLayoutPropsType): JSX.Element;
|
|
477
477
|
Footer: ({ socialLinks, bottomLinks, copyright, children, margin, tabIndex, mode, }: FooterPropsType) => JSX.Element;
|
|
478
478
|
Header: {
|
|
479
|
-
({ underlined, content, responsiveContent, onClick, margin, tabIndex, }: Props$
|
|
480
|
-
Dropdown: (props: react.ComponentProps<({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$
|
|
479
|
+
({ underlined, content, responsiveContent, onClick, margin, tabIndex, }: Props$E): JSX.Element;
|
|
480
|
+
Dropdown: (props: react.ComponentProps<({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$F) => react_jsx_runtime.JSX.Element>) => react_jsx_runtime.JSX.Element;
|
|
481
481
|
};
|
|
482
482
|
Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
|
|
483
483
|
SideNav: {
|
|
484
|
-
({ title, children }: Props$
|
|
484
|
+
({ title, children }: Props$G): JSX.Element;
|
|
485
485
|
Section: ({ children }: SidenavSectionPropsType) => JSX.Element;
|
|
486
486
|
Group: ({ title, collapsable, icon, children }: SidenavGroupPropsType) => JSX.Element;
|
|
487
487
|
Link: react.ForwardRefExoticComponent<SidenavLinkPropsType & react.RefAttributes<HTMLAnchorElement>>;
|
|
@@ -540,11 +540,11 @@ type CommonProps$7 = {
|
|
|
540
540
|
*/
|
|
541
541
|
size?: "small" | "medium" | "large";
|
|
542
542
|
};
|
|
543
|
-
type Props$
|
|
543
|
+
type Props$D = (ContextualProps | NotificationProps) & CommonProps$7;
|
|
544
544
|
|
|
545
|
-
declare const DxcBadge: ({ label, title, mode, color, icon, notificationLimit, size, }: Props$
|
|
545
|
+
declare const DxcBadge: ({ label, title, mode, color, icon, notificationLimit, size, }: Props$D) => JSX.Element;
|
|
546
546
|
|
|
547
|
-
type Props$
|
|
547
|
+
type Props$C = {
|
|
548
548
|
/**
|
|
549
549
|
* Applies the spacing scale to all sides.
|
|
550
550
|
*/
|
|
@@ -579,13 +579,13 @@ type Props$D = {
|
|
|
579
579
|
children: ReactNode;
|
|
580
580
|
};
|
|
581
581
|
|
|
582
|
-
declare function DxcBleed({ space, horizontal, vertical, top, right, bottom, left, children }: Props$
|
|
582
|
+
declare function DxcBleed({ space, horizontal, vertical, top, right, bottom, left, children }: Props$C): react_jsx_runtime.JSX.Element;
|
|
583
583
|
|
|
584
584
|
type Item$1 = {
|
|
585
585
|
href?: string;
|
|
586
586
|
label: string;
|
|
587
587
|
};
|
|
588
|
-
type Props$
|
|
588
|
+
type Props$B = {
|
|
589
589
|
/**
|
|
590
590
|
* Provides a label that describes the type of navigation enabled by
|
|
591
591
|
* the component.
|
|
@@ -617,7 +617,7 @@ type Props$C = {
|
|
|
617
617
|
showRoot?: boolean;
|
|
618
618
|
};
|
|
619
619
|
|
|
620
|
-
declare const DxcBreadcrumbs: ({ ariaLabel, items, itemsBeforeCollapse, onItemClick, showRoot, }: Props$
|
|
620
|
+
declare const DxcBreadcrumbs: ({ ariaLabel, items, itemsBeforeCollapse, onItemClick, showRoot, }: Props$B) => react_jsx_runtime.JSX.Element;
|
|
621
621
|
|
|
622
622
|
type IconProps = {
|
|
623
623
|
/**
|
|
@@ -647,7 +647,7 @@ type OtherProps = {
|
|
|
647
647
|
*/
|
|
648
648
|
children: ReactNode;
|
|
649
649
|
};
|
|
650
|
-
type Props$
|
|
650
|
+
type Props$A = IconProps | OtherProps;
|
|
651
651
|
|
|
652
652
|
type BulletedListItemPropsType = {
|
|
653
653
|
/**
|
|
@@ -657,7 +657,7 @@ type BulletedListItemPropsType = {
|
|
|
657
657
|
};
|
|
658
658
|
|
|
659
659
|
declare const DxcBulletedList: {
|
|
660
|
-
({ children, type, icon }: Props$
|
|
660
|
+
({ children, type, icon }: Props$A): JSX.Element;
|
|
661
661
|
Item: ({ children }: BulletedListItemPropsType) => JSX.Element;
|
|
662
662
|
};
|
|
663
663
|
|
|
@@ -670,7 +670,7 @@ type Size$3 = {
|
|
|
670
670
|
height?: "small" | "medium" | "large";
|
|
671
671
|
width?: "small" | "medium" | "large" | "fillParent" | "fitContent";
|
|
672
672
|
};
|
|
673
|
-
type Props$
|
|
673
|
+
type Props$z = {
|
|
674
674
|
/**
|
|
675
675
|
* Text to be placed in the button.
|
|
676
676
|
*/
|
|
@@ -722,7 +722,7 @@ type Props$A = {
|
|
|
722
722
|
tabIndex?: number;
|
|
723
723
|
};
|
|
724
724
|
|
|
725
|
-
declare const DxcButton: ({ disabled, icon, iconPosition, label, margin, mode, onClick, semantic, size, tabIndex, title, type, }: Props$
|
|
725
|
+
declare const DxcButton: ({ disabled, icon, iconPosition, label, margin, mode, onClick, semantic, size, tabIndex, title, type, }: Props$z) => JSX.Element;
|
|
726
726
|
|
|
727
727
|
type Size$2 = {
|
|
728
728
|
top?: Space$1;
|
|
@@ -730,7 +730,7 @@ type Size$2 = {
|
|
|
730
730
|
left?: Space$1;
|
|
731
731
|
right?: Space$1;
|
|
732
732
|
};
|
|
733
|
-
type Props$
|
|
733
|
+
type Props$y = {
|
|
734
734
|
/**
|
|
735
735
|
* URL of the image that will be placed in the card component.
|
|
736
736
|
* In case of omission, the image container will not appear and
|
|
@@ -784,9 +784,9 @@ type Props$z = {
|
|
|
784
784
|
children?: ReactNode;
|
|
785
785
|
};
|
|
786
786
|
|
|
787
|
-
declare const DxcCard: ({ imageSrc, imageBgColor, imagePadding, imagePosition, linkHref, onClick, imageCover, margin, tabIndex, outlined, children, }: Props$
|
|
787
|
+
declare const DxcCard: ({ imageSrc, imageBgColor, imagePadding, imagePosition, linkHref, onClick, imageCover, margin, tabIndex, outlined, children, }: Props$y) => react_jsx_runtime.JSX.Element;
|
|
788
788
|
|
|
789
|
-
type Props$
|
|
789
|
+
type Props$x = {
|
|
790
790
|
/**
|
|
791
791
|
* Specifies a string to be used as the name for the checkbox element when no `label` is provided.
|
|
792
792
|
*/
|
|
@@ -851,9 +851,9 @@ type Props$y = {
|
|
|
851
851
|
value?: string;
|
|
852
852
|
};
|
|
853
853
|
|
|
854
|
-
declare const DxcCheckbox: react.ForwardRefExoticComponent<Props$
|
|
854
|
+
declare const DxcCheckbox: react.ForwardRefExoticComponent<Props$x & react.RefAttributes<HTMLDivElement>>;
|
|
855
855
|
|
|
856
|
-
type Props$
|
|
856
|
+
type Props$w = {
|
|
857
857
|
/**
|
|
858
858
|
* Text to be placed on the chip.
|
|
859
859
|
*/
|
|
@@ -889,7 +889,7 @@ type Props$x = {
|
|
|
889
889
|
tabIndex?: number;
|
|
890
890
|
};
|
|
891
891
|
|
|
892
|
-
declare const DxcChip: ({ label, suffixIcon, prefixIcon, onClickSuffix, onClickPrefix, disabled, margin, tabIndex, }: Props$
|
|
892
|
+
declare const DxcChip: ({ label, suffixIcon, prefixIcon, onClickSuffix, onClickPrefix, disabled, margin, tabIndex, }: Props$w) => react_jsx_runtime.JSX.Element;
|
|
893
893
|
|
|
894
894
|
type Space = {
|
|
895
895
|
top?: string;
|
|
@@ -932,7 +932,7 @@ type Overflow = OverflowValues | {
|
|
|
932
932
|
x?: OverflowValues;
|
|
933
933
|
y?: OverflowValues;
|
|
934
934
|
};
|
|
935
|
-
type Props$
|
|
935
|
+
type Props$v = {
|
|
936
936
|
/**
|
|
937
937
|
* Based on the CSS property background allows configuring all properties related to the background of a container.
|
|
938
938
|
*
|
|
@@ -1054,7 +1054,7 @@ type Props$w = {
|
|
|
1054
1054
|
zIndex?: "auto" | number;
|
|
1055
1055
|
};
|
|
1056
1056
|
|
|
1057
|
-
declare function DxcContainer({ display, width, height, overflow, ...props }: Props$
|
|
1057
|
+
declare function DxcContainer({ display, width, height, overflow, ...props }: Props$v): react_jsx_runtime.JSX.Element;
|
|
1058
1058
|
|
|
1059
1059
|
type CommonItemProps = {
|
|
1060
1060
|
badge?: ReactElement;
|
|
@@ -1072,7 +1072,7 @@ type Section = {
|
|
|
1072
1072
|
items: (Item | GroupItem)[];
|
|
1073
1073
|
title?: string;
|
|
1074
1074
|
};
|
|
1075
|
-
type Props$
|
|
1075
|
+
type Props$u = {
|
|
1076
1076
|
/**
|
|
1077
1077
|
* Array of items to be displayed in the Contextual menu.
|
|
1078
1078
|
* Each item can be a single/simple item, a group item or a section.
|
|
@@ -1080,27 +1080,32 @@ type Props$v = {
|
|
|
1080
1080
|
items: (Item | GroupItem)[] | Section[];
|
|
1081
1081
|
};
|
|
1082
1082
|
|
|
1083
|
-
declare function DxcContextualMenu({ items }: Props$
|
|
1083
|
+
declare function DxcContextualMenu({ items }: Props$u): react_jsx_runtime.JSX.Element;
|
|
1084
1084
|
|
|
1085
|
-
type
|
|
1086
|
-
|
|
1085
|
+
type BaseActionCell = {
|
|
1086
|
+
disabled?: boolean;
|
|
1087
|
+
tabIndex?: number;
|
|
1088
|
+
title: string;
|
|
1087
1089
|
};
|
|
1088
|
-
type
|
|
1090
|
+
type ActionCell = BaseActionCell & ({
|
|
1089
1091
|
icon: string | SVG;
|
|
1090
|
-
title: string;
|
|
1091
1092
|
onClick: () => void;
|
|
1092
|
-
disabled?: boolean;
|
|
1093
|
-
tabIndex?: number;
|
|
1094
1093
|
options?: never;
|
|
1095
1094
|
} | {
|
|
1096
1095
|
icon?: never;
|
|
1097
|
-
title: string;
|
|
1098
1096
|
onClick: (value?: string) => void;
|
|
1099
|
-
disabled?: boolean;
|
|
1100
|
-
tabIndex?: number;
|
|
1101
1097
|
options: Option$2[];
|
|
1102
|
-
}
|
|
1103
|
-
type
|
|
1098
|
+
});
|
|
1099
|
+
type ActionsCellPropsType = {
|
|
1100
|
+
/**
|
|
1101
|
+
* It represents a list of interactive elements that will work as buttons or as a dropdown. Those with an icon from Material Symbols
|
|
1102
|
+
* or a SVG are treated as buttons. If any element lacks an icon and includes options, it is interpreted as a dropdown.
|
|
1103
|
+
* Only the first action with options will be displayed and only up to 3 actions.
|
|
1104
|
+
* In the case of the dropdown the click function will pass the value assigned to the option.
|
|
1105
|
+
*/
|
|
1106
|
+
actions: ActionCell[];
|
|
1107
|
+
};
|
|
1108
|
+
type Props$t = {
|
|
1104
1109
|
/**
|
|
1105
1110
|
* The center section of the table. Can be used to render custom
|
|
1106
1111
|
* content in this area.
|
|
@@ -1309,14 +1314,14 @@ type BasicGridProps = {
|
|
|
1309
1314
|
*/
|
|
1310
1315
|
expandable?: false;
|
|
1311
1316
|
};
|
|
1312
|
-
type Props$
|
|
1317
|
+
type Props$s = CommonProps$6 & (PaginatedProps$1 | NonPaginatedProps$1) & ((BasicGridProps & SelectableGridProps) | (ExpandableRows & SelectableGridProps) | (HierarchyRows & SelectableGridProps));
|
|
1313
1318
|
|
|
1314
1319
|
declare const DxcDataGrid: {
|
|
1315
|
-
({ columns, rows, selectable, expandable, onSelectRows, selectedRows, uniqueRowId, summaryRow, onGridRowsChange, showPaginator, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, onSort, onPageChange, totalItems, defaultPage, }: Props$
|
|
1316
|
-
ActionsCell: ({ actions }:
|
|
1320
|
+
({ columns, rows, selectable, expandable, onSelectRows, selectedRows, uniqueRowId, summaryRow, onGridRowsChange, showPaginator, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, onSort, onPageChange, totalItems, defaultPage, }: Props$s): JSX.Element;
|
|
1321
|
+
ActionsCell: ({ actions }: ActionsCellPropsType) => react_jsx_runtime.JSX.Element;
|
|
1317
1322
|
};
|
|
1318
1323
|
|
|
1319
|
-
type Props$
|
|
1324
|
+
type Props$r = {
|
|
1320
1325
|
/**
|
|
1321
1326
|
* Initial value of the input element, only when it is uncontrolled.
|
|
1322
1327
|
*/
|
|
@@ -1422,9 +1427,9 @@ type Props$s = {
|
|
|
1422
1427
|
ariaLabel?: string;
|
|
1423
1428
|
};
|
|
1424
1429
|
|
|
1425
|
-
declare const DxcDateInput: react.ForwardRefExoticComponent<Props$
|
|
1430
|
+
declare const DxcDateInput: react.ForwardRefExoticComponent<Props$r & react.RefAttributes<HTMLDivElement>>;
|
|
1426
1431
|
|
|
1427
|
-
type Props$
|
|
1432
|
+
type Props$q = {
|
|
1428
1433
|
/**
|
|
1429
1434
|
* If true, the close button will be visible.
|
|
1430
1435
|
*/
|
|
@@ -1459,9 +1464,9 @@ type Props$r = {
|
|
|
1459
1464
|
tabIndex?: number;
|
|
1460
1465
|
};
|
|
1461
1466
|
|
|
1462
|
-
declare const DxcDialog: ({ children, closable, onBackgroundClick, onCloseClick, overlay, tabIndex, }: Props$
|
|
1467
|
+
declare const DxcDialog: ({ children, closable, onBackgroundClick, onCloseClick, overlay, tabIndex, }: Props$q) => JSX.Element;
|
|
1463
1468
|
|
|
1464
|
-
type Props$
|
|
1469
|
+
type Props$p = {
|
|
1465
1470
|
/**
|
|
1466
1471
|
* The divider can be shown in horizontal or vertical.
|
|
1467
1472
|
*/
|
|
@@ -1482,9 +1487,9 @@ type Props$q = {
|
|
|
1482
1487
|
decorative?: boolean;
|
|
1483
1488
|
};
|
|
1484
1489
|
|
|
1485
|
-
declare
|
|
1490
|
+
declare function DxcDivider({ color, decorative, orientation, weight, }: Props$p): react_jsx_runtime.JSX.Element;
|
|
1486
1491
|
|
|
1487
|
-
declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$
|
|
1492
|
+
declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$F) => react_jsx_runtime.JSX.Element;
|
|
1488
1493
|
|
|
1489
1494
|
type FileData = {
|
|
1490
1495
|
/**
|
|
@@ -1585,9 +1590,9 @@ type FileModeProps = CommonProps$5 & {
|
|
|
1585
1590
|
*/
|
|
1586
1591
|
dropAreaLabel?: never;
|
|
1587
1592
|
};
|
|
1588
|
-
type Props$
|
|
1593
|
+
type Props$o = DropModeProps | FileModeProps;
|
|
1589
1594
|
|
|
1590
|
-
declare const DxcFileInput: react.ForwardRefExoticComponent<Props$
|
|
1595
|
+
declare const DxcFileInput: react.ForwardRefExoticComponent<Props$o & react.RefAttributes<HTMLDivElement>>;
|
|
1591
1596
|
|
|
1592
1597
|
type Gap$1 = {
|
|
1593
1598
|
rowGap: string;
|
|
@@ -1622,7 +1627,7 @@ type CommonProps$4 = {
|
|
|
1622
1627
|
*/
|
|
1623
1628
|
alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
|
|
1624
1629
|
};
|
|
1625
|
-
type Props$
|
|
1630
|
+
type Props$n = CommonProps$4 & {
|
|
1626
1631
|
/**
|
|
1627
1632
|
* Sets the flex-direction CSS property.
|
|
1628
1633
|
*
|
|
@@ -1675,7 +1680,7 @@ type Props$o = CommonProps$4 & {
|
|
|
1675
1680
|
children: ReactNode;
|
|
1676
1681
|
};
|
|
1677
1682
|
|
|
1678
|
-
declare const DxcFlex: ({ basis, direction, gap, grow, order, shrink, wrap, ...props }: Props$
|
|
1683
|
+
declare const DxcFlex: ({ basis, direction, gap, grow, order, shrink, wrap, ...props }: Props$n) => react_jsx_runtime.JSX.Element;
|
|
1679
1684
|
|
|
1680
1685
|
type Gap = string | {
|
|
1681
1686
|
columnGap?: string;
|
|
@@ -1733,7 +1738,7 @@ type GridItemProps = {
|
|
|
1733
1738
|
*/
|
|
1734
1739
|
row?: number | string | GridCell;
|
|
1735
1740
|
};
|
|
1736
|
-
type Props$
|
|
1741
|
+
type Props$m = GridItemProps & {
|
|
1737
1742
|
/**
|
|
1738
1743
|
* Sets the grid-auto-columns CSS property.
|
|
1739
1744
|
*
|
|
@@ -1791,17 +1796,17 @@ type Props$n = GridItemProps & {
|
|
|
1791
1796
|
};
|
|
1792
1797
|
|
|
1793
1798
|
declare const DxcGrid: {
|
|
1794
|
-
(props: Props$
|
|
1799
|
+
(props: Props$m): react_jsx_runtime.JSX.Element;
|
|
1795
1800
|
Item: styled_components.StyledComponent<"div", any, GridItemProps, never>;
|
|
1796
1801
|
};
|
|
1797
1802
|
|
|
1798
|
-
type Props$
|
|
1803
|
+
type Props$l = {
|
|
1799
1804
|
/**
|
|
1800
1805
|
* Defines the heading level from 1 to 5. The styles of the heading are applied according to the level.
|
|
1801
1806
|
* The html tag of the heading will be the one specified in the 'as' prop.
|
|
1802
1807
|
* If 'as' is not specified, the html tag of the heading is the one specified in the 'level' prop.
|
|
1803
1808
|
*/
|
|
1804
|
-
level?: 1 | 2 | 3 | 4 | 5;
|
|
1809
|
+
level?: 1 | 2 | 3 | 4 | 5 | 6;
|
|
1805
1810
|
/**
|
|
1806
1811
|
* Heading text.
|
|
1807
1812
|
*/
|
|
@@ -1809,11 +1814,11 @@ type Props$m = {
|
|
|
1809
1814
|
/**
|
|
1810
1815
|
* Modifies the default weight of the heading.
|
|
1811
1816
|
*/
|
|
1812
|
-
weight?: "light" | "
|
|
1817
|
+
weight?: "light" | "default" | "regular";
|
|
1813
1818
|
/**
|
|
1814
1819
|
* Specifies the HTML tag of the heading.
|
|
1815
1820
|
*/
|
|
1816
|
-
as?: "h1" | "h2" | "h3" | "h4" | "h5";
|
|
1821
|
+
as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
1817
1822
|
/**
|
|
1818
1823
|
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
1819
1824
|
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
@@ -1821,9 +1826,9 @@ type Props$m = {
|
|
|
1821
1826
|
margin?: Space$1 | Margin;
|
|
1822
1827
|
};
|
|
1823
1828
|
|
|
1824
|
-
declare
|
|
1829
|
+
declare function DxcHeading({ as, level, margin, text, weight }: Props$l): react_jsx_runtime.JSX.Element;
|
|
1825
1830
|
|
|
1826
|
-
type Props$
|
|
1831
|
+
type Props$k = {
|
|
1827
1832
|
/**
|
|
1828
1833
|
* Alternative text description displayed when the specified image is not loaded.
|
|
1829
1834
|
*
|
|
@@ -1889,9 +1894,9 @@ type Props$l = {
|
|
|
1889
1894
|
width?: string;
|
|
1890
1895
|
};
|
|
1891
1896
|
|
|
1892
|
-
declare function DxcImage({ alt, caption, height, lazyLoading, objectFit, objectPosition, onError, onLoad, sizes, src, srcSet, width, }: Props$
|
|
1897
|
+
declare function DxcImage({ alt, caption, height, lazyLoading, objectFit, objectPosition, onError, onLoad, sizes, src, srcSet, width, }: Props$k): react_jsx_runtime.JSX.Element;
|
|
1893
1898
|
|
|
1894
|
-
type Props$
|
|
1899
|
+
type Props$j = {
|
|
1895
1900
|
/**
|
|
1896
1901
|
* Applies the spacing scale to the bottom side.
|
|
1897
1902
|
*/
|
|
@@ -1926,7 +1931,7 @@ type Props$k = {
|
|
|
1926
1931
|
vertical?: string;
|
|
1927
1932
|
};
|
|
1928
1933
|
|
|
1929
|
-
declare function DxcInset({ bottom, children, horizontal, left, right, space, top, vertical }: Props$
|
|
1934
|
+
declare function DxcInset({ bottom, children, horizontal, left, right, space, top, vertical }: Props$j): react_jsx_runtime.JSX.Element;
|
|
1930
1935
|
|
|
1931
1936
|
type LinkProps = {
|
|
1932
1937
|
/**
|
|
@@ -2005,7 +2010,7 @@ type TabProps$1 = {
|
|
|
2005
2010
|
*/
|
|
2006
2011
|
children: string;
|
|
2007
2012
|
};
|
|
2008
|
-
type Props$
|
|
2013
|
+
type Props$i = {
|
|
2009
2014
|
/**
|
|
2010
2015
|
* Whether the icon should appear above or to the left of the label.
|
|
2011
2016
|
*/
|
|
@@ -2021,11 +2026,11 @@ type Props$j = {
|
|
|
2021
2026
|
};
|
|
2022
2027
|
|
|
2023
2028
|
declare const DxcNavTabs: {
|
|
2024
|
-
({ iconPosition, tabIndex, children }: Props$
|
|
2029
|
+
({ iconPosition, tabIndex, children }: Props$i): JSX.Element;
|
|
2025
2030
|
Tab: react.ForwardRefExoticComponent<TabProps$1 & react.RefAttributes<HTMLAnchorElement>>;
|
|
2026
2031
|
};
|
|
2027
2032
|
|
|
2028
|
-
type Props$
|
|
2033
|
+
type Props$h = {
|
|
2029
2034
|
/**
|
|
2030
2035
|
* Text to be placed above the number.
|
|
2031
2036
|
*/
|
|
@@ -2152,9 +2157,9 @@ type Props$i = {
|
|
|
2152
2157
|
showControls?: boolean;
|
|
2153
2158
|
};
|
|
2154
2159
|
|
|
2155
|
-
declare const DxcNumberInput: react.ForwardRefExoticComponent<Props$
|
|
2160
|
+
declare const DxcNumberInput: react.ForwardRefExoticComponent<Props$h & react.RefAttributes<HTMLDivElement>>;
|
|
2156
2161
|
|
|
2157
|
-
type Props$
|
|
2162
|
+
type Props$g = {
|
|
2158
2163
|
/**
|
|
2159
2164
|
* Number of the current selected page.
|
|
2160
2165
|
*/
|
|
@@ -2192,13 +2197,13 @@ type Props$h = {
|
|
|
2192
2197
|
tabIndex?: number;
|
|
2193
2198
|
};
|
|
2194
2199
|
|
|
2195
|
-
declare const DxcPaginator: ({ currentPage, itemsPerPage, itemsPerPageOptions, totalItems, showGoToPage, onPageChange, itemsPerPageFunction, tabIndex, }: Props$
|
|
2200
|
+
declare const DxcPaginator: ({ currentPage, itemsPerPage, itemsPerPageOptions, totalItems, showGoToPage, onPageChange, itemsPerPageFunction, tabIndex, }: Props$g) => JSX.Element;
|
|
2196
2201
|
|
|
2197
2202
|
declare function DxcParagraph({ children }: {
|
|
2198
2203
|
children: ReactNode;
|
|
2199
2204
|
}): react_jsx_runtime.JSX.Element;
|
|
2200
2205
|
|
|
2201
|
-
type Props$
|
|
2206
|
+
type Props$f = {
|
|
2202
2207
|
/**
|
|
2203
2208
|
* Text to be placed above the password input.
|
|
2204
2209
|
*/
|
|
@@ -2302,7 +2307,7 @@ type Props$g = {
|
|
|
2302
2307
|
ariaLabel?: string;
|
|
2303
2308
|
};
|
|
2304
2309
|
|
|
2305
|
-
declare const DxcPasswordInput: react.ForwardRefExoticComponent<Props$
|
|
2310
|
+
declare const DxcPasswordInput: react.ForwardRefExoticComponent<Props$f & react.RefAttributes<HTMLDivElement>>;
|
|
2306
2311
|
|
|
2307
2312
|
type Size$1 = {
|
|
2308
2313
|
top?: Space$1;
|
|
@@ -2310,7 +2315,7 @@ type Size$1 = {
|
|
|
2310
2315
|
left?: Space$1;
|
|
2311
2316
|
right?: Space$1;
|
|
2312
2317
|
};
|
|
2313
|
-
type Props$
|
|
2318
|
+
type Props$e = {
|
|
2314
2319
|
/**
|
|
2315
2320
|
* Text to be placed above the progress bar.
|
|
2316
2321
|
*/
|
|
@@ -2344,7 +2349,7 @@ type Props$f = {
|
|
|
2344
2349
|
ariaLabel?: string;
|
|
2345
2350
|
};
|
|
2346
2351
|
|
|
2347
|
-
declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, ariaLabel, }: Props$
|
|
2352
|
+
declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, ariaLabel, }: Props$e) => JSX.Element;
|
|
2348
2353
|
|
|
2349
2354
|
type Link = {
|
|
2350
2355
|
/**
|
|
@@ -2356,7 +2361,7 @@ type Link = {
|
|
|
2356
2361
|
*/
|
|
2357
2362
|
links?: Link[];
|
|
2358
2363
|
};
|
|
2359
|
-
type Props$
|
|
2364
|
+
type Props$d = {
|
|
2360
2365
|
/**
|
|
2361
2366
|
* Title of the quick nav component.
|
|
2362
2367
|
*/
|
|
@@ -2367,7 +2372,7 @@ type Props$e = {
|
|
|
2367
2372
|
links: Link[];
|
|
2368
2373
|
};
|
|
2369
2374
|
|
|
2370
|
-
declare
|
|
2375
|
+
declare function DxcQuickNav({ links, title }: Props$d): react_jsx_runtime.JSX.Element;
|
|
2371
2376
|
|
|
2372
2377
|
type Option$1 = {
|
|
2373
2378
|
/**
|
|
@@ -2563,23 +2568,13 @@ type NonPaginatedProps = CommonProps$3 & {
|
|
|
2563
2568
|
*/
|
|
2564
2569
|
itemsPerPageFunction?: never;
|
|
2565
2570
|
};
|
|
2566
|
-
type Props$
|
|
2571
|
+
type Props$c = PaginatedProps | NonPaginatedProps;
|
|
2567
2572
|
|
|
2568
2573
|
declare const DxcResultsetTable: {
|
|
2569
|
-
({ columns,
|
|
2570
|
-
ActionsCell: ({ actions }:
|
|
2574
|
+
({ columns, hidePaginator, itemsPerPage, itemsPerPageFunction, itemsPerPageOptions, margin, mode, rows, showGoToPage, tabIndex, }: Props$c): react_jsx_runtime.JSX.Element;
|
|
2575
|
+
ActionsCell: ({ actions }: ActionsCellPropsType) => react_jsx_runtime.JSX.Element;
|
|
2571
2576
|
};
|
|
2572
2577
|
|
|
2573
|
-
type ListOptionGroupType = {
|
|
2574
|
-
/**
|
|
2575
|
-
* Label of the group to be shown in the select's listbox.
|
|
2576
|
-
*/
|
|
2577
|
-
label: string;
|
|
2578
|
-
/**
|
|
2579
|
-
* List of the grouped options.
|
|
2580
|
-
*/
|
|
2581
|
-
options: ListOptionType[];
|
|
2582
|
-
};
|
|
2583
2578
|
type ListOptionType = {
|
|
2584
2579
|
/**
|
|
2585
2580
|
* Element used as the icon that will be placed before the option label.
|
|
@@ -2599,6 +2594,16 @@ type ListOptionType = {
|
|
|
2599
2594
|
*/
|
|
2600
2595
|
value: string;
|
|
2601
2596
|
};
|
|
2597
|
+
type ListOptionGroupType = {
|
|
2598
|
+
/**
|
|
2599
|
+
* Label of the group to be shown in the select's listbox.
|
|
2600
|
+
*/
|
|
2601
|
+
label: string;
|
|
2602
|
+
/**
|
|
2603
|
+
* List of the grouped options.
|
|
2604
|
+
*/
|
|
2605
|
+
options: ListOptionType[];
|
|
2606
|
+
};
|
|
2602
2607
|
type CommonProps$2 = {
|
|
2603
2608
|
/**
|
|
2604
2609
|
* Text to be placed above the select.
|
|
@@ -2668,6 +2673,10 @@ type CommonProps$2 = {
|
|
|
2668
2673
|
ariaLabel?: string;
|
|
2669
2674
|
};
|
|
2670
2675
|
type SingleSelect = CommonProps$2 & {
|
|
2676
|
+
/**
|
|
2677
|
+
* Enables users to select multiple items from the list.
|
|
2678
|
+
*/
|
|
2679
|
+
enableSelectAll?: never;
|
|
2671
2680
|
/**
|
|
2672
2681
|
* If true, the select component will support multiple selected options.
|
|
2673
2682
|
* In that case, value will be an array of strings with each selected
|
|
@@ -2704,6 +2713,10 @@ type SingleSelect = CommonProps$2 & {
|
|
|
2704
2713
|
}) => void;
|
|
2705
2714
|
};
|
|
2706
2715
|
type MultipleSelect = CommonProps$2 & {
|
|
2716
|
+
/**
|
|
2717
|
+
* Enables users to select multiple items from the list.
|
|
2718
|
+
*/
|
|
2719
|
+
enableSelectAll?: boolean;
|
|
2707
2720
|
/**
|
|
2708
2721
|
* If true, the select component will support multiple selected options.
|
|
2709
2722
|
* In that case, value will be an array of strings with each selected
|
|
@@ -2739,11 +2752,11 @@ type MultipleSelect = CommonProps$2 & {
|
|
|
2739
2752
|
error?: string;
|
|
2740
2753
|
}) => void;
|
|
2741
2754
|
};
|
|
2742
|
-
type Props$
|
|
2755
|
+
type Props$b = SingleSelect | MultipleSelect;
|
|
2743
2756
|
|
|
2744
|
-
declare const DxcSelect: react.ForwardRefExoticComponent<Props$
|
|
2757
|
+
declare const DxcSelect: react.ForwardRefExoticComponent<Props$b & react.RefAttributes<HTMLDivElement>>;
|
|
2745
2758
|
|
|
2746
|
-
type Props$
|
|
2759
|
+
type Props$a = {
|
|
2747
2760
|
/**
|
|
2748
2761
|
* Specifies a string to be used as the name for the slider element when no `label` is provided.
|
|
2749
2762
|
*/
|
|
@@ -2822,9 +2835,9 @@ type Props$b = {
|
|
|
2822
2835
|
value?: number;
|
|
2823
2836
|
};
|
|
2824
2837
|
|
|
2825
|
-
declare const DxcSlider: react.ForwardRefExoticComponent<Props$
|
|
2838
|
+
declare const DxcSlider: react.ForwardRefExoticComponent<Props$a & react.RefAttributes<HTMLDivElement>>;
|
|
2826
2839
|
|
|
2827
|
-
type Props$
|
|
2840
|
+
type Props$9 = {
|
|
2828
2841
|
/**
|
|
2829
2842
|
* 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.
|
|
2830
2843
|
*/
|
|
@@ -2858,11 +2871,11 @@ type Props$a = {
|
|
|
2858
2871
|
value?: number;
|
|
2859
2872
|
};
|
|
2860
2873
|
|
|
2861
|
-
declare const DxcSpinner: ({ ariaLabel, inheritColor, label, margin, mode, showValue, value, }: Props$
|
|
2874
|
+
declare const DxcSpinner: ({ ariaLabel, inheritColor, label, margin, mode, showValue, value, }: Props$9) => react_jsx_runtime.JSX.Element;
|
|
2862
2875
|
|
|
2863
2876
|
type Mode = "default" | "info" | "success" | "warning" | "error";
|
|
2864
2877
|
type Size = "small" | "medium" | "large";
|
|
2865
|
-
type Props$
|
|
2878
|
+
type Props$8 = {
|
|
2866
2879
|
/**
|
|
2867
2880
|
* It will define the color of the light based on its semantic meaning.
|
|
2868
2881
|
*/
|
|
@@ -2877,9 +2890,9 @@ type Props$9 = {
|
|
|
2877
2890
|
size?: Size;
|
|
2878
2891
|
};
|
|
2879
2892
|
|
|
2880
|
-
declare function DxcStatusLight({ label, mode, size }: Props$
|
|
2893
|
+
declare function DxcStatusLight({ label, mode, size }: Props$8): react_jsx_runtime.JSX.Element;
|
|
2881
2894
|
|
|
2882
|
-
type Props$
|
|
2895
|
+
type Props$7 = {
|
|
2883
2896
|
/**
|
|
2884
2897
|
* Specifies a string to be used as the name for the switch element when no `label` is provided.
|
|
2885
2898
|
*/
|
|
@@ -2938,11 +2951,11 @@ type Props$8 = {
|
|
|
2938
2951
|
value?: string;
|
|
2939
2952
|
};
|
|
2940
2953
|
|
|
2941
|
-
declare const DxcSwitch: react.ForwardRefExoticComponent<Props$
|
|
2954
|
+
declare const DxcSwitch: react.ForwardRefExoticComponent<Props$7 & react.RefAttributes<HTMLDivElement>>;
|
|
2942
2955
|
|
|
2943
2956
|
declare const DxcTable: {
|
|
2944
|
-
({ children, margin, mode }: Props$
|
|
2945
|
-
ActionsCell: ({ actions }:
|
|
2957
|
+
({ children, margin, mode }: Props$t): react_jsx_runtime.JSX.Element;
|
|
2958
|
+
ActionsCell: ({ actions }: ActionsCellPropsType) => react_jsx_runtime.JSX.Element;
|
|
2946
2959
|
};
|
|
2947
2960
|
|
|
2948
2961
|
type TabCommonProps = {
|
|
@@ -2959,7 +2972,7 @@ type TabCommonProps = {
|
|
|
2959
2972
|
*/
|
|
2960
2973
|
notificationNumber?: boolean | number;
|
|
2961
2974
|
};
|
|
2962
|
-
type TabLabelProps =
|
|
2975
|
+
type TabLabelProps = {
|
|
2963
2976
|
/**
|
|
2964
2977
|
* Tab label.
|
|
2965
2978
|
*/
|
|
@@ -2969,7 +2982,7 @@ type TabLabelProps = TabCommonProps & {
|
|
|
2969
2982
|
*/
|
|
2970
2983
|
icon?: string | SVG;
|
|
2971
2984
|
};
|
|
2972
|
-
type TabIconProps =
|
|
2985
|
+
type TabIconProps = {
|
|
2973
2986
|
/**
|
|
2974
2987
|
* Tab label.
|
|
2975
2988
|
*/
|
|
@@ -2982,15 +2995,14 @@ type TabIconProps = TabCommonProps & {
|
|
|
2982
2995
|
type TabProps = {
|
|
2983
2996
|
defaultActive?: boolean;
|
|
2984
2997
|
active?: boolean;
|
|
2985
|
-
icon?: string | SVG;
|
|
2986
|
-
label: string;
|
|
2987
2998
|
title?: string;
|
|
2999
|
+
tabId?: string;
|
|
2988
3000
|
disabled?: boolean;
|
|
2989
3001
|
notificationNumber?: boolean | number;
|
|
2990
3002
|
children: ReactNode;
|
|
2991
3003
|
onClick?: () => void;
|
|
2992
3004
|
onHover?: () => void;
|
|
2993
|
-
};
|
|
3005
|
+
} & (TabLabelProps | TabIconProps);
|
|
2994
3006
|
type LegacyProps = {
|
|
2995
3007
|
/**
|
|
2996
3008
|
* @deprecated This prop is deprecated and will be removed in future versions. Use the children prop instead.
|
|
@@ -3032,7 +3044,7 @@ type LegacyProps = {
|
|
|
3032
3044
|
* @deprecated This prop is deprecated and will be removed in future versions.
|
|
3033
3045
|
* An array of objects representing the tabs.
|
|
3034
3046
|
*/
|
|
3035
|
-
tabs?: (TabLabelProps | TabIconProps)[];
|
|
3047
|
+
tabs?: (TabCommonProps & (TabLabelProps | TabIconProps))[];
|
|
3036
3048
|
};
|
|
3037
3049
|
type NewProps = {
|
|
3038
3050
|
/**
|
|
@@ -3053,129 +3065,87 @@ type NewProps = {
|
|
|
3053
3065
|
*/
|
|
3054
3066
|
children?: ReactNode;
|
|
3055
3067
|
};
|
|
3056
|
-
type Props$
|
|
3068
|
+
type Props$6 = LegacyProps & NewProps;
|
|
3057
3069
|
|
|
3058
3070
|
declare const DxcTabs: {
|
|
3059
|
-
({ activeTabIndex, children, defaultActiveTabIndex, iconPosition, margin, onTabClick, onTabHover, tabIndex, tabs, }: Props$
|
|
3071
|
+
({ activeTabIndex, children, defaultActiveTabIndex, iconPosition, margin, onTabClick, onTabHover, tabIndex, tabs, }: Props$6): false | react_jsx_runtime.JSX.Element;
|
|
3060
3072
|
Tab: react.ForwardRefExoticComponent<TabProps & react.RefAttributes<HTMLButtonElement>>;
|
|
3061
3073
|
};
|
|
3062
3074
|
|
|
3063
|
-
type
|
|
3064
|
-
/**
|
|
3065
|
-
* If defined, the tag will be displayed as an anchor, using this prop as "href".
|
|
3066
|
-
* Component will show some visual feedback on hover.
|
|
3067
|
-
*/
|
|
3068
|
-
linkHref?: string;
|
|
3069
|
-
/**
|
|
3070
|
-
* If defined, the tag will be displayed as a button. This function will
|
|
3071
|
-
* be called when the user clicks the tag. Component will show some
|
|
3072
|
-
* visual feedback on hover.
|
|
3073
|
-
*/
|
|
3074
|
-
onClick?: () => void;
|
|
3075
|
-
/**
|
|
3076
|
-
* Background color of the icon section of the tag.
|
|
3077
|
-
*/
|
|
3078
|
-
iconBgColor?: string;
|
|
3079
|
-
/**
|
|
3080
|
-
* Whether the label should appear after or before the icon.
|
|
3081
|
-
*/
|
|
3082
|
-
labelPosition?: "before" | "after";
|
|
3083
|
-
/**
|
|
3084
|
-
* If true, the page is opened in a new browser tab.
|
|
3085
|
-
*/
|
|
3086
|
-
newWindow?: boolean;
|
|
3087
|
-
/**
|
|
3088
|
-
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
3089
|
-
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
3090
|
-
*/
|
|
3091
|
-
margin?: Space$1 | Margin;
|
|
3092
|
-
/**
|
|
3093
|
-
* Size of the component.
|
|
3094
|
-
*/
|
|
3095
|
-
size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
|
|
3096
|
-
/**
|
|
3097
|
-
* Value of the tabindex attribute.
|
|
3098
|
-
*/
|
|
3099
|
-
tabIndex?: number;
|
|
3100
|
-
};
|
|
3101
|
-
type TagLabelProps = TagCommonProps & {
|
|
3102
|
-
/**
|
|
3103
|
-
* Material Symbol name or SVG element used as the icon that will be placed next to the label.
|
|
3104
|
-
*/
|
|
3105
|
-
icon?: string | SVG;
|
|
3106
|
-
/**
|
|
3107
|
-
* Text to be placed next inside the tag.
|
|
3108
|
-
*/
|
|
3109
|
-
label: string;
|
|
3110
|
-
};
|
|
3111
|
-
type TagIconProps = TagCommonProps & {
|
|
3112
|
-
/**
|
|
3113
|
-
* Material Symbol name or SVG element used as the icon that will be placed next to the label.
|
|
3114
|
-
*/
|
|
3115
|
-
icon: string | SVG;
|
|
3075
|
+
type Props$5 = {
|
|
3116
3076
|
/**
|
|
3117
|
-
*
|
|
3077
|
+
* Specifies a string to be used as the name for the textarea element when no `label` is provided.
|
|
3118
3078
|
*/
|
|
3119
|
-
|
|
3120
|
-
};
|
|
3121
|
-
type Props$6 = TagLabelProps | TagIconProps;
|
|
3122
|
-
|
|
3123
|
-
/**
|
|
3124
|
-
* @deprecated
|
|
3125
|
-
*/
|
|
3126
|
-
declare const DxcTag: ({ icon, label, linkHref, onClick, iconBgColor, labelPosition, newWindow, margin, size, tabIndex, }: Props$6) => JSX.Element;
|
|
3127
|
-
|
|
3128
|
-
type Props$5 = {
|
|
3079
|
+
ariaLabel?: string;
|
|
3129
3080
|
/**
|
|
3130
|
-
*
|
|
3081
|
+
* HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the textarea value.
|
|
3082
|
+
* Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
|
|
3131
3083
|
*/
|
|
3132
|
-
|
|
3084
|
+
autocomplete?: string;
|
|
3133
3085
|
/**
|
|
3134
|
-
*
|
|
3086
|
+
* If true, the component will be disabled.
|
|
3135
3087
|
*/
|
|
3136
|
-
|
|
3088
|
+
disabled?: boolean;
|
|
3137
3089
|
/**
|
|
3138
3090
|
* Initial value of the textarea, only when it is uncontrolled.
|
|
3139
3091
|
*/
|
|
3140
3092
|
defaultValue?: string;
|
|
3141
3093
|
/**
|
|
3142
|
-
*
|
|
3094
|
+
* If it is a defined value and also a truthy string, the component will
|
|
3095
|
+
* change its appearance, showing the error below the textarea. If the
|
|
3096
|
+
* defined value is an empty string, it will reserve a space below the
|
|
3097
|
+
* component for a future error, but it would not change its look. In
|
|
3098
|
+
* case of being undefined or null, both the appearance and the space for
|
|
3099
|
+
* the error message would not be modified.
|
|
3143
3100
|
*/
|
|
3144
|
-
|
|
3101
|
+
error?: string;
|
|
3145
3102
|
/**
|
|
3146
3103
|
* Helper text to be placed above the textarea.
|
|
3147
3104
|
*/
|
|
3148
3105
|
helperText?: string;
|
|
3149
3106
|
/**
|
|
3150
|
-
* Text to be
|
|
3107
|
+
* Text to be placed above the textarea.
|
|
3151
3108
|
*/
|
|
3152
|
-
|
|
3109
|
+
label?: string;
|
|
3153
3110
|
/**
|
|
3154
|
-
*
|
|
3111
|
+
* Specifies the maximum length allowed by the textarea.
|
|
3112
|
+
* This will be checked both when the textarea loses the
|
|
3113
|
+
* focus and while typing within it. If the string entered does not
|
|
3114
|
+
* comply the maximum length, the onBlur and onChange functions will be called
|
|
3115
|
+
* with the current value and an internal error informing that the value
|
|
3116
|
+
* length does not comply the specified range. If a valid length is
|
|
3117
|
+
* reached, the error parameter of both events will not be defined.
|
|
3155
3118
|
*/
|
|
3156
|
-
|
|
3119
|
+
maxLength?: number;
|
|
3157
3120
|
/**
|
|
3158
|
-
*
|
|
3121
|
+
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
3122
|
+
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
3159
3123
|
*/
|
|
3160
|
-
|
|
3124
|
+
margin?: Space$1 | Margin;
|
|
3161
3125
|
/**
|
|
3162
|
-
*
|
|
3163
|
-
*
|
|
3164
|
-
* and
|
|
3165
|
-
*
|
|
3126
|
+
* Specifies the minimum length allowed by the textarea.
|
|
3127
|
+
* This will be checked both when the textarea loses the
|
|
3128
|
+
* focus and while typing within it. If the string entered does not
|
|
3129
|
+
* comply the minimum length, the onBlur and onChange functions will be called
|
|
3130
|
+
* with the current value and an internal error informing that the value
|
|
3131
|
+
* length does not comply the specified range. If a valid length is
|
|
3132
|
+
* reached, the error parameter of both events will not be defined.
|
|
3166
3133
|
*/
|
|
3167
|
-
|
|
3134
|
+
minLength?: number;
|
|
3168
3135
|
/**
|
|
3169
|
-
*
|
|
3170
|
-
* - 'auto': The textarea grows or shrinks automatically in order to fit the content.
|
|
3171
|
-
* - 'manual': The height of the textarea is enabled to be manually modified.
|
|
3172
|
-
* - 'none': The textarea has a fixed height and can't be modified.
|
|
3136
|
+
* Name attribute of the textarea element.
|
|
3173
3137
|
*/
|
|
3174
|
-
|
|
3138
|
+
name?: string;
|
|
3175
3139
|
/**
|
|
3176
|
-
*
|
|
3140
|
+
* This function will be called when the textarea loses the focus. An
|
|
3141
|
+
* object including the textarea value and the error (if the value entered
|
|
3142
|
+
* is not valid) will be passed to this function. If there is no error,
|
|
3143
|
+
* error will not be defined.
|
|
3177
3144
|
*/
|
|
3178
|
-
|
|
3145
|
+
onBlur?: (val: {
|
|
3146
|
+
value: string;
|
|
3147
|
+
error?: string;
|
|
3148
|
+
}) => void;
|
|
3179
3149
|
/**
|
|
3180
3150
|
* This function will be called when the user types within the textarea.
|
|
3181
3151
|
* An object including the current value and the error (if the value
|
|
@@ -3187,24 +3157,12 @@ type Props$5 = {
|
|
|
3187
3157
|
error?: string;
|
|
3188
3158
|
}) => void;
|
|
3189
3159
|
/**
|
|
3190
|
-
*
|
|
3191
|
-
*
|
|
3192
|
-
*
|
|
3193
|
-
*
|
|
3194
|
-
*/
|
|
3195
|
-
onBlur?: (val: {
|
|
3196
|
-
value: string;
|
|
3197
|
-
error?: string;
|
|
3198
|
-
}) => void;
|
|
3199
|
-
/**
|
|
3200
|
-
* If it is a defined value and also a truthy string, the component will
|
|
3201
|
-
* change its appearance, showing the error below the textarea. If the
|
|
3202
|
-
* defined value is an empty string, it will reserve a space below the
|
|
3203
|
-
* component for a future error, but it would not change its look. In
|
|
3204
|
-
* case of being undefined or null, both the appearance and the space for
|
|
3205
|
-
* the error message would not be modified.
|
|
3160
|
+
* If true, the textarea will be optional, showing '(Optional)'
|
|
3161
|
+
* next to the label. Otherwise, the field will be considered required
|
|
3162
|
+
* and an error will be passed as a parameter to the OnBlur and onChange functions
|
|
3163
|
+
* when it has not been filled.
|
|
3206
3164
|
*/
|
|
3207
|
-
|
|
3165
|
+
optional?: boolean;
|
|
3208
3166
|
/**
|
|
3209
3167
|
* Regular expression that defines the valid format allowed by the
|
|
3210
3168
|
* textarea. This will be checked both when the textarea loses the focus
|
|
@@ -3216,35 +3174,17 @@ type Props$5 = {
|
|
|
3216
3174
|
*/
|
|
3217
3175
|
pattern?: string;
|
|
3218
3176
|
/**
|
|
3219
|
-
*
|
|
3220
|
-
* This will be checked both when the textarea loses the
|
|
3221
|
-
* focus and while typing within it. If the string entered does not
|
|
3222
|
-
* comply the minimum length, the onBlur and onChange functions will be called
|
|
3223
|
-
* with the current value and an internal error informing that the value
|
|
3224
|
-
* length does not comply the specified range. If a valid length is
|
|
3225
|
-
* reached, the error parameter of both events will not be defined.
|
|
3226
|
-
*/
|
|
3227
|
-
minLength?: number;
|
|
3228
|
-
/**
|
|
3229
|
-
* Specifies the maximum length allowed by the textarea.
|
|
3230
|
-
* This will be checked both when the textarea loses the
|
|
3231
|
-
* focus and while typing within it. If the string entered does not
|
|
3232
|
-
* comply the maximum length, the onBlur and onChange functions will be called
|
|
3233
|
-
* with the current value and an internal error informing that the value
|
|
3234
|
-
* length does not comply the specified range. If a valid length is
|
|
3235
|
-
* reached, the error parameter of both events will not be defined.
|
|
3177
|
+
* Text to be put as placeholder of the textarea.
|
|
3236
3178
|
*/
|
|
3237
|
-
|
|
3179
|
+
placeholder?: string;
|
|
3238
3180
|
/**
|
|
3239
|
-
*
|
|
3240
|
-
* Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
|
|
3181
|
+
* If true, the component will not be mutable, meaning the user can not edit the control.
|
|
3241
3182
|
*/
|
|
3242
|
-
|
|
3183
|
+
readOnly?: boolean;
|
|
3243
3184
|
/**
|
|
3244
|
-
*
|
|
3245
|
-
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
3185
|
+
* Number of rows of the textarea.
|
|
3246
3186
|
*/
|
|
3247
|
-
|
|
3187
|
+
rows?: number;
|
|
3248
3188
|
/**
|
|
3249
3189
|
* Size of the component.
|
|
3250
3190
|
*/
|
|
@@ -3254,9 +3194,16 @@ type Props$5 = {
|
|
|
3254
3194
|
*/
|
|
3255
3195
|
tabIndex?: number;
|
|
3256
3196
|
/**
|
|
3257
|
-
*
|
|
3197
|
+
* Value of the textarea. If undefined, the component will be uncontrolled and the value will be managed internally.
|
|
3258
3198
|
*/
|
|
3259
|
-
|
|
3199
|
+
value?: string;
|
|
3200
|
+
/**
|
|
3201
|
+
* Defines the textarea's ability to resize vertically. It can be:
|
|
3202
|
+
* - 'auto': The textarea grows or shrinks automatically in order to fit the content.
|
|
3203
|
+
* - 'manual': The height of the textarea is enabled to be manually modified.
|
|
3204
|
+
* - 'none': The textarea has a fixed height and can't be modified.
|
|
3205
|
+
*/
|
|
3206
|
+
verticalGrow?: "auto" | "manual" | "none";
|
|
3260
3207
|
};
|
|
3261
3208
|
|
|
3262
3209
|
declare const DxcTextarea: react.ForwardRefExoticComponent<Props$5 & react.RefAttributes<HTMLDivElement>>;
|
|
@@ -4723,23 +4670,6 @@ declare const componentTokens: {
|
|
|
4723
4670
|
focusOutline: string;
|
|
4724
4671
|
scrollButtonsWidth: string;
|
|
4725
4672
|
};
|
|
4726
|
-
tag: {
|
|
4727
|
-
fontFamily: string;
|
|
4728
|
-
fontColor: string;
|
|
4729
|
-
fontSize: string;
|
|
4730
|
-
fontStyle: string;
|
|
4731
|
-
fontWeight: string;
|
|
4732
|
-
labelPaddingTop: string;
|
|
4733
|
-
labelPaddingBottom: string;
|
|
4734
|
-
labelPaddingLeft: string;
|
|
4735
|
-
labelPaddingRight: string;
|
|
4736
|
-
height: string;
|
|
4737
|
-
iconColor: string;
|
|
4738
|
-
iconSectionWidth: string;
|
|
4739
|
-
iconHeight: string;
|
|
4740
|
-
iconWidth: string;
|
|
4741
|
-
focusColor: string;
|
|
4742
|
-
};
|
|
4743
4673
|
textarea: {
|
|
4744
4674
|
fontFamily: string;
|
|
4745
4675
|
enabledBorderColor: string;
|
|
@@ -5087,10 +5017,6 @@ type OpinionatedTheme = {
|
|
|
5087
5017
|
tabs: {
|
|
5088
5018
|
baseColor: string;
|
|
5089
5019
|
};
|
|
5090
|
-
tag: {
|
|
5091
|
-
fontColor: string;
|
|
5092
|
-
iconColor: string;
|
|
5093
|
-
};
|
|
5094
5020
|
textarea: {
|
|
5095
5021
|
fontColor: string;
|
|
5096
5022
|
hoverBorderColor: string;
|
|
@@ -5181,9 +5107,10 @@ declare const defaultTranslatedComponentLabels: {
|
|
|
5181
5107
|
optionalItemLabelDefault: string;
|
|
5182
5108
|
};
|
|
5183
5109
|
select: {
|
|
5184
|
-
noMatchesErrorMessage: string;
|
|
5185
5110
|
actionClearSelectionTitle: string;
|
|
5186
5111
|
actionClearSearchTitle: string;
|
|
5112
|
+
noMatchesErrorMessage: string;
|
|
5113
|
+
selectAllLabel: string;
|
|
5187
5114
|
};
|
|
5188
5115
|
tabs: {
|
|
5189
5116
|
scrollLeft: string;
|
|
@@ -6251,23 +6178,6 @@ declare const HalstackContext: react.Context<{
|
|
|
6251
6178
|
focusOutline: string;
|
|
6252
6179
|
scrollButtonsWidth: string;
|
|
6253
6180
|
};
|
|
6254
|
-
tag: {
|
|
6255
|
-
fontFamily: string;
|
|
6256
|
-
fontColor: string;
|
|
6257
|
-
fontSize: string;
|
|
6258
|
-
fontStyle: string;
|
|
6259
|
-
fontWeight: string;
|
|
6260
|
-
labelPaddingTop: string;
|
|
6261
|
-
labelPaddingBottom: string;
|
|
6262
|
-
labelPaddingLeft: string;
|
|
6263
|
-
labelPaddingRight: string;
|
|
6264
|
-
height: string;
|
|
6265
|
-
iconColor: string;
|
|
6266
|
-
iconSectionWidth: string;
|
|
6267
|
-
iconHeight: string;
|
|
6268
|
-
iconWidth: string;
|
|
6269
|
-
focusColor: string;
|
|
6270
|
-
};
|
|
6271
6181
|
textarea: {
|
|
6272
6182
|
fontFamily: string;
|
|
6273
6183
|
enabledBorderColor: string;
|
|
@@ -6553,9 +6463,10 @@ declare const HalstackLanguageContext: react.Context<{
|
|
|
6553
6463
|
optionalItemLabelDefault: string;
|
|
6554
6464
|
};
|
|
6555
6465
|
select: {
|
|
6556
|
-
noMatchesErrorMessage: string;
|
|
6557
6466
|
actionClearSelectionTitle: string;
|
|
6558
6467
|
actionClearSearchTitle: string;
|
|
6468
|
+
noMatchesErrorMessage: string;
|
|
6469
|
+
selectAllLabel: string;
|
|
6559
6470
|
};
|
|
6560
6471
|
tabs: {
|
|
6561
6472
|
scrollLeft: string;
|
|
@@ -6586,4 +6497,4 @@ declare function useToast(): {
|
|
|
6586
6497
|
loading: (toast: Omit<LoadingToast, "loading">) => (() => void) | undefined;
|
|
6587
6498
|
};
|
|
6588
6499
|
|
|
6589
|
-
export { DxcAccordion, DxcAlert, DxcApplicationLayout, DxcBadge, DxcBleed, DxcBreadcrumbs, DxcBulletedList, DxcButton, DxcCard, DxcCheckbox, DxcChip, DxcContainer, DxcContextualMenu, DxcDataGrid, DxcDateInput, DxcDialog, DxcDivider, DxcDropdown, DxcFileInput, DxcFlex, DxcGrid, DxcHeading, DxcImage, DxcInset, DxcLink, DxcNavTabs, DxcNumberInput, DxcPaginator, DxcParagraph, DxcPasswordInput, DxcProgressBar, DxcQuickNav, DxcRadioGroup, DxcResultsetTable, DxcSelect, DxcSlider, DxcSpinner, DxcStatusLight, DxcSwitch, DxcTable, DxcTabs,
|
|
6500
|
+
export { DxcAccordion, DxcAlert, DxcApplicationLayout, DxcBadge, DxcBleed, DxcBreadcrumbs, DxcBulletedList, DxcButton, DxcCard, DxcCheckbox, DxcChip, DxcContainer, DxcContextualMenu, DxcDataGrid, DxcDateInput, DxcDialog, DxcDivider, DxcDropdown, DxcFileInput, DxcFlex, DxcGrid, DxcHeading, DxcImage, DxcInset, DxcLink, DxcNavTabs, DxcNumberInput, DxcPaginator, DxcParagraph, DxcPasswordInput, DxcProgressBar, DxcQuickNav, DxcRadioGroup, DxcResultsetTable, DxcSelect, DxcSlider, DxcSpinner, DxcStatusLight, DxcSwitch, DxcTable, DxcTabs, DxcTextInput, DxcTextarea, DxcToastsQueue, DxcToggleGroup, DxcTooltip, DxcTypography, DxcWizard, HalstackContext, HalstackLanguageContext, HalstackProvider, useToast };
|