@oslokommune/punkt-react 16.17.2 → 16.17.3

package/dist/shared-utils/modal-scroll-lock.d.ts

@@ -0,0 +1,10 @@
+export declare const acquireModalScrollLock: (token: {
+    locked: boolean;
+}) => void;
+export declare const releaseModalScrollLock: (token: {
+    locked: boolean;
+}) => void;
+export type ModalScrollLockToken = {
+    locked: boolean;
+};
+export declare const createModalScrollLockToken: () => ModalScrollLockToken;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "16.17.2",
+  "version": "16.17.3",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -39,7 +39,7 @@
   "dependencies": {
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.7",
-    "@oslokommune/punkt-elements": "^16.17.2",
+    "@oslokommune/punkt-elements": "^16.17.3",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-hook-form": "^7.53.0"
@@ -109,5 +109,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "3eda56e8d6942a8f8aba63b79a469ac12b375e2d"
+  "gitHead": "0e923719992be1851617872d5e529a4588126aed"
 }

package/src/components/header/HeaderService.tsx

@@ -347,7 +347,7 @@ export const PktHeaderService = forwardRef(
             </span>
           )}
           {serviceName && (
-            <span className="pkt-header-service__service-name">
+            <span className="pkt-header-service__service-name" translate="no">
               {serviceLink ? (
                 <PktLink href={serviceLink} className="pkt-header-service__service-link ">
                   {serviceName}
@@ -505,7 +505,7 @@ export const PktHeaderService = forwardRef(
                   onClick={() => handleMenuToggle('user')}
                 >
                   <span className="pkt-sr-only">Brukermeny: </span>
-                  {representing?.name || user.name}
+                  <span translate="no">{representing?.name || user.name}</span>
                 </PktButton>
                 {openMenu === 'user' && user && (
                   <div

package/src/components/modal/Modal.tsx

@@ -13,6 +13,12 @@ import {
   useRef,
 } from 'react'
 
+import {
+  acquireModalScrollLock,
+  createModalScrollLockToken,
+  releaseModalScrollLock,
+} from 'shared-utils/modal-scroll-lock'
+
 import { PktButton } from '../button/Button'
 
 export interface IPktModal
@@ -53,6 +59,7 @@ export const PktModal = forwardRef(
     ref: ForwardedRef<HTMLDialogElement>,
   ) => {
     const internalRef = useRef<HTMLDialogElement | null>(null)
+    const scrollLockToken = useRef(createModalScrollLockToken())
 
     // Merge consumer ref + internal ref so we always have a working DOM handle
     // for our own logic, regardless of whether the consumer passes a callback ref
@@ -69,38 +76,33 @@ export const PktModal = forwardRef(
     const close = useCallback(() => {
       if (!internalRef.current?.open) return
       internalRef.current.close()
+      releaseModalScrollLock(scrollLockToken.current)
       onClose?.()
     }, [onClose])
 
-    // Synkroniser scroll-lock med dialogens faktiske åpen/lukket-tilstand
-    useEffect(() => {
-      const dialog = internalRef.current
-      if (!dialog) return
-
-      const observer = new MutationObserver(() => {
-        if (dialog.open) {
-          document.body.classList.add('pkt-modal--open')
-        } else {
-          document.body.classList.remove('pkt-modal--open')
-        }
-      })
-      observer.observe(dialog, { attributes: true, attributeFilter: ['open'] })
-      return () => observer.disconnect()
-    }, [])
-
     // Deklarativ åpne/lukke via open-prop
     useEffect(() => {
       if (open) {
         if (!internalRef.current?.open) {
           internalRef.current?.showModal()
         }
+        acquireModalScrollLock(scrollLockToken.current)
       } else {
         if (internalRef.current?.open) {
           internalRef.current.close()
         }
+        releaseModalScrollLock(scrollLockToken.current)
       }
     }, [open])
 
+    // Rydd opp scroll-lock hvis modalen avmonteres mens den er åpen
+    useEffect(() => {
+      const token = scrollLockToken.current
+      return () => {
+        releaseModalScrollLock(token)
+      }
+    }, [])
+
     const handleBackdropClick = useCallback(
       (event: React.MouseEvent<HTMLDialogElement>) => {
         if (closeOnBackdropClick && event.target === internalRef.current) {
@@ -111,6 +113,7 @@ export const PktModal = forwardRef(
     )
 
     const handleNativeClose = useCallback(() => {
+      releaseModalScrollLock(scrollLockToken.current)
       onClose?.()
     }, [onClose])