@fremtind/jokul 5.0.0-next.9 → 5.0.1

package/build/cjs/components/popover/Popover.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),r=require("../../utilities/getThemeAndSize.cjs");const s=function(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const n in e)if("default"!==n){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:()=>e[n]})}return t.default=e,Object.freeze(t)}(o),l=s.createContext(null),i=()=>{const e=s.useContext(l);if(null==e)throw new Error("Popover komponenter må brukes innenfor en <Popover /> komponent");return e},a=({children:n,...o})=>{const r=(({open:e,onOpenChange:n,placement:o="bottom-start",strategy:r="absolute",modal:l=!0,offset:i=4,positionReference:a,hoverOptions:c,focusOptions:u,clickOptions:d,roleOptions:f,dismissOptions:p})=>{const[m,g]=s.useState(e),h=e??m,x=n??g,b=t.useFloating({open:h,onOpenChange:x,placement:o,strategy:r,middleware:[t.offset(i),t.flip({padding:5,fallbackPlacements:["bottom","top"]}),t.shift({padding:12})],whileElementsMounted:t.autoUpdate}),j=b.context,v=t.useClick(j,{enabled:!1,...d}),O=t.useHover(j,{enabled:!1,...c}),P=t.useFocus(j,{enabled:!1,...u}),R=t.useDismiss(j,p),k=t.useRole(j,f),y=t.useInteractions([v,R,P,O,k]);return s.useLayoutEffect(()=>{a&&b.refs.setPositionReference(a?.current)},[a,b.refs]),s.useMemo(()=>({open:h,onOpenChange:x,modal:l,...y,...b}),[h,x,l,y,b])})({...o});return e.jsx(l.Provider,{value:r,children:n})},c=s.forwardRef(function({children:o,asChild:r=!1,...l},a){const{refs:c,getReferenceProps:u,open:d,onOpenChange:f}=i(),p=o.ref,m=t.useMergeRefs([c.setReference,a,p]);return r&&s.isValidElement(o)?s.cloneElement(o,u({ref:m,...l,...o.props})):e.jsx("button",{ref:m,onClick:()=>f?.(!d),"aria-expanded":d,...u({...l,className:n.clsx("jkl-popover-trigger",l.className)}),children:o})}),u=s.forwardRef(function({style:o,className:l,padding:a=0,initialFocus:c=0,returnFocus:u=!0,...d},f){const{context:p,modal:m,refs:g,open:h,floatingStyles:x,getFloatingProps:b}=i(),j=t.useMergeRefs([g.setFloating,f]),v=g.reference.current,{theme:O,size:P}=(k=v)&&"contextElement"in k?r.getThemeAndSize(v.contextElement):r.getThemeAndSize(v),R=s.useRef(null);var k;return s.useEffect(()=>{R.current=p.elements.domReference?.closest("[data-portal]")||document.body},[p.elements.domReference]),h?e.jsx(t.FloatingPortal,{root:R.current,children:e.jsx(t.FloatingFocusManager,{context:p,modal:m,initialFocus:c,returnFocus:u,children:e.jsx("div",{"data-theme":O,"data-size":P,className:n.clsx("jkl jkl-popover",l),ref:j,style:{...o,...x,"--popover-padding":`var(--jkl-spacing-${a})`},...b(d),children:d.children})})}):null});a.Trigger=c,a.Content=u,exports.Popover=a,exports.default=a;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),r=require("../../utilities/getThemeAndSize.cjs");const s=function(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const n in e)if("default"!==n){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:()=>e[n]})}return t.default=e,Object.freeze(t)}(o),i=s.createContext(null),l=()=>{const e=s.useContext(i);if(null==e)throw new Error("Popover komponenter må brukes innenfor en <Popover /> komponent");return e},a=({children:n,...o})=>{const r=(({open:e,onOpenChange:n,placement:o="bottom-start",strategy:r="absolute",modal:i=!0,offset:l=4,positionReference:a,onPlacementChange:c,hoverOptions:u,focusOptions:d,clickOptions:f,roleOptions:p,dismissOptions:m})=>{const[g,h]=s.useState(e),b=e??g,x=n??h,v=t.useFloating({open:b,onOpenChange:x,placement:o,strategy:r,middleware:[t.offset(l),t.flip({padding:5,fallbackPlacements:["bottom","top"]}),t.shift({padding:12})],whileElementsMounted:t.autoUpdate}),j=v.context,O=t.useClick(j,{enabled:!1,...f}),P=t.useHover(j,{enabled:!1,...u}),y=t.useFocus(j,{enabled:!1,...d}),R=t.useDismiss(j,m),k=t.useRole(j,p),C=t.useInteractions([O,R,y,P,k]);return s.useLayoutEffect(()=>{a&&v.refs.setPositionReference(a?.current)},[a,v.refs]),s.useLayoutEffect(()=>{b&&c?.(v.placement)},[b,v.placement,c]),s.useMemo(()=>({open:b,onOpenChange:x,modal:i,...C,...v}),[b,x,i,C,v])})({...o});return e.jsx(i.Provider,{value:r,children:n})},c=s.forwardRef(function({children:o,asChild:r=!1,...i},a){const{refs:c,getReferenceProps:u,open:d,onOpenChange:f}=l(),p=o.ref,m=t.useMergeRefs([c.setReference,a,p]);return r&&s.isValidElement(o)?s.cloneElement(o,u({ref:m,...i,...o.props})):e.jsx("button",{ref:m,onClick:()=>f?.(!d),"aria-expanded":d,...u({...i,className:n.clsx("jkl-popover-trigger",i.className)}),children:o})}),u=s.forwardRef(function({style:o,className:i,padding:a=0,initialFocus:c=0,returnFocus:u=!0,...d},f){const{context:p,modal:m,refs:g,open:h,floatingStyles:b,getFloatingProps:x,isPositioned:v}=l(),j=t.useMergeRefs([g.setFloating,f]),O=g.reference.current,{theme:P,size:y}=(k=O)&&"contextElement"in k?r.getThemeAndSize(O.contextElement):r.getThemeAndSize(O),R=s.useRef(null);var k;return s.useEffect(()=>{R.current=p.elements.domReference?.closest("[data-portal]")||document.body},[p.elements.domReference]),h?e.jsx(t.FloatingPortal,{root:R.current,children:e.jsx(t.FloatingFocusManager,{context:p,modal:m,initialFocus:c,returnFocus:u,children:e.jsx("div",{"data-theme":P,"data-size":y,className:n.clsx("jkl jkl-popover",i),ref:j,style:{...o,...b,"--popover-padding":`var(--jkl-spacing-${a})`,visibility:m||v?"visible":"hidden"},...x(d),children:d.children})})}):null});a.Trigger=c,a.Content=u,exports.Popover=a,exports.default=a;
 //# sourceMappingURL=Popover.cjs.map

package/build/cjs/components/popover/Popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.cjs","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 { getThemeAndSize } from \"../../utilities/getThemeAndSize.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({\n                ...props,\n                className: clsx(\"jkl-popover-trigger\", props.className),\n            })}\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, size } = isCustomPositioned(referenceElement)\n        ? getThemeAndSize(referenceElement.contextElement)\n        : getThemeAndSize(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-size={size}\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","className","clsx","PopoverContent","style","initialFocus","returnFocus","floatingStyles","getFloatingProps","setFloating","referenceElement","reference","theme","size","getThemeAndSize","contextElement","floatingPortalRef","useRef","useEffect","elements","domReference","closest","document","body","FloatingPortal","root","FloatingFocusManager","Trigger","Content"],"mappings":"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"}
+{"version":3,"file":"Popover.cjs","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 { getThemeAndSize } from \"../../utilities/getThemeAndSize.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    onPlacementChange,\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    // useLayoutEffect (i stedet for useEffect) sikrer at konsumenter får\n    // riktig placement før paint — ellers ville første frame bruke default\n    // placement og deretter snappe over til den faktiske, noe som gir et\n    // synlig \"glitch\" på styling som er placement-avhengig (f.eks. flat side\n    // / border-radius på Select-listboxen ved flip).\n    React.useLayoutEffect(() => {\n        if (!open) return;\n        onPlacementChange?.(data.placement);\n    }, [open, data.placement, onPlacementChange]);\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({\n                ...props,\n                className: clsx(\"jkl-popover-trigger\", props.className),\n            })}\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 {\n        context,\n        modal,\n        refs,\n        open,\n        floatingStyles,\n        getFloatingProps,\n        isPositioned,\n    } = usePopoverContext();\n    const ref = useMergeRefs([refs.setFloating, propRef]);\n\n    const referenceElement = refs.reference.current as ReferenceElement;\n\n    const { theme, size } = isCustomPositioned(referenceElement)\n        ? getThemeAndSize(referenceElement.contextElement)\n        : getThemeAndSize(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-size={size}\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                            // Skjul popoveren inntil floating-ui har regnet\n                            // ut første posisjon — ellers blinker den\n                            // kort i (0,0) før den hopper på plass.\n                            // Bare for ikke-modale popovere; modale bruker\n                            // umiddelbar fokus-trap som forutsetter at\n                            // innholdet er fokuserbart fra første render.\n                            visibility:\n                                modal || isPositioned ? \"visible\" : \"hidden\",\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","onPlacementChange","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","className","clsx","PopoverContent","style","initialFocus","returnFocus","floatingStyles","getFloatingProps","isPositioned","setFloating","referenceElement","reference","theme","size","getThemeAndSize","contextElement","floatingPortalRef","useRef","useEffect","elements","domReference","closest","document","body","FloatingPortal","root","FloatingFocusManager","visibility","Trigger","Content"],"mappings":"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"}

package/build/cjs/components/popover/types.d.cts

@@ -1,4 +1,4 @@
-import { ReferenceType, UseFloatingOptions, useClick, useDismiss, useFocus, useHover, useRole } from '@floating-ui/react';
+import { Placement, ReferenceType, UseFloatingOptions, useClick, useDismiss, useFocus, useHover, useRole } from '@floating-ui/react';
 export type ClickOptions = Parameters<typeof useClick>[1];
 export type DismissOptions = Parameters<typeof useDismiss>[1];
 export type FocusOptions = Parameters<typeof useFocus>[1];
@@ -58,6 +58,13 @@ export interface PopoverOptions {
      * @default Popover.Trigger
      */
     positionReference?: React.RefObject<ReferenceType>;
+    /**
+     * Trigges når popoverens faktiske plassering endrer seg, f.eks. når
+     * `flip`-middlewaren snur popoveren over triggeren fordi det ikke er
+     * plass under. Kan brukes til å justere styling avhengig av om
+     * popoveren ligger over eller under referansen.
+     */
+    onPlacementChange?: (placement: Placement) => void;
     /**
      * Options for hover-interaksjoner.
      *

package/build/cjs/components/radio-panel/RadioPanel.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("../input-panel/InputPanel.cjs"),n=r.forwardRef(function({...r},n){return e.jsx(t.InputPanel,{...r,type:"radio",ref:n})});exports.RadioPanel=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("../input-panel/InputPanel.cjs"),n=r.forwardRef(function(r,n){return e.jsx(t.InputPanel,{...r,type:"radio",ref:n})});exports.RadioPanel=n;
 //# sourceMappingURL=RadioPanel.cjs.map

package/build/cjs/components/radio-panel/RadioPanel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadioPanel.cjs","sources":["../../../../src/components/radio-panel/RadioPanel.tsx"],"sourcesContent":["import React, { type ForwardedRef, forwardRef } from \"react\";\nimport { InputPanel } from \"../input-panel/InputPanel.js\";\nimport type { RadioPanelProps } from \"./types.js\";\n\nexport const RadioPanel = forwardRef(function RadioPanel(\n    { ...rest }: RadioPanelProps,\n    ref: ForwardedRef<HTMLInputElement>,\n) {\n    return <InputPanel {...rest} type=\"radio\" ref={ref} />;\n});\n"],"names":["RadioPanel","forwardRef","rest","ref","InputPanel","type"],"mappings":"mLAIaA,EAAaC,EAAAA,WAAW,aAC5BC,GACLC,GAEA,aAAQC,EAAAA,WAAA,IAAeF,EAAMG,KAAK,QAAQF,IAAAA,GAC9C"}
+{"version":3,"file":"RadioPanel.cjs","sources":["../../../../src/components/radio-panel/RadioPanel.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { InputPanel } from \"../input-panel/InputPanel.js\";\nimport type { RadioPanelProps } from \"./types.js\";\n\nexport const RadioPanel = forwardRef<HTMLInputElement, RadioPanelProps>(\n    function RadioPanel(props, ref) {\n        return <InputPanel {...props} type=\"radio\" ref={ref} />;\n    },\n);\n"],"names":["RadioPanel","forwardRef","props","ref","InputPanel","type"],"mappings":"mLAIaA,EAAaC,EAAAA,WACtB,SAAoBC,EAAOC,GACvB,aAAQC,EAAAA,WAAA,IAAeF,EAAOG,KAAK,QAAQF,IAAAA,GAC/C"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    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            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                    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","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":"8kBAyBMA,EAAO,OAQAC,EAASC,EAAAA,WAClB,CAACC,EAAOC,KACJ,MACIC,GAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,MAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,SAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,QAAAA,EACAC,WAAAA,GAAa,EACbC,OAAAA,GAAS,EACTC,cAAAA,EAAgB,OAChBC,MAAAA,EACAC,gBAAAA,EAAkB,EAClBC,MAAAA,EACAC,QAAAA,KACGC,GACHtB,EAEEuB,EAASC,EAAAA,MAAMtB,GAAM,aAAc,CAAEuB,gBAAiBvB,IACtDwB,EAAU,GAAGH,UACbI,EAAW,GAAGJ,WACdK,EAAgB,GAAGL,kBAElBM,EAAiBC,GAAYC,EAAAA,UAAS,GACvCC,EAAuBC,EAAAA,YAAY,KACrCH,EAAUI,IAAmBA,IAC9B,IAIGC,IAAuBpB,EACvBqB,EAAuBD,GAAgBN,GACtCQ,EAAaC,GAAkBP,EAAAA,SAAS,IACzCQ,EAAWN,EAAAA,YACZO,KAEOA,EAAKlC,MAAMmC,cAAcC,SAASL,EAAYI,gBAKxB,mBAAf1B,GACAA,EAAWsB,EAAaG,GAKvC,CAACzB,EAAYsB,IAEXM,EAAyBC,EAAAA,QAC3B,IACIxC,EAAMyC,IAAIC,EAAAA,cAAcD,IAAKL,IACzB,MAAMO,GACDZ,GAAgC,KAAhBE,GAAsBE,EAASC,GACpD,MAAO,IAAKA,EAAMO,QAAAA,KAE1B,CAAC3C,EAAO+B,EAAcE,EAAaE,IAEjCS,EAA0BJ,EAAAA,QAAQ,aACzBvC,EAAU,MAGdD,EAAM6C,KAAMT,GACC,iBAATA,EACDA,IAASnC,EACTmC,EAAKnC,QAAUA,GAE1B,CAACA,EAAOD,KAIJ8C,EAAeC,GAAoBpB,EAAAA,SACtCiB,QAA4B,IAAV3C,EAAsBA,EAAQ,IAE9C+C,EAAqC,KAAlBF,EACnBG,EAAqBT,EAAAA,QACvB,IACID,EAAaW,KAAMd,GAASA,EAAKnC,QAAU6C,IACrC5C,OAASW,EACnB,CAAC0B,EAAcO,EAAejC,IAG5BsC,EAAYC,EAAAA,OAAiC,MAE7CC,GAAmBxB,EAAAA,YACpByB,IACGH,EAAUI,QAAUD,EAChBzD,IACkC,mBAAvBA,EACPA,EAAmByD,GAEnBzD,EAAmB0D,QAAUD,GAGjCA,GACAP,EAAiBO,EAASrD,QAGlC,CAACJ,IAGCiC,GAAgB0B,EAAAA,iBAAiBvD,GACvCwD,EAAAA,UAAU,KACFxD,IAAU6B,IAIViB,SADO9C,EAAU,MAAgB2C,EAChB,GAEA3C,IAEtB,CAACA,EAAO6B,GAAec,IAE1B,MAAMc,GAAe7B,EAAAA,YAChBO,IACG,MAAMuB,EAAYvB,EAAKnC,MACvBiC,EAAe,IACfa,EAAiBY,GACjB/B,IACAgC,GAAUL,SAASM,SAEvB,CAACjC,IAKCkC,GAAwBN,EAAAA,iBAAiBV,GAC/CW,EAAAA,UAAU,YAGKK,GAA0B,KACjCA,KAA0BhB,GAC1BA,IAAkB7C,IAIlBG,GACAA,EAAS,CACL2D,KAAM,SACNC,OAAQ,CAAEjE,KAAAA,EAAME,MAAO6C,KAG3BK,EAAUI,SACVJ,EAAUI,QAAQU,cACd,IAAIC,MAAM,SAAU,CAAEC,SAAS,OAGxC,CAAC/D,EAAUL,EAAME,EAAO6C,EAAegB,KAI1C,MAAMM,GAA0BhB,EAAAA,OAAuB,MACjDiB,GAAiBjB,EAAAA,QAAO,GACxBkB,GAAiBlB,EAAAA,OAAyB,MAC1CQ,GAAYR,EAAAA,OAA0B,MAEtCmB,GAAuB1C,EAAAA,YACzB,CAAC2C,EAAiBC,KACd,GAAID,IAAWzC,EAAc,CACzB,MAAM2C,EAAcD,EAAIlB,QACpBmB,GACAC,EAAAA,cAAcD,EAAa5B,EAEnC,MAAW0B,EACHF,GAAef,SACfe,GAAef,QAAQM,QAGvBQ,GAAed,SAAWK,GAAUL,SACpCK,GAAUL,QAAQM,SAI9B,CAAC9B,EAAce,KAGZ8B,IAAeC,EAAAA,kBAClBpD,EACA,CACIqD,eAAgBP,GAChBQ,gBAAiBR,KAIzBS,oBAAkB,CAAEP,IAAKG,KAEzB,MAAMK,GAAQpD,EAAAA,YAAY,KAClBE,GACAG,EAAe,IAEf7B,IACAA,EAAO,CACH0D,KAAM,OACNC,OAAQ,CAAEjE,KAAAA,EAAME,MAAO6C,KAE3BK,EAAUI,SAASU,cACf,IAAIC,MAAM,WAAY,CAAEC,SAAS,MAGzCE,GAAed,SAAU,EACzB7B,GAAS,IACV,CAACrB,EAAQ0B,EAAchC,EAAM+C,IAE1BoC,GAAarD,EAAAA,YACdsD,IACgCf,GAAwBb,SAK3B6B,SAASD,EAAEE,gBAEjCJ,MAGR,CAACA,KAGCK,GAAczD,EAAAA,YAAY,KACvBwC,GAAed,UACZjD,GACAA,EAAQ,CACJyD,KAAM,SACNC,OAAQ,CAAEjE,KAAAA,EAAME,MAAO6C,KAG/BuB,GAAed,SAAU,IAE9B,CAACjD,EAASwC,EAAe/C,IAEtBwF,GAAkB1D,EAAAA,YACnBsD,IAGIA,EAAEnB,OAA6BH,MAAM,CAAE2B,eAAe,KAE3D,IAIJ/B,EAAAA,UAAU,KACN,MAAMgC,EAAStC,EAAUI,QACnBmC,EAAcpB,GAAef,QAC7BoC,EAAS/B,GAAUL,QACnBqC,EAAuBxB,GAAwBb,QAErD,OAAAkC,GAAQI,iBAAiB,QAAS,KAC9B7D,EAAuB0D,GAAa7B,QAAU8B,GAAQ9B,UAE1D4B,GAAQI,iBAAiB,OAAQ,SAAgBC,GAC7CF,GAAsBR,SAASU,EAAGT,gBAC9BS,EAAGC,gBACX,GAEO,KACHN,GAAQO,oBAAoB,QAAS,KACjChE,EACM0D,GAAa7B,QACb8B,GAAQ9B,UAElB4B,GAAQO,oBAAoB,OAAQ,SAAgBF,GAChDF,GAAsBR,SAASU,EAAGT,gBAC9BS,EAAGC,gBACX,KAEL,CAAC/D,IAMJ,MAAMiE,GAAkBpE,EAAAA,YACnBsD,IAEkB,cAAVA,EAAEe,KAAiC,MAAVf,EAAEe,KAC3BzE,EAKgB,WAAV0D,EAAEe,MACTf,EAAEY,iBACFZ,EAAEgB,kBACFzE,GAAS,KANTyD,EAAEY,iBACFZ,EAAEgB,kBACFzE,GAAS,KAOjB,CAACD,IAIC2E,GAAwBvE,EAAAA,YACzBsD,IACG,GAAc,cAAVA,EAAEe,IAAqB,CACvBf,EAAEY,iBACFZ,EAAEgB,kBAEF,MAAMzB,EAAcE,GAAYrB,QAC5BmB,IACI3C,EAIA4C,EAAAA,cAAcD,OAAa,GAE3BC,EAAAA,cAAcD,EAAa5B,GAGvC,SAAqB,WAAVqC,EAAEe,IACTf,EAAEY,iBACFZ,EAAEgB,kBACFzE,GAAS,QAAK,GACG,QAAVyD,EAAEe,KAAkBf,EAAEkB,SAOZ,UAAVlB,EAAEe,KAAmBzE,IAE5B0D,EAAEY,iBACFZ,EAAEgB,uBAVqC,CACvC,MAAMzB,EAAcE,GAAYrB,QAC5BmB,IACAS,EAAEY,iBACFZ,EAAEgB,kBACFxB,EAAAA,cAAcD,EAAa5B,GAEnC,GAMJ,CAAC8B,GAAa9B,EAAef,EAAcN,IAIzC6E,GAAwBzE,EAAAA,YACzBsD,IACG,GAAc,QAAVA,EAAEe,IACFf,EAAEY,iBACFZ,EAAEgB,kBAEEhB,EAAEkB,UAAY/B,GAAef,QAC7Be,GAAef,QAAQM,QAChBD,GAAUL,UAEjBR,EAAiBoC,EAAEoB,cAActG,OACjCyB,GAAS,GACTkC,GAAUL,QAAQM,cAAA,GAEL,YAAVsB,EAAEe,KACLtB,GAAYrB,SAAWe,GAAef,QAAS,CAE/C,MAAMiD,EAAe5B,GAAYrB,QAAQkD,cACrC,iCAGAtB,EAAEoB,cAAczG,KAAO0G,GAAc1G,IACrCwE,GAAef,SAEfe,GAAef,QAAQM,OAE/B,GAGR,CAACe,KAILnB,OAAAA,EAAAA,UAAU,KACN,MAAMiD,EAAgBvB,IACJ,WAAVA,EAAEe,KAAoBzE,GACtBC,GAAS,IAGjB,cAAWiF,OAAW,KAAelF,GACjCkF,OAAOd,iBAAiB,UAAWa,GAEhC,YACQC,OAAW,KAClBA,OAAOX,oBAAoB,UAAWU,KAG/C,CAACjF,IAGAmF,EAAAA,KAAAC,WAAA,CACIC,SAAA,CAAAF,EAAAA,KAAC,SAAA,CACG7G,KAAAA,EACAgH,UAAU,EACV,cAAY,oBACZxG,UAAU,cACV,eAAW,EACXkE,IAAKpB,GACLpD,MAAO6C,EACP1C,SAAUX,EAEVqH,SAAA,CAAAE,EAAAA,IAAC,SAAA,CAAO/G,MAAM,KAAM,IAEnBsC,EAAaE,IAAKL,GACf4E,EAAAA,IAAC,SAAA,CAEGC,QAAS7E,EAAKO,QACd1C,MAAOmC,EAAKnC,MAEX6G,SAAA1E,EAAKlC,OAJD,GAAGiB,SAAciB,EAAKnC,aAQvC+G,EAAAA,IAACE,EAAAA,WAAA,CACGzC,IAAKL,GACL,cAAY,aACZ7D,UAAW4G,EAAAA,KAAK,aAAc5G,EAAW,CACrC,qBAAsBK,EACtB,mBACIa,GACAc,EAAaM,KAAMT,GAASA,EAAKO,SACrC,wBAAyBK,EACzB,wBAAyBvC,GAAcC,IAE3CO,QACIA,GAAWmG,EAAMC,eAA8BpG,GACzCmG,EAAME,aAAarG,EAAS,CACxBsG,aAAc,IACPtG,EAAQrB,MAAM2H,aACjBjH,QACI6E,IAEAlE,EAAQrB,MAAM2H,cAAcjH,UACxB6E,GAEJF,SAIZ,QAEN/D,EACJpB,GAAIiC,EAAeP,EAAgBD,EACnCP,MACI,CACI,iCAAkCD,KAC/BC,GAGXd,MAAAA,EACAC,WAAY,CACRL,GAAIwB,EACJkG,OAAQ5G,KACLT,EACHsH,QAAS1F,EAAeP,EAAgBD,GAE5Cf,UAAAA,EACAC,WAAAA,EACAiH,OAAQ,EACJ,eAAgBC,KACbC,KAEHhB,EAAAA,KAAC,MAAA,CACGrG,UAAU,4BACVS,MAAO,CAAEF,MAAAA,GAERgG,SAAA,CAAA/E,GACGiF,EAAAA,IAAC,QAAA,IACOY,EACJ,eAAcD,EACd7H,GAAI0B,EACJyF,QAASjF,EACTyC,IAAKH,GACLuD,YAAY,MACZ5H,MAAOgC,EACP7B,SAAW+E,GACPjD,EAAeiD,EAAEnB,OAAO/D,OAE5B,cAAY,2BACZM,UAAU,2BACV,oBAAkB,OAClB,wBACIyC,EACM,GAAG7B,MAAW2G,EAAAA,QACVhF,UAEJ,EAEV,gBAAe3B,EACf,gBAAeM,EACfsG,KAAK,WACLC,UAAW5B,GACX/F,OAAQ6E,GACR5E,QAASgF,GACT2C,QAAU9C,IACNA,EAAEgB,qBAKda,EAAAA,IAAC,SAAA,CAEG,eAAcW,KACVC,EACJ9H,GAAIyB,EACJkD,IAAKb,GACLqD,OAAQjF,EACR+B,KAAK,SACLhE,KAAM,GAAGA,QACTQ,UAAW4G,EAAAA,KAAK,qBAAsB,CAClC,qCACMrE,IAEV,cAAY,qBACZ,aAAY,GACRG,GAAsB,UACtB/C,IACJ,gBAAeuB,EACf,gBAAeN,EACfd,OAAQ6E,GACR5E,QAASgF,GACT0C,UAAW/B,GACXgC,QAASrG,EACTsG,YAAc/C,IAGVA,EAAEY,iBACFnC,GAAUL,SAASM,SAGtBiD,SAAA7D,IAEL+D,EAAAA,IAAC,MAAA,CACGlH,GAAIqB,EACJsD,IAAKG,GAELmD,KAAK,UACLxH,UAAU,2BACV0G,QACKxF,GACDc,EAAa4F,MAAO/F,IAAUA,EAAKO,SAEvC,kBAAiBrB,EACjByF,YACA,aAAW,aAEVD,SAAAvE,EAAaE,IAAI,CAACL,EAAMgG,IAMrBhG,EAAKO,QACDiE,EAAAA,KAAC,SAAA,CAEGK,QAAS7E,EAAKO,QACdoB,KAAK,SACLjE,GAAI,GAAGqB,MAAW2G,EAAAA,QACd1F,EAAKnC,SAETM,UAAU,qBACV,cAAY,qBACZ,gBACI6B,EAAKnC,QAAU6C,EAGnBiF,KAAK,SACL9H,MAAOmC,EAAKnC,MACZ,kBAAiB,sBAAsBmI,IACvC/H,OAAQ6E,GACR5E,QAASgF,GACT0C,UAAW1B,GACX2B,QAAU9C,IACNA,EAAEY,iBACFrC,GAAatB,IAEjBiG,YAAa9C,GAEZuB,SAAA,CAAA1E,EAAKlC,MACLkC,EAAKkG,YACFtB,MAAC,OAAA,CAAKzG,UAAU,iCACXuG,SAAA1E,EAAKkG,cAEV,OA7BC,GAAGnH,KAAUiB,EAAKnC,SA+B3B,QAGZ+G,EAAAA,IAACuB,EAAAA,sBAAA,CACGC,QAAQ,SACRC,cAAehH,EACflB,UAAU,gCAU1Cb,EAAOgJ,YAAc"}
+{"version":3,"file":"Select.cjs","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    type CSSProperties,\n    type FocusEvent,\n    forwardRef,\n    type KeyboardEvent,\n    type MouseEvent,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useListNavigation } from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport { usePreviousValue } from \"../../hooks/usePreviousValue/usePreviousValue.js\";\nimport { type ValuePair, getValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport Popover from \"../popover/Popover.js\";\nimport type { PopupTipProps } from \"../tooltip/types.js\";\nimport { focusSelected, toLower } from \"./select-utils.js\";\nimport type { SelectProps } from \"./types.js\";\n\nconst noop = () => {\n    return;\n};\n\ninterface Option extends ValuePair {\n    visible: boolean;\n}\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n    (props, forwardedSelectRef) => {\n        const {\n            id,\n            name,\n            items,\n            value,\n            label,\n            labelProps,\n            onChange,\n            onBlur,\n            onFocus,\n            className,\n            helpLabel,\n            errorLabel,\n            invalid,\n            searchable = false,\n            inline = false,\n            defaultPrompt = \"Velg\",\n            width,\n            maxShownOptions = 5,\n            style,\n            tooltip,\n            \"data-testautoid\": dataTestAutoId,\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        // Unik anchor-name som CSS anchor positioning bruker for å la\n        // dropdown-listen matche bredden til triggeren.\n        const anchorName = `--${listId.replace(/[^a-zA-Z0-9-]/g, \"-\")}-anchor`;\n\n        const [dropdownIsShown, setShown] = useState(false);\n        const toggleListVisibility = useCallback(() => {\n            setShown((previousValue) => !previousValue);\n        }, []);\n\n        // Lagrer faktisk placement etter at floating-ui har kjørt `flip`,\n        // slik at vi kan bytte hvilken side av lista og knappen som er\n        // flat når lista snus over triggeren.\n        const [popoverPlacement, setPopoverPlacement] = useState<\n            \"top\" | \"bottom\"\n        >(\"bottom\");\n        const handlePlacementChange = useCallback((p: string) => {\n            setPopoverPlacement(p.startsWith(\"top\") ? \"top\" : \"bottom\");\n        }, []);\n\n        /// Søk\n\n        const isSearchable = Boolean(searchable);\n        const showSearchInputField = isSearchable && dropdownIsShown;\n        const [searchValue, setSearchValue] = useState(\"\");\n        const searchFn = useCallback(\n            (item: ValuePair) => {\n                if (\n                    item.label.toLowerCase().includes(searchValue.toLowerCase())\n                ) {\n                    return true;\n                }\n\n                if (typeof searchable === \"function\") {\n                    return searchable(searchValue, item);\n                }\n\n                return false;\n            },\n            [searchable, searchValue],\n        );\n        const visibleItems: Option[] = useMemo(\n            () =>\n                items.map(getValuePair).map((item) => {\n                    const visible =\n                        !isSearchable || searchValue === \"\" || searchFn(item);\n                    return { ...item, visible };\n                }),\n            [items, isSearchable, searchValue, searchFn],\n        );\n        const valueIsInItems: boolean = useMemo(() => {\n            if (typeof value === \"undefined\") {\n                return false;\n            }\n            return items.some((item) =>\n                typeof item === \"string\"\n                    ? item === value\n                    : item.value === value,\n            );\n        }, [value, items]);\n\n        /// Valg av <option>\n\n        const [selectedValue, setSelectedValue] = useState<string>(\n            valueIsInItems && value !== undefined ? value : \"\",\n        );\n        const hasSelectedValue = selectedValue !== \"\";\n        const selectedValueLabel = useMemo(\n            () =>\n                visibleItems.find((item) => item.value === selectedValue)\n                    ?.label || defaultPrompt,\n            [visibleItems, selectedValue, defaultPrompt],\n        );\n\n        const selectRef = useRef<HTMLSelectElement | null>(null);\n        // Hjelpefunksjon som gjør det enklere å forwarde refen og å bruke den selv internt\n        const unifiedSelectRef = useCallback(\n            (instance: HTMLSelectElement | null) => {\n                selectRef.current = instance;\n                if (forwardedSelectRef) {\n                    if (typeof forwardedSelectRef === \"function\") {\n                        forwardedSelectRef(instance);\n                    } else {\n                        forwardedSelectRef.current = instance;\n                    }\n                }\n                if (instance) {\n                    setSelectedValue(instance.value);\n                }\n            },\n            [forwardedSelectRef],\n        );\n\n        const previousValue = usePreviousValue(value);\n        useEffect(() => {\n            if (value === previousValue) {\n                return;\n            }\n            if (typeof value === \"undefined\" || !valueIsInItems) {\n                setSelectedValue(\"\");\n            } else {\n                setSelectedValue(value);\n            }\n        }, [value, previousValue, valueIsInItems]);\n\n        const selectOption = useCallback(\n            (item: Option) => {\n                const nextValue = item.value;\n                setSearchValue(\"\");\n                setSelectedValue(nextValue);\n                toggleListVisibility();\n                buttonRef.current?.focus();\n            },\n            [toggleListVisibility],\n        );\n\n        // La komponenten rendre <select> med den valgte verdien før onChange trigges, slik at\n        // react-hook-form@>7.41.1 behandler feltet som at det har en verdi.\n        const previousSelectedValue = usePreviousValue(selectedValue);\n        useEffect(() => {\n            // previousSelectedValue er undefined på første render, men da vil vi ikke ha en onChange uansett\n            if (\n                typeof previousSelectedValue === \"undefined\" ||\n                previousSelectedValue === selectedValue ||\n                selectedValue === value\n            ) {\n                return;\n            }\n            if (onChange) {\n                onChange({\n                    type: \"change\",\n                    target: { name, value: selectedValue },\n                });\n            }\n            if (selectRef.current) {\n                selectRef.current.dispatchEvent(\n                    new Event(\"change\", { bubbles: true }),\n                );\n            }\n        }, [onChange, name, value, selectedValue, previousSelectedValue]);\n\n        /// Fokushåndtering\n\n        const componentRootElementRef = useRef<HTMLDivElement>(null);\n        const focusInsideRef = useRef(false);\n        const searchFieldRef = useRef<HTMLInputElement>(null);\n        const buttonRef = useRef<HTMLButtonElement>(null);\n\n        const dropdownRef = useRef<HTMLDivElement | null>(null);\n        // Lagrer listbox-elementet i state slik at downstream-hooks\n        // (f.eks. `useListNavigation`) kan re-feste listeneren idet\n        // `FloatingPortal` mounter listen.\n        const [listboxEl, setListboxEl] = useState<HTMLDivElement | null>(null);\n\n        // Listen rendres i en `FloatingPortal` som monteres via en\n        // `useLayoutEffect` + `setState` i floating-ui. Refen er derfor\n        // ikke tilgjengelig før i en senere render. Vi bruker en\n        // callback-ref for å plassere fokus på valgt option idet listen\n        // faktisk er i DOM-en. Refen holdes stabil (tom dependency-list)\n        // slik at en endring i `selectedValue`/`isSearchable` ikke får\n        // React til å avmontere/remontere refen og dermed flytte fokus\n        // mens menyen er åpen — vi leser siste verdier via refs.\n        const isSearchableRef = useRef(isSearchable);\n        const selectedValueRef = useRef(selectedValue);\n        useEffect(() => {\n            isSearchableRef.current = isSearchable;\n            selectedValueRef.current = selectedValue;\n        });\n\n        const setDropdownRef = useCallback((node: HTMLDivElement | null) => {\n            dropdownRef.current = node;\n            setListboxEl(node);\n            if (node && !isSearchableRef.current) {\n                // Popover skjules med `visibility: hidden` til\n                // floating-ui har regnet ut første posisjon. Defer\n                // fokus til etter neste paint, slik at vi ikke flytter\n                // fokus til et usynlig element (kan gi manglende\n                // fokusindikator i enkelte nettlesere).\n                requestAnimationFrame(() => {\n                    if (dropdownRef.current === node) {\n                        focusSelected(node, selectedValueRef.current);\n                    }\n                });\n            }\n        }, []);\n\n        // Søkbart felt og knappen som får fokus ved lukking lever i hoved-\n        // DOM-en, så for de tilfellene holder en useEffect.\n        const wasShown = usePreviousValue(dropdownIsShown);\n        useEffect(() => {\n            if (dropdownIsShown === wasShown) return;\n            if (dropdownIsShown && isSearchable) {\n                searchFieldRef.current?.focus();\n            } else if (\n                !dropdownIsShown &&\n                focusInsideRef.current &&\n                buttonRef.current\n            ) {\n                buttonRef.current.focus();\n            }\n        }, [dropdownIsShown, wasShown, isSearchable]);\n\n        useListNavigation({ element: listboxEl });\n\n        const close = useCallback(() => {\n            if (isSearchable) {\n                setSearchValue(\"\");\n            }\n            if (onBlur) {\n                onBlur({\n                    type: \"blur\",\n                    target: { name, value: selectedValue },\n                });\n                selectRef.current?.dispatchEvent(\n                    new Event(\"focusout\", { bubbles: true }),\n                );\n            }\n            focusInsideRef.current = false;\n            setShown(false);\n        }, [onBlur, isSearchable, name, selectedValue]);\n\n        const handleBlur = useCallback(\n            (e: FocusEvent<HTMLButtonElement | HTMLInputElement>) => {\n                const componentRootElement = componentRootElementRef.current;\n                const dropdownElement = dropdownRef.current;\n                // There are known issues in Firefox when using \"relatedTarget\" in onBlur events:\n                // https://github.com/facebook/react/issues/2011\n                // This might be fixed in react 17. Se issue above.\n                // Dropdown rendres i en portal, så vi må sjekke begge trærne\n                // for å avgjøre om fokus blir værende inne i komponenten.\n                const nextFocusIsInsideComponent =\n                    componentRootElement?.contains(e.relatedTarget as Node) ||\n                    dropdownElement?.contains(e.relatedTarget as Node);\n                if (!nextFocusIsInsideComponent) {\n                    close();\n                }\n            },\n            [close],\n        );\n\n        const handleFocus = useCallback(() => {\n            if (!focusInsideRef.current) {\n                if (onFocus) {\n                    onFocus({\n                        type: \"change\",\n                        target: { name, value: selectedValue },\n                    });\n                }\n                focusInsideRef.current = true;\n            }\n        }, [onFocus, selectedValue, name]);\n\n        const handleMouseOver = useCallback(\n            (e: MouseEvent<HTMLButtonElement>) => {\n                // Ved mouseOver på options flytter vi fokus til dem for å unngå \"dobbel fokus\"\n                // der det ser ut som to forskjellige elementer er fokusert/hovered samtidig\n                (e.target as HTMLButtonElement).focus({ preventScroll: true });\n            },\n            [],\n        );\n\n        // Handle focus and blur of hidden select element\n        useEffect(() => {\n            const select = selectRef.current;\n            if (!select) return;\n\n            const onSelectFocus = () => {\n                if (showSearchInputField) {\n                    searchFieldRef.current?.focus();\n                } else {\n                    buttonRef.current?.focus();\n                }\n            };\n            const onSelectBlur = (ev: globalThis.FocusEvent) => {\n                // Les refs ved hvert kall slik at vi alltid sjekker mot\n                // siste listbox-element — den portalerte listen kan ha\n                // mountet etter at denne effekten ble satt opp.\n                const target = ev.relatedTarget as Node | null;\n                const insideComponent =\n                    componentRootElementRef.current?.contains(target);\n                const insideDropdown = dropdownRef.current?.contains(target);\n                if (insideComponent || insideDropdown) {\n                    ev.preventDefault();\n                }\n            };\n\n            select.addEventListener(\"focus\", onSelectFocus);\n            select.addEventListener(\"blur\", onSelectBlur);\n            return () => {\n                select.removeEventListener(\"focus\", onSelectFocus);\n                select.removeEventListener(\"blur\", onSelectBlur);\n            };\n        }, [showSearchInputField]);\n\n        /// Tastaturnavigasjon\n\n        // Add support for opening dropdown with arrowkey down as expected from native select\n        // onKeyDown to stop ArrowDown from scrolling the page\n        const handleOnKeyDown = useCallback(\n            (e: KeyboardEvent<HTMLButtonElement>) => {\n                if (\n                    (e.key === \"ArrowDown\" || e.key === \" \") &&\n                    !dropdownIsShown\n                ) {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setShown(true);\n                } else if (e.key === \"Escape\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setShown(false);\n                }\n            },\n            [dropdownIsShown],\n        );\n\n        // onKeyDown to stop ArrowDown from scrolling the page\n        const handleSearchOnKeyDown = useCallback(\n            (e: KeyboardEvent<HTMLInputElement>) => {\n                if (e.key === \"ArrowDown\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n\n                    const listElement = dropdownRef.current;\n                    if (listElement) {\n                        if (isSearchable) {\n                            // Flytt fokus til det første elementet i listen, ikke det forrige valgte.\n                            // Ved endring i filter er det ikke gitt at vi ønsker å ta utgangspunkt i\n                            // den valgte verdien.\n                            focusSelected(listElement, undefined);\n                        } else {\n                            focusSelected(listElement, selectedValue);\n                        }\n                    }\n                } else if (e.key === \"Escape\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setShown(false);\n                } else if (e.key === \"Tab\" && !e.shiftKey) {\n                    const listElement = dropdownRef.current;\n                    if (listElement) {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        focusSelected(listElement, selectedValue);\n                    }\n                } else if (e.key === \"Enter\" && dropdownIsShown) {\n                    // Should not propagate Enter keyevent because form might submit\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n            },\n            [selectedValue, isSearchable, dropdownIsShown],\n        );\n\n        // onKeyDown so this Tab listener isn't triggered by tabbing from search field to option\n        const handleOptionOnKeyDown = useCallback(\n            (e: KeyboardEvent<HTMLButtonElement>) => {\n                if (e.key === \"Tab\") {\n                    e.preventDefault();\n                    e.stopPropagation();\n\n                    if (e.shiftKey && searchFieldRef.current) {\n                        searchFieldRef.current.focus();\n                    } else if (buttonRef.current) {\n                        // Mimic behaviour of Firefox and native select, where Tab selects the current item and closes the menu\n                        setSelectedValue(e.currentTarget.value);\n                        setShown(false);\n                        buttonRef.current.focus();\n                    }\n                } else if (e.key === \"ArrowUp\") {\n                    if (dropdownRef.current && searchFieldRef.current) {\n                        // Can't be based on index since the first item might be filtered out\n                        const firstVisible = dropdownRef.current.querySelector(\n                            '[role=\"option\"]:not([hidden])',\n                        );\n                        if (\n                            e.currentTarget.id === firstVisible?.id &&\n                            searchFieldRef.current\n                        ) {\n                            searchFieldRef.current.focus();\n                        }\n                    }\n                }\n            },\n            [],\n        );\n\n        // Add support for closing the dropdown with Escape like native select. Unfortunately, Escape does not trigger the button onKeyDown.\n        useEffect(() => {\n            const handleEscape = (e: globalThis.KeyboardEvent) => {\n                if (e.key === \"Escape\" && dropdownIsShown) {\n                    setShown(false);\n                }\n            };\n            if (typeof window !== \"undefined\" && dropdownIsShown) {\n                window.addEventListener(\"keydown\", handleEscape);\n            }\n            return () => {\n                if (typeof window !== \"undefined\") {\n                    window.removeEventListener(\"keydown\", handleEscape);\n                }\n            };\n        }, [dropdownIsShown]);\n\n        return (\n            <>\n                <select\n                    name={name}\n                    tabIndex={-1}\n                    data-testid=\"jkl-native-select\"\n                    className=\"jkl-sr-only\"\n                    aria-hidden\n                    ref={unifiedSelectRef}\n                    value={selectedValue}\n                    onChange={noop} // React complains unless we give an onChange handler. This is technically a read-only field, but readOnly isn't an option here.\n                >\n                    <option value=\"\" />{\" \"}\n                    {/* Tom option må være et valg, ellers vil <select> alltid ha en value */}\n                    {visibleItems.map((item) => (\n                        <option\n                            key={`${listId}-opt-${item.value}`}\n                            hidden={!item.visible}\n                            value={item.value}\n                        >\n                            {item.label}\n                        </option>\n                    ))}\n                </select>\n                <InputGroup\n                    ref={componentRootElementRef}\n                    data-testid=\"jkl-select\"\n                    className={clsx(\"jkl-select\", className, {\n                        \"jkl-select--inline\": inline,\n                        \"jkl-select--open\":\n                            dropdownIsShown &&\n                            visibleItems.some((item) => item.visible),\n                        \"jkl-select--no-value\": !hasSelectedValue,\n                        \"jkl-select--invalid\": !!errorLabel || invalid,\n                    })}\n                    data-testautoid={dataTestAutoId}\n                    tooltip={\n                        tooltip && React.isValidElement<PopupTipProps>(tooltip)\n                            ? React.cloneElement(tooltip, {\n                                  triggerProps: {\n                                      ...tooltip.props.triggerProps,\n                                      onFocus: (\n                                          e: FocusEvent<HTMLButtonElement>,\n                                      ) => {\n                                          tooltip.props.triggerProps?.onFocus?.(\n                                              e,\n                                          );\n                                          close();\n                                      },\n                                  },\n                              })\n                            : null\n                    }\n                    {...rest}\n                    id={isSearchable ? searchInputId : buttonId}\n                    style={style}\n                    label={label}\n                    labelProps={{\n                        id: labelId,\n                        srOnly: inline,\n                        ...labelProps,\n                        htmlFor: isSearchable ? searchInputId : buttonId,\n                    }}\n                    helpLabel={helpLabel}\n                    errorLabel={errorLabel}\n                    render={({\n                        \"aria-invalid\": ariaInvalid,\n                        ...inputProps\n                    }) => {\n                        // Lista vises kun når dropdown er åpnet *og* det\n                        // finnes minst ett synlig valg. `aria-expanded` på\n                        // trigger og combobox må følge samme boolean for\n                        // ikke å lyve om popoverens tilstand.\n                        const isPopoverOpen =\n                            dropdownIsShown &&\n                            visibleItems.some((item) => item.visible);\n                        return (\n                            <Popover\n                                open={isPopoverOpen}\n                                placement=\"bottom-start\"\n                                offset={0}\n                                modal={false}\n                                onPlacementChange={handlePlacementChange}\n                                clickOptions={{ enabled: false }}\n                                dismissOptions={{ enabled: false }}\n                                roleOptions={{ enabled: false }}\n                            >\n                                <Popover.Trigger asChild>\n                                    <div\n                                        className=\"jkl-select__outer-wrapper\"\n                                        data-popover-placement={\n                                            popoverPlacement\n                                        }\n                                        style={\n                                            {\n                                                width,\n                                                anchorName,\n                                            } as CSSProperties\n                                        }\n                                    >\n                                        {isSearchable && (\n                                            <input\n                                                {...inputProps}\n                                                aria-invalid={ariaInvalid}\n                                                id={searchInputId}\n                                                hidden={!showSearchInputField}\n                                                ref={searchFieldRef}\n                                                placeholder=\"Søk\"\n                                                value={searchValue}\n                                                onChange={(e) =>\n                                                    setSearchValue(\n                                                        e.target.value,\n                                                    )\n                                                }\n                                                data-testid=\"jkl-select__search-input\"\n                                                className=\"jkl-select__search-input\"\n                                                aria-autocomplete=\"list\"\n                                                aria-activedescendant={\n                                                    isPopoverOpen &&\n                                                    hasSelectedValue\n                                                        ? `${listId}__${toLower(\n                                                              selectedValue,\n                                                          )}`\n                                                        : undefined\n                                                }\n                                                aria-controls={\n                                                    isPopoverOpen\n                                                        ? listId\n                                                        : undefined\n                                                }\n                                                aria-expanded={isPopoverOpen}\n                                                role=\"combobox\"\n                                                onKeyDown={\n                                                    handleSearchOnKeyDown\n                                                }\n                                                onBlur={handleBlur}\n                                                onFocus={handleFocus}\n                                                onClick={(e) => {\n                                                    e.stopPropagation();\n                                                }}\n                                            />\n                                        )}\n                                        {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}\n                                        <button\n                                            // Nei dette er ikke i henhold til speccen, men VoiceOver leser den likevel og det er oppførselen vi ønsker\n                                            aria-invalid={ariaInvalid}\n                                            {...inputProps}\n                                            id={buttonId}\n                                            ref={buttonRef}\n                                            hidden={showSearchInputField}\n                                            type=\"button\"\n                                            name={`${name}-btn`}\n                                            className={clsx(\n                                                \"jkl-select__button\",\n                                                {\n                                                    \"jkl-select__button--active-value\":\n                                                        !!selectedValue,\n                                                },\n                                            )}\n                                            data-testid=\"jkl-select__button\"\n                                            aria-label={`${\n                                                selectedValueLabel || \"Velg\"\n                                            },${label}`}\n                                            aria-expanded={isPopoverOpen}\n                                            aria-controls={\n                                                isPopoverOpen\n                                                    ? listId\n                                                    : undefined\n                                            }\n                                            onBlur={handleBlur}\n                                            onFocus={handleFocus}\n                                            onKeyDown={handleOnKeyDown}\n                                            onClick={toggleListVisibility}\n                                            onMouseDown={(e) => {\n                                                // Workaround for en Safari-bug hvor e.relatedTarget er null i onBlur\n                                                // https://twitter.com/MilesSorce/status/1278762360669265925\n                                                e.preventDefault();\n                                                buttonRef.current?.focus();\n                                            }}\n                                        >\n                                            {selectedValueLabel}\n                                        </button>\n                                        <ArrowVerticalAnimated\n                                            variant=\"medium\"\n                                            pointingDown={!isPopoverOpen}\n                                            className=\"jkl-select__arrow\"\n                                        />\n                                    </div>\n                                </Popover.Trigger>\n                                <Popover.Content\n                                    initialFocus={-1}\n                                    returnFocus={false}\n                                    className=\"jkl-select__popover\"\n                                    style={{\n                                        width: `anchor-size(${anchorName} width)`,\n                                    }}\n                                >\n                                    <div\n                                        id={listId}\n                                        ref={setDropdownRef}\n                                        // biome-ignore lint/a11y/useSemanticElements: Vi reimplementerer select\n                                        role=\"listbox\"\n                                        className=\"jkl-select__options-menu\"\n                                        data-popover-placement={\n                                            popoverPlacement\n                                        }\n                                        aria-labelledby={labelId}\n                                        tabIndex={-1}\n                                        data-testid=\"jkl-select__listbox\"\n                                        data-testautoid={\n                                            dataTestAutoId\n                                                ? `${dataTestAutoId}__listbox`\n                                                : \"jkl-select__listbox\"\n                                        }\n                                        data-focus=\"controlled\" // lar oss styre markering av valg vha focus\n                                        style={\n                                            {\n                                                \"--jkl-select-max-shown-options\":\n                                                    maxShownOptions,\n                                            } as CSSProperties\n                                        }\n                                    >\n                                        {visibleItems.map((item, i) =>\n                                            // Det er viktig at vi _fjerner_ elementer som ikke er synlige fra DOMen for at tastaturnavigasjon skal fungere.\n                                            // For eksempel, hvis vi har elementene Apple, Samsung og LG i den rekkefølgen og søker etter \"l\"\n                                            // vil Samsung ikke synes. Om vi bare setter hidden-attributtet på Samsung vil ArrowDown fra Apple ikke fungere.\n                                            // Dette lar seg ikke gjenskape i en enhetstest med JSDOM + user-events, og Cypress lukker Select\n                                            // ved første {downArrow} ¯\\_(ツ)_/¯. Så please test scenariet over manuelt om dette skaper trøbbel for deg.\n                                            item.visible ? (\n                                                <button\n                                                    key={`${listId}-${item.value}`}\n                                                    hidden={!item.visible}\n                                                    type=\"button\"\n                                                    id={`${listId}__${toLower(\n                                                        item.value,\n                                                    )}`}\n                                                    className=\"jkl-select__option\"\n                                                    data-testid=\"jkl-select__option\"\n                                                    aria-selected={\n                                                        item.value ===\n                                                        selectedValue\n                                                    }\n                                                    // biome-ignore lint/a11y/useSemanticElements: Vi reimplementerer select\n                                                    role=\"option\"\n                                                    value={item.value}\n                                                    data-testautoid={`jkl-select__option-${i}`}\n                                                    onBlur={handleBlur}\n                                                    onFocus={handleFocus}\n                                                    onKeyDown={\n                                                        handleOptionOnKeyDown\n                                                    }\n                                                    onClick={(e) => {\n                                                        e.preventDefault();\n                                                        selectOption(item);\n                                                    }}\n                                                    onMouseOver={\n                                                        handleMouseOver\n                                                    }\n                                                >\n                                                    {item.label}\n                                                    {item.description ? (\n                                                        <span className=\"jkl-select__option-description\">\n                                                            {item.description}\n                                                        </span>\n                                                    ) : null}\n                                                </button>\n                                            ) : null,\n                                        )}\n                                    </div>\n                                </Popover.Content>\n                            </Popover>\n                        );\n                    }}\n                />\n            </>\n        );\n    },\n);\n\nSelect.displayName = \"Select\";\n"],"names":["noop","Select","forwardRef","props","forwardedSelectRef","id","name","items","value","label","labelProps","onChange","onBlur","onFocus","className","helpLabel","errorLabel","invalid","searchable","inline","defaultPrompt","width","maxShownOptions","style","tooltip","dataTestAutoId","rest","listId","useId","generateSuffix","labelId","buttonId","searchInputId","anchorName","replace","dropdownIsShown","setShown","useState","toggleListVisibility","useCallback","previousValue","popoverPlacement","setPopoverPlacement","handlePlacementChange","p","startsWith","isSearchable","showSearchInputField","searchValue","setSearchValue","searchFn","item","toLowerCase","includes","visibleItems","useMemo","map","getValuePair","visible","valueIsInItems","some","selectedValue","setSelectedValue","hasSelectedValue","selectedValueLabel","find","selectRef","useRef","unifiedSelectRef","instance","current","usePreviousValue","useEffect","selectOption","nextValue","buttonRef","focus","previousSelectedValue","type","target","dispatchEvent","Event","bubbles","componentRootElementRef","focusInsideRef","searchFieldRef","dropdownRef","listboxEl","setListboxEl","isSearchableRef","selectedValueRef","setDropdownRef","node","requestAnimationFrame","focusSelected","wasShown","useListNavigation","element","close","handleBlur","e","componentRootElement","dropdownElement","contains","relatedTarget","handleFocus","handleMouseOver","preventScroll","select","onSelectFocus","onSelectBlur","ev","insideComponent","insideDropdown","preventDefault","addEventListener","removeEventListener","handleOnKeyDown","key","stopPropagation","handleSearchOnKeyDown","listElement","shiftKey","handleOptionOnKeyDown","currentTarget","firstVisible","querySelector","handleEscape","window","jsxs","Fragment","children","tabIndex","ref","jsx","hidden","InputGroup","clsx","React","isValidElement","cloneElement","triggerProps","srOnly","htmlFor","render","ariaInvalid","inputProps","isPopoverOpen","Popover","open","placement","offset","modal","onPlacementChange","clickOptions","enabled","dismissOptions","roleOptions","Trigger","asChild","placeholder","toLower","role","onKeyDown","onClick","onMouseDown","ArrowVerticalAnimated","variant","pointingDown","Content","initialFocus","returnFocus","i","onMouseOver","description","displayName"],"mappings":"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"}

package/build/cjs/components/system-message/types.d.cts

@@ -1,11 +1,16 @@
+import { AriaRole } from 'react';
 import { WithChildren } from '../../utilities/types.cjs';
 export interface SystemMessageProps extends WithChildren {
     id?: string;
     className?: string;
     maxContentWidth?: string;
     paddingLeft?: string;
-    /** Overstyr standardrollen til meldingen. Om du ønsker å "skru av" rollen kan du bruke verdien `none presentation`. */
-    role?: string;
+    /**
+     * Overstyr standardrollen til meldingen. Om du ønsker å "skru av" rollen kan du bruke verdien `none` eller `presentation`.
+     *
+     * @see https://www.w3.org/TR/wai-aria-1.2/#role_definitions
+     */
+    role?: AriaRole | string;
     dismissed?: boolean;
     dismissAction?: {
         handleDismiss: () => void;

package/build/cjs/components/toast/Toast.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("@react-aria/toast"),e=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),a=require("../../hooks/useBrowserPreferences/useBrowserPreferences.cjs"),n=require("../button/Button.cjs"),r=require("../countdown/Countdown.cjs"),i=require("../flex/Flex.cjs"),c=require("../icon-button/IconButton.cjs"),l=require("../icon/icons/CloseIcon.cjs"),u=require("../icon/icons/ErrorIcon.cjs"),j=require("../icon/icons/InfoIcon.cjs"),m=require("../icon/icons/SuccessIcon.cjs"),d=require("../icon/icons/WarningIcon.cjs"),x=s=>{switch(s){case"error":return t.jsx(u.ErrorIcon,{className:"jkl-toast__icon"});case"info":return t.jsx(j.InfoIcon,{className:"jkl-toast__icon"});case"success":return t.jsx(m.SuccessIcon,{className:"jkl-toast__icon"});case"warning":return t.jsx(d.WarningIcon,{className:"jkl-toast__icon"});default:return null}};exports.Toast=function({className:u,state:j,...m}){const d=o.useRef(null),{toastProps:k,titleProps:f}=s.useToast(m,j,d),[g,_]=o.useState(!1),v="string"==typeof m.toast.content?m.toast.content:m.toast.content.content,h="string"==typeof m.toast.content?void 0:m.toast.content.title,I=null==m.toast.timer?.timerId,{prefersReducedMotion:p}=a.useBrowserPreferences();return o.useEffect(()=>{const t=setTimeout(()=>{_(!0)},0);return()=>clearTimeout(t)},[]),o.useEffect(()=>{p&&"exiting"===m.toast.animation&&j.remove(m.toast.key)},[p,m.toast.animation,m.toast.key,j]),t.jsxs("div",{...k,ref:d,className:e.clsx("jkl-toast",{"jkl-toast--info":"info"===m.toast.variant,"jkl-toast--error":"error"===m.toast.variant,"jkl-toast--warning":"warning"===m.toast.variant,"jkl-toast--success":"success"===m.toast.variant},u),"data-animation":m.toast.animation,onAnimationEnd:()=>{"exiting"===m.toast.animation&&j.remove(m.toast.key)},children:[m.toast.timeout?t.jsx(r.Countdown,{className:"jkl-toast__progress",from:m.toast.timeout,isPaused:I,"data-theme":"light",onAnimationEnd:t=>{t.stopPropagation()}}):null,t.jsxs(i.Flex,{alignItems:"start",gap:"xs",children:[x(m.toast.variant),t.jsxs(i.Flex,{...f,direction:"column",gap:"xs",className:"jkl-toast__content","aria-live":"assertive",children:[h&&t.jsx("p",{className:"jkl-toast__title",children:g&&h}),t.jsx("p",{className:"jkl-toast__message",children:g&&v}),m.toast.action&&t.jsx("div",{className:"jkl-toast__action",children:t.jsx(n.Button,{variant:"secondary","data-theme":"light",onClick:m.toast.action.onClick,children:m.toast.action.label})})]}),t.jsx(c.IconButton,{"data-theme":m.toast.variant?"light":void 0,"aria-label":"Lukk varsel",className:"jkl-toast__dismiss-button",onClick:()=>{j.close(m.toast.key)},children:t.jsx(l.CloseIcon,{})})]})]})};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("@react-aria/toast"),e=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),n=require("../../hooks/useBrowserPreferences/useBrowserPreferences.cjs"),a=require("../button/Button.cjs"),r=require("../countdown/Countdown.cjs"),c=require("../flex/Flex.cjs"),i=require("../icon-button/IconButton.cjs"),l=require("../icon/icons/CloseIcon.cjs"),u=require("../icon/icons/ErrorIcon.cjs"),j=require("../icon/icons/InfoIcon.cjs"),m=require("../icon/icons/SuccessIcon.cjs"),d=require("../icon/icons/WarningIcon.cjs"),x=s=>{switch(s){case"error":return t.jsx(u.ErrorIcon,{className:"jkl-toast__icon"});case"info":return t.jsx(j.InfoIcon,{className:"jkl-toast__icon"});case"success":return t.jsx(m.SuccessIcon,{className:"jkl-toast__icon"});case"warning":return t.jsx(d.WarningIcon,{className:"jkl-toast__icon"});default:return null}};exports.Toast=function({className:u,state:j,...m}){const d=o.useRef(null),{toastProps:k,titleProps:f}=s.useToast(m,j,d),[_,g]=o.useState(!1),I="string"==typeof m.toast.content?m.toast.content:m.toast.content.content,p="string"==typeof m.toast.content?void 0:m.toast.content.title,v=null==m.toast.timer?.timerId,{prefersReducedMotion:q}=n.useBrowserPreferences();return o.useEffect(()=>{const t=setTimeout(()=>{g(!0)},0);return()=>clearTimeout(t)},[]),o.useEffect(()=>{q&&"exiting"===m.toast.animation&&j.remove(m.toast.key)},[q,m.toast.animation,m.toast.key,j]),t.jsxs("div",{...k,ref:d,className:e.clsx("jkl-toast",{"jkl-toast--info":"info"===m.toast.variant,"jkl-toast--error":"error"===m.toast.variant,"jkl-toast--warning":"warning"===m.toast.variant,"jkl-toast--success":"success"===m.toast.variant},u),"data-animation":m.toast.animation,onAnimationEnd:()=>{"exiting"===m.toast.animation&&j.remove(m.toast.key)},children:[m.toast.timeout?t.jsx(r.Countdown,{className:"jkl-toast__progress",from:m.toast.timeout,isPaused:v,onAnimationEnd:t=>{t.stopPropagation()}}):null,t.jsxs(c.Flex,{alignItems:"start",gap:"xs",children:[x(m.toast.variant),t.jsxs(c.Flex,{...f,direction:"column",gap:"xs",className:"jkl-toast__content","aria-live":"assertive",children:[p&&t.jsx("p",{className:"jkl-toast__title",children:_&&p}),t.jsx("p",{className:"jkl-toast__message",children:_&&I}),m.toast.action&&t.jsx("div",{className:"jkl-toast__action",children:t.jsx(a.Button,{variant:"secondary",onClick:m.toast.action.onClick,children:m.toast.action.label})})]}),t.jsx(i.IconButton,{"aria-label":"Lukk varsel",className:"jkl-toast__dismiss-button",onClick:()=>{j.close(m.toast.key)},children:t.jsx(l.CloseIcon,{})})]})]})};
 //# sourceMappingURL=Toast.cjs.map

package/build/cjs/components/toast/Toast.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.cjs","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport type { QueuedToast, ToastState } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { Button } from \"../button/Button.js\";\nimport { Countdown } from \"../countdown/Countdown.js\";\nimport { Flex } from \"../flex/Flex.jsx\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport type { ToastContent, ToastOptions } from \"./types.js\";\n\nexport interface ToastProps<T extends ToastContent> extends AriaToastProps<T> {\n    className?: string;\n    state: ToastState<T>;\n    toast: QueuedToast<T> & ToastOptions;\n}\n\nconst getIcon = (messageType?: \"error\" | \"info\" | \"success\" | \"warning\") => {\n    switch (messageType) {\n        case \"error\":\n            return <ErrorIcon className=\"jkl-toast__icon\" />;\n        case \"info\":\n            return <InfoIcon className=\"jkl-toast__icon\" />;\n        case \"success\":\n            return <SuccessIcon className=\"jkl-toast__icon\" />;\n        case \"warning\":\n            return <WarningIcon className=\"jkl-toast__icon\" />;\n        default:\n            return null;\n    }\n};\n\nexport function Toast<T extends ToastContent>({\n    className,\n    state,\n    ...props\n}: ToastProps<T>) {\n    const ref = useRef(null);\n    const { toastProps, titleProps } = useToast(props, state, ref);\n    const [announceReady, setAnnounceReady] = useState(false);\n\n    const content =\n        typeof props.toast.content === \"string\"\n            ? props.toast.content\n            : props.toast.content.content;\n    const title =\n        typeof props.toast.content === \"string\"\n            ? undefined\n            : props.toast.content.title;\n\n    // @ts-ignore Proxy for å sjekke om timeren er pauset: https://github.com/adobe/react-spectrum/blob/b1545c0d225b12672fb6a4e7b787268591d66b90/packages/%40react-stately/toast/src/useToastState.ts#L222\n    const isPaused = props.toast.timer?.timerId == null;\n\n    const { prefersReducedMotion } = useBrowserPreferences();\n\n    useEffect(() => {\n        // Delay the update to the next event loop so the toast has time to render before being announced to screen readers\n        const timeout = setTimeout(() => {\n            setAnnounceReady(true);\n        }, 0);\n\n        return () => clearTimeout(timeout);\n    }, []);\n\n    useEffect(() => {\n        if (prefersReducedMotion && props.toast.animation === \"exiting\") {\n            // If user has prefers-reduced-motion the exit animation won't run and our\n            // onAnimationEnd callback won't be invoked. In this case, remove the toast\n            // manually.\n            state.remove(props.toast.key);\n        }\n    }, [prefersReducedMotion, props.toast.animation, props.toast.key, state]);\n\n    return (\n        <div\n            {...toastProps}\n            ref={ref}\n            className={clsx(\n                \"jkl-toast\",\n                {\n                    \"jkl-toast--info\": props.toast.variant === \"info\",\n                    \"jkl-toast--error\": props.toast.variant === \"error\",\n                    \"jkl-toast--warning\": props.toast.variant === \"warning\",\n                    \"jkl-toast--success\": props.toast.variant === \"success\",\n                },\n                className,\n            )}\n            data-animation={props.toast.animation}\n            onAnimationEnd={() => {\n                // Remove the toast when the exiting animation completes.\n                if (props.toast.animation === \"exiting\") {\n                    state.remove(props.toast.key);\n                }\n            }}\n        >\n            {props.toast.timeout ? (\n                <Countdown\n                    className=\"jkl-toast__progress\"\n                    from={props.toast.timeout}\n                    isPaused={isPaused}\n                    data-theme=\"light\"\n                    onAnimationEnd={(e) => {\n                        // Avoid triggering the toast's onAnimationEnd handler so we still get our exit animation\n                        e.stopPropagation();\n                    }}\n                />\n            ) : null}\n            <Flex alignItems=\"start\" gap=\"xs\">\n                {getIcon(props.toast.variant)}\n                <Flex\n                    {...titleProps}\n                    direction=\"column\"\n                    gap=\"xs\"\n                    className=\"jkl-toast__content\"\n                    aria-live=\"assertive\"\n                >\n                    {title && (\n                        <p className=\"jkl-toast__title\">\n                            {announceReady && title}\n                        </p>\n                    )}\n                    <p className=\"jkl-toast__message\">\n                        {announceReady && content}\n                    </p>\n                    {props.toast.action && (\n                        <div className=\"jkl-toast__action\">\n                            <Button\n                                variant=\"secondary\"\n                                data-theme=\"light\"\n                                onClick={props.toast.action.onClick}\n                            >\n                                {props.toast.action.label}\n                            </Button>\n                        </div>\n                    )}\n                </Flex>\n                <IconButton\n                    data-theme={!props.toast.variant ? undefined : \"light\"}\n                    aria-label=\"Lukk varsel\"\n                    className=\"jkl-toast__dismiss-button\"\n                    onClick={() => {\n                        state.close(props.toast.key);\n                    }}\n                >\n                    <CloseIcon />\n                </IconButton>\n            </Flex>\n        </div>\n    );\n}\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","state","props","ref","useRef","toastProps","titleProps","useToast","announceReady","setAnnounceReady","useState","content","toast","title","isPaused","timer","timerId","prefersReducedMotion","useBrowserPreferences","useEffect","timeout","setTimeout","clearTimeout","animation","remove","key","jsxs","clsx","variant","onAnimationEnd","children","Countdown","from","e","stopPropagation","Flex","alignItems","gap","direction","action","Button","onClick","label","IconButton","close","CloseIcon"],"mappings":"2nBAsBMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACD,OAAOC,EAAAA,IAACC,EAAAA,UAAA,CAAUC,UAAU,oBAChC,IAAK,OACD,OAAOF,EAAAA,IAACG,EAAAA,SAAA,CAASD,UAAU,oBAC/B,IAAK,UACD,OAAOF,EAAAA,IAACI,EAAAA,YAAA,CAAYF,UAAU,oBAClC,IAAK,UACD,OAAOF,EAAAA,IAACK,EAAAA,YAAA,CAAYH,UAAU,oBAClC,QACI,OAAO,qBAIZ,UACHA,UAAAA,EACAI,MAAAA,KACGC,IAEH,MAAMC,EAAMC,EAAAA,OAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAAAA,SAASL,EAAOD,EAAOE,IACnDK,EAAeC,GAAoBC,EAAAA,UAAS,GAE7CC,EAC6B,iBAAxBT,EAAMU,MAAMD,QACbT,EAAMU,MAAMD,QACZT,EAAMU,MAAMD,QAAQA,QACxBE,EAC6B,iBAAxBX,EAAMU,MAAMD,aACb,EACAT,EAAMU,MAAMD,QAAQE,MAGxBC,EAAyC,MAA9BZ,EAAMU,MAAMG,OAAOC,SAE5BC,qBAAAA,GAAyBC,0BAEjCC,OAAAA,EAAAA,UAAU,KAEN,MAAMC,EAAUC,WAAW,KACvBZ,GAAiB,IAClB,GAEH,MAAO,IAAMa,aAAaF,IAC3B,IAEHD,EAAAA,UAAU,KACFF,GAAkD,YAA1Bf,EAAMU,MAAMW,WAIpCtB,EAAMuB,OAAOtB,EAAMU,MAAMa,MAE9B,CAACR,EAAsBf,EAAMU,MAAMW,UAAWrB,EAAMU,MAAMa,IAAKxB,IAG9DyB,EAAAA,KAAC,MAAA,IACOrB,EACJF,IAAAA,EACAN,UAAW8B,EAAAA,KACP,YACA,CACI,kBAA2C,SAAxBzB,EAAMU,MAAMgB,QAC/B,mBAA4C,UAAxB1B,EAAMU,MAAMgB,QAChC,qBAA8C,YAAxB1B,EAAMU,MAAMgB,QAClC,qBAA8C,YAAxB1B,EAAMU,MAAMgB,SAEtC/B,GAEJ,iBAAgBK,EAAMU,MAAMW,UAC5BM,eAAgB,KAEkB,YAA1B3B,EAAMU,MAAMW,WACZtB,EAAMuB,OAAOtB,EAAMU,MAAMa,MAIhCK,SAAA,CAAA5B,EAAMU,MAAMQ,QACTzB,EAAAA,IAACoC,EAAAA,UAAA,CACGlC,UAAU,sBACVmC,KAAM9B,EAAMU,MAAMQ,QAClBN,SAAAA,EACA,aAAW,QACXe,eAAiBI,IAEbA,EAAEC,qBAGV,KACJR,EAAAA,KAACS,EAAAA,KAAA,CAAKC,WAAW,QAAQC,IAAI,KACxBP,SAAA,CAAArC,EAAQS,EAAMU,MAAMgB,SACrBF,EAAAA,KAACS,EAAAA,KAAA,IACO7B,EACJgC,UAAU,SACVD,IAAI,KACJxC,UAAU,qBACV,YAAU,YAETiC,SAAA,CAAAjB,GACGlB,EAAAA,IAAC,IAAA,CAAEE,UAAU,mBACRiC,YAAiBjB,IAG1BlB,EAAAA,IAAC,IAAA,CAAEE,UAAU,qBACRiC,YAAiBnB,IAErBT,EAAMU,MAAM2B,QACT5C,EAAAA,IAAC,MAAA,CAAIE,UAAU,oBACXiC,SAAAnC,EAAAA,IAAC6C,EAAAA,OAAA,CACGZ,QAAQ,YACR,aAAW,QACXa,QAASvC,EAAMU,MAAM2B,OAAOE,QAE3BX,SAAA5B,EAAMU,MAAM2B,OAAOG,aAKpC/C,EAAAA,IAACgD,EAAAA,WAAA,CACG,aAAazC,EAAMU,MAAMgB,QAAsB,aAAZ,EACnC,aAAW,cACX/B,UAAU,4BACV4C,QAAS,KACLxC,EAAM2C,MAAM1C,EAAMU,MAAMa,MAG5BK,eAACe,EAAAA,UAAA,CAAA,UAKrB"}
+{"version":3,"file":"Toast.cjs","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport type { QueuedToast, ToastState } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { Button } from \"../button/Button.js\";\nimport { Countdown } from \"../countdown/Countdown.js\";\nimport { Flex } from \"../flex/Flex.jsx\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport type { ToastContent, ToastOptions } from \"./types.js\";\n\nexport interface ToastProps<T extends ToastContent> extends AriaToastProps<T> {\n    className?: string;\n    state: ToastState<T>;\n    toast: QueuedToast<T> & ToastOptions;\n}\n\nconst getIcon = (messageType?: \"error\" | \"info\" | \"success\" | \"warning\") => {\n    switch (messageType) {\n        case \"error\":\n            return <ErrorIcon className=\"jkl-toast__icon\" />;\n        case \"info\":\n            return <InfoIcon className=\"jkl-toast__icon\" />;\n        case \"success\":\n            return <SuccessIcon className=\"jkl-toast__icon\" />;\n        case \"warning\":\n            return <WarningIcon className=\"jkl-toast__icon\" />;\n        default:\n            return null;\n    }\n};\n\nexport function Toast<T extends ToastContent>({\n    className,\n    state,\n    ...props\n}: ToastProps<T>) {\n    const ref = useRef(null);\n    const { toastProps, titleProps } = useToast(props, state, ref);\n    const [announceReady, setAnnounceReady] = useState(false);\n\n    const content =\n        typeof props.toast.content === \"string\"\n            ? props.toast.content\n            : props.toast.content.content;\n    const title =\n        typeof props.toast.content === \"string\"\n            ? undefined\n            : props.toast.content.title;\n\n    // @ts-ignore Proxy for å sjekke om timeren er pauset: https://github.com/adobe/react-spectrum/blob/b1545c0d225b12672fb6a4e7b787268591d66b90/packages/%40react-stately/toast/src/useToastState.ts#L222\n    const isPaused = props.toast.timer?.timerId == null;\n\n    const { prefersReducedMotion } = useBrowserPreferences();\n\n    useEffect(() => {\n        // Delay the update to the next event loop so the toast has time to render before being announced to screen readers\n        const timeout = setTimeout(() => {\n            setAnnounceReady(true);\n        }, 0);\n\n        return () => clearTimeout(timeout);\n    }, []);\n\n    useEffect(() => {\n        if (prefersReducedMotion && props.toast.animation === \"exiting\") {\n            // If user has prefers-reduced-motion the exit animation won't run and our\n            // onAnimationEnd callback won't be invoked. In this case, remove the toast\n            // manually.\n            state.remove(props.toast.key);\n        }\n    }, [prefersReducedMotion, props.toast.animation, props.toast.key, state]);\n\n    return (\n        <div\n            {...toastProps}\n            ref={ref}\n            className={clsx(\n                \"jkl-toast\",\n                {\n                    \"jkl-toast--info\": props.toast.variant === \"info\",\n                    \"jkl-toast--error\": props.toast.variant === \"error\",\n                    \"jkl-toast--warning\": props.toast.variant === \"warning\",\n                    \"jkl-toast--success\": props.toast.variant === \"success\",\n                },\n                className,\n            )}\n            data-animation={props.toast.animation}\n            onAnimationEnd={() => {\n                // Remove the toast when the exiting animation completes.\n                if (props.toast.animation === \"exiting\") {\n                    state.remove(props.toast.key);\n                }\n            }}\n        >\n            {props.toast.timeout ? (\n                <Countdown\n                    className=\"jkl-toast__progress\"\n                    from={props.toast.timeout}\n                    isPaused={isPaused}\n                    onAnimationEnd={(e) => {\n                        // Avoid triggering the toast's onAnimationEnd handler so we still get our exit animation\n                        e.stopPropagation();\n                    }}\n                />\n            ) : null}\n            <Flex alignItems=\"start\" gap=\"xs\">\n                {getIcon(props.toast.variant)}\n                <Flex\n                    {...titleProps}\n                    direction=\"column\"\n                    gap=\"xs\"\n                    className=\"jkl-toast__content\"\n                    aria-live=\"assertive\"\n                >\n                    {title && (\n                        <p className=\"jkl-toast__title\">\n                            {announceReady && title}\n                        </p>\n                    )}\n                    <p className=\"jkl-toast__message\">\n                        {announceReady && content}\n                    </p>\n                    {props.toast.action && (\n                        <div className=\"jkl-toast__action\">\n                            <Button\n                                variant=\"secondary\"\n                                onClick={props.toast.action.onClick}\n                            >\n                                {props.toast.action.label}\n                            </Button>\n                        </div>\n                    )}\n                </Flex>\n                <IconButton\n                    aria-label=\"Lukk varsel\"\n                    className=\"jkl-toast__dismiss-button\"\n                    onClick={() => {\n                        state.close(props.toast.key);\n                    }}\n                >\n                    <CloseIcon />\n                </IconButton>\n            </Flex>\n        </div>\n    );\n}\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","state","props","ref","useRef","toastProps","titleProps","useToast","announceReady","setAnnounceReady","useState","content","toast","title","isPaused","timer","timerId","prefersReducedMotion","useBrowserPreferences","useEffect","timeout","setTimeout","clearTimeout","animation","remove","key","jsxs","clsx","variant","onAnimationEnd","children","Countdown","from","e","stopPropagation","Flex","alignItems","gap","direction","action","Button","onClick","label","IconButton","close","CloseIcon"],"mappings":"2nBAsBMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACD,OAAOC,EAAAA,IAACC,EAAAA,UAAA,CAAUC,UAAU,oBAChC,IAAK,OACD,OAAOF,EAAAA,IAACG,EAAAA,SAAA,CAASD,UAAU,oBAC/B,IAAK,UACD,OAAOF,EAAAA,IAACI,EAAAA,YAAA,CAAYF,UAAU,oBAClC,IAAK,UACD,OAAOF,EAAAA,IAACK,EAAAA,YAAA,CAAYH,UAAU,oBAClC,QACI,OAAO,qBAIZ,UACHA,UAAAA,EACAI,MAAAA,KACGC,IAEH,MAAMC,EAAMC,EAAAA,OAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAAAA,SAASL,EAAOD,EAAOE,IACnDK,EAAeC,GAAoBC,EAAAA,UAAS,GAE7CC,EAC6B,iBAAxBT,EAAMU,MAAMD,QACbT,EAAMU,MAAMD,QACZT,EAAMU,MAAMD,QAAQA,QACxBE,EAC6B,iBAAxBX,EAAMU,MAAMD,aACb,EACAT,EAAMU,MAAMD,QAAQE,MAGxBC,EAAyC,MAA9BZ,EAAMU,MAAMG,OAAOC,SAE5BC,qBAAAA,GAAyBC,0BAEjCC,OAAAA,EAAAA,UAAU,KAEN,MAAMC,EAAUC,WAAW,KACvBZ,GAAiB,IAClB,GAEH,MAAO,IAAMa,aAAaF,IAC3B,IAEHD,EAAAA,UAAU,KACFF,GAAkD,YAA1Bf,EAAMU,MAAMW,WAIpCtB,EAAMuB,OAAOtB,EAAMU,MAAMa,MAE9B,CAACR,EAAsBf,EAAMU,MAAMW,UAAWrB,EAAMU,MAAMa,IAAKxB,IAG9DyB,EAAAA,KAAC,MAAA,IACOrB,EACJF,IAAAA,EACAN,UAAW8B,EAAAA,KACP,YACA,CACI,kBAA2C,SAAxBzB,EAAMU,MAAMgB,QAC/B,mBAA4C,UAAxB1B,EAAMU,MAAMgB,QAChC,qBAA8C,YAAxB1B,EAAMU,MAAMgB,QAClC,qBAA8C,YAAxB1B,EAAMU,MAAMgB,SAEtC/B,GAEJ,iBAAgBK,EAAMU,MAAMW,UAC5BM,eAAgB,KAEkB,YAA1B3B,EAAMU,MAAMW,WACZtB,EAAMuB,OAAOtB,EAAMU,MAAMa,MAIhCK,SAAA,CAAA5B,EAAMU,MAAMQ,QACTzB,EAAAA,IAACoC,EAAAA,UAAA,CACGlC,UAAU,sBACVmC,KAAM9B,EAAMU,MAAMQ,QAClBN,SAAAA,EACAe,eAAiBI,IAEbA,EAAEC,qBAGV,KACJR,EAAAA,KAACS,EAAAA,KAAA,CAAKC,WAAW,QAAQC,IAAI,KACxBP,SAAA,CAAArC,EAAQS,EAAMU,MAAMgB,SACrBF,EAAAA,KAACS,EAAAA,KAAA,IACO7B,EACJgC,UAAU,SACVD,IAAI,KACJxC,UAAU,qBACV,YAAU,YAETiC,SAAA,CAAAjB,GACGlB,EAAAA,IAAC,IAAA,CAAEE,UAAU,mBACRiC,YAAiBjB,IAG1BlB,EAAAA,IAAC,IAAA,CAAEE,UAAU,qBACRiC,YAAiBnB,IAErBT,EAAMU,MAAM2B,QACT5C,EAAAA,IAAC,MAAA,CAAIE,UAAU,oBACXiC,SAAAnC,EAAAA,IAAC6C,EAAAA,OAAA,CACGZ,QAAQ,YACRa,QAASvC,EAAMU,MAAM2B,OAAOE,QAE3BX,SAAA5B,EAAMU,MAAM2B,OAAOG,aAKpC/C,EAAAA,IAACgD,EAAAA,WAAA,CACG,aAAW,cACX9C,UAAU,4BACV4C,QAAS,KACLxC,EAAM2C,MAAM1C,EAAMU,MAAMa,MAG5BK,eAACe,EAAAA,UAAA,CAAA,UAKrB"}

package/build/cjs/components/typography/Title.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),t=require("react").forwardRef(function({className:t,size:s="l",as:l,srOnly:a,...c},i){const o=l||"h2";return e.jsx(o,{className:r.clsx("jkl-title",a&&"jkl-sr-only",t),"data-text-size":s,ref:i,...c})});exports.Title=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),s=require("react").forwardRef(function({className:s,size:t="l",as:a,srOnly:c,...l},i){const o=a||"h2";return e.jsx(o,{className:r.clsx(c&&"jkl-sr-only",s),"data-text-size":t,ref:i,...l})});exports.Title=s;
 //# sourceMappingURL=Title.cjs.map

package/build/cjs/components/typography/Title.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Title.cjs","sources":["../../../../src/components/typography/Title.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/index.js\";\nimport type { TitleElement, TitleProps } from \"./types.js\";\n\ntype TitleComponent = <As extends TitleElement = \"h2\">(\n    props: TitleProps<As>,\n) => React.ReactElement | null;\n\nexport const Title: TitleComponent = forwardRef(function Title<\n    As extends TitleElement = \"h2\",\n>(\n    { className, size = \"l\", as, srOnly, ...rest }: TitleProps<As>,\n    ref?: PolymorphicRef<As>,\n) {\n    const Tag = (as || \"h2\") as React.ElementType;\n    return (\n        <Tag\n            className={clsx(\"jkl-title\", srOnly && \"jkl-sr-only\", className)}\n            data-text-size={size}\n            ref={ref}\n            {...rest}\n        />\n    );\n}) as TitleComponent;\n"],"names":["Title","forwardRef","className","size","as","srOnly","rest","ref","Tag","jsx","clsx"],"mappings":"6JASaA,mBAAwBC,WAAW,UAG1CC,UAAAA,EAAWC,KAAAA,EAAO,IAAKC,GAAAA,EAAIC,OAAAA,KAAWC,GACxCC,GAEA,MAAMC,EAAOJ,GAAM,KACnB,OACIK,EAAAA,IAACD,EAAA,CACGN,UAAWQ,EAAAA,KAAK,YAAaL,GAAU,cAAeH,GACtD,iBAAgBC,EAChBI,IAAAA,KACID,GAGhB"}
+{"version":3,"file":"Title.cjs","sources":["../../../../src/components/typography/Title.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/index.js\";\nimport type { TitleElement, TitleProps } from \"./types.js\";\n\ntype TitleComponent = <As extends TitleElement = \"h2\">(\n    props: TitleProps<As>,\n) => React.ReactElement | null;\n\nexport const Title: TitleComponent = forwardRef(function Title<\n    As extends TitleElement = \"h2\",\n>(\n    { className, size = \"l\", as, srOnly, ...rest }: TitleProps<As>,\n    ref?: PolymorphicRef<As>,\n) {\n    const Tag = (as || \"h2\") as React.ElementType;\n    return (\n        <Tag\n            className={clsx(srOnly && \"jkl-sr-only\", className)}\n            data-text-size={size}\n            ref={ref}\n            {...rest}\n        />\n    );\n}) as TitleComponent;\n"],"names":["Title","forwardRef","className","size","as","srOnly","rest","ref","Tag","jsx","clsx"],"mappings":"6JASaA,mBAAwBC,WAAW,UAG1CC,UAAAA,EAAWC,KAAAA,EAAO,IAAKC,GAAAA,EAAIC,OAAAA,KAAWC,GACxCC,GAEA,MAAMC,EAAOJ,GAAM,KACnB,OACIK,EAAAA,IAACD,EAAA,CACGN,UAAWQ,EAAAA,KAAKL,GAAU,cAAeH,GACzC,iBAAgBC,EAChBI,IAAAA,KACID,GAGhB"}

package/build/cjs/hooks/useListNavigation/useListNavigation.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");function t(e,{event:t,list:r,currentFocus:s}){t.preventDefault(),function(e,t,r){const s=r;switch(e){case"prev":{const e=s&&s.previousElementSibling;e&&e.focus();break}case"next":{const e=s&&s.nextElementSibling;e&&e.focus();break}case"first":{const e=t.querySelector('[role="option"]');e&&e.focus();break}case"last":{const e=t.querySelectorAll('[role="option"]');e.length&&e[e.length-1].focus();break}}}(e,r,s)}exports.useListNavigation=function({ref:r}){e.useEffect(()=>{const e={keys:""},s=r.current,n=r=>{s&&function({list:e,event:r,search:s,searchResetTimer:n}){const{key:o,target:c}=r,a={event:r,list:e,currentFocus:c};switch(o){case"ArrowUp":case"PageUp":t("prev",a);break;case"ArrowDown":case"PageDown":t("next",a);break;case"Home":t("first",a);break;case"End":t("last",a);break;case"Tab":r.preventDefault();break;case"Enter":case" ":break;default:if(void 0!==s){const t=function({list:e,key:t,search:r,searchResetTimer:s}){const n=e.querySelectorAll('[role="option"]');if(!n.length)return null;if(r){r.keys=r.keys.concat(t),function(e,t){t&&(clearTimeout(t),t=void 0),t=setTimeout(()=>{e?e.keys="":e={keys:""},t=void 0},500,e,t)}(r,s);for(let e=0;e<n.length;e++){const t=n[e].innerText;if(t&&0===t.toLowerCase().indexOf(r.keys))return n[e]}}return null}({list:e,key:o,search:s,searchResetTimer:n});t&&t.focus()}}}({list:s,event:r,search:e,searchResetTimer:undefined})};return s&&s.addEventListener("keydown",n),()=>{s&&s.removeEventListener("keydown",n)}},[r])};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");function t(e,{event:t,list:r,currentFocus:n}){t.preventDefault(),function(e,t,r){const n=r;switch(e){case"prev":{const e=n&&n.previousElementSibling;e&&e.focus();break}case"next":{const e=n&&n.nextElementSibling;e&&e.focus();break}case"first":{const e=t.querySelector('[role="option"]');e&&e.focus();break}case"last":{const e=t.querySelectorAll('[role="option"]');e.length&&e[e.length-1].focus();break}}}(e,r,n)}exports.useListNavigation=function({ref:r,element:n}){e.useLayoutEffect(()=>{const e=n??r?.current??null;if(!e)return;const s={id:void 0},o={keys:""},c=r=>{!function({list:e,event:r,search:n,searchResetTimer:s}){const{key:o,target:c}=r,i={event:r,list:e,currentFocus:c};switch(o){case"ArrowUp":case"PageUp":t("prev",i);break;case"ArrowDown":case"PageDown":t("next",i);break;case"Home":t("first",i);break;case"End":t("last",i);break;case"Tab":r.preventDefault();break;case"Enter":case" ":break;default:if(void 0!==n){const t=function({list:e,key:t,search:r,searchResetTimer:n}){const s=e.querySelectorAll('[role="option"]');if(!s.length)return null;if(r){r.keys=r.keys.concat(t),function(e,t){void 0!==t.id&&(clearTimeout(t.id),t.id=void 0),t.id=window.setTimeout(()=>{e&&(e.keys=""),t.id=void 0},500)}(r,n);for(let e=0;e<s.length;e++){const t=s[e].innerText;if(t&&0===t.toLowerCase().indexOf(r.keys))return s[e]}}return null}({list:e,key:o,search:n,searchResetTimer:s});t&&t.focus()}}}({list:e,event:r,search:o,searchResetTimer:s})};return e.addEventListener("keydown",c),()=>{e.removeEventListener("keydown",c),void 0!==s.id&&clearTimeout(s.id)}},[n,r])};
 //# sourceMappingURL=useListNavigation.cjs.map

package/build/cjs/hooks/useListNavigation/useListNavigation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useListNavigation.cjs","sources":["../../../../src/hooks/useListNavigation/useListNavigation.ts"],"sourcesContent":["import { type RefObject, useEffect } from \"react\";\n\ntype Timer = number | undefined;\ntype KeyBuffer = { keys: string } | undefined;\ntype Direction = \"prev\" | \"next\" | \"first\" | \"last\";\ninterface MoveDetails {\n    event: KeyboardEvent;\n    list: HTMLElement;\n    currentFocus: HTMLButtonElement;\n}\ninterface ListDetails {\n    list: HTMLElement;\n    search: KeyBuffer;\n    searchResetTimer: Timer;\n}\ninterface SearchDetails extends ListDetails {\n    key: string;\n}\ninterface EventDetails extends ListDetails {\n    event: KeyboardEvent;\n}\ntype UseListNavigationProps<T> = {\n    /** Ref til et element med rollen `listbox` */\n    ref: RefObject<T | null>;\n};\n\nexport function useListNavigation<T extends HTMLElement>({\n    ref,\n}: UseListNavigationProps<T>): void {\n    useEffect(() => {\n        let searchResetTimer: Timer;\n        const search: KeyBuffer = { keys: \"\" }; // keypress buffer is an object to preserve state\n        const list = ref.current;\n        const handler = (event: KeyboardEvent) => {\n            if (list) {\n                handleListKeyNav({ list, event, search, searchResetTimer });\n            }\n        };\n\n        if (list) {\n            list.addEventListener(\"keydown\", handler);\n        }\n\n        return () => {\n            if (list) {\n                list.removeEventListener(\"keydown\", handler);\n            }\n        };\n    }, [ref]);\n}\n\nfunction handleMoveTo(\n    direction: Direction,\n    { event, list, currentFocus }: MoveDetails,\n) {\n    event.preventDefault();\n    moveFocusTo(direction, list, currentFocus);\n}\n\nfunction handleListKeyNav({\n    list,\n    event,\n    search,\n    searchResetTimer,\n}: EventDetails) {\n    const { key, target } = event;\n    const currentFocus = target as HTMLButtonElement;\n\n    const moveDetails = {\n        event,\n        list,\n        currentFocus,\n    };\n\n    switch (key) {\n        case \"ArrowUp\":\n        case \"PageUp\":\n            handleMoveTo(\"prev\", moveDetails);\n            break;\n        case \"ArrowDown\":\n        case \"PageDown\":\n            handleMoveTo(\"next\", moveDetails);\n            break;\n        case \"Home\":\n            handleMoveTo(\"first\", moveDetails);\n            break;\n        case \"End\":\n            handleMoveTo(\"last\", moveDetails);\n            break;\n        case \"Tab\":\n            // in a standard select, tab does nothing in-menu\n            event.preventDefault();\n            break;\n        case \"Enter\":\n        case \" \":\n            break;\n\n        default:\n            if (search !== undefined) {\n                const searchResult = findItem({\n                    list,\n                    key,\n                    search,\n                    searchResetTimer,\n                });\n                if (searchResult) {\n                    searchResult.focus();\n                }\n            }\n            break;\n    }\n}\n\nfunction moveFocusTo(\n    direction: Direction,\n    list: HTMLElement,\n    current: HTMLButtonElement,\n) {\n    const thisOption = current;\n    switch (direction) {\n        case \"prev\": {\n            const prevOption: HTMLButtonElement | null =\n                thisOption &&\n                (thisOption.previousElementSibling as HTMLButtonElement);\n            if (prevOption) {\n                prevOption.focus();\n            }\n            break;\n        }\n        case \"next\": {\n            const nextOption: HTMLButtonElement | null =\n                thisOption &&\n                (thisOption.nextElementSibling as HTMLButtonElement);\n            if (nextOption) {\n                nextOption.focus();\n            }\n            break;\n        }\n        case \"first\": {\n            const firstItem =\n                list.querySelector<HTMLButtonElement>(`[role=\"option\"]`);\n            if (firstItem) {\n                firstItem.focus();\n            }\n            break;\n        }\n        case \"last\": {\n            const listItems =\n                list.querySelectorAll<HTMLButtonElement>(`[role=\"option\"]`);\n            if (listItems.length) {\n                listItems[listItems.length - 1].focus();\n            }\n            break;\n        }\n    }\n}\n\nfunction findItem({\n    list,\n    key,\n    search,\n    searchResetTimer,\n}: SearchDetails): HTMLButtonElement | null {\n    const listItems = list.querySelectorAll(`[role=\"option\"]`);\n    if (!listItems.length) return null;\n\n    if (search) {\n        search.keys = search.keys.concat(key);\n        resetWhenIdle(search, searchResetTimer);\n\n        for (let n = 0; n < listItems.length; n++) {\n            const label = (listItems[n] as HTMLButtonElement).innerText;\n            if (label && label.toLowerCase().indexOf(search.keys) === 0) {\n                return listItems[n] as HTMLButtonElement;\n            }\n        }\n    }\n\n    return null;\n}\n\nfunction resetWhenIdle(search: KeyBuffer, timer: Timer) {\n    if (timer) {\n        clearTimeout(timer);\n        timer = undefined;\n    }\n    timer = setTimeout(\n        () => {\n            // biome-ignore lint/suspicious/noAssignInExpressions: <explanation>\n            search ? (search.keys = \"\") : (search = { keys: \"\" });\n            timer = undefined;\n        },\n        500,\n        search,\n        timer,\n    );\n}\n"],"names":["handleMoveTo","direction","event","list","currentFocus","preventDefault","current","thisOption","prevOption","previousElementSibling","focus","nextOption","nextElementSibling","firstItem","querySelector","listItems","querySelectorAll","length","moveFocusTo","ref","useEffect","search","keys","handler","searchResetTimer","key","target","moveDetails","searchResult","concat","timer","clearTimeout","setTimeout","resetWhenIdle","n","label","innerText","toLowerCase","indexOf","findItem","handleListKeyNav","addEventListener","removeEventListener"],"mappings":"yGAmDA,SAASA,EACLC,GACEC,MAAAA,EAAOC,KAAAA,EAAMC,aAAAA,IAEfF,EAAMG,iBA0DV,SACIJ,EACAE,EACAG,GAEA,MAAMC,EAAaD,EACnB,OAAQL,GACJ,IAAK,OAAQ,CACT,MAAMO,EACFD,GACCA,EAAWE,uBACZD,GACAA,EAAWE,QAEf,KACJ,CACA,IAAK,OAAQ,CACT,MAAMC,EACFJ,GACCA,EAAWK,mBACZD,GACAA,EAAWD,QAEf,KACJ,CACA,IAAK,QAAS,CACV,MAAMG,EACFV,EAAKW,cAAiC,mBACtCD,GACAA,EAAUH,QAEd,KACJ,CACA,IAAK,OAAQ,CACT,MAAMK,EACFZ,EAAKa,iBAAoC,mBACzCD,EAAUE,QACVF,EAAUA,EAAUE,OAAS,GAAGP,QAEpC,KACJ,EAER,CAnGIQ,CAAYjB,EAAWE,EAAMC,EACjC,2BA/BO,UACHe,IAAAA,IAEAC,EAAAA,UAAU,KAEN,MAAMC,EAAoB,CAAEC,KAAM,IAC5BnB,EAAOgB,EAAIb,QACXiB,EAAWrB,IACTC,GAyBhB,UACIA,KAAAA,EACAD,MAAAA,EACAmB,OAAAA,EACAG,iBAAAA,IAEA,MAAQC,IAAAA,EAAKC,OAAAA,GAAWxB,EAGlByB,EAAc,CAChBzB,MAAAA,EACAC,KAAAA,EACAC,aALiBsB,GAQrB,OAAQD,GACJ,IAAK,UACL,IAAK,SACDzB,EAAa,OAAQ2B,GACrB,MACJ,IAAK,YACL,IAAK,WACD3B,EAAa,OAAQ2B,GACrB,MACJ,IAAK,OACD3B,EAAa,QAAS2B,GACtB,MACJ,IAAK,MACD3B,EAAa,OAAQ2B,GACrB,MACJ,IAAK,MAEDzB,EAAMG,iBACN,MACJ,IAAK,QACL,IAAK,IACD,MAEJ,QACI,QAAe,IAAXgB,EAAsB,CACtB,MAAMO,EA0DtB,UACIzB,KAAAA,EACAsB,IAAAA,EACAJ,OAAAA,EACAG,iBAAAA,IAEA,MAAMT,EAAYZ,EAAKa,iBAAiB,mBACxC,IAAKD,EAAUE,OAAQ,OAAO,KAE9B,GAAII,EAAQ,CACRA,EAAOC,KAAOD,EAAOC,KAAKO,OAAOJ,GAczC,SAAuBJ,EAAmBS,GAClCA,IACAC,aAAaD,GACbA,OAAQ,GAEZA,EAAQE,WACJ,KAEIX,EAAUA,EAAOC,KAAO,GAAOD,EAAS,CAAEC,KAAM,IAChDQ,OAAQ,GAEZ,IACAT,EACAS,EAER,CA5BQG,CAAcZ,EAAQG,GAEtB,IAAA,IAASU,EAAI,EAAGA,EAAInB,EAAUE,OAAQiB,IAAK,CACvC,MAAMC,EAASpB,EAAUmB,GAAyBE,UAClD,GAAID,GAAsD,IAA7CA,EAAME,cAAcC,QAAQjB,EAAOC,MAC5C,OAAOP,EAAUmB,EAEzB,CACJ,CAEA,OAAO,IACX,CAhFqCK,CAAS,CAC1BpC,KAAAA,EACAsB,IAAAA,EACAJ,OAAAA,EACAG,iBAAAA,IAEAI,GACAA,EAAalB,OAErB,EAGZ,CA5EgB8B,CAAiB,CAAErC,KAAAA,EAAMD,MAAAA,EAAOmB,OAAAA,EAAQG,iBAL5CA,aASJ,OAAIrB,GACAA,EAAKsC,iBAAiB,UAAWlB,GAG9B,KACCpB,GACAA,EAAKuC,oBAAoB,UAAWnB,KAG7C,CAACJ,GACR"}
+{"version":3,"file":"useListNavigation.cjs","sources":["../../../../src/hooks/useListNavigation/useListNavigation.ts"],"sourcesContent":["import { type RefObject, useLayoutEffect } from \"react\";\n\ntype TimerHandle = { id: number | undefined };\ntype KeyBuffer = { keys: string } | undefined;\ntype Direction = \"prev\" | \"next\" | \"first\" | \"last\";\ninterface MoveDetails {\n    event: KeyboardEvent;\n    list: HTMLElement;\n    currentFocus: HTMLButtonElement;\n}\ninterface ListDetails {\n    list: HTMLElement;\n    search: KeyBuffer;\n    searchResetTimer: TimerHandle;\n}\ninterface SearchDetails extends ListDetails {\n    key: string;\n}\ninterface EventDetails extends ListDetails {\n    event: KeyboardEvent;\n}\n/**\n * Enten `ref` eller `element` må gis. `ref` brukes når listen alltid\n * er i DOM-en; `element` foretrekkes når elementet mountes/unmountes\n * dynamisk (f.eks. portalert via floating-ui), slik at listeneren\n * re-festes når elementet faktisk er tilgjengelig.\n */\ntype UseListNavigationProps<T> =\n    | {\n          ref: RefObject<T | null>;\n          element?: never;\n      }\n    | {\n          ref?: never;\n          element: T | null;\n      };\n\nexport function useListNavigation<T extends HTMLElement>({\n    ref,\n    element,\n}: UseListNavigationProps<T>): void {\n    // Bruker `useLayoutEffect` slik at keydown-listeneren er på plass før\n    // browseren maler neste frame. Det er viktig for konsumenter som\n    // flytter fokus inn i lista i en `requestAnimationFrame`-callback\n    // (som Select), ellers kan første tastetrykk gå tapt.\n    useLayoutEffect(() => {\n        // `ref?.current` leses inne i effekten — refen er fylt i commit-\n        // fasen, og var `null` i render-tid for callere som passerer\n        // `ref` (som Combobox).\n        const list = element ?? ref?.current ?? null;\n        if (!list) return;\n\n        // `TimerHandle` er et muterbart objekt slik at `resetWhenIdle`\n        // kan oppdatere `id` på samme referanse — `setTimeout`-handlen må\n        // være delt på tvers av tastetrykk for at `clearTimeout` skal\n        // kunne avbryte forrige timeout.\n        const searchResetTimer: TimerHandle = { id: undefined };\n        const search: KeyBuffer = { keys: \"\" }; // keypress buffer is an object to preserve state\n        const handler = (event: KeyboardEvent) => {\n            handleListKeyNav({ list, event, search, searchResetTimer });\n        };\n\n        list.addEventListener(\"keydown\", handler);\n        return () => {\n            list.removeEventListener(\"keydown\", handler);\n            if (searchResetTimer.id !== undefined) {\n                clearTimeout(searchResetTimer.id);\n            }\n        };\n    }, [element, ref]);\n}\n\nfunction handleMoveTo(\n    direction: Direction,\n    { event, list, currentFocus }: MoveDetails,\n) {\n    event.preventDefault();\n    moveFocusTo(direction, list, currentFocus);\n}\n\nfunction handleListKeyNav({\n    list,\n    event,\n    search,\n    searchResetTimer,\n}: EventDetails) {\n    const { key, target } = event;\n    const currentFocus = target as HTMLButtonElement;\n\n    const moveDetails = {\n        event,\n        list,\n        currentFocus,\n    };\n\n    switch (key) {\n        case \"ArrowUp\":\n        case \"PageUp\":\n            handleMoveTo(\"prev\", moveDetails);\n            break;\n        case \"ArrowDown\":\n        case \"PageDown\":\n            handleMoveTo(\"next\", moveDetails);\n            break;\n        case \"Home\":\n            handleMoveTo(\"first\", moveDetails);\n            break;\n        case \"End\":\n            handleMoveTo(\"last\", moveDetails);\n            break;\n        case \"Tab\":\n            // in a standard select, tab does nothing in-menu\n            event.preventDefault();\n            break;\n        case \"Enter\":\n        case \" \":\n            break;\n\n        default:\n            if (search !== undefined) {\n                const searchResult = findItem({\n                    list,\n                    key,\n                    search,\n                    searchResetTimer,\n                });\n                if (searchResult) {\n                    searchResult.focus();\n                }\n            }\n            break;\n    }\n}\n\nfunction moveFocusTo(\n    direction: Direction,\n    list: HTMLElement,\n    current: HTMLButtonElement,\n) {\n    const thisOption = current;\n    switch (direction) {\n        case \"prev\": {\n            const prevOption: HTMLButtonElement | null =\n                thisOption &&\n                (thisOption.previousElementSibling as HTMLButtonElement);\n            if (prevOption) {\n                prevOption.focus();\n            }\n            break;\n        }\n        case \"next\": {\n            const nextOption: HTMLButtonElement | null =\n                thisOption &&\n                (thisOption.nextElementSibling as HTMLButtonElement);\n            if (nextOption) {\n                nextOption.focus();\n            }\n            break;\n        }\n        case \"first\": {\n            const firstItem =\n                list.querySelector<HTMLButtonElement>(`[role=\"option\"]`);\n            if (firstItem) {\n                firstItem.focus();\n            }\n            break;\n        }\n        case \"last\": {\n            const listItems =\n                list.querySelectorAll<HTMLButtonElement>(`[role=\"option\"]`);\n            if (listItems.length) {\n                listItems[listItems.length - 1].focus();\n            }\n            break;\n        }\n    }\n}\n\nfunction findItem({\n    list,\n    key,\n    search,\n    searchResetTimer,\n}: SearchDetails): HTMLButtonElement | null {\n    const listItems = list.querySelectorAll(`[role=\"option\"]`);\n    if (!listItems.length) return null;\n\n    if (search) {\n        search.keys = search.keys.concat(key);\n        resetWhenIdle(search, searchResetTimer);\n\n        for (let n = 0; n < listItems.length; n++) {\n            const label = (listItems[n] as HTMLButtonElement).innerText;\n            if (label && label.toLowerCase().indexOf(search.keys) === 0) {\n                return listItems[n] as HTMLButtonElement;\n            }\n        }\n    }\n\n    return null;\n}\n\nfunction resetWhenIdle(search: KeyBuffer, timer: TimerHandle) {\n    if (timer.id !== undefined) {\n        clearTimeout(timer.id);\n        timer.id = undefined;\n    }\n    timer.id = window.setTimeout(() => {\n        if (search) {\n            search.keys = \"\";\n        }\n        timer.id = undefined;\n    }, 500);\n}\n"],"names":["handleMoveTo","direction","event","list","currentFocus","preventDefault","current","thisOption","prevOption","previousElementSibling","focus","nextOption","nextElementSibling","firstItem","querySelector","listItems","querySelectorAll","length","moveFocusTo","ref","element","useLayoutEffect","searchResetTimer","id","search","keys","handler","key","target","moveDetails","searchResult","concat","timer","clearTimeout","window","setTimeout","resetWhenIdle","n","label","innerText","toLowerCase","indexOf","findItem","handleListKeyNav","addEventListener","removeEventListener"],"mappings":"yGAwEA,SAASA,EACLC,GACEC,MAAAA,EAAOC,KAAAA,EAAMC,aAAAA,IAEfF,EAAMG,iBA0DV,SACIJ,EACAE,EACAG,GAEA,MAAMC,EAAaD,EACnB,OAAQL,GACJ,IAAK,OAAQ,CACT,MAAMO,EACFD,GACCA,EAAWE,uBACZD,GACAA,EAAWE,QAEf,KACJ,CACA,IAAK,OAAQ,CACT,MAAMC,EACFJ,GACCA,EAAWK,mBACZD,GACAA,EAAWD,QAEf,KACJ,CACA,IAAK,QAAS,CACV,MAAMG,EACFV,EAAKW,cAAiC,mBACtCD,GACAA,EAAUH,QAEd,KACJ,CACA,IAAK,OAAQ,CACT,MAAMK,EACFZ,EAAKa,iBAAoC,mBACzCD,EAAUE,QACVF,EAAUA,EAAUE,OAAS,GAAGP,QAEpC,KACJ,EAER,CAnGIQ,CAAYjB,EAAWE,EAAMC,EACjC,2BAzCO,UACHe,IAAAA,EACAC,QAAAA,IAMAC,EAAAA,gBAAgB,KAIZ,MAAMlB,EAAOiB,GAAWD,GAAKb,SAAW,KACxC,IAAKH,EAAM,OAMX,MAAMmB,EAAgC,CAAEC,QAAI,GACtCC,EAAoB,CAAEC,KAAM,IAC5BC,EAAWxB,KAsBzB,UACIC,KAAAA,EACAD,MAAAA,EACAsB,OAAAA,EACAF,iBAAAA,IAEA,MAAQK,IAAAA,EAAKC,OAAAA,GAAW1B,EAGlB2B,EAAc,CAChB3B,MAAAA,EACAC,KAAAA,EACAC,aALiBwB,GAQrB,OAAQD,GACJ,IAAK,UACL,IAAK,SACD3B,EAAa,OAAQ6B,GACrB,MACJ,IAAK,YACL,IAAK,WACD7B,EAAa,OAAQ6B,GACrB,MACJ,IAAK,OACD7B,EAAa,QAAS6B,GACtB,MACJ,IAAK,MACD7B,EAAa,OAAQ6B,GACrB,MACJ,IAAK,MAED3B,EAAMG,iBACN,MACJ,IAAK,QACL,IAAK,IACD,MAEJ,QACI,QAAe,IAAXmB,EAAsB,CACtB,MAAMM,EA0DtB,UACI3B,KAAAA,EACAwB,IAAAA,EACAH,OAAAA,EACAF,iBAAAA,IAEA,MAAMP,EAAYZ,EAAKa,iBAAiB,mBACxC,IAAKD,EAAUE,OAAQ,OAAO,KAE9B,GAAIO,EAAQ,CACRA,EAAOC,KAAOD,EAAOC,KAAKM,OAAOJ,GAczC,SAAuBH,EAAmBQ,QACrB,IAAbA,EAAMT,KACNU,aAAaD,EAAMT,IACnBS,EAAMT,QAAK,GAEfS,EAAMT,GAAKW,OAAOC,WAAW,KACrBX,IACAA,EAAOC,KAAO,IAElBO,EAAMT,QAAK,GACZ,IACP,CAxBQa,CAAcZ,EAAQF,GAEtB,IAAA,IAASe,EAAI,EAAGA,EAAItB,EAAUE,OAAQoB,IAAK,CACvC,MAAMC,EAASvB,EAAUsB,GAAyBE,UAClD,GAAID,GAAsD,IAA7CA,EAAME,cAAcC,QAAQjB,EAAOC,MAC5C,OAAOV,EAAUsB,EAEzB,CACJ,CAEA,OAAO,IACX,CAhFqCK,CAAS,CAC1BvC,KAAAA,EACAwB,IAAAA,EACAH,OAAAA,EACAF,iBAAAA,IAEAQ,GACAA,EAAapB,OAErB,EAGZ,CAzEYiC,CAAiB,CAAExC,KAAAA,EAAMD,MAAAA,EAAOsB,OAAAA,EAAQF,iBAAAA,KAG5C,OAAAnB,EAAKyC,iBAAiB,UAAWlB,GAC1B,KACHvB,EAAK0C,oBAAoB,UAAWnB,QACR,IAAxBJ,EAAiBC,IACjBU,aAAaX,EAAiBC,MAGvC,CAACH,EAASD,GACjB"}