@oslokommune/punkt-react 16.17.0 → 16.17.2

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "16.17.0",
+  "version": "16.17.2",
   "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.2",
     "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.0",
+    "@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": "b9024738acca3ed6dd938238ff2a2d4219cd3c0c"
+  "gitHead": "3eda56e8d6942a8f8aba63b79a469ac12b375e2d"
 }

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/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>
         )}
       </>,