@fremtind/jokul 0.64.1 → 0.66.0

package/build/cjs/components/select/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    CSSProperties,\n    FocusEvent,\n    forwardRef,\n    KeyboardEvent,\n    MouseEvent,\n    RefObject,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useListNavigation } from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport { usePreviousValue } from \"../../hooks/usePreviousValue/usePreviousValue.js\";\nimport { getValuePair, ValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport type { PopupTipProps } from \"../tooltip/types.js\";\nimport { focusSelected, toLower } from \"./select-utils.js\";\nimport { 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            density,\n            width,\n            maxShownOptions = 5,\n            style,\n            tooltip,\n            ...rest\n        } = props;\n\n        const listId = useId(id || \"jkl-select\", { generateSuffix: !id });\n        const labelId = `${listId}_label`;\n        const buttonId = `${listId}_button`;\n        const searchInputId = `${listId}_search-input`;\n\n        const [dropdownIsShown, setShown] = useState(false);\n        const toggleListVisibility = useCallback(() => {\n            setShown((previousValue) => !previousValue);\n        }, []);\n\n        /// Søk\n\n        const isSearchable = Boolean(searchable);\n        const showSearchInputField = isSearchable && dropdownIsShown;\n        const [searchValue, setSearchValue] = useState(\"\");\n        const searchFn = useCallback(\n            (item: ValuePair) => {\n                if (\n                    item.label.toLowerCase().includes(searchValue.toLowerCase())\n                ) {\n                    return true;\n                }\n\n                if (typeof searchable === \"function\") {\n                    return searchable(searchValue, item);\n                }\n\n                return false;\n            },\n            [searchable, searchValue],\n        );\n        const visibleItems: Option[] = useMemo(\n            () =>\n                items.map(getValuePair).map((item) => {\n                    const visible =\n                        !isSearchable || searchValue === \"\" || searchFn(item);\n                    return { ...item, visible };\n                }),\n            [items, isSearchable, searchValue, searchFn],\n        );\n        const valueIsInItems: boolean = useMemo(() => {\n            if (typeof value === \"undefined\") {\n                return false;\n            }\n            return items.some((item) =>\n                typeof item === \"string\"\n                    ? item === value\n                    : item.value === value,\n            );\n        }, [value, items]);\n\n        /// Valg av <option>\n\n        const [selectedValue, setSelectedValue] = useState<string>(\n            valueIsInItems && value !== undefined ? value : \"\",\n        );\n        const hasSelectedValue = selectedValue !== \"\";\n        const selectedValueLabel = useMemo(\n            () =>\n                visibleItems.find((item) => item.value === selectedValue)\n                    ?.label || defaultPrompt,\n            [visibleItems, selectedValue, defaultPrompt],\n        );\n\n        const selectRef = useRef<HTMLSelectElement | null>(null);\n        // Hjelpefunksjon som gjør det enklere å forwarde refen og å bruke den selv internt\n        const unifiedSelectRef = useCallback(\n            (instance: HTMLSelectElement | null) => {\n                selectRef.current = instance;\n                if (forwardedSelectRef) {\n                    if (typeof forwardedSelectRef === \"function\") {\n                        forwardedSelectRef(instance);\n                    } else {\n                        forwardedSelectRef.current = instance;\n                    }\n                }\n                if (instance) {\n                    setSelectedValue(instance.value);\n                }\n            },\n            [selectRef, forwardedSelectRef],\n        );\n\n        const previousValue = usePreviousValue(value);\n        useEffect(() => {\n            if (value === previousValue) {\n                return;\n            }\n            if (typeof value === \"undefined\" || !valueIsInItems) {\n                setSelectedValue(\"\");\n            } else {\n                setSelectedValue(value);\n            }\n        }, [setSelectedValue, value, previousValue, valueIsInItems]);\n\n        const selectOption = useCallback(\n            (item: Option) => {\n                const nextValue = item.value;\n                setSearchValue(\"\");\n                setSelectedValue(nextValue);\n                toggleListVisibility();\n                buttonRef.current?.focus();\n            },\n            [setSearchValue, setSelectedValue, toggleListVisibility],\n        );\n\n        // La komponenten rendre <select> med den valgte verdien før onChange trigges, slik at\n        // react-hook-form@>7.41.1 behandler feltet som at det har en verdi.\n        const previousSelectedValue = usePreviousValue(selectedValue);\n        useEffect(() => {\n            // previousSelectedValue er undefined på første render, men da vil vi ikke ha en onChange uansett\n            if (\n                typeof previousSelectedValue === \"undefined\" ||\n                previousSelectedValue === selectedValue ||\n                selectedValue === value\n            ) {\n                return;\n            }\n            if (onChange) {\n                onChange({\n                    type: \"change\",\n                    target: { name, value: selectedValue },\n                });\n            }\n            if (selectRef.current) {\n                selectRef.current.dispatchEvent(\n                    new Event(\"change\", { bubbles: true }),\n                );\n            }\n        }, [onChange, name, value, selectedValue, previousSelectedValue]);\n\n        /// Fokushåndtering\n\n        const componentRootElementRef = useRef<HTMLDivElement>(null);\n        const focusInsideRef = useRef(false);\n        const searchFieldRef = useRef<HTMLInputElement>(null);\n        const buttonRef = useRef<HTMLButtonElement>(null);\n\n        const handleFocusPlacement = useCallback(\n            (isOpen: boolean, ref: RefObject<HTMLElement>) => {\n                if (isOpen && !isSearchable) {\n                    const listElement = ref.current;\n                    if (listElement) {\n                        focusSelected(listElement, selectedValue);\n                    }\n                } else if (isOpen) {\n                    if (searchFieldRef.current) {\n                        searchFieldRef.current.focus();\n                    }\n                } else {\n                    if (focusInsideRef.current && buttonRef.current) {\n                        buttonRef.current.focus();\n                    }\n                }\n            },\n            [isSearchable, selectedValue],\n        );\n\n        const [dropdownRef] = useAnimatedHeight<HTMLDivElement>(\n            dropdownIsShown,\n            {\n                onFirstVisible: handleFocusPlacement,\n                onTransitionEnd: handleFocusPlacement,\n            },\n        );\n\n        useListNavigation({ ref: dropdownRef });\n\n        const close = useCallback(() => {\n            if (isSearchable) {\n                setSearchValue(\"\");\n            }\n            if (onBlur) {\n                onBlur({\n                    type: \"blur\",\n                    target: { name, value: selectedValue },\n                });\n                selectRef.current?.dispatchEvent(\n                    new Event(\"focusout\", { bubbles: true }),\n                );\n            }\n            focusInsideRef.current = false;\n            setShown(false);\n        }, [\n            onBlur,\n            setSearchValue,\n            setShown,\n            isSearchable,\n            name,\n            selectedValue,\n        ]);\n\n        const handleBlur = useCallback(\n            (e: FocusEvent<HTMLButtonElement | HTMLInputElement>) => {\n                const componentRootElement = componentRootElementRef.current;\n                // There are known issues in Firefox when using \"relatedTarget\" in onBlur events:\n                // https://github.com/facebook/react/issues/2011\n                // This might be fixed in react 17. Se issue above.\n                const nextFocusIsInsideComponent =\n                    componentRootElement &&\n                    componentRootElement.contains(e.relatedTarget as Node);\n                if (!nextFocusIsInsideComponent) {\n                    close();\n                }\n            },\n            [close],\n        );\n\n        const handleFocus = useCallback(() => {\n            if (!focusInsideRef.current) {\n                if (onFocus) {\n                    onFocus({\n                        type: \"change\",\n                        target: { name, value: selectedValue },\n                    });\n                }\n                focusInsideRef.current = true;\n            }\n        }, [onFocus, selectedValue, name]);\n\n        const handleMouseOver = useCallback(\n            (e: MouseEvent<HTMLButtonElement>) => {\n                // Ved mouseOver på options flytter vi fokus til dem for å unngå \"dobbel fokus\"\n                // der det ser ut som to forskjellige elementer er fokusert/hovered samtidig\n                (e.target as HTMLButtonElement).focus({ preventScroll: true });\n            },\n            [],\n        );\n\n        // Handle focus and blur of hidden select element\n        useEffect(() => {\n            const select = selectRef.current;\n            const searchField = searchFieldRef.current;\n            const button = buttonRef.current;\n            const componentRootElement = componentRootElementRef.current;\n\n            select?.addEventListener(\"focus\", () => {\n                showSearchInputField ? searchField?.focus() : button?.focus();\n            });\n            select?.addEventListener(\"blur\", function (this, ev) {\n                componentRootElement &&\n                    componentRootElement.contains(ev.relatedTarget as Node) &&\n                    ev.preventDefault();\n            });\n\n            return () => {\n                select?.removeEventListener(\"focus\", () => {\n                    showSearchInputField\n                        ? searchField?.focus()\n                        : button?.focus();\n                });\n                select?.removeEventListener(\"blur\", function (this, ev) {\n                    componentRootElement &&\n                        componentRootElement.contains(\n                            ev.relatedTarget as Node,\n                        ) &&\n                        ev.preventDefault();\n                });\n            };\n        }, [showSearchInputField]);\n\n        /// Tastaturnavigasjon\n\n        // Add support for opening dropdown with arrowkey down as expected from native select\n        // onKeyDown to stop ArrowDown from scrolling the page\n        const handleOnKeyDown = useCallback(\n            (e: KeyboardEvent<HTMLButtonElement>) => {\n                if (\n                    (e.key === \"ArrowDown\" || e.key === \" \") &&\n                    !dropdownIsShown\n                ) {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setShown(true);\n                } else if (e.key === \"Escape\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setShown(false);\n                }\n            },\n            [setShown, dropdownIsShown],\n        );\n\n        // onKeyDown to stop ArrowDown from scrolling the page\n        const handleSearchOnKeyDown = useCallback(\n            (e: KeyboardEvent<HTMLInputElement>) => {\n                if (e.key === \"ArrowDown\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n\n                    const listElement = dropdownRef.current;\n                    if (listElement) {\n                        if (isSearchable) {\n                            // Flytt fokus til det første elementet i listen, ikke det forrige valgte.\n                            // Ved endring i filter er det ikke gitt at vi ønsker å ta utgangspunkt i\n                            // den valgte verdien.\n                            focusSelected(listElement, undefined);\n                        } else {\n                            focusSelected(listElement, selectedValue);\n                        }\n                    }\n                } else if (e.key === \"Escape\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setShown(false);\n                } else if (e.key === \"Tab\" && !e.shiftKey) {\n                    const listElement = dropdownRef.current;\n                    if (listElement) {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        focusSelected(listElement, selectedValue);\n                    }\n                } else if (e.key === \"Enter\" && dropdownIsShown) {\n                    // Should not propagate Enter keyevent because form might submit\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n            },\n            [\n                setShown,\n                dropdownRef,\n                selectedValue,\n                isSearchable,\n                dropdownIsShown,\n            ],\n        );\n\n        // onKeyDown so this Tab listener isn't triggered by tabbing from search field to option\n        const handleOptionOnKeyDown = useCallback(\n            (e: KeyboardEvent<HTMLButtonElement>) => {\n                if (e.key === \"Tab\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n\n                    if (e.shiftKey && searchFieldRef.current) {\n                        searchFieldRef.current.focus();\n                    } else if (buttonRef.current) {\n                        // Mimic behaviour of Firefox and native select, where Tab selects the current item and closes the menu\n                        setSelectedValue(e.currentTarget.value);\n                        setShown(false);\n                        buttonRef.current.focus();\n                    }\n                } else if (e.key === \"ArrowUp\") {\n                    if (dropdownRef.current && searchFieldRef.current) {\n                        // Can't be based on index since the first item might be filtered out\n                        const firstVisible = dropdownRef.current.querySelector(\n                            '[role=\"option\"]:not([hidden])',\n                        );\n                        if (\n                            e.currentTarget.id === firstVisible?.id &&\n                            searchFieldRef.current\n                        ) {\n                            searchFieldRef.current.focus();\n                        }\n                    }\n                }\n            },\n            [setShown, dropdownRef],\n        );\n\n        // Add support for closing the dropdown with Escape like native select. Unfortunately, Escape does not trigger the button onKeyDown.\n        useEffect(() => {\n            const handleEscape = (e: globalThis.KeyboardEvent) => {\n                if (e.key === \"Escape\" && dropdownIsShown) {\n                    setShown(false);\n                }\n            };\n            if (typeof window !== \"undefined\" && dropdownIsShown) {\n                window.addEventListener(\"keydown\", handleEscape);\n            }\n            return () => {\n                if (typeof window !== \"undefined\") {\n                    window.removeEventListener(\"keydown\", handleEscape);\n                }\n            };\n        }, [setShown, dropdownIsShown]);\n\n        return (\n            <>\n                <select\n                    name={name}\n                    tabIndex={-1}\n                    data-testid=\"jkl-native-select\"\n                    className=\"jkl-sr-only\"\n                    aria-hidden\n                    ref={unifiedSelectRef}\n                    value={selectedValue}\n                    onChange={noop} // React complains unless we give an onChange handler. This is technically a read-only field, but readOnly isn't an option here.\n                >\n                    <option value=\"\"></option>{\" \"}\n                    {/* Tom option må være et valg, ellers vil <select> alltid ha en value */}\n                    {visibleItems.map((item) => (\n                        <option\n                            key={`${listId}-opt-${item.value}`}\n                            hidden={!item.visible}\n                            value={item.value}\n                        >\n                            {item.label}\n                        </option>\n                    ))}\n                </select>\n                <InputGroup\n                    ref={componentRootElementRef}\n                    data-testid=\"jkl-select\"\n                    className={clsx(\"jkl-select\", className, {\n                        \"jkl-select--inline\": inline,\n                        \"jkl-select--open\":\n                            dropdownIsShown &&\n                            visibleItems.some((item) => item.visible),\n                        \"jkl-select--no-value\": !hasSelectedValue,\n                        \"jkl-select--invalid\": !!errorLabel || invalid,\n                    })}\n                    tooltip={\n                        tooltip && React.isValidElement<PopupTipProps>(tooltip)\n                            ? React.cloneElement(tooltip, {\n                                  triggerProps: {\n                                      ...tooltip.props.triggerProps,\n                                      onFocus: (\n                                          e: FocusEvent<HTMLButtonElement>,\n                                      ) => {\n                                          tooltip.props.triggerProps?.onFocus?.(\n                                              e,\n                                          );\n                                          close();\n                                      },\n                                  },\n                              })\n                            : null\n                    }\n                    {...rest}\n                    id={isSearchable ? searchInputId : buttonId}\n                    style={\n                        {\n                            [\"--jkl-select-max-shown-options\"]: maxShownOptions,\n                            ...style,\n                        } as CSSProperties\n                    }\n                    density={density}\n                    label={label}\n                    labelProps={{\n                        id: labelId,\n                        srOnly: inline,\n                        ...labelProps,\n                        htmlFor: isSearchable ? searchInputId : buttonId,\n                    }}\n                    helpLabel={helpLabel}\n                    errorLabel={errorLabel}\n                    render={({\n                        \"aria-invalid\": ariaInvalid,\n                        ...inputProps\n                    }) => (\n                        <div\n                            className=\"jkl-select__outer-wrapper\"\n                            style={{ width }}\n                        >\n                            {isSearchable && (\n                                <input\n                                    {...inputProps}\n                                    aria-invalid={ariaInvalid}\n                                    id={searchInputId}\n                                    hidden={!showSearchInputField}\n                                    ref={searchFieldRef}\n                                    placeholder=\"Søk\"\n                                    value={searchValue}\n                                    onChange={(e) =>\n                                        setSearchValue(e.target.value)\n                                    }\n                                    data-testid=\"jkl-select__search-input\"\n                                    className=\"jkl-select__search-input\"\n                                    aria-autocomplete=\"list\"\n                                    aria-activedescendant={\n                                        hasSelectedValue\n                                            ? `${listId}__${toLower(\n                                                  selectedValue,\n                                              )}`\n                                            : undefined\n                                    }\n                                    aria-controls={listId}\n                                    aria-expanded={dropdownIsShown}\n                                    role=\"combobox\"\n                                    onKeyDown={handleSearchOnKeyDown}\n                                    onBlur={handleBlur}\n                                    onFocus={handleFocus}\n                                    onClick={(e) => {\n                                        e.stopPropagation();\n                                    }}\n                                />\n                            )}\n                            {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}\n                            <button\n                                // Nei dette er ikke i henhold til speccen, men VoiceOver leser den likevel og det er oppførselen vi ønsker\n                                aria-invalid={ariaInvalid}\n                                {...inputProps}\n                                id={buttonId}\n                                ref={buttonRef}\n                                hidden={showSearchInputField}\n                                type=\"button\"\n                                name={`${name}-btn`}\n                                className={clsx(\"jkl-select__button\", {\n                                    \"jkl-select__button--active-value\":\n                                        !!selectedValue,\n                                })}\n                                data-testid=\"jkl-select__button\"\n                                aria-label={`${\n                                    selectedValueLabel || \"Velg\"\n                                },${label}`}\n                                aria-expanded={dropdownIsShown}\n                                aria-controls={listId}\n                                onBlur={handleBlur}\n                                onFocus={handleFocus}\n                                onKeyDown={handleOnKeyDown}\n                                onClick={toggleListVisibility}\n                                onMouseDown={(e) => {\n                                    // Workaround for en Safari-bug hvor e.relatedTarget er null i onBlur\n                                    // https://twitter.com/MilesSorce/status/1278762360669265925\n                                    e.preventDefault();\n                                    buttonRef.current?.focus();\n                                }}\n                            >\n                                {selectedValueLabel}\n                            </button>\n                            <div\n                                id={listId}\n                                ref={dropdownRef}\n                                role=\"listbox\"\n                                className=\"jkl-select__options-menu\"\n                                hidden={\n                                    !dropdownIsShown ||\n                                    visibleItems.every((item) => !item.visible)\n                                }\n                                aria-labelledby={labelId}\n                                tabIndex={-1}\n                                data-focus=\"controlled\" // lar oss styre markering av valg vha focus\n                            >\n                                {visibleItems.map((item, i) =>\n                                    // Det er viktig at vi _fjerner_ elementer som ikke er synlige fra DOMen for at tastaturnavigasjon skal fungere.\n                                    // For eksempel, hvis vi har elementene Apple, Samsung og LG i den rekkefølgen og søker etter \"l\"\n                                    // vil Samsung ikke synes. Om vi bare setter hidden-attributtet på Samsung vil ArrowDown fra Apple ikke fungere.\n                                    // Dette lar seg ikke gjenskape i en enhetstest med JSDOM + user-events, og Cypress lukker Select\n                                    // ved første {downArrow} ¯\\_(ツ)_/¯. Så please test scenariet over manuelt om dette skaper trøbbel for deg.\n                                    item.visible ? (\n                                        <button\n                                            key={`${listId}-${item.value}`}\n                                            hidden={!item.visible}\n                                            type=\"button\"\n                                            id={`${listId}__${toLower(\n                                                item.value,\n                                            )}`}\n                                            className=\"jkl-select__option\"\n                                            data-testid=\"jkl-select__option\"\n                                            aria-selected={\n                                                item.value === selectedValue\n                                            }\n                                            role=\"option\"\n                                            value={item.value}\n                                            data-testautoid={`jkl-select__option-${i}`}\n                                            onBlur={handleBlur}\n                                            onFocus={handleFocus}\n                                            onKeyDown={handleOptionOnKeyDown}\n                                            onClick={(e) => {\n                                                e.preventDefault();\n                                                selectOption(item);\n                                            }}\n                                            onMouseOver={handleMouseOver}\n                                        >\n                                            {item.label}\n                                            {item.description ? (\n                                                <span className=\"jkl-select__option-description\">\n                                                    {item.description}\n                                                </span>\n                                            ) : null}\n                                        </button>\n                                    ) : null,\n                                )}\n                            </div>\n                            <ArrowVerticalAnimated\n                                variant=\"medium\"\n                                pointingDown={!dropdownIsShown}\n                                className=\"jkl-select__arrow\"\n                            />\n                        </div>\n                    )}\n                />\n            </>\n        );\n    },\n);\n\nSelect.displayName = \"Select\";\n"],"names":["noop","Select","forwardRef","props","forwardedSelectRef","id","name","items","value","label","labelProps","onChange","onBlur","onFocus","className","helpLabel","errorLabel","invalid","searchable","inline","defaultPrompt","density","width","maxShownOptions","style","tooltip","rest","listId","useId","generateSuffix","labelId","buttonId","searchInputId","dropdownIsShown","setShown","useState","toggleListVisibility","useCallback","previousValue","isSearchable","showSearchInputField","searchValue","setSearchValue","searchFn","item","toLowerCase","includes","visibleItems","useMemo","map","getValuePair","visible","valueIsInItems","some","selectedValue","setSelectedValue","hasSelectedValue","selectedValueLabel","_a","find","selectRef","useRef","unifiedSelectRef","instance","current","usePreviousValue","useEffect","selectOption","nextValue","buttonRef","focus","previousSelectedValue","type","target","dispatchEvent","Event","bubbles","componentRootElementRef","focusInsideRef","searchFieldRef","handleFocusPlacement","isOpen","ref","listElement","focusSelected","dropdownRef","useAnimatedHeight","onFirstVisible","onTransitionEnd","useListNavigation","close","handleBlur","e","componentRootElement","contains","relatedTarget","handleFocus","handleMouseOver","preventScroll","select","searchField","button","addEventListener","ev","preventDefault","removeEventListener","handleOnKeyDown","key","stopPropagation","handleSearchOnKeyDown","shiftKey","handleOptionOnKeyDown","currentTarget","firstVisible","querySelector","handleEscape","window","jsxs","Fragment","children","tabIndex","jsx","hidden","InputGroup","clsx","React","isValidElement","cloneElement","triggerProps","_b","call","srOnly","htmlFor","render","ariaInvalid","inputProps","placeholder","toLower","role","onKeyDown","onClick","onMouseDown","every","i","onMouseOver","description","ArrowVerticalAnimated","variant","pointingDown","displayName"],"mappings":"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"}
+{"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    type RefObject,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useListNavigation } from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport { usePreviousValue } from \"../../hooks/usePreviousValue/usePreviousValue.js\";\nimport { type ValuePair, getValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup } from \"../input-group/InputGroup.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            density,\n            width,\n            maxShownOptions = 5,\n            style,\n            tooltip,\n            ...rest\n        } = props;\n\n        const listId = useId(id || \"jkl-select\", { generateSuffix: !id });\n        const labelId = `${listId}_label`;\n        const buttonId = `${listId}_button`;\n        const searchInputId = `${listId}_search-input`;\n\n        const [dropdownIsShown, setShown] = useState(false);\n        const toggleListVisibility = useCallback(() => {\n            setShown((previousValue) => !previousValue);\n        }, []);\n\n        /// Søk\n\n        const isSearchable = Boolean(searchable);\n        const showSearchInputField = isSearchable && dropdownIsShown;\n        const [searchValue, setSearchValue] = useState(\"\");\n        const searchFn = useCallback(\n            (item: ValuePair) => {\n                if (\n                    item.label.toLowerCase().includes(searchValue.toLowerCase())\n                ) {\n                    return true;\n                }\n\n                if (typeof searchable === \"function\") {\n                    return searchable(searchValue, item);\n                }\n\n                return false;\n            },\n            [searchable, searchValue],\n        );\n        const visibleItems: Option[] = useMemo(\n            () =>\n                items.map(getValuePair).map((item) => {\n                    const visible =\n                        !isSearchable || searchValue === \"\" || searchFn(item);\n                    return { ...item, visible };\n                }),\n            [items, isSearchable, searchValue, searchFn],\n        );\n        const valueIsInItems: boolean = useMemo(() => {\n            if (typeof value === \"undefined\") {\n                return false;\n            }\n            return items.some((item) =>\n                typeof item === \"string\"\n                    ? item === value\n                    : item.value === value,\n            );\n        }, [value, items]);\n\n        /// Valg av <option>\n\n        const [selectedValue, setSelectedValue] = useState<string>(\n            valueIsInItems && value !== undefined ? value : \"\",\n        );\n        const hasSelectedValue = selectedValue !== \"\";\n        const selectedValueLabel = useMemo(\n            () =>\n                visibleItems.find((item) => item.value === selectedValue)\n                    ?.label || defaultPrompt,\n            [visibleItems, selectedValue, defaultPrompt],\n        );\n\n        const selectRef = useRef<HTMLSelectElement | null>(null);\n        // Hjelpefunksjon som gjør det enklere å forwarde refen og å bruke den selv internt\n        const unifiedSelectRef = useCallback(\n            (instance: HTMLSelectElement | null) => {\n                selectRef.current = instance;\n                if (forwardedSelectRef) {\n                    if (typeof forwardedSelectRef === \"function\") {\n                        forwardedSelectRef(instance);\n                    } else {\n                        forwardedSelectRef.current = instance;\n                    }\n                }\n                if (instance) {\n                    setSelectedValue(instance.value);\n                }\n            },\n            [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 handleFocusPlacement = useCallback(\n            (isOpen: boolean, ref: RefObject<HTMLElement>) => {\n                if (isOpen && !isSearchable) {\n                    const listElement = ref.current;\n                    if (listElement) {\n                        focusSelected(listElement, selectedValue);\n                    }\n                } else if (isOpen) {\n                    if (searchFieldRef.current) {\n                        searchFieldRef.current.focus();\n                    }\n                } else {\n                    if (focusInsideRef.current && buttonRef.current) {\n                        buttonRef.current.focus();\n                    }\n                }\n            },\n            [isSearchable, selectedValue],\n        );\n\n        const [dropdownRef] = useAnimatedHeight<HTMLDivElement>(\n            dropdownIsShown,\n            {\n                onFirstVisible: handleFocusPlacement,\n                onTransitionEnd: handleFocusPlacement,\n            },\n        );\n\n        useListNavigation({ ref: dropdownRef });\n\n        const close = useCallback(() => {\n            if (isSearchable) {\n                setSearchValue(\"\");\n            }\n            if (onBlur) {\n                onBlur({\n                    type: \"blur\",\n                    target: { name, value: selectedValue },\n                });\n                selectRef.current?.dispatchEvent(\n                    new Event(\"focusout\", { bubbles: true }),\n                );\n            }\n            focusInsideRef.current = false;\n            setShown(false);\n        }, [onBlur, isSearchable, name, selectedValue]);\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?.contains(e.relatedTarget as Node);\n                if (!nextFocusIsInsideComponent) {\n                    close();\n                }\n            },\n            [close],\n        );\n\n        const handleFocus = useCallback(() => {\n            if (!focusInsideRef.current) {\n                if (onFocus) {\n                    onFocus({\n                        type: \"change\",\n                        target: { name, value: selectedValue },\n                    });\n                }\n                focusInsideRef.current = true;\n            }\n        }, [onFocus, selectedValue, name]);\n\n        const handleMouseOver = useCallback(\n            (e: MouseEvent<HTMLButtonElement>) => {\n                // Ved mouseOver på options flytter vi fokus til dem for å unngå \"dobbel fokus\"\n                // der det ser ut som to forskjellige elementer er fokusert/hovered samtidig\n                (e.target as HTMLButtonElement).focus({ preventScroll: true });\n            },\n            [],\n        );\n\n        // Handle focus and blur of hidden select element\n        useEffect(() => {\n            const select = selectRef.current;\n            const searchField = searchFieldRef.current;\n            const button = buttonRef.current;\n            const componentRootElement = componentRootElementRef.current;\n\n            select?.addEventListener(\"focus\", () => {\n                showSearchInputField ? searchField?.focus() : button?.focus();\n            });\n            select?.addEventListener(\"blur\", function (this, ev) {\n                componentRootElement?.contains(ev.relatedTarget as Node) &&\n                    ev.preventDefault();\n            });\n\n            return () => {\n                select?.removeEventListener(\"focus\", () => {\n                    showSearchInputField\n                        ? searchField?.focus()\n                        : button?.focus();\n                });\n                select?.removeEventListener(\"blur\", function (this, ev) {\n                    componentRootElement?.contains(ev.relatedTarget as Node) &&\n                        ev.preventDefault();\n                });\n            };\n        }, [showSearchInputField]);\n\n        /// Tastaturnavigasjon\n\n        // Add support for opening dropdown with arrowkey down as expected from native select\n        // onKeyDown to stop ArrowDown from scrolling the page\n        const handleOnKeyDown = useCallback(\n            (e: KeyboardEvent<HTMLButtonElement>) => {\n                if (\n                    (e.key === \"ArrowDown\" || e.key === \" \") &&\n                    !dropdownIsShown\n                ) {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setShown(true);\n                } else if (e.key === \"Escape\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setShown(false);\n                }\n            },\n            [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            [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(\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            [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        }, [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={\n                        {\n                            \"--jkl-select-max-shown-options\": maxShownOptions,\n                            ...style,\n                        } as CSSProperties\n                    }\n                    density={density}\n                    label={label}\n                    labelProps={{\n                        id: labelId,\n                        srOnly: inline,\n                        ...labelProps,\n                        htmlFor: isSearchable ? searchInputId : buttonId,\n                    }}\n                    helpLabel={helpLabel}\n                    errorLabel={errorLabel}\n                    render={({\n                        \"aria-invalid\": ariaInvalid,\n                        ...inputProps\n                    }) => (\n                        <div\n                            className=\"jkl-select__outer-wrapper\"\n                            style={{ width }}\n                        >\n                            {isSearchable && (\n                                <input\n                                    {...inputProps}\n                                    aria-invalid={ariaInvalid}\n                                    id={searchInputId}\n                                    hidden={!showSearchInputField}\n                                    ref={searchFieldRef}\n                                    placeholder=\"Søk\"\n                                    value={searchValue}\n                                    onChange={(e) =>\n                                        setSearchValue(e.target.value)\n                                    }\n                                    data-testid=\"jkl-select__search-input\"\n                                    className=\"jkl-select__search-input\"\n                                    aria-autocomplete=\"list\"\n                                    aria-activedescendant={\n                                        hasSelectedValue\n                                            ? `${listId}__${toLower(\n                                                  selectedValue,\n                                              )}`\n                                            : undefined\n                                    }\n                                    aria-controls={listId}\n                                    aria-expanded={dropdownIsShown}\n                                    role=\"combobox\"\n                                    onKeyDown={handleSearchOnKeyDown}\n                                    onBlur={handleBlur}\n                                    onFocus={handleFocus}\n                                    onClick={(e) => {\n                                        e.stopPropagation();\n                                    }}\n                                />\n                            )}\n                            {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}\n                            <button\n                                // Nei dette er ikke i henhold til speccen, men VoiceOver leser den likevel og det er oppførselen vi ønsker\n                                aria-invalid={ariaInvalid}\n                                {...inputProps}\n                                id={buttonId}\n                                ref={buttonRef}\n                                hidden={showSearchInputField}\n                                type=\"button\"\n                                name={`${name}-btn`}\n                                className={clsx(\"jkl-select__button\", {\n                                    \"jkl-select__button--active-value\":\n                                        !!selectedValue,\n                                })}\n                                data-testid=\"jkl-select__button\"\n                                aria-label={`${\n                                    selectedValueLabel || \"Velg\"\n                                },${label}`}\n                                aria-expanded={dropdownIsShown}\n                                aria-controls={listId}\n                                onBlur={handleBlur}\n                                onFocus={handleFocus}\n                                onKeyDown={handleOnKeyDown}\n                                onClick={toggleListVisibility}\n                                onMouseDown={(e) => {\n                                    // Workaround for en Safari-bug hvor e.relatedTarget er null i onBlur\n                                    // https://twitter.com/MilesSorce/status/1278762360669265925\n                                    e.preventDefault();\n                                    buttonRef.current?.focus();\n                                }}\n                            >\n                                {selectedValueLabel}\n                            </button>\n                            <div\n                                id={listId}\n                                ref={dropdownRef}\n                                // biome-ignore lint/a11y/useSemanticElements: Vi reimplementerer select\n                                role=\"listbox\"\n                                className=\"jkl-select__options-menu\"\n                                hidden={\n                                    !dropdownIsShown ||\n                                    visibleItems.every((item) => !item.visible)\n                                }\n                                aria-labelledby={labelId}\n                                tabIndex={-1}\n                                data-focus=\"controlled\" // lar oss styre markering av valg vha focus\n                            >\n                                {visibleItems.map((item, i) =>\n                                    // Det er viktig at vi _fjerner_ elementer som ikke er synlige fra DOMen for at tastaturnavigasjon skal fungere.\n                                    // For eksempel, hvis vi har elementene Apple, Samsung og LG i den rekkefølgen og søker etter \"l\"\n                                    // vil Samsung ikke synes. Om vi bare setter hidden-attributtet på Samsung vil ArrowDown fra Apple ikke fungere.\n                                    // Dette lar seg ikke gjenskape i en enhetstest med JSDOM + user-events, og Cypress lukker Select\n                                    // ved første {downArrow} ¯\\_(ツ)_/¯. Så please test scenariet over manuelt om dette skaper trøbbel for deg.\n                                    item.visible ? (\n                                        <button\n                                            key={`${listId}-${item.value}`}\n                                            hidden={!item.visible}\n                                            type=\"button\"\n                                            id={`${listId}__${toLower(\n                                                item.value,\n                                            )}`}\n                                            className=\"jkl-select__option\"\n                                            data-testid=\"jkl-select__option\"\n                                            aria-selected={\n                                                item.value === selectedValue\n                                            }\n                                            // 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={handleOptionOnKeyDown}\n                                            onClick={(e) => {\n                                                e.preventDefault();\n                                                selectOption(item);\n                                            }}\n                                            onMouseOver={handleMouseOver}\n                                        >\n                                            {item.label}\n                                            {item.description ? (\n                                                <span className=\"jkl-select__option-description\">\n                                                    {item.description}\n                                                </span>\n                                            ) : null}\n                                        </button>\n                                    ) : null,\n                                )}\n                            </div>\n                            <ArrowVerticalAnimated\n                                variant=\"medium\"\n                                pointingDown={!dropdownIsShown}\n                                className=\"jkl-select__arrow\"\n                            />\n                        </div>\n                    )}\n                />\n            </>\n        );\n    },\n);\n\nSelect.displayName = \"Select\";\n"],"names":["noop","Select","forwardRef","props","forwardedSelectRef","id","name","items","value","label","labelProps","onChange","onBlur","onFocus","className","helpLabel","errorLabel","invalid","searchable","inline","defaultPrompt","density","width","maxShownOptions","style","tooltip","rest","listId","useId","generateSuffix","labelId","buttonId","searchInputId","dropdownIsShown","setShown","useState","toggleListVisibility","useCallback","previousValue","isSearchable","showSearchInputField","searchValue","setSearchValue","searchFn","item","toLowerCase","includes","visibleItems","useMemo","map","getValuePair","visible","valueIsInItems","some","selectedValue","setSelectedValue","hasSelectedValue","selectedValueLabel","_a","find","selectRef","useRef","unifiedSelectRef","instance","current","usePreviousValue","useEffect","selectOption","nextValue","buttonRef","focus","previousSelectedValue","type","target","dispatchEvent","Event","bubbles","componentRootElementRef","focusInsideRef","searchFieldRef","handleFocusPlacement","isOpen","ref","listElement","focusSelected","dropdownRef","useAnimatedHeight","onFirstVisible","onTransitionEnd","useListNavigation","close","handleBlur","e","componentRootElement","contains","relatedTarget","handleFocus","handleMouseOver","preventScroll","select","searchField","button","addEventListener","ev","preventDefault","removeEventListener","handleOnKeyDown","key","stopPropagation","handleSearchOnKeyDown","shiftKey","handleOptionOnKeyDown","currentTarget","firstVisible","querySelector","handleEscape","window","jsxs","Fragment","children","tabIndex","jsx","hidden","InputGroup","clsx","React","isValidElement","cloneElement","triggerProps","_b","call","srOnly","htmlFor","render","ariaInvalid","inputProps","placeholder","toLower","role","onKeyDown","onClick","onMouseDown","every","i","onMouseOver","description","ArrowVerticalAnimated","variant","pointingDown","displayName"],"mappings":"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"}

package/build/cjs/components/select/stories/select.stories.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"select.stories.cjs","sources":["../../../../../src/components/select/stories/select.stories.tsx"],"sourcesContent":["import { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { Select } from \"../Select.js\";\nimport \"../styles/_index.scss\";\n\nconst meta: Meta = {\n    title: \"Komponenter/Select\",\n    component: Select,\n    parameters: {\n        layout: \"padded\",\n    },\n    tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Select>;\n\nconst baseArgs = {\n    name: \"Select\",\n    label: \"Hvilket merke er telefonen?\",\n    items: [\n        { value: \"Apple\", label: \"Apple\" },\n        { value: \"Samsung\", label: \"Samsung\" },\n        { value: \"Google\", label: \"Google\" },\n        { value: \"OnePlus\", label: \"OnePlus\" },\n        { value: \"Nokia\", label: \"Nokia\" },\n    ],\n};\n\nexport const SelectStory: Story = {\n    args: baseArgs,\n    render: ({ ...props }) => <Select {...props} />,\n};\n"],"names":["meta","title","component","Select","parameters","layout","tags","SelectStory","args","name","label","items","value","render","props","jsx"],"mappings":"4KAKMA,EAAa,CACfC,MAAO,qBACPC,UAAWC,EAAAA,OACXC,WAAY,CACRC,OAAQ,UAEZC,KAAM,CAAC,aAmBEC,EAAqB,CAC9BC,KAba,CACbC,KAAM,SACNC,MAAO,8BACPC,MAAO,CACH,CAAEC,MAAO,QAASF,MAAO,SACzB,CAAEE,MAAO,UAAWF,MAAO,WAC3B,CAAEE,MAAO,SAAUF,MAAO,UAC1B,CAAEE,MAAO,UAAWF,MAAO,WAC3B,CAAEE,MAAO,QAASF,MAAO,WAM7BG,OAAQ,KAAMC,KAAYC,EAAAA,IAACZ,SAAQ,IAAGW"}
+{"version":3,"file":"select.stories.cjs","sources":["../../../../../src/components/select/stories/select.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { Select } from \"../Select.js\";\nimport \"../styles/_index.scss\";\n\nconst meta: Meta = {\n    title: \"Komponenter/Select\",\n    component: Select,\n    parameters: {\n        layout: \"padded\",\n    },\n    tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Select>;\n\nconst baseArgs = {\n    name: \"Select\",\n    label: \"Hvilket merke er telefonen?\",\n    items: [\n        { value: \"Apple\", label: \"Apple\" },\n        { value: \"Samsung\", label: \"Samsung\" },\n        { value: \"Google\", label: \"Google\" },\n        { value: \"OnePlus\", label: \"OnePlus\" },\n        { value: \"Nokia\", label: \"Nokia\" },\n    ],\n};\n\nexport const SelectStory: Story = {\n    args: baseArgs,\n    render: ({ ...props }) => <Select {...props} />,\n};\n"],"names":["meta","title","component","Select","parameters","layout","tags","SelectStory","args","name","label","items","value","render","props","jsx"],"mappings":"4KAKMA,EAAa,CACfC,MAAO,qBACPC,UAAWC,EAAAA,OACXC,WAAY,CACRC,OAAQ,UAEZC,KAAM,CAAC,aAmBEC,EAAqB,CAC9BC,KAba,CACbC,KAAM,SACNC,MAAO,8BACPC,MAAO,CACH,CAAEC,MAAO,QAASF,MAAO,SACzB,CAAEE,MAAO,UAAWF,MAAO,WAC3B,CAAEE,MAAO,SAAUF,MAAO,UAC1B,CAAEE,MAAO,UAAWF,MAAO,WAC3B,CAAEE,MAAO,QAASF,MAAO,WAM7BG,OAAQ,KAAMC,KAAYC,EAAAA,IAACZ,SAAQ,IAAGW"}

package/build/cjs/components/summary-table/SummaryTable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SummaryTable.cjs","sources":["../../../../src/components/summary-table/SummaryTable.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { FC } from \"react\";\nimport { SummaryTableProps } from \"./types.js\";\n\nexport const SummaryTable: FC<SummaryTableProps> = ({\n    className,\n    caption,\n    header,\n    body,\n    footer,\n    ...rest\n}) => {\n    return (\n        <table {...rest} className={clsx(\"jkl-summary-table\", className)}>\n            {caption && <caption className=\"jkl-sr-only\">{caption}</caption>}\n\n            <thead className=\"jkl-sr-only\">\n                <tr>\n                    {header.map((description, index) => (\n                        <th scope=\"col\" key={index}>\n                            {description}\n                        </th>\n                    ))}\n                </tr>\n            </thead>\n\n            <tbody>{body}</tbody>\n\n            <tfoot>{footer}</tfoot>\n        </table>\n    );\n};\n"],"names":["className","caption","header","body","footer","rest","jsxs","clsx","children","jsx","map","description","index","scope"],"mappings":"kLAImD,EAC/CA,UAAAA,EACAC,QAAAA,EACAC,OAAAA,EACAC,KAAAA,EACAC,OAAAA,KACGC,KAGCC,EAAAA,KAAC,YAAUD,EAAML,UAAWO,EAAAA,KAAK,oBAAqBP,GACjDQ,SAAA,CAAAP,GAAYQ,EAAAA,IAAA,UAAA,CAAQT,UAAU,cAAeQ,SAAQP,UAErD,QAAM,CAAAD,UAAU,cACbQ,SAACC,EAAAA,IAAA,KAAA,CACID,WAAOE,KAAI,CAACC,EAAaC,IACtBH,EAAAA,IAAC,MAAGI,MAAM,MACLL,YADgBI,SAOjCH,EAAAA,IAAC,SAAOD,SAAKL,IAEbM,EAAAA,IAAC,SAAOD,SAAOJ"}
+{"version":3,"file":"SummaryTable.cjs","sources":["../../../../src/components/summary-table/SummaryTable.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport type { SummaryTableProps } from \"./types.js\";\n\nexport const SummaryTable: FC<SummaryTableProps> = ({\n    className,\n    caption,\n    header,\n    body,\n    footer,\n    ...rest\n}) => {\n    return (\n        <table {...rest} className={clsx(\"jkl-summary-table\", className)}>\n            {caption && <caption className=\"jkl-sr-only\">{caption}</caption>}\n\n            <thead className=\"jkl-sr-only\">\n                <tr>\n                    {header.map((description, index) => (\n                        <th scope=\"col\" key={index}>\n                            {description}\n                        </th>\n                    ))}\n                </tr>\n            </thead>\n\n            <tbody>{body}</tbody>\n\n            <tfoot>{footer}</tfoot>\n        </table>\n    );\n};\n"],"names":["className","caption","header","body","footer","rest","jsxs","clsx","children","jsx","map","description","index","scope"],"mappings":"kLAImD,EAC/CA,UAAAA,EACAC,QAAAA,EACAC,OAAAA,EACAC,KAAAA,EACAC,OAAAA,KACGC,KAGCC,EAAAA,KAAC,YAAUD,EAAML,UAAWO,EAAAA,KAAK,oBAAqBP,GACjDQ,SAAA,CAAAP,GAAYQ,EAAAA,IAAA,UAAA,CAAQT,UAAU,cAAeQ,SAAQP,UAErD,QAAM,CAAAD,UAAU,cACbQ,SAACC,EAAAA,IAAA,KAAA,CACID,WAAOE,KAAI,CAACC,EAAaC,IACtBH,EAAAA,IAAC,MAAGI,MAAM,MACLL,YADgBI,SAOjCH,EAAAA,IAAC,SAAOD,SAAKL,IAEbM,EAAAA,IAAC,SAAOD,SAAOJ"}

package/build/cjs/components/summary-table/SummaryTableRow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SummaryTableRow.cjs","sources":["../../../../src/components/summary-table/SummaryTableRow.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { SummaryTableRowProps } from \"./types.js\";\n\nexport const SummaryTableRow: FC<SummaryTableRowProps> = ({\n    className,\n    header,\n    content,\n    ...rest\n}) => {\n    return (\n        <tr {...rest} className={className}>\n            <th scope=\"row\">{header}</th>\n            <td>{content}</td>\n        </tr>\n    );\n};\n"],"names":["className","header","content","rest","jsxs","children","jsx","scope"],"mappings":"6IAGyD,EACrDA,UAAAA,EACAC,OAAAA,EACAC,QAAAA,KACGC,KAGEC,EAAAA,KAAA,KAAA,IAAOD,EAAMH,UAAAA,EACVK,SAAA,CAACC,EAAAA,IAAA,KAAA,CAAGC,MAAM,MAAOF,SAAOJ,IACxBK,EAAAA,IAAC,MAAID,SAAQH"}
+{"version":3,"file":"SummaryTableRow.cjs","sources":["../../../../src/components/summary-table/SummaryTableRow.tsx"],"sourcesContent":["import React, { type FC } from \"react\";\nimport type { SummaryTableRowProps } from \"./types.js\";\n\nexport const SummaryTableRow: FC<SummaryTableRowProps> = ({\n    className,\n    header,\n    content,\n    ...rest\n}) => {\n    return (\n        <tr {...rest} className={className}>\n            <th scope=\"row\">{header}</th>\n            <td>{content}</td>\n        </tr>\n    );\n};\n"],"names":["className","header","content","rest","jsxs","children","jsx","scope"],"mappings":"6IAGyD,EACrDA,UAAAA,EACAC,OAAAA,EACAC,QAAAA,KACGC,KAGEC,EAAAA,KAAA,KAAA,IAAOD,EAAMH,UAAAA,EACVK,SAAA,CAACC,EAAAA,IAAA,KAAA,CAAGC,MAAM,MAAOF,SAAOJ,IACxBK,EAAAA,IAAC,MAAID,SAAQH"}

package/build/cjs/components/summary-table/stories/summary-table.stories.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"summary-table.stories.cjs","sources":["../../../../../src/components/summary-table/stories/summary-table.stories.tsx"],"sourcesContent":["import { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { SummaryTable as SummaryTableComponent } from \"../SummaryTable.js\";\nimport { SummaryTableRow } from \"../SummaryTableRow.js\";\nimport \"../styles/_index.scss\";\n\nconst meta = {\n    title: \"Komponenter/SummaryTable\",\n    component: SummaryTableComponent,\n    parameters: {\n        layout: \"padded\",\n    },\n    tags: [\"autodocs\"],\n} satisfies Meta<typeof SummaryTableComponent>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nconst SOFT_HYPHEN = \"\\u00AD\";\n\nexport const SummaryTable: Story = {\n    args: {\n        caption: \"Example\",\n        header: [\"Product\", \"Price\"],\n        body: (\n            <>\n                <SummaryTableRow\n                    header={`Uføre${SOFT_HYPHEN}pensjon`}\n                    content=\"340,00 kr/mnd\"\n                />\n                <SummaryTableRow\n                    className=\"summary-table-example__custom-row\"\n                    header={`Livs${SOFT_HYPHEN}forsikring`}\n                    content=\"Tatt ut av tilbudet\"\n                />\n                <SummaryTableRow\n                    header={`Innbo${SOFT_HYPHEN}forsikring`}\n                    content=\"122,00 kr/mnd\"\n                />\n                <SummaryTableRow\n                    header={`Reise${SOFT_HYPHEN}forsikring`}\n                    content=\"249,00 kr/mnd\"\n                />\n                <SummaryTableRow\n                    className=\"summary-table-example__custom-row\"\n                    header=\"Rabatt\"\n                    content=\"- 17,50 kr/mnd\"\n                />\n            </>\n        ),\n        footer: (\n            <>\n                <SummaryTableRow header=\"Total sum\" content=\"693,50 kr/mnd\" />\n                <SummaryTableRow\n                    header={\n                        <span className=\"jkl-sr-only\">Total sum per år</span>\n                    }\n                    content=\"8322,50 kr/mnd\"\n                />\n            </>\n        ),\n    },\n};\n"],"names":["meta","title","component","SummaryTableComponent","SummaryTable","parameters","layout","tags","SOFT_HYPHEN","args","caption","header","body","jsxs","Fragment","children","jsx","SummaryTableRow","content","className","footer"],"mappings":"sNAMMA,EAAO,CACTC,MAAO,2BACPC,UAAWC,EAAAC,aACXC,WAAY,CACRC,OAAQ,UAEZC,KAAM,CAAC,aAMLC,EAAc,IAEPJ,EAAsB,CAC/BK,KAAM,CACFC,QAAS,UACTC,OAAQ,CAAC,UAAW,SACpBC,KAEQC,EAAAA,KAAAC,WAAA,CAAAC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,gBAAA,CACGN,OAAQ,QAAQH,WAChBU,QAAQ,kBAEZF,EAAAA,IAACC,EAAAA,gBAAA,CACGE,UAAU,oCACVR,OAAQ,OAAOH,cACfU,QAAQ,wBAEZF,EAAAA,IAACC,EAAAA,gBAAA,CACGN,OAAQ,QAAQH,cAChBU,QAAQ,kBAEZF,EAAAA,IAACC,EAAAA,gBAAA,CACGN,OAAQ,QAAQH,cAChBU,QAAQ,kBAEZF,EAAAA,IAACC,EAAAA,gBAAA,CACGE,UAAU,oCACVR,OAAO,SACPO,QAAQ,sBAIpBE,OAEQP,EAAAA,KAAAC,WAAA,CAAAC,SAAA,CAAAC,EAAAA,IAACC,EAAgBA,gBAAA,CAAAN,OAAO,YAAYO,QAAQ,kBAC5CF,EAAAA,IAACC,EAAAA,gBAAA,CACGN,OACIK,EAAAA,IAAC,OAAK,CAAAG,UAAU,cAAcJ,SAAgB,qBAElDG,QAAQ"}
+{"version":3,"file":"summary-table.stories.cjs","sources":["../../../../../src/components/summary-table/stories/summary-table.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { SummaryTable as SummaryTableComponent } from \"../SummaryTable.js\";\nimport { SummaryTableRow } from \"../SummaryTableRow.js\";\nimport \"../styles/_index.scss\";\n\nconst meta = {\n    title: \"Komponenter/SummaryTable\",\n    component: SummaryTableComponent,\n    parameters: {\n        layout: \"padded\",\n    },\n    tags: [\"autodocs\"],\n} satisfies Meta<typeof SummaryTableComponent>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nconst SOFT_HYPHEN = \"\\u00AD\";\n\nexport const SummaryTable: Story = {\n    args: {\n        caption: \"Example\",\n        header: [\"Product\", \"Price\"],\n        body: (\n            <>\n                <SummaryTableRow\n                    header={`Uføre${SOFT_HYPHEN}pensjon`}\n                    content=\"340,00 kr/mnd\"\n                />\n                <SummaryTableRow\n                    className=\"summary-table-example__custom-row\"\n                    header={`Livs${SOFT_HYPHEN}forsikring`}\n                    content=\"Tatt ut av tilbudet\"\n                />\n                <SummaryTableRow\n                    header={`Innbo${SOFT_HYPHEN}forsikring`}\n                    content=\"122,00 kr/mnd\"\n                />\n                <SummaryTableRow\n                    header={`Reise${SOFT_HYPHEN}forsikring`}\n                    content=\"249,00 kr/mnd\"\n                />\n                <SummaryTableRow\n                    className=\"summary-table-example__custom-row\"\n                    header=\"Rabatt\"\n                    content=\"- 17,50 kr/mnd\"\n                />\n            </>\n        ),\n        footer: (\n            <>\n                <SummaryTableRow header=\"Total sum\" content=\"693,50 kr/mnd\" />\n                <SummaryTableRow\n                    header={\n                        <span className=\"jkl-sr-only\">Total sum per år</span>\n                    }\n                    content=\"8322,50 kr/mnd\"\n                />\n            </>\n        ),\n    },\n};\n"],"names":["meta","title","component","SummaryTableComponent","SummaryTable","parameters","layout","tags","SOFT_HYPHEN","args","caption","header","body","jsxs","Fragment","children","jsx","SummaryTableRow","content","className","footer"],"mappings":"sNAMMA,EAAO,CACTC,MAAO,2BACPC,UAAWC,EAAAC,aACXC,WAAY,CACRC,OAAQ,UAEZC,KAAM,CAAC,aAMLC,EAAc,IAEPJ,EAAsB,CAC/BK,KAAM,CACFC,QAAS,UACTC,OAAQ,CAAC,UAAW,SACpBC,KAEQC,EAAAA,KAAAC,WAAA,CAAAC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,gBAAA,CACGN,OAAQ,QAAQH,WAChBU,QAAQ,kBAEZF,EAAAA,IAACC,EAAAA,gBAAA,CACGE,UAAU,oCACVR,OAAQ,OAAOH,cACfU,QAAQ,wBAEZF,EAAAA,IAACC,EAAAA,gBAAA,CACGN,OAAQ,QAAQH,cAChBU,QAAQ,kBAEZF,EAAAA,IAACC,EAAAA,gBAAA,CACGN,OAAQ,QAAQH,cAChBU,QAAQ,kBAEZF,EAAAA,IAACC,EAAAA,gBAAA,CACGE,UAAU,oCACVR,OAAO,SACPO,QAAQ,sBAIpBE,OAEQP,EAAAA,KAAAC,WAAA,CAAAC,SAAA,CAAAC,EAAAA,IAACC,EAAgBA,gBAAA,CAAAN,OAAO,YAAYO,QAAQ,kBAC5CF,EAAAA,IAACC,EAAAA,gBAAA,CACGN,OACIK,EAAAA,IAAC,OAAK,CAAAG,UAAU,cAAcJ,SAAgB,qBAElDG,QAAQ"}

package/build/cjs/components/system-message/SystemMessage.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs"),t=require("../../hooks/useId/useId.cjs"),a=require("../message/DismissButton.cjs"),i=require("./common/MessageIcon.cjs");function m(m){return({id:n,className:r,density:o,maxContentWidth:c,paddingLeft:d,role:l="status",dismissed:g,dismissAction:u,children:y,...j})=>{const x=t.useId(n||"jkl-system-message",{generateSuffix:!n});return s.jsx("div",{role:l,...j,id:x,className:e.clsx("jkl-system-message","jkl-system-message--"+m,r,{"jkl-system-message--dismissed":g}),"data-density":o,children:s.jsxs("div",{className:"jkl-system-message__content","data-testid":"system-message-content","data-theme":"light",style:{maxWidth:c,paddingLeft:d},children:[s.jsx(i.MessageIcon,{messageType:m}),s.jsx("span",{className:"jkl-system-message__message",children:y}),(null==u?void 0:u.handleDismiss)&&s.jsx(a.DismissButton,{"data-theme":"light","aria-controls":x,className:"jkl-system-message__dismiss-button",label:u.buttonTitle||"Lukk",onClick:u.handleDismiss})]})})}}const n=m("info");n.displayName="InfoSystemMessage";const r=m("error");r.displayName="ErrorSystemMessage";const o=m("warning");o.displayName="WarningSystemMessage";const c=m("success");c.displayName="SuccessSystemMessage",exports.ErrorSystemMessage=r,exports.InfoSystemMessage=n,exports.SuccessSystemMessage=c,exports.WarningSystemMessage=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs"),t=require("../../hooks/useId/useId.cjs"),a=require("../message/DismissButton.cjs"),i=require("./common/MessageIcon.cjs");function m(m){return({id:n,className:r,density:o,maxContentWidth:c,paddingLeft:d,role:l="status",dismissed:g,dismissAction:u,children:y,...j})=>{const x=t.useId(n||"jkl-system-message",{generateSuffix:!n});return s.jsx("div",{role:l,...j,id:x,className:e.clsx("jkl-system-message",`jkl-system-message--${m}`,r,{"jkl-system-message--dismissed":g}),"data-density":o,children:s.jsxs("div",{className:"jkl-system-message__content","data-testid":"system-message-content","data-theme":"light",style:{maxWidth:c,paddingLeft:d},children:[s.jsx(i.MessageIcon,{messageType:m}),s.jsx("span",{className:"jkl-system-message__message",children:y}),(null==u?void 0:u.handleDismiss)&&s.jsx(a.DismissButton,{"data-theme":"light","aria-controls":x,className:"jkl-system-message__dismiss-button",label:u.buttonTitle||"Lukk",onClick:u.handleDismiss})]})})}}const n=m("info");n.displayName="InfoSystemMessage";const r=m("error");r.displayName="ErrorSystemMessage";const o=m("warning");o.displayName="WarningSystemMessage";const c=m("success");c.displayName="SuccessSystemMessage",exports.ErrorSystemMessage=r,exports.InfoSystemMessage=n,exports.SuccessSystemMessage=c,exports.WarningSystemMessage=o;
 //# sourceMappingURL=SystemMessage.cjs.map

package/build/cjs/components/system-message/SystemMessage.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SystemMessage.cjs","sources":["../../../../src/components/system-message/SystemMessage.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { DismissButton } from \"../message/DismissButton.js\";\nimport { MessageIcon } from \"./common/MessageIcon.js\";\nimport { SystemMessageProps } from \"./types.js\";\n\ntype messageTypes = \"info\" | \"error\" | \"success\" | \"warning\";\n\nfunction systemFactory(\n    messageType: messageTypes,\n): React.FC<SystemMessageProps> {\n    const SystemMessage: React.FC<SystemMessageProps> = ({\n        id,\n        className,\n        density,\n        maxContentWidth,\n        paddingLeft,\n        role = \"status\",\n        dismissed,\n        dismissAction,\n        children,\n        ...rest\n    }) => {\n        const systemId = useId(id || \"jkl-system-message\", {\n            generateSuffix: !id,\n        });\n\n        return (\n            <div\n                role={role}\n                {...rest}\n                id={systemId}\n                className={clsx(\n                    \"jkl-system-message\",\n                    \"jkl-system-message--\" + messageType,\n                    className,\n                    {\n                        \"jkl-system-message--dismissed\": dismissed,\n                    },\n                )}\n                data-density={density}\n            >\n                <div\n                    className=\"jkl-system-message__content\"\n                    data-testid=\"system-message-content\"\n                    data-theme=\"light\"\n                    style={{\n                        maxWidth: maxContentWidth,\n                        paddingLeft,\n                    }}\n                >\n                    <MessageIcon messageType={messageType} />\n                    <span className=\"jkl-system-message__message\">\n                        {children}\n                    </span>\n                    {dismissAction?.handleDismiss && (\n                        <DismissButton\n                            data-theme=\"light\"\n                            aria-controls={systemId}\n                            className=\"jkl-system-message__dismiss-button\"\n                            label={dismissAction.buttonTitle || \"Lukk\"}\n                            onClick={dismissAction.handleDismiss}\n                        />\n                    )}\n                </div>\n            </div>\n        );\n    };\n    return SystemMessage;\n}\n\nexport const InfoSystemMessage = systemFactory(\"info\");\nInfoSystemMessage.displayName = \"InfoSystemMessage\";\nexport const ErrorSystemMessage = systemFactory(\"error\");\nErrorSystemMessage.displayName = \"ErrorSystemMessage\";\nexport const WarningSystemMessage = systemFactory(\"warning\");\nWarningSystemMessage.displayName = \"WarningSystemMessage\";\nexport const SuccessSystemMessage = systemFactory(\"success\");\nSuccessSystemMessage.displayName = \"SuccessSystemMessage\";\n"],"names":["systemFactory","messageType","id","className","density","maxContentWidth","paddingLeft","role","dismissed","dismissAction","children","rest","systemId","useId","generateSuffix","jsx","clsx","jsxs","style","maxWidth","MessageIcon","handleDismiss","DismissButton","label","buttonTitle","onClick","InfoSystemMessage","displayName","ErrorSystemMessage","WarningSystemMessage","SuccessSystemMessage"],"mappings":"sRASA,SAASA,EACLC,GA2DO,MAzD6C,EAChDC,GAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAC,cAAAA,EACAC,SAAAA,KACGC,MAEG,MAAAC,EAAWC,EAAAA,MAAMX,GAAM,qBAAsB,CAC/CY,gBAAiBZ,IAIjB,OAAAa,EAAAA,IAAC,MAAA,CACGR,KAAAA,KACII,EACJT,GAAIU,EACJT,UAAWa,EAAAA,KACP,qBACA,uBAAyBf,EACzBE,EACA,CACI,gCAAiCK,IAGzC,eAAcJ,EAEdM,SAAAO,EAAAA,KAAC,MAAA,CACGd,UAAU,8BACV,cAAY,yBACZ,aAAW,QACXe,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,MAACK,EAAAA,aAAYnB,YAAAA,IACZc,EAAAA,IAAA,OAAA,CAAKZ,UAAU,8BACXO,SAAAA,KAEJ,MAAAD,OAAAA,EAAAA,EAAeY,gBACZN,EAAAA,IAACO,EAAAA,cAAA,CACG,aAAW,QACX,gBAAeV,EACfT,UAAU,qCACVoB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY,oBAGnC,CAKhB,CAEa,MAAAK,EAAoB1B,EAAc,QAC/C0B,EAAkBC,YAAc,oBACnB,MAAAC,EAAqB5B,EAAc,SAChD4B,EAAmBD,YAAc,qBACpB,MAAAE,EAAuB7B,EAAc,WAClD6B,EAAqBF,YAAc,uBACtB,MAAAG,EAAuB9B,EAAc,WAClD8B,EAAqBH,YAAc"}
+{"version":3,"file":"SystemMessage.cjs","sources":["../../../../src/components/system-message/SystemMessage.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { DismissButton } from \"../message/DismissButton.js\";\nimport { MessageIcon } from \"./common/MessageIcon.js\";\nimport type { SystemMessageProps } from \"./types.js\";\n\ntype messageTypes = \"info\" | \"error\" | \"success\" | \"warning\";\n\nfunction systemFactory(\n    messageType: messageTypes,\n): React.FC<SystemMessageProps> {\n    const SystemMessage: React.FC<SystemMessageProps> = ({\n        id,\n        className,\n        density,\n        maxContentWidth,\n        paddingLeft,\n        role = \"status\",\n        dismissed,\n        dismissAction,\n        children,\n        ...rest\n    }) => {\n        const systemId = useId(id || \"jkl-system-message\", {\n            generateSuffix: !id,\n        });\n\n        return (\n            <div\n                role={role}\n                {...rest}\n                id={systemId}\n                className={clsx(\n                    \"jkl-system-message\",\n                    `jkl-system-message--${messageType}`,\n                    className,\n                    {\n                        \"jkl-system-message--dismissed\": dismissed,\n                    },\n                )}\n                data-density={density}\n            >\n                <div\n                    className=\"jkl-system-message__content\"\n                    data-testid=\"system-message-content\"\n                    data-theme=\"light\"\n                    style={{\n                        maxWidth: maxContentWidth,\n                        paddingLeft,\n                    }}\n                >\n                    <MessageIcon messageType={messageType} />\n                    <span className=\"jkl-system-message__message\">\n                        {children}\n                    </span>\n                    {dismissAction?.handleDismiss && (\n                        <DismissButton\n                            data-theme=\"light\"\n                            aria-controls={systemId}\n                            className=\"jkl-system-message__dismiss-button\"\n                            label={dismissAction.buttonTitle || \"Lukk\"}\n                            onClick={dismissAction.handleDismiss}\n                        />\n                    )}\n                </div>\n            </div>\n        );\n    };\n    return SystemMessage;\n}\n\nexport const InfoSystemMessage = systemFactory(\"info\");\nInfoSystemMessage.displayName = \"InfoSystemMessage\";\nexport const ErrorSystemMessage = systemFactory(\"error\");\nErrorSystemMessage.displayName = \"ErrorSystemMessage\";\nexport const WarningSystemMessage = systemFactory(\"warning\");\nWarningSystemMessage.displayName = \"WarningSystemMessage\";\nexport const SuccessSystemMessage = systemFactory(\"success\");\nSuccessSystemMessage.displayName = \"SuccessSystemMessage\";\n"],"names":["systemFactory","messageType","id","className","density","maxContentWidth","paddingLeft","role","dismissed","dismissAction","children","rest","systemId","useId","generateSuffix","jsx","clsx","jsxs","style","maxWidth","MessageIcon","handleDismiss","DismissButton","label","buttonTitle","onClick","InfoSystemMessage","displayName","ErrorSystemMessage","WarningSystemMessage","SuccessSystemMessage"],"mappings":"sRASA,SAASA,EACLC,GA2DO,MAzD6C,EAChDC,GAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAC,cAAAA,EACAC,SAAAA,KACGC,MAEG,MAAAC,EAAWC,EAAAA,MAAMX,GAAM,qBAAsB,CAC/CY,gBAAiBZ,IAIjB,OAAAa,EAAAA,IAAC,MAAA,CACGR,KAAAA,KACII,EACJT,GAAIU,EACJT,UAAWa,EAAAA,KACP,qBACA,uBAAuBf,IACvBE,EACA,CACI,gCAAiCK,IAGzC,eAAcJ,EAEdM,SAAAO,EAAAA,KAAC,MAAA,CACGd,UAAU,8BACV,cAAY,yBACZ,aAAW,QACXe,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,MAACK,EAAAA,aAAYnB,YAAAA,IACZc,EAAAA,IAAA,OAAA,CAAKZ,UAAU,8BACXO,SAAAA,KAEJ,MAAAD,OAAAA,EAAAA,EAAeY,gBACZN,EAAAA,IAACO,EAAAA,cAAA,CACG,aAAW,QACX,gBAAeV,EACfT,UAAU,qCACVoB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY,oBAGnC,CAKhB,CAEa,MAAAK,EAAoB1B,EAAc,QAC/C0B,EAAkBC,YAAc,oBACnB,MAAAC,EAAqB5B,EAAc,SAChD4B,EAAmBD,YAAc,qBACpB,MAAAE,EAAuB7B,EAAc,WAClD6B,EAAqBF,YAAc,uBACtB,MAAAG,EAAuB9B,EAAc,WAClD8B,EAAqBH,YAAc"}

package/build/cjs/components/system-message/common/DismissButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DismissButton.cjs","sources":["../../../../../src/components/system-message/common/DismissButton.tsx"],"sourcesContent":["import React, { ButtonHTMLAttributes, forwardRef } from \"react\";\nimport { CloseIcon } from \"../../icon/icons/CloseIcon.js\";\n\nexport interface DismissButtonProps\n    extends Exclude<ButtonHTMLAttributes<HTMLButtonElement>, \"disabled\"> {\n    label?: string;\n}\n\nexport const DismissButton = forwardRef<HTMLButtonElement, DismissButtonProps>(\n    ({ label = \"Lukk\", ...rest }, ref) => {\n        return (\n            <button ref={ref} type=\"button\" title={label} {...rest}>\n                <CloseIcon variant=\"small\" bold />\n                <span className=\"jkl-sr-only\">{label}</span>\n            </button>\n        );\n    },\n);\n\nDismissButton.displayName = \"DismissButton\";\n"],"names":["DismissButton","forwardRef","label","rest","ref","jsxs","type","title","children","jsx","CloseIcon","variant","bold","className","displayName"],"mappings":"oLAQaA,EAAgBC,EAAAA,YACzB,EAAGC,MAAAA,EAAQ,UAAWC,GAAQC,IAEtBC,OAAC,UAAOD,IAAAA,EAAUE,KAAK,SAASC,MAAOL,KAAWC,EAC9CK,SAAA,CAAAC,EAAAA,IAACC,EAAUA,UAAA,CAAAC,QAAQ,QAAQC,MAAI,IAC9BH,EAAAA,IAAA,OAAA,CAAKI,UAAU,cAAeL,SAAMN,SAMrDF,EAAcc,YAAc"}
+{"version":3,"file":"DismissButton.cjs","sources":["../../../../../src/components/system-message/common/DismissButton.tsx"],"sourcesContent":["import React, { type ButtonHTMLAttributes, forwardRef } from \"react\";\nimport { CloseIcon } from \"../../icon/icons/CloseIcon.js\";\n\nexport interface DismissButtonProps\n    extends Exclude<ButtonHTMLAttributes<HTMLButtonElement>, \"disabled\"> {\n    label?: string;\n}\n\nexport const DismissButton = forwardRef<HTMLButtonElement, DismissButtonProps>(\n    ({ label = \"Lukk\", ...rest }, ref) => {\n        return (\n            <button ref={ref} type=\"button\" title={label} {...rest}>\n                <CloseIcon variant=\"small\" bold />\n                <span className=\"jkl-sr-only\">{label}</span>\n            </button>\n        );\n    },\n);\n\nDismissButton.displayName = \"DismissButton\";\n"],"names":["DismissButton","forwardRef","label","rest","ref","jsxs","type","title","children","jsx","CloseIcon","variant","bold","className","displayName"],"mappings":"oLAQaA,EAAgBC,EAAAA,YACzB,EAAGC,MAAAA,EAAQ,UAAWC,GAAQC,IAEtBC,OAAC,UAAOD,IAAAA,EAAUE,KAAK,SAASC,MAAOL,KAAWC,EAC9CK,SAAA,CAAAC,EAAAA,IAACC,EAAUA,UAAA,CAAAC,QAAQ,QAAQC,MAAI,IAC9BH,EAAAA,IAAA,OAAA,CAAKI,UAAU,cAAeL,SAAMN,SAMrDF,EAAcc,YAAc"}

package/build/cjs/components/system-message/common/MessageIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MessageIcon.cjs","sources":["../../../../../src/components/system-message/common/MessageIcon.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { ErrorIcon } from \"../../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../../icon/icons/WarningIcon.js\";\n\ntype MessageTypes = \"info\" | \"error\" | \"success\" | \"warning\";\n\ntype Props = {\n    messageType: MessageTypes;\n};\n\nexport const MessageIcon: FC<Props> = ({ messageType }) => {\n    switch (messageType) {\n        case \"error\":\n            return <ErrorIcon className=\"jkl-system-message__icon\" />;\n        case \"info\":\n            return <InfoIcon className=\"jkl-system-message__icon\" />;\n        case \"success\":\n            return <SuccessIcon className=\"jkl-system-message__icon\" />;\n        case \"warning\":\n            return <WarningIcon className=\"jkl-system-message__icon\" />;\n\n        default:\n            return null;\n    }\n};\n"],"names":["messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon"],"mappings":"4TAYsC,EAAGA,YAAAA,MACrC,OAAQA,GACJ,IAAK,QACM,OAAAC,EAAAA,IAACC,EAAUA,UAAA,CAAAC,UAAU,6BAChC,IAAK,OACM,OAAAF,EAAAA,IAACG,EAASA,SAAA,CAAAD,UAAU,6BAC/B,IAAK,UACM,OAAAF,EAAAA,IAACI,EAAYA,YAAA,CAAAF,UAAU,6BAClC,IAAK,UACM,OAAAF,EAAAA,IAACK,EAAYA,YAAA,CAAAH,UAAU,6BAElC,QACW,OAAA,KACf"}
+{"version":3,"file":"MessageIcon.cjs","sources":["../../../../../src/components/system-message/common/MessageIcon.tsx"],"sourcesContent":["import React, { type FC } from \"react\";\nimport { ErrorIcon } from \"../../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../../icon/icons/WarningIcon.js\";\n\ntype MessageTypes = \"info\" | \"error\" | \"success\" | \"warning\";\n\ntype Props = {\n    messageType: MessageTypes;\n};\n\nexport const MessageIcon: FC<Props> = ({ messageType }) => {\n    switch (messageType) {\n        case \"error\":\n            return <ErrorIcon className=\"jkl-system-message__icon\" />;\n        case \"info\":\n            return <InfoIcon className=\"jkl-system-message__icon\" />;\n        case \"success\":\n            return <SuccessIcon className=\"jkl-system-message__icon\" />;\n        case \"warning\":\n            return <WarningIcon className=\"jkl-system-message__icon\" />;\n\n        default:\n            return null;\n    }\n};\n"],"names":["messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon"],"mappings":"4TAYsC,EAAGA,YAAAA,MACrC,OAAQA,GACJ,IAAK,QACM,OAAAC,EAAAA,IAACC,EAAUA,UAAA,CAAAC,UAAU,6BAChC,IAAK,OACM,OAAAF,EAAAA,IAACG,EAASA,SAAA,CAAAD,UAAU,6BAC/B,IAAK,UACM,OAAAF,EAAAA,IAACI,EAAYA,YAAA,CAAAF,UAAU,6BAClC,IAAK,UACM,OAAAF,EAAAA,IAACK,EAAYA,YAAA,CAAAH,UAAU,6BAElC,QACW,OAAA,KACf"}

package/build/cjs/components/table/DataTable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.cjs","sources":["../../../../src/components/table/DataTable.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { Table } from \"./Table.js\";\nimport { TableBody } from \"./TableBody.js\";\nimport { TableCaption } from \"./TableCaption.js\";\nimport { TableCell } from \"./TableCell.js\";\nimport { TableHead } from \"./TableHead.js\";\nimport { TableHeader } from \"./TableHeader.js\";\nimport { TableRow } from \"./TableRow.js\";\nimport { DataTableProps } from \"./types.js\";\n\nconst DataTable = forwardRef<HTMLTableElement, DataTableProps>(\n    (\n        { caption, columns, emptyTableText, rows, verticalAlign, ...rest },\n        ref,\n    ) => {\n        return (\n            <Table\n                caption={<TableCaption srOnly>{caption}</TableCaption>}\n                fullWidth={true}\n                {...rest}\n                ref={ref}\n            >\n                <TableHead>\n                    <TableRow>\n                        {columns.map((column, index) => (\n                            <TableHeader key={index} density=\"compact\" bold>\n                                {column}\n                            </TableHeader>\n                        ))}\n                    </TableRow>\n                </TableHead>\n                <TableBody>\n                    {rows.length === 0 && emptyTableText && (\n                        <TableRow>\n                            <TableCell colSpan={columns.length}>\n                                {emptyTableText}\n                            </TableCell>\n                        </TableRow>\n                    )}\n                    {rows.map((row, rowIndex) => (\n                        <TableRow key={rowIndex}>\n                            {row.map((cell, cellIndex) => (\n                                <TableCell\n                                    key={cellIndex}\n                                    data-th={columns[cellIndex]}\n                                    verticalAlign={verticalAlign}\n                                >\n                                    {cell}\n                                </TableCell>\n                            ))}\n                        </TableRow>\n                    ))}\n                </TableBody>\n            </Table>\n        );\n    },\n);\n\nDataTable.displayName = \"DataTable\";\n\nexport { DataTable };\n"],"names":["DataTable","forwardRef","caption","columns","emptyTableText","rows","verticalAlign","rest","ref","jsxs","Table","jsx","TableCaption","srOnly","children","fullWidth","TableHead","TableRow","map","column","index","TableHeader","density","bold","TableBody","length","TableCell","colSpan","row","rowIndex","cell","cellIndex","displayName"],"mappings":"mVAUMA,EAAYC,EAAAA,YACd,EACMC,QAAAA,EAASC,QAAAA,EAASC,eAAAA,EAAgBC,KAAAA,EAAMC,cAAAA,KAAkBC,GAC5DC,IAGIC,EAAAA,KAACC,EAAAA,MAAA,CACGR,QAASS,EAAAA,IAACC,eAAa,CAAAC,QAAM,EAAEC,SAAQZ,IACvCa,WAAW,KACPR,EACJC,IAAAA,EAEAM,SAAA,CAAAH,EAAAA,IAACK,aACGF,SAACH,MAAAM,EAAAA,SAAA,CACIH,WAAQI,KAAI,CAACC,EAAQC,IAClBT,MAACU,EAAAA,YAAwB,CAAAC,QAAQ,UAAUC,MAAI,EAC1CT,YADaM,gBAM7BI,EAAAA,UACI,CAAAV,SAAA,CAAgB,IAAXT,EAAAoB,QAAgBrB,GACjBO,EAAAA,IAAAM,EAAAA,SAAA,CACGH,SAACH,EAAAA,IAAAe,EAAAA,UAAA,CAAUC,QAASxB,EAAQsB,OACvBX,SAAAV,MAIZC,EAAKa,KAAI,CAACU,EAAKC,IACXlB,EAAAA,IAAAM,EAAAA,SAAA,CACIH,SAAIc,EAAAV,KAAI,CAACY,EAAMC,IACZpB,EAAAA,IAACe,EAAAA,UAAA,CAEG,UAASvB,EAAQ4B,GACjBzB,cAAAA,EAECQ,SAAAgB,GAJIC,MAHFF,aAkBvC7B,EAAUgC,YAAc"}
+{"version":3,"file":"DataTable.cjs","sources":["../../../../src/components/table/DataTable.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { Table } from \"./Table.js\";\nimport { TableBody } from \"./TableBody.js\";\nimport { TableCaption } from \"./TableCaption.js\";\nimport { TableCell } from \"./TableCell.js\";\nimport { TableHead } from \"./TableHead.js\";\nimport { TableHeader } from \"./TableHeader.js\";\nimport { TableRow } from \"./TableRow.js\";\nimport type { DataTableProps } from \"./types.js\";\n\nconst DataTable = forwardRef<HTMLTableElement, DataTableProps>(\n    (\n        { caption, columns, emptyTableText, rows, verticalAlign, ...rest },\n        ref,\n    ) => {\n        return (\n            <Table\n                caption={<TableCaption srOnly>{caption}</TableCaption>}\n                fullWidth={true}\n                {...rest}\n                ref={ref}\n            >\n                <TableHead>\n                    <TableRow>\n                        {columns.map((column, index) => (\n                            <TableHeader key={index} density=\"compact\" bold>\n                                {column}\n                            </TableHeader>\n                        ))}\n                    </TableRow>\n                </TableHead>\n                <TableBody>\n                    {rows.length === 0 && emptyTableText && (\n                        <TableRow>\n                            <TableCell colSpan={columns.length}>\n                                {emptyTableText}\n                            </TableCell>\n                        </TableRow>\n                    )}\n                    {rows.map((row, rowIndex) => (\n                        <TableRow key={rowIndex}>\n                            {row.map((cell, cellIndex) => (\n                                <TableCell\n                                    key={cellIndex}\n                                    data-th={columns[cellIndex]}\n                                    verticalAlign={verticalAlign}\n                                >\n                                    {cell}\n                                </TableCell>\n                            ))}\n                        </TableRow>\n                    ))}\n                </TableBody>\n            </Table>\n        );\n    },\n);\n\nDataTable.displayName = \"DataTable\";\n\nexport { DataTable };\n"],"names":["DataTable","forwardRef","caption","columns","emptyTableText","rows","verticalAlign","rest","ref","jsxs","Table","jsx","TableCaption","srOnly","children","fullWidth","TableHead","TableRow","map","column","index","TableHeader","density","bold","TableBody","length","TableCell","colSpan","row","rowIndex","cell","cellIndex","displayName"],"mappings":"mVAUMA,EAAYC,EAAAA,YACd,EACMC,QAAAA,EAASC,QAAAA,EAASC,eAAAA,EAAgBC,KAAAA,EAAMC,cAAAA,KAAkBC,GAC5DC,IAGIC,EAAAA,KAACC,EAAAA,MAAA,CACGR,QAASS,EAAAA,IAACC,eAAa,CAAAC,QAAM,EAAEC,SAAQZ,IACvCa,WAAW,KACPR,EACJC,IAAAA,EAEAM,SAAA,CAAAH,EAAAA,IAACK,aACGF,SAACH,MAAAM,EAAAA,SAAA,CACIH,WAAQI,KAAI,CAACC,EAAQC,IAClBT,MAACU,EAAAA,YAAwB,CAAAC,QAAQ,UAAUC,MAAI,EAC1CT,YADaM,gBAM7BI,EAAAA,UACI,CAAAV,SAAA,CAAgB,IAAXT,EAAAoB,QAAgBrB,GACjBO,EAAAA,IAAAM,EAAAA,SAAA,CACGH,SAACH,EAAAA,IAAAe,EAAAA,UAAA,CAAUC,QAASxB,EAAQsB,OACvBX,SAAAV,MAIZC,EAAKa,KAAI,CAACU,EAAKC,IACXlB,EAAAA,IAAAM,EAAAA,SAAA,CACIH,SAAIc,EAAAV,KAAI,CAACY,EAAMC,IACZpB,EAAAA,IAACe,EAAAA,UAAA,CAEG,UAASvB,EAAQ4B,GACjBzB,cAAAA,EAECQ,SAAAgB,GAJIC,MAHFF,aAkBvC7B,EAAUgC,YAAc"}

package/build/cjs/components/table/ExpandableTableRow.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../../clsx-E3yX_9sL.cjs"),a=require("react"),r=require("../../hooks/useAnimatedHeight/useAnimatedHeight.cjs"),n=require("../../hooks/useId/useId.cjs"),d=require("./ExpandableTableRowController.cjs"),o=require("./TableRow.cjs"),s=a.forwardRef(((s,i)=>{const{className:t,clickable:c,children:b,expandedChildren:p,onToggle:x,colSpan:u=100,isOpen:j,...w}=s,[h,k]=a.useState(j??!1);a.useEffect((()=>{typeof j>"u"||k(j)}),[j]);const[m]=r.useAnimatedHeight(h,{timing:"expressive"}),g=()=>{const e=!h;x&&x(e),k(e)},f=l.clsx("jkl-table-row--expandable",t,{"jkl-table-row--expanded":h,"jkl-expandable-table-row--clickable-external":c}),T=l.clsx("jkl-expandable-table-row__expanded-row",{"jkl-expandable-table-row__expanded-row--expanded":h}),q=n.useId("jkl-expandable-table-row"),E=n.useId("jkl-expandable-table-row-controller");return e.jsxs(e.Fragment,{children:[e.jsx(o.TableRow,{className:f,clickable:c??{onClick:()=>g()},...w,ref:i,children:a.Children.map(b,(e=>a.isValidElement(e)&&e.type==d.ExpandableTableRowController?a.cloneElement(e,{isOpen:h,onClick:()=>g(),"aria-controls":q,id:E}):e))}),e.jsx("tr",{"aria-hidden":!h,children:e.jsx("td",{colSpan:u,children:e.jsx("div",{ref:m,className:T,id:q,"aria-labelledby":E,hidden:!h,role:"group",children:p})})})]})}));s.displayName="ExpandableTableRow",exports.ExpandableTableRow=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../../clsx-E3yX_9sL.cjs"),a=require("react"),r=require("../../hooks/useAnimatedHeight/useAnimatedHeight.cjs"),n=require("../../hooks/useId/useId.cjs"),d=require("./ExpandableTableRowController.cjs"),s=require("./TableRow.cjs"),i=a.forwardRef(((i,o)=>{const{className:t,clickable:c,children:b,expandedChildren:x,onToggle:p,colSpan:u=100,isOpen:j,...w}=i,[h,k]=a.useState(j??!1);a.useEffect((()=>{typeof j>"u"||k(j)}),[j]);const[m]=r.useAnimatedHeight(h,{timing:"expressive"}),f=()=>{const e=!h;p&&p(e),k(e)},g=l.clsx("jkl-table-row--expandable",t,{"jkl-table-row--expanded":h,"jkl-expandable-table-row--clickable-external":c}),T=l.clsx("jkl-expandable-table-row__expanded-row",{"jkl-expandable-table-row__expanded-row--expanded":h}),q=n.useId("jkl-expandable-table-row"),E=n.useId("jkl-expandable-table-row-controller");return e.jsxs(e.Fragment,{children:[e.jsx(s.TableRow,{className:g,clickable:c??{onClick:()=>f()},...w,ref:o,children:a.Children.map(b,(e=>a.isValidElement(e)&&e.type===d.ExpandableTableRowController?a.cloneElement(e,{isOpen:h,onClick:()=>f(),"aria-controls":q,id:E}):e))}),e.jsx("tr",{"aria-hidden":!h,children:e.jsx("td",{colSpan:u,children:e.jsx("fieldset",{ref:m,className:T,id:q,"aria-labelledby":E,hidden:!h,children:x})})})]})}));i.displayName="ExpandableTableRow",exports.ExpandableTableRow=i;
 //# sourceMappingURL=ExpandableTableRow.cjs.map

package/build/cjs/components/table/ExpandableTableRow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableTableRow.cjs","sources":["../../../../src/components/table/ExpandableTableRow.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useEffect, useState } from \"react\";\nimport { useAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ExpandableTableRowController } from \"./ExpandableTableRowController.js\";\nimport { TableRow } from \"./TableRow.js\";\nimport {\n    ExpandableTableRowControllerProps,\n    ExpandableTableRowProps,\n} from \"./types.js\";\n\nconst ExpandableTableRow = forwardRef<\n    HTMLTableRowElement,\n    ExpandableTableRowProps\n>((props, ref) => {\n    const {\n        className,\n        clickable,\n        children,\n        expandedChildren,\n        onToggle,\n        colSpan = 100,\n        isOpen: isOpenProp,\n        ...rest\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(isOpenProp ?? false);\n    useEffect(() => {\n        if (typeof isOpenProp === \"undefined\") {\n            return;\n        }\n        setIsOpen(isOpenProp);\n    }, [isOpenProp]);\n\n    const [animationRef] = useAnimatedHeight<HTMLDivElement>(isOpen, {\n        timing: \"expressive\",\n    });\n\n    const toggleOpen = () => {\n        const newIsOpen = !isOpen;\n\n        if (onToggle) {\n            onToggle(newIsOpen);\n        }\n\n        setIsOpen(newIsOpen);\n    };\n\n    const tableRowClassName = clsx(\"jkl-table-row--expandable\", className, {\n        [\"jkl-table-row--expanded\"]: isOpen,\n        [\"jkl-expandable-table-row--clickable-external\"]: clickable,\n    });\n    const childWrapperClassName = clsx(\n        \"jkl-expandable-table-row__expanded-row\",\n        {\n            [\"jkl-expandable-table-row__expanded-row--expanded\"]: isOpen,\n        },\n    );\n\n    const tableRowId = useId(\"jkl-expandable-table-row\");\n    const expandableTableRowControllerId = useId(\n        \"jkl-expandable-table-row-controller\",\n    );\n\n    return (\n        <>\n            <TableRow\n                className={tableRowClassName}\n                clickable={\n                    clickable ?? {\n                        onClick: () => toggleOpen(),\n                    }\n                }\n                {...rest}\n                ref={ref}\n            >\n                {React.Children.map(children, (child) => {\n                    if (\n                        React.isValidElement<ExpandableTableRowControllerProps>(\n                            child,\n                        ) &&\n                        child.type == ExpandableTableRowController\n                    ) {\n                        return React.cloneElement<ExpandableTableRowControllerProps>(\n                            child,\n                            {\n                                isOpen,\n                                onClick: () => toggleOpen(),\n                                \"aria-controls\": tableRowId,\n                                id: expandableTableRowControllerId,\n                            },\n                        );\n                    } else {\n                        return child;\n                    }\n                })}\n            </TableRow>\n            {/*\n                Use a table row with a single as wide as possible cell to contain content. This allows\n                using useAnimatedHeight to animate the row height.\n            */}\n            <tr aria-hidden={!isOpen}>\n                <td colSpan={colSpan}>\n                    <div\n                        ref={animationRef}\n                        className={childWrapperClassName}\n                        id={tableRowId}\n                        aria-labelledby={expandableTableRowControllerId}\n                        hidden={!isOpen}\n                        role=\"group\"\n                    >\n                        {expandedChildren}\n                    </div>\n                </td>\n            </tr>\n        </>\n    );\n});\n\nExpandableTableRow.displayName = \"ExpandableTableRow\";\n\nexport { ExpandableTableRow };\n"],"names":["ExpandableTableRow","forwardRef","props","ref","className","clickable","children","expandedChildren","onToggle","colSpan","isOpen","isOpenProp","rest","setIsOpen","useState","useEffect","animationRef","useAnimatedHeight","timing","toggleOpen","newIsOpen","tableRowClassName","clsx","childWrapperClassName","tableRowId","useId","expandableTableRowControllerId","jsxs","Fragment","jsx","TableRow","onClick","React","Children","map","child","isValidElement","type","ExpandableTableRowController","cloneElement","id","hidden","role","displayName"],"mappings":"sWAWMA,EAAqBC,EAAAA,YAGzB,CAACC,EAAOC,KACA,MACFC,UAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,iBAAAA,EACAC,SAAAA,EACAC,QAAAA,EAAU,IACVC,OAAQC,KACLC,GACHV,GAEGQ,EAAQG,GAAaC,EAAAA,SAASH,IAAc,GACnDI,EAAAA,WAAU,YACKJ,EAAe,KAG1BE,EAAUF,EAAU,GACrB,CAACA,IAEJ,MAAOK,GAAgBC,EAAAA,kBAAkCP,EAAQ,CAC7DQ,OAAQ,eAGNC,EAAa,KACf,MAAMC,GAAaV,EAEfF,GACAA,EAASY,GAGbP,EAAUO,EAAS,EAGjBC,EAAoBC,EAAAA,KAAK,4BAA6BlB,EAAW,CAClE,0BAA4BM,EAC5B,+CAAiDL,IAEhDkB,EAAwBD,EAAAA,KAC1B,yCACA,CACK,mDAAqDZ,IAIxDc,EAAaC,QAAM,4BACnBC,EAAiCD,EAAAA,MACnC,uCAGJ,OAEQE,EAAAA,KAAAC,WAAA,CAAAtB,SAAA,CAAAuB,EAAAA,IAACC,EAAAA,SAAA,CACG1B,UAAWiB,EACXhB,UACIA,GAAa,CACT0B,QAAS,IAAMZ,QAGnBP,EACJT,IAAAA,EAECG,SAAM0B,EAAAC,SAASC,IAAI5B,GAAW6B,GAEvBH,EAAMI,eACFD,IAEJA,EAAME,MAAQC,+BAEPN,EAAMO,aACTJ,EACA,CACIzB,OAAAA,EACAqB,QAAS,IAAMZ,IACf,gBAAiBK,EACjBgB,GAAId,IAILS,YAQlB,KAAG,CAAA,eAAczB,EACdJ,SAAAuB,EAAAA,IAAC,MAAGpB,QAAAA,EACAH,SAAAuB,EAAAA,IAAC,MAAA,CACG1B,IAAKa,EACLZ,UAAWmB,EACXiB,GAAIhB,EACJ,kBAAiBE,EACjBe,QAAS/B,EACTgC,KAAK,QAEJpC,SAAAC,UAIjB,IAIRP,EAAmB2C,YAAc"}
+{"version":3,"file":"ExpandableTableRow.cjs","sources":["../../../../src/components/table/ExpandableTableRow.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useEffect, useState } from \"react\";\nimport { useAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ExpandableTableRowController } from \"./ExpandableTableRowController.js\";\nimport { TableRow } from \"./TableRow.js\";\nimport type {\n    ExpandableTableRowControllerProps,\n    ExpandableTableRowProps,\n} from \"./types.js\";\n\nconst ExpandableTableRow = forwardRef<\n    HTMLTableRowElement,\n    ExpandableTableRowProps\n>((props, ref) => {\n    const {\n        className,\n        clickable,\n        children,\n        expandedChildren,\n        onToggle,\n        colSpan = 100,\n        isOpen: isOpenProp,\n        ...rest\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(isOpenProp ?? false);\n    useEffect(() => {\n        if (typeof isOpenProp === \"undefined\") {\n            return;\n        }\n        setIsOpen(isOpenProp);\n    }, [isOpenProp]);\n\n    const [animationRef] = useAnimatedHeight<HTMLFieldSetElement>(isOpen, {\n        timing: \"expressive\",\n    });\n\n    const toggleOpen = () => {\n        const newIsOpen = !isOpen;\n\n        if (onToggle) {\n            onToggle(newIsOpen);\n        }\n\n        setIsOpen(newIsOpen);\n    };\n\n    const tableRowClassName = clsx(\"jkl-table-row--expandable\", className, {\n        [\"jkl-table-row--expanded\"]: isOpen,\n        [\"jkl-expandable-table-row--clickable-external\"]: clickable,\n    });\n    const childWrapperClassName = clsx(\n        \"jkl-expandable-table-row__expanded-row\",\n        {\n            [\"jkl-expandable-table-row__expanded-row--expanded\"]: isOpen,\n        },\n    );\n\n    const tableRowId = useId(\"jkl-expandable-table-row\");\n    const expandableTableRowControllerId = useId(\n        \"jkl-expandable-table-row-controller\",\n    );\n\n    return (\n        <>\n            <TableRow\n                className={tableRowClassName}\n                clickable={\n                    clickable ?? {\n                        onClick: () => toggleOpen(),\n                    }\n                }\n                {...rest}\n                ref={ref}\n            >\n                {React.Children.map(children, (child) => {\n                    if (\n                        React.isValidElement<ExpandableTableRowControllerProps>(\n                            child,\n                        ) &&\n                        child.type === ExpandableTableRowController\n                    ) {\n                        return React.cloneElement<ExpandableTableRowControllerProps>(\n                            child,\n                            {\n                                isOpen,\n                                onClick: () => toggleOpen(),\n                                \"aria-controls\": tableRowId,\n                                id: expandableTableRowControllerId,\n                            },\n                        );\n                    }\n\n                    return child;\n                })}\n            </TableRow>\n            {/*\n                Use a table row with a single as wide as possible cell to contain content. This allows\n                using useAnimatedHeight to animate the row height.\n            */}\n            <tr aria-hidden={!isOpen}>\n                <td colSpan={colSpan}>\n                    <fieldset\n                        ref={animationRef}\n                        className={childWrapperClassName}\n                        id={tableRowId}\n                        aria-labelledby={expandableTableRowControllerId}\n                        hidden={!isOpen}\n                    >\n                        {expandedChildren}\n                    </fieldset>\n                </td>\n            </tr>\n        </>\n    );\n});\n\nExpandableTableRow.displayName = \"ExpandableTableRow\";\n\nexport { ExpandableTableRow };\n"],"names":["ExpandableTableRow","forwardRef","props","ref","className","clickable","children","expandedChildren","onToggle","colSpan","isOpen","isOpenProp","rest","setIsOpen","useState","useEffect","animationRef","useAnimatedHeight","timing","toggleOpen","newIsOpen","tableRowClassName","clsx","childWrapperClassName","tableRowId","useId","expandableTableRowControllerId","jsxs","Fragment","jsx","TableRow","onClick","React","Children","map","child","isValidElement","type","ExpandableTableRowController","cloneElement","id","hidden","displayName"],"mappings":"sWAWMA,EAAqBC,EAAAA,YAGzB,CAACC,EAAOC,KACA,MACFC,UAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,iBAAAA,EACAC,SAAAA,EACAC,QAAAA,EAAU,IACVC,OAAQC,KACLC,GACHV,GAEGQ,EAAQG,GAAaC,EAAAA,SAASH,IAAc,GACnDI,EAAAA,WAAU,YACKJ,EAAe,KAG1BE,EAAUF,EAAU,GACrB,CAACA,IAEJ,MAAOK,GAAgBC,EAAAA,kBAAuCP,EAAQ,CAClEQ,OAAQ,eAGNC,EAAa,KACf,MAAMC,GAAaV,EAEfF,GACAA,EAASY,GAGbP,EAAUO,EAAS,EAGjBC,EAAoBC,EAAAA,KAAK,4BAA6BlB,EAAW,CAClE,0BAA4BM,EAC5B,+CAAiDL,IAEhDkB,EAAwBD,EAAAA,KAC1B,yCACA,CACK,mDAAqDZ,IAIxDc,EAAaC,QAAM,4BACnBC,EAAiCD,EAAAA,MACnC,uCAGJ,OAEQE,EAAAA,KAAAC,WAAA,CAAAtB,SAAA,CAAAuB,EAAAA,IAACC,EAAAA,SAAA,CACG1B,UAAWiB,EACXhB,UACIA,GAAa,CACT0B,QAAS,IAAMZ,QAGnBP,EACJT,IAAAA,EAECG,SAAM0B,EAAAC,SAASC,IAAI5B,GAAW6B,GAEvBH,EAAMI,eACFD,IAEJA,EAAME,OAASC,+BAERN,EAAMO,aACTJ,EACA,CACIzB,OAAAA,EACAqB,QAAS,IAAMZ,IACf,gBAAiBK,EACjBgB,GAAId,IAKTS,YAOd,KAAG,CAAA,eAAczB,EACdJ,SAAAuB,EAAAA,IAAC,MAAGpB,QAAAA,EACAH,SAAAuB,EAAAA,IAAC,WAAA,CACG1B,IAAKa,EACLZ,UAAWmB,EACXiB,GAAIhB,EACJ,kBAAiBE,EACjBe,QAAS/B,EAERJ,SAAAC,UAIjB,IAIRP,EAAmB0C,YAAc"}

package/build/cjs/components/table/ExpandableTableRowController.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableTableRowController.cjs","sources":["../../../../src/components/table/ExpandableTableRowController.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { Expander } from \"../expander/Expander.js\";\nimport { TableCell } from \"./TableCell.js\";\nimport { useTableContext } from \"./tableContext.js\";\nimport { ExpandableTableRowControllerProps } from \"./types.js\";\n\nconst ExpandableTableRowController = forwardRef<\n    HTMLTableCellElement,\n    ExpandableTableRowControllerProps\n>(\n    (\n        {\n            isOpen,\n            onClick,\n            children,\n            className,\n            id,\n            \"aria-controls\": ariaControls,\n            ...rest\n        },\n        ref,\n    ) => {\n        if (isOpen === undefined || typeof onClick !== \"function\") {\n            throw new Error(\n                \"ExpandableTableRowController must have ExpandableTableRow as parent\",\n            );\n        }\n\n        const { collapseToList } = useTableContext();\n\n        const dataTh = (rest as Record<string, string>)[\"data-th\"];\n\n        // pick text from data-th if possible, but only if it's a list\n        const showTextFromTh: string | undefined = collapseToList\n            ? dataTh\n            : undefined;\n\n        return (\n            <TableCell\n                className={clsx(\n                    \"jkl-table-cell--expand\",\n                    { [\"jkl-table-cell--expand-without-text\"]: !children },\n                    className,\n                )}\n                {...rest}\n                ref={ref}\n            >\n                <Expander\n                    as=\"button\"\n                    className={clsx(\"jkl-table-row-expand-button\", {\n                        [\"jkl-table-row-expand-button--expanded\"]: isOpen,\n                    })}\n                    id={id}\n                    open={isOpen}\n                    aria-controls={ariaControls}\n                    aria-label={\n                        children ? undefined : dataTh || \"Ekspander rad\"\n                    }\n                    onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n                        e.stopPropagation();\n                        onClick();\n                    }}\n                    onKeyDown={(e: React.KeyboardEvent<HTMLButtonElement>) => {\n                        if (e.key === \"Enter\" || e.key === \" \") {\n                            e.stopPropagation();\n                            e.preventDefault();\n                            onClick();\n                        }\n                    }}\n                >\n                    {/* show children. or try to use data-th if children is undefined */}\n                    {children ?? showTextFromTh}\n                </Expander>\n            </TableCell>\n        );\n    },\n);\n\nExpandableTableRowController.displayName = \"ExpandableTableRowController\";\n\nexport { ExpandableTableRowController };\n"],"names":["ExpandableTableRowController","forwardRef","isOpen","onClick","children","className","id","ariaControls","rest","ref","Error","collapseToList","useTableContext","dataTh","showTextFromTh","jsx","TableCell","clsx","Expander","as","open","e","stopPropagation","onKeyDown","key","preventDefault","displayName"],"mappings":"mRAOMA,EAA+BC,EAAAA,YAIjC,EAEQC,OAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,GAAAA,EACA,gBAAiBC,KACdC,GAEPC,KAEA,QAAe,IAAXP,GAA2C,mBAAZC,EAC/B,MAAM,IAAIO,MACN,uEAIF,MAAEC,eAAAA,GAAmBC,EAAAA,kBAErBC,EAAUL,EAAgC,WAG1CM,EAAqCH,EACrCE,OACA,EAGF,OAAAE,EAAAA,IAACC,EAAAA,UAAA,CACGX,UAAWY,EAAAA,KACP,yBACA,CAAG,uCAAyCb,GAC5CC,MAEAG,EACJC,IAAAA,EAEAL,SAAAW,EAAAA,IAACG,EAAAA,SAAA,CACGC,GAAG,SACHd,UAAWY,OAAK,8BAA+B,CAC1C,wCAA0Cf,IAE/CI,GAAAA,EACAc,KAAMlB,EACN,gBAAeK,EACf,aACIH,OAAW,EAAYS,GAAU,gBAErCV,QAAUkB,IACNA,EAAEC,kBACMnB,KAEZoB,UAAYF,KACM,UAAVA,EAAEG,KAA6B,MAAVH,EAAEG,OACvBH,EAAEC,kBACFD,EAAEI,iBACMtB,MAKfC,SAAYA,GAAAU,KACjB,IAMhBd,EAA6B0B,YAAc"}
+{"version":3,"file":"ExpandableTableRowController.cjs","sources":["../../../../src/components/table/ExpandableTableRowController.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { Expander } from \"../expander/Expander.js\";\nimport { TableCell } from \"./TableCell.js\";\nimport { useTableContext } from \"./tableContext.js\";\nimport type { ExpandableTableRowControllerProps } from \"./types.js\";\n\nconst ExpandableTableRowController = forwardRef<\n    HTMLTableCellElement,\n    ExpandableTableRowControllerProps\n>(\n    (\n        {\n            isOpen,\n            onClick,\n            children,\n            className,\n            id,\n            \"aria-controls\": ariaControls,\n            ...rest\n        },\n        ref,\n    ) => {\n        if (isOpen === undefined || typeof onClick !== \"function\") {\n            throw new Error(\n                \"ExpandableTableRowController must have ExpandableTableRow as parent\",\n            );\n        }\n\n        const { collapseToList } = useTableContext();\n\n        const dataTh = (rest as Record<string, string>)[\"data-th\"];\n\n        // pick text from data-th if possible, but only if it's a list\n        const showTextFromTh: string | undefined = collapseToList\n            ? dataTh\n            : undefined;\n\n        return (\n            <TableCell\n                className={clsx(\n                    \"jkl-table-cell--expand\",\n                    { [\"jkl-table-cell--expand-without-text\"]: !children },\n                    className,\n                )}\n                {...rest}\n                ref={ref}\n            >\n                <Expander\n                    as=\"button\"\n                    className={clsx(\"jkl-table-row-expand-button\", {\n                        [\"jkl-table-row-expand-button--expanded\"]: isOpen,\n                    })}\n                    id={id}\n                    open={isOpen}\n                    aria-controls={ariaControls}\n                    aria-label={\n                        children ? undefined : dataTh || \"Ekspander rad\"\n                    }\n                    onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n                        e.stopPropagation();\n                        onClick();\n                    }}\n                    onKeyDown={(e: React.KeyboardEvent<HTMLButtonElement>) => {\n                        if (e.key === \"Enter\" || e.key === \" \") {\n                            e.stopPropagation();\n                            e.preventDefault();\n                            onClick();\n                        }\n                    }}\n                >\n                    {/* show children. or try to use data-th if children is undefined */}\n                    {children ?? showTextFromTh}\n                </Expander>\n            </TableCell>\n        );\n    },\n);\n\nExpandableTableRowController.displayName = \"ExpandableTableRowController\";\n\nexport { ExpandableTableRowController };\n"],"names":["ExpandableTableRowController","forwardRef","isOpen","onClick","children","className","id","ariaControls","rest","ref","Error","collapseToList","useTableContext","dataTh","showTextFromTh","jsx","TableCell","clsx","Expander","as","open","e","stopPropagation","onKeyDown","key","preventDefault","displayName"],"mappings":"mRAOMA,EAA+BC,EAAAA,YAIjC,EAEQC,OAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,GAAAA,EACA,gBAAiBC,KACdC,GAEPC,KAEA,QAAe,IAAXP,GAA2C,mBAAZC,EAC/B,MAAM,IAAIO,MACN,uEAIF,MAAEC,eAAAA,GAAmBC,EAAAA,kBAErBC,EAAUL,EAAgC,WAG1CM,EAAqCH,EACrCE,OACA,EAGF,OAAAE,EAAAA,IAACC,EAAAA,UAAA,CACGX,UAAWY,EAAAA,KACP,yBACA,CAAG,uCAAyCb,GAC5CC,MAEAG,EACJC,IAAAA,EAEAL,SAAAW,EAAAA,IAACG,EAAAA,SAAA,CACGC,GAAG,SACHd,UAAWY,OAAK,8BAA+B,CAC1C,wCAA0Cf,IAE/CI,GAAAA,EACAc,KAAMlB,EACN,gBAAeK,EACf,aACIH,OAAW,EAAYS,GAAU,gBAErCV,QAAUkB,IACNA,EAAEC,kBACMnB,KAEZoB,UAAYF,KACM,UAAVA,EAAEG,KAA6B,MAAVH,EAAEG,OACvBH,EAAEC,kBACFD,EAAEI,iBACMtB,MAKfC,SAAYA,GAAAU,KACjB,IAMhBd,EAA6B0B,YAAc"}

package/build/cjs/components/table/Table.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.cjs","sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useState } from \"react\";\nimport { TableContextProvider } from \"./tableContext.js\";\nimport { TableProps } from \"./types.js\";\n\nconst Table = forwardRef<HTMLTableElement, TableProps>(\n    (\n        {\n            className,\n            caption,\n            children,\n            density,\n            collapseToList = false,\n            fullWidth = false,\n            tabIndex,\n            ...rest\n        },\n        ref,\n    ) => {\n        const [hasStickyHead, setHasStickyHead] = useState<boolean>(false);\n\n        return (\n            <TableContextProvider\n                state={{ density, collapseToList, setHasStickyHead }}\n            >\n                <table\n                    className={clsx(\"jkl-table\", className, {\n                        [\"jkl-table--full-width\"]: fullWidth,\n                        [\"jkl-table--collapse-to-list\"]: collapseToList,\n                    })}\n                    {...rest}\n                    // For content in a scrollable table to be accessible with keyboard\n                    // navigation we need to set tabIndex\n                    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n                    tabIndex={hasStickyHead ? 0 : tabIndex}\n                    ref={ref}\n                >\n                    {caption}\n                    {children}\n                </table>\n            </TableContextProvider>\n        );\n    },\n);\n\nTable.displayName = \"Table\";\n\nexport { Table };\n"],"names":["Table","forwardRef","className","caption","children","density","collapseToList","fullWidth","tabIndex","rest","ref","hasStickyHead","setHasStickyHead","useState","jsx","TableContextProvider","state","jsxs","clsx","displayName"],"mappings":"gNAKMA,EAAQC,EAAAA,YACV,EAEQC,UAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,eAAAA,GAAiB,EACjBC,UAAAA,GAAY,EACZC,SAAAA,KACGC,GAEPC,KAEA,MAAOC,EAAeC,GAAoBC,YAAkB,GAGxD,OAAAC,EAAAA,IAACC,EAAAA,qBAAA,CACGC,MAAO,CAAEX,QAAAA,EAASC,eAAAA,EAAgBM,iBAAAA,GAElCR,SAAAa,EAAAA,KAAC,QAAA,CACGf,UAAWgB,EAAAA,KAAK,YAAahB,EAAW,CACnC,wBAA0BK,EAC1B,8BAAgCD,OAEjCG,EAIJD,SAAUG,EAAgB,EAAIH,EAC9BE,IAAAA,EAECN,SAAA,CAAAD,EACAC,MACL,IAMhBJ,EAAMmB,YAAc"}
+{"version":3,"file":"Table.cjs","sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useState } from \"react\";\nimport { TableContextProvider } from \"./tableContext.js\";\nimport type { TableProps } from \"./types.js\";\n\nconst Table = forwardRef<HTMLTableElement, TableProps>(\n    (\n        {\n            className,\n            caption,\n            children,\n            density,\n            collapseToList = false,\n            fullWidth = false,\n            tabIndex,\n            ...rest\n        },\n        ref,\n    ) => {\n        const [hasStickyHead, setHasStickyHead] = useState<boolean>(false);\n\n        return (\n            <TableContextProvider\n                state={{ density, collapseToList, setHasStickyHead }}\n            >\n                <table\n                    className={clsx(\"jkl-table\", className, {\n                        [\"jkl-table--full-width\"]: fullWidth,\n                        [\"jkl-table--collapse-to-list\"]: collapseToList,\n                    })}\n                    {...rest}\n                    // For content in a scrollable table to be accessible with keyboard\n                    // navigation we need to set tabIndex\n                    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n                    tabIndex={hasStickyHead ? 0 : tabIndex}\n                    ref={ref}\n                >\n                    {caption}\n                    {children}\n                </table>\n            </TableContextProvider>\n        );\n    },\n);\n\nTable.displayName = \"Table\";\n\nexport { Table };\n"],"names":["Table","forwardRef","className","caption","children","density","collapseToList","fullWidth","tabIndex","rest","ref","hasStickyHead","setHasStickyHead","useState","jsx","TableContextProvider","state","jsxs","clsx","displayName"],"mappings":"gNAKMA,EAAQC,EAAAA,YACV,EAEQC,UAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,eAAAA,GAAiB,EACjBC,UAAAA,GAAY,EACZC,SAAAA,KACGC,GAEPC,KAEA,MAAOC,EAAeC,GAAoBC,YAAkB,GAGxD,OAAAC,EAAAA,IAACC,EAAAA,qBAAA,CACGC,MAAO,CAAEX,QAAAA,EAASC,eAAAA,EAAgBM,iBAAAA,GAElCR,SAAAa,EAAAA,KAAC,QAAA,CACGf,UAAWgB,EAAAA,KAAK,YAAahB,EAAW,CACnC,wBAA0BK,EAC1B,8BAAgCD,OAEjCG,EAIJD,SAAUG,EAAgB,EAAIH,EAC9BE,IAAAA,EAECN,SAAA,CAAAD,EACAC,MACL,IAMhBJ,EAAMmB,YAAc"}

package/build/cjs/components/table/TableBody.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.cjs","sources":["../../../../src/components/table/TableBody.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { TableSectionContextProvider } from \"./tableSectionContext.js\";\nimport { TableBodyProps } from \"./types.js\";\n\nconst TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(\n    (props, ref) => {\n        return (\n            <TableSectionContextProvider\n                state={{\n                    isTableHead: false,\n                    isTableBody: true,\n                    isTableFooter: false,\n                }}\n            >\n                <tbody {...props} ref={ref} />\n            </TableSectionContextProvider>\n        );\n    },\n);\n\nTableBody.displayName = \"TableBody\";\n\nexport { TableBody };\n"],"names":["TableBody","forwardRef","props","ref","jsx","TableSectionContextProvider","state","isTableHead","isTableBody","isTableFooter","children","displayName"],"mappings":"+KAIMA,EAAYC,EAAAA,YACd,CAACC,EAAOC,IAEAC,EAAAA,IAACC,EAAAA,4BAAA,CACGC,MAAO,CACHC,aAAa,EACbC,aAAa,EACbC,eAAe,GAGnBC,SAACN,EAAAA,IAAA,QAAA,IAAUF,EAAOC,IAAAA,QAMlCH,EAAUW,YAAc"}
+{"version":3,"file":"TableBody.cjs","sources":["../../../../src/components/table/TableBody.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { TableSectionContextProvider } from \"./tableSectionContext.js\";\nimport type { TableBodyProps } from \"./types.js\";\n\nconst TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(\n    (props, ref) => {\n        return (\n            <TableSectionContextProvider\n                state={{\n                    isTableHead: false,\n                    isTableBody: true,\n                    isTableFooter: false,\n                }}\n            >\n                <tbody {...props} ref={ref} />\n            </TableSectionContextProvider>\n        );\n    },\n);\n\nTableBody.displayName = \"TableBody\";\n\nexport { TableBody };\n"],"names":["TableBody","forwardRef","props","ref","jsx","TableSectionContextProvider","state","isTableHead","isTableBody","isTableFooter","children","displayName"],"mappings":"+KAIMA,EAAYC,EAAAA,YACd,CAACC,EAAOC,IAEAC,EAAAA,IAACC,EAAAA,4BAAA,CACGC,MAAO,CACHC,aAAa,EACbC,aAAa,EACbC,eAAe,GAGnBC,SAACN,EAAAA,IAAA,QAAA,IAAUF,EAAOC,IAAAA,QAMlCH,EAAUW,YAAc"}

package/build/cjs/components/table/TableCaption.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableCaption.cjs","sources":["../../../../src/components/table/TableCaption.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { TableCaptionProps } from \"./types.js\";\n\nconst TableCaption = forwardRef<HTMLTableCaptionElement, TableCaptionProps>(\n    ({ srOnly = true, ...rest }, ref) => {\n        return (\n            <caption\n                className={clsx(\"jkl-table-caption\", {\n                    [\"jkl-table-caption--sr-only\"]: srOnly,\n                })}\n                {...rest}\n                ref={ref}\n            />\n        );\n    },\n);\n\nTableCaption.displayName = \"TableCaption\";\n\nexport { TableCaption };\n"],"names":["TableCaption","forwardRef","srOnly","rest","ref","jsx","className","clsx","displayName"],"mappings":"6JAIMA,mBAAeC,YACjB,EAAGC,OAAAA,GAAS,KAASC,GAAQC,IAErBC,EAAAA,IAAC,UAAA,CACGC,UAAWC,OAAK,oBAAqB,CAChC,6BAA+BL,OAEhCC,EACJC,IAAAA,MAMhBJ,EAAaQ,YAAc"}
+{"version":3,"file":"TableCaption.cjs","sources":["../../../../src/components/table/TableCaption.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport type { TableCaptionProps } from \"./types.js\";\n\nconst TableCaption = forwardRef<HTMLTableCaptionElement, TableCaptionProps>(\n    ({ srOnly = true, ...rest }, ref) => {\n        return (\n            <caption\n                className={clsx(\"jkl-table-caption\", {\n                    [\"jkl-table-caption--sr-only\"]: srOnly,\n                })}\n                {...rest}\n                ref={ref}\n            />\n        );\n    },\n);\n\nTableCaption.displayName = \"TableCaption\";\n\nexport { TableCaption };\n"],"names":["TableCaption","forwardRef","srOnly","rest","ref","jsx","className","clsx","displayName"],"mappings":"6JAIMA,mBAAeC,YACjB,EAAGC,OAAAA,GAAS,KAASC,GAAQC,IAErBC,EAAAA,IAAC,UAAA,CACGC,UAAWC,OAAK,oBAAqB,CAChC,6BAA+BL,OAEhCC,EACJC,IAAAA,MAMhBJ,EAAaQ,YAAc"}

package/build/cjs/components/table/TableCell.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.cjs","sources":["../../../../src/components/table/TableCell.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useTableContext } from \"./tableContext.js\";\nimport { TableCellProps } from \"./types.js\";\n\nconst TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(\n    (\n        { align = \"left\", verticalAlign = \"top\", className, density, ...rest },\n        ref,\n    ) => {\n        const { density: contextDensity } = useTableContext();\n        return (\n            <td\n                className={clsx(\"jkl-table-cell\", className, {\n                    [\"jkl-table-cell--align-right\"]: align === \"right\",\n                    [\"jkl-table-cell--align-center\"]: align === \"center\",\n                    [\"jkl-table-cell--vertical-align-center\"]:\n                        verticalAlign === \"center\",\n                })}\n                {...rest}\n                data-density={density || contextDensity}\n                ref={ref}\n            />\n        );\n    },\n);\n\nTableCell.displayName = \"TableCell\";\n\nexport { TableCell };\n"],"names":["TableCell","forwardRef","align","verticalAlign","className","density","rest","ref","contextDensity","useTableContext","jsx","clsx","displayName"],"mappings":"gNAKMA,EAAYC,EAAAA,YACd,EACMC,MAAAA,EAAQ,OAAQC,cAAAA,EAAgB,MAAOC,UAAAA,EAAWC,QAAAA,KAAYC,GAChEC,KAEA,MAAQF,QAASG,GAAmBC,EAAgBA,kBAEhD,OAAAC,EAAAA,IAAC,KAAA,CACGN,UAAWO,EAAAA,KAAK,iBAAkBP,EAAW,CACxC,8BAA0C,UAAVF,EAChC,+BAA2C,WAAVA,EACjC,wCACqB,WAAlBC,OAEJG,EACJ,eAAcD,GAAWG,EACzBD,IAAAA,GAAA,IAMhBP,EAAUY,YAAc"}
+{"version":3,"file":"TableCell.cjs","sources":["../../../../src/components/table/TableCell.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useTableContext } from \"./tableContext.js\";\nimport type { TableCellProps } from \"./types.js\";\n\nconst TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(\n    (\n        { align = \"left\", verticalAlign = \"top\", className, density, ...rest },\n        ref,\n    ) => {\n        const { density: contextDensity } = useTableContext();\n        return (\n            <td\n                className={clsx(\"jkl-table-cell\", className, {\n                    [\"jkl-table-cell--align-right\"]: align === \"right\",\n                    [\"jkl-table-cell--align-center\"]: align === \"center\",\n                    [\"jkl-table-cell--vertical-align-center\"]:\n                        verticalAlign === \"center\",\n                })}\n                {...rest}\n                data-density={density || contextDensity}\n                ref={ref}\n            />\n        );\n    },\n);\n\nTableCell.displayName = \"TableCell\";\n\nexport { TableCell };\n"],"names":["TableCell","forwardRef","align","verticalAlign","className","density","rest","ref","contextDensity","useTableContext","jsx","clsx","displayName"],"mappings":"gNAKMA,EAAYC,EAAAA,YACd,EACMC,MAAAA,EAAQ,OAAQC,cAAAA,EAAgB,MAAOC,UAAAA,EAAWC,QAAAA,KAAYC,GAChEC,KAEA,MAAQF,QAASG,GAAmBC,EAAgBA,kBAEhD,OAAAC,EAAAA,IAAC,KAAA,CACGN,UAAWO,EAAAA,KAAK,iBAAkBP,EAAW,CACxC,8BAA0C,UAAVF,EAChC,+BAA2C,WAAVA,EACjC,wCACqB,WAAlBC,OAEJG,EACJ,eAAcD,GAAWG,EACzBD,IAAAA,GAAA,IAMhBP,EAAUY,YAAc"}

package/build/cjs/components/table/TableColumn.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableColumn.cjs","sources":["../../../../src/components/table/TableColumn.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { TableColumnProps } from \"./types.js\";\n\nconst TableColumn = forwardRef<HTMLTableColElement, TableColumnProps>(\n    (props, ref) => {\n        return <col {...props} ref={ref} />;\n    },\n);\n\nTableColumn.displayName = \"TableColumn\";\n\nexport { TableColumn };\n"],"names":["TableColumn","forwardRef","props","ref","jsx","displayName"],"mappings":"qHAGMA,mBAAcC,YAChB,CAACC,EAAOC,IACIC,EAAAA,IAAA,MAAA,IAAQF,EAAOC,IAAAA,MAI/BH,EAAYK,YAAc"}
+{"version":3,"file":"TableColumn.cjs","sources":["../../../../src/components/table/TableColumn.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport type { TableColumnProps } from \"./types.js\";\n\nconst TableColumn = forwardRef<HTMLTableColElement, TableColumnProps>(\n    (props, ref) => {\n        return <col {...props} ref={ref} />;\n    },\n);\n\nTableColumn.displayName = \"TableColumn\";\n\nexport { TableColumn };\n"],"names":["TableColumn","forwardRef","props","ref","jsx","displayName"],"mappings":"qHAGMA,mBAAcC,YAChB,CAACC,EAAOC,IACIC,EAAAA,IAAA,MAAA,IAAQF,EAAOC,IAAAA,MAI/BH,EAAYK,YAAc"}

package/build/cjs/components/table/TableColumnGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableColumnGroup.cjs","sources":["../../../../src/components/table/TableColumnGroup.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { TableColumnGroupProps } from \"./types.js\";\n\nconst TableColumnGroup = forwardRef<HTMLTableColElement, TableColumnGroupProps>(\n    (props, ref) => {\n        return <colgroup {...props} ref={ref} />;\n    },\n);\n\nTableColumnGroup.displayName = \"TableColumnGroup\";\n\nexport { TableColumnGroup };\n"],"names":["TableColumnGroup","forwardRef","props","ref","jsx","displayName"],"mappings":"qHAGMA,mBAAmBC,YACrB,CAACC,EAAOC,IACIC,EAAAA,IAAA,WAAA,IAAaF,EAAOC,IAAAA,MAIpCH,EAAiBK,YAAc"}
+{"version":3,"file":"TableColumnGroup.cjs","sources":["../../../../src/components/table/TableColumnGroup.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport type { TableColumnGroupProps } from \"./types.js\";\n\nconst TableColumnGroup = forwardRef<HTMLTableColElement, TableColumnGroupProps>(\n    (props, ref) => {\n        return <colgroup {...props} ref={ref} />;\n    },\n);\n\nTableColumnGroup.displayName = \"TableColumnGroup\";\n\nexport { TableColumnGroup };\n"],"names":["TableColumnGroup","forwardRef","props","ref","jsx","displayName"],"mappings":"qHAGMA,mBAAmBC,YACrB,CAACC,EAAOC,IACIC,EAAAA,IAAA,WAAA,IAAaF,EAAOC,IAAAA,MAIpCH,EAAiBK,YAAc"}

package/build/cjs/components/table/TableFooter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableFooter.cjs","sources":["../../../../src/components/table/TableFooter.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { TableSectionContextProvider } from \"./tableSectionContext.js\";\nimport { TableFooterProps } from \"./types.js\";\n\nconst TableFooter = forwardRef<HTMLTableSectionElement, TableFooterProps>(\n    ({ className, ...rest }, ref) => {\n        return (\n            <TableSectionContextProvider\n                state={{\n                    isTableHead: false,\n                    isTableBody: false,\n                    isTableFooter: true,\n                }}\n            >\n                <tfoot\n                    className={clsx(\"jkl-table-foot\", className)}\n                    {...rest}\n                    ref={ref}\n                />\n            </TableSectionContextProvider>\n        );\n    },\n);\n\nTableFooter.displayName = \"TableFooter\";\n\nexport { TableFooter };\n"],"names":["TableFooter","forwardRef","className","rest","ref","jsx","TableSectionContextProvider","state","isTableHead","isTableBody","isTableFooter","children","clsx","displayName"],"mappings":"uNAKMA,EAAcC,EAAAA,YAChB,EAAGC,UAAAA,KAAcC,GAAQC,IAEjBC,EAAAA,IAACC,EAAAA,4BAAA,CACGC,MAAO,CACHC,aAAa,EACbC,aAAa,EACbC,eAAe,GAGnBC,SAAAN,EAAAA,IAAC,QAAA,CACGH,UAAWU,EAAAA,KAAK,iBAAkBV,MAC9BC,EACJC,IAAAA,QAOpBJ,EAAYa,YAAc"}
+{"version":3,"file":"TableFooter.cjs","sources":["../../../../src/components/table/TableFooter.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { TableSectionContextProvider } from \"./tableSectionContext.js\";\nimport type { TableFooterProps } from \"./types.js\";\n\nconst TableFooter = forwardRef<HTMLTableSectionElement, TableFooterProps>(\n    ({ className, ...rest }, ref) => {\n        return (\n            <TableSectionContextProvider\n                state={{\n                    isTableHead: false,\n                    isTableBody: false,\n                    isTableFooter: true,\n                }}\n            >\n                <tfoot\n                    className={clsx(\"jkl-table-foot\", className)}\n                    {...rest}\n                    ref={ref}\n                />\n            </TableSectionContextProvider>\n        );\n    },\n);\n\nTableFooter.displayName = \"TableFooter\";\n\nexport { TableFooter };\n"],"names":["TableFooter","forwardRef","className","rest","ref","jsx","TableSectionContextProvider","state","isTableHead","isTableBody","isTableFooter","children","clsx","displayName"],"mappings":"uNAKMA,EAAcC,EAAAA,YAChB,EAAGC,UAAAA,KAAcC,GAAQC,IAEjBC,EAAAA,IAACC,EAAAA,4BAAA,CACGC,MAAO,CACHC,aAAa,EACbC,aAAa,EACbC,eAAe,GAGnBC,SAAAN,EAAAA,IAAC,QAAA,CACGH,UAAWU,EAAAA,KAAK,iBAAkBV,MAC9BC,EACJC,IAAAA,QAOpBJ,EAAYa,YAAc"}

package/build/cjs/components/table/TableHead.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableHead.cjs","sources":["../../../../src/components/table/TableHead.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useEffect } from \"react\";\nimport { useTableContext } from \"./tableContext.js\";\nimport { TableSectionContextProvider } from \"./tableSectionContext.js\";\nimport { TableHeadProps } from \"./types.js\";\n\nconst TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(\n    ({ className, srOnly, sticky = false, ...rest }, ref) => {\n        const { setHasStickyHead } = useTableContext();\n        useEffect(() => {\n            setHasStickyHead(sticky);\n        }, [sticky, setHasStickyHead]);\n\n        return (\n            <TableSectionContextProvider\n                state={{\n                    isTableHead: true,\n                    isTableBody: false,\n                    isTableFooter: false,\n                }}\n            >\n                <thead\n                    className={clsx(\"jkl-table-head\", className, {\n                        [\"jkl-table-head--sr-only\"]: srOnly,\n                        [\"jkl-table-head--sticky\"]: sticky,\n                    })}\n                    {...rest}\n                    ref={ref}\n                />\n            </TableSectionContextProvider>\n        );\n    },\n);\n\nTableHead.displayName = \"TableHead\";\n\nexport { TableHead };\n"],"names":["TableHead","forwardRef","className","srOnly","sticky","rest","ref","setHasStickyHead","useTableContext","useEffect","jsx","TableSectionContextProvider","state","isTableHead","isTableBody","isTableFooter","children","clsx","displayName"],"mappings":"uPAMMA,EAAYC,EAAAA,YACd,EAAGC,UAAAA,EAAWC,OAAAA,EAAQC,OAAAA,GAAS,KAAUC,GAAQC,KACvC,MAAEC,iBAAAA,GAAqBC,EAAAA,kBAC7BC,OAAAA,EAAAA,WAAU,KACNF,EAAiBH,EAAM,GACxB,CAACA,EAAQG,IAGRG,EAAAA,IAACC,EAAAA,4BAAA,CACGC,MAAO,CACHC,aAAa,EACbC,aAAa,EACbC,eAAe,GAGnBC,SAAAN,EAAAA,IAAC,QAAA,CACGR,UAAWe,EAAAA,KAAK,iBAAkBf,EAAW,CACxC,0BAA4BC,EAC5B,yBAA2BC,OAE5BC,EACJC,IAAAA,KACJ,IAMhBN,EAAUkB,YAAc"}
+{"version":3,"file":"TableHead.cjs","sources":["../../../../src/components/table/TableHead.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useEffect } from \"react\";\nimport { useTableContext } from \"./tableContext.js\";\nimport { TableSectionContextProvider } from \"./tableSectionContext.js\";\nimport type { TableHeadProps } from \"./types.js\";\n\nconst TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(\n    ({ className, srOnly, sticky = false, ...rest }, ref) => {\n        const { setHasStickyHead } = useTableContext();\n        useEffect(() => {\n            setHasStickyHead(sticky);\n        }, [sticky, setHasStickyHead]);\n\n        return (\n            <TableSectionContextProvider\n                state={{\n                    isTableHead: true,\n                    isTableBody: false,\n                    isTableFooter: false,\n                }}\n            >\n                <thead\n                    className={clsx(\"jkl-table-head\", className, {\n                        [\"jkl-table-head--sr-only\"]: srOnly,\n                        [\"jkl-table-head--sticky\"]: sticky,\n                    })}\n                    {...rest}\n                    ref={ref}\n                />\n            </TableSectionContextProvider>\n        );\n    },\n);\n\nTableHead.displayName = \"TableHead\";\n\nexport { TableHead };\n"],"names":["TableHead","forwardRef","className","srOnly","sticky","rest","ref","setHasStickyHead","useTableContext","useEffect","jsx","TableSectionContextProvider","state","isTableHead","isTableBody","isTableFooter","children","clsx","displayName"],"mappings":"uPAMMA,EAAYC,EAAAA,YACd,EAAGC,UAAAA,EAAWC,OAAAA,EAAQC,OAAAA,GAAS,KAAUC,GAAQC,KACvC,MAAEC,iBAAAA,GAAqBC,EAAAA,kBAC7BC,OAAAA,EAAAA,WAAU,KACNF,EAAiBH,EAAM,GACxB,CAACA,EAAQG,IAGRG,EAAAA,IAACC,EAAAA,4BAAA,CACGC,MAAO,CACHC,aAAa,EACbC,aAAa,EACbC,eAAe,GAGnBC,SAAAN,EAAAA,IAAC,QAAA,CACGR,UAAWe,EAAAA,KAAK,iBAAkBf,EAAW,CACxC,0BAA4BC,EAC5B,yBAA2BC,OAE5BC,EACJC,IAAAA,KACJ,IAMhBN,EAAUkB,YAAc"}

package/build/cjs/components/table/TableHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.cjs","sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, MouseEventHandler } from \"react\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { useTableContext } from \"./tableContext.js\";\nimport { TableHeaderProps } from \"./types.js\";\n\nexport type TableSortDirection = \"asc\" | \"desc\";\n\nconst TableHeader = forwardRef<HTMLTableCellElement, TableHeaderProps>(\n    (props, ref) => {\n        const {\n            bold = true,\n            density,\n            sortable,\n            className,\n            scope = \"col\",\n            srOnly,\n            align = \"left\",\n            children,\n            onClick,\n            ...rest\n        } = props;\n        const { density: contextDensity } = useTableContext();\n\n        const handleClick: MouseEventHandler<HTMLTableCellElement> = (e) => {\n            onClick?.(e);\n            sortable?.onClick();\n        };\n\n        return (\n            <th\n                className={clsx(\"jkl-table-header\", className, {\n                    [\"jkl-table-header--bold\"]: bold,\n                    [\"jkl-table-header--align-right\"]: align === \"right\",\n                    [\"jkl-table-header--align-center\"]: align === \"center\",\n                    [\"jkl-table-header--sr-only\"]: srOnly,\n                    [\"jkl-table-header--sortable\"]:\n                        typeof sortable !== \"undefined\",\n                })}\n                scope={scope}\n                onClick={handleClick}\n                {...rest}\n                data-density={density || contextDensity}\n                ref={ref}\n            >\n                {children}\n                {sortable && (\n                    <div\n                        className={clsx(\"jkl-table-header__arrows\", {\n                            \"jkl-table-header__arrows--active\": Boolean(\n                                sortable.direction,\n                            ),\n                        })}\n                    >\n                        {sortable.direction && (\n                            <ArrowVerticalAnimated\n                                pointingDown={sortable.direction === \"desc\"}\n                                bold\n                            />\n                        )}\n                    </div>\n                )}\n            </th>\n        );\n    },\n);\n\nTableHeader.displayName = \"TableHeader\";\n\nexport { TableHeader };\n"],"names":["TableHeader","forwardRef","props","ref","bold","density","sortable","className","scope","srOnly","align","children","onClick","rest","contextDensity","useTableContext","jsxs","clsx","e","jsx","direction","ArrowVerticalAnimated","pointingDown","displayName"],"mappings":"8QAQMA,EAAcC,EAAAA,YAChB,CAACC,EAAOC,KACE,MACFC,KAAAA,GAAO,EACPC,QAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,MAAAA,EAAQ,MACRC,OAAAA,EACAC,MAAAA,EAAQ,OACRC,SAAAA,EACAC,QAAAA,KACGC,GACHX,GACIG,QAASS,GAAmBC,EAAgBA,kBAQhD,OAAAC,EAAAA,KAAC,KAAA,CACGT,UAAWU,EAAAA,KAAK,mBAAoBV,EAAW,CAC1C,yBAA2BH,EAC3B,gCAA4C,UAAVM,EAClC,iCAA6C,WAAVA,EACnC,4BAA8BD,EAC9B,oCACUH,EAAa,MAE5BE,MAAAA,EACAI,QAhBsDM,IAC1D,MAAAN,GAAAA,EAAUM,GACV,MAAAZ,GAAAA,EAAUM,SAAQ,KAeVC,EACJ,eAAcR,GAAWS,EACzBX,IAAAA,EAECQ,SAAA,CAAAA,EACAL,GACGa,EAAAA,IAAC,MAAA,CACGZ,UAAWU,OAAK,2BAA4B,CACxC,qCACIX,EAASc,YAIhBT,WAASS,WACND,EAAAA,IAACE,EAAAA,sBAAA,CACGC,aAAqC,SAAvBhB,EAASc,UACvBhB,MAAI,QAGhB,IAOpBJ,EAAYuB,YAAc"}
+{"version":3,"file":"TableHeader.cjs","sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, type MouseEventHandler } from \"react\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { useTableContext } from \"./tableContext.js\";\nimport type { TableHeaderProps } from \"./types.js\";\n\nexport type TableSortDirection = \"asc\" | \"desc\";\n\nconst TableHeader = forwardRef<HTMLTableCellElement, TableHeaderProps>(\n    (props, ref) => {\n        const {\n            bold = true,\n            density,\n            sortable,\n            className,\n            scope = \"col\",\n            srOnly,\n            align = \"left\",\n            children,\n            onClick,\n            ...rest\n        } = props;\n        const { density: contextDensity } = useTableContext();\n\n        const handleClick: MouseEventHandler<HTMLTableCellElement> = (e) => {\n            onClick?.(e);\n            sortable?.onClick();\n        };\n\n        return (\n            <th\n                className={clsx(\"jkl-table-header\", className, {\n                    [\"jkl-table-header--bold\"]: bold,\n                    [\"jkl-table-header--align-right\"]: align === \"right\",\n                    [\"jkl-table-header--align-center\"]: align === \"center\",\n                    [\"jkl-table-header--sr-only\"]: srOnly,\n                    [\"jkl-table-header--sortable\"]:\n                        typeof sortable !== \"undefined\",\n                })}\n                scope={scope}\n                onClick={handleClick}\n                {...rest}\n                data-density={density || contextDensity}\n                ref={ref}\n            >\n                {children}\n                {sortable && (\n                    <div\n                        className={clsx(\"jkl-table-header__arrows\", {\n                            \"jkl-table-header__arrows--active\": Boolean(\n                                sortable.direction,\n                            ),\n                        })}\n                    >\n                        {sortable.direction && (\n                            <ArrowVerticalAnimated\n                                pointingDown={sortable.direction === \"desc\"}\n                                bold\n                            />\n                        )}\n                    </div>\n                )}\n            </th>\n        );\n    },\n);\n\nTableHeader.displayName = \"TableHeader\";\n\nexport { TableHeader };\n"],"names":["TableHeader","forwardRef","props","ref","bold","density","sortable","className","scope","srOnly","align","children","onClick","rest","contextDensity","useTableContext","jsxs","clsx","e","jsx","direction","ArrowVerticalAnimated","pointingDown","displayName"],"mappings":"8QAQMA,EAAcC,EAAAA,YAChB,CAACC,EAAOC,KACE,MACFC,KAAAA,GAAO,EACPC,QAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,MAAAA,EAAQ,MACRC,OAAAA,EACAC,MAAAA,EAAQ,OACRC,SAAAA,EACAC,QAAAA,KACGC,GACHX,GACIG,QAASS,GAAmBC,EAAgBA,kBAQhD,OAAAC,EAAAA,KAAC,KAAA,CACGT,UAAWU,EAAAA,KAAK,mBAAoBV,EAAW,CAC1C,yBAA2BH,EAC3B,gCAA4C,UAAVM,EAClC,iCAA6C,WAAVA,EACnC,4BAA8BD,EAC9B,oCACUH,EAAa,MAE5BE,MAAAA,EACAI,QAhBsDM,IAC1D,MAAAN,GAAAA,EAAUM,GACV,MAAAZ,GAAAA,EAAUM,SAAQ,KAeVC,EACJ,eAAcR,GAAWS,EACzBX,IAAAA,EAECQ,SAAA,CAAAA,EACAL,GACGa,EAAAA,IAAC,MAAA,CACGZ,UAAWU,OAAK,2BAA4B,CACxC,qCACIX,EAASc,YAIhBT,WAASS,WACND,EAAAA,IAACE,EAAAA,sBAAA,CACGC,aAAqC,SAAvBhB,EAASc,UACvBhB,MAAI,QAGhB,IAOpBJ,EAAYuB,YAAc"}

package/build/cjs/components/table/TablePagination.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../../clsx-E3yX_9sL.cjs"),a=require("react"),n=require("../../hooks/useId/useId.cjs"),t=require("../icon/icons/ChevronLeftIcon.cjs"),l=require("../icon/icons/ChevronRightIcon.cjs"),s=require("../icon-button/IconButton.cjs"),r=require("../select/NativeSelect.cjs"),c=require("../text-input/TextInput.cjs"),o=require("./tableContext.cjs");const u=a.forwardRef(((u,j)=>{const{activePage:d=0,totalNumberOfRows:p,rowsPerPage:b,rowsPerPageItems:m,className:x,density:h,id:k,withGoToPage:v=!1,onChange:_,onChangeRowsPerPage:C,labels:N={rowsPerPage:"Rader per side",previous:"Forrige",next:"Neste"},...P}=u,f=n.useId(k||"jkl-table-pagination",{generateSuffix:!k}),{density:y}=o.useTableContext(),I=b<=0?1:Math.ceil(p/b),[S,w]=a.useState(function(e,i,a){return i<e?e:i>a?a:i}(0,d,I-1)),q=a.useCallback((e=>{const i=Number.parseInt(e.currentTarget.dataset.number);_(e,i,S),w(i),M(String(i+1))}),[_,w,S]),[A,M]=a.useState(String(S+1)),T=a.useCallback((e=>{M(e.target.value);try{const i=Number.parseInt(e.target.value)-1;if(Number.isNaN(i))return;i>=0&&i<I&&(_(e,i,S),w(i))}catch{return}}),[_,M,w,S,I]),O=a.useCallback((e=>{if(0===S)return void _(e,S,S);const i=S-1;_(e,i,S),w(i),M(String(i+1))}),[_,w,S]),R=a.useCallback((e=>{if(S===I-1)return void _(e,S,S);const i=S+1;_(e,i,S),w(i),M(String(i+1))}),[_,w,I,S]);return e.jsxs("div",{className:i.clsx("jkl-table-pagination",x),...P,id:f,"data-density":h||y,ref:j,children:[e.jsx("div",{className:"jkl-table-pagination__left",children:e.jsxs("div",{className:"jkl-table-pagination__picker jkl-table-pagination__picker--rows",children:[e.jsxs("span",{className:"jkl-table-pagination__picker-label","aria-hidden":"true",children:[N.rowsPerPage,":"]}),e.jsx(r.NativeSelect,{className:"jkl-table-pagination__picker-input",label:N.rowsPerPage,labelProps:{srOnly:!0},name:`${f}-rows-per-page`,items:m.map((e=>"number"==typeof e?String(e):{label:e.label,value:String(e.value)})),value:String(b),onChange:C,width:"min(8rem, 100%)",inline:!0})]})}),e.jsx("div",{className:"jkl-table-pagination__right",children:1!==I&&e.jsxs("nav",{className:"jkl-table-pagination__nav",children:[v&&e.jsxs("div",{className:"jkl-table-pagination__picker jkl-table-pagination__picker--page",children:[e.jsxs("span",{className:"jkl-table-pagination__picker-label","aria-hidden":"true",children:["object"==typeof v?v.gotoLabel:"Gå til side",":"]}),e.jsx(c.TextInput,{className:"jkl-table-pagination__picker-input",label:"object"==typeof v?v.gotoLabel:"Gå til side",labelProps:{srOnly:!0},name:`${f}-go-to-page`,value:A,width:"min(4rem, 100%)",onChange:T,"aria-invalid":A&&A!==String(S+1)?"true":void 0})]}),e.jsxs("ul",{children:[e.jsx("li",{children:e.jsx(s.IconButton,{className:"jkl-table-pagination__previous",title:N.previous,onClick:O,children:e.jsx(t.ChevronLeftIcon,{})})}),e.jsx(g,{id:f,activePage:d,numberOfPages:I,onPageClick:q}),e.jsx("li",{children:e.jsx(s.IconButton,{className:"jkl-table-pagination__next",title:N.next,onClick:R,children:e.jsx(l.ChevronRightIcon,{})})})]})]})})]})})),g=({id:a,activePage:n,numberOfPages:t,onPageClick:l})=>{if(t<=7)return e.jsx(e.Fragment,{children:Array.from({length:t}).map(((t,s)=>e.jsx("li",{children:e.jsx("button",{className:i.clsx("jkl-table-pagination__page",{"jkl-table-pagination__page--active":n===s}),type:"button","data-number":s,onClick:l,children:s+1})},`${a}-page-${s}`)))});const s=n>3&&t>7,r=n<t-4&&t>7,c=Math.min(Math.max(n-2,1),t-6),o=Math.min(c+1,t-5),u=Math.min(o+1,t-4),g=Math.min(o+2,t-3),d=Math.min(o+3,t-2);return e.jsxs(e.Fragment,{children:[e.jsx("li",{children:e.jsx(j,{isActive:0===n,number:0,onClick:l})}),e.jsx("li",{children:s?e.jsx("span",{className:"jkl-table-pagination__ellipsis","aria-hidden":!0,children:"..."}):e.jsx(j,{isActive:n===c,number:c,onClick:l})}),e.jsx("li",{children:e.jsx(j,{isActive:n===o,number:o,onClick:l})}),e.jsx("li",{children:e.jsx(j,{isActive:n===u,number:u,onClick:l})}),e.jsx("li",{children:e.jsx(j,{isActive:n===g,number:g,onClick:l})}),e.jsx("li",{children:r?e.jsx("span",{className:"jkl-table-pagination__ellipsis","aria-hidden":!0,children:"..."}):e.jsx(j,{isActive:n===d,number:d,onClick:l})}),e.jsx("li",{children:e.jsx(j,{isActive:n===t-1,number:t-1,onClick:l})})]})},j=({isActive:a,number:n,onClick:t,...l})=>e.jsx("button",{className:i.clsx("jkl-table-pagination__page",{"jkl-table-pagination__page--active":a}),type:"button","data-number":n,onClick:t,...l,children:n+1});u.displayName="TablePagination",exports.TablePagination=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../../clsx-E3yX_9sL.cjs"),a=require("react"),n=require("../../hooks/useId/useId.cjs"),t=require("../icon-button/IconButton.cjs"),l=require("../icon/icons/ChevronLeftIcon.cjs"),s=require("../icon/icons/ChevronRightIcon.cjs"),r=require("../select/NativeSelect.cjs"),c=require("../text-input/TextInput.cjs"),o=require("./tableContext.cjs");const u=a.forwardRef(((u,j)=>{const{activePage:d=0,totalNumberOfRows:p,rowsPerPage:b,rowsPerPageItems:m,className:x,density:h,id:k,withGoToPage:v=!1,onChange:_,onChangeRowsPerPage:C,labels:N={rowsPerPage:"Rader per side",previous:"Forrige",next:"Neste"},...P}=u,f=n.useId(k||"jkl-table-pagination",{generateSuffix:!k}),{density:y}=o.useTableContext(),I=b<=0?1:Math.ceil(p/b),[S,w]=a.useState(function(e,i,a){return i<e?e:i>a?a:i}(0,d,I-1)),q=a.useCallback((e=>{const i=Number.parseInt(e.currentTarget.dataset.number);_(e,i,S),w(i),M(String(i+1))}),[_,S]),[A,M]=a.useState(String(S+1)),T=a.useCallback((e=>{M(e.target.value);try{const i=Number.parseInt(e.target.value)-1;if(Number.isNaN(i))return;i>=0&&i<I&&(_(e,i,S),w(i))}catch{return}}),[_,S,I]),O=a.useCallback((e=>{if(0===S)return void _(e,S,S);const i=S-1;_(e,i,S),w(i),M(String(i+1))}),[_,S]),R=a.useCallback((e=>{if(S===I-1)return void _(e,S,S);const i=S+1;_(e,i,S),w(i),M(String(i+1))}),[_,I,S]);return e.jsxs("div",{className:i.clsx("jkl-table-pagination",x),...P,id:f,"data-density":h||y,ref:j,children:[e.jsx("div",{className:"jkl-table-pagination__left",children:e.jsxs("div",{className:"jkl-table-pagination__picker jkl-table-pagination__picker--rows",children:[e.jsxs("span",{className:"jkl-table-pagination__picker-label","aria-hidden":"true",children:[N.rowsPerPage,":"]}),e.jsx(r.NativeSelect,{className:"jkl-table-pagination__picker-input",label:N.rowsPerPage,labelProps:{srOnly:!0},name:`${f}-rows-per-page`,items:m.map((e=>"number"==typeof e?String(e):{label:e.label,value:String(e.value)})),value:String(b),onChange:C,width:"min(8rem, 100%)",inline:!0})]})}),e.jsx("div",{className:"jkl-table-pagination__right",children:1!==I&&e.jsxs("nav",{className:"jkl-table-pagination__nav",children:[v&&e.jsxs("div",{className:"jkl-table-pagination__picker jkl-table-pagination__picker--page",children:[e.jsxs("span",{className:"jkl-table-pagination__picker-label","aria-hidden":"true",children:["object"==typeof v?v.gotoLabel:"Gå til side",":"]}),e.jsx(c.TextInput,{className:"jkl-table-pagination__picker-input",label:"object"==typeof v?v.gotoLabel:"Gå til side",labelProps:{srOnly:!0},name:`${f}-go-to-page`,value:A,width:"min(4rem, 100%)",onChange:T,"aria-invalid":A&&A!==String(S+1)?"true":void 0})]}),e.jsxs("ul",{children:[e.jsx("li",{children:e.jsx(t.IconButton,{className:"jkl-table-pagination__previous",title:N.previous,onClick:O,children:e.jsx(l.ChevronLeftIcon,{})})}),e.jsx(g,{id:f,activePage:d,numberOfPages:I,onPageClick:q}),e.jsx("li",{children:e.jsx(t.IconButton,{className:"jkl-table-pagination__next",title:N.next,onClick:R,children:e.jsx(s.ChevronRightIcon,{})})})]})]})})]})})),g=({id:a,activePage:n,numberOfPages:t,onPageClick:l})=>{if(t<=7)return e.jsx(e.Fragment,{children:Array.from({length:t}).map(((t,s)=>e.jsx("li",{children:e.jsx("button",{className:i.clsx("jkl-table-pagination__page",{"jkl-table-pagination__page--active":n===s}),type:"button","data-number":s,onClick:l,children:s+1})},`${a}-page-${s}`)))});const s=n>3&&t>7,r=n<t-4&&t>7,c=Math.min(Math.max(n-2,1),t-6),o=Math.min(c+1,t-5),u=Math.min(o+1,t-4),g=Math.min(o+2,t-3),d=Math.min(o+3,t-2);return e.jsxs(e.Fragment,{children:[e.jsx("li",{children:e.jsx(j,{isActive:0===n,number:0,onClick:l})}),e.jsx("li",{children:s?e.jsx("span",{className:"jkl-table-pagination__ellipsis","aria-hidden":!0,children:"..."}):e.jsx(j,{isActive:n===c,number:c,onClick:l})}),e.jsx("li",{children:e.jsx(j,{isActive:n===o,number:o,onClick:l})}),e.jsx("li",{children:e.jsx(j,{isActive:n===u,number:u,onClick:l})}),e.jsx("li",{children:e.jsx(j,{isActive:n===g,number:g,onClick:l})}),e.jsx("li",{children:r?e.jsx("span",{className:"jkl-table-pagination__ellipsis","aria-hidden":!0,children:"..."}):e.jsx(j,{isActive:n===d,number:d,onClick:l})}),e.jsx("li",{children:e.jsx(j,{isActive:n===t-1,number:t-1,onClick:l})})]})},j=({isActive:a,number:n,onClick:t,...l})=>e.jsx("button",{className:i.clsx("jkl-table-pagination__page",{"jkl-table-pagination__page--active":a}),type:"button","data-number":n,onClick:t,...l,children:n+1});u.displayName="TablePagination",exports.TablePagination=u;
 //# sourceMappingURL=TablePagination.cjs.map