npm - @fremtind/jokul - Versions diffs - 5.0.4 → 5.1.0 - Mend

@fremtind/jokul 5.0.4 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (146) hide show

package/build/cjs/components/combobox/Combobox.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../../clsx-E3yX_9sL.cjs"),t=require("react"),a=require("../../hooks/useAnimatedHeight/useAnimatedHeight.cjs"),n=require("../../hooks/useId/useId.cjs"),r=require("../../hooks/useListNavigation/useListNavigation.cjs"),l=require("../chip/Chip.cjs"),s=require("../icon-button/IconButton.cjs"),i=require("../icon/icons/CheckIcon.cjs"),c=require("../icon/icons/animated/ArrowVerticalAnimated.cjs"),u=require("../input-group/InputGroup.cjs"),p=require("../tooltip/Tooltip.cjs"),d=require("../tooltip/TooltipContent.cjs"),b=require("../tooltip/TooltipTrigger.cjs");function m(e){return"string"==typeof e?{value:e,label:e}:e}const x=x=>{const{"data-size":k,id:j,placeholder:v,items:f,onChange:h,onFocus:g,onBlur:_,value:y,label:C,noMatchingOption:w,labelProps:q,helpLabel:N,errorLabel:$,width:L,name:T,className:S,invalid:I,description:P,hasTagHover:B}=x,D=n.useId(j||"jkl-combobox",{generateSuffix:!j}),E=`${D}_label`,A=`${D}_button`,F=`${D}_search-input`,[M,O]=t.useState(y||[]),[K,H]=t.useState(!1),[R,V]=t.useState(""),[z,G]=t.useState(!1),[U,J]=t.useState(!1),Q=t.useRef(null),W=t.useRef(null),X=t.useRef(!1);t.useEffect(()=>{V(""),K&&Q.current&&Q.current.focus()},[K]),t.useEffect(()=>{O(e=>y||e)},[y]);const Y=e=>!!M&&M.some(o=>o.value===e.value),Z=t.useCallback(e=>M.filter(o=>o.value!==e),[M]),ee=t.useCallback((e,o)=>{const t=Z(o);O(t),h({type:"change",target:{name:T,value:o,selectedOptions:t}}),e.stopPropagation(),0===t.length&&J(!1)},[Z,h,T]),oe=t.useCallback(e=>{let o;if(M.some(o=>o.value===e))o=Z(e);else{const t=f.find(o=>o.value===e);o=[...M,t]}Q.current?.focus(),O(o),h({type:"change",target:{name:T,value:e,selectedOptions:o}})},[M,h,T,Z,f]),te=e=>{Q.current?.focus(),H(!0),V(e.target.value)},ae=t.useMemo(()=>{if(!R)return f;const e=f.filter(e=>e.label.toLowerCase().indexOf(R.toLowerCase())>=0);return G(0===e.length),e},[R,f]),[ne,re]=t.useState(ae[0]?.value?`${D}-${ae[0]?.value}`:void 0),le=!K;t.useEffect(()=>{const e=e=>{"Escape"===e.key&&K&&H(!1)};return typeof window<"u"&&window.addEventListener("keydown",e),()=>{typeof window<"u"&&K&&window.removeEventListener("keydown",e)}},[K]);const se=t.useCallback(e=>{e?Q.current&&Q.current.focus():X.current&&W.current&&W.current.focus()},[]),ie=t.useCallback(()=>{X.current||(g&&g({type:"change",target:{name:T,value:M?.[0].value||"",selectedOptions:M}}),X.current=!0,H(!0))},[g,M,T]),[ce]=a.useAnimatedHeight(K,{onFirstVisible:se,onTransitionEnd:se});r.useListNavigation({ref:ce});const ue=t.useRef(null),pe=t.useCallback(e=>{ue.current?.contains(e.relatedTarget)||(V(""),_&&(_({type:"blur",target:{name:T,value:M?.[0]?.value||"",selectedOptions:M}}),W.current?.dispatchEvent(new Event("focusout",{bubbles:!0}))),X.current=!1,H(!1))},[_,T,M]),de=t.useCallback(e=>{e.target.focus({preventScroll:!0})},[]),be=t.useCallback(e=>{if("ArrowDown"===e.key){e.preventDefault(),e.stopPropagation();const o=ce.current;o&&o.querySelector('[role="option"]')?.focus()}else"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),H(!1));if(e.metaKey&&"a"===e.key||e.ctrlKey&&"a"===e.key){e.preventDefault(),e.stopPropagation();const o=M.map(e=>({...e,isMarked:!0}));J(!0),O(o)}else if("Backspace"===e.key)if(e.stopPropagation(),J(!1),M.some(e=>e.isMarked)){const e=M.filter(e=>!e.isMarked);O(e),V("")}else M.length>0&&""===R&&ee(e,M[M.length-1].value)},[M,R,ce,ee]),me=t.useCallback(e=>{if("Tab"===e.key)Q.current&&(e.preventDefault(),e.stopPropagation(),e.shiftKey||H(!1),Q.current.focus());else if("ArrowUp"===e.key&&ce.current&&Q.current){const o=ce.current.querySelector('[role="option"]:not([hidden])');e.currentTarget.id===o?.id&&Q.current&&Q.current.focus()}},[ce]),xe=M.length>=1,ke=t.useCallback(o=>e.jsx(l.Chip,{"data-testid":"jkl-chip","aria-label":`Fjern ${o.tagLabel}`,className:`jkl-combobox__selected-option ${U&&"jkl-combobox__selected-option--marked"}`,variant:"input",onClick:e=>{Q.current&&Q.current.focus(),ee(e,o.value)},onBlur:pe,children:o.tagLabel?o.tagLabel:o.label},o.value),[pe,ee,U]);return e.jsx(u.InputGroup,{label:C,id:F,ref:ue,"data-testid":"jkl-combobox","data-size":k,className:o.clsx("jkl-combobox",S,{"jkl-combobox--invalid":!!$||I,"jkl-combobox--menu-open":K,"jkl-combobox--menu-closed":!K&&xe}),labelProps:{id:E,...q},helpLabel:N,errorLabel:$,description:P,render:t=>e.jsxs("div",{className:o.clsx("jkl-combobox__wrapper",{"jkl-combobox__wrapper--active-value":xe}),style:{width:L},tabIndex:-1,onFocus:ie,onBlur:pe,children:[e.jsxs("div",{className:"jkl-combobox__chips","data-testid":"jkl-combobox__chips",children:[M.map(m).map(o=>B?e.jsxs(p.Tooltip,{children:[e.jsx(b.TooltipTrigger,{children:ke(o)}),e.jsx(d.TooltipContent,{children:o.label})]},o.value):ke(o)),e.jsx("input",{...t,className:"jkl-combobox__search-input",onChange:te,"data-testid":"jkl-combobox__search-input",onFocus:ie,onBlur:pe,onKeyDown:be,value:R,ref:Q,"aria-controls":D,role:"combobox","aria-autocomplete":"list","aria-expanded":K,placeholder:M.length>0?"":v,autoComplete:"off"})]}),e.jsxs("div",{className:"jkl-combobox__menu",role:"listbox",ref:ce,id:D,"aria-labelledby":E,"aria-multiselectable":"true","aria-activedescendant":ne,onFocus:ie,onBlur:pe,tabIndex:-1,children:[ae.map((o,t)=>e.jsxs("button",{type:"button",id:`${D}__${o.value}`,"aria-selected":Y(o),role:"option",value:o.value,onBlur:pe,className:`jkl-combobox__option ${Y(o)&&"jkl-combobox__option--selected"}`,"data-testid":"jkl-combobox__option","data-testautoid":`jkl-combobox__option-${t}`,onFocus:ie,onKeyDown:me,onClick:e=>{re(`${D}__${o.value}`),e.stopPropagation(),oe(o.value),V("")},onMouseOver:de,children:[o.description?e.jsxs("span",{children:[o.label,e.jsx("span",{className:"jkl-combobox__option-description",children:o.description})]}):o.label,Y(o)?e.jsxs("span",{children:[e.jsx(i.CheckIcon,{})," "]}):null]},`${D}-${o.value}`)),z&&e.jsx("div",{className:"jkl-combobox__no-option",children:w})]}),e.jsx(s.IconButton,{id:A,onFocus:ie,onBlur:pe,className:"jkl-text-input-action-button","data-testid":"jkl-combobox__button","aria-label":"Åpne meny","aria-expanded":K,"aria-controls":D,onClick:()=>H(e=>!e),onMouseDown:e=>{e.preventDefault(),W.current?.focus()},children:e.jsx(c.ArrowVerticalAnimated,{pointingDown:le})})]})})};x.displayName="Combobox",exports.Combobox=x,exports.getComboboxValuePair=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../../clsx-E3yX_9sL.cjs"),t=require("react"),a=require("../../hooks/useAnimatedHeight/useAnimatedHeight.cjs"),n=require("../../hooks/useId/useId.cjs"),r=require("../../hooks/useListNavigation/useListNavigation.cjs"),l=require("../chip/Chip.cjs"),s=require("../icon-button/IconButton.cjs"),i=require("../icon/icons/CheckIcon.cjs"),c=require("../icon/icons/animated/ArrowVerticalAnimated.cjs"),u=require("../input-group/InputGroup.cjs"),p=require("../tooltip/Tooltip.cjs"),d=require("../tooltip/TooltipContent.cjs"),b=require("../tooltip/TooltipTrigger.cjs");function m(e){return"string"==typeof e?{value:e,label:e}:e}const x=x=>{const{"data-size":k,id:j,placeholder:v,items:f,onChange:h,onFocus:g,onBlur:_,value:y,label:C,noMatchingOption:w,labelProps:q,helpLabel:N,errorLabel:$,width:L,name:T,className:S,invalid:I,description:P,hasTagHover:B}=x,D=n.useId(j||"jkl-combobox",{generateSuffix:!j}),E=`${D}_label`,A=`${D}_button`,F=`${D}_search-input`,[M,O]=t.useState(y||[]),[K,H]=t.useState(!1),[R,V]=t.useState(""),[z,G]=t.useState(!1),[U,J]=t.useState(!1),Q=t.useRef(null),W=t.useRef(null),X=t.useRef(!1);t.useEffect(()=>{V(""),K&&Q.current&&Q.current.focus()},[K]),t.useEffect(()=>{O(e=>y||e)},[y]);const Y=e=>!!M&&M.some(o=>o.value===e.value),Z=t.useCallback(e=>M.filter(o=>o.value!==e),[M]),ee=t.useCallback((e,o)=>{const t=Z(o);O(t),h({type:"change",target:{name:T,value:o,selectedOptions:t}}),e.stopPropagation(),0===t.length&&J(!1)},[Z,h,T]),oe=t.useCallback(e=>{let o;if(M.some(o=>o.value===e))o=Z(e);else{const t=f.find(o=>o.value===e);o=[...M,t]}Q.current?.focus(),O(o),h({type:"change",target:{name:T,value:e,selectedOptions:o}})},[M,h,T,Z,f]),te=e=>{Q.current?.focus(),H(!0),V(e.target.value)},ae=t.useMemo(()=>{if(!R)return f;const e=f.filter(e=>e.label.toLowerCase().indexOf(R.toLowerCase())>=0);return G(0===e.length),e},[R,f]),[ne,re]=t.useState(ae[0]?.value?`${D}-${ae[0]?.value}`:void 0),le=!K;t.useEffect(()=>{const e=e=>{"Escape"===e.key&&K&&H(!1)};return typeof window<"u"&&window.addEventListener("keydown",e),()=>{typeof window<"u"&&K&&window.removeEventListener("keydown",e)}},[K]);const se=t.useCallback(e=>{e?Q.current&&Q.current.focus():X.current&&W.current&&W.current.focus()},[]),ie=t.useCallback(()=>{X.current||(g&&g({type:"change",target:{name:T,value:M?.[0].value||"",selectedOptions:M}}),X.current=!0,H(!0))},[g,M,T]),[ce]=a.useAnimatedHeight(K,{onFirstVisible:se,onTransitionEnd:se});r.useListNavigation({ref:ce});const ue=t.useRef(null),pe=t.useCallback(e=>{ue.current?.contains(e.relatedTarget)||(V(""),_&&(_({type:"blur",target:{name:T,value:M?.[0]?.value||"",selectedOptions:M}}),W.current?.dispatchEvent(new Event("focusout",{bubbles:!0}))),X.current=!1,H(!1))},[_,T,M]),de=t.useCallback(e=>{e.target.focus({preventScroll:!0})},[]),be=t.useCallback(e=>{if("ArrowDown"===e.key){e.preventDefault(),e.stopPropagation();const o=ce.current;o&&o.querySelector('[role="option"]')?.focus()}else"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),H(!1));if(e.metaKey&&"a"===e.key||e.ctrlKey&&"a"===e.key){e.preventDefault(),e.stopPropagation();const o=M.map(e=>({...e,isMarked:!0}));J(!0),O(o)}else if("Backspace"===e.key)if(e.stopPropagation(),J(!1),M.some(e=>e.isMarked)){const e=M.filter(e=>!e.isMarked);O(e),V("")}else M.length>0&&""===R&&ee(e,M[M.length-1].value)},[M,R,ce,ee]),me=t.useCallback(e=>{if("Tab"===e.key)Q.current&&(e.preventDefault(),e.stopPropagation(),e.shiftKey||H(!1),Q.current.focus());else if("ArrowUp"===e.key&&ce.current&&Q.current){const o=ce.current.querySelector('[role="option"]:not([hidden])');e.currentTarget.id===o?.id&&Q.current&&Q.current.focus()}},[ce]),xe=M.length>=1,ke=t.useCallback(o=>e.jsx(l.Chip,{"data-testid":"jkl-chip","aria-label":`Fjern ${o.tagLabel}`,className:`jkl-combobox__selected-option ${U&&"jkl-combobox__selected-option--marked"}`,variant:"input",onClick:e=>{Q.current&&Q.current.focus(),ee(e,o.value)},onBlur:pe,children:o.tagLabel?o.tagLabel:o.label},o.value),[pe,ee,U]);return e.jsx(u.InputGroup,{label:C,id:F,ref:ue,"data-testid":"jkl-combobox","data-size":k,className:o.clsx("jkl-combobox",S,{"jkl-combobox--invalid":!!$||I,"jkl-combobox--menu-open":K,"jkl-combobox--menu-closed":!K&&xe}),labelProps:{id:E,...q},helpLabel:N,errorLabel:$,description:P,render:t=>e.jsxs("div",{className:o.clsx("jkl-combobox__wrapper",{"jkl-combobox__wrapper--active-value":xe}),style:{width:L},tabIndex:-1,onFocus:ie,onBlur:pe,"data-invalid":!!$||I,children:[e.jsxs("div",{className:"jkl-combobox__chips","data-testid":"jkl-combobox__chips",children:[M.map(m).map(o=>B?e.jsxs(p.Tooltip,{children:[e.jsx(b.TooltipTrigger,{children:ke(o)}),e.jsx(d.TooltipContent,{children:o.label})]},o.value):ke(o)),e.jsx("input",{...t,className:"jkl-combobox__search-input",onChange:te,"data-testid":"jkl-combobox__search-input",onFocus:ie,onBlur:pe,onKeyDown:be,value:R,ref:Q,"aria-controls":D,role:"combobox","aria-autocomplete":"list","aria-expanded":K,placeholder:M.length>0?"":v,autoComplete:"off"})]}),e.jsxs("div",{className:"jkl-combobox__menu",role:"listbox",ref:ce,id:D,"aria-labelledby":E,"aria-multiselectable":"true","aria-activedescendant":ne,onFocus:ie,onBlur:pe,tabIndex:-1,children:[ae.map((o,t)=>e.jsxs("button",{type:"button",id:`${D}__${o.value}`,"aria-selected":Y(o),role:"option",value:o.value,onBlur:pe,className:`jkl-combobox__option ${Y(o)&&"jkl-combobox__option--selected"}`,"data-testid":"jkl-combobox__option","data-testautoid":`jkl-combobox__option-${t}`,onFocus:ie,onKeyDown:me,onClick:e=>{re(`${D}__${o.value}`),e.stopPropagation(),oe(o.value),V("")},onMouseOver:de,children:[o.description?e.jsxs("span",{children:[o.label,e.jsx("span",{className:"jkl-combobox__option-description",children:o.description})]}):o.label,Y(o)?e.jsxs("span",{children:[e.jsx(i.CheckIcon,{})," "]}):null]},`${D}-${o.value}`)),z&&e.jsx("div",{className:"jkl-combobox__no-option",children:w})]}),e.jsx(s.IconButton,{id:A,onFocus:ie,onBlur:pe,className:"jkl-text-input-action-button","data-testid":"jkl-combobox__button","aria-label":"Åpne meny","aria-expanded":K,"aria-controls":D,onClick:()=>H(e=>!e),onMouseDown:e=>{e.preventDefault(),W.current?.focus()},children:e.jsx(c.ArrowVerticalAnimated,{pointingDown:le})})]})})};x.displayName="Combobox",exports.Combobox=x,exports.getComboboxValuePair=m;
 //# sourceMappingURL=Combobox.cjs.map

package/build/cjs/components/combobox/Combobox.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Combobox.cjs","sources":["../../../../src/components/combobox/Combobox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type FC,\n type FocusEvent,\n type KeyboardEvent,\n type MouseEvent,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useListNavigation } from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport type { ValuePair } from \"../../utilities/valuePair.js\";\nimport { Chip } from \"../chip/Chip.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CheckIcon } from \"../icon/icons/CheckIcon.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport { Tooltip } from \"../tooltip/Tooltip.js\";\nimport { TooltipContent } from \"../tooltip/TooltipContent.js\";\nimport { TooltipTrigger } from \"../tooltip/TooltipTrigger.js\";\nimport type { ComboboxProps, ComboboxValuePair } from \"./types.js\";\n\nexport function getComboboxValuePair(\n item: string \| ComboboxValuePair,\n): ComboboxValuePair {\n return typeof item === \"string\" ? { value: item, label: item } : item;\n}\n\nexport const Combobox: FC<ComboboxProps> = (props) => {\n const {\n \"data-size\": dataSize,\n id,\n placeholder,\n items,\n onChange,\n onFocus,\n onBlur,\n value,\n label,\n noMatchingOption,\n labelProps,\n helpLabel,\n errorLabel,\n width,\n name,\n className,\n invalid,\n description,\n hasTagHover,\n } = props;\n const listId = useId(id \|\| \"jkl-combobox\", { generateSuffix: !id });\n const labelId = `${listId}_label`;\n const buttonId = `${listId}_button`;\n const inputId = `${listId}_search-input`;\n\n const [selectedValue, setSelectedValue] = useState<\n Array<ComboboxValuePair>\n >(value \|\| []);\n const [showMenu, setShowMenu] = useState<boolean>(false);\n const [searchValue, setSearchValue] = useState<string>(\"\");\n const [noResults, setNoResults] = useState(false);\n const [marked, setMarked] = useState<boolean>(false);\n\n const searchRef = useRef<HTMLInputElement>(null);\n const inputRef = useRef<HTMLDivElement>(null);\n const focusInsideRef = useRef(false);\n\n useEffect(() => {\n setSearchValue(\"\");\n if (showMenu && searchRef.current) {\n searchRef.current.focus();\n }\n }, [showMenu]);\n\n useEffect(() => {\n setSelectedValue((prev) => value \|\| prev);\n }, [value]);\n\n // Funksjon for å stile valgt element\n const isSelected = (option: ValuePair) => {\n if (!selectedValue) {\n return false;\n }\n\n return selectedValue.some((value) => value.value === option.value);\n };\n\n // Fjerne ett eller flere valg\n const removeOption = useCallback(\n (option: string) => {\n return selectedValue.filter((value) => value.value !== option);\n },\n [selectedValue],\n );\n\n const onTagRemove = useCallback(\n (\n e:\n \| React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent>\n \| React.KeyboardEvent<HTMLInputElement>,\n option: string,\n ) => {\n const newValue = removeOption(option);\n setSelectedValue(newValue);\n onChange({\n type: \"change\",\n target: { name, value: option, selectedOptions: newValue },\n });\n e.stopPropagation();\n\n if (newValue.length === 0) {\n setMarked(false);\n }\n },\n [removeOption, onChange, name],\n );\n\n // Håndtere valgt verdi i listen\n const onItemClick = useCallback(\n (option: string) => {\n let newValue: Array<ValuePair>;\n\n if (selectedValue.some((value) => value.value === option)) {\n newValue = removeOption(option);\n } else {\n const item = items.find((i) => i.value === option);\n newValue = [...selectedValue, item as ValuePair];\n }\n searchRef.current?.focus();\n setSelectedValue(newValue);\n onChange({\n type: \"change\",\n target: { name, value: option, selectedOptions: newValue },\n });\n },\n [selectedValue, onChange, name, removeOption, items],\n );\n\n // Funksjon for søk\n const onSearch = (e: {\n target: { value: React.SetStateAction<string> };\n }) => {\n searchRef.current?.focus();\n setShowMenu(true);\n setSearchValue(e.target.value);\n };\n\n const options = useMemo(() => {\n if (!searchValue) {\n return items;\n }\n\n const filteredOptions = items.filter(\n (option) =>\n option.label.toLowerCase().indexOf(searchValue.toLowerCase()) >=\n 0,\n );\n\n setNoResults(filteredOptions.length === 0);\n\n return filteredOptions;\n }, [searchValue, items]);\n\n // Det første elementet i listen skal være aktivt fram til brukeren klikker på noe annet\n const [activeDescendant, setActiveDescendant] = useState<\n string \| undefined\n >(options[0]?.value ? `${listId}-${options[0]?.value}` : undefined);\n\n // Håndtere arrow-state\n const isPointingDown = !showMenu;\n\n // Lukk meny med ESC\n useEffect(() => {\n const handleEscape = (e: globalThis.KeyboardEvent) => {\n if (e.key === \"Escape\" && showMenu) {\n setShowMenu(false);\n }\n };\n if (typeof window !== \"undefined\") {\n window.addEventListener(\"keydown\", handleEscape);\n }\n return () => {\n if (typeof window !== \"undefined\" && showMenu) {\n window.removeEventListener(\"keydown\", handleEscape);\n }\n };\n }, [showMenu]);\n\n // Fokushåndtering\n const handleFocusPlacement = useCallback((isOpen: boolean) => {\n if (isOpen) {\n if (searchRef.current) {\n searchRef.current.focus();\n }\n } else {\n if (focusInsideRef.current && inputRef.current) {\n inputRef.current.focus();\n }\n }\n }, []);\n\n const handleFocus = useCallback(() => {\n if (!focusInsideRef.current) {\n if (onFocus) {\n onFocus({\n type: \"change\",\n target: {\n name,\n value: selectedValue?.[0].value \|\| \"\",\n selectedOptions: selectedValue,\n },\n });\n }\n focusInsideRef.current = true;\n setShowMenu(true);\n }\n }, [onFocus, selectedValue, name]);\n\n const [dropdownRef] = useAnimatedHeight<HTMLDivElement>(showMenu, {\n onFirstVisible: handleFocusPlacement,\n onTransitionEnd: handleFocusPlacement,\n });\n\n useListNavigation({ ref: dropdownRef });\n\n const componentRootElementRef = useRef<HTMLDivElement>(null);\n\n const handleBlur = useCallback(\n (\n e: FocusEvent<\n HTMLDivElement \| HTMLInputElement \| HTMLButtonElement\n >,\n ) => {\n const componentRootElement = componentRootElementRef.current;\n const nextFocusIsInsideComponent = componentRootElement?.contains(\n e.relatedTarget as Node,\n );\n if (!nextFocusIsInsideComponent) {\n setSearchValue(\"\");\n\n if (onBlur) {\n onBlur({\n type: \"blur\",\n target: {\n name,\n value: selectedValue?.[0]?.value \|\| \"\",\n selectedOptions: selectedValue,\n },\n });\n inputRef.current?.dispatchEvent(\n new Event(\"focusout\", { bubbles: true }),\n );\n }\n focusInsideRef.current = false;\n setShowMenu(false);\n }\n },\n [onBlur, name, selectedValue],\n );\n\n const handleMouseOver = useCallback((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 // Tastaturnavigasjon\n const handleSearchOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n e.stopPropagation();\n const listElement = dropdownRef.current;\n if (listElement) {\n listElement\n .querySelector<HTMLButtonElement>('[role=\"option\"]')\n ?.focus();\n }\n } else if (e.key === \"Escape\") {\n e.preventDefault();\n e.stopPropagation();\n setShowMenu(false);\n }\n\n if ((e.metaKey && e.key === \"a\") \|\| (e.ctrlKey && e.key === \"a\")) {\n e.preventDefault();\n e.stopPropagation();\n const updatedSelectedValue = selectedValue.map((item) => ({\n ...item,\n isMarked: true,\n }));\n setMarked(true);\n setSelectedValue(updatedSelectedValue);\n } else if (e.key === \"Backspace\") {\n e.stopPropagation();\n setMarked(false);\n\n // Sjekk om selectedValue er markert\n const selectedValueIsMarked = selectedValue.some(\n (item) => item.isMarked,\n );\n\n if (selectedValueIsMarked) {\n const updatedSelectedValue = selectedValue.filter(\n (item) => !item.isMarked,\n );\n setSelectedValue(updatedSelectedValue);\n setSearchValue(\"\");\n } else if (selectedValue.length > 0 && searchValue === \"\") {\n // Hvis ingen items er markert, fjern siste valgte item\n onTagRemove(\n e,\n selectedValue[selectedValue.length - 1].value,\n );\n }\n }\n },\n [selectedValue, searchValue, dropdownRef, onTagRemove],\n );\n\n const handleOptionOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === \"Tab\") {\n if (searchRef.current) {\n e.preventDefault();\n e.stopPropagation();\n\n if (e.shiftKey) {\n searchRef.current.focus();\n } else {\n setShowMenu(false);\n searchRef.current.focus();\n }\n }\n } else if (e.key === \"ArrowUp\") {\n if (dropdownRef.current && searchRef.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 searchRef.current\n ) {\n searchRef.current.focus();\n }\n }\n }\n },\n [dropdownRef],\n );\n\n const hasSelection = selectedValue.length >= 1;\n\n const renderSelectedOption = useCallback(\n (option: ComboboxValuePair) => (\n <Chip\n key={option.value}\n data-testid=\"jkl-chip\"\n aria-label={`Fjern ${option.tagLabel}`}\n className={`jkl-combobox__selected-option ${\n marked && \"jkl-combobox__selected-option--marked\"\n }`}\n variant=\"input\"\n onClick={(e) => {\n if (searchRef.current) {\n searchRef.current.focus();\n }\n onTagRemove(e, option.value);\n }}\n onBlur={handleBlur}\n >\n {option.tagLabel ? option.tagLabel : option.label}\n </Chip>\n ),\n [handleBlur, onTagRemove, marked],\n );\n\n return (\n <InputGroup\n label={label}\n id={inputId}\n ref={componentRootElementRef}\n data-testid=\"jkl-combobox\"\n data-size={dataSize}\n className={clsx(\"jkl-combobox\", className, {\n \"jkl-combobox--invalid\": !!errorLabel \|\| invalid,\n \"jkl-combobox--menu-open\": showMenu,\n \"jkl-combobox--menu-closed\": !showMenu && hasSelection,\n })}\n labelProps={{\n id: labelId,\n ...labelProps,\n }}\n helpLabel={helpLabel}\n errorLabel={errorLabel}\n description={description}\n render={(inputProps) => (\n <div\n className={clsx(\"jkl-combobox__wrapper\", {\n \"jkl-combobox__wrapper--active-value\": hasSelection,\n })}\n style={{ width }}\n tabIndex={-1}\n onFocus={handleFocus}\n onBlur={handleBlur}\n >\n <div\n className=\"jkl-combobox__chips\"\n data-testid=\"jkl-combobox__chips\"\n >\n {selectedValue\n .map(getComboboxValuePair)\n .map((option) => {\n return hasTagHover ? (\n <Tooltip key={option.value}>\n <TooltipTrigger>\n {renderSelectedOption(option)}\n </TooltipTrigger>\n <TooltipContent>\n {option.label}\n </TooltipContent>\n </Tooltip>\n ) : (\n renderSelectedOption(option)\n );\n })}\n <input\n {...inputProps}\n className=\"jkl-combobox__search-input\"\n onChange={onSearch}\n data-testid=\"jkl-combobox__search-input\"\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleSearchOnKeyDown}\n value={searchValue}\n ref={searchRef}\n aria-controls={listId}\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-expanded={showMenu}\n placeholder={\n selectedValue.length > 0 ? \"\" : placeholder\n }\n autoComplete=\"off\"\n />\n </div>\n\n <div\n className=\"jkl-combobox__menu\"\n // biome-ignore lint/a11y/useSemanticElements: Dette er en reimplementering av en liste\n role=\"listbox\"\n ref={dropdownRef}\n id={listId}\n aria-labelledby={labelId}\n aria-multiselectable=\"true\"\n aria-activedescendant={activeDescendant}\n onFocus={handleFocus}\n onBlur={handleBlur}\n tabIndex={-1}\n >\n {options.map((option, i) => (\n <button\n key={`${listId}-${option.value}`}\n type=\"button\"\n id={`${listId}__${option.value}`}\n aria-selected={isSelected(option)}\n // biome-ignore lint/a11y/useSemanticElements: Dette er en reimplementering av en liste\n role=\"option\"\n value={option.value}\n onBlur={handleBlur}\n className={`jkl-combobox__option ${\n isSelected(option) &&\n \"jkl-combobox__option--selected\"\n }`}\n data-testid=\"jkl-combobox__option\"\n data-testautoid={`jkl-combobox__option-${i}`}\n onFocus={handleFocus}\n onKeyDown={handleOptionOnKeyDown}\n onClick={(e) => {\n setActiveDescendant(\n `${listId}__${option.value}`,\n ); // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role#required_javascript_features\n e.stopPropagation();\n onItemClick(option.value);\n setSearchValue(\"\");\n }}\n onMouseOver={handleMouseOver}\n >\n {option.description ? (\n <span>\n {option.label}\n <span className=\"jkl-combobox__option-description\">\n {option.description}\n </span>\n </span>\n ) : (\n option.label\n )}\n {isSelected(option) ? (\n <span>\n <CheckIcon />{\" \"}\n </span>\n ) : null}\n </button>\n ))}\n {noResults && (\n <div className=\"jkl-combobox__no-option\">\n {noMatchingOption}\n </div>\n )}\n </div>\n <IconButton\n id={buttonId}\n onFocus={handleFocus}\n onBlur={handleBlur}\n className=\"jkl-text-input-action-button\"\n data-testid=\"jkl-combobox__button\"\n aria-label=\"Åpne meny\"\n aria-expanded={showMenu}\n aria-controls={listId}\n onClick={() => setShowMenu((previous) => !previous)}\n onMouseDown={(e) => {\n e.preventDefault();\n inputRef.current?.focus();\n }}\n >\n <ArrowVerticalAnimated pointingDown={isPointingDown} />\n </IconButton>\n </div>\n )}\n />\n );\n};\nCombobox.displayName = \"Combobox\";\n"],"names":["getComboboxValuePair","item","value","label","Combobox","props","dataSize","id","placeholder","items","onChange","onFocus","onBlur","noMatchingOption","labelProps","helpLabel","errorLabel","width","name","className","invalid","description","hasTagHover","listId","useId","generateSuffix","labelId","buttonId","inputId","selectedValue","setSelectedValue","useState","showMenu","setShowMenu","searchValue","setSearchValue","noResults","setNoResults","marked","setMarked","searchRef","useRef","inputRef","focusInsideRef","useEffect","current","focus","prev","isSelected","option","some","removeOption","useCallback","filter","onTagRemove","e","newValue","type","target","selectedOptions","stopPropagation","length","onItemClick","find","i","onSearch","options","useMemo","filteredOptions","toLowerCase","indexOf","activeDescendant","setActiveDescendant","isPointingDown","handleEscape","key","window","addEventListener","removeEventListener","handleFocusPlacement","isOpen","handleFocus","dropdownRef","useAnimatedHeight","onFirstVisible","onTransitionEnd","useListNavigation","ref","componentRootElementRef","handleBlur","contains","relatedTarget","dispatchEvent","Event","bubbles","handleMouseOver","preventScroll","handleSearchOnKeyDown","preventDefault","listElement","querySelector","metaKey","ctrlKey","updatedSelectedValue","map","isMarked","handleOptionOnKeyDown","shiftKey","firstVisible","currentTarget","hasSelection","renderSelectedOption","jsx","Chip","tagLabel","variant","onClick","children","InputGroup","clsx","render","inputProps","jsxs","style","tabIndex","Tooltip","TooltipTrigger","TooltipContent","onKeyDown","role","autoComplete","onMouseOver","CheckIcon","IconButton","previous","onMouseDown","ArrowVerticalAnimated","pointingDown","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"Combobox.cjs","sources":["../../../../src/components/combobox/Combobox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type FC,\n type FocusEvent,\n type KeyboardEvent,\n type MouseEvent,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useListNavigation } from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport type { ValuePair } from \"../../utilities/valuePair.js\";\nimport { Chip } from \"../chip/Chip.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CheckIcon } from \"../icon/icons/CheckIcon.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport { Tooltip } from \"../tooltip/Tooltip.js\";\nimport { TooltipContent } from \"../tooltip/TooltipContent.js\";\nimport { TooltipTrigger } from \"../tooltip/TooltipTrigger.js\";\nimport type { ComboboxProps, ComboboxValuePair } from \"./types.js\";\n\nexport function getComboboxValuePair(\n item: string \| ComboboxValuePair,\n): ComboboxValuePair {\n return typeof item === \"string\" ? { value: item, label: item } : item;\n}\n\nexport const Combobox: FC<ComboboxProps> = (props) => {\n const {\n \"data-size\": dataSize,\n id,\n placeholder,\n items,\n onChange,\n onFocus,\n onBlur,\n value,\n label,\n noMatchingOption,\n labelProps,\n helpLabel,\n errorLabel,\n width,\n name,\n className,\n invalid,\n description,\n hasTagHover,\n } = props;\n const listId = useId(id \|\| \"jkl-combobox\", { generateSuffix: !id });\n const labelId = `${listId}_label`;\n const buttonId = `${listId}_button`;\n const inputId = `${listId}_search-input`;\n\n const [selectedValue, setSelectedValue] = useState<\n Array<ComboboxValuePair>\n >(value \|\| []);\n const [showMenu, setShowMenu] = useState<boolean>(false);\n const [searchValue, setSearchValue] = useState<string>(\"\");\n const [noResults, setNoResults] = useState(false);\n const [marked, setMarked] = useState<boolean>(false);\n\n const searchRef = useRef<HTMLInputElement>(null);\n const inputRef = useRef<HTMLDivElement>(null);\n const focusInsideRef = useRef(false);\n\n useEffect(() => {\n setSearchValue(\"\");\n if (showMenu && searchRef.current) {\n searchRef.current.focus();\n }\n }, [showMenu]);\n\n useEffect(() => {\n setSelectedValue((prev) => value \|\| prev);\n }, [value]);\n\n // Funksjon for å stile valgt element\n const isSelected = (option: ValuePair) => {\n if (!selectedValue) {\n return false;\n }\n\n return selectedValue.some((value) => value.value === option.value);\n };\n\n // Fjerne ett eller flere valg\n const removeOption = useCallback(\n (option: string) => {\n return selectedValue.filter((value) => value.value !== option);\n },\n [selectedValue],\n );\n\n const onTagRemove = useCallback(\n (\n e:\n \| React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent>\n \| React.KeyboardEvent<HTMLInputElement>,\n option: string,\n ) => {\n const newValue = removeOption(option);\n setSelectedValue(newValue);\n onChange({\n type: \"change\",\n target: { name, value: option, selectedOptions: newValue },\n });\n e.stopPropagation();\n\n if (newValue.length === 0) {\n setMarked(false);\n }\n },\n [removeOption, onChange, name],\n );\n\n // Håndtere valgt verdi i listen\n const onItemClick = useCallback(\n (option: string) => {\n let newValue: Array<ValuePair>;\n\n if (selectedValue.some((value) => value.value === option)) {\n newValue = removeOption(option);\n } else {\n const item = items.find((i) => i.value === option);\n newValue = [...selectedValue, item as ValuePair];\n }\n searchRef.current?.focus();\n setSelectedValue(newValue);\n onChange({\n type: \"change\",\n target: { name, value: option, selectedOptions: newValue },\n });\n },\n [selectedValue, onChange, name, removeOption, items],\n );\n\n // Funksjon for søk\n const onSearch = (e: {\n target: { value: React.SetStateAction<string> };\n }) => {\n searchRef.current?.focus();\n setShowMenu(true);\n setSearchValue(e.target.value);\n };\n\n const options = useMemo(() => {\n if (!searchValue) {\n return items;\n }\n\n const filteredOptions = items.filter(\n (option) =>\n option.label.toLowerCase().indexOf(searchValue.toLowerCase()) >=\n 0,\n );\n\n setNoResults(filteredOptions.length === 0);\n\n return filteredOptions;\n }, [searchValue, items]);\n\n // Det første elementet i listen skal være aktivt fram til brukeren klikker på noe annet\n const [activeDescendant, setActiveDescendant] = useState<\n string \| undefined\n >(options[0]?.value ? `${listId}-${options[0]?.value}` : undefined);\n\n // Håndtere arrow-state\n const isPointingDown = !showMenu;\n\n // Lukk meny med ESC\n useEffect(() => {\n const handleEscape = (e: globalThis.KeyboardEvent) => {\n if (e.key === \"Escape\" && showMenu) {\n setShowMenu(false);\n }\n };\n if (typeof window !== \"undefined\") {\n window.addEventListener(\"keydown\", handleEscape);\n }\n return () => {\n if (typeof window !== \"undefined\" && showMenu) {\n window.removeEventListener(\"keydown\", handleEscape);\n }\n };\n }, [showMenu]);\n\n // Fokushåndtering\n const handleFocusPlacement = useCallback((isOpen: boolean) => {\n if (isOpen) {\n if (searchRef.current) {\n searchRef.current.focus();\n }\n } else {\n if (focusInsideRef.current && inputRef.current) {\n inputRef.current.focus();\n }\n }\n }, []);\n\n const handleFocus = useCallback(() => {\n if (!focusInsideRef.current) {\n if (onFocus) {\n onFocus({\n type: \"change\",\n target: {\n name,\n value: selectedValue?.[0].value \|\| \"\",\n selectedOptions: selectedValue,\n },\n });\n }\n focusInsideRef.current = true;\n setShowMenu(true);\n }\n }, [onFocus, selectedValue, name]);\n\n const [dropdownRef] = useAnimatedHeight<HTMLDivElement>(showMenu, {\n onFirstVisible: handleFocusPlacement,\n onTransitionEnd: handleFocusPlacement,\n });\n\n useListNavigation({ ref: dropdownRef });\n\n const componentRootElementRef = useRef<HTMLDivElement>(null);\n\n const handleBlur = useCallback(\n (\n e: FocusEvent<\n HTMLDivElement \| HTMLInputElement \| HTMLButtonElement\n >,\n ) => {\n const componentRootElement = componentRootElementRef.current;\n const nextFocusIsInsideComponent = componentRootElement?.contains(\n e.relatedTarget as Node,\n );\n if (!nextFocusIsInsideComponent) {\n setSearchValue(\"\");\n\n if (onBlur) {\n onBlur({\n type: \"blur\",\n target: {\n name,\n value: selectedValue?.[0]?.value \|\| \"\",\n selectedOptions: selectedValue,\n },\n });\n inputRef.current?.dispatchEvent(\n new Event(\"focusout\", { bubbles: true }),\n );\n }\n focusInsideRef.current = false;\n setShowMenu(false);\n }\n },\n [onBlur, name, selectedValue],\n );\n\n const handleMouseOver = useCallback((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 // Tastaturnavigasjon\n const handleSearchOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n e.stopPropagation();\n const listElement = dropdownRef.current;\n if (listElement) {\n listElement\n .querySelector<HTMLButtonElement>('[role=\"option\"]')\n ?.focus();\n }\n } else if (e.key === \"Escape\") {\n e.preventDefault();\n e.stopPropagation();\n setShowMenu(false);\n }\n\n if ((e.metaKey && e.key === \"a\") \|\| (e.ctrlKey && e.key === \"a\")) {\n e.preventDefault();\n e.stopPropagation();\n const updatedSelectedValue = selectedValue.map((item) => ({\n ...item,\n isMarked: true,\n }));\n setMarked(true);\n setSelectedValue(updatedSelectedValue);\n } else if (e.key === \"Backspace\") {\n e.stopPropagation();\n setMarked(false);\n\n // Sjekk om selectedValue er markert\n const selectedValueIsMarked = selectedValue.some(\n (item) => item.isMarked,\n );\n\n if (selectedValueIsMarked) {\n const updatedSelectedValue = selectedValue.filter(\n (item) => !item.isMarked,\n );\n setSelectedValue(updatedSelectedValue);\n setSearchValue(\"\");\n } else if (selectedValue.length > 0 && searchValue === \"\") {\n // Hvis ingen items er markert, fjern siste valgte item\n onTagRemove(\n e,\n selectedValue[selectedValue.length - 1].value,\n );\n }\n }\n },\n [selectedValue, searchValue, dropdownRef, onTagRemove],\n );\n\n const handleOptionOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === \"Tab\") {\n if (searchRef.current) {\n e.preventDefault();\n e.stopPropagation();\n\n if (e.shiftKey) {\n searchRef.current.focus();\n } else {\n setShowMenu(false);\n searchRef.current.focus();\n }\n }\n } else if (e.key === \"ArrowUp\") {\n if (dropdownRef.current && searchRef.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 searchRef.current\n ) {\n searchRef.current.focus();\n }\n }\n }\n },\n [dropdownRef],\n );\n\n const hasSelection = selectedValue.length >= 1;\n\n const renderSelectedOption = useCallback(\n (option: ComboboxValuePair) => (\n <Chip\n key={option.value}\n data-testid=\"jkl-chip\"\n aria-label={`Fjern ${option.tagLabel}`}\n className={`jkl-combobox__selected-option ${\n marked && \"jkl-combobox__selected-option--marked\"\n }`}\n variant=\"input\"\n onClick={(e) => {\n if (searchRef.current) {\n searchRef.current.focus();\n }\n onTagRemove(e, option.value);\n }}\n onBlur={handleBlur}\n >\n {option.tagLabel ? option.tagLabel : option.label}\n </Chip>\n ),\n [handleBlur, onTagRemove, marked],\n );\n\n return (\n <InputGroup\n label={label}\n id={inputId}\n ref={componentRootElementRef}\n data-testid=\"jkl-combobox\"\n data-size={dataSize}\n className={clsx(\"jkl-combobox\", className, {\n \"jkl-combobox--invalid\": !!errorLabel \|\| invalid,\n \"jkl-combobox--menu-open\": showMenu,\n \"jkl-combobox--menu-closed\": !showMenu && hasSelection,\n })}\n labelProps={{\n id: labelId,\n ...labelProps,\n }}\n helpLabel={helpLabel}\n errorLabel={errorLabel}\n description={description}\n render={(inputProps) => (\n <div\n className={clsx(\"jkl-combobox__wrapper\", {\n \"jkl-combobox__wrapper--active-value\": hasSelection,\n })}\n style={{ width }}\n tabIndex={-1}\n onFocus={handleFocus}\n onBlur={handleBlur}\n data-invalid={!!errorLabel \|\| invalid}\n >\n <div\n className=\"jkl-combobox__chips\"\n data-testid=\"jkl-combobox__chips\"\n >\n {selectedValue\n .map(getComboboxValuePair)\n .map((option) => {\n return hasTagHover ? (\n <Tooltip key={option.value}>\n <TooltipTrigger>\n {renderSelectedOption(option)}\n </TooltipTrigger>\n <TooltipContent>\n {option.label}\n </TooltipContent>\n </Tooltip>\n ) : (\n renderSelectedOption(option)\n );\n })}\n <input\n {...inputProps}\n className=\"jkl-combobox__search-input\"\n onChange={onSearch}\n data-testid=\"jkl-combobox__search-input\"\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleSearchOnKeyDown}\n value={searchValue}\n ref={searchRef}\n aria-controls={listId}\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-expanded={showMenu}\n placeholder={\n selectedValue.length > 0 ? \"\" : placeholder\n }\n autoComplete=\"off\"\n />\n </div>\n\n <div\n className=\"jkl-combobox__menu\"\n // biome-ignore lint/a11y/useSemanticElements: Dette er en reimplementering av en liste\n role=\"listbox\"\n ref={dropdownRef}\n id={listId}\n aria-labelledby={labelId}\n aria-multiselectable=\"true\"\n aria-activedescendant={activeDescendant}\n onFocus={handleFocus}\n onBlur={handleBlur}\n tabIndex={-1}\n >\n {options.map((option, i) => (\n <button\n key={`${listId}-${option.value}`}\n type=\"button\"\n id={`${listId}__${option.value}`}\n aria-selected={isSelected(option)}\n // biome-ignore lint/a11y/useSemanticElements: Dette er en reimplementering av en liste\n role=\"option\"\n value={option.value}\n onBlur={handleBlur}\n className={`jkl-combobox__option ${\n isSelected(option) &&\n \"jkl-combobox__option--selected\"\n }`}\n data-testid=\"jkl-combobox__option\"\n data-testautoid={`jkl-combobox__option-${i}`}\n onFocus={handleFocus}\n onKeyDown={handleOptionOnKeyDown}\n onClick={(e) => {\n setActiveDescendant(\n `${listId}__${option.value}`,\n ); // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role#required_javascript_features\n e.stopPropagation();\n onItemClick(option.value);\n setSearchValue(\"\");\n }}\n onMouseOver={handleMouseOver}\n >\n {option.description ? (\n <span>\n {option.label}\n <span className=\"jkl-combobox__option-description\">\n {option.description}\n </span>\n </span>\n ) : (\n option.label\n )}\n {isSelected(option) ? (\n <span>\n <CheckIcon />{\" \"}\n </span>\n ) : null}\n </button>\n ))}\n {noResults && (\n <div className=\"jkl-combobox__no-option\">\n {noMatchingOption}\n </div>\n )}\n </div>\n <IconButton\n id={buttonId}\n onFocus={handleFocus}\n onBlur={handleBlur}\n className=\"jkl-text-input-action-button\"\n data-testid=\"jkl-combobox__button\"\n aria-label=\"Åpne meny\"\n aria-expanded={showMenu}\n aria-controls={listId}\n onClick={() => setShowMenu((previous) => !previous)}\n onMouseDown={(e) => {\n e.preventDefault();\n inputRef.current?.focus();\n }}\n >\n <ArrowVerticalAnimated pointingDown={isPointingDown} />\n </IconButton>\n </div>\n )}\n />\n );\n};\nCombobox.displayName = \"Combobox\";\n"],"names":["getComboboxValuePair","item","value","label","Combobox","props","dataSize","id","placeholder","items","onChange","onFocus","onBlur","noMatchingOption","labelProps","helpLabel","errorLabel","width","name","className","invalid","description","hasTagHover","listId","useId","generateSuffix","labelId","buttonId","inputId","selectedValue","setSelectedValue","useState","showMenu","setShowMenu","searchValue","setSearchValue","noResults","setNoResults","marked","setMarked","searchRef","useRef","inputRef","focusInsideRef","useEffect","current","focus","prev","isSelected","option","some","removeOption","useCallback","filter","onTagRemove","e","newValue","type","target","selectedOptions","stopPropagation","length","onItemClick","find","i","onSearch","options","useMemo","filteredOptions","toLowerCase","indexOf","activeDescendant","setActiveDescendant","isPointingDown","handleEscape","key","window","addEventListener","removeEventListener","handleFocusPlacement","isOpen","handleFocus","dropdownRef","useAnimatedHeight","onFirstVisible","onTransitionEnd","useListNavigation","ref","componentRootElementRef","handleBlur","contains","relatedTarget","dispatchEvent","Event","bubbles","handleMouseOver","preventScroll","handleSearchOnKeyDown","preventDefault","listElement","querySelector","metaKey","ctrlKey","updatedSelectedValue","map","isMarked","handleOptionOnKeyDown","shiftKey","firstVisible","currentTarget","hasSelection","renderSelectedOption","jsx","Chip","tagLabel","variant","onClick","children","InputGroup","clsx","render","inputProps","jsxs","style","tabIndex","Tooltip","TooltipTrigger","TooltipContent","onKeyDown","role","autoComplete","onMouseOver","CheckIcon","IconButton","previous","onMouseDown","ArrowVerticalAnimated","pointingDown","displayName"],"mappings":"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"}

package/build/cjs/components/expander/types.d.cts CHANGED Viewed

@@ -10,7 +10,7 @@ export type ExpandablePanelProps<ElementType extends React.ElementType> = Polymo
 export type ExpandablePanelComponent = {
     Content: ExpandablePanelContentComponent;
     Header: ExpanderComponent;
-} & (<ElementType extends React.ElementType = "div">(props: ExpandablePanelProps<ElementType>) => React.ReactElement | null);
+} & (<ElementType extends React.ElementType = "details">(props: ExpandablePanelProps<ElementType>) => React.ReactElement | null);
 export type ExpanderProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<ElementType, {
     icon?: React.ReactNode;
     open?: boolean;

package/build/cjs/components/help/Help.cjs CHANGED Viewed

@@ -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");require("react");const o=require("../button/Button.cjs"),r=require("../icon/Icon.cjs");exports.Help=({position:i="top",buttonText:s="Hjelp",showButtonText:l=!1,iconPosition:n="left",className:c,children:a,...p})=>e.jsxs("div",{className:t.clsx("jkl-help",c),children:[e.jsx(o.Button,{...p,title:s||p.title,iconPosition:n,variant:"ghost",className:"jkl-help-trigger",icon:e.jsx(r.Icon,{"aria-hidden":"true",children:"help"}),"data-testid":"jkl-help-trigger",popovertarget:`${s}-popover`,style:{anchorName:`${s}-popover`},children:l&&s}),e.jsx("output",{"aria-live":"assertive",children:e.jsx("div",{"data-position":i,popover:"auto",id:`${s}-popover`,className:"jkl-help-popover",children:a})})]});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),r=require("../button/Button.cjs"),i=require("../icon/Icon.cjs");exports.Help=({position:s="top",buttonText:l="Hjelp",showButtonText:n=!1,iconPosition:c="left",className:a,children:p,...u})=>{const d=o.useId();return e.jsxs("div",{className:t.clsx("jkl-help",a),children:[e.jsx(r.Button,{...u,title:l||u.title,iconPosition:c,variant:"ghost",className:"jkl-help-trigger",icon:e.jsx(i.Icon,{"aria-hidden":"true",children:"help"}),"data-testid":"jkl-help-trigger",popovertarget:`${d}-popover`,children:n&&l}),e.jsx("output",{"aria-live":"assertive",children:e.jsx("div",{"data-position":s,popover:"auto",id:`${d}-popover`,className:"jkl-help-popover",children:p})})]})};
 //# sourceMappingURL=Help.cjs.map

package/build/cjs/components/help/Help.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Help.cjs","sources":["../../../../src/components/help/Help.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { Button } from \"../button/index.js\";\nimport { Icon } from \"../icon/Icon.js\";\nimport type { HelpProps } from \"./types.js\";\n\nexport const Help = ({\n position = \"top\",\n buttonText = \"Hjelp\",\n showButtonText = false,\n iconPosition = \"left\",\n className,\n children,\n ...rest\n}: HelpProps) => {\n return (\n <div className={clsx(\"jkl-help\", className)}>\n <Button\n {...rest}\n title={buttonText \|\| rest.title}\n iconPosition={iconPosition}\n variant=\"ghost\"\n className={\"jkl-help-trigger\"}\n icon={<Icon aria-hidden=\"true\">help</Icon>}\n data-testid=\"jkl-help-trigger\"\n // @ts-ignore\n popovertarget={`${~~buttonText~~}-popover`}\n ~~style={{ anchorName: `${buttonText}-popover` }}\n~~ >\n {showButtonText && buttonText}\n </Button>\n\n <output aria-live=\"assertive\">\n <div\n data-position={position}\n // @ts-ignore\n popover=\"auto\"\n id={`${~~buttonText~~}-popover`}\n className=\"jkl-help-popover\"\n >\n {children}\n </div>\n </output>\n </div>\n );\n};\n"],"names":["position","buttonText","showButtonText","iconPosition","className","children","rest","clsx","jsx","Button","title","variant","icon","Icon","popovertarget","~~style","anchorName","~~popover","id"],"mappings":"~~iQAMoB~~,EAChBA,SAAAA,EAAW,MACXC,WAAAA,EAAa,QACbC,eAAAA,GAAiB,EACjBC,aAAAA,EAAe,OACfC,UAAAA,EACAC,SAAAA,KACGC,~~YAGE~~,MAAA,~~CAAIF~~,~~UAAWG~~,EAAAA,KAAK,~~WAAYH~~,GAC7BC,SAAA,~~CAAAG~~,EAAAA,IAACC,EAAAA,OAAA,~~IACOH~~,~~EACJI~~,~~MAAOT~~,GAAcK,~~EAAKI~~,~~MAC1BP~~,aAAAA,~~EACAQ~~,QAAQ,~~QACRP~~,UAAW,~~mBACXQ~~,KAAMJ,EAAAA,IAACK,OAAA,CAAK,cAAY,~~OAAOR~~,SAAA,SAC/B,cAAY,~~mBAEZS~~,cAAe,~~GAAGb~~,~~YAClBc~~,~~MAAO,CAAEC,WAAY,GAAGf,aAEvBI,~~SAAAH,GAAkBD,~~IAGvBO~~,EAAAA,IAAC,SAAA,CAAO,YAAU,~~YACdH~~,~~SAAAG~~,EAAAA,IAAC,MAAA,CACG,~~gBAAeR~~,EAEfiB,QAAQ,OACRC,GAAI,~~GAAGjB~~,~~YACPG~~,UAAU,mBAETC,SAAAA"}
1	+ {"version":3,"file":"Help.cjs","sources":["../../../../src/components/help/Help.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useId } from \"react\";\nimport { Button } from \"../button/index.js\";\nimport { Icon } from \"../icon/Icon.js\";\nimport type { HelpProps } from \"./types.js\";\n\nexport const Help = ({\n position = \"top\",\n buttonText = \"Hjelp\",\n showButtonText = false,\n iconPosition = \"left\",\n className,\n children,\n ...rest\n}: HelpProps) => {\n const helpId = useId();\n\n return (\n <div className={clsx(\"jkl-help\", className)}>\n <Button\n {...rest}\n title={buttonText \|\| rest.title}\n iconPosition={iconPosition}\n variant=\"ghost\"\n className={\"jkl-help-trigger\"}\n icon={<Icon aria-hidden=\"true\">help</Icon>}\n data-testid=\"jkl-help-trigger\"\n // @ts-ignore\n popovertarget={`${helpId}-popover`}\n >\n {showButtonText && buttonText}\n </Button>\n\n <output aria-live=\"assertive\">\n <div\n data-position={position}\n // @ts-ignore\n popover=\"auto\"\n id={`${helpId}-popover`}\n className=\"jkl-help-popover\"\n >\n {children}\n </div>\n </output>\n </div>\n );\n};\n"],"names":["position","buttonText","showButtonText","iconPosition","className","children","rest","helpId","useId","clsx","jsx","Button","title","variant","icon","Icon","popovertarget","popover","id"],"mappings":"6PAMoB,EAChBA,SAAAA,EAAW,MACXC,WAAAA,EAAa,QACbC,eAAAA,GAAiB,EACjBC,aAAAA,EAAe,OACfC,UAAAA,EACAC,SAAAA,KACGC,MAEH,MAAMC,EAASC,EAAAA,QAEf,cACK,MAAA,CAAIJ,UAAWK,EAAAA,KAAK,WAAYL,GAC7BC,SAAA,CAAAK,EAAAA,IAACC,EAAAA,OAAA,IACOL,EACJM,MAAOX,GAAcK,EAAKM,MAC1BT,aAAAA,EACAU,QAAQ,QACRT,UAAW,mBACXU,KAAMJ,EAAAA,IAACK,OAAA,CAAK,cAAY,OAAOV,SAAA,SAC/B,cAAY,mBAEZW,cAAe,GAAGT,YAEjBF,SAAAH,GAAkBD,IAGvBS,EAAAA,IAAC,SAAA,CAAO,YAAU,YACdL,SAAAK,EAAAA,IAAC,MAAA,CACG,gBAAeV,EAEfiB,QAAQ,OACRC,GAAI,GAAGX,YACPH,UAAU,mBAETC,SAAAA"}

package/build/cjs/components/icon/icons/ErrorIcon.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime");require("react");const e=require("../Icon.cjs"),o=o=>r.jsx(e.Icon,{bold:!0,filled:!0,...o,children:""});o.displayName="ErrorIcon",exports.ErrorIcon=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime");require("react");const e=require("../Icon.cjs"),o=o=>r.jsx(e.Icon,{bold:!0,filled:!0,...o,children:""});o.displayName="ErrorIcon",exports.ErrorIcon=o;
 //# sourceMappingURL=ErrorIcon.cjs.map

package/build/cjs/components/icon/icons/ErrorIcon.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ErrorIcon.cjs","sources":["../../../../../src/components/icon/icons/ErrorIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const ErrorIcon: IconComponent = (props: IconProps) => (\n <Icon bold filled {...props}>\n {\"\\~~uf8b6~~\"}\n </Icon>\n);\nErrorIcon.displayName = \"ErrorIcon\";\n"],"names":["ErrorIcon","props","jsx","Icon","bold","filled","children","displayName"],"mappings":"qKAIaA,EAA4BC,GACrCC,MAACC,EAAAA,KAAA,CAAKC,MAAI,EAACC,QAAM,KAAKJ,EACjBK,SAAA,MAGTN,EAAUO,YAAc"}
1	+ {"version":3,"file":"ErrorIcon.cjs","sources":["../../../../../src/components/icon/icons/ErrorIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const ErrorIcon: IconComponent = (props: IconProps) => (\n <Icon bold filled {...props}>\n {\"\\ue82a\"}\n </Icon>\n);\nErrorIcon.displayName = \"ErrorIcon\";\n"],"names":["ErrorIcon","props","jsx","Icon","bold","filled","children","displayName"],"mappings":"qKAIaA,EAA4BC,GACrCC,MAACC,EAAAA,KAAA,CAAKC,MAAI,EAACC,QAAM,KAAKJ,EACjBK,SAAA,MAGTN,EAAUO,YAAc"}

package/build/cjs/components/menu/Menu.cjs CHANGED Viewed

@@ -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("../../../clsx-E3yX_9sL.cjs"),s=require("react"),r=require("../../hooks/useBrowserPreferences/useBrowserPreferences.cjs");require("../../hooks/useScreen/useScreen.cjs"),require("../../hooks/useId/useId.cjs");const o=require("../../utilities/getThemeAndSize.cjs"),i=require("../../utilities/polymorphism/SlotComponent.cjs"),l=require("./useMenuWideEvents.cjs");function a(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 u=s.forwardRef((u,c)=>{const{children:d,className:p,initialPlacement:m,openOnHover:f=!1,keepOpenOnClickOutside:g=!1,triggerElement:h,isOpen:x,onToggle:j,...v}=u,y=`"jkl-menu"${s.useId()}`,{prefersReducedMotion:k}=r.useBrowserPreferences(),P=t.useFloatingTree(),F=t.useFloatingNodeId(),w=t.useFloatingParentNodeId(),I=null!=w,S=s.useRef([]),[M,q]=s.useState(null),{allowHover:C,isOpen:E,setIsOpen:N}=l.useMenuWideEvents(P,F,w),b=void 0!==x?x:E;s.useEffect(()=>j?.(b),[b,j]);const{refs:O,placement:R,context:T,floatingStyles:z}=t.useFloating({nodeId:F,open:b,onOpenChange:N,placement:m||(I?"right-start":"bottom-start"),middleware:[t.offset(2),t.flip({fallbackAxisSideDirection:"end",crossAxis:!1}),t.shift({padding:8})],whileElementsMounted:t.autoUpdate}),{getReferenceProps:A,getFloatingProps:D,getItemProps:$}=t.useInteractions([t.useHover(T,{enabled:f&&C,delay:{open:75},handleClose:t.safePolygon({requireIntent:!0,blockPointerEvents:!0})}),t.useClick(T,{event:"mousedown"}),t.useDismiss(T,{outsidePress:!g}),t.useRole(T,{role:"menu"}),t.useListNavigation(T,{listRef:S,activeIndex:M,nested:I,onNavigate:q})]),B=t.useMergeRefs([O.setReference,c]),{theme:H,size:K}=o.getThemeAndSize(O.reference.current),{isMounted:V,styles:W}=t.useTransitionStyles(T,{duration:{open:k?0:250,close:k?0:150},initial:({side:e})=>({opacity:0,translate:a(e,5)}),open:({side:e})=>({opacity:1,translate:a(e,0)}),close:({side:e})=>({opacity:0,translate:a(e,5)})});return e.jsxs(t.FloatingNode,{id:F,children:[s.isValidElement(h)&&e.jsx(i.SlotComponent,{...A({...v,ref:B,role:I?"menuitem":void 0,"aria-controls":y,onClick(e){e.stopPropagation()}}),children:h}),V&&e.jsx(t.FloatingPortal,{children:e.jsx(t.FloatingFocusManager,{context:T,modal:!1,initialFocus:I?-1:0,returnFocus:!I,children:e.jsx("div",{className:n.clsx("jkl jkl-menu",p),"data-theme":H,"data-size":K,role:"menu","data-placement":R,"aria-live":"assertive","aria-hidden":!b,ref:O.setFloating,...D({id:y,style:{...z,...W}}),children:s.Children.map(d,(t,n)=>s.isValidElement(t)?e.jsx(i.SlotComponent,{...$({...t.props,tabIndex:M===n?0:-1,role:"menuitem",ref(e){S.current[n]=e},onClick(e){e.defaultPrevented||P?.events.emit("click")},onKeyDown(e){t.props.onKeyDown?.(e),!e.defaultPrevented&&(P?.events.emit("keydown"),"menuitemcheckbox"===e.currentTarget.role&&"Enter"===e.key&&N(!1))},onMouseEnter(){C&&b&&q(n)}}),children:t}):t)})})})]})});u.displayName="MenuComponent";const c=s.forwardRef((n,s)=>null===t.useFloatingParentNodeId()?e.jsx(t.FloatingTree,{children:e.jsx(u,{ref:s,...n})}):e.jsx(u,{ref:s,...n}));c.displayName="Menu",exports.Menu=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("../../../clsx-E3yX_9sL.cjs"),s=require("react"),r=require("../../hooks/useBrowserPreferences/useBrowserPreferences.cjs");require("../../hooks/useScreen/useScreen.cjs"),require("../../hooks/useId/useId.cjs");const o=require("../../utilities/getThemeAndSize.cjs"),i=require("../../utilities/polymorphism/SlotComponent.cjs"),l=require("./useMenuWideEvents.cjs");function a(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 u=s.forwardRef((u,c)=>{const{children:d,className:p,initialPlacement:m,openOnHover:f=!1,keepOpenOnClickOutside:g=!1,triggerElement:h,isOpen:x,onToggle:j,...v}=u,y=`"jkl-menu"${s.useId()}`,{prefersReducedMotion:k}=r.useBrowserPreferences(),P=t.useFloatingTree(),F=t.useFloatingNodeId(),w=t.useFloatingParentNodeId(),I=null!=w,S=s.useRef([]),[M,q]=s.useState(null),{allowHover:C,isOpen:E,setIsOpen:N}=l.useMenuWideEvents(P,F,w),b=void 0!==x?x:E;s.useEffect(()=>j?.(b),[b,j]);const{refs:O,placement:R,context:T,floatingStyles:z}=t.useFloating({nodeId:F,open:b,onOpenChange:N,placement:m||(I?"right-start":"bottom-start"),middleware:[t.offset(5),t.flip({fallbackAxisSideDirection:"end",crossAxis:!1}),t.shift({padding:8})],whileElementsMounted:t.autoUpdate}),{getReferenceProps:A,getFloatingProps:D,getItemProps:$}=t.useInteractions([t.useHover(T,{enabled:f&&C,delay:{open:75},handleClose:t.safePolygon({requireIntent:!0,blockPointerEvents:!0})}),t.useClick(T,{event:"mousedown"}),t.useDismiss(T,{outsidePress:!g}),t.useRole(T,{role:"menu"}),t.useListNavigation(T,{listRef:S,activeIndex:M,nested:I,onNavigate:q})]),B=t.useMergeRefs([O.setReference,c]),{theme:H,size:K}=o.getThemeAndSize(O.reference.current),{isMounted:V,styles:W}=t.useTransitionStyles(T,{duration:{open:k?0:250,close:k?0:150},initial:({side:e})=>({opacity:0,translate:a(e,5)}),open:({side:e})=>({opacity:1,translate:a(e,0)}),close:({side:e})=>({opacity:0,translate:a(e,5)})});return e.jsxs(t.FloatingNode,{id:F,children:[s.isValidElement(h)&&e.jsx(i.SlotComponent,{...A({...v,ref:B,role:I?"menuitem":void 0,"aria-controls":y,onClick(e){e.stopPropagation()}}),children:h}),V&&e.jsx(t.FloatingPortal,{children:e.jsx(t.FloatingFocusManager,{context:T,modal:!1,initialFocus:I?-1:0,returnFocus:!I,children:e.jsx("div",{className:n.clsx("jkl jkl-menu",p),"data-theme":H,"data-size":K,role:"menu","data-placement":R,"aria-live":"assertive","aria-hidden":!b,ref:O.setFloating,...D({id:y,style:{...z,...W}}),children:s.Children.map(d,(t,n)=>s.isValidElement(t)?e.jsx(i.SlotComponent,{...$({...t.props,tabIndex:M===n?0:-1,role:"menuitem",ref(e){S.current[n]=e},onClick(e){e.defaultPrevented||P?.events.emit("click")},onKeyDown(e){t.props.onKeyDown?.(e),!e.defaultPrevented&&(P?.events.emit("keydown"),"menuitemcheckbox"===e.currentTarget.role&&"Enter"===e.key&&N(!1))},onMouseEnter(){C&&b&&q(n)}}),children:t}):t)})})})]})});u.displayName="MenuComponent";const c=s.forwardRef((n,s)=>null===t.useFloatingParentNodeId()?e.jsx(t.FloatingTree,{children:e.jsx(u,{ref:s,...n})}):e.jsx(u,{ref:s,...n}));c.displayName="Menu",exports.Menu=c;
 //# sourceMappingURL=Menu.cjs.map

package/build/cjs/components/menu/Menu.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Menu.cjs","sources":["../../../../src/components/menu/Menu.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n FloatingNode,\n FloatingPortal,\n FloatingTree,\n type Side,\n autoUpdate,\n flip,\n offset,\n safePolygon,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useFloatingNodeId,\n useFloatingParentNodeId,\n useFloatingTree,\n useHover,\n useInteractions,\n useListNavigation,\n useMergeRefs,\n useRole,\n useTransitionStyles,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { forwardRef, useEffect, useRef, useState, useId } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/index.js\";\nimport { getThemeAndSize } from \"../../utilities/getThemeAndSize.js\";\nimport { SlotComponent } from \"../../utilities/index.js\";\nimport type { MenuProps } from \"./types.js\";\nimport { useMenuWideEvents } from \"./useMenuWideEvents.js\";\n\nfunction getTranslation(side: Side, value = 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\nconst MenuComponent = forwardRef<HTMLButtonElement, MenuProps>(\n (props, forwardedRef) => {\n const {\n children,\n className,\n initialPlacement,\n openOnHover = false,\n keepOpenOnClickOutside = false,\n triggerElement,\n isOpen: isOpenOverride,\n onToggle,\n ...triggerProps\n } = props;\n\n const MenuId = `\"jkl-menu\"${useId()}`;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n const tree = useFloatingTree();\n const nodeId = useFloatingNodeId();\n const parentId = useFloatingParentNodeId();\n const isNested = parentId != null;\n\n const listItemsRef = useRef<Array<HTMLButtonElement \| null>>([]);\n const [activeIndex, setActiveIndex] = useState<number \| null>(null);\n const {\n allowHover,\n isOpen: isOpenDefault,\n setIsOpen,\n } = useMenuWideEvents(tree, nodeId, parentId);\n\n const isOpen =\n isOpenOverride !== undefined ? isOpenOverride : isOpenDefault;\n\n useEffect(() => onToggle?.(isOpen), [isOpen, onToggle]);\n\n const { refs, placement, context, floatingStyles } = useFloating({\n nodeId,\n open: isOpen,\n onOpenChange: setIsOpen,\n placement:\n initialPlacement \|\| (isNested ? \"right-start\" : \"bottom-start\"),\n middleware: [\n offset(2),\n flip({\n fallbackAxisSideDirection: \"end\", // Allow bottom placement in narrow viewports (https://floating-ui.com/docs/flip#fallbackaxissidedirection)\n crossAxis: false, // See https://floating-ui.com/docs/flip#combining-with-shift\n }),\n shift({ padding: 8 }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n const { getReferenceProps, getFloatingProps, getItemProps } =\n useInteractions([\n useHover(context, {\n enabled: openOnHover && allowHover,\n delay: { open: 75 },\n handleClose: safePolygon({\n requireIntent: true,\n blockPointerEvents: true,\n }),\n }),\n useClick(context, {\n event: \"mousedown\",\n }),\n useDismiss(context, { outsidePress: !keepOpenOnClickOutside }),\n useRole(context, { role: \"menu\" }),\n useListNavigation(context, {\n listRef: listItemsRef,\n activeIndex,\n nested: isNested,\n onNavigate: setActiveIndex,\n }),\n ]);\n\n const referenceRef = useMergeRefs([refs.setReference, forwardedRef]);\n\n // Siden menyen 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 { theme, size } = getThemeAndSize(\n refs.reference.current as HTMLElement,\n );\n\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 return (\n <FloatingNode id={nodeId}>\n {React.isValidElement(triggerElement) && (\n <SlotComponent\n {...getReferenceProps({\n ...triggerProps,\n ref: referenceRef,\n role: isNested ? \"menuitem\" : undefined,\n \"aria-controls\": MenuId,\n onClick(event) {\n event.stopPropagation();\n },\n })}\n >\n {triggerElement}\n </SlotComponent>\n )}\n {isMounted && (\n <FloatingPortal>\n <FloatingFocusManager\n context={context}\n // Prevent outside content interference.\n modal={false}\n // Only initially focus the root floating menu.\n initialFocus={isNested ? -1 : 0}\n // Only return focus to the root menu's reference when menus close.\n returnFocus={!isNested}\n >\n <div\n className={clsx(\"jkl jkl-menu\", className)}\n data-theme={theme}\n data-size={size}\n role=\"menu\"\n data-placement={placement}\n aria-live=\"assertive\"\n aria-hidden={!isOpen}\n ref={refs.setFloating}\n {...getFloatingProps({\n id: MenuId,\n style: {\n ...floatingStyles,\n ...animationStyles,\n },\n })}\n >\n {React.Children.map(\n children,\n (child, index) => {\n if (React.isValidElement(child)) {\n return (\n <SlotComponent\n {...getItemProps({\n ...child.props,\n tabIndex:\n activeIndex ===\n index\n ? 0\n : -1,\n role: \"menuitem\",\n ref(\n node: HTMLButtonElement,\n ) {\n listItemsRef.current[\n index\n ] = node;\n },\n onClick(event) {\n if (\n event.defaultPrevented\n ) {\n return;\n }\n tree?.events.emit(\n \"click\",\n );\n },\n onKeyDown(event) {\n child.props.onKeyDown?.(\n event,\n );\n if (\n event.defaultPrevented\n ) {\n return;\n }\n tree?.events.emit(\n \"keydown\",\n );\n if (\n event\n .currentTarget\n .role ===\n \"menuitemcheckbox\" &&\n event.key ===\n \"Enter\"\n ) {\n // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role#keyboard_interactions\n setIsOpen(\n false,\n );\n }\n },\n onMouseEnter() {\n if (\n allowHover &&\n isOpen\n ) {\n setActiveIndex(\n index,\n );\n }\n },\n })}\n >\n {child}\n </SlotComponent>\n );\n }\n\n return child;\n },\n )}\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n )}\n </FloatingNode>\n );\n },\n);\nMenuComponent.displayName = \"MenuComponent\";\n\nexport const Menu = forwardRef<HTMLButtonElement, MenuProps>((props, ref) => {\n const parentId = useFloatingParentNodeId();\n\n if (parentId === null) {\n return (\n <FloatingTree>\n <MenuComponent ref={ref} {...props} />\n </FloatingTree>\n );\n }\n\n return <MenuComponent ref={ref} {...props} />;\n});\n\nMenu.displayName = \"Menu\";\n"],"names":["getTranslation","side","value","MenuComponent","forwardRef","props","forwardedRef","children","className","initialPlacement","openOnHover","keepOpenOnClickOutside","triggerElement","isOpen","isOpenOverride","onToggle","triggerProps","MenuId","useId","prefersReducedMotion","useBrowserPreferences","tree","useFloatingTree","nodeId","useFloatingNodeId","parentId","useFloatingParentNodeId","isNested","listItemsRef","useRef","activeIndex","setActiveIndex","useState","allowHover","isOpenDefault","setIsOpen","useMenuWideEvents","useEffect","refs","placement","context","floatingStyles","useFloating","open","onOpenChange","middleware","offset","flip","fallbackAxisSideDirection","crossAxis","shift","padding","whileElementsMounted","autoUpdate","getReferenceProps","getFloatingProps","getItemProps","useInteractions","useHover","enabled","delay","handleClose","safePolygon","requireIntent","blockPointerEvents","useClick","event","useDismiss","outsidePress","useRole","role","useListNavigation","listRef","nested","onNavigate","referenceRef","useMergeRefs","setReference","theme","size","getThemeAndSize","reference","current","isMounted","styles","animationStyles","useTransitionStyles","duration","close","initial","opacity","translate","jsxs","FloatingNode","id","React","isValidElement","jsx","SlotComponent","ref","onClick","stopPropagation","FloatingPortal","FloatingFocusManager","modal","initialFocus","returnFocus","clsx","setFloating","style","Children","map","child","index","tabIndex","node","defaultPrevented","events","emit","onKeyDown","currentTarget","key","onMouseEnter","displayName","Menu","FloatingTree"],"mappings":"ugBAgCA,SAASA,EAAeC,EAAYC,EAAQ,GACxC,OAAQD,GACJ,IAAK,MASL,QACI,MAAO,KAAKC,MARhB,IAAK,OACD,MAAO,GAAGA,QACd,IAAK,SACD,MAAO,MAAMA,MACjB,IAAK,QACD,OAAWA,EAAJ,OAKnB,CAEA,MAAMC,EAAgBC,EAAAA,WAClB,CAACC,EAAOC,KACJ,MACIC,SAAAA,EACAC,UAAAA,EACAC,iBAAAA,EACAC,YAAAA,GAAc,EACdC,uBAAAA,GAAyB,EACzBC,eAAAA,EACAC,OAAQC,EACRC,SAAAA,KACGC,GACHX,EAEEY,EAAS,aAAaC,EAAAA,WAEpBC,qBAAAA,GAAyBC,0BAE3BC,EAAOC,EAAAA,kBACPC,EAASC,EAAAA,oBACTC,EAAWC,EAAAA,0BACXC,EAAuB,MAAZF,EAEXG,EAAeC,EAAAA,OAAwC,KACtDC,EAAaC,GAAkBC,EAAAA,SAAwB,OAE1DC,WAAAA,EACApB,OAAQqB,EACRC,UAAAA,GACAC,oBAAkBf,EAAME,EAAQE,GAE9BZ,OACiB,IAAnBC,EAA+BA,EAAiBoB,EAEpDG,EAAAA,UAAU,IAAMtB,IAAWF,GAAS,CAACA,EAAQE,IAE7C,MAAQuB,KAAAA,EAAMC,UAAAA,EAAWC,QAAAA,EAASC,eAAAA,GAAmBC,EAAAA,YAAY,CAC7DnB,OAAAA,EACAoB,KAAM9B,EACN+B,aAAcT,EACdI,UACI9B,IAAqBkB,EAAW,cAAgB,gBACpDkB,WAAY,CACRC,EAAAA,OAAO,GACPC,OAAK,CACDC,0BAA2B,MAC3BC,WAAW,IAEfC,QAAM,CAAEC,QAAS,KAErBC,qBAAsBC,EAAAA,cAGlBC,kBAAAA,EAAmBC,iBAAAA,EAAkBC,aAAAA,GACzCC,EAAAA,gBAAgB,CACZC,EAAAA,SAASlB,EAAS,CACdmB,QAASjD,GAAeuB,EACxB2B,MAAO,CAAEjB,KAAM,IACfkB,YAAaC,EAAAA,YAAY,CACrBC,eAAe,EACfC,oBAAoB,MAG5BC,EAAAA,SAASzB,EAAS,CACd0B,MAAO,cAEXC,EAAAA,WAAW3B,EAAS,CAAE4B,cAAezD,IACrC0D,EAAAA,QAAQ7B,EAAS,CAAE8B,KAAM,SACzBC,EAAAA,kBAAkB/B,EAAS,CACvBgC,QAAS5C,EACTE,YAAAA,EACA2C,OAAQ9C,EACR+C,WAAY3C,MAIlB4C,EAAeC,EAAAA,aAAa,CAACtC,EAAKuC,aAAcvE,KAI9CwE,MAAAA,EAAOC,KAAAA,GAASC,EAAAA,gBACpB1C,EAAK2C,UAAUC,UAGXC,UAAAA,EAAWC,OAAQC,GAAoBC,EAAAA,oBAC3C9C,EACA,CACI+C,SAAU,CACN5C,KAAMxB,EAAuB,EAAI,IACjCqE,MAAOrE,EAAuB,EAAI,KAEtCsE,QAAS,EAAGxF,KAAAA,OACRyF,QAAS,EACTC,UAAW3F,EAAeC,EAAM,KAEpC0C,KAAM,EAAG1C,KAAAA,OACLyF,QAAS,EACTC,UAAW3F,EAAeC,EAAM,KAEpCuF,MAAO,EAAGvF,KAAAA,OACNyF,QAAS,EACTC,UAAW3F,EAAeC,EAAM,OAK5C,OACI2F,EAAAA,KAACC,EAAAA,aAAA,CAAaC,GAAIvE,EACbhB,SAAA,CAAAwF,EAAMC,eAAepF,IAClBqF,EAAAA,IAACC,EAAAA,cAAA,IACO5C,EAAkB,IACftC,EACHmF,IAAKxB,EACLL,KAAM3C,EAAW,gBAAa,EAC9B,gBAAiBV,EACjB,OAAAmF,CAAQlC,GACJA,EAAMmC,iBACV,IAGH9F,SAAAK,IAGRuE,SACImB,iBAAA,CACG/F,SAAA0F,EAAAA,IAACM,EAAAA,qBAAA,CACG/D,QAAAA,EAEAgE,OAAO,EAEPC,aAAc9E,GAAW,EAAK,EAE9B+E,aAAc/E,EAEdpB,SAAA0F,EAAAA,IAAC,MAAA,CACGzF,UAAWmG,EAAAA,KAAK,eAAgBnG,GAChC,aAAYsE,EACZ,YAAWC,EACXT,KAAK,OACL,iBAAgB/B,EAChB,YAAU,YACV,eAAc1B,EACdsF,IAAK7D,EAAKsE,eACNrD,EAAiB,CACjBuC,GAAI7E,EACJ4F,MAAO,IACApE,KACA4C,KAIV9E,WAAMuG,SAASC,IACZxG,EACA,CAACyG,EAAOC,IACAlB,EAAMC,eAAegB,GAEjBf,EAAAA,IAACC,EAAAA,cAAA,IACO1C,EAAa,IACVwD,EAAM3G,MACT6G,SACIpF,IACAmF,EACM,KAEV3C,KAAM,WACN,GAAA6B,CACIgB,GAEAvF,EAAasD,QACT+B,GACAE,CACR,EACA,OAAAf,CAAQlC,GAEAA,EAAMkD,kBAIV/F,GAAMgG,OAAOC,KACT,QAER,EACA,SAAAC,CAAUrD,GACN8C,EAAM3G,MAAMkH,YACRrD,IAGAA,EAAMkD,mBAIV/F,GAAMgG,OAAOC,KACT,WAMI,qBAHJpD,EACKsD,cACAlD,MAGD,UADJJ,EAAMuD,KAINtF,GACI,GAGZ,EACA,YAAAuF,GAEQzF,GACApB,GAEAkB,EACIkF,EAGZ,IAGH1G,SAAAyG,IAKNA,cAW/C7G,EAAcwH,YAAc,gBAErB,MAAMC,EAAOxH,EAAAA,WAAyC,CAACC,EAAO8F,IAGhD,OAFAzE,EAAAA,gCAIRmG,EAAAA,aAAA,CACGtH,SAAA0F,EAAAA,IAAC9F,GAAcgG,IAAAA,KAAc9F,MAKlC4F,EAAAA,IAAC9F,EAAA,CAAcgG,IAAAA,KAAc9F,KAGxCuH,EAAKD,YAAc"}
1	+ {"version":3,"file":"Menu.cjs","sources":["../../../../src/components/menu/Menu.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n FloatingNode,\n FloatingPortal,\n FloatingTree,\n type Side,\n autoUpdate,\n flip,\n offset,\n safePolygon,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useFloatingNodeId,\n useFloatingParentNodeId,\n useFloatingTree,\n useHover,\n useInteractions,\n useListNavigation,\n useMergeRefs,\n useRole,\n useTransitionStyles,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { forwardRef, useEffect, useRef, useState, useId } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/index.js\";\nimport { getThemeAndSize } from \"../../utilities/getThemeAndSize.js\";\nimport { SlotComponent } from \"../../utilities/index.js\";\nimport type { MenuProps } from \"./types.js\";\nimport { useMenuWideEvents } from \"./useMenuWideEvents.js\";\n\nfunction getTranslation(side: Side, value = 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\nconst MenuComponent = forwardRef<HTMLButtonElement, MenuProps>(\n (props, forwardedRef) => {\n const {\n children,\n className,\n initialPlacement,\n openOnHover = false,\n keepOpenOnClickOutside = false,\n triggerElement,\n isOpen: isOpenOverride,\n onToggle,\n ...triggerProps\n } = props;\n\n const MenuId = `\"jkl-menu\"${useId()}`;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n const tree = useFloatingTree();\n const nodeId = useFloatingNodeId();\n const parentId = useFloatingParentNodeId();\n const isNested = parentId != null;\n\n const listItemsRef = useRef<Array<HTMLButtonElement \| null>>([]);\n const [activeIndex, setActiveIndex] = useState<number \| null>(null);\n const {\n allowHover,\n isOpen: isOpenDefault,\n setIsOpen,\n } = useMenuWideEvents(tree, nodeId, parentId);\n\n const isOpen =\n isOpenOverride !== undefined ? isOpenOverride : isOpenDefault;\n\n useEffect(() => onToggle?.(isOpen), [isOpen, onToggle]);\n\n const { refs, placement, context, floatingStyles } = useFloating({\n nodeId,\n open: isOpen,\n onOpenChange: setIsOpen,\n placement:\n initialPlacement \|\| (isNested ? \"right-start\" : \"bottom-start\"),\n middleware: [\n offset(5),\n flip({\n fallbackAxisSideDirection: \"end\", // Allow bottom placement in narrow viewports (https://floating-ui.com/docs/flip#fallbackaxissidedirection)\n crossAxis: false, // See https://floating-ui.com/docs/flip#combining-with-shift\n }),\n shift({ padding: 8 }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n const { getReferenceProps, getFloatingProps, getItemProps } =\n useInteractions([\n useHover(context, {\n enabled: openOnHover && allowHover,\n delay: { open: 75 },\n handleClose: safePolygon({\n requireIntent: true,\n blockPointerEvents: true,\n }),\n }),\n useClick(context, {\n event: \"mousedown\",\n }),\n useDismiss(context, { outsidePress: !keepOpenOnClickOutside }),\n useRole(context, { role: \"menu\" }),\n useListNavigation(context, {\n listRef: listItemsRef,\n activeIndex,\n nested: isNested,\n onNavigate: setActiveIndex,\n }),\n ]);\n\n const referenceRef = useMergeRefs([refs.setReference, forwardedRef]);\n\n // Siden menyen 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 { theme, size } = getThemeAndSize(\n refs.reference.current as HTMLElement,\n );\n\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 return (\n <FloatingNode id={nodeId}>\n {React.isValidElement(triggerElement) && (\n <SlotComponent\n {...getReferenceProps({\n ...triggerProps,\n ref: referenceRef,\n role: isNested ? \"menuitem\" : undefined,\n \"aria-controls\": MenuId,\n onClick(event) {\n event.stopPropagation();\n },\n })}\n >\n {triggerElement}\n </SlotComponent>\n )}\n {isMounted && (\n <FloatingPortal>\n <FloatingFocusManager\n context={context}\n // Prevent outside content interference.\n modal={false}\n // Only initially focus the root floating menu.\n initialFocus={isNested ? -1 : 0}\n // Only return focus to the root menu's reference when menus close.\n returnFocus={!isNested}\n >\n <div\n className={clsx(\"jkl jkl-menu\", className)}\n data-theme={theme}\n data-size={size}\n role=\"menu\"\n data-placement={placement}\n aria-live=\"assertive\"\n aria-hidden={!isOpen}\n ref={refs.setFloating}\n {...getFloatingProps({\n id: MenuId,\n style: {\n ...floatingStyles,\n ...animationStyles,\n },\n })}\n >\n {React.Children.map(\n children,\n (child, index) => {\n if (React.isValidElement(child)) {\n return (\n <SlotComponent\n {...getItemProps({\n ...child.props,\n tabIndex:\n activeIndex ===\n index\n ? 0\n : -1,\n role: \"menuitem\",\n ref(\n node: HTMLButtonElement,\n ) {\n listItemsRef.current[\n index\n ] = node;\n },\n onClick(event) {\n if (\n event.defaultPrevented\n ) {\n return;\n }\n tree?.events.emit(\n \"click\",\n );\n },\n onKeyDown(event) {\n child.props.onKeyDown?.(\n event,\n );\n if (\n event.defaultPrevented\n ) {\n return;\n }\n tree?.events.emit(\n \"keydown\",\n );\n if (\n event\n .currentTarget\n .role ===\n \"menuitemcheckbox\" &&\n event.key ===\n \"Enter\"\n ) {\n // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role#keyboard_interactions\n setIsOpen(\n false,\n );\n }\n },\n onMouseEnter() {\n if (\n allowHover &&\n isOpen\n ) {\n setActiveIndex(\n index,\n );\n }\n },\n })}\n >\n {child}\n </SlotComponent>\n );\n }\n\n return child;\n },\n )}\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n )}\n </FloatingNode>\n );\n },\n);\nMenuComponent.displayName = \"MenuComponent\";\n\nexport const Menu = forwardRef<HTMLButtonElement, MenuProps>((props, ref) => {\n const parentId = useFloatingParentNodeId();\n\n if (parentId === null) {\n return (\n <FloatingTree>\n <MenuComponent ref={ref} {...props} />\n </FloatingTree>\n );\n }\n\n return <MenuComponent ref={ref} {...props} />;\n});\n\nMenu.displayName = \"Menu\";\n"],"names":["getTranslation","side","value","MenuComponent","forwardRef","props","forwardedRef","children","className","initialPlacement","openOnHover","keepOpenOnClickOutside","triggerElement","isOpen","isOpenOverride","onToggle","triggerProps","MenuId","useId","prefersReducedMotion","useBrowserPreferences","tree","useFloatingTree","nodeId","useFloatingNodeId","parentId","useFloatingParentNodeId","isNested","listItemsRef","useRef","activeIndex","setActiveIndex","useState","allowHover","isOpenDefault","setIsOpen","useMenuWideEvents","useEffect","refs","placement","context","floatingStyles","useFloating","open","onOpenChange","middleware","offset","flip","fallbackAxisSideDirection","crossAxis","shift","padding","whileElementsMounted","autoUpdate","getReferenceProps","getFloatingProps","getItemProps","useInteractions","useHover","enabled","delay","handleClose","safePolygon","requireIntent","blockPointerEvents","useClick","event","useDismiss","outsidePress","useRole","role","useListNavigation","listRef","nested","onNavigate","referenceRef","useMergeRefs","setReference","theme","size","getThemeAndSize","reference","current","isMounted","styles","animationStyles","useTransitionStyles","duration","close","initial","opacity","translate","jsxs","FloatingNode","id","React","isValidElement","jsx","SlotComponent","ref","onClick","stopPropagation","FloatingPortal","FloatingFocusManager","modal","initialFocus","returnFocus","clsx","setFloating","style","Children","map","child","index","tabIndex","node","defaultPrevented","events","emit","onKeyDown","currentTarget","key","onMouseEnter","displayName","Menu","FloatingTree"],"mappings":"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"}

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

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

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

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

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

@@ -65,6 +65,16 @@ export interface PopoverOptions {
      * popoveren ligger over eller under referansen.
      */
     onPlacementChange?: (placement: Placement) => void;
+    /**
+     * Setter bredden på popoveren lik bredden på referanse-elementet.
+     * Referanse-elementet er vanligvis `Popover.Trigger`, men kan overstyres
+     * med `positionReference`.
+     *
+     * @see https://floating-ui.com/docs/size#match-reference-width
+     *
+     * @default false
+     */
+    matchReferenceWidth?: boolean;
     /**
      * Options for hover-interaksjoner.
      *

package/build/cjs/components/radio-button/RadioButton.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.cjs","sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { SupportLabel } from \"../input-group/SupportLabel.js\";\nimport { BaseRadioButton } from \"./BaseRadioButton.js\";\nimport { useRadioGroupContext } from \"./radioGroupContext.js\";\nimport type { RadioButtonProps } from \"./types.js\";\n\nexport const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(\n (props, ref) => {\n const { checked, value, supportLabelProps, helpLabel, ...rest } = props;\n const { value: selectedValue, ...context } = useRadioGroupContext();\n const supportId = useId(\"jkl-support-label\");\n\n return (\n <>\n <BaseRadioButton\n {...context}\n {...rest}\n ref={ref}\n checked={\n typeof checked !== \"undefined\"\n ? checked\n : typeof selectedValue !== \"undefined\"\n ? value === selectedValue\n : undefined\n }\n value={value}\n aria-describedby={helpLabel ? supportId : undefined}\n />\n <SupportLabel\n {...supportLabelProps}\n label={helpLabel}\n labelType={\"help\"}\n id={supportId}\n />\n </>\n );\n },\n);\n\nRadioButton.displayName = \"RadioButton\";\n"],"names":["RadioButton","forwardRef","props","ref","checked","value","supportLabelProps","helpLabel","rest","selectedValue","context","useRadioGroupContext","supportId","useId","jsxs","Fragment","children","jsx","BaseRadioButton","SupportLabel","label","labelType","id","displayName"],"mappings":"sSAOaA,EAAcC,EAAAA,WACvB,CAACC,EAAOC,KACJ,MAAQC,QAAAA,EAASC,MAAAA,EAAOC,kBAAAA,EAAmBC,UAAAA,KAAcC,GAASN,GAC1DG,MAAOI,KAAkBC,GAAYC,EAAAA,~~uBACvCC~~,EAAYC,EAAAA,MAAM,qBAExB,OACIC,EAAAA,KAAAC,WAAA,CACIC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,gBAAA,IACOR,KACAF,EACJL,IAAAA,EACAC,eACWA,EAAY,IACbA,SACOK,EAAkB,IACvBJ,IAAUI,OACV,EAEZJ,MAAAA,EACA,mBAAkBE,EAAYK,OAAY,IAE9CK,EAAAA,IAACE,EAAAA,aAAA,IACOb,EACJc,MAAOb,EACPc,UAAW,OACXC,GAAIV,SAOxBZ,EAAYuB,YAAc"}
1	+ {"version":3,"file":"RadioButton.cjs","sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { SupportLabel } from \"../input-group/SupportLabel.js\";\nimport { BaseRadioButton } from \"./BaseRadioButton.js\";\nimport { useRadioGroupContext } from \"./radioGroupContext.js\";\nimport type { RadioButtonProps } from \"./types.js\";\n\nexport const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(\n (props, ref) => {\n const { checked, value, supportLabelProps, helpLabel, ...rest } = props;\n const { value: selectedValue, ...context } = useRadioGroupContext();\n\n const supportId = useId(\"jkl-support-label\");\n\n return (\n <>\n <BaseRadioButton\n {...context}\n {...rest}\n ref={ref}\n checked={\n typeof checked !== \"undefined\"\n ? checked\n : typeof selectedValue !== \"undefined\"\n ? value === selectedValue\n : undefined\n }\n value={value}\n aria-describedby={helpLabel ? supportId : undefined}\n />\n <SupportLabel\n {...supportLabelProps}\n label={helpLabel}\n labelType={\"help\"}\n id={supportId}\n />\n </>\n );\n },\n);\n\nRadioButton.displayName = \"RadioButton\";\n"],"names":["RadioButton","forwardRef","props","ref","checked","value","supportLabelProps","helpLabel","rest","selectedValue","context","useRadioGroupContext","supportId","useId","jsxs","Fragment","children","jsx","BaseRadioButton","SupportLabel","label","labelType","id","displayName"],"mappings":"sSAOaA,EAAcC,EAAAA,WACvB,CAACC,EAAOC,KACJ,MAAQC,QAAAA,EAASC,MAAAA,EAAOC,kBAAAA,EAAmBC,UAAAA,KAAcC,GAASN,GAC1DG,MAAOI,KAAkBC,GAAYC,EAAAA,uBAEvCC,EAAYC,EAAAA,MAAM,qBAExB,OACIC,EAAAA,KAAAC,WAAA,CACIC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,gBAAA,IACOR,KACAF,EACJL,IAAAA,EACAC,eACWA,EAAY,IACbA,SACOK,EAAkB,IACvBJ,IAAUI,OACV,EAEZJ,MAAAA,EACA,mBAAkBE,EAAYK,OAAY,IAE9CK,EAAAA,IAACE,EAAAA,aAAA,IACOb,EACJc,MAAOb,EACPc,UAAW,OACXC,GAAIV,SAOxBZ,EAAYuB,YAAc"}

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

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