@dxc-technology/halstack-react 0.0.0-ca89a03 → 0.0.0-caad7df

package/dist/index.d.ts

@@ -59,7 +59,7 @@ type AccordionItemProps = {
      */
     tabIndex?: number;
 };
-type CommonProps$9 = {
+type CommonProps$a = {
     /**
      * 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.
@@ -70,7 +70,7 @@ type CommonProps$9 = {
      */
     children: ReactElement<AccordionItemProps>[] | ReactElement<AccordionItemProps>;
 };
-type IndependentProps = CommonProps$9 & {
+type IndependentProps = CommonProps$a & {
     /**
      * When true, limits the user to single-open section at a time. When false, multiple sections can be opened simultaneously.
      */
@@ -91,7 +91,7 @@ type IndependentProps = CommonProps$9 & {
      */
     onActiveChange?: (index: number) => void;
 };
-type NonIndependentProps = CommonProps$9 & {
+type NonIndependentProps = CommonProps$a & {
     /**
      * When true, limits the user to single-open section at a time. When false, multiple sections can be opened simultaneously.
      */
@@ -145,7 +145,7 @@ type Message = {
      */
     text: ReactNode;
 };
-type CommonProps$8 = {
+type CommonProps$9 = {
     /**
      * 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
@@ -198,14 +198,46 @@ type ModeSpecificProps = {
      */
     mode: "modal";
 };
-type Props$J = CommonProps$8 & ModeSpecificProps;
+type Props$J = CommonProps$9 & ModeSpecificProps;
 
 declare const DxcAlert: ({ closable, message, mode, primaryAction, secondaryAction, semantic, title, }: Props$J) => react_jsx_runtime.JSX.Element;
 
+type SearchBarProps = {
+    /**
+     * If true, the search bar input will be focused when rendered.
+     */
+    autoFocus?: boolean;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Function invoked when the search bar loses focus.
+     */
+    onBlur?: (value: string) => void;
+    /**
+     * Function invoked when the user cancels the search.
+     */
+    onCancel?: () => void;
+    /**
+     * Function invoked when the user changes the input value.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Function invoked when the Enter key is pressed.
+     */
+    onEnter?: (value: string) => void;
+    /**
+     * Placeholder text displayed in the search bar input field.
+     */
+    placeholder?: string;
+};
+
 type Section$1 = {
     items: (Item$2 | GroupItem$2)[];
     title?: string;
 };
+type SearchbarSidenavProps = Omit<SearchBarProps, "autoFocus" | "disabled" | "onCancel">;
 type Props$I = {
     /**
      * The content rendered in the bottom part of the sidenav, under the navigation menu.
@@ -237,6 +269,10 @@ type Props$I = {
      * Function called when the expansion state of the sidenav changes.
      */
     onExpandedChange?: (value: boolean) => void;
+    /**
+     * When provided, a search bar will be rendered at the top of the sidenav.
+     */
+    searchBar?: SearchbarSidenavProps;
     /**
      * The additional content rendered in the upper part of the sidenav, under the branding.
      */
@@ -252,6 +288,7 @@ type Item$2 = CommonItemProps$1 & {
     selected?: boolean;
 };
 type GroupItem$2 = CommonItemProps$1 & {
+    defaultOpen?: boolean;
     items: (Item$2 | GroupItem$2)[];
 };
 
@@ -270,6 +307,7 @@ type Item$1 = CommonItemProps & {
 };
 type GroupItem$1 = CommonItemProps & {
     items: (Item$1 | GroupItem$1)[];
+    defaultOpen?: boolean;
 };
 type Section = {
     items: (Item$1 | GroupItem$1)[];
@@ -307,10 +345,12 @@ type GroupItem = CommonItemProps & {
     items: Item$1[];
 };
 type MainNavPropsType = (GroupItem | Item$1)[];
+type SearchBarHeaderProps = Omit<SearchBarProps, "autoFocus" | "disabled">;
 type Props$G = {
     appTitle?: string;
     navItems?: MainNavPropsType;
     responsiveBottomContent?: ReactNode;
+    searchBar?: SearchBarHeaderProps;
     sideContent?: ReactNode | ((isResponsive: boolean) => ReactNode);
 };
 
@@ -342,7 +382,7 @@ type Logo = {
     /**
      * Source of the logo image.
      */
-    src: string;
+    src: string | SVG;
     /**
      * Alternative text for the logo image.
      */
@@ -438,9 +478,9 @@ type ApplicationLayoutPropsType = {
 declare const DxcApplicationLayout: {
     ({ logo, header, sidenav, footer, children }: ApplicationLayoutPropsType): JSX.Element;
     Footer: ({ bottomLinks, copyright, leftContent, logo, mode, rightContent, socialLinks, tabIndex, }: FooterPropsType) => JSX.Element;
-    Header: ({ appTitle, navItems, sideContent, responsiveBottomContent }: Props$G) => JSX.Element;
+    Header: ({ appTitle, navItems, responsiveBottomContent, searchBar, sideContent, }: Props$G) => JSX.Element;
     Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
-    Sidenav: ({ topContent, bottomContent, navItems, appTitle, displayGroupLines, expanded, defaultExpanded, onExpandedChange, }: Props$I) => JSX.Element;
+    Sidenav: ({ topContent, bottomContent, navItems, appTitle, displayGroupLines, expanded, defaultExpanded, onExpandedChange, searchBar, }: Props$I) => JSX.Element;
 };
 
 type Size$5 = "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
@@ -549,7 +589,7 @@ type NotificationProps = {
      */
     color?: never;
 };
-type CommonProps$7 = {
+type CommonProps$8 = {
     /**
      * Text representing advisory information related to the badge. Under the hood, this prop also serves as an accessible label for the component.
      */
@@ -563,7 +603,7 @@ type CommonProps$7 = {
      */
     size?: "small" | "medium" | "large";
 };
-type Props$E = (ContextualProps | NotificationProps) & CommonProps$7;
+type Props$E = (ContextualProps | NotificationProps) & CommonProps$8;
 
 declare const DxcBadge: ({ label, title, mode, color, icon, notificationLimit, size, }: Props$E) => JSX.Element;
 
@@ -875,43 +915,80 @@ type Props$y = {
 
 declare const DxcCheckbox: react.ForwardRefExoticComponent<Props$y & react.RefAttributes<HTMLDivElement>>;
 
-type Props$x = {
+type ChipAvatarType = {
+    color: Props$F["color"];
+    profileName?: Props$F["label"];
+    imageSrc?: Props$F["imageSrc"];
+    icon?: Props$F["icon"];
+};
+type CommonProps$7 = {
     /**
-     * Text to be placed on the chip.
+     * Function to be called when the chip is clicked or the dismiss action is triggered.
      */
-    label?: string;
+    onClick?: () => void;
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+};
+type SelectableChipProps = CommonProps$7 & {
     /**
-     * Element or path used as icon to be placed after the chip label.
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The whole chip is an interactive element that allows users to activate or clear options directly within the interface.
+     */
+    mode?: "selectable";
+    /**
+     * If true, the component will be selected. This property is only applicable when the mode is "selectable".
+     * If undefined, the component manages its own internal state (uncontrolled mode).
+     */
+    selected?: boolean;
+} & ({
+    /**
+     * Element, path or avatar used as icon to be placed before the chip label.
+     */
+    prefix: ChipAvatarType;
+    /**
+     * Text to be placed on the chip. Required when using an avatar prefix.
      */
-    suffixIcon?: string | SVG;
+    label: string;
+} | {
     /**
      * Element or path used as icon to be placed before the chip label.
      */
-    prefixIcon?: string | SVG;
+    prefix: string | SVG;
     /**
-     * This function will be called when the suffix is clicked.
+     * Text to be placed on the chip. Optional when using an icon prefix.
      */
-    onClickSuffix?: () => void;
+    label?: string;
+} | {
+    prefix?: undefined;
     /**
-     * This function will be called when the prefix is clicked.
+     * Text to be placed on the chip.
      */
-    onClickPrefix?: () => void;
+    label: string;
+});
+type DismissibleChipProps = CommonProps$7 & {
     /**
-     * If true, the component will be disabled.
+     * Dismissible chip is used to represent information generated by user input within an interface.
      */
-    disabled?: boolean;
+    mode: "dismissible";
     /**
-     * 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.
+     * Text to be placed on the chip.
      */
-    margin?: Space$1 | Margin;
+    label: string;
     /**
-     * Value of the tabindex attribute.
+     * Element, path or avatar used as icon to be placed before the chip label.
      */
-    tabIndex?: number;
+    prefix?: string | SVG | ChipAvatarType;
+    selected?: never;
+    disabled?: never;
 };
+type Props$x = SelectableChipProps | DismissibleChipProps;
 
-declare const DxcChip: ({ label, suffixIcon, prefixIcon, onClickSuffix, onClickPrefix, disabled, margin, tabIndex, }: Props$x) => react_jsx_runtime.JSX.Element;
+declare const DxcChip: ({ disabled, label, mode, onClick, prefix, selected, tabIndex, }: Props$x) => react_jsx_runtime.JSX.Element | null;
 
 type Space = {
     top?: string;
@@ -1663,6 +1740,10 @@ type CommonProps$5 = {
      * If true, if the file is an image, a preview of it will be shown. If not, an icon refering to the file type will be shown.
      */
     showPreview?: boolean;
+    /**
+     * Size of the component.
+     */
+    size?: "medium" | "fillParent";
     /**
      * Value of the tabindex attribute.
      */
@@ -2430,6 +2511,32 @@ type Props$f = {
 
 declare const DxcPasswordInput: react.ForwardRefExoticComponent<Props$f & react.RefAttributes<HTMLDivElement>>;
 
+type PopoverPropsType = {
+    /** Action that triggers the popover to open. */
+    actionToOpen?: "click" | "hover";
+    /** Alignment of the popover relative to the trigger element. */
+    align?: "start" | "center" | "end";
+    /** Set to true if child controls the events. It will render the child directly without wrapping it. */
+    asChild?: boolean;
+    /** Element that triggers the popover and works as the anchor. */
+    children: React.ReactNode;
+    /** Whether the popover should display a tip (arrow). */
+    hasTip?: boolean;
+    /** Controlled open state of the popover. If it is left undefined, it will be uncontrolled. */
+    isOpen?: boolean;
+    /** Callback function when the popover is opened.
+     * Used only in controlled mode and if the trigger lacks the events to manage the controlled behavior. */
+    onOpen?: () => void;
+    /** Callback function when the popover is closed. */
+    onClose?: () => void;
+    /** Content to be displayed inside the popover. */
+    popoverContent: React.ReactNode;
+    /** Side of the trigger where the popover will appear. */
+    side?: "top" | "bottom" | "left" | "right";
+};
+
+declare const DxcPopover: ({ actionToOpen, align, asChild, children, hasTip, isOpen, onOpen, onClose, popoverContent, side, }: PopoverPropsType) => JSX.Element;
+
 type Size$1 = {
     top?: Space$1;
     bottom?: Space$1;
@@ -3771,6 +3878,12 @@ declare const defaultTranslatedComponentLabels: {
     radioGroup: {
         optionalItemLabelDefault: string;
     };
+    searchBar: {
+        clearFieldActionTitle: string;
+        inputAriaLabel: string;
+        triggerTitle: string;
+        cancelButtonLabel: string;
+    };
     select: {
         actionClearSelectionTitle: string;
         actionClearSearchTitle: string;
@@ -3872,6 +3985,12 @@ declare const HalstackLanguageContext: react.Context<{
     radioGroup: {
         optionalItemLabelDefault: string;
     };
+    searchBar: {
+        clearFieldActionTitle: string;
+        inputAriaLabel: string;
+        triggerTitle: string;
+        cancelButtonLabel: string;
+    };
     select: {
         actionClearSelectionTitle: string;
         actionClearSearchTitle: string;
@@ -3891,7 +4010,10 @@ declare const HalstackLanguageContext: react.Context<{
         clearToastActionTitle: string;
     };
 }>;
-type ThemeType = Record<string, string | number>;
+type ThemeType = {
+    tokens?: Record<string, string | number>;
+    logos?: Record<string, string | undefined>;
+};
 type HalstackProviderPropsType = {
     labels?: DeepPartial<TranslatedLabels>;
     children: ReactNode;
@@ -3907,4 +4029,4 @@ declare function useToast(): {
     loading: (toast: Omit<LoadingToast, "loading">) => (() => void) | undefined;
 };
 
-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 };
+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, DxcToastsQueue, DxcToggleGroup, DxcTooltip, DxcTypography, DxcWizard, HalstackLanguageContext, HalstackProvider, useToast };