@fremtind/jokul 0.71.1 → 1.0.0

package/build/es/components/popover/Popover.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{useMergeRefs as t,FloatingPortal as n,FloatingFocusManager as o,useFloating as s,autoUpdate as r,offset as a,flip as l,shift as i,useClick as c,useHover as u,useFocus as d,useDismiss as p,useRole as f,useInteractions as m}from"@floating-ui/react";import{c as g}from"../../../clsx-BeLtu-UY.js";import*as h from"react";import{getThemeAndDensity as v}from"../../utilities/getThemeAndDensity.js";const x=h.createContext(null),y=()=>{const e=h.useContext(x);if(null==e)throw new Error("Popover komponenter må brukes innenfor en <Popover /> komponent");return e},F=({children:t,...n})=>{const o=(({open:e,onOpenChange:t,placement:n="bottom-start",strategy:o="absolute",modal:g=!0,offset:v=4,positionReference:x,hoverOptions:y,focusOptions:F,clickOptions:R,roleOptions:b,dismissOptions:k})=>{const[C,O]=h.useState(e),P=e??C,E=t??O,j=s({open:P,onOpenChange:E,placement:n,strategy:o,middleware:[a(v),l({padding:5,fallbackPlacements:["bottom","top"]}),i({padding:12})],whileElementsMounted:r}),w=j.context,M=c(w,{enabled:!1,...R}),D=u(w,{enabled:!1,...y}),T=d(w,{enabled:!1,...F}),A=p(w,k),N=f(w,b),S=m([M,A,T,D,N]);return h.useLayoutEffect((()=>{x&&j.refs.setPositionReference(null==x?void 0:x.current)}),[x,j.refs]),h.useMemo((()=>({open:P,onOpenChange:E,modal:g,...S,...j})),[P,E,g,S,j])})({...n});return e(x.Provider,{value:o,children:t})},R=h.forwardRef((function({children:n,asChild:o=!1,...s},r){const{refs:a,getReferenceProps:l,open:i,onOpenChange:c}=y(),u=n.ref,d=t([a.setReference,r,u]);return o&&h.isValidElement(n)?h.cloneElement(n,l({ref:d,...s,...n.props})):e("button",{ref:d,onClick:()=>null==c?void 0:c(!i),"aria-expanded":i,...l(s),children:n})})),b=h.forwardRef((function({style:s,className:r,padding:a=0,initialFocus:l=0,returnFocus:i=!0,...c},u){const{context:d,modal:p,refs:f,open:m,floatingStyles:x,getFloatingProps:F}=y(),R=t([f.setFloating,u]),b=f.reference.current,{theme:k,density:C}=v((P=b)&&"contextElement"in P?b.contextElement:b),O=h.useRef(null);var P;return h.useEffect((()=>{var e;O.current=(null==(e=d.elements.domReference)?void 0:e.closest("[data-portal]"))||document.body}),[d.elements.domReference]),m?e(n,{root:O.current,children:e(o,{context:d,modal:p,initialFocus:l,returnFocus:i,children:e("div",{"data-theme":k,"data-layout-density":C,className:g("jkl jkl-popover",r),ref:R,style:{...s,...x,"--popover-padding":`var(--jkl-spacing-${a})`},...F(c),children:c.children})})}):null}));F.Trigger=R,F.Content=b;export{F as Popover,F as default};
+import{jsx as e}from"react/jsx-runtime";import{useMergeRefs as t,FloatingPortal as n,FloatingFocusManager as o,useFloating as s,autoUpdate as r,offset as a,flip as i,shift as l,useClick as c,useHover as u,useFocus as d,useDismiss as p,useRole as f,useInteractions as m}from"@floating-ui/react";import{c as g}from"../../../clsx-BeLtu-UY.js";import*as h from"react";import{getThemeAndDensity as v}from"../../utilities/getThemeAndDensity.js";const x=h.createContext(null),y=()=>{const e=h.useContext(x);if(null==e)throw new Error("Popover komponenter må brukes innenfor en <Popover /> komponent");return e},F=({children:t,...n})=>{const o=(({open:e,onOpenChange:t,placement:n="bottom-start",strategy:o="absolute",modal:g=!0,offset:v=4,positionReference:x,hoverOptions:y,focusOptions:F,clickOptions:R,roleOptions:b,dismissOptions:k})=>{const[C,O]=h.useState(e),P=e??C,E=t??O,j=s({open:P,onOpenChange:E,placement:n,strategy:o,middleware:[a(v),i({padding:5,fallbackPlacements:["bottom","top"]}),l({padding:12})],whileElementsMounted:r}),w=j.context,M=c(w,{enabled:!1,...R}),D=u(w,{enabled:!1,...y}),T=d(w,{enabled:!1,...F}),A=p(w,k),N=f(w,b),S=m([M,A,T,D,N]);return h.useLayoutEffect((()=>{x&&j.refs.setPositionReference(x?.current)}),[x,j.refs]),h.useMemo((()=>({open:P,onOpenChange:E,modal:g,...S,...j})),[P,E,g,S,j])})({...n});return e(x.Provider,{value:o,children:t})},R=h.forwardRef((function({children:n,asChild:o=!1,...s},r){const{refs:a,getReferenceProps:i,open:l,onOpenChange:c}=y(),u=n.ref,d=t([a.setReference,r,u]);return o&&h.isValidElement(n)?h.cloneElement(n,i({ref:d,...s,...n.props})):e("button",{ref:d,onClick:()=>c?.(!l),"aria-expanded":l,...i(s),children:n})})),b=h.forwardRef((function({style:s,className:r,padding:a=0,initialFocus:i=0,returnFocus:l=!0,...c},u){const{context:d,modal:p,refs:f,open:m,floatingStyles:x,getFloatingProps:F}=y(),R=t([f.setFloating,u]),b=f.reference.current,{theme:k,density:C}=v((P=b)&&"contextElement"in P?b.contextElement:b),O=h.useRef(null);var P;return h.useEffect((()=>{O.current=d.elements.domReference?.closest("[data-portal]")||document.body}),[d.elements.domReference]),m?e(n,{root:O.current,children:e(o,{context:d,modal:p,initialFocus:i,returnFocus:l,children:e("div",{"data-theme":k,"data-layout-density":C,className:g("jkl jkl-popover",r),ref:R,style:{...s,...x,"--popover-padding":`var(--jkl-spacing-${a})`},...F(c),children:c.children})})}):null}));F.Trigger=R,F.Content=b;export{F as Popover,F as default};
 //# sourceMappingURL=Popover.js.map

package/build/es/components/popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":["../../../../src/components/popover/Popover.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    FloatingPortal,\n    type ReferenceElement,\n    type VirtualElement,\n    autoUpdate,\n    flip,\n    offset,\n    shift,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n    useMergeRefs,\n    useRole,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\nimport type { PopoverOptions } from \"./types.js\";\n\nconst usePopover = ({\n    open: _open,\n    onOpenChange: _onOpenChange,\n    placement = \"bottom-start\",\n    strategy = \"absolute\",\n    modal = true,\n    offset: _offset = 4,\n    positionReference,\n    hoverOptions,\n    focusOptions,\n    clickOptions,\n    roleOptions,\n    dismissOptions,\n}: PopoverOptions) => {\n    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(_open);\n\n    const open = _open ?? uncontrolledOpen;\n    const onOpenChange = _onOpenChange ?? setUncontrolledOpen;\n\n    const data = useFloating({\n        open,\n        onOpenChange,\n        placement,\n        strategy,\n        middleware: [\n            offset(_offset),\n            flip({ padding: 5, fallbackPlacements: [\"bottom\", \"top\"] }),\n            shift({ padding: 12 }),\n        ],\n        whileElementsMounted: autoUpdate,\n    });\n\n    const context = data.context;\n\n    const click = useClick(context, {\n        enabled: false,\n        ...clickOptions,\n    });\n    const hover = useHover(context, { enabled: false, ...hoverOptions });\n    const focus = useFocus(context, { enabled: false, ...focusOptions });\n    const dismiss = useDismiss(context, dismissOptions);\n    const role = useRole(context, roleOptions);\n\n    const interactions = useInteractions([click, dismiss, focus, hover, role]);\n\n    React.useLayoutEffect(() => {\n        if (positionReference) {\n            data.refs.setPositionReference(positionReference?.current);\n        }\n    }, [positionReference, data.refs]);\n\n    return React.useMemo(\n        () => ({\n            open,\n            onOpenChange,\n            modal,\n            ...interactions,\n            ...data,\n        }),\n        [open, onOpenChange, modal, interactions, data],\n    );\n};\n\ntype PopoverContextType = ReturnType<typeof usePopover> | null;\n\nconst PopoverContext = React.createContext<PopoverContextType>(null);\n\nconst usePopoverContext = () => {\n    const context = React.useContext(PopoverContext);\n\n    if (context == null) {\n        throw new Error(\n            \"Popover komponenter må brukes innenfor en <Popover /> komponent\",\n        );\n    }\n\n    return context;\n};\n\nexport const Popover = ({\n    children,\n    ...restOptions\n}: {\n    children: React.ReactNode;\n} & PopoverOptions) => {\n    const popover = usePopover({ ...restOptions });\n    return (\n        <PopoverContext.Provider value={popover}>\n            {children}\n        </PopoverContext.Provider>\n    );\n};\n\ninterface PopoverTriggerProps {\n    children: React.ReactNode;\n    /**\n     * Rendrer komponenten som child-elementet sitt, og slår sammen egenskaper og props.\n     *\n     * Default er `false`.\n     *\n     * @example\n     * ```tsx\n     * <Component asChild foo=\"bar\">\n     *    <Child baz=\"qux\" />\n     * </Component>\n     *\n     * // Rendrer følgende:\n     * <Child foo=\"bar\" baz=\"qux\" />\n     * ```\n     */\n    asChild?: boolean;\n}\n\nconst PopoverTrigger = React.forwardRef<\n    HTMLElement,\n    React.HTMLProps<HTMLElement> & PopoverTriggerProps\n>(function PopoverTrigger({ children, asChild = false, ...props }, propRef) {\n    const { refs, getReferenceProps, open, onOpenChange } = usePopoverContext();\n    const childrenRef = (children as any).ref;\n    const ref = useMergeRefs([refs.setReference, propRef, childrenRef]);\n\n    if (asChild && React.isValidElement(children)) {\n        return React.cloneElement(\n            children,\n            getReferenceProps({\n                ref,\n                ...props,\n                ...children.props,\n            }),\n        );\n    }\n\n    return (\n        <button\n            ref={ref}\n            onClick={() => onOpenChange?.(!open)}\n            aria-expanded={open}\n            {...getReferenceProps(props)}\n        >\n            {children}\n        </button>\n    );\n});\n\ninterface PopoverContentProps {\n    /**\n     * Padding rundt innholdet i popoveren.\n     *\n     * Default er `0`.\n     */\n    padding?: 0 | 8 | 16 | 24;\n    /**\n     *\n     * Angir hvilket element som skal motta fokus ved åpning.\n     * Kan være en tabbar index eller en referanse til et element.\"\n     *\n     * Default er `0`, som betyr at det første fokuserbare elementet i popoveren får fokus.\n     * @see https://floating-ui.com/docs/FloatingFocusManager#initialfocus\n     */\n    initialFocus?: number | React.RefObject<HTMLElement>;\n    /**\n     * Angir om fokus skal returneres til triggeren når popoveren lukkes.\n     *\n     * Default er `true`.\n     * @see https://floating-ui.com/docs/FloatingFocusManager#returnfocus\n     */\n    returnFocus?: boolean;\n}\n\n// Er popover-elementet posisjonert i forhold til et annet element enn triggeren?\nconst isCustomPositioned = (\n    referenceElement: ReferenceElement,\n): referenceElement is VirtualElement => {\n    if (!referenceElement) return false;\n\n    return \"contextElement\" in referenceElement;\n};\n\nconst PopoverContent = React.forwardRef<\n    HTMLDivElement,\n    React.HTMLProps<HTMLDivElement> & PopoverContentProps\n>(function PopoverContent(\n    {\n        style,\n        className,\n        padding = 0,\n        initialFocus = 0,\n        returnFocus = true,\n        ...props\n    },\n    propRef,\n) {\n    const { context, modal, refs, open, floatingStyles, getFloatingProps } =\n        usePopoverContext();\n    const ref = useMergeRefs([refs.setFloating, propRef]);\n\n    const referenceElement = refs.reference.current as ReferenceElement;\n\n    const { theme, density } = isCustomPositioned(referenceElement)\n        ? getThemeAndDensity(referenceElement.contextElement)\n        : getThemeAndDensity(referenceElement);\n\n    const floatingPortalRef = React.useRef<HTMLElement | null>(null);\n\n    // TODO: Løser et problem hvor nestede portaler ikke \"fester\" seg til det nærmeste portal-elementet. Fjernes når alle komponenter som rendres i en portal tar i bruk popover komponenten da den håndterer dette internt. Issue: https://github.com/fremtind/jokul/issues/4356\n    React.useEffect(() => {\n        floatingPortalRef.current =\n            context.elements.domReference?.closest<HTMLElement>(\n                \"[data-portal]\",\n            ) || document.body;\n    }, [context.elements.domReference]);\n\n    if (!open) return null;\n\n    return (\n        <FloatingPortal root={floatingPortalRef.current}>\n            <FloatingFocusManager\n                context={context}\n                modal={modal}\n                initialFocus={initialFocus}\n                returnFocus={returnFocus}\n            >\n                <div\n                    data-theme={theme}\n                    data-layout-density={density}\n                    className={clsx(\"jkl jkl-popover\", className)}\n                    ref={ref}\n                    style={\n                        {\n                            ...style,\n                            ...floatingStyles,\n                            \"--popover-padding\": `var(--jkl-spacing-${padding})`,\n                        } as React.CSSProperties\n                    }\n                    {...getFloatingProps(props)}\n                >\n                    {props.children}\n                </div>\n            </FloatingFocusManager>\n        </FloatingPortal>\n    );\n});\n\nPopover.Trigger = PopoverTrigger;\nPopover.Content = PopoverContent;\n\nexport default Popover;\n"],"names":["PopoverContext","React","createContext","usePopoverContext","context","useContext","Error","Popover","children","restOptions","popover","open","_open","onOpenChange","_onOpenChange","placement","strategy","modal","offset","_offset","positionReference","hoverOptions","focusOptions","clickOptions","roleOptions","dismissOptions","uncontrolledOpen","setUncontrolledOpen","useState","data","useFloating","middleware","flip","padding","fallbackPlacements","shift","whileElementsMounted","autoUpdate","click","useClick","enabled","hover","useHover","focus","useFocus","dismiss","useDismiss","role","useRole","interactions","useInteractions","useLayoutEffect","refs","setPositionReference","current","useMemo","usePopover","Provider","value","PopoverTrigger","forwardRef","asChild","props","propRef","getReferenceProps","childrenRef","ref","useMergeRefs","setReference","isValidElement","cloneElement","jsx","onClick","PopoverContent","style","className","initialFocus","returnFocus","floatingStyles","getFloatingProps","setFloating","referenceElement","reference","theme","density","getThemeAndDensity","contextElement","floatingPortalRef","useRef","useEffect","_a","elements","domReference","closest","document","body","FloatingPortal","root","FloatingFocusManager","clsx","Trigger","Content"],"mappings":"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"}
+{"version":3,"file":"Popover.js","sources":["../../../../src/components/popover/Popover.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    FloatingPortal,\n    type ReferenceElement,\n    type VirtualElement,\n    autoUpdate,\n    flip,\n    offset,\n    shift,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n    useMergeRefs,\n    useRole,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\nimport type { PopoverOptions } from \"./types.js\";\n\nconst usePopover = ({\n    open: _open,\n    onOpenChange: _onOpenChange,\n    placement = \"bottom-start\",\n    strategy = \"absolute\",\n    modal = true,\n    offset: _offset = 4,\n    positionReference,\n    hoverOptions,\n    focusOptions,\n    clickOptions,\n    roleOptions,\n    dismissOptions,\n}: PopoverOptions) => {\n    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(_open);\n\n    const open = _open ?? uncontrolledOpen;\n    const onOpenChange = _onOpenChange ?? setUncontrolledOpen;\n\n    const data = useFloating({\n        open,\n        onOpenChange,\n        placement,\n        strategy,\n        middleware: [\n            offset(_offset),\n            flip({ padding: 5, fallbackPlacements: [\"bottom\", \"top\"] }),\n            shift({ padding: 12 }),\n        ],\n        whileElementsMounted: autoUpdate,\n    });\n\n    const context = data.context;\n\n    const click = useClick(context, {\n        enabled: false,\n        ...clickOptions,\n    });\n    const hover = useHover(context, { enabled: false, ...hoverOptions });\n    const focus = useFocus(context, { enabled: false, ...focusOptions });\n    const dismiss = useDismiss(context, dismissOptions);\n    const role = useRole(context, roleOptions);\n\n    const interactions = useInteractions([click, dismiss, focus, hover, role]);\n\n    React.useLayoutEffect(() => {\n        if (positionReference) {\n            data.refs.setPositionReference(positionReference?.current);\n        }\n    }, [positionReference, data.refs]);\n\n    return React.useMemo(\n        () => ({\n            open,\n            onOpenChange,\n            modal,\n            ...interactions,\n            ...data,\n        }),\n        [open, onOpenChange, modal, interactions, data],\n    );\n};\n\ntype PopoverContextType = ReturnType<typeof usePopover> | null;\n\nconst PopoverContext = React.createContext<PopoverContextType>(null);\n\nconst usePopoverContext = () => {\n    const context = React.useContext(PopoverContext);\n\n    if (context == null) {\n        throw new Error(\n            \"Popover komponenter må brukes innenfor en <Popover /> komponent\",\n        );\n    }\n\n    return context;\n};\n\nexport const Popover = ({\n    children,\n    ...restOptions\n}: {\n    children: React.ReactNode;\n} & PopoverOptions) => {\n    const popover = usePopover({ ...restOptions });\n    return (\n        <PopoverContext.Provider value={popover}>\n            {children}\n        </PopoverContext.Provider>\n    );\n};\n\ninterface PopoverTriggerProps {\n    children: React.ReactNode;\n    /**\n     * Rendrer komponenten som child-elementet sitt, og slår sammen egenskaper og props.\n     *\n     * Default er `false`.\n     *\n     * @example\n     * ```tsx\n     * <Component asChild foo=\"bar\">\n     *    <Child baz=\"qux\" />\n     * </Component>\n     *\n     * // Rendrer følgende:\n     * <Child foo=\"bar\" baz=\"qux\" />\n     * ```\n     */\n    asChild?: boolean;\n}\n\nconst PopoverTrigger = React.forwardRef<\n    HTMLElement,\n    React.HTMLProps<HTMLElement> & PopoverTriggerProps\n>(function PopoverTrigger({ children, asChild = false, ...props }, propRef) {\n    const { refs, getReferenceProps, open, onOpenChange } = usePopoverContext();\n    const childrenRef = (children as any).ref;\n    const ref = useMergeRefs([refs.setReference, propRef, childrenRef]);\n\n    if (asChild && React.isValidElement(children)) {\n        return React.cloneElement(\n            children,\n            getReferenceProps({\n                ref,\n                ...props,\n                ...children.props,\n            }),\n        );\n    }\n\n    return (\n        <button\n            ref={ref}\n            onClick={() => onOpenChange?.(!open)}\n            aria-expanded={open}\n            {...getReferenceProps(props)}\n        >\n            {children}\n        </button>\n    );\n});\n\ninterface PopoverContentProps {\n    /**\n     * Padding rundt innholdet i popoveren.\n     *\n     * Default er `0`.\n     */\n    padding?: 0 | 8 | 16 | 24;\n    /**\n     *\n     * Angir hvilket element som skal motta fokus ved åpning.\n     * Kan være en tabbar index eller en referanse til et element.\"\n     *\n     * Default er `0`, som betyr at det første fokuserbare elementet i popoveren får fokus.\n     * @see https://floating-ui.com/docs/FloatingFocusManager#initialfocus\n     */\n    initialFocus?: number | React.RefObject<HTMLElement>;\n    /**\n     * Angir om fokus skal returneres til triggeren når popoveren lukkes.\n     *\n     * Default er `true`.\n     * @see https://floating-ui.com/docs/FloatingFocusManager#returnfocus\n     */\n    returnFocus?: boolean;\n}\n\n// Er popover-elementet posisjonert i forhold til et annet element enn triggeren?\nconst isCustomPositioned = (\n    referenceElement: ReferenceElement,\n): referenceElement is VirtualElement => {\n    if (!referenceElement) return false;\n\n    return \"contextElement\" in referenceElement;\n};\n\nconst PopoverContent = React.forwardRef<\n    HTMLDivElement,\n    React.HTMLProps<HTMLDivElement> & PopoverContentProps\n>(function PopoverContent(\n    {\n        style,\n        className,\n        padding = 0,\n        initialFocus = 0,\n        returnFocus = true,\n        ...props\n    },\n    propRef,\n) {\n    const { context, modal, refs, open, floatingStyles, getFloatingProps } =\n        usePopoverContext();\n    const ref = useMergeRefs([refs.setFloating, propRef]);\n\n    const referenceElement = refs.reference.current as ReferenceElement;\n\n    const { theme, density } = isCustomPositioned(referenceElement)\n        ? getThemeAndDensity(referenceElement.contextElement)\n        : getThemeAndDensity(referenceElement);\n\n    const floatingPortalRef = React.useRef<HTMLElement | null>(null);\n\n    // TODO: Løser et problem hvor nestede portaler ikke \"fester\" seg til det nærmeste portal-elementet. Fjernes når alle komponenter som rendres i en portal tar i bruk popover komponenten da den håndterer dette internt. Issue: https://github.com/fremtind/jokul/issues/4356\n    React.useEffect(() => {\n        floatingPortalRef.current =\n            context.elements.domReference?.closest<HTMLElement>(\n                \"[data-portal]\",\n            ) || document.body;\n    }, [context.elements.domReference]);\n\n    if (!open) return null;\n\n    return (\n        <FloatingPortal root={floatingPortalRef.current}>\n            <FloatingFocusManager\n                context={context}\n                modal={modal}\n                initialFocus={initialFocus}\n                returnFocus={returnFocus}\n            >\n                <div\n                    data-theme={theme}\n                    data-layout-density={density}\n                    className={clsx(\"jkl jkl-popover\", className)}\n                    ref={ref}\n                    style={\n                        {\n                            ...style,\n                            ...floatingStyles,\n                            \"--popover-padding\": `var(--jkl-spacing-${padding})`,\n                        } as React.CSSProperties\n                    }\n                    {...getFloatingProps(props)}\n                >\n                    {props.children}\n                </div>\n            </FloatingFocusManager>\n        </FloatingPortal>\n    );\n});\n\nPopover.Trigger = PopoverTrigger;\nPopover.Content = PopoverContent;\n\nexport default Popover;\n"],"names":["PopoverContext","React","createContext","usePopoverContext","context","useContext","Error","Popover","children","restOptions","popover","open","_open","onOpenChange","_onOpenChange","placement","strategy","modal","offset","_offset","positionReference","hoverOptions","focusOptions","clickOptions","roleOptions","dismissOptions","uncontrolledOpen","setUncontrolledOpen","useState","data","useFloating","middleware","flip","padding","fallbackPlacements","shift","whileElementsMounted","autoUpdate","click","useClick","enabled","hover","useHover","focus","useFocus","dismiss","useDismiss","role","useRole","interactions","useInteractions","useLayoutEffect","refs","setPositionReference","current","useMemo","usePopover","Provider","value","PopoverTrigger","forwardRef","asChild","props","propRef","getReferenceProps","childrenRef","ref","useMergeRefs","setReference","isValidElement","cloneElement","jsx","onClick","PopoverContent","style","className","initialFocus","returnFocus","floatingStyles","getFloatingProps","setFloating","referenceElement","reference","theme","density","getThemeAndDensity","contextElement","floatingPortalRef","useRef","useEffect","elements","domReference","closest","document","body","FloatingPortal","root","FloatingFocusManager","clsx","Trigger","Content"],"mappings":"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"}

package/build/es/components/radio-panel/RadioPanel.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{forwardRef as a,useContext as o,useCallback as r,useEffect as n}from"react";import{BasePanel as l}from"../../shared/input-panel/BasePanel.js";import{context as t}from"./radioPanelContext.js";const s=a((function({alwaysOpen:a=!1,label:s,extraLabel:i,checked:d,onChange:u,value:c,defaultChecked:p,...f},h){const{onValueChange:w,checkedValue:k}=o(t),m=r((e=>{if(null==u||u(e),!w)throw new Error("RadioPanel will not work properly when used outside a RadioPanelGroup");w(c)}),[u,w,c]);n((()=>{if(p){if(!w)throw new Error("RadioPanel will not work properly when used outside a RadioPanelGroup");w(c)}}),[]);const C=typeof d<"u";return e(l,{ref:h,type:"radio",value:c,isChecked:C?d:k===c,defaultChecked:p,checked:C?d:void 0,onChange:m,alwaysOpen:a,label:s,extraLabel:i,...f})}));export{s as RadioPanel};
+import{jsx as e}from"react/jsx-runtime";import{forwardRef as a,useContext as o,useCallback as r,useEffect as n}from"react";import{BasePanel as t}from"../../shared/input-panel/BasePanel.js";import{context as l}from"./radioPanelContext.js";const s=a((function({alwaysOpen:a=!1,label:s,extraLabel:i,checked:d,onChange:u,value:c,defaultChecked:p,...f},h){const{onValueChange:w,checkedValue:k}=o(l),m=r((e=>{if(u?.(e),!w)throw new Error("RadioPanel will not work properly when used outside a RadioPanelGroup");w(c)}),[u,w,c]);n((()=>{if(p){if(!w)throw new Error("RadioPanel will not work properly when used outside a RadioPanelGroup");w(c)}}),[]);const C=typeof d<"u";return e(t,{ref:h,type:"radio",value:c,isChecked:C?d:k===c,defaultChecked:p,checked:C?d:void 0,onChange:m,alwaysOpen:a,label:s,extraLabel:i,...f})}));export{s as RadioPanel};
 //# sourceMappingURL=RadioPanel.js.map

package/build/es/components/radio-panel/RadioPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioPanel.js","sources":["../../../../src/components/radio-panel/RadioPanel.tsx"],"sourcesContent":["import React, {\n    type ChangeEvent,\n    type ForwardedRef,\n    forwardRef,\n    useCallback,\n    useContext,\n    useEffect,\n} from \"react\";\nimport { BasePanel } from \"../../shared/input-panel/BasePanel.js\";\nimport { context } from \"./radioPanelContext.js\";\nimport type { RadioPanelProps } from \"./types.js\";\n\nexport const RadioPanel = forwardRef(function RadioPanel(\n    {\n        alwaysOpen = false,\n        label,\n        extraLabel,\n        checked,\n        onChange,\n        value,\n        defaultChecked,\n        ...rest\n    }: RadioPanelProps,\n    ref: ForwardedRef<HTMLInputElement>,\n) {\n    const { onValueChange, checkedValue } = useContext(context);\n\n    const handleChange = useCallback(\n        (e: ChangeEvent<HTMLInputElement>) => {\n            onChange?.(e);\n            if (!onValueChange) {\n                throw new Error(\n                    \"RadioPanel will not work properly when used outside a RadioPanelGroup\",\n                );\n            }\n            onValueChange(value);\n        },\n        [onChange, onValueChange, value],\n    );\n\n    // We never want to rerun this effect. Changing the default value after the\n    // input control is first mounted should not cause any updates\n    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n    useEffect(() => {\n        if (defaultChecked) {\n            if (!onValueChange) {\n                throw new Error(\n                    \"RadioPanel will not work properly when used outside a RadioPanelGroup\",\n                );\n            }\n            onValueChange(value);\n        }\n        /* eslint-disable-next-line react-hooks/exhaustive-deps */\n    }, []);\n\n    const isControlled = typeof checked !== \"undefined\";\n    const isChecked = isControlled ? checked : checkedValue === value;\n\n    return (\n        <BasePanel\n            ref={ref}\n            type=\"radio\"\n            value={value}\n            isChecked={isChecked}\n            defaultChecked={defaultChecked}\n            checked={isControlled ? checked : undefined}\n            onChange={handleChange}\n            alwaysOpen={alwaysOpen}\n            label={label}\n            extraLabel={extraLabel}\n            {...rest}\n        />\n    );\n});\n"],"names":["RadioPanel","forwardRef","alwaysOpen","label","extraLabel","checked","onChange","value","defaultChecked","rest","ref","onValueChange","checkedValue","useContext","context","handleChange","useCallback","e","Error","useEffect","isControlled","jsx","BasePanel","type","isChecked"],"mappings":"8OAYa,MAAAA,EAAaC,GAAW,UAE7BC,WAAAA,GAAa,EACbC,MAAAA,EACAC,WAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,MAAAA,EACAC,eAAAA,KACGC,GAEPC,GAEM,MAAEC,cAAAA,EAAeC,aAAAA,GAAiBC,EAAWC,GAE7CC,EAAeC,GAChBC,IAEG,GADA,MAAAX,GAAAA,EAAWW,IACNN,EACD,MAAM,IAAIO,MACN,yEAGRP,EAAcJ,EAAK,GAEvB,CAACD,EAAUK,EAAeJ,IAM9BY,GAAU,KACN,GAAIX,EAAgB,CAChB,IAAKG,EACD,MAAM,IAAIO,MACN,yEAGRP,EAAcJ,EAAK,IAGxB,IAEGa,MAAAA,SAAsBf,EAAY,IAIpC,OAAAgB,EAACC,EAAA,CACGZ,IAAAA,EACAa,KAAK,QACLhB,MAAAA,EACAiB,UAPUJ,EAAef,EAAUO,IAAiBL,EAQpDC,eAAAA,EACAH,QAASe,EAAef,OAAU,EAClCC,SAAUS,EACVb,WAAAA,EACAC,MAAAA,EACAC,WAAAA,KACIK,GAGhB"}
+{"version":3,"file":"RadioPanel.js","sources":["../../../../src/components/radio-panel/RadioPanel.tsx"],"sourcesContent":["import React, {\n    type ChangeEvent,\n    type ForwardedRef,\n    forwardRef,\n    useCallback,\n    useContext,\n    useEffect,\n} from \"react\";\nimport { BasePanel } from \"../../shared/input-panel/BasePanel.js\";\nimport { context } from \"./radioPanelContext.js\";\nimport type { RadioPanelProps } from \"./types.js\";\n\nexport const RadioPanel = forwardRef(function RadioPanel(\n    {\n        alwaysOpen = false,\n        label,\n        extraLabel,\n        checked,\n        onChange,\n        value,\n        defaultChecked,\n        ...rest\n    }: RadioPanelProps,\n    ref: ForwardedRef<HTMLInputElement>,\n) {\n    const { onValueChange, checkedValue } = useContext(context);\n\n    const handleChange = useCallback(\n        (e: ChangeEvent<HTMLInputElement>) => {\n            onChange?.(e);\n            if (!onValueChange) {\n                throw new Error(\n                    \"RadioPanel will not work properly when used outside a RadioPanelGroup\",\n                );\n            }\n            onValueChange(value);\n        },\n        [onChange, onValueChange, value],\n    );\n\n    // We never want to rerun this effect. Changing the default value after the\n    // input control is first mounted should not cause any updates\n    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n    useEffect(() => {\n        if (defaultChecked) {\n            if (!onValueChange) {\n                throw new Error(\n                    \"RadioPanel will not work properly when used outside a RadioPanelGroup\",\n                );\n            }\n            onValueChange(value);\n        }\n        /* eslint-disable-next-line react-hooks/exhaustive-deps */\n    }, []);\n\n    const isControlled = typeof checked !== \"undefined\";\n    const isChecked = isControlled ? checked : checkedValue === value;\n\n    return (\n        <BasePanel\n            ref={ref}\n            type=\"radio\"\n            value={value}\n            isChecked={isChecked}\n            defaultChecked={defaultChecked}\n            checked={isControlled ? checked : undefined}\n            onChange={handleChange}\n            alwaysOpen={alwaysOpen}\n            label={label}\n            extraLabel={extraLabel}\n            {...rest}\n        />\n    );\n});\n"],"names":["RadioPanel","forwardRef","alwaysOpen","label","extraLabel","checked","onChange","value","defaultChecked","rest","ref","onValueChange","checkedValue","useContext","context","handleChange","useCallback","e","Error","useEffect","isControlled","jsx","BasePanel","type","isChecked"],"mappings":"8OAYa,MAAAA,EAAaC,GAAW,UAE7BC,WAAAA,GAAa,EACbC,MAAAA,EACAC,WAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,MAAAA,EACAC,eAAAA,KACGC,GAEPC,GAEM,MAAEC,cAAAA,EAAeC,aAAAA,GAAiBC,EAAWC,GAE7CC,EAAeC,GAChBC,IACGX,GAAAA,IAAWW,IACNN,EACD,MAAM,IAAIO,MACN,yEAGRP,EAAcJ,EAAK,GAEvB,CAACD,EAAUK,EAAeJ,IAM9BY,GAAU,KACN,GAAIX,EAAgB,CAChB,IAAKG,EACD,MAAM,IAAIO,MACN,yEAGRP,EAAcJ,EAAK,IAGxB,IAEGa,MAAAA,SAAsBf,EAAY,IAIpC,OAAAgB,EAACC,EAAA,CACGZ,IAAAA,EACAa,KAAK,QACLhB,MAAAA,EACAiB,UAPUJ,EAAef,EAAUO,IAAiBL,EAQpDC,eAAAA,EACAH,QAASe,EAAef,OAAU,EAClCC,SAAUS,EACVb,WAAAA,EACAC,MAAAA,EACAC,WAAAA,KACIK,GAGhB"}

package/build/es/components/screen-reader-only/ScreenReaderOnly.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ScreenReaderOnlyProps } from './types.js';
+export declare const ScreenReaderOnly: FC<ScreenReaderOnlyProps>;

package/build/es/components/screen-reader-only/ScreenReaderOnly.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenReaderOnly.js","sources":["../../../../src/components/screen-reader-only/ScreenReaderOnly.tsx"],"sourcesContent":["import React, { type FC } from \"react\";\nimport type { ScreenReaderOnlyProps } from \"./types.js\";\n\nexport const ScreenReaderOnly: FC<ScreenReaderOnlyProps> = ({\n    children,\n    showOnFocus,\n    ...rest\n}) => (\n    <span\n        {...rest}\n        className={`jkl-sr-only${showOnFocus ? \" jkl-sr-only--focusable\" : \"\"}`}\n    >\n        {children}\n    </span>\n);\n"],"names":["ScreenReaderOnly","children","showOnFocus","rest","jsx","className"],"mappings":"sDAGO,MAAMA,EAA8C,EACvDC,SAAAA,EACAC,YAAAA,KACGC,KAEHC,EAAC,OAAA,IACOD,EACJE,UAAW,eAAcH,EAAc,0BAA4B,IAElED,SAAAA"}

package/build/es/components/screen-reader-only/index.d.ts

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

package/build/es/components/screen-reader-only/index.js

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

package/build/es/components/screen-reader-only/types.d.ts

@@ -0,0 +1,4 @@
+import { WithChildren } from '../../core/types.js';
+export interface ScreenReaderOnlyProps extends WithChildren {
+    showOnFocus?: boolean;
+}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    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 | null>) => {\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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"}
+{"version":3,"file":"Select.js","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 | null>) => {\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","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","contains","relatedTarget","handleFocus","handleMouseOver","preventScroll","select","searchField","button","componentRootElement","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","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/es/components/select/select-utils.js

@@ -1,2 +1,2 @@
-function e(e=""){return e.toLowerCase().replace(/[\W_]+/g,"")}function o(e,o){let l=null;o&&(l=e.querySelector('[aria-selected="true"]:not([hidden])')),(!o||!l)&&(l=e.querySelector('[role="option"]')),null==l||l.focus(),e.scrollTop=(null==l?void 0:l.offsetTop)||0}export{o as focusSelected,e as toLower};
+function e(e=""){return e.toLowerCase().replace(/[\W_]+/g,"")}function o(e,o){let t=null;o&&(t=e.querySelector('[aria-selected="true"]:not([hidden])')),(!o||!t)&&(t=e.querySelector('[role="option"]')),t?.focus(),e.scrollTop=t?.offsetTop||0}export{o as focusSelected,e as toLower};
 //# sourceMappingURL=select-utils.js.map

package/build/es/components/select/select-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-utils.js","sources":["../../../../src/components/select/select-utils.ts"],"sourcesContent":["export function toLower(str = \"\") {\n    return str.toLowerCase().replace(/[\\W_]+/g, \"\"); // strip all non-alphanumeric chars\n}\n\nexport function focusSelected(\n    listEl: HTMLElement,\n    selected: string | undefined,\n) {\n    let focusedItem: HTMLElement | null = null;\n    if (selected) {\n        // Move focus to selected option\n        focusedItem = listEl.querySelector(\n            `[aria-selected=\"true\"]:not([hidden])`,\n        );\n    }\n    if (!selected || !focusedItem) {\n        // Move focus to first option if either no selected value or the value could not be found.\n        // This may happen with searchable selects if the currently selected value is filtered out.\n        focusedItem = listEl.querySelector('[role=\"option\"]');\n    }\n    focusedItem?.focus();\n    // Make sure the selected/focused item is visible in the list if it scrolls\n    listEl.scrollTop = focusedItem?.offsetTop || 0;\n}\n"],"names":["toLower","str","toLowerCase","replace","focusSelected","listEl","selected","focusedItem","querySelector","focus","scrollTop","offsetTop"],"mappings":"AAAgB,SAAAA,EAAQC,EAAM,IAC1B,OAAOA,EAAIC,cAAcC,QAAQ,UAAW,GAChD,CAEgB,SAAAC,EACZC,EACAC,GAEA,IAAIC,EAAkC,KAClCD,IAEAC,EAAcF,EAAOG,cACjB,2CAGHF,IAAaC,KAGAA,EAAAF,EAAOG,cAAc,oBAEvC,MAAAD,GAAAA,EAAaE,QAENJ,EAAAK,WAAY,MAAAH,OAAA,EAAAA,EAAaI,YAAa,CACjD"}
+{"version":3,"file":"select-utils.js","sources":["../../../../src/components/select/select-utils.ts"],"sourcesContent":["export function toLower(str = \"\") {\n    return str.toLowerCase().replace(/[\\W_]+/g, \"\"); // strip all non-alphanumeric chars\n}\n\nexport function focusSelected(\n    listEl: HTMLElement,\n    selected: string | undefined,\n) {\n    let focusedItem: HTMLElement | null = null;\n    if (selected) {\n        // Move focus to selected option\n        focusedItem = listEl.querySelector(\n            `[aria-selected=\"true\"]:not([hidden])`,\n        );\n    }\n    if (!selected || !focusedItem) {\n        // Move focus to first option if either no selected value or the value could not be found.\n        // This may happen with searchable selects if the currently selected value is filtered out.\n        focusedItem = listEl.querySelector('[role=\"option\"]');\n    }\n    focusedItem?.focus();\n    // Make sure the selected/focused item is visible in the list if it scrolls\n    listEl.scrollTop = focusedItem?.offsetTop || 0;\n}\n"],"names":["toLower","str","toLowerCase","replace","focusSelected","listEl","selected","focusedItem","querySelector","focus","scrollTop","offsetTop"],"mappings":"AAAgB,SAAAA,EAAQC,EAAM,IAC1B,OAAOA,EAAIC,cAAcC,QAAQ,UAAW,GAChD,CAEgB,SAAAC,EACZC,EACAC,GAEA,IAAIC,EAAkC,KAClCD,IAEAC,EAAcF,EAAOG,cACjB,2CAGHF,IAAaC,KAGAA,EAAAF,EAAOG,cAAc,oBAEvCD,GAAaE,QAENJ,EAAAK,UAAYH,GAAaI,WAAa,CACjD"}

package/build/es/components/system-message/SystemMessage.js

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

package/build/es/components/system-message/SystemMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SystemMessage.js","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":"mRASA,SAASA,EACLC,GA2DO,MAzD6C,EAChDC,GAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAC,cAAAA,EACAC,SAAAA,KACGC,MAEGC,MAAAA,EAAWC,EAAMX,GAAM,qBAAsB,CAC/CY,gBAAiBZ,IAIjB,OAAAa,EAAC,MAAA,CACGR,KAAAA,KACII,EACJT,GAAIU,EACJT,UAAWa,EACP,qBACA,uBAAuBf,IACvBE,EACA,CACI,gCAAiCK,IAGzC,eAAcJ,EAEdM,SAAAO,EAAC,MAAA,CACGd,UAAU,8BACV,cAAY,yBACZ,aAAW,QACXe,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,EAACK,GAAYnB,YAAAA,IACZc,EAAA,OAAA,CAAKZ,UAAU,8BACXO,SAAAA,KAEJ,MAAAD,OAAA,EAAAA,EAAeY,gBACZN,EAACO,EAAA,CACG,aAAW,QACX,gBAAeV,EACfT,UAAU,qCACVoB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY,oBAIvC,CAIZ,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.js","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":"mRASA,SAASA,EACLC,GA2DO,MAzD6C,EAChDC,GAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAC,cAAAA,EACAC,SAAAA,KACGC,MAEGC,MAAAA,EAAWC,EAAMX,GAAM,qBAAsB,CAC/CY,gBAAiBZ,IAIjB,OAAAa,EAAC,MAAA,CACGR,KAAAA,KACII,EACJT,GAAIU,EACJT,UAAWa,EACP,qBACA,uBAAuBf,IACvBE,EACA,CACI,gCAAiCK,IAGzC,eAAcJ,EAEdM,SAAAO,EAAC,MAAA,CACGd,UAAU,8BACV,cAAY,yBACZ,aAAW,QACXe,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,EAACK,GAAYnB,YAAAA,IACZc,EAAA,OAAA,CAAKZ,UAAU,8BACXO,SAAAA,IAEJD,GAAeY,eACZN,EAACO,EAAA,CACG,aAAW,QACX,gBAAeV,EACfT,UAAU,qCACVoB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY,oBAIvC,CAIZ,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/es/components/table/TableHeader.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as a}from"react/jsx-runtime";import{c as r}from"../../../clsx-BeLtu-UY.js";import{forwardRef as l}from"react";import{ArrowVerticalAnimated as t}from"../icon/icons/animated/ArrowVerticalAnimated.js";import{useTableContext as o}from"./tableContext.js";const i=l(((l,i)=>{const{bold:s=!0,density:n,sortable:d,className:c,scope:m="col",srOnly:b,align:h="left",children:j,onClick:k,...p}=l,{density:f}=o();return e("th",{className:r("jkl-table-header",c,{"jkl-table-header--bold":s,"jkl-table-header--align-right":"right"===h,"jkl-table-header--align-center":"center"===h,"jkl-table-header--sr-only":b,"jkl-table-header--sortable":typeof d<"u"}),scope:m,onClick:e=>{null==k||k(e),null==d||d.onClick()},...p,"data-density":n||f,ref:i,children:[j,d&&a("div",{className:r("jkl-table-header__arrows",{"jkl-table-header__arrows--active":!!d.direction}),children:d.direction&&a(t,{pointingDown:"desc"===d.direction,bold:!0})})]})}));i.displayName="TableHeader";export{i as TableHeader};
+import{jsxs as e,jsx as a}from"react/jsx-runtime";import{c as r}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t}from"react";import{ArrowVerticalAnimated as l}from"../icon/icons/animated/ArrowVerticalAnimated.js";import{useTableContext as o}from"./tableContext.js";const i=t(((t,i)=>{const{bold:s=!0,density:n,sortable:d,className:c,scope:m="col",srOnly:b,align:h="left",children:j,onClick:k,...p}=t,{density:f}=o();return e("th",{className:r("jkl-table-header",c,{"jkl-table-header--bold":s,"jkl-table-header--align-right":"right"===h,"jkl-table-header--align-center":"center"===h,"jkl-table-header--sr-only":b,"jkl-table-header--sortable":typeof d<"u"}),scope:m,onClick:e=>{k?.(e),d?.onClick()},...p,"data-density":n||f,ref:i,children:[j,d&&a("div",{className:r("jkl-table-header__arrows",{"jkl-table-header__arrows--active":!!d.direction}),children:d.direction&&a(l,{pointingDown:"desc"===d.direction,bold:!0})})]})}));i.displayName="TableHeader";export{i as TableHeader};
 //# sourceMappingURL=TableHeader.js.map

package/build/es/components/table/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","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":"+QAQA,MAAMA,EAAcC,GAChB,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,IAQhC,OAAAC,EAAC,KAAA,CACGT,UAAWU,EAAK,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,SAAA,KAeFC,EACJ,eAAcR,GAAWS,EACzBX,IAAAA,EAECQ,SAAA,CAAAA,EACAL,GACGa,EAAC,MAAA,CACGZ,UAAWU,EAAK,2BAA4B,CACxC,qCACIX,EAASc,YAIhBT,WAASS,WACND,EAACE,EAAA,CACGC,aAAqC,SAAvBhB,EAASc,UACvBhB,MAAI,QAKxB,IAKZJ,EAAYuB,YAAc"}
+{"version":3,"file":"TableHeader.js","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":"+QAQA,MAAMA,EAAcC,GAChB,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,IAQhC,OAAAC,EAAC,KAAA,CACGT,UAAWU,EAAK,mBAAoBV,EAAW,CAC1C,yBAA2BH,EAC3B,gCAA4C,UAAVM,EAClC,iCAA6C,WAAVA,EACnC,4BAA8BD,EAC9B,oCACUH,EAAa,MAE5BE,MAAAA,EACAI,QAhBsDM,IAC1DN,IAAUM,GACVZ,GAAUM,SAAQ,KAeVC,EACJ,eAAcR,GAAWS,EACzBX,IAAAA,EAECQ,SAAA,CAAAA,EACAL,GACGa,EAAC,MAAA,CACGZ,UAAWU,EAAK,2BAA4B,CACxC,qCACIX,EAASc,YAIhBT,WAASS,WACND,EAACE,EAAA,CACGC,aAAqC,SAAvBhB,EAASc,UACvBhB,MAAI,QAKxB,IAKZJ,EAAYuB,YAAc"}

package/build/es/components/table/TableRow.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{c as l}from"../../../clsx-BeLtu-UY.js";import{forwardRef as a,useState as t,useEffect as i}from"react";import{useTableContext as s}from"./tableContext.js";import{useTableSectionContext as o}from"./tableSectionContext.js";const r=a((({className:a,clickable:r,children:c,...n},d)=>{const{density:k}=s(),{isTableBody:b}=o(),[m,f]=t((null==r?void 0:r.isClicked)||!1);return i((()=>{f((e=>void 0!==(null==r?void 0:r.isClicked)?r.isClicked:e))}),[null==r?void 0:r.isClicked]),e("tr",b&&r?{onClick:function(e){f(!m),r.onClick(e)},onKeyPress:function(e){(" "===e.key||"Enter"===e.key)&&(e.preventDefault(),f(!m),r.onClick(e))},"data-testid":"jkl-clickable-table-row",className:l("jkl-table-row","jkl-table-row--clickable",a,{"jkl-table-row--clicked":(null==r?void 0:r.markClickedRows)&&m}),"aria-label":"Klikkbar rad","aria-pressed":null!=r&&r.markClickedRows?m?"true":"false":void 0,tabIndex:0,...n,"data-density":k,ref:d,children:c}:{className:l("jkl-table-row",a),...n,ref:d,"data-density":k,children:c})}));r.displayName="TableRow";export{r as TableRow};
+import{jsx as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t,useState as l,useEffect as s}from"react";import{useTableContext as i}from"./tableContext.js";import{useTableSectionContext as r}from"./tableSectionContext.js";const o=t((({className:t,clickable:o,children:c,...n},d)=>{const{density:k}=i(),{isTableBody:b}=r(),[m,f]=l(o?.isClicked||!1);return s((()=>{f((e=>void 0!==o?.isClicked?o.isClicked:e))}),[o?.isClicked]),e("tr",b&&o?{onClick:function(e){f(!m),o.onClick(e)},onKeyPress:function(e){(" "===e.key||"Enter"===e.key)&&(e.preventDefault(),f(!m),o.onClick(e))},"data-testid":"jkl-clickable-table-row",className:a("jkl-table-row","jkl-table-row--clickable",t,{"jkl-table-row--clicked":o?.markClickedRows&&m}),"aria-label":"Klikkbar rad","aria-pressed":o?.markClickedRows?m?"true":"false":void 0,tabIndex:0,...n,"data-density":k,ref:d,children:c}:{className:a("jkl-table-row",t),...n,ref:d,"data-density":k,children:c})}));o.displayName="TableRow";export{o as TableRow};
 //# sourceMappingURL=TableRow.js.map

package/build/es/components/table/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sources":["../../../../src/components/table/TableRow.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useEffect, useState } from \"react\";\nimport { useTableContext } from \"./tableContext.js\";\nimport { useTableSectionContext } from \"./tableSectionContext.js\";\nimport type { TableRowProps } from \"./types.js\";\n\nconst TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(\n    ({ className, clickable, children, ...rest }, ref) => {\n        const { density } = useTableContext();\n        const { isTableBody } = useTableSectionContext();\n\n        const [clicked, setClicked] = useState(clickable?.isClicked || false);\n\n        useEffect(() => {\n            setClicked((prev) =>\n                clickable?.isClicked !== undefined ? clickable.isClicked : prev,\n            );\n        }, [clickable?.isClicked]);\n\n        if (isTableBody && clickable) {\n            return (\n                <tr\n                    onClick={function handleOnClick(e) {\n                        setClicked(!clicked);\n                        clickable.onClick(e);\n                    }}\n                    onKeyPress={function handleKeyPress(e) {\n                        if (e.key === \" \" || e.key === \"Enter\") {\n                            e.preventDefault();\n                            setClicked(!clicked);\n                            clickable.onClick(e);\n                        }\n                    }}\n                    data-testid=\"jkl-clickable-table-row\"\n                    className={clsx(\n                        \"jkl-table-row\",\n                        \"jkl-table-row--clickable\",\n                        className,\n                        {\n                            [\"jkl-table-row--clicked\"]:\n                                clickable?.markClickedRows && clicked,\n                        },\n                    )}\n                    aria-label=\"Klikkbar rad\"\n                    aria-pressed={\n                        clickable?.markClickedRows\n                            ? clicked\n                                ? \"true\"\n                                : \"false\"\n                            : undefined\n                    }\n                    tabIndex={0}\n                    {...rest}\n                    data-density={density}\n                    ref={ref}\n                >\n                    {children}\n                </tr>\n            );\n        }\n\n        return (\n            <tr\n                className={clsx(\"jkl-table-row\", className)}\n                {...rest}\n                ref={ref}\n                data-density={density}\n            >\n                {children}\n            </tr>\n        );\n    },\n);\n\nTableRow.displayName = \"TableRow\";\n\nexport { TableRow };\n"],"names":["TableRow","forwardRef","className","clickable","children","rest","ref","density","useTableContext","isTableBody","useTableSectionContext","clicked","setClicked","useState","isClicked","useEffect","prev","jsx","onClick","e","onKeyPress","key","preventDefault","clsx","markClickedRows","tabIndex","displayName"],"mappings":"4QAMA,MAAMA,EAAWC,GACb,EAAGC,UAAAA,EAAWC,UAAAA,EAAWC,SAAAA,KAAaC,GAAQC,KACpC,MAAEC,QAAAA,GAAYC,KACZC,YAAAA,GAAgBC,KAEjBC,EAASC,GAAcC,GAAS,MAAAV,OAAA,EAAAA,EAAWW,aAAa,GAQ/D,OANAC,GAAU,KACNH,GAAYI,QACiB,KAAzB,MAAAb,OAAA,EAAAA,EAAWW,WAA0BX,EAAUW,UAAYE,GAC/D,GACD,CAAC,MAAAb,OAAAA,EAAAA,EAAWW,YAIPG,EAAC,KAFLR,GAAeN,EAEV,CACGe,QAAS,SAAuBC,GAC5BP,GAAYD,GACZR,EAAUe,QAAQC,EACtB,EACAC,WAAY,SAAwBD,IAClB,MAAVA,EAAEE,KAAyB,UAAVF,EAAEE,OACnBF,EAAEG,iBACFV,GAAYD,GACZR,EAAUe,QAAQC,GAE1B,EACA,cAAY,0BACZjB,UAAWqB,EACP,gBACA,2BACArB,EACA,CACK,0BACG,MAAAC,OAAAA,EAAAA,EAAWqB,kBAAmBb,IAG1C,aAAW,eACX,eACI,MAAAR,GAAAA,EAAWqB,gBACLb,EACI,OACA,aACJ,EAEVc,SAAU,KACNpB,EACJ,eAAcE,EACdD,IAAAA,EAECF,SAAAA,GAMR,CACGF,UAAWqB,EAAK,gBAAiBrB,MAC7BG,EACJC,IAAAA,EACA,eAAcC,EAEbH,SAAAA,GACL,IAKZJ,EAAS0B,YAAc"}
+{"version":3,"file":"TableRow.js","sources":["../../../../src/components/table/TableRow.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useEffect, useState } from \"react\";\nimport { useTableContext } from \"./tableContext.js\";\nimport { useTableSectionContext } from \"./tableSectionContext.js\";\nimport type { TableRowProps } from \"./types.js\";\n\nconst TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(\n    ({ className, clickable, children, ...rest }, ref) => {\n        const { density } = useTableContext();\n        const { isTableBody } = useTableSectionContext();\n\n        const [clicked, setClicked] = useState(clickable?.isClicked || false);\n\n        useEffect(() => {\n            setClicked((prev) =>\n                clickable?.isClicked !== undefined ? clickable.isClicked : prev,\n            );\n        }, [clickable?.isClicked]);\n\n        if (isTableBody && clickable) {\n            return (\n                <tr\n                    onClick={function handleOnClick(e) {\n                        setClicked(!clicked);\n                        clickable.onClick(e);\n                    }}\n                    onKeyPress={function handleKeyPress(e) {\n                        if (e.key === \" \" || e.key === \"Enter\") {\n                            e.preventDefault();\n                            setClicked(!clicked);\n                            clickable.onClick(e);\n                        }\n                    }}\n                    data-testid=\"jkl-clickable-table-row\"\n                    className={clsx(\n                        \"jkl-table-row\",\n                        \"jkl-table-row--clickable\",\n                        className,\n                        {\n                            [\"jkl-table-row--clicked\"]:\n                                clickable?.markClickedRows && clicked,\n                        },\n                    )}\n                    aria-label=\"Klikkbar rad\"\n                    aria-pressed={\n                        clickable?.markClickedRows\n                            ? clicked\n                                ? \"true\"\n                                : \"false\"\n                            : undefined\n                    }\n                    tabIndex={0}\n                    {...rest}\n                    data-density={density}\n                    ref={ref}\n                >\n                    {children}\n                </tr>\n            );\n        }\n\n        return (\n            <tr\n                className={clsx(\"jkl-table-row\", className)}\n                {...rest}\n                ref={ref}\n                data-density={density}\n            >\n                {children}\n            </tr>\n        );\n    },\n);\n\nTableRow.displayName = \"TableRow\";\n\nexport { TableRow };\n"],"names":["TableRow","forwardRef","className","clickable","children","rest","ref","density","useTableContext","isTableBody","useTableSectionContext","clicked","setClicked","useState","isClicked","useEffect","prev","jsx","onClick","e","onKeyPress","key","preventDefault","clsx","markClickedRows","tabIndex","displayName"],"mappings":"4QAMA,MAAMA,EAAWC,GACb,EAAGC,UAAAA,EAAWC,UAAAA,EAAWC,SAAAA,KAAaC,GAAQC,KACpC,MAAEC,QAAAA,GAAYC,KACZC,YAAAA,GAAgBC,KAEjBC,EAASC,GAAcC,EAASV,GAAWW,YAAa,GAQ/D,OANAC,GAAU,KACNH,GAAYI,QACiB,IAAzBb,GAAWW,UAA0BX,EAAUW,UAAYE,GAC/D,GACD,CAACb,GAAWW,YAIPG,EAAC,KAFLR,GAAeN,EAEV,CACGe,QAAS,SAAuBC,GAC5BP,GAAYD,GACZR,EAAUe,QAAQC,EACtB,EACAC,WAAY,SAAwBD,IAClB,MAAVA,EAAEE,KAAyB,UAAVF,EAAEE,OACnBF,EAAEG,iBACFV,GAAYD,GACZR,EAAUe,QAAQC,GAE1B,EACA,cAAY,0BACZjB,UAAWqB,EACP,gBACA,2BACArB,EACA,CACK,yBACGC,GAAWqB,iBAAmBb,IAG1C,aAAW,eACX,eACIR,GAAWqB,gBACLb,EACI,OACA,aACJ,EAEVc,SAAU,KACNpB,EACJ,eAAcE,EACdD,IAAAA,EAECF,SAAAA,GAMR,CACGF,UAAWqB,EAAK,gBAAiBrB,MAC7BG,EACJC,IAAAA,EACA,eAAcC,EAEbH,SAAAA,GACL,IAKZJ,EAAS0B,YAAc"}

package/build/es/components/table/stories/data.d.ts

@@ -0,0 +1,8 @@
+export declare const skadesaker: {
+    columns: string[];
+    rows: string[][];
+};
+export declare const faktura: {
+    columns: string[];
+    rows: (string | number | string[] | Date)[][];
+};

package/build/es/components/table/stories/data.js

@@ -0,0 +1,2 @@
+const r={columns:["Dato","Saksnummer","Kundenummer","Kundenavn","Milepæl","Følger saken"],rows:[["24.02.2025","20-1234567","010203 99887","Ola Nordmann","Opprettet","Siri Saksbehandler"],["13.04.2019","20-8382811","010203 99887","Kari Nordkvinne","Opprettet","Siri Saksbehandler"],["31.07.2017","20-1111","010203 99887","Kari Nordkvinne","Opprettet","Per Persen"]]},e={columns:["Forfallsdato","Type","Beløp","Status","Produkt","Kontonummer","KID","Betalingstype"],rows:[[new Date(2025,10,15),"Skade",612.32,"Faktura",["Bilforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,9,15),"Person",402.67,"Påminnelse",["Hundeforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,8,15),"Person",2412.67,"Inkassovarsel",["Bilforsikring","Katteforsikring","Båtforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,7,15),"Person",719.17,"Faktura",["Båtforsikring","Hundeforsikring","Bilforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,6,15),"Skade",992.01,"Faktura",["Bilforsikring","Hundeforsikring","Elsparkesykkel"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,5,15),"Person",772.79,"Faktura",["Bilforsikring","Hus","Bilforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,4,15),"Person",772.79,"Faktura",["Bilforsikring","Hundeforsikring","Bilforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,3,15),"Person",772.79,"Faktura",["Bilforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,2,15),"Person",772.79,"Faktura",["Bil","Hus","Innbo"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,1,15),"Person",772.79,"Faktura",["Bilforsikring","Hundeforsikring","Katteforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,0,15),"Person",772.79,"Faktura",["Hundeforsikring","Barneforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2024,11,15),"Person",772.79,"Faktura",["Elsparkesykkel"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2024,10,15),"Person",772.79,"Faktura",["Hundeforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2024,9,15),"Person",772.79,"Faktura",["Bilforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2024,8,15),"Person",772.79,"Faktura",["Bilforsikring","Hundeforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"]]};export{e as faktura,r as skadesaker};
+//# sourceMappingURL=data.js.map

package/build/es/components/table/stories/data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data.js","sources":["../../../../../src/components/table/stories/data.ts"],"sourcesContent":["export const skadesaker = {\n    columns: [\n        \"Dato\",\n        \"Saksnummer\",\n        \"Kundenummer\",\n        \"Kundenavn\",\n        \"Milepæl\",\n        \"Følger saken\",\n    ],\n    rows: [\n        [\n            \"24.02.2025\",\n            \"20-1234567\",\n            \"010203 99887\",\n            \"Ola Nordmann\",\n            \"Opprettet\",\n            \"Siri Saksbehandler\",\n        ],\n        [\n            \"13.04.2019\",\n            \"20-8382811\",\n            \"010203 99887\",\n            \"Kari Nordkvinne\",\n            \"Opprettet\",\n            \"Siri Saksbehandler\",\n        ],\n        [\n            \"31.07.2017\",\n            \"20-1111\",\n            \"010203 99887\",\n            \"Kari Nordkvinne\",\n            \"Opprettet\",\n            \"Per Persen\",\n        ],\n    ],\n};\n\nexport const faktura = {\n    columns: [\n        \"Forfallsdato\",\n        \"Type\",\n        \"Beløp\",\n        \"Status\",\n        \"Produkt\",\n        \"Kontonummer\",\n        \"KID\",\n        \"Betalingstype\",\n    ],\n    rows: [\n        [\n            new Date(2025, 10, 15),\n            \"Skade\",\n            612.32,\n            \"Faktura\",\n            [\"Bilforsikring\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n        [\n            new Date(2025, 9, 15),\n            \"Person\",\n            402.67,\n            \"Påminnelse\",\n            [\"Hundeforsikring\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n        [\n            new Date(2025, 8, 15),\n            \"Person\",\n            2412.67,\n            \"Inkassovarsel\",\n            [\"Bilforsikring\", \"Katteforsikring\", \"Båtforsikring\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n        [\n            new Date(2025, 7, 15),\n            \"Person\",\n            719.17,\n            \"Faktura\",\n            [\"Båtforsikring\", \"Hundeforsikring\", \"Bilforsikring\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n        [\n            new Date(2025, 6, 15),\n            \"Skade\",\n            992.01,\n            \"Faktura\",\n            [\"Bilforsikring\", \"Hundeforsikring\", \"Elsparkesykkel\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n        [\n            new Date(2025, 5, 15),\n            \"Person\",\n            772.79,\n            \"Faktura\",\n            [\"Bilforsikring\", \"Hus\", \"Bilforsikring\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n        [\n            new Date(2025, 4, 15),\n            \"Person\",\n            772.79,\n            \"Faktura\",\n            [\"Bilforsikring\", \"Hundeforsikring\", \"Bilforsikring\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n        [\n            new Date(2025, 3, 15),\n            \"Person\",\n            772.79,\n            \"Faktura\",\n            [\"Bilforsikring\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n        [\n            new Date(2025, 2, 15),\n            \"Person\",\n            772.79,\n            \"Faktura\",\n            [\"Bil\", \"Hus\", \"Innbo\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n        [\n            new Date(2025, 1, 15),\n            \"Person\",\n            772.79,\n            \"Faktura\",\n            [\"Bilforsikring\", \"Hundeforsikring\", \"Katteforsikring\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n        [\n            new Date(2025, 0, 15),\n            \"Person\",\n            772.79,\n            \"Faktura\",\n            [\"Hundeforsikring\", \"Barneforsikring\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n        [\n            new Date(2024, 11, 15),\n            \"Person\",\n            772.79,\n            \"Faktura\",\n            [\"Elsparkesykkel\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n        [\n            new Date(2024, 10, 15),\n            \"Person\",\n            772.79,\n            \"Faktura\",\n            [\"Hundeforsikring\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n        [\n            new Date(2024, 9, 15),\n            \"Person\",\n            772.79,\n            \"Faktura\",\n            [\"Bilforsikring\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n        [\n            new Date(2024, 8, 15),\n            \"Person\",\n            772.79,\n            \"Faktura\",\n            [\"Bilforsikring\", \"Hundeforsikring\"],\n            \"9001.17.00771\",\n            \"1631 4283 2245\",\n            \"eFaktura\",\n        ],\n    ],\n};"],"names":["skadesaker","columns","rows","faktura","Date"],"mappings":"AAAO,MAAMA,EAAa,CACtBC,QAAS,CACL,OACA,aACA,cACA,YACA,UACA,gBAEJC,KAAM,CACF,CACI,aACA,aACA,eACA,eACA,YACA,sBAEJ,CACI,aACA,aACA,eACA,kBACA,YACA,sBAEJ,CACI,aACA,UACA,eACA,kBACA,YACA,gBAKCC,EAAU,CACnBF,QAAS,CACL,eACA,OACA,QACA,SACA,UACA,cACA,MACA,iBAEJC,KAAM,CACF,CACI,IAAIE,KAAK,KAAM,GAAI,IACnB,QACA,OACA,UACA,CAAC,iBACD,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,aACA,CAAC,mBACD,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,QACA,gBACA,CAAC,gBAAiB,kBAAmB,iBACrC,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,gBAAiB,kBAAmB,iBACrC,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,QACA,OACA,UACA,CAAC,gBAAiB,kBAAmB,kBACrC,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,gBAAiB,MAAO,iBACzB,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,gBAAiB,kBAAmB,iBACrC,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,iBACD,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,MAAO,MAAO,SACf,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,gBAAiB,kBAAmB,mBACrC,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,kBAAmB,mBACpB,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,GAAI,IACnB,SACA,OACA,UACA,CAAC,kBACD,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,GAAI,IACnB,SACA,OACA,UACA,CAAC,mBACD,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,iBACD,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,gBAAiB,mBAClB,gBACA,iBACA"}

package/build/es/components/table/stories/table.stories.d.ts

@@ -3,6 +3,14 @@ import { default as React } from 'react';
 declare const meta: {
     title: string;
     component: React.ForwardRefExoticComponent<import('../types.js').TableProps & React.RefAttributes<HTMLTableElement>>;
+    subcomponents: {
+        TableCaption: React.ForwardRefExoticComponent<import('../types.js').TableCaptionProps & React.RefAttributes<HTMLTableCaptionElement>>;
+        TableHead: React.ForwardRefExoticComponent<import('../types.js').TableHeadProps & React.RefAttributes<HTMLTableSectionElement>>;
+        TableHeader: React.ForwardRefExoticComponent<import('../types.js').TableHeaderProps & React.RefAttributes<HTMLTableCellElement>>;
+        TableBody: React.ForwardRefExoticComponent<import('../types.js').TableBodyProps & React.RefAttributes<HTMLTableSectionElement>>;
+        TableRow: React.ForwardRefExoticComponent<import('../types.js').TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+        TableCell: React.ForwardRefExoticComponent<import('../types.js').TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+    };
     parameters: {
         layout: string;
     };
@@ -10,4 +18,5 @@ declare const meta: {
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const TableComponent: Story;
+export declare const TableStory: Story;
+export declare const StortableTable: Story;