@fremtind/jokul 0.37.8 → 0.37.10

package/build/cjs/components/accordion/AccordionItem.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"),i=require("react"),a=require("../../hooks/useAnimatedDetails/useAnimatedDetails.cjs"),r=require("../icon/icons/animated/ArrowVerticalAnimated.cjs");exports.AccordionItem=({children:c,title:s,className:n,startExpanded:o=!1,onClick:d,id:l,...m})=>{const[j,u]=i.useState(o),[k]=i.useState((()=>o)),{detailsRef:x,summaryRef:_,contentRef:p,onSummaryClick:h}=a.useAnimatedDetails({onOpenChange:(e,t)=>{u(e),d&&d(t,e)},isExpanded:k});return e.jsxs("details",{"data-testid":"jkl-accordion-item",...m,className:t.clsx("jkl-accordion-item",n),ref:x,id:l,children:[e.jsxs("summary",{"data-testid":"jkl-accordion-item__title",className:"jkl-accordion-item__title",onClick:h,ref:_,children:[s,e.jsx(r.ArrowVerticalAnimated,{variant:"inherit",className:"jkl-accordion-item__arrow",pointingDown:!j,bold:j})]}),e.jsx("div",{"data-testid":"jkl-accordion-item__content-wrapper",className:"jkl-accordion-item__content-wrapper",ref:p,children:e.jsx("div",{className:"jkl-accordion-item__content",children:c})})]})};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),i=require("react"),a=require("../../hooks/useAnimatedDetails/useAnimatedDetails.cjs"),r=require("../icon/icons/animated/ArrowVerticalAnimated.cjs");exports.AccordionItem=({children:c,title:s,className:n,startExpanded:o=!1,onClick:d,id:l,...m})=>{const[j,u]=i.useState(o),[k]=i.useState((()=>o)),{detailsRef:x,summaryRef:_,contentRef:p,onSummaryClick:A}=a.useAnimatedDetails({onOpenChange:(e,t)=>{u(e),d&&d(t,e)},isExpanded:k});return e.jsxs("details",{"data-testid":"jkl-accordion-item",...m,className:t.clsx("jkl-accordion-item",n),ref:x,id:l,children:[e.jsxs("summary",{"data-testid":"jkl-accordion-item__title",className:"jkl-accordion-item__title",onClick:A,ref:_,children:[s,e.jsx(r.ArrowVerticalAnimated,{className:"jkl-accordion-item__arrow",pointingDown:!j,bold:j})]}),e.jsx("div",{"data-testid":"jkl-accordion-item__content-wrapper",className:"jkl-accordion-item__content-wrapper",ref:p,children:e.jsx("div",{className:"jkl-accordion-item__content",children:c})})]})};
 //# sourceMappingURL=AccordionItem.cjs.map

package/build/cjs/components/accordion/AccordionItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.cjs","sources":["../../../../src/components/accordion/AccordionItem.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { FC, useState } from \"react\";\nimport { WithChildren } from \"../../core/types.js\";\nimport { useAnimatedDetails } from \"../../hooks/useAnimatedDetails/useAnimatedDetails.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\n\nexport interface AccordionItemProps extends WithChildren {\n    title: string;\n    startExpanded?: boolean;\n    className?: string;\n    onClick?: (e: React.MouseEvent, isOpen: boolean) => void;\n    id?: string;\n}\n\n/**\n * @deprecated Denne komponenten bør ikke brukes lenger, og vil ikke bli oppdatert.\n * Bruk heller komponenten `Expandable.Content`.\n */\nexport const AccordionItem: FC<AccordionItemProps> = ({\n    children,\n    title,\n    className,\n    startExpanded = false,\n    onClick,\n    id,\n    ...rest\n}) => {\n    const [isOpen, setIsOpen] = useState(startExpanded);\n    const [expandOnMount] = useState(() => startExpanded);\n\n    const { detailsRef, summaryRef, contentRef, onSummaryClick } =\n        useAnimatedDetails({\n            onOpenChange: (open, e) => {\n                setIsOpen(open);\n                if (onClick) {\n                    onClick(e, open);\n                }\n            },\n            isExpanded: expandOnMount,\n        });\n\n    return (\n        <details\n            data-testid=\"jkl-accordion-item\"\n            {...rest}\n            className={clsx(\"jkl-accordion-item\", className)}\n            ref={detailsRef}\n            id={id}\n        >\n            <summary\n                data-testid=\"jkl-accordion-item__title\"\n                className=\"jkl-accordion-item__title\"\n                onClick={onSummaryClick}\n                ref={summaryRef}\n            >\n                {title}\n                <ArrowVerticalAnimated\n                    variant=\"inherit\"\n                    className=\"jkl-accordion-item__arrow\"\n                    pointingDown={!isOpen}\n                    bold={isOpen}\n                />\n            </summary>\n            <div\n                data-testid=\"jkl-accordion-item__content-wrapper\"\n                className=\"jkl-accordion-item__content-wrapper\"\n                ref={contentRef}\n            >\n                <div className=\"jkl-accordion-item__content\">{children}</div>\n            </div>\n        </details>\n    );\n};\n"],"names":["children","title","className","startExpanded","onClick","id","rest","isOpen","setIsOpen","useState","expandOnMount","detailsRef","summaryRef","contentRef","onSummaryClick","useAnimatedDetails","onOpenChange","open","e","isExpanded","jsxs","clsx","ref","jsx","ArrowVerticalAnimated","variant","pointingDown","bold"],"mappings":"uUAkBqD,EACjDA,SAAAA,EACAC,MAAAA,EACAC,UAAAA,EACAC,cAAAA,GAAgB,EAChBC,QAAAA,EACAC,GAAAA,KACGC,MAEH,MAAOC,EAAQC,GAAaC,WAASN,IAC9BO,GAAiBD,YAAS,IAAMN,KAE/BQ,WAAAA,EAAYC,WAAAA,EAAYC,WAAAA,EAAYC,eAAAA,GACxCC,EAAAA,mBAAmB,CACfC,aAAc,CAACC,EAAMC,KACjBV,EAAUS,GACNb,GACAA,EAAQc,EAAGD,EAAI,EAGvBE,WAAYT,IAIhB,OAAAU,EAAAA,KAAC,UAAA,CACG,cAAY,wBACRd,EACJJ,UAAWmB,EAAAA,KAAK,qBAAsBnB,GACtCoB,IAAKX,EACLN,GAAAA,EAEAL,SAAA,CAAAoB,EAAAA,KAAC,UAAA,CACG,cAAY,4BACZlB,UAAU,4BACVE,QAASU,EACTQ,IAAKV,EAEJZ,SAAA,CAAAC,EACDsB,EAAAA,IAACC,EAAAA,sBAAA,CACGC,QAAQ,UACRvB,UAAU,4BACVwB,cAAenB,EACfoB,KAAMpB,OAGdgB,EAAAA,IAAC,MAAA,CACG,cAAY,sCACZrB,UAAU,sCACVoB,IAAKT,EAELb,SAACuB,EAAAA,IAAA,MAAA,CAAIrB,UAAU,8BAA+BF,SAAAA,QAClD"}
+{"version":3,"file":"AccordionItem.cjs","sources":["../../../../src/components/accordion/AccordionItem.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { FC, useState } from \"react\";\nimport { WithChildren } from \"../../core/types.js\";\nimport { useAnimatedDetails } from \"../../hooks/useAnimatedDetails/useAnimatedDetails.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\n\nexport interface AccordionItemProps extends WithChildren {\n    title: string;\n    startExpanded?: boolean;\n    className?: string;\n    onClick?: (e: React.MouseEvent, isOpen: boolean) => void;\n    id?: string;\n}\n\n/**\n * @deprecated Denne komponenten bør ikke brukes lenger, og vil ikke bli oppdatert.\n * Bruk heller komponenten `Expandable.Content`.\n */\nexport const AccordionItem: FC<AccordionItemProps> = ({\n    children,\n    title,\n    className,\n    startExpanded = false,\n    onClick,\n    id,\n    ...rest\n}) => {\n    const [isOpen, setIsOpen] = useState(startExpanded);\n    const [expandOnMount] = useState(() => startExpanded);\n\n    const { detailsRef, summaryRef, contentRef, onSummaryClick } =\n        useAnimatedDetails({\n            onOpenChange: (open, e) => {\n                setIsOpen(open);\n                if (onClick) {\n                    onClick(e, open);\n                }\n            },\n            isExpanded: expandOnMount,\n        });\n\n    return (\n        <details\n            data-testid=\"jkl-accordion-item\"\n            {...rest}\n            className={clsx(\"jkl-accordion-item\", className)}\n            ref={detailsRef}\n            id={id}\n        >\n            <summary\n                data-testid=\"jkl-accordion-item__title\"\n                className=\"jkl-accordion-item__title\"\n                onClick={onSummaryClick}\n                ref={summaryRef}\n            >\n                {title}\n                <ArrowVerticalAnimated\n                    className=\"jkl-accordion-item__arrow\"\n                    pointingDown={!isOpen}\n                    bold={isOpen}\n                />\n            </summary>\n            <div\n                data-testid=\"jkl-accordion-item__content-wrapper\"\n                className=\"jkl-accordion-item__content-wrapper\"\n                ref={contentRef}\n            >\n                <div className=\"jkl-accordion-item__content\">{children}</div>\n            </div>\n        </details>\n    );\n};\n"],"names":["children","title","className","startExpanded","onClick","id","rest","isOpen","setIsOpen","useState","expandOnMount","detailsRef","summaryRef","contentRef","onSummaryClick","useAnimatedDetails","onOpenChange","open","e","isExpanded","jsxs","clsx","ref","jsx","ArrowVerticalAnimated","pointingDown","bold"],"mappings":"uUAkBqD,EACjDA,SAAAA,EACAC,MAAAA,EACAC,UAAAA,EACAC,cAAAA,GAAgB,EAChBC,QAAAA,EACAC,GAAAA,KACGC,MAEH,MAAOC,EAAQC,GAAaC,WAASN,IAC9BO,GAAiBD,YAAS,IAAMN,KAE/BQ,WAAAA,EAAYC,WAAAA,EAAYC,WAAAA,EAAYC,eAAAA,GACxCC,EAAAA,mBAAmB,CACfC,aAAc,CAACC,EAAMC,KACjBV,EAAUS,GACNb,GACAA,EAAQc,EAAGD,EAAI,EAGvBE,WAAYT,IAIhB,OAAAU,EAAAA,KAAC,UAAA,CACG,cAAY,wBACRd,EACJJ,UAAWmB,EAAAA,KAAK,qBAAsBnB,GACtCoB,IAAKX,EACLN,GAAAA,EAEAL,SAAA,CAAAoB,EAAAA,KAAC,UAAA,CACG,cAAY,4BACZlB,UAAU,4BACVE,QAASU,EACTQ,IAAKV,EAEJZ,SAAA,CAAAC,EACDsB,EAAAA,IAACC,EAAAA,sBAAA,CACGtB,UAAU,4BACVuB,cAAelB,EACfmB,KAAMnB,OAGdgB,EAAAA,IAAC,MAAA,CACG,cAAY,sCACZrB,UAAU,sCACVoB,IAAKT,EAELb,SAACuB,EAAAA,IAAA,MAAA,CAAIrB,UAAU,8BAA+BF,SAAAA,QAClD"}

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

package/build/cjs/components/text-input/BaseTextInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTextInput.cjs","sources":["../../../../src/components/text-input/BaseTextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    type CSSProperties,\n    forwardRef,\n    HTMLProps,\n    InputHTMLAttributes,\n    type MouseEventHandler,\n    type ReactNode,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { IconProps } from \"../icon/types.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\n\nfunction getWidthAsStyle(\n    width?: string,\n    maxLength?: number,\n): CSSProperties | undefined {\n    if (width) {\n        return { width }; // prioritize width prop\n    }\n\n    if (maxLength) {\n        // adapt to maxLength, but capped at 40ch\n        const length = `${Math.min(maxLength, 40)}ch`;\n        const padding = \"24px\"; // left + right padding\n        return { width: `calc(${length} + ${padding})` };\n    }\n\n    return undefined;\n}\n\ninterface ActionBaseProps\n    extends Exclude<HTMLProps<HTMLButtonElement>, \"disabled\"> {\n    icon: React.ReactElement<IconProps>;\n    label: string;\n    buttonRef?: React.Ref<HTMLButtonElement>;\n}\n\nexport interface ActionButton extends ActionBaseProps {\n    type?: \"button\" | \"reset\";\n    onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface ActionSubmit extends ActionBaseProps {\n    type: \"submit\";\n    onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport type Action = ActionButton | ActionSubmit;\n\nexport interface BaseTextInputProps\n    extends Omit<InputHTMLAttributes<HTMLInputElement>, \"children\"> {\n    /**\n     * Brukes til inputfelter hvor det brukes maskering, for formatering av store tall. Brukes typisk bare til valuta.\n     * @default \"left\"\n     */\n    align?: \"left\" | \"right\";\n    /**\n     * @deprecated Bruk heller actionButton\n     *\n     */\n    action?: Action;\n    density?: Density;\n    /**\n     * Benevnelse for feltet. Unngå å bruke både benevnelse og handling samtidig\n     * @example \"kr\"\n     * */\n    unit?: ReactNode;\n    width?: string;\n    /**\n     * Element som vises til høyre for inputfeltet. Brukes typisk til å trigge en handling som f.eks. å vise/skjule passord.\n     */\n    actionButton?: React.ReactElement<IconProps>;\n}\n\nexport const BaseTextInput = forwardRef<HTMLInputElement, BaseTextInputProps>(\n    (props, ref) => {\n        const {\n            action,\n            align = \"left\",\n            \"aria-invalid\": ariaInvalid,\n            className = \"\",\n            density,\n            maxLength,\n            style,\n            type = \"text\",\n            unit,\n            width,\n            actionButton,\n            ...rest\n        } = props;\n\n        return (\n            <div\n                className=\"jkl-text-input-wrapper\"\n                data-invalid={ariaInvalid}\n                style={{ ...style, ...getWidthAsStyle(width, maxLength) }}\n            >\n                <input\n                    aria-invalid={ariaInvalid}\n                    ref={ref}\n                    className={clsx(\"jkl-text-input__input\", className, {\n                        \"jkl-text-input__input--align-right\": align === \"right\",\n                    })}\n                    maxLength={maxLength}\n                    type={type}\n                    {...rest}\n                />\n                {unit && <span className=\"jkl-text-input__unit\">{unit}</span>}\n                {!action &&\n                    actionButton &&\n                    React.cloneElement(actionButton, {\n                        className: clsx(\n                            \"jkl-text-input-action-button\",\n                            actionButton.props.className,\n                        ),\n                    })}\n                {action && !actionButton && (\n                    <IconButton\n                        density={density}\n                        className={clsx(\n                            \"jkl-text-input-action-button\",\n                            action.className,\n                        )}\n                        title={action.label}\n                        onClick={action.onClick}\n                        onFocus={action.onFocus}\n                        onBlur={action.onBlur}\n                        ref={action.buttonRef}\n                        type={action.type || \"button\"}\n                    >\n                        {action.icon}\n                    </IconButton>\n                )}\n            </div>\n        );\n    },\n);\n\nBaseTextInput.displayName = \"BaseInputField\";\n"],"names":["getWidthAsStyle","width","maxLength","Math","min","BaseTextInput","forwardRef","props","ref","action","align","ariaInvalid","className","density","style","type","unit","actionButton","rest","jsxs","children","jsx","clsx","React","cloneElement","IconButton","title","label","onClick","onFocus","onBlur","buttonRef","icon","displayName"],"mappings":"2NAaA,SAASA,EACLC,EACAC,GAEA,OAAID,EACO,CAAEA,MAAAA,GAGTC,EAIO,CAAED,MAAO,QAFEE,KAAKC,IAAIF,EAAW,sBAF1C,CAQJ,CA8CO,MAAMG,EAAgBC,EAAAA,YACzB,CAACC,EAAOC,KACE,MACFC,OAAAA,EACAC,MAAAA,EAAQ,OACR,eAAgBC,EAChBC,UAAAA,EAAY,GACZC,QAAAA,EACAX,UAAAA,EACAY,MAAAA,EACAC,KAAAA,EAAO,OACPC,KAAAA,EACAf,MAAAA,EACAgB,aAAAA,KACGC,GACHX,EAGA,OAAAY,EAAAA,KAAC,MAAA,CACGP,UAAU,yBACV,eAAcD,EACdG,MAAO,IAAKA,KAAUd,EAAgBC,EAAOC,IAE7CkB,SAAA,CAAAC,EAAAA,IAAC,QAAA,CACG,eAAcV,EACdH,IAAAA,EACAI,UAAWU,EAAAA,KAAK,wBAAyBV,EAAW,CAChD,qCAAgD,UAAVF,IAE1CR,UAAAA,EACAa,KAAAA,KACIG,IAEPF,GAAQK,EAAAA,IAAC,OAAK,CAAAT,UAAU,uBAAwBQ,SAAKJ,KACpDP,GACEQ,GACAM,EAAMC,aAAaP,EAAc,CAC7BL,UAAWU,EAAAA,KACP,+BACAL,EAAaV,MAAMK,aAG9BH,IAAWQ,GACRI,EAAAA,IAACI,EAAAA,WAAA,CACGZ,QAAAA,EACAD,UAAWU,EAAAA,KACP,+BACAb,EAAOG,WAEXc,MAAOjB,EAAOkB,MACdC,QAASnB,EAAOmB,QAChBC,QAASpB,EAAOoB,QAChBC,OAAQrB,EAAOqB,OACftB,IAAKC,EAAOsB,UACZhB,KAAMN,EAAOM,MAAQ,SAEpBK,SAAOX,EAAAuB,SACZ,IAOpB3B,EAAc4B,YAAc"}
+{"version":3,"file":"BaseTextInput.cjs","sources":["../../../../src/components/text-input/BaseTextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    type CSSProperties,\n    forwardRef,\n    HTMLProps,\n    InputHTMLAttributes,\n    type MouseEventHandler,\n    type ReactNode,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { IconProps } from \"../icon/types.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\n\nfunction getWidthAsStyle(\n    width?: string,\n    maxLength?: number,\n): CSSProperties | undefined {\n    if (width) {\n        return { width }; // prioritize width prop\n    }\n\n    if (maxLength) {\n        // adapt to maxLength, but capped at 40ch\n        const length = `${Math.min(maxLength, 40)}ch`;\n        const padding = \"24px\"; // left + right padding\n        return { width: `calc(${length} + ${padding})` };\n    }\n\n    return undefined;\n}\n\ninterface ActionBaseProps\n    extends Exclude<HTMLProps<HTMLButtonElement>, \"disabled\"> {\n    icon: React.ReactElement<IconProps>;\n    label: string;\n    buttonRef?: React.Ref<HTMLButtonElement>;\n}\n\nexport interface ActionButton extends ActionBaseProps {\n    type?: \"button\" | \"reset\";\n    onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface ActionSubmit extends ActionBaseProps {\n    type: \"submit\";\n    onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport type Action = ActionButton | ActionSubmit;\n\nexport interface BaseTextInputProps\n    extends Omit<\n        InputHTMLAttributes<HTMLInputElement>,\n        \"children\" | \"maxLength\"\n    > {\n    /**\n     * Brukes til inputfelter hvor det brukes maskering, for formatering av store tall. Brukes typisk bare til valuta.\n     * @default \"left\"\n     */\n    align?: \"left\" | \"right\";\n    /**\n     * @deprecated Bruk heller actionButton\n     *\n     */\n    action?: Action;\n    density?: Density;\n    /**\n     * Benevnelse for feltet. Unngå å bruke både benevnelse og handling samtidig\n     * @example \"kr\"\n     * */\n    unit?: ReactNode;\n    width?: string;\n    /**\n     * Element som vises til høyre for inputfeltet. Brukes typisk til å trigge en handling som f.eks. å vise/skjule passord.\n     */\n    actionButton?: React.ReactElement<IconProps>;\n    /**\n     * Setter maxlength attributtet og justerer bredden på feltet til å passe det tallet som settes\n     *\n     * Merk: I noen Android-browsere vil dette ikke fungere som forventet. Det er gjort sånn\n     * pga begrensninger med hvordan software-tastaturet fungerer og er ikke en bug. Dersom\n     * man er veldig avhengig av at maxLength håndteres på alle plattformer anbefales det\n     * å bruke input-feltet som en controlled input og selv begrense lengden på verdien.\n     */\n    maxLength?: number | undefined;\n}\n\nexport const BaseTextInput = forwardRef<HTMLInputElement, BaseTextInputProps>(\n    (props, ref) => {\n        const {\n            action,\n            align = \"left\",\n            \"aria-invalid\": ariaInvalid,\n            className = \"\",\n            density,\n            maxLength,\n            style,\n            type = \"text\",\n            unit,\n            width,\n            actionButton,\n            ...rest\n        } = props;\n\n        return (\n            <div\n                className=\"jkl-text-input-wrapper\"\n                data-invalid={ariaInvalid}\n                style={{ ...style, ...getWidthAsStyle(width, maxLength) }}\n            >\n                <input\n                    aria-invalid={ariaInvalid}\n                    ref={ref}\n                    className={clsx(\"jkl-text-input__input\", className, {\n                        \"jkl-text-input__input--align-right\": align === \"right\",\n                    })}\n                    maxLength={maxLength}\n                    type={type}\n                    {...rest}\n                />\n                {unit && <span className=\"jkl-text-input__unit\">{unit}</span>}\n                {!action &&\n                    actionButton &&\n                    React.cloneElement(actionButton, {\n                        className: clsx(\n                            \"jkl-text-input-action-button\",\n                            actionButton.props.className,\n                        ),\n                    })}\n                {action && !actionButton && (\n                    <IconButton\n                        density={density}\n                        className={clsx(\n                            \"jkl-text-input-action-button\",\n                            action.className,\n                        )}\n                        title={action.label}\n                        onClick={action.onClick}\n                        onFocus={action.onFocus}\n                        onBlur={action.onBlur}\n                        ref={action.buttonRef}\n                        type={action.type || \"button\"}\n                    >\n                        {action.icon}\n                    </IconButton>\n                )}\n            </div>\n        );\n    },\n);\n\nBaseTextInput.displayName = \"BaseInputField\";\n"],"names":["getWidthAsStyle","width","maxLength","Math","min","BaseTextInput","forwardRef","props","ref","action","align","ariaInvalid","className","density","style","type","unit","actionButton","rest","jsxs","children","jsx","clsx","React","cloneElement","IconButton","title","label","onClick","onFocus","onBlur","buttonRef","icon","displayName"],"mappings":"2NAaA,SAASA,EACLC,EACAC,GAEA,OAAID,EACO,CAAEA,MAAAA,GAGTC,EAIO,CAAED,MAAO,QAFEE,KAAKC,IAAIF,EAAW,sBAF1C,CAQJ,CA0DO,MAAMG,EAAgBC,EAAAA,YACzB,CAACC,EAAOC,KACE,MACFC,OAAAA,EACAC,MAAAA,EAAQ,OACR,eAAgBC,EAChBC,UAAAA,EAAY,GACZC,QAAAA,EACAX,UAAAA,EACAY,MAAAA,EACAC,KAAAA,EAAO,OACPC,KAAAA,EACAf,MAAAA,EACAgB,aAAAA,KACGC,GACHX,EAGA,OAAAY,EAAAA,KAAC,MAAA,CACGP,UAAU,yBACV,eAAcD,EACdG,MAAO,IAAKA,KAAUd,EAAgBC,EAAOC,IAE7CkB,SAAA,CAAAC,EAAAA,IAAC,QAAA,CACG,eAAcV,EACdH,IAAAA,EACAI,UAAWU,EAAAA,KAAK,wBAAyBV,EAAW,CAChD,qCAAgD,UAAVF,IAE1CR,UAAAA,EACAa,KAAAA,KACIG,IAEPF,GAAQK,EAAAA,IAAC,OAAK,CAAAT,UAAU,uBAAwBQ,SAAKJ,KACpDP,GACEQ,GACAM,EAAMC,aAAaP,EAAc,CAC7BL,UAAWU,EAAAA,KACP,+BACAL,EAAaV,MAAMK,aAG9BH,IAAWQ,GACRI,EAAAA,IAACI,EAAAA,WAAA,CACGZ,QAAAA,EACAD,UAAWU,EAAAA,KACP,+BACAb,EAAOG,WAEXc,MAAOjB,EAAOkB,MACdC,QAASnB,EAAOmB,QAChBC,QAASpB,EAAOoB,QAChBC,OAAQrB,EAAOqB,OACftB,IAAKC,EAAOsB,UACZhB,KAAMN,EAAOM,MAAQ,SAEpBK,SAAOX,EAAAuB,SACZ,IAOpB3B,EAAc4B,YAAc"}

package/build/cjs/components/text-input/BaseTextInput.d.cts

@@ -15,7 +15,7 @@ export interface ActionSubmit extends ActionBaseProps {
     onClick?: MouseEventHandler<HTMLButtonElement>;
 }
 export type Action = ActionButton | ActionSubmit;
-export interface BaseTextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "children"> {
+export interface BaseTextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "maxLength"> {
     /**
      * Brukes til inputfelter hvor det brukes maskering, for formatering av store tall. Brukes typisk bare til valuta.
      * @default "left"
@@ -37,6 +37,15 @@ export interface BaseTextInputProps extends Omit<InputHTMLAttributes<HTMLInputEl
      * Element som vises til høyre for inputfeltet. Brukes typisk til å trigge en handling som f.eks. å vise/skjule passord.
      */
     actionButton?: React.ReactElement<IconProps>;
+    /**
+     * Setter maxlength attributtet og justerer bredden på feltet til å passe det tallet som settes
+     *
+     * Merk: I noen Android-browsere vil dette ikke fungere som forventet. Det er gjort sånn
+     * pga begrensninger med hvordan software-tastaturet fungerer og er ikke en bug. Dersom
+     * man er veldig avhengig av at maxLength håndteres på alle plattformer anbefales det
+     * å bruke input-feltet som en controlled input og selv begrense lengden på verdien.
+     */
+    maxLength?: number | undefined;
 }
 export declare const BaseTextInput: React.ForwardRefExoticComponent<BaseTextInputProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/build/cjs/components/tooltip/PopupTip.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"),o=require("react"),i=require("../icon/icons/QuestionIcon.cjs"),r=require("./Tooltip.cjs"),s=require("./TooltipContent.cjs"),n=require("./TooltipTrigger.cjs");exports.PopupTip=({content:l,triggerProps:c,...u})=>{const[p,a]=o.useState(!1);return e.jsxs(r.Tooltip,{onOpenChange:a,triggerOn:"click",...u,children:[e.jsx(n.TooltipTrigger,{children:e.jsxs("button",{...c,type:"button",className:t.clsx("jkl-tooltip-question-button",null==c?void 0:c.className),"data-testid":"jkl-tooltip-question-button",children:[e.jsx(i.QuestionIcon,{variant:"inherit",bold:p}),e.jsx("span",{className:"jkl-sr-only",children:"Vis hjelpetekst"})]})}),e.jsx(s.TooltipContent,{children:l})]})};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),i=require("../icon/icons/QuestionIcon.cjs"),r=require("./Tooltip.cjs"),s=require("./TooltipContent.cjs"),n=require("./TooltipTrigger.cjs");exports.PopupTip=({content:l,triggerProps:c,...p})=>{const[u,a]=o.useState(!1);return e.jsxs(r.Tooltip,{onOpenChange:a,triggerOn:"click",...p,children:[e.jsx(n.TooltipTrigger,{children:e.jsxs("button",{...c,type:"button",className:t.clsx("jkl-tooltip-question-button",null==c?void 0:c.className),"data-testid":"jkl-tooltip-question-button",children:[e.jsx(i.QuestionIcon,{variant:"inherit",bold:u}),e.jsx("span",{className:"jkl-sr-only",children:"Vis hjelpetekst"})]})}),e.jsx(s.TooltipContent,{"data-ispopup":!0,children:e.jsx("div",{className:"jkl-popuptip__content-wrapper",tabIndex:0,children:l})})]})};
 //# sourceMappingURL=PopupTip.cjs.map

package/build/cjs/components/tooltip/PopupTip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PopupTip.cjs","sources":["../../../../src/components/tooltip/PopupTip.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { HTMLProps, useState, type FC, type ReactNode } from \"react\";\nimport { QuestionIcon } from \"../icon/icons/QuestionIcon.js\";\nimport { Tooltip, type TooltipProps } from \"./Tooltip.js\";\nimport { TooltipContent } from \"./TooltipContent.js\";\nimport { TooltipTrigger } from \"./TooltipTrigger.js\";\n\nexport interface PopupTipProps\n    extends Omit<TooltipProps, \"triggerOn\" | \"children\"> {\n    /**\n     * Innholdet i tooltipet som vises\n     */\n    content: ReactNode;\n    /**\n     * Eventuelle props du vil sette på trigger-knappen for tooltipet\n     */\n    triggerProps?: Omit<HTMLProps<HTMLButtonElement>, \"children\" | \"type\">;\n}\n\nexport const PopupTip: FC<PopupTipProps> = ({\n    content,\n    triggerProps,\n    ...tooltipProps\n}) => {\n    const [isBold, setIsBold] = useState(false);\n\n    return (\n        <Tooltip onOpenChange={setIsBold} triggerOn=\"click\" {...tooltipProps}>\n            <TooltipTrigger>\n                <button\n                    {...triggerProps}\n                    type=\"button\"\n                    className={clsx(\n                        \"jkl-tooltip-question-button\",\n                        triggerProps?.className,\n                    )}\n                    data-testid=\"jkl-tooltip-question-button\"\n                >\n                    <QuestionIcon variant=\"inherit\" bold={isBold} />\n                    <span className=\"jkl-sr-only\">Vis hjelpetekst</span>\n                </button>\n            </TooltipTrigger>\n            <TooltipContent>{content}</TooltipContent>\n        </Tooltip>\n    );\n};\n"],"names":["content","triggerProps","tooltipProps","isBold","setIsBold","useState","Tooltip","onOpenChange","triggerOn","children","jsx","TooltipTrigger","jsxs","type","className","clsx","QuestionIcon","variant","bold","TooltipContent"],"mappings":"4UAmB2C,EACvCA,QAAAA,EACAC,aAAAA,KACGC,MAEH,MAAOC,EAAQC,GAAaC,YAAS,GAErC,cACKC,UAAQ,CAAAC,aAAcH,EAAWI,UAAU,WAAYN,EACpDO,SAAA,CAAAC,MAACC,EAAAA,eACG,CAAAF,SAAAG,EAAAA,KAAC,SAAA,IACOX,EACJY,KAAK,SACLC,UAAWC,EAAAA,KACP,8BACA,MAAAd,OAAAA,EAAAA,EAAca,WAElB,cAAY,8BAEZL,SAAA,CAAAC,EAAAA,IAACM,EAAaA,aAAA,CAAAC,QAAQ,UAAUC,KAAMf,IACrCO,EAAAA,IAAA,OAAA,CAAKI,UAAU,cAAcL,SAAe,yBAGrDC,EAAAA,IAACS,kBAAgBV,SAAQT,MAC7B"}
+{"version":3,"file":"PopupTip.cjs","sources":["../../../../src/components/tooltip/PopupTip.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { HTMLProps, useState, type FC, type ReactNode } from \"react\";\nimport { QuestionIcon } from \"../icon/icons/QuestionIcon.js\";\nimport { Tooltip, type TooltipProps } from \"./Tooltip.js\";\nimport { TooltipContent } from \"./TooltipContent.js\";\nimport { TooltipTrigger } from \"./TooltipTrigger.js\";\n\nexport interface PopupTipProps\n    extends Omit<TooltipProps, \"triggerOn\" | \"children\"> {\n    /**\n     * Innholdet i tooltipet som vises\n     */\n    content: ReactNode;\n    /**\n     * Eventuelle props du vil sette på trigger-knappen for tooltipet\n     */\n    triggerProps?: Omit<HTMLProps<HTMLButtonElement>, \"children\" | \"type\">;\n}\n\nexport const PopupTip: FC<PopupTipProps> = ({\n    content,\n    triggerProps,\n    ...tooltipProps\n}) => {\n    const [isOpen, setIsOpen] = useState(false);\n\n    return (\n        <Tooltip onOpenChange={setIsOpen} triggerOn=\"click\" {...tooltipProps}>\n            <TooltipTrigger>\n                <button\n                    {...triggerProps}\n                    type=\"button\"\n                    className={clsx(\n                        \"jkl-tooltip-question-button\",\n                        triggerProps?.className,\n                    )}\n                    data-testid=\"jkl-tooltip-question-button\"\n                >\n                    <QuestionIcon variant=\"inherit\" bold={isOpen} />\n                    <span className=\"jkl-sr-only\">Vis hjelpetekst</span>\n                </button>\n            </TooltipTrigger>\n\n            <TooltipContent data-ispopup={true}>\n                {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}\n                <div className=\"jkl-popuptip__content-wrapper\" tabIndex={0}>\n                    {content}\n                </div>\n            </TooltipContent>\n        </Tooltip>\n    );\n};\n"],"names":["content","triggerProps","tooltipProps","isOpen","setIsOpen","useState","Tooltip","onOpenChange","triggerOn","children","jsx","TooltipTrigger","jsxs","type","className","clsx","QuestionIcon","variant","bold","TooltipContent","tabIndex"],"mappings":"4UAmB2C,EACvCA,QAAAA,EACAC,aAAAA,KACGC,MAEH,MAAOC,EAAQC,GAAaC,YAAS,GAErC,cACKC,UAAQ,CAAAC,aAAcH,EAAWI,UAAU,WAAYN,EACpDO,SAAA,CAAAC,MAACC,EAAAA,eACG,CAAAF,SAAAG,EAAAA,KAAC,SAAA,IACOX,EACJY,KAAK,SACLC,UAAWC,EAAAA,KACP,8BACA,MAAAd,OAAA,EAAAA,EAAca,WAElB,cAAY,8BAEZL,SAAA,CAAAC,EAAAA,IAACM,EAAaA,aAAA,CAAAC,QAAQ,UAAUC,KAAMf,IACrCO,EAAAA,IAAA,OAAA,CAAKI,UAAU,cAAcL,SAAe,yBAIrDC,EAAAA,IAACS,EAAeA,eAAA,CAAA,gBAAc,EAE1BV,SAAAC,EAAAA,IAAC,MAAI,CAAAI,UAAU,gCAAgCM,SAAU,EACpDX,SAAAT,QAGb"}

package/build/cjs/components/tooltip/Tooltip.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("react"),o=n.createContext(null),r=o.Provider;exports.Tooltip=({children:o,...i})=>{const l=(({initialOpen:e=!1,placement:o="top",delay:r=250,triggerOn:i="hover",onOpenChange:l})=>{const[s,u]=n.useState(e),a=n.useRef(null),c=n.useRef(null),p=t.useFloating({open:s,onOpenChange:e=>{null==l||l(e),u(e)},placement:o,whileElementsMounted:t.autoUpdate,middleware:[t.offset(16),t.flip(),t.shift({padding:16}),t.arrow({element:a,padding:8})]}),d=t.useRole(p.context,{role:"tooltip"}),x=t.useDismiss(p.context),g=t.useClick(p.context,{enabled:"click"===i}),f=t.useHover(p.context,{enabled:"hover"===i,delay:s?0:r}),m=t.useFocus(p.context,{enabled:"click"!==i||s}),h=t.useInteractions([x,m,d,g,f]);return{triggerOn:i,isOpen:s,setOpen:u,arrowElement:a,...p,refs:{...p.refs,description:c,setDescription:e=>c.current=e},...h}})(i);return e.jsx(r,{value:l,children:o})},exports.TooltipProvider=r,exports.useTooltipContext=()=>{const e=n.useContext(o);if(null===e)throw new Error("Tooltip-komponentene kan kun brukes inne i <Tooltip />");return e};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("react"),o=n.createContext(null),r=o.Provider;exports.Tooltip=({children:o,...i})=>{const l=(({initialOpen:e=!1,placement:o="top",delay:r=250,triggerOn:i="hover",onOpenChange:l})=>{const[s,u]=n.useState(e),a=n.useRef(null),c=n.useRef(null),p=t.useFloating({open:s,onOpenChange:e=>{null==l||l(e),u(e)},placement:o,whileElementsMounted:t.autoUpdate,middleware:[t.offset(16),t.flip(),t.shift({padding:16}),t.arrow({element:a,padding:8})]}),d=t.useRole(p.context,{role:"tooltip"}),x=t.useDismiss(p.context),g=t.useClick(p.context,{enabled:"click"===i}),f=t.useHover(p.context,{enabled:"hover"===i,delay:s?0:r}),h=t.useFocus(p.context,{enabled:"hover"===i}),m=t.useInteractions([x,h,d,g,f]);return{triggerOn:i,isOpen:s,setOpen:u,arrowElement:a,...p,refs:{...p.refs,description:c,setDescription:e=>c.current=e},...m}})(i);return e.jsx(r,{value:l,children:o})},exports.TooltipProvider=r,exports.useTooltipContext=()=>{const e=n.useContext(o);if(null===e)throw new Error("Tooltip-komponentene kan kun brukes inne i <Tooltip />");return e};
 //# sourceMappingURL=Tooltip.cjs.map

package/build/cjs/components/tooltip/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n    type Placement,\n    type UseFloatingReturn,\n    arrow,\n    autoUpdate,\n    flip,\n    offset,\n    shift,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n    useRole,\n} from \"@floating-ui/react\";\nimport React, { FC, createContext, useContext, useRef, useState } from \"react\";\nimport { type WithChildren } from \"../../core/types.js\";\n\nexport type TooltipPlacement = Extract<\n    Placement,\n    \"top-start\" | \"top-end\" | \"left\" | \"right\" | \"top\"\n>;\n\nexport interface TooltipProps {\n    /**\n     * Sett til true dersom du ønsker at tooltipen skal være åpen som default\n     * @default false\n     */\n    initialOpen?: boolean;\n    /**\n     * En funksjon som skal kalles når Tooltip åpnes eller lukkes\n     * @param open Hvorvidt tooltip endres til å være åpen eller ikke\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * Plassering av tooltipen i forhold til triggeren. Tooltipen vil automatisk\n     * bytte posisjon dersom det ikke er plass.\n     * @default \"top\"\n     */\n    placement?: TooltipPlacement;\n    /**\n     * Valgfri forsinkelse før tooltipen åpner. Ignoreres dersom triggerOn er satt til \"click\"\n     * @default 250\n     */\n    delay?: number;\n    /**\n     * Angir om tooltipen skal åpnes ved klikk eller hover\n     * @default \"hover\"\n     */\n    triggerOn?: \"click\" | \"hover\";\n}\n\ntype UseTooltipReturn = {\n    triggerOn: NonNullable<TooltipProps[\"triggerOn\"]>;\n    isOpen: boolean;\n    setOpen: React.Dispatch<React.SetStateAction<boolean>>;\n    arrowElement: React.RefObject<SVGSVGElement>;\n    refs: {\n        description: React.MutableRefObject<HTMLElement | null>;\n        setDescription: (element: HTMLElement | null) => void;\n    } & UseFloatingReturn[\"refs\"];\n} & UseFloatingReturn &\n    ReturnType<typeof useInteractions>;\n\nconst useTooltip = ({\n    initialOpen = false,\n    placement = \"top\",\n    delay = 250,\n    triggerOn = \"hover\",\n    onOpenChange,\n}: TooltipProps): UseTooltipReturn => {\n    const [isOpen, setOpen] = useState(initialOpen);\n    const arrowElement = useRef<SVGSVGElement>(null);\n    const description = useRef<HTMLElement | null>(null);\n    const setDescription = (element: HTMLElement | null) =>\n        (description.current = element);\n\n    const data = useFloating({\n        open: isOpen,\n        onOpenChange: (open) => {\n            onOpenChange?.(open);\n            setOpen(open);\n        },\n        placement,\n        whileElementsMounted: autoUpdate,\n        middleware: [\n            offset(16),\n            flip(),\n            shift({ padding: 16 }),\n            arrow({ element: arrowElement, padding: 8 }),\n        ],\n    });\n\n    const role = useRole(data.context, { role: \"tooltip\" });\n    const dismiss = useDismiss(data.context);\n    const click = useClick(data.context, {\n        enabled: triggerOn === \"click\",\n    });\n    const hover = useHover(data.context, {\n        enabled: triggerOn === \"hover\",\n        delay: isOpen ? 0 : delay,\n    });\n    const focus = useFocus(data.context, {\n        enabled: triggerOn === \"click\" ? isOpen : true,\n    });\n\n    const interactions = useInteractions([dismiss, focus, role, click, hover]);\n\n    return {\n        triggerOn,\n        isOpen,\n        setOpen,\n        arrowElement,\n        ...data,\n        refs: {\n            ...data.refs,\n            description,\n            setDescription,\n        },\n        ...interactions,\n    };\n};\n\nexport type TooltipContext = ReturnType<typeof useTooltip> | null;\n\nconst tooltipContext = createContext<TooltipContext>(null);\n\nexport const TooltipProvider = tooltipContext.Provider;\n\nexport const useTooltipContext = () => {\n    const context = useContext(tooltipContext);\n\n    if (context === null) {\n        throw new Error(\n            \"Tooltip-komponentene kan kun brukes inne i <Tooltip />\",\n        );\n    }\n\n    return context;\n};\n\nexport const Tooltip: FC<TooltipProps & WithChildren> = ({\n    children,\n    ...options\n}) => {\n    const tooltip = useTooltip(options);\n\n    return <TooltipProvider value={tooltip}>{children}</TooltipProvider>;\n};\n"],"names":["tooltipContext","createContext","TooltipProvider","Provider","children","options","tooltip","initialOpen","placement","delay","triggerOn","onOpenChange","isOpen","setOpen","useState","arrowElement","useRef","description","data","useFloating","open","whileElementsMounted","autoUpdate","middleware","offset","flip","shift","padding","arrow","element","role","useRole","context","dismiss","useDismiss","click","useClick","enabled","hover","useHover","focus","useFocus","interactions","useInteractions","refs","setDescription","current","useTooltip","jsx","value","useContext","Error"],"mappings":"wKA8HMA,EAAiBC,EAAAA,cAA8B,MAExCC,EAAkBF,EAAeG,yBAcU,EACpDC,SAAAA,KACGC,MAEG,MAAAC,EAjFS,GACfC,YAAAA,GAAc,EACdC,UAAAA,EAAY,MACZC,MAAAA,EAAQ,IACRC,UAAAA,EAAY,QACZC,aAAAA,MAEA,MAAOC,EAAQC,GAAWC,WAASP,GAC7BQ,EAAeC,SAAsB,MACrCC,EAAcD,SAA2B,MAIzCE,EAAOC,EAAAA,YAAY,CACrBC,KAAMR,EACND,aAAeS,IACX,MAAAT,GAAAA,EAAeS,GACfP,EAAQO,EAAI,EAEhBZ,UAAAA,EACAa,qBAAsBC,EAAAA,WACtBC,WAAY,CACRC,EAAAA,OAAO,IACPC,SACAC,QAAM,CAAEC,QAAS,KACjBC,EAAAA,MAAM,CAAEC,QAASd,EAAcY,QAAS,OAI1CG,EAAOC,EAAAA,QAAQb,EAAKc,QAAS,CAAEF,KAAM,YACrCG,EAAUC,EAAAA,WAAWhB,EAAKc,SAC1BG,EAAQC,EAAAA,SAASlB,EAAKc,QAAS,CACjCK,QAAuB,UAAd3B,IAEP4B,EAAQC,EAAAA,SAASrB,EAAKc,QAAS,CACjCK,QAAuB,UAAd3B,EACTD,MAAOG,EAAS,EAAIH,IAElB+B,EAAQC,EAAAA,SAASvB,EAAKc,QAAS,CACjCK,QAAuB,UAAd3B,GAAwBE,IAG/B8B,EAAeC,kBAAgB,CAACV,EAASO,EAAOV,EAAMK,EAAOG,IAE5D,MAAA,CACH5B,UAAAA,EACAE,OAAAA,EACAC,QAAAA,EACAE,aAAAA,KACGG,EACH0B,KAAM,IACC1B,EAAK0B,KACR3B,YAAAA,EACA4B,eA3CgBhB,GACnBZ,EAAY6B,QAAUjB,MA4CpBa,EAAA,EA0BSK,CAAW1C,GAE3B,OAAQ2C,EAAAA,IAAA9C,EAAA,CAAgB+C,MAAO3C,EAAUF,SAAAA,GAAS,sDAlBrB,KACvB,MAAA4B,EAAUkB,aAAWlD,GAE3B,GAAgB,OAAZgC,EACA,MAAM,IAAImB,MACN,0DAID,OAAAnB"}
+{"version":3,"file":"Tooltip.cjs","sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n    type Placement,\n    type UseFloatingReturn,\n    arrow,\n    autoUpdate,\n    flip,\n    offset,\n    shift,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n    useRole,\n} from \"@floating-ui/react\";\nimport React, { FC, createContext, useContext, useRef, useState } from \"react\";\nimport { type WithChildren } from \"../../core/types.js\";\n\nexport type TooltipPlacement = Extract<\n    Placement,\n    \"top-start\" | \"top-end\" | \"left\" | \"right\" | \"top\"\n>;\n\nexport interface TooltipProps {\n    /**\n     * Sett til true dersom du ønsker at tooltipen skal være åpen som default\n     * @default false\n     */\n    initialOpen?: boolean;\n    /**\n     * En funksjon som skal kalles når Tooltip åpnes eller lukkes\n     * @param open Hvorvidt tooltip endres til å være åpen eller ikke\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * Plassering av tooltipen i forhold til triggeren. Tooltipen vil automatisk\n     * bytte posisjon dersom det ikke er plass.\n     * @default \"top\"\n     */\n    placement?: TooltipPlacement;\n    /**\n     * Valgfri forsinkelse før tooltipen åpner. Ignoreres dersom triggerOn er satt til \"click\"\n     * @default 250\n     */\n    delay?: number;\n    /**\n     * Angir om tooltipen skal åpnes ved klikk eller hover\n     * @default \"hover\"\n     */\n    triggerOn?: \"click\" | \"hover\";\n}\n\ntype UseTooltipReturn = {\n    triggerOn: NonNullable<TooltipProps[\"triggerOn\"]>;\n    isOpen: boolean;\n    setOpen: React.Dispatch<React.SetStateAction<boolean>>;\n    arrowElement: React.RefObject<SVGSVGElement>;\n    refs: {\n        description: React.MutableRefObject<HTMLElement | null>;\n        setDescription: (element: HTMLElement | null) => void;\n    } & UseFloatingReturn[\"refs\"];\n} & UseFloatingReturn &\n    ReturnType<typeof useInteractions>;\n\nconst useTooltip = ({\n    initialOpen = false,\n    placement = \"top\",\n    delay = 250,\n    triggerOn = \"hover\",\n    onOpenChange,\n}: TooltipProps): UseTooltipReturn => {\n    const [isOpen, setOpen] = useState(initialOpen);\n    const arrowElement = useRef<SVGSVGElement>(null);\n    const description = useRef<HTMLElement | null>(null);\n    const setDescription = (element: HTMLElement | null) =>\n        (description.current = element);\n\n    const data = useFloating({\n        open: isOpen,\n        onOpenChange: (open) => {\n            onOpenChange?.(open);\n            setOpen(open);\n        },\n        placement,\n        whileElementsMounted: autoUpdate,\n        middleware: [\n            offset(16),\n            flip(),\n            shift({ padding: 16 }),\n            arrow({ element: arrowElement, padding: 8 }),\n        ],\n    });\n\n    const role = useRole(data.context, { role: \"tooltip\" });\n    const dismiss = useDismiss(data.context);\n    const click = useClick(data.context, {\n        enabled: triggerOn === \"click\",\n    });\n    const hover = useHover(data.context, {\n        enabled: triggerOn === \"hover\",\n        delay: isOpen ? 0 : delay,\n    });\n    const focus = useFocus(data.context, {\n        enabled: triggerOn === \"hover\",\n    });\n\n    const interactions = useInteractions([dismiss, focus, role, click, hover]);\n\n    return {\n        triggerOn,\n        isOpen,\n        setOpen,\n        arrowElement,\n        ...data,\n        refs: {\n            ...data.refs,\n            description,\n            setDescription,\n        },\n        ...interactions,\n    };\n};\n\nexport type TooltipContext = ReturnType<typeof useTooltip> | null;\n\nconst tooltipContext = createContext<TooltipContext>(null);\n\nexport const TooltipProvider = tooltipContext.Provider;\n\nexport const useTooltipContext = () => {\n    const context = useContext(tooltipContext);\n\n    if (context === null) {\n        throw new Error(\n            \"Tooltip-komponentene kan kun brukes inne i <Tooltip />\",\n        );\n    }\n\n    return context;\n};\n\nexport const Tooltip: FC<TooltipProps & WithChildren> = ({\n    children,\n    ...options\n}) => {\n    const tooltip = useTooltip(options);\n\n    return <TooltipProvider value={tooltip}>{children}</TooltipProvider>;\n};\n"],"names":["tooltipContext","createContext","TooltipProvider","Provider","children","options","tooltip","initialOpen","placement","delay","triggerOn","onOpenChange","isOpen","setOpen","useState","arrowElement","useRef","description","data","useFloating","open","whileElementsMounted","autoUpdate","middleware","offset","flip","shift","padding","arrow","element","role","useRole","context","dismiss","useDismiss","click","useClick","enabled","hover","useHover","focus","useFocus","interactions","useInteractions","refs","setDescription","current","useTooltip","jsx","value","useContext","Error"],"mappings":"wKA8HMA,EAAiBC,EAAAA,cAA8B,MAExCC,EAAkBF,EAAeG,yBAcU,EACpDC,SAAAA,KACGC,MAEG,MAAAC,EAjFS,GACfC,YAAAA,GAAc,EACdC,UAAAA,EAAY,MACZC,MAAAA,EAAQ,IACRC,UAAAA,EAAY,QACZC,aAAAA,MAEA,MAAOC,EAAQC,GAAWC,WAASP,GAC7BQ,EAAeC,SAAsB,MACrCC,EAAcD,SAA2B,MAIzCE,EAAOC,EAAAA,YAAY,CACrBC,KAAMR,EACND,aAAeS,IACX,MAAAT,GAAAA,EAAeS,GACfP,EAAQO,EAAI,EAEhBZ,UAAAA,EACAa,qBAAsBC,EAAAA,WACtBC,WAAY,CACRC,EAAAA,OAAO,IACPC,SACAC,QAAM,CAAEC,QAAS,KACjBC,EAAAA,MAAM,CAAEC,QAASd,EAAcY,QAAS,OAI1CG,EAAOC,EAAAA,QAAQb,EAAKc,QAAS,CAAEF,KAAM,YACrCG,EAAUC,EAAAA,WAAWhB,EAAKc,SAC1BG,EAAQC,EAAAA,SAASlB,EAAKc,QAAS,CACjCK,QAAuB,UAAd3B,IAEP4B,EAAQC,EAAAA,SAASrB,EAAKc,QAAS,CACjCK,QAAuB,UAAd3B,EACTD,MAAOG,EAAS,EAAIH,IAElB+B,EAAQC,EAAAA,SAASvB,EAAKc,QAAS,CACjCK,QAAuB,UAAd3B,IAGPgC,EAAeC,kBAAgB,CAACV,EAASO,EAAOV,EAAMK,EAAOG,IAE5D,MAAA,CACH5B,UAAAA,EACAE,OAAAA,EACAC,QAAAA,EACAE,aAAAA,KACGG,EACH0B,KAAM,IACC1B,EAAK0B,KACR3B,YAAAA,EACA4B,eA3CgBhB,GACnBZ,EAAY6B,QAAUjB,MA4CpBa,EAAA,EA0BSK,CAAW1C,GAE3B,OAAQ2C,EAAAA,IAAA9C,EAAA,CAAgB+C,MAAO3C,EAAUF,SAAAA,GAAS,sDAlBrB,KACvB,MAAA4B,EAAUkB,aAAWlD,GAE3B,GAAgB,OAAZgC,EACA,MAAM,IAAImB,MACN,0DAID,OAAAnB"}

package/build/cjs/components/tooltip/TooltipContent.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),r=require("../../../clsx-E3yX_9sL.cjs"),s=require("react"),i=require("../../hooks/useBrowserPreferences/useBrowserPreferences.cjs"),n=require("../../hooks/useId/useId.cjs"),o=require("../../utilities/getThemeAndDensity.cjs"),a=require("./Tooltip.cjs");function c(e,t=0){switch(e){case"top":default:return`0 ${t}px`;case"left":return`${t}px 0`;case"bottom":return`0 ${-t}px`;case"right":return-t+"px 0"}}const l=s.forwardRef((function({className:s,children:l,...u},d){const{triggerOn:p,arrowElement:f,getFloatingProps:g,placement:h,floatingStyles:x,refs:j,context:y}=a.useTooltipContext(),m=t.useMergeRefs([d,j.setFloating]),w=n.useId("jkl-tooltip-content"),{prefersReducedMotion:q}=i.useBrowserPreferences(),{isMounted:k,styles:T}=t.useTransitionStyles(y,{duration:{open:q?0:250,close:q?0:150},initial:({side:e})=>({opacity:0,translate:c(e,5)}),open:({side:e})=>({opacity:1,translate:c(e,0)}),close:({side:e})=>({opacity:0,translate:c(e,-5)})}),{density:v,theme:P}=o.getThemeAndDensity(j.reference.current);return e.jsxs(t.FloatingPortal,{children:["hover"===p&&e.jsx("span",{ref:j.setDescription,hidden:!0,children:l},`${w}-trigger`),k&&e.jsx("span",{className:"jkl",children:e.jsxs("span",{ref:m,"data-placement":h,"aria-live":"click"===p?"assertive":void 0,"data-theme":P,"data-layout-density":v,className:r.clsx("jkl-tooltip-content",s),...g({...u,id:w}),style:{...x,...T},children:[l,e.jsx(t.FloatingArrow,{context:y,ref:f,width:24,height:12,fill:"var(--background-color)"})]},w)},`${w}-wrapper`)]})}));exports.TooltipContent=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),r=require("../../../clsx-E3yX_9sL.cjs"),s=require("react"),n=require("../../hooks/useBrowserPreferences/useBrowserPreferences.cjs"),o=require("../../hooks/useId/useId.cjs"),i=require("../../utilities/getThemeAndDensity.cjs"),a=require("./Tooltip.cjs");function c(e,t=0){switch(e){case"top":default:return`0 ${t}px`;case"left":return`${t}px 0`;case"bottom":return`0 ${-t}px`;case"right":return-t+"px 0"}}const l=s.forwardRef((function({className:s,children:l,"data-ispopup":u,...d},p){const{triggerOn:g,arrowElement:f,getFloatingProps:h,placement:x,floatingStyles:j,refs:m,context:y}=a.useTooltipContext(),F=t.useMergeRefs([p,m.setFloating]),w=o.useId("jkl-tooltip-content"),{prefersReducedMotion:q}=n.useBrowserPreferences(),{isMounted:k,styles:T}=t.useTransitionStyles(y,{duration:{open:q?0:250,close:q?0:150},initial:({side:e})=>({opacity:0,translate:c(e,5)}),open:({side:e})=>({opacity:1,translate:c(e,0)}),close:({side:e})=>({opacity:0,translate:c(e,-5)})}),{density:P,theme:M}=i.getThemeAndDensity(m.reference.current);return e.jsx(t.FloatingPortal,{children:e.jsx(t.FloatingFocusManager,{initialFocus:"click"===g?0:-1,returnFocus:!0,context:y,modal:!1,closeOnFocusOut:!0,children:e.jsxs(e.Fragment,{children:["hover"===g&&e.jsx("span",{ref:m.setDescription,hidden:!0,children:l},`${w}-trigger`),k&&e.jsx("span",{className:"jkl",children:e.jsxs("span",{ref:F,"data-placement":x,"data-testid":"tooltip-content","data-theme":M,"data-layout-density":P,className:r.clsx("jkl-tooltip-content",s),...h({...d,id:w}),style:{...j,...T},children:[l,e.jsx(t.FloatingArrow,{context:y,ref:f,width:24,height:12,fill:"var(--background-color)"})]},w)},`${w}-wrapper`)]})})})}));exports.TooltipContent=l;
 //# sourceMappingURL=TooltipContent.cjs.map

package/build/cjs/components/tooltip/TooltipContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipContent.cjs","sources":["../../../../src/components/tooltip/TooltipContent.tsx"],"sourcesContent":["import {\n    FloatingArrow,\n    FloatingPortal,\n    type Side,\n    useMergeRefs,\n    useTransitionStyles,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { HTMLProps, forwardRef } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\nimport { useTooltipContext } from \"./Tooltip.js\";\n\nfunction getTranslation(side: Side, value: number = 0) {\n    switch (side) {\n        case \"top\":\n            return `0 ${value}px`;\n        case \"left\":\n            return `${value}px 0`;\n        case \"bottom\":\n            return `0 ${-value}px`;\n        case \"right\":\n            return `${-value}px 0`;\n\n        default:\n            return `0 ${value}px`;\n    }\n}\n\nexport const TooltipContent = forwardRef<\n    HTMLDivElement,\n    HTMLProps<HTMLDivElement>\n>(function TooltipContent({ className, children, ...props }, forwardedRef) {\n    const {\n        triggerOn,\n        arrowElement,\n        getFloatingProps,\n        placement,\n        floatingStyles,\n        refs,\n        context,\n    } = useTooltipContext();\n    const ref = useMergeRefs([forwardedRef, refs.setFloating]);\n    const contentId = useId(\"jkl-tooltip-content\");\n    const { prefersReducedMotion } = useBrowserPreferences();\n    const { isMounted, styles: animationStyles } = useTransitionStyles(\n        context,\n        {\n            duration: {\n                open: prefersReducedMotion ? 0 : 250,\n                close: prefersReducedMotion ? 0 : 150,\n            },\n            initial: ({ side }) => ({\n                opacity: 0,\n                translate: getTranslation(side, 5),\n            }),\n            open: ({ side }) => ({\n                opacity: 1,\n                translate: getTranslation(side, 0),\n            }),\n            close: ({ side }) => ({\n                opacity: 0,\n                translate: getTranslation(side, -5),\n            }),\n        },\n    );\n\n    // Siden tooltipet rendres på rot må vi hente lokal dark/light-verdi fra triggeren\n    // Vi må gjøre dette for å ta hensyn til at tema kan styres lokalt for deler av UIet\n    const { density, theme } = getThemeAndDensity(\n        refs.reference.current as HTMLElement,\n    );\n\n    return (\n        <FloatingPortal>\n            {/* For å kunne bruke tekstinnholdet i tooltip som beskrivende tekst, selv når ikke\n            tooltip er synlig, må vi rendre et skjult element å referere til for å hente innholdet. */}\n            {triggerOn === \"hover\" && (\n                <span\n                    ref={refs.setDescription}\n                    hidden\n                    key={`${contentId}-trigger`}\n                >\n                    {children}\n                </span>\n            )}\n            {isMounted && (\n                <span className=\"jkl\" key={`${contentId}-wrapper`}>\n                    <span\n                        key={contentId}\n                        ref={ref}\n                        data-placement={placement}\n                        aria-live={\n                            triggerOn === \"click\" ? \"assertive\" : undefined\n                        }\n                        data-theme={theme}\n                        data-layout-density={density}\n                        className={clsx(\"jkl-tooltip-content\", className)}\n                        {...getFloatingProps({\n                            ...props,\n                            id: contentId,\n                        })}\n                        style={{ ...floatingStyles, ...animationStyles }}\n                    >\n                        {children}\n                        <FloatingArrow\n                            context={context}\n                            ref={arrowElement}\n                            width={24}\n                            height={12}\n                            fill=\"var(--background-color)\"\n                        />\n                    </span>\n                </span>\n            )}\n        </FloatingPortal>\n    );\n});\n"],"names":["getTranslation","side","value","TooltipContent","forwardRef","className","children","props","forwardedRef","triggerOn","arrowElement","getFloatingProps","placement","floatingStyles","refs","context","useTooltipContext","ref","useMergeRefs","setFloating","contentId","useId","prefersReducedMotion","useBrowserPreferences","isMounted","styles","animationStyles","useTransitionStyles","duration","open","close","initial","opacity","translate","density","theme","getThemeAndDensity","reference","current","FloatingPortal","jsx","setDescription","hidden","jsxs","clsx","id","style","FloatingArrow","width","height","fill"],"mappings":"iZAcA,SAASA,EAAeC,EAAYC,EAAgB,GAChD,OAAQD,GACJ,IAAK,MASL,QACI,MAAO,KAAKC,MARhB,IAAK,OACD,MAAO,GAAGA,QACd,IAAK,SACM,MAAA,MAAMA,MACjB,IAAK,QACM,OAAIA,EAAJ,OAKnB,CAEa,MAAAC,EAAiBC,EAAAA,YAG5B,UAA0BC,UAAAA,EAAWC,SAAAA,KAAaC,GAASC,GACnD,MACFC,UAAAA,EACAC,aAAAA,EACAC,iBAAAA,EACAC,UAAAA,EACAC,eAAAA,EACAC,KAAAA,EACAC,QAAAA,GACAC,EAAkBA,oBAChBC,EAAMC,EAAAA,aAAa,CAACV,EAAcM,EAAKK,cACvCC,EAAYC,QAAM,wBAChBC,qBAAAA,GAAyBC,EAAAA,yBACzBC,UAAAA,EAAWC,OAAQC,GAAoBC,EAAAA,oBAC3CZ,EACA,CACIa,SAAU,CACNC,KAAMP,EAAuB,EAAI,IACjCQ,MAAOR,EAAuB,EAAI,KAEtCS,QAAS,EAAG9B,KAAAA,OACR+B,QAAS,EACTC,UAAWjC,EAAeC,EAAM,KAEpC4B,KAAM,EAAG5B,KAAAA,OACL+B,QAAS,EACTC,UAAWjC,EAAeC,EAAM,KAEpC6B,MAAO,EAAG7B,KAAAA,OACN+B,QAAS,EACTC,UAAWjC,EAAeC,GAAQ,QAOtCiC,QAAAA,EAASC,MAAAA,GAAUC,EAAAA,mBACvBtB,EAAKuB,UAAUC,SAGnB,cACKC,iBAGI,CAAAjC,SAAA,CAAc,UAAdG,GACG+B,EAAAA,IAAC,OAAA,CACGvB,IAAKH,EAAK2B,eACVC,QAAM,EAGLpC,SAAAA,GAFI,GAAGc,aAKfI,GACGgB,EAAAA,IAAC,OAAK,CAAAnC,UAAU,MACZC,SAAAqC,EAAAA,KAAC,OAAA,CAEG1B,IAAAA,EACA,iBAAgBL,EAChB,YACkB,UAAdH,EAAwB,iBAAc,EAE1C,aAAY0B,EACZ,sBAAqBD,EACrB7B,UAAWuC,EAAAA,KAAK,sBAAuBvC,MACnCM,EAAiB,IACdJ,EACHsC,GAAIzB,IAER0B,MAAO,IAAKjC,KAAmBa,GAE9BpB,SAAA,CAAAA,EACDkC,EAAAA,IAACO,EAAAA,cAAA,CACGhC,QAAAA,EACAE,IAAKP,EACLsC,MAAO,GACPC,OAAQ,GACRC,KAAK,8BArBJ9B,IAFc,GAAGA,eA8B9C"}
+{"version":3,"file":"TooltipContent.cjs","sources":["../../../../src/components/tooltip/TooltipContent.tsx"],"sourcesContent":["import {\n    FloatingArrow,\n    FloatingFocusManager,\n    FloatingPortal,\n    type Side,\n    useMergeRefs,\n    useTransitionStyles,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { HTMLProps, forwardRef } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\nimport { useTooltipContext } from \"./Tooltip.js\";\n\nfunction getTranslation(side: Side, value: number = 0) {\n    switch (side) {\n        case \"top\":\n            return `0 ${value}px`;\n        case \"left\":\n            return `${value}px 0`;\n        case \"bottom\":\n            return `0 ${-value}px`;\n        case \"right\":\n            return `${-value}px 0`;\n\n        default:\n            return `0 ${value}px`;\n    }\n}\n\nexport const TooltipContent = forwardRef<\n    HTMLDivElement,\n    HTMLProps<HTMLDivElement> & { \"data-ispopup\"?: boolean }\n>(function TooltipContent(\n    { className, children, [\"data-ispopup\"]: isPopup, ...props },\n    forwardedRef,\n) {\n    const {\n        triggerOn,\n        arrowElement,\n        getFloatingProps,\n        placement,\n        floatingStyles,\n        refs,\n        context,\n    } = useTooltipContext();\n    const ref = useMergeRefs([forwardedRef, refs.setFloating]);\n    const contentId = useId(\"jkl-tooltip-content\");\n    const { prefersReducedMotion } = useBrowserPreferences();\n    const { isMounted, styles: animationStyles } = useTransitionStyles(\n        context,\n        {\n            duration: {\n                open: prefersReducedMotion ? 0 : 250,\n                close: prefersReducedMotion ? 0 : 150,\n            },\n            initial: ({ side }) => ({\n                opacity: 0,\n                translate: getTranslation(side, 5),\n            }),\n            open: ({ side }) => ({\n                opacity: 1,\n                translate: getTranslation(side, 0),\n            }),\n            close: ({ side }) => ({\n                opacity: 0,\n                translate: getTranslation(side, -5),\n            }),\n        },\n    );\n\n    // Siden tooltipet rendres på rot må vi hente lokal dark/light-verdi fra triggeren\n    // Vi må gjøre dette for å ta hensyn til at tema kan styres lokalt for deler av UIet\n    const { density, theme } = getThemeAndDensity(\n        refs.reference.current as HTMLElement,\n    );\n\n    return (\n        <FloatingPortal>\n            <FloatingFocusManager\n                initialFocus={triggerOn === \"click\" ? 0 : -1}\n                returnFocus={true}\n                context={context}\n                modal={false}\n                closeOnFocusOut={true}\n            >\n                <>\n                    {/* For å kunne bruke tekstinnholdet i tooltip som beskrivende tekst, selv når ikke\n            tooltip er synlig, må vi rendre et skjult element å referere til for å hente innholdet. */}\n                    {triggerOn === \"hover\" && (\n                        <span\n                            ref={refs.setDescription}\n                            hidden\n                            key={`${contentId}-trigger`}\n                        >\n                            {children}\n                        </span>\n                    )}\n                    {isMounted && (\n                        <span className=\"jkl\" key={`${contentId}-wrapper`}>\n                            <span\n                                key={contentId}\n                                ref={ref}\n                                data-placement={placement}\n                                data-testid={\"tooltip-content\"}\n                                data-theme={theme}\n                                data-layout-density={density}\n                                className={clsx(\n                                    \"jkl-tooltip-content\",\n                                    className,\n                                )}\n                                {...getFloatingProps({\n                                    ...props,\n                                    id: contentId,\n                                })}\n                                style={{\n                                    ...floatingStyles,\n                                    ...animationStyles,\n                                }}\n                            >\n                                {children}\n                                <FloatingArrow\n                                    context={context}\n                                    ref={arrowElement}\n                                    width={24}\n                                    height={12}\n                                    fill=\"var(--background-color)\"\n                                />\n                            </span>\n                        </span>\n                    )}\n                </>\n            </FloatingFocusManager>\n        </FloatingPortal>\n    );\n});\n"],"names":["getTranslation","side","value","TooltipContent","forwardRef","className","children","isPopup","props","forwardedRef","triggerOn","arrowElement","getFloatingProps","placement","floatingStyles","refs","context","useTooltipContext","ref","useMergeRefs","setFloating","contentId","useId","prefersReducedMotion","useBrowserPreferences","isMounted","styles","animationStyles","useTransitionStyles","duration","open","close","initial","opacity","translate","density","theme","getThemeAndDensity","reference","current","FloatingPortal","jsx","FloatingFocusManager","initialFocus","returnFocus","modal","closeOnFocusOut","jsxs","Fragment","setDescription","hidden","clsx","id","style","FloatingArrow","width","height","fill"],"mappings":"iZAeA,SAASA,EAAeC,EAAYC,EAAgB,GAChD,OAAQD,GACJ,IAAK,MASL,QACI,MAAO,KAAKC,MARhB,IAAK,OACD,MAAO,GAAGA,QACd,IAAK,SACM,MAAA,MAAMA,MACjB,IAAK,QACM,OAAIA,EAAJ,OAKnB,CAEO,MAAMC,EAAiBC,EAAAA,YAG5B,UACIC,UAAAA,EAAWC,SAAAA,EAAU,eAAkBC,KAAYC,GACrDC,GAEM,MACFC,UAAAA,EACAC,aAAAA,EACAC,iBAAAA,EACAC,UAAAA,EACAC,eAAAA,EACAC,KAAAA,EACAC,QAAAA,GACAC,EAAkBA,oBAChBC,EAAMC,EAAAA,aAAa,CAACV,EAAcM,EAAKK,cACvCC,EAAYC,QAAM,wBAChBC,qBAAAA,GAAyBC,EAAAA,yBACzBC,UAAAA,EAAWC,OAAQC,GAAoBC,EAAAA,oBAC3CZ,EACA,CACIa,SAAU,CACNC,KAAMP,EAAuB,EAAI,IACjCQ,MAAOR,EAAuB,EAAI,KAEtCS,QAAS,EAAG/B,KAAAA,OACRgC,QAAS,EACTC,UAAWlC,EAAeC,EAAM,KAEpC6B,KAAM,EAAG7B,KAAAA,MAAY,CACjBgC,QAAS,EACTC,UAAWlC,EAAeC,EAAM,KAEpC8B,MAAO,EAAG9B,KAAAA,OACNgC,QAAS,EACTC,UAAWlC,EAAeC,GAAQ,QAOtCkC,QAAAA,EAASC,MAAAA,GAAUC,EAAAA,mBACvBtB,EAAKuB,UAAUC,SAGnB,aACKC,EAAAA,eACG,CAAAlC,SAAAmC,EAAAA,IAACC,EAAAA,qBAAA,CACGC,aAA4B,UAAdjC,EAAwB,KACtCkC,aAAa,EACb5B,QAAAA,EACA6B,OAAO,EACPC,iBAAiB,EAEjBxC,SAGKyC,EAAAA,KAAAC,WAAA,CAAA1C,SAAA,CAAc,UAAdI,GACG+B,EAAAA,IAAC,OAAA,CACGvB,IAAKH,EAAKkC,eACVC,QAAM,EAGL5C,SAAAA,GAFI,GAAGe,aAKfI,GACGgB,EAAAA,IAAC,OAAK,CAAApC,UAAU,MACZC,SAAAyC,EAAAA,KAAC,OAAA,CAEG7B,IAAAA,EACA,iBAAgBL,EAChB,cAAa,kBACb,aAAYuB,EACZ,sBAAqBD,EACrB9B,UAAW8C,EAAAA,KACP,sBACA9C,MAEAO,EAAiB,IACdJ,EACH4C,GAAI/B,IAERgC,MAAO,IACAvC,KACAa,GAGNrB,SAAA,CAAAA,EACDmC,EAAAA,IAACa,EAAAA,cAAA,CACGtC,QAAAA,EACAE,IAAKP,EACL4C,MAAO,GACPC,OAAQ,GACRC,KAAK,8BAzBJpC,IAFc,GAAGA,mBAoCtD"}

package/build/cjs/components/tooltip/TooltipContent.d.cts

@@ -1,2 +1,4 @@
 import { default as React } from 'react';
-export declare const TooltipContent: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TooltipContent: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLDivElement> & {
+    "data-ispopup"?: boolean | undefined;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/build/es/components/accordion/AccordionItem.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{useState as i}from"react";import{useAnimatedDetails as r}from"../../hooks/useAnimatedDetails/useAnimatedDetails.js";import{ArrowVerticalAnimated as o}from"../icon/icons/animated/ArrowVerticalAnimated.js";const n=({children:n,title:s,className:c,startExpanded:m=!1,onClick:d,id:l,...j})=>{const[p,k]=i(m),[_]=i((()=>m)),{detailsRef:f,summaryRef:u,contentRef:h,onSummaryClick:A}=r({onOpenChange:(e,t)=>{k(e),d&&d(t,e)},isExpanded:_});return e("details",{"data-testid":"jkl-accordion-item",...j,className:a("jkl-accordion-item",c),ref:f,id:l,children:[e("summary",{"data-testid":"jkl-accordion-item__title",className:"jkl-accordion-item__title",onClick:A,ref:u,children:[s,t(o,{variant:"inherit",className:"jkl-accordion-item__arrow",pointingDown:!p,bold:p})]}),t("div",{"data-testid":"jkl-accordion-item__content-wrapper",className:"jkl-accordion-item__content-wrapper",ref:h,children:t("div",{className:"jkl-accordion-item__content",children:n})})]})};export{n as AccordionItem};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{useState as i}from"react";import{useAnimatedDetails as o}from"../../hooks/useAnimatedDetails/useAnimatedDetails.js";import{ArrowVerticalAnimated as r}from"../icon/icons/animated/ArrowVerticalAnimated.js";const s=({children:s,title:c,className:n,startExpanded:m=!1,onClick:d,id:l,...j})=>{const[p,k]=i(m),[_]=i((()=>m)),{detailsRef:f,summaryRef:u,contentRef:A,onSummaryClick:h}=o({onOpenChange:(e,t)=>{k(e),d&&d(t,e)},isExpanded:_});return e("details",{"data-testid":"jkl-accordion-item",...j,className:a("jkl-accordion-item",n),ref:f,id:l,children:[e("summary",{"data-testid":"jkl-accordion-item__title",className:"jkl-accordion-item__title",onClick:h,ref:u,children:[c,t(r,{className:"jkl-accordion-item__arrow",pointingDown:!p,bold:p})]}),t("div",{"data-testid":"jkl-accordion-item__content-wrapper",className:"jkl-accordion-item__content-wrapper",ref:A,children:t("div",{className:"jkl-accordion-item__content",children:s})})]})};export{s as AccordionItem};
 //# sourceMappingURL=AccordionItem.js.map

package/build/es/components/accordion/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","sources":["../../../../src/components/accordion/AccordionItem.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { FC, useState } from \"react\";\nimport { WithChildren } from \"../../core/types.js\";\nimport { useAnimatedDetails } from \"../../hooks/useAnimatedDetails/useAnimatedDetails.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\n\nexport interface AccordionItemProps extends WithChildren {\n    title: string;\n    startExpanded?: boolean;\n    className?: string;\n    onClick?: (e: React.MouseEvent, isOpen: boolean) => void;\n    id?: string;\n}\n\n/**\n * @deprecated Denne komponenten bør ikke brukes lenger, og vil ikke bli oppdatert.\n * Bruk heller komponenten `Expandable.Content`.\n */\nexport const AccordionItem: FC<AccordionItemProps> = ({\n    children,\n    title,\n    className,\n    startExpanded = false,\n    onClick,\n    id,\n    ...rest\n}) => {\n    const [isOpen, setIsOpen] = useState(startExpanded);\n    const [expandOnMount] = useState(() => startExpanded);\n\n    const { detailsRef, summaryRef, contentRef, onSummaryClick } =\n        useAnimatedDetails({\n            onOpenChange: (open, e) => {\n                setIsOpen(open);\n                if (onClick) {\n                    onClick(e, open);\n                }\n            },\n            isExpanded: expandOnMount,\n        });\n\n    return (\n        <details\n            data-testid=\"jkl-accordion-item\"\n            {...rest}\n            className={clsx(\"jkl-accordion-item\", className)}\n            ref={detailsRef}\n            id={id}\n        >\n            <summary\n                data-testid=\"jkl-accordion-item__title\"\n                className=\"jkl-accordion-item__title\"\n                onClick={onSummaryClick}\n                ref={summaryRef}\n            >\n                {title}\n                <ArrowVerticalAnimated\n                    variant=\"inherit\"\n                    className=\"jkl-accordion-item__arrow\"\n                    pointingDown={!isOpen}\n                    bold={isOpen}\n                />\n            </summary>\n            <div\n                data-testid=\"jkl-accordion-item__content-wrapper\"\n                className=\"jkl-accordion-item__content-wrapper\"\n                ref={contentRef}\n            >\n                <div className=\"jkl-accordion-item__content\">{children}</div>\n            </div>\n        </details>\n    );\n};\n"],"names":["AccordionItem","children","title","className","startExpanded","onClick","id","rest","isOpen","setIsOpen","useState","expandOnMount","detailsRef","summaryRef","contentRef","onSummaryClick","useAnimatedDetails","onOpenChange","open","e","isExpanded","jsxs","clsx","ref","jsx","ArrowVerticalAnimated","variant","pointingDown","bold"],"mappings":"mTAkBO,MAAMA,EAAwC,EACjDC,SAAAA,EACAC,MAAAA,EACAC,UAAAA,EACAC,cAAAA,GAAgB,EAChBC,QAAAA,EACAC,GAAAA,KACGC,MAEG,MAACC,EAAQC,GAAaC,EAASN,IAC9BO,GAAiBD,GAAS,IAAMN,KAE/BQ,WAAAA,EAAYC,WAAAA,EAAYC,WAAAA,EAAYC,eAAAA,GACxCC,EAAmB,CACfC,aAAc,CAACC,EAAMC,KACjBV,EAAUS,GACNb,GACAA,EAAQc,EAAGD,EAAI,EAGvBE,WAAYT,IAIhB,OAAAU,EAAC,UAAA,CACG,cAAY,wBACRd,EACJJ,UAAWmB,EAAK,qBAAsBnB,GACtCoB,IAAKX,EACLN,GAAAA,EAEAL,SAAA,CAAAoB,EAAC,UAAA,CACG,cAAY,4BACZlB,UAAU,4BACVE,QAASU,EACTQ,IAAKV,EAEJZ,SAAA,CAAAC,EACDsB,EAACC,EAAA,CACGC,QAAQ,UACRvB,UAAU,4BACVwB,cAAenB,EACfoB,KAAMpB,OAGdgB,EAAC,MAAA,CACG,cAAY,sCACZrB,UAAU,sCACVoB,IAAKT,EAELb,SAACuB,EAAA,MAAA,CAAIrB,UAAU,8BAA+BF,SAAAA,QAClD"}
+{"version":3,"file":"AccordionItem.js","sources":["../../../../src/components/accordion/AccordionItem.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { FC, useState } from \"react\";\nimport { WithChildren } from \"../../core/types.js\";\nimport { useAnimatedDetails } from \"../../hooks/useAnimatedDetails/useAnimatedDetails.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\n\nexport interface AccordionItemProps extends WithChildren {\n    title: string;\n    startExpanded?: boolean;\n    className?: string;\n    onClick?: (e: React.MouseEvent, isOpen: boolean) => void;\n    id?: string;\n}\n\n/**\n * @deprecated Denne komponenten bør ikke brukes lenger, og vil ikke bli oppdatert.\n * Bruk heller komponenten `Expandable.Content`.\n */\nexport const AccordionItem: FC<AccordionItemProps> = ({\n    children,\n    title,\n    className,\n    startExpanded = false,\n    onClick,\n    id,\n    ...rest\n}) => {\n    const [isOpen, setIsOpen] = useState(startExpanded);\n    const [expandOnMount] = useState(() => startExpanded);\n\n    const { detailsRef, summaryRef, contentRef, onSummaryClick } =\n        useAnimatedDetails({\n            onOpenChange: (open, e) => {\n                setIsOpen(open);\n                if (onClick) {\n                    onClick(e, open);\n                }\n            },\n            isExpanded: expandOnMount,\n        });\n\n    return (\n        <details\n            data-testid=\"jkl-accordion-item\"\n            {...rest}\n            className={clsx(\"jkl-accordion-item\", className)}\n            ref={detailsRef}\n            id={id}\n        >\n            <summary\n                data-testid=\"jkl-accordion-item__title\"\n                className=\"jkl-accordion-item__title\"\n                onClick={onSummaryClick}\n                ref={summaryRef}\n            >\n                {title}\n                <ArrowVerticalAnimated\n                    className=\"jkl-accordion-item__arrow\"\n                    pointingDown={!isOpen}\n                    bold={isOpen}\n                />\n            </summary>\n            <div\n                data-testid=\"jkl-accordion-item__content-wrapper\"\n                className=\"jkl-accordion-item__content-wrapper\"\n                ref={contentRef}\n            >\n                <div className=\"jkl-accordion-item__content\">{children}</div>\n            </div>\n        </details>\n    );\n};\n"],"names":["AccordionItem","children","title","className","startExpanded","onClick","id","rest","isOpen","setIsOpen","useState","expandOnMount","detailsRef","summaryRef","contentRef","onSummaryClick","useAnimatedDetails","onOpenChange","open","e","isExpanded","jsxs","clsx","ref","jsx","ArrowVerticalAnimated","pointingDown","bold"],"mappings":"mTAkBO,MAAMA,EAAwC,EACjDC,SAAAA,EACAC,MAAAA,EACAC,UAAAA,EACAC,cAAAA,GAAgB,EAChBC,QAAAA,EACAC,GAAAA,KACGC,MAEG,MAACC,EAAQC,GAAaC,EAASN,IAC9BO,GAAiBD,GAAS,IAAMN,KAE/BQ,WAAAA,EAAYC,WAAAA,EAAYC,WAAAA,EAAYC,eAAAA,GACxCC,EAAmB,CACfC,aAAc,CAACC,EAAMC,KACjBV,EAAUS,GACNb,GACAA,EAAQc,EAAGD,EAAI,EAGvBE,WAAYT,IAIhB,OAAAU,EAAC,UAAA,CACG,cAAY,wBACRd,EACJJ,UAAWmB,EAAK,qBAAsBnB,GACtCoB,IAAKX,EACLN,GAAAA,EAEAL,SAAA,CAAAoB,EAAC,UAAA,CACG,cAAY,4BACZlB,UAAU,4BACVE,QAASU,EACTQ,IAAKV,EAEJZ,SAAA,CAAAC,EACDsB,EAACC,EAAA,CACGtB,UAAU,4BACVuB,cAAelB,EACfmB,KAAMnB,OAGdgB,EAAC,MAAA,CACG,cAAY,sCACZrB,UAAU,sCACVoB,IAAKT,EAELb,SAACuB,EAAA,MAAA,CAAIrB,UAAU,8BAA+BF,SAAAA,QAClD"}

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

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