@dxc-technology/halstack-react 0.0.0-d004266 → 0.0.0-d016030

package/dist/index.d.mts

@@ -121,26 +121,82 @@ declare const DxcAccordionGroup: {
 };
 
 type Action$2 = {
+    /**
+     * The icon of the action. It can be a string with the name of the icon or an SVG component.
+     */
     icon?: string | SVG;
+    /**
+     * The label of the action.
+     */
     label: string;
+    /**
+     * The function that will be executed when the user clicks on the action button.
+     */
     onClick: () => void;
 };
 type Message = {
+    /**
+     * The function that will be executed when the user clicks on the close action button.
+     */
     onClose?: () => void;
+    /**
+     * The content of the message. The only Halstack component allowed within the text of an alert is the Link component,
+     * and it should be used exclusively to direct users to additional resources or relevant pages.
+     * No other components are permitted within the content of an alert.
+     */
     text: ReactNode;
 };
 type CommonProps$8 = {
+    /**
+     * If true, the alert will have a close button that will remove the message from the alert,
+     * only in banner and inline modes. The rest of the functionality will depend
+     * on the onClose event of each message (e.g. closing the modal alert).
+     */
     closable?: boolean;
+    /**
+     * Primary action of the alert.
+     */
     primaryAction?: Action$2;
+    /**
+     * Secondary action of the alert.
+     */
     secondaryAction?: Action$2;
+    /**
+     * Specifies the semantic meaning of the alert.
+     */
     semantic?: "error" | "info" | "success" | "warning";
+    /**
+     * Title of the alert.
+     */
     title: string;
 };
 type ModeSpecificProps = {
+    /**
+     * List of messages to be displayed. Each message has a close action that will,
+     * apart from remove from the alert the current message, call the onClose if it is defined.
+     * If the message is an array, the alert will show a navigation bar to move between the messages.
+     * The modal mode only allows one message per alert. In this case, the message must be an object
+     * and the presence of the onClose attribute is mandatory, since the management of the closing
+     * of the alert relies completely on the user.
+     */
     message?: Message | Message[];
+    /**
+     * The mode of the alert.
+     */
     mode?: "inline" | "banner";
 } | {
+    /**
+     * List of messages to be displayed. Each message has a close action that will,
+     * apart from remove from the alert the current message, call the onClose if it is defined.
+     * If the message is an array, the alert will show a navigation bar to move between the messages.
+     * The modal mode only allows one message per alert. In this case, the message must be an object
+     * and the presence of the onClose attribute is mandatory, since the management of the closing
+     * of the alert relies completely on the user.
+     */
     message: Required<Message>;
+    /**
+     * The mode of the alert.
+     */
     mode: "modal";
 };
 type Props$I = CommonProps$8 & ModeSpecificProps;
@@ -881,6 +937,10 @@ type Props$y = {
      * Value of the tabindex.
      */
     tabIndex?: number;
+    /**
+     * Specifies a string to be used as the name for the checkbox element when no `label` is provided.
+     */
+    ariaLabel?: string;
 };
 
 declare const DxcCheckbox: react.ForwardRefExoticComponent<Props$y & react.RefAttributes<HTMLDivElement>>;
@@ -1443,6 +1503,10 @@ type Props$s = {
      * Value of the tabindex attribute.
      */
     tabIndex?: number;
+    /**
+     * Specifies a string to be used as the name for the date input element when no `label` is provided.
+     */
+    ariaLabel?: string;
 };
 
 declare const DxcDateInput: react.ForwardRefExoticComponent<Props$s & react.RefAttributes<HTMLDivElement>>;
@@ -1482,7 +1546,7 @@ type Props$r = {
     tabIndex?: number;
 };
 
-declare const DxcDialog: ({ closable, onCloseClick, children, overlay, onBackgroundClick, tabIndex, }: Props$r) => JSX.Element;
+declare const DxcDialog: ({ children, closable, onBackgroundClick, onCloseClick, overlay, tabIndex, }: Props$r) => JSX.Element;
 
 type Props$q = {
     /**
@@ -2165,6 +2229,10 @@ type Props$i = {
      * Value of the tabindex attribute.
      */
     tabIndex?: number;
+    /**
+     * Specifies a string to be used as the name for the number input element when no `label` is provided.
+     */
+    ariaLabel?: string;
 };
 
 declare const DxcNumberInput: react.ForwardRefExoticComponent<Props$i & react.RefAttributes<HTMLDivElement>>;
@@ -2311,6 +2379,10 @@ type Props$g = {
      * Value of the tabindex attribute.
      */
     tabIndex?: number;
+    /**
+     * Specifies a string to be used as the name for the password input element when no `label` is provided.
+     */
+    ariaLabel?: string;
 };
 
 declare const DxcPasswordInput: react.ForwardRefExoticComponent<Props$g & react.RefAttributes<HTMLDivElement>>;
@@ -3230,6 +3302,10 @@ type Props$5 = {
      * Value of the tabindex attribute.
      */
     tabIndex?: number;
+    /**
+     * Specifies a string to be used as the name for the textarea element when no `label` is provided.
+     */
+    ariaLabel?: string;
 };
 
 declare const DxcTextarea: react.ForwardRefExoticComponent<Props$5 & react.RefAttributes<HTMLDivElement>>;
@@ -3393,30 +3469,64 @@ type Props$4 = {
      * Value of the tabindex attribute.
      */
     tabIndex?: number;
+    /**
+     * Specifies a string to be used as the name for the textInput element when no `label` is provided.
+     */
+    ariaLabel?: string;
 };
 
 declare const DxcTextInput: react.ForwardRefExoticComponent<Props$4 & react.RefAttributes<HTMLDivElement>>;
 
 type Action = {
+    /**
+     * The icon of the action. It can be a string with the name of the icon or an SVG component.
+     */
     icon?: string | SVG;
+    /**
+     * The label of the action.
+     */
     label: string;
+    /**
+     * The function that will be executed when the user clicks on the action button.
+     */
     onClick: () => void;
 };
 type CommonProps$1 = {
+    /**
+     * Tertiary button which performs a custom action, specified by the user.
+     */
     action?: Action;
+    /**
+     * Message to be displayed as a toast.
+     */
     message: string;
 };
 type DefaultToast = CommonProps$1 & {
+    /**
+     * Material Symbol name or SVG element as the icon that will be placed next to the panel label.
+     * When using Material Symbols, replace spaces with underscores.
+     * By default they are outlined if you want it to be filled prefix the symbol name with "filled_".
+     */
     icon?: string | SVG;
 };
 type LoadingToast = CommonProps$1 & {
     loading: boolean;
 };
 type SemanticToast = CommonProps$1 & {
+    /**
+     * Flag that allows to hide the semantic icon of the toast.
+     */
     hideSemanticIcon?: boolean;
 };
 type ToastsQueuePropsType = {
+    /**
+     * Duration in milliseconds before a toast automatically hides itself.
+     * The range goes from 3000ms to 5000ms, any other value will not be taken into consideration.
+     */
     duration?: number;
+    /**
+     * Tree of components from which the useToast hook can be triggered.
+     */
     children: ReactNode;
 };
 
@@ -4010,15 +4120,8 @@ declare const componentTokens: {
     dialog: {
         overlayColor: string;
         backgroundColor: string;
-        closeIconSize: string;
-        closeIconTopPosition: string;
-        closeIconRightPosition: string;
         closeIconBackgroundColor: string;
-        closeIconBorderColor: string;
         closeIconColor: string;
-        closeIconBorderThickness: string;
-        closeIconBorderStyle: string;
-        closeIconBorderRadius: string;
         boxShadowOffsetX: string;
         boxShadowOffsetY: string;
         boxShadowBlur: string;
@@ -4153,15 +4256,15 @@ declare const componentTokens: {
     };
     header: {
         backgroundColor: string;
-        hamburguerFocusColor: string;
-        hamburguerFontFamily: string;
-        hamburguerFontStyle: string;
-        hamburguerFontColor: string;
-        hamburguerFontSize: string;
-        hamburguerFontWeight: string;
-        hamburguerTextTransform: string;
-        hamburguerIconColor: string;
-        hamburguerHoverColor: string;
+        hamburgerFocusColor: string;
+        hamburgerFontFamily: string;
+        hamburgerFontStyle: string;
+        hamburgerFontColor: string;
+        hamburgerFontSize: string;
+        hamburgerFontWeight: string;
+        hamburgerTextTransform: string;
+        hamburgerIconColor: string;
+        hamburgerHoverColor: string;
         logo: string;
         logoResponsive: string;
         logoHeight: string;
@@ -4973,7 +5076,7 @@ type OpinionatedTheme = {
         accentColor: string;
         fontColor: string;
         menuBaseColor: string;
-        hamburguerColor: string;
+        hamburgerColor: string;
         logo: string;
         logoResponsive: string;
         contentColor: string;
@@ -5107,7 +5210,7 @@ declare const defaultTranslatedComponentLabels: {
     };
     header: {
         closeIcon: string;
-        hamburguerTitle: string;
+        hamburgerTitle: string;
     };
     numberInput: {
         valueGreaterThanOrEqualToErrorMessage: (value: number) => string;
@@ -5546,15 +5649,8 @@ declare const HalstackContext: react.Context<{
     dialog: {
         overlayColor: string;
         backgroundColor: string;
-        closeIconSize: string;
-        closeIconTopPosition: string;
-        closeIconRightPosition: string;
         closeIconBackgroundColor: string;
-        closeIconBorderColor: string;
         closeIconColor: string;
-        closeIconBorderThickness: string;
-        closeIconBorderStyle: string;
-        closeIconBorderRadius: string;
         boxShadowOffsetX: string;
         boxShadowOffsetY: string;
         boxShadowBlur: string;
@@ -5689,15 +5785,15 @@ declare const HalstackContext: react.Context<{
     };
     header: {
         backgroundColor: string;
-        hamburguerFocusColor: string;
-        hamburguerFontFamily: string;
-        hamburguerFontStyle: string;
-        hamburguerFontColor: string;
-        hamburguerFontSize: string;
-        hamburguerFontWeight: string;
-        hamburguerTextTransform: string;
-        hamburguerIconColor: string;
-        hamburguerHoverColor: string;
+        hamburgerFocusColor: string;
+        hamburgerFontFamily: string;
+        hamburgerFontStyle: string;
+        hamburgerFontColor: string;
+        hamburgerFontSize: string;
+        hamburgerFontWeight: string;
+        hamburgerTextTransform: string;
+        hamburgerIconColor: string;
+        hamburgerHoverColor: string;
         logo: string;
         logoResponsive: string;
         logoHeight: string;
@@ -6488,7 +6584,7 @@ declare const HalstackLanguageContext: react.Context<{
     };
     header: {
         closeIcon: string;
-        hamburguerTitle: string;
+        hamburgerTitle: string;
     };
     numberInput: {
         valueGreaterThanOrEqualToErrorMessage: (value: number) => string;

package/dist/index.d.ts

@@ -121,26 +121,82 @@ declare const DxcAccordionGroup: {
 };
 
 type Action$2 = {
+    /**
+     * The icon of the action. It can be a string with the name of the icon or an SVG component.
+     */
     icon?: string | SVG;
+    /**
+     * The label of the action.
+     */
     label: string;
+    /**
+     * The function that will be executed when the user clicks on the action button.
+     */
     onClick: () => void;
 };
 type Message = {
+    /**
+     * The function that will be executed when the user clicks on the close action button.
+     */
     onClose?: () => void;
+    /**
+     * The content of the message. The only Halstack component allowed within the text of an alert is the Link component,
+     * and it should be used exclusively to direct users to additional resources or relevant pages.
+     * No other components are permitted within the content of an alert.
+     */
     text: ReactNode;
 };
 type CommonProps$8 = {
+    /**
+     * If true, the alert will have a close button that will remove the message from the alert,
+     * only in banner and inline modes. The rest of the functionality will depend
+     * on the onClose event of each message (e.g. closing the modal alert).
+     */
     closable?: boolean;
+    /**
+     * Primary action of the alert.
+     */
     primaryAction?: Action$2;
+    /**
+     * Secondary action of the alert.
+     */
     secondaryAction?: Action$2;
+    /**
+     * Specifies the semantic meaning of the alert.
+     */
     semantic?: "error" | "info" | "success" | "warning";
+    /**
+     * Title of the alert.
+     */
     title: string;
 };
 type ModeSpecificProps = {
+    /**
+     * List of messages to be displayed. Each message has a close action that will,
+     * apart from remove from the alert the current message, call the onClose if it is defined.
+     * If the message is an array, the alert will show a navigation bar to move between the messages.
+     * The modal mode only allows one message per alert. In this case, the message must be an object
+     * and the presence of the onClose attribute is mandatory, since the management of the closing
+     * of the alert relies completely on the user.
+     */
     message?: Message | Message[];
+    /**
+     * The mode of the alert.
+     */
     mode?: "inline" | "banner";
 } | {
+    /**
+     * List of messages to be displayed. Each message has a close action that will,
+     * apart from remove from the alert the current message, call the onClose if it is defined.
+     * If the message is an array, the alert will show a navigation bar to move between the messages.
+     * The modal mode only allows one message per alert. In this case, the message must be an object
+     * and the presence of the onClose attribute is mandatory, since the management of the closing
+     * of the alert relies completely on the user.
+     */
     message: Required<Message>;
+    /**
+     * The mode of the alert.
+     */
     mode: "modal";
 };
 type Props$I = CommonProps$8 & ModeSpecificProps;
@@ -881,6 +937,10 @@ type Props$y = {
      * Value of the tabindex.
      */
     tabIndex?: number;
+    /**
+     * Specifies a string to be used as the name for the checkbox element when no `label` is provided.
+     */
+    ariaLabel?: string;
 };
 
 declare const DxcCheckbox: react.ForwardRefExoticComponent<Props$y & react.RefAttributes<HTMLDivElement>>;
@@ -1443,6 +1503,10 @@ type Props$s = {
      * Value of the tabindex attribute.
      */
     tabIndex?: number;
+    /**
+     * Specifies a string to be used as the name for the date input element when no `label` is provided.
+     */
+    ariaLabel?: string;
 };
 
 declare const DxcDateInput: react.ForwardRefExoticComponent<Props$s & react.RefAttributes<HTMLDivElement>>;
@@ -1482,7 +1546,7 @@ type Props$r = {
     tabIndex?: number;
 };
 
-declare const DxcDialog: ({ closable, onCloseClick, children, overlay, onBackgroundClick, tabIndex, }: Props$r) => JSX.Element;
+declare const DxcDialog: ({ children, closable, onBackgroundClick, onCloseClick, overlay, tabIndex, }: Props$r) => JSX.Element;
 
 type Props$q = {
     /**
@@ -2165,6 +2229,10 @@ type Props$i = {
      * Value of the tabindex attribute.
      */
     tabIndex?: number;
+    /**
+     * Specifies a string to be used as the name for the number input element when no `label` is provided.
+     */
+    ariaLabel?: string;
 };
 
 declare const DxcNumberInput: react.ForwardRefExoticComponent<Props$i & react.RefAttributes<HTMLDivElement>>;
@@ -2311,6 +2379,10 @@ type Props$g = {
      * Value of the tabindex attribute.
      */
     tabIndex?: number;
+    /**
+     * Specifies a string to be used as the name for the password input element when no `label` is provided.
+     */
+    ariaLabel?: string;
 };
 
 declare const DxcPasswordInput: react.ForwardRefExoticComponent<Props$g & react.RefAttributes<HTMLDivElement>>;
@@ -3230,6 +3302,10 @@ type Props$5 = {
      * Value of the tabindex attribute.
      */
     tabIndex?: number;
+    /**
+     * Specifies a string to be used as the name for the textarea element when no `label` is provided.
+     */
+    ariaLabel?: string;
 };
 
 declare const DxcTextarea: react.ForwardRefExoticComponent<Props$5 & react.RefAttributes<HTMLDivElement>>;
@@ -3393,30 +3469,64 @@ type Props$4 = {
      * Value of the tabindex attribute.
      */
     tabIndex?: number;
+    /**
+     * Specifies a string to be used as the name for the textInput element when no `label` is provided.
+     */
+    ariaLabel?: string;
 };
 
 declare const DxcTextInput: react.ForwardRefExoticComponent<Props$4 & react.RefAttributes<HTMLDivElement>>;
 
 type Action = {
+    /**
+     * The icon of the action. It can be a string with the name of the icon or an SVG component.
+     */
     icon?: string | SVG;
+    /**
+     * The label of the action.
+     */
     label: string;
+    /**
+     * The function that will be executed when the user clicks on the action button.
+     */
     onClick: () => void;
 };
 type CommonProps$1 = {
+    /**
+     * Tertiary button which performs a custom action, specified by the user.
+     */
     action?: Action;
+    /**
+     * Message to be displayed as a toast.
+     */
     message: string;
 };
 type DefaultToast = CommonProps$1 & {
+    /**
+     * Material Symbol name or SVG element as the icon that will be placed next to the panel label.
+     * When using Material Symbols, replace spaces with underscores.
+     * By default they are outlined if you want it to be filled prefix the symbol name with "filled_".
+     */
     icon?: string | SVG;
 };
 type LoadingToast = CommonProps$1 & {
     loading: boolean;
 };
 type SemanticToast = CommonProps$1 & {
+    /**
+     * Flag that allows to hide the semantic icon of the toast.
+     */
     hideSemanticIcon?: boolean;
 };
 type ToastsQueuePropsType = {
+    /**
+     * Duration in milliseconds before a toast automatically hides itself.
+     * The range goes from 3000ms to 5000ms, any other value will not be taken into consideration.
+     */
     duration?: number;
+    /**
+     * Tree of components from which the useToast hook can be triggered.
+     */
     children: ReactNode;
 };
 
@@ -4010,15 +4120,8 @@ declare const componentTokens: {
     dialog: {
         overlayColor: string;
         backgroundColor: string;
-        closeIconSize: string;
-        closeIconTopPosition: string;
-        closeIconRightPosition: string;
         closeIconBackgroundColor: string;
-        closeIconBorderColor: string;
         closeIconColor: string;
-        closeIconBorderThickness: string;
-        closeIconBorderStyle: string;
-        closeIconBorderRadius: string;
         boxShadowOffsetX: string;
         boxShadowOffsetY: string;
         boxShadowBlur: string;
@@ -4153,15 +4256,15 @@ declare const componentTokens: {
     };
     header: {
         backgroundColor: string;
-        hamburguerFocusColor: string;
-        hamburguerFontFamily: string;
-        hamburguerFontStyle: string;
-        hamburguerFontColor: string;
-        hamburguerFontSize: string;
-        hamburguerFontWeight: string;
-        hamburguerTextTransform: string;
-        hamburguerIconColor: string;
-        hamburguerHoverColor: string;
+        hamburgerFocusColor: string;
+        hamburgerFontFamily: string;
+        hamburgerFontStyle: string;
+        hamburgerFontColor: string;
+        hamburgerFontSize: string;
+        hamburgerFontWeight: string;
+        hamburgerTextTransform: string;
+        hamburgerIconColor: string;
+        hamburgerHoverColor: string;
         logo: string;
         logoResponsive: string;
         logoHeight: string;
@@ -4973,7 +5076,7 @@ type OpinionatedTheme = {
         accentColor: string;
         fontColor: string;
         menuBaseColor: string;
-        hamburguerColor: string;
+        hamburgerColor: string;
         logo: string;
         logoResponsive: string;
         contentColor: string;
@@ -5107,7 +5210,7 @@ declare const defaultTranslatedComponentLabels: {
     };
     header: {
         closeIcon: string;
-        hamburguerTitle: string;
+        hamburgerTitle: string;
     };
     numberInput: {
         valueGreaterThanOrEqualToErrorMessage: (value: number) => string;
@@ -5546,15 +5649,8 @@ declare const HalstackContext: react.Context<{
     dialog: {
         overlayColor: string;
         backgroundColor: string;
-        closeIconSize: string;
-        closeIconTopPosition: string;
-        closeIconRightPosition: string;
         closeIconBackgroundColor: string;
-        closeIconBorderColor: string;
         closeIconColor: string;
-        closeIconBorderThickness: string;
-        closeIconBorderStyle: string;
-        closeIconBorderRadius: string;
         boxShadowOffsetX: string;
         boxShadowOffsetY: string;
         boxShadowBlur: string;
@@ -5689,15 +5785,15 @@ declare const HalstackContext: react.Context<{
     };
     header: {
         backgroundColor: string;
-        hamburguerFocusColor: string;
-        hamburguerFontFamily: string;
-        hamburguerFontStyle: string;
-        hamburguerFontColor: string;
-        hamburguerFontSize: string;
-        hamburguerFontWeight: string;
-        hamburguerTextTransform: string;
-        hamburguerIconColor: string;
-        hamburguerHoverColor: string;
+        hamburgerFocusColor: string;
+        hamburgerFontFamily: string;
+        hamburgerFontStyle: string;
+        hamburgerFontColor: string;
+        hamburgerFontSize: string;
+        hamburgerFontWeight: string;
+        hamburgerTextTransform: string;
+        hamburgerIconColor: string;
+        hamburgerHoverColor: string;
         logo: string;
         logoResponsive: string;
         logoHeight: string;
@@ -6488,7 +6584,7 @@ declare const HalstackLanguageContext: react.Context<{
     };
     header: {
         closeIcon: string;
-        hamburguerTitle: string;
+        hamburgerTitle: string;
     };
     numberInput: {
         valueGreaterThanOrEqualToErrorMessage: (value: number) => string;