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

@fremtind/jokul 5.0.5 → 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 (121) 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/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/system-message/SystemMessage.cjs CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SystemMessage.cjs","sources":["../../../../src/components/system-message/SystemMessage.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { DismissButton } from \"../message/DismissButton.js\";\nimport { MessageIcon } from \"./common/MessageIcon.js\";\nimport type { SystemMessageProps } from \"./types.js\";\n\nfunction systemFactory(\n variant: SystemMessageProps[\"variant\"],\n): React.FC<SystemMessageProps> {\n const SystemMessage: React.FC<SystemMessageProps> = ({\n id,\n className,\n maxContentWidth,\n paddingLeft,\n role = \"status\",\n dismissed,\n dismissAction,\n children,\n ...rest\n }) => {\n const systemId = useId(id \|\| \"jkl-system-message\", {\n generateSuffix: !id,\n });\n\n return (\n <div\n role={role}\n {...rest}\n id={systemId}\n className={clsx(\n \"jkl-system-message\",\n `jkl-system-message--${variant}`,\n className,\n {\n \"jkl-system-message--dismissed\": dismissed,\n },\n )}\n >\n <div\n className=\"jkl-system-message__content\"\n data-testid=\"system-message-content\"\n ~~data-theme=\"light\"\n~~ style={{\n maxWidth: maxContentWidth,\n paddingLeft,\n }}\n >\n <MessageIcon variant={variant \|\| \"info\"} />\n <span className=\"jkl-system-message__message\">\n {children}\n </span>\n {dismissAction?.handleDismiss && (\n <DismissButton\n ~~data-theme=\"light\"\n~~ aria-controls={systemId}\n className=\"jkl-system-message__dismiss-button\"\n label={dismissAction.buttonTitle \|\| \"Lukk\"}\n onClick={dismissAction.handleDismiss}\n />\n )}\n </div>\n </div>\n );\n };\n return SystemMessage;\n}\n\nexport const SystemMessage: React.FC<SystemMessageProps> = ({\n id,\n className,\n maxContentWidth,\n paddingLeft,\n role = \"status\",\n dismissed,\n variant = \"info\",\n dismissAction,\n children,\n ...rest\n}) => {\n const systemId = useId(id \|\| \"jkl-system-message\", {\n generateSuffix: !id,\n });\n\n return (\n <div\n role={role}\n {...rest}\n id={systemId}\n className={clsx(\n \"jkl-system-message\",\n `jkl-system-message--${variant}`,\n className,\n {\n \"jkl-system-message--dismissed\": dismissed,\n },\n )}\n >\n <div\n className=\"jkl-system-message__content\"\n data-testid=\"system-message-content\"\n ~~data-theme=\"light\"\n~~ style={{\n maxWidth: maxContentWidth,\n paddingLeft,\n }}\n >\n <MessageIcon variant={variant} />\n <span className=\"jkl-system-message__message\">{children}</span>\n {dismissAction?.handleDismiss && (\n <DismissButton\n ~~data-theme=\"light\"\n~~ aria-controls={systemId}\n className=\"jkl-system-message__dismiss-button\"\n label={dismissAction.buttonTitle \|\| \"Lukk\"}\n onClick={dismissAction.handleDismiss}\n />\n )}\n </div>\n </div>\n );\n};\n\n/*\n @deprecated bruk {@link SystemMessage} med variant=\"info\"\n /\nexport const InfoSystemMessage = systemFactory(\"info\");\nInfoSystemMessage.displayName = \"InfoSystemMessage\";\n/\n @deprecated bruk {@link SystemMessage} med variant=\"error\"\n /\nexport const ErrorSystemMessage = systemFactory(\"error\");\nErrorSystemMessage.displayName = \"ErrorSystemMessage\";\n/\n @deprecated bruk {@link SystemMessage} med variant=\"warning\"\n /\nexport const WarningSystemMessage = systemFactory(\"warning\");\nWarningSystemMessage.displayName = \"WarningSystemMessage\";\n/\n @deprecated bruk {@link SystemMessage} med variant=\"success\"\n */\nexport const SuccessSystemMessage = systemFactory(\"success\");\nSuccessSystemMessage.displayName = \"SuccessSystemMessage\";\n"],"names":["systemFactory","variant","id","className","maxContentWidth","paddingLeft","role","dismissed","dismissAction","children","rest","systemId","useId","generateSuffix","jsx","clsx","jsxs","style","maxWidth","MessageIcon","handleDismiss","DismissButton","label","buttonTitle","onClick","InfoSystemMessage","displayName","ErrorSystemMessage","WarningSystemMessage","SuccessSystemMessage"],"mappings":"6SAOA,SAASA,EACLC,~~GAyDA~~,~~MAvDoD~~,EAChDC,GAAAA,EACAC,UAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAC,cAAAA,EACAC,SAAAA,KACGC,MAEH,MAAMC,EAAWC,EAAAA,MAAMV,GAAM,qBAAsB,CAC/CW,gBAAiBX,IAGrB,OACIY,EAAAA,IAAC,MAAA,CACGR,KAAAA,KACII,EACJR,GAAIS,EACJR,UAAWY,EAAAA,KACP,qBACA,uBAAuBd,IACvBE,EACA,CACI,gCAAiCI,IAIzCE,SAAAO,EAAAA,KAAC,MAAA,CACGb,UAAU,8BACV,cAAY,~~yBACZ~~,~~aAAW,QACXc,~~MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,EAAAA,IAACK,EAAAA,YAAA,CAAYlB,QAASA,GAAW,SACjCa,EAAAA,IAAC,OAAA,CAAKX,UAAU,8BACXM,SAAAA,IAEJD,GAAeY,eACZN,EAAAA,IAACO,EAAAA,cAAA,CACG,~~aAAW,QACX,~~gBAAeV,EACfR,UAAU,qCACVmB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY,qBAQnD,CAEO,~~MA0DMK~~,EAAoBzB,EAAc,QAC/CyB,EAAkBC,YAAc,oBAIzB,MAAMC,EAAqB3B,EAAc,SAChD2B,EAAmBD,YAAc,qBAI1B,MAAME,EAAuB5B,EAAc,WAClD4B,EAAqBF,YAAc,uBAI5B,MAAMG,EAAuB7B,EAAc,WAClD6B,EAAqBH,YAAc,~~qIA1EwB~~,EACvDxB,GAAAA,EACAC,UAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAN,QAAAA,EAAU,OACVO,cAAAA,EACAC,SAAAA,KACGC,MAEH,MAAMC,EAAWC,EAAAA,MAAMV,GAAM,qBAAsB,CAC/CW,gBAAiBX,IAGrB,OACIY,EAAAA,IAAC,MAAA,CACGR,KAAAA,KACII,EACJR,GAAIS,EACJR,UAAWY,EAAAA,KACP,qBACA,uBAAuBd,IACvBE,EACA,CACI,gCAAiCI,IAIzCE,SAAAO,EAAAA,KAAC,MAAA,CACGb,UAAU,8BACV,cAAY,~~yBACZ~~,~~aAAW,QACXc,~~MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,MAACK,EAAAA,aAAYlB,QAAAA,IACba,EAAAA,IAAC,OAAA,CAAKX,UAAU,8BAA+BM,SAAAA,IAC9CD,GAAeY,eACZN,EAAAA,IAACO,EAAAA,cAAA,CACG,~~aAAW,QACX,~~gBAAeV,EACfR,UAAU,qCACVmB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY"}
1	+ {"version":3,"file":"SystemMessage.cjs","sources":["../../../../src/components/system-message/SystemMessage.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { DismissButton } from \"../message/DismissButton.js\";\nimport { MessageIcon } from \"./common/MessageIcon.js\";\nimport type { SystemMessageProps } from \"./types.js\";\n\nfunction systemFactory(\n variant: SystemMessageProps[\"variant\"],\n): React.FC<SystemMessageProps> {\n const SystemMessage: React.FC<SystemMessageProps> = ({\n id,\n className,\n maxContentWidth,\n paddingLeft,\n role = \"status\",\n dismissed,\n dismissAction,\n children,\n ...rest\n }) => {\n const systemId = useId(id \|\| \"jkl-system-message\", {\n generateSuffix: !id,\n });\n\n return (\n <div\n role={role}\n {...rest}\n id={systemId}\n className={clsx(\n \"jkl-system-message\",\n `jkl-system-message--${variant}`,\n className,\n {\n \"jkl-system-message--dismissed\": dismissed,\n },\n )}\n >\n <div\n className=\"jkl-system-message__content\"\n data-testid=\"system-message-content\"\n style={{\n maxWidth: maxContentWidth,\n paddingLeft,\n }}\n >\n <MessageIcon variant={variant \|\| \"info\"} />\n <span className=\"jkl-system-message__message\">\n {children}\n </span>\n {dismissAction?.handleDismiss && (\n <DismissButton\n aria-controls={systemId}\n className=\"jkl-system-message__dismiss-button\"\n label={dismissAction.buttonTitle \|\| \"Lukk\"}\n onClick={dismissAction.handleDismiss}\n />\n )}\n </div>\n </div>\n );\n };\n return SystemMessage;\n}\n\nexport const SystemMessage: React.FC<SystemMessageProps> = ({\n id,\n className,\n maxContentWidth,\n paddingLeft,\n role = \"status\",\n dismissed,\n variant = \"info\",\n dismissAction,\n children,\n ...rest\n}) => {\n const systemId = useId(id \|\| \"jkl-system-message\", {\n generateSuffix: !id,\n });\n\n return (\n <div\n role={role}\n {...rest}\n id={systemId}\n className={clsx(\n \"jkl-system-message\",\n `jkl-system-message--${variant}`,\n className,\n {\n \"jkl-system-message--dismissed\": dismissed,\n },\n )}\n >\n <div\n className=\"jkl-system-message__content\"\n data-testid=\"system-message-content\"\n style={{\n maxWidth: maxContentWidth,\n paddingLeft,\n }}\n >\n <MessageIcon variant={variant} />\n <span className=\"jkl-system-message__message\">{children}</span>\n {dismissAction?.handleDismiss && (\n <DismissButton\n aria-controls={systemId}\n className=\"jkl-system-message__dismiss-button\"\n label={dismissAction.buttonTitle \|\| \"Lukk\"}\n onClick={dismissAction.handleDismiss}\n />\n )}\n </div>\n </div>\n );\n};\n\n/*\n @deprecated bruk {@link SystemMessage} med variant=\"info\"\n /\nexport const InfoSystemMessage = systemFactory(\"info\");\nInfoSystemMessage.displayName = \"InfoSystemMessage\";\n/\n @deprecated bruk {@link SystemMessage} med variant=\"error\"\n /\nexport const ErrorSystemMessage = systemFactory(\"error\");\nErrorSystemMessage.displayName = \"ErrorSystemMessage\";\n/\n @deprecated bruk {@link SystemMessage} med variant=\"warning\"\n /\nexport const WarningSystemMessage = systemFactory(\"warning\");\nWarningSystemMessage.displayName = \"WarningSystemMessage\";\n/\n @deprecated bruk {@link SystemMessage} med variant=\"success\"\n */\nexport const SuccessSystemMessage = systemFactory(\"success\");\nSuccessSystemMessage.displayName = \"SuccessSystemMessage\";\n"],"names":["systemFactory","variant","id","className","maxContentWidth","paddingLeft","role","dismissed","dismissAction","children","rest","systemId","useId","generateSuffix","jsx","clsx","jsxs","style","maxWidth","MessageIcon","handleDismiss","DismissButton","label","buttonTitle","onClick","InfoSystemMessage","displayName","ErrorSystemMessage","WarningSystemMessage","SuccessSystemMessage"],"mappings":"6SAOA,SAASA,EACLC,GAuDA,MArDoD,EAChDC,GAAAA,EACAC,UAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAC,cAAAA,EACAC,SAAAA,KACGC,MAEH,MAAMC,EAAWC,EAAAA,MAAMV,GAAM,qBAAsB,CAC/CW,gBAAiBX,IAGrB,OACIY,EAAAA,IAAC,MAAA,CACGR,KAAAA,KACII,EACJR,GAAIS,EACJR,UAAWY,EAAAA,KACP,qBACA,uBAAuBd,IACvBE,EACA,CACI,gCAAiCI,IAIzCE,SAAAO,EAAAA,KAAC,MAAA,CACGb,UAAU,8BACV,cAAY,yBACZc,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,EAAAA,IAACK,EAAAA,YAAA,CAAYlB,QAASA,GAAW,SACjCa,EAAAA,IAAC,OAAA,CAAKX,UAAU,8BACXM,SAAAA,IAEJD,GAAeY,eACZN,EAAAA,IAACO,EAAAA,cAAA,CACG,gBAAeV,EACfR,UAAU,qCACVmB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY,qBAQnD,CAEO,MAwDMK,EAAoBzB,EAAc,QAC/CyB,EAAkBC,YAAc,oBAIzB,MAAMC,EAAqB3B,EAAc,SAChD2B,EAAmBD,YAAc,qBAI1B,MAAME,EAAuB5B,EAAc,WAClD4B,EAAqBF,YAAc,uBAI5B,MAAMG,EAAuB7B,EAAc,WAClD6B,EAAqBH,YAAc,qIAxEwB,EACvDxB,GAAAA,EACAC,UAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAN,QAAAA,EAAU,OACVO,cAAAA,EACAC,SAAAA,KACGC,MAEH,MAAMC,EAAWC,EAAAA,MAAMV,GAAM,qBAAsB,CAC/CW,gBAAiBX,IAGrB,OACIY,EAAAA,IAAC,MAAA,CACGR,KAAAA,KACII,EACJR,GAAIS,EACJR,UAAWY,EAAAA,KACP,qBACA,uBAAuBd,IACvBE,EACA,CACI,gCAAiCI,IAIzCE,SAAAO,EAAAA,KAAC,MAAA,CACGb,UAAU,8BACV,cAAY,yBACZc,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,MAACK,EAAAA,aAAYlB,QAAAA,IACba,EAAAA,IAAC,OAAA,CAAKX,UAAU,8BAA+BM,SAAAA,IAC9CD,GAAeY,eACZN,EAAAA,IAACO,EAAAA,cAAA,CACG,gBAAeV,EACfR,UAAU,qCACVmB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY"}

package/build/cjs/components/typography/Text.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").forwardRef(function({as:r,className:s,size:o="m",bold:a,short:l,srOnly:c,...i},d){const n=r||"p";return e.jsx(n,{className:t.clsx("jkl-text",c&&"jkl-sr-only",s),"data-text-size":o,"data-bold":a||void 0,"data-short":l||void 0,ref:d,...i})});exports.Text=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),r=require("react").forwardRef(function({as:r,className:s,size:a="m",bold:o,short:d,srOnly:c,center:i,subdued:l,...u},n){const x=r||"p";return e.jsx(x,{className:t.clsx("jkl-text",c&&"jkl-sr-only",s),"data-text-size":a,"data-bold":o||void 0,"data-short":d||void 0,"data-center":i||void 0,"data-subdued":l||void 0,ref:n,...u})});exports.Text=r;
 //# sourceMappingURL=Text.cjs.map

package/build/cjs/components/typography/Text.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Text.cjs","sources":["../../../../src/components/typography/Text.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/index.js\";\nimport type { TextElement, TextProps } from \"./types.js\";\n\ntype TextComponent = <As extends TextElement = \"p\">(\n props: TextProps<As>,\n) => React.ReactElement \| null;\n\nexport const Text: TextComponent = forwardRef(function Text<\n As extends TextElement = \"p\",\n>(\n { as, className, size = \"m\", bold, short, srOnly, ...rest }: TextProps<As>,\n ref?: PolymorphicRef<As>,\n) {\n const Component = (as \|\| \"p\") as React.ElementType;\n return (\n <Component\n className={clsx(\"jkl-text\", srOnly && \"jkl-sr-only\", className)}\n data-text-size={size}\n data-bold={bold \|\| undefined}\n data-short={short \|\| undefined}\n ref={ref}\n {...rest}\n />\n );\n}) as TextComponent;\n"],"names":["Text","forwardRef","as","className","size","bold","short","srOnly","rest","ref","Component","jsx","clsx"],"mappings":"6JASaA,mBAAsBC,WAAW,~~UAGxCC~~,GAAAA,~~EAAIC~~,UAAAA,~~EAAWC~~,KAAAA,EAAO,~~IAAKC~~,KAAAA,~~EAAMC~~,MAAAA,~~EAAOC~~,OAAAA,~~KAAWC~~,~~GACrDC~~,GAEA,MAAMC,~~EAAaR~~,GAAM,IACzB,~~OACIS~~,EAAAA,IAACD,EAAA,~~CACGP~~,~~UAAWS~~,EAAAA,KAAK,~~WAAYL~~,GAAU,cAAeJ,GACrD,iBAAgBC,EAChB,YAAWC,QAAQ,EACnB,aAAYC,QAAS,~~EACrBG~~,IAAAA,KACID,GAGhB"}
1	+ {"version":3,"file":"Text.cjs","sources":["../../../../src/components/typography/Text.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/index.js\";\nimport type { TextElement, TextProps } from \"./types.js\";\n\ntype TextComponent = <As extends TextElement = \"p\">(\n props: TextProps<As>,\n) => React.ReactElement \| null;\n\nexport const Text: TextComponent = forwardRef(function Text<\n As extends TextElement = \"p\",\n>(\n {\n as,\n className,\n size = \"m\",\n bold,\n short,\n srOnly,\n center,\n subdued,\n ...rest\n }: TextProps<As>,\n ref?: PolymorphicRef<As>,\n) {\n const Component = (as \|\| \"p\") as React.ElementType;\n return (\n <Component\n className={clsx(\"jkl-text\", srOnly && \"jkl-sr-only\", className)}\n data-text-size={size}\n data-bold={bold \|\| undefined}\n data-short={short \|\| undefined}\n data-center={center \|\| undefined}\n data-subdued={subdued \|\| undefined}\n ref={ref}\n {...rest}\n />\n );\n}) as TextComponent;\n"],"names":["Text","forwardRef","as","className","size","bold","short","srOnly","center","subdued","rest","ref","Component","jsx","clsx"],"mappings":"6JASaA,mBAAsBC,WAAW,UAItCC,GAAAA,EACAC,UAAAA,EACAC,KAAAA,EAAO,IACPC,KAAAA,EACAC,MAAAA,EACAC,OAAAA,EACAC,OAAAA,EACAC,QAAAA,KACGC,GAEPC,GAEA,MAAMC,EAAaV,GAAM,IACzB,OACIW,EAAAA,IAACD,EAAA,CACGT,UAAWW,EAAAA,KAAK,WAAYP,GAAU,cAAeJ,GACrD,iBAAgBC,EAChB,YAAWC,QAAQ,EACnB,aAAYC,QAAS,EACrB,cAAaE,QAAU,EACvB,eAAcC,QAAW,EACzBE,IAAAA,KACID,GAGhB"}

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

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

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

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

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

@@ -27,6 +27,18 @@ type TextOwnProps = {
      * @default false
      */
     srOnly?: boolean;
+    /**
+     * Sentrerer teksten horisontalt (text-align: center).
+     * Bruk når sentrering ikke arves fra containeren, f.eks. inne i en Flex
+     * med alignItems: center.
+     * @default false
+     */
+    center?: boolean;
+    /**
+     * Bruker dempet tekstfarge (--jkl-color-text-subdued).
+     * @default false
+     */
+    subdued?: boolean;
 };
 type TitleOwnProps = {
     /**
@@ -42,6 +54,11 @@ type TitleOwnProps = {
      * @default false
      */
     srOnly?: boolean;
+    /**
+     * Sentrerer teksten horisontalt (text-align: center).
+     * @default false
+     */
+    center?: boolean;
 };
 export type TextProps<As extends TextElement = "p"> = PolymorphicPropsWithRef<As, TextOwnProps>;
 export type TitleProps<As extends TitleElement = "h2"> = PolymorphicPropsWithRef<As, TitleOwnProps>;

package/build/cjs/tokens.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";module.exports={color:{"@":{background:{page:"var(--jkl-color-background-page)",container:"var(--jkl-color-background-container)","container-accent":"var(--jkl-color-background-container-accent)",contrast:"var(--jkl-color-background-contrast)"},text:{default:"var(--jkl-color-text-default)",subdued:"var(--jkl-color-text-subdued)",accent:"var(--jkl-color-text-accent)","on-contrast":"var(--jkl-color-text-on-contrast)"},border:{default:"var(--jkl-color-border-default)",subdued:"var(--jkl-color-border-subdued)",strong:"var(--jkl-color-border-strong)"}},warning:{background:{page:"var(--jkl-color-warning-background-page)",container:"var(--jkl-color-warning-background-container)","container-accent":"var(--jkl-color-warning-background-container-accent)",contrast:"var(--jkl-color-warning-background-contrast)"},text:{default:"var(--jkl-color-warning-text-default)",subdued:"var(--jkl-color-warning-text-subdued)",accent:"var(--jkl-color-warning-text-accent)","on-contrast":"var(--jkl-color-warning-text-on-contrast)"},border:{default:"var(--jkl-color-warning-border-default)",subdued:"var(--jkl-color-warning-border-subdued)",strong:"var(--jkl-color-warning-border-strong)"}},success:{background:{page:"var(--jkl-color-success-background-page)",container:"var(--jkl-color-success-background-container)","container-accent":"var(--jkl-color-success-background-container-accent)",contrast:"var(--jkl-color-success-background-contrast)"},text:{default:"var(--jkl-color-success-text-default)",subdued:"var(--jkl-color-success-text-subdued)",accent:"var(--jkl-color-success-text-accent)","on-contrast":"var(--jkl-color-success-text-on-contrast)"},border:{default:"var(--jkl-color-success-border-default)",subdued:"var(--jkl-color-success-border-subdued)",strong:"var(--jkl-color-success-border-strong)"}},info:{background:{page:"var(--jkl-color-info-background-page)",container:"var(--jkl-color-info-background-container)","container-accent":"var(--jkl-color-info-background-container-accent)",contrast:"var(--jkl-color-info-background-contrast)"},text:{default:"var(--jkl-color-info-text-default)",subdued:"var(--jkl-color-info-text-subdued)",accent:"var(--jkl-color-info-text-accent)","on-contrast":"var(--jkl-color-info-text-on-contrast)"},border:{default:"var(--jkl-color-info-border-default)",subdued:"var(--jkl-color-info-border-subdued)",strong:"var(--jkl-color-info-border-strong)"}},error:{background:{page:"var(--jkl-color-error-background-page)",container:"var(--jkl-color-error-background-container)","container-accent":"var(--jkl-color-error-background-container-accent)",contrast:"var(--jkl-color-error-background-contrast)"},text:{default:"var(--jkl-color-error-text-default)",subdued:"var(--jkl-color-error-text-subdued)",accent:"var(--jkl-color-error-text-accent)","on-contrast":"var(--jkl-color-error-text-on-contrast)"},border:{default:"var(--jkl-color-error-border-default)",subdued:"var(--jkl-color-error-border-subdued)",strong:"var(--jkl-color-error-border-strong)"}}},unit:{0:"var(--jkl-unit-0)",10:"var(--jkl-unit-10)",15:"var(--jkl-unit-15)",20:"var(--jkl-unit-20)",25:"var(--jkl-unit-25)",30:"var(--jkl-unit-30)",35:"var(--jkl-unit-35)",40:"var(--jkl-unit-40)",50:"var(--jkl-unit-50)",60:"var(--jkl-unit-60)",70:"var(--jkl-unit-70)",80:"var(--jkl-unit-80)",90:"var(--jkl-unit-90)",100:"var(--jkl-unit-100)",130:"var(--jkl-unit-130)",210:"var(--jkl-unit-210)",base:"var(--jkl-unit-base)","02":"var(--jkl-unit-02)","05":"var(--jkl-unit-05)"},spacing:{0:"var(--jkl-spacing-0)",2:"var(--jkl-spacing-2)",4:"var(--jkl-spacing-4)",8:"var(--jkl-spacing-8)",12:"var(--jkl-spacing-12)",16:"var(--jkl-spacing-16)",24:"var(--jkl-spacing-24)",32:"var(--jkl-spacing-32)",40:"var(--jkl-spacing-40)",64:"var(--jkl-spacing-64)",104:"var(--jkl-spacing-104)",168:"var(--jkl-spacing-168)",none:"var(--jkl-spacing-none)","2xs":"var(--jkl-spacing-2xs)",xs:"var(--jkl-spacing-xs)",s:"var(--jkl-spacing-s)",m:"var(--jkl-spacing-m)",l:"var(--jkl-spacing-l)",xl:"var(--jkl-spacing-xl)","2xl":"var(--jkl-spacing-2xl)"},border:{width:{1:"var(--jkl-border-width-1)",2:"var(--jkl-border-width-2)",3:"var(--jkl-border-width-3)"},radius:{none:"var(--jkl-border-radius-none)",xs:"var(--jkl-border-radius-xs)",s:"var(--jkl-border-radius-s)",m:"var(--jkl-border-radius-m)",l:"var(--jkl-border-radius-l)",full:"var(--jkl-border-radius-full)"}},breakpoint:{small:"0",medium:"680px",large:"1200px",xl:"1600px"},motion:{timing:{energetic:"var(--jkl-motion-timing-energetic)",snappy:"var(--jkl-motion-timing-snappy)",productive:"var(--jkl-motion-timing-productive)",polite:"var(--jkl-motion-timing-polite)",expressive:"var(--jkl-motion-timing-expressive)",lazy:"var(--jkl-motion-timing-lazy)"},easing:{standard:"var(--jkl-motion-easing-standard)",entrance:"var(--jkl-motion-easing-entrance)",exit:"var(--jkl-motion-easing-exit)",easeInBounceOut:"var(--jkl-motion-easing-ease-in-bounce-out)",focus:"var(--jkl-motion-easing-focus)"}},font:{size:{1:"var(--jkl-font-size-1)",2:"var(--jkl-font-size-2)",3:"var(--jkl-font-size-3)",4:"var(--jkl-font-size-4)",5:"var(--jkl-font-size-5)",6:"var(--jkl-font-size-6)",7:"var(--jkl-font-size-7)",8:"var(--jkl-font-size-8)",9:"var(--jkl-font-size-9)",10:"var(--jkl-font-size-10)"},weight:{normal:"var(--jkl-font-weight-normal)",bold:"var(--jkl-font-weight-bold)"},family:{regular:"var(--jkl-font-family-regular)",display:"var(--jkl-font-family-display)",mono:"var(--jkl-font-family-mono)"}},lineHeight:{flush:"var(--jkl-line-height-flush)",tight:"var(--jkl-line-height-tight)",relaxed:"var(--jkl-line-height-relaxed)"},textStyle:{title:"var(--jkl-text-style-title)","title-small":"var(--jkl-text-style-title-small)","heading-1":"var(--jkl-text-style-heading-1)","heading-2":"var(--jkl-text-style-heading-2)","heading-3":"var(--jkl-text-style-heading-3)","heading-4":"var(--jkl-text-style-heading-4)","heading-5":"var(--jkl-text-style-heading-5)","paragraph-large":"var(--jkl-text-style-paragraph-large)","paragraph-medium":"var(--jkl-text-style-paragraph-medium)","paragraph-small":"var(--jkl-text-style-paragraph-small)","text-large":"var(--jkl-text-style-text-large)","text-medium":"var(--jkl-text-style-text-medium)","text-small":"var(--jkl-text-style-text-small)","text-micro":"var(--jkl-text-style-text-micro)"}};
+"use strict";module.exports={color:{"@":{background:{page:"var(--jkl-color-background-page)",container:"var(--jkl-color-background-container)","container-accent":"var(--jkl-color-background-container-accent)",contrast:"var(--jkl-color-background-contrast)"},text:{default:"var(--jkl-color-text-default)",subdued:"var(--jkl-color-text-subdued)",accent:"var(--jkl-color-text-accent)","on-contrast":"var(--jkl-color-text-on-contrast)"},border:{default:"var(--jkl-color-border-default)",subdued:"var(--jkl-color-border-subdued)",strong:"var(--jkl-color-border-strong)"}},warning:{background:{page:"var(--jkl-color-warning-background-page)",container:"var(--jkl-color-warning-background-container)","container-accent":"var(--jkl-color-warning-background-container-accent)",contrast:"var(--jkl-color-warning-background-contrast)"},text:{default:"var(--jkl-color-warning-text-default)",subdued:"var(--jkl-color-warning-text-subdued)",accent:"var(--jkl-color-warning-text-accent)","on-contrast":"var(--jkl-color-warning-text-on-contrast)"},border:{default:"var(--jkl-color-warning-border-default)",subdued:"var(--jkl-color-warning-border-subdued)",strong:"var(--jkl-color-warning-border-strong)"}},success:{background:{page:"var(--jkl-color-success-background-page)",container:"var(--jkl-color-success-background-container)","container-accent":"var(--jkl-color-success-background-container-accent)",contrast:"var(--jkl-color-success-background-contrast)"},text:{default:"var(--jkl-color-success-text-default)",subdued:"var(--jkl-color-success-text-subdued)",accent:"var(--jkl-color-success-text-accent)","on-contrast":"var(--jkl-color-success-text-on-contrast)"},border:{default:"var(--jkl-color-success-border-default)",subdued:"var(--jkl-color-success-border-subdued)",strong:"var(--jkl-color-success-border-strong)"}},info:{background:{page:"var(--jkl-color-info-background-page)",container:"var(--jkl-color-info-background-container)","container-accent":"var(--jkl-color-info-background-container-accent)",contrast:"var(--jkl-color-info-background-contrast)"},text:{default:"var(--jkl-color-info-text-default)",subdued:"var(--jkl-color-info-text-subdued)",accent:"var(--jkl-color-info-text-accent)","on-contrast":"var(--jkl-color-info-text-on-contrast)"},border:{default:"var(--jkl-color-info-border-default)",subdued:"var(--jkl-color-info-border-subdued)",strong:"var(--jkl-color-info-border-strong)"}},error:{background:{page:"var(--jkl-color-error-background-page)",container:"var(--jkl-color-error-background-container)","container-accent":"var(--jkl-color-error-background-container-accent)",contrast:"var(--jkl-color-error-background-contrast)"},text:{default:"var(--jkl-color-error-text-default)",subdued:"var(--jkl-color-error-text-subdued)",accent:"var(--jkl-color-error-text-accent)","on-contrast":"var(--jkl-color-error-text-on-contrast)"},border:{default:"var(--jkl-color-error-border-default)",subdued:"var(--jkl-color-error-border-subdued)",strong:"var(--jkl-color-error-border-strong)"}}},unit:{0:"var(--jkl-unit-0)",10:"var(--jkl-unit-10)",15:"var(--jkl-unit-15)",20:"var(--jkl-unit-20)",25:"var(--jkl-unit-25)",30:"var(--jkl-unit-30)",35:"var(--jkl-unit-35)",40:"var(--jkl-unit-40)",50:"var(--jkl-unit-50)",60:"var(--jkl-unit-60)",70:"var(--jkl-unit-70)",80:"var(--jkl-unit-80)",90:"var(--jkl-unit-90)",100:"var(--jkl-unit-100)",130:"var(--jkl-unit-130)",210:"var(--jkl-unit-210)",base:"var(--jkl-unit-base)","02":"var(--jkl-unit-02)","05":"var(--jkl-unit-05)"},spacing:{0:"var(--jkl-spacing-0)",2:"var(--jkl-spacing-2)",4:"var(--jkl-spacing-4)",8:"var(--jkl-spacing-8)",12:"var(--jkl-spacing-12)",16:"var(--jkl-spacing-16)",24:"var(--jkl-spacing-24)",32:"var(--jkl-spacing-32)",40:"var(--jkl-spacing-40)",64:"var(--jkl-spacing-64)",104:"var(--jkl-spacing-104)",168:"var(--jkl-spacing-168)",none:"var(--jkl-spacing-none)","2xs":"var(--jkl-spacing-2xs)",xs:"var(--jkl-spacing-xs)",s:"var(--jkl-spacing-s)",m:"var(--jkl-spacing-m)",l:"var(--jkl-spacing-l)",xl:"var(--jkl-spacing-xl)","2xl":"var(--jkl-spacing-2xl)"},border:{width:{1:"var(--jkl-border-width-1)",2:"var(--jkl-border-width-2)",3:"var(--jkl-border-width-3)"},radius:{none:"var(--jkl-border-radius-none)",xs:"var(--jkl-border-radius-xs)",s:"var(--jkl-border-radius-s)",m:"var(--jkl-border-radius-m)",l:"var(--jkl-border-radius-l)",full:"var(--jkl-border-radius-full)"}},breakpoint:{small:"0",medium:"680px",large:"1200px",xl:"1600px"},motion:{timing:{energetic:"var(--jkl-motion-timing-energetic)",snappy:"var(--jkl-motion-timing-snappy)",productive:"var(--jkl-motion-timing-productive)",polite:"var(--jkl-motion-timing-polite)",expressive:"var(--jkl-motion-timing-expressive)",lazy:"var(--jkl-motion-timing-lazy)"},easing:{standard:"var(--jkl-motion-easing-standard)",entrance:"var(--jkl-motion-easing-entrance)",exit:"var(--jkl-motion-easing-exit)",easeInBounceOut:"var(--jkl-motion-easing-ease-in-bounce-out)",focus:"var(--jkl-motion-easing-focus)"}},font:{size:{1:"var(--jkl-font-size-1)",2:"var(--jkl-font-size-2)",3:"var(--jkl-font-size-3)",4:"var(--jkl-font-size-4)",5:"var(--jkl-font-size-5)",6:"var(--jkl-font-size-6)",7:"var(--jkl-font-size-7)",8:"var(--jkl-font-size-8)",9:"var(--jkl-font-size-9)",10:"var(--jkl-font-size-10)"},weight:{normal:"var(--jkl-font-weight-normal)",bold:"var(--jkl-font-weight-bold)"},family:{regular:"var(--jkl-font-family-regular)",display:"var(--jkl-font-family-display)",mono:"var(--jkl-font-family-mono)",icons:"var(--jkl-font-family-icons)"}},lineHeight:{flush:"var(--jkl-line-height-flush)",tight:"var(--jkl-line-height-tight)",relaxed:"var(--jkl-line-height-relaxed)"},textStyle:{title:"var(--jkl-text-style-title)","title-small":"var(--jkl-text-style-title-small)","heading-1":"var(--jkl-text-style-heading-1)","heading-2":"var(--jkl-text-style-heading-2)","heading-3":"var(--jkl-text-style-heading-3)","heading-4":"var(--jkl-text-style-heading-4)","heading-5":"var(--jkl-text-style-heading-5)","paragraph-large":"var(--jkl-text-style-paragraph-large)","paragraph-medium":"var(--jkl-text-style-paragraph-medium)","paragraph-small":"var(--jkl-text-style-paragraph-small)","text-large":"var(--jkl-text-style-text-large)","text-medium":"var(--jkl-text-style-text-medium)","text-small":"var(--jkl-text-style-text-small)","text-micro":"var(--jkl-text-style-text-micro)"}};
 //# sourceMappingURL=tokens.cjs.map

package/build/cjs/tokens.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tokens.cjs","sources":["../../src/tokens.ts"],"sourcesContent":["/*\n Do not edit directly, this file was auto-generated.\n */\n\nexport default {\n color: {\n \"@\": {\n background: {\n page: \"var(--jkl-color-background-page)\",\n container: \"var(--jkl-color-background-container)\",\n \"container-accent\": \"var(--jkl-color-background-container-accent)\",\n contrast: \"var(--jkl-color-background-contrast)\",\n },\n text: {\n default: \"var(--jkl-color-text-default)\",\n subdued: \"var(--jkl-color-text-subdued)\",\n accent: \"var(--jkl-color-text-accent)\",\n \"on-contrast\": \"var(--jkl-color-text-on-contrast)\",\n },\n border: {\n default: \"var(--jkl-color-border-default)\",\n subdued: \"var(--jkl-color-border-subdued)\",\n strong: \"var(--jkl-color-border-strong)\",\n },\n },\n warning: {\n background: {\n page: \"var(--jkl-color-warning-background-page)\",\n container: \"var(--jkl-color-warning-background-container)\",\n \"container-accent\":\n \"var(--jkl-color-warning-background-container-accent)\",\n contrast: \"var(--jkl-color-warning-background-contrast)\",\n },\n text: {\n default: \"var(--jkl-color-warning-text-default)\",\n subdued: \"var(--jkl-color-warning-text-subdued)\",\n accent: \"var(--jkl-color-warning-text-accent)\",\n \"on-contrast\": \"var(--jkl-color-warning-text-on-contrast)\",\n },\n border: {\n default: \"var(--jkl-color-warning-border-default)\",\n subdued: \"var(--jkl-color-warning-border-subdued)\",\n strong: \"var(--jkl-color-warning-border-strong)\",\n },\n },\n success: {\n background: {\n page: \"var(--jkl-color-success-background-page)\",\n container: \"var(--jkl-color-success-background-container)\",\n \"container-accent\":\n \"var(--jkl-color-success-background-container-accent)\",\n contrast: \"var(--jkl-color-success-background-contrast)\",\n },\n text: {\n default: \"var(--jkl-color-success-text-default)\",\n subdued: \"var(--jkl-color-success-text-subdued)\",\n accent: \"var(--jkl-color-success-text-accent)\",\n \"on-contrast\": \"var(--jkl-color-success-text-on-contrast)\",\n },\n border: {\n default: \"var(--jkl-color-success-border-default)\",\n subdued: \"var(--jkl-color-success-border-subdued)\",\n strong: \"var(--jkl-color-success-border-strong)\",\n },\n },\n info: {\n background: {\n page: \"var(--jkl-color-info-background-page)\",\n container: \"var(--jkl-color-info-background-container)\",\n \"container-accent\": \"var(--jkl-color-info-background-container-accent)\",\n contrast: \"var(--jkl-color-info-background-contrast)\",\n },\n text: {\n default: \"var(--jkl-color-info-text-default)\",\n subdued: \"var(--jkl-color-info-text-subdued)\",\n accent: \"var(--jkl-color-info-text-accent)\",\n \"on-contrast\": \"var(--jkl-color-info-text-on-contrast)\",\n },\n border: {\n default: \"var(--jkl-color-info-border-default)\",\n subdued: \"var(--jkl-color-info-border-subdued)\",\n strong: \"var(--jkl-color-info-border-strong)\",\n },\n },\n error: {\n background: {\n page: \"var(--jkl-color-error-background-page)\",\n container: \"var(--jkl-color-error-background-container)\",\n \"container-accent\":\n \"var(--jkl-color-error-background-container-accent)\",\n contrast: \"var(--jkl-color-error-background-contrast)\",\n },\n text: {\n default: \"var(--jkl-color-error-text-default)\",\n subdued: \"var(--jkl-color-error-text-subdued)\",\n accent: \"var(--jkl-color-error-text-accent)\",\n \"on-contrast\": \"var(--jkl-color-error-text-on-contrast)\",\n },\n border: {\n default: \"var(--jkl-color-error-border-default)\",\n subdued: \"var(--jkl-color-error-border-subdued)\",\n strong: \"var(--jkl-color-error-border-strong)\",\n },\n },\n },\n unit: {\n 0: \"var(--jkl-unit-0)\",\n 10: \"var(--jkl-unit-10)\",\n 15: \"var(--jkl-unit-15)\",\n 20: \"var(--jkl-unit-20)\",\n 25: \"var(--jkl-unit-25)\",\n 30: \"var(--jkl-unit-30)\",\n 35: \"var(--jkl-unit-35)\",\n 40: \"var(--jkl-unit-40)\",\n 50: \"var(--jkl-unit-50)\",\n 60: \"var(--jkl-unit-60)\",\n 70: \"var(--jkl-unit-70)\",\n 80: \"var(--jkl-unit-80)\",\n 90: \"var(--jkl-unit-90)\",\n 100: \"var(--jkl-unit-100)\",\n 130: \"var(--jkl-unit-130)\",\n 210: \"var(--jkl-unit-210)\",\n base: \"var(--jkl-unit-base)\",\n \"02\": \"var(--jkl-unit-02)\",\n \"05\": \"var(--jkl-unit-05)\",\n },\n spacing: {\n 0: \"var(--jkl-spacing-0)\",\n 2: \"var(--jkl-spacing-2)\",\n 4: \"var(--jkl-spacing-4)\",\n 8: \"var(--jkl-spacing-8)\",\n 12: \"var(--jkl-spacing-12)\",\n 16: \"var(--jkl-spacing-16)\",\n 24: \"var(--jkl-spacing-24)\",\n 32: \"var(--jkl-spacing-32)\",\n 40: \"var(--jkl-spacing-40)\",\n 64: \"var(--jkl-spacing-64)\",\n 104: \"var(--jkl-spacing-104)\",\n 168: \"var(--jkl-spacing-168)\",\n none: \"var(--jkl-spacing-none)\",\n \"2xs\": \"var(--jkl-spacing-2xs)\",\n xs: \"var(--jkl-spacing-xs)\",\n s: \"var(--jkl-spacing-s)\",\n m: \"var(--jkl-spacing-m)\",\n l: \"var(--jkl-spacing-l)\",\n xl: \"var(--jkl-spacing-xl)\",\n \"2xl\": \"var(--jkl-spacing-2xl)\",\n },\n border: {\n width: {\n 1: \"var(--jkl-border-width-1)\",\n 2: \"var(--jkl-border-width-2)\",\n 3: \"var(--jkl-border-width-3)\",\n },\n radius: {\n none: \"var(--jkl-border-radius-none)\",\n xs: \"var(--jkl-border-radius-xs)\",\n s: \"var(--jkl-border-radius-s)\",\n m: \"var(--jkl-border-radius-m)\",\n l: \"var(--jkl-border-radius-l)\",\n full: \"var(--jkl-border-radius-full)\",\n },\n },\n breakpoint: {\n small: \"0\",\n medium: \"680px\",\n large: \"1200px\",\n xl: \"1600px\",\n },\n motion: {\n timing: {\n energetic: \"var(--jkl-motion-timing-energetic)\",\n snappy: \"var(--jkl-motion-timing-snappy)\",\n productive: \"var(--jkl-motion-timing-productive)\",\n polite: \"var(--jkl-motion-timing-polite)\",\n expressive: \"var(--jkl-motion-timing-expressive)\",\n lazy: \"var(--jkl-motion-timing-lazy)\",\n },\n easing: {\n standard: \"var(--jkl-motion-easing-standard)\",\n entrance: \"var(--jkl-motion-easing-entrance)\",\n exit: \"var(--jkl-motion-easing-exit)\",\n easeInBounceOut: \"var(--jkl-motion-easing-ease-in-bounce-out)\",\n focus: \"var(--jkl-motion-easing-focus)\",\n },\n },\n font: {\n size: {\n 1: \"var(--jkl-font-size-1)\",\n 2: \"var(--jkl-font-size-2)\",\n 3: \"var(--jkl-font-size-3)\",\n 4: \"var(--jkl-font-size-4)\",\n 5: \"var(--jkl-font-size-5)\",\n 6: \"var(--jkl-font-size-6)\",\n 7: \"var(--jkl-font-size-7)\",\n 8: \"var(--jkl-font-size-8)\",\n 9: \"var(--jkl-font-size-9)\",\n 10: \"var(--jkl-font-size-10)\",\n },\n weight: {\n normal: \"var(--jkl-font-weight-normal)\",\n bold: \"var(--jkl-font-weight-bold)\",\n },\n family: {\n regular: \"var(--jkl-font-family-regular)\",\n display: \"var(--jkl-font-family-display)\",\n mono: \"var(--jkl-font-family-mono)\",\n },\n },\n lineHeight: {\n flush: \"var(--jkl-line-height-flush)\",\n tight: \"var(--jkl-line-height-tight)\",\n relaxed: \"var(--jkl-line-height-relaxed)\",\n },\n textStyle: {\n title: \"var(--jkl-text-style-title)\",\n \"title-small\": \"var(--jkl-text-style-title-small)\",\n \"heading-1\": \"var(--jkl-text-style-heading-1)\",\n \"heading-2\": \"var(--jkl-text-style-heading-2)\",\n \"heading-3\": \"var(--jkl-text-style-heading-3)\",\n \"heading-4\": \"var(--jkl-text-style-heading-4)\",\n \"heading-5\": \"var(--jkl-text-style-heading-5)\",\n \"paragraph-large\": \"var(--jkl-text-style-paragraph-large)\",\n \"paragraph-medium\": \"var(--jkl-text-style-paragraph-medium)\",\n \"paragraph-small\": \"var(--jkl-text-style-paragraph-small)\",\n \"text-large\": \"var(--jkl-text-style-text-large)\",\n \"text-medium\": \"var(--jkl-text-style-text-medium)\",\n \"text-small\": \"var(--jkl-text-style-text-small)\",\n \"text-micro\": \"var(--jkl-text-style-text-micro)\",\n },\n};\n"],"names":["color","background","page","container","contrast","text","default","subdued","accent","border","strong","warning","success","info","error","unit","base","spacing","none","xs","s","m","l","xl","width","radius","full","breakpoint","small","medium","large","motion","timing","energetic","snappy","productive","polite","expressive","lazy","easing","standard","entrance","exit","easeInBounceOut","focus","font","size","weight","normal","bold","family","regular","display","mono","lineHeight","flush","tight","relaxed","textStyle","title"],"mappings":"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"}
1	+ {"version":3,"file":"tokens.cjs","sources":["../../src/tokens.ts"],"sourcesContent":["/*\n Do not edit directly, this file was auto-generated.\n */\n\nexport default {\n color: {\n \"@\": {\n background: {\n page: \"var(--jkl-color-background-page)\",\n container: \"var(--jkl-color-background-container)\",\n \"container-accent\": \"var(--jkl-color-background-container-accent)\",\n contrast: \"var(--jkl-color-background-contrast)\",\n },\n text: {\n default: \"var(--jkl-color-text-default)\",\n subdued: \"var(--jkl-color-text-subdued)\",\n accent: \"var(--jkl-color-text-accent)\",\n \"on-contrast\": \"var(--jkl-color-text-on-contrast)\",\n },\n border: {\n default: \"var(--jkl-color-border-default)\",\n subdued: \"var(--jkl-color-border-subdued)\",\n strong: \"var(--jkl-color-border-strong)\",\n },\n },\n warning: {\n background: {\n page: \"var(--jkl-color-warning-background-page)\",\n container: \"var(--jkl-color-warning-background-container)\",\n \"container-accent\":\n \"var(--jkl-color-warning-background-container-accent)\",\n contrast: \"var(--jkl-color-warning-background-contrast)\",\n },\n text: {\n default: \"var(--jkl-color-warning-text-default)\",\n subdued: \"var(--jkl-color-warning-text-subdued)\",\n accent: \"var(--jkl-color-warning-text-accent)\",\n \"on-contrast\": \"var(--jkl-color-warning-text-on-contrast)\",\n },\n border: {\n default: \"var(--jkl-color-warning-border-default)\",\n subdued: \"var(--jkl-color-warning-border-subdued)\",\n strong: \"var(--jkl-color-warning-border-strong)\",\n },\n },\n success: {\n background: {\n page: \"var(--jkl-color-success-background-page)\",\n container: \"var(--jkl-color-success-background-container)\",\n \"container-accent\":\n \"var(--jkl-color-success-background-container-accent)\",\n contrast: \"var(--jkl-color-success-background-contrast)\",\n },\n text: {\n default: \"var(--jkl-color-success-text-default)\",\n subdued: \"var(--jkl-color-success-text-subdued)\",\n accent: \"var(--jkl-color-success-text-accent)\",\n \"on-contrast\": \"var(--jkl-color-success-text-on-contrast)\",\n },\n border: {\n default: \"var(--jkl-color-success-border-default)\",\n subdued: \"var(--jkl-color-success-border-subdued)\",\n strong: \"var(--jkl-color-success-border-strong)\",\n },\n },\n info: {\n background: {\n page: \"var(--jkl-color-info-background-page)\",\n container: \"var(--jkl-color-info-background-container)\",\n \"container-accent\": \"var(--jkl-color-info-background-container-accent)\",\n contrast: \"var(--jkl-color-info-background-contrast)\",\n },\n text: {\n default: \"var(--jkl-color-info-text-default)\",\n subdued: \"var(--jkl-color-info-text-subdued)\",\n accent: \"var(--jkl-color-info-text-accent)\",\n \"on-contrast\": \"var(--jkl-color-info-text-on-contrast)\",\n },\n border: {\n default: \"var(--jkl-color-info-border-default)\",\n subdued: \"var(--jkl-color-info-border-subdued)\",\n strong: \"var(--jkl-color-info-border-strong)\",\n },\n },\n error: {\n background: {\n page: \"var(--jkl-color-error-background-page)\",\n container: \"var(--jkl-color-error-background-container)\",\n \"container-accent\":\n \"var(--jkl-color-error-background-container-accent)\",\n contrast: \"var(--jkl-color-error-background-contrast)\",\n },\n text: {\n default: \"var(--jkl-color-error-text-default)\",\n subdued: \"var(--jkl-color-error-text-subdued)\",\n accent: \"var(--jkl-color-error-text-accent)\",\n \"on-contrast\": \"var(--jkl-color-error-text-on-contrast)\",\n },\n border: {\n default: \"var(--jkl-color-error-border-default)\",\n subdued: \"var(--jkl-color-error-border-subdued)\",\n strong: \"var(--jkl-color-error-border-strong)\",\n },\n },\n },\n unit: {\n 0: \"var(--jkl-unit-0)\",\n 10: \"var(--jkl-unit-10)\",\n 15: \"var(--jkl-unit-15)\",\n 20: \"var(--jkl-unit-20)\",\n 25: \"var(--jkl-unit-25)\",\n 30: \"var(--jkl-unit-30)\",\n 35: \"var(--jkl-unit-35)\",\n 40: \"var(--jkl-unit-40)\",\n 50: \"var(--jkl-unit-50)\",\n 60: \"var(--jkl-unit-60)\",\n 70: \"var(--jkl-unit-70)\",\n 80: \"var(--jkl-unit-80)\",\n 90: \"var(--jkl-unit-90)\",\n 100: \"var(--jkl-unit-100)\",\n 130: \"var(--jkl-unit-130)\",\n 210: \"var(--jkl-unit-210)\",\n base: \"var(--jkl-unit-base)\",\n \"02\": \"var(--jkl-unit-02)\",\n \"05\": \"var(--jkl-unit-05)\",\n },\n spacing: {\n 0: \"var(--jkl-spacing-0)\",\n 2: \"var(--jkl-spacing-2)\",\n 4: \"var(--jkl-spacing-4)\",\n 8: \"var(--jkl-spacing-8)\",\n 12: \"var(--jkl-spacing-12)\",\n 16: \"var(--jkl-spacing-16)\",\n 24: \"var(--jkl-spacing-24)\",\n 32: \"var(--jkl-spacing-32)\",\n 40: \"var(--jkl-spacing-40)\",\n 64: \"var(--jkl-spacing-64)\",\n 104: \"var(--jkl-spacing-104)\",\n 168: \"var(--jkl-spacing-168)\",\n none: \"var(--jkl-spacing-none)\",\n \"2xs\": \"var(--jkl-spacing-2xs)\",\n xs: \"var(--jkl-spacing-xs)\",\n s: \"var(--jkl-spacing-s)\",\n m: \"var(--jkl-spacing-m)\",\n l: \"var(--jkl-spacing-l)\",\n xl: \"var(--jkl-spacing-xl)\",\n \"2xl\": \"var(--jkl-spacing-2xl)\",\n },\n border: {\n width: {\n 1: \"var(--jkl-border-width-1)\",\n 2: \"var(--jkl-border-width-2)\",\n 3: \"var(--jkl-border-width-3)\",\n },\n radius: {\n none: \"var(--jkl-border-radius-none)\",\n xs: \"var(--jkl-border-radius-xs)\",\n s: \"var(--jkl-border-radius-s)\",\n m: \"var(--jkl-border-radius-m)\",\n l: \"var(--jkl-border-radius-l)\",\n full: \"var(--jkl-border-radius-full)\",\n },\n },\n breakpoint: {\n small: \"0\",\n medium: \"680px\",\n large: \"1200px\",\n xl: \"1600px\",\n },\n motion: {\n timing: {\n energetic: \"var(--jkl-motion-timing-energetic)\",\n snappy: \"var(--jkl-motion-timing-snappy)\",\n productive: \"var(--jkl-motion-timing-productive)\",\n polite: \"var(--jkl-motion-timing-polite)\",\n expressive: \"var(--jkl-motion-timing-expressive)\",\n lazy: \"var(--jkl-motion-timing-lazy)\",\n },\n easing: {\n standard: \"var(--jkl-motion-easing-standard)\",\n entrance: \"var(--jkl-motion-easing-entrance)\",\n exit: \"var(--jkl-motion-easing-exit)\",\n easeInBounceOut: \"var(--jkl-motion-easing-ease-in-bounce-out)\",\n focus: \"var(--jkl-motion-easing-focus)\",\n },\n },\n font: {\n size: {\n 1: \"var(--jkl-font-size-1)\",\n 2: \"var(--jkl-font-size-2)\",\n 3: \"var(--jkl-font-size-3)\",\n 4: \"var(--jkl-font-size-4)\",\n 5: \"var(--jkl-font-size-5)\",\n 6: \"var(--jkl-font-size-6)\",\n 7: \"var(--jkl-font-size-7)\",\n 8: \"var(--jkl-font-size-8)\",\n 9: \"var(--jkl-font-size-9)\",\n 10: \"var(--jkl-font-size-10)\",\n },\n weight: {\n normal: \"var(--jkl-font-weight-normal)\",\n bold: \"var(--jkl-font-weight-bold)\",\n },\n family: {\n regular: \"var(--jkl-font-family-regular)\",\n display: \"var(--jkl-font-family-display)\",\n mono: \"var(--jkl-font-family-mono)\",\n icons: \"var(--jkl-font-family-icons)\",\n },\n },\n lineHeight: {\n flush: \"var(--jkl-line-height-flush)\",\n tight: \"var(--jkl-line-height-tight)\",\n relaxed: \"var(--jkl-line-height-relaxed)\",\n },\n textStyle: {\n title: \"var(--jkl-text-style-title)\",\n \"title-small\": \"var(--jkl-text-style-title-small)\",\n \"heading-1\": \"var(--jkl-text-style-heading-1)\",\n \"heading-2\": \"var(--jkl-text-style-heading-2)\",\n \"heading-3\": \"var(--jkl-text-style-heading-3)\",\n \"heading-4\": \"var(--jkl-text-style-heading-4)\",\n \"heading-5\": \"var(--jkl-text-style-heading-5)\",\n \"paragraph-large\": \"var(--jkl-text-style-paragraph-large)\",\n \"paragraph-medium\": \"var(--jkl-text-style-paragraph-medium)\",\n \"paragraph-small\": \"var(--jkl-text-style-paragraph-small)\",\n \"text-large\": \"var(--jkl-text-style-text-large)\",\n \"text-medium\": \"var(--jkl-text-style-text-medium)\",\n \"text-small\": \"var(--jkl-text-style-text-small)\",\n \"text-micro\": \"var(--jkl-text-style-text-micro)\",\n },\n};\n"],"names":["color","background","page","container","contrast","text","default","subdued","accent","border","strong","warning","success","info","error","unit","base","spacing","none","xs","s","m","l","xl","width","radius","full","breakpoint","small","medium","large","motion","timing","energetic","snappy","productive","polite","expressive","lazy","easing","standard","entrance","exit","easeInBounceOut","focus","font","size","weight","normal","bold","family","regular","display","mono","icons","lineHeight","flush","tight","relaxed","textStyle","title"],"mappings":"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"}

package/build/cjs/tokens.d.cts CHANGED Viewed

@@ -201,6 +201,7 @@ declare const _default: {
             regular: string;
             display: string;
             mono: string;
+            icons: string;
         };
     };
     lineHeight: {

package/build/es/components/combobox/Combobox.js CHANGED Viewed

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