@dxc-technology/halstack-react 0.0.0-162b958 → 0.0.0-163a7b2

package/dist/index.d.mts

@@ -112,10 +112,10 @@ type NonIndependentProps = CommonProps$9 & {
      */
     onActiveChange?: (index: number[]) => void;
 };
-type Props$I = IndependentProps | NonIndependentProps;
+type Props$J = IndependentProps | NonIndependentProps;
 
 declare const DxcAccordion: {
-    (props: Props$I): JSX.Element;
+    (props: Props$J): JSX.Element;
     AccordionItem: ({ label, subLabel, badge, statusLight, icon, assistiveText, disabled, children, tabIndex, }: AccordionItemProps) => JSX.Element;
 };
 
@@ -198,9 +198,9 @@ type ModeSpecificProps = {
      */
     mode: "modal";
 };
-type Props$H = CommonProps$8 & ModeSpecificProps;
+type Props$I = CommonProps$8 & ModeSpecificProps;
 
-declare function DxcAlert({ closable, message, mode, primaryAction, secondaryAction, semantic, title, }: Props$H): react_jsx_runtime.JSX.Element;
+declare const DxcAlert: ({ closable, message, mode, primaryAction, secondaryAction, semantic, title, }: Props$I) => react_jsx_runtime.JSX.Element;
 
 type SidenavTitlePropsType = {
     /**
@@ -265,7 +265,7 @@ type SidenavLinkPropsType = {
      */
     tabIndex?: number;
 };
-type Props$G = {
+type Props$H = {
     /**
      * The area assigned to render the sidenav title. It is highly recommended to use the sidenav title.
      */
@@ -276,7 +276,7 @@ type Props$G = {
     children: ReactNode;
 };
 
-type Size$4 = "small" | "medium" | "large" | "fillParent" | "fitContent";
+type Size$5 = "small" | "medium" | "large" | "fillParent" | "fitContent";
 type Option$2 = {
     /**
      * Option display value.
@@ -291,7 +291,7 @@ type Option$2 = {
      */
     value: string;
 };
-type Props$F = {
+type Props$G = {
     /**
      * An array of objects representing the options.
      */
@@ -339,7 +339,7 @@ type Props$F = {
     /**
      * Size of the component.
      */
-    size?: Size$4;
+    size?: Size$5;
     /**
      * Value of the tabindex attribute.
      */
@@ -365,14 +365,14 @@ type Logo$1 = {
      */
     title?: string;
 };
-type Props$E = {
+type Props$F = {
     /**
      * Whether a contrast line should appear at the bottom of the header.
      */
     underlined?: boolean;
     /**
      * Content shown in the header. Take into account that the component applies styles
-     * for the first child in the content, so we recommend the use of React.Fragment
+     * for the first child in the content, so we recommend the use of Fragment
      * to be applied correctly. Otherwise, the styles can be modified.
      */
     content?: ReactNode;
@@ -513,12 +513,12 @@ declare const DxcApplicationLayout: {
     ({ visibilityToggleLabel, header, sidenav, footer, children, }: ApplicationLayoutPropsType): JSX.Element;
     Footer: ({ bottomLinks, children, copyright, logo, margin, mode, socialLinks, tabIndex, }: FooterPropsType) => JSX.Element;
     Header: {
-        ({ underlined, content, responsiveContent, logo, margin, onClick, tabIndex, }: Props$E): JSX.Element;
-        Dropdown: (props: react.ComponentProps<({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$F) => react_jsx_runtime.JSX.Element>) => react_jsx_runtime.JSX.Element;
+        ({ underlined, content, responsiveContent, logo, margin, onClick, tabIndex, }: Props$F): JSX.Element;
+        Dropdown: (props: react.ComponentProps<({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$G) => react_jsx_runtime.JSX.Element>) => react_jsx_runtime.JSX.Element;
     };
     Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
     SideNav: {
-        ({ title, children }: Props$G): JSX.Element;
+        ({ title, children }: Props$H): JSX.Element;
         Section: ({ children }: SidenavSectionPropsType) => JSX.Element;
         Group: ({ title, collapsable, icon, children }: SidenavGroupPropsType) => JSX.Element;
         Link: react.ForwardRefExoticComponent<SidenavLinkPropsType & react.RefAttributes<HTMLAnchorElement>>;
@@ -527,6 +527,68 @@ declare const DxcApplicationLayout: {
     useResponsiveSidenavVisibility: () => ((_isSidenavVisible: boolean) => void) | null;
 };
 
+type Size$4 = "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Shape = "circle" | "square";
+type Color = "primary" | "secondary" | "tertiary" | "success" | "info" | "neutral" | "warning" | "error";
+interface Status {
+    mode: "default" | "info" | "success" | "warning" | "error";
+    position: "top" | "bottom";
+}
+type Props$E = {
+    /**
+     * Affects the visual style of the avatar. It can be used following semantic purposes or not.
+     */
+    color?: Color;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Material Symbol name or SVG element as the icon that will be placed as avatar.
+     */
+    icon?: string | SVG;
+    /**
+     * URL of the image.
+     */
+    imageSrc?: string;
+    /**
+     * Text label associated with the avatar.
+     * Used to generate and display initials inside the avatar.
+     */
+    label?: string;
+    /**
+     * Page to be opened when the user clicks on the link.
+     */
+    linkHref?: string;
+    /**
+     * This function will be called when the user clicks the avatar. Makes it behave as a button.
+     */
+    onClick?: () => void;
+    /**
+     * This will determine if the avatar will be rounded square or a circle.
+     */
+    shape?: Shape;
+    /**
+     * Size of the component.
+     */
+    size?: Size$4;
+    /**
+     * Defines the color of the status indicator displayed on the avatar and where it will be placed.
+     * If not provided, no indicator will be rendered.
+     */
+    status?: Status;
+    /**
+     * Value of the tabindex attribute. It will only apply when the onClick property is passed.
+     */
+    tabIndex?: number;
+    /**
+     * Text to be displayed inside a tooltip when hovering the avatar.
+     */
+    title?: string;
+};
+
+declare const DxcAvatar: react.MemoExoticComponent<({ color, disabled, icon, imageSrc, label, linkHref, onClick, shape, size, status, tabIndex, title, }: Props$E) => react_jsx_runtime.JSX.Element>;
+
 type ContextualProps = {
     /**
      * Text to be placed in the badge.
@@ -543,7 +605,7 @@ type ContextualProps = {
     /**
      * Affects the visual style of the badge. It can be used following semantic purposes or not.
      */
-    color?: "grey" | "blue" | "green" | "orange" | "red" | "yellow" | "purple";
+    color?: "primary" | "secondary" | "tertiary" | "success" | "info" | "neutral" | "warning" | "error";
 };
 type NotificationProps = {
     /**
@@ -685,7 +747,6 @@ type OtherProps = {
     children: ReactNode;
 };
 type Props$A = IconProps | OtherProps;
-
 type BulletedListItemPropsType = {
     /**
      * Text to be shown in the list.
@@ -1556,7 +1617,7 @@ type Props$p = {
 
 declare function DxcDivider({ color, decorative, orientation, weight, }: Props$p): react_jsx_runtime.JSX.Element;
 
-declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$F) => react_jsx_runtime.JSX.Element;
+declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$G) => react_jsx_runtime.JSX.Element;
 
 type FileData = {
     /**
@@ -2010,7 +2071,7 @@ declare function DxcInset({ bottom, children, horizontal, left, right, space, to
 
 type LinkProps = {
     /**
-     * If true, the link is disabled.
+     * If true, the link will be disabled.
      */
     disabled?: boolean;
     /**
@@ -2065,7 +2126,7 @@ type TabProps$1 = {
      */
     children: string;
     /**
-     * Whether the tab is disabled or not.
+     * If true, the tab will be disabled.
      */
     disabled?: boolean;
     /**
@@ -2106,7 +2167,7 @@ type Props$i = {
 
 declare const DxcNavTabs: {
     ({ iconPosition, tabIndex, children }: Props$i): JSX.Element;
-    Tab: react.ForwardRefExoticComponent<TabProps$1 & react.RefAttributes<HTMLAnchorElement>>;
+    Tab: react.ForwardRefExoticComponent<TabProps$1 & react.RefAttributes<HTMLDivElement | HTMLAnchorElement>>;
 };
 
 type Props$h = {
@@ -2583,26 +2644,31 @@ type CommonProps$3 = {
      * An array of objects representing the columns of the table.
      */
     columns: Column[];
-    /**
-     * An array of objects representing the rows of the table, you will have
-     * as many objects as columns in the table.
-     */
-    rows: Row[];
     /**
      * Size of the margin to be applied to the component. You can pass an object with 'top',
      * 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
      */
     margin?: Space$1 | Margin;
-    /**
-     * Value of the tabindex attribute applied to the sortable icon.
-     */
-    tabIndex?: number;
     /**
      * Determines the visual style and layout
      * - "default": The default mode with big spacing
      * - "reduced": A reduced mode with minimal spacing for dense tables
      */
     mode?: "default" | "reduced";
+    /**
+     * An array of objects representing the rows of the table, you will have
+     * as many objects as columns in the table.
+     */
+    rows: Row[];
+    /**
+     * Value of the tabindex attribute applied to the sortable icon.
+     */
+    tabIndex?: number;
+    /**
+     * A fixed height must be set to enable virtualization.
+     * If no height is provided, the table will automatically adjust to the height of its content, and virtualization will not be applied.
+     */
+    virtualizedHeight?: string;
 };
 type PaginatedProps = CommonProps$3 & {
     hidePaginator?: false;
@@ -2629,10 +2695,6 @@ type NonPaginatedProps = CommonProps$3 & {
      * If true, paginator will not be displayed.
      */
     hidePaginator: true;
-    /**
-     * If true, a select component for navigation between pages will be displayed.
-     */
-    showGoToPage?: never;
     /**
      * Number of items per page.
      */
@@ -2646,11 +2708,15 @@ type NonPaginatedProps = CommonProps$3 & {
      * option. The value selected will be passed as a parameter.
      */
     itemsPerPageFunction?: never;
+    /**
+     * If true, a select component for navigation between pages will be displayed.
+     */
+    showGoToPage?: never;
 };
 type Props$c = PaginatedProps | NonPaginatedProps;
 
 declare const DxcResultsetTable: {
-    ({ columns, hidePaginator, itemsPerPage, itemsPerPageFunction, itemsPerPageOptions, margin, mode, rows, showGoToPage, tabIndex, }: Props$c): react_jsx_runtime.JSX.Element;
+    ({ columns, hidePaginator, itemsPerPage, itemsPerPageFunction, itemsPerPageOptions, margin, mode, rows, showGoToPage, tabIndex, virtualizedHeight, }: Props$c): react_jsx_runtime.JSX.Element;
     ActionsCell: ({ actions }: ActionsCellPropsType) => react_jsx_runtime.JSX.Element;
 };
 
@@ -2685,33 +2751,43 @@ type ListOptionGroupType = {
 };
 type CommonProps$2 = {
     /**
-     * Text to be placed above the select.
+     * Specifies a string to be used as the name for the select element when no `label` is provided.
      */
-    label?: string;
+    ariaLabel?: string;
     /**
-     * Name attribute of the input element. This attribute will allow users
-     * to find the component's value during the submit event. In this event,
-     * the component's value will always be a regular string, for both single
-     * and multiple selection modes, being a single option value in the first case
-     * and more than one value when multiple selection is available, separated by commas.
+     * If true, the component will be disabled.
      */
-    name?: string;
+    disabled?: boolean;
     /**
-     * An array of objects representing the selectable options.
+     * If it is a defined value and also a truthy string, the component will
+     * change its appearance, showing the error below the select component.
+     * If the defined value is an empty string, it will reserve a space below
+     * the component for a future error, but it would not change its look. In
+     * case of being undefined or null, both the appearance and the space for
+     * the error message would not be modified.
      */
-    options: ListOptionType[] | ListOptionGroupType[];
+    error?: string;
     /**
      * Helper text to be placed above the select.
      */
     helperText?: string;
     /**
-     * Text to be put as placeholder of the select.
+     * Text to be placed above the select.
      */
-    placeholder?: string;
+    label?: string;
     /**
-     * If true, the component will be disabled.
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
      */
-    disabled?: boolean;
+    margin?: Space$1 | Margin;
+    /**
+     * Name attribute of the input element. This attribute will allow users
+     * to find the component's value during the submit event. In this event,
+     * the component's value will always be a regular string, for both single
+     * and multiple selection modes, being a single option value in the first case
+     * and more than one value when multiple selection is available, separated by commas.
+     */
+    name?: string;
     /**
      * If true, the select will be optional, showing '(Optional)'
      * next to the label and adding a default first option with an empty string as value,
@@ -2721,23 +2797,17 @@ type CommonProps$2 = {
      */
     optional?: boolean;
     /**
-     * If true, enables search functionality.
+     * An array of objects representing the selectable options.
      */
-    searchable?: boolean;
+    options: ListOptionType[] | ListOptionGroupType[];
     /**
-     * If it is a defined value and also a truthy string, the component will
-     * change its appearance, showing the error below the select component.
-     * If the defined value is an empty string, it will reserve a space below
-     * the component for a future error, but it would not change its look. In
-     * case of being undefined or null, both the appearance and the space for
-     * the error message would not be modified.
+     * Text to be put as placeholder of the select.
      */
-    error?: string;
+    placeholder?: string;
     /**
-     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
-     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     * If true, enables search functionality.
      */
-    margin?: Space$1 | Margin;
+    searchable?: boolean;
     /**
      * Size of the component.
      */
@@ -2747,11 +2817,16 @@ type CommonProps$2 = {
      */
     tabIndex?: number;
     /**
-     * Specifies a string to be used as the name for the select element when no `label` is provided.
+     * A fixed height must be set to enable virtualization.
+     * If no height is provided, the select will automatically adjust to the height of its content, and virtualization will not be applied.
      */
-    ariaLabel?: string;
+    virtualizedHeight?: string;
 };
 type SingleSelect = CommonProps$2 & {
+    /**
+     * Initial value of the select, only when it is uncontrolled.
+     */
+    defaultValue?: string;
     /**
      * Enables users to select multiple items from the list.
      */
@@ -2763,14 +2838,15 @@ type SingleSelect = CommonProps$2 & {
      */
     multiple?: false;
     /**
-     * Initial value of the select, only when it is uncontrolled.
-     */
-    defaultValue?: string;
-    /**
-     * Value of the select. If undefined, the component will be uncontrolled
-     * and the value will be managed internally by the component.
+     * This function will be called when the select loses the focus. An
+     * object including the value and the error (if the value
+     * selected is not valid) will be passed to this function. If there is no error,
+     * error will not be defined.
      */
-    value?: string;
+    onBlur?: (val: {
+        value: string;
+        error?: string;
+    }) => void;
     /**
      * This function will be called when the user selects an option.
      * An object including the current value and the error (if the value entered is not valid)
@@ -2781,17 +2857,16 @@ type SingleSelect = CommonProps$2 & {
         error?: string;
     }) => void;
     /**
-     * This function will be called when the select loses the focus. An
-     * object including the value and the error (if the value
-     * selected is not valid) will be passed to this function. If there is no error,
-     * error will not be defined.
+     * Value of the select. If undefined, the component will be uncontrolled
+     * and the value will be managed internally by the component.
      */
-    onBlur?: (val: {
-        value: string;
-        error?: string;
-    }) => void;
+    value?: string;
 };
 type MultipleSelect = CommonProps$2 & {
+    /**
+     * Initial value of the select, only when it is uncontrolled.
+     */
+    defaultValue?: string[];
     /**
      * Enables users to select multiple items from the list.
      */
@@ -2803,14 +2878,15 @@ type MultipleSelect = CommonProps$2 & {
      */
     multiple: true;
     /**
-     * Initial value of the select, only when it is uncontrolled.
-     */
-    defaultValue?: string[];
-    /**
-     * Value of the select. If undefined, the component will be uncontrolled
-     * and the value will be managed internally by the component.
+     * This function will be called when the select loses the focus. An
+     * object including the selected values and the error (if the value
+     * selected is not valid) will be passed to this function. If there is no error,
+     * error will be null.
      */
-    value?: string[];
+    onBlur?: (val: {
+        value: string[];
+        error?: string;
+    }) => void;
     /**
      * This function will be called when the user selects an option.
      * An object including the current selected values and the error (if the value entered is not valid)
@@ -2821,15 +2897,10 @@ type MultipleSelect = CommonProps$2 & {
         error?: string;
     }) => void;
     /**
-     * This function will be called when the select loses the focus. An
-     * object including the selected values and the error (if the value
-     * selected is not valid) will be passed to this function. If there is no error,
-     * error will be null.
+     * Value of the select. If undefined, the component will be uncontrolled
+     * and the value will be managed internally by the component.
      */
-    onBlur?: (val: {
-        value: string[];
-        error?: string;
-    }) => void;
+    value?: string[];
 };
 type Props$b = SingleSelect | MultipleSelect;
 
@@ -3037,37 +3108,25 @@ declare const DxcTable: {
     ActionsCell: ({ actions }: ActionsCellPropsType) => react_jsx_runtime.JSX.Element;
 };
 
-type TabLabelProps = {
-    /**
-     * Tab label.
-     */
-    label: string;
-    /**
-     * Material Symbol name or SVG element used as the icon that will be displayed in the tab.
-     */
-    icon?: string | SVG;
-};
-type TabIconProps = {
-    /**
-     * Tab label.
-     */
-    label?: string;
-    /**
-     * Material Symbol name or SVG element used as the icon that will be displayed in the tab.
-     */
-    icon: string | SVG;
-};
-type TabProps = {
+type CommonTabProps = {
     defaultActive?: boolean;
     active?: boolean;
     title?: string;
-    tabId?: string;
     disabled?: boolean;
     notificationNumber?: boolean | number;
     children: ReactNode;
     onClick?: () => void;
     onHover?: () => void;
-} & (TabLabelProps | TabIconProps);
+};
+type TabProps = (CommonTabProps & {
+    tabId: string;
+    label?: string;
+    icon?: string | SVG;
+}) | (CommonTabProps & {
+    tabId?: string;
+    label: string;
+    icon?: string | SVG;
+});
 type TabsProps = {
     /**
      * Whether the icon should appear above or to the left of the label.
@@ -3574,7 +3633,7 @@ type Props$2 = {
     position?: "bottom" | "top" | "left" | "right";
 };
 
-declare function DxcTooltip(props: Props$2): react_jsx_runtime.JSX.Element;
+declare const DxcTooltip: (props: Props$2) => react_jsx_runtime.JSX.Element;
 
 type Props$1 = {
     as?: "a" | "blockquote" | "cite" | "code" | "div" | "em" | "figcaption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "pre" | "small" | "span" | "strong";
@@ -3609,7 +3668,7 @@ type StepProps = {
      */
     icon?: string | SVG;
     /**
-     * Whether the step is disabled or not.
+     * If true, the step will be disabled.
      */
     disabled?: boolean;
     /**
@@ -3845,11 +3904,13 @@ declare const HalstackLanguageContext: react.Context<{
         clearToastActionTitle: string;
     };
 }>;
+type ThemeType = Record<string, string | number>;
 type HalstackProviderPropsType = {
     labels?: DeepPartial<TranslatedLabels>;
     children: ReactNode;
+    opinionatedTheme?: ThemeType;
 };
-declare const HalstackProvider: ({ labels, children }: HalstackProviderPropsType) => JSX.Element;
+declare const HalstackProvider: ({ labels, children, opinionatedTheme }: HalstackProviderPropsType) => JSX.Element;
 
 declare function useToast(): {
     default: (toast: DefaultToast) => (() => void) | undefined;
@@ -3859,4 +3920,4 @@ declare function useToast(): {
     loading: (toast: Omit<LoadingToast, "loading">) => (() => void) | undefined;
 };
 
-export { DxcAccordion, DxcAlert, DxcApplicationLayout, DxcBadge, DxcBleed, DxcBreadcrumbs, DxcBulletedList, DxcButton, DxcCard, DxcCheckbox, DxcChip, DxcContainer, DxcContextualMenu, DxcDataGrid, DxcDateInput, DxcDialog, DxcDivider, DxcDropdown, DxcFileInput, DxcFlex, DxcGrid, DxcHeading, DxcImage, DxcInset, DxcLink, DxcNavTabs, DxcNumberInput, DxcPaginator, DxcParagraph, DxcPasswordInput, DxcProgressBar, DxcQuickNav, DxcRadioGroup, DxcResultsetTable, DxcSelect, DxcSlider, DxcSpinner, DxcStatusLight, DxcSwitch, DxcTable, DxcTabs, DxcTextInput, DxcTextarea, DxcToastsQueue, DxcToggleGroup, DxcTooltip, DxcTypography, DxcWizard, HalstackLanguageContext, HalstackProvider, useToast };
+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, DxcProgressBar, DxcQuickNav, DxcRadioGroup, DxcResultsetTable, DxcSelect, DxcSlider, DxcSpinner, DxcStatusLight, DxcSwitch, DxcTable, DxcTabs, DxcTextInput, DxcTextarea, DxcToastsQueue, DxcToggleGroup, DxcTooltip, DxcTypography, DxcWizard, HalstackLanguageContext, HalstackProvider, useToast };