@fremtind/jokul 0.32.2 → 0.33.1

package/build/es/components/datepicker/DatePicker.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{startOfDay as r}from"date-fns";import{forwardRef as o,useState as n,useRef as l,useCallback as s}from"react";import{flushSync as i}from"react-dom";import{CalendarIcon as u}from"../icon/icons/CalendarIcon.js";import{IconButton as d}from"../icon-button/IconButton.js";import{InputGroup as p}from"../input-group/InputGroup.js";import{Popover as c}from"../popover/Popover.js";import{BaseTextInput as m}from"../text-input/BaseTextInput.js";import{Calendar as f}from"./internal/Calendar.js";import{getInitialDate as v}from"./internal/utils.js";import{parseDateString as h,formatInput as b}from"./utils.js";import{isWithinLowerBound as k,isWithinUpperBound as D}from"./validation.js";const g=o(((o,g)=>{const{"data-testautoid":y,id:j,className:L="",label:w="Velg dato",labelProps:C,defaultValue:P,defaultShow:I=!1,value:x,disableBeforeDate:B,disableAfterDate:_,yearsToShow:E,name:O,helpLabel:T,errorLabel:N,invalid:S,density:R,days:U,months:V,monthLabel:F,yearLabel:K,placeholder:W="dd.mm.åååå",width:A="11.25rem",onChange:G,onBlur:q,onFocus:H,onKeyDown:M,action:z,showCalendarLabel:J="Åpne kalender",hideCalendarLabel:Q="Lukk kalender",supportLabelProps:X,tooltipProps:Y,...Z}=o;"production"!==process.env.NODE_ENV&&x&&P&&console.warn("DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.");const $=h(B),ee=$?r($):void 0,te=h(_),ae=te?r(te):void 0,[re,oe]=n(v(x,P,ee,ae)),[ne,le]=n(null),[se,ie]=n(I),ue=l(null),de=l(null),pe=l(null),ce=l(null),me=s((e=>{ce.current=e,g&&("function"==typeof g?g(e):g.current=e)}),[ce,g]),fe=s((e=>{H&&de.current&&(de.current.contains(e.relatedTarget)||H(e,re,{error:ne,value:e.target.value}))}),[H,re,ne]),ve=s((e=>{q&&q(e,re,{error:ne,value:e.target.value})}),[q,re,ne]),he=s((e=>{"Escape"===e.key&&(ie(!1),e.preventDefault(),e.stopPropagation()),null!=z&&z.onKeyDown&&z.onKeyDown(e)}),[ie,z]),be=s((e=>{let t=null,a=null;if(e.target.value){const r=h(e.target.value);r?ee&&!k(r,ee)?a="OUTSIDE_LOWER_BOUND":ae&&!D(r,ae)?a="OUTSIDE_UPPER_BOUND":ie(!1):a="WRONG_FORMAT",t=r||null}le(a),oe(t),G&&G(e,t,{error:a,value:e.target.value})}),[G,le,oe,ie,ee,ae]),ke=s((e=>{i((()=>{ie(!se)}));const t=ue.current,a=t&&t.querySelector('[aria-pressed="true"]');window.requestAnimationFrame((()=>a&&a.focus())),null!=z&&z.onClick&&z.onClick(e)}),[ie,se,z,ue]),De=s((({date:e})=>{if(ie(!1),oe(e),ce.current){const t=ce.current;t.value=b(e);const a=document.createEvent("HTMLEvents");a.initEvent("input",!0,!1),t.dispatchEvent(a),t.focus(),G&&G(a,e,{error:null,value:t.value})}}),[ie,oe,G]),ge=s((e=>{e.preventDefault(),ie(!1),pe.current&&pe.current.focus()}),[ie]);return e(p,{id:j,className:a("jkl-datepicker",L,{"jkl-datepicker--open":se}),...Z,ref:de,label:w,labelProps:C,density:R,helpLabel:T,errorLabel:N,supportLabelProps:X,tooltipProps:Y,render:a=>e(m,{ref:me,"data-testid":"jkl-datepicker__input","data-testautoid":y,className:"jkl-datepicker__input",name:O,defaultValue:P,density:R,value:x,type:"text",placeholder:W,width:A,onFocus:fe,onBlur:ve,onChange:be,actionButton:t(c,{positionReference:ce,open:se,onOpenChange:()=>ie(!se),offset:8,children:[e(c.Trigger,{...z,"data-testid":"jkl-datepicker__trigger",className:"jkl-text-input-action-button",title:se?Q:J,tabIndex:0,onClick:ke,onKeyDown:he,asChild:!0,children:e(d,{children:e(u,{})})}),e(c.Content,{initialFocus:-1,padding:24,children:e(f,{ref:ue,density:R,date:re,minDate:ee,maxDate:ae,days:U,months:V,monthLabel:F,yearLabel:K,yearsToShow:E,onDateSelected:De,onTabOutside:ge})})]}),...a})})}));g.displayName="DatePicker";export{g as DatePicker};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{startOfDay as r}from"date-fns";import{forwardRef as n,useState as o,useRef as l,useCallback as s}from"react";import{flushSync as i}from"react-dom";import{CalendarIcon as u}from"../icon/icons/CalendarIcon.js";import{IconButton as d}from"../icon-button/IconButton.js";import{InputGroup as c}from"../input-group/InputGroup.js";import{Popover as p}from"../popover/Popover.js";import{BaseTextInput as m}from"../text-input/BaseTextInput.js";import{Calendar as f}from"./internal/Calendar.js";import{getInitialDate as v}from"./internal/utils.js";import{parseDateString as h,formatInput as b}from"./utils.js";import{isWithinLowerBound as k,isWithinUpperBound as D}from"./validation.js";const g=n(((n,g)=>{const{"data-testautoid":y,id:j,className:L="",label:w="Velg dato",labelProps:C,defaultValue:I,defaultShow:x=!1,value:B,disableBeforeDate:P,disableAfterDate:_,yearsToShow:E,name:O,helpLabel:T,errorLabel:N,invalid:S,density:R,days:U,months:V,monthLabel:F,yearLabel:K,placeholder:W="dd.mm.åååå",width:A="11.25rem",onChange:G,onBlur:q,onFocus:H,onKeyDown:M,action:z,showCalendarLabel:J="Åpne kalender",hideCalendarLabel:Q="Lukk kalender",supportLabelProps:X,tooltip:Y,...Z}=n;"production"!==process.env.NODE_ENV&&B&&I&&console.warn("DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.");const $=h(P),ee=$?r($):void 0,te=h(_),ae=te?r(te):void 0,[re,ne]=o(v(B,I,ee,ae)),[oe,le]=o(null),[se,ie]=o(x),ue=l(null),de=l(null),ce=l(null),pe=l(null),me=s((e=>{pe.current=e,g&&("function"==typeof g?g(e):g.current=e)}),[pe,g]),fe=s((e=>{H&&de.current&&(de.current.contains(e.relatedTarget)||H(e,re,{error:oe,value:e.target.value}))}),[H,re,oe]),ve=s((e=>{q&&q(e,re,{error:oe,value:e.target.value})}),[q,re,oe]),he=s((e=>{"Escape"===e.key&&(ie(!1),e.preventDefault(),e.stopPropagation()),null!=z&&z.onKeyDown&&z.onKeyDown(e)}),[ie,z]),be=s((e=>{let t=null,a=null;if(e.target.value){const r=h(e.target.value);r?ee&&!k(r,ee)?a="OUTSIDE_LOWER_BOUND":ae&&!D(r,ae)?a="OUTSIDE_UPPER_BOUND":ie(!1):a="WRONG_FORMAT",t=r||null}le(a),ne(t),G&&G(e,t,{error:a,value:e.target.value})}),[G,le,ne,ie,ee,ae]),ke=s((e=>{i((()=>{ie(!se)}));const t=ue.current,a=t&&t.querySelector('[aria-pressed="true"]');window.requestAnimationFrame((()=>a&&a.focus())),null!=z&&z.onClick&&z.onClick(e)}),[ie,se,z,ue]),De=s((({date:e})=>{if(ie(!1),ne(e),pe.current){const t=pe.current;t.value=b(e);const a=document.createEvent("HTMLEvents");a.initEvent("input",!0,!1),t.dispatchEvent(a),t.focus(),G&&G(a,e,{error:null,value:t.value})}}),[ie,ne,G]),ge=s((e=>{e.preventDefault(),ie(!1),ce.current&&ce.current.focus()}),[ie]);return e(c,{id:j,className:a("jkl-datepicker",L,{"jkl-datepicker--open":se}),...Z,ref:de,label:w,labelProps:C,density:R,helpLabel:T,errorLabel:N,supportLabelProps:X,tooltip:Y,render:a=>e(m,{ref:me,"data-testid":"jkl-datepicker__input","data-testautoid":y,className:"jkl-datepicker__input",name:O,defaultValue:I,density:R,value:B,type:"text",placeholder:W,width:A,onFocus:fe,onBlur:ve,onChange:be,actionButton:t(p,{positionReference:pe,open:se,onOpenChange:()=>ie(!se),offset:8,children:[e(p.Trigger,{...z,"data-testid":"jkl-datepicker__trigger",className:"jkl-text-input-action-button",title:se?Q:J,tabIndex:0,onClick:ke,onKeyDown:he,asChild:!0,children:e(d,{children:e(u,{})})}),e(p.Content,{initialFocus:-1,padding:24,children:e(f,{ref:ue,density:R,date:re,minDate:ee,maxDate:ae,days:U,months:V,monthLabel:F,yearLabel:K,yearsToShow:E,onDateSelected:De,onTabOutside:ge})})]}),...a})})}));g.displayName="DatePicker";export{g as DatePicker};
 //# sourceMappingURL=DatePicker.js.map

package/build/es/components/datepicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../../src/components/datepicker/DatePicker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { startOfDay } from \"date-fns\";\nimport React, {\n    ChangeEvent,\n    FocusEvent,\n    KeyboardEvent,\n    MouseEvent,\n    forwardRef,\n    useCallback,\n    useRef,\n    useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { CalendarIcon } from \"../icon/icons/CalendarIcon.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport Popover from \"../popover/Popover.js\";\nimport { BaseTextInput } from \"../text-input/BaseTextInput.js\";\nimport { Calendar } from \"./internal/Calendar.js\";\nimport { DateInfo, getInitialDate } from \"./internal/utils.js\";\nimport { DatePickerProps, DateValidationError } from \"./types.js\";\nimport { formatInput, parseDateString } from \"./utils.js\";\nimport { isWithinLowerBound, isWithinUpperBound } from \"./validation.js\";\n\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(\n    (props, forwardedInputRef) => {\n        const {\n            \"data-testautoid\": testAutoId,\n            id,\n            className = \"\",\n            label = \"Velg dato\",\n            labelProps,\n            defaultValue,\n            defaultShow = false,\n            value,\n            disableBeforeDate: disableBefore,\n            disableAfterDate: disableAfter,\n            yearsToShow,\n            name,\n            helpLabel,\n            errorLabel,\n            invalid,\n            density,\n            days,\n            months,\n            monthLabel,\n            yearLabel,\n            placeholder = \"dd.mm.åååå\",\n            width = \"11.25rem\",\n            onChange,\n            onBlur,\n            onFocus,\n            onKeyDown,\n            action,\n            showCalendarLabel = \"Åpne kalender\",\n            hideCalendarLabel = \"Lukk kalender\",\n            supportLabelProps,\n            tooltipProps,\n            ...rest\n        } = props;\n\n        if (process.env.NODE_ENV !== \"production\" && value && defaultValue) {\n            console.warn(\n                \"DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.\",\n            );\n        }\n        /// Input state\n\n        const disableBeforeDate = parseDateString(disableBefore);\n        const minDate = disableBeforeDate\n            ? startOfDay(disableBeforeDate)\n            : undefined;\n        const disableAfterDate = parseDateString(disableAfter);\n        const maxDate = disableAfterDate\n            ? startOfDay(disableAfterDate)\n            : undefined;\n\n        const [date, setDate] = useState(\n            getInitialDate(value, defaultValue, minDate, maxDate),\n        );\n        const [error, setError] = useState<DateValidationError | null>(null);\n\n        /// Calendar state\n\n        const [showCalendar, setShowCalendar] = useState(defaultShow);\n\n        const calendarRef = useRef<HTMLDivElement>(null);\n        const datepickerRef = useRef<HTMLDivElement>(null);\n\n        /// Input events\n\n        const iconButtonRef = useRef<HTMLButtonElement | null>(null);\n        const inputRef = useRef<HTMLInputElement | null>(null);\n\n        // Hjelper for å gjøre det enklere å både forwarde refen men også bruke den selv internt\n        const unifiedInputRef = useCallback(\n            (instance: HTMLInputElement | null) => {\n                inputRef.current = instance;\n                if (forwardedInputRef) {\n                    if (typeof forwardedInputRef === \"function\") {\n                        forwardedInputRef(instance);\n                    } else {\n                        forwardedInputRef.current = instance;\n                    }\n                }\n            },\n            [inputRef, forwardedInputRef],\n        );\n\n        const handleFocus = useCallback(\n            (e: FocusEvent<HTMLInputElement>) => {\n                if (!onFocus || !datepickerRef.current) {\n                    return;\n                }\n\n                const nextFocusIsInside = datepickerRef.current.contains(\n                    e.relatedTarget as Node,\n                );\n                if (!nextFocusIsInside) {\n                    onFocus(e, date, { error, value: e.target.value });\n                }\n            },\n            [onFocus, date, error],\n        );\n\n        const handleBlur = useCallback(\n            (e: FocusEvent<HTMLInputElement>) => {\n                if (onBlur) {\n                    onBlur(e, date, { error, value: e.target.value });\n                }\n            },\n            [onBlur, date, error],\n        );\n\n        const handleKeyDownAction = useCallback(\n            (e: React.KeyboardEvent<HTMLButtonElement>) => {\n                if (e.key === \"Escape\") {\n                    setShowCalendar(false);\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n\n                if (action?.onKeyDown) {\n                    action.onKeyDown(e);\n                }\n            },\n            [setShowCalendar, action],\n        );\n\n        const handleChange = useCallback(\n            (e: ChangeEvent<HTMLInputElement>) => {\n                let nextDate: Date | null = null;\n                let nextError: DateValidationError | null = null;\n\n                if (e.target.value) {\n                    const val = parseDateString(e.target.value);\n                    if (!val) {\n                        nextError = \"WRONG_FORMAT\";\n                    } else if (minDate && !isWithinLowerBound(val, minDate)) {\n                        nextError = \"OUTSIDE_LOWER_BOUND\";\n                    } else if (maxDate && !isWithinUpperBound(val, maxDate)) {\n                        nextError = \"OUTSIDE_UPPER_BOUND\";\n                    } else {\n                        setShowCalendar(false);\n                    }\n                    nextDate = val || null;\n                }\n\n                setError(nextError);\n                setDate(nextDate);\n\n                if (onChange) {\n                    onChange(e, nextDate, {\n                        error: nextError,\n                        value: e.target.value,\n                    });\n                }\n            },\n            [onChange, setError, setDate, setShowCalendar, minDate, maxDate],\n        );\n\n        /// Calendar events\n\n        const clickCalendar = useCallback(\n            (e: MouseEvent<HTMLButtonElement>) => {\n                flushSync(() => {\n                    setShowCalendar(!showCalendar);\n                });\n\n                const calendarEl = calendarRef.current;\n                const button =\n                    calendarEl &&\n                    (calendarEl.querySelector(\n                        '[aria-pressed=\"true\"]',\n                    ) as HTMLButtonElement);\n                // Make sure the popover-modal is correctly positioned before focusing a button\n                // so we avoid accidentally scrolling to the top of the page\n                window.requestAnimationFrame(() => button && button.focus());\n\n                if (action?.onClick) {\n                    action.onClick(e);\n                }\n            },\n            [setShowCalendar, showCalendar, action, calendarRef],\n        );\n\n        const handleClickCalendarDay = useCallback(\n            ({ date }: DateInfo) => {\n                setShowCalendar(false);\n                setDate(date);\n\n                if (inputRef.current) {\n                    const node = inputRef.current;\n\n                    node.value = formatInput(date);\n\n                    // Simulér et change-event så APIet blir så likt som mulig en endring av inputfeltet\n                    const event = document.createEvent(\"HTMLEvents\");\n                    event.initEvent(\"input\", true, false);\n                    node.dispatchEvent(event);\n\n                    node.focus();\n\n                    if (onChange) {\n                        // Det er ikke helt sant at dette er et React.SyntheticEvent, men it's fine – probably?\n                        // Den har tingene man kan forvente, men hvis du gjør serdeles fancy ting med events\n                        // så kan det hende du må utvide denne for å dekke behovet ditt.\n                        onChange(\n                            event as unknown as ChangeEvent<HTMLInputElement>,\n                            date,\n                            {\n                                error: null,\n                                value: node.value,\n                            },\n                        );\n                    }\n                }\n            },\n            [setShowCalendar, setDate, onChange],\n        );\n\n        const handleTabOutsideCalendar = useCallback(\n            (e: KeyboardEvent) => {\n                e.preventDefault();\n                setShowCalendar(false);\n                iconButtonRef.current && iconButtonRef.current.focus();\n            },\n            [setShowCalendar],\n        );\n\n        return (\n            <InputGroup\n                id={id}\n                className={clsx(\"jkl-datepicker\", className, {\n                    \"jkl-datepicker--open\": showCalendar,\n                })}\n                {...rest}\n                ref={datepickerRef}\n                label={label}\n                labelProps={labelProps}\n                density={density}\n                helpLabel={helpLabel}\n                errorLabel={errorLabel}\n                supportLabelProps={supportLabelProps}\n                tooltipProps={tooltipProps}\n                render={(inputProps) => (\n                    <BaseTextInput\n                        ref={unifiedInputRef}\n                        data-testid=\"jkl-datepicker__input\"\n                        data-testautoid={testAutoId}\n                        className=\"jkl-datepicker__input\"\n                        name={name}\n                        defaultValue={defaultValue}\n                        density={density}\n                        value={value}\n                        type=\"text\"\n                        placeholder={placeholder}\n                        width={width}\n                        onFocus={handleFocus}\n                        onBlur={handleBlur}\n                        onChange={handleChange}\n                        actionButton={\n                            <Popover\n                                positionReference={inputRef}\n                                open={showCalendar}\n                                onOpenChange={() =>\n                                    setShowCalendar(!showCalendar)\n                                }\n                                offset={8}\n                            >\n                                <Popover.Trigger\n                                    {...action}\n                                    data-testid=\"jkl-datepicker__trigger\"\n                                    className=\"jkl-text-input-action-button\"\n                                    title={\n                                        showCalendar\n                                            ? hideCalendarLabel\n                                            : showCalendarLabel\n                                    }\n                                    tabIndex={0}\n                                    onClick={clickCalendar}\n                                    onKeyDown={handleKeyDownAction}\n                                    asChild\n                                >\n                                    <IconButton>\n                                        <CalendarIcon />\n                                    </IconButton>\n                                </Popover.Trigger>\n                                <Popover.Content initialFocus={-1} padding={24}>\n                                    <Calendar\n                                        ref={calendarRef}\n                                        density={density}\n                                        date={date}\n                                        minDate={minDate}\n                                        maxDate={maxDate}\n                                        days={days}\n                                        months={months}\n                                        monthLabel={monthLabel}\n                                        yearLabel={yearLabel}\n                                        yearsToShow={yearsToShow}\n                                        onDateSelected={handleClickCalendarDay}\n                                        onTabOutside={handleTabOutsideCalendar}\n                                    />\n                                </Popover.Content>\n                            </Popover>\n                        }\n                        {...inputProps}\n                    />\n                )}\n            />\n        );\n    },\n);\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":["DatePicker","forwardRef","props","forwardedInputRef","testAutoId","id","className","label","labelProps","defaultValue","defaultShow","value","disableBeforeDate","disableBefore","disableAfterDate","disableAfter","yearsToShow","name","helpLabel","errorLabel","invalid","density","days","months","monthLabel","yearLabel","placeholder","width","onChange","onBlur","onFocus","onKeyDown","action","showCalendarLabel","hideCalendarLabel","supportLabelProps","tooltipProps","rest","process","env","NODE_ENV","console","warn","parseDateString","minDate","startOfDay","maxDate","date","setDate","useState","getInitialDate","error","setError","showCalendar","setShowCalendar","calendarRef","useRef","datepickerRef","iconButtonRef","inputRef","unifiedInputRef","useCallback","instance","current","handleFocus","e","contains","relatedTarget","target","handleBlur","handleKeyDownAction","key","preventDefault","stopPropagation","handleChange","nextDate","nextError","val","isWithinLowerBound","isWithinUpperBound","clickCalendar","flushSync","calendarEl","button","querySelector","window","requestAnimationFrame","focus","onClick","handleClickCalendarDay","node","formatInput","event","document","createEvent","initEvent","dispatchEvent","handleTabOutsideCalendar","jsx","InputGroup","clsx","ref","render","inputProps","BaseTextInput","type","actionButton","jsxs","Popover","positionReference","open","onOpenChange","offset","children","Trigger","title","tabIndex","asChild","IconButton","CalendarIcon","Content","initialFocus","padding","Calendar","onDateSelected","onTabOutside","displayName"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../../../../src/components/datepicker/DatePicker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { startOfDay } from \"date-fns\";\nimport React, {\n    ChangeEvent,\n    FocusEvent,\n    KeyboardEvent,\n    MouseEvent,\n    forwardRef,\n    useCallback,\n    useRef,\n    useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { CalendarIcon } from \"../icon/icons/CalendarIcon.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport Popover from \"../popover/Popover.js\";\nimport { BaseTextInput } from \"../text-input/BaseTextInput.js\";\nimport { Calendar } from \"./internal/Calendar.js\";\nimport { DateInfo, getInitialDate } from \"./internal/utils.js\";\nimport { DatePickerProps, DateValidationError } from \"./types.js\";\nimport { formatInput, parseDateString } from \"./utils.js\";\nimport { isWithinLowerBound, isWithinUpperBound } from \"./validation.js\";\n\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(\n    (props, forwardedInputRef) => {\n        const {\n            \"data-testautoid\": testAutoId,\n            id,\n            className = \"\",\n            label = \"Velg dato\",\n            labelProps,\n            defaultValue,\n            defaultShow = false,\n            value,\n            disableBeforeDate: disableBefore,\n            disableAfterDate: disableAfter,\n            yearsToShow,\n            name,\n            helpLabel,\n            errorLabel,\n            invalid,\n            density,\n            days,\n            months,\n            monthLabel,\n            yearLabel,\n            placeholder = \"dd.mm.åååå\",\n            width = \"11.25rem\",\n            onChange,\n            onBlur,\n            onFocus,\n            onKeyDown,\n            action,\n            showCalendarLabel = \"Åpne kalender\",\n            hideCalendarLabel = \"Lukk kalender\",\n            supportLabelProps,\n            tooltip,\n            ...rest\n        } = props;\n\n        if (process.env.NODE_ENV !== \"production\" && value && defaultValue) {\n            console.warn(\n                \"DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.\",\n            );\n        }\n        /// Input state\n\n        const disableBeforeDate = parseDateString(disableBefore);\n        const minDate = disableBeforeDate\n            ? startOfDay(disableBeforeDate)\n            : undefined;\n        const disableAfterDate = parseDateString(disableAfter);\n        const maxDate = disableAfterDate\n            ? startOfDay(disableAfterDate)\n            : undefined;\n\n        const [date, setDate] = useState(\n            getInitialDate(value, defaultValue, minDate, maxDate),\n        );\n        const [error, setError] = useState<DateValidationError | null>(null);\n\n        /// Calendar state\n\n        const [showCalendar, setShowCalendar] = useState(defaultShow);\n\n        const calendarRef = useRef<HTMLDivElement>(null);\n        const datepickerRef = useRef<HTMLDivElement>(null);\n\n        /// Input events\n\n        const iconButtonRef = useRef<HTMLButtonElement | null>(null);\n        const inputRef = useRef<HTMLInputElement | null>(null);\n\n        // Hjelper for å gjøre det enklere å både forwarde refen men også bruke den selv internt\n        const unifiedInputRef = useCallback(\n            (instance: HTMLInputElement | null) => {\n                inputRef.current = instance;\n                if (forwardedInputRef) {\n                    if (typeof forwardedInputRef === \"function\") {\n                        forwardedInputRef(instance);\n                    } else {\n                        forwardedInputRef.current = instance;\n                    }\n                }\n            },\n            [inputRef, forwardedInputRef],\n        );\n\n        const handleFocus = useCallback(\n            (e: FocusEvent<HTMLInputElement>) => {\n                if (!onFocus || !datepickerRef.current) {\n                    return;\n                }\n\n                const nextFocusIsInside = datepickerRef.current.contains(\n                    e.relatedTarget as Node,\n                );\n                if (!nextFocusIsInside) {\n                    onFocus(e, date, { error, value: e.target.value });\n                }\n            },\n            [onFocus, date, error],\n        );\n\n        const handleBlur = useCallback(\n            (e: FocusEvent<HTMLInputElement>) => {\n                if (onBlur) {\n                    onBlur(e, date, { error, value: e.target.value });\n                }\n            },\n            [onBlur, date, error],\n        );\n\n        const handleKeyDownAction = useCallback(\n            (e: React.KeyboardEvent<HTMLButtonElement>) => {\n                if (e.key === \"Escape\") {\n                    setShowCalendar(false);\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n\n                if (action?.onKeyDown) {\n                    action.onKeyDown(e);\n                }\n            },\n            [setShowCalendar, action],\n        );\n\n        const handleChange = useCallback(\n            (e: ChangeEvent<HTMLInputElement>) => {\n                let nextDate: Date | null = null;\n                let nextError: DateValidationError | null = null;\n\n                if (e.target.value) {\n                    const val = parseDateString(e.target.value);\n                    if (!val) {\n                        nextError = \"WRONG_FORMAT\";\n                    } else if (minDate && !isWithinLowerBound(val, minDate)) {\n                        nextError = \"OUTSIDE_LOWER_BOUND\";\n                    } else if (maxDate && !isWithinUpperBound(val, maxDate)) {\n                        nextError = \"OUTSIDE_UPPER_BOUND\";\n                    } else {\n                        setShowCalendar(false);\n                    }\n                    nextDate = val || null;\n                }\n\n                setError(nextError);\n                setDate(nextDate);\n\n                if (onChange) {\n                    onChange(e, nextDate, {\n                        error: nextError,\n                        value: e.target.value,\n                    });\n                }\n            },\n            [onChange, setError, setDate, setShowCalendar, minDate, maxDate],\n        );\n\n        /// Calendar events\n\n        const clickCalendar = useCallback(\n            (e: MouseEvent<HTMLButtonElement>) => {\n                flushSync(() => {\n                    setShowCalendar(!showCalendar);\n                });\n\n                const calendarEl = calendarRef.current;\n                const button =\n                    calendarEl &&\n                    (calendarEl.querySelector(\n                        '[aria-pressed=\"true\"]',\n                    ) as HTMLButtonElement);\n                // Make sure the popover-modal is correctly positioned before focusing a button\n                // so we avoid accidentally scrolling to the top of the page\n                window.requestAnimationFrame(() => button && button.focus());\n\n                if (action?.onClick) {\n                    action.onClick(e);\n                }\n            },\n            [setShowCalendar, showCalendar, action, calendarRef],\n        );\n\n        const handleClickCalendarDay = useCallback(\n            ({ date }: DateInfo) => {\n                setShowCalendar(false);\n                setDate(date);\n\n                if (inputRef.current) {\n                    const node = inputRef.current;\n\n                    node.value = formatInput(date);\n\n                    // Simulér et change-event så APIet blir så likt som mulig en endring av inputfeltet\n                    const event = document.createEvent(\"HTMLEvents\");\n                    event.initEvent(\"input\", true, false);\n                    node.dispatchEvent(event);\n\n                    node.focus();\n\n                    if (onChange) {\n                        // Det er ikke helt sant at dette er et React.SyntheticEvent, men it's fine – probably?\n                        // Den har tingene man kan forvente, men hvis du gjør serdeles fancy ting med events\n                        // så kan det hende du må utvide denne for å dekke behovet ditt.\n                        onChange(\n                            event as unknown as ChangeEvent<HTMLInputElement>,\n                            date,\n                            {\n                                error: null,\n                                value: node.value,\n                            },\n                        );\n                    }\n                }\n            },\n            [setShowCalendar, setDate, onChange],\n        );\n\n        const handleTabOutsideCalendar = useCallback(\n            (e: KeyboardEvent) => {\n                e.preventDefault();\n                setShowCalendar(false);\n                iconButtonRef.current && iconButtonRef.current.focus();\n            },\n            [setShowCalendar],\n        );\n\n        return (\n            <InputGroup\n                id={id}\n                className={clsx(\"jkl-datepicker\", className, {\n                    \"jkl-datepicker--open\": showCalendar,\n                })}\n                {...rest}\n                ref={datepickerRef}\n                label={label}\n                labelProps={labelProps}\n                density={density}\n                helpLabel={helpLabel}\n                errorLabel={errorLabel}\n                supportLabelProps={supportLabelProps}\n                tooltip={tooltip}\n                render={(inputProps) => (\n                    <BaseTextInput\n                        ref={unifiedInputRef}\n                        data-testid=\"jkl-datepicker__input\"\n                        data-testautoid={testAutoId}\n                        className=\"jkl-datepicker__input\"\n                        name={name}\n                        defaultValue={defaultValue}\n                        density={density}\n                        value={value}\n                        type=\"text\"\n                        placeholder={placeholder}\n                        width={width}\n                        onFocus={handleFocus}\n                        onBlur={handleBlur}\n                        onChange={handleChange}\n                        actionButton={\n                            <Popover\n                                positionReference={inputRef}\n                                open={showCalendar}\n                                onOpenChange={() =>\n                                    setShowCalendar(!showCalendar)\n                                }\n                                offset={8}\n                            >\n                                <Popover.Trigger\n                                    {...action}\n                                    data-testid=\"jkl-datepicker__trigger\"\n                                    className=\"jkl-text-input-action-button\"\n                                    title={\n                                        showCalendar\n                                            ? hideCalendarLabel\n                                            : showCalendarLabel\n                                    }\n                                    tabIndex={0}\n                                    onClick={clickCalendar}\n                                    onKeyDown={handleKeyDownAction}\n                                    asChild\n                                >\n                                    <IconButton>\n                                        <CalendarIcon />\n                                    </IconButton>\n                                </Popover.Trigger>\n                                <Popover.Content initialFocus={-1} padding={24}>\n                                    <Calendar\n                                        ref={calendarRef}\n                                        density={density}\n                                        date={date}\n                                        minDate={minDate}\n                                        maxDate={maxDate}\n                                        days={days}\n                                        months={months}\n                                        monthLabel={monthLabel}\n                                        yearLabel={yearLabel}\n                                        yearsToShow={yearsToShow}\n                                        onDateSelected={handleClickCalendarDay}\n                                        onTabOutside={handleTabOutsideCalendar}\n                                    />\n                                </Popover.Content>\n                            </Popover>\n                        }\n                        {...inputProps}\n                    />\n                )}\n            />\n        );\n    },\n);\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":["DatePicker","forwardRef","props","forwardedInputRef","testAutoId","id","className","label","labelProps","defaultValue","defaultShow","value","disableBeforeDate","disableBefore","disableAfterDate","disableAfter","yearsToShow","name","helpLabel","errorLabel","invalid","density","days","months","monthLabel","yearLabel","placeholder","width","onChange","onBlur","onFocus","onKeyDown","action","showCalendarLabel","hideCalendarLabel","supportLabelProps","tooltip","rest","process","env","NODE_ENV","console","warn","parseDateString","minDate","startOfDay","maxDate","date","setDate","useState","getInitialDate","error","setError","showCalendar","setShowCalendar","calendarRef","useRef","datepickerRef","iconButtonRef","inputRef","unifiedInputRef","useCallback","instance","current","handleFocus","e","contains","relatedTarget","target","handleBlur","handleKeyDownAction","key","preventDefault","stopPropagation","handleChange","nextDate","nextError","val","isWithinLowerBound","isWithinUpperBound","clickCalendar","flushSync","calendarEl","button","querySelector","window","requestAnimationFrame","focus","onClick","handleClickCalendarDay","node","formatInput","event","document","createEvent","initEvent","dispatchEvent","handleTabOutsideCalendar","jsx","InputGroup","clsx","ref","render","inputProps","BaseTextInput","type","actionButton","jsxs","Popover","positionReference","open","onOpenChange","offset","children","Trigger","title","tabIndex","asChild","IconButton","CalendarIcon","Content","initialFocus","padding","Calendar","onDateSelected","onTabOutside","displayName"],"mappings":"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"}

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

@@ -1,13 +1,12 @@
-import { FC, FieldsetHTMLAttributes } from 'react';
+import { FC, FieldsetHTMLAttributes, ReactNode } from 'react';
 import { DataTestAutoId, Density } from '../../core/types.js';
-import { PopupTipProps } from '../tooltip/PopupTip.js';
 import { LabelProps } from './Label.js';
 import { SupportLabelProps } from './SupportLabel.js';
 export interface FieldGroupProps extends DataTestAutoId, FieldsetHTMLAttributes<HTMLFieldSetElement> {
     legend: string;
     labelProps?: Omit<LabelProps, "children" | "density">;
     supportLabelProps?: Omit<SupportLabelProps, "id" | "errorLabel" | "helpLabel" | "density">;
-    tooltipProps?: PopupTipProps;
+    tooltip?: ReactNode;
     className?: string;
     helpLabel?: string;
     errorLabel?: string;

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

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as s,Fragment as r}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{useId as l}from"../../hooks/useId/useId.js";import{PopupTip as o}from"../tooltip/PopupTip.js";import{Label as t}from"./Label.js";import{SupportLabel as i}from"./SupportLabel.js";const p=p=>{const{id:d,legend:n,labelProps:m,supportLabelProps:u,tooltipProps:c,className:b,children:f,helpLabel:j,errorLabel:h,density:g,"data-testautoid":y,...L}=p,x=l(d||"jkl-field-group",{generateSuffix:!d}),P=`${x}_support-label`,k=h||j,S=h?"error":j?"help":void 0,I=k?P:void 0;return e("fieldset",{id:x,className:a("jkl-field-group",b),"data-testautoid":y,...L,"aria-describedby":I,"data-density":g,children:[s("legend",{className:"jkl-field-group__legend",children:e(t,{...m,density:g,children:[!c&&n,c&&e(r,{children:[s("span",{style:{whiteSpace:"normal"},children:n})," ",s(o,{...c})]})]})}),f,(j||h)&&s(i,{...u,label:k,labelType:S,id:P,density:g})]})};export{p as FieldGroup};
+import{jsxs as e,jsx as s,Fragment as r}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{useId as l}from"../../hooks/useId/useId.js";import{Label as t}from"./Label.js";import{SupportLabel as o}from"./SupportLabel.js";const d=d=>{const{id:i,legend:p,labelProps:n,supportLabelProps:c,tooltip:m,className:u,children:b,helpLabel:f,errorLabel:h,density:j,"data-testautoid":g,...y}=d,L=l(i||"jkl-field-group",{generateSuffix:!i}),x=`${L}_support-label`,k=h||f,S=h?"error":f?"help":void 0,I=k?x:void 0;return e("fieldset",{id:L,className:a("jkl-field-group",u),"data-testautoid":g,...y,"aria-describedby":I,"data-density":j,children:[s("legend",{className:"jkl-field-group__legend",children:s(t,{...n,density:j,children:m?e(r,{children:[s("span",{style:{whiteSpace:"normal"},children:p})," ",m]}):p})}),b,(f||h)&&s(o,{...c,label:k,labelType:S,id:x,density:j})]})};export{d as FieldGroup};
 //# sourceMappingURL=FieldGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.js","sources":["../../../../src/components/input-group/FieldGroup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { FC, FieldsetHTMLAttributes } from \"react\";\nimport { DataTestAutoId, Density } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { PopupTip, PopupTipProps } from \"../tooltip/PopupTip.js\";\nimport { Label, LabelProps } from \"./Label.js\";\nimport { SupportLabel, SupportLabelProps } from \"./SupportLabel.js\";\n\nexport interface FieldGroupProps\n    extends DataTestAutoId,\n        FieldsetHTMLAttributes<HTMLFieldSetElement> {\n    legend: string;\n    labelProps?: Omit<LabelProps, \"children\" | \"density\">;\n    supportLabelProps?: Omit<\n        SupportLabelProps,\n        \"id\" | \"errorLabel\" | \"helpLabel\" | \"density\"\n    >;\n    tooltipProps?: PopupTipProps;\n    className?: string;\n    helpLabel?: string;\n    errorLabel?: string;\n    density?: Density;\n}\n\nexport const FieldGroup: FC<FieldGroupProps> = (props) => {\n    const {\n        id,\n        legend,\n        labelProps,\n        supportLabelProps,\n        tooltipProps,\n        className,\n        children,\n        helpLabel,\n        errorLabel,\n        density,\n        \"data-testautoid\": testAutoId,\n        ...rest\n    } = props;\n\n    const uid = useId(id || \"jkl-field-group\", { generateSuffix: !id });\n    const supportId = `${uid}_support-label`;\n\n    const supportText = errorLabel || helpLabel;\n    const supportTextType = errorLabel\n        ? \"error\"\n        : helpLabel\n        ? \"help\"\n        : undefined;\n\n    const describedBy = supportText ? supportId : undefined;\n\n    return (\n        <fieldset\n            id={uid}\n            className={clsx(\"jkl-field-group\", className)}\n            data-testautoid={testAutoId}\n            {...rest}\n            aria-describedby={describedBy}\n            data-density={density}\n        >\n            <legend className=\"jkl-field-group__legend\">\n                <Label {...labelProps} density={density}>\n                    {!tooltipProps && legend}\n                    {tooltipProps && (\n                        <>\n                            <span style={{ whiteSpace: \"normal\" }}>\n                                {legend}\n                            </span>\n                            {`\\u00A0`}\n                            <PopupTip {...tooltipProps} />\n                        </>\n                    )}\n                </Label>\n            </legend>\n            {children}\n            {(helpLabel || errorLabel) && (\n                <SupportLabel\n                    {...supportLabelProps}\n                    label={supportText}\n                    labelType={supportTextType}\n                    id={supportId}\n                    density={density}\n                />\n            )}\n        </fieldset>\n    );\n};\n"],"names":["FieldGroup","props","id","legend","labelProps","supportLabelProps","tooltipProps","className","children","helpLabel","errorLabel","density","testAutoId","rest","uid","useId","generateSuffix","supportId","supportText","supportTextType","describedBy","jsxs","clsx","jsx","Label","Fragment","style","whiteSpace","PopupTip","SupportLabel","label","labelType"],"mappings":"uSAwBa,MAAAA,EAAmCC,IACtC,MACFC,GAAAA,EACAC,OAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,aAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,QAAAA,EACA,kBAAmBC,KAChBC,GACHZ,EAEEa,EAAMC,EAAMb,GAAM,kBAAmB,CAAEc,gBAAiBd,IACxDe,EAAY,GAAGH,kBAEfI,EAAcR,GAAcD,EAC5BU,EAAkBT,EAClB,QACAD,EACA,YACA,EAEAW,EAAcF,EAAcD,OAAY,EAG1C,OAAAI,EAAC,WAAA,CACGnB,GAAIY,EACJP,UAAWe,EAAK,kBAAmBf,GACnC,kBAAiBK,KACbC,EACJ,mBAAkBO,EAClB,eAAcT,EAEdH,SAAA,CAAAe,EAAC,UAAOhB,UAAU,0BACdC,WAACgB,EAAO,IAAGpB,EAAYO,QAAAA,EAClBH,SAAA,EAACF,GAAgBH,EACjBG,GAEOe,EAAAI,EAAA,CAAAjB,SAAA,CAAAe,EAAC,QAAKG,MAAO,CAAEC,WAAY,UACtBnB,SACLL,IACC,IACDoB,EAACK,EAAU,IAAGtB,YAK7BE,GACCC,GAAaC,IACXa,EAACM,EAAA,IACOxB,EACJyB,MAAOZ,EACPa,UAAWZ,EACXjB,GAAIe,EACJN,QAAAA,MACJ"}
+{"version":3,"file":"FieldGroup.js","sources":["../../../../src/components/input-group/FieldGroup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { FC, FieldsetHTMLAttributes, type ReactNode } from \"react\";\nimport { DataTestAutoId, Density } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { Label, LabelProps } from \"./Label.js\";\nimport { SupportLabel, SupportLabelProps } from \"./SupportLabel.js\";\n\nexport interface FieldGroupProps\n    extends DataTestAutoId,\n        FieldsetHTMLAttributes<HTMLFieldSetElement> {\n    legend: string;\n    labelProps?: Omit<LabelProps, \"children\" | \"density\">;\n    supportLabelProps?: Omit<\n        SupportLabelProps,\n        \"id\" | \"errorLabel\" | \"helpLabel\" | \"density\"\n    >;\n    tooltip?: ReactNode;\n    className?: string;\n    helpLabel?: string;\n    errorLabel?: string;\n    density?: Density;\n}\n\nexport const FieldGroup: FC<FieldGroupProps> = (props) => {\n    const {\n        id,\n        legend,\n        labelProps,\n        supportLabelProps,\n        tooltip,\n        className,\n        children,\n        helpLabel,\n        errorLabel,\n        density,\n        \"data-testautoid\": testAutoId,\n        ...rest\n    } = props;\n\n    const uid = useId(id || \"jkl-field-group\", { generateSuffix: !id });\n    const supportId = `${uid}_support-label`;\n\n    const supportText = errorLabel || helpLabel;\n    const supportTextType = errorLabel\n        ? \"error\"\n        : helpLabel\n        ? \"help\"\n        : undefined;\n\n    const describedBy = supportText ? supportId : undefined;\n\n    return (\n        <fieldset\n            id={uid}\n            className={clsx(\"jkl-field-group\", className)}\n            data-testautoid={testAutoId}\n            {...rest}\n            aria-describedby={describedBy}\n            data-density={density}\n        >\n            <legend className=\"jkl-field-group__legend\">\n                <Label {...labelProps} density={density}>\n                    {tooltip ? (\n                        <>\n                            <span style={{ whiteSpace: \"normal\" }}>\n                                {legend}\n                            </span>\n                            {`\\u00A0`}\n                            {tooltip}\n                        </>\n                    ) : (\n                        legend\n                    )}\n                </Label>\n            </legend>\n            {children}\n            {(helpLabel || errorLabel) && (\n                <SupportLabel\n                    {...supportLabelProps}\n                    label={supportText}\n                    labelType={supportTextType}\n                    id={supportId}\n                    density={density}\n                />\n            )}\n        </fieldset>\n    );\n};\n"],"names":["FieldGroup","props","id","legend","labelProps","supportLabelProps","tooltip","className","children","helpLabel","errorLabel","density","testAutoId","rest","uid","useId","generateSuffix","supportId","supportText","supportTextType","describedBy","jsxs","clsx","jsx","Label","Fragment","style","whiteSpace","SupportLabel","label","labelType"],"mappings":"qPAuBa,MAAAA,EAAmCC,IACtC,MACFC,GAAAA,EACAC,OAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,QAAAA,EACA,kBAAmBC,KAChBC,GACHZ,EAEEa,EAAMC,EAAMb,GAAM,kBAAmB,CAAEc,gBAAiBd,IACxDe,EAAY,GAAGH,kBAEfI,EAAcR,GAAcD,EAC5BU,EAAkBT,EAClB,QACAD,EACA,YACA,EAEAW,EAAcF,EAAcD,OAAY,EAG1C,OAAAI,EAAC,WAAA,CACGnB,GAAIY,EACJP,UAAWe,EAAK,kBAAmBf,GACnC,kBAAiBK,KACbC,EACJ,mBAAkBO,EAClB,eAAcT,EAEdH,SAAA,CAACe,EAAA,SAAA,CAAOhB,UAAU,0BACdC,SAAAe,EAACC,MAAUpB,EAAYO,QAAAA,EAClBH,SAAAF,EAEOe,EAAAI,EAAA,CAAAjB,SAAA,CAAAe,EAAC,QAAKG,MAAO,CAAEC,WAAY,UACtBnB,SACLL,IACC,IACAG,KAGLH,MAIXK,GACCC,GAAaC,IACXa,EAACK,EAAA,IACOvB,EACJwB,MAAOX,EACPY,UAAWX,EACXjB,GAAIe,EACJN,QAAAA,MACJ"}

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

@@ -1,6 +1,5 @@
 import { default as React, CSSProperties, ReactNode } from 'react';
 import { DataTestAutoId, Density, WithOptionalChildren } from '../../core/types.js';
-import { PopupTipProps } from '../tooltip/PopupTip.js';
 import { LabelProps } from './Label.js';
 import { SupportLabelProps } from './SupportLabel.js';
 export interface InputProps {
@@ -19,7 +18,7 @@ export type InputGroupProps = WithOptionalChildren & DataTestAutoId & {
     label: ReactNode;
     labelProps?: Omit<LabelProps, "children" | "density">;
     supportLabelProps?: Omit<SupportLabelProps, "id" | "errorLabel" | "helpLabel" | "density">;
-    tooltipProps?: PopupTipProps;
+    tooltip?: ReactNode;
     style?: CSSProperties;
     render?: (props: InputProps) => JSX.Element;
 };
@@ -34,7 +33,7 @@ export declare const InputGroup: React.ForwardRefExoticComponent<WithOptionalChi
     label: ReactNode;
     labelProps?: Omit<LabelProps, "density" | "children"> | undefined;
     supportLabelProps?: Omit<SupportLabelProps, "density" | "id" | "helpLabel" | "errorLabel"> | undefined;
-    tooltipProps?: PopupTipProps | undefined;
+    tooltip?: ReactNode;
     style?: React.CSSProperties | undefined;
     render?: ((props: InputProps) => JSX.Element) | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,2 +1,2 @@
-import{jsxs as e,Fragment as r,jsx as l}from"react/jsx-runtime";import{c as o}from"../../../clsx-BeLtu-UY.js";import i,{forwardRef as s}from"react";import{useId as a}from"../../hooks/useId/useId.js";import{PopupTip as p}from"../tooltip/PopupTip.js";import{Label as t}from"./Label.js";import{SupportLabel as n}from"./SupportLabel.js";const d=s(((s,d)=>{const{className:m,children:u,density:c,errorLabel:b,helpLabel:f,inline:h,label:y,labelProps:j,render:v,supportLabelProps:L,tooltipProps:x,id:k,...I}=s,P=a(k||"jkl-input",{generateSuffix:!k}),S=a("jkl-support-label"),g=b||f,w=b?"error":f?"help":void 0,N={"aria-describedby":g?S:void 0,"aria-invalid":!!b||void 0,id:P},T=v?()=>v(N):()=>{const e=i.Children.toArray(s.children)[0];if(i.isValidElement(e))return i.cloneElement(e,{...N,...e.props})};return e("div",{ref:d,className:o(m,"jkl-input-group",{"jkl-input-group--inline":h}),"data-density":c,...I,children:[e(t,{standAlone:!0,htmlFor:P,srOnly:h,...j,style:{whiteSpace:x?"nowrap":void 0,...null==j?void 0:j.style},density:c,children:[!x&&y,x&&e(r,{children:[l("span",{style:{whiteSpace:"normal"},children:y})," ",l(p,{...x})]})]}),T(),l(n,{srOnly:h,...L,label:g,labelType:w,id:S,density:c})]})}));d.displayName="InputGroup";export{d as InputGroup};
+import{jsxs as e,jsx as r,Fragment as l}from"react/jsx-runtime";import{c as s}from"../../../clsx-BeLtu-UY.js";import a,{forwardRef as i}from"react";import{useId as o}from"../../hooks/useId/useId.js";import{Label as t}from"./Label.js";import{SupportLabel as n}from"./SupportLabel.js";const p=i(((i,p)=>{const{className:d,children:m,density:u,errorLabel:c,helpLabel:b,inline:h,label:y,labelProps:f,render:j,supportLabelProps:v,tooltip:L,id:x,...k}=i,I=o(x||"jkl-input",{generateSuffix:!x}),S=o("jkl-support-label"),g=!!L,w=c||b,N=c?"error":b?"help":void 0,A={"aria-describedby":w?S:void 0,"aria-invalid":!!c||void 0,id:I},E=j?()=>j(A):()=>{const e=a.Children.toArray(i.children)[0];if(a.isValidElement(e))return a.cloneElement(e,{...A,...e.props})};return e("div",{ref:p,className:s(d,"jkl-input-group",{"jkl-input-group--inline":h}),"data-density":u,...k,children:[r(t,{standAlone:!0,htmlFor:I,srOnly:h,...f,style:{whiteSpace:g?"nowrap":void 0,...null==f?void 0:f.style},density:u,children:g?e(l,{children:[r("span",{style:{whiteSpace:"normal"},children:y})," ",L]}):y}),E(),r(n,{srOnly:h,...v,label:w,labelType:N,id:S,density:u})]})}));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, type CSSProperties, type ReactNode } from \"react\";\nimport {\n    DataTestAutoId,\n    Density,\n    WithOptionalChildren,\n} from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { PopupTip, PopupTipProps } from \"../tooltip/PopupTip.js\";\nimport { Label, LabelProps } from \"./Label.js\";\nimport { SupportLabel, SupportLabelProps } from \"./SupportLabel.js\";\n\nexport interface InputProps {\n    \"aria-describedby\"?: string;\n    \"aria-invalid\"?: boolean;\n    id?: string;\n}\n\nexport type InputGroupProps = WithOptionalChildren &\n    DataTestAutoId & {\n        id?: string;\n        className?: string;\n        \"data-testid\"?: string;\n        density?: Density;\n        errorLabel?: ReactNode;\n        helpLabel?: ReactNode;\n        inline?: boolean;\n        label: ReactNode;\n        labelProps?: Omit<LabelProps, \"children\" | \"density\">;\n        supportLabelProps?: Omit<\n            SupportLabelProps,\n            \"id\" | \"errorLabel\" | \"helpLabel\" | \"density\"\n        >;\n        tooltipProps?: PopupTipProps;\n        style?: CSSProperties;\n        render?: (props: InputProps) => JSX.Element;\n    };\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(\n    (props, ref) => {\n        const {\n            className,\n            children,\n            density,\n            errorLabel,\n            helpLabel,\n            inline,\n            label,\n            labelProps,\n            render,\n            supportLabelProps,\n            tooltipProps,\n            id,\n            ...rest\n        } = props;\n\n        const uid = useId(id || \"jkl-input\", { generateSuffix: !id });\n        const supportId = useId(\"jkl-support-label\");\n\n        const supportText = errorLabel || helpLabel;\n        const supportTextType = errorLabel\n            ? \"error\"\n            : helpLabel\n            ? \"help\"\n            : undefined;\n\n        const describedBy = supportText ? supportId : undefined;\n\n        const inputProps: InputProps = {\n            \"aria-describedby\": describedBy,\n            \"aria-invalid\": Boolean(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                data-density={density}\n                {...rest}\n            >\n                <Label\n                    standAlone\n                    htmlFor={uid}\n                    srOnly={inline}\n                    {...labelProps}\n                    style={{\n                        whiteSpace: tooltipProps ? \"nowrap\" : undefined,\n                        ...labelProps?.style,\n                    }}\n                    density={density}\n                >\n                    {!tooltipProps && label}\n                    {tooltipProps && (\n                        <>\n                            <span style={{ whiteSpace: \"normal\" }}>\n                                {label}\n                            </span>\n                            {`\\u00A0`}\n                            <PopupTip {...tooltipProps} />\n                        </>\n                    )}\n                </Label>\n                {renderInput()}\n                <SupportLabel\n                    srOnly={inline}\n                    {...supportLabelProps}\n                    label={supportText}\n                    labelType={supportTextType}\n                    id={supportId}\n                    density={density}\n                />\n            </div>\n        );\n    },\n);\n\nInputGroup.displayName = \"InputGroup\";\n"],"names":["InputGroup","forwardRef","props","ref","className","children","density","errorLabel","helpLabel","inline","label","labelProps","render","supportLabelProps","tooltipProps","id","rest","uid","useId","generateSuffix","supportId","supportText","supportTextType","inputProps","renderInput","input","React","Children","toArray","isValidElement","cloneElement","jsxs","clsx","Label","standAlone","htmlFor","srOnly","style","whiteSpace","Fragment","jsx","PopupTip","SupportLabel","labelType","displayName"],"mappings":"6UAsCO,MAAMA,EAAaC,GACtB,CAACC,EAAOC,KACE,MACFC,UAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,OAAAA,EACAC,kBAAAA,EACAC,aAAAA,EACAC,GAAAA,KACGC,GACHd,EAEEe,EAAMC,EAAMH,GAAM,YAAa,CAAEI,gBAAiBJ,IAClDK,EAAYF,EAAM,qBAElBG,EAAcd,GAAcC,EAC5Bc,EAAkBf,EAClB,QACAC,EACA,YACA,EAIAe,EAAyB,CAC3B,mBAHgBF,EAAcD,OAAY,EAI1C,iBAAwBb,QAAqB,EAC7CQ,GAAIE,GAGFO,EAAcZ,EACd,IAAMA,EAAOW,GACb,KACI,MAAME,EAAQC,EAAMC,SAASC,QAAQ1B,EAAMG,UAAU,GAEhDqB,GAAAA,EAAMG,eAA2BJ,GAE/BC,OAAAA,EAAMI,aAAyBL,EAAO,IACtCF,KACAE,EAAMvB,OACZ,EAIP,OAAA6B,EAAC,MAAA,CACG5B,IAAAA,EACAC,UAAW4B,EAAK5B,EAAW,kBAAmB,CAC1C,0BAA2BK,IAE/B,eAAcH,KACVU,EAEJX,SAAA,CAAA0B,EAACE,EAAA,CACGC,YAAU,EACVC,QAASlB,EACTmB,OAAQ3B,KACJE,EACJ0B,MAAO,CACHC,WAAYxB,EAAe,cAAW,KACnC,MAAAH,OAAA,EAAAA,EAAY0B,OAEnB/B,QAAAA,EAECD,SAAA,EAACS,GAAgBJ,EACjBI,GAEOiB,EAAAQ,EAAA,CAAAlC,SAAA,CAAAmC,EAAC,QAAKH,MAAO,CAAEC,WAAY,UACtBjC,SACLK,IACC,IACD8B,EAACC,EAAU,IAAG3B,UAIzBU,IACDgB,EAACE,EAAA,CACGN,OAAQ3B,KACJI,EACJH,MAAOW,EACPsB,UAAWrB,EACXP,GAAIK,EACJd,QAAAA,MACJ,IAMhBN,EAAW4C,YAAc"}
+{"version":3,"file":"InputGroup.js","sources":["../../../../src/components/input-group/InputGroup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, type CSSProperties, type ReactNode } from \"react\";\nimport {\n    DataTestAutoId,\n    Density,\n    WithOptionalChildren,\n} from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { Label, LabelProps } from \"./Label.js\";\nimport { SupportLabel, SupportLabelProps } from \"./SupportLabel.js\";\n\nexport interface InputProps {\n    \"aria-describedby\"?: string;\n    \"aria-invalid\"?: boolean;\n    id?: string;\n}\n\nexport type InputGroupProps = WithOptionalChildren &\n    DataTestAutoId & {\n        id?: string;\n        className?: string;\n        \"data-testid\"?: string;\n        density?: Density;\n        errorLabel?: ReactNode;\n        helpLabel?: ReactNode;\n        inline?: boolean;\n        label: ReactNode;\n        labelProps?: Omit<LabelProps, \"children\" | \"density\">;\n        supportLabelProps?: Omit<\n            SupportLabelProps,\n            \"id\" | \"errorLabel\" | \"helpLabel\" | \"density\"\n        >;\n        tooltip?: ReactNode;\n        style?: CSSProperties;\n        render?: (props: InputProps) => JSX.Element;\n    };\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(\n    (props, ref) => {\n        const {\n            className,\n            children,\n            density,\n            errorLabel,\n            helpLabel,\n            inline,\n            label,\n            labelProps,\n            render,\n            supportLabelProps,\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\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 = supportText ? supportId : undefined;\n\n        const inputProps: InputProps = {\n            \"aria-describedby\": describedBy,\n            \"aria-invalid\": Boolean(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                data-density={density}\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                    density={density}\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                {renderInput()}\n                <SupportLabel\n                    srOnly={inline}\n                    {...supportLabelProps}\n                    label={supportText}\n                    labelType={supportTextType}\n                    id={supportId}\n                    density={density}\n                />\n            </div>\n        );\n    },\n);\n\nInputGroup.displayName = \"InputGroup\";\n"],"names":["InputGroup","forwardRef","props","ref","className","children","density","errorLabel","helpLabel","inline","label","labelProps","render","supportLabelProps","tooltip","id","rest","uid","useId","generateSuffix","supportId","hasTooltip","supportText","supportTextType","inputProps","renderInput","input","React","Children","toArray","isValidElement","cloneElement","jsxs","clsx","jsx","Label","standAlone","htmlFor","srOnly","style","whiteSpace","Fragment","SupportLabel","labelType","displayName"],"mappings":"2RAqCO,MAAMA,EAAaC,GACtB,CAACC,EAAOC,KACE,MACFC,UAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,OAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,GAAAA,KACGC,GACHd,EAEEe,EAAMC,EAAMH,GAAM,YAAa,CAAEI,gBAAiBJ,IAClDK,EAAYF,EAAM,qBAElBG,IAAeP,EAEfQ,EAAcf,GAAcC,EAC5Be,EAAkBhB,EAClB,QACAC,EACA,YACA,EAIAgB,EAAyB,CAC3B,mBAHgBF,EAAcF,OAAY,EAI1C,iBAAwBb,QAAqB,EAC7CQ,GAAIE,GAGFQ,EAAcb,EACd,IAAMA,EAAOY,GACb,KACI,MAAME,EAAQC,EAAMC,SAASC,QAAQ3B,EAAMG,UAAU,GAEhDsB,GAAAA,EAAMG,eAA2BJ,GAE/BC,OAAAA,EAAMI,aAAyBL,EAAO,IACtCF,KACAE,EAAMxB,OACZ,EAIP,OAAA8B,EAAC,MAAA,CACG7B,IAAAA,EACAC,UAAW6B,EAAK7B,EAAW,kBAAmB,CAC1C,0BAA2BK,IAE/B,eAAcH,KACVU,EAEJX,SAAA,CAAA6B,EAACC,EAAA,CACGC,YAAU,EACVC,QAASpB,EACTqB,OAAQ7B,KACJE,EACJ4B,MAAO,CACHC,WAAYnB,EAAa,cAAW,KACjC,MAAAV,OAAA,EAAAA,EAAY4B,OAEnBjC,QAAAA,EAECD,WAEO2B,EAAAS,EAAA,CAAApC,SAAA,CAAA6B,EAAC,QAAKK,MAAO,CAAEC,WAAY,UACtBnC,SACLK,IACC,IACAI,KAGLJ,IAGPe,IACDS,EAACQ,EAAA,CACGJ,OAAQ7B,KACJI,EACJH,MAAOY,EACPqB,UAAWpB,EACXR,GAAIK,EACJd,QAAAA,MACJ,IAMhBN,EAAW4C,YAAc"}

package/build/es/components/select/NativeSelect.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as l}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t}from"react";import{getValuePair as s}from"../../utilities/valuePair.js";import{ArrowVerticalAnimated as r}from"../icon/icons/animated/ArrowVerticalAnimated.js";import{InputGroup as i}from"../input-group/InputGroup.js";const o=t(((t,o)=>{const{label:p,className:n,density:c,errorLabel:m,helpLabel:d,inline:u,invalid:j,items:v,labelProps:b,placeholder:_="Velg",selectClassName:f,supportLabelProps:k,tooltipProps:N,value:h,width:w,...P}=t;return e(i,{label:p,density:c,errorLabel:m,helpLabel:d,labelProps:b,inline:u,supportLabelProps:k,tooltipProps:N,"data-testid":"jkl-select",className:a("jkl-select",n,{"jkl-select--inline":u,"jkl-select--invalid":!!m||j}),render:t=>l("div",{className:"jkl-select__outer-wrapper",style:{width:w},children:[l("select",{ref:o,className:a("jkl-select__button",f,{"jkl-select__button--active-value":!!h}),defaultValue:h?void 0:"",value:h,...t,...P,children:[_&&!h&&e("option",{disabled:!0,value:"",children:_}),v.map(s).map((l=>e("option",{"data-testid":"jkl-select__option",className:"jkl-select__option",value:l.value,children:l.label},l.value)))]}),e(r,{variant:"medium",pointingDown:!0,className:"jkl-select__arrow"})]})})}));o.displayName="NativeSelect";export{o as NativeSelect};
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t}from"react";import{getValuePair as s}from"../../utilities/valuePair.js";import{ArrowVerticalAnimated as i}from"../icon/icons/animated/ArrowVerticalAnimated.js";import{InputGroup as r}from"../input-group/InputGroup.js";const o=t(((t,o)=>{const{label:n,className:c,density:p,errorLabel:m,helpLabel:d,inline:u,invalid:j,items:v,labelProps:b,placeholder:_="Velg",selectClassName:f,supportLabelProps:k,tooltip:N,value:h,width:w,...L}=t;return e(r,{label:n,density:p,errorLabel:m,helpLabel:d,labelProps:b,inline:u,supportLabelProps:k,tooltip:N,"data-testid":"jkl-select",className:a("jkl-select",c,{"jkl-select--inline":u,"jkl-select--invalid":!!m||j}),render:t=>l("div",{className:"jkl-select__outer-wrapper",style:{width:w},children:[l("select",{ref:o,className:a("jkl-select__button",f,{"jkl-select__button--active-value":!!h}),defaultValue:h?void 0:"",value:h,...t,...L,children:[_&&!h&&e("option",{disabled:!0,value:"",children:_}),v.map(s).map((l=>e("option",{"data-testid":"jkl-select__option",className:"jkl-select__option",value:l.value,children:l.label},l.value)))]}),e(i,{variant:"medium",pointingDown:!0,className:"jkl-select__arrow"})]})})}));o.displayName="NativeSelect";export{o as NativeSelect};
 //# sourceMappingURL=NativeSelect.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NativeSelect.js","sources":["../../../../src/components/select/NativeSelect.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, SelectHTMLAttributes } from \"react\";\nimport { getValuePair, ValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup, InputGroupProps } from \"../input-group/InputGroup.js\";\n\nexport interface NativeSelectProps\n    extends Omit<InputGroupProps, \"children\">,\n        SelectHTMLAttributes<HTMLSelectElement> {\n    /**\n     * Merk som ugyldig uten å sende inn en errorLabel.\n     * NB! Brukes kun i tilfeller der valideringsfeil dukker opp andre steder, for eksempel i en FieldGroup.\n     */\n    invalid?: boolean;\n    /**\n     * Setter inn et placeholderelement som vises når ingenting er valgt i nedtrekkslisten.\n     * @default \"Velg\"\n     */\n    placeholder?: string;\n    items: Array<string | ValuePair>;\n    selectClassName?: string;\n    width?: string;\n}\n\nexport const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(\n    (props, ref) => {\n        const {\n            label,\n            className,\n            density,\n            errorLabel,\n            helpLabel,\n            inline,\n            invalid,\n            items,\n            labelProps,\n            placeholder = \"Velg\",\n            selectClassName,\n            supportLabelProps,\n            tooltipProps,\n            value,\n            width,\n            ...rest\n        } = props;\n\n        const inputGroupProps = {\n            label,\n            density,\n            errorLabel,\n            helpLabel,\n            labelProps,\n            inline,\n            supportLabelProps,\n            tooltipProps,\n        };\n\n        return (\n            <InputGroup\n                {...inputGroupProps}\n                data-testid=\"jkl-select\"\n                className={clsx(\"jkl-select\", className, {\n                    \"jkl-select--inline\": inline,\n                    \"jkl-select--invalid\": !!errorLabel || invalid,\n                })}\n                render={(inputProps) => (\n                    <div\n                        className=\"jkl-select__outer-wrapper\"\n                        style={{ width }}\n                    >\n                        <select\n                            ref={ref}\n                            className={clsx(\n                                \"jkl-select__button\",\n                                selectClassName,\n                                {\n                                    \"jkl-select__button--active-value\": !!value,\n                                },\n                            )}\n                            defaultValue={value ? undefined : \"\"}\n                            value={value}\n                            {...inputProps}\n                            {...rest}\n                        >\n                            {placeholder && !value && (\n                                <option disabled value=\"\">\n                                    {placeholder}\n                                </option>\n                            )}\n                            {items.map(getValuePair).map((item) => (\n                                <option\n                                    data-testid=\"jkl-select__option\"\n                                    className=\"jkl-select__option\"\n                                    key={item.value}\n                                    value={item.value}\n                                >\n                                    {item.label}\n                                </option>\n                            ))}\n                        </select>\n                        <ArrowVerticalAnimated\n                            variant=\"medium\"\n                            pointingDown\n                            className=\"jkl-select__arrow\"\n                        />\n                    </div>\n                )}\n            />\n        );\n    },\n);\n\nNativeSelect.displayName = \"NativeSelect\";\n"],"names":["NativeSelect","forwardRef","props","ref","label","className","density","errorLabel","helpLabel","inline","invalid","items","labelProps","placeholder","selectClassName","supportLabelProps","tooltipProps","value","width","rest","jsx","InputGroup","clsx","render","inputProps","jsxs","style","children","defaultValue","disabled","map","getValuePair","item","ArrowVerticalAnimated","variant","pointingDown","displayName"],"mappings":"iVAwBO,MAAMA,EAAeC,GACxB,CAACC,EAAOC,KACE,MACFC,MAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,YAAAA,EAAc,OACdC,gBAAAA,EACAC,kBAAAA,EACAC,aAAAA,EACAC,MAAAA,EACAC,MAAAA,KACGC,GACHjB,EAcA,OAAAkB,EAACC,EAAA,CAXDjB,MAAAA,EACAE,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAI,WAAAA,EACAH,OAAAA,EACAM,kBAAAA,EACAC,aAAAA,EAMI,cAAY,aACZX,UAAWiB,EAAK,aAAcjB,EAAW,CACrC,qBAAsBI,EACtB,wBAAyBF,GAAcG,IAE3Ca,OAASC,GACLC,EAAC,MAAA,CACGpB,UAAU,4BACVqB,MAAO,CAAER,MAAAA,GAETS,SAAA,CAAAF,EAAC,SAAA,CACGtB,IAAAA,EACAE,UAAWiB,EACP,qBACAR,EACA,CACI,qCAAsCG,IAG9CW,aAAcX,OAAQ,EAAY,GAClCA,MAAAA,KACIO,KACAL,EAEHQ,SAAA,CAAed,IAACI,GACZG,EAAA,SAAA,CAAOS,UAAQ,EAACZ,MAAM,GAClBU,SACLd,IAEHF,EAAMmB,IAAIC,GAAcD,KAAKE,GAC1BZ,EAAC,SAAA,CACG,cAAY,qBACZf,UAAU,qBAEVY,MAAOe,EAAKf,MAEXU,SAAKK,EAAA5B,OAHD4B,EAAKf,YAOtBG,EAACa,EAAA,CACGC,QAAQ,SACRC,cAAY,EACZ9B,UAAU,0BAElB,IAOpBL,EAAaoC,YAAc"}
+{"version":3,"file":"NativeSelect.js","sources":["../../../../src/components/select/NativeSelect.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, SelectHTMLAttributes } from \"react\";\nimport { getValuePair, ValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup, InputGroupProps } from \"../input-group/InputGroup.js\";\n\nexport interface NativeSelectProps\n    extends Omit<InputGroupProps, \"children\">,\n        SelectHTMLAttributes<HTMLSelectElement> {\n    /**\n     * Merk som ugyldig uten å sende inn en errorLabel.\n     * NB! Brukes kun i tilfeller der valideringsfeil dukker opp andre steder, for eksempel i en FieldGroup.\n     */\n    invalid?: boolean;\n    /**\n     * Setter inn et placeholderelement som vises når ingenting er valgt i nedtrekkslisten.\n     * @default \"Velg\"\n     */\n    placeholder?: string;\n    items: Array<string | ValuePair>;\n    selectClassName?: string;\n    width?: string;\n}\n\nexport const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(\n    (props, ref) => {\n        const {\n            label,\n            className,\n            density,\n            errorLabel,\n            helpLabel,\n            inline,\n            invalid,\n            items,\n            labelProps,\n            placeholder = \"Velg\",\n            selectClassName,\n            supportLabelProps,\n            tooltip,\n            value,\n            width,\n            ...rest\n        } = props;\n\n        const inputGroupProps = {\n            label,\n            density,\n            errorLabel,\n            helpLabel,\n            labelProps,\n            inline,\n            supportLabelProps,\n            tooltip,\n        };\n\n        return (\n            <InputGroup\n                {...inputGroupProps}\n                data-testid=\"jkl-select\"\n                className={clsx(\"jkl-select\", className, {\n                    \"jkl-select--inline\": inline,\n                    \"jkl-select--invalid\": !!errorLabel || invalid,\n                })}\n                render={(inputProps) => (\n                    <div\n                        className=\"jkl-select__outer-wrapper\"\n                        style={{ width }}\n                    >\n                        <select\n                            ref={ref}\n                            className={clsx(\n                                \"jkl-select__button\",\n                                selectClassName,\n                                {\n                                    \"jkl-select__button--active-value\": !!value,\n                                },\n                            )}\n                            defaultValue={value ? undefined : \"\"}\n                            value={value}\n                            {...inputProps}\n                            {...rest}\n                        >\n                            {placeholder && !value && (\n                                <option disabled value=\"\">\n                                    {placeholder}\n                                </option>\n                            )}\n                            {items.map(getValuePair).map((item) => (\n                                <option\n                                    data-testid=\"jkl-select__option\"\n                                    className=\"jkl-select__option\"\n                                    key={item.value}\n                                    value={item.value}\n                                >\n                                    {item.label}\n                                </option>\n                            ))}\n                        </select>\n                        <ArrowVerticalAnimated\n                            variant=\"medium\"\n                            pointingDown\n                            className=\"jkl-select__arrow\"\n                        />\n                    </div>\n                )}\n            />\n        );\n    },\n);\n\nNativeSelect.displayName = \"NativeSelect\";\n"],"names":["NativeSelect","forwardRef","props","ref","label","className","density","errorLabel","helpLabel","inline","invalid","items","labelProps","placeholder","selectClassName","supportLabelProps","tooltip","value","width","rest","jsx","InputGroup","clsx","render","inputProps","jsxs","style","children","defaultValue","disabled","map","getValuePair","item","ArrowVerticalAnimated","variant","pointingDown","displayName"],"mappings":"iVAwBO,MAAMA,EAAeC,GACxB,CAACC,EAAOC,KACE,MACFC,MAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,YAAAA,EAAc,OACdC,gBAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,MAAAA,EACAC,MAAAA,KACGC,GACHjB,EAcA,OAAAkB,EAACC,EAAA,CAXDjB,MAAAA,EACAE,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAI,WAAAA,EACAH,OAAAA,EACAM,kBAAAA,EACAC,QAAAA,EAMI,cAAY,aACZX,UAAWiB,EAAK,aAAcjB,EAAW,CACrC,qBAAsBI,EACtB,wBAAyBF,GAAcG,IAE3Ca,OAASC,GACLC,EAAC,MAAA,CACGpB,UAAU,4BACVqB,MAAO,CAAER,MAAAA,GAETS,SAAA,CAAAF,EAAC,SAAA,CACGtB,IAAAA,EACAE,UAAWiB,EACP,qBACAR,EACA,CACI,qCAAsCG,IAG9CW,aAAcX,OAAQ,EAAY,GAClCA,MAAAA,KACIO,KACAL,EAEHQ,SAAA,CAAed,IAACI,GACZG,EAAA,SAAA,CAAOS,UAAQ,EAACZ,MAAM,GAClBU,SACLd,IAEHF,EAAMmB,IAAIC,GAAcD,KAAKE,GAC1BZ,EAAC,SAAA,CACG,cAAY,qBACZf,UAAU,qBAEVY,MAAOe,EAAKf,MAEXU,SAAKK,EAAA5B,OAHD4B,EAAKf,YAOtBG,EAACa,EAAA,CACGC,QAAQ,SACRC,cAAY,EACZ9B,UAAU,0BAElB,IAOpBL,EAAaoC,YAAc"}

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

@@ -1,2 +1,2 @@
-import{jsxs as e,Fragment as t,jsx as n}from"react/jsx-runtime";import{c as r}from"../../../clsx-BeLtu-UY.js";import{forwardRef as o,useState as a,useCallback as l,useMemo as s,useRef as i,useEffect as u}from"react";import{useAnimatedHeight as c}from"../../hooks/useAnimatedHeight/useAnimatedHeight.js";import{useId as d}from"../../hooks/useId/useId.js";import{useListNavigation as p}from"../../hooks/useListNavigation/useListNavigation.js";import{usePreviousValue as v}from"../../hooks/usePreviousValue/usePreviousValue.js";import{getValuePair as f}from"../../utilities/valuePair.js";import{ArrowVerticalAnimated as m}from"../icon/icons/animated/ArrowVerticalAnimated.js";import{InputGroup as b}from"../input-group/InputGroup.js";import{focusSelected as g,toLower as h}from"./select-utils.js";const k=()=>{},y=o(((o,y)=>{const{id:j,name:w,items:_,value:P,label:D,labelProps:E,onChange:L,onBlur:$,onFocus:x,className:N,helpLabel:A,errorLabel:C,invalid:F,searchable:S=!1,inline:V=!1,defaultPrompt:T="Velg",density:I,width:K,maxShownOptions:B=5,style:H,tooltipProps:M,...O}=o,G=d(j||"jkl-select",{generateSuffix:!j}),R=`${G}_label`,q=`${G}_button`,U=`${G}_search-input`,[z,J]=a(!1),Q=l((()=>{J((e=>!e))}),[]),W=!!S,X=W&&z,[Y,Z]=a(""),ee=l((e=>!!e.label.toLowerCase().includes(Y.toLowerCase())||"function"==typeof S&&S(Y,e)),[S,Y]),te=s((()=>_.map(f).map((e=>{const t=!W||""===Y||ee(e);return{...e,visible:t}}))),[_,W,Y,ee]),ne=s((()=>!(typeof P>"u")&&_.some((e=>"string"==typeof e?e===P:e.value===P))),[P,_]),[re,oe]=a(ne&&void 0!==P?P:""),ae=""!==re,le=s((()=>{var e;return(null==(e=te.find((e=>e.value===re)))?void 0:e.label)||T}),[te,re,T]),se=i(null),ie=l((e=>{se.current=e,y&&("function"==typeof y?y(e):y.current=e),e&&oe(e.value)}),[se,y]),ue=v(P);u((()=>{P!==ue&&oe(typeof P>"u"||!ne?"":P)}),[oe,P,ue,ne]);const ce=l((e=>{const t=e.value;Z(""),oe(t),Q()}),[Z,oe,Q]),de=v(re);u((()=>{typeof de>"u"||de===re||re===P||(L&&L({type:"change",target:{name:w,value:re}}),se.current&&se.current.dispatchEvent(new Event("change",{bubbles:!0})))}),[L,w,P,re,de]);const pe=i(null),ve=i(!1),fe=i(null),me=i(null),be=l(((e,t)=>{if(e&&!W){const e=t.current;e&&g(e,re)}else e?fe.current&&fe.current.focus():ve.current&&me.current&&me.current.focus()}),[W,re]),[ge]=c(z,{onFirstVisible:be,onTransitionEnd:be});p({ref:ge});const he=l((()=>{var e;W&&Z(""),$&&($({type:"blur",target:{name:w,value:re}}),null==(e=se.current)||e.dispatchEvent(new Event("focusout",{bubbles:!0}))),ve.current=!1,J(!1)}),[$,Z,J,W,w,re]),ke=l((e=>{const t=pe.current;t&&t.contains(e.relatedTarget)||he()}),[he]),ye=l((()=>{ve.current||(x&&x({type:"change",target:{name:w,value:re}}),ve.current=!0)}),[x,re,w]),je=l((e=>{e.target.focus({preventScroll:!0})}),[]);u((()=>{const e=se.current,t=fe.current,n=me.current,r=pe.current;return null==e||e.addEventListener("focus",(()=>{X?null==t||t.focus():null==n||n.focus()})),null==e||e.addEventListener("blur",(function(e){r&&r.contains(e.relatedTarget)&&e.preventDefault()})),()=>{null==e||e.removeEventListener("focus",(()=>{X?null==t||t.focus():null==n||n.focus()})),null==e||e.removeEventListener("blur",(function(e){r&&r.contains(e.relatedTarget)&&e.preventDefault()}))}}),[X]);const we=l((e=>{"ArrowDown"!==e.key&&" "!==e.key||z?"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),J(!1)):(e.preventDefault(),e.stopPropagation(),J(!0))}),[J,z]),_e=l((e=>{if("ArrowDown"===e.key){e.preventDefault(),e.stopPropagation();const t=ge.current;t&&g(t,W?void 0:re)}else if("Escape"===e.key)e.preventDefault(),e.stopPropagation(),J(!1);else if("Tab"!==e.key||e.shiftKey)"Enter"===e.key&&z&&(e.preventDefault(),e.stopPropagation());else{const t=ge.current;t&&(e.preventDefault(),e.stopPropagation(),g(t,re))}}),[J,ge,re,W,z]),Pe=l((e=>{if("Tab"===e.key)e.preventDefault(),e.stopPropagation(),e.shiftKey&&fe.current?fe.current.focus():me.current&&(oe(e.currentTarget.value),J(!1),me.current.focus());else if("ArrowUp"===e.key&&ge.current&&fe.current){const t=ge.current.querySelector('[role="option"]:not([hidden])');e.currentTarget.id===(null==t?void 0:t.id)&&fe.current&&fe.current.focus()}}),[J,ge]);return u((()=>{const e=e=>{"Escape"===e.key&&z&&J(!1)};return typeof window<"u"&&z&&window.addEventListener("keydown",e),()=>{typeof window<"u"&&window.removeEventListener("keydown",e)}}),[J,z]),e(t,{children:[e("select",{name:w,tabIndex:-1,"data-testid":"jkl-native-select",className:"jkl-sr-only","aria-hidden":!0,ref:ie,value:re,onChange:k,children:[n("option",{value:""})," ",te.map((e=>n("option",{hidden:!e.visible,value:e.value,children:e.label},`${G}-opt-${e.value}`)))]}),n(b,{ref:pe,"data-testid":"jkl-select",className:r("jkl-select",N,{"jkl-select--inline":V,"jkl-select--open":z&&te.some((e=>e.visible)),"jkl-select--no-value":!ae,"jkl-select--invalid":!!C||F}),tooltipProps:M&&{...M,triggerProps:{...M.triggerProps,onFocus:e=>{var t,n;null==(n=null==(t=M.triggerProps)?void 0:t.onFocus)||n.call(t,e),he()}}},...O,id:W?U:q,style:{"--jkl-select-max-shown-options":B,...H},density:I,label:D,labelProps:{id:R,srOnly:V,...E,htmlFor:W?U:q},helpLabel:A,errorLabel:C,render:({"aria-invalid":t,...o})=>e("div",{className:"jkl-select__outer-wrapper",style:{width:K},children:[W&&n("input",{...o,"aria-invalid":t,id:U,hidden:!X,ref:fe,placeholder:"Søk",value:Y,onChange:e=>Z(e.target.value),"data-testid":"jkl-select__search-input",className:"jkl-select__search-input","aria-autocomplete":"list","aria-activedescendant":ae?`${G}__${h(re)}`:void 0,"aria-controls":G,"aria-expanded":z,role:"combobox",onKeyDown:_e,onBlur:ke,onFocus:ye,onClick:e=>{e.stopPropagation()}}),n("button",{"aria-invalid":t,...o,id:q,ref:me,hidden:X,type:"button",name:`${w}-btn`,className:r("jkl-select__button",{"jkl-select__button--active-value":!!re}),"data-testid":"jkl-select__button","aria-label":`${le||"Velg"},${D}`,"aria-expanded":z,"aria-controls":G,onBlur:ke,onFocus:ye,onKeyDown:we,onClick:Q,onMouseDown:e=>{var t;e.preventDefault(),null==(t=me.current)||t.focus()},children:le}),n("div",{id:G,ref:ge,role:"listbox",className:"jkl-select__options-menu",hidden:!z||te.every((e=>!e.visible)),"aria-labelledby":R,tabIndex:-1,"data-focus":"controlled",children:te.map(((t,r)=>t.visible?e("button",{hidden:!t.visible,type:"button",id:`${G}__${h(t.value)}`,className:"jkl-select__option","data-testid":"jkl-select__option","aria-selected":t.value===re,role:"option",value:t.value,"data-testautoid":`jkl-select__option-${r}`,onBlur:ke,onFocus:ye,onKeyDown:Pe,onClick:e=>{e.preventDefault(),ce(t)},onMouseOver:je,children:[t.label,t.description?n("span",{className:"jkl-select__option-description",children:t.description}):null]},`${G}-${t.value}`):null))}),n(m,{variant:"medium",pointingDown:!z,className:"jkl-select__arrow"})]})})]})}));y.displayName="Select";export{y as Select};
+import{jsxs as e,Fragment as t,jsx as n}from"react/jsx-runtime";import{c as r}from"../../../clsx-BeLtu-UY.js";import o,{forwardRef as a,useState as l,useCallback as s,useMemo as i,useRef as u,useEffect as c}from"react";import{useAnimatedHeight as d}from"../../hooks/useAnimatedHeight/useAnimatedHeight.js";import{useId as p}from"../../hooks/useId/useId.js";import{useListNavigation as v}from"../../hooks/useListNavigation/useListNavigation.js";import{usePreviousValue as f}from"../../hooks/usePreviousValue/usePreviousValue.js";import{getValuePair as m}from"../../utilities/valuePair.js";import{ArrowVerticalAnimated as b}from"../icon/icons/animated/ArrowVerticalAnimated.js";import{InputGroup as g}from"../input-group/InputGroup.js";import{focusSelected as h,toLower as k}from"./select-utils.js";const y=()=>{},j=a(((a,j)=>{const{id:w,name:_,items:P,value:D,label:E,labelProps:L,onChange:$,onBlur:x,onFocus:N,className:A,helpLabel:V,errorLabel:C,invalid:F,searchable:S=!1,inline:T=!1,defaultPrompt:I="Velg",density:K,width:B,maxShownOptions:H=5,style:M,tooltip:O,...G}=a,R=p(w||"jkl-select",{generateSuffix:!w}),q=`${R}_label`,U=`${R}_button`,z=`${R}_search-input`,[J,Q]=l(!1),W=s((()=>{Q((e=>!e))}),[]),X=!!S,Y=X&&J,[Z,ee]=l(""),te=s((e=>!!e.label.toLowerCase().includes(Z.toLowerCase())||"function"==typeof S&&S(Z,e)),[S,Z]),ne=i((()=>P.map(m).map((e=>{const t=!X||""===Z||te(e);return{...e,visible:t}}))),[P,X,Z,te]),re=i((()=>!(typeof D>"u")&&P.some((e=>"string"==typeof e?e===D:e.value===D))),[D,P]),[oe,ae]=l(re&&void 0!==D?D:""),le=""!==oe,se=i((()=>{var e;return(null==(e=ne.find((e=>e.value===oe)))?void 0:e.label)||I}),[ne,oe,I]),ie=u(null),ue=s((e=>{ie.current=e,j&&("function"==typeof j?j(e):j.current=e),e&&ae(e.value)}),[ie,j]),ce=f(D);c((()=>{D!==ce&&ae(typeof D>"u"||!re?"":D)}),[ae,D,ce,re]);const de=s((e=>{const t=e.value;ee(""),ae(t),W()}),[ee,ae,W]),pe=f(oe);c((()=>{typeof pe>"u"||pe===oe||oe===D||($&&$({type:"change",target:{name:_,value:oe}}),ie.current&&ie.current.dispatchEvent(new Event("change",{bubbles:!0})))}),[$,_,D,oe,pe]);const ve=u(null),fe=u(!1),me=u(null),be=u(null),ge=s(((e,t)=>{if(e&&!X){const e=t.current;e&&h(e,oe)}else e?me.current&&me.current.focus():fe.current&&be.current&&be.current.focus()}),[X,oe]),[he]=d(J,{onFirstVisible:ge,onTransitionEnd:ge});v({ref:he});const ke=s((()=>{var e;X&&ee(""),x&&(x({type:"blur",target:{name:_,value:oe}}),null==(e=ie.current)||e.dispatchEvent(new Event("focusout",{bubbles:!0}))),fe.current=!1,Q(!1)}),[x,ee,Q,X,_,oe]),ye=s((e=>{const t=ve.current;t&&t.contains(e.relatedTarget)||ke()}),[ke]),je=s((()=>{fe.current||(N&&N({type:"change",target:{name:_,value:oe}}),fe.current=!0)}),[N,oe,_]),we=s((e=>{e.target.focus({preventScroll:!0})}),[]);c((()=>{const e=ie.current,t=me.current,n=be.current,r=ve.current;return null==e||e.addEventListener("focus",(()=>{Y?null==t||t.focus():null==n||n.focus()})),null==e||e.addEventListener("blur",(function(e){r&&r.contains(e.relatedTarget)&&e.preventDefault()})),()=>{null==e||e.removeEventListener("focus",(()=>{Y?null==t||t.focus():null==n||n.focus()})),null==e||e.removeEventListener("blur",(function(e){r&&r.contains(e.relatedTarget)&&e.preventDefault()}))}}),[Y]);const _e=s((e=>{"ArrowDown"!==e.key&&" "!==e.key||J?"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),Q(!1)):(e.preventDefault(),e.stopPropagation(),Q(!0))}),[Q,J]),Pe=s((e=>{if("ArrowDown"===e.key){e.preventDefault(),e.stopPropagation();const t=he.current;t&&h(t,X?void 0:oe)}else if("Escape"===e.key)e.preventDefault(),e.stopPropagation(),Q(!1);else if("Tab"!==e.key||e.shiftKey)"Enter"===e.key&&J&&(e.preventDefault(),e.stopPropagation());else{const t=he.current;t&&(e.preventDefault(),e.stopPropagation(),h(t,oe))}}),[Q,he,oe,X,J]),De=s((e=>{if("Tab"===e.key)e.preventDefault(),e.stopPropagation(),e.shiftKey&&me.current?me.current.focus():be.current&&(ae(e.currentTarget.value),Q(!1),be.current.focus());else if("ArrowUp"===e.key&&he.current&&me.current){const t=he.current.querySelector('[role="option"]:not([hidden])');e.currentTarget.id===(null==t?void 0:t.id)&&me.current&&me.current.focus()}}),[Q,he]);return c((()=>{const e=e=>{"Escape"===e.key&&J&&Q(!1)};return typeof window<"u"&&J&&window.addEventListener("keydown",e),()=>{typeof window<"u"&&window.removeEventListener("keydown",e)}}),[Q,J]),e(t,{children:[e("select",{name:_,tabIndex:-1,"data-testid":"jkl-native-select",className:"jkl-sr-only","aria-hidden":!0,ref:ue,value:oe,onChange:y,children:[n("option",{value:""})," ",ne.map((e=>n("option",{hidden:!e.visible,value:e.value,children:e.label},`${R}-opt-${e.value}`)))]}),n(g,{ref:ve,"data-testid":"jkl-select",className:r("jkl-select",A,{"jkl-select--inline":T,"jkl-select--open":J&&ne.some((e=>e.visible)),"jkl-select--no-value":!le,"jkl-select--invalid":!!C||F}),tooltip:O&&o.isValidElement(O)?o.cloneElement(O,{triggerProps:{...O.props.triggerProps,onFocus:e=>{var t,n;null==(n=null==(t=O.props.triggerProps)?void 0:t.onFocus)||n.call(t,e),ke()}}}):null,...G,id:X?z:U,style:{"--jkl-select-max-shown-options":H,...M},density:K,label:E,labelProps:{id:q,srOnly:T,...L,htmlFor:X?z:U},helpLabel:V,errorLabel:C,render:({"aria-invalid":t,...o})=>e("div",{className:"jkl-select__outer-wrapper",style:{width:B},children:[X&&n("input",{...o,"aria-invalid":t,id:z,hidden:!Y,ref:me,placeholder:"Søk",value:Z,onChange:e=>ee(e.target.value),"data-testid":"jkl-select__search-input",className:"jkl-select__search-input","aria-autocomplete":"list","aria-activedescendant":le?`${R}__${k(oe)}`:void 0,"aria-controls":R,"aria-expanded":J,role:"combobox",onKeyDown:Pe,onBlur:ye,onFocus:je,onClick:e=>{e.stopPropagation()}}),n("button",{"aria-invalid":t,...o,id:U,ref:be,hidden:Y,type:"button",name:`${_}-btn`,className:r("jkl-select__button",{"jkl-select__button--active-value":!!oe}),"data-testid":"jkl-select__button","aria-label":`${se||"Velg"},${E}`,"aria-expanded":J,"aria-controls":R,onBlur:ye,onFocus:je,onKeyDown:_e,onClick:W,onMouseDown:e=>{var t;e.preventDefault(),null==(t=be.current)||t.focus()},children:se}),n("div",{id:R,ref:he,role:"listbox",className:"jkl-select__options-menu",hidden:!J||ne.every((e=>!e.visible)),"aria-labelledby":q,tabIndex:-1,"data-focus":"controlled",children:ne.map(((t,r)=>t.visible?e("button",{hidden:!t.visible,type:"button",id:`${R}__${k(t.value)}`,className:"jkl-select__option","data-testid":"jkl-select__option","aria-selected":t.value===oe,role:"option",value:t.value,"data-testautoid":`jkl-select__option-${r}`,onBlur:ye,onFocus:je,onKeyDown:De,onClick:e=>{e.preventDefault(),de(t)},onMouseOver:we,children:[t.label,t.description?n("span",{className:"jkl-select__option-description",children:t.description}):null]},`${R}-${t.value}`):null))}),n(b,{variant:"medium",pointingDown:!J,className:"jkl-select__arrow"})]})})]})}));j.displayName="Select";export{j as Select};
 //# sourceMappingURL=Select.js.map

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 React, {\n    ChangeEvent,\n    CSSProperties,\n    FocusEvent,\n    forwardRef,\n    KeyboardEvent,\n    MouseEvent,\n    RefObject,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { DataTestAutoId, Density } from \"../../core/types.js\";\nimport { useAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useListNavigation } from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport { usePreviousValue } from \"../../hooks/usePreviousValue/usePreviousValue.js\";\nimport { getValuePair, ValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup, InputGroupProps } from \"../input-group/InputGroup.js\";\nimport { LabelProps } from \"../input-group/Label.js\";\nimport { focusSelected, toLower } from \"./select-utils.js\";\n\nexport interface SelectPartialChangeEvent\n    extends Partial<Omit<ChangeEvent<HTMLSelectElement>, \"target\">> {\n    /** Kreves av react-hook-form, det skjer ulike ting avhengig av om det er blur eller change */\n    type: \"change\" | \"blur\";\n    target: {\n        /** Kreves av react-hook-form for å vite hvilket skjemafelt som ble endret */\n        name: string;\n        value: string;\n    };\n}\n\nexport type SelectChangeEventHandler = (\n    event: SelectPartialChangeEvent,\n) => void;\n\ninterface Option extends ValuePair {\n    visible: boolean;\n}\n\nexport interface SelectProps\n    extends Omit<InputGroupProps, \"children\">,\n        DataTestAutoId {\n    id?: string;\n    name: string;\n    label: string;\n    labelProps?: Omit<\n        LabelProps,\n        \"children\" | \"density\" | \"htmlFor\" | \"standAlone\"\n    >;\n    items: Array<string | ValuePair>;\n    /**\n     * @default false\n     */\n    inline?: boolean;\n    /**\n     * @default \"Velg\"\n     */\n    defaultPrompt?: string;\n    className?: string;\n    value?: string;\n    helpLabel?: string;\n    errorLabel?: string;\n    /**\n     * @default false\n     */\n    searchable?:\n        | boolean\n        | ((searchValue: string, searchItem: string | ValuePair) => boolean);\n    density?: Density;\n    width?: string;\n    onChange?: SelectChangeEventHandler;\n    onBlur?: SelectChangeEventHandler;\n    onFocus?: SelectChangeEventHandler;\n    /**\n     * Merk som ugyldig uten å sende inn en errorLabel.\n     * NB! Brukes kun i tilfeller der valideringsfeil dukker opp andre steder, for eksempel i en FieldGroup.\n     */\n    invalid?: boolean;\n    /**\n     * Hvor mange valg skal vises i listen før den begynner å scrolle.\n     * @default 5\n     */\n    maxShownOptions?: number;\n}\n\nconst noop = () => {\n    return;\n};\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n    (props, forwardedSelectRef) => {\n        const {\n            id,\n            name,\n            items,\n            value,\n            label,\n            labelProps,\n            onChange,\n            onBlur,\n            onFocus,\n            className,\n            helpLabel,\n            errorLabel,\n            invalid,\n            searchable = false,\n            inline = false,\n            defaultPrompt = \"Velg\",\n            density,\n            width,\n            maxShownOptions = 5,\n            style,\n            tooltipProps,\n            ...rest\n        } = props;\n\n        const listId = useId(id || \"jkl-select\", { generateSuffix: !id });\n        const labelId = `${listId}_label`;\n        const buttonId = `${listId}_button`;\n        const searchInputId = `${listId}_search-input`;\n\n        const [dropdownIsShown, setShown] = useState(false);\n        const toggleListVisibility = useCallback(() => {\n            setShown((previousValue) => !previousValue);\n        }, []);\n\n        /// Søk\n\n        const isSearchable = Boolean(searchable);\n        const showSearchInputField = isSearchable && dropdownIsShown;\n        const [searchValue, setSearchValue] = useState(\"\");\n        const searchFn = useCallback(\n            (item: ValuePair) => {\n                if (\n                    item.label.toLowerCase().includes(searchValue.toLowerCase())\n                ) {\n                    return true;\n                }\n\n                if (typeof searchable === \"function\") {\n                    return searchable(searchValue, item);\n                }\n\n                return false;\n            },\n            [searchable, searchValue],\n        );\n        const visibleItems: Option[] = useMemo(\n            () =>\n                items.map(getValuePair).map((item) => {\n                    const visible =\n                        !isSearchable || searchValue === \"\" || searchFn(item);\n                    return { ...item, visible };\n                }),\n            [items, isSearchable, searchValue, searchFn],\n        );\n        const valueIsInItems: boolean = useMemo(() => {\n            if (typeof value === \"undefined\") {\n                return false;\n            }\n            return items.some((item) =>\n                typeof item === \"string\"\n                    ? item === value\n                    : item.value === value,\n            );\n        }, [value, items]);\n\n        /// Valg av <option>\n\n        const [selectedValue, setSelectedValue] = useState<string>(\n            valueIsInItems && value !== undefined ? value : \"\",\n        );\n        const hasSelectedValue = selectedValue !== \"\";\n        const selectedValueLabel = useMemo(\n            () =>\n                visibleItems.find((item) => item.value === selectedValue)\n                    ?.label || defaultPrompt,\n            [visibleItems, selectedValue, defaultPrompt],\n        );\n\n        const selectRef = useRef<HTMLSelectElement | null>(null);\n        // Hjelpefunksjon som gjør det enklere å forwarde refen og å bruke den selv internt\n        const unifiedSelectRef = useCallback(\n            (instance: HTMLSelectElement | null) => {\n                selectRef.current = instance;\n                if (forwardedSelectRef) {\n                    if (typeof forwardedSelectRef === \"function\") {\n                        forwardedSelectRef(instance);\n                    } else {\n                        forwardedSelectRef.current = instance;\n                    }\n                }\n                if (instance) {\n                    setSelectedValue(instance.value);\n                }\n            },\n            [selectRef, forwardedSelectRef],\n        );\n\n        const previousValue = usePreviousValue(value);\n        useEffect(() => {\n            if (value === previousValue) {\n                return;\n            }\n            if (typeof value === \"undefined\" || !valueIsInItems) {\n                setSelectedValue(\"\");\n            } else {\n                setSelectedValue(value);\n            }\n        }, [setSelectedValue, value, previousValue, valueIsInItems]);\n\n        const selectOption = useCallback(\n            (item: Option) => {\n                const nextValue = item.value;\n                setSearchValue(\"\");\n                setSelectedValue(nextValue);\n                toggleListVisibility();\n            },\n            [setSearchValue, setSelectedValue, toggleListVisibility],\n        );\n\n        // La komponenten rendre <select> med den valgte verdien før onChange trigges, slik at\n        // react-hook-form@>7.41.1 behandler feltet som at det har en verdi.\n        const previousSelectedValue = usePreviousValue(selectedValue);\n        useEffect(() => {\n            // previousSelectedValue er undefined på første render, men da vil vi ikke ha en onChange uansett\n            if (\n                typeof previousSelectedValue === \"undefined\" ||\n                previousSelectedValue === selectedValue ||\n                selectedValue === value\n            ) {\n                return;\n            }\n            if (onChange) {\n                onChange({\n                    type: \"change\",\n                    target: { name, value: selectedValue },\n                });\n            }\n            if (selectRef.current) {\n                selectRef.current.dispatchEvent(\n                    new Event(\"change\", { bubbles: true }),\n                );\n            }\n        }, [onChange, name, value, selectedValue, previousSelectedValue]);\n\n        /// Fokushåndtering\n\n        const componentRootElementRef = useRef<HTMLDivElement>(null);\n        const focusInsideRef = useRef(false);\n        const searchFieldRef = useRef<HTMLInputElement>(null);\n        const buttonRef = useRef<HTMLButtonElement>(null);\n\n        const handleFocusPlacement = useCallback(\n            (isOpen: boolean, ref: RefObject<HTMLElement>) => {\n                if (isOpen && !isSearchable) {\n                    const listElement = ref.current;\n                    if (listElement) {\n                        focusSelected(listElement, selectedValue);\n                    }\n                } else if (isOpen) {\n                    if (searchFieldRef.current) {\n                        searchFieldRef.current.focus();\n                    }\n                } else {\n                    if (focusInsideRef.current && buttonRef.current) {\n                        buttonRef.current.focus();\n                    }\n                }\n            },\n            [isSearchable, selectedValue],\n        );\n\n        const [dropdownRef] = useAnimatedHeight<HTMLDivElement>(\n            dropdownIsShown,\n            {\n                onFirstVisible: handleFocusPlacement,\n                onTransitionEnd: handleFocusPlacement,\n            },\n        );\n\n        useListNavigation({ ref: dropdownRef });\n\n        const close = useCallback(() => {\n            if (isSearchable) {\n                setSearchValue(\"\");\n            }\n            if (onBlur) {\n                onBlur({\n                    type: \"blur\",\n                    target: { name, value: selectedValue },\n                });\n                selectRef.current?.dispatchEvent(\n                    new Event(\"focusout\", { bubbles: true }),\n                );\n            }\n            focusInsideRef.current = false;\n            setShown(false);\n        }, [\n            onBlur,\n            setSearchValue,\n            setShown,\n            isSearchable,\n            name,\n            selectedValue,\n        ]);\n\n        const handleBlur = useCallback(\n            (e: FocusEvent<HTMLButtonElement | HTMLInputElement>) => {\n                const componentRootElement = componentRootElementRef.current;\n                // There are known issues in Firefox when using \"relatedTarget\" in onBlur events:\n                // https://github.com/facebook/react/issues/2011\n                // This might be fixed in react 17. Se issue above.\n                const nextFocusIsInsideComponent =\n                    componentRootElement &&\n                    componentRootElement.contains(e.relatedTarget as Node);\n                if (!nextFocusIsInsideComponent) {\n                    close();\n                }\n            },\n            [close],\n        );\n\n        const handleFocus = useCallback(() => {\n            if (!focusInsideRef.current) {\n                if (onFocus) {\n                    onFocus({\n                        type: \"change\",\n                        target: { name, value: selectedValue },\n                    });\n                }\n                focusInsideRef.current = true;\n            }\n        }, [onFocus, selectedValue, name]);\n\n        const handleMouseOver = useCallback(\n            (e: MouseEvent<HTMLButtonElement>) => {\n                // Ved mouseOver på options flytter vi fokus til dem for å unngå \"dobbel fokus\"\n                // der det ser ut som to forskjellige elementer er fokusert/hovered samtidig\n                (e.target as HTMLButtonElement).focus({ preventScroll: true });\n            },\n            [],\n        );\n\n        // Handle focus and blur of hidden select element\n        useEffect(() => {\n            const select = selectRef.current;\n            const searchField = searchFieldRef.current;\n            const button = buttonRef.current;\n            const componentRootElement = componentRootElementRef.current;\n\n            select?.addEventListener(\"focus\", () => {\n                showSearchInputField ? searchField?.focus() : button?.focus();\n            });\n            select?.addEventListener(\"blur\", function (this, ev) {\n                componentRootElement &&\n                    componentRootElement.contains(ev.relatedTarget as Node) &&\n                    ev.preventDefault();\n            });\n\n            return () => {\n                select?.removeEventListener(\"focus\", () => {\n                    showSearchInputField\n                        ? searchField?.focus()\n                        : button?.focus();\n                });\n                select?.removeEventListener(\"blur\", function (this, ev) {\n                    componentRootElement &&\n                        componentRootElement.contains(\n                            ev.relatedTarget as Node,\n                        ) &&\n                        ev.preventDefault();\n                });\n            };\n        }, [showSearchInputField]);\n\n        /// Tastaturnavigasjon\n\n        // Add support for opening dropdown with arrowkey down as expected from native select\n        // onKeyDown to stop ArrowDown from scrolling the page\n        const handleOnKeyDown = useCallback(\n            (e: KeyboardEvent<HTMLButtonElement>) => {\n                if (\n                    (e.key === \"ArrowDown\" || e.key === \" \") &&\n                    !dropdownIsShown\n                ) {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setShown(true);\n                } else if (e.key === \"Escape\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setShown(false);\n                }\n            },\n            [setShown, dropdownIsShown],\n        );\n\n        // onKeyDown to stop ArrowDown from scrolling the page\n        const handleSearchOnKeyDown = useCallback(\n            (e: KeyboardEvent<HTMLInputElement>) => {\n                if (e.key === \"ArrowDown\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n\n                    const listElement = dropdownRef.current;\n                    if (listElement) {\n                        if (isSearchable) {\n                            // Flytt fokus til det første elementet i listen, ikke det forrige valgte.\n                            // Ved endring i filter er det ikke gitt at vi ønsker å ta utgangspunkt i\n                            // den valgte verdien.\n                            focusSelected(listElement, undefined);\n                        } else {\n                            focusSelected(listElement, selectedValue);\n                        }\n                    }\n                } else if (e.key === \"Escape\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setShown(false);\n                } else if (e.key === \"Tab\" && !e.shiftKey) {\n                    const listElement = dropdownRef.current;\n                    if (listElement) {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        focusSelected(listElement, selectedValue);\n                    }\n                } else if (e.key === \"Enter\" && dropdownIsShown) {\n                    // Should not propagate Enter keyevent because form might submit\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n            },\n            [\n                setShown,\n                dropdownRef,\n                selectedValue,\n                isSearchable,\n                dropdownIsShown,\n            ],\n        );\n\n        // onKeyDown so this Tab listener isn't triggered by tabbing from search field to option\n        const handleOptionOnKeyDown = useCallback(\n            (e: KeyboardEvent<HTMLButtonElement>) => {\n                if (e.key === \"Tab\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n\n                    if (e.shiftKey && searchFieldRef.current) {\n                        searchFieldRef.current.focus();\n                    } else if (buttonRef.current) {\n                        // Mimic behaviour of Firefox and native select, where Tab selects the current item and closes the menu\n                        setSelectedValue(e.currentTarget.value);\n                        setShown(false);\n                        buttonRef.current.focus();\n                    }\n                } else if (e.key === \"ArrowUp\") {\n                    if (dropdownRef.current && searchFieldRef.current) {\n                        // Can't be based on index since the first item might be filtered out\n                        const firstVisible = dropdownRef.current.querySelector(\n                            '[role=\"option\"]:not([hidden])',\n                        );\n                        if (\n                            e.currentTarget.id === firstVisible?.id &&\n                            searchFieldRef.current\n                        ) {\n                            searchFieldRef.current.focus();\n                        }\n                    }\n                }\n            },\n            [setShown, dropdownRef],\n        );\n\n        // Add support for closing the dropdown with Escape like native select. Unfortunately, Escape does not trigger the button onKeyDown.\n        useEffect(() => {\n            const handleEscape = (e: globalThis.KeyboardEvent) => {\n                if (e.key === \"Escape\" && dropdownIsShown) {\n                    setShown(false);\n                }\n            };\n            if (typeof window !== \"undefined\" && dropdownIsShown) {\n                window.addEventListener(\"keydown\", handleEscape);\n            }\n            return () => {\n                if (typeof window !== \"undefined\") {\n                    window.removeEventListener(\"keydown\", handleEscape);\n                }\n            };\n        }, [setShown, dropdownIsShown]);\n\n        return (\n            <>\n                <select\n                    name={name}\n                    tabIndex={-1}\n                    data-testid=\"jkl-native-select\"\n                    className=\"jkl-sr-only\"\n                    aria-hidden\n                    ref={unifiedSelectRef}\n                    value={selectedValue}\n                    onChange={noop} // React complains unless we give an onChange handler. This is technically a read-only field, but readOnly isn't an option here.\n                >\n                    <option value=\"\"></option>{\" \"}\n                    {/* Tom option må være et valg, ellers vil <select> alltid ha en value */}\n                    {visibleItems.map((item) => (\n                        <option\n                            key={`${listId}-opt-${item.value}`}\n                            hidden={!item.visible}\n                            value={item.value}\n                        >\n                            {item.label}\n                        </option>\n                    ))}\n                </select>\n                <InputGroup\n                    ref={componentRootElementRef}\n                    data-testid=\"jkl-select\"\n                    className={clsx(\"jkl-select\", className, {\n                        \"jkl-select--inline\": inline,\n                        \"jkl-select--open\":\n                            dropdownIsShown &&\n                            visibleItems.some((item) => item.visible),\n                        \"jkl-select--no-value\": !hasSelectedValue,\n                        \"jkl-select--invalid\": !!errorLabel || invalid,\n                    })}\n                    tooltipProps={\n                        tooltipProps && {\n                            ...tooltipProps,\n                            triggerProps: {\n                                ...tooltipProps.triggerProps,\n                                onFocus: (e) => {\n                                    tooltipProps.triggerProps?.onFocus?.(e);\n                                    close();\n                                },\n                            },\n                        }\n                    }\n                    {...rest}\n                    id={isSearchable ? searchInputId : buttonId}\n                    style={\n                        {\n                            [\"--jkl-select-max-shown-options\"]: maxShownOptions,\n                            ...style,\n                        } as CSSProperties\n                    }\n                    density={density}\n                    label={label}\n                    labelProps={{\n                        id: labelId,\n                        srOnly: inline,\n                        ...labelProps,\n                        htmlFor: isSearchable ? searchInputId : buttonId,\n                    }}\n                    helpLabel={helpLabel}\n                    errorLabel={errorLabel}\n                    render={({\n                        \"aria-invalid\": ariaInvalid,\n                        ...inputProps\n                    }) => (\n                        <div\n                            className=\"jkl-select__outer-wrapper\"\n                            style={{ width }}\n                        >\n                            {isSearchable && (\n                                <input\n                                    {...inputProps}\n                                    aria-invalid={ariaInvalid}\n                                    id={searchInputId}\n                                    hidden={!showSearchInputField}\n                                    ref={searchFieldRef}\n                                    placeholder=\"Søk\"\n                                    value={searchValue}\n                                    onChange={(e) =>\n                                        setSearchValue(e.target.value)\n                                    }\n                                    data-testid=\"jkl-select__search-input\"\n                                    className=\"jkl-select__search-input\"\n                                    aria-autocomplete=\"list\"\n                                    aria-activedescendant={\n                                        hasSelectedValue\n                                            ? `${listId}__${toLower(\n                                                  selectedValue,\n                                              )}`\n                                            : undefined\n                                    }\n                                    aria-controls={listId}\n                                    aria-expanded={dropdownIsShown}\n                                    role=\"combobox\"\n                                    onKeyDown={handleSearchOnKeyDown}\n                                    onBlur={handleBlur}\n                                    onFocus={handleFocus}\n                                    onClick={(e) => {\n                                        e.stopPropagation();\n                                    }}\n                                />\n                            )}\n                            {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}\n                            <button\n                                // Nei dette er ikke i henhold til speccen, men VoiceOver leser den likevel og det er oppførselen vi ønsker\n                                aria-invalid={ariaInvalid}\n                                {...inputProps}\n                                id={buttonId}\n                                ref={buttonRef}\n                                hidden={showSearchInputField}\n                                type=\"button\"\n                                name={`${name}-btn`}\n                                className={clsx(\"jkl-select__button\", {\n                                    \"jkl-select__button--active-value\":\n                                        !!selectedValue,\n                                })}\n                                data-testid=\"jkl-select__button\"\n                                aria-label={`${\n                                    selectedValueLabel || \"Velg\"\n                                },${label}`}\n                                aria-expanded={dropdownIsShown}\n                                aria-controls={listId}\n                                onBlur={handleBlur}\n                                onFocus={handleFocus}\n                                onKeyDown={handleOnKeyDown}\n                                onClick={toggleListVisibility}\n                                onMouseDown={(e) => {\n                                    // Workaround for en Safari-bug hvor e.relatedTarget er null i onBlur\n                                    // https://twitter.com/MilesSorce/status/1278762360669265925\n                                    e.preventDefault();\n                                    buttonRef.current?.focus();\n                                }}\n                            >\n                                {selectedValueLabel}\n                            </button>\n                            <div\n                                id={listId}\n                                ref={dropdownRef}\n                                role=\"listbox\"\n                                className=\"jkl-select__options-menu\"\n                                hidden={\n                                    !dropdownIsShown ||\n                                    visibleItems.every((item) => !item.visible)\n                                }\n                                aria-labelledby={labelId}\n                                tabIndex={-1}\n                                data-focus=\"controlled\" // lar oss styre markering av valg vha focus\n                            >\n                                {visibleItems.map((item, i) =>\n                                    // Det er viktig at vi _fjerner_ elementer som ikke er synlige fra DOMen for at tastaturnavigasjon skal fungere.\n                                    // For eksempel, hvis vi har elementene Apple, Samsung og LG i den rekkefølgen og søker etter \"l\"\n                                    // vil Samsung ikke synes. Om vi bare setter hidden-attributtet på Samsung vil ArrowDown fra Apple ikke fungere.\n                                    // Dette lar seg ikke gjenskape i en enhetstest med JSDOM + user-events, og Cypress lukker Select\n                                    // ved første {downArrow} ¯\\_(ツ)_/¯. Så please test scenariet over manuelt om dette skaper trøbbel for deg.\n                                    item.visible ? (\n                                        <button\n                                            key={`${listId}-${item.value}`}\n                                            hidden={!item.visible}\n                                            type=\"button\"\n                                            id={`${listId}__${toLower(\n                                                item.value,\n                                            )}`}\n                                            className=\"jkl-select__option\"\n                                            data-testid=\"jkl-select__option\"\n                                            aria-selected={\n                                                item.value === selectedValue\n                                            }\n                                            role=\"option\"\n                                            value={item.value}\n                                            data-testautoid={`jkl-select__option-${i}`}\n                                            onBlur={handleBlur}\n                                            onFocus={handleFocus}\n                                            onKeyDown={handleOptionOnKeyDown}\n                                            onClick={(e) => {\n                                                e.preventDefault();\n                                                selectOption(item);\n                                            }}\n                                            onMouseOver={handleMouseOver}\n                                        >\n                                            {item.label}\n                                            {item.description ? (\n                                                <span className=\"jkl-select__option-description\">\n                                                    {item.description}\n                                                </span>\n                                            ) : null}\n                                        </button>\n                                    ) : null,\n                                )}\n                            </div>\n                            <ArrowVerticalAnimated\n                                variant=\"medium\"\n                                pointingDown={!dropdownIsShown}\n                                className=\"jkl-select__arrow\"\n                            />\n                        </div>\n                    )}\n                />\n            </>\n        );\n    },\n);\n\nSelect.displayName = \"Select\";\n"],"names":["noop","Select","forwardRef","props","forwardedSelectRef","id","name","items","value","label","labelProps","onChange","onBlur","onFocus","className","helpLabel","errorLabel","invalid","searchable","inline","defaultPrompt","density","width","maxShownOptions","style","tooltipProps","rest","listId","useId","generateSuffix","labelId","buttonId","searchInputId","dropdownIsShown","setShown","useState","toggleListVisibility","useCallback","previousValue","isSearchable","showSearchInputField","searchValue","setSearchValue","searchFn","item","toLowerCase","includes","visibleItems","useMemo","map","getValuePair","visible","valueIsInItems","some","selectedValue","setSelectedValue","hasSelectedValue","selectedValueLabel","_a","find","selectRef","useRef","unifiedSelectRef","instance","current","usePreviousValue","useEffect","selectOption","nextValue","previousSelectedValue","type","target","dispatchEvent","Event","bubbles","componentRootElementRef","focusInsideRef","searchFieldRef","buttonRef","handleFocusPlacement","isOpen","ref","listElement","focusSelected","focus","dropdownRef","useAnimatedHeight","onFirstVisible","onTransitionEnd","useListNavigation","close","handleBlur","e","componentRootElement","contains","relatedTarget","handleFocus","handleMouseOver","preventScroll","select","searchField","button","addEventListener","ev","preventDefault","removeEventListener","handleOnKeyDown","key","stopPropagation","handleSearchOnKeyDown","shiftKey","handleOptionOnKeyDown","currentTarget","firstVisible","querySelector","handleEscape","window","jsxs","Fragment","children","tabIndex","jsx","hidden","InputGroup","clsx","triggerProps","_b","call","srOnly","htmlFor","render","ariaInvalid","inputProps","placeholder","toLower","role","onKeyDown","onClick","onMouseDown","every","i","onMouseOver","description","ArrowVerticalAnimated","variant","pointingDown","displayName"],"mappings":"0xBA2FA,MAAMA,EAAO,OAIAC,EAASC,GAClB,CAACC,EAAOC,KACE,MACFC,GAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,MAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,SAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,QAAAA,EACAC,WAAAA,GAAa,EACbC,OAAAA,GAAS,EACTC,cAAAA,EAAgB,OAChBC,QAAAA,EACAC,MAAAA,EACAC,gBAAAA,EAAkB,EAClBC,MAAAA,EACAC,aAAAA,KACGC,GACHvB,EAEEwB,EAASC,EAAMvB,GAAM,aAAc,CAAEwB,gBAAiBxB,IACtDyB,EAAU,GAAGH,UACbI,EAAW,GAAGJ,WACdK,EAAgB,GAAGL,kBAElBM,EAAiBC,GAAYC,GAAS,GACvCC,EAAuBC,GAAY,KAC5BH,GAACI,IAAmBA,GAAa,GAC3C,IAIGC,IAAuBrB,EACvBsB,EAAuBD,GAAgBN,GACtCQ,EAAaC,GAAkBP,EAAS,IACzCQ,GAAWN,GACZO,KAEOA,EAAKnC,MAAMoC,cAAcC,SAASL,EAAYI,gBAKxB,mBAAf3B,GACAA,EAAWuB,EAAaG,IAKvC,CAAC1B,EAAYuB,IAEXM,GAAyBC,GAC3B,IACIzC,EAAM0C,IAAIC,GAAcD,KAAKL,IACzB,MAAMO,GACDZ,GAAgC,KAAhBE,GAAsBE,GAASC,GAC7C,MAAA,IAAKA,EAAMO,QAAAA,OAE1B,CAAC5C,EAAOgC,EAAcE,EAAaE,KAEjCS,GAA0BJ,GAAQ,aACzBxC,EAAU,MAGdD,EAAM8C,MAAMT,GACC,iBAATA,EACDA,IAASpC,EACToC,EAAKpC,QAAUA,KAE1B,CAACA,EAAOD,KAIJ+C,GAAeC,IAAoBpB,EACtCiB,SAA4B,IAAV5C,EAAsBA,EAAQ,IAE9CgD,GAAqC,KAAlBF,GACnBG,GAAqBT,GACvB,WACIU,OAAA,OAAAA,EAAAX,GAAaY,MAAMf,GAASA,EAAKpC,QAAU8C,WAA3CI,EAAAA,EACMjD,QAASW,CAAAA,GACnB,CAAC2B,GAAcO,GAAelC,IAG5BwC,GAAYC,EAAiC,MAE7CC,GAAmBzB,GACpB0B,IACGH,GAAUI,QAAUD,EAChB3D,IACkC,mBAAvBA,EACPA,EAAmB2D,GAEnB3D,EAAmB4D,QAAUD,GAGjCA,GACAR,GAAiBQ,EAASvD,MAAK,GAGvC,CAACoD,GAAWxD,IAGVkC,GAAgB2B,EAAiBzD,GACvC0D,GAAU,KACF1D,IAAU8B,IAIViB,UADO/C,EAAU,MAAgB4C,GAChB,GAEA5C,EAFE,GAIxB,CAAC+C,GAAkB/C,EAAO8B,GAAec,KAE5C,MAAMe,GAAe9B,GAChBO,IACG,MAAMwB,EAAYxB,EAAKpC,MACvBkC,EAAe,IACfa,GAAiBa,GACIhC,MAEzB,CAACM,EAAgBa,GAAkBnB,IAKjCiC,GAAwBJ,EAAiBX,IAC/CY,GAAU,YAGKG,GAA0B,KACjCA,KAA0Bf,IAC1BA,KAAkB9C,IAIlBG,GACSA,EAAA,CACL2D,KAAM,SACNC,OAAQ,CAAEjE,KAAAA,EAAME,MAAO8C,MAG3BM,GAAUI,SACVJ,GAAUI,QAAQQ,cACd,IAAIC,MAAM,SAAU,CAAEC,SAAS,KAAM,GAG9C,CAAC/D,EAAUL,EAAME,EAAO8C,GAAee,KAIpC,MAAAM,GAA0Bd,EAAuB,MACjDe,GAAiBf,GAAO,GACxBgB,GAAiBhB,EAAyB,MAC1CiB,GAAYjB,EAA0B,MAEtCkB,GAAuB1C,GACzB,CAAC2C,EAAiBC,KACVD,GAAAA,IAAWzC,EAAc,CACzB,MAAM2C,EAAcD,EAAIjB,QACpBkB,GACAC,EAAcD,EAAa5B,SAExB0B,EACHH,GAAeb,SACfa,GAAeb,QAAQoB,QAGvBR,GAAeZ,SAAWc,GAAUd,SACpCc,GAAUd,QAAQoB,UAI9B,CAAC7C,EAAce,MAGZ+B,IAAeC,EAClBrD,EACA,CACIsD,eAAgBR,GAChBS,gBAAiBT,KAIPU,EAAA,CAAER,IAAKI,KAEnBK,MAAAA,GAAQrD,GAAY,WAClBE,GACAG,EAAe,IAEf9B,IACOA,EAAA,CACH0D,KAAM,OACNC,OAAQ,CAAEjE,KAAAA,EAAME,MAAO8C,MAE3B,OAAAI,EAAAE,GAAUI,UAAVN,EAAmBc,cACf,IAAIC,MAAM,WAAY,CAAEC,SAAS,MAGzCE,GAAeZ,SAAU,EACzB9B,GAAS,EAAK,GACf,CACCtB,EACA8B,EACAR,EACAK,EACAjC,EACAgD,KAGEqC,GAAatD,GACduD,IACG,MAAMC,EAAuBlB,GAAwBX,QAKjD6B,GACAA,EAAqBC,SAASF,EAAEG,gBAE1BL,OAGd,CAACA,KAGCM,GAAc3D,GAAY,KACvBuC,GAAeZ,UACZnD,GACQA,EAAA,CACJyD,KAAM,SACNC,OAAQ,CAAEjE,KAAAA,EAAME,MAAO8C,MAG/BsB,GAAeZ,SAAU,EAAA,GAE9B,CAACnD,EAASyC,GAAehD,IAEtB2F,GAAkB5D,GACnBuD,IAGIA,EAAErB,OAA6Ba,MAAM,CAAEc,eAAe,GAAM,GAEjE,IAIJhC,GAAU,KACAiC,MAAAA,EAASvC,GAAUI,QACnBoC,EAAcvB,GAAeb,QAC7BqC,EAASvB,GAAUd,QACnB6B,EAAuBlB,GAAwBX,QAE7C,OAAA,MAAAmC,GAAAA,EAAAG,iBAAiB,SAAS,KAC9B9D,EAAuB,MAAA4D,GAAAA,EAAahB,QAAU,MAAAiB,GAAAA,EAAQjB,OAAA,IAElD,MAAAe,GAAAA,EAAAG,iBAAiB,QAAQ,SAAgBC,GAC7CV,GACIA,EAAqBC,SAASS,EAAGR,gBACjCQ,EAAGC,gBAAe,IAGnB,KACK,MAAAL,GAAAA,EAAAM,oBAAoB,SAAS,KACjCjE,EACM,MAAA4D,GAAAA,EAAahB,QACb,MAAAiB,GAAAA,EAAQjB,OAAA,IAEV,MAAAe,GAAAA,EAAAM,oBAAoB,QAAQ,SAAgBF,GAChDV,GACIA,EAAqBC,SACjBS,EAAGR,gBAEPQ,EAAGC,gBAAe,GAAA,CACzB,GAEN,CAAChE,IAMJ,MAAMkE,GAAkBrE,GACnBuD,IAEkB,cAAVA,EAAEe,KAAiC,MAAVf,EAAEe,KAC3B1E,EAKgB,WAAV2D,EAAEe,MACTf,EAAEY,iBACFZ,EAAEgB,kBACF1E,GAAS,KANT0D,EAAEY,iBACFZ,EAAEgB,kBACF1E,GAAS,GAIK,GAGtB,CAACA,EAAUD,IAIT4E,GAAwBxE,GACzBuD,IACO,GAAU,cAAVA,EAAEe,IAAqB,CACrBf,EAAAY,iBACFZ,EAAEgB,kBAEF,MAAM1B,EAAcG,GAAYrB,QAC5BkB,GAKIC,EAAcD,EAJd3C,OAI2B,EAEAe,GAEnC,MAAA,GACiB,WAAVsC,EAAEe,IACTf,EAAEY,iBACFZ,EAAEgB,kBACF1E,GAAS,QAAK,GACG,QAAV0D,EAAEe,KAAkBf,EAAEkB,SAOZ,UAAVlB,EAAEe,KAAmB1E,IAE5B2D,EAAEY,iBACFZ,EAAEgB,uBAVqC,CACvC,MAAM1B,EAAcG,GAAYrB,QAC5BkB,IACAU,EAAEY,iBACFZ,EAAEgB,kBACFzB,EAAcD,EAAa5B,IAExB,CAGW,GAG1B,CACIpB,EACAmD,GACA/B,GACAf,EACAN,IAKF8E,GAAwB1E,GACzBuD,IACO,GAAU,QAAVA,EAAEe,IACAf,EAAAY,iBACFZ,EAAEgB,kBAEEhB,EAAEkB,UAAYjC,GAAeb,QAC7Ba,GAAeb,QAAQoB,QAChBN,GAAUd,UAEAT,GAAAqC,EAAEoB,cAAcxG,OACjC0B,GAAS,GACT4C,GAAUd,QAAQoB,iBAEL,YAAVQ,EAAEe,KACLtB,GAAYrB,SAAWa,GAAeb,QAAS,CAEzCiD,MAAAA,EAAe5B,GAAYrB,QAAQkD,cACrC,iCAGAtB,EAAEoB,cAAc3G,MAAO,MAAA4G,OAAA,EAAAA,EAAc5G,KACrCwE,GAAeb,SAEfa,GAAeb,QAAQoB,OAE/B,IAGR,CAAClD,EAAUmD,KAIf,OAAAnB,GAAU,KACAiD,MAAAA,EAAgBvB,IACJ,WAAVA,EAAEe,KAAoB1E,GACtBC,GAAS,EAAK,EAGlB,cAAOkF,OAAW,KAAenF,GAC1BmF,OAAAd,iBAAiB,UAAWa,GAEhC,YACQC,OAAW,KACXA,OAAAX,oBAAoB,UAAWU,EAAY,CACtD,GAEL,CAACjF,EAAUD,IAINoF,EAAAC,EAAA,CAAAC,SAAA,CAAAF,EAAC,SAAA,CACG/G,KAAAA,EACAkH,UAAU,EACV,cAAY,oBACZ1G,UAAU,cACV,eAAW,EACXmE,IAAKnB,GACLtD,MAAO8C,GACP3C,SAAUX,EAEVuH,SAAA,CAACE,EAAA,SAAA,CAAOjH,MAAM,KAAa,IAE1BuC,GAAaE,KAAKL,GACf6E,EAAC,SAAA,CAEGC,QAAS9E,EAAKO,QACd3C,MAAOoC,EAAKpC,MAEX+G,SAAK3E,EAAAnC,OAJD,GAAGkB,SAAciB,EAAKpC,cAQvCiH,EAACE,EAAA,CACG1C,IAAKN,GACL,cAAY,aACZ7D,UAAW8G,EAAK,aAAc9G,EAAW,CACrC,qBAAsBK,EACtB,mBACIc,GACAc,GAAaM,MAAMT,GAASA,EAAKO,UACrC,wBAAyBK,GACzB,wBAAyBxC,GAAcC,IAE3CQ,aACIA,GAAgB,IACTA,EACHoG,aAAc,IACPpG,EAAaoG,aAChBhH,QAAU+E,YACO,OAAAkC,EAAA,OAAApE,EAAAjC,EAAAoG,mBAAAnE,EAAAA,EAAc7C,UAAdiH,EAAAC,KAAArE,EAAwBkC,GAC/BF,WAKlBhE,EACJrB,GAAIkC,EAAeP,EAAgBD,EACnCP,MACI,CACK,iCAAmCD,KACjCC,GAGXH,QAAAA,EACAZ,MAAAA,EACAC,WAAY,CACRL,GAAIyB,EACJkG,OAAQ7G,KACLT,EACHuH,QAAS1F,EAAeP,EAAgBD,GAE5ChB,UAAAA,EACAC,WAAAA,EACAkH,OAAQ,EACJ,eAAgBC,KACbC,KAEHf,EAAC,MAAA,CACGvG,UAAU,4BACVU,MAAO,CAAEF,MAAAA,GAERiG,SAAA,CACGhF,GAAAkF,EAAC,QAAA,IACOW,EACJ,eAAcD,EACd9H,GAAI2B,EACJ0F,QAASlF,EACTyC,IAAKJ,GACLwD,YAAY,MACZ7H,MAAOiC,EACP9B,SAAWiF,GACPlD,EAAekD,EAAErB,OAAO/D,OAE5B,cAAY,2BACZM,UAAU,2BACV,oBAAkB,OAClB,wBACI0C,GACM,GAAG7B,MAAW2G,EACVhF,WAEJ,EAEV,gBAAe3B,EACf,gBAAeM,EACfsG,KAAK,WACLC,UAAW3B,GACXjG,OAAQ+E,GACR9E,QAASmF,GACTyC,QAAU7C,IACNA,EAAEgB,iBAAgB,IAK9Ba,EAAC,SAAA,CAEG,eAAcU,KACVC,EACJ/H,GAAI0B,EACJkD,IAAKH,GACL4C,OAAQlF,EACR8B,KAAK,SACLhE,KAAM,GAAGA,QACTQ,UAAW8G,EAAK,qBAAsB,CAClC,qCACMtE,KAEV,cAAY,qBACZ,aAAY,GACRG,IAAsB,UACtBhD,IACJ,gBAAewB,EACf,gBAAeN,EACff,OAAQ+E,GACR9E,QAASmF,GACTwC,UAAW9B,GACX+B,QAASrG,EACTsG,YAAc9C,UAGVA,EAAEY,iBACF,OAAA9C,EAAAoB,GAAUd,UAAVN,EAAmB0B,OAAA,EAGtBmC,SAAA9D,KAELgE,EAAC,MAAA,CACGpH,GAAIsB,EACJsD,IAAKI,GACLkD,KAAK,UACLzH,UAAU,2BACV4G,QACKzF,GACDc,GAAa4F,OAAO/F,IAAUA,EAAKO,UAEvC,kBAAiBrB,EACjB0F,UAAU,EACV,aAAW,aAEVD,SAAaxE,GAAAE,KAAI,CAACL,EAAMgG,IAMrBhG,EAAKO,QACDkE,EAAC,SAAA,CAEGK,QAAS9E,EAAKO,QACdmB,KAAK,SACLjE,GAAI,GAAGsB,MAAW2G,EACd1F,EAAKpC,SAETM,UAAU,qBACV,cAAY,qBACZ,gBACI8B,EAAKpC,QAAU8C,GAEnBiF,KAAK,SACL/H,MAAOoC,EAAKpC,MACZ,kBAAiB,sBAAsBoI,IACvChI,OAAQ+E,GACR9E,QAASmF,GACTwC,UAAWzB,GACX0B,QAAU7C,IACNA,EAAEY,iBACFrC,GAAavB,EAAI,EAErBiG,YAAa5C,GAEZsB,SAAA,CAAK3E,EAAAnC,MACLmC,EAAKkG,YACDrB,EAAA,OAAA,CAAK3G,UAAU,iCACXyG,SAAA3E,EAAKkG,cAEV,OA5BC,GAAGnH,KAAUiB,EAAKpC,SA8B3B,SAGZiH,EAACsB,EAAA,CACGC,QAAQ,SACRC,cAAehH,EACfnB,UAAU,6BAK9B,IAKZb,EAAOiJ,YAAc"}
+{"version":3,"file":"Select.js","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    ChangeEvent,\n    CSSProperties,\n    FocusEvent,\n    forwardRef,\n    KeyboardEvent,\n    MouseEvent,\n    RefObject,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { DataTestAutoId, Density } from \"../../core/types.js\";\nimport { useAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useListNavigation } from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport { usePreviousValue } from \"../../hooks/usePreviousValue/usePreviousValue.js\";\nimport { getValuePair, ValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup, InputGroupProps } from \"../input-group/InputGroup.js\";\nimport { LabelProps } from \"../input-group/Label.js\";\nimport type { PopupTipProps } from \"../tooltip/PopupTip.js\";\nimport { focusSelected, toLower } from \"./select-utils.js\";\n\nexport interface SelectPartialChangeEvent\n    extends Partial<Omit<ChangeEvent<HTMLSelectElement>, \"target\">> {\n    /** Kreves av react-hook-form, det skjer ulike ting avhengig av om det er blur eller change */\n    type: \"change\" | \"blur\";\n    target: {\n        /** Kreves av react-hook-form for å vite hvilket skjemafelt som ble endret */\n        name: string;\n        value: string;\n    };\n}\n\nexport type SelectChangeEventHandler = (\n    event: SelectPartialChangeEvent,\n) => void;\n\ninterface Option extends ValuePair {\n    visible: boolean;\n}\n\nexport interface SelectProps\n    extends Omit<InputGroupProps, \"children\">,\n        DataTestAutoId {\n    id?: string;\n    name: string;\n    label: string;\n    labelProps?: Omit<\n        LabelProps,\n        \"children\" | \"density\" | \"htmlFor\" | \"standAlone\"\n    >;\n    items: Array<string | ValuePair>;\n    /**\n     * @default false\n     */\n    inline?: boolean;\n    /**\n     * @default \"Velg\"\n     */\n    defaultPrompt?: string;\n    className?: string;\n    value?: string;\n    helpLabel?: string;\n    errorLabel?: string;\n    /**\n     * @default false\n     */\n    searchable?:\n        | boolean\n        | ((searchValue: string, searchItem: string | ValuePair) => boolean);\n    density?: Density;\n    width?: string;\n    onChange?: SelectChangeEventHandler;\n    onBlur?: SelectChangeEventHandler;\n    onFocus?: SelectChangeEventHandler;\n    /**\n     * Merk som ugyldig uten å sende inn en errorLabel.\n     * NB! Brukes kun i tilfeller der valideringsfeil dukker opp andre steder, for eksempel i en FieldGroup.\n     */\n    invalid?: boolean;\n    /**\n     * Hvor mange valg skal vises i listen før den begynner å scrolle.\n     * @default 5\n     */\n    maxShownOptions?: number;\n}\n\nconst noop = () => {\n    return;\n};\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n    (props, forwardedSelectRef) => {\n        const {\n            id,\n            name,\n            items,\n            value,\n            label,\n            labelProps,\n            onChange,\n            onBlur,\n            onFocus,\n            className,\n            helpLabel,\n            errorLabel,\n            invalid,\n            searchable = false,\n            inline = false,\n            defaultPrompt = \"Velg\",\n            density,\n            width,\n            maxShownOptions = 5,\n            style,\n            tooltip,\n            ...rest\n        } = props;\n\n        const listId = useId(id || \"jkl-select\", { generateSuffix: !id });\n        const labelId = `${listId}_label`;\n        const buttonId = `${listId}_button`;\n        const searchInputId = `${listId}_search-input`;\n\n        const [dropdownIsShown, setShown] = useState(false);\n        const toggleListVisibility = useCallback(() => {\n            setShown((previousValue) => !previousValue);\n        }, []);\n\n        /// Søk\n\n        const isSearchable = Boolean(searchable);\n        const showSearchInputField = isSearchable && dropdownIsShown;\n        const [searchValue, setSearchValue] = useState(\"\");\n        const searchFn = useCallback(\n            (item: ValuePair) => {\n                if (\n                    item.label.toLowerCase().includes(searchValue.toLowerCase())\n                ) {\n                    return true;\n                }\n\n                if (typeof searchable === \"function\") {\n                    return searchable(searchValue, item);\n                }\n\n                return false;\n            },\n            [searchable, searchValue],\n        );\n        const visibleItems: Option[] = useMemo(\n            () =>\n                items.map(getValuePair).map((item) => {\n                    const visible =\n                        !isSearchable || searchValue === \"\" || searchFn(item);\n                    return { ...item, visible };\n                }),\n            [items, isSearchable, searchValue, searchFn],\n        );\n        const valueIsInItems: boolean = useMemo(() => {\n            if (typeof value === \"undefined\") {\n                return false;\n            }\n            return items.some((item) =>\n                typeof item === \"string\"\n                    ? item === value\n                    : item.value === value,\n            );\n        }, [value, items]);\n\n        /// Valg av <option>\n\n        const [selectedValue, setSelectedValue] = useState<string>(\n            valueIsInItems && value !== undefined ? value : \"\",\n        );\n        const hasSelectedValue = selectedValue !== \"\";\n        const selectedValueLabel = useMemo(\n            () =>\n                visibleItems.find((item) => item.value === selectedValue)\n                    ?.label || defaultPrompt,\n            [visibleItems, selectedValue, defaultPrompt],\n        );\n\n        const selectRef = useRef<HTMLSelectElement | null>(null);\n        // Hjelpefunksjon som gjør det enklere å forwarde refen og å bruke den selv internt\n        const unifiedSelectRef = useCallback(\n            (instance: HTMLSelectElement | null) => {\n                selectRef.current = instance;\n                if (forwardedSelectRef) {\n                    if (typeof forwardedSelectRef === \"function\") {\n                        forwardedSelectRef(instance);\n                    } else {\n                        forwardedSelectRef.current = instance;\n                    }\n                }\n                if (instance) {\n                    setSelectedValue(instance.value);\n                }\n            },\n            [selectRef, forwardedSelectRef],\n        );\n\n        const previousValue = usePreviousValue(value);\n        useEffect(() => {\n            if (value === previousValue) {\n                return;\n            }\n            if (typeof value === \"undefined\" || !valueIsInItems) {\n                setSelectedValue(\"\");\n            } else {\n                setSelectedValue(value);\n            }\n        }, [setSelectedValue, value, previousValue, valueIsInItems]);\n\n        const selectOption = useCallback(\n            (item: Option) => {\n                const nextValue = item.value;\n                setSearchValue(\"\");\n                setSelectedValue(nextValue);\n                toggleListVisibility();\n            },\n            [setSearchValue, setSelectedValue, toggleListVisibility],\n        );\n\n        // La komponenten rendre <select> med den valgte verdien før onChange trigges, slik at\n        // react-hook-form@>7.41.1 behandler feltet som at det har en verdi.\n        const previousSelectedValue = usePreviousValue(selectedValue);\n        useEffect(() => {\n            // previousSelectedValue er undefined på første render, men da vil vi ikke ha en onChange uansett\n            if (\n                typeof previousSelectedValue === \"undefined\" ||\n                previousSelectedValue === selectedValue ||\n                selectedValue === value\n            ) {\n                return;\n            }\n            if (onChange) {\n                onChange({\n                    type: \"change\",\n                    target: { name, value: selectedValue },\n                });\n            }\n            if (selectRef.current) {\n                selectRef.current.dispatchEvent(\n                    new Event(\"change\", { bubbles: true }),\n                );\n            }\n        }, [onChange, name, value, selectedValue, previousSelectedValue]);\n\n        /// Fokushåndtering\n\n        const componentRootElementRef = useRef<HTMLDivElement>(null);\n        const focusInsideRef = useRef(false);\n        const searchFieldRef = useRef<HTMLInputElement>(null);\n        const buttonRef = useRef<HTMLButtonElement>(null);\n\n        const handleFocusPlacement = useCallback(\n            (isOpen: boolean, ref: RefObject<HTMLElement>) => {\n                if (isOpen && !isSearchable) {\n                    const listElement = ref.current;\n                    if (listElement) {\n                        focusSelected(listElement, selectedValue);\n                    }\n                } else if (isOpen) {\n                    if (searchFieldRef.current) {\n                        searchFieldRef.current.focus();\n                    }\n                } else {\n                    if (focusInsideRef.current && buttonRef.current) {\n                        buttonRef.current.focus();\n                    }\n                }\n            },\n            [isSearchable, selectedValue],\n        );\n\n        const [dropdownRef] = useAnimatedHeight<HTMLDivElement>(\n            dropdownIsShown,\n            {\n                onFirstVisible: handleFocusPlacement,\n                onTransitionEnd: handleFocusPlacement,\n            },\n        );\n\n        useListNavigation({ ref: dropdownRef });\n\n        const close = useCallback(() => {\n            if (isSearchable) {\n                setSearchValue(\"\");\n            }\n            if (onBlur) {\n                onBlur({\n                    type: \"blur\",\n                    target: { name, value: selectedValue },\n                });\n                selectRef.current?.dispatchEvent(\n                    new Event(\"focusout\", { bubbles: true }),\n                );\n            }\n            focusInsideRef.current = false;\n            setShown(false);\n        }, [\n            onBlur,\n            setSearchValue,\n            setShown,\n            isSearchable,\n            name,\n            selectedValue,\n        ]);\n\n        const handleBlur = useCallback(\n            (e: FocusEvent<HTMLButtonElement | HTMLInputElement>) => {\n                const componentRootElement = componentRootElementRef.current;\n                // There are known issues in Firefox when using \"relatedTarget\" in onBlur events:\n                // https://github.com/facebook/react/issues/2011\n                // This might be fixed in react 17. Se issue above.\n                const nextFocusIsInsideComponent =\n                    componentRootElement &&\n                    componentRootElement.contains(e.relatedTarget as Node);\n                if (!nextFocusIsInsideComponent) {\n                    close();\n                }\n            },\n            [close],\n        );\n\n        const handleFocus = useCallback(() => {\n            if (!focusInsideRef.current) {\n                if (onFocus) {\n                    onFocus({\n                        type: \"change\",\n                        target: { name, value: selectedValue },\n                    });\n                }\n                focusInsideRef.current = true;\n            }\n        }, [onFocus, selectedValue, name]);\n\n        const handleMouseOver = useCallback(\n            (e: MouseEvent<HTMLButtonElement>) => {\n                // Ved mouseOver på options flytter vi fokus til dem for å unngå \"dobbel fokus\"\n                // der det ser ut som to forskjellige elementer er fokusert/hovered samtidig\n                (e.target as HTMLButtonElement).focus({ preventScroll: true });\n            },\n            [],\n        );\n\n        // Handle focus and blur of hidden select element\n        useEffect(() => {\n            const select = selectRef.current;\n            const searchField = searchFieldRef.current;\n            const button = buttonRef.current;\n            const componentRootElement = componentRootElementRef.current;\n\n            select?.addEventListener(\"focus\", () => {\n                showSearchInputField ? searchField?.focus() : button?.focus();\n            });\n            select?.addEventListener(\"blur\", function (this, ev) {\n                componentRootElement &&\n                    componentRootElement.contains(ev.relatedTarget as Node) &&\n                    ev.preventDefault();\n            });\n\n            return () => {\n                select?.removeEventListener(\"focus\", () => {\n                    showSearchInputField\n                        ? searchField?.focus()\n                        : button?.focus();\n                });\n                select?.removeEventListener(\"blur\", function (this, ev) {\n                    componentRootElement &&\n                        componentRootElement.contains(\n                            ev.relatedTarget as Node,\n                        ) &&\n                        ev.preventDefault();\n                });\n            };\n        }, [showSearchInputField]);\n\n        /// Tastaturnavigasjon\n\n        // Add support for opening dropdown with arrowkey down as expected from native select\n        // onKeyDown to stop ArrowDown from scrolling the page\n        const handleOnKeyDown = useCallback(\n            (e: KeyboardEvent<HTMLButtonElement>) => {\n                if (\n                    (e.key === \"ArrowDown\" || e.key === \" \") &&\n                    !dropdownIsShown\n                ) {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setShown(true);\n                } else if (e.key === \"Escape\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setShown(false);\n                }\n            },\n            [setShown, dropdownIsShown],\n        );\n\n        // onKeyDown to stop ArrowDown from scrolling the page\n        const handleSearchOnKeyDown = useCallback(\n            (e: KeyboardEvent<HTMLInputElement>) => {\n                if (e.key === \"ArrowDown\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n\n                    const listElement = dropdownRef.current;\n                    if (listElement) {\n                        if (isSearchable) {\n                            // Flytt fokus til det første elementet i listen, ikke det forrige valgte.\n                            // Ved endring i filter er det ikke gitt at vi ønsker å ta utgangspunkt i\n                            // den valgte verdien.\n                            focusSelected(listElement, undefined);\n                        } else {\n                            focusSelected(listElement, selectedValue);\n                        }\n                    }\n                } else if (e.key === \"Escape\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setShown(false);\n                } else if (e.key === \"Tab\" && !e.shiftKey) {\n                    const listElement = dropdownRef.current;\n                    if (listElement) {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        focusSelected(listElement, selectedValue);\n                    }\n                } else if (e.key === \"Enter\" && dropdownIsShown) {\n                    // Should not propagate Enter keyevent because form might submit\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n            },\n            [\n                setShown,\n                dropdownRef,\n                selectedValue,\n                isSearchable,\n                dropdownIsShown,\n            ],\n        );\n\n        // onKeyDown so this Tab listener isn't triggered by tabbing from search field to option\n        const handleOptionOnKeyDown = useCallback(\n            (e: KeyboardEvent<HTMLButtonElement>) => {\n                if (e.key === \"Tab\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n\n                    if (e.shiftKey && searchFieldRef.current) {\n                        searchFieldRef.current.focus();\n                    } else if (buttonRef.current) {\n                        // Mimic behaviour of Firefox and native select, where Tab selects the current item and closes the menu\n                        setSelectedValue(e.currentTarget.value);\n                        setShown(false);\n                        buttonRef.current.focus();\n                    }\n                } else if (e.key === \"ArrowUp\") {\n                    if (dropdownRef.current && searchFieldRef.current) {\n                        // Can't be based on index since the first item might be filtered out\n                        const firstVisible = dropdownRef.current.querySelector(\n                            '[role=\"option\"]:not([hidden])',\n                        );\n                        if (\n                            e.currentTarget.id === firstVisible?.id &&\n                            searchFieldRef.current\n                        ) {\n                            searchFieldRef.current.focus();\n                        }\n                    }\n                }\n            },\n            [setShown, dropdownRef],\n        );\n\n        // Add support for closing the dropdown with Escape like native select. Unfortunately, Escape does not trigger the button onKeyDown.\n        useEffect(() => {\n            const handleEscape = (e: globalThis.KeyboardEvent) => {\n                if (e.key === \"Escape\" && dropdownIsShown) {\n                    setShown(false);\n                }\n            };\n            if (typeof window !== \"undefined\" && dropdownIsShown) {\n                window.addEventListener(\"keydown\", handleEscape);\n            }\n            return () => {\n                if (typeof window !== \"undefined\") {\n                    window.removeEventListener(\"keydown\", handleEscape);\n                }\n            };\n        }, [setShown, dropdownIsShown]);\n\n        return (\n            <>\n                <select\n                    name={name}\n                    tabIndex={-1}\n                    data-testid=\"jkl-native-select\"\n                    className=\"jkl-sr-only\"\n                    aria-hidden\n                    ref={unifiedSelectRef}\n                    value={selectedValue}\n                    onChange={noop} // React complains unless we give an onChange handler. This is technically a read-only field, but readOnly isn't an option here.\n                >\n                    <option value=\"\"></option>{\" \"}\n                    {/* Tom option må være et valg, ellers vil <select> alltid ha en value */}\n                    {visibleItems.map((item) => (\n                        <option\n                            key={`${listId}-opt-${item.value}`}\n                            hidden={!item.visible}\n                            value={item.value}\n                        >\n                            {item.label}\n                        </option>\n                    ))}\n                </select>\n                <InputGroup\n                    ref={componentRootElementRef}\n                    data-testid=\"jkl-select\"\n                    className={clsx(\"jkl-select\", className, {\n                        \"jkl-select--inline\": inline,\n                        \"jkl-select--open\":\n                            dropdownIsShown &&\n                            visibleItems.some((item) => item.visible),\n                        \"jkl-select--no-value\": !hasSelectedValue,\n                        \"jkl-select--invalid\": !!errorLabel || invalid,\n                    })}\n                    tooltip={\n                        tooltip && React.isValidElement<PopupTipProps>(tooltip)\n                            ? React.cloneElement(tooltip, {\n                                  triggerProps: {\n                                      ...tooltip.props.triggerProps,\n                                      onFocus: (\n                                          e: FocusEvent<HTMLButtonElement>,\n                                      ) => {\n                                          tooltip.props.triggerProps?.onFocus?.(\n                                              e,\n                                          );\n                                          close();\n                                      },\n                                  },\n                              })\n                            : null\n                    }\n                    {...rest}\n                    id={isSearchable ? searchInputId : buttonId}\n                    style={\n                        {\n                            [\"--jkl-select-max-shown-options\"]: maxShownOptions,\n                            ...style,\n                        } as CSSProperties\n                    }\n                    density={density}\n                    label={label}\n                    labelProps={{\n                        id: labelId,\n                        srOnly: inline,\n                        ...labelProps,\n                        htmlFor: isSearchable ? searchInputId : buttonId,\n                    }}\n                    helpLabel={helpLabel}\n                    errorLabel={errorLabel}\n                    render={({\n                        \"aria-invalid\": ariaInvalid,\n                        ...inputProps\n                    }) => (\n                        <div\n                            className=\"jkl-select__outer-wrapper\"\n                            style={{ width }}\n                        >\n                            {isSearchable && (\n                                <input\n                                    {...inputProps}\n                                    aria-invalid={ariaInvalid}\n                                    id={searchInputId}\n                                    hidden={!showSearchInputField}\n                                    ref={searchFieldRef}\n                                    placeholder=\"Søk\"\n                                    value={searchValue}\n                                    onChange={(e) =>\n                                        setSearchValue(e.target.value)\n                                    }\n                                    data-testid=\"jkl-select__search-input\"\n                                    className=\"jkl-select__search-input\"\n                                    aria-autocomplete=\"list\"\n                                    aria-activedescendant={\n                                        hasSelectedValue\n                                            ? `${listId}__${toLower(\n                                                  selectedValue,\n                                              )}`\n                                            : undefined\n                                    }\n                                    aria-controls={listId}\n                                    aria-expanded={dropdownIsShown}\n                                    role=\"combobox\"\n                                    onKeyDown={handleSearchOnKeyDown}\n                                    onBlur={handleBlur}\n                                    onFocus={handleFocus}\n                                    onClick={(e) => {\n                                        e.stopPropagation();\n                                    }}\n                                />\n                            )}\n                            {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}\n                            <button\n                                // Nei dette er ikke i henhold til speccen, men VoiceOver leser den likevel og det er oppførselen vi ønsker\n                                aria-invalid={ariaInvalid}\n                                {...inputProps}\n                                id={buttonId}\n                                ref={buttonRef}\n                                hidden={showSearchInputField}\n                                type=\"button\"\n                                name={`${name}-btn`}\n                                className={clsx(\"jkl-select__button\", {\n                                    \"jkl-select__button--active-value\":\n                                        !!selectedValue,\n                                })}\n                                data-testid=\"jkl-select__button\"\n                                aria-label={`${\n                                    selectedValueLabel || \"Velg\"\n                                },${label}`}\n                                aria-expanded={dropdownIsShown}\n                                aria-controls={listId}\n                                onBlur={handleBlur}\n                                onFocus={handleFocus}\n                                onKeyDown={handleOnKeyDown}\n                                onClick={toggleListVisibility}\n                                onMouseDown={(e) => {\n                                    // Workaround for en Safari-bug hvor e.relatedTarget er null i onBlur\n                                    // https://twitter.com/MilesSorce/status/1278762360669265925\n                                    e.preventDefault();\n                                    buttonRef.current?.focus();\n                                }}\n                            >\n                                {selectedValueLabel}\n                            </button>\n                            <div\n                                id={listId}\n                                ref={dropdownRef}\n                                role=\"listbox\"\n                                className=\"jkl-select__options-menu\"\n                                hidden={\n                                    !dropdownIsShown ||\n                                    visibleItems.every((item) => !item.visible)\n                                }\n                                aria-labelledby={labelId}\n                                tabIndex={-1}\n                                data-focus=\"controlled\" // lar oss styre markering av valg vha focus\n                            >\n                                {visibleItems.map((item, i) =>\n                                    // Det er viktig at vi _fjerner_ elementer som ikke er synlige fra DOMen for at tastaturnavigasjon skal fungere.\n                                    // For eksempel, hvis vi har elementene Apple, Samsung og LG i den rekkefølgen og søker etter \"l\"\n                                    // vil Samsung ikke synes. Om vi bare setter hidden-attributtet på Samsung vil ArrowDown fra Apple ikke fungere.\n                                    // Dette lar seg ikke gjenskape i en enhetstest med JSDOM + user-events, og Cypress lukker Select\n                                    // ved første {downArrow} ¯\\_(ツ)_/¯. Så please test scenariet over manuelt om dette skaper trøbbel for deg.\n                                    item.visible ? (\n                                        <button\n                                            key={`${listId}-${item.value}`}\n                                            hidden={!item.visible}\n                                            type=\"button\"\n                                            id={`${listId}__${toLower(\n                                                item.value,\n                                            )}`}\n                                            className=\"jkl-select__option\"\n                                            data-testid=\"jkl-select__option\"\n                                            aria-selected={\n                                                item.value === selectedValue\n                                            }\n                                            role=\"option\"\n                                            value={item.value}\n                                            data-testautoid={`jkl-select__option-${i}`}\n                                            onBlur={handleBlur}\n                                            onFocus={handleFocus}\n                                            onKeyDown={handleOptionOnKeyDown}\n                                            onClick={(e) => {\n                                                e.preventDefault();\n                                                selectOption(item);\n                                            }}\n                                            onMouseOver={handleMouseOver}\n                                        >\n                                            {item.label}\n                                            {item.description ? (\n                                                <span className=\"jkl-select__option-description\">\n                                                    {item.description}\n                                                </span>\n                                            ) : null}\n                                        </button>\n                                    ) : null,\n                                )}\n                            </div>\n                            <ArrowVerticalAnimated\n                                variant=\"medium\"\n                                pointingDown={!dropdownIsShown}\n                                className=\"jkl-select__arrow\"\n                            />\n                        </div>\n                    )}\n                />\n            </>\n        );\n    },\n);\n\nSelect.displayName = \"Select\";\n"],"names":["noop","Select","forwardRef","props","forwardedSelectRef","id","name","items","value","label","labelProps","onChange","onBlur","onFocus","className","helpLabel","errorLabel","invalid","searchable","inline","defaultPrompt","density","width","maxShownOptions","style","tooltip","rest","listId","useId","generateSuffix","labelId","buttonId","searchInputId","dropdownIsShown","setShown","useState","toggleListVisibility","useCallback","previousValue","isSearchable","showSearchInputField","searchValue","setSearchValue","searchFn","item","toLowerCase","includes","visibleItems","useMemo","map","getValuePair","visible","valueIsInItems","some","selectedValue","setSelectedValue","hasSelectedValue","selectedValueLabel","_a","find","selectRef","useRef","unifiedSelectRef","instance","current","usePreviousValue","useEffect","selectOption","nextValue","previousSelectedValue","type","target","dispatchEvent","Event","bubbles","componentRootElementRef","focusInsideRef","searchFieldRef","buttonRef","handleFocusPlacement","isOpen","ref","listElement","focusSelected","focus","dropdownRef","useAnimatedHeight","onFirstVisible","onTransitionEnd","useListNavigation","close","handleBlur","e","componentRootElement","contains","relatedTarget","handleFocus","handleMouseOver","preventScroll","select","searchField","button","addEventListener","ev","preventDefault","removeEventListener","handleOnKeyDown","key","stopPropagation","handleSearchOnKeyDown","shiftKey","handleOptionOnKeyDown","currentTarget","firstVisible","querySelector","handleEscape","window","jsxs","Fragment","children","tabIndex","jsx","hidden","InputGroup","clsx","React","isValidElement","cloneElement","triggerProps","_b","call","srOnly","htmlFor","render","ariaInvalid","inputProps","placeholder","toLower","role","onKeyDown","onClick","onMouseDown","every","i","onMouseOver","description","ArrowVerticalAnimated","variant","pointingDown","displayName"],"mappings":"6xBA4FA,MAAMA,EAAO,OAIAC,EAASC,GAClB,CAACC,EAAOC,KACE,MACFC,GAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,MAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,SAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,QAAAA,EACAC,WAAAA,GAAa,EACbC,OAAAA,GAAS,EACTC,cAAAA,EAAgB,OAChBC,QAAAA,EACAC,MAAAA,EACAC,gBAAAA,EAAkB,EAClBC,MAAAA,EACAC,QAAAA,KACGC,GACHvB,EAEEwB,EAASC,EAAMvB,GAAM,aAAc,CAAEwB,gBAAiBxB,IACtDyB,EAAU,GAAGH,UACbI,EAAW,GAAGJ,WACdK,EAAgB,GAAGL,kBAElBM,EAAiBC,GAAYC,GAAS,GACvCC,EAAuBC,GAAY,KAC5BH,GAACI,IAAmBA,GAAa,GAC3C,IAIGC,IAAuBrB,EACvBsB,EAAuBD,GAAgBN,GACtCQ,EAAaC,IAAkBP,EAAS,IACzCQ,GAAWN,GACZO,KAEOA,EAAKnC,MAAMoC,cAAcC,SAASL,EAAYI,gBAKxB,mBAAf3B,GACAA,EAAWuB,EAAaG,IAKvC,CAAC1B,EAAYuB,IAEXM,GAAyBC,GAC3B,IACIzC,EAAM0C,IAAIC,GAAcD,KAAKL,IACzB,MAAMO,GACDZ,GAAgC,KAAhBE,GAAsBE,GAASC,GAC7C,MAAA,IAAKA,EAAMO,QAAAA,OAE1B,CAAC5C,EAAOgC,EAAcE,EAAaE,KAEjCS,GAA0BJ,GAAQ,aACzBxC,EAAU,MAGdD,EAAM8C,MAAMT,GACC,iBAATA,EACDA,IAASpC,EACToC,EAAKpC,QAAUA,KAE1B,CAACA,EAAOD,KAIJ+C,GAAeC,IAAoBpB,EACtCiB,SAA4B,IAAV5C,EAAsBA,EAAQ,IAE9CgD,GAAqC,KAAlBF,GACnBG,GAAqBT,GACvB,WACIU,OAAA,OAAAA,EAAAX,GAAaY,MAAMf,GAASA,EAAKpC,QAAU8C,WAA3CI,EAAAA,EACMjD,QAASW,CAAAA,GACnB,CAAC2B,GAAcO,GAAelC,IAG5BwC,GAAYC,EAAiC,MAE7CC,GAAmBzB,GACpB0B,IACGH,GAAUI,QAAUD,EAChB3D,IACkC,mBAAvBA,EACPA,EAAmB2D,GAEnB3D,EAAmB4D,QAAUD,GAGjCA,GACAR,GAAiBQ,EAASvD,MAAK,GAGvC,CAACoD,GAAWxD,IAGVkC,GAAgB2B,EAAiBzD,GACvC0D,GAAU,KACF1D,IAAU8B,IAIViB,UADO/C,EAAU,MAAgB4C,GAChB,GAEA5C,EAFE,GAIxB,CAAC+C,GAAkB/C,EAAO8B,GAAec,KAE5C,MAAMe,GAAe9B,GAChBO,IACG,MAAMwB,EAAYxB,EAAKpC,MACvBkC,GAAe,IACfa,GAAiBa,GACIhC,MAEzB,CAACM,GAAgBa,GAAkBnB,IAKjCiC,GAAwBJ,EAAiBX,IAC/CY,GAAU,YAGKG,GAA0B,KACjCA,KAA0Bf,IAC1BA,KAAkB9C,IAIlBG,GACSA,EAAA,CACL2D,KAAM,SACNC,OAAQ,CAAEjE,KAAAA,EAAME,MAAO8C,MAG3BM,GAAUI,SACVJ,GAAUI,QAAQQ,cACd,IAAIC,MAAM,SAAU,CAAEC,SAAS,KAAM,GAG9C,CAAC/D,EAAUL,EAAME,EAAO8C,GAAee,KAIpC,MAAAM,GAA0Bd,EAAuB,MACjDe,GAAiBf,GAAO,GACxBgB,GAAiBhB,EAAyB,MAC1CiB,GAAYjB,EAA0B,MAEtCkB,GAAuB1C,GACzB,CAAC2C,EAAiBC,KACVD,GAAAA,IAAWzC,EAAc,CACzB,MAAM2C,EAAcD,EAAIjB,QACpBkB,GACAC,EAAcD,EAAa5B,SAExB0B,EACHH,GAAeb,SACfa,GAAeb,QAAQoB,QAGvBR,GAAeZ,SAAWc,GAAUd,SACpCc,GAAUd,QAAQoB,UAI9B,CAAC7C,EAAce,MAGZ+B,IAAeC,EAClBrD,EACA,CACIsD,eAAgBR,GAChBS,gBAAiBT,KAIPU,EAAA,CAAER,IAAKI,KAEnBK,MAAAA,GAAQrD,GAAY,WAClBE,GACAG,GAAe,IAEf9B,IACOA,EAAA,CACH0D,KAAM,OACNC,OAAQ,CAAEjE,KAAAA,EAAME,MAAO8C,MAE3B,OAAAI,EAAAE,GAAUI,UAAVN,EAAmBc,cACf,IAAIC,MAAM,WAAY,CAAEC,SAAS,MAGzCE,GAAeZ,SAAU,EACzB9B,GAAS,EAAK,GACf,CACCtB,EACA8B,GACAR,EACAK,EACAjC,EACAgD,KAGEqC,GAAatD,GACduD,IACG,MAAMC,EAAuBlB,GAAwBX,QAKjD6B,GACAA,EAAqBC,SAASF,EAAEG,gBAE1BL,OAGd,CAACA,KAGCM,GAAc3D,GAAY,KACvBuC,GAAeZ,UACZnD,GACQA,EAAA,CACJyD,KAAM,SACNC,OAAQ,CAAEjE,KAAAA,EAAME,MAAO8C,MAG/BsB,GAAeZ,SAAU,EAAA,GAE9B,CAACnD,EAASyC,GAAehD,IAEtB2F,GAAkB5D,GACnBuD,IAGIA,EAAErB,OAA6Ba,MAAM,CAAEc,eAAe,GAAM,GAEjE,IAIJhC,GAAU,KACAiC,MAAAA,EAASvC,GAAUI,QACnBoC,EAAcvB,GAAeb,QAC7BqC,EAASvB,GAAUd,QACnB6B,EAAuBlB,GAAwBX,QAE7C,OAAA,MAAAmC,GAAAA,EAAAG,iBAAiB,SAAS,KAC9B9D,EAAuB,MAAA4D,GAAAA,EAAahB,QAAU,MAAAiB,GAAAA,EAAQjB,OAAA,IAElD,MAAAe,GAAAA,EAAAG,iBAAiB,QAAQ,SAAgBC,GAC7CV,GACIA,EAAqBC,SAASS,EAAGR,gBACjCQ,EAAGC,gBAAe,IAGnB,KACK,MAAAL,GAAAA,EAAAM,oBAAoB,SAAS,KACjCjE,EACM,MAAA4D,GAAAA,EAAahB,QACb,MAAAiB,GAAAA,EAAQjB,OAAA,IAEV,MAAAe,GAAAA,EAAAM,oBAAoB,QAAQ,SAAgBF,GAChDV,GACIA,EAAqBC,SACjBS,EAAGR,gBAEPQ,EAAGC,gBAAe,GAAA,CACzB,GAEN,CAAChE,IAMJ,MAAMkE,GAAkBrE,GACnBuD,IAEkB,cAAVA,EAAEe,KAAiC,MAAVf,EAAEe,KAC3B1E,EAKgB,WAAV2D,EAAEe,MACTf,EAAEY,iBACFZ,EAAEgB,kBACF1E,GAAS,KANT0D,EAAEY,iBACFZ,EAAEgB,kBACF1E,GAAS,GAIK,GAGtB,CAACA,EAAUD,IAIT4E,GAAwBxE,GACzBuD,IACO,GAAU,cAAVA,EAAEe,IAAqB,CACrBf,EAAAY,iBACFZ,EAAEgB,kBAEF,MAAM1B,EAAcG,GAAYrB,QAC5BkB,GAKIC,EAAcD,EAJd3C,OAI2B,EAEAe,GAEnC,MAAA,GACiB,WAAVsC,EAAEe,IACTf,EAAEY,iBACFZ,EAAEgB,kBACF1E,GAAS,QAAK,GACG,QAAV0D,EAAEe,KAAkBf,EAAEkB,SAOZ,UAAVlB,EAAEe,KAAmB1E,IAE5B2D,EAAEY,iBACFZ,EAAEgB,uBAVqC,CACvC,MAAM1B,EAAcG,GAAYrB,QAC5BkB,IACAU,EAAEY,iBACFZ,EAAEgB,kBACFzB,EAAcD,EAAa5B,IAExB,CAGW,GAG1B,CACIpB,EACAmD,GACA/B,GACAf,EACAN,IAKF8E,GAAwB1E,GACzBuD,IACO,GAAU,QAAVA,EAAEe,IACAf,EAAAY,iBACFZ,EAAEgB,kBAEEhB,EAAEkB,UAAYjC,GAAeb,QAC7Ba,GAAeb,QAAQoB,QAChBN,GAAUd,UAEAT,GAAAqC,EAAEoB,cAAcxG,OACjC0B,GAAS,GACT4C,GAAUd,QAAQoB,iBAEL,YAAVQ,EAAEe,KACLtB,GAAYrB,SAAWa,GAAeb,QAAS,CAEzCiD,MAAAA,EAAe5B,GAAYrB,QAAQkD,cACrC,iCAGAtB,EAAEoB,cAAc3G,MAAO,MAAA4G,OAAA,EAAAA,EAAc5G,KACrCwE,GAAeb,SAEfa,GAAeb,QAAQoB,OAE/B,IAGR,CAAClD,EAAUmD,KAIf,OAAAnB,GAAU,KACAiD,MAAAA,EAAgBvB,IACJ,WAAVA,EAAEe,KAAoB1E,GACtBC,GAAS,EAAK,EAGlB,cAAOkF,OAAW,KAAenF,GAC1BmF,OAAAd,iBAAiB,UAAWa,GAEhC,YACQC,OAAW,KACXA,OAAAX,oBAAoB,UAAWU,EAAY,CACtD,GAEL,CAACjF,EAAUD,IAINoF,EAAAC,EAAA,CAAAC,SAAA,CAAAF,EAAC,SAAA,CACG/G,KAAAA,EACAkH,UAAU,EACV,cAAY,oBACZ1G,UAAU,cACV,eAAW,EACXmE,IAAKnB,GACLtD,MAAO8C,GACP3C,SAAUX,EAEVuH,SAAA,CAACE,EAAA,SAAA,CAAOjH,MAAM,KAAa,IAE1BuC,GAAaE,KAAKL,GACf6E,EAAC,SAAA,CAEGC,QAAS9E,EAAKO,QACd3C,MAAOoC,EAAKpC,MAEX+G,SAAK3E,EAAAnC,OAJD,GAAGkB,SAAciB,EAAKpC,cAQvCiH,EAACE,EAAA,CACG1C,IAAKN,GACL,cAAY,aACZ7D,UAAW8G,EAAK,aAAc9G,EAAW,CACrC,qBAAsBK,EACtB,mBACIc,GACAc,GAAaM,MAAMT,GAASA,EAAKO,UACrC,wBAAyBK,GACzB,wBAAyBxC,GAAcC,IAE3CQ,QACIA,GAAWoG,EAAMC,eAA8BrG,GACzCoG,EAAME,aAAatG,EAAS,CACxBuG,aAAc,IACPvG,EAAQtB,MAAM6H,aACjBnH,QACI+E,YAEA,OAAAqC,EAAA,OAAAvE,EAAAjC,EAAQtB,MAAM6H,mBAAdtE,EAAAA,EAA4B7C,UAA5BoH,EAAAC,KAAAxE,EACIkC,GAEEF,SAIlB,QAENhE,EACJrB,GAAIkC,EAAeP,EAAgBD,EACnCP,MACI,CACK,iCAAmCD,KACjCC,GAGXH,QAAAA,EACAZ,MAAAA,EACAC,WAAY,CACRL,GAAIyB,EACJqG,OAAQhH,KACLT,EACH0H,QAAS7F,EAAeP,EAAgBD,GAE5ChB,UAAAA,EACAC,WAAAA,EACAqH,OAAQ,EACJ,eAAgBC,KACbC,KAEHlB,EAAC,MAAA,CACGvG,UAAU,4BACVU,MAAO,CAAEF,MAAAA,GAERiG,SAAA,CACGhF,GAAAkF,EAAC,QAAA,IACOc,EACJ,eAAcD,EACdjI,GAAI2B,EACJ0F,QAASlF,EACTyC,IAAKJ,GACL2D,YAAY,MACZhI,MAAOiC,EACP9B,SAAWiF,GACPlD,GAAekD,EAAErB,OAAO/D,OAE5B,cAAY,2BACZM,UAAU,2BACV,oBAAkB,OAClB,wBACI0C,GACM,GAAG7B,MAAW8G,EACVnF,WAEJ,EAEV,gBAAe3B,EACf,gBAAeM,EACfyG,KAAK,WACLC,UAAW9B,GACXjG,OAAQ+E,GACR9E,QAASmF,GACT4C,QAAUhD,IACNA,EAAEgB,iBAAgB,IAK9Ba,EAAC,SAAA,CAEG,eAAca,KACVC,EACJlI,GAAI0B,EACJkD,IAAKH,GACL4C,OAAQlF,EACR8B,KAAK,SACLhE,KAAM,GAAGA,QACTQ,UAAW8G,EAAK,qBAAsB,CAClC,qCACMtE,KAEV,cAAY,qBACZ,aAAY,GACRG,IAAsB,UACtBhD,IACJ,gBAAewB,EACf,gBAAeN,EACff,OAAQ+E,GACR9E,QAASmF,GACT2C,UAAWjC,GACXkC,QAASxG,EACTyG,YAAcjD,UAGVA,EAAEY,iBACF,OAAA9C,EAAAoB,GAAUd,UAAVN,EAAmB0B,OAAA,EAGtBmC,SAAA9D,KAELgE,EAAC,MAAA,CACGpH,GAAIsB,EACJsD,IAAKI,GACLqD,KAAK,UACL5H,UAAU,2BACV4G,QACKzF,GACDc,GAAa+F,OAAOlG,IAAUA,EAAKO,UAEvC,kBAAiBrB,EACjB0F,UAAU,EACV,aAAW,aAEVD,SAAaxE,GAAAE,KAAI,CAACL,EAAMmG,IAMrBnG,EAAKO,QACDkE,EAAC,SAAA,CAEGK,QAAS9E,EAAKO,QACdmB,KAAK,SACLjE,GAAI,GAAGsB,MAAW8G,EACd7F,EAAKpC,SAETM,UAAU,qBACV,cAAY,qBACZ,gBACI8B,EAAKpC,QAAU8C,GAEnBoF,KAAK,SACLlI,MAAOoC,EAAKpC,MACZ,kBAAiB,sBAAsBuI,IACvCnI,OAAQ+E,GACR9E,QAASmF,GACT2C,UAAW5B,GACX6B,QAAUhD,IACNA,EAAEY,iBACFrC,GAAavB,EAAI,EAErBoG,YAAa/C,GAEZsB,SAAA,CAAK3E,EAAAnC,MACLmC,EAAKqG,YACDxB,EAAA,OAAA,CAAK3G,UAAU,iCACXyG,SAAA3E,EAAKqG,cAEV,OA5BC,GAAGtH,KAAUiB,EAAKpC,SA8B3B,SAGZiH,EAACyB,EAAA,CACGC,QAAQ,SACRC,cAAenH,EACfnB,UAAU,6BAK9B,IAKZb,EAAOoJ,YAAc"}

package/build/es/components/text-input/TextArea.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{forwardRef as r}from"react";import{InputGroup as t}from"../input-group/InputGroup.js";import{BaseTextArea as o}from"./BaseTextArea.js";const s=r(((r,s)=>{const{autoExpand:p,className:l,counter:n,density:i,errorLabel:u,helpLabel:x,inline:m,label:c,labelProps:b,startOpen:d,supportLabelProps:j,tooltipProps:f,...L}=r,P={label:c,density:i,errorLabel:u,helpLabel:x,labelProps:b,inline:m,supportLabelProps:j,tooltipProps:f},k={autoExpand:p,counter:n,startOpen:d};return e(t,{className:a("jkl-text-area",l,{"jkl-text-area--start-open":d,"jkl-text-area--auto-expand":p}),"data-testid":"jkl-text-area",...P,children:e(o,{ref:s,...L,...k})})}));s.displayName="TextArea";export{s as TextArea};
+import{jsx as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t}from"react";import{InputGroup as r}from"../input-group/InputGroup.js";import{BaseTextArea as o}from"./BaseTextArea.js";const s=t(((t,s)=>{const{autoExpand:p,className:l,counter:n,density:i,errorLabel:u,helpLabel:x,inline:m,label:c,labelProps:b,startOpen:d,supportLabelProps:j,tooltip:f,...L}=t,k={label:c,density:i,errorLabel:u,helpLabel:x,labelProps:b,inline:m,supportLabelProps:j,tooltip:f},A={autoExpand:p,counter:n,startOpen:d};return e(r,{className:a("jkl-text-area",l,{"jkl-text-area--start-open":d,"jkl-text-area--auto-expand":p}),"data-testid":"jkl-text-area",...k,children:e(o,{ref:s,...L,...A})})}));s.displayName="TextArea";export{s as TextArea};
 //# sourceMappingURL=TextArea.js.map