@oslokommune/punkt-react 16.24.1 → 16.25.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "16.24.1",
+  "version": "16.25.1",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -100,5 +100,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "f740327458813844b44a94fbb7a50b4036842883"
+  "gitHead": "5fe880d7964ac407f7271a8d80c178f72ca028a1"
 }

package/src/components/header/HeaderService.test.tsx

@@ -512,4 +512,86 @@ describe('PktHeaderService', () => {
       expect(logoutButtons.length).toBe(0)
     })
   })
+
+  // Closing the slot menu on intentional clicks inside the dropdown (mobile/tablet)
+  describe('slot menu closes on intentional click', () => {
+    const openSlotMenu = () => {
+      fireEvent.click(screen.getByRole('button', { name: 'Åpne meny' }))
+      expect(screen.getByRole('button', { name: 'Åpne meny' })).toHaveAttribute('aria-expanded', 'true')
+    }
+
+    beforeEach(() => {
+      mockedWidth = 500
+    })
+
+    it('closes when clicking a link inside the menu', () => {
+      render(
+        <PktHeaderService serviceName="Svc">
+          <a href="#">Gå hit</a>
+        </PktHeaderService>,
+      )
+      openSlotMenu()
+      fireEvent.click(screen.getByText('Gå hit'))
+      expect(screen.getByRole('button', { name: 'Åpne meny' })).toHaveAttribute('aria-expanded', 'false')
+    })
+
+    it('closes when clicking a button inside the menu', () => {
+      render(
+        <PktHeaderService serviceName="Svc">
+          <button type="button">Gjør noe</button>
+        </PktHeaderService>,
+      )
+      openSlotMenu()
+      fireEvent.click(screen.getByText('Gjør noe'))
+      expect(screen.getByRole('button', { name: 'Åpne meny' })).toHaveAttribute('aria-expanded', 'false')
+    })
+
+    it('stays open when clicking a form input inside the menu', () => {
+      render(
+        <PktHeaderService serviceName="Svc">
+          <input type="text" aria-label="Filtrer" />
+        </PktHeaderService>,
+      )
+      openSlotMenu()
+      fireEvent.click(screen.getByLabelText('Filtrer'))
+      expect(screen.getByRole('button', { name: 'Åpne meny' })).toHaveAttribute('aria-expanded', 'true')
+    })
+
+    it('stays open when clicking non-interactive content inside the menu', () => {
+      render(
+        <PktHeaderService serviceName="Svc">
+          <span>Bare tekst</span>
+        </PktHeaderService>,
+      )
+      openSlotMenu()
+      fireEvent.click(screen.getByText('Bare tekst'))
+      expect(screen.getByRole('button', { name: 'Åpne meny' })).toHaveAttribute('aria-expanded', 'true')
+    })
+
+    it('stays open when clicking an element marked data-pkt-header-keep-open', () => {
+      render(
+        <PktHeaderService serviceName="Svc">
+          <button type="button" data-pkt-header-keep-open>
+            Vis mer
+          </button>
+        </PktHeaderService>,
+      )
+      openSlotMenu()
+      fireEvent.click(screen.getByText('Vis mer'))
+      expect(screen.getByRole('button', { name: 'Åpne meny' })).toHaveAttribute('aria-expanded', 'true')
+    })
+
+    it('stays open when clicking a disabled button inside the menu', () => {
+      render(
+        <PktHeaderService serviceName="Svc">
+          <button type="button" disabled>
+            Utilgjengelig
+          </button>
+        </PktHeaderService>,
+      )
+      openSlotMenu()
+      fireEvent.click(screen.getByText('Utilgjengelig'))
+      expect(screen.getByRole('button', { name: 'Åpne meny' })).toHaveAttribute('aria-expanded', 'true')
+    })
+  })
 })

package/src/components/header/HeaderService.tsx

@@ -7,6 +7,7 @@ import {
   ForwardedRef,
   forwardRef,
   type KeyboardEvent,
+  type MouseEvent as ReactMouseEvent,
   type MutableRefObject,
   type RefObject,
   useCallback,
@@ -28,6 +29,18 @@ import { IPktHeader, Representing, THeaderMenu, User, UserMenuFooterItem, UserMe
 export type { Representing, THeaderMenu, User, UserMenuFooterItem, UserMenuItem }
 export type IPktHeaderService = IPktHeader
 
+declare global {
+  interface Window {
+    pktLogoPath?: string
+  }
+}
+
+const defaultLogoPath = 'https://punkt-cdn.oslo.kommune.no/latest/logos/'
+
+if (typeof window !== 'undefined') {
+  window.pktLogoPath = window.pktLogoPath || defaultLogoPath
+}
+
 export const PktHeaderService = forwardRef(
   (
     {
@@ -58,6 +71,7 @@ export const PktHeaderService = forwardRef(
       hideLogo = false,
       logoLink,
       logoClick,
+      logoPath = typeof window !== 'undefined' ? window.pktLogoPath : defaultLogoPath,
       position = 'fixed',
       scrollBehavior = 'hide',
       slotMenuVariant = 'icon-only',
@@ -273,6 +287,23 @@ export const PktHeaderService = forwardRef(
       [isTablet, isMobile],
     )
 
+    // Close the slot menu when the user makes an intentional click inside it.
+    const handleSlotContentClick = useCallback(
+      (event: ReactMouseEvent<HTMLDivElement>) => {
+        if (!isTablet || openMenu !== 'slot') return
+
+        const interactive = (event.target as HTMLElement).closest<HTMLElement>(
+          'a[href], button, [role="link"], [role="button"], [role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]',
+        )
+        if (!interactive || !slotContentRef.current?.contains(interactive)) return
+        if (interactive.closest('[data-pkt-header-keep-open]')) return
+        if ((interactive as HTMLButtonElement).disabled || interactive.getAttribute('aria-disabled') === 'true') return
+
+        setOpenMenu('none')
+      },
+      [isTablet, openMenu],
+    )
+
     const handleMenuToggle = useCallback(
       (mode: THeaderMenu) => {
         if (openMenu !== 'none') {
@@ -319,11 +350,7 @@ export const PktHeaderService = forwardRef(
             <span className="pkt-header-service__logo">
               {logoLink ? (
                 <a href={logoLink} aria-label="Tilbake til forside">
-                  <PktIcon
-                    name="oslologo"
-                    aria-hidden="true"
-                    path="https://punkt-cdn.oslo.kommune.no/latest/logos/"
-                  ></PktIcon>
+                  <PktIcon name="oslologo" aria-hidden="true" path={logoPath}></PktIcon>
                 </a>
               ) : logoClick ? (
                 <button
@@ -331,18 +358,10 @@ export const PktHeaderService = forwardRef(
                   className="pkt-link-button pkt-link pkt-header-service__logo-link"
                   onClick={logoClick}
                 >
-                  <PktIcon
-                    name="oslologo"
-                    aria-hidden="true"
-                    path="https://punkt-cdn.oslo.kommune.no/latest/logos/"
-                  ></PktIcon>
+                  <PktIcon name="oslologo" aria-hidden="true" path={logoPath}></PktIcon>
                 </button>
               ) : (
-                <PktIcon
-                  name="oslologo"
-                  aria-hidden="true"
-                  path="https://punkt-cdn.oslo.kommune.no/latest/logos/"
-                ></PktIcon>
+                <PktIcon name="oslologo" aria-hidden="true" path={logoPath}></PktIcon>
               )}
             </span>
           )}
@@ -393,6 +412,7 @@ export const PktHeaderService = forwardRef(
                 role={isTablet ? 'menu' : undefined}
                 aria-label={isTablet ? 'Meny' : undefined}
                 ref={slotContentRef}
+                onClick={handleSlotContentClick}
               >
                 <div className="pkt-contents">{children}</div>
               </div>

package/src/components/header/types.ts

@@ -54,6 +54,8 @@ export interface IPktHeader {
   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 */

package/src/components/link/Link.test.tsx

@@ -109,4 +109,26 @@ describe('PktLink', () => {
     const link = screen.getByTestId('custom-link')
     expect(link).toHaveAttribute('aria-label', 'Custom label')
   })
+
+  it('should use renderLink to render a custom link element', () => {
+    render(
+      <PktLink
+        href="/test"
+        iconName="arrow"
+        renderLink={({ href, className, children, props }) => (
+          <a href={href} className={className} data-custom="true" {...props}>
+            {children}
+          </a>
+        )}
+      >
+        Test Link
+      </PktLink>,
+    )
+    const link = screen.getByText('Test Link').closest('a')
+    expect(link).toHaveAttribute('href', '/test')
+    expect(link).toHaveAttribute('data-custom', 'true')
+    expect(link).toHaveClass('pkt-link')
+    expect(link).toHaveClass('pkt-link--icon-left')
+    expect(document.querySelector('.pkt-link__icon')).toBeInTheDocument()
+  })
 })

package/src/components/link/Link.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import classNames from 'classnames'
-import { FC, LinkHTMLAttributes } from 'react'
+import { AnchorHTMLAttributes, FC, LinkHTMLAttributes, ReactNode } from 'react'
 
 import { PktIcon } from '../icon/Icon'
 
@@ -12,6 +12,12 @@ interface IPktLink extends LinkHTMLAttributes<HTMLAnchorElement> {
   iconPosition?: string | undefined
   external?: boolean
   target?: string | undefined
+  renderLink?: (args: {
+    href: string
+    className: string
+    children: ReactNode
+    props: AnchorHTMLAttributes<HTMLAnchorElement>
+  }) => ReactNode
 }
 
 export const PktLink: FC<IPktLink> = ({
@@ -21,6 +27,7 @@ export const PktLink: FC<IPktLink> = ({
   iconPosition,
   external,
   target,
+  renderLink,
   children,
   ...props
 }: IPktLink) => {
@@ -31,18 +38,31 @@ export const PktLink: FC<IPktLink> = ({
     'pkt-link--external': external,
   }
 
-  return (
-    <a
-      {...props}
-      className={classNames(classes, className)}
-      href={href}
-      target={target}
-      rel={external ? 'noopener noreferrer' : undefined}
-    >
+  const linkChildren = (
+    <>
       {iconName && <PktIcon name={iconName} className="pkt-link__icon" />}
       {children}
-    </a>
+    </>
   )
+
+  const linkRenderer =
+    renderLink ||
+    (({ href, className, children, props }) => (
+      <a href={href} className={className} {...props}>
+        {children}
+      </a>
+    ))
+
+  return linkRenderer({
+    href: href ?? '',
+    className: classNames(classes, className),
+    children: linkChildren,
+    props: {
+      ...props,
+      target,
+      rel: external ? 'noopener noreferrer' : undefined,
+    },
+  })
 }
 
 PktLink.displayName = 'PktLink'