@oslokommune/punkt-react 16.17.2 → 16.17.4

package/dist/shared-types/index.d.ts

@@ -9,7 +9,7 @@ export { DEFAULT_HEADER_FOOTER_URL } from './header-menu';
 export type { TLayout, TVerticalPosition, THorizontalPosition, TPosition, TPositionWithCenter, } from './layout';
 export type { THTMLButtonType, TSelectionMode } from './form';
 export type { TSize3, TSize5, TSize7 } from './size';
-export type { TAlertSkin, TMessageboxSkin, TAccordionSkin, TCardSkin } from './skin';
+export type { TAlertSkin, TMessageboxSkin, TAccordionSkin, TCardSkin, TTagSkin } from './skin';
 export type { IDateConstraints, ICalendarGridDimensions, IGridCellPosition, TDateRangeMap, ISelectionState, ISelectionOptions, } from './calendar';
 export type { IDatepickerStrings } from './datepicker';
 export { defaultSingleStrings, defaultRangeStrings } from './datepicker';

package/dist/shared-types/skin.d.ts

@@ -22,3 +22,7 @@ export type TAccordionSkin = 'borderless' | 'outlined' | 'beige' | 'blue' | 'plu
  * Card component skin variants
  */
 export type TCardSkin = 'outlined' | 'outlined-beige' | 'gray' | 'beige' | 'green' | 'blue';
+/**
+ * Tag component skin variants
+ */
+export type TTagSkin = 'blue' | 'blue-light' | 'blue-dark' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray';

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.4",
   "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": "28b1f5b48d08a18a1b237b2220f9f1f1e88a5b7f"
 }

package/src/components/card/Card.tsx

@@ -2,7 +2,7 @@
 
 import classNames from 'classnames'
 import { forwardRef, HTMLAttributes, ReactNode, Ref } from 'react'
-import type { TCardSkin, TLayout } from 'shared-types'
+import type { TCardSkin, TLayout, TTagSkin } from 'shared-types'
 
 import { PktTag } from '../tag/Tag'
 
@@ -12,8 +12,6 @@ type TCardImageShape = 'square' | 'round'
 type TCardTagPosition = 'top' | 'bottom'
 type THeadingLevel = 1 | 2 | 3 | 4 | 5 | 6
 
-type TTagSkin = 'blue' | 'blue-light' | 'blue-dark' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray'
-
 interface ICardTag {
   skin?: TTagSkin
   iconName?: string

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])
 

package/src/components/tabs/TabItem.tsx

@@ -3,10 +3,10 @@
 import { forwardRef, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react'
 
 import { PktIcon } from '../icon/Icon'
-import { type IPktTag, PktTag } from '../tag/Tag'
-import { useTabsContext } from './Tabs'
+import type { TTagSkin } from 'shared-types'
 
-export type TSkin = IPktTag['skin']
+import { PktTag } from '../tag/Tag'
+import { useTabsContext } from './Tabs'
 
 export interface IPktTabItem {
   children: ReactNode
@@ -17,7 +17,7 @@ export interface IPktTabItem {
   icon?: string
   controls?: string
   tag?: string
-  tagSkin?: TSkin
+  tagSkin?: TTagSkin
   index?: number
 }
 

package/src/components/tabs/Tabs.tsx

@@ -12,11 +12,11 @@ import {
   useRef,
 } from 'react'
 
+import type { TTagSkin } from 'shared-types'
+
 import { PktIcon } from '../icon/Icon'
 import { PktTabItem } from './TabItem'
 
-export type TSkin = 'blue' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray' | 'blue-light'
-
 // Context for passing tab navigation logic to children
 interface ITabsContext {
   arrowNav: boolean
@@ -48,7 +48,7 @@ export interface IPktTab {
   controls?: string
   tag?: {
     text: string
-    skin: TSkin | undefined
+    skin: TTagSkin | undefined
   }
   active?: boolean
 }

package/src/components/tag/Tag.tsx

@@ -14,10 +14,12 @@ import {
   useState,
 } from 'react'
 
+import type { TTagSkin } from 'shared-types'
+
 import { PktIcon } from '..'
 
 interface BasePktTagProps {
-  skin?: 'blue' | 'blue-light' | 'blue-dark' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray'
+  skin?: TTagSkin
   textStyle?: 'normal-text' | 'thin-text'
   size?: 'small' | 'medium' | 'large'
   closeTag?: boolean