{"version":3,"file":"Select.cjs","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    type CSSProperties,\n    type FocusEvent,\n    forwardRef,\n    type KeyboardEvent,\n    type MouseEvent,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useListNavigation } from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport { usePreviousValue } from \"../../hooks/usePreviousValue/usePreviousValue.js\";\nimport { type ValuePair, getValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport Popover from \"../popover/Popover.js\";\nimport type { PopupTipProps } from \"../tooltip/types.js\";\nimport { focusSelected, toLower } from \"./select-utils.js\";\nimport type { SelectProps } from \"./types.js\";\n\nconst noop = () => {\n    return;\n};\n\ninterface Option extends ValuePair {\n    visible: boolean;\n}\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n    (props, forwardedSelectRef) => {\n        const {\n            id,\n            name,\n            items,\n            value,\n            label,\n            labelProps,\n            onChange,\n            onBlur,\n            onFocus,\n            className,\n            helpLabel,\n            errorLabel,\n            invalid,\n            searchable = false,\n            inline = false,\n            defaultPrompt = \"Velg\",\n            width,\n            maxShownOptions = 5,\n            style,\n            tooltip,\n            ...rest\n        } = props;\n\n        const listId = useId(id || \"jkl-select\", { generateSuffix: !id });\n        const labelId = `${listId}_label`;\n        const buttonId = `${listId}_button`;\n        const searchInputId = `${listId}_search-input`;\n\n        const [dropdownIsShown, setShown] = useState(false);\n        const toggleListVisibility = useCallback(() => {\n            setShown((previousValue) => !previousValue);\n        }, []);\n\n        // Lagrer faktisk placement etter at floating-ui har kjørt `flip`,\n        // slik at vi kan bytte hvilken side av lista og knappen som er\n        // flat når lista snus over triggeren.\n        const [popoverPlacement, setPopoverPlacement] = useState<\n            \"top\" | \"bottom\"\n        >(\"bottom\");\n        const handlePlacementChange = useCallback((p: string) => {\n            setPopoverPlacement(p.startsWith(\"top\") ? \"top\" : \"bottom\");\n        }, []);\n\n        /// Søk\n\n        const isSearchable = Boolean(searchable);\n        const showSearchInputField = isSearchable && dropdownIsShown;\n        const [searchValue, setSearchValue] = useState(\"\");\n        const searchFn = useCallback(\n            (item: ValuePair) => {\n                if (\n                    item.label.toLowerCase().includes(searchValue.toLowerCase())\n                ) {\n                    return true;\n                }\n\n                if (typeof searchable === \"function\") {\n                    return searchable(searchValue, item);\n                }\n\n                return false;\n            },\n            [searchable, searchValue],\n        );\n        const visibleItems: Option[] = useMemo(\n            () =>\n                items.map(getValuePair).map((item) => {\n                    const visible =\n                        !isSearchable || searchValue === \"\" || searchFn(item);\n                    return { ...item, visible };\n                }),\n            [items, isSearchable, searchValue, searchFn],\n        );\n        const valueIsInItems: boolean = useMemo(() => {\n            if (typeof value === \"undefined\") {\n                return false;\n            }\n            return items.some((item) =>\n                typeof item === \"string\"\n                    ? item === value\n                    : item.value === value,\n            );\n        }, [value, items]);\n\n        /// Valg av <option>\n\n        const [selectedValue, setSelectedValue] = useState<string>(\n            valueIsInItems && value !== undefined ? value : \"\",\n        );\n        const hasSelectedValue = selectedValue !== \"\";\n        const selectedValueLabel = useMemo(\n            () =>\n                visibleItems.find((item) => item.value === selectedValue)\n                    ?.label || defaultPrompt,\n            [visibleItems, selectedValue, defaultPrompt],\n        );\n\n        const selectRef = useRef<HTMLSelectElement | null>(null);\n        // Hjelpefunksjon som gjør det enklere å forwarde refen og å bruke den selv internt\n        const unifiedSelectRef = useCallback(\n            (instance: HTMLSelectElement | null) => {\n                selectRef.current = instance;\n                if (forwardedSelectRef) {\n                    if (typeof forwardedSelectRef === \"function\") {\n                        forwardedSelectRef(instance);\n                    } else {\n                        forwardedSelectRef.current = instance;\n                    }\n                }\n                if (instance) {\n                    setSelectedValue(instance.value);\n                }\n            },\n            [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        }, [value, previousValue, valueIsInItems]);\n\n        const selectOption = useCallback(\n            (item: Option) => {\n                const nextValue = item.value;\n                setSearchValue(\"\");\n                setSelectedValue(nextValue);\n                toggleListVisibility();\n                buttonRef.current?.focus();\n            },\n            [toggleListVisibility],\n        );\n\n        // La komponenten rendre <select> med den valgte verdien før onChange trigges, slik at\n        // react-hook-form@>7.41.1 behandler feltet som at det har en verdi.\n        const previousSelectedValue = usePreviousValue(selectedValue);\n        useEffect(() => {\n            // previousSelectedValue er undefined på første render, men da vil vi ikke ha en onChange uansett\n            if (\n                typeof previousSelectedValue === \"undefined\" ||\n                previousSelectedValue === selectedValue ||\n                selectedValue === value\n            ) {\n                return;\n            }\n            if (onChange) {\n                onChange({\n                    type: \"change\",\n                    target: { name, value: selectedValue },\n                });\n            }\n            if (selectRef.current) {\n                selectRef.current.dispatchEvent(\n                    new Event(\"change\", { bubbles: true }),\n                );\n            }\n        }, [onChange, name, value, selectedValue, previousSelectedValue]);\n\n        /// Fokushåndtering\n\n        const componentRootElementRef = useRef<HTMLDivElement>(null);\n        const focusInsideRef = useRef(false);\n        const searchFieldRef = useRef<HTMLInputElement>(null);\n        const buttonRef = useRef<HTMLButtonElement>(null);\n\n        const dropdownRef = useRef<HTMLDivElement | null>(null);\n        // Lagrer listbox-elementet i state slik at downstream-hooks\n        // (f.eks. `useListNavigation`) kan re-feste listeneren idet\n        // `FloatingPortal` mounter listen.\n        const [listboxEl, setListboxEl] = useState<HTMLDivElement | null>(null);\n\n        // Listen rendres i en `FloatingPortal` som monteres via en\n        // `useLayoutEffect` + `setState` i floating-ui. Refen er derfor\n        // ikke tilgjengelig før i en senere render. Vi bruker en\n        // callback-ref for å plassere fokus på valgt option idet listen\n        // faktisk er i DOM-en. Refen holdes stabil (tom dependency-list)\n        // slik at en endring i `selectedValue`/`isSearchable` ikke får\n        // React til å avmontere/remontere refen og dermed flytte fokus\n        // mens menyen er åpen — vi leser siste verdier via refs.\n        const isSearchableRef = useRef(isSearchable);\n        const selectedValueRef = useRef(selectedValue);\n        useEffect(() => {\n            isSearchableRef.current = isSearchable;\n            selectedValueRef.current = selectedValue;\n        });\n\n        const setDropdownRef = useCallback((node: HTMLDivElement | null) => {\n            dropdownRef.current = node;\n            setListboxEl(node);\n            if (node && !isSearchableRef.current) {\n                // Popover skjules med `visibility: hidden` til\n                // floating-ui har regnet ut første posisjon. Defer\n                // fokus til etter neste paint, slik at vi ikke flytter\n                // fokus til et usynlig element (kan gi manglende\n                // fokusindikator i enkelte nettlesere).\n                requestAnimationFrame(() => {\n                    if (dropdownRef.current === node) {\n                        focusSelected(node, selectedValueRef.current);\n                    }\n                });\n            }\n        }, []);\n\n        // Søkbart felt og knappen som får fokus ved lukking lever i hoved-\n        // DOM-en, så for de tilfellene holder en useEffect.\n        const wasShown = usePreviousValue(dropdownIsShown);\n        useEffect(() => {\n            if (dropdownIsShown === wasShown) return;\n            if (dropdownIsShown && isSearchable) {\n                searchFieldRef.current?.focus();\n            } else if (\n                !dropdownIsShown &&\n                focusInsideRef.current &&\n                buttonRef.current\n            ) {\n                buttonRef.current.focus();\n            }\n        }, [dropdownIsShown, wasShown, isSearchable]);\n\n        useListNavigation({ element: listboxEl });\n\n        const close = useCallback(() => {\n            if (isSearchable) {\n                setSearchValue(\"\");\n            }\n            if (onBlur) {\n                onBlur({\n                    type: \"blur\",\n                    target: { name, value: selectedValue },\n                });\n                selectRef.current?.dispatchEvent(\n                    new Event(\"focusout\", { bubbles: true }),\n                );\n            }\n            focusInsideRef.current = false;\n            setShown(false);\n        }, [onBlur, isSearchable, name, selectedValue]);\n\n        const handleBlur = useCallback(\n            (e: FocusEvent<HTMLButtonElement | HTMLInputElement>) => {\n                const componentRootElement = componentRootElementRef.current;\n                const dropdownElement = dropdownRef.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                // Dropdown rendres i en portal, så vi må sjekke begge trærne\n                // for å avgjøre om fokus blir værende inne i komponenten.\n                const nextFocusIsInsideComponent =\n                    componentRootElement?.contains(e.relatedTarget as Node) ||\n                    dropdownElement?.contains(e.relatedTarget as Node);\n                if (!nextFocusIsInsideComponent) {\n                    close();\n                }\n            },\n            [close],\n        );\n\n        const handleFocus = useCallback(() => {\n            if (!focusInsideRef.current) {\n                if (onFocus) {\n                    onFocus({\n                        type: \"change\",\n                        target: { name, value: selectedValue },\n                    });\n                }\n                focusInsideRef.current = true;\n            }\n        }, [onFocus, selectedValue, name]);\n\n        const handleMouseOver = useCallback(\n            (e: MouseEvent<HTMLButtonElement>) => {\n                // Ved mouseOver på options flytter vi fokus til dem for å unngå \"dobbel fokus\"\n                // der det ser ut som to forskjellige elementer er fokusert/hovered samtidig\n                (e.target as HTMLButtonElement).focus({ preventScroll: true });\n            },\n            [],\n        );\n\n        // Handle focus and blur of hidden select element\n        useEffect(() => {\n            const select = selectRef.current;\n            if (!select) return;\n\n            const onSelectFocus = () => {\n                if (showSearchInputField) {\n                    searchFieldRef.current?.focus();\n                } else {\n                    buttonRef.current?.focus();\n                }\n            };\n            const onSelectBlur = (ev: globalThis.FocusEvent) => {\n                // Les refs ved hvert kall slik at vi alltid sjekker mot\n                // siste listbox-element — den portalerte listen kan ha\n                // mountet etter at denne effekten ble satt opp.\n                const target = ev.relatedTarget as Node | null;\n                const insideComponent =\n                    componentRootElementRef.current?.contains(target);\n                const insideDropdown = dropdownRef.current?.contains(target);\n                if (insideComponent || insideDropdown) {\n                    ev.preventDefault();\n                }\n            };\n\n            select.addEventListener(\"focus\", onSelectFocus);\n            select.addEventListener(\"blur\", onSelectBlur);\n            return () => {\n                select.removeEventListener(\"focus\", onSelectFocus);\n                select.removeEventListener(\"blur\", onSelectBlur);\n            };\n        }, [showSearchInputField]);\n\n        /// Tastaturnavigasjon\n\n        // Add support for opening dropdown with arrowkey down as expected from native select\n        // onKeyDown to stop ArrowDown from scrolling the page\n        const handleOnKeyDown = useCallback(\n            (e: KeyboardEvent<HTMLButtonElement>) => {\n                if (\n                    (e.key === \"ArrowDown\" || e.key === \" \") &&\n                    !dropdownIsShown\n                ) {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setShown(true);\n                } else if (e.key === \"Escape\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setShown(false);\n                }\n            },\n            [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            [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(\n                            '[role=\"option\"]:not([hidden])',\n                        );\n                        if (\n                            e.currentTarget.id === firstVisible?.id &&\n                            searchFieldRef.current\n                        ) {\n                            searchFieldRef.current.focus();\n                        }\n                    }\n                }\n            },\n            [],\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        }, [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=\"\" />{\" \"}\n                    {/* Tom option må være et valg, ellers vil <select> alltid ha en value */}\n                    {visibleItems.map((item) => (\n                        <option\n                            key={`${listId}-opt-${item.value}`}\n                            hidden={!item.visible}\n                            value={item.value}\n                        >\n                            {item.label}\n                        </option>\n                    ))}\n                </select>\n                <InputGroup\n                    ref={componentRootElementRef}\n                    data-testid=\"jkl-select\"\n                    className={clsx(\"jkl-select\", className, {\n                        \"jkl-select--inline\": inline,\n                        \"jkl-select--open\":\n                            dropdownIsShown &&\n                            visibleItems.some((item) => item.visible),\n                        \"jkl-select--no-value\": !hasSelectedValue,\n                        \"jkl-select--invalid\": !!errorLabel || invalid,\n                    })}\n                    tooltip={\n                        tooltip && React.isValidElement<PopupTipProps>(tooltip)\n                            ? React.cloneElement(tooltip, {\n                                  triggerProps: {\n                                      ...tooltip.props.triggerProps,\n                                      onFocus: (\n                                          e: FocusEvent<HTMLButtonElement>,\n                                      ) => {\n                                          tooltip.props.triggerProps?.onFocus?.(\n                                              e,\n                                          );\n                                          close();\n                                      },\n                                  },\n                              })\n                            : null\n                    }\n                    {...rest}\n                    id={isSearchable ? searchInputId : buttonId}\n                    style={style}\n                    label={label}\n                    labelProps={{\n                        id: labelId,\n                        srOnly: inline,\n                        ...labelProps,\n                        htmlFor: isSearchable ? searchInputId : buttonId,\n                    }}\n                    helpLabel={helpLabel}\n                    errorLabel={errorLabel}\n                    render={({\n                        \"aria-invalid\": ariaInvalid,\n                        ...inputProps\n                    }) => {\n                        // Lista vises kun når dropdown er åpnet *og* det\n                        // finnes minst ett synlig valg. `aria-expanded` på\n                        // trigger og combobox må følge samme boolean for\n                        // ikke å lyve om popoverens tilstand.\n                        const isPopoverOpen =\n                            dropdownIsShown &&\n                            visibleItems.some((item) => item.visible);\n                        return (\n                            <Popover\n                                open={isPopoverOpen}\n                                placement=\"bottom-start\"\n                                offset={0}\n                                modal={false}\n                                onPlacementChange={handlePlacementChange}\n                                matchReferenceWidth\n                                clickOptions={{ enabled: false }}\n                                dismissOptions={{ enabled: false }}\n                                roleOptions={{ enabled: false }}\n                            >\n                                <Popover.Trigger asChild>\n                                    <div\n                                        className=\"jkl-select__outer-wrapper\"\n                                        data-popover-placement={\n                                            popoverPlacement\n                                        }\n                                        style={{ width }}\n                                    >\n                                        {isSearchable && (\n                                            <input\n                                                {...inputProps}\n                                                aria-invalid={ariaInvalid}\n                                                id={searchInputId}\n                                                hidden={!showSearchInputField}\n                                                ref={searchFieldRef}\n                                                placeholder=\"Søk\"\n                                                value={searchValue}\n                                                onChange={(e) =>\n                                                    setSearchValue(\n                                                        e.target.value,\n                                                    )\n                                                }\n                                                data-testid=\"jkl-select__search-input\"\n                                                className=\"jkl-select__search-input\"\n                                                aria-autocomplete=\"list\"\n                                                aria-activedescendant={\n                                                    isPopoverOpen &&\n                                                    hasSelectedValue\n                                                        ? `${listId}__${toLower(\n                                                              selectedValue,\n                                                          )}`\n                                                        : undefined\n                                                }\n                                                aria-controls={\n                                                    isPopoverOpen\n                                                        ? listId\n                                                        : undefined\n                                                }\n                                                aria-expanded={isPopoverOpen}\n                                                role=\"combobox\"\n                                                onKeyDown={\n                                                    handleSearchOnKeyDown\n                                                }\n                                                onBlur={handleBlur}\n                                                onFocus={handleFocus}\n                                                onClick={(e) => {\n                                                    e.stopPropagation();\n                                                }}\n                                            />\n                                        )}\n                                        {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}\n                                        <button\n                                            // Nei dette er ikke i henhold til speccen, men VoiceOver leser den likevel og det er oppførselen vi ønsker\n                                            aria-invalid={ariaInvalid}\n                                            {...inputProps}\n                                            id={buttonId}\n                                            ref={buttonRef}\n                                            hidden={showSearchInputField}\n                                            type=\"button\"\n                                            name={`${name}-btn`}\n                                            className={clsx(\n                                                \"jkl-select__button\",\n                                                {\n                                                    \"jkl-select__button--active-value\":\n                                                        !!selectedValue,\n                                                },\n                                            )}\n                                            data-testid=\"jkl-select__button\"\n                                            aria-label={`${\n                                                selectedValueLabel || \"Velg\"\n                                            },${label}`}\n                                            aria-expanded={isPopoverOpen}\n                                            aria-controls={\n                                                isPopoverOpen\n                                                    ? listId\n                                                    : undefined\n                                            }\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                                        <ArrowVerticalAnimated\n                                            variant=\"medium\"\n                                            pointingDown={!isPopoverOpen}\n                                            className=\"jkl-select__arrow\"\n                                        />\n                                    </div>\n                                </Popover.Trigger>\n                                <Popover.Content\n                                    initialFocus={-1}\n                                    returnFocus={false}\n                                    className=\"jkl-select__popover\"\n                                >\n                                    <div\n                                        id={listId}\n                                        ref={setDropdownRef}\n                                        // biome-ignore lint/a11y/useSemanticElements: Vi reimplementerer select\n                                        role=\"listbox\"\n                                        className=\"jkl-select__options-menu\"\n                                        data-popover-placement={\n                                            popoverPlacement\n                                        }\n                                        aria-labelledby={labelId}\n                                        tabIndex={-1}\n                                        data-focus=\"controlled\" // lar oss styre markering av valg vha focus\n                                        style={\n                                            {\n                                                \"--jkl-select-max-shown-options\":\n                                                    maxShownOptions,\n                                            } as CSSProperties\n                                        }\n                                    >\n                                        {visibleItems.map((item, i) =>\n                                            // Det er viktig at vi _fjerner_ elementer som ikke er synlige fra DOMen for at tastaturnavigasjon skal fungere.\n                                            // For eksempel, hvis vi har elementene Apple, Samsung og LG i den rekkefølgen og søker etter \"l\"\n                                            // vil Samsung ikke synes. Om vi bare setter hidden-attributtet på Samsung vil ArrowDown fra Apple ikke fungere.\n                                            // Dette lar seg ikke gjenskape i en enhetstest med JSDOM + user-events, og Cypress lukker Select\n                                            // ved første {downArrow} ¯\\_(ツ)_/¯. Så please test scenariet over manuelt om dette skaper trøbbel for deg.\n                                            item.visible ? (\n                                                <button\n                                                    key={`${listId}-${item.value}`}\n                                                    hidden={!item.visible}\n                                                    type=\"button\"\n                                                    id={`${listId}__${toLower(\n                                                        item.value,\n                                                    )}`}\n                                                    className=\"jkl-select__option\"\n                                                    data-testid=\"jkl-select__option\"\n                                                    aria-selected={\n                                                        item.value ===\n                                                        selectedValue\n                                                    }\n                                                    // biome-ignore lint/a11y/useSemanticElements: Vi reimplementerer select\n                                                    role=\"option\"\n                                                    value={item.value}\n                                                    data-testautoid={`jkl-select__option-${i}`}\n                                                    onBlur={handleBlur}\n                                                    onFocus={handleFocus}\n                                                    onKeyDown={\n                                                        handleOptionOnKeyDown\n                                                    }\n                                                    onClick={(e) => {\n                                                        e.preventDefault();\n                                                        selectOption(item);\n                                                    }}\n                                                    onMouseOver={\n                                                        handleMouseOver\n                                                    }\n                                                >\n                                                    {item.label}\n                                                    {item.description ? (\n                                                        <span className=\"jkl-select__option-description\">\n                                                            {item.description}\n                                                        </span>\n                                                    ) : null}\n                                                </button>\n                                            ) : null,\n                                        )}\n                                    </div>\n                                </Popover.Content>\n                            </Popover>\n                        );\n                    }}\n                />\n            </>\n        );\n    },\n);\n\nSelect.displayName = \"Select\";\n"],"names":["noop","Select","forwardRef","props","forwardedSelectRef","id","name","items","value","label","labelProps","onChange","onBlur","onFocus","className","helpLabel","errorLabel","invalid","searchable","inline","defaultPrompt","width","maxShownOptions","style","tooltip","rest","listId","useId","generateSuffix","labelId","buttonId","searchInputId","dropdownIsShown","setShown","useState","toggleListVisibility","useCallback","previousValue","popoverPlacement","setPopoverPlacement","handlePlacementChange","p","startsWith","isSearchable","showSearchInputField","searchValue","setSearchValue","searchFn","item","toLowerCase","includes","visibleItems","useMemo","map","getValuePair","visible","valueIsInItems","some","selectedValue","setSelectedValue","hasSelectedValue","selectedValueLabel","find","selectRef","useRef","unifiedSelectRef","instance","current","usePreviousValue","useEffect","selectOption","nextValue","buttonRef","focus","previousSelectedValue","type","target","dispatchEvent","Event","bubbles","componentRootElementRef","focusInsideRef","searchFieldRef","dropdownRef","listboxEl","setListboxEl","isSearchableRef","selectedValueRef","setDropdownRef","node","requestAnimationFrame","focusSelected","wasShown","useListNavigation","element","close","handleBlur","e","componentRootElement","dropdownElement","contains","relatedTarget","handleFocus","handleMouseOver","preventScroll","select","onSelectFocus","onSelectBlur","ev","insideComponent","insideDropdown","preventDefault","addEventListener","removeEventListener","handleOnKeyDown","key","stopPropagation","handleSearchOnKeyDown","listElement","shiftKey","handleOptionOnKeyDown","currentTarget","firstVisible","querySelector","handleEscape","window","jsxs","Fragment","children","tabIndex","ref","jsx","hidden","InputGroup","clsx","React","isValidElement","cloneElement","triggerProps","srOnly","htmlFor","render","ariaInvalid","inputProps","isPopoverOpen","Popover","open","placement","offset","modal","onPlacementChange","matchReferenceWidth","clickOptions","enabled","dismissOptions","roleOptions","Trigger","asChild","placeholder","toLower","role","onKeyDown","onClick","onMouseDown","ArrowVerticalAnimated","variant","pointingDown","Content","initialFocus","returnFocus","i","onMouseOver","description","displayName"],"mappings":"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"}