@oslokommune/punkt-react 16.17.1 → 16.17.3

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

@@ -17,5 +17,6 @@ export type { ITimepickerStrings } from './timepicker';
 export { defaultTimepickerStrings } from './timepicker';
 export type { TProgressbarRole, TProgressbarSkin, TProgressbarStatusPlacement, TProgressbarStatusType, TProgressbarTitlePosition, } from './progressbar';
 export type { IPktComboboxOption, TPktComboboxTagSkin, TPktComboboxDisplayValue, TPktComboboxTagPlacement, } from './combobox';
+export type { TPktSearchInputAppearance, TPktSearchInputMethod, IPktSearchInputSuggestion, IPktSearchInput, } from './searchinput';
 export type { TUploadStrategy as TFileUploadStrategy, TFileUploadItemRenderer, TFilesChangedReason, TFileValidator, TTransferProgress, IFileItem, IFileTransfer, IFileValidateDetail, ITransferCancelledDetail, IFilesChangedDetail, IFileUploadStrings, } from './fileupload';
 export { defaultFileUploadStrings } from './fileupload';

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

@@ -0,0 +1,41 @@
+/**
+ * Types for Search input (`pkt-searchinput` / `PktSearchInput`).
+ *
+ * Shared between Elements and React so API contracts and suggestion payloads
+ * stay aligned. React extends suggestions with `ReactNode` and optional
+ * `onClick` in the component layer — see `@oslokommune/punkt-react`.
+ */
+export type TPktSearchInputAppearance = 'local' | 'local-with-button' | 'global';
+export type TPktSearchInputMethod = 'get' | 'post' | 'dialog';
+/**
+ * Plain suggestion item (JSON-serializable). Used by Elements and as the
+ * portable shape for API data and design-token documentation.
+ */
+export interface IPktSearchInputSuggestion {
+    title?: string;
+    text?: string;
+    href?: string;
+    /**
+     * Presentational row only (e.g. «Ingen resultater»). Renders as a non-focusable
+     * container — not a link or button — and does not emit selection events.
+     * Ignored when `href` is set (link always wins).
+     */
+    nonInteractive?: boolean;
+}
+/**
+ * Public props for the web component (Elements). React mirrors these and adds
+ * callback props in its wrapper.
+ */
+export interface IPktSearchInput {
+    appearance?: TPktSearchInputAppearance;
+    disabled?: boolean;
+    fullwidth?: boolean;
+    id: string;
+    label?: string;
+    name?: string;
+    placeholder?: string;
+    value?: string;
+    suggestions?: IPktSearchInputSuggestion[];
+    action?: string;
+    method?: TPktSearchInputMethod;
+}

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.1",
+  "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.0",
+    "@oslokommune/punkt-elements": "^16.17.3",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-hook-form": "^7.53.0"
@@ -50,7 +50,7 @@
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.37.0",
     "@oslokommune/punkt-assets": "^16.16.1",
-    "@oslokommune/punkt-css": "^16.17.1",
+    "@oslokommune/punkt-css": "^16.17.2",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -109,5 +109,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "9c280105a8c6698188d458d289d56d8d5e6b8b86"
+  "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/index.ts

@@ -30,6 +30,7 @@ export { PktModal } from './modal/Modal'
 export { PktProgressbar } from './progressbar/Progressbar'
 export { PktRadioButton } from './radio/RadioButton'
 export { PktSearchInput } from './searchinput/SearchInput'
+export type { PktSearchInputSuggestion } from './searchinput/SearchInput'
 export { PktSelect } from './select/Select'
 export { PktStep } from './stepper/Step'
 export { PktStepper } from './stepper/Stepper'

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/searchinput/SearchInput.test.tsx

@@ -69,6 +69,20 @@ describe('PktSearchInput', () => {
     )
   })
 
+  it('renders nonInteractive suggestion as a div, not a button', async () => {
+    render(
+      <PktSearchInput
+        id="test-search-input"
+        suggestions={[{ text: 'Ingen resultater', nonInteractive: true }]}
+      />,
+    )
+    await window.customElements.whenDefined('pkt-icon')
+
+    const row = screen.getByText('Ingen resultater').closest('.pkt-searchinput__suggestion')
+    expect(row?.tagName.toLowerCase()).toBe('div')
+    expect(screen.queryAllByRole('button', { name: /ingen resultater/i })).toHaveLength(0)
+  })
+
   it('renders search suggestions when suggestions prop exists', async () => {
     const suggestions = [
       { title: 'Suggestion 1', onClick: vi.fn() },

package/src/components/searchinput/SearchInput.tsx

@@ -1,14 +1,19 @@
 'use client'
 
-import { ChangeEvent, createElement, forwardRef, HTMLProps, ReactNode } from 'react'
+import { ChangeEvent, forwardRef, HTMLProps, ReactNode } from 'react'
+
+import type { IPktSearchInputSuggestion } from 'shared-types/searchinput'
 
 import { useFocusModality } from '../../hooks/useFocusModality'
 import { PktButton } from '../button/Button'
 
-interface SearchSuggestion {
+/**
+ * React suggestion item: portable fields from {@link IPktSearchInputSuggestion}
+ * plus optional rich content and per-row handler.
+ */
+export type PktSearchInputSuggestion = Omit<IPktSearchInputSuggestion, 'title' | 'text'> & {
   title?: string | ReactNode
   text?: string | ReactNode
-  href?: string
   onClick?: () => void
 }
 
@@ -20,7 +25,7 @@ interface ISearch extends HTMLProps<HTMLInputElement> {
   label?: string
   name?: string
   placeholder?: string
-  suggestions?: SearchSuggestion[]
+  suggestions?: PktSearchInputSuggestion[]
   value?: string | undefined
   onSearch?: (value: string) => void
   onSuggestionClick?: (index: number) => void
@@ -59,7 +64,7 @@ export const PktSearchInput = forwardRef<HTMLInputElement, ISearchInput | ISearc
     },
     ref,
   ) => {
-    const handleSuggestionClick = (cb: (() => void) | undefined, index: number) => {
+    const handleSuggestionActivate = (cb: (() => void) | undefined, index: number) => {
       if (cb) {
         cb()
       } else if (onSuggestionClick) {
@@ -92,6 +97,16 @@ export const PktSearchInput = forwardRef<HTMLInputElement, ISearchInput | ISearc
         <div {...wrapperProps}>{children}</div>
       )
 
+    const suggestionContent = (suggestion: PktSearchInputSuggestion) => (
+      <>
+        {suggestion.title && <h3 className="pkt-searchinput__suggestion-title">{suggestion.title}</h3>}
+        {suggestion.text && <p className="pkt-searchinput__suggestion-text">{suggestion.text}</p>}
+      </>
+    )
+
+    const suggestionClassName = (suggestion: PktSearchInputSuggestion) =>
+      ['pkt-searchinput__suggestion', suggestion.onClick ? 'pkt-link-button' : ''].filter(Boolean).join(' ')
+
     return WrapperElement(
       <>
         {label && (
@@ -146,27 +161,33 @@ export const PktSearchInput = forwardRef<HTMLInputElement, ISearchInput | ISearc
 
         {suggestions && (
           <ul id={`${id}-suggestions`} className="pkt-searchinput__suggestions" aria-live="assertive">
-            {suggestions.map((suggestion, index) => (
-              <li key={`search-suggestion-${index}`}>
-                {createElement(
-                  suggestion.href ? 'a' : suggestion.onClick ? 'button' : 'div',
-                  {
-                    href: suggestion.href,
-                    className: `pkt-searchinput__suggestion ${suggestion.onClick ? 'pkt-link-button' : ''} ${
-                      suggestion.href || suggestion.onClick ? 'pkt-searchinput__suggestion--has-hover' : ''
-                    }`,
-                    type: suggestion.onClick ? 'button' : undefined,
-                    onClick: () => handleSuggestionClick(suggestion.onClick, index),
-                    onKeyUp: (event: { key: string }) =>
-                      event.key === 'Enter' && handleSuggestionClick(suggestion.onClick, index),
-                  },
-                  <>
-                    {suggestion.title && <h3 className="pkt-searchinput__suggestion-title">{suggestion.title}</h3>}
-                    {suggestion.text && <p className="pkt-searchinput__suggestion-text">{suggestion.text}</p>}
-                  </>,
-                )}
-              </li>
-            ))}
+            {suggestions.map((suggestion, index) =>
+              suggestion.href ? (
+                <li key={`search-suggestion-${index}`}>
+                  <a
+                    href={suggestion.href}
+                    className={suggestionClassName(suggestion)}
+                    onClick={() => handleSuggestionActivate(suggestion.onClick, index)}
+                  >
+                    {suggestionContent(suggestion)}
+                  </a>
+                </li>
+              ) : suggestion.nonInteractive ? (
+                <li key={`search-suggestion-${index}`}>
+                  <div className="pkt-searchinput__suggestion">{suggestionContent(suggestion)}</div>
+                </li>
+              ) : (
+                <li key={`search-suggestion-${index}`}>
+                  <button
+                    type="button"
+                    className={suggestionClassName(suggestion)}
+                    onClick={() => handleSuggestionActivate(suggestion.onClick, index)}
+                  >
+                    {suggestionContent(suggestion)}
+                  </button>
+                </li>
+              ),
+            )}
           </ul>
         )}
       </>,