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

@fremtind/jokul 1.5.0 → 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 (93) hide show

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Combobox.cjs","sources":["../../../../src/components/combobox/Combobox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type FC,\n type FocusEvent,\n type KeyboardEvent,\n type MouseEvent,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport {useAnimatedHeight} from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport {useId} from \"../../hooks/useId/useId.js\";\nimport {useListNavigation} from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport type {ValuePair} from \"../../utilities/valuePair.js\";\nimport {Chip} from \"../chip/Chip.js\";\nimport {IconButton} from \"../icon-button/IconButton.js\";\nimport {CheckIcon} from \"../icon/icons/CheckIcon.js\";\nimport {ArrowVerticalAnimated} from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport {InputGroup} from \"../input-group/InputGroup.js\";\nimport {Tooltip} from \"../tooltip/Tooltip.js\";\nimport {TooltipContent} from \"../tooltip/TooltipContent.js\";\nimport {TooltipTrigger} from \"../tooltip/TooltipTrigger.js\";\nimport type {ComboboxProps, ComboboxValuePair} from \"./types.js\";\n\nexport function getComboboxValuePair(\n item: string \| ComboboxValuePair,\n): ComboboxValuePair {\n return typeof item === \"string\" ? { value: item, label: item } : item;\n}\n\nexport const Combobox: FC<ComboboxProps> = ({\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.cjs","sources":["../../../../src/components/combobox/Combobox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type FC,\n type FocusEvent,\n type KeyboardEvent,\n type MouseEvent,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport {useAnimatedHeight} from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport {useId} from \"../../hooks/useId/useId.js\";\nimport {useListNavigation} from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport type {ValuePair} from \"../../utilities/valuePair.js\";\nimport {Chip} from \"../chip/Chip.js\";\nimport {IconButton} from \"../icon-button/IconButton.js\";\nimport {CheckIcon} from \"../icon/icons/CheckIcon.js\";\nimport {ArrowVerticalAnimated} from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport {InputGroup} from \"../input-group/InputGroup.js\";\nimport {Tooltip} from \"../tooltip/Tooltip.js\";\nimport {TooltipContent} from \"../tooltip/TooltipContent.js\";\nimport {TooltipTrigger} from \"../tooltip/TooltipTrigger.js\";\nimport type {ComboboxProps, ComboboxValuePair} from \"./types.js\";\n\nexport function getComboboxValuePair(\n item: string \| ComboboxValuePair,\n): ComboboxValuePair {\n return typeof item === \"string\" ? { value: item, label: item } : item;\n}\n\nexport const Combobox: FC<ComboboxProps> = ({\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/cjs/components/datepicker/DatePicker.cjs CHANGED Viewed

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

package/build/cjs/components/datepicker/DatePicker.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePicker.cjs","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.cjs","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/cjs/components/help/Help.cjs CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Help.cjs","sources":["../../../../src/components/help/Help.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { Button } from \"../button/index.js\";\nimport { Icon } from \"../icon/Icon.js\";\nimport type { HelpProps } from \"./types.js\";\n\nexport const BETA_Help = ({\n position = \"top\",\n buttonText = \"Hjelp\",\n showButtonText = false,\n iconPosition = \"left\",\n children,\n ...rest\n}: HelpProps) => {\n return (\n <>\n <Button\n {...rest}\n title={buttonText \|\| rest.title}\n iconPosition={iconPosition}\n variant=\"ghost\"\n className={clsx(\"jkl-help-trigger\", rest.className)}\n icon={<Icon aria-hidden=\"true\">help</Icon>}\n data-testid=\"jkl-help-trigger\"\n // @ts-ignore\n popovertarget={`${buttonText}-popover`}\n // @ts-ignore\n style={{ anchorName: `${buttonText}-popover` }}\n >\n {showButtonText && buttonText}\n </Button>\n\n <output aria-live=\"assertive\">\n <div\n data-position={position}\n ~~data-theme=\"dark\"\n~~ popover=\"auto\"\n id={`${buttonText}-popover`}\n className=\"jkl-help-popover\"\n // @ts-ignore\n style={{ positionAnchor: `${buttonText}-popover` }}\n >\n {children}\n </div>\n </output>\n </>\n );\n};\n"],"names":["position","buttonText","showButtonText","iconPosition","children","rest","jsxs","Fragment","jsx","Button","title","variant","className","clsx","icon","Icon","popovertarget","style","anchorName","popover","id","positionAnchor"],"mappings":"sQAMyB,EACrBA,SAAAA,EAAW,MACXC,WAAAA,EAAa,QACbC,eAAAA,GAAiB,EACjBC,aAAAA,EAAe,OACfC,SAAAA,KACGC,KAIKC,EAAAA,KAAAC,WAAA,CAAAH,SAAA,CAAAI,EAAAA,IAACC,EAAAA,OAAA,IACOJ,EACJK,MAAOT,GAAcI,EAAKK,MAC1BP,aAAAA,EACAQ,QAAQ,QACRC,UAAWC,EAAAA,KAAK,mBAAoBR,EAAKO,WACzCE,KAAMN,EAAAA,IAACO,OAAK,CAAA,cAAY,OAAOX,SAAI,SACnC,cAAY,mBAEZY,cAAe,GAAGf,YAElBgB,MAAO,CAAEC,WAAY,GAAGjB,aAEvBG,SAAkBF,GAAAD,IAGvBO,EAAAA,IAAC,SAAO,CAAA,YAAU,YACdJ,SAAAI,EAAAA,IAAC,MAAA,CACG,gBAAeR,~~EACf~~,~~aAAW,OACXmB,~~QAAQ,OACRC,GAAI,GAAGnB,YACPW,UAAU,mBAEVK,MAAO,CAAEI,eAAgB,GAAGpB,aAE3BG,SAAAA"}
1	+ {"version":3,"file":"Help.cjs","sources":["../../../../src/components/help/Help.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { Button } from \"../button/index.js\";\nimport { Icon } from \"../icon/Icon.js\";\nimport type { HelpProps } from \"./types.js\";\n\nexport const BETA_Help = ({\n position = \"top\",\n buttonText = \"Hjelp\",\n showButtonText = false,\n iconPosition = \"left\",\n children,\n ...rest\n}: HelpProps) => {\n return (\n <>\n <Button\n {...rest}\n title={buttonText \|\| rest.title}\n iconPosition={iconPosition}\n variant=\"ghost\"\n className={clsx(\"jkl-help-trigger\", rest.className)}\n icon={<Icon aria-hidden=\"true\">help</Icon>}\n data-testid=\"jkl-help-trigger\"\n // @ts-ignore\n popovertarget={`${buttonText}-popover`}\n // @ts-ignore\n style={{ anchorName: `${buttonText}-popover` }}\n >\n {showButtonText && buttonText}\n </Button>\n\n <output aria-live=\"assertive\">\n <div\n data-position={position}\n popover=\"auto\"\n id={`${buttonText}-popover`}\n className=\"jkl-help-popover\"\n // @ts-ignore\n style={{ positionAnchor: `${buttonText}-popover` }}\n >\n {children}\n </div>\n </output>\n </>\n );\n};\n"],"names":["position","buttonText","showButtonText","iconPosition","children","rest","jsxs","Fragment","jsx","Button","title","variant","className","clsx","icon","Icon","popovertarget","style","anchorName","popover","id","positionAnchor"],"mappings":"sQAMyB,EACrBA,SAAAA,EAAW,MACXC,WAAAA,EAAa,QACbC,eAAAA,GAAiB,EACjBC,aAAAA,EAAe,OACfC,SAAAA,KACGC,KAIKC,EAAAA,KAAAC,WAAA,CAAAH,SAAA,CAAAI,EAAAA,IAACC,EAAAA,OAAA,IACOJ,EACJK,MAAOT,GAAcI,EAAKK,MAC1BP,aAAAA,EACAQ,QAAQ,QACRC,UAAWC,EAAAA,KAAK,mBAAoBR,EAAKO,WACzCE,KAAMN,EAAAA,IAACO,OAAK,CAAA,cAAY,OAAOX,SAAI,SACnC,cAAY,mBAEZY,cAAe,GAAGf,YAElBgB,MAAO,CAAEC,WAAY,GAAGjB,aAEvBG,SAAkBF,GAAAD,IAGvBO,EAAAA,IAAC,SAAO,CAAA,YAAU,YACdJ,SAAAI,EAAAA,IAAC,MAAA,CACG,gBAAeR,EACfmB,QAAQ,OACRC,GAAI,GAAGnB,YACPW,UAAU,mBAEVK,MAAO,CAAEI,eAAgB,GAAGpB,aAE3BG,SAAAA"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("react");const r=require("../Icon.cjs"),t=t=>e.jsx(r.Icon,{...t,children:""});t.displayName="PenIcon",exports.PenIcon=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("react");const r=require("../Icon.cjs"),t=t=>e.jsx(r.Icon,{...t,children:""});t.displayName="PenIcon",exports.PenIcon=t;
 //# sourceMappingURL=PenIcon.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PenIcon.cjs","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":"qKAIaA,EAA0BC,SAClCC,EAAAA,KAAM,IAAGD,EAAQE,SAAS,MAE/BH,EAAQI,YAAc"}
1	+ {"version":3,"file":"PenIcon.cjs","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":"qKAIaA,EAA0BC,SAClCC,EAAAA,KAAM,IAAGD,EAAQE,SAAS,MAE/BH,EAAQI,YAAc"}

package/build/cjs/components/image/Image.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../../clsx-E3yX_9sL.cjs");require("react");const a=require("../../hooks/useElementDimensions/useElementDimensions.cjs"),i=require("./useImageLoadingStatus.cjs");exports.Image=({className:t,placeholder:l,alt:r,...m})=>{const[c,n]=i.useImageLoadingStatus(),[o,g]=a.useElementDimensions(400);return e.jsxs("div",{ref:o,className:s.clsx("jkl-image",t,{"jkl-image--loading":!n}),children:[e.jsx("img",{className:"jkl-image__placeholder",alt:n?"":r,src:l||m.src}),e.jsx("img",{alt:r,className:"jkl-image__image","data-testid":"jkl-image__image",ref:c,sizes:`${g.width}px`,loading:"lazy",decoding:"async",...m})]})};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../../clsx-E3yX_9sL.cjs"),i=require("react"),a=require("../../hooks/useElementDimensions/useElementDimensions.cjs"),r=require("./useImageLoadingStatus.cjs"),t=require("../../utilities/polymorphism/mergeRefs.cjs");require("../../utilities/polymorphism/SlotComponent.cjs");const l=i.forwardRef((({className:i,placeholder:l,alt:m,...o},c)=>{const[n,g]=r.useImageLoadingStatus(),[u,d]=a.useElementDimensions(400),j=t.mergeRefs(c,n);return e.jsxs("div",{ref:u,className:s.clsx("jkl-image",i,{"jkl-image--loading":!g}),children:[e.jsx("img",{className:"jkl-image__placeholder",alt:g?"":m,src:l||o.src}),e.jsx("img",{alt:m,className:"jkl-image__image","data-testid":"jkl-image__image",ref:j,sizes:`${d.width}px`,decoding:"async",loading:"lazy",...o})]})}));l.displayName="Image",exports.Image=l;
 //# sourceMappingURL=Image.cjs.map

package/build/cjs/components/image/Image.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.cjs","sources":["../../../../src/components/image/Image.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport ~~React,~~ { ~~type~~ FC } from \"react\";\nimport { useElementDimensions } from \"../../hooks/useElementDimensions/useElementDimensions.js\";\nimport ~~type~~ { ~~ImageProps~~ } from \"./~~types~~.js\";\nimport { ~~useImageLoadingStatus~~ } from \"./~~useImageLoadingStatus~~.js\";\n\nexport const Image: FC<ImageProps> = ({\n className~~,\n~~ placeholder~~,\n~~ alt~~,\n~~ ...imageProperties\n}) => {\n const [imageRef, imageLoaded] = useImageLoadingStatus();\n const [containerRef, dimensions] =\n useElementDimensions<HTMLDivElement>(400);\n\n return (\n <div\n ref={containerRef}\n className={clsx(\"jkl-image\", className, {\n \"jkl-image--loading\": !imageLoaded,\n })}\n >\n {/* Placeholder er bevisst uten loading og decoding for å vises umiddelbart /}\n <img\n className=\"jkl-image__placeholder\"\n alt={imageLoaded ? \"\" : alt}\n src={placeholder \|\| imageProperties.src}\n />\n {/ biome-ignore lint/a11y/useAltText: Den har da vitterlig en alt-attributt? */}\n <img\n alt={alt}\n className=\"jkl-image__image\"\n data-testid=\"jkl-image__image\"\n ref={~~imageRef~~}\n sizes={`${dimensions.width}px`}\n ~~loading~~=\"~~lazy~~\"\n ~~decoding~~=\"~~async~~\"\n {...imageProperties}\n />\n </div>\n );\n};\n"],"names":["className","placeholder","alt","imageProperties","imageRef","imageLoaded","useImageLoadingStatus","containerRef","dimensions","useElementDimensions","~~jsxs~~","~~ref~~","clsx","children","jsx","src","sizes","width","loading","~~decoding~~"],"mappings":"~~kTAMqC~~,~~EACjCA~~,UAAAA,~~EACAC~~,YAAAA,~~EACAC~~,IAAAA,~~KACGC~~,~~MAEH~~,MAAOC,EAAUC,GAAeC,2BACzBC,EAAcC,GACjBC,EAAAA,qBAAqC,~~KAGrC~~,~~OAAAC~~,EAAAA,KAAC,MAAA,~~CACGC~~,~~IAAKJ~~,~~EACLP~~,~~UAAWY~~,EAAAA,KAAK,~~YAAaZ~~,EAAW,CACpC,~~sBAAuBK~~,~~IAI3BQ~~,SAAA,CAAAC,EAAAA,IAAC,MAAA,~~CACGd~~,UAAU,yBACVE,~~IAAKG~~,EAAc,~~GAAKH~~,~~EACxBa~~,~~IAAKd~~,GAAeE,~~EAAgBY~~,MAGxCD,EAAAA,IAAC,MAAA,~~CACGZ~~,IAAAA,EACAF,UAAU,mBACV,cAAY,~~mBACZW~~,~~IAAKP~~,~~EACLY~~,MAAO,~~GAAGR~~,~~EAAWS~~,UACrBC,QAAQ,~~OACRC~~,~~SAAS~~,~~WACLhB~~,~~MAEZ~~"}
1	+ {"version":3,"file":"Image.cjs","sources":["../../../../src/components/image/Image.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { useElementDimensions } from \"../../hooks/useElementDimensions/useElementDimensions.js\";\nimport { useImageLoadingStatus } from \"./useImageLoadingStatus.js\";\nimport { mergeRefs } from \"../../utilities/index.js\";\nimport type { ImageProps } from \"./types.js\";\n\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(\n ({ className, placeholder, alt, ...imageProperties }, ref) => {\n const [imageRef, imageLoaded] = useImageLoadingStatus();\n const [containerRef, dimensions] =\n useElementDimensions<HTMLDivElement>(400);\n\n const mergedImageRef = mergeRefs(ref, imageRef);\n\n return (\n <div\n ref={containerRef}\n className={clsx(\"jkl-image\", className, {\n \"jkl-image--loading\": !imageLoaded,\n })}\n >\n {/* Placeholder er bevisst uten loading og decoding for å vises umiddelbart /}\n <img\n className=\"jkl-image__placeholder\"\n alt={imageLoaded ? \"\" : alt}\n src={placeholder \|\| imageProperties.src}\n />\n {/ biome-ignore lint/a11y/useAltText: Den har da vitterlig en alt-attributt? */}\n <img\n alt={alt}\n className=\"jkl-image__image\"\n data-testid=\"jkl-image__image\"\n ref={mergedImageRef}\n sizes={`${dimensions.width}px`}\n decoding=\"async\"\n loading=\"lazy\"\n {...imageProperties}\n />\n </div>\n );\n },\n);\n\nImage.displayName = \"Image\";\n"],"names":["Image","forwardRef","className","placeholder","alt","imageProperties","ref","imageRef","imageLoaded","useImageLoadingStatus","containerRef","dimensions","useElementDimensions","mergedImageRef","mergeRefs","jsxs","clsx","children","jsx","src","sizes","width","decoding","loading","displayName"],"mappings":"kZAOO,MAAMA,EAAQC,EAAAA,YACjB,EAAGC,UAAAA,EAAWC,YAAAA,EAAaC,IAAAA,KAAQC,GAAmBC,KAClD,MAAOC,EAAUC,GAAeC,2BACzBC,EAAcC,GACjBC,EAAAA,qBAAqC,KAEnCC,EAAiBC,EAAAA,UAAUR,EAAKC,GAGlC,OAAAQ,EAAAA,KAAC,MAAA,CACGT,IAAKI,EACLR,UAAWc,EAAAA,KAAK,YAAad,EAAW,CACpC,sBAAuBM,IAI3BS,SAAA,CAAAC,EAAAA,IAAC,MAAA,CACGhB,UAAU,yBACVE,IAAKI,EAAc,GAAKJ,EACxBe,IAAKhB,GAAeE,EAAgBc,MAGxCD,EAAAA,IAAC,MAAA,CACGd,IAAAA,EACAF,UAAU,mBACV,cAAY,mBACZI,IAAKO,EACLO,MAAO,GAAGT,EAAWU,UACrBC,SAAS,QACTC,QAAQ,UACJlB,MAEZ,IAKZL,EAAMwB,YAAc"}

package/build/cjs/components/image/Image.d.cts CHANGED Viewed

@@ -1,3 +1,2 @@
-import { FC } from 'react';
 import { ImageProps } from './types.cjs';
-export declare const Image: FC<ImageProps>;
+export declare const Image: import('react').ForwardRefExoticComponent<ImageProps & import('react').RefAttributes<HTMLImageElement>>;

package/build/cjs/components/input-group/FieldGroup.cjs CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroup.cjs","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":["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":"ySAOgDA,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,EAAAA,~~MAAMb~~,GAAM,kBAAmB,~~CAAEc~~,~~gBAAiBd~~,~~IACxDe~~,EAAY,GAAGH,kBAEfI,~~EAAcR~~,GAAcD,~~EAC5BU~~,~~EAAkBT~~,EAClB,QACAD,EACE,YACA,~~EAEFW~~,EAAcF,EAAcD,OAAY,EAG1C,OAAAI,EAAAA,KAAC,WAAA,~~CACGnB~~,~~GAAIY~~,~~EACJP~~,~~UAAWe~~,EAAAA,KAAK,~~kBAAmBf~~,GACnC,~~kBAAiBK~~,KACbC,EACJ,mBAAkBO,EAClB,~~eAAcT~~,EAEdH,SAAA,~~CAACe~~,EAAAA,IAAA,SAAA,~~CAAOhB~~,UAAU,0BACdC,~~SAAAe~~,EAAAA,IAACC,~~YAAUpB~~,EAAYO,QAAAA,EAClBH,SAAAF,~~EAEOe~~,EAAAA,KAAAI,EAAAA,SAAA,~~CAAAjB~~,SAAA,~~CAAAe~~,MAAC,QAAKG,MAAO,CAAEC,WAAY,~~UACtBnB~~,SACLL,IACC,IACAG,KAGLH,~~MAIXK~~,GACCC,GAAaC,~~IACXa~~,EAAAA,IAACK,EAAAA,aAAA,~~IACOvB~~,~~EACJwB~~,MAAOX,EACPY,UAAWX,~~EACXjB~~,~~GAAIe~~,~~EACJN~~,QAAAA,MAGZ"}
1	+ {"version":3,"file":"FieldGroup.cjs","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":["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":"ySAOgDA,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,EAAAA,MAAMd,GAAM,kBAAmB,CAAEe,gBAAiBf,IACxDgB,EAAY,GAAGH,kBAEfI,EAAcT,GAAcD,EAC5BW,EAAkBV,EAClB,QACAD,EACE,YACA,EAEFY,EAAcF,EAAcD,OAAY,EAG1C,OAAAI,EAAAA,KAAC,WAAA,CACGpB,GAAIa,EACJR,UAAWgB,EAAAA,KAAK,kBAAmBhB,GACnC,kBAAiBM,KACbC,EACJ,mBAAkBO,EAClB,eAAcV,EAEdH,SAAA,CAACgB,EAAAA,IAAA,SAAA,CAAOjB,UAAU,0BACdC,SAAAgB,EAAAA,IAACC,YAAUrB,EAAYO,QAAAA,EAClBH,SAAAF,EAEOgB,EAAAA,KAAAI,EAAAA,SAAA,CAAAlB,SAAA,CAAAgB,MAAC,QAAKG,MAAO,CAAEC,WAAY,UACtBpB,SACLL,IACC,IACAG,KAGLH,MAIXS,GACGY,EAAAA,IAAC,IAAE,CAAAjB,UAAU,8BAA+BC,SAAYI,IAE3DJ,GACCC,GAAaC,IACXc,EAAAA,IAACK,EAAAA,aAAA,IACOxB,EACJyB,MAAOX,EACPY,UAAWX,EACXlB,GAAIgB,EACJP,QAAAA,MAGZ"}

package/build/cjs/components/input-group/InputGroup.cjs CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InputGroup.cjs","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":"kRAOaA,EAAaC,EAAAA,YACtB,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,EAAAA,MAAMH,GAAM,YAAa,CAAEI,gBAAiBJ,IAClDK,EAAYF,QAAM,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,GAErD,~~GAAKsB~~,EAAMG,eAA2BJ,GAE/B,OAAAC,EAAMI,aAAyBL,EAAO,IACtCF,KACAE,~~EAAMxB~~,OACZ,EAIP,~~OAAA8B~~,EAAAA,KAAC,MAAA,~~CACG7B~~,IAAAA,EACAC,~~UAAW6B~~,EAAAA,~~KAAK7B~~,EAAW,kBAAmB,CAC1C,0BAA2BK,IAE/B,eAAcH,~~KACVU~~,~~EAEJX~~,SAAA,~~CAAA6B~~,EAAAA,IAACC,EAAAA,MAAA,CACGC,YAAU,EACVC,QAASpB,EACTqB,~~OAAQ7B~~,KACJE,~~EACJ4B~~,MAAO,CACHC,WAAYnB,EAAa,cAAW,~~KACjCV~~,~~GAAY4B~~,~~OAEnBjC~~,QAAAA,EAECD,~~WAEO2B~~,EAAAA,KAAAS,EAAAA,SAAA,~~CAAApC~~,SAAA,~~CAAA6B~~,MAAC,QAAKK,MAAO,CAAEC,WAAY,~~UACtBnC~~,SACLK,IACC,~~IACAI~~,~~KAGLJ~~,~~IAGPe~~,IACDS,EAAAA,IAACQ,EAAAA,aAAA,CACGJ,~~OAAQ7B~~,KACJI,EACJH,~~MAAOY~~,EACPqB,UAAWpB,EACXR,GAAIK,~~EACJd~~,QAAAA,MAER,IAKZN,~~EAAW4C~~,YAAc"}
1	+ {"version":3,"file":"InputGroup.cjs","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":"kRAOaA,EAAaC,EAAAA,YACtB,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,EAAAA,MAAMH,GAAM,YAAa,CAAEI,gBAAiBJ,IAClDK,EAAYF,QAAM,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,GAErD,GAAKuB,EAAMG,eAA2BJ,GAE/B,OAAAC,EAAMI,aAAyBL,EAAO,IACtCF,KACAE,EAAMzB,OACZ,EAIP,OAAA+B,EAAAA,KAAC,MAAA,CACG9B,IAAAA,EACAC,UAAW8B,EAAAA,KAAK9B,EAAW,kBAAmB,CAC1C,0BAA2BK,IAE/B,eAAcH,KACVW,EAEJZ,SAAA,CAAA8B,EAAAA,IAACC,EAAAA,MAAA,CACGC,YAAU,EACVC,QAASpB,EACTqB,OAAQ9B,KACJE,EACJ6B,MAAO,CACHC,WAAYnB,EAAa,cAAW,KACjCX,GAAY6B,OAEnBlC,QAAAA,EAECD,WAEO4B,EAAAA,KAAAS,EAAAA,SAAA,CAAArC,SAAA,CAAA8B,MAAC,QAAKK,MAAO,CAAEC,WAAY,UACtBpC,SACLK,IACC,IACAK,KAGLL,IAGPI,GACGqB,EAAAA,IAAC,IAAE,CAAA/B,UAAU,8BAA+BC,SAAYS,IAE3DY,IACDS,EAAAA,IAACQ,EAAAA,aAAA,CACGJ,OAAQ9B,KACJI,EACJH,MAAOa,EACPqB,UAAWpB,EACXR,GAAIK,EACJf,QAAAA,MAER,IAKZN,EAAW6C,YAAc"}

package/build/cjs/components/input-group/InputGroup.d.cts 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/cjs/components/input-group/types.d.cts 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/cjs/components/select/NativeSelect.cjs CHANGED Viewed

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

package/build/cjs/components/select/NativeSelect.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NativeSelect.cjs","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","inputGroupProps","jsx","InputGroup","clsx","render","inputProps","jsxs","style","children","defaultValue","disabled","map","getValuePair","item","ArrowVerticalAnimated","variant","pointingDown","displayName"],"mappings":"oUAOaA,EAAeC,EAAAA,YACxB,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~~,~~EAEEkB~~,EAAkB,~~CACpBhB~~,MAAAA,EACAE,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAI,WAAAA,EACAH,OAAAA,EACAM,kBAAAA,EACAC,QAAAA,GAIA,~~OAAAK~~,EAAAA,IAACC,EAAAA,WAAA,IACOF,EACJ,cAAY,~~aACZf~~,~~UAAWkB~~,EAAAA,KAAK,~~aAAclB~~,EAAW,CACrC,qBAAsBI,EACtB,wBAAyBF,GAAcG,~~IAE3Cc~~,OAASC,GACLC,EAAAA,KAAC,MAAA,~~CACGrB~~,UAAU,~~4BACVsB~~,MAAO,~~CAAET~~,MAAAA,~~GAETU~~,SAAA,CAAAF,EAAAA,KAAC,SAAA,~~CACGvB~~,IAAAA,EACAE,~~UAAWkB~~,EAAAA,KACP,~~qBACAT~~,EACA,CACI,qCAAsCG,~~IAG9CY~~,~~aAAcZ~~,OAAQ,EAAY,GAClCA,MAAAA,~~KACIQ~~,KACAN,EAEHS,SAAA,~~CAAef~~,IAACI,~~GACZI~~,EAAAA,IAAA,SAAA,CAAOS,UAAQ,~~EAACb~~,MAAM,~~GAClBW~~,~~SACLf~~,IAEHF,~~EAAMoB~~,IAAIC,EAAYA,cAAED,KAAKE,GAC1BZ,EAAAA,IAAC,SAAA,CACG,cAAY,~~qBACZhB~~,UAAU,qBAEVY,~~MAAOgB~~,~~EAAKhB~~,~~MAEXW~~,SAAKK,~~EAAA7B~~,~~OAHD6B~~,~~EAAKhB~~,~~YAOtBI~~,EAAAA,IAACa,EAAAA,sBAAA,CACGC,QAAQ,SACRC,cAAY,~~EACZ/B~~,UAAU,0BAI1B,IAKZL,~~EAAaqC~~,YAAc"}
1	+ {"version":3,"file":"NativeSelect.cjs","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","inputGroupProps","jsx","InputGroup","clsx","render","inputProps","jsxs","style","children","defaultValue","disabled","map","getValuePair","item","ArrowVerticalAnimated","variant","pointingDown","displayName"],"mappings":"oUAOaA,EAAeC,EAAAA,YACxB,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,EAEEmB,EAAkB,CACpBjB,MAAAA,EACAE,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAI,WAAAA,EACAH,OAAAA,EACAM,kBAAAA,EACAC,QAAAA,EACAG,YAAAA,GAIA,OAAAG,EAAAA,IAACC,EAAAA,WAAA,IACOF,EACJ,cAAY,aACZhB,UAAWmB,EAAAA,KAAK,aAAcnB,EAAW,CACrC,qBAAsBI,EACtB,wBAAyBF,GAAcG,IAE3Ce,OAASC,GACLC,EAAAA,KAAC,MAAA,CACGtB,UAAU,4BACVuB,MAAO,CAAEV,MAAAA,GAETW,SAAA,CAAAF,EAAAA,KAAC,SAAA,CACGxB,IAAAA,EACAE,UAAWmB,EAAAA,KACP,qBACAV,EACA,CACI,qCAAsCG,IAG9Ca,aAAcb,OAAQ,EAAY,GAClCA,MAAAA,KACIS,KACAN,EAEHS,SAAA,CAAehB,IAACI,GACZK,EAAAA,IAAA,SAAA,CAAOS,UAAQ,EAACd,MAAM,GAClBY,SACLhB,IAEHF,EAAMqB,IAAIC,EAAYA,cAAED,KAAKE,GAC1BZ,EAAAA,IAAC,SAAA,CACG,cAAY,qBACZjB,UAAU,qBAEVY,MAAOiB,EAAKjB,MAEXY,SAAKK,EAAA9B,OAHD8B,EAAKjB,YAOtBK,EAAAA,IAACa,EAAAA,sBAAA,CACGC,QAAQ,SACRC,cAAY,EACZhC,UAAU,0BAI1B,IAKZL,EAAasC,YAAc"}

package/build/cjs/components/text-area/TextArea.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),t=require("react"),a=require("../input-group/InputGroup.cjs"),l=require("./BaseTextArea.cjs"),s=t.forwardRef(((t,s)=>{const{autoExpand:o,className:p,counter:n,density:u,errorLabel:i,helpLabel:x,inline:c,label:b,labelProps:d,startOpen:j,supportLabelProps:L,tooltip:m,...q}=t,y={label:b,density:u,errorLabel:i,helpLabel:x,labelProps:d,inline:c,supportLabelProps:L,tooltip:m},P={autoExpand:o,counter:n,startOpen:j};return e.jsx(a.InputGroup,{className:r.clsx("jkl-text-area",p,{"jkl-text-area--start-open":j,"jkl-text-area--auto-expand":o}),"data-testid":"jkl-text-area",...y,children:e.jsx(l.BaseTextArea,{ref:s,...q,...P})})}));s.displayName="TextArea",exports.TextArea=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),t=require("react"),a=require("../input-group/InputGroup.cjs"),s=require("./BaseTextArea.cjs"),l=t.forwardRef(((t,l)=>{const{autoExpand:o,className:p,counter:n,density:i,errorLabel:u,helpLabel:c,inline:x,label:d,labelProps:b,startOpen:j,supportLabelProps:L,tooltip:m,description:q,...y}=t,P={label:d,density:i,errorLabel:u,helpLabel:c,labelProps:b,inline:x,supportLabelProps:L,tooltip:m,description:q},T={autoExpand:o,counter:n,startOpen:j};return e.jsx(a.InputGroup,{className:r.clsx("jkl-text-area",p,{"jkl-text-area--start-open":j,"jkl-text-area--auto-expand":o}),"data-testid":"jkl-text-area",...P,children:e.jsx(s.BaseTextArea,{ref:l,...y,...T})})}));l.displayName="TextArea",exports.TextArea=l;
 //# sourceMappingURL=TextArea.cjs.map