@fremtind/jokul 0.10.1 → 0.11.0

package/build/NativeSelect-BxgwmRDc.cjs

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),n=require("./clsx-E3yX_9sL.cjs"),o=require("react");require("./cjs/hooks/useScreen/useScreen.js");const s=require("./cjs/hooks/useId/useId.js");require("./cjs/components/icon/Icon.js");const t=require("./cjs/components/icon/icons/animated/ArrowVerticalAnimated.js");require("./cjs/components/icon/icons/animated/ArrowHorizontalAnimated.js"),require("./cjs/components/icon/icons/animated/PlusRemoveAnimated.js"),require("./cjs/components/icon/icons/ArrowDownIcon.js"),require("./cjs/components/icon/icons/ArrowLeftIcon.js"),require("./cjs/components/icon/icons/ArrowNorthEastIcon.js"),require("./cjs/components/icon/icons/ArrowRightIcon.js"),require("./cjs/components/icon/icons/ArrowUpIcon.js"),require("./cjs/components/icon/icons/CalendarIcon.js"),require("./cjs/components/icon/icons/CheckIcon.js"),require("./cjs/components/icon/icons/ChevronDownIcon.js"),require("./cjs/components/icon/icons/ChevronLeftIcon.js"),require("./cjs/components/icon/icons/ChevronRightIcon.js"),require("./cjs/components/icon/icons/ChevronUpIcon.js"),require("./cjs/components/icon/icons/CloseIcon.js"),require("./cjs/components/icon/icons/CopyIcon.js"),require("./cjs/components/icon/icons/DotsIcon.js"),require("./cjs/components/icon/icons/DragIcon.js"),require("./cjs/components/icon/icons/ErrorIcon.js"),require("./cjs/components/icon/icons/GreenCheckIcon.js"),require("./cjs/components/icon/icons/HamburgerIcon.js"),require("./cjs/components/icon/icons/InfoIcon.js"),require("./cjs/components/icon/icons/LinkIcon.js"),require("./cjs/components/icon/icons/PlusIcon.js"),require("./cjs/components/icon/icons/QuestionIcon.js"),require("./cjs/components/icon/icons/RedCrossIcon.js"),require("./cjs/components/icon/icons/SearchIcon.js"),require("./cjs/components/icon/icons/SuccessIcon.js"),require("./cjs/components/icon/icons/WarningIcon.js"),require("./cjs/components/icon/icons/MinusIcon.js"),require("./cjs/components/icon/icons/ThumbDownIcon.js"),require("./cjs/components/icon/icons/ThumbUpIcon.js"),require("./cjs/components/icon/icons/TrashCanIcon.js"),require("./cjs/components/icon/icons/PenIcon.js"),require("./cjs/components/button/Button.js"),require("./cjs/components/card/Card.js"),require("./cjs/components/card/CardImage.js"),require("./cjs/components/card/NavCard.js"),require("./cjs/components/checkbox/Checkbox.js"),require("./cjs/components/combobox/Combobox.js"),require("./cjs/components/cookie-consent/CookieConsentContext.js"),require("react-dom"),require("./cjs/components/modal/Modal.js"),require("react-a11y-dialog"),require("./cjs/components/list/List.js"),require("./cjs/components/list/ListItem.js"),require("./cjs/components/datepicker/DatePicker.js"),require("./cjs/components/icon-button/IconButton.js"),require("./cjs/components/tooltip/Tooltip.js"),require("./cjs/components/tooltip/TooltipContent.js"),require("./cjs/components/tooltip/TooltipTrigger.js");const c=require("./cjs/components/input-group/InputGroup.js");require("./cjs/components/link/Link.js"),require("./cjs/components/link/NavLink.js"),require("./cjs/components/link-list/LinkList.js"),require("./cjs/components/popover/Popover.js"),require("./cjs/components/radio-button/RadioButton.js"),require("./cjs/components/radio-button/radioGroupContext.js"),require("./cjs/components/radio-button/BaseRadioButton.js");const r=require("./cjs/hooks/useAnimatedHeight/useAnimatedHeight.js"),i=require("./cjs/hooks/usePreviousValue/usePreviousValue.js"),l=require("./cjs/hooks/useListNavigation/useListNavigation.js");require("./cjs/components/tag/Tag.js"),require("./cjs/components/text-input/BaseTextArea.js"),require("./cjs/components/text-input/BaseTextInput.js"),require("./cjs/components/text-input/TextArea.js"),require("./cjs/components/text-input/TextInput.js"),require("./cjs/utilities/polymorphism/SlotComponent.js");const a=require("./cjs/utilities/valuePair.js"),u=require("./cjs/components/select/select-utils.js"),p=()=>{},j=o.forwardRef(((j,d)=>{const{id:m,name:v,items:b,value:f,label:k,labelProps:q,onChange:h,onBlur:g,onFocus:w,className:x,helpLabel:y,errorLabel:I,invalid:_,searchable:C=!1,inline:L=!1,defaultPrompt:P="Velg",density:N,width:D,maxShownOptions:A=5,style:E,...S}=j,T=s.useId(m||"jkl-select",{generateSuffix:!m}),$=`${T}_label`,V=`${T}_button`,R=`${T}_search-input`,[B,F]=o.useState(!1),M=o.useCallback((()=>{F((e=>!e))}),[]),G=!!C,H=G&&B,[K,U]=o.useState(""),O=o.useCallback((e=>!!e.label.toLowerCase().includes(K.toLowerCase())||"function"==typeof C&&C(K,e)),[C,K]),z=o.useMemo((()=>b.map(a.getValuePair).map((e=>{const n=!G||""===K||O(e);return{...e,visible:n}}))),[b,G,K,O]),Q=o.useMemo((()=>!(typeof f>"u")&&b.some((e=>"string"==typeof e?e===f:e.value===f))),[f,b]),[W,J]=o.useState(Q&&void 0!==f?f:""),X=""!==W,Y=o.useMemo((()=>{var e;return(null==(e=z.find((e=>e.value===W)))?void 0:e.label)||P}),[z,W,P]),Z=o.useRef(null),ee=o.useCallback((e=>{Z.current=e,d&&("function"==typeof d?d(e):d.current=e),e&&J(e.value)}),[Z,d]),ne=i.usePreviousValue(f);o.useEffect((()=>{f!==ne&&J(typeof f>"u"||!Q?"":f)}),[J,f,ne,Q]);const oe=o.useCallback((e=>{const n=e.value;U(""),J(n),M()}),[U,J,M]),se=i.usePreviousValue(W);o.useEffect((()=>{typeof se>"u"||se===W||W===f||(h&&h({type:"change",target:{name:v,value:W}}),Z.current&&Z.current.dispatchEvent(new Event("change",{bubbles:!0})))}),[h,v,f,W,se]);const te=o.useRef(null),ce=o.useRef(!1),re=o.useRef(null),ie=o.useRef(null),le=o.useCallback(((e,n)=>{if(e&&!G){const e=n.current;e&&u.focusSelected(e,W)}else e?re.current&&re.current.focus():ce.current&&ie.current&&ie.current.focus()}),[G,W]),[ae]=r.useAnimatedHeight(B,{onFirstVisible:le,onTransitionEnd:le});l.useListNavigation({ref:ae});const ue=o.useCallback((e=>{var n;const o=te.current;o&&o.contains(e.relatedTarget)||(G&&U(""),g&&(g({type:"blur",target:{name:v,value:W}}),null==(n=Z.current)||n.dispatchEvent(new Event("focusout",{bubbles:!0}))),ce.current=!1,F(!1))}),[g,G,v,W]),pe=o.useCallback((()=>{ce.current||(w&&w({type:"change",target:{name:v,value:W}}),ce.current=!0)}),[w,W,v]),je=o.useCallback((e=>{e.target.focus({preventScroll:!0})}),[]);o.useEffect((()=>{const e=Z.current,n=re.current,o=ie.current,s=te.current;return null==e||e.addEventListener("focus",(()=>{H?null==n||n.focus():null==o||o.focus()})),null==e||e.addEventListener("blur",(function(e){s&&s.contains(e.relatedTarget)&&e.preventDefault()})),()=>{null==e||e.removeEventListener("focus",(()=>{H?null==n||n.focus():null==o||o.focus()})),null==e||e.removeEventListener("blur",(function(e){s&&s.contains(e.relatedTarget)&&e.preventDefault()}))}}),[H]);const de=o.useCallback((e=>{"ArrowDown"!==e.key&&" "!==e.key||B?"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),F(!1)):(e.preventDefault(),e.stopPropagation(),F(!0))}),[F,B]),me=o.useCallback((e=>{if("ArrowDown"===e.key){e.preventDefault(),e.stopPropagation();const n=ae.current;n&&(G?u.focusSelected(n,void 0):u.focusSelected(n,W))}else if("Escape"===e.key)e.preventDefault(),e.stopPropagation(),F(!1);else if("Tab"!==e.key||e.shiftKey)"Enter"===e.key&&B&&(e.preventDefault(),e.stopPropagation());else{const n=ae.current;n&&(e.preventDefault(),e.stopPropagation(),u.focusSelected(n,W))}}),[F,ae,W,G,B]),ve=o.useCallback((e=>{if("Tab"===e.key)e.preventDefault(),e.stopPropagation(),e.shiftKey&&re.current?re.current.focus():ie.current&&(J(e.currentTarget.value),F(!1),ie.current.focus());else if("ArrowUp"===e.key&&ae.current&&re.current){const n=ae.current.querySelector('[role="option"]:not([hidden])');e.currentTarget.id===(null==n?void 0:n.id)&&re.current&&re.current.focus()}}),[F,ae]);return o.useEffect((()=>{const e=e=>{"Escape"===e.key&&B&&F(!1)};return typeof window<"u"&&B&&window.addEventListener("keydown",e),()=>{typeof window<"u"&&window.removeEventListener("keydown",e)}}),[F,B]),e.jsxs(e.Fragment,{children:[e.jsxs("select",{name:v,tabIndex:-1,"data-testid":"jkl-native-select",className:"jkl-sr-only","aria-hidden":!0,ref:ee,value:W,onChange:p,children:[e.jsx("option",{value:""})," ",z.map((n=>e.jsx("option",{hidden:!n.visible,value:n.value,children:n.label},`${T}-opt-${n.value}`)))]}),e.jsx(c.InputGroup,{ref:te,"data-testid":"jkl-select",className:n.clsx("jkl-select",x,{"jkl-select--inline":L,"jkl-select--open":B&&z.some((e=>e.visible)),"jkl-select--no-value":!X,"jkl-select--invalid":!!I||_}),...S,id:G?R:V,style:{"--jkl-select-max-shown-options":A,...E},density:N,label:k,labelProps:{id:$,srOnly:L,...q,htmlFor:G?R:V},helpLabel:y,errorLabel:I,render:o=>e.jsxs("div",{className:"jkl-select__outer-wrapper",style:{width:D},children:[G&&e.jsx("input",{...o,id:R,hidden:!H,ref:re,placeholder:"Søk",value:K,onChange:e=>U(e.target.value),"data-testid":"jkl-select__search-input",className:"jkl-select__search-input","aria-autocomplete":"list","aria-activedescendant":X?`${T}__${u.toLower(W)}`:void 0,"aria-controls":T,"aria-expanded":B,role:"combobox",onKeyDown:me,onBlur:ue,onFocus:pe,onClick:e=>{e.stopPropagation()}}),e.jsx("button",{...o,id:V,ref:ie,hidden:H,type:"button",name:`${v}-btn`,className:n.clsx("jkl-select__button",{"jkl-select__button--active-value":!!W}),"data-testid":"jkl-select__button","aria-label":`${Y||"Velg"},${k}`,"aria-expanded":B,"aria-controls":T,onBlur:ue,onFocus:pe,onKeyDown:de,onClick:M,onMouseDown:e=>{var n;e.preventDefault(),null==(n=ie.current)||n.focus()},children:Y}),e.jsx("div",{id:T,ref:ae,role:"listbox",className:"jkl-select__options-menu",hidden:!B||z.every((e=>!e.visible)),"aria-labelledby":$,tabIndex:-1,"data-focus":"controlled",children:z.map(((n,o)=>n.visible?e.jsxs("button",{hidden:!n.visible,type:"button",id:`${T}__${u.toLower(n.value)}`,className:"jkl-select__option","data-testid":"jkl-select__option","aria-selected":n.value===W,role:"option",value:n.value,"data-testautoid":`jkl-select__option-${o}`,onBlur:ue,onFocus:pe,onKeyDown:ve,onClick:e=>{e.preventDefault(),oe(n)},onMouseOver:je,children:[n.label,n.description?e.jsx("span",{className:"jkl-select__option-description",children:n.description}):null]},`${T}-${n.value}`):null))}),e.jsx(t.ArrowVerticalAnimated,{variant:"medium",pointingDown:!B,className:"jkl-select__arrow"})]})})]})}));j.displayName="Select";const d=o.forwardRef(((o,s)=>{const{label:r,className:i,density:l,errorLabel:u,helpLabel:p,inline:j,invalid:d,items:m,labelProps:v,placeholder:b="Velg",selectClassName:f,supportLabelProps:k,tooltipProps:q,value:h,width:g,...w}=o,x={label:r,density:l,errorLabel:u,helpLabel:p,labelProps:v,inline:j,supportLabelProps:k,tooltipProps:q};return e.jsx(c.InputGroup,{...x,"data-testid":"jkl-select",className:n.clsx("jkl-select",i,{"jkl-select--inline":j,"jkl-select--invalid":!!u||d}),render:o=>e.jsxs("div",{className:"jkl-select__outer-wrapper",style:{width:g},children:[e.jsxs("select",{ref:s,className:n.clsx("jkl-select__button",f,{"jkl-select__button--active-value":!!h}),defaultValue:h?void 0:"",value:h,...o,...w,children:[b&&!h&&e.jsx("option",{disabled:!0,value:"",children:b}),m.map(a.getValuePair).map((n=>e.jsx("option",{"data-testid":"jkl-select__option",className:"jkl-select__option",value:n.value,children:n.label},n.value)))]}),e.jsx(t.ArrowVerticalAnimated,{variant:"medium",pointingDown:!0,className:"jkl-select__arrow"})]})})}));d.displayName="NativeSelect",exports.NativeSelect=d,exports.Select=j;
+//# sourceMappingURL=NativeSelect-BxgwmRDc.cjs.map

package/build/{NativeSelect-DSmX3GZo.cjs.map → NativeSelect-BxgwmRDc.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NativeSelect-DSmX3GZo.cjs","sources":["../src/components/select/Select.tsx","../src/components/select/NativeSelect.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    FocusEvent,\n    forwardRef,\n    useEffect,\n    useRef,\n    useState,\n    KeyboardEvent,\n    ChangeEvent,\n    useCallback,\n    useMemo,\n    RefObject,\n    MouseEvent,\n    CSSProperties,\n} from \"react\";\nimport { type ValuePair, getValuePair, type DataTestAutoId, type Density } from \"../..\";\nimport { useId, useAnimatedHeight, usePreviousValue, useListNavigation } from \"../../hooks\";\nimport { ArrowVerticalAnimated } from \"../icon\";\nimport { InputGroup, type LabelProps, type InputGroupProps } from \"../input-group\";\nimport { toLower, focusSelected } from \"./select-utils\";\n\ninterface PartialChangeEvent 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\ntype ChangeEventHandler = (event: PartialChangeEvent) => void;\n\ninterface Option extends ValuePair {\n    visible: boolean;\n}\n\nexport interface SelectProps extends Omit<InputGroupProps, \"children\">, DataTestAutoId {\n    id?: string;\n    name: string;\n    label: string;\n    labelProps?: Omit<LabelProps, \"children\" | \"density\" | \"htmlFor\" | \"standAlone\">;\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?: boolean | ((searchValue: string, searchItem: string | ValuePair) => boolean);\n    density?: Density;\n    width?: string;\n    onChange?: ChangeEventHandler;\n    onBlur?: ChangeEventHandler;\n    onFocus?: ChangeEventHandler;\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>((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        ...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 (item.label.toLowerCase().includes(searchValue.toLowerCase())) {\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 = !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) => (typeof item === \"string\" ? item === value : item.value === value));\n    }, [value, items]);\n\n    /// Valg av <option>\n\n    const [selectedValue, setSelectedValue] = useState<string>(valueIsInItems && value !== undefined ? value : \"\");\n    const hasSelectedValue = selectedValue !== \"\";\n    const selectedValueLabel = useMemo(\n        () => visibleItems.find((item) => item.value === selectedValue)?.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({ type: \"change\", target: { name, value: selectedValue } });\n        }\n        if (selectRef.current) {\n            selectRef.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\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>(dropdownIsShown, {\n        onFirstVisible: handleFocusPlacement,\n        onTransitionEnd: handleFocusPlacement,\n    });\n\n    useListNavigation({ ref: dropdownRef });\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 && componentRootElement.contains(e.relatedTarget as Node);\n            if (!nextFocusIsInsideComponent) {\n                if (isSearchable) {\n                    setSearchValue(\"\");\n                }\n                if (onBlur) {\n                    onBlur({ type: \"blur\", target: { name, value: selectedValue } });\n                    selectRef.current?.dispatchEvent(new Event(\"focusout\", { bubbles: true }));\n                }\n                focusInsideRef.current = false;\n                setShown(false);\n            }\n        },\n        [onBlur, isSearchable, name, selectedValue],\n    );\n\n    const handleFocus = useCallback(() => {\n        if (!focusInsideRef.current) {\n            if (onFocus) {\n                onFocus({ type: \"change\", target: { name, value: selectedValue } });\n            }\n            focusInsideRef.current = true;\n        }\n    }, [onFocus, selectedValue, name]);\n\n    const handleMouseOver = useCallback((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    // 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 && componentRootElement.contains(ev.relatedTarget as Node) && ev.preventDefault();\n        });\n\n        return () => {\n            select?.removeEventListener(\"focus\", () => {\n                showSearchInputField ? searchField?.focus() : button?.focus();\n            });\n            select?.removeEventListener(\"blur\", function (this, ev) {\n                componentRootElement && componentRootElement.contains(ev.relatedTarget as Node) && 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 ((e.key === \"ArrowDown\" || e.key === \" \") && !dropdownIsShown) {\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        [setShown, dropdownRef, selectedValue, isSearchable, dropdownIsShown],\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('[role=\"option\"]:not([hidden])');\n                    if (e.currentTarget.id === firstVisible?.id && searchFieldRef.current) {\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> {/* Tom option må være et valg, ellers vil <select> alltid ha en value */}\n                {visibleItems.map((item) => (\n                    <option key={`${listId}-opt-${item.value}`} hidden={!item.visible} value={item.value}>\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\": dropdownIsShown && visibleItems.some((item) => item.visible),\n                    \"jkl-select--no-value\": !hasSelectedValue,\n                    \"jkl-select--invalid\": !!errorLabel || invalid,\n                })}\n                {...rest}\n                id={isSearchable ? searchInputId : buttonId}\n                style={{ [\"--jkl-select-max-shown-options\"]: maxShownOptions, ...style } as CSSProperties}\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={(inputProps) => (\n                    <div className=\"jkl-select__outer-wrapper\" style={{ width }}>\n                        {isSearchable && (\n                            <input\n                                {...inputProps}\n                                id={searchInputId}\n                                hidden={!showSearchInputField}\n                                ref={searchFieldRef}\n                                placeholder=\"Søk\"\n                                value={searchValue}\n                                onChange={(e) => setSearchValue(e.target.value)}\n                                data-testid=\"jkl-select__search-input\"\n                                className=\"jkl-select__search-input\"\n                                aria-autocomplete=\"list\"\n                                aria-activedescendant={\n                                    hasSelectedValue ? `${listId}__${toLower(selectedValue)}` : 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                        <button\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\": !!selectedValue,\n                            })}\n                            data-testid=\"jkl-select__button\"\n                            aria-label={`${selectedValueLabel || \"Velg\"},${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={!dropdownIsShown || visibleItems.every((item) => !item.visible)}\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(item.value)}`}\n                                        className=\"jkl-select__option\"\n                                        data-testid=\"jkl-select__option\"\n                                        aria-selected={item.value === selectedValue}\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\">{item.description}</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\nSelect.displayName = \"Select\";\n","import clsx from \"clsx\";\nimport React, { forwardRef, SelectHTMLAttributes } from \"react\";\nimport { type ValuePair, getValuePair } from \"../..\";\nimport { ArrowVerticalAnimated } from \"../icon\";\nimport { InputGroup, type InputGroupProps } from \"../input-group\";\n\nexport interface NativeSelectProps extends Omit<InputGroupProps, \"children\">, 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>((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 className=\"jkl-select__outer-wrapper\" style={{ width }}>\n                    <select\n                        ref={ref}\n                        className={clsx(\"jkl-select__button\", selectClassName, {\n                            \"jkl-select__button--active-value\": !!value,\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 variant=\"medium\" pointingDown className=\"jkl-select__arrow\" />\n                </div>\n            )}\n        />\n    );\n});\n\nNativeSelect.displayName = \"NativeSelect\";\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","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","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","srOnly","htmlFor","render","inputProps","placeholder","toLower","role","onKeyDown","onClick","onMouseDown","every","i","onMouseOver","description","ArrowVerticalAnimated","variant","pointingDown","displayName","NativeSelect","selectClassName","supportLabelProps","tooltipProps","inputGroupProps","defaultValue","disabled"],"mappings":"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"}
+{"version":3,"file":"NativeSelect-BxgwmRDc.cjs","sources":["../src/components/select/Select.tsx","../src/components/select/NativeSelect.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    FocusEvent,\n    forwardRef,\n    useEffect,\n    useRef,\n    useState,\n    KeyboardEvent,\n    ChangeEvent,\n    useCallback,\n    useMemo,\n    RefObject,\n    MouseEvent,\n    CSSProperties,\n} from \"react\";\nimport { type ValuePair, getValuePair, type DataTestAutoId, type Density } from \"../..\";\nimport { useId, useAnimatedHeight, usePreviousValue, useListNavigation } from \"../../hooks\";\nimport { ArrowVerticalAnimated } from \"../icon\";\nimport { InputGroup, type LabelProps, type InputGroupProps } from \"../input-group\";\nimport { toLower, focusSelected } from \"./select-utils\";\n\ninterface PartialChangeEvent 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\ntype ChangeEventHandler = (event: PartialChangeEvent) => void;\n\ninterface Option extends ValuePair {\n    visible: boolean;\n}\n\nexport interface SelectProps extends Omit<InputGroupProps, \"children\">, DataTestAutoId {\n    id?: string;\n    name: string;\n    label: string;\n    labelProps?: Omit<LabelProps, \"children\" | \"density\" | \"htmlFor\" | \"standAlone\">;\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?: boolean | ((searchValue: string, searchItem: string | ValuePair) => boolean);\n    density?: Density;\n    width?: string;\n    onChange?: ChangeEventHandler;\n    onBlur?: ChangeEventHandler;\n    onFocus?: ChangeEventHandler;\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>((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        ...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 (item.label.toLowerCase().includes(searchValue.toLowerCase())) {\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 = !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) => (typeof item === \"string\" ? item === value : item.value === value));\n    }, [value, items]);\n\n    /// Valg av <option>\n\n    const [selectedValue, setSelectedValue] = useState<string>(valueIsInItems && value !== undefined ? value : \"\");\n    const hasSelectedValue = selectedValue !== \"\";\n    const selectedValueLabel = useMemo(\n        () => visibleItems.find((item) => item.value === selectedValue)?.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({ type: \"change\", target: { name, value: selectedValue } });\n        }\n        if (selectRef.current) {\n            selectRef.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\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>(dropdownIsShown, {\n        onFirstVisible: handleFocusPlacement,\n        onTransitionEnd: handleFocusPlacement,\n    });\n\n    useListNavigation({ ref: dropdownRef });\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 && componentRootElement.contains(e.relatedTarget as Node);\n            if (!nextFocusIsInsideComponent) {\n                if (isSearchable) {\n                    setSearchValue(\"\");\n                }\n                if (onBlur) {\n                    onBlur({ type: \"blur\", target: { name, value: selectedValue } });\n                    selectRef.current?.dispatchEvent(new Event(\"focusout\", { bubbles: true }));\n                }\n                focusInsideRef.current = false;\n                setShown(false);\n            }\n        },\n        [onBlur, isSearchable, name, selectedValue],\n    );\n\n    const handleFocus = useCallback(() => {\n        if (!focusInsideRef.current) {\n            if (onFocus) {\n                onFocus({ type: \"change\", target: { name, value: selectedValue } });\n            }\n            focusInsideRef.current = true;\n        }\n    }, [onFocus, selectedValue, name]);\n\n    const handleMouseOver = useCallback((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    // 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 && componentRootElement.contains(ev.relatedTarget as Node) && ev.preventDefault();\n        });\n\n        return () => {\n            select?.removeEventListener(\"focus\", () => {\n                showSearchInputField ? searchField?.focus() : button?.focus();\n            });\n            select?.removeEventListener(\"blur\", function (this, ev) {\n                componentRootElement && componentRootElement.contains(ev.relatedTarget as Node) && 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 ((e.key === \"ArrowDown\" || e.key === \" \") && !dropdownIsShown) {\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        [setShown, dropdownRef, selectedValue, isSearchable, dropdownIsShown],\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('[role=\"option\"]:not([hidden])');\n                    if (e.currentTarget.id === firstVisible?.id && searchFieldRef.current) {\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> {/* Tom option må være et valg, ellers vil <select> alltid ha en value */}\n                {visibleItems.map((item) => (\n                    <option key={`${listId}-opt-${item.value}`} hidden={!item.visible} value={item.value}>\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\": dropdownIsShown && visibleItems.some((item) => item.visible),\n                    \"jkl-select--no-value\": !hasSelectedValue,\n                    \"jkl-select--invalid\": !!errorLabel || invalid,\n                })}\n                {...rest}\n                id={isSearchable ? searchInputId : buttonId}\n                style={{ [\"--jkl-select-max-shown-options\"]: maxShownOptions, ...style } as CSSProperties}\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={(inputProps) => (\n                    <div className=\"jkl-select__outer-wrapper\" style={{ width }}>\n                        {isSearchable && (\n                            <input\n                                {...inputProps}\n                                id={searchInputId}\n                                hidden={!showSearchInputField}\n                                ref={searchFieldRef}\n                                placeholder=\"Søk\"\n                                value={searchValue}\n                                onChange={(e) => setSearchValue(e.target.value)}\n                                data-testid=\"jkl-select__search-input\"\n                                className=\"jkl-select__search-input\"\n                                aria-autocomplete=\"list\"\n                                aria-activedescendant={\n                                    hasSelectedValue ? `${listId}__${toLower(selectedValue)}` : 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                        <button\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\": !!selectedValue,\n                            })}\n                            data-testid=\"jkl-select__button\"\n                            aria-label={`${selectedValueLabel || \"Velg\"},${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={!dropdownIsShown || visibleItems.every((item) => !item.visible)}\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(item.value)}`}\n                                        className=\"jkl-select__option\"\n                                        data-testid=\"jkl-select__option\"\n                                        aria-selected={item.value === selectedValue}\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\">{item.description}</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\nSelect.displayName = \"Select\";\n","import clsx from \"clsx\";\nimport React, { forwardRef, SelectHTMLAttributes } from \"react\";\nimport { type ValuePair, getValuePair } from \"../..\";\nimport { ArrowVerticalAnimated } from \"../icon\";\nimport { InputGroup, type InputGroupProps } from \"../input-group\";\n\nexport interface NativeSelectProps extends Omit<InputGroupProps, \"children\">, 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>((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 className=\"jkl-select__outer-wrapper\" style={{ width }}>\n                    <select\n                        ref={ref}\n                        className={clsx(\"jkl-select__button\", selectClassName, {\n                            \"jkl-select__button--active-value\": !!value,\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 variant=\"medium\" pointingDown className=\"jkl-select__arrow\" />\n                </div>\n            )}\n        />\n    );\n});\n\nNativeSelect.displayName = \"NativeSelect\";\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","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","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","srOnly","htmlFor","render","inputProps","placeholder","toLower","role","onKeyDown","onClick","onMouseDown","every","i","onMouseOver","description","ArrowVerticalAnimated","variant","pointingDown","displayName","NativeSelect","selectClassName","supportLabelProps","tooltipProps","inputGroupProps","defaultValue","disabled"],"mappings":"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"}

package/build/NativeSelect-DwtOOfyt.js

@@ -0,0 +1,2 @@
+import{jsxs as e,Fragment as o,jsx as n}from"react/jsx-runtime";import{c as t}from"./clsx-BeLtu-UY.js";import{forwardRef as s,useState as i,useCallback as r,useMemo as c,useRef as a,useEffect as l}from"react";import"./es/hooks/useScreen/useScreen.js";import{useId as p}from"./es/hooks/useId/useId.js";import"./es/components/icon/Icon.js";import{ArrowVerticalAnimated as u}from"./es/components/icon/icons/animated/ArrowVerticalAnimated.js";import"./es/components/icon/icons/animated/ArrowHorizontalAnimated.js";import"./es/components/icon/icons/animated/PlusRemoveAnimated.js";import"./es/components/icon/icons/ArrowDownIcon.js";import"./es/components/icon/icons/ArrowLeftIcon.js";import"./es/components/icon/icons/ArrowNorthEastIcon.js";import"./es/components/icon/icons/ArrowRightIcon.js";import"./es/components/icon/icons/ArrowUpIcon.js";import"./es/components/icon/icons/CalendarIcon.js";import"./es/components/icon/icons/CheckIcon.js";import"./es/components/icon/icons/ChevronDownIcon.js";import"./es/components/icon/icons/ChevronLeftIcon.js";import"./es/components/icon/icons/ChevronRightIcon.js";import"./es/components/icon/icons/ChevronUpIcon.js";import"./es/components/icon/icons/CloseIcon.js";import"./es/components/icon/icons/CopyIcon.js";import"./es/components/icon/icons/DotsIcon.js";import"./es/components/icon/icons/DragIcon.js";import"./es/components/icon/icons/ErrorIcon.js";import"./es/components/icon/icons/GreenCheckIcon.js";import"./es/components/icon/icons/HamburgerIcon.js";import"./es/components/icon/icons/InfoIcon.js";import"./es/components/icon/icons/LinkIcon.js";import"./es/components/icon/icons/PlusIcon.js";import"./es/components/icon/icons/QuestionIcon.js";import"./es/components/icon/icons/RedCrossIcon.js";import"./es/components/icon/icons/SearchIcon.js";import"./es/components/icon/icons/SuccessIcon.js";import"./es/components/icon/icons/WarningIcon.js";import"./es/components/icon/icons/MinusIcon.js";import"./es/components/icon/icons/ThumbDownIcon.js";import"./es/components/icon/icons/ThumbUpIcon.js";import"./es/components/icon/icons/TrashCanIcon.js";import"./es/components/icon/icons/PenIcon.js";import"./es/components/button/Button.js";import"./es/components/card/Card.js";import"./es/components/card/CardImage.js";import"./es/components/card/NavCard.js";import"./es/components/checkbox/Checkbox.js";import"./es/components/combobox/Combobox.js";import"./es/components/cookie-consent/CookieConsentContext.js";import"react-dom";import"./es/components/modal/Modal.js";import"react-a11y-dialog";import"./es/components/list/List.js";import"./es/components/list/ListItem.js";import"./es/components/datepicker/DatePicker.js";import"./es/components/icon-button/IconButton.js";import"./es/components/tooltip/Tooltip.js";import"./es/components/tooltip/TooltipContent.js";import"./es/components/tooltip/TooltipTrigger.js";import{InputGroup as m}from"./es/components/input-group/InputGroup.js";import"./es/components/link/Link.js";import"./es/components/link/NavLink.js";import"./es/components/link-list/LinkList.js";import"./es/components/popover/Popover.js";import"./es/components/radio-button/RadioButton.js";import"./es/components/radio-button/radioGroupContext.js";import"./es/components/radio-button/BaseRadioButton.js";import{useAnimatedHeight as d}from"./es/hooks/useAnimatedHeight/useAnimatedHeight.js";import{usePreviousValue as j}from"./es/hooks/usePreviousValue/usePreviousValue.js";import{useListNavigation as v}from"./es/hooks/useListNavigation/useListNavigation.js";import"./es/components/tag/Tag.js";import"./es/components/text-input/BaseTextArea.js";import"./es/components/text-input/BaseTextInput.js";import"./es/components/text-input/TextArea.js";import"./es/components/text-input/TextInput.js";import"./es/utilities/polymorphism/SlotComponent.js";import{getValuePair as b}from"./es/utilities/valuePair.js";import{focusSelected as f,toLower as h}from"./es/components/select/select-utils.js";const k=()=>{},g=s(((s,g)=>{const{id:w,name:y,items:I,value:_,label:C,labelProps:L,onChange:x,onBlur:N,onFocus:P,className:D,helpLabel:A,errorLabel:T,invalid:E,searchable:S=!1,inline:$=!1,defaultPrompt:B="Velg",density:V,width:R,maxShownOptions:F=5,style:H,...K}=s,M=p(w||"jkl-select",{generateSuffix:!w}),G=`${M}_label`,U=`${M}_button`,O=`${M}_search-input`,[q,z]=i(!1),Q=r((()=>{z((e=>!e))}),[]),W=!!S,J=W&&q,[X,Y]=i(""),Z=r((e=>!!e.label.toLowerCase().includes(X.toLowerCase())||"function"==typeof S&&S(X,e)),[S,X]),ee=c((()=>I.map(b).map((e=>{const o=!W||""===X||Z(e);return{...e,visible:o}}))),[I,W,X,Z]),oe=c((()=>!(typeof _>"u")&&I.some((e=>"string"==typeof e?e===_:e.value===_))),[_,I]),[ne,te]=i(oe&&void 0!==_?_:""),se=""!==ne,ie=c((()=>{var e;return(null==(e=ee.find((e=>e.value===ne)))?void 0:e.label)||B}),[ee,ne,B]),re=a(null),ce=r((e=>{re.current=e,g&&("function"==typeof g?g(e):g.current=e),e&&te(e.value)}),[re,g]),ae=j(_);l((()=>{_!==ae&&te(typeof _>"u"||!oe?"":_)}),[te,_,ae,oe]);const le=r((e=>{const o=e.value;Y(""),te(o),Q()}),[Y,te,Q]),pe=j(ne);l((()=>{typeof pe>"u"||pe===ne||ne===_||(x&&x({type:"change",target:{name:y,value:ne}}),re.current&&re.current.dispatchEvent(new Event("change",{bubbles:!0})))}),[x,y,_,ne,pe]);const ue=a(null),me=a(!1),de=a(null),je=a(null),ve=r(((e,o)=>{if(e&&!W){const e=o.current;e&&f(e,ne)}else e?de.current&&de.current.focus():me.current&&je.current&&je.current.focus()}),[W,ne]),[be]=d(q,{onFirstVisible:ve,onTransitionEnd:ve});v({ref:be});const fe=r((e=>{var o;const n=ue.current;n&&n.contains(e.relatedTarget)||(W&&Y(""),N&&(N({type:"blur",target:{name:y,value:ne}}),null==(o=re.current)||o.dispatchEvent(new Event("focusout",{bubbles:!0}))),me.current=!1,z(!1))}),[N,W,y,ne]),he=r((()=>{me.current||(P&&P({type:"change",target:{name:y,value:ne}}),me.current=!0)}),[P,ne,y]),ke=r((e=>{e.target.focus({preventScroll:!0})}),[]);l((()=>{const e=re.current,o=de.current,n=je.current,t=ue.current;return null==e||e.addEventListener("focus",(()=>{J?null==o||o.focus():null==n||n.focus()})),null==e||e.addEventListener("blur",(function(e){t&&t.contains(e.relatedTarget)&&e.preventDefault()})),()=>{null==e||e.removeEventListener("focus",(()=>{J?null==o||o.focus():null==n||n.focus()})),null==e||e.removeEventListener("blur",(function(e){t&&t.contains(e.relatedTarget)&&e.preventDefault()}))}}),[J]);const ge=r((e=>{"ArrowDown"!==e.key&&" "!==e.key||q?"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),z(!1)):(e.preventDefault(),e.stopPropagation(),z(!0))}),[z,q]),we=r((e=>{if("ArrowDown"===e.key){e.preventDefault(),e.stopPropagation();const o=be.current;o&&f(o,W?void 0:ne)}else if("Escape"===e.key)e.preventDefault(),e.stopPropagation(),z(!1);else if("Tab"!==e.key||e.shiftKey)"Enter"===e.key&&q&&(e.preventDefault(),e.stopPropagation());else{const o=be.current;o&&(e.preventDefault(),e.stopPropagation(),f(o,ne))}}),[z,be,ne,W,q]),ye=r((e=>{if("Tab"===e.key)e.preventDefault(),e.stopPropagation(),e.shiftKey&&de.current?de.current.focus():je.current&&(te(e.currentTarget.value),z(!1),je.current.focus());else if("ArrowUp"===e.key&&be.current&&de.current){const o=be.current.querySelector('[role="option"]:not([hidden])');e.currentTarget.id===(null==o?void 0:o.id)&&de.current&&de.current.focus()}}),[z,be]);return l((()=>{const e=e=>{"Escape"===e.key&&q&&z(!1)};return typeof window<"u"&&q&&window.addEventListener("keydown",e),()=>{typeof window<"u"&&window.removeEventListener("keydown",e)}}),[z,q]),e(o,{children:[e("select",{name:y,tabIndex:-1,"data-testid":"jkl-native-select",className:"jkl-sr-only","aria-hidden":!0,ref:ce,value:ne,onChange:k,children:[n("option",{value:""})," ",ee.map((e=>n("option",{hidden:!e.visible,value:e.value,children:e.label},`${M}-opt-${e.value}`)))]}),n(m,{ref:ue,"data-testid":"jkl-select",className:t("jkl-select",D,{"jkl-select--inline":$,"jkl-select--open":q&&ee.some((e=>e.visible)),"jkl-select--no-value":!se,"jkl-select--invalid":!!T||E}),...K,id:W?O:U,style:{"--jkl-select-max-shown-options":F,...H},density:V,label:C,labelProps:{id:G,srOnly:$,...L,htmlFor:W?O:U},helpLabel:A,errorLabel:T,render:o=>e("div",{className:"jkl-select__outer-wrapper",style:{width:R},children:[W&&n("input",{...o,id:O,hidden:!J,ref:de,placeholder:"Søk",value:X,onChange:e=>Y(e.target.value),"data-testid":"jkl-select__search-input",className:"jkl-select__search-input","aria-autocomplete":"list","aria-activedescendant":se?`${M}__${h(ne)}`:void 0,"aria-controls":M,"aria-expanded":q,role:"combobox",onKeyDown:we,onBlur:fe,onFocus:he,onClick:e=>{e.stopPropagation()}}),n("button",{...o,id:U,ref:je,hidden:J,type:"button",name:`${y}-btn`,className:t("jkl-select__button",{"jkl-select__button--active-value":!!ne}),"data-testid":"jkl-select__button","aria-label":`${ie||"Velg"},${C}`,"aria-expanded":q,"aria-controls":M,onBlur:fe,onFocus:he,onKeyDown:ge,onClick:Q,onMouseDown:e=>{var o;e.preventDefault(),null==(o=je.current)||o.focus()},children:ie}),n("div",{id:M,ref:be,role:"listbox",className:"jkl-select__options-menu",hidden:!q||ee.every((e=>!e.visible)),"aria-labelledby":G,tabIndex:-1,"data-focus":"controlled",children:ee.map(((o,t)=>o.visible?e("button",{hidden:!o.visible,type:"button",id:`${M}__${h(o.value)}`,className:"jkl-select__option","data-testid":"jkl-select__option","aria-selected":o.value===ne,role:"option",value:o.value,"data-testautoid":`jkl-select__option-${t}`,onBlur:fe,onFocus:he,onKeyDown:ye,onClick:e=>{e.preventDefault(),le(o)},onMouseOver:ke,children:[o.label,o.description?n("span",{className:"jkl-select__option-description",children:o.description}):null]},`${M}-${o.value}`):null))}),n(u,{variant:"medium",pointingDown:!q,className:"jkl-select__arrow"})]})})]})}));g.displayName="Select";const w=s(((o,s)=>{const{label:i,className:r,density:c,errorLabel:a,helpLabel:l,inline:p,invalid:d,items:j,labelProps:v,placeholder:f="Velg",selectClassName:h,supportLabelProps:k,tooltipProps:g,value:w,width:y,...I}=o;return n(m,{label:i,density:c,errorLabel:a,helpLabel:l,labelProps:v,inline:p,supportLabelProps:k,tooltipProps:g,"data-testid":"jkl-select",className:t("jkl-select",r,{"jkl-select--inline":p,"jkl-select--invalid":!!a||d}),render:o=>e("div",{className:"jkl-select__outer-wrapper",style:{width:y},children:[e("select",{ref:s,className:t("jkl-select__button",h,{"jkl-select__button--active-value":!!w}),defaultValue:w?void 0:"",value:w,...o,...I,children:[f&&!w&&n("option",{disabled:!0,value:"",children:f}),j.map(b).map((e=>n("option",{"data-testid":"jkl-select__option",className:"jkl-select__option",value:e.value,children:e.label},e.value)))]}),n(u,{variant:"medium",pointingDown:!0,className:"jkl-select__arrow"})]})})}));w.displayName="NativeSelect";export{w as N,g as S};
+//# sourceMappingURL=NativeSelect-DwtOOfyt.js.map

package/build/{NativeSelect-EidDABsT.js.map → NativeSelect-DwtOOfyt.js.map}

@@ -1 +1 @@
-{"version":3,"file":"NativeSelect-EidDABsT.js","sources":["../src/components/select/Select.tsx","../src/components/select/NativeSelect.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    FocusEvent,\n    forwardRef,\n    useEffect,\n    useRef,\n    useState,\n    KeyboardEvent,\n    ChangeEvent,\n    useCallback,\n    useMemo,\n    RefObject,\n    MouseEvent,\n    CSSProperties,\n} from \"react\";\nimport { type ValuePair, getValuePair, type DataTestAutoId, type Density } from \"../..\";\nimport { useId, useAnimatedHeight, usePreviousValue, useListNavigation } from \"../../hooks\";\nimport { ArrowVerticalAnimated } from \"../icon\";\nimport { InputGroup, type LabelProps, type InputGroupProps } from \"../input-group\";\nimport { toLower, focusSelected } from \"./select-utils\";\n\ninterface PartialChangeEvent 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\ntype ChangeEventHandler = (event: PartialChangeEvent) => void;\n\ninterface Option extends ValuePair {\n    visible: boolean;\n}\n\nexport interface SelectProps extends Omit<InputGroupProps, \"children\">, DataTestAutoId {\n    id?: string;\n    name: string;\n    label: string;\n    labelProps?: Omit<LabelProps, \"children\" | \"density\" | \"htmlFor\" | \"standAlone\">;\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?: boolean | ((searchValue: string, searchItem: string | ValuePair) => boolean);\n    density?: Density;\n    width?: string;\n    onChange?: ChangeEventHandler;\n    onBlur?: ChangeEventHandler;\n    onFocus?: ChangeEventHandler;\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>((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        ...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 (item.label.toLowerCase().includes(searchValue.toLowerCase())) {\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 = !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) => (typeof item === \"string\" ? item === value : item.value === value));\n    }, [value, items]);\n\n    /// Valg av <option>\n\n    const [selectedValue, setSelectedValue] = useState<string>(valueIsInItems && value !== undefined ? value : \"\");\n    const hasSelectedValue = selectedValue !== \"\";\n    const selectedValueLabel = useMemo(\n        () => visibleItems.find((item) => item.value === selectedValue)?.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({ type: \"change\", target: { name, value: selectedValue } });\n        }\n        if (selectRef.current) {\n            selectRef.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\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>(dropdownIsShown, {\n        onFirstVisible: handleFocusPlacement,\n        onTransitionEnd: handleFocusPlacement,\n    });\n\n    useListNavigation({ ref: dropdownRef });\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 && componentRootElement.contains(e.relatedTarget as Node);\n            if (!nextFocusIsInsideComponent) {\n                if (isSearchable) {\n                    setSearchValue(\"\");\n                }\n                if (onBlur) {\n                    onBlur({ type: \"blur\", target: { name, value: selectedValue } });\n                    selectRef.current?.dispatchEvent(new Event(\"focusout\", { bubbles: true }));\n                }\n                focusInsideRef.current = false;\n                setShown(false);\n            }\n        },\n        [onBlur, isSearchable, name, selectedValue],\n    );\n\n    const handleFocus = useCallback(() => {\n        if (!focusInsideRef.current) {\n            if (onFocus) {\n                onFocus({ type: \"change\", target: { name, value: selectedValue } });\n            }\n            focusInsideRef.current = true;\n        }\n    }, [onFocus, selectedValue, name]);\n\n    const handleMouseOver = useCallback((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    // 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 && componentRootElement.contains(ev.relatedTarget as Node) && ev.preventDefault();\n        });\n\n        return () => {\n            select?.removeEventListener(\"focus\", () => {\n                showSearchInputField ? searchField?.focus() : button?.focus();\n            });\n            select?.removeEventListener(\"blur\", function (this, ev) {\n                componentRootElement && componentRootElement.contains(ev.relatedTarget as Node) && 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 ((e.key === \"ArrowDown\" || e.key === \" \") && !dropdownIsShown) {\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        [setShown, dropdownRef, selectedValue, isSearchable, dropdownIsShown],\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('[role=\"option\"]:not([hidden])');\n                    if (e.currentTarget.id === firstVisible?.id && searchFieldRef.current) {\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> {/* Tom option må være et valg, ellers vil <select> alltid ha en value */}\n                {visibleItems.map((item) => (\n                    <option key={`${listId}-opt-${item.value}`} hidden={!item.visible} value={item.value}>\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\": dropdownIsShown && visibleItems.some((item) => item.visible),\n                    \"jkl-select--no-value\": !hasSelectedValue,\n                    \"jkl-select--invalid\": !!errorLabel || invalid,\n                })}\n                {...rest}\n                id={isSearchable ? searchInputId : buttonId}\n                style={{ [\"--jkl-select-max-shown-options\"]: maxShownOptions, ...style } as CSSProperties}\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={(inputProps) => (\n                    <div className=\"jkl-select__outer-wrapper\" style={{ width }}>\n                        {isSearchable && (\n                            <input\n                                {...inputProps}\n                                id={searchInputId}\n                                hidden={!showSearchInputField}\n                                ref={searchFieldRef}\n                                placeholder=\"Søk\"\n                                value={searchValue}\n                                onChange={(e) => setSearchValue(e.target.value)}\n                                data-testid=\"jkl-select__search-input\"\n                                className=\"jkl-select__search-input\"\n                                aria-autocomplete=\"list\"\n                                aria-activedescendant={\n                                    hasSelectedValue ? `${listId}__${toLower(selectedValue)}` : 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                        <button\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\": !!selectedValue,\n                            })}\n                            data-testid=\"jkl-select__button\"\n                            aria-label={`${selectedValueLabel || \"Velg\"},${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={!dropdownIsShown || visibleItems.every((item) => !item.visible)}\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(item.value)}`}\n                                        className=\"jkl-select__option\"\n                                        data-testid=\"jkl-select__option\"\n                                        aria-selected={item.value === selectedValue}\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\">{item.description}</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\nSelect.displayName = \"Select\";\n","import clsx from \"clsx\";\nimport React, { forwardRef, SelectHTMLAttributes } from \"react\";\nimport { type ValuePair, getValuePair } from \"../..\";\nimport { ArrowVerticalAnimated } from \"../icon\";\nimport { InputGroup, type InputGroupProps } from \"../input-group\";\n\nexport interface NativeSelectProps extends Omit<InputGroupProps, \"children\">, 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>((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 className=\"jkl-select__outer-wrapper\" style={{ width }}>\n                    <select\n                        ref={ref}\n                        className={clsx(\"jkl-select__button\", selectClassName, {\n                            \"jkl-select__button--active-value\": !!value,\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 variant=\"medium\" pointingDown className=\"jkl-select__arrow\" />\n                </div>\n            )}\n        />\n    );\n});\n\nNativeSelect.displayName = \"NativeSelect\";\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","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","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","srOnly","htmlFor","render","inputProps","placeholder","toLower","role","onKeyDown","onClick","onMouseDown","every","i","onMouseOver","description","ArrowVerticalAnimated","variant","pointingDown","displayName","NativeSelect","selectClassName","supportLabelProps","tooltipProps","defaultValue","disabled"],"mappings":"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"}
+{"version":3,"file":"NativeSelect-DwtOOfyt.js","sources":["../src/components/select/Select.tsx","../src/components/select/NativeSelect.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    FocusEvent,\n    forwardRef,\n    useEffect,\n    useRef,\n    useState,\n    KeyboardEvent,\n    ChangeEvent,\n    useCallback,\n    useMemo,\n    RefObject,\n    MouseEvent,\n    CSSProperties,\n} from \"react\";\nimport { type ValuePair, getValuePair, type DataTestAutoId, type Density } from \"../..\";\nimport { useId, useAnimatedHeight, usePreviousValue, useListNavigation } from \"../../hooks\";\nimport { ArrowVerticalAnimated } from \"../icon\";\nimport { InputGroup, type LabelProps, type InputGroupProps } from \"../input-group\";\nimport { toLower, focusSelected } from \"./select-utils\";\n\ninterface PartialChangeEvent 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\ntype ChangeEventHandler = (event: PartialChangeEvent) => void;\n\ninterface Option extends ValuePair {\n    visible: boolean;\n}\n\nexport interface SelectProps extends Omit<InputGroupProps, \"children\">, DataTestAutoId {\n    id?: string;\n    name: string;\n    label: string;\n    labelProps?: Omit<LabelProps, \"children\" | \"density\" | \"htmlFor\" | \"standAlone\">;\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?: boolean | ((searchValue: string, searchItem: string | ValuePair) => boolean);\n    density?: Density;\n    width?: string;\n    onChange?: ChangeEventHandler;\n    onBlur?: ChangeEventHandler;\n    onFocus?: ChangeEventHandler;\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>((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        ...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 (item.label.toLowerCase().includes(searchValue.toLowerCase())) {\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 = !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) => (typeof item === \"string\" ? item === value : item.value === value));\n    }, [value, items]);\n\n    /// Valg av <option>\n\n    const [selectedValue, setSelectedValue] = useState<string>(valueIsInItems && value !== undefined ? value : \"\");\n    const hasSelectedValue = selectedValue !== \"\";\n    const selectedValueLabel = useMemo(\n        () => visibleItems.find((item) => item.value === selectedValue)?.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({ type: \"change\", target: { name, value: selectedValue } });\n        }\n        if (selectRef.current) {\n            selectRef.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\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>(dropdownIsShown, {\n        onFirstVisible: handleFocusPlacement,\n        onTransitionEnd: handleFocusPlacement,\n    });\n\n    useListNavigation({ ref: dropdownRef });\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 && componentRootElement.contains(e.relatedTarget as Node);\n            if (!nextFocusIsInsideComponent) {\n                if (isSearchable) {\n                    setSearchValue(\"\");\n                }\n                if (onBlur) {\n                    onBlur({ type: \"blur\", target: { name, value: selectedValue } });\n                    selectRef.current?.dispatchEvent(new Event(\"focusout\", { bubbles: true }));\n                }\n                focusInsideRef.current = false;\n                setShown(false);\n            }\n        },\n        [onBlur, isSearchable, name, selectedValue],\n    );\n\n    const handleFocus = useCallback(() => {\n        if (!focusInsideRef.current) {\n            if (onFocus) {\n                onFocus({ type: \"change\", target: { name, value: selectedValue } });\n            }\n            focusInsideRef.current = true;\n        }\n    }, [onFocus, selectedValue, name]);\n\n    const handleMouseOver = useCallback((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    // 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 && componentRootElement.contains(ev.relatedTarget as Node) && ev.preventDefault();\n        });\n\n        return () => {\n            select?.removeEventListener(\"focus\", () => {\n                showSearchInputField ? searchField?.focus() : button?.focus();\n            });\n            select?.removeEventListener(\"blur\", function (this, ev) {\n                componentRootElement && componentRootElement.contains(ev.relatedTarget as Node) && 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 ((e.key === \"ArrowDown\" || e.key === \" \") && !dropdownIsShown) {\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        [setShown, dropdownRef, selectedValue, isSearchable, dropdownIsShown],\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('[role=\"option\"]:not([hidden])');\n                    if (e.currentTarget.id === firstVisible?.id && searchFieldRef.current) {\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> {/* Tom option må være et valg, ellers vil <select> alltid ha en value */}\n                {visibleItems.map((item) => (\n                    <option key={`${listId}-opt-${item.value}`} hidden={!item.visible} value={item.value}>\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\": dropdownIsShown && visibleItems.some((item) => item.visible),\n                    \"jkl-select--no-value\": !hasSelectedValue,\n                    \"jkl-select--invalid\": !!errorLabel || invalid,\n                })}\n                {...rest}\n                id={isSearchable ? searchInputId : buttonId}\n                style={{ [\"--jkl-select-max-shown-options\"]: maxShownOptions, ...style } as CSSProperties}\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={(inputProps) => (\n                    <div className=\"jkl-select__outer-wrapper\" style={{ width }}>\n                        {isSearchable && (\n                            <input\n                                {...inputProps}\n                                id={searchInputId}\n                                hidden={!showSearchInputField}\n                                ref={searchFieldRef}\n                                placeholder=\"Søk\"\n                                value={searchValue}\n                                onChange={(e) => setSearchValue(e.target.value)}\n                                data-testid=\"jkl-select__search-input\"\n                                className=\"jkl-select__search-input\"\n                                aria-autocomplete=\"list\"\n                                aria-activedescendant={\n                                    hasSelectedValue ? `${listId}__${toLower(selectedValue)}` : 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                        <button\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\": !!selectedValue,\n                            })}\n                            data-testid=\"jkl-select__button\"\n                            aria-label={`${selectedValueLabel || \"Velg\"},${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={!dropdownIsShown || visibleItems.every((item) => !item.visible)}\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(item.value)}`}\n                                        className=\"jkl-select__option\"\n                                        data-testid=\"jkl-select__option\"\n                                        aria-selected={item.value === selectedValue}\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\">{item.description}</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\nSelect.displayName = \"Select\";\n","import clsx from \"clsx\";\nimport React, { forwardRef, SelectHTMLAttributes } from \"react\";\nimport { type ValuePair, getValuePair } from \"../..\";\nimport { ArrowVerticalAnimated } from \"../icon\";\nimport { InputGroup, type InputGroupProps } from \"../input-group\";\n\nexport interface NativeSelectProps extends Omit<InputGroupProps, \"children\">, 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>((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 className=\"jkl-select__outer-wrapper\" style={{ width }}>\n                    <select\n                        ref={ref}\n                        className={clsx(\"jkl-select__button\", selectClassName, {\n                            \"jkl-select__button--active-value\": !!value,\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 variant=\"medium\" pointingDown className=\"jkl-select__arrow\" />\n                </div>\n            )}\n        />\n    );\n});\n\nNativeSelect.displayName = \"NativeSelect\";\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","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","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","srOnly","htmlFor","render","inputProps","placeholder","toLower","role","onKeyDown","onClick","onMouseDown","every","i","onMouseOver","description","ArrowVerticalAnimated","variant","pointingDown","displayName","NativeSelect","selectClassName","supportLabelProps","tooltipProps","defaultValue","disabled"],"mappings":"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"}