npm - @fremtind/jokul - Versions diffs - 1.5.1 → 1.6.0 - Mend

@fremtind/jokul 1.5.1 → 1.6.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 (74) hide show

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Combobox.js","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> = ({\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 density,\n name,\n className,\n invalid,\n hasTagHover,\n}) => {\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 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 density={density}\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 <div className=\"jkl-combobox__actions\">\n <IconButton\n id={buttonId}\n onFocus={handleFocus}\n onBlur={handleBlur}\n className=\"jkl-combobox__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\n pointingDown={isPointingDown}\n />\n </IconButton>\n </div>\n </div>\n )}\n />\n );\n};\nCombobox.displayName = \"Combobox\";\n"],"names":["getComboboxValuePair","item","value","label","Combobox","id","placeholder","items","onChange","onFocus","onBlur","noMatchingOption","labelProps","helpLabel","errorLabel","width","density","name","className","invalid","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","description","CheckIcon","IconButton","previous","onMouseDown","ArrowVerticalAnimated","pointingDown","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"Combobox.js","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> = ({\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 density,\n name,\n className,\n invalid,\n description,\n hasTagHover,\n}) => {\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 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 density={density}\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 <div className=\"jkl-combobox__actions\">\n <IconButton\n id={buttonId}\n onFocus={handleFocus}\n onBlur={handleBlur}\n className=\"jkl-combobox__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\n pointingDown={isPointingDown}\n />\n </IconButton>\n </div>\n </div>\n )}\n />\n );\n};\nCombobox.displayName = \"Combobox\";\n"],"names":["getComboboxValuePair","item","value","label","Combobox","id","placeholder","items","onChange","onFocus","onBlur","noMatchingOption","labelProps","helpLabel","errorLabel","width","density","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/es/components/datepicker/DatePicker.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{startOfDay as r}from"date-fns";import{forwardRef as o,useState as n,useRef as l,useCallback as s}from"react";import{flushSync as i}from"react-dom";import{IconButton as u}from"../icon-button/IconButton.js";import{CalendarIcon as d}from"../icon/icons/CalendarIcon.js";import{InputGroup as c}from"../input-group/InputGroup.js";import{Popover as p}from"../popover/Popover.js";import{BaseTextInput as m}from"../text-input/BaseTextInput.js";import{Calendar as f}from"./internal/Calendar.js";import{getInitialDate as v}from"./internal/utils.js";import{parseDateString as h,formatInput as b}from"./utils.js";import{isWithinLowerBound as k,isWithinUpperBound as D}from"./validation.js";const g=o(((o,g)=>{const{"data-testautoid":y,id:j,className:L="",label:w="Velg dato",labelProps:C,defaultValue:I,defaultShow:x=!1,value:P,disableBeforeDate:B,disableAfterDate:_,yearsToShow:E,name:O,helpLabel:T,errorLabel:N,invalid:S,density:R,days:U,months:V,monthLabel:F,yearLabel:K,placeholder:W="dd.mm.åååå",width:A="11.25rem",onChange:G,onBlur:q,onFocus:H,onKeyDown:M,action:z,showCalendarLabel:J="Åpne kalender",hideCalendarLabel:Q="Lukk kalender",supportLabelProps:X,tooltip:Y,textInputProps:Z,...$}=o;"production"!==process.env.NODE_ENV&&P&&I&&console.warn("DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.");const ee=h(B),te=ee?r(ee):void 0,ae=h(_),re=ae?r(ae):void 0,[oe,ne]=n(v(P,I,te,re)),[le,se]=n(null),[ie,ue]=n(x),de=l(null),ce=l(null),pe=l(null),me=l(null),fe=s((e=>{me.current=e,g&&("function"==typeof g?g(e):g.current=e)}),[g]),ve=s((e=>{H&&ce.current&&(ce.current.contains(e.relatedTarget)||H(e,oe,{error:le,value:e.target.value}))}),[H,oe,le]),he=s((e=>{q&&q(e,oe,{error:le,value:e.target.value})}),[q,oe,le]),be=s((e=>{"Escape"===e.key&&(ue(!1),e.preventDefault(),e.stopPropagation()),z?.onKeyDown&&z.onKeyDown(e)}),[z]),ke=s((e=>{let t=null,a=null;if(e.target.value){const r=h(e.target.value);r?te&&!k(r,te)?a="OUTSIDE_LOWER_BOUND":re&&!D(r,re)?a="OUTSIDE_UPPER_BOUND":ue(!1):a="WRONG_FORMAT",t=r||null}se(a),ne(t),G&&G(e,t,{error:a,value:e.target.value})}),[G,te,re]),De=s((e=>{i((()=>{ue(!ie)}));const t=de.current,a=t&&t.querySelector('[aria-pressed="true"]');window.requestAnimationFrame((()=>a?.focus())),z?.onClick&&z.onClick(e)}),[ie,z]),ge=s((({date:e})=>{if(ue(!1),ne(e),me.current){const t=me.current;t.value=b(e);const a=document.createEvent("HTMLEvents");a.initEvent("input",!0,!1),t.dispatchEvent(a),t.focus(),G&&G(a,e,{error:null,value:t.value})}}),[G]),ye=s((e=>{e.preventDefault(),ue(!1),pe.current?.focus()}),[]);return e(c,{id:j,className:a("jkl-datepicker",L),...$,ref:ce,label:w,labelProps:C,density:R,helpLabel:T,errorLabel:N,supportLabelProps:X,tooltip:Y,render:a=>e(m,{"data-focused":ie?"true":void 0,ref:fe,"data-testid":"jkl-datepicker__input","data-testautoid":y,className:"jkl-datepicker__input",name:O,defaultValue:I,density:R,value:P,type:"text",placeholder:W,width:A,onFocus:ve,onBlur:he,onChange:ke,actionButton:t(p,{positionReference:me,open:ie,onOpenChange:()=>ue(!ie),offset:8,children:[e(p.Trigger,{...z,"data-testid":"jkl-datepicker__trigger",className:"jkl-text-input-action-button",title:ie?Q:J,tabIndex:0,onClick:De,onKeyDown:be,asChild:!0,children:e(u,{children:e(d,{})})}),e(p.Content,{initialFocus:-1,padding:24,children:e(f,{ref:de,density:R,date:oe,minDate:te,maxDate:re,days:U,months:V,monthLabel:F,yearLabel:K,yearsToShow:E,onDateSelected:ge,onTabOutside:ye})})]}),...Z,...a,"aria-invalid":S||!!N})})}));g.displayName="DatePicker";export{g as DatePicker};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{startOfDay as r}from"date-fns";import{forwardRef as o,useState as n,useRef as l,useCallback as s}from"react";import{flushSync as i}from"react-dom";import{IconButton as u}from"../icon-button/IconButton.js";import{CalendarIcon as d}from"../icon/icons/CalendarIcon.js";import{InputGroup as c}from"../input-group/InputGroup.js";import{Popover as p}from"../popover/Popover.js";import{BaseTextInput as m}from"../text-input/BaseTextInput.js";import{Calendar as f}from"./internal/Calendar.js";import{getInitialDate as v}from"./internal/utils.js";import{parseDateString as h,formatInput as b}from"./utils.js";import{isWithinLowerBound as k,isWithinUpperBound as D}from"./validation.js";const g=o(((o,g)=>{const{"data-testautoid":y,id:j,className:L="",label:w="Velg dato",labelProps:C,defaultValue:I,defaultShow:x=!1,value:P,disableBeforeDate:B,disableAfterDate:_,yearsToShow:E,name:O,helpLabel:T,errorLabel:N,invalid:S,density:R,days:U,months:V,monthLabel:F,yearLabel:K,placeholder:W="dd.mm.åååå",width:A="11.25rem",onChange:G,onBlur:q,onFocus:H,onKeyDown:M,action:z,showCalendarLabel:J="Åpne kalender",hideCalendarLabel:Q="Lukk kalender",supportLabelProps:X,tooltip:Y,textInputProps:Z,description:$,...ee}=o;"production"!==process.env.NODE_ENV&&P&&I&&console.warn("DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.");const te=h(B),ae=te?r(te):void 0,re=h(_),oe=re?r(re):void 0,[ne,le]=n(v(P,I,ae,oe)),[se,ie]=n(null),[ue,de]=n(x),ce=l(null),pe=l(null),me=l(null),fe=l(null),ve=s((e=>{fe.current=e,g&&("function"==typeof g?g(e):g.current=e)}),[g]),he=s((e=>{H&&pe.current&&(pe.current.contains(e.relatedTarget)||H(e,ne,{error:se,value:e.target.value}))}),[H,ne,se]),be=s((e=>{q&&q(e,ne,{error:se,value:e.target.value})}),[q,ne,se]),ke=s((e=>{"Escape"===e.key&&(de(!1),e.preventDefault(),e.stopPropagation()),z?.onKeyDown&&z.onKeyDown(e)}),[z]),De=s((e=>{let t=null,a=null;if(e.target.value){const r=h(e.target.value);r?ae&&!k(r,ae)?a="OUTSIDE_LOWER_BOUND":oe&&!D(r,oe)?a="OUTSIDE_UPPER_BOUND":de(!1):a="WRONG_FORMAT",t=r||null}ie(a),le(t),G&&G(e,t,{error:a,value:e.target.value})}),[G,ae,oe]),ge=s((e=>{i((()=>{de(!ue)}));const t=ce.current,a=t&&t.querySelector('[aria-pressed="true"]');window.requestAnimationFrame((()=>a?.focus())),z?.onClick&&z.onClick(e)}),[ue,z]),ye=s((({date:e})=>{if(de(!1),le(e),fe.current){const t=fe.current;t.value=b(e);const a=document.createEvent("HTMLEvents");a.initEvent("input",!0,!1),t.dispatchEvent(a),t.focus(),G&&G(a,e,{error:null,value:t.value})}}),[G]),je=s((e=>{e.preventDefault(),de(!1),me.current?.focus()}),[]);return e(c,{id:j,className:a("jkl-datepicker",L),...ee,ref:pe,label:w,labelProps:C,density:R,helpLabel:T,errorLabel:N,supportLabelProps:X,tooltip:Y,description:$,render:a=>e(m,{"data-focused":ue?"true":void 0,ref:ve,"data-testid":"jkl-datepicker__input","data-testautoid":y,className:"jkl-datepicker__input",name:O,defaultValue:I,density:R,value:P,type:"text",placeholder:W,width:A,onFocus:he,onBlur:be,onChange:De,actionButton:t(p,{positionReference:fe,open:ue,onOpenChange:()=>de(!ue),offset:8,children:[e(p.Trigger,{...z,"data-testid":"jkl-datepicker__trigger",className:"jkl-text-input-action-button",title:ue?Q:J,tabIndex:0,onClick:ge,onKeyDown:ke,asChild:!0,children:e(u,{children:e(d,{})})}),e(p.Content,{initialFocus:-1,padding:24,children:e(f,{ref:ce,density:R,date:ne,minDate:ae,maxDate:oe,days:U,months:V,monthLabel:F,yearLabel:K,yearsToShow:E,onDateSelected:ye,onTabOutside:je})})]}),...Z,...a,"aria-invalid":S||!!N})})}));g.displayName="DatePicker";export{g as DatePicker};
 //# sourceMappingURL=DatePicker.js.map

package/build/es/components/datepicker/DatePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePicker.js","sources":["../../../../src/components/datepicker/DatePicker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { startOfDay } from \"date-fns\";\nimport React, {\n type ChangeEvent,\n type FocusEvent,\n type KeyboardEvent,\n type MouseEvent,\n forwardRef,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CalendarIcon } from \"../icon/icons/CalendarIcon.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport Popover from \"../popover/Popover.js\";\nimport { BaseTextInput } from \"../text-input/BaseTextInput.js\";\nimport { Calendar } from \"./internal/Calendar.js\";\nimport { type DateInfo, getInitialDate } from \"./internal/utils.js\";\nimport type { DatePickerProps, DateValidationError } from \"./types.js\";\nimport { formatInput, parseDateString } from \"./utils.js\";\nimport { isWithinLowerBound, isWithinUpperBound } from \"./validation.js\";\n\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(\n (props, forwardedInputRef) => {\n const {\n \"data-testautoid\": testAutoId,\n id,\n className = \"\",\n label = \"Velg dato\",\n labelProps,\n defaultValue,\n defaultShow = false,\n value,\n disableBeforeDate: disableBefore,\n disableAfterDate: disableAfter,\n yearsToShow,\n name,\n helpLabel,\n errorLabel,\n invalid,\n density,\n days,\n months,\n monthLabel,\n yearLabel,\n placeholder = \"dd.mm.åååå\",\n width = \"11.25rem\",\n onChange,\n onBlur,\n onFocus,\n onKeyDown,\n action,\n showCalendarLabel = \"Åpne kalender\",\n hideCalendarLabel = \"Lukk kalender\",\n supportLabelProps,\n tooltip,\n textInputProps,\n ...rest\n } = props;\n\n if (process.env.NODE_ENV !== \"production\" && value && defaultValue) {\n console.warn(\n \"DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.\",\n );\n }\n /// Input state\n\n const disableBeforeDate = parseDateString(disableBefore);\n const minDate = disableBeforeDate\n ? startOfDay(disableBeforeDate)\n : undefined;\n const disableAfterDate = parseDateString(disableAfter);\n const maxDate = disableAfterDate\n ? startOfDay(disableAfterDate)\n : undefined;\n\n const [date, setDate] = useState(\n getInitialDate(value, defaultValue, minDate, maxDate),\n );\n const [error, setError] = useState<DateValidationError \| null>(null);\n\n /// Calendar state\n\n const [showCalendar, setShowCalendar] = useState(defaultShow);\n\n const calendarRef = useRef<HTMLDivElement>(null);\n const datepickerRef = useRef<HTMLDivElement>(null);\n\n /// Input events\n\n const iconButtonRef = useRef<HTMLButtonElement \| null>(null);\n const inputRef = useRef<HTMLInputElement \| null>(null);\n\n // Hjelper for å gjøre det enklere å både forwarde refen men også bruke den selv internt\n const unifiedInputRef = useCallback(\n (instance: HTMLInputElement \| null) => {\n inputRef.current = instance;\n if (forwardedInputRef) {\n if (typeof forwardedInputRef === \"function\") {\n forwardedInputRef(instance);\n } else {\n forwardedInputRef.current = instance;\n }\n }\n },\n [forwardedInputRef],\n );\n\n const handleFocus = useCallback(\n (e: FocusEvent<HTMLInputElement>) => {\n if (!onFocus \|\| !datepickerRef.current) {\n return;\n }\n\n const nextFocusIsInside = datepickerRef.current.contains(\n e.relatedTarget as Node,\n );\n if (!nextFocusIsInside) {\n onFocus(e, date, { error, value: e.target.value });\n }\n },\n [onFocus, date, error],\n );\n\n const handleBlur = useCallback(\n (e: FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(e, date, { error, value: e.target.value });\n }\n },\n [onBlur, date, error],\n );\n\n const handleKeyDownAction = useCallback(\n (e: React.KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === \"Escape\") {\n setShowCalendar(false);\n e.preventDefault();\n e.stopPropagation();\n }\n\n if (action?.onKeyDown) {\n action.onKeyDown(e);\n }\n },\n [action],\n );\n\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n let nextDate: Date \| null = null;\n let nextError: DateValidationError \| null = null;\n\n if (e.target.value) {\n const val = parseDateString(e.target.value);\n if (!val) {\n nextError = \"WRONG_FORMAT\";\n } else if (minDate && !isWithinLowerBound(val, minDate)) {\n nextError = \"OUTSIDE_LOWER_BOUND\";\n } else if (maxDate && !isWithinUpperBound(val, maxDate)) {\n nextError = \"OUTSIDE_UPPER_BOUND\";\n } else {\n setShowCalendar(false);\n }\n nextDate = val \|\| null;\n }\n\n setError(nextError);\n setDate(nextDate);\n\n if (onChange) {\n onChange(e, nextDate, {\n error: nextError,\n value: e.target.value,\n });\n }\n },\n [onChange, minDate, maxDate],\n );\n\n /// Calendar events\n\n const clickCalendar = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n flushSync(() => {\n setShowCalendar(!showCalendar);\n });\n\n const calendarEl = calendarRef.current;\n const button =\n calendarEl &&\n (calendarEl.querySelector(\n '[aria-pressed=\"true\"]',\n ) as HTMLButtonElement);\n // Make sure the popover-modal is correctly positioned before focusing a button\n // so we avoid accidentally scrolling to the top of the page\n window.requestAnimationFrame(() => button?.focus());\n\n if (action?.onClick) {\n action.onClick(e);\n }\n },\n [showCalendar, action],\n );\n\n const handleClickCalendarDay = useCallback(\n ({ date }: DateInfo) => {\n setShowCalendar(false);\n setDate(date);\n\n if (inputRef.current) {\n const node = inputRef.current;\n\n node.value = formatInput(date);\n\n // Simulér et change-event så APIet blir så likt som mulig en endring av inputfeltet\n const event = document.createEvent(\"HTMLEvents\");\n event.initEvent(\"input\", true, false);\n node.dispatchEvent(event);\n\n node.focus();\n\n if (onChange) {\n // Det er ikke helt sant at dette er et React.SyntheticEvent, men it's fine – probably?\n // Den har tingene man kan forvente, men hvis du gjør serdeles fancy ting med events\n // så kan det hende du må utvide denne for å dekke behovet ditt.\n onChange(\n event as unknown as ChangeEvent<HTMLInputElement>,\n date,\n {\n error: null,\n value: node.value,\n },\n );\n }\n }\n },\n [onChange],\n );\n\n const handleTabOutsideCalendar = useCallback((e: KeyboardEvent) => {\n e.preventDefault();\n setShowCalendar(false);\n iconButtonRef.current?.focus();\n }, []);\n\n return (\n <InputGroup\n id={id}\n className={clsx(\"jkl-datepicker\", className)}\n {...rest}\n ref={datepickerRef}\n label={label}\n labelProps={labelProps}\n density={density}\n helpLabel={helpLabel}\n errorLabel={errorLabel}\n supportLabelProps={supportLabelProps}\n tooltip={tooltip}\n render={(inputProps) => (\n <BaseTextInput\n data-focused={showCalendar ? \"true\" : undefined}\n ref={unifiedInputRef}\n data-testid=\"jkl-datepicker__input\"\n data-testautoid={testAutoId}\n className=\"jkl-datepicker__input\"\n name={name}\n defaultValue={defaultValue}\n density={density}\n value={value}\n type=\"text\"\n placeholder={placeholder}\n width={width}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChange={handleChange}\n actionButton={\n <Popover\n positionReference={inputRef}\n open={showCalendar}\n onOpenChange={() =>\n setShowCalendar(!showCalendar)\n }\n offset={8}\n >\n <Popover.Trigger\n {...action}\n data-testid=\"jkl-datepicker__trigger\"\n className=\"jkl-text-input-action-button\"\n title={\n showCalendar\n ? hideCalendarLabel\n : showCalendarLabel\n }\n tabIndex={0}\n onClick={clickCalendar}\n onKeyDown={handleKeyDownAction}\n asChild\n >\n <IconButton>\n <CalendarIcon />\n </IconButton>\n </Popover.Trigger>\n <Popover.Content initialFocus={-1} padding={24}>\n <Calendar\n ref={calendarRef}\n density={density}\n date={date}\n minDate={minDate}\n maxDate={maxDate}\n days={days}\n months={months}\n monthLabel={monthLabel}\n yearLabel={yearLabel}\n yearsToShow={yearsToShow}\n onDateSelected={handleClickCalendarDay}\n onTabOutside={handleTabOutsideCalendar}\n />\n </Popover.Content>\n </Popover>\n }\n {...textInputProps}\n {...inputProps}\n aria-invalid={invalid \|\| !!errorLabel}\n />\n )}\n />\n );\n },\n);\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":["DatePicker","forwardRef","props","forwardedInputRef","testAutoId","id","className","label","labelProps","defaultValue","defaultShow","value","disableBeforeDate","disableBefore","disableAfterDate","disableAfter","yearsToShow","name","helpLabel","errorLabel","invalid","density","days","months","monthLabel","yearLabel","placeholder","width","onChange","onBlur","onFocus","onKeyDown","action","showCalendarLabel","hideCalendarLabel","supportLabelProps","tooltip","textInputProps","rest","process","env","NODE_ENV","console","warn","parseDateString","minDate","startOfDay","maxDate","date","setDate","useState","getInitialDate","error","setError","showCalendar","setShowCalendar","calendarRef","useRef","datepickerRef","iconButtonRef","inputRef","unifiedInputRef","useCallback","instance","current","handleFocus","e","contains","relatedTarget","target","handleBlur","handleKeyDownAction","key","preventDefault","stopPropagation","handleChange","nextDate","nextError","val","isWithinLowerBound","isWithinUpperBound","clickCalendar","flushSync","calendarEl","button","querySelector","window","requestAnimationFrame","focus","onClick","handleClickCalendarDay","node","formatInput","event","document","createEvent","initEvent","dispatchEvent","handleTabOutsideCalendar","jsx","InputGroup","clsx","ref","render","inputProps","BaseTextInput","type","actionButton","jsxs","Popover","positionReference","open","onOpenChange","offset","children","Trigger","title","tabIndex","asChild","IconButton","CalendarIcon","Content","initialFocus","padding","Calendar","onDateSelected","onTabOutside","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"DatePicker.js","sources":["../../../../src/components/datepicker/DatePicker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { startOfDay } from \"date-fns\";\nimport React, {\n type ChangeEvent,\n type FocusEvent,\n type KeyboardEvent,\n type MouseEvent,\n forwardRef,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CalendarIcon } from \"../icon/icons/CalendarIcon.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport Popover from \"../popover/Popover.js\";\nimport { BaseTextInput } from \"../text-input/BaseTextInput.js\";\nimport { Calendar } from \"./internal/Calendar.js\";\nimport { type DateInfo, getInitialDate } from \"./internal/utils.js\";\nimport type { DatePickerProps, DateValidationError } from \"./types.js\";\nimport { formatInput, parseDateString } from \"./utils.js\";\nimport { isWithinLowerBound, isWithinUpperBound } from \"./validation.js\";\n\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(\n (props, forwardedInputRef) => {\n const {\n \"data-testautoid\": testAutoId,\n id,\n className = \"\",\n label = \"Velg dato\",\n labelProps,\n defaultValue,\n defaultShow = false,\n value,\n disableBeforeDate: disableBefore,\n disableAfterDate: disableAfter,\n yearsToShow,\n name,\n helpLabel,\n errorLabel,\n invalid,\n density,\n days,\n months,\n monthLabel,\n yearLabel,\n placeholder = \"dd.mm.åååå\",\n width = \"11.25rem\",\n onChange,\n onBlur,\n onFocus,\n onKeyDown,\n action,\n showCalendarLabel = \"Åpne kalender\",\n hideCalendarLabel = \"Lukk kalender\",\n supportLabelProps,\n tooltip,\n textInputProps,\n description,\n ...rest\n } = props;\n\n if (process.env.NODE_ENV !== \"production\" && value && defaultValue) {\n console.warn(\n \"DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.\",\n );\n }\n /// Input state\n\n const disableBeforeDate = parseDateString(disableBefore);\n const minDate = disableBeforeDate\n ? startOfDay(disableBeforeDate)\n : undefined;\n const disableAfterDate = parseDateString(disableAfter);\n const maxDate = disableAfterDate\n ? startOfDay(disableAfterDate)\n : undefined;\n\n const [date, setDate] = useState(\n getInitialDate(value, defaultValue, minDate, maxDate),\n );\n const [error, setError] = useState<DateValidationError \| null>(null);\n\n /// Calendar state\n\n const [showCalendar, setShowCalendar] = useState(defaultShow);\n\n const calendarRef = useRef<HTMLDivElement>(null);\n const datepickerRef = useRef<HTMLDivElement>(null);\n\n /// Input events\n\n const iconButtonRef = useRef<HTMLButtonElement \| null>(null);\n const inputRef = useRef<HTMLInputElement \| null>(null);\n\n // Hjelper for å gjøre det enklere å både forwarde refen men også bruke den selv internt\n const unifiedInputRef = useCallback(\n (instance: HTMLInputElement \| null) => {\n inputRef.current = instance;\n if (forwardedInputRef) {\n if (typeof forwardedInputRef === \"function\") {\n forwardedInputRef(instance);\n } else {\n forwardedInputRef.current = instance;\n }\n }\n },\n [forwardedInputRef],\n );\n\n const handleFocus = useCallback(\n (e: FocusEvent<HTMLInputElement>) => {\n if (!onFocus \|\| !datepickerRef.current) {\n return;\n }\n\n const nextFocusIsInside = datepickerRef.current.contains(\n e.relatedTarget as Node,\n );\n if (!nextFocusIsInside) {\n onFocus(e, date, { error, value: e.target.value });\n }\n },\n [onFocus, date, error],\n );\n\n const handleBlur = useCallback(\n (e: FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(e, date, { error, value: e.target.value });\n }\n },\n [onBlur, date, error],\n );\n\n const handleKeyDownAction = useCallback(\n (e: React.KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === \"Escape\") {\n setShowCalendar(false);\n e.preventDefault();\n e.stopPropagation();\n }\n\n if (action?.onKeyDown) {\n action.onKeyDown(e);\n }\n },\n [action],\n );\n\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n let nextDate: Date \| null = null;\n let nextError: DateValidationError \| null = null;\n\n if (e.target.value) {\n const val = parseDateString(e.target.value);\n if (!val) {\n nextError = \"WRONG_FORMAT\";\n } else if (minDate && !isWithinLowerBound(val, minDate)) {\n nextError = \"OUTSIDE_LOWER_BOUND\";\n } else if (maxDate && !isWithinUpperBound(val, maxDate)) {\n nextError = \"OUTSIDE_UPPER_BOUND\";\n } else {\n setShowCalendar(false);\n }\n nextDate = val \|\| null;\n }\n\n setError(nextError);\n setDate(nextDate);\n\n if (onChange) {\n onChange(e, nextDate, {\n error: nextError,\n value: e.target.value,\n });\n }\n },\n [onChange, minDate, maxDate],\n );\n\n /// Calendar events\n\n const clickCalendar = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n flushSync(() => {\n setShowCalendar(!showCalendar);\n });\n\n const calendarEl = calendarRef.current;\n const button =\n calendarEl &&\n (calendarEl.querySelector(\n '[aria-pressed=\"true\"]',\n ) as HTMLButtonElement);\n // Make sure the popover-modal is correctly positioned before focusing a button\n // so we avoid accidentally scrolling to the top of the page\n window.requestAnimationFrame(() => button?.focus());\n\n if (action?.onClick) {\n action.onClick(e);\n }\n },\n [showCalendar, action],\n );\n\n const handleClickCalendarDay = useCallback(\n ({ date }: DateInfo) => {\n setShowCalendar(false);\n setDate(date);\n\n if (inputRef.current) {\n const node = inputRef.current;\n\n node.value = formatInput(date);\n\n // Simulér et change-event så APIet blir så likt som mulig en endring av inputfeltet\n const event = document.createEvent(\"HTMLEvents\");\n event.initEvent(\"input\", true, false);\n node.dispatchEvent(event);\n\n node.focus();\n\n if (onChange) {\n // Det er ikke helt sant at dette er et React.SyntheticEvent, men it's fine – probably?\n // Den har tingene man kan forvente, men hvis du gjør serdeles fancy ting med events\n // så kan det hende du må utvide denne for å dekke behovet ditt.\n onChange(\n event as unknown as ChangeEvent<HTMLInputElement>,\n date,\n {\n error: null,\n value: node.value,\n },\n );\n }\n }\n },\n [onChange],\n );\n\n const handleTabOutsideCalendar = useCallback((e: KeyboardEvent) => {\n e.preventDefault();\n setShowCalendar(false);\n iconButtonRef.current?.focus();\n }, []);\n\n return (\n <InputGroup\n id={id}\n className={clsx(\"jkl-datepicker\", className)}\n {...rest}\n ref={datepickerRef}\n label={label}\n labelProps={labelProps}\n density={density}\n helpLabel={helpLabel}\n errorLabel={errorLabel}\n supportLabelProps={supportLabelProps}\n tooltip={tooltip}\n description={description}\n render={(inputProps) => (\n <BaseTextInput\n data-focused={showCalendar ? \"true\" : undefined}\n ref={unifiedInputRef}\n data-testid=\"jkl-datepicker__input\"\n data-testautoid={testAutoId}\n className=\"jkl-datepicker__input\"\n name={name}\n defaultValue={defaultValue}\n density={density}\n value={value}\n type=\"text\"\n placeholder={placeholder}\n width={width}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChange={handleChange}\n actionButton={\n <Popover\n positionReference={inputRef}\n open={showCalendar}\n onOpenChange={() =>\n setShowCalendar(!showCalendar)\n }\n offset={8}\n >\n <Popover.Trigger\n {...action}\n data-testid=\"jkl-datepicker__trigger\"\n className=\"jkl-text-input-action-button\"\n title={\n showCalendar\n ? hideCalendarLabel\n : showCalendarLabel\n }\n tabIndex={0}\n onClick={clickCalendar}\n onKeyDown={handleKeyDownAction}\n asChild\n >\n <IconButton>\n <CalendarIcon />\n </IconButton>\n </Popover.Trigger>\n <Popover.Content initialFocus={-1} padding={24}>\n <Calendar\n ref={calendarRef}\n density={density}\n date={date}\n minDate={minDate}\n maxDate={maxDate}\n days={days}\n months={months}\n monthLabel={monthLabel}\n yearLabel={yearLabel}\n yearsToShow={yearsToShow}\n onDateSelected={handleClickCalendarDay}\n onTabOutside={handleTabOutsideCalendar}\n />\n </Popover.Content>\n </Popover>\n }\n {...textInputProps}\n {...inputProps}\n aria-invalid={invalid \|\| !!errorLabel}\n />\n )}\n />\n );\n },\n);\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":["DatePicker","forwardRef","props","forwardedInputRef","testAutoId","id","className","label","labelProps","defaultValue","defaultShow","value","disableBeforeDate","disableBefore","disableAfterDate","disableAfter","yearsToShow","name","helpLabel","errorLabel","invalid","density","days","months","monthLabel","yearLabel","placeholder","width","onChange","onBlur","onFocus","onKeyDown","action","showCalendarLabel","hideCalendarLabel","supportLabelProps","tooltip","textInputProps","description","rest","process","env","NODE_ENV","console","warn","parseDateString","minDate","startOfDay","maxDate","date","setDate","useState","getInitialDate","error","setError","showCalendar","setShowCalendar","calendarRef","useRef","datepickerRef","iconButtonRef","inputRef","unifiedInputRef","useCallback","instance","current","handleFocus","e","contains","relatedTarget","target","handleBlur","handleKeyDownAction","key","preventDefault","stopPropagation","handleChange","nextDate","nextError","val","isWithinLowerBound","isWithinUpperBound","clickCalendar","flushSync","calendarEl","button","querySelector","window","requestAnimationFrame","focus","onClick","handleClickCalendarDay","node","formatInput","event","document","createEvent","initEvent","dispatchEvent","handleTabOutsideCalendar","jsx","InputGroup","clsx","ref","render","inputProps","BaseTextInput","type","actionButton","jsxs","Popover","positionReference","open","onOpenChange","offset","children","Trigger","title","tabIndex","asChild","IconButton","CalendarIcon","Content","initialFocus","padding","Calendar","onDateSelected","onTabOutside","displayName"],"mappings":"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"}

package/build/es/components/icon/icons/PenIcon.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as o}from"react/jsx-runtime";import"react";import{Icon as r}from"../Icon.js";const n=n=>o(r,{...n,children:""});n.displayName="PenIcon";export{n as PenIcon};
+import{jsx as o}from"react/jsx-runtime";import"react";import{Icon as r}from"../Icon.js";const n=n=>o(r,{...n,children:""});n.displayName="PenIcon";export{n as PenIcon};
 //# sourceMappingURL=PenIcon.js.map

package/build/es/components/icon/icons/PenIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PenIcon.js","sources":["../../../../../src/components/icon/icons/PenIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const PenIcon: IconComponent = (props: IconProps) => (\n <Icon {...props}>{\"\\~~uf097~~\"}</Icon>\n);\nPenIcon.displayName = \"PenIcon\";\n"],"names":["PenIcon","props","Icon","children","displayName"],"mappings":"wFAIO,MAAMA,EAA0BC,KAClCC,EAAM,IAAGD,EAAQE,SAAS,MAE/BH,EAAQI,YAAc"}
1	+ {"version":3,"file":"PenIcon.js","sources":["../../../../../src/components/icon/icons/PenIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const PenIcon: IconComponent = (props: IconProps) => (\n <Icon {...props}>{\"\\uf604\"}</Icon>\n);\nPenIcon.displayName = \"PenIcon\";\n"],"names":["PenIcon","props","Icon","children","displayName"],"mappings":"wFAIO,MAAMA,EAA0BC,KAClCC,EAAM,IAAGD,EAAQE,SAAS,MAE/BH,EAAQI,YAAc"}

package/build/es/components/input-group/FieldGroup.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as r,Fragment as s}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import"react";import{useId as l}from"../../hooks/useId/useId.js";import{Label as t}from"./Label.js";import{SupportLabel as o}from"./SupportLabel.js";const i=i=>{const{id:d,legend:p,labelProps:n,supportLabelProps:c,tooltip:m,className:u,children:b,helpLabel:f,errorLabel:h,density:j,"data-testautoid":g,...y}=i,L=l(d||"jkl-field-group",{generateSuffix:!d}),x=`${L}_support-label`,k=h||f,S=h?"error":f?"help":void 0,I=k?x:void 0;return e("fieldset",{id:L,className:a("jkl-field-group",u),"data-testautoid":g,...y,"aria-describedby":I,"data-density":j,children:[r("legend",{className:"jkl-field-group__legend",children:r(t,{...n,density:j,children:m?e(s,{children:[r("span",{style:{whiteSpace:"normal"},children:p})," ",m]}):p})}),b,(f||h)&&r(o,{...c,label:k,labelType:S,id:x,density:j})]})};export{i as FieldGroup};
+import{jsxs as e,jsx as r,Fragment as s}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import"react";import{useId as l}from"../../hooks/useId/useId.js";import{Label as i}from"./Label.js";import{SupportLabel as t}from"./SupportLabel.js";const o=o=>{const{id:d,legend:p,labelProps:n,supportLabelProps:c,tooltip:m,className:u,children:b,helpLabel:f,errorLabel:h,density:j,description:g,"data-testautoid":y,...L}=o,x=l(d||"jkl-field-group",{generateSuffix:!d}),k=`${x}_support-label`,N=h||f,S=h?"error":f?"help":void 0,I=N?k:void 0;return e("fieldset",{id:x,className:a("jkl-field-group",u),"data-testautoid":y,...L,"aria-describedby":I,"data-density":j,children:[r("legend",{className:"jkl-field-group__legend",children:r(i,{...n,density:j,children:m?e(s,{children:[r("span",{style:{whiteSpace:"normal"},children:p})," ",m]}):p})}),g&&r("p",{className:"jkl-input-group-description",children:g}),b,(f||h)&&r(t,{...c,label:N,labelType:S,id:k,density:j})]})};export{o as FieldGroup};
 //# sourceMappingURL=FieldGroup.js.map

package/build/es/components/input-group/FieldGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroup.js","sources":["../../../../src/components/input-group/FieldGroup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { Label } from \"./Label.js\";\nimport { SupportLabel } from \"./SupportLabel.js\";\nimport type { FieldGroupProps } from \"./types.js\";\n\nexport const FieldGroup: FC<FieldGroupProps> = (props) => {\n const {\n id,\n legend,\n labelProps,\n supportLabelProps,\n tooltip,\n className,\n children,\n helpLabel,\n errorLabel,\n density,\n \"data-testautoid\": testAutoId,\n ...rest\n } = props;\n\n const uid = useId(id \|\| \"jkl-field-group\", { generateSuffix: !id });\n const supportId = `${uid}_support-label`;\n\n const supportText = errorLabel \|\| helpLabel;\n const supportTextType = errorLabel\n ? \"error\"\n : helpLabel\n ? \"help\"\n : undefined;\n\n const describedBy = supportText ? supportId : undefined;\n\n return (\n <fieldset\n id={uid}\n className={clsx(\"jkl-field-group\", className)}\n data-testautoid={testAutoId}\n {...rest}\n aria-describedby={describedBy}\n data-density={density}\n >\n <legend className=\"jkl-field-group__legend\">\n <Label {...labelProps} density={density}>\n {tooltip ? (\n <>\n <span style={{ whiteSpace: \"normal\" }}>\n {legend}\n </span>\n {\"\\u00A0\"}\n {tooltip}\n </>\n ) : (\n legend\n )}\n </Label>\n </legend>\n {children}\n {(helpLabel \|\| errorLabel) && (\n <SupportLabel\n {...supportLabelProps}\n label={supportText}\n labelType={supportTextType}\n id={supportId}\n density={density}\n />\n )}\n </fieldset>\n );\n};\n"],"names":["FieldGroup","props","id","legend","labelProps","supportLabelProps","tooltip","className","children","helpLabel","errorLabel","density","testAutoId","rest","uid","useId","generateSuffix","supportId","supportText","supportTextType","describedBy","jsxs","clsx","jsx","Label","Fragment","style","whiteSpace","SupportLabel","label","labelType"],"mappings":"mQAOa,MAAAA,EAAmCC,IACtC,MACFC,GAAAA,EACAC,OAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,QAAAA,EACA,kBAAmBC,KAChBC,~~GACHZ~~,~~EAEEa~~,EAAMC,~~EAAMb~~,GAAM,kBAAmB,~~CAAEc~~,~~gBAAiBd~~,~~IACxDe~~,EAAY,GAAGH,kBAEfI,~~EAAcR~~,GAAcD,~~EAC5BU~~,~~EAAkBT~~,EAClB,QACAD,EACE,YACA,~~EAEFW~~,EAAcF,EAAcD,OAAY,EAG1C,OAAAI,EAAC,WAAA,~~CACGnB~~,~~GAAIY~~,~~EACJP~~,~~UAAWe~~,EAAK,~~kBAAmBf~~,GACnC,~~kBAAiBK~~,KACbC,EACJ,mBAAkBO,EAClB,~~eAAcT~~,EAEdH,SAAA,~~CAACe~~,EAAA,SAAA,~~CAAOhB~~,UAAU,0BACdC,~~SAAAe~~,EAACC,~~MAAUpB~~,EAAYO,QAAAA,EAClBH,SAAAF,~~EAEOe~~,EAAAI,EAAA,~~CAAAjB~~,SAAA,~~CAAAe~~,EAAC,QAAKG,MAAO,CAAEC,WAAY,~~UACtBnB~~,SACLL,IACC,IACAG,KAGLH,~~MAIXK~~,GACCC,GAAaC,~~IACXa~~,EAACK,EAAA,~~IACOvB~~,~~EACJwB~~,MAAOX,EACPY,UAAWX,~~EACXjB~~,~~GAAIe~~,~~EACJN~~,QAAAA,MAGZ"}
1	+ {"version":3,"file":"FieldGroup.js","sources":["../../../../src/components/input-group/FieldGroup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { Label } from \"./Label.js\";\nimport { SupportLabel } from \"./SupportLabel.js\";\nimport type { FieldGroupProps } from \"./types.js\";\n\nexport const FieldGroup: FC<FieldGroupProps> = (props) => {\n const {\n id,\n legend,\n labelProps,\n supportLabelProps,\n tooltip,\n className,\n children,\n helpLabel,\n errorLabel,\n density,\n description,\n \"data-testautoid\": testAutoId,\n ...rest\n } = props;\n\n const uid = useId(id \|\| \"jkl-field-group\", { generateSuffix: !id });\n const supportId = `${uid}_support-label`;\n\n const supportText = errorLabel \|\| helpLabel;\n const supportTextType = errorLabel\n ? \"error\"\n : helpLabel\n ? \"help\"\n : undefined;\n\n const describedBy = supportText ? supportId : undefined;\n\n return (\n <fieldset\n id={uid}\n className={clsx(\"jkl-field-group\", className)}\n data-testautoid={testAutoId}\n {...rest}\n aria-describedby={describedBy}\n data-density={density}\n >\n <legend className=\"jkl-field-group__legend\">\n <Label {...labelProps} density={density}>\n {tooltip ? (\n <>\n <span style={{ whiteSpace: \"normal\" }}>\n {legend}\n </span>\n {\"\\u00A0\"}\n {tooltip}\n </>\n ) : (\n legend\n )}\n </Label>\n </legend>\n {description && (\n <p className=\"jkl-input-group-description\">{description}</p>\n )}\n {children}\n {(helpLabel \|\| errorLabel) && (\n <SupportLabel\n {...supportLabelProps}\n label={supportText}\n labelType={supportTextType}\n id={supportId}\n density={density}\n />\n )}\n </fieldset>\n );\n};\n"],"names":["FieldGroup","props","id","legend","labelProps","supportLabelProps","tooltip","className","children","helpLabel","errorLabel","density","description","testAutoId","rest","uid","useId","generateSuffix","supportId","supportText","supportTextType","describedBy","jsxs","clsx","jsx","Label","Fragment","style","whiteSpace","SupportLabel","label","labelType"],"mappings":"mQAOa,MAAAA,EAAmCC,IACtC,MACFC,GAAAA,EACAC,OAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,QAAAA,EACAC,YAAAA,EACA,kBAAmBC,KAChBC,GACHb,EAEEc,EAAMC,EAAMd,GAAM,kBAAmB,CAAEe,gBAAiBf,IACxDgB,EAAY,GAAGH,kBAEfI,EAAcT,GAAcD,EAC5BW,EAAkBV,EAClB,QACAD,EACE,YACA,EAEFY,EAAcF,EAAcD,OAAY,EAG1C,OAAAI,EAAC,WAAA,CACGpB,GAAIa,EACJR,UAAWgB,EAAK,kBAAmBhB,GACnC,kBAAiBM,KACbC,EACJ,mBAAkBO,EAClB,eAAcV,EAEdH,SAAA,CAACgB,EAAA,SAAA,CAAOjB,UAAU,0BACdC,SAAAgB,EAACC,MAAUrB,EAAYO,QAAAA,EAClBH,SAAAF,EAEOgB,EAAAI,EAAA,CAAAlB,SAAA,CAAAgB,EAAC,QAAKG,MAAO,CAAEC,WAAY,UACtBpB,SACLL,IACC,IACAG,KAGLH,MAIXS,GACGY,EAAC,IAAE,CAAAjB,UAAU,8BAA+BC,SAAYI,IAE3DJ,GACCC,GAAaC,IACXc,EAACK,EAAA,IACOxB,EACJyB,MAAOX,EACPY,UAAWX,EACXlB,GAAIgB,EACJP,QAAAA,MAGZ"}

package/build/es/components/input-group/InputGroup.d.ts CHANGED Viewed

@@ -11,6 +11,7 @@ export declare const InputGroup: React.ForwardRefExoticComponent<import('../../i
     label: React.ReactNode;
     labelProps?: Omit<import('./types.js').LabelProps, "children" | "density">;
     supportLabelProps?: Omit<import('./types.js').SupportLabelProps, "id" | "errorLabel" | "helpLabel" | "density">;
+    description?: string;
     tooltip?: React.ReactNode;
     style?: React.CSSProperties;
     render?: (props: InputProps) => JSX.Element;

package/build/es/components/input-group/InputGroup.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as r,Fragment as l}from"react/jsx-runtime";import{c as s}from"../../../clsx-BeLtu-UY.js";import a,{forwardRef as i}from"react";import{useId as o}from"../../hooks/useId/useId.js";import{Label as t}from"./Label.js";import{SupportLabel as n}from"./SupportLabel.js";const p=i(((i,p)=>{const{className:d,children:m,density:u,errorLabel:c,helpLabel:b,inline:h,label:y,labelProps:f,render:j,supportLabelProps:L,tooltip:v,id:x,...k}=i,I=o(x||"jkl-input",{generateSuffix:!x}),S=o("jkl-support-label"),g=!!v,w=c||b,N=c?"error":b?"help":void 0,A={"aria-describedby":w?S:void 0,"aria-invalid":!!c||void 0,id:I},E=j?()=>j(A):()=>{const e=a.Children.toArray(i.children)[0];if(a.isValidElement(e))return a.cloneElement(e,{...A,...e.props})};return e("div",{ref:p,className:s(d,"jkl-input-group",{"jkl-input-group--inline":h}),"data-density":u,...k,children:[r(t,{standAlone:!0,htmlFor:I,srOnly:h,...f,style:{whiteSpace:g?"nowrap":void 0,...f?.style},density:u,children:g?e(l,{children:[r("span",{style:{whiteSpace:"normal"},children:y})," ",v]}):y}),E(),r(n,{srOnly:h,...L,label:w,labelType:N,id:S,density:u})]})}));p.displayName="InputGroup";export{p as InputGroup};
+import{jsxs as e,jsx as r,Fragment as l}from"react/jsx-runtime";import{c as i}from"../../../clsx-BeLtu-UY.js";import s,{forwardRef as a}from"react";import{useId as o}from"../../hooks/useId/useId.js";import{Label as t}from"./Label.js";import{SupportLabel as n}from"./SupportLabel.js";const p=a(((a,p)=>{const{className:d,children:c,density:m,errorLabel:u,helpLabel:b,inline:h,label:y,labelProps:f,render:j,supportLabelProps:L,description:k,tooltip:v,id:x,...g}=a,I=o(x||"jkl-input",{generateSuffix:!x}),S=o("jkl-support-label"),w=!!v,N=u||b,A=u?"error":b?"help":void 0,E={"aria-describedby":N?S:void 0,"aria-invalid":!!u||void 0,id:I},F=j?()=>j(E):()=>{const e=s.Children.toArray(a.children)[0];if(s.isValidElement(e))return s.cloneElement(e,{...E,...e.props})};return e("div",{ref:p,className:i(d,"jkl-input-group",{"jkl-input-group--inline":h}),"data-density":m,...g,children:[r(t,{standAlone:!0,htmlFor:I,srOnly:h,...f,style:{whiteSpace:w?"nowrap":void 0,...f?.style},density:m,children:w?e(l,{children:[r("span",{style:{whiteSpace:"normal"},children:y})," ",v]}):y}),k&&r("p",{className:"jkl-input-group-description",children:k}),F(),r(n,{srOnly:h,...L,label:N,labelType:A,id:S,density:m})]})}));p.displayName="InputGroup";export{p as InputGroup};
 //# sourceMappingURL=InputGroup.js.map

package/build/es/components/input-group/InputGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InputGroup.js","sources":["../../../../src/components/input-group/InputGroup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { Label } from \"./Label.js\";\nimport { SupportLabel } from \"./SupportLabel.js\";\nimport type { InputGroupProps, InputProps } from \"./types.js\";\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(\n (props, ref) => {\n const {\n className,\n children,\n density,\n errorLabel,\n helpLabel,\n inline,\n label,\n labelProps,\n render,\n supportLabelProps,\n tooltip,\n id,\n ...rest\n } = props;\n\n const uid = useId(id \|\| \"jkl-input\", { generateSuffix: !id });\n const supportId = useId(\"jkl-support-label\");\n\n const hasTooltip = !!tooltip;\n\n const supportText = errorLabel \|\| helpLabel;\n const supportTextType = errorLabel\n ? \"error\"\n : helpLabel\n ? \"help\"\n : undefined;\n\n const describedBy = supportText ? supportId : undefined;\n\n const inputProps: InputProps = {\n \"aria-describedby\": describedBy,\n \"aria-invalid\": errorLabel ? true : undefined,\n id: uid,\n };\n\n const renderInput = render\n ? () => render(inputProps)\n : () => {\n const input = React.Children.toArray(props.children)[0];\n\n if (!React.isValidElement<InputProps>(input)) return;\n\n return React.cloneElement<InputProps>(input, {\n ...inputProps,\n ...input.props,\n });\n };\n\n return (\n <div\n ref={ref}\n className={clsx(className, \"jkl-input-group\", {\n \"jkl-input-group--inline\": inline,\n })}\n data-density={density}\n {...rest}\n >\n <Label\n standAlone\n htmlFor={uid}\n srOnly={inline}\n {...labelProps}\n style={{\n whiteSpace: hasTooltip ? \"nowrap\" : undefined,\n ...labelProps?.style,\n }}\n density={density}\n >\n {hasTooltip ? (\n <>\n <span style={{ whiteSpace: \"normal\" }}>\n {label}\n </span>\n {\"\\u00A0\"}\n {tooltip}\n </>\n ) : (\n label\n )}\n </Label>\n {renderInput()}\n <SupportLabel\n srOnly={inline}\n {...supportLabelProps}\n label={supportText}\n labelType={supportTextType}\n id={supportId}\n density={density}\n />\n </div>\n );\n },\n);\n\nInputGroup.displayName = \"InputGroup\";\n"],"names":["InputGroup","forwardRef","props","ref","className","children","density","errorLabel","helpLabel","inline","label","labelProps","render","supportLabelProps","tooltip","id","rest","uid","useId","generateSuffix","supportId","hasTooltip","supportText","supportTextType","inputProps","renderInput","input","React","Children","toArray","isValidElement","cloneElement","jsxs","clsx","jsx","Label","standAlone","htmlFor","srOnly","style","whiteSpace","Fragment","SupportLabel","labelType","displayName"],"mappings":"2RAOO,MAAMA,EAAaC,GACtB,CAACC,EAAOC,KACE,MACFC,UAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,OAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,GAAAA,KACGC,~~GACHd~~,~~EAEEe~~,EAAMC,EAAMH,GAAM,YAAa,CAAEI,gBAAiBJ,IAClDK,EAAYF,EAAM,qBAElBG,IAAeP,EAEfQ,~~EAAcf~~,GAAcC,~~EAC5Be~~,~~EAAkBhB~~,EAClB,QACAC,EACE,YACA,~~EAIFgB~~,EAAyB,CAC3B,mBAHgBF,EAAcF,OAAY,EAI1C,~~iBAAgBb~~,QAAoB,~~EACpCQ~~,GAAIE,GAGFQ,~~EAAcb~~,EACd,IAAMA,~~EAAOY~~,GACb,KACI,MAAME,EAAQC,EAAMC,SAASC,~~QAAQ3B~~,EAAMG,UAAU,~~GAEhDsB~~,GAAAA,EAAMG,eAA2BJ,GAE/BC,OAAAA,EAAMI,aAAyBL,EAAO,IACtCF,KACAE,~~EAAMxB~~,OACZ,EAIP,~~OAAA8B~~,EAAC,MAAA,~~CACG7B~~,IAAAA,EACAC,~~UAAW6B~~,~~EAAK7B~~,EAAW,kBAAmB,CAC1C,0BAA2BK,IAE/B,eAAcH,~~KACVU~~,~~EAEJX~~,SAAA,~~CAAA6B~~,EAACC,EAAA,CACGC,YAAU,EACVC,QAASpB,EACTqB,~~OAAQ7B~~,KACJE,~~EACJ4B~~,MAAO,CACHC,WAAYnB,EAAa,cAAW,~~KACjCV~~,~~GAAY4B~~,~~OAEnBjC~~,QAAAA,EAECD,~~WAEO2B~~,EAAAS,EAAA,~~CAAApC~~,SAAA,~~CAAA6B~~,EAAC,QAAKK,MAAO,CAAEC,WAAY,~~UACtBnC~~,SACLK,IACC,~~IACAI~~,~~KAGLJ~~,~~IAGPe~~,IACDS,EAACQ,EAAA,CACGJ,~~OAAQ7B~~,KACJI,EACJH,~~MAAOY~~,EACPqB,UAAWpB,EACXR,GAAIK,~~EACJd~~,QAAAA,MAER,IAKZN,~~EAAW4C~~,YAAc"}
1	+ {"version":3,"file":"InputGroup.js","sources":["../../../../src/components/input-group/InputGroup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { Label } from \"./Label.js\";\nimport { SupportLabel } from \"./SupportLabel.js\";\nimport type { InputGroupProps, InputProps } from \"./types.js\";\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(\n (props, ref) => {\n const {\n className,\n children,\n density,\n errorLabel,\n helpLabel,\n inline,\n label,\n labelProps,\n render,\n supportLabelProps,\n description,\n tooltip,\n id,\n ...rest\n } = props;\n\n const uid = useId(id \|\| \"jkl-input\", { generateSuffix: !id });\n const supportId = useId(\"jkl-support-label\");\n\n const hasTooltip = !!tooltip;\n\n const supportText = errorLabel \|\| helpLabel;\n const supportTextType = errorLabel\n ? \"error\"\n : helpLabel\n ? \"help\"\n : undefined;\n\n const describedBy = supportText ? supportId : undefined;\n\n const inputProps: InputProps = {\n \"aria-describedby\": describedBy,\n \"aria-invalid\": errorLabel ? true : undefined,\n id: uid,\n };\n\n const renderInput = render\n ? () => render(inputProps)\n : () => {\n const input = React.Children.toArray(props.children)[0];\n\n if (!React.isValidElement<InputProps>(input)) return;\n\n return React.cloneElement<InputProps>(input, {\n ...inputProps,\n ...input.props,\n });\n };\n\n return (\n <div\n ref={ref}\n className={clsx(className, \"jkl-input-group\", {\n \"jkl-input-group--inline\": inline,\n })}\n data-density={density}\n {...rest}\n >\n <Label\n standAlone\n htmlFor={uid}\n srOnly={inline}\n {...labelProps}\n style={{\n whiteSpace: hasTooltip ? \"nowrap\" : undefined,\n ...labelProps?.style,\n }}\n density={density}\n >\n {hasTooltip ? (\n <>\n <span style={{ whiteSpace: \"normal\" }}>\n {label}\n </span>\n {\"\\u00A0\"}\n {tooltip}\n </>\n ) : (\n label\n )}\n </Label>\n {description && (\n <p className=\"jkl-input-group-description\">{description}</p>\n )}\n {renderInput()}\n <SupportLabel\n srOnly={inline}\n {...supportLabelProps}\n label={supportText}\n labelType={supportTextType}\n id={supportId}\n density={density}\n />\n </div>\n );\n },\n);\n\nInputGroup.displayName = \"InputGroup\";\n"],"names":["InputGroup","forwardRef","props","ref","className","children","density","errorLabel","helpLabel","inline","label","labelProps","render","supportLabelProps","description","tooltip","id","rest","uid","useId","generateSuffix","supportId","hasTooltip","supportText","supportTextType","inputProps","renderInput","input","React","Children","toArray","isValidElement","cloneElement","jsxs","clsx","jsx","Label","standAlone","htmlFor","srOnly","style","whiteSpace","Fragment","SupportLabel","labelType","displayName"],"mappings":"2RAOO,MAAMA,EAAaC,GACtB,CAACC,EAAOC,KACE,MACFC,UAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,OAAAA,EACAC,kBAAAA,EACAC,YAAAA,EACAC,QAAAA,EACAC,GAAAA,KACGC,GACHf,EAEEgB,EAAMC,EAAMH,GAAM,YAAa,CAAEI,gBAAiBJ,IAClDK,EAAYF,EAAM,qBAElBG,IAAeP,EAEfQ,EAAchB,GAAcC,EAC5BgB,EAAkBjB,EAClB,QACAC,EACE,YACA,EAIFiB,EAAyB,CAC3B,mBAHgBF,EAAcF,OAAY,EAI1C,iBAAgBd,QAAoB,EACpCS,GAAIE,GAGFQ,EAAcd,EACd,IAAMA,EAAOa,GACb,KACI,MAAME,EAAQC,EAAMC,SAASC,QAAQ5B,EAAMG,UAAU,GAEhDuB,GAAAA,EAAMG,eAA2BJ,GAE/BC,OAAAA,EAAMI,aAAyBL,EAAO,IACtCF,KACAE,EAAMzB,OACZ,EAIP,OAAA+B,EAAC,MAAA,CACG9B,IAAAA,EACAC,UAAW8B,EAAK9B,EAAW,kBAAmB,CAC1C,0BAA2BK,IAE/B,eAAcH,KACVW,EAEJZ,SAAA,CAAA8B,EAACC,EAAA,CACGC,YAAU,EACVC,QAASpB,EACTqB,OAAQ9B,KACJE,EACJ6B,MAAO,CACHC,WAAYnB,EAAa,cAAW,KACjCX,GAAY6B,OAEnBlC,QAAAA,EAECD,WAEO4B,EAAAS,EAAA,CAAArC,SAAA,CAAA8B,EAAC,QAAKK,MAAO,CAAEC,WAAY,UACtBpC,SACLK,IACC,IACAK,KAGLL,IAGPI,GACGqB,EAAC,IAAE,CAAA/B,UAAU,8BAA+BC,SAAYS,IAE3DY,IACDS,EAACQ,EAAA,CACGJ,OAAQ9B,KACJI,EACJH,MAAOa,EACPqB,UAAWpB,EACXR,GAAIK,EACJf,QAAAA,MAER,IAKZN,EAAW6C,YAAc"}

package/build/es/components/input-group/types.d.ts CHANGED Viewed

@@ -9,6 +9,7 @@ export interface FieldGroupProps extends DataTestAutoId, FieldsetHTMLAttributes<
     helpLabel?: string;
     errorLabel?: string;
     density?: Density;
+    description?: string;
 }
 export interface InputProps {
     "aria-describedby"?: string;
@@ -26,6 +27,7 @@ export type InputGroupProps = WithOptionalChildren & DataTestAutoId & {
     label: ReactNode;
     labelProps?: Omit<LabelProps, "children" | "density">;
     supportLabelProps?: Omit<SupportLabelProps, "id" | "errorLabel" | "helpLabel" | "density">;
+    description?: string;
     tooltip?: ReactNode;
     style?: CSSProperties;
     render?: (props: InputProps) => JSX.Element;

package/build/es/components/select/NativeSelect.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as l}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t}from"react";import{getValuePair as s}from"../../utilities/valuePair.js";import{ArrowVerticalAnimated as i}from"../icon/icons/animated/ArrowVerticalAnimated.js";import{InputGroup as r}from"../input-group/InputGroup.js";const o=t(((t,o)=>{const{label:n,className:c,density:p,errorLabel:m,helpLabel:d,inline:u,invalid:j,items:v,labelProps:b,placeholder:_="Velg",selectClassName:f,supportLabelProps:k,tooltip:N,value:h,width:w,...L}=t;return e(r,{label:n,density:p,errorLabel:m,helpLabel:d,labelProps:b,inline:u,supportLabelProps:k,tooltip:N,"data-testid":"jkl-select",className:a("jkl-select",c,{"jkl-select--inline":u,"jkl-select--invalid":!!m||j}),render:t=>l("div",{className:"jkl-select__outer-wrapper",style:{width:w},children:[l("select",{ref:o,className:a("jkl-select__button",f,{"jkl-select__button--active-value":!!h}),defaultValue:h?void 0:"",value:h,...t,...L,children:[_&&!h&&e("option",{disabled:!0,value:"",children:_}),v.map(s).map((l=>e("option",{"data-testid":"jkl-select__option",className:"jkl-select__option",value:l.value,children:l.label},l.value)))]}),e(i,{variant:"medium",pointingDown:!0,className:"jkl-select__arrow"})]})})}));o.displayName="NativeSelect";export{o as NativeSelect};
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t}from"react";import{getValuePair as s}from"../../utilities/valuePair.js";import{ArrowVerticalAnimated as i}from"../icon/icons/animated/ArrowVerticalAnimated.js";import{InputGroup as r}from"../input-group/InputGroup.js";const o=t(((t,o)=>{const{label:n,className:c,density:p,errorLabel:d,helpLabel:m,inline:u,invalid:j,items:v,labelProps:b,placeholder:_="Velg",selectClassName:f,supportLabelProps:k,tooltip:N,value:h,width:w,description:L,...P}=t;return e(r,{label:n,density:p,errorLabel:d,helpLabel:m,labelProps:b,inline:u,supportLabelProps:k,tooltip:N,description:L,"data-testid":"jkl-select",className:a("jkl-select",c,{"jkl-select--inline":u,"jkl-select--invalid":!!d||j}),render:t=>l("div",{className:"jkl-select__outer-wrapper",style:{width:w},children:[l("select",{ref:o,className:a("jkl-select__button",f,{"jkl-select__button--active-value":!!h}),defaultValue:h?void 0:"",value:h,...t,...P,children:[_&&!h&&e("option",{disabled:!0,value:"",children:_}),v.map(s).map((l=>e("option",{"data-testid":"jkl-select__option",className:"jkl-select__option",value:l.value,children:l.label},l.value)))]}),e(i,{variant:"medium",pointingDown:!0,className:"jkl-select__arrow"})]})})}));o.displayName="NativeSelect";export{o as NativeSelect};
 //# sourceMappingURL=NativeSelect.js.map

package/build/es/components/select/NativeSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NativeSelect.js","sources":["../../../../src/components/select/NativeSelect.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { getValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport type { NativeSelectProps } from \"./types.js\";\n\nexport const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(\n (props, ref) => {\n const {\n label,\n className,\n density,\n errorLabel,\n helpLabel,\n inline,\n invalid,\n items,\n labelProps,\n placeholder = \"Velg\",\n selectClassName,\n supportLabelProps,\n tooltip,\n value,\n width,\n ...rest\n } = props;\n\n const inputGroupProps = {\n label,\n density,\n errorLabel,\n helpLabel,\n labelProps,\n inline,\n supportLabelProps,\n tooltip,\n };\n\n return (\n <InputGroup\n {...inputGroupProps}\n data-testid=\"jkl-select\"\n className={clsx(\"jkl-select\", className, {\n \"jkl-select--inline\": inline,\n \"jkl-select--invalid\": !!errorLabel \|\| invalid,\n })}\n render={(inputProps) => (\n <div\n className=\"jkl-select__outer-wrapper\"\n style={{ width }}\n >\n <select\n ref={ref}\n className={clsx(\n \"jkl-select__button\",\n selectClassName,\n {\n \"jkl-select__button--active-value\": !!value,\n },\n )}\n defaultValue={value ? undefined : \"\"}\n value={value}\n {...inputProps}\n {...rest}\n >\n {placeholder && !value && (\n <option disabled value=\"\">\n {placeholder}\n </option>\n )}\n {items.map(getValuePair).map((item) => (\n <option\n data-testid=\"jkl-select__option\"\n className=\"jkl-select__option\"\n key={item.value}\n value={item.value}\n >\n {item.label}\n </option>\n ))}\n </select>\n <ArrowVerticalAnimated\n variant=\"medium\"\n pointingDown\n className=\"jkl-select__arrow\"\n />\n </div>\n )}\n />\n );\n },\n);\n\nNativeSelect.displayName = \"NativeSelect\";\n"],"names":["NativeSelect","forwardRef","props","ref","label","className","density","errorLabel","helpLabel","inline","invalid","items","labelProps","placeholder","selectClassName","supportLabelProps","tooltip","value","width","rest","jsx","InputGroup","clsx","render","inputProps","jsxs","style","children","defaultValue","disabled","map","getValuePair","item","ArrowVerticalAnimated","variant","pointingDown","displayName"],"mappings":"iVAOO,MAAMA,EAAeC,GACxB,CAACC,EAAOC,KACE,MACFC,MAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,YAAAA,EAAc,OACdC,gBAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,MAAAA,EACAC,MAAAA,KACGC,~~GACHjB~~,~~EAcA~~,~~OAAAkB~~,EAACC,EAAA,~~CAXDjB~~,MAAAA,EACAE,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAI,WAAAA,EACAH,OAAAA,EACAM,kBAAAA,EACAC,QAAAA,EAMI,cAAY,~~aACZX~~,~~UAAWiB~~,EAAK,~~aAAcjB~~,EAAW,CACrC,qBAAsBI,EACtB,wBAAyBF,GAAcG,~~IAE3Ca~~,OAASC,GACLC,EAAC,MAAA,~~CACGpB~~,UAAU,~~4BACVqB~~,MAAO,~~CAAER~~,MAAAA,~~GAETS~~,SAAA,CAAAF,EAAC,SAAA,~~CACGtB~~,IAAAA,EACAE,~~UAAWiB~~,EACP,~~qBACAR~~,EACA,CACI,qCAAsCG,~~IAG9CW~~,~~aAAcX~~,OAAQ,EAAY,GAClCA,MAAAA,~~KACIO~~,KACAL,EAEHQ,SAAA,~~CAAed~~,IAACI,~~GACZG~~,EAAA,SAAA,CAAOS,UAAQ,~~EAACZ~~,MAAM,~~GAClBU~~,~~SACLd~~,IAEHF,~~EAAMmB~~,IAAIC,GAAcD,KAAKE,GAC1BZ,EAAC,SAAA,CACG,cAAY,~~qBACZf~~,UAAU,qBAEVY,~~MAAOe~~,~~EAAKf~~,~~MAEXU~~,SAAKK,~~EAAA5B~~,~~OAHD4B~~,~~EAAKf~~,~~YAOtBG~~,EAACa,EAAA,CACGC,QAAQ,SACRC,cAAY,~~EACZ9B~~,UAAU,0BAI1B,IAKZL,~~EAAaoC~~,YAAc"}
1	+ {"version":3,"file":"NativeSelect.js","sources":["../../../../src/components/select/NativeSelect.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { getValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport type { NativeSelectProps } from \"./types.js\";\n\nexport const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(\n (props, ref) => {\n const {\n label,\n className,\n density,\n errorLabel,\n helpLabel,\n inline,\n invalid,\n items,\n labelProps,\n placeholder = \"Velg\",\n selectClassName,\n supportLabelProps,\n tooltip,\n value,\n width,\n description,\n ...rest\n } = props;\n\n const inputGroupProps = {\n label,\n density,\n errorLabel,\n helpLabel,\n labelProps,\n inline,\n supportLabelProps,\n tooltip,\n description,\n };\n\n return (\n <InputGroup\n {...inputGroupProps}\n data-testid=\"jkl-select\"\n className={clsx(\"jkl-select\", className, {\n \"jkl-select--inline\": inline,\n \"jkl-select--invalid\": !!errorLabel \|\| invalid,\n })}\n render={(inputProps) => (\n <div\n className=\"jkl-select__outer-wrapper\"\n style={{ width }}\n >\n <select\n ref={ref}\n className={clsx(\n \"jkl-select__button\",\n selectClassName,\n {\n \"jkl-select__button--active-value\": !!value,\n },\n )}\n defaultValue={value ? undefined : \"\"}\n value={value}\n {...inputProps}\n {...rest}\n >\n {placeholder && !value && (\n <option disabled value=\"\">\n {placeholder}\n </option>\n )}\n {items.map(getValuePair).map((item) => (\n <option\n data-testid=\"jkl-select__option\"\n className=\"jkl-select__option\"\n key={item.value}\n value={item.value}\n >\n {item.label}\n </option>\n ))}\n </select>\n <ArrowVerticalAnimated\n variant=\"medium\"\n pointingDown\n className=\"jkl-select__arrow\"\n />\n </div>\n )}\n />\n );\n },\n);\n\nNativeSelect.displayName = \"NativeSelect\";\n"],"names":["NativeSelect","forwardRef","props","ref","label","className","density","errorLabel","helpLabel","inline","invalid","items","labelProps","placeholder","selectClassName","supportLabelProps","tooltip","value","width","description","rest","jsx","InputGroup","clsx","render","inputProps","jsxs","style","children","defaultValue","disabled","map","getValuePair","item","ArrowVerticalAnimated","variant","pointingDown","displayName"],"mappings":"iVAOO,MAAMA,EAAeC,GACxB,CAACC,EAAOC,KACE,MACFC,MAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,YAAAA,EAAc,OACdC,gBAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,MAAAA,EACAC,MAAAA,EACAC,YAAAA,KACGC,GACHlB,EAeA,OAAAmB,EAACC,EAAA,CAZDlB,MAAAA,EACAE,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAI,WAAAA,EACAH,OAAAA,EACAM,kBAAAA,EACAC,QAAAA,EACAG,YAAAA,EAMI,cAAY,aACZd,UAAWkB,EAAK,aAAclB,EAAW,CACrC,qBAAsBI,EACtB,wBAAyBF,GAAcG,IAE3Cc,OAASC,GACLC,EAAC,MAAA,CACGrB,UAAU,4BACVsB,MAAO,CAAET,MAAAA,GAETU,SAAA,CAAAF,EAAC,SAAA,CACGvB,IAAAA,EACAE,UAAWkB,EACP,qBACAT,EACA,CACI,qCAAsCG,IAG9CY,aAAcZ,OAAQ,EAAY,GAClCA,MAAAA,KACIQ,KACAL,EAEHQ,SAAA,CAAef,IAACI,GACZI,EAAA,SAAA,CAAOS,UAAQ,EAACb,MAAM,GAClBW,SACLf,IAEHF,EAAMoB,IAAIC,GAAcD,KAAKE,GAC1BZ,EAAC,SAAA,CACG,cAAY,qBACZhB,UAAU,qBAEVY,MAAOgB,EAAKhB,MAEXW,SAAKK,EAAA7B,OAHD6B,EAAKhB,YAOtBI,EAACa,EAAA,CACGC,QAAQ,SACRC,cAAY,EACZ/B,UAAU,0BAI1B,IAKZL,EAAaqC,YAAc"}

package/build/es/components/text-area/TextArea.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t}from"react";import{InputGroup as r}from"../input-group/InputGroup.js";import{BaseTextArea as o}from"./BaseTextArea.js";const s=t(((t,s)=>{const{autoExpand:p,className:l,counter:n,density:i,errorLabel:u,helpLabel:x,inline:m,label:c,labelProps:b,startOpen:d,supportLabelProps:j,tooltip:f,...L}=t,k={label:c,density:i,errorLabel:u,helpLabel:x,labelProps:b,inline:m,supportLabelProps:j,tooltip:f},A={autoExpand:p,counter:n,startOpen:d};return e(r,{className:a("jkl-text-area",l,{"jkl-text-area--start-open":d,"jkl-text-area--auto-expand":p}),"data-testid":"jkl-text-area",...k,children:e(o,{ref:s,...L,...A})})}));s.displayName="TextArea";export{s as TextArea};
+import{jsx as e}from"react/jsx-runtime";import{c as t}from"../../../clsx-BeLtu-UY.js";import{forwardRef as a}from"react";import{InputGroup as r}from"../input-group/InputGroup.js";import{BaseTextArea as o}from"./BaseTextArea.js";const s=a(((a,s)=>{const{autoExpand:p,className:l,counter:n,density:i,errorLabel:u,helpLabel:x,inline:m,label:c,labelProps:d,startOpen:b,supportLabelProps:j,tooltip:f,description:L,...k}=a,A={label:c,density:i,errorLabel:u,helpLabel:x,labelProps:d,inline:m,supportLabelProps:j,tooltip:f,description:L},P={autoExpand:p,counter:n,startOpen:b};return e(r,{className:t("jkl-text-area",l,{"jkl-text-area--start-open":b,"jkl-text-area--auto-expand":p}),"data-testid":"jkl-text-area",...A,children:e(o,{ref:s,...k,...P})})}));s.displayName="TextArea";export{s as TextArea};
 //# sourceMappingURL=TextArea.js.map

package/build/es/components/text-area/TextArea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.js","sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport { BaseTextArea } from \"./BaseTextArea.js\";\nimport type { TextAreaProps } from \"./types.js\";\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n (props, ref) => {\n const {\n autoExpand,\n className,\n counter,\n density,\n errorLabel,\n helpLabel,\n inline,\n label,\n labelProps,\n startOpen,\n supportLabelProps,\n tooltip,\n ...rest\n } = props;\n const inputGroupProps = {\n label,\n density,\n errorLabel,\n helpLabel,\n labelProps,\n inline,\n supportLabelProps,\n tooltip,\n };\n const textAreaProps = { autoExpand, counter, startOpen };\n return (\n <InputGroup\n className={clsx(\"jkl-text-area\", className, {\n \"jkl-text-area--start-open\": startOpen,\n \"jkl-text-area--auto-expand\": autoExpand,\n })}\n data-testid=\"jkl-text-area\"\n {...inputGroupProps}\n >\n <BaseTextArea ref={ref} {...rest} {...textAreaProps} />\n </InputGroup>\n );\n },\n);\nTextArea.displayName = \"TextArea\";\n"],"names":["TextArea","forwardRef","props","ref","autoExpand","className","counter","density","errorLabel","helpLabel","inline","label","labelProps","startOpen","supportLabelProps","tooltip","rest","inputGroupProps","textAreaProps","jsx","InputGroup","clsx","children","BaseTextArea","displayName"],"mappings":"oOAMO,MAAMA,EAAWC,GACpB,CAACC,EAAOC,KACE,MACFC,WAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,kBAAAA,EACAC,QAAAA,KACGC,~~GACHd~~,~~EACEe~~,EAAkB,~~CACpBN~~,MAAAA,EACAJ,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAG,WAAAA,EACAF,OAAAA,EACAI,kBAAAA,EACAC,QAAAA,GAEEG,EAAgB,~~CAAEd~~,WAAAA,EAAYE,QAAAA,EAASO,UAAAA,GAEzC,~~OAAAM~~,EAACC,EAAA,~~CACGf~~,~~UAAWgB~~,EAAK,~~gBAAiBhB~~,EAAW,CACxC,4BAA6BQ,EAC7B,6BAA8BT,IAElC,cAAY,~~mBACRa~~,EAEJK,WAACC,EAAa,~~CAAApB~~,IAAAA,~~KAAca~~,KAAUE,KAC1C,~~IAIZlB~~,~~EAASwB~~,YAAc"}
1	+ {"version":3,"file":"TextArea.js","sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport { BaseTextArea } from \"./BaseTextArea.js\";\nimport type { TextAreaProps } from \"./types.js\";\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n (props, ref) => {\n const {\n autoExpand,\n className,\n counter,\n density,\n errorLabel,\n helpLabel,\n inline,\n label,\n labelProps,\n startOpen,\n supportLabelProps,\n tooltip,\n description,\n ...rest\n } = props;\n const inputGroupProps = {\n label,\n density,\n errorLabel,\n helpLabel,\n labelProps,\n inline,\n supportLabelProps,\n tooltip,\n description,\n };\n const textAreaProps = { autoExpand, counter, startOpen };\n return (\n <InputGroup\n className={clsx(\"jkl-text-area\", className, {\n \"jkl-text-area--start-open\": startOpen,\n \"jkl-text-area--auto-expand\": autoExpand,\n })}\n data-testid=\"jkl-text-area\"\n {...inputGroupProps}\n >\n <BaseTextArea ref={ref} {...rest} {...textAreaProps} />\n </InputGroup>\n );\n },\n);\nTextArea.displayName = \"TextArea\";\n"],"names":["TextArea","forwardRef","props","ref","autoExpand","className","counter","density","errorLabel","helpLabel","inline","label","labelProps","startOpen","supportLabelProps","tooltip","description","rest","inputGroupProps","textAreaProps","jsx","InputGroup","clsx","children","BaseTextArea","displayName"],"mappings":"oOAMO,MAAMA,EAAWC,GACpB,CAACC,EAAOC,KACE,MACFC,WAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,KACGC,GACHf,EACEgB,EAAkB,CACpBP,MAAAA,EACAJ,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAG,WAAAA,EACAF,OAAAA,EACAI,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,GAEEG,EAAgB,CAAEf,WAAAA,EAAYE,QAAAA,EAASO,UAAAA,GAEzC,OAAAO,EAACC,EAAA,CACGhB,UAAWiB,EAAK,gBAAiBjB,EAAW,CACxC,4BAA6BQ,EAC7B,6BAA8BT,IAElC,cAAY,mBACRc,EAEJK,WAACC,EAAa,CAAArB,IAAAA,KAAcc,KAAUE,KAC1C,IAIZnB,EAASyB,YAAc"}

package/build/es/components/text-input/TextInput.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import{c as e}from"../../../clsx-BeLtu-UY.js";import{forwardRef as r}from"react";import{InputGroup as s}from"../input-group/InputGroup.js";import{BaseTextInput as a}from"./BaseTextInput.js";const p=r(((r,p)=>{const{label:l,className:o,density:i,errorLabel:n,helpLabel:u,inline:m,inputClassName:c,labelProps:x,supportLabelProps:b,tooltip:d,...f}=r;return t(s,{label:l,density:i,errorLabel:n,helpLabel:u,labelProps:x,inline:m,supportLabelProps:b,tooltip:d,className:e(o,"jkl-text-input",{"jkl-text-input--inline":m}),"data-testid":"jkl-text-input",density:m?"compact":i,children:t(a,{ref:p,...f,className:c})})}));p.displayName="TextInput";export{p as TextInput};
+import{jsx as t}from"react/jsx-runtime";import{c as e}from"../../../clsx-BeLtu-UY.js";import{forwardRef as r}from"react";import{InputGroup as s}from"../input-group/InputGroup.js";import{BaseTextInput as p}from"./BaseTextInput.js";const a=r(((r,a)=>{const{label:o,className:l,density:i,errorLabel:n,helpLabel:u,inline:m,inputClassName:c,labelProps:x,supportLabelProps:b,tooltip:d,description:f,...j}=r;return t(s,{label:o,density:i,errorLabel:n,helpLabel:u,labelProps:x,inline:m,supportLabelProps:b,tooltip:d,description:f,className:e(l,"jkl-text-input",{"jkl-text-input--inline":m}),"data-testid":"jkl-text-input",density:m?"compact":i,children:t(p,{ref:a,...j,className:c})})}));a.displayName="TextInput";export{a as TextInput};
 //# sourceMappingURL=TextInput.js.map

package/build/es/components/text-input/TextInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextInput.js","sources":["../../../../src/components/text-input/TextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport { BaseTextInput } from \"./BaseTextInput.js\";\nimport type { TextInputProps } from \"./types.js\";\n\nexport const TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n (props, ref) => {\n const {\n label,\n className,\n density,\n errorLabel,\n helpLabel,\n inline,\n inputClassName,\n labelProps,\n supportLabelProps,\n tooltip,\n ...rest\n } = props;\n const inputGroupProps = {\n label,\n density,\n errorLabel,\n helpLabel,\n labelProps,\n inline,\n supportLabelProps,\n tooltip,\n };\n return (\n <InputGroup\n {...inputGroupProps}\n className={clsx(className, \"jkl-text-input\", {\n \"jkl-text-input--inline\": inline,\n })}\n data-testid=\"jkl-text-input\"\n density={inline ? \"compact\" : density}\n >\n <BaseTextInput ref={ref} {...rest} className={inputClassName} />\n </InputGroup>\n );\n },\n);\n\nTextInput.displayName = \"TextInput\";\n"],"names":["TextInput","forwardRef","props","ref","label","className","density","errorLabel","helpLabel","inline","inputClassName","labelProps","supportLabelProps","tooltip","rest","jsx","InputGroup","clsx","children","BaseTextInput","displayName"],"mappings":"sOAMO,MAAMA,EAAYC,GACrB,CAACC,EAAOC,KACE,MACFC,MAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,eAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,KACGC,~~GACHZ~~,~~EAYA~~,~~OAAAa~~,EAACC,EAAA,~~CAVDZ~~,MAAAA,EACAE,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAG,WAAAA,EACAF,OAAAA,EACAG,kBAAAA,EACAC,QAAAA,~~EAKIR~~,~~UAAWY~~,~~EAAKZ~~,EAAW,iBAAkB,CACzC,yBAA0BI,IAE9B,cAAY,iBACZH,QAASG,EAAS,UAAYH,~~EAE9BY~~,WAACC,EAAc,~~CAAAhB~~,IAAAA,~~KAAcW~~,~~EAAMT~~,UAAWK,KAClD,IAKZV,~~EAAUoB~~,YAAc"}
1	+ {"version":3,"file":"TextInput.js","sources":["../../../../src/components/text-input/TextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport { BaseTextInput } from \"./BaseTextInput.js\";\nimport type { TextInputProps } from \"./types.js\";\n\nexport const TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n (props, ref) => {\n const {\n label,\n className,\n density,\n errorLabel,\n helpLabel,\n inline,\n inputClassName,\n labelProps,\n supportLabelProps,\n tooltip,\n description,\n ...rest\n } = props;\n const inputGroupProps = {\n label,\n density,\n errorLabel,\n helpLabel,\n labelProps,\n inline,\n supportLabelProps,\n tooltip,\n description,\n };\n return (\n <InputGroup\n {...inputGroupProps}\n className={clsx(className, \"jkl-text-input\", {\n \"jkl-text-input--inline\": inline,\n })}\n data-testid=\"jkl-text-input\"\n density={inline ? \"compact\" : density}\n >\n <BaseTextInput ref={ref} {...rest} className={inputClassName} />\n </InputGroup>\n );\n },\n);\n\nTextInput.displayName = \"TextInput\";\n"],"names":["TextInput","forwardRef","props","ref","label","className","density","errorLabel","helpLabel","inline","inputClassName","labelProps","supportLabelProps","tooltip","description","rest","jsx","InputGroup","clsx","children","BaseTextInput","displayName"],"mappings":"sOAMO,MAAMA,EAAYC,GACrB,CAACC,EAAOC,KACE,MACFC,MAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,eAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,KACGC,GACHb,EAaA,OAAAc,EAACC,EAAA,CAXDb,MAAAA,EACAE,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAG,WAAAA,EACAF,OAAAA,EACAG,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,EAKIT,UAAWa,EAAKb,EAAW,iBAAkB,CACzC,yBAA0BI,IAE9B,cAAY,iBACZH,QAASG,EAAS,UAAYH,EAE9Ba,WAACC,EAAc,CAAAjB,IAAAA,KAAcY,EAAMV,UAAWK,KAClD,IAKZV,EAAUqB,YAAc"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fremtind/jokul",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/styles/components/checkbox/checkbox.css CHANGED Viewed

@@ -33,7 +33,7 @@
     --jkl-checkbox-box-size: 1.125rem;
     --jkl-checkbox-line-height: 1.5rem;
   }
-  @keyframes jkl-checkbox-checked-udrzh3s {
+  @keyframes jkl-checkbox-checked-uns0n3p {
     0% {
       width: 0;
       height: 0;
@@ -47,7 +47,7 @@
       height: 58%;
     }
   }
-  @keyframes jkl-checkbox-indeterminate-udrzh48 {
+  @keyframes jkl-checkbox-indeterminate-uns0n4a {
     0% {
       width: 0;
     }
@@ -76,11 +76,11 @@
     left: calc(-0.5 * var(--jkl-checkbox-box-size));
   }
   .jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
-    animation: jkl-checkbox-checked-udrzh3s 150ms ease-in-out forwards;
+    animation: jkl-checkbox-checked-uns0n3p 150ms ease-in-out forwards;
     opacity: 1;
   }
   .jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
-    animation: jkl-checkbox-indeterminate-udrzh48 150ms ease-in-out forwards;
+    animation: jkl-checkbox-indeterminate-uns0n4a 150ms ease-in-out forwards;
     opacity: 1;
   }
   .jkl-checkbox__input:focus-visible + .jkl-checkbox__label {