/** * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). * * WSO2 LLC. licenses this file to you under the Apache License, * Version 2.0 (the "License"); you may not use this file except * in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, * software distributed under the License is distributed on an * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY * KIND, either express or implied. See the License for the * specific language governing permissions and limitations * under the License. */ import type { OverridableComponent } from '@mui/material/OverridableComponent'; import type { ElementType, ReactNode } from 'react'; import type { AppBarProps, AppBarTypeMap } from '../AppBar'; import type { ButtonProps } from '../Button'; import type { ModeList, UserTemplate } from '../UserDropdownMenu'; export type HeaderProps = AppBarProps & { /** * Brand information. */ brand?: BrandTemplate; /** * Left aligned elements to be rendered. * @remarks This will be rendered on the left side of the header following the brand section. */ leftAlignedElements?: ReactNode[]; /** * List of modes. */ modes?: ModeList[]; /** * Navbar toggle icon. */ navbarToggleIcon?: ReactNode; /** * Function to handle the collapsible hamburger click. */ onCollapsibleHamburgerClick?: () => void; /** * Right aligned elements to be rendered. * @remarks This will be rendered on the right side of the header preceding the user dropdown section. */ rightAlignedElements?: ReactNode[]; /** * Should show the collapsible hamburger icon? */ showCollapsibleHamburger?: boolean; /** * Logged user information. */ user?: UserTemplate; /** * Props to modify the action menu item in the user dropdown menu. */ userDropdownMenu?: UserDropdownMenuHeaderProps; }; export type UserDropdownMenuHeaderProps = { /** * Action icon for the user dropdown menu. */ actionIcon?: ReactNode; /** * Action text for the user dropdown menu. */ actionText?: string; /** * Footer content. */ footerContent?: ReactNode[]; /** * Menu items to be added to the user dropdown menu. */ menuItems?: ReactNode[]; /** * Callback to be called on clicking on the action button. */ onActionClick?: () => void; triggerOptions?: Omit & Record; }; export type BrandTemplate = { /** * Logo for the brand template. */ logo?: { /** * Desktop logo for the brand template. */ desktop?: ReactNode; /** * Mobile logo for the brand template. */ mobile?: ReactNode; }; /** * Function on clicking on the brand logo and name. */ onClick?: () => void; /** * Title of the brand, portal name or company. */ title?: ReactNode; }; /** * The Header displays the brand, left aligned elements, right aligned elements, and the user dropdown menu. * * Demos: * * - [Header (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-header) * * API: * * - [AppBar API](https://mui.com/material-ui/api/app-bar/) * * @remarks * - ✨ This is a custom component that is not available in the Material-UI library. * - ✔️ Props of the [AppBar](https://mui.com/material-ui/api/app-bar//) component are also available. * - ✅ `component` prop is supported. * - ✅ The `ref` is forwarded to the root element. * * @template C - The type of the component. * @param props - The props for the Header component. * @param ref - The ref to be forwarded to the AppBar component. * @returns The rendered Header component. */ declare const Header: OverridableComponent>; export default Header;