@dxc-technology/halstack-react 0.0.0-cf83907 → 0.0.0-cfbffbd
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/README.md +1 -1
- package/dist/index.d.mts +315 -236
- package/dist/index.d.ts +315 -236
- package/dist/index.js +3856 -2928
- package/dist/index.mjs +3653 -2726
- package/package.json +6 -5
package/dist/index.d.mts
CHANGED
|
@@ -112,10 +112,10 @@ type NonIndependentProps = CommonProps$a & {
|
|
|
112
112
|
*/
|
|
113
113
|
onActiveChange?: (index: number[]) => void;
|
|
114
114
|
};
|
|
115
|
-
type Props$
|
|
115
|
+
type Props$M = IndependentProps | NonIndependentProps;
|
|
116
116
|
|
|
117
117
|
declare const DxcAccordion: {
|
|
118
|
-
(props: Props$
|
|
118
|
+
(props: Props$M): JSX.Element;
|
|
119
119
|
AccordionItem: ({ label, subLabel, badge, statusLight, icon, assistiveText, disabled, children, tabIndex, }: AccordionItemProps) => JSX.Element;
|
|
120
120
|
};
|
|
121
121
|
|
|
@@ -198,9 +198,9 @@ type ModeSpecificProps = {
|
|
|
198
198
|
*/
|
|
199
199
|
mode: "modal";
|
|
200
200
|
};
|
|
201
|
-
type Props$
|
|
201
|
+
type Props$L = CommonProps$9 & ModeSpecificProps;
|
|
202
202
|
|
|
203
|
-
declare const DxcAlert: ({ closable, message, mode, primaryAction, secondaryAction, semantic, title, }: Props$
|
|
203
|
+
declare const DxcAlert: ({ closable, message, mode, primaryAction, secondaryAction, semantic, title, }: Props$L) => react_jsx_runtime.JSX.Element;
|
|
204
204
|
|
|
205
205
|
type SearchBarProps = {
|
|
206
206
|
/**
|
|
@@ -254,7 +254,7 @@ type Section$1 = {
|
|
|
254
254
|
items: (Item$1 | GroupItem$1)[];
|
|
255
255
|
title?: string;
|
|
256
256
|
};
|
|
257
|
-
type Props$
|
|
257
|
+
type Props$K = {
|
|
258
258
|
/**
|
|
259
259
|
* Array of items to be displayed in the menu.
|
|
260
260
|
* Each item can be a single/simple item, a group item or a section.
|
|
@@ -280,6 +280,11 @@ type Props$J = {
|
|
|
280
280
|
* If true the menu will be displayed horizontally.
|
|
281
281
|
*/
|
|
282
282
|
isHorizontal?: boolean;
|
|
283
|
+
/**
|
|
284
|
+
* Function that will be called when an option is clicked.
|
|
285
|
+
* This is used to notify that an item has been selected to close any visible menu that is not managed by the navigation tree.
|
|
286
|
+
*/
|
|
287
|
+
onSelectItem?: () => void;
|
|
283
288
|
};
|
|
284
289
|
|
|
285
290
|
type Section = {
|
|
@@ -287,7 +292,7 @@ type Section = {
|
|
|
287
292
|
title?: string;
|
|
288
293
|
};
|
|
289
294
|
type SearchbarSidenavProps = Omit<SearchBarProps, "autoFocus" | "disabled" | "onCancel">;
|
|
290
|
-
type Props$
|
|
295
|
+
type Props$J = {
|
|
291
296
|
/**
|
|
292
297
|
* The content rendered in the bottom part of the sidenav, under the navigation menu.
|
|
293
298
|
*/
|
|
@@ -333,7 +338,7 @@ type GroupItem = CommonItemProps & {
|
|
|
333
338
|
};
|
|
334
339
|
type MainNavPropsType = (GroupItem | Item$1)[];
|
|
335
340
|
type SearchBarHeaderProps = Omit<SearchBarProps, "autoFocus" | "disabled">;
|
|
336
|
-
type Props$
|
|
341
|
+
type Props$I = {
|
|
337
342
|
appTitle?: string;
|
|
338
343
|
navItems?: MainNavPropsType;
|
|
339
344
|
responsiveBottomContent?: ReactNode;
|
|
@@ -465,9 +470,9 @@ type ApplicationLayoutPropsType = {
|
|
|
465
470
|
declare const DxcApplicationLayout: {
|
|
466
471
|
({ logo, header, sidenav, footer, children }: ApplicationLayoutPropsType): JSX.Element;
|
|
467
472
|
Footer: ({ bottomLinks, copyright, leftContent, logo, mode, rightContent, socialLinks, tabIndex, }: FooterPropsType) => JSX.Element;
|
|
468
|
-
Header: ({ appTitle, navItems, responsiveBottomContent, searchBar, sideContent, }: Props$
|
|
473
|
+
Header: ({ appTitle, navItems, responsiveBottomContent, searchBar, sideContent, }: Props$I) => JSX.Element;
|
|
469
474
|
Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
|
|
470
|
-
Sidenav: ({ topContent, bottomContent, navItems, appTitle, displayGroupLines, expanded, defaultExpanded, onExpandedChange, searchBar, }: Props$
|
|
475
|
+
Sidenav: ({ topContent, bottomContent, navItems, appTitle, displayGroupLines, expanded, defaultExpanded, onExpandedChange, searchBar, }: Props$J) => JSX.Element;
|
|
471
476
|
};
|
|
472
477
|
|
|
473
478
|
type Size$5 = "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
@@ -477,7 +482,7 @@ interface Status {
|
|
|
477
482
|
mode: "default" | "info" | "success" | "warning" | "error";
|
|
478
483
|
position: "top" | "bottom";
|
|
479
484
|
}
|
|
480
|
-
type Props$
|
|
485
|
+
type Props$H = {
|
|
481
486
|
/**
|
|
482
487
|
* Affects the visual style of the avatar. It can be used following semantic purposes or not.
|
|
483
488
|
*/
|
|
@@ -538,7 +543,7 @@ type Props$G = {
|
|
|
538
543
|
title?: string;
|
|
539
544
|
};
|
|
540
545
|
|
|
541
|
-
declare const DxcAvatar: react.
|
|
546
|
+
declare const DxcAvatar: react.ForwardRefExoticComponent<Props$H & react.RefAttributes<HTMLDivElement>>;
|
|
542
547
|
|
|
543
548
|
type ContextualProps = {
|
|
544
549
|
/**
|
|
@@ -590,11 +595,11 @@ type CommonProps$8 = {
|
|
|
590
595
|
*/
|
|
591
596
|
size?: "small" | "medium" | "large";
|
|
592
597
|
};
|
|
593
|
-
type Props$
|
|
598
|
+
type Props$G = (ContextualProps | NotificationProps) & CommonProps$8;
|
|
594
599
|
|
|
595
|
-
declare const DxcBadge:
|
|
600
|
+
declare const DxcBadge: react.ForwardRefExoticComponent<Props$G & react.RefAttributes<HTMLDivElement>>;
|
|
596
601
|
|
|
597
|
-
type Props$
|
|
602
|
+
type Props$F = {
|
|
598
603
|
/**
|
|
599
604
|
* Applies the spacing scale to all sides.
|
|
600
605
|
*/
|
|
@@ -629,13 +634,13 @@ type Props$E = {
|
|
|
629
634
|
children: ReactNode;
|
|
630
635
|
};
|
|
631
636
|
|
|
632
|
-
declare const DxcBleed: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$
|
|
637
|
+
declare const DxcBleed: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$F) => react_jsx_runtime.JSX.Element;
|
|
633
638
|
|
|
634
639
|
type Item = {
|
|
635
640
|
href?: string;
|
|
636
641
|
label: string;
|
|
637
642
|
};
|
|
638
|
-
type Props$
|
|
643
|
+
type Props$E = {
|
|
639
644
|
/**
|
|
640
645
|
* Provides a label that describes the type of navigation enabled by
|
|
641
646
|
* the component.
|
|
@@ -667,7 +672,7 @@ type Props$D = {
|
|
|
667
672
|
showRoot?: boolean;
|
|
668
673
|
};
|
|
669
674
|
|
|
670
|
-
declare const DxcBreadcrumbs: ({ ariaLabel, items, itemsBeforeCollapse, onItemClick, showRoot, }: Props$
|
|
675
|
+
declare const DxcBreadcrumbs: ({ ariaLabel, items, itemsBeforeCollapse, onItemClick, showRoot, }: Props$E) => react_jsx_runtime.JSX.Element;
|
|
671
676
|
|
|
672
677
|
type IconProps = {
|
|
673
678
|
/**
|
|
@@ -697,7 +702,7 @@ type OtherProps = {
|
|
|
697
702
|
*/
|
|
698
703
|
children: ReactNode;
|
|
699
704
|
};
|
|
700
|
-
type Props$
|
|
705
|
+
type Props$D = IconProps | OtherProps;
|
|
701
706
|
type BulletedListItemPropsType = {
|
|
702
707
|
/**
|
|
703
708
|
* Text to be shown in the list.
|
|
@@ -706,7 +711,7 @@ type BulletedListItemPropsType = {
|
|
|
706
711
|
};
|
|
707
712
|
|
|
708
713
|
declare const DxcBulletedList: {
|
|
709
|
-
({ children, type, icon }: Props$
|
|
714
|
+
({ children, type, icon }: Props$D): JSX.Element;
|
|
710
715
|
Item: ({ children }: BulletedListItemPropsType) => JSX.Element;
|
|
711
716
|
};
|
|
712
717
|
|
|
@@ -719,7 +724,7 @@ type Size$4 = {
|
|
|
719
724
|
height?: "small" | "medium" | "large";
|
|
720
725
|
width?: "small" | "medium" | "large" | "fillParent" | "fitContent";
|
|
721
726
|
};
|
|
722
|
-
type Props$
|
|
727
|
+
type Props$C = {
|
|
723
728
|
/**
|
|
724
729
|
* Text to be placed in the button.
|
|
725
730
|
*/
|
|
@@ -771,69 +776,167 @@ type Props$B = {
|
|
|
771
776
|
tabIndex?: number;
|
|
772
777
|
};
|
|
773
778
|
|
|
774
|
-
declare const DxcButton:
|
|
779
|
+
declare const DxcButton: react.ForwardRefExoticComponent<Props$C & react.RefAttributes<HTMLButtonElement>>;
|
|
780
|
+
|
|
781
|
+
type Props$B = {
|
|
782
|
+
/**
|
|
783
|
+
* Alternative text description displayed when the specified image is not loaded.
|
|
784
|
+
*
|
|
785
|
+
* See MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt
|
|
786
|
+
* See W3C alt decision tree: https://www.w3.org/WAI/tutorials/images/decision-tree/
|
|
787
|
+
*/
|
|
788
|
+
alt: string;
|
|
789
|
+
/**
|
|
790
|
+
* Image legend with a descriptive purpose. It is placed below the image and is complementary to the alt attribute,
|
|
791
|
+
* which is required regardless of the presence of the caption or not.
|
|
792
|
+
*/
|
|
793
|
+
caption?: string;
|
|
794
|
+
/**
|
|
795
|
+
* Sets the rendered height of the image.
|
|
796
|
+
*/
|
|
797
|
+
height?: string;
|
|
798
|
+
/**
|
|
799
|
+
* If true, the image will be loaded only when it is visible on the screen (lazy loading).
|
|
800
|
+
* Otherwise and by default, the image will be loaded as soon as the component is mounted (eager loading).
|
|
801
|
+
*/
|
|
802
|
+
lazyLoading?: boolean;
|
|
803
|
+
/**
|
|
804
|
+
* Sets the object-fit CSS property.
|
|
805
|
+
*
|
|
806
|
+
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
|
|
807
|
+
*/
|
|
808
|
+
objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
|
|
809
|
+
/**
|
|
810
|
+
* Sets the object-position CSS property.
|
|
811
|
+
*
|
|
812
|
+
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
|
|
813
|
+
*/
|
|
814
|
+
objectPosition?: string;
|
|
815
|
+
/**
|
|
816
|
+
* This function will be called when the image fails to load.
|
|
817
|
+
*/
|
|
818
|
+
onError?: ReactEventHandler<HTMLImageElement>;
|
|
819
|
+
/**
|
|
820
|
+
* This function will be called when the image is loaded.
|
|
821
|
+
*/
|
|
822
|
+
onLoad?: ReactEventHandler<HTMLImageElement>;
|
|
823
|
+
/**
|
|
824
|
+
* One or more strings separated by commas, indicating a set of source sizes.
|
|
825
|
+
* If the srcSet attribute is absent or contains no values with a width descriptor,
|
|
826
|
+
* then this attribute has no effect.
|
|
827
|
+
*
|
|
828
|
+
* See MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes
|
|
829
|
+
*/
|
|
830
|
+
sizes?: string;
|
|
831
|
+
/**
|
|
832
|
+
* URL of the image. This prop is required and must be valid.
|
|
833
|
+
*/
|
|
834
|
+
src: string;
|
|
835
|
+
/**
|
|
836
|
+
* List of one or more strings separated by commas indicating a set of possible images for the user agent to use.
|
|
837
|
+
*
|
|
838
|
+
* See MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset
|
|
839
|
+
*/
|
|
840
|
+
srcSet?: string;
|
|
841
|
+
/**
|
|
842
|
+
* Sets the rendered width of the image.
|
|
843
|
+
*/
|
|
844
|
+
width?: string;
|
|
845
|
+
};
|
|
775
846
|
|
|
776
847
|
type Size$3 = {
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
left?: Space$1;
|
|
780
|
-
right?: Space$1;
|
|
848
|
+
width?: "fillParent" | "fitContent";
|
|
849
|
+
height?: "fillParent" | "fitContent";
|
|
781
850
|
};
|
|
782
851
|
type Props$A = {
|
|
783
852
|
/**
|
|
784
|
-
*
|
|
785
|
-
* In case of omission, the image container will not appear and
|
|
786
|
-
* the content will occupy its space.
|
|
853
|
+
* Custom content that will be placed inside the component.
|
|
787
854
|
*/
|
|
788
|
-
|
|
855
|
+
children?: ReactNode;
|
|
789
856
|
/**
|
|
790
|
-
*
|
|
857
|
+
* Initial state of the checkbox, only when it is uncontrolled.
|
|
858
|
+
*/
|
|
859
|
+
defaultSelected?: boolean;
|
|
860
|
+
/**
|
|
861
|
+
* Defines the direction of the content inside the card. It can be set to "row" or "column". The default value is "column".
|
|
791
862
|
*/
|
|
792
|
-
|
|
863
|
+
direction?: "row" | "column";
|
|
793
864
|
/**
|
|
794
|
-
*
|
|
795
|
-
* component. You can pass an object with 'top', 'bottom', 'left'
|
|
796
|
-
* and 'right' properties in order to specify different padding sizes.
|
|
865
|
+
* Defines the size of the card when it is empty.
|
|
797
866
|
*/
|
|
798
|
-
|
|
867
|
+
emptySize?: {
|
|
868
|
+
width?: string;
|
|
869
|
+
height?: string;
|
|
870
|
+
iconSize?: "small" | "medium" | "large";
|
|
871
|
+
};
|
|
799
872
|
/**
|
|
800
|
-
*
|
|
873
|
+
* URL to navigate to when the card is clicked.
|
|
874
|
+
* If href is defined selectable will be ignored and the link will be always considered as an anchor.
|
|
875
|
+
*/
|
|
876
|
+
href?: string;
|
|
877
|
+
/**
|
|
878
|
+
* Image to be displayed inside the card.
|
|
879
|
+
*/
|
|
880
|
+
image?: Props$B;
|
|
881
|
+
/**
|
|
882
|
+
* Position of the image inside the card. It can be set to "before" or "after" the content.
|
|
801
883
|
*/
|
|
802
884
|
imagePosition?: "before" | "after";
|
|
803
885
|
/**
|
|
804
|
-
* If
|
|
805
|
-
* as "href". Component will show some visual feedback on hover.
|
|
886
|
+
* If true, the card will be displayed as empty state.
|
|
806
887
|
*/
|
|
807
|
-
|
|
888
|
+
isEmpty?: boolean;
|
|
808
889
|
/**
|
|
809
|
-
*
|
|
810
|
-
* will show some visual feedback on hover.
|
|
890
|
+
* If true, a loading state will be displayed inside the card.
|
|
811
891
|
*/
|
|
812
|
-
|
|
892
|
+
isLoading?: boolean;
|
|
813
893
|
/**
|
|
814
|
-
*
|
|
894
|
+
* Defines the size of the loading card when isLoading is true.
|
|
815
895
|
*/
|
|
816
|
-
|
|
896
|
+
loadingSize?: {
|
|
897
|
+
width?: string;
|
|
898
|
+
height?: string;
|
|
899
|
+
};
|
|
817
900
|
/**
|
|
818
|
-
*
|
|
819
|
-
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
901
|
+
* Defines the visual style of the card. It can be set to "elevated" or "outlined".
|
|
820
902
|
*/
|
|
821
|
-
|
|
903
|
+
mode?: "elevated" | "outlined";
|
|
822
904
|
/**
|
|
823
|
-
*
|
|
905
|
+
* If true, the link will open in a new window. href must be provided for this to work.
|
|
824
906
|
*/
|
|
825
|
-
|
|
907
|
+
newWindow?: boolean;
|
|
826
908
|
/**
|
|
827
|
-
*
|
|
909
|
+
* Callback function that is called when the card is clicked.
|
|
910
|
+
* It receives a boolean value indicating whether the card is selected or not.
|
|
911
|
+
* selectable must be true for this to work.
|
|
828
912
|
*/
|
|
829
|
-
|
|
913
|
+
onSelectionChange?: (selected: boolean) => void;
|
|
830
914
|
/**
|
|
831
|
-
*
|
|
915
|
+
* Callback function that is called when the card is clicked.
|
|
832
916
|
*/
|
|
833
|
-
|
|
917
|
+
onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
|
|
918
|
+
/**
|
|
919
|
+
* If true, the card can be selected. When the card is clicked, the onSelectionChange callback will be called with the new selected state of the card.
|
|
920
|
+
* If href is defined, the card won't be selectable, even if this prop is true.
|
|
921
|
+
*/
|
|
922
|
+
selectable?: boolean;
|
|
923
|
+
/**
|
|
924
|
+
* If true, the card is selected and if defined it will behave as a controlled component.
|
|
925
|
+
*/
|
|
926
|
+
selected?: boolean;
|
|
927
|
+
/**
|
|
928
|
+
* Defines the size of the card. Width and height can be set to "fillParent" or "fitContent".
|
|
929
|
+
* The default value is { width: "fitContent", height: "fitContent" }.
|
|
930
|
+
*/
|
|
931
|
+
size?: Size$3;
|
|
932
|
+
/**
|
|
933
|
+
* Specifies the tab index of the card.
|
|
934
|
+
* The default value is 0.
|
|
935
|
+
*/
|
|
936
|
+
tabIndex?: number;
|
|
834
937
|
};
|
|
835
938
|
|
|
836
|
-
declare const DxcCard:
|
|
939
|
+
declare const DxcCard: react.ForwardRefExoticComponent<Props$A & react.RefAttributes<HTMLDivElement | HTMLAnchorElement>>;
|
|
837
940
|
|
|
838
941
|
type Props$z = {
|
|
839
942
|
/**
|
|
@@ -903,10 +1006,10 @@ type Props$z = {
|
|
|
903
1006
|
declare const DxcCheckbox: react.ForwardRefExoticComponent<Props$z & react.RefAttributes<HTMLDivElement>>;
|
|
904
1007
|
|
|
905
1008
|
type ChipAvatarType = {
|
|
906
|
-
color: Props$
|
|
907
|
-
profileName?: Props$
|
|
908
|
-
imageSrc?: Props$
|
|
909
|
-
icon?: Props$
|
|
1009
|
+
color: Props$H["color"];
|
|
1010
|
+
profileName?: Props$H["label"];
|
|
1011
|
+
imageSrc?: Props$H["imageSrc"];
|
|
1012
|
+
icon?: Props$H["icon"];
|
|
910
1013
|
};
|
|
911
1014
|
type CommonProps$7 = {
|
|
912
1015
|
/**
|
|
@@ -975,7 +1078,7 @@ type DismissibleChipProps = CommonProps$7 & {
|
|
|
975
1078
|
};
|
|
976
1079
|
type Props$y = SelectableChipProps | DismissibleChipProps;
|
|
977
1080
|
|
|
978
|
-
declare const DxcChip:
|
|
1081
|
+
declare const DxcChip: react.ForwardRefExoticComponent<Props$y & react.RefAttributes<HTMLDivElement>>;
|
|
979
1082
|
|
|
980
1083
|
type Space = {
|
|
981
1084
|
top?: string;
|
|
@@ -1142,7 +1245,7 @@ type Props$x = {
|
|
|
1142
1245
|
|
|
1143
1246
|
declare const DxcContainer: react.ForwardRefExoticComponent<Props$x & react.RefAttributes<HTMLDivElement>>;
|
|
1144
1247
|
|
|
1145
|
-
type Props$w = Omit<Props$
|
|
1248
|
+
type Props$w = Omit<Props$K, "displayBorder" | "displayGroupLines" | "displayControlsAfter" | "hasPopOver">;
|
|
1146
1249
|
|
|
1147
1250
|
declare function DxcContextualMenu({ items }: Props$w): react_jsx_runtime.JSX.Element;
|
|
1148
1251
|
|
|
@@ -1160,6 +1263,10 @@ type Option$2 = {
|
|
|
1160
1263
|
* Option inner value.
|
|
1161
1264
|
*/
|
|
1162
1265
|
value: string;
|
|
1266
|
+
/**
|
|
1267
|
+
* Whether the option has a divider below it.
|
|
1268
|
+
*/
|
|
1269
|
+
hasDivider?: boolean;
|
|
1163
1270
|
};
|
|
1164
1271
|
type Props$v = {
|
|
1165
1272
|
/**
|
|
@@ -2013,75 +2120,9 @@ type Props$m = {
|
|
|
2013
2120
|
|
|
2014
2121
|
declare function DxcHeading({ as, level, margin, text, weight }: Props$m): react_jsx_runtime.JSX.Element;
|
|
2015
2122
|
|
|
2016
|
-
|
|
2017
|
-
/**
|
|
2018
|
-
* Alternative text description displayed when the specified image is not loaded.
|
|
2019
|
-
*
|
|
2020
|
-
* See MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt
|
|
2021
|
-
* See W3C alt decision tree: https://www.w3.org/WAI/tutorials/images/decision-tree/
|
|
2022
|
-
*/
|
|
2023
|
-
alt: string;
|
|
2024
|
-
/**
|
|
2025
|
-
* Image legend with a descriptive purpose. It is placed below the image and is complementary to the alt attribute,
|
|
2026
|
-
* which is required regardless of the presence of the caption or not.
|
|
2027
|
-
*/
|
|
2028
|
-
caption?: string;
|
|
2029
|
-
/**
|
|
2030
|
-
* Sets the rendered height of the image.
|
|
2031
|
-
*/
|
|
2032
|
-
height?: string;
|
|
2033
|
-
/**
|
|
2034
|
-
* If true, the image will be loaded only when it is visible on the screen (lazy loading).
|
|
2035
|
-
* Otherwise and by default, the image will be loaded as soon as the component is mounted (eager loading).
|
|
2036
|
-
*/
|
|
2037
|
-
lazyLoading?: boolean;
|
|
2038
|
-
/**
|
|
2039
|
-
* Sets the object-fit CSS property.
|
|
2040
|
-
*
|
|
2041
|
-
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
|
|
2042
|
-
*/
|
|
2043
|
-
objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
|
|
2044
|
-
/**
|
|
2045
|
-
* Sets the object-position CSS property.
|
|
2046
|
-
*
|
|
2047
|
-
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
|
|
2048
|
-
*/
|
|
2049
|
-
objectPosition?: string;
|
|
2050
|
-
/**
|
|
2051
|
-
* This function will be called when the image fails to load.
|
|
2052
|
-
*/
|
|
2053
|
-
onError?: ReactEventHandler<HTMLImageElement>;
|
|
2054
|
-
/**
|
|
2055
|
-
* This function will be called when the image is loaded.
|
|
2056
|
-
*/
|
|
2057
|
-
onLoad?: ReactEventHandler<HTMLImageElement>;
|
|
2058
|
-
/**
|
|
2059
|
-
* One or more strings separated by commas, indicating a set of source sizes.
|
|
2060
|
-
* If the srcSet attribute is absent or contains no values with a width descriptor,
|
|
2061
|
-
* then this attribute has no effect.
|
|
2062
|
-
*
|
|
2063
|
-
* See MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes
|
|
2064
|
-
*/
|
|
2065
|
-
sizes?: string;
|
|
2066
|
-
/**
|
|
2067
|
-
* URL of the image. This prop is required and must be valid.
|
|
2068
|
-
*/
|
|
2069
|
-
src: string;
|
|
2070
|
-
/**
|
|
2071
|
-
* List of one or more strings separated by commas indicating a set of possible images for the user agent to use.
|
|
2072
|
-
*
|
|
2073
|
-
* See MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset
|
|
2074
|
-
*/
|
|
2075
|
-
srcSet?: string;
|
|
2076
|
-
/**
|
|
2077
|
-
* Sets the rendered width of the image.
|
|
2078
|
-
*/
|
|
2079
|
-
width?: string;
|
|
2080
|
-
};
|
|
2123
|
+
declare function DxcImage({ alt, caption, height, lazyLoading, objectFit, objectPosition, onError, onLoad, sizes, src, srcSet, width, }: Props$B): react_jsx_runtime.JSX.Element;
|
|
2081
2124
|
|
|
2082
|
-
|
|
2083
|
-
|
|
2084
|
-
type Props$k = {
|
|
2125
|
+
type Props$l = {
|
|
2085
2126
|
/**
|
|
2086
2127
|
* Applies the spacing scale to the bottom side.
|
|
2087
2128
|
*/
|
|
@@ -2116,7 +2157,7 @@ type Props$k = {
|
|
|
2116
2157
|
vertical?: string;
|
|
2117
2158
|
};
|
|
2118
2159
|
|
|
2119
|
-
declare function DxcInset({ bottom, children, horizontal, left, right, space, top, vertical }: Props$
|
|
2160
|
+
declare function DxcInset({ bottom, children, horizontal, left, right, space, top, vertical }: Props$l): react_jsx_runtime.JSX.Element;
|
|
2120
2161
|
|
|
2121
2162
|
type LinkProps = {
|
|
2122
2163
|
/**
|
|
@@ -2165,6 +2206,121 @@ type LinkProps = {
|
|
|
2165
2206
|
|
|
2166
2207
|
declare const DxcLink: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
|
|
2167
2208
|
|
|
2209
|
+
type SelectOption = {
|
|
2210
|
+
label?: string;
|
|
2211
|
+
value: string;
|
|
2212
|
+
onSelect: (value: string) => void;
|
|
2213
|
+
selected?: boolean;
|
|
2214
|
+
};
|
|
2215
|
+
type Props$k = {
|
|
2216
|
+
/**
|
|
2217
|
+
* If true, the voice recording button will be shown.
|
|
2218
|
+
*/
|
|
2219
|
+
allowRecording?: boolean;
|
|
2220
|
+
/**
|
|
2221
|
+
* This function will be called when the selection of top items changes.
|
|
2222
|
+
* If this function is provided the message input will allow file selection.
|
|
2223
|
+
*/
|
|
2224
|
+
callbackFile?: (files: File[]) => void;
|
|
2225
|
+
/**
|
|
2226
|
+
* Initial value of the input, only when it is uncontrolled.
|
|
2227
|
+
*/
|
|
2228
|
+
defaultValue?: string;
|
|
2229
|
+
/**
|
|
2230
|
+
* If true, the component will be disabled.
|
|
2231
|
+
*/
|
|
2232
|
+
disabled?: boolean;
|
|
2233
|
+
/**
|
|
2234
|
+
* If it is a defined value and also a truthy string, the component will
|
|
2235
|
+
* change its appearance, showing the error below the input component. If
|
|
2236
|
+
* the defined value is an empty string, it will reserve a space below
|
|
2237
|
+
* the component for a future error, but it would not change its look. In
|
|
2238
|
+
* case of being undefined or null, both the appearance and the space for
|
|
2239
|
+
* the error message would not be modified.
|
|
2240
|
+
*/
|
|
2241
|
+
error?: string;
|
|
2242
|
+
/**
|
|
2243
|
+
* Items to be shown at the top.
|
|
2244
|
+
*/
|
|
2245
|
+
files?: File[];
|
|
2246
|
+
/**
|
|
2247
|
+
* If true, it indicates that a request is being processed after the user submits a query.
|
|
2248
|
+
*/
|
|
2249
|
+
isGenerating?: boolean;
|
|
2250
|
+
/**
|
|
2251
|
+
* Specifies the maximum length allowed by the input.
|
|
2252
|
+
* This will be checked both when the input element loses the
|
|
2253
|
+
* focus and while typing within it. If the string entered does not
|
|
2254
|
+
* comply the maximum length, the onBlur and onChange functions will be called
|
|
2255
|
+
* with the current value and an internal error informing that the value
|
|
2256
|
+
* length does not comply the specified range. If a valid length is
|
|
2257
|
+
* reached, the error parameter of both events will not be defined.
|
|
2258
|
+
*/
|
|
2259
|
+
maxLength?: number;
|
|
2260
|
+
/**
|
|
2261
|
+
* Specifies the minimum length allowed by the input.
|
|
2262
|
+
* This will be checked both when the input element loses the
|
|
2263
|
+
* focus and while typing within it. If the string entered does not
|
|
2264
|
+
* comply the minimum length, the onBlur and onChange functions will be called
|
|
2265
|
+
* with the current value and an internal error informing that the value
|
|
2266
|
+
* length does not comply the specified range. If a valid length is
|
|
2267
|
+
* reached, the error parameter of both events will not be defined.
|
|
2268
|
+
*/
|
|
2269
|
+
minLength?: number;
|
|
2270
|
+
/**
|
|
2271
|
+
* Options to be shown on the dropdown under the input.
|
|
2272
|
+
*/
|
|
2273
|
+
selectOptions?: SelectOption[];
|
|
2274
|
+
/**
|
|
2275
|
+
* This function will be called when the input element loses the focus.
|
|
2276
|
+
* An object including the input value and the error (if the value
|
|
2277
|
+
* entered is not valid) will be passed to this function. If there is no error,
|
|
2278
|
+
* error will not be defined.
|
|
2279
|
+
*/
|
|
2280
|
+
onBlur?: (val: {
|
|
2281
|
+
value: string;
|
|
2282
|
+
error?: string;
|
|
2283
|
+
}) => void;
|
|
2284
|
+
/**
|
|
2285
|
+
* This function will be called when the user types within the input
|
|
2286
|
+
* element of the component. An object including the current value and
|
|
2287
|
+
* the error (if the value entered is not valid) will be passed to this
|
|
2288
|
+
* function. If there is no error, error will not be defined.
|
|
2289
|
+
*/
|
|
2290
|
+
onChange?: (val: {
|
|
2291
|
+
value: string;
|
|
2292
|
+
error?: string;
|
|
2293
|
+
}) => void;
|
|
2294
|
+
/**
|
|
2295
|
+
* This function will be called when the user clicks on the button (submit or stop) or presses enter.
|
|
2296
|
+
* The type parameter indicates whether it's a "submit" or "stop" event. For submit events, "value", "files" and "selectedOption" are provided.
|
|
2297
|
+
*/
|
|
2298
|
+
onButtonClick?: (val: {
|
|
2299
|
+
type: "submit" | "stop";
|
|
2300
|
+
value?: string;
|
|
2301
|
+
files?: File[];
|
|
2302
|
+
selectedOption?: SelectOption;
|
|
2303
|
+
}) => void;
|
|
2304
|
+
/**
|
|
2305
|
+
* Text to be put as placeholder of the input.
|
|
2306
|
+
*/
|
|
2307
|
+
placeholder?: string;
|
|
2308
|
+
/**
|
|
2309
|
+
* Specifies the size of the component. The size will affect the width of the input.
|
|
2310
|
+
*/
|
|
2311
|
+
size?: "small" | "medium" | "large" | "fillParent";
|
|
2312
|
+
/**
|
|
2313
|
+
* Value of the tabindex attribute.
|
|
2314
|
+
*/
|
|
2315
|
+
tabIndex?: number;
|
|
2316
|
+
/**
|
|
2317
|
+
* Value of the input. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
|
|
2318
|
+
*/
|
|
2319
|
+
value?: string;
|
|
2320
|
+
};
|
|
2321
|
+
|
|
2322
|
+
declare const DxcMessageInput: ({ allowRecording, callbackFile, defaultValue, disabled, error, files, isGenerating, maxLength, minLength, selectOptions, onBlur, onButtonClick, onChange, placeholder, size, tabIndex, value, }: Props$k) => react_jsx_runtime.JSX.Element;
|
|
2323
|
+
|
|
2168
2324
|
type TabProps$1 = {
|
|
2169
2325
|
/**
|
|
2170
2326
|
* Whether the tab is active or not.
|
|
@@ -2516,15 +2672,21 @@ type PopoverPropsType = {
|
|
|
2516
2672
|
/** Callback function when the popover is opened.
|
|
2517
2673
|
* Used only in controlled mode and if the trigger lacks the events to manage the controlled behavior. */
|
|
2518
2674
|
onOpen?: () => void;
|
|
2675
|
+
/** Callback function when the popover is opened and the focus is set to the first focusable element inside the popover.
|
|
2676
|
+
* */
|
|
2677
|
+
onOpenAutoFocus?: (event: Event) => void;
|
|
2519
2678
|
/** Callback function when the popover is closed. */
|
|
2520
2679
|
onClose?: () => void;
|
|
2680
|
+
/** Callback function when the popover is closed and the focus is set back to the trigger element.
|
|
2681
|
+
* */
|
|
2682
|
+
onCloseAutoFocus?: (event: Event) => void;
|
|
2521
2683
|
/** Content to be displayed inside the popover. */
|
|
2522
2684
|
popoverContent: React.ReactNode;
|
|
2523
2685
|
/** Side of the trigger where the popover will appear. */
|
|
2524
2686
|
side?: "top" | "bottom" | "left" | "right";
|
|
2525
2687
|
};
|
|
2526
2688
|
|
|
2527
|
-
declare const DxcPopover: ({ actionToOpen, align, asChild, children, hasTip, isOpen, offset, onOpen, onClose, popoverContent, side, }: PopoverPropsType) => JSX.Element;
|
|
2689
|
+
declare const DxcPopover: ({ actionToOpen, align, asChild, children, hasTip, isOpen, offset, onOpen, onOpenAutoFocus, onClose, onCloseAutoFocus, popoverContent, side, }: PopoverPropsType) => JSX.Element;
|
|
2528
2690
|
|
|
2529
2691
|
type Size$1 = {
|
|
2530
2692
|
top?: Space$1;
|
|
@@ -3899,6 +4061,9 @@ declare const defaultTranslatedComponentLabels: {
|
|
|
3899
4061
|
previousMonthTitle: string;
|
|
3900
4062
|
nextMonthTitle: string;
|
|
3901
4063
|
};
|
|
4064
|
+
card: {
|
|
4065
|
+
noContent: string;
|
|
4066
|
+
};
|
|
3902
4067
|
dateInput: {
|
|
3903
4068
|
invalidDateErrorMessage: string;
|
|
3904
4069
|
datePickerActionTitle: string;
|
|
@@ -3924,13 +4089,21 @@ declare const defaultTranslatedComponentLabels: {
|
|
|
3924
4089
|
requiredSelectionErrorMessage: string;
|
|
3925
4090
|
requiredValueErrorMessage: string;
|
|
3926
4091
|
formatRequestedErrorMessage: string;
|
|
3927
|
-
|
|
3928
|
-
|
|
4092
|
+
minLengthErrorMessage: (minLength: number) => string;
|
|
4093
|
+
maxLengthErrorMessage: (maxLength: number) => string;
|
|
3929
4094
|
};
|
|
3930
4095
|
header: {
|
|
3931
4096
|
closeIcon: string;
|
|
3932
4097
|
hamburgerTitle: string;
|
|
3933
4098
|
};
|
|
4099
|
+
messageInput: {
|
|
4100
|
+
inputAriaLabel: string;
|
|
4101
|
+
sendButtonTitle: string;
|
|
4102
|
+
stopButtonTitle: string;
|
|
4103
|
+
attachFileButtonTitle: string;
|
|
4104
|
+
recordAudioButtonTitle: string;
|
|
4105
|
+
stopRecordingButtonTitle: string;
|
|
4106
|
+
};
|
|
3934
4107
|
numberInput: {
|
|
3935
4108
|
valueGreaterThanOrEqualToErrorMessage: (value: number) => string;
|
|
3936
4109
|
valueLessThanOrEqualToErrorMessage: (value: number) => string;
|
|
@@ -3980,12 +4153,18 @@ declare const defaultTranslatedComponentLabels: {
|
|
|
3980
4153
|
};
|
|
3981
4154
|
timeInput: {
|
|
3982
4155
|
timePickerActionTitle: string;
|
|
4156
|
+
timePeriodAM: string;
|
|
4157
|
+
timePeriodPM: string;
|
|
3983
4158
|
};
|
|
3984
4159
|
toast: {
|
|
3985
4160
|
clearToastActionTitle: string;
|
|
3986
4161
|
};
|
|
3987
4162
|
};
|
|
3988
4163
|
type TranslatedLabels = typeof defaultTranslatedComponentLabels;
|
|
4164
|
+
type LocalizedContext = {
|
|
4165
|
+
labels: TranslatedLabels;
|
|
4166
|
+
locale?: string;
|
|
4167
|
+
};
|
|
3989
4168
|
|
|
3990
4169
|
/**
|
|
3991
4170
|
* This type is used to allow labels objects to be passed to the HalstackProvider.
|
|
@@ -3994,108 +4173,7 @@ type TranslatedLabels = typeof defaultTranslatedComponentLabels;
|
|
|
3994
4173
|
type DeepPartial<T> = {
|
|
3995
4174
|
[P in keyof T]?: Partial<T[P]>;
|
|
3996
4175
|
};
|
|
3997
|
-
declare const HalstackLanguageContext: react.Context<
|
|
3998
|
-
applicationLayout: {
|
|
3999
|
-
visibilityToggleTitle: string;
|
|
4000
|
-
};
|
|
4001
|
-
alert: {
|
|
4002
|
-
previousMessageActionTitle: string;
|
|
4003
|
-
nextMessageActionTitle: string;
|
|
4004
|
-
closeAlertActionTitle: string;
|
|
4005
|
-
closeMessageActionTitle: string;
|
|
4006
|
-
};
|
|
4007
|
-
calendar: {
|
|
4008
|
-
daysShort: string[];
|
|
4009
|
-
months: string[];
|
|
4010
|
-
previousMonthTitle: string;
|
|
4011
|
-
nextMonthTitle: string;
|
|
4012
|
-
};
|
|
4013
|
-
dateInput: {
|
|
4014
|
-
invalidDateErrorMessage: string;
|
|
4015
|
-
datePickerActionTitle: string;
|
|
4016
|
-
};
|
|
4017
|
-
dialog: {
|
|
4018
|
-
closeIconAriaLabel: string;
|
|
4019
|
-
};
|
|
4020
|
-
fileInput: {
|
|
4021
|
-
fileSizeGreaterThanErrorMessage: string;
|
|
4022
|
-
fileSizeLessThanErrorMessage: string;
|
|
4023
|
-
multipleButtonLabelDefault: string;
|
|
4024
|
-
singleButtonLabelDefault: string;
|
|
4025
|
-
dropAreaButtonLabelDefault: string;
|
|
4026
|
-
multipleDropAreaLabelDefault: string;
|
|
4027
|
-
singleDropAreaLabelDefault: string;
|
|
4028
|
-
deleteFileActionTitle: string;
|
|
4029
|
-
};
|
|
4030
|
-
footer: {
|
|
4031
|
-
copyrightText: (year: number) => string;
|
|
4032
|
-
};
|
|
4033
|
-
formFields: {
|
|
4034
|
-
optionalLabel: string;
|
|
4035
|
-
requiredSelectionErrorMessage: string;
|
|
4036
|
-
requiredValueErrorMessage: string;
|
|
4037
|
-
formatRequestedErrorMessage: string;
|
|
4038
|
-
lengthErrorMessage: (minLength?: number, maxLength?: number) => string;
|
|
4039
|
-
logoAlternativeText: string;
|
|
4040
|
-
};
|
|
4041
|
-
header: {
|
|
4042
|
-
closeIcon: string;
|
|
4043
|
-
hamburgerTitle: string;
|
|
4044
|
-
};
|
|
4045
|
-
numberInput: {
|
|
4046
|
-
valueGreaterThanOrEqualToErrorMessage: (value: number) => string;
|
|
4047
|
-
valueLessThanOrEqualToErrorMessage: (value: number) => string;
|
|
4048
|
-
decrementValueTitle: string;
|
|
4049
|
-
incrementValueTitle: string;
|
|
4050
|
-
};
|
|
4051
|
-
paginator: {
|
|
4052
|
-
itemsPerPageText: string;
|
|
4053
|
-
minToMaxOfText: (minNumberOfItems: number, maxNumberOfItems: number, totalItems: number) => string;
|
|
4054
|
-
goToPageText: string;
|
|
4055
|
-
pageOfText: (pageNumber: number, totalPagesNumber: number) => string;
|
|
4056
|
-
firstResultsTitle: string;
|
|
4057
|
-
previousResultsTitle: string;
|
|
4058
|
-
nextResultsTitle: string;
|
|
4059
|
-
lastResultsTitle: string;
|
|
4060
|
-
};
|
|
4061
|
-
passwordInput: {
|
|
4062
|
-
inputShowPasswordTitle: string;
|
|
4063
|
-
inputHidePasswordTitle: string;
|
|
4064
|
-
};
|
|
4065
|
-
quickNav: {
|
|
4066
|
-
contentTitle: string;
|
|
4067
|
-
};
|
|
4068
|
-
radioGroup: {
|
|
4069
|
-
optionalItemLabelDefault: string;
|
|
4070
|
-
};
|
|
4071
|
-
searchBar: {
|
|
4072
|
-
clearFieldActionTitle: string;
|
|
4073
|
-
inputAriaLabel: string;
|
|
4074
|
-
triggerTitle: string;
|
|
4075
|
-
cancelButtonLabel: string;
|
|
4076
|
-
};
|
|
4077
|
-
select: {
|
|
4078
|
-
actionClearSelectionTitle: string;
|
|
4079
|
-
actionClearSearchTitle: string;
|
|
4080
|
-
noMatchesErrorMessage: string;
|
|
4081
|
-
selectAllLabel: string;
|
|
4082
|
-
};
|
|
4083
|
-
tabs: {
|
|
4084
|
-
scrollLeft: string;
|
|
4085
|
-
scrollRight: string;
|
|
4086
|
-
};
|
|
4087
|
-
textInput: {
|
|
4088
|
-
clearFieldActionTitle: string;
|
|
4089
|
-
searchingMessage: string;
|
|
4090
|
-
fetchingDataErrorMessage: string;
|
|
4091
|
-
};
|
|
4092
|
-
timeInput: {
|
|
4093
|
-
timePickerActionTitle: string;
|
|
4094
|
-
};
|
|
4095
|
-
toast: {
|
|
4096
|
-
clearToastActionTitle: string;
|
|
4097
|
-
};
|
|
4098
|
-
}>;
|
|
4176
|
+
declare const HalstackLanguageContext: react.Context<LocalizedContext>;
|
|
4099
4177
|
type ThemeType = {
|
|
4100
4178
|
tokens?: Record<string, string | number>;
|
|
4101
4179
|
logos?: Record<string, string | undefined>;
|
|
@@ -4104,8 +4182,9 @@ type HalstackProviderPropsType = {
|
|
|
4104
4182
|
labels?: DeepPartial<TranslatedLabels>;
|
|
4105
4183
|
children: ReactNode;
|
|
4106
4184
|
opinionatedTheme?: ThemeType;
|
|
4185
|
+
localeTag?: string;
|
|
4107
4186
|
};
|
|
4108
|
-
declare const HalstackProvider: ({ labels, children, opinionatedTheme }: HalstackProviderPropsType) => JSX.Element;
|
|
4187
|
+
declare const HalstackProvider: ({ labels, children, opinionatedTheme, localeTag, }: HalstackProviderPropsType) => JSX.Element;
|
|
4109
4188
|
|
|
4110
4189
|
declare function useToast(): {
|
|
4111
4190
|
default: (toast: DefaultToast) => (() => void) | undefined;
|
|
@@ -4115,4 +4194,4 @@ declare function useToast(): {
|
|
|
4115
4194
|
loading: (toast: Omit<LoadingToast, "loading">) => (() => void) | undefined;
|
|
4116
4195
|
};
|
|
4117
4196
|
|
|
4118
|
-
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 };
|
|
4197
|
+
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 };
|