@oslokommune/punkt-react 16.24.1 → 16.25.0

package/dist/punkt-react.js

@@ -59,7 +59,7 @@ var j = /* @__PURE__ */ O((/* @__PURE__ */ E(((e, t) => {
 			return n;
 		}) : window.classNames = n;
 	})();
-})))(), 1), M = "https://punkt-cdn.oslo.kommune.no/16.24/icons/";
+})))(), 1), M = "https://punkt-cdn.oslo.kommune.no/16.25/icons/";
 typeof window < "u" && (window.pktFetch = window.pktFetch === void 0 ? fetch : window.pktFetch, window.pktIconPath = window.pktIconPath || M);
 var te = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"></svg>", ne = {}, re = 2, ie = 1500, ae = typeof Storage < "u" && typeof sessionStorage < "u", oe = typeof window < "u" ? f : l, N = (e, t) => !e || !ae ? "" : sessionStorage.getItem(t + e + ".svg") ?? "", se = (e) => window.pktFetch(e).then((t) => {
 	if (!t.ok) throw Error("Missing icon: " + e);
@@ -174,7 +174,7 @@ var I = a(({ defaultOpen: e = !1, id: t, title: n, skin: r, compact: i = !1, isO
 });
 //#endregion
 //#region src/components/button/Button.tsx
-I.displayName = "PktAccordionItem", typeof window < "u" && (window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/16.24/animations/");
+I.displayName = "PktAccordionItem", typeof window < "u" && (window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/16.25/animations/");
 var L = a(({ children: e, className: t, iconName: n = "user", secondIconName: r = "user", iconPath: i, secondIconPath: a, size: o = "medium", fullWidth: s = !1, fullWidthOnMobile: c = !1, skin: l = "primary", type: u = "button", variant: d = "label-only", state: f, color: p, isLoading: m = void 0, disabled: h = void 0, loadingAnimationPath: g = window.pktAnimationPath, ...y }, b) => {
 	let x = [
 		t,
@@ -6098,23 +6098,30 @@ function Ui(e) {
 }
 //#endregion
 //#region src/components/link/Link.tsx
-var Wi = ({ href: e, iconName: t, className: n, iconPosition: r, external: i, target: a, children: o, ...s }) => {
-	let c = {
+var Wi = ({ href: e, iconName: t, className: n, iconPosition: r, external: i, target: a, renderLink: o, children: s, ...c }) => {
+	let l = {
 		"pkt-link": !0,
 		"pkt-link--icon-left": !!t && r === "left" || !!(t && !r),
 		"pkt-link--icon-right": !!t && r === "right",
 		"pkt-link--external": i
-	};
-	return /* @__PURE__ */ v("a", {
-		...s,
-		className: (0, j.default)(c, n),
+	}, u = /* @__PURE__ */ v(g, { children: [t && /* @__PURE__ */ _(F, {
+		name: t,
+		className: "pkt-link__icon"
+	}), s] });
+	return (o || (({ href: e, className: t, children: n, props: r }) => /* @__PURE__ */ _("a", {
 		href: e,
-		target: a,
-		rel: i ? "noopener noreferrer" : void 0,
-		children: [t && /* @__PURE__ */ _(F, {
-			name: t,
-			className: "pkt-link__icon"
-		}), o]
+		className: t,
+		...r,
+		children: n
+	})))({
+		href: e ?? "",
+		className: (0, j.default)(l, n),
+		children: u,
+		props: {
+			...c,
+			target: a,
+			rel: i ? "noopener noreferrer" : void 0
+		}
 	});
 };
 Wi.displayName = "PktLink";
@@ -6403,6 +6410,10 @@ var Xi = a(({ mobileBreakpoint: e = 768, tabletBreakpoint: t = 1280, children: n
 		let r = t.current.getBoundingClientRect(), i = n.current.offsetWidth, a = r.left + i > window.innerWidth;
 		e === "slot" ? V(a) : fe(a);
 	}, [Z, X]), ye = s((e) => {
+		if (!Z || P !== "slot") return;
+		let t = e.target.closest("a[href], button, [role=\"link\"], [role=\"button\"], [role=\"menuitem\"], [role=\"menuitemradio\"], [role=\"menuitemcheckbox\"]");
+		!t || !K.current?.contains(t) || t.closest("[data-pkt-header-keep-open]") || t.disabled || t.getAttribute("aria-disabled") === "true" || I("none");
+	}, [Z, P]), be = s((e) => {
 		P === "none" ? (q.current = document.activeElement, I(e)) : I("none");
 	}, [P]);
 	l(() => {
@@ -6410,7 +6421,7 @@ var Xi = a(({ mobileBreakpoint: e = 768, tabletBreakpoint: t = 1280, children: n
 			ve(P);
 		});
 	}, [P, ve]);
-	let be = /* @__PURE__ */ v("header", {
+	let xe = /* @__PURE__ */ v("header", {
 		className: (0, j.default)("pkt-header-service", i && "pkt-header-service--compact", X && "pkt-header-service--mobile", Z && "pkt-header-service--tablet", se && "pkt-header-service--fixed", ce && "pkt-header-service--scroll-to-hide", ue && "pkt-header-service--hidden", r),
 		"data-mode": a,
 		ref: he,
@@ -6425,7 +6436,7 @@ var Xi = a(({ mobileBreakpoint: e = 768, tabletBreakpoint: t = 1280, children: n
 						children: /* @__PURE__ */ _(F, {
 							name: "oslologo",
 							"aria-hidden": "true",
-							path: "https://punkt-cdn.oslo.kommune.no/16.24/logos/"
+							path: "https://punkt-cdn.oslo.kommune.no/16.25/logos/"
 						})
 					}) : ne ? /* @__PURE__ */ _("button", {
 						"aria-label": "Tilbake til forside",
@@ -6434,12 +6445,12 @@ var Xi = a(({ mobileBreakpoint: e = 768, tabletBreakpoint: t = 1280, children: n
 						children: /* @__PURE__ */ _(F, {
 							name: "oslologo",
 							"aria-hidden": "true",
-							path: "https://punkt-cdn.oslo.kommune.no/16.24/logos/"
+							path: "https://punkt-cdn.oslo.kommune.no/16.25/logos/"
 						})
 					}) : /* @__PURE__ */ _(F, {
 						name: "oslologo",
 						"aria-hidden": "true",
-						path: "https://punkt-cdn.oslo.kommune.no/16.24/logos/"
+						path: "https://punkt-cdn.oslo.kommune.no/16.25/logos/"
 					})
 				}), T && /* @__PURE__ */ _("span", {
 					className: "pkt-header-service__service-name",
@@ -6471,7 +6482,7 @@ var Xi = a(({ mobileBreakpoint: e = 768, tabletBreakpoint: t = 1280, children: n
 							iconName: "menu",
 							size: X ? "small" : "medium",
 							state: P === "slot" ? "active" : "normal",
-							onClick: () => ye("slot"),
+							onClick: () => be("slot"),
 							"aria-expanded": P === "slot",
 							"aria-controls": "mobile-slot-menu",
 							"aria-label": "Åpne meny",
@@ -6482,6 +6493,7 @@ var Xi = a(({ mobileBreakpoint: e = 768, tabletBreakpoint: t = 1280, children: n
 							role: Z ? "menu" : void 0,
 							"aria-label": Z ? "Meny" : void 0,
 							ref: K,
+							onClick: ye,
 							children: /* @__PURE__ */ _("div", {
 								className: "pkt-contents",
 								children: n
@@ -6497,7 +6509,7 @@ var Xi = a(({ mobileBreakpoint: e = 768, tabletBreakpoint: t = 1280, children: n
 							variant: "icon-only",
 							iconName: "magnifying-glass-big",
 							size: X ? "small" : "medium",
-							onClick: () => ye("search"),
+							onClick: () => be("search"),
 							state: P === "search" ? "active" : "normal",
 							"aria-expanded": P === "search",
 							"aria-controls": "mobile-search-menu",
@@ -6559,7 +6571,7 @@ var Xi = a(({ mobileBreakpoint: e = 768, tabletBreakpoint: t = 1280, children: n
 						variant: "icons-right-and-left",
 						iconName: "user",
 						secondIconName: P === "user" ? "chevron-thin-up" : "chevron-thin-down",
-						onClick: () => ye("user"),
+						onClick: () => be("user"),
 						children: [/* @__PURE__ */ _("span", {
 							className: "pkt-sr-only",
 							children: "Brukermeny: "
@@ -6592,8 +6604,8 @@ var Xi = a(({ mobileBreakpoint: e = 768, tabletBreakpoint: t = 1280, children: n
 	});
 	return se ? /* @__PURE__ */ v("div", {
 		className: "pkt-header-service-wrapper",
-		children: [be, /* @__PURE__ */ _("div", { className: (0, j.default)("pkt-header-service-spacer", i && "pkt-header-service-spacer--compact", E && "pkt-header-service-spacer--has-user", X && "pkt-header-service-spacer--mobile", Z && "pkt-header-service-spacer--tablet") })]
-	}) : be;
+		children: [xe, /* @__PURE__ */ _("div", { className: (0, j.default)("pkt-header-service-spacer", i && "pkt-header-service-spacer--compact", E && "pkt-header-service-spacer--has-user", X && "pkt-header-service-spacer--mobile", Z && "pkt-header-service-spacer--tablet") })]
+	}) : xe;
 });
 Xi.displayName = "PktHeaderService";
 //#endregion
@@ -6939,7 +6951,7 @@ var ya = ({ children: e, skin: t, title: n, href: r, iconName: i, openInNewTab:
 };
 //#endregion
 //#region src/components/loader/Loader.tsx
-ya.displayName = "PktLinkCard", typeof window < "u" && (window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/16.24/animations/");
+ya.displayName = "PktLinkCard", typeof window < "u" && (window.pktAnimationPath = window.pktAnimationPath || "https://punkt-cdn.oslo.kommune.no/16.25/animations/");
 var ba = (e) => {
 	switch (e) {
 		case "blue": return "spinner-blue";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "16.24.1",
+  "version": "16.25.0",
   "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": "d01de2b51e9c71b709202eb0d2fb3336e2932a20"
 }

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,
@@ -273,6 +274,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') {
@@ -393,6 +411,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/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'