@fremtind/jokul 6.1.0-next.3 → 6.1.0-next.5

package/build/es/components/date-input/DateInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","sources":["../../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useId, useRef, useState } from \"react\";\nimport { useMergeRefs } from \"../../utilities/index.js\";\nimport { Button } from \"../button/index.js\";\nimport { CalendarIcon } from \"../icon/index.js\";\nimport { InputGroup } from \"../input-group/index.js\";\nimport { Calendar } from \"./calendar/Calendar.js\";\nimport type { DateInputProps } from \"./types.js\";\nimport { toValidBoundary } from \"./utils.js\";\n\nexport const DateInput = forwardRef<HTMLInputElement, DateInputProps>(\n    (props, forwardedInputRef) => {\n        const {\n            max,\n            min,\n            defaultValue,\n            value,\n            name,\n            onChange,\n            onBlur,\n            onClick,\n            onFocus,\n            id,\n            \"data-testautoid\": testAutoId,\n            className = \"\",\n            label,\n            labelProps,\n            helpLabel,\n            errorLabel,\n            supportLabelProps,\n            tooltip,\n            description,\n            required,\n            disabled,\n            readOnly,\n            autoComplete,\n            inputMode,\n            ...rest\n        } = props;\n\n        // Skiller InputGroup-spesifikke props fra native input-attributter, slik\n        // at vi ikke lekker f.eks. inline, data-size og style ned på <input>.\n        const {\n            inline,\n            style,\n            \"data-size\": dataSize,\n            ...inputAttributes\n        } = rest;\n\n        const generatedCalendarId = useId();\n        const calendarId = id\n            ? `${id}-calendar`\n            : `jkl-calendar-${generatedCalendarId}`;\n\n        const isControlled = value !== undefined;\n\n        // Intern state holder kalenderen i synk. I ukontrollert modus er selve\n        // <input> ukontrollert (defaultValue), slik at react-hook-form (register)\n        // kan skrive verdien via ref-en – f.eks. ved reset() og setValue().\n        const [internalValue, setInternalValue] = useState<string>(\n            defaultValue ?? \"\",\n        );\n        const currentValue = isControlled ? value : internalValue;\n\n        // min/max kan komme inn som number eller dd.mm.yyyy (bl.a. via\n        // react-hook-forms register). Både det native feltet og kalenderen\n        // forholder seg til ISO-strenger.\n        const minValue = toValidBoundary(min);\n        const maxValue = toValidBoundary(max);\n\n        // Samle-ref: forward til forbruker / react-hook-form, og behold internt\n        // slik at vi kan lese og skrive verdien fra kalenderen.\n        const inputRef = useRef<HTMLInputElement | null>(null);\n        const setInputRef = useMergeRefs(inputRef, forwardedInputRef);\n\n        const handleInputChange = (\n            event: React.ChangeEvent<HTMLInputElement>,\n        ) => {\n            if (!isControlled) {\n                setInternalValue(event.target.value);\n            }\n            onChange?.(event);\n        };\n\n        // Skriver en ny verdi inn i det native feltet og fyrer et ekte input-event.\n        // Da flyter kalendervalg gjennom samme onChange som tastaturinntasting,\n        // slik at også react-hook-form fanger endringen.\n        const commitFromCalendar = (next: string) => {\n            const input = inputRef.current;\n            if (!input) {\n                return;\n            }\n            const setNativeValue = Object.getOwnPropertyDescriptor(\n                window.HTMLInputElement.prototype,\n                \"value\",\n            )?.set;\n            if (setNativeValue) {\n                setNativeValue.call(input, next);\n            } else {\n                input.value = next;\n            }\n            input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n        };\n\n        // Leser gjeldende verdi fra feltet når kalenderen åpnes, slik at den\n        // reflekterer eventuelle programmatiske skriv (reset/setValue) i\n        // ukontrollert modus.\n        const syncCalendarFromInput = () => {\n            if (!isControlled && inputRef.current) {\n                setInternalValue(inputRef.current.value);\n            }\n        };\n\n        return (\n            <InputGroup\n                id={id}\n                className={clsx(\"jkl-date-input\", className)}\n                inline={inline}\n                style={style}\n                data-size={dataSize}\n                label={label}\n                labelProps={labelProps}\n                helpLabel={helpLabel}\n                errorLabel={errorLabel}\n                supportLabelProps={supportLabelProps}\n                tooltip={tooltip}\n                description={description}\n                render={(inputProps) => (\n                    <div\n                        className=\"jkl-date-input__wrapper\"\n                        data-invalid={inputProps[\"aria-invalid\"]}\n                    >\n                        <input\n                            ref={setInputRef}\n                            data-testid=\"jkl-date-input__input\"\n                            data-testautoid={testAutoId}\n                            data-empty={currentValue ? undefined : \"true\"}\n                            className=\"jkl-date-input__input\"\n                            name={name}\n                            type=\"date\"\n                            {...(isControlled ? { value } : { defaultValue })}\n                            max={maxValue}\n                            min={minValue}\n                            required={required}\n                            disabled={disabled}\n                            readOnly={readOnly}\n                            autoComplete={autoComplete}\n                            inputMode={inputMode}\n                            onChange={handleInputChange}\n                            onFocus={onFocus}\n                            onBlur={onBlur}\n                            onClick={(e) => {\n                                e.preventDefault();\n                                onClick?.(e);\n                            }}\n                            {...inputAttributes}\n                            {...inputProps}\n                        />\n                        <Button\n                            type=\"button\"\n                            variant=\"ghost\"\n                            icon={<CalendarIcon />}\n                            aria-label=\"Åpne kalender\"\n                            data-testid=\"jkl-date-input__trigger\"\n                            className=\"jkl-date-input__calendar-trigger\"\n                            disabled={disabled || readOnly}\n                            onClick={syncCalendarFromInput}\n                            // @ts-expect-error vet ikke hvorfor vi får typefeil her? kanskje på grunn av hvordan vi behandler polymorfisme?\n                            popovertarget={calendarId}\n                        />\n                        <Calendar\n                            data-testid=\"jkl-calendar\"\n                            id={calendarId}\n                            value={currentValue}\n                            min={minValue}\n                            max={maxValue}\n                            onChange={(e) => commitFromCalendar(e.target.value)}\n                            label={label}\n                            description={description}\n                            popover=\"auto\"\n                        />\n                    </div>\n                )}\n            />\n        );\n    },\n);\n\nDateInput.displayName = \"DateInput\";\n"],"names":["DateInput","forwardRef","props","forwardedInputRef","max","min","defaultValue","value","name","onChange","onBlur","onClick","onFocus","id","testAutoId","className","label","labelProps","helpLabel","errorLabel","supportLabelProps","tooltip","description","required","disabled","readOnly","autoComplete","inputMode","rest","inline","style","dataSize","inputAttributes","generatedCalendarId","useId","calendarId","isControlled","internalValue","setInternalValue","useState","currentValue","minValue","toValidBoundary","maxValue","inputRef","useRef","setInputRef","useMergeRefs","handleInputChange","event","target","syncCalendarFromInput","current","jsx","InputGroup","clsx","render","inputProps","jsxs","children","ref","type","e","preventDefault","Button","variant","icon","CalendarIcon","popovertarget","Calendar","next","input","setNativeValue","Object","getOwnPropertyDescriptor","window","HTMLInputElement","prototype","set","call","dispatchEvent","Event","bubbles","commitFromCalendar","popover","displayName"],"mappings":"o4DAUO,MAAMA,EAAYC,EACrB,CAACC,EAAOC,KACJ,MACIC,IAAAA,EACAC,IAAAA,EACAC,aAAAA,EACAC,MAAAA,EACAC,KAAAA,EACAC,SAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,GAAAA,EACA,kBAAmBC,EACnBC,UAAAA,EAAY,GACZC,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,aAAAA,EACAC,UAAAA,KACGC,GACH1B,GAKA2B,OAAAA,EACAC,MAAAA,EACA,YAAaC,KACVC,GACHJ,EAEEK,EAAsBC,IACtBC,EAAatB,EACb,GAAGA,aACH,gBAAgBoB,IAEhBG,OAAyB,IAAV7B,GAKd8B,EAAeC,GAAoBC,EACtCjC,GAAgB,IAEdkC,EAAeJ,EAAe7B,EAAQ8B,EAKtCI,EAAWC,EAAgBrC,GAC3BsC,EAAWD,EAAgBtC,GAI3BwC,EAAWC,EAAgC,MAC3CC,EAAcC,EAAaH,EAAUzC,GAErC6C,EACFC,IAEKb,GACDE,EAAiBW,EAAMC,OAAO3C,OAElCE,IAAWwC,IA0BTE,GAAwB,MACrBf,GAAgBQ,EAASQ,SAC1Bd,EAAiBM,EAASQ,QAAQ7C,QAI1C,OACI8C,EAACC,EAAA,CACGzC,GAAAA,EACAE,UAAWwC,EAAK,iBAAkBxC,GAClCc,OAAAA,EACAC,MAAAA,EACA,YAAWC,EACXf,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,EACAkC,OAASC,GACLC,EAAC,MAAA,CACG3C,UAAU,0BACV,eAAc0C,EAAW,gBAEzBE,SAAA,CAAAN,EAAC,QAAA,CACGO,IAAKd,EACL,cAAY,wBACZ,kBAAiBhC,EACjB,aAAY0B,OAAe,EAAY,OACvCzB,UAAU,wBACVP,KAAAA,EACAqD,KAAK,UACAzB,EAAe,CAAE7B,MAAAA,GAAU,CAAED,aAAAA,GAClCF,IAAKuC,EACLtC,IAAKoC,EACLlB,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,aAAAA,EACAC,UAAAA,EACAlB,SAAUuC,EACVpC,QAAAA,EACAF,OAAAA,EACAC,QAAUmD,IACNA,EAAEC,iBACFpD,IAAUmD,OAEV9B,KACAyB,IAERJ,EAACW,EAAA,CACGH,KAAK,SACLI,QAAQ,QACRC,OAAOC,EAAA,IACP,aAAW,gBACX,cAAY,0BACZpD,UAAU,mCACVS,SAAUA,GAAYC,EACtBd,QAASwC,GAETiB,cAAejC,IAEnBkB,EAACgB,EAAA,CACG,cAAY,eACZxD,GAAIsB,EACJ5B,MAAOiC,EACPnC,IAAKoC,EACLrC,IAAKuC,EACLlC,SAAWqD,GAzFJ,CAACQ,IACxB,MAAMC,EAAQ3B,EAASQ,QACvB,IAAKmB,EACD,OAEJ,MAAMC,EAAiBC,OAAOC,yBAC1BC,OAAOC,iBAAiBC,UACxB,UACDC,IACCN,EACAA,EAAeO,KAAKR,EAAOD,GAE3BC,EAAMhE,MAAQ+D,EAElBC,EAAMS,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,MA2EjBC,CAAmBrB,EAAEZ,OAAO3C,OAC7CS,MAAAA,EACAM,YAAAA,EACA8D,QAAQ,gBASpCpF,EAAUqF,YAAc"}
+{"version":3,"file":"DateInput.js","sources":["../../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useId, useRef, useState } from \"react\";\nimport { useMergeRefs } from \"../../hooks/useMergeRefs/useMergeRefs.js\";\nimport { Button } from \"../button/index.js\";\nimport { CalendarIcon } from \"../icon/index.js\";\nimport { InputGroup } from \"../input-group/index.js\";\nimport { Calendar } from \"./calendar/Calendar.js\";\nimport type { DateInputProps } from \"./types.js\";\nimport { toValidBoundary } from \"./utils.js\";\n\nexport const DateInput = forwardRef<HTMLInputElement, DateInputProps>(\n    (props, forwardedInputRef) => {\n        const {\n            max,\n            min,\n            defaultValue,\n            value,\n            name,\n            onChange,\n            onBlur,\n            onClick,\n            onFocus,\n            id,\n            \"data-testautoid\": testAutoId,\n            className = \"\",\n            label,\n            labelProps,\n            helpLabel,\n            errorLabel,\n            supportLabelProps,\n            tooltip,\n            description,\n            required,\n            disabled,\n            readOnly,\n            autoComplete,\n            inputMode,\n            ...rest\n        } = props;\n\n        // Skiller InputGroup-spesifikke props fra native input-attributter, slik\n        // at vi ikke lekker f.eks. inline, data-size og style ned på <input>.\n        const {\n            inline,\n            style,\n            \"data-size\": dataSize,\n            ...inputAttributes\n        } = rest;\n\n        const generatedCalendarId = useId();\n        const calendarId = id\n            ? `${id}-calendar`\n            : `jkl-calendar-${generatedCalendarId}`;\n\n        const isControlled = value !== undefined;\n\n        // Intern state holder kalenderen i synk. I ukontrollert modus er selve\n        // <input> ukontrollert (defaultValue), slik at react-hook-form (register)\n        // kan skrive verdien via ref-en – f.eks. ved reset() og setValue().\n        const [internalValue, setInternalValue] = useState<string>(\n            defaultValue ?? \"\",\n        );\n        const currentValue = isControlled ? value : internalValue;\n\n        // min/max kan komme inn som number eller dd.mm.yyyy (bl.a. via\n        // react-hook-forms register). Både det native feltet og kalenderen\n        // forholder seg til ISO-strenger.\n        const minValue = toValidBoundary(min);\n        const maxValue = toValidBoundary(max);\n\n        // Samle-ref: forward til forbruker / react-hook-form, og behold internt\n        // slik at vi kan lese og skrive verdien fra kalenderen.\n        const inputRef = useRef<HTMLInputElement | null>(null);\n        const setInputRef = useMergeRefs(inputRef, forwardedInputRef);\n\n        const handleInputChange = (\n            event: React.ChangeEvent<HTMLInputElement>,\n        ) => {\n            if (!isControlled) {\n                setInternalValue(event.target.value);\n            }\n            onChange?.(event);\n        };\n\n        // Skriver en ny verdi inn i det native feltet og fyrer et ekte input-event.\n        // Da flyter kalendervalg gjennom samme onChange som tastaturinntasting,\n        // slik at også react-hook-form fanger endringen.\n        const commitFromCalendar = (next: string) => {\n            const input = inputRef.current;\n            if (!input) {\n                return;\n            }\n            const setNativeValue = Object.getOwnPropertyDescriptor(\n                window.HTMLInputElement.prototype,\n                \"value\",\n            )?.set;\n            if (setNativeValue) {\n                setNativeValue.call(input, next);\n            } else {\n                input.value = next;\n            }\n            input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n        };\n\n        // Leser gjeldende verdi fra feltet når kalenderen åpnes, slik at den\n        // reflekterer eventuelle programmatiske skriv (reset/setValue) i\n        // ukontrollert modus.\n        const syncCalendarFromInput = () => {\n            if (!isControlled && inputRef.current) {\n                setInternalValue(inputRef.current.value);\n            }\n        };\n\n        return (\n            <InputGroup\n                id={id}\n                className={clsx(\"jkl-date-input\", className)}\n                inline={inline}\n                style={style}\n                data-size={dataSize}\n                label={label}\n                labelProps={labelProps}\n                helpLabel={helpLabel}\n                errorLabel={errorLabel}\n                supportLabelProps={supportLabelProps}\n                tooltip={tooltip}\n                description={description}\n                render={(inputProps) => (\n                    <div\n                        className=\"jkl-date-input__wrapper\"\n                        data-invalid={inputProps[\"aria-invalid\"]}\n                    >\n                        <input\n                            ref={setInputRef}\n                            data-testid=\"jkl-date-input__input\"\n                            data-testautoid={testAutoId}\n                            data-empty={currentValue ? undefined : \"true\"}\n                            className=\"jkl-date-input__input\"\n                            name={name}\n                            type=\"date\"\n                            {...(isControlled ? { value } : { defaultValue })}\n                            max={maxValue}\n                            min={minValue}\n                            required={required}\n                            disabled={disabled}\n                            readOnly={readOnly}\n                            autoComplete={autoComplete}\n                            inputMode={inputMode}\n                            onChange={handleInputChange}\n                            onFocus={onFocus}\n                            onBlur={onBlur}\n                            onClick={(e) => {\n                                e.preventDefault();\n                                onClick?.(e);\n                            }}\n                            {...inputAttributes}\n                            {...inputProps}\n                        />\n                        <Button\n                            type=\"button\"\n                            variant=\"ghost\"\n                            icon={<CalendarIcon />}\n                            aria-label=\"Åpne kalender\"\n                            data-testid=\"jkl-date-input__trigger\"\n                            className=\"jkl-date-input__calendar-trigger\"\n                            disabled={disabled || readOnly}\n                            onClick={syncCalendarFromInput}\n                            // @ts-expect-error vet ikke hvorfor vi får typefeil her? kanskje på grunn av hvordan vi behandler polymorfisme?\n                            popovertarget={calendarId}\n                        />\n                        <Calendar\n                            data-testid=\"jkl-calendar\"\n                            id={calendarId}\n                            value={currentValue}\n                            min={minValue}\n                            max={maxValue}\n                            onChange={(e) => commitFromCalendar(e.target.value)}\n                            label={label}\n                            description={description}\n                            popover=\"auto\"\n                        />\n                    </div>\n                )}\n            />\n        );\n    },\n);\n\nDateInput.displayName = \"DateInput\";\n"],"names":["DateInput","forwardRef","props","forwardedInputRef","max","min","defaultValue","value","name","onChange","onBlur","onClick","onFocus","id","testAutoId","className","label","labelProps","helpLabel","errorLabel","supportLabelProps","tooltip","description","required","disabled","readOnly","autoComplete","inputMode","rest","inline","style","dataSize","inputAttributes","generatedCalendarId","useId","calendarId","isControlled","internalValue","setInternalValue","useState","currentValue","minValue","toValidBoundary","maxValue","inputRef","useRef","setInputRef","useMergeRefs","handleInputChange","event","target","syncCalendarFromInput","current","jsx","InputGroup","clsx","render","inputProps","jsxs","children","ref","type","e","preventDefault","Button","variant","icon","CalendarIcon","popovertarget","Calendar","next","input","setNativeValue","Object","getOwnPropertyDescriptor","window","HTMLInputElement","prototype","set","call","dispatchEvent","Event","bubbles","commitFromCalendar","popover","displayName"],"mappings":"01DAUO,MAAMA,EAAYC,EACrB,CAACC,EAAOC,KACJ,MACIC,IAAAA,EACAC,IAAAA,EACAC,aAAAA,EACAC,MAAAA,EACAC,KAAAA,EACAC,SAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,GAAAA,EACA,kBAAmBC,EACnBC,UAAAA,EAAY,GACZC,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,aAAAA,EACAC,UAAAA,KACGC,GACH1B,GAKA2B,OAAAA,EACAC,MAAAA,EACA,YAAaC,KACVC,GACHJ,EAEEK,EAAsBC,IACtBC,EAAatB,EACb,GAAGA,aACH,gBAAgBoB,IAEhBG,OAAyB,IAAV7B,GAKd8B,EAAeC,GAAoBC,EACtCjC,GAAgB,IAEdkC,EAAeJ,EAAe7B,EAAQ8B,EAKtCI,EAAWC,EAAgBrC,GAC3BsC,EAAWD,EAAgBtC,GAI3BwC,EAAWC,EAAgC,MAC3CC,EAAcC,EAAaH,EAAUzC,GAErC6C,EACFC,IAEKb,GACDE,EAAiBW,EAAMC,OAAO3C,OAElCE,IAAWwC,IA0BTE,GAAwB,MACrBf,GAAgBQ,EAASQ,SAC1Bd,EAAiBM,EAASQ,QAAQ7C,QAI1C,OACI8C,EAACC,EAAA,CACGzC,GAAAA,EACAE,UAAWwC,EAAK,iBAAkBxC,GAClCc,OAAAA,EACAC,MAAAA,EACA,YAAWC,EACXf,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,EACAkC,OAASC,GACLC,EAAC,MAAA,CACG3C,UAAU,0BACV,eAAc0C,EAAW,gBAEzBE,SAAA,CAAAN,EAAC,QAAA,CACGO,IAAKd,EACL,cAAY,wBACZ,kBAAiBhC,EACjB,aAAY0B,OAAe,EAAY,OACvCzB,UAAU,wBACVP,KAAAA,EACAqD,KAAK,UACAzB,EAAe,CAAE7B,MAAAA,GAAU,CAAED,aAAAA,GAClCF,IAAKuC,EACLtC,IAAKoC,EACLlB,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,aAAAA,EACAC,UAAAA,EACAlB,SAAUuC,EACVpC,QAAAA,EACAF,OAAAA,EACAC,QAAUmD,IACNA,EAAEC,iBACFpD,IAAUmD,OAEV9B,KACAyB,IAERJ,EAACW,EAAA,CACGH,KAAK,SACLI,QAAQ,QACRC,OAAOC,EAAA,IACP,aAAW,gBACX,cAAY,0BACZpD,UAAU,mCACVS,SAAUA,GAAYC,EACtBd,QAASwC,GAETiB,cAAejC,IAEnBkB,EAACgB,EAAA,CACG,cAAY,eACZxD,GAAIsB,EACJ5B,MAAOiC,EACPnC,IAAKoC,EACLrC,IAAKuC,EACLlC,SAAWqD,GAzFJ,CAACQ,IACxB,MAAMC,EAAQ3B,EAASQ,QACvB,IAAKmB,EACD,OAEJ,MAAMC,EAAiBC,OAAOC,yBAC1BC,OAAOC,iBAAiBC,UACxB,UACDC,IACCN,EACAA,EAAeO,KAAKR,EAAOD,GAE3BC,EAAMhE,MAAQ+D,EAElBC,EAAMS,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,MA2EjBC,CAAmBrB,EAAEZ,OAAO3C,OAC7CS,MAAAA,EACAM,YAAAA,EACA8D,QAAQ,gBASpCpF,EAAUqF,YAAc"}

package/build/es/components/date-input/types.d.ts

@@ -1,5 +1,5 @@
 import { InputHTMLAttributes } from 'react';
-import { DataTestAutoId } from '../../utilities/types.js';
+import { DataTestAutoId, WithDisabled, WithReadOnly } from '../../utilities/types.js';
 import { InputGroupProps } from '../input-group/types.js';
 /**
  * Props for `DateInput`. Komponenten bygger på et native `<input type="date">`,
@@ -9,7 +9,7 @@ import { InputGroupProps } from '../input-group/types.js';
  * Kan brukes både kontrollert (`value` + `onChange`) og ukontrollert (`defaultValue`,
  * eller via react-hook-forms `register`).
  */
-export type DateInputProps = Omit<InputGroupProps, "children" | "render"> & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "min" | "max" | "children"> & DataTestAutoId & {
+export type DateInputProps = Omit<InputGroupProps, "children" | "render"> & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "min" | "max" | "children" | "disabled" | "readOnly"> & DataTestAutoId & WithDisabled & WithReadOnly & {
     /**
      * Kontrollert verdi som ISO-datostreng (`YYYY-MM-DD`), f.eks. `"2026-08-13"`.
      * Oppgis sammen med `onChange`. La stå udefinert for ukontrollert bruk.

package/build/es/components/input-group/InputGroup.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as r,Fragment as l}from"react/jsx-runtime";import{c as i}from"../../../clsx-BeLtu-UY.js";import o,{forwardRef as s}from"react";import{useId as a}from"../../hooks/useId/useId.js";import{Label as n}from"./Label.js";import{SupportLabel as p}from"./SupportLabel.js";const t=s((s,t)=>{const{className:d,children:c,errorLabel:m,helpLabel:u,inline:b,label:h,labelProps:j,render:f,supportLabelProps:y,description:v,tooltip:k,id:L,...x}=s,g=a(L||"jkl-input",{generateSuffix:!L}),I=a("jkl-support-label"),S=a("jkl-description"),w=!!k,N=m||u,A=m?"error":u?"help":void 0,E={"aria-describedby":[v?S:void 0,N?I:void 0].filter(Boolean).join(" ")||void 0,"aria-invalid":!!m||void 0,id:g},F=f?()=>f(E):()=>{const e=o.Children.toArray(s.children)[0];if(o.isValidElement(e))return o.cloneElement(e,{...E,...e.props})};return e("div",{ref:t,className:i(d,"jkl-input-group",{"jkl-input-group--inline":b}),...x,children:[r(n,{standAlone:!0,htmlFor:g,srOnly:b,...j,style:{whiteSpace:w?"nowrap":void 0,...j?.style},children:w?e(l,{children:[r("span",{style:{whiteSpace:"normal"},children:h})," ",k]}):h}),v&&r("p",{id:S,className:"jkl-input-group-description",children:v}),F(),r(p,{srOnly:b,...y,label:N,labelType:A,id:I})]})});t.displayName="InputGroup";export{t as InputGroup};
+import{jsxs as e,jsx as r,Fragment as l}from"react/jsx-runtime";import{c as i}from"../../../clsx-BeLtu-UY.js";import o,{forwardRef as a}from"react";import{useId as s}from"../../hooks/useId/useId.js";import{Label as t}from"./Label.js";import{SupportLabel as n}from"./SupportLabel.js";const p=a((a,p)=>{const{className:d,children:c,errorLabel:m,helpLabel:u,inline:b,label:j,labelProps:h,render:f,supportLabelProps:y,description:k,tooltip:v,id:x,...L}=a,g=s(x||"jkl-input",{generateSuffix:!x}),I=s("jkl-support-label"),N=s("jkl-description"),S=!!v,w=m||u,A=m?"error":u?"help":void 0,E={"aria-describedby":[k?N:void 0,w?I:void 0].filter(Boolean).join(" ")||void 0,"aria-invalid":!!m||void 0,id:g},F=f?()=>f(E):()=>{const e=o.Children.toArray(a.children)[0];if(o.isValidElement(e))return o.cloneElement(e,{...E,...e.props})};return e("div",{ref:p,className:i(d,"jkl-input-group",{"jkl-input-group--inline":b}),...L,children:[r(t,{standAlone:!0,htmlFor:g,srOnly:b,...h,style:{whiteSpace:S?"nowrap":void 0,...h?.style},children:S?e(l,{children:[r("span",{className:"jkl-label__text",style:{whiteSpace:"normal"},children:j})," ",v]}):j}),k&&r("p",{id:N,className:"jkl-input-group-description",children:k}),F(),r(n,{srOnly:b,...y,label:w,labelType:A,id:I})]})});p.displayName="InputGroup";export{p as InputGroup};
 //# sourceMappingURL=InputGroup.js.map

package/build/es/components/input-group/InputGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.js","sources":["../../../../src/components/input-group/InputGroup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { Label } from \"./Label.js\";\nimport { SupportLabel } from \"./SupportLabel.js\";\nimport type { InputGroupProps, InputProps } from \"./types.js\";\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(\n    (props, ref) => {\n        const {\n            className,\n            children,\n            errorLabel,\n            helpLabel,\n            inline,\n            label,\n            labelProps,\n            render,\n            supportLabelProps,\n            description,\n            tooltip,\n            id,\n            ...rest\n        } = props;\n\n        const uid = useId(id || \"jkl-input\", { generateSuffix: !id });\n        const supportId = useId(\"jkl-support-label\");\n        const descriptionId = useId(\"jkl-description\");\n\n        const hasTooltip = !!tooltip;\n\n        const supportText = errorLabel || helpLabel;\n        const supportTextType = errorLabel\n            ? \"error\"\n            : helpLabel\n              ? \"help\"\n              : undefined;\n\n        const describedBy =\n            [\n                description ? descriptionId : undefined,\n                supportText ? supportId : undefined,\n            ]\n                .filter(Boolean)\n                .join(\" \") || undefined;\n\n        const inputProps: InputProps = {\n            \"aria-describedby\": describedBy,\n            \"aria-invalid\": errorLabel ? true : undefined,\n            id: uid,\n        };\n\n        const renderInput = render\n            ? () => render(inputProps)\n            : () => {\n                  const input = React.Children.toArray(props.children)[0];\n\n                  if (!React.isValidElement<InputProps>(input)) return;\n\n                  return React.cloneElement<InputProps>(input, {\n                      ...inputProps,\n                      ...input.props,\n                  });\n              };\n\n        return (\n            <div\n                ref={ref}\n                className={clsx(className, \"jkl-input-group\", {\n                    \"jkl-input-group--inline\": inline,\n                })}\n                {...rest}\n            >\n                <Label\n                    standAlone\n                    htmlFor={uid}\n                    srOnly={inline}\n                    {...labelProps}\n                    style={{\n                        whiteSpace: hasTooltip ? \"nowrap\" : undefined,\n                        ...labelProps?.style,\n                    }}\n                >\n                    {hasTooltip ? (\n                        <>\n                            <span style={{ whiteSpace: \"normal\" }}>\n                                {label}\n                            </span>\n                            {\"\\u00A0\"}\n                            {tooltip}\n                        </>\n                    ) : (\n                        label\n                    )}\n                </Label>\n                {description && (\n                    <p\n                        id={descriptionId}\n                        className=\"jkl-input-group-description\"\n                    >\n                        {description}\n                    </p>\n                )}\n                {renderInput()}\n                <SupportLabel\n                    srOnly={inline}\n                    {...supportLabelProps}\n                    label={supportText}\n                    labelType={supportTextType}\n                    id={supportId}\n                />\n            </div>\n        );\n    },\n);\n\nInputGroup.displayName = \"InputGroup\";\n"],"names":["InputGroup","forwardRef","props","ref","className","children","errorLabel","helpLabel","inline","label","labelProps","render","supportLabelProps","description","tooltip","id","rest","uid","useId","generateSuffix","supportId","descriptionId","hasTooltip","supportText","supportTextType","inputProps","filter","Boolean","join","renderInput","input","React","Children","toArray","isValidElement","cloneElement","jsxs","clsx","jsx","Label","standAlone","htmlFor","srOnly","style","whiteSpace","Fragment","SupportLabel","labelType","displayName"],"mappings":"2RAOO,MAAMA,EAAaC,EACtB,CAACC,EAAOC,KACJ,MACIC,UAAAA,EACAC,SAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,OAAAA,EACAC,kBAAAA,EACAC,YAAAA,EACAC,QAAAA,EACAC,GAAAA,KACGC,GACHd,EAEEe,EAAMC,EAAMH,GAAM,YAAa,CAAEI,gBAAiBJ,IAClDK,EAAYF,EAAM,qBAClBG,EAAgBH,EAAM,mBAEtBI,IAAeR,EAEfS,EAAcjB,GAAcC,EAC5BiB,EAAkBlB,EAClB,QACAC,EACE,YACA,EAUFkB,EAAyB,CAC3B,mBARA,CACIZ,EAAcQ,OAAgB,EAC9BE,EAAcH,OAAY,GAEzBM,OAAOC,SACPC,KAAK,WAAQ,EAIlB,iBAAgBtB,QAAoB,EACpCS,GAAIE,GAGFY,EAAclB,EACd,IAAMA,EAAOc,GACb,KACI,MAAMK,EAAQC,EAAMC,SAASC,QAAQ/B,EAAMG,UAAU,GAErD,GAAK0B,EAAMG,eAA2BJ,GAEtC,OAAOC,EAAMI,aAAyBL,EAAO,IACtCL,KACAK,EAAM5B,SAIvB,OACIkC,EAAC,MAAA,CACGjC,IAAAA,EACAC,UAAWiC,EAAKjC,EAAW,kBAAmB,CAC1C,0BAA2BI,OAE3BQ,EAEJX,SAAA,CAAAiC,EAACC,EAAA,CACGC,YAAU,EACVC,QAASxB,EACTyB,OAAQlC,KACJE,EACJiC,MAAO,CACHC,WAAYtB,EAAa,cAAW,KACjCZ,GAAYiC,OAGlBtC,WACG+B,EAAAS,EAAA,CACIxC,SAAA,CAAAiC,EAAC,QAAKK,MAAO,CAAEC,WAAY,UACtBvC,SAAAI,IAEJ,IACAK,KAGLL,IAGPI,GACGyB,EAAC,IAAA,CACGvB,GAAIM,EACJjB,UAAU,8BAETC,SAAAQ,IAGRgB,IACDS,EAACQ,EAAA,CACGJ,OAAQlC,KACJI,EACJH,MAAOc,EACPwB,UAAWvB,EACXT,GAAIK,SAOxBpB,EAAWgD,YAAc"}
+{"version":3,"file":"InputGroup.js","sources":["../../../../src/components/input-group/InputGroup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { Label } from \"./Label.js\";\nimport { SupportLabel } from \"./SupportLabel.js\";\nimport type { InputGroupProps, InputProps } from \"./types.js\";\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(\n    (props, ref) => {\n        const {\n            className,\n            children,\n            errorLabel,\n            helpLabel,\n            inline,\n            label,\n            labelProps,\n            render,\n            supportLabelProps,\n            description,\n            tooltip,\n            id,\n            ...rest\n        } = props;\n\n        const uid = useId(id || \"jkl-input\", { generateSuffix: !id });\n        const supportId = useId(\"jkl-support-label\");\n        const descriptionId = useId(\"jkl-description\");\n\n        const hasTooltip = !!tooltip;\n\n        const supportText = errorLabel || helpLabel;\n        const supportTextType = errorLabel\n            ? \"error\"\n            : helpLabel\n              ? \"help\"\n              : undefined;\n\n        const describedBy =\n            [\n                description ? descriptionId : undefined,\n                supportText ? supportId : undefined,\n            ]\n                .filter(Boolean)\n                .join(\" \") || undefined;\n\n        const inputProps: InputProps = {\n            \"aria-describedby\": describedBy,\n            \"aria-invalid\": errorLabel ? true : undefined,\n            id: uid,\n        };\n\n        const renderInput = render\n            ? () => render(inputProps)\n            : () => {\n                  const input = React.Children.toArray(props.children)[0];\n\n                  if (!React.isValidElement<InputProps>(input)) return;\n\n                  return React.cloneElement<InputProps>(input, {\n                      ...inputProps,\n                      ...input.props,\n                  });\n              };\n\n        return (\n            <div\n                ref={ref}\n                className={clsx(className, \"jkl-input-group\", {\n                    \"jkl-input-group--inline\": inline,\n                })}\n                {...rest}\n            >\n                <Label\n                    standAlone\n                    htmlFor={uid}\n                    srOnly={inline}\n                    {...labelProps}\n                    style={{\n                        whiteSpace: hasTooltip ? \"nowrap\" : undefined,\n                        ...labelProps?.style,\n                    }}\n                >\n                    {hasTooltip ? (\n                        <>\n                            <span\n                                className=\"jkl-label__text\"\n                                style={{ whiteSpace: \"normal\" }}\n                            >\n                                {label}\n                            </span>\n                            {\"\\u00A0\"}\n                            {tooltip}\n                        </>\n                    ) : (\n                        label\n                    )}\n                </Label>\n                {description && (\n                    <p\n                        id={descriptionId}\n                        className=\"jkl-input-group-description\"\n                    >\n                        {description}\n                    </p>\n                )}\n                {renderInput()}\n                <SupportLabel\n                    srOnly={inline}\n                    {...supportLabelProps}\n                    label={supportText}\n                    labelType={supportTextType}\n                    id={supportId}\n                />\n            </div>\n        );\n    },\n);\n\nInputGroup.displayName = \"InputGroup\";\n"],"names":["InputGroup","forwardRef","props","ref","className","children","errorLabel","helpLabel","inline","label","labelProps","render","supportLabelProps","description","tooltip","id","rest","uid","useId","generateSuffix","supportId","descriptionId","hasTooltip","supportText","supportTextType","inputProps","filter","Boolean","join","renderInput","input","React","Children","toArray","isValidElement","cloneElement","jsxs","clsx","jsx","Label","standAlone","htmlFor","srOnly","style","whiteSpace","Fragment","SupportLabel","labelType","displayName"],"mappings":"2RAOO,MAAMA,EAAaC,EACtB,CAACC,EAAOC,KACJ,MACIC,UAAAA,EACAC,SAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,OAAAA,EACAC,kBAAAA,EACAC,YAAAA,EACAC,QAAAA,EACAC,GAAAA,KACGC,GACHd,EAEEe,EAAMC,EAAMH,GAAM,YAAa,CAAEI,gBAAiBJ,IAClDK,EAAYF,EAAM,qBAClBG,EAAgBH,EAAM,mBAEtBI,IAAeR,EAEfS,EAAcjB,GAAcC,EAC5BiB,EAAkBlB,EAClB,QACAC,EACE,YACA,EAUFkB,EAAyB,CAC3B,mBARA,CACIZ,EAAcQ,OAAgB,EAC9BE,EAAcH,OAAY,GAEzBM,OAAOC,SACPC,KAAK,WAAQ,EAIlB,iBAAgBtB,QAAoB,EACpCS,GAAIE,GAGFY,EAAclB,EACd,IAAMA,EAAOc,GACb,KACI,MAAMK,EAAQC,EAAMC,SAASC,QAAQ/B,EAAMG,UAAU,GAErD,GAAK0B,EAAMG,eAA2BJ,GAEtC,OAAOC,EAAMI,aAAyBL,EAAO,IACtCL,KACAK,EAAM5B,SAIvB,OACIkC,EAAC,MAAA,CACGjC,IAAAA,EACAC,UAAWiC,EAAKjC,EAAW,kBAAmB,CAC1C,0BAA2BI,OAE3BQ,EAEJX,SAAA,CAAAiC,EAACC,EAAA,CACGC,YAAU,EACVC,QAASxB,EACTyB,OAAQlC,KACJE,EACJiC,MAAO,CACHC,WAAYtB,EAAa,cAAW,KACjCZ,GAAYiC,OAGlBtC,WACG+B,EAAAS,EAAA,CACIxC,SAAA,CAAAiC,EAAC,OAAA,CACGlC,UAAU,kBACVuC,MAAO,CAAEC,WAAY,UAEpBvC,SAAAI,IAEJ,IACAK,KAGLL,IAGPI,GACGyB,EAAC,IAAA,CACGvB,GAAIM,EACJjB,UAAU,8BAETC,SAAAQ,IAGRgB,IACDS,EAACQ,EAAA,CACGJ,OAAQlC,KACJI,EACJH,MAAOc,EACPwB,UAAWvB,EACXT,GAAIK,SAOxBpB,EAAWgD,YAAc"}

package/build/es/components/input-group/Label.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import"react";const s=({variant:s="small",srOnly:l,children:o,standAlone:t,htmlFor:n,className:r="",...c})=>{const i=a("jkl-label",r,{[`jkl-label--${s}`]:s,"jkl-label--sr-only":l}),p=t?"label":"span";return!t&&n&&(n=void 0,"production"!==process.env.NODE_ENV&&console.warn("WARNING: The standard Label component renders as a <span> element, which does not take a htmlFor prop. If you want the Label to belong to a specific input, use the standAlone prop, which renders as a <label> element instead. In most cases the Label component should not be used directly, as it is part of all our input components.")),e(p,{...c,className:i,htmlFor:n,children:o})};export{s as Label};
+import{jsx as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import"react";const l=({variant:l="small",srOnly:s,pageHeading:n,children:o,standAlone:t,htmlFor:r,className:c="",...i})=>{const p=a("jkl-label",c,{[`jkl-label--${l}`]:l&&!n,"jkl-label--sr-only":s&&!n}),m=t?"label":"span";!t&&r&&(r=void 0,"production"!==process.env.NODE_ENV&&console.warn("WARNING: The standard Label component renders as a <span> element, which does not take a htmlFor prop. If you want the Label to belong to a specific input, use the standAlone prop, which renders as a <label> element instead. In most cases the Label component should not be used directly, as it is part of all our input components."));const d=e(m,{...i,className:p,htmlFor:r,children:o});return n?e("h1",{className:"jkl-label-heading",children:d}):d};export{l as Label};
 //# sourceMappingURL=Label.js.map

package/build/es/components/input-group/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sources":["../../../../src/components/input-group/Label.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport type { LabelProps } from \"./types.js\";\n\nexport const Label: FC<LabelProps> = ({\n    variant = \"small\",\n    srOnly,\n    children,\n    standAlone,\n    htmlFor,\n    className = \"\",\n    ...rest\n}) => {\n    const labelClassNames = clsx(\"jkl-label\", className, {\n        [`jkl-label--${variant}`]: variant,\n        \"jkl-label--sr-only\": srOnly,\n    });\n\n    const C = standAlone ? \"label\" : \"span\";\n\n    if (!standAlone && htmlFor) {\n        htmlFor = undefined;\n        if (process.env.NODE_ENV !== \"production\") {\n            console.warn(\n                \"WARNING: The standard Label component renders as a <span> element, which does not take a htmlFor prop. If you want the Label to belong to a specific input, use the standAlone prop, which renders as a <label> element instead. In most cases the Label component should not be used directly, as it is part of all our input components.\",\n            );\n        }\n    }\n\n    return (\n        <C {...rest} className={labelClassNames} htmlFor={htmlFor}>\n            {children}\n        </C>\n    );\n};\n"],"names":["Label","variant","srOnly","children","standAlone","htmlFor","className","rest","labelClassNames","clsx","C","process","env","NODE_ENV","console","warn"],"mappings":"oGAIO,MAAMA,EAAwB,EACjCC,QAAAA,EAAU,QACVC,OAAAA,EACAC,SAAAA,EACAC,WAAAA,EACAC,QAAAA,EACAC,UAAAA,EAAY,MACTC,MAEH,MAAMC,EAAkBC,EAAK,YAAaH,EAAW,CACjD,CAAC,cAAcL,KAAYA,EAC3B,qBAAsBC,IAGpBQ,EAAIN,EAAa,QAAU,OAEjC,OAAKA,GAAcC,IACfA,OAAU,EACmB,eAAzBM,QAAQC,IAAIC,UACZC,QAAQC,KACJ,iVAMPL,EAAA,IAAMH,EAAMD,UAAWE,EAAiBH,QAAAA,EACpCF,SAAAA"}
+{"version":3,"file":"Label.js","sources":["../../../../src/components/input-group/Label.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport type { LabelProps } from \"./types.js\";\n\nexport const Label: FC<LabelProps> = ({\n    variant = \"small\",\n    srOnly,\n    pageHeading,\n    children,\n    standAlone,\n    htmlFor,\n    className = \"\",\n    ...rest\n}) => {\n    const labelClassNames = clsx(\"jkl-label\", className, {\n        [`jkl-label--${variant}`]: variant && !pageHeading,\n        \"jkl-label--sr-only\": srOnly && !pageHeading,\n    });\n\n    const C = standAlone ? \"label\" : \"span\";\n\n    if (!standAlone && htmlFor) {\n        htmlFor = undefined;\n        if (process.env.NODE_ENV !== \"production\") {\n            console.warn(\n                \"WARNING: The standard Label component renders as a <span> element, which does not take a htmlFor prop. If you want the Label to belong to a specific input, use the standAlone prop, which renders as a <label> element instead. In most cases the Label component should not be used directly, as it is part of all our input components.\",\n            );\n        }\n    }\n\n    const label = (\n        <C {...rest} className={labelClassNames} htmlFor={htmlFor}>\n            {children}\n        </C>\n    );\n\n    if (pageHeading) {\n        return <h1 className=\"jkl-label-heading\">{label}</h1>;\n    }\n\n    return label;\n};\n"],"names":["Label","variant","srOnly","pageHeading","children","standAlone","htmlFor","className","rest","labelClassNames","clsx","C","process","env","NODE_ENV","console","warn","label","jsx"],"mappings":"oGAIO,MAAMA,EAAwB,EACjCC,QAAAA,EAAU,QACVC,OAAAA,EACAC,YAAAA,EACAC,SAAAA,EACAC,WAAAA,EACAC,QAAAA,EACAC,UAAAA,EAAY,MACTC,MAEH,MAAMC,EAAkBC,EAAK,YAAaH,EAAW,CACjD,CAAC,cAAcN,KAAYA,IAAYE,EACvC,qBAAsBD,IAAWC,IAG/BQ,EAAIN,EAAa,QAAU,QAE5BA,GAAcC,IACfA,OAAU,EACmB,eAAzBM,QAAQC,IAAIC,UACZC,QAAQC,KACJ,+UAKZ,MAAMC,IACDN,EAAA,IAAMH,EAAMD,UAAWE,EAAiBH,QAAAA,EACpCF,SAAAA,IAIT,OAAID,EACOe,EAAC,KAAA,CAAGX,UAAU,oBAAqBH,SAAAa,IAGvCA"}

package/build/es/components/input-group/types.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties, FieldsetHTMLAttributes, ReactNode } from 'react';
-import { DataTestAutoId, Size, WithChildren, WithOptionalChildren } from '../../utilities/types.js';
-export interface FieldGroupProps extends DataTestAutoId, FieldsetHTMLAttributes<HTMLFieldSetElement> {
+import { DataTestAutoId, Size, WithChildren, WithDisabled, WithOptionalChildren } from '../../utilities/types.js';
+export interface FieldGroupProps extends DataTestAutoId, Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "disabled">, WithDisabled {
     legend: string;
     labelProps?: Omit<LabelProps, "children">;
     supportLabelProps?: Omit<SupportLabelProps, "id" | "errorLabel" | "helpLabel">;
@@ -42,6 +42,13 @@ export interface LabelProps extends WithChildren {
     id?: string;
     variant?: LabelVariant;
     srOnly?: boolean;
+    /**
+     * Viser labelen eller legenden som sidens hovedoverskrift (`<h1>`).
+     * Bruk ved ett spørsmål per side. Ikke kombiner med `srOnly`.
+     *
+     * @default false
+     */
+    pageHeading?: boolean;
     standAlone?: boolean;
     htmlFor?: string;
     className?: string;

package/build/es/components/input-panel/InputPanel.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-export declare const InputPanel: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "children"> & import('../../utilities/types.js').JokulModes & {
+export declare const InputPanel: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled" | "children"> & import('../../utilities/types.js').JokulModes & import('../../utilities/types.js').WithDisabled & {
     label: string;
     type: "radio" | "checkbox";
     amount?: string;

package/build/es/components/input-panel/types.d.ts

@@ -1,6 +1,6 @@
 import { InputHTMLAttributes, ReactNode } from 'react';
-import { JokulModes } from '../../utilities/types.js';
-export type InputPanelProps = Omit<InputHTMLAttributes<HTMLInputElement>, "children"> & JokulModes & {
+import { JokulModes, WithDisabled } from '../../utilities/types.js';
+export type InputPanelProps = Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "disabled"> & JokulModes & WithDisabled & {
     label: string;
     type: "radio" | "checkbox";
     /**

package/build/es/components/message/Message.js

@@ -1,2 +1,2 @@
-import{jsx as s,jsxs as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import i,{forwardRef as n}from"react";import{useId as r}from"../../hooks/useId/useId.js";import{ErrorIcon as l}from"../icon/icons/ErrorIcon.js";import{InfoIcon as c}from"../icon/icons/InfoIcon.js";import{SuccessIcon as o}from"../icon/icons/SuccessIcon.js";import{WarningIcon as m}from"../icon/icons/WarningIcon.js";import{DismissButton as t}from"./DismissButton.js";const d=e=>{switch(e){case"error":return s(l,{className:"jkl-message__icon"});case"info":return s(c,{className:"jkl-message__icon"});case"success":return s(o,{className:"jkl-message__icon"});case"warning":return s(m,{className:"jkl-message__icon"});default:return null}};function g(l){const c=n((n,c)=>{const{id:o,title:m,fullWidth:g,className:u="",dismissed:f,dismissAction:j,children:k,role:_,...p}=n,h=r(o||"jkl-message",{generateSuffix:!o}),N=i.Children.map(k,s=>"string"==typeof s)?.[0]?s("p",{children:k}):k;return e("div",{...p,id:o,ref:c,className:a("jkl-message",`jkl-message--${l}`,u,{"jkl-message--full":g,"jkl-message--dismissed":f}),role:_,children:[d(l),e("div",{className:"jkl-message__content",children:[m&&s("p",{className:"jkl-message__title",children:m}),s("div",{className:"jkl-message__message",children:N})]}),j?.handleDismiss&&s(t,{"aria-controls":h,className:"jkl-message__dismiss-button",label:j.buttonTitle||"Lukk",onClick:j.handleDismiss})]})});return c.displayName="Message",c}const u=n((n,l)=>{const{id:c,title:o,fullWidth:m,className:g="",dismissed:u,dismissAction:f,children:j,variant:k="info",role:_,...p}=n,h=r(c||"jkl-message",{generateSuffix:!c}),N=i.Children.map(j,s=>"string"==typeof s)?.[0]?s("p",{children:j}):j;return e("div",{...p,id:c,ref:l,className:a("jkl-message",`jkl-message--${k}`,g,{"jkl-message--full":m,"jkl-message--dismissed":u}),role:_,children:[d(k),e("div",{className:"jkl-message__content",children:[o&&s("p",{className:"jkl-message__title",children:o}),s("div",{className:"jkl-message__message",children:N})]}),f?.handleDismiss&&s(t,{"aria-controls":h,className:"jkl-message__dismiss-button",label:f.buttonTitle||"Lukk",onClick:f.handleDismiss})]})}),f=g("info");f.displayName="InfoMessage";const j=g("error");j.displayName="ErrorMessage";const k=g("warning");k.displayName="WarningMessage";const _=g("success");_.displayName="SuccessMessage";export{j as ErrorMessage,f as InfoMessage,u as Message,_ as SuccessMessage,k as WarningMessage};
+import{jsx as s,jsxs as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import i,{forwardRef as n}from"react";import{useId as r}from"../../hooks/useId/useId.js";import{ErrorIcon as l}from"../icon/icons/ErrorIcon.js";import{InfoIcon as o}from"../icon/icons/InfoIcon.js";import{SuccessIcon as c}from"../icon/icons/SuccessIcon.js";import{WarningIcon as m}from"../icon/icons/WarningIcon.js";import{DismissButton as t}from"./DismissButton.js";const d=e=>{switch(e){case"error":return s(l,{className:"jkl-message__icon"});case"info":return s(o,{className:"jkl-message__icon"});case"success":return s(c,{className:"jkl-message__icon"});case"warning":return s(m,{className:"jkl-message__icon"});default:return null}};function g(l){const o=n((n,o)=>{const{id:c,title:m,fullWidth:g,className:u="",dismissed:f,dismissAction:j,children:k,role:_,...p}=n,h=r(c||"jkl-message",{generateSuffix:!c}),N=i.Children.map(k,s=>"string"==typeof s)?.[0]?s("p",{children:k}):k;return e("div",{...p,id:c,ref:o,className:a("jkl-message",u,{"jkl-message--full":g,"jkl-message--dismissed":f}),"data-color":l,role:_,children:[d(l),e("div",{className:"jkl-message__content",children:[m&&s("p",{className:"jkl-message__title",children:m}),s("div",{className:"jkl-message__message",children:N})]}),j?.handleDismiss&&s(t,{"aria-controls":h,className:"jkl-message__dismiss-button",label:j.buttonTitle||"Lukk",onClick:j.handleDismiss})]})});return o.displayName="Message",o}const u=n((n,l)=>{const{id:o,title:c,fullWidth:m,className:g="",dismissed:u,dismissAction:f,children:j,variant:k="info",role:_,...p}=n,h=r(o||"jkl-message",{generateSuffix:!o}),N=i.Children.map(j,s=>"string"==typeof s)?.[0]?s("p",{children:j}):j;return e("div",{...p,id:o,ref:l,className:a("jkl-message",g,{"jkl-message--full":m,"jkl-message--dismissed":u}),"data-testid":"jkl-message","data-color":k,role:_,children:[d(k),e("div",{className:"jkl-message__content",children:[c&&s("p",{className:"jkl-message__title",children:c}),s("div",{className:"jkl-message__message",children:N})]}),f?.handleDismiss&&s(t,{"aria-controls":h,className:"jkl-message__dismiss-button",label:f.buttonTitle||"Lukk",onClick:f.handleDismiss})]})}),f=g("info");f.displayName="InfoMessage";const j=g("error");j.displayName="ErrorMessage";const k=g("warning");k.displayName="WarningMessage";const _=g("success");_.displayName="SuccessMessage";export{j as ErrorMessage,f as InfoMessage,u as Message,_ as SuccessMessage,k as WarningMessage};
 //# sourceMappingURL=Message.js.map

package/build/es/components/message/Message.js.map

@@ -1 +1 @@
-{"version":3,"file":"Message.js","sources":["../../../../src/components/message/Message.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport { DismissButton } from \"./DismissButton.js\";\nimport type { MessageProps } from \"./types.js\";\n\nconst getIcon = (messageType: MessageProps[\"variant\"]) => {\n    switch (messageType) {\n        case \"error\":\n            return <ErrorIcon className=\"jkl-message__icon\" />;\n        case \"info\":\n            return <InfoIcon className=\"jkl-message__icon\" />;\n        case \"success\":\n            return <SuccessIcon className=\"jkl-message__icon\" />;\n        case \"warning\":\n            return <WarningIcon className=\"jkl-message__icon\" />;\n        default:\n            return null;\n    }\n};\n\nfunction messageFactory(messageType: MessageProps[\"variant\"]) {\n    const Message = forwardRef<HTMLDivElement, MessageProps>((props, ref) => {\n        const {\n            id,\n            title,\n            fullWidth,\n            className = \"\",\n            dismissed,\n            dismissAction,\n            children,\n            role,\n            ...rest\n        } = props;\n\n        const boxId = useId(id || \"jkl-message\", { generateSuffix: !id });\n\n        const hasStringChild = React.Children.map(\n            children,\n            (child) => typeof child === \"string\",\n        );\n        const newChildren = hasStringChild?.[0] ? <p>{children}</p> : children;\n\n        return (\n            <div\n                {...rest}\n                id={id}\n                ref={ref}\n                className={clsx(\n                    \"jkl-message\",\n                    `jkl-message--${messageType}`,\n                    className,\n                    {\n                        \"jkl-message--full\": fullWidth,\n                        \"jkl-message--dismissed\": dismissed,\n                    },\n                )}\n                role={role}\n            >\n                {getIcon(messageType)}\n                <div className=\"jkl-message__content\">\n                    {title && <p className=\"jkl-message__title\">{title}</p>}\n                    <div className=\"jkl-message__message\">{newChildren}</div>\n                </div>\n                {dismissAction?.handleDismiss && (\n                    <DismissButton\n                        aria-controls={boxId}\n                        className=\"jkl-message__dismiss-button\"\n                        label={dismissAction.buttonTitle || \"Lukk\"}\n                        onClick={dismissAction.handleDismiss}\n                    />\n                )}\n            </div>\n        );\n    });\n\n    Message.displayName = \"Message\";\n\n    return Message;\n}\n\nexport const Message = forwardRef<HTMLDivElement, MessageProps>(\n    (props, ref) => {\n        const {\n            id,\n            title,\n            fullWidth,\n            className = \"\",\n            dismissed,\n            dismissAction,\n            children,\n            variant = \"info\",\n            role,\n            ...rest\n        } = props;\n\n        const boxId = useId(id || \"jkl-message\", { generateSuffix: !id });\n\n        const hasStringChild = React.Children.map(\n            children,\n            (child) => typeof child === \"string\",\n        );\n        const newChildren = hasStringChild?.[0] ? <p>{children}</p> : children;\n\n        return (\n            <div\n                {...rest}\n                id={id}\n                ref={ref}\n                className={clsx(\n                    \"jkl-message\",\n                    `jkl-message--${variant}`,\n                    className,\n                    {\n                        \"jkl-message--full\": fullWidth,\n                        \"jkl-message--dismissed\": dismissed,\n                    },\n                )}\n                role={role}\n            >\n                {getIcon(variant)}\n                <div className=\"jkl-message__content\">\n                    {title && <p className=\"jkl-message__title\">{title}</p>}\n                    <div className=\"jkl-message__message\">{newChildren}</div>\n                </div>\n                {dismissAction?.handleDismiss && (\n                    <DismissButton\n                        aria-controls={boxId}\n                        className=\"jkl-message__dismiss-button\"\n                        label={dismissAction.buttonTitle || \"Lukk\"}\n                        onClick={dismissAction.handleDismiss}\n                    />\n                )}\n            </div>\n        );\n    },\n);\n\n/**\n * @deprecated bruk Message med variant=\"info\"\n */\nexport const InfoMessage = messageFactory(\"info\");\nInfoMessage.displayName = \"InfoMessage\";\n/**\n * @deprecated bruk Message med variant=\"error\"\n */\nexport const ErrorMessage = messageFactory(\"error\");\nErrorMessage.displayName = \"ErrorMessage\";\n/**\n * @deprecated bruk Message med variant=\"warning\"\n */\nexport const WarningMessage = messageFactory(\"warning\");\nWarningMessage.displayName = \"WarningMessage\";\n/**\n * @deprecated bruk Message med variant=\"success\"\n */\nexport const SuccessMessage = messageFactory(\"success\");\nSuccessMessage.displayName = \"SuccessMessage\";\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","messageFactory","Message","forwardRef","props","ref","id","title","fullWidth","dismissed","dismissAction","children","role","rest","boxId","useId","generateSuffix","newChildren","React","Children","map","child","jsxs","clsx","handleDismiss","DismissButton","label","buttonTitle","onClick","displayName","variant","InfoMessage","ErrorMessage","WarningMessage","SuccessMessage"],"mappings":"8cAUA,MAAMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACD,OAAOC,EAACC,EAAA,CAAUC,UAAU,sBAChC,IAAK,OACD,OAAOF,EAACG,EAAA,CAASD,UAAU,sBAC/B,IAAK,UACD,OAAOF,EAACI,EAAA,CAAYF,UAAU,sBAClC,IAAK,UACD,OAAOF,EAACK,EAAA,CAAYH,UAAU,sBAClC,QACI,OAAO,OAInB,SAASI,EAAeP,GACpB,MAAMQ,EAAUC,EAAyC,CAACC,EAAOC,KAC7D,MACIC,GAAAA,EACAC,MAAAA,EACAC,UAAAA,EACAX,UAAAA,EAAY,GACZY,UAAAA,EACAC,cAAAA,EACAC,SAAAA,EACAC,KAAAA,KACGC,GACHT,EAEEU,EAAQC,EAAMT,GAAM,cAAe,CAAEU,gBAAiBV,IAMtDW,EAJiBC,EAAMC,SAASC,IAClCT,EACCU,GAA2B,iBAAVA,KAEe,GAAK1B,EAAC,IAAA,CAAGgB,SAAAA,IAAgBA,EAE9D,OACIW,EAAC,MAAA,IACOT,EACJP,GAAAA,EACAD,IAAAA,EACAR,UAAW0B,EACP,cACA,gBAAgB7B,IAChBG,EACA,CACI,oBAAqBW,EACrB,yBAA0BC,IAGlCG,KAAAA,EAECD,SAAA,CAAAlB,EAAQC,GACT4B,EAAC,MAAA,CAAIzB,UAAU,uBACVc,SAAA,CAAAJ,GAASZ,EAAC,IAAA,CAAEE,UAAU,qBAAsBc,SAAAJ,IAC7CZ,EAAC,MAAA,CAAIE,UAAU,uBAAwBc,SAAAM,OAE1CP,GAAec,eACZ7B,EAAC8B,EAAA,CACG,gBAAeX,EACfjB,UAAU,8BACV6B,MAAOhB,EAAciB,aAAe,OACpCC,QAASlB,EAAcc,qBAO3CtB,OAAAA,EAAQ2B,YAAc,UAEf3B,CACX,CAEO,MAAMA,EAAUC,EACnB,CAACC,EAAOC,KACJ,MACIC,GAAAA,EACAC,MAAAA,EACAC,UAAAA,EACAX,UAAAA,EAAY,GACZY,UAAAA,EACAC,cAAAA,EACAC,SAAAA,EACAmB,QAAAA,EAAU,OACVlB,KAAAA,KACGC,GACHT,EAEEU,EAAQC,EAAMT,GAAM,cAAe,CAAEU,gBAAiBV,IAMtDW,EAJiBC,EAAMC,SAASC,IAClCT,EACCU,GAA2B,iBAAVA,KAEe,GAAK1B,EAAC,IAAA,CAAGgB,SAAAA,IAAgBA,EAE9D,OACIW,EAAC,MAAA,IACOT,EACJP,GAAAA,EACAD,IAAAA,EACAR,UAAW0B,EACP,cACA,gBAAgBO,IAChBjC,EACA,CACI,oBAAqBW,EACrB,yBAA0BC,IAGlCG,KAAAA,EAECD,SAAA,CAAAlB,EAAQqC,GACTR,EAAC,MAAA,CAAIzB,UAAU,uBACVc,SAAA,CAAAJ,GAASZ,EAAC,IAAA,CAAEE,UAAU,qBAAsBc,SAAAJ,IAC7CZ,EAAC,MAAA,CAAIE,UAAU,uBAAwBc,SAAAM,OAE1CP,GAAec,eACZ7B,EAAC8B,EAAA,CACG,gBAAeX,EACfjB,UAAU,8BACV6B,MAAOhB,EAAciB,aAAe,OACpCC,QAASlB,EAAcc,qBAWlCO,EAAc9B,EAAe,QAC1C8B,EAAYF,YAAc,cAInB,MAAMG,EAAe/B,EAAe,SAC3C+B,EAAaH,YAAc,eAIpB,MAAMI,EAAiBhC,EAAe,WAC7CgC,EAAeJ,YAAc,iBAItB,MAAMK,EAAiBjC,EAAe,WAC7CiC,EAAeL,YAAc"}
+{"version":3,"file":"Message.js","sources":["../../../../src/components/message/Message.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport { DismissButton } from \"./DismissButton.js\";\nimport type { MessageProps } from \"./types.js\";\n\nconst getIcon = (messageType: MessageProps[\"variant\"]) => {\n    switch (messageType) {\n        case \"error\":\n            return <ErrorIcon className=\"jkl-message__icon\" />;\n        case \"info\":\n            return <InfoIcon className=\"jkl-message__icon\" />;\n        case \"success\":\n            return <SuccessIcon className=\"jkl-message__icon\" />;\n        case \"warning\":\n            return <WarningIcon className=\"jkl-message__icon\" />;\n        default:\n            return null;\n    }\n};\n\nfunction messageFactory(messageType: MessageProps[\"variant\"]) {\n    const Message = forwardRef<HTMLDivElement, MessageProps>((props, ref) => {\n        const {\n            id,\n            title,\n            fullWidth,\n            className = \"\",\n            dismissed,\n            dismissAction,\n            children,\n            role,\n            ...rest\n        } = props;\n\n        const boxId = useId(id || \"jkl-message\", { generateSuffix: !id });\n\n        const hasStringChild = React.Children.map(\n            children,\n            (child) => typeof child === \"string\",\n        );\n        const newChildren = hasStringChild?.[0] ? <p>{children}</p> : children;\n\n        return (\n            <div\n                {...rest}\n                id={id}\n                ref={ref}\n                className={clsx(\"jkl-message\", className, {\n                    \"jkl-message--full\": fullWidth,\n                    \"jkl-message--dismissed\": dismissed,\n                })}\n                data-color={messageType}\n                role={role}\n            >\n                {getIcon(messageType)}\n                <div className=\"jkl-message__content\">\n                    {title && <p className=\"jkl-message__title\">{title}</p>}\n                    <div className=\"jkl-message__message\">{newChildren}</div>\n                </div>\n                {dismissAction?.handleDismiss && (\n                    <DismissButton\n                        aria-controls={boxId}\n                        className=\"jkl-message__dismiss-button\"\n                        label={dismissAction.buttonTitle || \"Lukk\"}\n                        onClick={dismissAction.handleDismiss}\n                    />\n                )}\n            </div>\n        );\n    });\n\n    Message.displayName = \"Message\";\n\n    return Message;\n}\n\nexport const Message = forwardRef<HTMLDivElement, MessageProps>(\n    (props, ref) => {\n        const {\n            id,\n            title,\n            fullWidth,\n            className = \"\",\n            dismissed,\n            dismissAction,\n            children,\n            variant = \"info\",\n            role,\n            ...rest\n        } = props;\n\n        const boxId = useId(id || \"jkl-message\", { generateSuffix: !id });\n\n        const hasStringChild = React.Children.map(\n            children,\n            (child) => typeof child === \"string\",\n        );\n        const newChildren = hasStringChild?.[0] ? <p>{children}</p> : children;\n\n        return (\n            <div\n                {...rest}\n                id={id}\n                ref={ref}\n                className={clsx(\"jkl-message\", className, {\n                    \"jkl-message--full\": fullWidth,\n                    \"jkl-message--dismissed\": dismissed,\n                })}\n                data-testid=\"jkl-message\"\n                data-color={variant}\n                role={role}\n            >\n                {getIcon(variant)}\n                <div className=\"jkl-message__content\">\n                    {title && <p className=\"jkl-message__title\">{title}</p>}\n                    <div className=\"jkl-message__message\">{newChildren}</div>\n                </div>\n                {dismissAction?.handleDismiss && (\n                    <DismissButton\n                        aria-controls={boxId}\n                        className=\"jkl-message__dismiss-button\"\n                        label={dismissAction.buttonTitle || \"Lukk\"}\n                        onClick={dismissAction.handleDismiss}\n                    />\n                )}\n            </div>\n        );\n    },\n);\n\n/**\n * @deprecated bruk Message med variant=\"info\"\n */\nexport const InfoMessage = messageFactory(\"info\");\nInfoMessage.displayName = \"InfoMessage\";\n/**\n * @deprecated bruk Message med variant=\"error\"\n */\nexport const ErrorMessage = messageFactory(\"error\");\nErrorMessage.displayName = \"ErrorMessage\";\n/**\n * @deprecated bruk Message med variant=\"warning\"\n */\nexport const WarningMessage = messageFactory(\"warning\");\nWarningMessage.displayName = \"WarningMessage\";\n/**\n * @deprecated bruk Message med variant=\"success\"\n */\nexport const SuccessMessage = messageFactory(\"success\");\nSuccessMessage.displayName = \"SuccessMessage\";\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","messageFactory","Message","forwardRef","props","ref","id","title","fullWidth","dismissed","dismissAction","children","role","rest","boxId","useId","generateSuffix","newChildren","React","Children","map","child","jsxs","clsx","handleDismiss","DismissButton","label","buttonTitle","onClick","displayName","variant","InfoMessage","ErrorMessage","WarningMessage","SuccessMessage"],"mappings":"8cAUA,MAAMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACD,OAAOC,EAACC,EAAA,CAAUC,UAAU,sBAChC,IAAK,OACD,OAAOF,EAACG,EAAA,CAASD,UAAU,sBAC/B,IAAK,UACD,OAAOF,EAACI,EAAA,CAAYF,UAAU,sBAClC,IAAK,UACD,OAAOF,EAACK,EAAA,CAAYH,UAAU,sBAClC,QACI,OAAO,OAInB,SAASI,EAAeP,GACpB,MAAMQ,EAAUC,EAAyC,CAACC,EAAOC,KAC7D,MACIC,GAAAA,EACAC,MAAAA,EACAC,UAAAA,EACAX,UAAAA,EAAY,GACZY,UAAAA,EACAC,cAAAA,EACAC,SAAAA,EACAC,KAAAA,KACGC,GACHT,EAEEU,EAAQC,EAAMT,GAAM,cAAe,CAAEU,gBAAiBV,IAMtDW,EAJiBC,EAAMC,SAASC,IAClCT,EACCU,GAA2B,iBAAVA,KAEe,GAAK1B,EAAC,IAAA,CAAGgB,SAAAA,IAAgBA,EAE9D,OACIW,EAAC,MAAA,IACOT,EACJP,GAAAA,EACAD,IAAAA,EACAR,UAAW0B,EAAK,cAAe1B,EAAW,CACtC,oBAAqBW,EACrB,yBAA0BC,IAE9B,aAAYf,EACZkB,KAAAA,EAECD,SAAA,CAAAlB,EAAQC,GACT4B,EAAC,MAAA,CAAIzB,UAAU,uBACVc,SAAA,CAAAJ,GAASZ,EAAC,IAAA,CAAEE,UAAU,qBAAsBc,SAAAJ,IAC7CZ,EAAC,MAAA,CAAIE,UAAU,uBAAwBc,SAAAM,OAE1CP,GAAec,eACZ7B,EAAC8B,EAAA,CACG,gBAAeX,EACfjB,UAAU,8BACV6B,MAAOhB,EAAciB,aAAe,OACpCC,QAASlB,EAAcc,qBAO3CtB,OAAAA,EAAQ2B,YAAc,UAEf3B,CACX,CAEO,MAAMA,EAAUC,EACnB,CAACC,EAAOC,KACJ,MACIC,GAAAA,EACAC,MAAAA,EACAC,UAAAA,EACAX,UAAAA,EAAY,GACZY,UAAAA,EACAC,cAAAA,EACAC,SAAAA,EACAmB,QAAAA,EAAU,OACVlB,KAAAA,KACGC,GACHT,EAEEU,EAAQC,EAAMT,GAAM,cAAe,CAAEU,gBAAiBV,IAMtDW,EAJiBC,EAAMC,SAASC,IAClCT,EACCU,GAA2B,iBAAVA,KAEe,GAAK1B,EAAC,IAAA,CAAGgB,SAAAA,IAAgBA,EAE9D,OACIW,EAAC,MAAA,IACOT,EACJP,GAAAA,EACAD,IAAAA,EACAR,UAAW0B,EAAK,cAAe1B,EAAW,CACtC,oBAAqBW,EACrB,yBAA0BC,IAE9B,cAAY,cACZ,aAAYqB,EACZlB,KAAAA,EAECD,SAAA,CAAAlB,EAAQqC,GACTR,EAAC,MAAA,CAAIzB,UAAU,uBACVc,SAAA,CAAAJ,GAASZ,EAAC,IAAA,CAAEE,UAAU,qBAAsBc,SAAAJ,IAC7CZ,EAAC,MAAA,CAAIE,UAAU,uBAAwBc,SAAAM,OAE1CP,GAAec,eACZ7B,EAAC8B,EAAA,CACG,gBAAeX,EACfjB,UAAU,8BACV6B,MAAOhB,EAAciB,aAAe,OACpCC,QAASlB,EAAcc,qBAWlCO,EAAc9B,EAAe,QAC1C8B,EAAYF,YAAc,cAInB,MAAMG,EAAe/B,EAAe,SAC3C+B,EAAaH,YAAc,eAIpB,MAAMI,EAAiBhC,EAAe,WAC7CgC,EAAeJ,YAAc,iBAItB,MAAMK,EAAiBjC,EAAe,WAC7CiC,EAAeL,YAAc"}

package/build/es/components/message/types.d.ts

@@ -1,3 +1,4 @@
+import { ColorMode } from '../../utilities/types.js';
 export interface MessageProps extends React.ComponentPropsWithoutRef<"div"> {
     fullWidth?: boolean;
     dismissed?: boolean;
@@ -5,7 +6,10 @@ export interface MessageProps extends React.ComponentPropsWithoutRef<"div"> {
         handleDismiss: () => void;
         buttonTitle?: string;
     };
-    variant?: "info" | "error" | "success" | "warning";
+    /**
+     * @default "info"
+     */
+    variant?: ColorMode;
 }
 export interface FormErrorMessageProps {
     className?: string;

package/build/es/components/notification-badge/NotificationBadge.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react';
+import { NotificationBadgeProps } from './types.js';
+export declare const NotificationBadge: ({ className, children, count, max, hideCounter, urgent, label, ...rest }: NotificationBadgeProps) => ReactNode;

package/build/es/components/notification-badge/NotificationBadge.js

@@ -0,0 +1,2 @@
+import{jsxs as a,Fragment as e,jsx as i}from"react/jsx-runtime";import{c as t}from"../../../clsx-BeLtu-UY.js";import n,{useId as o}from"react";function r(a,e){return a>e?`${e}+`:a}const s=({className:s,children:l,count:c,max:d=99,hideCounter:m,urgent:p=!1,label:u="varsler",...b})=>{const f=o(),g=`jkl-notification-badge-${f}`,h=`--jkl-notification-badge-anchor-${f.replace(/[^a-z0-9]/gi,"")}`,j=c>0,k=j?u:void 0;return a(e,{children:[n.isValidElement(l)?n.cloneElement(l,{"aria-describedby":t(l.props["aria-describedby"],j&&g)||void 0,className:t(l.props.className,"jkl-notification-badge-anchor"),style:{...l.props.style,"--jkl-notification-badge-anchor-name":h},title:l.props.title??k}):l,j?a("div",{className:t("jkl-notification-badge",m&&"jkl-notification-badge--dot",s),"data-urgent":p,"data-count":c,"data-hide-counter":m,...b,style:{...b.style,"--jkl-notification-badge-anchor-name":h},id:g,children:[m?null:i("span",{"aria-hidden":"true",children:r(c,d)}),i("div",{className:"jkl-sr-only",children:k})]}):null]})};export{s as NotificationBadge};
+//# sourceMappingURL=NotificationBadge.js.map

package/build/es/components/notification-badge/NotificationBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationBadge.js","sources":["../../../../src/components/notification-badge/NotificationBadge.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type CSSProperties, type ReactNode, useId } from \"react\";\nimport type { NotificationBadgeProps } from \"./types.js\";\n\nconst DEFAULT_LABEL = \"varsler\";\n\nfunction badgeValue(count: number, max: number) {\n    return count > max ? `${max}+` : count;\n}\n\nexport const NotificationBadge = ({\n    className,\n    children,\n    count,\n    max = 99,\n    hideCounter,\n    urgent = false,\n    label = DEFAULT_LABEL,\n    ...rest\n}: NotificationBadgeProps): ReactNode => {\n    const reactId = useId();\n    const badgeId = `jkl-notification-badge-${reactId}`;\n    const anchorName = `--jkl-notification-badge-anchor-${reactId.replace(/[^a-z0-9]/gi, \"\")}`;\n    const hasCount = count > 0;\n    const description = hasCount ? label : undefined;\n\n    return (\n        <>\n            {React.isValidElement(children)\n                ? React.cloneElement(children, {\n                      // Uten et varsel å peke på beholder ankeret bare sin egen\n                      // verdi, slik at attributtet utelates helt når den mangler.\n                      \"aria-describedby\":\n                          clsx(\n                              children.props[\"aria-describedby\"],\n                              hasCount && badgeId,\n                          ) || undefined,\n                      className: clsx(\n                          children.props.className,\n                          \"jkl-notification-badge-anchor\",\n                      ),\n                      style: {\n                          ...children.props.style,\n                          \"--jkl-notification-badge-anchor-name\": anchorName,\n                      } as CSSProperties,\n                      title: children.props.title ?? description,\n                  })\n                : children}\n            {hasCount ? (\n                <div\n                    className={clsx(\n                        \"jkl-notification-badge\",\n                        hideCounter && \"jkl-notification-badge--dot\",\n                        className,\n                    )}\n                    data-urgent={urgent}\n                    data-count={count}\n                    data-hide-counter={hideCounter}\n                    {...rest}\n                    style={\n                        {\n                            ...rest.style,\n                            \"--jkl-notification-badge-anchor-name\": anchorName,\n                        } as CSSProperties\n                    }\n                    id={badgeId}\n                >\n                    {hideCounter ? null : (\n                        <span aria-hidden=\"true\">{badgeValue(count, max)}</span>\n                    )}\n                    <div className=\"jkl-sr-only\">{description}</div>\n                </div>\n            ) : null}\n        </>\n    );\n};\n"],"names":["badgeValue","count","max","NotificationBadge","className","children","hideCounter","urgent","label","rest","reactId","useId","badgeId","anchorName","replace","hasCount","description","jsxs","Fragment","React","isValidElement","cloneElement","clsx","props","style","title","id","jsx"],"mappings":"+IAMA,SAASA,EAAWC,EAAeC,GAC/B,OAAOD,EAAQC,EAAM,GAAGA,KAASD,CACrC,CAEO,MAAME,EAAoB,EAC7BC,UAAAA,EACAC,SAAAA,EACAJ,MAAAA,EACAC,IAAAA,EAAM,GACNI,YAAAA,EACAC,OAAAA,GAAS,EACTC,MAAAA,EAbkB,aAcfC,MAEH,MAAMC,EAAUC,IACVC,EAAU,0BAA0BF,IACpCG,EAAa,mCAAmCH,EAAQI,QAAQ,cAAe,MAC/EC,EAAWd,EAAQ,EACnBe,EAAcD,EAAWP,OAAQ,EAEvC,OACIS,EAAAC,EAAA,CACKb,SAAA,CAAAc,EAAMC,eAAef,GAChBc,EAAME,aAAahB,EAAU,CAGzB,mBACIiB,EACIjB,EAASkB,MAAM,oBACfR,GAAYH,SACX,EACTR,UAAWkB,EACPjB,EAASkB,MAAMnB,UACf,iCAEJoB,MAAO,IACAnB,EAASkB,MAAMC,MAClB,uCAAwCX,GAE5CY,MAAOpB,EAASkB,MAAME,OAAST,IAEnCX,EACLU,EACGE,EAAC,MAAA,CACGb,UAAWkB,EACP,yBACAhB,GAAe,8BACfF,GAEJ,cAAaG,EACb,aAAYN,EACZ,oBAAmBK,KACfG,EACJe,MACI,IACOf,EAAKe,MACR,uCAAwCX,GAGhDa,GAAId,EAEHP,SAAA,CAAAC,EAAc,OACV,OAAA,CAAK,cAAY,OAAQD,SAAAL,EAAWC,EAAOC,KAEhDyB,EAAC,MAAA,CAAIvB,UAAU,cAAeC,SAAAW,OAElC"}

package/build/es/components/notification-badge/index.d.ts

@@ -0,0 +1,2 @@
+export type { NotificationBadgeProps } from './types.js';
+export { NotificationBadge } from './NotificationBadge.js';

package/build/es/components/notification-badge/index.js

@@ -0,0 +1,2 @@
+import{NotificationBadge as i}from"./NotificationBadge.js";export{i as NotificationBadge};
+//# sourceMappingURL=index.js.map

package/build/es/components/notification-badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/es/components/notification-badge/types.d.ts

@@ -0,0 +1,40 @@
+import { HTMLAttributes, ReactElement } from 'react';
+export interface NotificationBadgeProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Antall varsler
+     */
+    count: number;
+    /**
+     * Høyeste tall som vises før det blir "+".
+     *
+     * @default 99
+     */
+    max?: number;
+    /**
+     * Skjuler tallene visuelt, så det bare vises en prikk. Antallet leses fortsatt opp av skjermlesere.
+     */
+    hideCounter?: boolean;
+    /**
+     * Elementet varselet skal plasseres på. Må være kun ett element, og klikkbart, for å kunne brukes.
+     */
+    children?: ReactElement<HTMLAttributes<HTMLElement>>;
+    /**
+     * Teksten skjermlesere får, og tittelen på ankeret. Brukes ordrett, slik du
+     * sender den inn.
+     *
+     * Antallet vises bare visuelt, så dette er eneste sted skjermlesere kan få
+     * det. Ta det med i strengen, og hold den i takt med `count`.
+     *
+     * @example `${antallMeldinger} uleste meldinger`
+     * @example "4 produkter"
+     *
+     * @default varsler
+     */
+    label?: string;
+    /**
+     * Endrer farge fra kontrastfarge til en rød-farge.
+     *
+     * @default false
+     */
+    urgent?: boolean;
+}

package/build/es/components/notification-badge/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/build/es/components/notification-badge/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/es/components/number-input/NumberInput.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-export declare const NumberInput: React.ForwardRefExoticComponent<Omit<import('../input-group/types.js').InputGroupProps, "children" | "inline" | "render"> & Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "type"> & {
+export declare const NumberInput: React.ForwardRefExoticComponent<Omit<import('../input-group/types.js').InputGroupProps, "children" | "inline" | "render"> & Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled" | "children" | "type" | "readOnly"> & import('../../utilities/types.js').WithDisabled & import('../../utilities/types.js').WithReadOnly & {
     align?: "left" | "right";
     width?: string;
     inputClassName?: string;

package/build/es/components/number-input/types.d.ts

@@ -1,6 +1,7 @@
 import { InputHTMLAttributes } from 'react';
+import { WithDisabled, WithReadOnly } from '../../utilities/types.js';
 import { InputGroupProps } from '../input-group/types.js';
-export type NumberInputProps = Omit<InputGroupProps, "children" | "inline" | "render"> & Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "type"> & {
+export type NumberInputProps = Omit<InputGroupProps, "children" | "inline" | "render"> & Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "type" | "disabled" | "readOnly"> & WithDisabled & WithReadOnly & {
     /**
      * Justerer teksten i inputfeltet.
      * @default "left"

package/build/es/components/radio-button/types.d.ts

@@ -1,11 +1,12 @@
 import { ChangeEventHandler, InputHTMLAttributes, ReactNode } from 'react';
+import { WithDisabled } from '../../utilities/types.js';
 import { FieldGroupProps, SupportLabelProps } from '../input-group/types.js';
 export interface BaseRadioButtonProps extends RadioButtonProps {
     inline?: boolean;
     invalid?: boolean;
     onChange?: ChangeEventHandler<HTMLInputElement>;
 }
-export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "children"> {
+export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "disabled">, WithDisabled {
     children?: ReactNode;
     value: string;
     /** Kan også settes på RadioButtonGroup, men settes på RadioButton f. eks. av react-hook-form */

package/build/es/components/search/Search.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import{c as s}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t,useRef as o,useCallback as a}from"react";import{mergeRefs as l}from"../../utilities/mergeRefs.js";import"../../hooks/useId/useId.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import{InputGroup as n}from"../input-group/InputGroup.js";import{SearchButton as c}from"./SearchButton.js";const i=t(function(t,c){const{label:i="Søk",className:p,errorLabel:u,helpLabel:m,labelProps:h={srOnly:!0},supportLabelProps:b,tooltip:d,description:f,name:j="q",placeholder:k="Søk",spellCheck:I=!1,icon:L="search",children:g,...w}=t,y={label:i,errorLabel:u,helpLabel:m,labelProps:h,supportLabelProps:b,tooltip:d,description:f},S=o(null),v=l(S,c),x=a(()=>{if(S.current){Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value")?.set?.call(S.current,"");const e=new Event("change",{bubbles:!0});S.current.dispatchEvent(e),S.current.focus()}},[]);return e("div",{className:s("jkl-search",p),children:[r(n,{...y,label:i,"data-testid":"jkl-search",render:s=>e("div",{className:"input-wrapper","data-icon":L,children:[r("input",{ref:v,type:"search",name:j,placeholder:k,spellCheck:I,...s,...w}),r("button",{className:"clear-button",type:"button",onClick:x,children:r("span",{className:"jkl-sr-only",children:"Tilbakestill søkefeltet"})})]})}),g]})});i.Button=c;export{i as Search};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{c as s}from"../../../clsx-BeLtu-UY.js";import{forwardRef as a,useRef as t,useCallback as l}from"react";import{mergeRefs as o}from"../../utilities/mergeRefs.js";import"../../hooks/useId/useId.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import{InputGroup as n}from"../input-group/InputGroup.js";import{SearchButton as c}from"./SearchButton.js";const i=a(function(a,c){const{label:i="Søk",className:p,errorLabel:u,helpLabel:d,labelProps:m={srOnly:!0},supportLabelProps:b,tooltip:h,description:j,name:f="q",placeholder:k="Søk",spellCheck:y=!1,icon:I="search",children:v,disabled:L,readOnly:g,...w}=a,S={label:i,errorLabel:u,helpLabel:d,labelProps:m,supportLabelProps:b,tooltip:h,description:j},x=t(null),N=o(x,c),O=l(()=>{if(x.current){Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value")?.set?.call(x.current,"");const e=new Event("change",{bubbles:!0});x.current.dispatchEvent(e),x.current.focus()}},[]);return e("div",{className:s("jkl-search",p),children:e(n,{...S,label:i,"data-testid":"jkl-search",render:s=>r("div",{className:"jkl-search__wrapper","data-icon":I,"data-invalid":s["aria-invalid"],children:[e("input",{ref:N,type:"search",name:f,placeholder:k,spellCheck:y,...s,...w,disabled:L,readOnly:g}),e("button",{className:"jkl-search__clear-button",type:"button",onClick:O,disabled:L||g,children:e("span",{className:"jkl-sr-only",children:"Tilbakestill søkefeltet"})}),v]})})})});i.Button=c;export{i as Search};
 //# sourceMappingURL=Search.js.map

package/build/es/components/search/Search.js.map

@@ -1 +1 @@
-{"version":3,"file":"Search.js","sources":["../../../../src/components/search/Search.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\nimport { mergeRefs } from \"../../utilities/mergeRefs.js\";\nimport { InputGroup } from \"../input-group/index.js\";\nimport { SearchButton } from \"./SearchButton.js\";\nimport type { SearchInputProps } from \"./types.js\";\n\nexport const Search = forwardRef<HTMLInputElement, SearchInputProps>(\n    function Search(props, forwardedRef): React.JSX.Element {\n        const {\n            label = \"Søk\",\n            className,\n            errorLabel,\n            helpLabel,\n            labelProps = { srOnly: true },\n            supportLabelProps,\n            tooltip,\n            description,\n            name = \"q\",\n            placeholder = \"Søk\",\n            spellCheck = false,\n            icon = \"search\",\n            children,\n            ...rest\n        } = props;\n\n        const inputGroupProps = {\n            label,\n            errorLabel,\n            helpLabel,\n            labelProps,\n            supportLabelProps,\n            tooltip,\n            description,\n        };\n\n        const internalRef = useRef<HTMLInputElement>(null);\n        const ref = mergeRefs(internalRef, forwardedRef);\n\n        const clearInput = useCallback(() => {\n            if (internalRef.current) {\n                const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n                    window.HTMLInputElement.prototype,\n                    \"value\",\n                )?.set;\n                nativeInputValueSetter?.call(internalRef.current, \"\");\n                const event = new Event(\"change\", { bubbles: true });\n                internalRef.current.dispatchEvent(event);\n                internalRef.current.focus();\n            }\n        }, []);\n\n        return (\n            <div className={clsx(\"jkl-search\", className)}>\n                <InputGroup\n                    {...inputGroupProps}\n                    label={label}\n                    data-testid=\"jkl-search\"\n                    render={(inputProps) => (\n                        <div className=\"input-wrapper\" data-icon={icon}>\n                            <input\n                                ref={ref}\n                                type=\"search\"\n                                name={name}\n                                placeholder={placeholder}\n                                spellCheck={spellCheck}\n                                {...inputProps}\n                                {...rest}\n                            />\n                            <button\n                                className=\"clear-button\"\n                                type=\"button\"\n                                onClick={clearInput}\n                            >\n                                <span className=\"jkl-sr-only\">\n                                    Tilbakestill søkefeltet\n                                </span>\n                            </button>\n                        </div>\n                    )}\n                />\n                {children}\n            </div>\n        );\n    },\n) as ReturnType<typeof forwardRef<HTMLInputElement, SearchInputProps>> & {\n    Button: typeof SearchButton;\n};\n\nSearch.Button = SearchButton;\n"],"names":["Search","forwardRef","props","forwardedRef","label","className","errorLabel","helpLabel","labelProps","srOnly","supportLabelProps","tooltip","description","name","placeholder","spellCheck","icon","children","rest","inputGroupProps","internalRef","useRef","ref","mergeRefs","clearInput","useCallback","current","Object","getOwnPropertyDescriptor","window","HTMLInputElement","prototype","set","call","event","Event","bubbles","dispatchEvent","focus","clsx","jsx","InputGroup","render","inputProps","jsxs","type","onClick","Button","SearchButton"],"mappings":"odAOO,MAAMA,EAASC,EAClB,SAAgBC,EAAOC,GACnB,MACIC,MAAAA,EAAQ,MACRC,UAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EAAa,CAAEC,QAAQ,GACvBC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,IACPC,YAAAA,EAAc,MACdC,WAAAA,GAAa,EACbC,KAAAA,EAAO,SACPC,SAAAA,KACGC,GACHhB,EAEEiB,EAAkB,CACpBf,MAAAA,EACAE,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAE,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,GAGEQ,EAAcC,EAAyB,MACvCC,EAAMC,EAAUH,EAAajB,GAE7BqB,EAAaC,EAAY,KAC3B,GAAIL,EAAYM,QAAS,CACUC,OAAOC,yBAClCC,OAAOC,iBAAiBC,UACxB,UACDC,KACqBC,KAAKb,EAAYM,QAAS,IAClD,MAAMQ,EAAQ,IAAIC,MAAM,SAAU,CAAEC,SAAS,IAC7ChB,EAAYM,QAAQW,cAAcH,GAClCd,EAAYM,QAAQY,OACxB,GACD,IAEH,SACK,MAAA,CAAIjC,UAAWkC,EAAK,aAAclC,GAC/BY,SAAA,CAAAuB,EAACC,EAAA,IACOtB,EACJf,MAAAA,EACA,cAAY,aACZsC,OAASC,GACLC,EAAC,OAAIvC,UAAU,gBAAgB,YAAWW,EACtCC,SAAA,CAAAuB,EAAC,QAAA,CACGlB,IAAAA,EACAuB,KAAK,SACLhC,KAAAA,EACAC,YAAAA,EACAC,WAAAA,KACI4B,KACAzB,IAERsB,EAAC,SAAA,CACGnC,UAAU,eACVwC,KAAK,SACLC,QAAStB,EAETP,SAAAuB,EAAC,OAAA,CAAKnC,UAAU,cAAcY,SAAA,mCAO7CA,IAGb,GAKJjB,EAAO+C,OAASC"}
+{"version":3,"file":"Search.js","sources":["../../../../src/components/search/Search.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\nimport { mergeRefs } from \"../../utilities/mergeRefs.js\";\nimport { InputGroup } from \"../input-group/index.js\";\nimport { SearchButton } from \"./SearchButton.js\";\nimport type { SearchInputProps } from \"./types.js\";\n\nexport const Search = forwardRef<HTMLInputElement, SearchInputProps>(\n    function Search(props, forwardedRef): React.JSX.Element {\n        const {\n            label = \"Søk\",\n            className,\n            errorLabel,\n            helpLabel,\n            labelProps = { srOnly: true },\n            supportLabelProps,\n            tooltip,\n            description,\n            name = \"q\",\n            placeholder = \"Søk\",\n            spellCheck = false,\n            icon = \"search\",\n            children,\n            disabled,\n            readOnly,\n            ...rest\n        } = props;\n\n        const inputGroupProps = {\n            label,\n            errorLabel,\n            helpLabel,\n            labelProps,\n            supportLabelProps,\n            tooltip,\n            description,\n        };\n\n        const internalRef = useRef<HTMLInputElement>(null);\n        const ref = mergeRefs(internalRef, forwardedRef);\n\n        const clearInput = useCallback(() => {\n            if (internalRef.current) {\n                const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n                    window.HTMLInputElement.prototype,\n                    \"value\",\n                )?.set;\n                nativeInputValueSetter?.call(internalRef.current, \"\");\n                const event = new Event(\"change\", { bubbles: true });\n                internalRef.current.dispatchEvent(event);\n                internalRef.current.focus();\n            }\n        }, []);\n\n        return (\n            <div className={clsx(\"jkl-search\", className)}>\n                <InputGroup\n                    {...inputGroupProps}\n                    label={label}\n                    data-testid=\"jkl-search\"\n                    render={(inputProps) => (\n                        <div\n                            className=\"jkl-search__wrapper\"\n                            data-icon={icon}\n                            data-invalid={inputProps[\"aria-invalid\"]}\n                        >\n                            <input\n                                ref={ref}\n                                type=\"search\"\n                                name={name}\n                                placeholder={placeholder}\n                                spellCheck={spellCheck}\n                                {...inputProps}\n                                {...rest}\n                                disabled={disabled}\n                                readOnly={readOnly}\n                            />\n                            <button\n                                className=\"jkl-search__clear-button\"\n                                type=\"button\"\n                                onClick={clearInput}\n                                disabled={disabled || readOnly}\n                            >\n                                <span className=\"jkl-sr-only\">\n                                    Tilbakestill søkefeltet\n                                </span>\n                            </button>\n                            {children}\n                        </div>\n                    )}\n                />\n            </div>\n        );\n    },\n) as ReturnType<typeof forwardRef<HTMLInputElement, SearchInputProps>> & {\n    Button: typeof SearchButton;\n};\n\nSearch.Button = SearchButton;\n"],"names":["Search","forwardRef","props","forwardedRef","label","className","errorLabel","helpLabel","labelProps","srOnly","supportLabelProps","tooltip","description","name","placeholder","spellCheck","icon","children","disabled","readOnly","rest","inputGroupProps","internalRef","useRef","ref","mergeRefs","clearInput","useCallback","current","Object","getOwnPropertyDescriptor","window","HTMLInputElement","prototype","set","call","event","Event","bubbles","dispatchEvent","focus","clsx","jsx","InputGroup","render","inputProps","jsxs","type","onClick","Button","SearchButton"],"mappings":"odAOO,MAAMA,EAASC,EAClB,SAAgBC,EAAOC,GACnB,MACIC,MAAAA,EAAQ,MACRC,UAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EAAa,CAAEC,QAAQ,GACvBC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,IACPC,YAAAA,EAAc,MACdC,WAAAA,GAAa,EACbC,KAAAA,EAAO,SACPC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,KACGC,GACHlB,EAEEmB,EAAkB,CACpBjB,MAAAA,EACAE,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAE,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,GAGEU,EAAcC,EAAyB,MACvCC,EAAMC,EAAUH,EAAanB,GAE7BuB,EAAaC,EAAY,KAC3B,GAAIL,EAAYM,QAAS,CACUC,OAAOC,yBAClCC,OAAOC,iBAAiBC,UACxB,UACDC,KACqBC,KAAKb,EAAYM,QAAS,IAClD,MAAMQ,EAAQ,IAAIC,MAAM,SAAU,CAAEC,SAAS,IAC7ChB,EAAYM,QAAQW,cAAcH,GAClCd,EAAYM,QAAQY,OACxB,GACD,IAEH,SACK,MAAA,CAAInC,UAAWoC,EAAK,aAAcpC,GAC/BY,SAAAyB,EAACC,EAAA,IACOtB,EACJjB,MAAAA,EACA,cAAY,aACZwC,OAASC,GACLC,EAAC,MAAA,CACGzC,UAAU,sBACV,YAAWW,EACX,eAAc6B,EAAW,gBAEzB5B,SAAA,CAAAyB,EAAC,QAAA,CACGlB,IAAAA,EACAuB,KAAK,SACLlC,KAAAA,EACAC,YAAAA,EACAC,WAAAA,KACI8B,KACAzB,EACJF,SAAAA,EACAC,SAAAA,IAEJuB,EAAC,SAAA,CACGrC,UAAU,2BACV0C,KAAK,SACLC,QAAStB,EACTR,SAAUA,GAAYC,EAEtBF,SAAAyB,EAAC,OAAA,CAAKrC,UAAU,cAAcY,SAAA,8BAIjCA,QAMzB,GAKJjB,EAAOiD,OAASC"}

package/build/es/components/search/types.d.ts

@@ -1,6 +1,7 @@
 import { ButtonHTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
+import { WithDisabled, WithReadOnly } from '../../utilities/types.js';
 import { InputGroupProps } from '../input-group/types.js';
-export type SearchInputProps = Omit<InputGroupProps, "children" | "inline" | "label"> & InputHTMLAttributes<HTMLInputElement> & {
+export type SearchInputProps = Omit<InputGroupProps, "children" | "inline" | "label"> & Omit<InputHTMLAttributes<HTMLInputElement>, "disabled" | "readOnly"> & WithDisabled & WithReadOnly & {
     /**
      * Label til søket. Bruk {@link LabelProps} for å vise den.
      */

package/build/es/components/select/Option.d.ts

@@ -5,7 +5,7 @@ export type OptionProps = Omit<ComponentPropsWithoutRef<"button">, "aria-selecte
     selected?: boolean;
     selectRef: RefObject<HTMLSelectElement>;
 };
-export declare const Option: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children" | "role" | "aria-selected" | "type" | "value"> & ValuePair & {
+export declare const Option: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "role" | "aria-selected" | "children" | "type" | "value"> & ValuePair & {
     multiple?: boolean;
     selected?: boolean;
     selectRef: RefObject<HTMLSelectElement>;

package/build/es/components/select/Select.d.ts

@@ -1,8 +1,8 @@
 import { ComponentPropsWithoutRef } from 'react';
-import { DataTestAutoId } from '../../utilities/types.js';
+import { DataTestAutoId, WithDisabled } from '../../utilities/types.js';
 import { ValuePair } from '../../utilities/valuePair.js';
 import { InputGroupProps } from '../input-group/types.js';
-export type SelectProps = Omit<InputGroupProps, "children" | "inline"> & DataTestAutoId & Omit<ComponentPropsWithoutRef<"select">, "size" | "children"> & {
+export type SelectProps = Omit<InputGroupProps, "children" | "inline"> & DataTestAutoId & Omit<ComponentPropsWithoutRef<"select">, "size" | "children" | "disabled"> & WithDisabled & {
     width?: string;
     items: (string | ValuePair)[];
     placeholder?: string;

package/build/es/components/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {\n    type CSSProperties,\n    type ComponentPropsWithoutRef,\n    type FocusEvent,\n    type KeyboardEvent,\n    forwardRef,\n    useId,\n    useLayoutEffect,\n    useRef,\n    useState,\n} from \"react\";\nimport { useListNavigation } from \"../../hooks/index.js\";\nimport { mergeRefs } from \"../../utilities/mergeRefs.js\";\nimport type { DataTestAutoId } from \"../../utilities/types.js\";\nimport { type ValuePair, getValuePair } from \"../../utilities/valuePair.js\";\nimport { Button } from \"../button/Button.js\";\nimport { Flex } from \"../flex/Flex.js\";\nimport { ArrowDownIcon, CloseIcon } from \"../icon/index.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport type { InputGroupProps } from \"../input-group/types.js\";\nimport { Search } from \"../search/Search.js\";\nimport { Text } from \"../typography/Text.js\";\nimport { Title } from \"../typography/Title.js\";\nimport { Option } from \"./Option.js\";\nimport { autofocus, getButtonText, getReactNodeText } from \"./utils.js\";\n\nexport type SelectProps = Omit<InputGroupProps, \"children\" | \"inline\"> &\n    DataTestAutoId &\n    Omit<ComponentPropsWithoutRef<\"select\">, \"size\" | \"children\"> & {\n        width?: string;\n        items: (string | ValuePair)[];\n        placeholder?: string;\n    } & (\n        | {\n              searchable: true;\n              onSearch?: (searchTerm: string) => void;\n              filterFunction?: (item: ValuePair, searchTerm: string) => boolean;\n          }\n        | {\n              searchable?: false;\n              onSearch?: never;\n              filterFunction?: never;\n          }\n    );\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n    function Select(props, externalRef) {\n        const {\n            label,\n            errorLabel,\n            helpLabel,\n            labelProps,\n            supportLabelProps,\n            tooltip,\n            description,\n            style,\n            className,\n            id: idProp,\n            items: rawItems,\n            multiple = false,\n            searchable = false,\n            onSearch,\n            filterFunction,\n            placeholder,\n            width,\n            value,\n            \"data-testautoid\": dataTestautoid,\n            \"data-size\": size,\n            ...elementProps\n        } = props;\n\n        const popoverRef = useRef<HTMLDivElement>(null);\n        const selectRef = useRef<HTMLSelectElement>(null);\n        const unifiedRef = mergeRefs(externalRef, selectRef);\n\n        const baseId = `jkl-select-${useId()}`;\n        const selectId = idProp ?? baseId;\n        const popoverId = `${selectId}-popover`;\n\n        const [filter, setFilter] = useState(\"\");\n        const [selected, setSelected] = useState(() => new Set<string>());\n\n        useListNavigation({ ref: popoverRef, disableTypeahead: searchable });\n\n        const items = rawItems.map(getValuePair);\n        const filteredItems =\n            searchable && filter\n                ? items.filter((item) =>\n                      filterFunction\n                          ? filterFunction(item, filter)\n                          : item.label\n                                .toLowerCase()\n                                .includes(filter.toLowerCase()),\n                  )\n                : items;\n\n        const showPlaceholder =\n            selected.size === 0 ||\n            (selected.size === 1 && placeholder && selected.has(\"\"));\n        const placeholderText = placeholder || \"Ingen valgt\";\n        const buttonText = getButtonText(selected, items, placeholderText);\n\n        /**\n         * Setter event-lyttere for å synkronisere verdier i det skjulte select-elementet med\n         * visningen i vår komponent, samt nullstilling av filter når menyen lukkes.\n         */\n        // biome-ignore lint/correctness/useExhaustiveDependencies:\n        useLayoutEffect(() => {\n            const select = selectRef.current;\n            const popover = popoverRef.current;\n            if (!select) return;\n\n            const syncSelected = () => {\n                setSelected(\n                    new Set(Array.from(select.selectedOptions, (o) => o.value)),\n                );\n            };\n\n            const resetFilterOnClose = (event: ToggleEvent) => {\n                if (event.newState === \"closed\") setFilter(\"\");\n            };\n\n            syncSelected();\n            popover?.addEventListener(\"toggle\", resetFilterOnClose);\n            select.addEventListener(\"change\", syncSelected);\n\n            return () => {\n                select.removeEventListener(\"change\", syncSelected);\n                popover?.removeEventListener(\"toggle\", resetFilterOnClose);\n            };\n        }, [multiple, rawItems]);\n\n        // biome-ignore lint/correctness/useExhaustiveDependencies: Oppdaterer visning når value settes\n        useLayoutEffect(() => {\n            setSelected(\n                new Set(\n                    Array.from(\n                        selectRef.current?.selectedOptions ?? [],\n                        (o) => o.value,\n                    ),\n                ),\n            );\n        }, [value, elementProps.defaultValue]);\n\n        /**\n         * Sørger for at menyen kan åpnes med piltastene slik som i native select\n         */\n        const openWithArrows = (event: KeyboardEvent) => {\n            if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n                event.preventDefault();\n                popoverRef.current?.showPopover?.();\n            }\n        };\n\n        /**\n         * Fyrer av focus- eller blur-event på det skjulte select-elementet når\n         * fokus går inn eller ut av komponenten, slik at f.eks. react-hook-form\n         * oppdaterer sin state riktig.\n         */\n        const syncFocus = (event: FocusEvent) => {\n            const sel = selectRef.current;\n            if (!popoverRef.current?.contains(event.relatedTarget)) {\n                if (!sel) return;\n                if ([\"focus\", \"focusin\"].includes(event.type)) {\n                    sel.dispatchEvent(new Event(\"focusin\", { bubbles: true }));\n                    sel.dispatchEvent(new Event(\"focus\", { bubbles: true }));\n                } else if ([\"blur\", \"focusout\"].includes(event.type)) {\n                    sel.dispatchEvent(new Event(\"focusout\", { bubbles: true }));\n                    sel.dispatchEvent(new Event(\"blur\", { bubbles: true }));\n                }\n            }\n        };\n\n        return (\n            <InputGroup\n                id={selectId}\n                label={label}\n                errorLabel={errorLabel}\n                helpLabel={helpLabel}\n                labelProps={labelProps}\n                supportLabelProps={supportLabelProps}\n                tooltip={tooltip}\n                description={description}\n                style={style}\n                data-testautoid={dataTestautoid}\n                data-size={size}\n                className={clsx(\"jkl-select\", className)}\n                render={(inputProps) => (\n                    <>\n                        <button\n                            aria-label={`${showPlaceholder ? placeholderText : buttonText}, ${getReactNodeText(label)}`}\n                            className=\"jkl-select__button\"\n                            data-testid=\"jkl-select__button\"\n                            disabled={elementProps.disabled}\n                            type=\"button\"\n                            // @ts-ignore\n                            popovertarget={popoverId}\n                            style={{ \"--width\": width } as CSSProperties}\n                            onKeyDown={openWithArrows}\n                            onFocus={syncFocus}\n                            onBlur={syncFocus}\n                            {...inputProps}\n                        >\n                            {showPlaceholder ? placeholderText : buttonText}\n                            <ArrowDownIcon />\n                        </button>\n                        <Flex\n                            direction=\"column\"\n                            gap=\"16\"\n                            ref={popoverRef}\n                            // @ts-ignore\n                            popover=\"auto\"\n                            id={popoverId}\n                            className=\"jkl-select__popover\"\n                            aria-label={getReactNodeText(label)}\n                        >\n                            <Flex\n                                as=\"header\"\n                                alignItems=\"start\"\n                                justifyContent=\"space-between\"\n                                gap=\"8\"\n                            >\n                                <Title\n                                    size=\"m\"\n                                    as=\"h3\"\n                                    id={`${selectId}-title`}\n                                >\n                                    {label}\n                                </Title>\n                                <Button\n                                    type=\"button\"\n                                    variant=\"ghost\"\n                                    icon={<CloseIcon />}\n                                    aria-label=\"Lukk\"\n                                    // @ts-ignore\n                                    popovertarget={popoverId}\n                                    popovertargetaction=\"hide\"\n                                />\n                            </Flex>\n                            {searchable && (\n                                <Search\n                                    value={filter}\n                                    onChange={(e) => {\n                                        setFilter(e.target.value);\n                                        onSearch?.(e.target.value);\n                                    }}\n                                    ref={autofocus(searchable)}\n                                    autoComplete=\"off\"\n                                    labelProps={{ srOnly: true }}\n                                    label=\"Søk\"\n                                    placeholder=\"Søk...\"\n                                    width=\"100%\"\n                                    className=\"jkl-spacing-8--bottom\"\n                                />\n                            )}\n                            <Flex\n                                direction=\"column\"\n                                gap=\"8\"\n                                // biome-ignore lint/a11y/useSemanticElements: Vi reimplementerer select\n                                role=\"listbox\"\n                                aria-multiselectable={multiple}\n                                aria-labelledby={`${selectId}-title`}\n                            >\n                                {filteredItems.map((pair, index) => (\n                                    <Option\n                                        {...pair}\n                                        key={pair.value}\n                                        selected={selected.has(pair.value)}\n                                        multiple={multiple}\n                                        selectRef={selectRef}\n                                        // @ts-ignore\n                                        popovertarget={\n                                            multiple ? undefined : popoverId\n                                        }\n                                        popovertargetaction={\n                                            multiple ? undefined : \"hide\"\n                                        }\n                                        ref={autofocus(() => {\n                                            if (searchable) return false;\n                                            if (showPlaceholder)\n                                                return index === 0;\n                                            return (\n                                                selected.has(pair.value) &&\n                                                filteredItems.findIndex((p) =>\n                                                    selected.has(p.value),\n                                                ) === index\n                                            );\n                                        })}\n                                    />\n                                ))}\n                                {searchable && !filteredItems.length && (\n                                    <Text short>Ingen treff</Text>\n                                )}\n                            </Flex>\n                            {multiple && (\n                                <Button\n                                    type=\"button\"\n                                    variant=\"primary\"\n                                    // @ts-ignore\n                                    popovertarget={popoverId}\n                                    popovertargetaction=\"hide\"\n                                >\n                                    Bekreft\n                                </Button>\n                            )}\n                        </Flex>\n                        <select\n                            defaultValue={\n                                !multiple && value === undefined && placeholder\n                                    ? \"\"\n                                    : undefined\n                            }\n                            {...elementProps}\n                            tabIndex={-1}\n                            value={value}\n                            multiple={multiple}\n                            ref={unifiedRef}\n                            aria-labelledby={inputProps.id}\n                        >\n                            {!multiple && placeholder && (\n                                <option value=\"\" disabled>\n                                    {placeholder}\n                                </option>\n                            )}\n                            {items.map((item) => (\n                                <option key={item.value} value={item.value}>\n                                    {item.label}\n                                </option>\n                            ))}\n                        </select>\n                    </>\n                )}\n            />\n        );\n    },\n);\n\nSelect.displayName = \"Select\";\n"],"names":["Select","forwardRef","props","externalRef","label","errorLabel","helpLabel","labelProps","supportLabelProps","tooltip","description","style","className","id","idProp","items","rawItems","multiple","searchable","onSearch","filterFunction","placeholder","width","value","dataTestautoid","size","elementProps","popoverRef","useRef","selectRef","unifiedRef","mergeRefs","baseId","useId","selectId","popoverId","filter","setFilter","useState","selected","setSelected","Set","useListNavigation","ref","disableTypeahead","map","getValuePair","filteredItems","item","toLowerCase","includes","showPlaceholder","has","placeholderText","buttonText","getButtonText","useLayoutEffect","select","current","popover","syncSelected","Array","from","selectedOptions","o","resetFilterOnClose","event","newState","addEventListener","removeEventListener","defaultValue","openWithArrows","key","preventDefault","showPopover","syncFocus","sel","contains","relatedTarget","type","dispatchEvent","Event","bubbles","jsx","InputGroup","clsx","render","inputProps","jsxs","Fragment","children","getReactNodeText","disabled","popovertarget","onKeyDown","onFocus","onBlur","ArrowDownIcon","Flex","direction","gap","as","alignItems","justifyContent","Title","Button","variant","icon","CloseIcon","popovertargetaction","Search","onChange","e","target","autofocus","autoComplete","srOnly","role","pair","index","createElement","Option","findIndex","p","length","Text","short","tabIndex","displayName"],"mappings":"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"}
+{"version":3,"file":"Select.js","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {\n    type CSSProperties,\n    type ComponentPropsWithoutRef,\n    type FocusEvent,\n    type KeyboardEvent,\n    forwardRef,\n    useId,\n    useLayoutEffect,\n    useRef,\n    useState,\n} from \"react\";\nimport { useListNavigation } from \"../../hooks/index.js\";\nimport { mergeRefs } from \"../../utilities/mergeRefs.js\";\nimport type { DataTestAutoId, WithDisabled } from \"../../utilities/types.js\";\nimport { type ValuePair, getValuePair } from \"../../utilities/valuePair.js\";\nimport { Button } from \"../button/Button.js\";\nimport { Flex } from \"../flex/Flex.js\";\nimport { ArrowDownIcon, CloseIcon } from \"../icon/index.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport type { InputGroupProps } from \"../input-group/types.js\";\nimport { Search } from \"../search/Search.js\";\nimport { Text } from \"../typography/Text.js\";\nimport { Title } from \"../typography/Title.js\";\nimport { Option } from \"./Option.js\";\nimport { autofocus, getButtonText, getReactNodeText } from \"./utils.js\";\n\nexport type SelectProps = Omit<InputGroupProps, \"children\" | \"inline\"> &\n    DataTestAutoId &\n    Omit<ComponentPropsWithoutRef<\"select\">, \"size\" | \"children\" | \"disabled\"> &\n    WithDisabled & {\n        width?: string;\n        items: (string | ValuePair)[];\n        placeholder?: string;\n    } & (\n        | {\n              searchable: true;\n              onSearch?: (searchTerm: string) => void;\n              filterFunction?: (item: ValuePair, searchTerm: string) => boolean;\n          }\n        | {\n              searchable?: false;\n              onSearch?: never;\n              filterFunction?: never;\n          }\n    );\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n    function Select(props, externalRef) {\n        const {\n            label,\n            errorLabel,\n            helpLabel,\n            labelProps,\n            supportLabelProps,\n            tooltip,\n            description,\n            style,\n            className,\n            id: idProp,\n            items: rawItems,\n            multiple = false,\n            searchable = false,\n            onSearch,\n            filterFunction,\n            placeholder,\n            width,\n            value,\n            \"data-testautoid\": dataTestautoid,\n            \"data-size\": size,\n            ...elementProps\n        } = props;\n\n        const popoverRef = useRef<HTMLDivElement>(null);\n        const selectRef = useRef<HTMLSelectElement>(null);\n        const unifiedRef = mergeRefs(externalRef, selectRef);\n\n        const baseId = `jkl-select-${useId()}`;\n        const selectId = idProp ?? baseId;\n        const popoverId = `${selectId}-popover`;\n\n        const [filter, setFilter] = useState(\"\");\n        const [selected, setSelected] = useState(() => new Set<string>());\n\n        useListNavigation({ ref: popoverRef, disableTypeahead: searchable });\n\n        const items = rawItems.map(getValuePair);\n        const filteredItems =\n            searchable && filter\n                ? items.filter((item) =>\n                      filterFunction\n                          ? filterFunction(item, filter)\n                          : item.label\n                                .toLowerCase()\n                                .includes(filter.toLowerCase()),\n                  )\n                : items;\n\n        const showPlaceholder =\n            selected.size === 0 ||\n            (selected.size === 1 && placeholder && selected.has(\"\"));\n        const placeholderText = placeholder || \"Ingen valgt\";\n        const buttonText = getButtonText(selected, items, placeholderText);\n\n        /**\n         * Setter event-lyttere for å synkronisere verdier i det skjulte select-elementet med\n         * visningen i vår komponent, samt nullstilling av filter når menyen lukkes.\n         */\n        // biome-ignore lint/correctness/useExhaustiveDependencies:\n        useLayoutEffect(() => {\n            const select = selectRef.current;\n            const popover = popoverRef.current;\n            if (!select) return;\n\n            const syncSelected = () => {\n                setSelected(\n                    new Set(Array.from(select.selectedOptions, (o) => o.value)),\n                );\n            };\n\n            const resetFilterOnClose = (event: ToggleEvent) => {\n                if (event.newState === \"closed\") setFilter(\"\");\n            };\n\n            syncSelected();\n            popover?.addEventListener(\"toggle\", resetFilterOnClose);\n            select.addEventListener(\"change\", syncSelected);\n\n            return () => {\n                select.removeEventListener(\"change\", syncSelected);\n                popover?.removeEventListener(\"toggle\", resetFilterOnClose);\n            };\n        }, [multiple, rawItems]);\n\n        // biome-ignore lint/correctness/useExhaustiveDependencies: Oppdaterer visning når value settes\n        useLayoutEffect(() => {\n            setSelected(\n                new Set(\n                    Array.from(\n                        selectRef.current?.selectedOptions ?? [],\n                        (o) => o.value,\n                    ),\n                ),\n            );\n        }, [value, elementProps.defaultValue]);\n\n        /**\n         * Sørger for at menyen kan åpnes med piltastene slik som i native select\n         */\n        const openWithArrows = (event: KeyboardEvent) => {\n            if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n                event.preventDefault();\n                popoverRef.current?.showPopover?.();\n            }\n        };\n\n        /**\n         * Fyrer av focus- eller blur-event på det skjulte select-elementet når\n         * fokus går inn eller ut av komponenten, slik at f.eks. react-hook-form\n         * oppdaterer sin state riktig.\n         */\n        const syncFocus = (event: FocusEvent) => {\n            const sel = selectRef.current;\n            if (!popoverRef.current?.contains(event.relatedTarget)) {\n                if (!sel) return;\n                if ([\"focus\", \"focusin\"].includes(event.type)) {\n                    sel.dispatchEvent(new Event(\"focusin\", { bubbles: true }));\n                    sel.dispatchEvent(new Event(\"focus\", { bubbles: true }));\n                } else if ([\"blur\", \"focusout\"].includes(event.type)) {\n                    sel.dispatchEvent(new Event(\"focusout\", { bubbles: true }));\n                    sel.dispatchEvent(new Event(\"blur\", { bubbles: true }));\n                }\n            }\n        };\n\n        return (\n            <InputGroup\n                id={selectId}\n                label={label}\n                errorLabel={errorLabel}\n                helpLabel={helpLabel}\n                labelProps={labelProps}\n                supportLabelProps={supportLabelProps}\n                tooltip={tooltip}\n                description={description}\n                style={style}\n                data-testautoid={dataTestautoid}\n                data-size={size}\n                className={clsx(\"jkl-select\", className)}\n                render={(inputProps) => (\n                    <>\n                        <button\n                            aria-label={`${showPlaceholder ? placeholderText : buttonText}, ${getReactNodeText(label)}`}\n                            className=\"jkl-select__button\"\n                            data-testid=\"jkl-select__button\"\n                            disabled={elementProps.disabled}\n                            type=\"button\"\n                            // @ts-ignore\n                            popovertarget={popoverId}\n                            style={{ \"--width\": width } as CSSProperties}\n                            onKeyDown={openWithArrows}\n                            onFocus={syncFocus}\n                            onBlur={syncFocus}\n                            {...inputProps}\n                        >\n                            {showPlaceholder ? placeholderText : buttonText}\n                            <ArrowDownIcon />\n                        </button>\n                        <Flex\n                            direction=\"column\"\n                            gap=\"16\"\n                            ref={popoverRef}\n                            // @ts-ignore\n                            popover=\"auto\"\n                            id={popoverId}\n                            className=\"jkl-select__popover\"\n                            aria-label={getReactNodeText(label)}\n                        >\n                            <Flex\n                                as=\"header\"\n                                alignItems=\"start\"\n                                justifyContent=\"space-between\"\n                                gap=\"8\"\n                            >\n                                <Title\n                                    size=\"m\"\n                                    as=\"h3\"\n                                    id={`${selectId}-title`}\n                                >\n                                    {label}\n                                </Title>\n                                <Button\n                                    type=\"button\"\n                                    variant=\"ghost\"\n                                    icon={<CloseIcon />}\n                                    aria-label=\"Lukk\"\n                                    // @ts-ignore\n                                    popovertarget={popoverId}\n                                    popovertargetaction=\"hide\"\n                                />\n                            </Flex>\n                            {searchable && (\n                                <Search\n                                    value={filter}\n                                    onChange={(e) => {\n                                        setFilter(e.target.value);\n                                        onSearch?.(e.target.value);\n                                    }}\n                                    ref={autofocus(searchable)}\n                                    autoComplete=\"off\"\n                                    labelProps={{ srOnly: true }}\n                                    label=\"Søk\"\n                                    placeholder=\"Søk...\"\n                                    width=\"100%\"\n                                    className=\"jkl-spacing-8--bottom\"\n                                />\n                            )}\n                            <Flex\n                                direction=\"column\"\n                                gap=\"8\"\n                                // biome-ignore lint/a11y/useSemanticElements: Vi reimplementerer select\n                                role=\"listbox\"\n                                aria-multiselectable={multiple}\n                                aria-labelledby={`${selectId}-title`}\n                            >\n                                {filteredItems.map((pair, index) => (\n                                    <Option\n                                        {...pair}\n                                        key={pair.value}\n                                        selected={selected.has(pair.value)}\n                                        multiple={multiple}\n                                        selectRef={selectRef}\n                                        // @ts-ignore\n                                        popovertarget={\n                                            multiple ? undefined : popoverId\n                                        }\n                                        popovertargetaction={\n                                            multiple ? undefined : \"hide\"\n                                        }\n                                        ref={autofocus(() => {\n                                            if (searchable) return false;\n                                            if (showPlaceholder)\n                                                return index === 0;\n                                            return (\n                                                selected.has(pair.value) &&\n                                                filteredItems.findIndex((p) =>\n                                                    selected.has(p.value),\n                                                ) === index\n                                            );\n                                        })}\n                                    />\n                                ))}\n                                {searchable && !filteredItems.length && (\n                                    <Text short>Ingen treff</Text>\n                                )}\n                            </Flex>\n                            {multiple && (\n                                <Button\n                                    type=\"button\"\n                                    variant=\"primary\"\n                                    // @ts-ignore\n                                    popovertarget={popoverId}\n                                    popovertargetaction=\"hide\"\n                                >\n                                    Bekreft\n                                </Button>\n                            )}\n                        </Flex>\n                        <select\n                            defaultValue={\n                                !multiple && value === undefined && placeholder\n                                    ? \"\"\n                                    : undefined\n                            }\n                            {...elementProps}\n                            tabIndex={-1}\n                            value={value}\n                            multiple={multiple}\n                            ref={unifiedRef}\n                            aria-labelledby={inputProps.id}\n                        >\n                            {!multiple && placeholder && (\n                                <option value=\"\" disabled>\n                                    {placeholder}\n                                </option>\n                            )}\n                            {items.map((item) => (\n                                <option key={item.value} value={item.value}>\n                                    {item.label}\n                                </option>\n                            ))}\n                        </select>\n                    </>\n                )}\n            />\n        );\n    },\n);\n\nSelect.displayName = \"Select\";\n"],"names":["Select","forwardRef","props","externalRef","label","errorLabel","helpLabel","labelProps","supportLabelProps","tooltip","description","style","className","id","idProp","items","rawItems","multiple","searchable","onSearch","filterFunction","placeholder","width","value","dataTestautoid","size","elementProps","popoverRef","useRef","selectRef","unifiedRef","mergeRefs","baseId","useId","selectId","popoverId","filter","setFilter","useState","selected","setSelected","Set","useListNavigation","ref","disableTypeahead","map","getValuePair","filteredItems","item","toLowerCase","includes","showPlaceholder","has","placeholderText","buttonText","getButtonText","useLayoutEffect","select","current","popover","syncSelected","Array","from","selectedOptions","o","resetFilterOnClose","event","newState","addEventListener","removeEventListener","defaultValue","openWithArrows","key","preventDefault","showPopover","syncFocus","sel","contains","relatedTarget","type","dispatchEvent","Event","bubbles","jsx","InputGroup","clsx","render","inputProps","jsxs","Fragment","children","getReactNodeText","disabled","popovertarget","onKeyDown","onFocus","onBlur","ArrowDownIcon","Flex","direction","gap","as","alignItems","justifyContent","Title","Button","variant","icon","CloseIcon","popovertargetaction","Search","onChange","e","target","autofocus","autoComplete","srOnly","role","pair","index","createElement","Option","findIndex","p","length","Text","short","tabIndex","displayName"],"mappings":"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"}