@veracity/vui/dist/header/header.types.d.ts

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { LinksDict } from "../core/links.js";
import { ThemingProps } from "../theme/types.js";
import "../theme/index.js";
import { SystemProps } from "../system/system.js";
import "../system/index.js";
import "../core/index.js";
import { IconProp } from "../icon/icon.types.js";
import "../icon/index.js";
import { ListItemProps, ListProps } from "../list/list.types.js";
import "../list/index.js";
import { BoxProps } from "../box/box.types.js";
import "../box/index.js";
import { ButtonProps } from "../button/button.types.js";
import "../button/index.js";
import { LogoData } from "../logo/logo.types.js";
import { MenuProps } from "../menu/menu.types.js";
import "../menu/index.js";
import { HeaderAccountData, HeaderAccountUserInfoData } from "./headerAccount.types.js";
import { Dispatch, JSX, RefObject, SetStateAction } from "react";
//#region src/header/header.types.d.ts
type HeaderContentProps = BoxProps;
type HeaderContext = Pick<HeaderProps, 'headerHeight'> & {
  isDesktop: boolean;
  isMobile: boolean;
  isMobileOpen: boolean;
  links: LinksDict;
  mobileContentRef: RefObject<HTMLElement | null>;
  mobileToggleRef: RefObject<HTMLElement | null>;
  setIsMobileOpen: Dispatch<SetStateAction<boolean>>;
};
type HeaderCreateAccountData = {
  /** Provides URL to create account link. */
  url?: string;
};
type HeaderCreateAccountProps = BoxProps & HeaderCreateAccountData;
type HeaderLinkData = {
  /** Displays and icon on the left side of the link. */
  icon?: IconProp;
  /** Unique name that identifies a link in the links dictionary. */
  id?: string;
  /** Adds styling for currently active link. */
  isActive?: boolean;
  /** Provides text content to the list item. */
  text?: string;
  /** Provides href attribute to the internal link element. */
  url?: string;
};
type HeaderLinkItemProps = ListItemProps & HeaderLinkData;
type HeaderMainLinksProps = ListProps & {
  /** Array of objects with data for each link. */
  links?: HeaderLinkData[];
};
type HeaderNotificationsData = {
  /** Displays a badge with given number of notifications. */
  count?: number;
  /** Provides href to the icon link. */
  url?: string;
};
type HeaderNotificationsProps = ButtonProps & HeaderNotificationsData;
type HeaderProps = SystemProps & ThemingProps<'Header'> & {
  /** Sets the height of the Header and is used by internal parts for positioning and sizing. @deprecated; header should always be 72 px.*/
  headerHeight?: number;
  isSticky?: boolean;
};
type HeaderServicesData = {
  /** Array of objects with data for each service link. */
  links?: HeaderLinkData[];
};
type HeaderServicesProps = MenuProps & HeaderServicesData & {
  /** Props object passed to the MenuButton component. */
  buttonProps?: ButtonProps;
  /** Children are disabled for this component. */
  children?: never;
  isApplication?: boolean;
  /** Props object passed to the MenuList component. */
  listProps?: ListProps;
  /** Props object passed to the MenuItem component; introduced for app MD */
  showTopBorder?: boolean;
};
type HeaderSupportProps = MenuProps & HeaderServicesData & {};
type HeaderButtonData = {
  /** Provides href to the button link. */
  url?: string;
};
type HeaderSignInProps = ButtonProps & HeaderButtonData;
type LoggedInHeaderProps = HeaderProps & HeaderButtonData & {
  /** Socket for account popover icon on the right side. */
  account?: HeaderAccountData | JSX.Element;
  /** Socket for showing the 'alternative' user Info if showAltUserInfo is enabled */
  altUserInfo?: HeaderAccountUserInfoData;
  supportLinks?: HeaderServicesData;
  /** Socket for the app name on the left side. */
  applicationName?: string;
  applicationUrl?: string;
  isApplication?: boolean;
  isCleanLayout?: boolean;
  isSticky?: boolean;
  /** Socket for logo on the left side. */
  logo?: LogoData | JSX.Element;
  /** Socket for main links in the middle-right. */
  mainLinks?: HeaderLinkData[] | JSX.Element;
  /** Socket for notifications icon on the right side. */
  notifications?: HeaderNotificationsData | JSX.Element;
  /** Socket for services menu icon on the right side. */
  services?: HeaderServicesData | JSX.Element;
  /** Socket for showing the 'alternative' user Info with role (alternative: 3 lines, role. default: 2 lines, no role); introduced for APP; @default false */
  showAltUserInfo?: boolean;
  /** Socket for showing the services trigger up front; introduced for APP; by default it is displayed. */
  showServices?: boolean;
  /** Socket for showing the main Links up front in case of APP. by default they are folded into the hamburger menu. */
  showMainLinks?: boolean;
};
type LoggedOutHeaderProps = HeaderProps & {
  /** Socket for the app name on the left side. */
  applicationName?: string;
  applicationUrl?: string;
  isApplication?: boolean;
  /** Socket for create account prompt on the right side. */
  createAccount?: HeaderCreateAccountData | JSX.Element;
  isSticky?: boolean;
  /** Socket for logo on the left side. */
  logo?: LogoData | JSX.Element;
  /** Socket for links in the middle-right section. */
  mainLinks?: HeaderLinkData[] | JSX.Element;
  /** Socket for sign in button on the right side. */
  signIn?: HeaderButtonData | JSX.Element;
};
//#endregion
export { HeaderButtonData, HeaderContentProps, HeaderContext, HeaderCreateAccountData, HeaderCreateAccountProps, HeaderLinkData, HeaderLinkItemProps, HeaderMainLinksProps, HeaderNotificationsData, HeaderNotificationsProps, HeaderProps, HeaderServicesData, HeaderServicesProps, HeaderSignInProps, HeaderSupportProps, LoggedInHeaderProps, LoggedOutHeaderProps };

//# sourceMappingURL=header.types.d.ts.map