@oslokommune/punkt-react 16.26.3 → 17.0.0

package/src/components/header/HeaderService.tsx

@@ -8,7 +8,6 @@ import {
   forwardRef,
   type KeyboardEvent,
   type MouseEvent as ReactMouseEvent,
-  type MutableRefObject,
   type RefObject,
   useCallback,
   useEffect,
@@ -17,13 +16,15 @@ import {
   useState,
 } from 'react'
 
-import { useElementWidth } from '../../hooks/useElementWidth'
+import { useHeaderChrome } from '../../hooks/useHeaderChrome'
 import { useScrollLock } from '../../hooks/useScrollLock'
 import { PktButton } from '../button/Button'
 import { PktHeaderUserMenu } from '../headerUserMenu/UserMenu'
 import { PktIcon } from '../icon/Icon'
 import { PktLink } from '../link/Link'
 import { PktTextinput } from '../textinput/Textinput'
+import { DEFAULT_HEADER_LOGO_LINK } from 'shared-types'
+
 import { IPktHeader, Representing, THeaderMenu, User, UserMenuFooterItem, UserMenuItem } from './types'
 
 export type { Representing, THeaderMenu, User, UserMenuFooterItem, UserMenuItem }
@@ -69,7 +70,7 @@ export const PktHeaderService = forwardRef(
       canChangeRepresentation = false,
       changeRepresentation,
       hideLogo = false,
-      logoLink,
+      logoLink = DEFAULT_HEADER_LOGO_LINK,
       logoClick,
       logoPath = typeof window !== 'undefined' ? window.pktLogoPath : defaultLogoPath,
       position = 'fixed',
@@ -79,7 +80,6 @@ export const PktHeaderService = forwardRef(
     }: IPktHeaderService,
     ref: ForwardedRef<HTMLDivElement>,
   ) => {
-    const isFixed = position === 'fixed'
     const shouldHideOnScroll = scrollBehavior === 'hide'
 
     // Deprecation warning for userMenuFooter
@@ -136,37 +136,26 @@ export const PktHeaderService = forwardRef(
       }
     }, [openedMenu])
 
-    const [hidden, setHidden] = useState(false)
-    const [lastScrollPosition, setLastScrollPosition] = useState(0)
     const [alignSlotRight, setAlignSlotRight] = useState(false)
     const [alignSearchRight, setAlignSearchRight] = useState(false)
 
-    const internalRef = useRef<HTMLDivElement>(null)
     const userContainerRef = useRef<HTMLDivElement>(null)
     const slotContainerRef = useRef<HTMLDivElement>(null)
     const searchContainerRef = useRef<HTMLDivElement>(null)
     const slotContentRef = useRef<HTMLDivElement>(null)
     const searchMenuRef = useRef<HTMLDivElement>(null)
-    const lastFocusedElementRef = useRef<HTMLElement | null>(null)
-    const shouldRestoreFocusRef = useRef(false)
-
-    const headerWidth = useElementWidth(internalRef)
-    const isMobile: boolean = headerWidth < mobileBreakpoint
-    const isTablet: boolean = headerWidth < tabletBreakpoint
-
-    const setRefs = useCallback(
-      (element: HTMLDivElement | null) => {
-        ;(internalRef as MutableRefObject<HTMLDivElement | null>).current = element
-        if (typeof ref === 'function') {
-          ref(element)
-        } else if (ref) {
-          ;(ref as MutableRefObject<HTMLDivElement | null>).current = element
-        }
-      },
-      [ref],
-    )
 
-    useScrollLock(isFixed && isMobile && openMenu !== 'none')
+    // Shared shell logic (ref merge, breakpoints, scroll-to-hide, focus return).
+    const { setRef, isMobile, isTablet, isFixed, isSticky, hidden, captureFocus, flagRestoreFocus, restoreFocus } =
+      useHeaderChrome<HTMLDivElement>({
+        forwardedRef: ref,
+        mobileBreakpoint,
+        tabletBreakpoint,
+        position,
+        scrollBehavior,
+      })
+
+    useScrollLock((isFixed || isSticky) && isMobile && openMenu !== 'none')
 
     const handleFocusOut = useCallback((event: FocusEvent<HTMLDivElement>, menuType: THeaderMenu) => {
       const relatedTarget = event.relatedTarget as HTMLElement | null
@@ -194,18 +183,6 @@ export const PktHeaderService = forwardRef(
       }
     }, [])
 
-    const restoreFocus = useCallback(() => {
-      if (
-        shouldRestoreFocusRef.current &&
-        lastFocusedElementRef.current &&
-        document.contains(lastFocusedElementRef.current)
-      ) {
-        lastFocusedElementRef.current.focus()
-      }
-      lastFocusedElementRef.current = null
-      shouldRestoreFocusRef.current = false
-    }, [])
-
     useEffect(() => {
       const handleClickOutside = (event: MouseEvent) => {
         if (user && openMenu === 'user' && !(event.target as Element).closest('.pkt-header-service__user-container')) {
@@ -226,7 +203,7 @@ export const PktHeaderService = forwardRef(
       const handleEscapeKey = (event: globalThis.KeyboardEvent) => {
         if (event.key === 'Escape' && openMenu !== 'none') {
           event.preventDefault()
-          shouldRestoreFocusRef.current = true
+          flagRestoreFocus()
           setOpenMenu('none')
         }
       }
@@ -241,32 +218,7 @@ export const PktHeaderService = forwardRef(
       } else {
         restoreFocus()
       }
-    }, [openMenu, user, restoreFocus])
-
-    useEffect(() => {
-      const onScroll = () => {
-        if (shouldHideOnScroll) {
-          const currentScrollPosition = window.pageYOffset || document.documentElement.scrollTop
-          if (currentScrollPosition < 0) {
-            return
-          }
-          if (Math.abs(currentScrollPosition - lastScrollPosition) < 60) {
-            return
-          }
-          setHidden(currentScrollPosition > lastScrollPosition)
-          setLastScrollPosition(currentScrollPosition)
-        }
-      }
-
-      if (document) {
-        window.addEventListener('scroll', onScroll)
-      }
-      return () => {
-        if (document) {
-          window.removeEventListener('scroll', onScroll)
-        }
-      }
-    }, [shouldHideOnScroll, lastScrollPosition])
+    }, [openMenu, user, restoreFocus, flagRestoreFocus])
 
     const checkDropdownAlignment = useCallback(
       (mode: 'slot' | 'search') => {
@@ -309,12 +261,11 @@ export const PktHeaderService = forwardRef(
         if (openMenu !== 'none') {
           setOpenMenu('none')
         } else {
-          lastFocusedElementRef.current = document.activeElement as HTMLElement
-
+          captureFocus()
           setOpenMenu(mode)
         }
       },
-      [openMenu],
+      [openMenu, captureFocus],
     )
 
     useEffect(() => {
@@ -333,12 +284,13 @@ export const PktHeaderService = forwardRef(
           isMobile && 'pkt-header-service--mobile',
           isTablet && 'pkt-header-service--tablet',
           isFixed && 'pkt-header-service--fixed',
+          isSticky && 'pkt-header-service--sticky',
           shouldHideOnScroll && 'pkt-header-service--scroll-to-hide',
           hidden && 'pkt-header-service--hidden',
           className,
         )}
         data-mode={dataMode}
-        ref={setRefs}
+        ref={setRef}
       >
         <div
           className={classNames(
@@ -348,21 +300,9 @@ export const PktHeaderService = forwardRef(
         >
           {!hideLogo && (
             <span className="pkt-header-service__logo">
-              {logoLink ? (
-                <a href={logoLink} aria-label="Tilbake til forside">
-                  <PktIcon name="oslologo" aria-hidden="true" path={logoPath}></PktIcon>
-                </a>
-              ) : logoClick ? (
-                <button
-                  aria-label="Tilbake til forside"
-                  className="pkt-link-button pkt-link pkt-header-service__logo-link"
-                  onClick={logoClick}
-                >
-                  <PktIcon name="oslologo" aria-hidden="true" path={logoPath}></PktIcon>
-                </button>
-              ) : (
+              <a href={logoLink} aria-label="Tilbake til forside" onClick={logoClick}>
                 <PktIcon name="oslologo" aria-hidden="true" path={logoPath}></PktIcon>
-              )}
+              </a>
             </span>
           )}
           {serviceName && (
@@ -409,7 +349,7 @@ export const PktHeaderService = forwardRef(
               <div
                 className={classNames('pkt-header-service__slot-content', alignSlotRight && 'align-right')}
                 id="mobile-slot-menu"
-                role={isTablet ? 'menu' : undefined}
+                role={isTablet ? 'group' : undefined}
                 aria-label={isTablet ? 'Meny' : undefined}
                 ref={slotContentRef}
                 onClick={handleSlotContentClick}

package/src/components/header/types.ts

@@ -5,6 +5,9 @@ import type {
   THeaderScrollBehavior,
   TLogOutButtonPlacement,
   TSlotMenuVariant,
+  THeaderFooterApi,
+  THeaderMenuLocale,
+  IPktHeaderGlobal as ISharedPktHeaderGlobal,
 } from 'shared-types'
 
 export type {
@@ -13,8 +16,13 @@ export type {
   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
@@ -108,4 +116,31 @@ export interface IPktHeader {
   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
 }

package/src/components/header-menu/HeaderMenu.test.tsx

@@ -64,10 +64,9 @@ afterEach(() => {
 
 describe('PktHeaderMenu rendering', () => {
   test('renders services, sections and footer when given pre-fetched data', () => {
-    const { container } = render(<PktHeaderMenu data={LOCAL_DATA} open />)
-    expect(container.querySelector('.pkt-header-menu__services-title')?.textContent).toContain(
-      'Tjenester og tilbud',
-    )
+    // jsdom reports width 0 (mobile/accordion layout); force desktop.
+    const { container } = render(<PktHeaderMenu data={LOCAL_DATA} mobileBreakpoint={0} open />)
+    expect(container.querySelector('.pkt-header-menu__services-title')?.textContent).toContain('Tjenester og tilbud')
     expect(container.querySelectorAll('.pkt-header-menu__service')).toHaveLength(3)
     expect(container.querySelectorAll('.pkt-header-menu__section')).toHaveLength(2)
     expect(container.querySelectorAll('.pkt-header-menu__footer-link')).toHaveLength(2)
@@ -81,7 +80,7 @@ describe('PktHeaderMenu rendering', () => {
 
   test('maps ODS icon names on service links', async () => {
     const { container } = render(<PktHeaderMenu data={LOCAL_DATA} open />)
-const icons = container.querySelectorAll<HTMLElement>('.pkt-header-menu__service-icon')
+    const icons = container.querySelectorAll<HTMLElement>('.pkt-header-menu__service-icon')
     await waitFor(() => expect(icons[0]).toHaveAttribute('name', '24h'))
     expect(icons[1]).toHaveAttribute('name', 'shield-fire')
     // Unmapped passes through
@@ -99,36 +98,26 @@ const icons = container.querySelectorAll<HTMLElement>('.pkt-header-menu__service
 
   test('uses the locale-specific nav aria-label', () => {
     const { container } = render(<PktHeaderMenu data={LOCAL_DATA} locale="nb-NO" open />)
-    expect(container.querySelector('nav')?.getAttribute('aria-label')).toBe(
-      'Oslo kommune hovedmeny',
-    )
+    expect(container.querySelector('nav')?.getAttribute('aria-label')).toBe('Oslo kommune hovedmeny')
   })
 
   test('switches content when locale changes', () => {
-    const { container, rerender } = render(
-      <PktHeaderMenu data={LOCAL_DATA} locale="nb-NO" open />,
-    )
-    expect(container.querySelector('.pkt-header-menu__services-title')?.textContent).toContain(
-      'Tjenester og tilbud',
-    )
-    rerender(<PktHeaderMenu data={LOCAL_DATA} locale="en-GB" open />)
+    const { container, rerender } = render(<PktHeaderMenu data={LOCAL_DATA} locale="nb-NO" mobileBreakpoint={0} open />)
+    expect(container.querySelector('.pkt-header-menu__services-title')?.textContent).toContain('Tjenester og tilbud')
+    rerender(<PktHeaderMenu data={LOCAL_DATA} locale="en-GB" mobileBreakpoint={0} open />)
     expect(container.querySelector('.pkt-header-menu__services-title')?.textContent).toContain(
       'Services and information',
     )
-    expect(container.querySelector('nav')?.getAttribute('aria-label')).toBe(
-      'Oslo kommune main menu',
-    )
+    expect(container.querySelector('nav')?.getAttribute('aria-label')).toBe('Oslo kommune main menu')
   })
 
   test('renders social links with derived aria-labels and icons', async () => {
     const { container } = render(<PktHeaderMenu data={LOCAL_DATA} open />)
-const social = container.querySelectorAll<HTMLElement>('.pkt-header-menu__social-link')
+    const social = container.querySelectorAll<HTMLElement>('.pkt-header-menu__social-link')
     expect(social).toHaveLength(2)
     expect(social[0]).toHaveAttribute('aria-label', 'Facebook')
     expect(social[1]).toHaveAttribute('aria-label', 'LinkedIn')
-    await waitFor(() =>
-      expect(social[0].querySelector('.pkt-icon')).toHaveAttribute('name', 'facebook'),
-    )
+    await waitFor(() => expect(social[0].querySelector('.pkt-icon')).toHaveAttribute('name', 'facebook'))
     expect(social[1].querySelector('.pkt-icon')).toHaveAttribute('name', 'linkedin')
   })
 
@@ -152,34 +141,22 @@ describe('PktHeaderMenu fetching', () => {
   })
 
   test('fetches the default URL on mount when no data is supplied', async () => {
-    const { container } = render(<PktHeaderMenu open />)
+    const { container } = render(<PktHeaderMenu mobileBreakpoint={0} open />)
     await waitFor(() => expect(globalThis.fetch).toHaveBeenCalled())
-    expect(globalThis.fetch).toHaveBeenCalledWith(
-      'https://cdn.web.oslo.kommune.no/header-footer/header-footer.json',
-      expect.any(Object),
-    )
+    expect(globalThis.fetch).toHaveBeenCalledWith('https://cdn.web.oslo.kommune.no/header-footer/header-footer.json')
     await waitFor(() =>
-      expect(container.querySelector('.pkt-header-menu__services-title')?.textContent).toContain(
-        'Tjenester og tilbud',
-      ),
+      expect(container.querySelector('.pkt-header-menu__services-title')?.textContent).toContain('Tjenester og tilbud'),
     )
   })
 
   test('honors a custom data-url', async () => {
     render(<PktHeaderMenu dataUrl="https://custom.test/payload.json" open />)
-    await waitFor(() =>
-      expect(globalThis.fetch).toHaveBeenCalledWith(
-        'https://custom.test/payload.json',
-        expect.any(Object),
-      ),
-    )
+    await waitFor(() => expect(globalThis.fetch).toHaveBeenCalledWith('https://custom.test/payload.json'))
   })
 
   test('calls onDataError when the fetch fails', async () => {
     vi.restoreAllMocks()
-    vi.spyOn(globalThis, 'fetch').mockResolvedValue(
-      new Response('boom', { status: 500 }) as unknown as Response,
-    )
+    vi.spyOn(globalThis, 'fetch').mockResolvedValue(new Response('boom', { status: 500 }) as unknown as Response)
     const onDataError = vi.fn()
     const { container } = render(<PktHeaderMenu open onDataError={onDataError} />)
     await waitFor(() => expect(onDataError).toHaveBeenCalledTimes(1))

package/src/components/header-menu/HeaderMenu.tsx

@@ -1,6 +1,15 @@
 'use client'
 
-import { type HTMLAttributes, type Ref, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  type HTMLAttributes,
+  type MutableRefObject,
+  type Ref,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import {
   DEFAULT_HEADER_FOOTER_URL,
   type IHeaderMenuButton,
@@ -11,8 +20,9 @@ import {
   type THeaderFooterApi,
   type THeaderMenuLocale,
 } from 'shared-types'
-import { deriveSocialIcon, fetchHeaderFooterData, mapOdsIcon, selectLocaleData } from 'shared-utils/header-menu'
+import { deriveSocialIcon, fetchHeaderFooterData, mapOdsIcon, selectLocaleData } from 'shared-utils/header-footer'
 
+import { useElementWidth } from '../../hooks/useElementWidth'
 import { PktAccordion } from '../accordion/Accordion'
 import { PktAccordionItem } from '../accordion/AccordionItem'
 import { PktIcon } from '../icon/Icon'
@@ -33,8 +43,6 @@ export interface IPktHeaderMenu extends Omit<HTMLAttributes<HTMLElement>, 'onErr
   onDataLoaded?: (data: THeaderFooterApi) => void
   /** Fired when the fetch fails. */
   onDataError?: (error: Error) => void
-  /** Optional id of the toggle button that controls this menu. */
-  ariaLabelledBy?: string
 }
 
 type LoadState = 'idle' | 'loading' | 'ready' | 'error'
@@ -45,7 +53,7 @@ type LoadState = 'idle' | 'loading' | 'ready' | 'error'
  * Fetches the live header/footer payload on mount and renders the
  * `megamenu` slice for the current locale. Mirrors `pkt-header-menu`
  * (Punkt Elements) — both implementations share types and data
- * helpers from `shared-utils/header-menu`.
+ * helpers from `shared-utils/header-footer`.
  *
  * This component is purely presentational with respect to focus/scroll-lock;
  * the parent header is expected to control `open` and own focus
@@ -57,18 +65,16 @@ export const PktHeaderMenu = ({
   locale = 'nb-NO',
   open = false,
   mobileBreakpoint = 768,
-  ariaLabelledBy,
   className,
   onDataLoaded,
   onDataError,
   ref,
   ...rest
 }: IPktHeaderMenu) => {
-  const [loadState, setLoadState] = useState<LoadState>(data ? 'ready' : 'idle')
+  const [fetchState, setFetchState] = useState<LoadState>('loading')
   const [fetchedData, setFetchedData] = useState<THeaderFooterApi | undefined>(undefined)
-  const [isMobile, setIsMobile] = useState(false)
+  const loadState: LoadState = data ? 'ready' : fetchState
 
-  // Stable refs for the latest callbacks so effect deps stay narrow.
   const onDataLoadedRef = useRef(onDataLoaded)
   const onDataErrorRef = useRef(onDataError)
   useEffect(() => {
@@ -78,41 +84,37 @@ export const PktHeaderMenu = ({
     onDataErrorRef.current = onDataError
   }, [onDataError])
 
-  // Track viewport width via matchMedia.
-  useEffect(() => {
-    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return
-    const query = window.matchMedia(`(max-width: ${mobileBreakpoint - 1}px)`)
-    setIsMobile(query.matches)
-    const handler = (event: MediaQueryListEvent) => setIsMobile(event.matches)
-    query.addEventListener('change', handler)
-    return () => query.removeEventListener('change', handler)
-  }, [mobileBreakpoint])
+  const rootRef = useRef<HTMLElement | null>(null)
+  const setRootRef = useCallback(
+    (element: HTMLElement | null) => {
+      rootRef.current = element
+      if (typeof ref === 'function') ref(element)
+      else if (ref) (ref as MutableRefObject<HTMLElement | null>).current = element
+    },
+    [ref],
+  )
+  const menuWidth = useElementWidth(rootRef)
+  const isMobile = menuWidth < mobileBreakpoint
 
-  // When the supplied pre-fetched data, fire the loaded callback
-  // and short-circuit the network call.
   useEffect(() => {
-    if (data) {
-      setLoadState('ready')
-      onDataLoadedRef.current?.(data)
-    }
+    if (data) onDataLoadedRef.current?.(data)
   }, [data])
 
-  // Fetch when no `data` prop is supplied.
+  // Fetch when no `data` prop is supplied
   useEffect(() => {
     if (data) return
     const controller = new AbortController()
-    setLoadState('loading')
 
     fetchHeaderFooterData<string>(dataUrl, controller.signal)
       .then((payload) => {
         if (controller.signal.aborted) return
         setFetchedData(payload)
-        setLoadState('ready')
+        setFetchState('ready')
         onDataLoadedRef.current?.(payload)
       })
       .catch((error: Error) => {
         if (error.name === 'AbortError') return
-        setLoadState('error')
+        setFetchState('error')
         onDataErrorRef.current?.(error)
       })
 
@@ -126,21 +128,17 @@ export const PktHeaderMenu = ({
 
   if (loadState === 'loading') {
     return (
-      <section {...rest} ref={ref} className={hostClasses}>
-        <nav aria-busy="true">
-          <p className="pkt-header-menu__loading">Laster meny…</p>
-        </nav>
-      </section>
+      <nav {...rest} ref={setRootRef} className={hostClasses} aria-busy="true">
+        <p className="pkt-header-menu__loading">Laster meny…</p>
+      </nav>
     )
   }
 
   if (loadState === 'error' || !localeData) {
     return (
-      <section {...rest} ref={ref} className={hostClasses}>
-        <nav aria-hidden={!open}>
-          <p className="pkt-header-menu__error">Kunne ikke laste meny.</p>
-        </nav>
-      </section>
+      <nav {...rest} ref={setRootRef} className={hostClasses} aria-hidden={!open}>
+        <p className="pkt-header-menu__error">Kunne ikke laste meny.</p>
+      </nav>
     )
   }
 
@@ -148,28 +146,26 @@ export const PktHeaderMenu = ({
   const navAriaLabel = i18n?.navAriaLabel || 'Hovedmeny'
 
   return (
-    <section {...rest} ref={ref} className={hostClasses} aria-labelledby={ariaLabelledBy || undefined}>
-      <nav aria-label={navAriaLabel}>
-        {isMobile ? (
-          <MobileAccordion services={megamenu.services} sections={megamenu.sections} />
-        ) : (
-          <>
-            <Services services={megamenu.services} />
-            <Buttons buttons={megamenu.buttons} mobile={false} />
-            <Sections sections={megamenu.sections} />
-          </>
-        )}
-        <Buttons buttons={megamenu.buttons} mobile={true} />
-        <Footer links={megamenu.links} some={megamenu.some} />
-      </nav>
-    </section>
+    <nav {...rest} ref={setRootRef} className={hostClasses} aria-label={navAriaLabel}>
+      {isMobile ? (
+        <MobileAccordion services={megamenu.services} sections={megamenu.sections} />
+      ) : (
+        <>
+          <Services services={megamenu.services} />
+          <Buttons buttons={megamenu.buttons} mobile={false} />
+          <Sections sections={megamenu.sections} />
+        </>
+      )}
+      <Buttons buttons={megamenu.buttons} mobile={true} />
+      <Footer links={megamenu.links} some={megamenu.some} />
+    </nav>
   )
 }
 
 const ServicesList = ({ services }: { services: IHeaderMenuServices }) => (
   <ul className="pkt-header-menu__services-list">
-    {services.links.map((link, index) => (
-      <li className="pkt-header-menu__service" key={`service-${index}`}>
+    {services.links.map((link) => (
+      <li className="pkt-header-menu__service" key={link.url}>
         <a className="pkt-header-menu__service-link" href={link.url}>
           <PktIcon className="pkt-header-menu__service-icon" name={mapOdsIcon(link.icon)} aria-hidden="true" />
           <span className="pkt-header-menu__service-text">{link.text}</span>
@@ -192,7 +188,7 @@ const MobileAccordion = ({ services, sections }: { services: IHeaderMenuServices
       </PktAccordionItem>
       {sections.map((section, index) => (
         <PktAccordionItem
-          key={`section-${index}`}
+          key={section.title}
           className="pkt-header-menu__section"
           skin="plus-minus"
           id={`pkt-header-menu-section-${index}`}
@@ -217,12 +213,8 @@ const Buttons = ({ buttons, mobile }: { buttons: IHeaderMenuButton[] | undefined
   const classes = ['pkt-header-menu__buttons', mobile && 'pkt-header-menu__buttons--mobile'].filter(Boolean).join(' ')
   return (
     <div className={classes}>
-      {buttons.map((button, index) => (
-        <a
-          key={`button-${index}`}
-          className="pkt-btn pkt-btn--secondary pkt-btn--icon-right pkt-btn--small"
-          href={button.url}
-        >
+      {buttons.map((button) => (
+        <a key={button.url} className="pkt-btn pkt-btn--secondary pkt-btn--icon-right pkt-btn--small" href={button.url}>
           <PktIcon
             className="pkt-btn__icon"
             name={button.iconName ? mapOdsIcon(button.iconName) : 'user'}
@@ -241,8 +233,8 @@ const Sections = ({ sections }: { sections: IHeaderMenuSection[] }) => {
   return (
     <div className="pkt-header-menu__sections">
       <div className="pkt-header-menu__sections-inner">
-        {sections.map((section, index) => (
-          <div className="pkt-header-menu__section" key={`section-${index}`}>
+        {sections.map((section) => (
+          <div className="pkt-header-menu__section" key={section.title}>
             <h2 className="pkt-header-menu__section-title">{section.title}</h2>
             <SectionList links={section.links} />
           </div>
@@ -254,8 +246,8 @@ const Sections = ({ sections }: { sections: IHeaderMenuSection[] }) => {
 
 const SectionList = ({ links }: { links: IHeaderMenuLink[] }) => (
   <ul className="pkt-header-menu__section-list">
-    {links.map((link, index) => (
-      <li key={`section-link-${index}`}>
+    {links.map((link) => (
+      <li key={link.url}>
         <a className="pkt-header-menu__section-link" href={link.url}>
           {link.text}
         </a>
@@ -273,8 +265,8 @@ const Footer = ({ links, some }: { links: IHeaderMenuLink[]; some: IHeaderMenuLi
     <div className="pkt-header-menu__footer">
       {hasLinks && (
         <ul className="pkt-header-menu__footer-list">
-          {links.map((link, index) => (
-            <li key={`footer-link-${index}`}>
+          {links.map((link) => (
+            <li key={link.url}>
               <a className="pkt-header-menu__footer-link" href={link.url}>
                 {link.text}
               </a>
@@ -284,8 +276,8 @@ const Footer = ({ links, some }: { links: IHeaderMenuLink[]; some: IHeaderMenuLi
       )}
       {hasSome && (
         <ul className="pkt-header-menu__footer-list pkt-header-menu__footer-list--social">
-          {some.map((entry, index) => (
-            <SocialLink key={`some-${index}`} entry={entry} />
+          {some.map((entry) => (
+            <SocialLink key={entry.url} entry={entry} />
           ))}
         </ul>
       )}

package/src/components/index.ts

@@ -13,8 +13,11 @@ export { PktDatepicker } from './datepicker/Datepicker'
 export { PktFileUpload } from './fileupload/FileUpload'
 export { ItemRenderers } from './fileupload/QueueDisplay'
 export { PktFooter } from './footer/Footer'
+export type { IPktFooter } from './footer/Footer'
 export { PktFooterSimple } from './footerSimple/FooterSimple'
+export type { IPktFooterSimple } from './footerSimple/FooterSimple'
 export { PktHeader } from './header/Header'
+export { PktHeaderGlobal } from './header/HeaderGlobal'
 export { PktHeaderMenu } from './header-menu/HeaderMenu'
 export { PktHeaderService } from './header/HeaderService'
 export { PktHeading } from './heading/Heading'
@@ -32,6 +35,7 @@ export { PktRadioButton } from './radio/RadioButton'
 export { PktSearchInput } from './searchinput/SearchInput'
 export type { PktSearchInputSuggestion } from './searchinput/SearchInput'
 export { PktSelect } from './select/Select'
+export type { IPktSelectOption, TSelectOption } from './select/Select'
 export { PktStep } from './stepper/Step'
 export { PktStepper } from './stepper/Stepper'
 export { PktTable } from './table/Table'