@engie-group/fluid-design-system-react/lib/components/header/NJHeader.d.ts

Fluid Design System React

import { HeaderProperties } from '@engie-group/fluid-types';
import { HTMLAttributes, MouseEventHandler, ReactNode, Ref } from 'react';
type HeaderRefs = {
    /**
     * Ref for the burger menu element.
     */
    burgerMenuRef?: Ref<HTMLButtonElement>;
};
type HeaderSlots = {
    /**
     * Logo component to display in the header.
     * It can be an image, a SVG, or any other React component.
     */
    logo?: ReactNode;
    /**
     * Ray component to display in the header.
     * You can use `NJRay` component or any other React component.
     */
    ray?: ReactNode;
    /**
     * Control component to display in the header.
     * It can be an array of controls or a single component.
     * It is typically used for navigation or other interactive elements.
     * It can be one or more `NJNavigationAction` or any other React component.
     */
    control?: ReactNode;
    /**
     * Button component to display in the header.
     * It can be a `NJButton` or any other React component.
     */
    button?: ReactNode;
    /**
     * Utility component to display in the header.
     * It can be an array of utilities or a single component.
     * It is typically used for additional actions or information.
     * It can be one or more `NJNavigationAction` or any other React component.
     */
    utility?: ReactNode;
    /**
     * Avatar component to display in the header.
     * It can be a `NJAvatar` or any other React component.
     */
    avatar?: ReactNode;
    /**
     * Cart component to display in the header.
     * It can be a `NJNavigationAction` or any other React component.
     */
    cart?: ReactNode;
    /**
     * Navigation component to display in the header.
     * It can be a `NJNavigationTab` or any other React component.
     */
    navigation?: ReactNode;
    /**
     * Search component to display in the header.
     * It can be a `NJSearchInput` or any other React component.
     */
    search?: ReactNode;
    /**
     * Secondary action component to display in the header.
     * It can be an array of utilities or a single component.
     * It is typically used for additional actions or information.
     * It can be one or more `NJNavigationAction` or any other React component.
     */
    secondaryAction?: ReactNode;
};
type HeaderCallbacks = {
    /**
     * Callback function to handle burger menu click event.
     * It is typically used to toggle the visibility of the navigation menu in responsive layouts.
     */
    onBurgerClick?: MouseEventHandler;
};
export type NJHeaderProps = HTMLAttributes<HTMLElement> & HeaderProperties & HeaderSlots & HeaderCallbacks & HeaderRefs;
export declare const NJHeader: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & HeaderProperties & HeaderSlots & HeaderCallbacks & HeaderRefs & import("react").RefAttributes<HTMLHeadingElement>>;
export {};