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

Fluid Design System React

import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { Root as Slot } from '../../node_modules/.pnpm/@radix-ui_react-slot@1.2.3_@types_react@19.2.6_react@19.2.0/node_modules/@radix-ui/react-slot/dist/index.js';
import { forwardRef } from 'react';
import { Utils } from '../../utils/util.js';
import { NJDivider } from '../divider/NJDivider.js';
import { NJIconButton } from '../icon-button/NJIconButton.js';

const rootClass = 'nj-header';
const NJHeader = forwardRef((props, forwardRef) => {
    const { layout, logoPosition, logo, ray, control, button, utility, avatar, cart, navigation, search, secondaryAction, hasBurgerMenu, onBurgerClick, className: hostClass, burgerMenuRef, ...htmlAttributes } = props;
    const className = Utils.classNames(rootClass, {
        [`${rootClass}--${layout}`]: !!layout,
        [`${rootClass}--logo-${logoPosition}`]: !!logoPosition
    }, hostClass);
    const HeaderFirstLine = () => {
        switch (layout ?? 'expanded') {
            case 'expanded':
                return (jsxs("div", { ref: forwardRef, className: `${rootClass}__first-line`, children: [jsx("div", { className: `${rootClass}__first-line-left`, children: control && jsx("div", { className: `${rootClass}__controls`, children: control }) }), jsx("div", { className: `${rootClass}__first-line-center`, children: logo }), jsxs("div", { className: `${rootClass}__first-line-right`, children: [button, utility && jsx("div", { className: `${rootClass}__utilities`, children: utility }), avatar, cart] })] }));
            case 'retracted':
                return (jsxs("div", { ref: forwardRef, className: `${rootClass}__first-line`, children: [jsxs("div", { className: `${rootClass}__first-line-left`, children: [logo, !!navigation && (jsx("div", { role: "tablist", className: `nj-tabs nj-tabs--md ${rootClass}__navigation`, children: navigation }))] }), jsxs("div", { className: `${rootClass}__first-line-right`, children: [jsx(Slot, { className: "nj-header__search", children: search }), button, !!control && jsx("div", { className: `${rootClass}__controls`, children: control }), !!control && jsx(NJDivider, { className: `${rootClass}__controls-divider` }), !!secondaryAction && (jsx("div", { className: `${rootClass}__secondary-actions`, children: secondaryAction })), !!secondaryAction && (jsx(NJDivider, { className: `${rootClass}__secondary-actions-divider` })), !!utility && jsx("div", { className: `${rootClass}__utilities`, children: utility }), avatar, cart] })] }));
            case 'responsive':
                return (jsxs("div", { ref: forwardRef, className: `${rootClass}__first-line`, children: [jsxs("div", { className: `${rootClass}__first-line-left`, children: [hasBurgerMenu && (jsx(NJIconButton, { ref: burgerMenuRef, "aria-label": "Menu button", variant: "brand", onClick: onBurgerClick, icon: "dehaze" })), logoPosition !== 'center' && logo, !!control && jsx("div", { className: `${rootClass}__controls`, children: control })] }), logoPosition === 'center' && (jsx("div", { className: `${rootClass}__first-line-center`, children: logo })), jsxs("div", { className: `${rootClass}__first-line-right`, children: [jsx(Slot, { className: "nj-header__search", children: search }), button, !!secondaryAction && (jsx("div", { className: `${rootClass}__secondary-actions`, children: secondaryAction })), secondaryAction && (jsx(NJDivider, { className: `${rootClass}__secondary-actions-divider` })), !!utility && jsx("div", { className: `${rootClass}__utilities`, children: utility }), avatar, cart] })] }));
            default:
                throw Error(`Unknown header layout: ${layout}`);
        }
    };
    const hasSecondLine = (navigation || search || secondaryAction) && (!layout || layout === 'expanded');
    return (jsxs("header", { ref: forwardRef, ...htmlAttributes, className: className, children: [ray, jsx(HeaderFirstLine, {}), hasSecondLine && (jsxs(Fragment, { children: [jsx(NJDivider, {}), jsxs("div", { className: `${rootClass}__second-line`, children: [navigation && (jsx("div", { role: "tablist", className: `nj-tabs nj-tabs--md ${rootClass}__navigation`, children: navigation })), search && jsx(Slot, { className: "nj-header__search", children: search }), secondaryAction && (jsx("div", { className: `${rootClass}__secondary-actions`, children: secondaryAction }))] })] }))] }));
});
NJHeader.displayName = 'NJHeader';

export { NJHeader };