@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/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$L = IndependentProps | NonIndependentProps;
115
+ type Props$M = IndependentProps | NonIndependentProps;
116
116
 
117
117
  declare const DxcAccordion: {
118
- (props: Props$L): JSX.Element;
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$K = CommonProps$9 & ModeSpecificProps;
201
+ type Props$L = CommonProps$9 & ModeSpecificProps;
202
202
 
203
- declare const DxcAlert: ({ closable, message, mode, primaryAction, secondaryAction, semantic, title, }: Props$K) => react_jsx_runtime.JSX.Element;
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$J = {
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$I = {
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$H = {
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$H) => JSX.Element;
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$I) => JSX.Element;
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$G = {
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.MemoExoticComponent<({ color, disabled, icon, imageSrc, label, linkHref, onClick, primaryText, secondaryText, shape, size, status, tabIndex, title, }: Props$G) => react_jsx_runtime.JSX.Element>;
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$F = (ContextualProps | NotificationProps) & CommonProps$8;
598
+ type Props$G = (ContextualProps | NotificationProps) & CommonProps$8;
594
599
 
595
- declare const DxcBadge: ({ label, title, mode, color, icon, notificationLimit, size, }: Props$F) => JSX.Element;
600
+ declare const DxcBadge: react.ForwardRefExoticComponent<Props$G & react.RefAttributes<HTMLDivElement>>;
596
601
 
597
- type Props$E = {
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$E) => react_jsx_runtime.JSX.Element;
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$D = {
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$D) => react_jsx_runtime.JSX.Element;
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$C = IconProps | OtherProps;
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$C): JSX.Element;
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$B = {
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: ({ disabled, icon, iconPosition, label, margin, mode, onClick, semantic, size, tabIndex, title, type, }: Props$B) => JSX.Element;
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
- top?: Space$1;
778
- bottom?: Space$1;
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
- * URL of the image that will be placed in the card component.
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
- imageSrc?: string;
855
+ children?: ReactNode;
789
856
  /**
790
- * Color of the image background.
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
- imageBgColor?: string;
863
+ direction?: "row" | "column";
793
864
  /**
794
- * Size of the padding to be applied to the image section of the
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
- imagePadding?: Space$1 | Size$3;
867
+ emptySize?: {
868
+ width?: string;
869
+ height?: string;
870
+ iconSize?: "small" | "medium" | "large";
871
+ };
799
872
  /**
800
- * Whether the image should appear in relation to the content.
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 defined, the tag will be displayed as an anchor, using this prop
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
- linkHref?: string;
888
+ isEmpty?: boolean;
808
889
  /**
809
- * This function will be called when the user clicks the card. Component
810
- * will show some visual feedback on hover.
890
+ * If true, a loading state will be displayed inside the card.
811
891
  */
812
- onClick?: () => void;
892
+ isLoading?: boolean;
813
893
  /**
814
- * Whether the image must cover the whole image area of the card.
894
+ * Defines the size of the loading card when isLoading is true.
815
895
  */
816
- imageCover?: boolean;
896
+ loadingSize?: {
897
+ width?: string;
898
+ height?: string;
899
+ };
817
900
  /**
818
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
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
- margin?: Space$1 | Size$3;
903
+ mode?: "elevated" | "outlined";
822
904
  /**
823
- * Value of the tabindex attribute applied when the component is clickable.
905
+ * If true, the link will open in a new window. href must be provided for this to work.
824
906
  */
825
- tabIndex?: number;
907
+ newWindow?: boolean;
826
908
  /**
827
- * Determines whether or not the component should have an outline.
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
- outlined?: boolean;
913
+ onSelectionChange?: (selected: boolean) => void;
830
914
  /**
831
- * Custom content that will be placed inside the component.
915
+ * Callback function that is called when the card is clicked.
832
916
  */
833
- children?: ReactNode;
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: ({ imageSrc, imageBgColor, imagePadding, imagePosition, linkHref, onClick, imageCover, margin, tabIndex, outlined, children, }: Props$A) => react_jsx_runtime.JSX.Element;
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$G["color"];
907
- profileName?: Props$G["label"];
908
- imageSrc?: Props$G["imageSrc"];
909
- icon?: Props$G["icon"];
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: ({ disabled, label, mode, onClick, prefix, selected, tabIndex, }: Props$y) => react_jsx_runtime.JSX.Element | null;
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$J, "displayBorder" | "displayGroupLines" | "displayControlsAfter" | "hasPopOver">;
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
- type Props$l = {
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
- declare function DxcImage({ alt, caption, height, lazyLoading, objectFit, objectPosition, onError, onLoad, sizes, src, srcSet, width, }: Props$l): react_jsx_runtime.JSX.Element;
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$k): react_jsx_runtime.JSX.Element;
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
- lengthErrorMessage: (minLength?: number, maxLength?: number) => string;
3928
- logoAlternativeText: string;
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 };