@oslokommune/punkt-react/src/components/header/types.ts

React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo

import type { MouseEvent, ReactNode } from 'react'
import type {
  THeaderMenu,
  THeaderPosition,
  THeaderScrollBehavior,
  TLogOutButtonPlacement,
  TSlotMenuVariant,
  THeaderFooterApi,
  THeaderMenuLocale,
  IPktHeaderGlobal as ISharedPktHeaderGlobal,
} from 'shared-types'

export type {
  THeaderMenu,
  THeaderPosition,
  THeaderScrollBehavior,
  TLogOutButtonPlacement,
  TSlotMenuVariant,
  THeaderFooterApi,
  THeaderMenuLocale,
}

/** Which header variant `<PktHeader>` renders. */
export type THeaderType = 'service' | 'global'

/** User object for header components */
export interface User {
  name: string
  /** @deprecated shortname is deprecated and will be removed in a future version */
  shortname?: string
  lastLoggedIn?: string | Date
}

/** Representing object for header components */
export interface Representing {
  name: string
  /** @deprecated shortname is deprecated and will be removed in a future version */
  shortname?: string
  orgNumber?: string | number
}

/** User menu item for header components */
export interface UserMenuItem {
  iconName?: string
  title: string
  target: string | (() => void)
}

/** @deprecated Use UserMenuItem instead */
export interface UserMenuFooterItem {
  title: string
  target: string | (() => void)
}

export interface IPktHeader {
  children?: ReactNode
  /** Additional CSS class name(s) to apply to the header */
  className?: string
  /** Set dark mode on the header */
  'data-mode'?: 'dark'
  /** Hide the Oslo logo. Default: false (logo is shown) */
  hideLogo?: boolean
  /** Link URL for the logo */
  logoLink?: string
  /** Override CDN path for the logo */
  logoPath?: string
  /** Callback when logo is clicked */
  logoClick?: (event: MouseEvent) => void
  /** Name of the service displayed in the header */
  serviceName?: string
  /** Link URL for the service name */
  serviceLink?: string
  /** Callback when service name is clicked */
  serviceClick?: (event: MouseEvent) => void
  /** Use compact header height */
  compact?: boolean
  /** User object with name, shortname, and lastLoggedIn */
  user?: User
  /** User menu items displayed in the dropdown */
  userMenu?: UserMenuItem[]
  /** Representing object with name, shortname, and orgNumber */
  representing?: Representing
  /** Whether the user can change representation. Shows "Endre organisasjon" button */
  canChangeRepresentation?: boolean
  /** Callback when user clicks "Endre organisasjon" */
  changeRepresentation?: () => void
  /** @deprecated Use userMenu instead. Will show console.warn if used. */
  userMenuFooter?: UserMenuFooterItem[]
  /** @deprecated userOptions is no longer available. Use userMenu instead. */
  userOptions?: UserMenuItem[]
  /** Where to show the logout button: 'userMenu', 'header', 'both', or 'none' */
  logOutButtonPlacement?: TLogOutButtonPlacement
  /** Callback when user clicks logout */
  logOut?: () => void
  /** Show search input in the header */
  showSearch?: boolean
  /** Callback when user submits search (presses Enter) */
  onSearch?: (query: string) => void
  /** Callback when search input value changes */
  onSearchChange?: (query: string) => void
  /** Controlled value for the search input */
  searchValue?: string
  /** Placeholder text for the search input. Default: "Søk" */
  searchPlaceholder?: string
  /** Custom breakpoint for responsive behavior (grid layout) in pixels. Default: 1024 */
  mobileBreakpoint?: number
  /** Custom breakpoint for tablet responsive behavior (interaction pattern) in pixels. Default: 1280 */
  tabletBreakpoint?: number
  /** Which menu is initially open */
  openedMenu?: THeaderMenu
  /** Header position. 'fixed' fixes to top of viewport, 'relative' follows document flow. Default: 'fixed' */
  position?: THeaderPosition
  /** Scroll behavior. 'hide' hides header on scroll down, 'none' keeps it visible. Default: 'hide' */
  scrollBehavior?: THeaderScrollBehavior
  /** Variant for the slot menu button in tablet/mobile mode. Default: 'icon-only' */
  slotMenuVariant?: TSlotMenuVariant
  /** Text for the slot menu button in tablet/mobile mode. Default: 'Meny' */
  slotMenuText?: string
  /** Which header variant to render. Default: 'service' */
  type?: THeaderType
}

/**
 * Props for the global (kommune-wide) Header component.
 *
 * Extends the framework-agnostic {@link ISharedPktHeaderGlobal} base
 * (in shared-types) with React-specific callbacks and DOM props.
 */
export interface IPktHeaderGlobal extends ISharedPktHeaderGlobal {
  /** Additional CSS class name(s) to apply to the header */
  className?: string
  /** Set dark mode on the header */
  'data-mode'?: 'dark'
  /** Callback when the logo is clicked */
  logoClick?: (event: MouseEvent) => void
  /** Callback when the user submits search. When set, navigation is left to the consumer */
  onSearch?: (query: string) => void
  /** Callback when the user clicks "Endre organisasjon" */
  changeRepresentation?: () => void
  /** Callback when the user clicks logout */
  logOut?: () => void
  /** Fired when the payload has been fetched (or `data` was supplied) */
  onDataLoaded?: (data: THeaderFooterApi) => void
  /** Fired when the fetch fails */
  onDataError?: (error: Error) => void
}