@oslokommune/punkt-react/dist/components/header/types.d.ts

React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo

import { MouseEvent, ReactNode } from 'react';
import { 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;
}