@oslokommune/punkt-react 16.13.3 → 16.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "16.13.3",
+  "version": "16.14.0",
   "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.13.2",
+    "@oslokommune/punkt-elements": "^16.14.0",
     "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.13.2",
-    "@oslokommune/punkt-css": "^16.13.3",
+    "@oslokommune/punkt-css": "^16.14.0",
     "@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": "0a14763e4a1d49a5c8dccf51dc0dfc08a6d05cb1"
+  "gitHead": "af9088d3c57930488829eb4e6384dbfb9aceac32"
 }

package/src/components/inputwrapper/InputWrapper.tsx

@@ -2,6 +2,7 @@
 
 import { ForwardedRef, forwardRef, type ReactNode, RefAttributes, useState } from 'react'
 
+import { useFocusModality } from '../../hooks/useFocusModality'
 import { PktAlert } from '../alert/Alert'
 import { PktButton } from '../button/Button'
 
@@ -64,6 +65,8 @@ export const PktInputWrapper = forwardRef(
   ) => {
     const [isHelpTextOpen, setIsHelpTextOpen] = useState(false)
 
+    const focusModality = useFocusModality<HTMLDivElement>(ref)
+
     const describedBy = ariaDescribedby || (helptext ? `${forId}-helptext` : undefined)
     const showCounter = !!counter
     const counterTop = showCounter && counterPosition === 'top'
@@ -189,7 +192,7 @@ export const PktInputWrapper = forwardRef(
     )
 
     return (
-      <div className={wrapperClasses} ref={ref} role={role}>
+      <div className={wrapperClasses} role={role} {...focusModality}>
         {hasFieldset ? (
           <fieldset className="pkt-inputwrapper__fieldset" aria-describedby={describedBy}>
             {content}

package/src/components/searchinput/SearchInput.tsx

@@ -2,6 +2,7 @@
 
 import { ChangeEvent, createElement, forwardRef, HTMLProps, ReactNode } from 'react'
 
+import { useFocusModality } from '../../hooks/useFocusModality'
 import { PktButton } from '../button/Button'
 
 interface SearchSuggestion {
@@ -74,22 +75,22 @@ export const PktSearchInput = forwardRef<HTMLInputElement, ISearchInput | ISearc
       fullwidth ? 'pkt-searchinput--fullwidth' : ''
     }`
 
-    let WrapperElement
-    if (action) {
-      // eslint-disable-next-line react/display-name
-      WrapperElement = (children: ReactNode) => (
-        <form role="search" className={wrapperClass} action={action} method={method}>
+    const focusModality = useFocusModality()
+
+    const wrapperProps = {
+      role: 'search',
+      className: wrapperClass,
+      ...focusModality,
+    }
+
+    const WrapperElement = (children: ReactNode) =>
+      action ? (
+        <form {...wrapperProps} action={action} method={method}>
           {children}
         </form>
+      ) : (
+        <div {...wrapperProps}>{children}</div>
       )
-    } else {
-      // eslint-disable-next-line react/display-name
-      WrapperElement = (children: ReactNode) => (
-        <div role="search" className={wrapperClass}>
-          {children}
-        </div>
-      )
-    }
 
     return WrapperElement(
       <>