@dxc-technology/halstack-react 17.0.1 → 17.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +208 -62
- package/dist/index.d.ts +208 -62
- package/dist/index.js +1653 -1100
- package/dist/index.mjs +1427 -875
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -111,10 +111,10 @@ type NonIndependentProps = CommonProps$a & {
|
|
|
111
111
|
*/
|
|
112
112
|
onActiveChange?: (index: number[]) => void;
|
|
113
113
|
};
|
|
114
|
-
type Props$
|
|
114
|
+
type Props$M = IndependentProps | NonIndependentProps;
|
|
115
115
|
|
|
116
116
|
declare const DxcAccordion: {
|
|
117
|
-
(props: Props$
|
|
117
|
+
(props: Props$M): 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$L = CommonProps$9 & ModeSpecificProps;
|
|
201
201
|
|
|
202
|
-
declare const DxcAlert: ({ closable, message, mode, primaryAction, secondaryAction, semantic, title, }: Props$
|
|
202
|
+
declare const DxcAlert: ({ closable, message, mode, primaryAction, secondaryAction, semantic, title, }: Props$L) => react.JSX.Element;
|
|
203
203
|
|
|
204
204
|
type SearchBarProps = {
|
|
205
205
|
/**
|
|
@@ -253,7 +253,7 @@ type Section$1 = {
|
|
|
253
253
|
items: (Item$1 | GroupItem$1)[];
|
|
254
254
|
title?: string;
|
|
255
255
|
};
|
|
256
|
-
type Props$
|
|
256
|
+
type Props$K = {
|
|
257
257
|
/**
|
|
258
258
|
* Array of items to be displayed in the menu.
|
|
259
259
|
* Each item can be a single/simple item, a group item or a section.
|
|
@@ -279,6 +279,11 @@ type Props$J = {
|
|
|
279
279
|
* If true the menu will be displayed horizontally.
|
|
280
280
|
*/
|
|
281
281
|
isHorizontal?: boolean;
|
|
282
|
+
/**
|
|
283
|
+
* Function that will be called when an option is clicked.
|
|
284
|
+
* This is used to notify that an item has been selected to close any visible menu that is not managed by the navigation tree.
|
|
285
|
+
*/
|
|
286
|
+
onSelectItem?: () => void;
|
|
282
287
|
};
|
|
283
288
|
|
|
284
289
|
type Section = {
|
|
@@ -286,7 +291,7 @@ type Section = {
|
|
|
286
291
|
title?: string;
|
|
287
292
|
};
|
|
288
293
|
type SearchbarSidenavProps = Omit<SearchBarProps, "autoFocus" | "disabled" | "onCancel">;
|
|
289
|
-
type Props$
|
|
294
|
+
type Props$J = {
|
|
290
295
|
/**
|
|
291
296
|
* The content rendered in the bottom part of the sidenav, under the navigation menu.
|
|
292
297
|
*/
|
|
@@ -332,7 +337,7 @@ type GroupItem = CommonItemProps & {
|
|
|
332
337
|
};
|
|
333
338
|
type MainNavPropsType = (GroupItem | Item$1)[];
|
|
334
339
|
type SearchBarHeaderProps = Omit<SearchBarProps, "autoFocus" | "disabled">;
|
|
335
|
-
type Props$
|
|
340
|
+
type Props$I = {
|
|
336
341
|
appTitle?: string;
|
|
337
342
|
navItems?: MainNavPropsType;
|
|
338
343
|
responsiveBottomContent?: ReactNode;
|
|
@@ -464,9 +469,9 @@ type ApplicationLayoutPropsType = {
|
|
|
464
469
|
declare const DxcApplicationLayout: {
|
|
465
470
|
({ logo, header, sidenav, footer, children }: ApplicationLayoutPropsType): JSX.Element;
|
|
466
471
|
Footer: ({ bottomLinks, copyright, leftContent, logo, mode, rightContent, socialLinks, tabIndex, }: FooterPropsType) => JSX.Element;
|
|
467
|
-
Header: ({ appTitle, navItems, responsiveBottomContent, searchBar, sideContent, }: Props$
|
|
472
|
+
Header: ({ appTitle, navItems, responsiveBottomContent, searchBar, sideContent, }: Props$I) => JSX.Element;
|
|
468
473
|
Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
|
|
469
|
-
Sidenav: ({ topContent, bottomContent, navItems, appTitle, displayGroupLines, expanded, defaultExpanded, onExpandedChange, searchBar, }: Props$
|
|
474
|
+
Sidenav: ({ topContent, bottomContent, navItems, appTitle, displayGroupLines, expanded, defaultExpanded, onExpandedChange, searchBar, }: Props$J) => JSX.Element;
|
|
470
475
|
};
|
|
471
476
|
|
|
472
477
|
type Size$5 = "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
@@ -476,7 +481,7 @@ interface Status {
|
|
|
476
481
|
mode: "default" | "info" | "success" | "warning" | "error";
|
|
477
482
|
position: "top" | "bottom";
|
|
478
483
|
}
|
|
479
|
-
type Props$
|
|
484
|
+
type Props$H = {
|
|
480
485
|
/**
|
|
481
486
|
* Affects the visual style of the avatar. It can be used following semantic purposes or not.
|
|
482
487
|
*/
|
|
@@ -537,7 +542,7 @@ type Props$G = {
|
|
|
537
542
|
title?: string;
|
|
538
543
|
};
|
|
539
544
|
|
|
540
|
-
declare const DxcAvatar: react.
|
|
545
|
+
declare const DxcAvatar: react.ForwardRefExoticComponent<Props$H & react.RefAttributes<HTMLDivElement>>;
|
|
541
546
|
|
|
542
547
|
type ContextualProps = {
|
|
543
548
|
/**
|
|
@@ -589,11 +594,11 @@ type CommonProps$8 = {
|
|
|
589
594
|
*/
|
|
590
595
|
size?: "small" | "medium" | "large";
|
|
591
596
|
};
|
|
592
|
-
type Props$
|
|
597
|
+
type Props$G = (ContextualProps | NotificationProps) & CommonProps$8;
|
|
593
598
|
|
|
594
|
-
declare const DxcBadge:
|
|
599
|
+
declare const DxcBadge: react.ForwardRefExoticComponent<Props$G & react.RefAttributes<HTMLDivElement>>;
|
|
595
600
|
|
|
596
|
-
type Props$
|
|
601
|
+
type Props$F = {
|
|
597
602
|
/**
|
|
598
603
|
* Applies the spacing scale to all sides.
|
|
599
604
|
*/
|
|
@@ -628,13 +633,13 @@ type Props$E = {
|
|
|
628
633
|
children: ReactNode;
|
|
629
634
|
};
|
|
630
635
|
|
|
631
|
-
declare const DxcBleed: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$
|
|
636
|
+
declare const DxcBleed: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$F) => react.JSX.Element;
|
|
632
637
|
|
|
633
638
|
type Item = {
|
|
634
639
|
href?: string;
|
|
635
640
|
label: string;
|
|
636
641
|
};
|
|
637
|
-
type Props$
|
|
642
|
+
type Props$E = {
|
|
638
643
|
/**
|
|
639
644
|
* Provides a label that describes the type of navigation enabled by
|
|
640
645
|
* the component.
|
|
@@ -666,7 +671,7 @@ type Props$D = {
|
|
|
666
671
|
showRoot?: boolean;
|
|
667
672
|
};
|
|
668
673
|
|
|
669
|
-
declare const DxcBreadcrumbs: ({ ariaLabel, items, itemsBeforeCollapse, onItemClick, showRoot, }: Props$
|
|
674
|
+
declare const DxcBreadcrumbs: ({ ariaLabel, items, itemsBeforeCollapse, onItemClick, showRoot, }: Props$E) => react.JSX.Element;
|
|
670
675
|
|
|
671
676
|
type IconProps = {
|
|
672
677
|
/**
|
|
@@ -696,7 +701,7 @@ type OtherProps = {
|
|
|
696
701
|
*/
|
|
697
702
|
children: ReactNode;
|
|
698
703
|
};
|
|
699
|
-
type Props$
|
|
704
|
+
type Props$D = IconProps | OtherProps;
|
|
700
705
|
type BulletedListItemPropsType = {
|
|
701
706
|
/**
|
|
702
707
|
* Text to be shown in the list.
|
|
@@ -705,7 +710,7 @@ type BulletedListItemPropsType = {
|
|
|
705
710
|
};
|
|
706
711
|
|
|
707
712
|
declare const DxcBulletedList: {
|
|
708
|
-
({ children, type, icon }: Props$
|
|
713
|
+
({ children, type, icon }: Props$D): JSX.Element;
|
|
709
714
|
Item: ({ children }: BulletedListItemPropsType) => JSX.Element;
|
|
710
715
|
};
|
|
711
716
|
|
|
@@ -718,7 +723,7 @@ type Size$4 = {
|
|
|
718
723
|
height?: "small" | "medium" | "large";
|
|
719
724
|
width?: "small" | "medium" | "large" | "fillParent" | "fitContent";
|
|
720
725
|
};
|
|
721
|
-
type Props$
|
|
726
|
+
type Props$C = {
|
|
722
727
|
/**
|
|
723
728
|
* Text to be placed in the button.
|
|
724
729
|
*/
|
|
@@ -770,9 +775,9 @@ type Props$B = {
|
|
|
770
775
|
tabIndex?: number;
|
|
771
776
|
};
|
|
772
777
|
|
|
773
|
-
declare const DxcButton:
|
|
778
|
+
declare const DxcButton: react.ForwardRefExoticComponent<Props$C & react.RefAttributes<HTMLButtonElement>>;
|
|
774
779
|
|
|
775
|
-
type Props$
|
|
780
|
+
type Props$B = {
|
|
776
781
|
/**
|
|
777
782
|
* Alternative text description displayed when the specified image is not loaded.
|
|
778
783
|
*
|
|
@@ -842,7 +847,7 @@ type Size$3 = {
|
|
|
842
847
|
width?: "fillParent" | "fitContent";
|
|
843
848
|
height?: "fillParent" | "fitContent";
|
|
844
849
|
};
|
|
845
|
-
type Props$
|
|
850
|
+
type Props$A = {
|
|
846
851
|
/**
|
|
847
852
|
* Custom content that will be placed inside the component.
|
|
848
853
|
*/
|
|
@@ -871,7 +876,7 @@ type Props$z = {
|
|
|
871
876
|
/**
|
|
872
877
|
* Image to be displayed inside the card.
|
|
873
878
|
*/
|
|
874
|
-
image?: Props$
|
|
879
|
+
image?: Props$B;
|
|
875
880
|
/**
|
|
876
881
|
* Position of the image inside the card. It can be set to "before" or "after" the content.
|
|
877
882
|
*/
|
|
@@ -930,9 +935,9 @@ type Props$z = {
|
|
|
930
935
|
tabIndex?: number;
|
|
931
936
|
};
|
|
932
937
|
|
|
933
|
-
declare const DxcCard: react.ForwardRefExoticComponent<Props$
|
|
938
|
+
declare const DxcCard: react.ForwardRefExoticComponent<Props$A & react.RefAttributes<HTMLDivElement | HTMLAnchorElement>>;
|
|
934
939
|
|
|
935
|
-
type Props$
|
|
940
|
+
type Props$z = {
|
|
936
941
|
/**
|
|
937
942
|
* Specifies a string to be used as the name for the checkbox element when no `label` is provided.
|
|
938
943
|
*/
|
|
@@ -997,13 +1002,13 @@ type Props$y = {
|
|
|
997
1002
|
value?: string;
|
|
998
1003
|
};
|
|
999
1004
|
|
|
1000
|
-
declare const DxcCheckbox: react.ForwardRefExoticComponent<Props$
|
|
1005
|
+
declare const DxcCheckbox: react.ForwardRefExoticComponent<Props$z & react.RefAttributes<HTMLDivElement>>;
|
|
1001
1006
|
|
|
1002
1007
|
type ChipAvatarType = {
|
|
1003
|
-
color: Props$
|
|
1004
|
-
profileName?: Props$
|
|
1005
|
-
imageSrc?: Props$
|
|
1006
|
-
icon?: Props$
|
|
1008
|
+
color: Props$H["color"];
|
|
1009
|
+
profileName?: Props$H["label"];
|
|
1010
|
+
imageSrc?: Props$H["imageSrc"];
|
|
1011
|
+
icon?: Props$H["icon"];
|
|
1007
1012
|
};
|
|
1008
1013
|
type CommonProps$7 = {
|
|
1009
1014
|
/**
|
|
@@ -1070,9 +1075,9 @@ type DismissibleChipProps = CommonProps$7 & {
|
|
|
1070
1075
|
selected?: never;
|
|
1071
1076
|
disabled?: never;
|
|
1072
1077
|
};
|
|
1073
|
-
type Props$
|
|
1078
|
+
type Props$y = SelectableChipProps | DismissibleChipProps;
|
|
1074
1079
|
|
|
1075
|
-
declare const DxcChip:
|
|
1080
|
+
declare const DxcChip: react.ForwardRefExoticComponent<Props$y & react.RefAttributes<HTMLDivElement>>;
|
|
1076
1081
|
|
|
1077
1082
|
type Space = {
|
|
1078
1083
|
top?: string;
|
|
@@ -1115,7 +1120,7 @@ type Overflow = OverflowValues | {
|
|
|
1115
1120
|
x?: OverflowValues;
|
|
1116
1121
|
y?: OverflowValues;
|
|
1117
1122
|
};
|
|
1118
|
-
type Props$
|
|
1123
|
+
type Props$x = {
|
|
1119
1124
|
/**
|
|
1120
1125
|
* Based on the CSS property background allows configuring all properties related to the background of a container.
|
|
1121
1126
|
*
|
|
@@ -1237,11 +1242,11 @@ type Props$w = {
|
|
|
1237
1242
|
zIndex?: "auto" | number;
|
|
1238
1243
|
};
|
|
1239
1244
|
|
|
1240
|
-
declare const DxcContainer: react.ForwardRefExoticComponent<Props$
|
|
1245
|
+
declare const DxcContainer: react.ForwardRefExoticComponent<Props$x & react.RefAttributes<HTMLDivElement>>;
|
|
1241
1246
|
|
|
1242
|
-
type Props$
|
|
1247
|
+
type Props$w = Omit<Props$K, "displayBorder" | "displayGroupLines" | "displayControlsAfter" | "hasPopOver">;
|
|
1243
1248
|
|
|
1244
|
-
declare function DxcContextualMenu({ items }: Props$
|
|
1249
|
+
declare function DxcContextualMenu({ items }: Props$w): react.JSX.Element;
|
|
1245
1250
|
|
|
1246
1251
|
type Size$2 = "small" | "medium" | "large" | "fillParent" | "fitContent";
|
|
1247
1252
|
type Option$2 = {
|
|
@@ -1257,8 +1262,12 @@ type Option$2 = {
|
|
|
1257
1262
|
* Option inner value.
|
|
1258
1263
|
*/
|
|
1259
1264
|
value: string;
|
|
1265
|
+
/**
|
|
1266
|
+
* Whether the option has a divider below it.
|
|
1267
|
+
*/
|
|
1268
|
+
hasDivider?: boolean;
|
|
1260
1269
|
};
|
|
1261
|
-
type Props$
|
|
1270
|
+
type Props$v = {
|
|
1262
1271
|
/**
|
|
1263
1272
|
* An array of objects representing the options.
|
|
1264
1273
|
*/
|
|
@@ -1341,7 +1350,7 @@ type ActionsCellPropsType = {
|
|
|
1341
1350
|
*/
|
|
1342
1351
|
actions: ActionCell[];
|
|
1343
1352
|
};
|
|
1344
|
-
type Props$
|
|
1353
|
+
type Props$u = {
|
|
1345
1354
|
/**
|
|
1346
1355
|
* The center section of the table. Can be used to render custom
|
|
1347
1356
|
* content in this area.
|
|
@@ -1575,14 +1584,14 @@ type BasicGridProps = {
|
|
|
1575
1584
|
*/
|
|
1576
1585
|
expandable?: false;
|
|
1577
1586
|
};
|
|
1578
|
-
type Props$
|
|
1587
|
+
type Props$t = CommonProps$6 & (PaginatedProps$1 | NonPaginatedProps$1) & ((BasicGridProps & SelectableGridProps) | (ExpandableRows & SelectableGridProps) | (HierarchyRows & SelectableGridProps));
|
|
1579
1588
|
|
|
1580
1589
|
declare const DxcDataGrid: {
|
|
1581
|
-
({ columns, rows, selectable, expandable, onSelectRows, selectedRows, uniqueRowId, summaryRow, onGridRowsChange, showPaginator, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, onSort, onPageChange, totalItems, defaultPage, }: Props$
|
|
1590
|
+
({ columns, rows, selectable, expandable, onSelectRows, selectedRows, uniqueRowId, summaryRow, onGridRowsChange, showPaginator, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, onSort, onPageChange, totalItems, defaultPage, }: Props$t): JSX.Element;
|
|
1582
1591
|
ActionsCell: ({ actions }: ActionsCellPropsType) => react.JSX.Element;
|
|
1583
1592
|
};
|
|
1584
1593
|
|
|
1585
|
-
type Props$
|
|
1594
|
+
type Props$s = {
|
|
1586
1595
|
/**
|
|
1587
1596
|
* Initial value of the input element, only when it is uncontrolled.
|
|
1588
1597
|
*/
|
|
@@ -1688,9 +1697,9 @@ type Props$r = {
|
|
|
1688
1697
|
ariaLabel?: string;
|
|
1689
1698
|
};
|
|
1690
1699
|
|
|
1691
|
-
declare const DxcDateInput: react.ForwardRefExoticComponent<Props$
|
|
1700
|
+
declare const DxcDateInput: react.ForwardRefExoticComponent<Props$s & react.RefAttributes<HTMLDivElement>>;
|
|
1692
1701
|
|
|
1693
|
-
type Props$
|
|
1702
|
+
type Props$r = {
|
|
1694
1703
|
/**
|
|
1695
1704
|
* If true, the close button will be visible.
|
|
1696
1705
|
*/
|
|
@@ -1730,9 +1739,9 @@ type Props$q = {
|
|
|
1730
1739
|
disableFocusLock?: boolean;
|
|
1731
1740
|
};
|
|
1732
1741
|
|
|
1733
|
-
declare const DxcDialog: ({ children, closable, onBackgroundClick, onCloseClick, overlay, tabIndex, disableFocusLock, }: Props$
|
|
1742
|
+
declare const DxcDialog: ({ children, closable, onBackgroundClick, onCloseClick, overlay, tabIndex, disableFocusLock, }: Props$r) => JSX.Element;
|
|
1734
1743
|
|
|
1735
|
-
type Props$
|
|
1744
|
+
type Props$q = {
|
|
1736
1745
|
/**
|
|
1737
1746
|
* The divider can be shown in horizontal or vertical.
|
|
1738
1747
|
*/
|
|
@@ -1753,9 +1762,9 @@ type Props$p = {
|
|
|
1753
1762
|
decorative?: boolean;
|
|
1754
1763
|
};
|
|
1755
1764
|
|
|
1756
|
-
declare function DxcDivider({ color, decorative, orientation, weight, }: Props$
|
|
1765
|
+
declare function DxcDivider({ color, decorative, orientation, weight, }: Props$q): react.JSX.Element;
|
|
1757
1766
|
|
|
1758
|
-
declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$
|
|
1767
|
+
declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$v) => react.JSX.Element;
|
|
1759
1768
|
|
|
1760
1769
|
type FileData = {
|
|
1761
1770
|
/**
|
|
@@ -1865,9 +1874,9 @@ type FileModeProps = CommonProps$5 & {
|
|
|
1865
1874
|
*/
|
|
1866
1875
|
mode?: "file";
|
|
1867
1876
|
};
|
|
1868
|
-
type Props$
|
|
1877
|
+
type Props$p = DropModeProps | FileModeProps;
|
|
1869
1878
|
|
|
1870
|
-
declare const DxcFileInput: react.ForwardRefExoticComponent<Props$
|
|
1879
|
+
declare const DxcFileInput: react.ForwardRefExoticComponent<Props$p & react.RefAttributes<HTMLDivElement>>;
|
|
1871
1880
|
|
|
1872
1881
|
type Gap$1 = {
|
|
1873
1882
|
rowGap: string;
|
|
@@ -1902,7 +1911,7 @@ type CommonProps$4 = {
|
|
|
1902
1911
|
*/
|
|
1903
1912
|
alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
|
|
1904
1913
|
};
|
|
1905
|
-
type Props$
|
|
1914
|
+
type Props$o = CommonProps$4 & {
|
|
1906
1915
|
/**
|
|
1907
1916
|
* Sets the flex-direction CSS property.
|
|
1908
1917
|
*
|
|
@@ -1959,7 +1968,7 @@ type Props$n = CommonProps$4 & {
|
|
|
1959
1968
|
children: ReactNode;
|
|
1960
1969
|
};
|
|
1961
1970
|
|
|
1962
|
-
declare const DxcFlex: ({ basis, direction, fullHeight, gap, grow, order, shrink, wrap, ...props }: Props$
|
|
1971
|
+
declare const DxcFlex: ({ basis, direction, fullHeight, gap, grow, order, shrink, wrap, ...props }: Props$o) => react.JSX.Element;
|
|
1963
1972
|
|
|
1964
1973
|
type Gap = string | {
|
|
1965
1974
|
columnGap?: string;
|
|
@@ -2017,7 +2026,7 @@ type GridItemProps = {
|
|
|
2017
2026
|
*/
|
|
2018
2027
|
row?: number | string | GridCell;
|
|
2019
2028
|
};
|
|
2020
|
-
type Props$
|
|
2029
|
+
type Props$n = GridItemProps & {
|
|
2021
2030
|
/**
|
|
2022
2031
|
* Sets the grid-auto-columns CSS property.
|
|
2023
2032
|
*
|
|
@@ -2075,14 +2084,14 @@ type Props$m = GridItemProps & {
|
|
|
2075
2084
|
};
|
|
2076
2085
|
|
|
2077
2086
|
declare const DxcGrid: {
|
|
2078
|
-
(props: Props$
|
|
2087
|
+
(props: Props$n): react.JSX.Element;
|
|
2079
2088
|
Item: _emotion_styled.StyledComponent<{
|
|
2080
2089
|
theme?: _emotion_react.Theme;
|
|
2081
2090
|
as?: React.ElementType;
|
|
2082
2091
|
} & GridItemProps, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
2083
2092
|
};
|
|
2084
2093
|
|
|
2085
|
-
type Props$
|
|
2094
|
+
type Props$m = {
|
|
2086
2095
|
/**
|
|
2087
2096
|
* Defines the heading level from 1 to 5. The styles of the heading are applied according to the level.
|
|
2088
2097
|
* The html tag of the heading will be the one specified in the 'as' prop.
|
|
@@ -2108,11 +2117,11 @@ type Props$l = {
|
|
|
2108
2117
|
margin?: Space$1 | Margin;
|
|
2109
2118
|
};
|
|
2110
2119
|
|
|
2111
|
-
declare function DxcHeading({ as, level, margin, text, weight }: Props$
|
|
2120
|
+
declare function DxcHeading({ as, level, margin, text, weight }: Props$m): react.JSX.Element;
|
|
2112
2121
|
|
|
2113
|
-
declare function DxcImage({ alt, caption, height, lazyLoading, objectFit, objectPosition, onError, onLoad, sizes, src, srcSet, width, }: Props$
|
|
2122
|
+
declare function DxcImage({ alt, caption, height, lazyLoading, objectFit, objectPosition, onError, onLoad, sizes, src, srcSet, width, }: Props$B): react.JSX.Element;
|
|
2114
2123
|
|
|
2115
|
-
type Props$
|
|
2124
|
+
type Props$l = {
|
|
2116
2125
|
/**
|
|
2117
2126
|
* Applies the spacing scale to the bottom side.
|
|
2118
2127
|
*/
|
|
@@ -2147,7 +2156,7 @@ type Props$k = {
|
|
|
2147
2156
|
vertical?: string;
|
|
2148
2157
|
};
|
|
2149
2158
|
|
|
2150
|
-
declare function DxcInset({ bottom, children, horizontal, left, right, space, top, vertical }: Props$
|
|
2159
|
+
declare function DxcInset({ bottom, children, horizontal, left, right, space, top, vertical }: Props$l): react.JSX.Element;
|
|
2151
2160
|
|
|
2152
2161
|
type LinkProps = {
|
|
2153
2162
|
/**
|
|
@@ -2196,6 +2205,121 @@ type LinkProps = {
|
|
|
2196
2205
|
|
|
2197
2206
|
declare const DxcLink: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
|
|
2198
2207
|
|
|
2208
|
+
type SelectOption = {
|
|
2209
|
+
label?: string;
|
|
2210
|
+
value: string;
|
|
2211
|
+
onSelect: (value: string) => void;
|
|
2212
|
+
selected?: boolean;
|
|
2213
|
+
};
|
|
2214
|
+
type Props$k = {
|
|
2215
|
+
/**
|
|
2216
|
+
* If true, the voice recording button will be shown.
|
|
2217
|
+
*/
|
|
2218
|
+
allowRecording?: boolean;
|
|
2219
|
+
/**
|
|
2220
|
+
* This function will be called when the selection of top items changes.
|
|
2221
|
+
* If this function is provided the message input will allow file selection.
|
|
2222
|
+
*/
|
|
2223
|
+
callbackFile?: (files: File[]) => void;
|
|
2224
|
+
/**
|
|
2225
|
+
* Initial value of the input, only when it is uncontrolled.
|
|
2226
|
+
*/
|
|
2227
|
+
defaultValue?: string;
|
|
2228
|
+
/**
|
|
2229
|
+
* If true, the component will be disabled.
|
|
2230
|
+
*/
|
|
2231
|
+
disabled?: boolean;
|
|
2232
|
+
/**
|
|
2233
|
+
* If it is a defined value and also a truthy string, the component will
|
|
2234
|
+
* change its appearance, showing the error below the input component. If
|
|
2235
|
+
* the defined value is an empty string, it will reserve a space below
|
|
2236
|
+
* the component for a future error, but it would not change its look. In
|
|
2237
|
+
* case of being undefined or null, both the appearance and the space for
|
|
2238
|
+
* the error message would not be modified.
|
|
2239
|
+
*/
|
|
2240
|
+
error?: string;
|
|
2241
|
+
/**
|
|
2242
|
+
* Items to be shown at the top.
|
|
2243
|
+
*/
|
|
2244
|
+
files?: File[];
|
|
2245
|
+
/**
|
|
2246
|
+
* If true, it indicates that a request is being processed after the user submits a query.
|
|
2247
|
+
*/
|
|
2248
|
+
isGenerating?: boolean;
|
|
2249
|
+
/**
|
|
2250
|
+
* Specifies the maximum length allowed by the input.
|
|
2251
|
+
* This will be checked both when the input element loses the
|
|
2252
|
+
* focus and while typing within it. If the string entered does not
|
|
2253
|
+
* comply the maximum length, the onBlur and onChange functions will be called
|
|
2254
|
+
* with the current value and an internal error informing that the value
|
|
2255
|
+
* length does not comply the specified range. If a valid length is
|
|
2256
|
+
* reached, the error parameter of both events will not be defined.
|
|
2257
|
+
*/
|
|
2258
|
+
maxLength?: number;
|
|
2259
|
+
/**
|
|
2260
|
+
* Specifies the minimum length allowed by the input.
|
|
2261
|
+
* This will be checked both when the input element loses the
|
|
2262
|
+
* focus and while typing within it. If the string entered does not
|
|
2263
|
+
* comply the minimum length, the onBlur and onChange functions will be called
|
|
2264
|
+
* with the current value and an internal error informing that the value
|
|
2265
|
+
* length does not comply the specified range. If a valid length is
|
|
2266
|
+
* reached, the error parameter of both events will not be defined.
|
|
2267
|
+
*/
|
|
2268
|
+
minLength?: number;
|
|
2269
|
+
/**
|
|
2270
|
+
* Options to be shown on the dropdown under the input.
|
|
2271
|
+
*/
|
|
2272
|
+
selectOptions?: SelectOption[];
|
|
2273
|
+
/**
|
|
2274
|
+
* This function will be called when the input element loses the focus.
|
|
2275
|
+
* An object including the input value and the error (if the value
|
|
2276
|
+
* entered is not valid) will be passed to this function. If there is no error,
|
|
2277
|
+
* error will not be defined.
|
|
2278
|
+
*/
|
|
2279
|
+
onBlur?: (val: {
|
|
2280
|
+
value: string;
|
|
2281
|
+
error?: string;
|
|
2282
|
+
}) => void;
|
|
2283
|
+
/**
|
|
2284
|
+
* This function will be called when the user types within the input
|
|
2285
|
+
* element of the component. An object including the current value and
|
|
2286
|
+
* the error (if the value entered is not valid) will be passed to this
|
|
2287
|
+
* function. If there is no error, error will not be defined.
|
|
2288
|
+
*/
|
|
2289
|
+
onChange?: (val: {
|
|
2290
|
+
value: string;
|
|
2291
|
+
error?: string;
|
|
2292
|
+
}) => void;
|
|
2293
|
+
/**
|
|
2294
|
+
* This function will be called when the user clicks on the button (submit or stop) or presses enter.
|
|
2295
|
+
* The type parameter indicates whether it's a "submit" or "stop" event. For submit events, "value", "files" and "selectedOption" are provided.
|
|
2296
|
+
*/
|
|
2297
|
+
onButtonClick?: (val: {
|
|
2298
|
+
type: "submit" | "stop";
|
|
2299
|
+
value?: string;
|
|
2300
|
+
files?: File[];
|
|
2301
|
+
selectedOption?: SelectOption;
|
|
2302
|
+
}) => void;
|
|
2303
|
+
/**
|
|
2304
|
+
* Text to be put as placeholder of the input.
|
|
2305
|
+
*/
|
|
2306
|
+
placeholder?: string;
|
|
2307
|
+
/**
|
|
2308
|
+
* Specifies the size of the component. The size will affect the width of the input.
|
|
2309
|
+
*/
|
|
2310
|
+
size?: "small" | "medium" | "large" | "fillParent";
|
|
2311
|
+
/**
|
|
2312
|
+
* Value of the tabindex attribute.
|
|
2313
|
+
*/
|
|
2314
|
+
tabIndex?: number;
|
|
2315
|
+
/**
|
|
2316
|
+
* Value of the input. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
|
|
2317
|
+
*/
|
|
2318
|
+
value?: string;
|
|
2319
|
+
};
|
|
2320
|
+
|
|
2321
|
+
declare const DxcMessageInput: ({ allowRecording, callbackFile, defaultValue, disabled, error, files, isGenerating, maxLength, minLength, selectOptions, onBlur, onButtonClick, onChange, placeholder, size, tabIndex, value, }: Props$k) => react.JSX.Element;
|
|
2322
|
+
|
|
2199
2323
|
type TabProps$1 = {
|
|
2200
2324
|
/**
|
|
2201
2325
|
* Whether the tab is active or not.
|
|
@@ -2547,15 +2671,21 @@ type PopoverPropsType = {
|
|
|
2547
2671
|
/** Callback function when the popover is opened.
|
|
2548
2672
|
* Used only in controlled mode and if the trigger lacks the events to manage the controlled behavior. */
|
|
2549
2673
|
onOpen?: () => void;
|
|
2674
|
+
/** Callback function when the popover is opened and the focus is set to the first focusable element inside the popover.
|
|
2675
|
+
* */
|
|
2676
|
+
onOpenAutoFocus?: (event: Event) => void;
|
|
2550
2677
|
/** Callback function when the popover is closed. */
|
|
2551
2678
|
onClose?: () => void;
|
|
2679
|
+
/** Callback function when the popover is closed and the focus is set back to the trigger element.
|
|
2680
|
+
* */
|
|
2681
|
+
onCloseAutoFocus?: (event: Event) => void;
|
|
2552
2682
|
/** Content to be displayed inside the popover. */
|
|
2553
2683
|
popoverContent: React.ReactNode;
|
|
2554
2684
|
/** Side of the trigger where the popover will appear. */
|
|
2555
2685
|
side?: "top" | "bottom" | "left" | "right";
|
|
2556
2686
|
};
|
|
2557
2687
|
|
|
2558
|
-
declare const DxcPopover: ({ actionToOpen, align, asChild, children, hasTip, isOpen, offset, onOpen, onClose, popoverContent, side, }: PopoverPropsType) => JSX.Element;
|
|
2688
|
+
declare const DxcPopover: ({ actionToOpen, align, asChild, children, hasTip, isOpen, offset, onOpen, onOpenAutoFocus, onClose, onCloseAutoFocus, popoverContent, side, }: PopoverPropsType) => JSX.Element;
|
|
2559
2689
|
|
|
2560
2690
|
type Size$1 = {
|
|
2561
2691
|
top?: Space$1;
|
|
@@ -3218,7 +3348,7 @@ type Props$8 = {
|
|
|
3218
3348
|
declare const DxcSwitch: react.ForwardRefExoticComponent<Props$8 & react.RefAttributes<HTMLDivElement>>;
|
|
3219
3349
|
|
|
3220
3350
|
declare const DxcTable: {
|
|
3221
|
-
({ children, margin, mode }: Props$
|
|
3351
|
+
({ children, margin, mode }: Props$u): react.JSX.Element;
|
|
3222
3352
|
ActionsCell: ({ actions }: ActionsCellPropsType) => react.JSX.Element;
|
|
3223
3353
|
};
|
|
3224
3354
|
|
|
@@ -3965,6 +4095,14 @@ declare const defaultTranslatedComponentLabels: {
|
|
|
3965
4095
|
closeIcon: string;
|
|
3966
4096
|
hamburgerTitle: string;
|
|
3967
4097
|
};
|
|
4098
|
+
messageInput: {
|
|
4099
|
+
inputAriaLabel: string;
|
|
4100
|
+
sendButtonTitle: string;
|
|
4101
|
+
stopButtonTitle: string;
|
|
4102
|
+
attachFileButtonTitle: string;
|
|
4103
|
+
recordAudioButtonTitle: string;
|
|
4104
|
+
stopRecordingButtonTitle: string;
|
|
4105
|
+
};
|
|
3968
4106
|
numberInput: {
|
|
3969
4107
|
valueGreaterThanOrEqualToErrorMessage: (value: number) => string;
|
|
3970
4108
|
valueLessThanOrEqualToErrorMessage: (value: number) => string;
|
|
@@ -4079,6 +4217,14 @@ declare const HalstackLanguageContext: react.Context<{
|
|
|
4079
4217
|
closeIcon: string;
|
|
4080
4218
|
hamburgerTitle: string;
|
|
4081
4219
|
};
|
|
4220
|
+
messageInput: {
|
|
4221
|
+
inputAriaLabel: string;
|
|
4222
|
+
sendButtonTitle: string;
|
|
4223
|
+
stopButtonTitle: string;
|
|
4224
|
+
attachFileButtonTitle: string;
|
|
4225
|
+
recordAudioButtonTitle: string;
|
|
4226
|
+
stopRecordingButtonTitle: string;
|
|
4227
|
+
};
|
|
4082
4228
|
numberInput: {
|
|
4083
4229
|
valueGreaterThanOrEqualToErrorMessage: (value: number) => string;
|
|
4084
4230
|
valueLessThanOrEqualToErrorMessage: (value: number) => string;
|
|
@@ -4152,4 +4298,4 @@ declare function useToast(): {
|
|
|
4152
4298
|
loading: (toast: Omit<LoadingToast, "loading">) => (() => void) | undefined;
|
|
4153
4299
|
};
|
|
4154
4300
|
|
|
4155
|
-
export { DxcAccordion, DxcAlert, DxcApplicationLayout, DxcAvatar, 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, DxcPopover, DxcProgressBar, DxcQuickNav, DxcRadioGroup, DxcResultsetTable, DxcSelect, DxcSlider, DxcSpinner, DxcStatusLight, DxcSwitch, DxcTable, DxcTabs, DxcTextInput, DxcTextarea, DxcTimeInput, DxcToastsQueue, DxcToggleGroup, DxcTooltip, DxcTypography, DxcWizard, HalstackLanguageContext, HalstackProvider, useToast };
|
|
4301
|
+
export { DxcAccordion, DxcAlert, DxcApplicationLayout, DxcAvatar, DxcBadge, DxcBleed, DxcBreadcrumbs, DxcBulletedList, DxcButton, DxcCard, DxcCheckbox, DxcChip, DxcContainer, DxcContextualMenu, DxcDataGrid, DxcDateInput, DxcDialog, DxcDivider, DxcDropdown, DxcFileInput, DxcFlex, DxcGrid, DxcHeading, DxcImage, DxcInset, DxcLink, DxcMessageInput, DxcNavTabs, DxcNumberInput, DxcPaginator, DxcParagraph, DxcPasswordInput, DxcPopover, DxcProgressBar, DxcQuickNav, DxcRadioGroup, DxcResultsetTable, DxcSelect, DxcSlider, DxcSpinner, DxcStatusLight, DxcSwitch, DxcTable, DxcTabs, DxcTextInput, DxcTextarea, DxcTimeInput, DxcToastsQueue, DxcToggleGroup, DxcTooltip, DxcTypography, DxcWizard, HalstackLanguageContext, HalstackProvider, useToast };
|