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

@fremtind/jokul 5.1.0 → 5.2.1

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 (95) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Combobox.js","sources":["../../../../src/components/combobox/Combobox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type FC,\n type FocusEvent,\n type KeyboardEvent,\n type MouseEvent,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useListNavigation } from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport type { ValuePair } from \"../../utilities/valuePair.js\";\nimport { Chip } from \"../chip/Chip.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CheckIcon } from \"../icon/icons/CheckIcon.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport { Tooltip } from \"../tooltip/Tooltip.js\";\nimport { TooltipContent } from \"../tooltip/TooltipContent.js\";\nimport { TooltipTrigger } from \"../tooltip/TooltipTrigger.js\";\nimport type { ComboboxProps, ComboboxValuePair } from \"./types.js\";\n\nexport function getComboboxValuePair(\n item: string \| ComboboxValuePair,\n): ComboboxValuePair {\n return typeof item === \"string\" ? { value: item, label: item } : item;\n}\n\nexport const Combobox: FC<ComboboxProps> = (props) => {\n const {\n \"data-size\": dataSize,\n id,\n placeholder,\n items,\n onChange,\n onFocus,\n onBlur,\n value,\n label,\n noMatchingOption,\n labelProps,\n helpLabel,\n errorLabel,\n width,\n name,\n className,\n invalid,\n description,\n hasTagHover,\n } = props;\n const listId = useId(id \|\| \"jkl-combobox\", { generateSuffix: !id });\n const labelId = `${listId}_label`;\n const buttonId = `${listId}_button`;\n const inputId = `${listId}_search-input`;\n\n const [selectedValue, setSelectedValue] = useState<\n Array<ComboboxValuePair>\n >(value \|\| []);\n const [showMenu, setShowMenu] = useState<boolean>(false);\n const [searchValue, setSearchValue] = useState<string>(\"\");\n const [noResults, setNoResults] = useState(false);\n const [marked, setMarked] = useState<boolean>(false);\n\n const searchRef = useRef<HTMLInputElement>(null);\n const inputRef = useRef<HTMLDivElement>(null);\n const focusInsideRef = useRef(false);\n\n useEffect(() => {\n setSearchValue(\"\");\n if (showMenu && searchRef.current) {\n searchRef.current.focus();\n }\n }, [showMenu]);\n\n useEffect(() => {\n setSelectedValue((prev) => value \|\| prev);\n }, [value]);\n\n // Funksjon for å stile valgt element\n const isSelected = (option: ValuePair) => {\n if (!selectedValue) {\n return false;\n }\n\n return selectedValue.some((value) => value.value === option.value);\n };\n\n // Fjerne ett eller flere valg\n const removeOption = useCallback(\n (option: string) => {\n return selectedValue.filter((value) => value.value !== option);\n },\n [selectedValue],\n );\n\n const onTagRemove = useCallback(\n (\n e:\n \| React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent>\n \| React.KeyboardEvent<HTMLInputElement>,\n option: string,\n ) => {\n const newValue = removeOption(option);\n setSelectedValue(newValue);\n onChange({\n type: \"change\",\n target: { name, value: option, selectedOptions: newValue },\n });\n e.stopPropagation();\n\n if (newValue.length === 0) {\n setMarked(false);\n }\n },\n [removeOption, onChange, name],\n );\n\n // Håndtere valgt verdi i listen\n const onItemClick = useCallback(\n (option: string) => {\n let newValue: Array<ValuePair>;\n\n if (selectedValue.some((value) => value.value === option)) {\n newValue = removeOption(option);\n } else {\n const item = items.find((i) => i.value === option);\n newValue = [...selectedValue, item as ValuePair];\n }\n searchRef.current?.focus();\n setSelectedValue(newValue);\n onChange({\n type: \"change\",\n target: { name, value: option, selectedOptions: newValue },\n });\n },\n [selectedValue, onChange, name, removeOption, items],\n );\n\n // Funksjon for søk\n const onSearch = (e: {\n target: { value: React.SetStateAction<string> };\n }) => {\n searchRef.current?.focus();\n setShowMenu(true);\n setSearchValue(e.target.value);\n };\n\n const options = useMemo(() => {\n if (!searchValue) {\n return items;\n }\n\n const filteredOptions = items.filter(\n (option) =>\n option.label.toLowerCase().indexOf(searchValue.toLowerCase()) >=\n 0,\n );\n\n setNoResults(filteredOptions.length === 0);\n\n return filteredOptions;\n }, [searchValue, items]);\n\n // Det første elementet i listen skal være aktivt fram til brukeren klikker på noe annet\n const [activeDescendant, setActiveDescendant] = useState<\n string \| undefined\n >(options[0]?.value ? `${listId}-${options[0]?.value}` : undefined);\n\n // Håndtere arrow-state\n const isPointingDown = !showMenu;\n\n // Lukk meny med ESC\n useEffect(() => {\n const handleEscape = (e: globalThis.KeyboardEvent) => {\n if (e.key === \"Escape\" && showMenu) {\n setShowMenu(false);\n }\n };\n if (typeof window !== \"undefined\") {\n window.addEventListener(\"keydown\", handleEscape);\n }\n return () => {\n if (typeof window !== \"undefined\" && showMenu) {\n window.removeEventListener(\"keydown\", handleEscape);\n }\n };\n }, [showMenu]);\n\n // Fokushåndtering\n const handleFocusPlacement = useCallback((isOpen: boolean) => {\n if (isOpen) {\n if (searchRef.current) {\n searchRef.current.focus();\n }\n } else {\n if (focusInsideRef.current && inputRef.current) {\n inputRef.current.focus();\n }\n }\n }, []);\n\n const handleFocus = useCallback(() => {\n if (!focusInsideRef.current) {\n if (onFocus) {\n onFocus({\n type: \"change\",\n target: {\n name,\n value: selectedValue?.[0].value \|\| \"\",\n selectedOptions: selectedValue,\n },\n });\n }\n focusInsideRef.current = true;\n setShowMenu(true);\n }\n }, [onFocus, selectedValue, name]);\n\n const [dropdownRef] = useAnimatedHeight<HTMLDivElement>(showMenu, {\n onFirstVisible: handleFocusPlacement,\n onTransitionEnd: handleFocusPlacement,\n });\n\n useListNavigation({ ref: dropdownRef });\n\n const componentRootElementRef = useRef<HTMLDivElement>(null);\n\n const handleBlur = useCallback(\n (\n e: FocusEvent<\n HTMLDivElement \| HTMLInputElement \| HTMLButtonElement\n >,\n ) => {\n const componentRootElement = componentRootElementRef.current;\n const nextFocusIsInsideComponent = componentRootElement?.contains(\n e.relatedTarget as Node,\n );\n if (!nextFocusIsInsideComponent) {\n setSearchValue(\"\");\n\n if (onBlur) {\n onBlur({\n type: \"blur\",\n target: {\n name,\n value: selectedValue?.[0]?.value \|\| \"\",\n selectedOptions: selectedValue,\n },\n });\n inputRef.current?.dispatchEvent(\n new Event(\"focusout\", { bubbles: true }),\n );\n }\n focusInsideRef.current = false;\n setShowMenu(false);\n }\n },\n [onBlur, name, selectedValue],\n );\n\n const handleMouseOver = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n // Ved mouseOver på options flytter vi fokus til dem for å unngå \"dobbel fokus\"\n // der det ser ut som to forskjellige elementer er fokusert/hovered samtidig\n (e.target as HTMLButtonElement).focus({ preventScroll: true });\n }, []);\n\n // Tastaturnavigasjon\n const handleSearchOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n e.stopPropagation();\n const listElement = dropdownRef.current;\n if (listElement) {\n listElement\n .querySelector<HTMLButtonElement>('[role=\"option\"]')\n ?.focus();\n }\n } else if (e.key === \"Escape\") {\n e.preventDefault();\n e.stopPropagation();\n setShowMenu(false);\n }\n\n if ((e.metaKey && e.key === \"a\") \|\| (e.ctrlKey && e.key === \"a\")) {\n e.preventDefault();\n e.stopPropagation();\n const updatedSelectedValue = selectedValue.map((item) => ({\n ...item,\n isMarked: true,\n }));\n setMarked(true);\n setSelectedValue(updatedSelectedValue);\n } else if (e.key === \"Backspace\") {\n e.stopPropagation();\n setMarked(false);\n\n // Sjekk om selectedValue er markert\n const selectedValueIsMarked = selectedValue.some(\n (item) => item.isMarked,\n );\n\n if (selectedValueIsMarked) {\n const updatedSelectedValue = selectedValue.filter(\n (item) => !item.isMarked,\n );\n setSelectedValue(updatedSelectedValue);\n setSearchValue(\"\");\n } else if (selectedValue.length > 0 && searchValue === \"\") {\n // Hvis ingen items er markert, fjern siste valgte item\n onTagRemove(\n e,\n selectedValue[selectedValue.length - 1].value,\n );\n }\n }\n },\n [selectedValue, searchValue, dropdownRef, onTagRemove],\n );\n\n const handleOptionOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === \"Tab\") {\n if (searchRef.current) {\n e.preventDefault();\n e.stopPropagation();\n\n if (e.shiftKey) {\n searchRef.current.focus();\n } else {\n setShowMenu(false);\n searchRef.current.focus();\n }\n }\n } else if (e.key === \"ArrowUp\") {\n if (dropdownRef.current && searchRef.current) {\n // Can't be based on index since the first item might be filtered out\n const firstVisible = dropdownRef.current.querySelector(\n '[role=\"option\"]:not([hidden])',\n );\n if (\n e.currentTarget.id === firstVisible?.id &&\n searchRef.current\n ) {\n searchRef.current.focus();\n }\n }\n }\n },\n [dropdownRef],\n );\n\n const hasSelection = selectedValue.length >= 1;\n\n const renderSelectedOption = useCallback(\n (option: ComboboxValuePair) => (\n <Chip\n key={option.value}\n data-testid=\"jkl-chip\"\n aria-label={`Fjern ${option.tagLabel}`}\n className={`jkl-combobox__selected-option ${\n marked && \"jkl-combobox__selected-option--marked\"\n }`}\n variant=\"input\"\n onClick={(e) => {\n if (searchRef.current) {\n searchRef.current.focus();\n }\n onTagRemove(e, option.value);\n }}\n onBlur={handleBlur}\n >\n {option.tagLabel ? option.tagLabel : option.label}\n </Chip>\n ),\n [handleBlur, onTagRemove, marked],\n );\n\n return (\n <InputGroup\n label={label}\n id={inputId}\n ref={componentRootElementRef}\n data-testid=\"jkl-combobox\"\n data-size={dataSize}\n className={clsx(\"jkl-combobox\", className, {\n \"jkl-combobox--invalid\": !!errorLabel \|\| invalid,\n \"jkl-combobox--menu-open\": showMenu,\n \"jkl-combobox--menu-closed\": !showMenu && hasSelection,\n })}\n labelProps={{\n id: labelId,\n ...labelProps,\n }}\n helpLabel={helpLabel}\n errorLabel={errorLabel}\n description={description}\n render={(inputProps) => (\n <div\n className={clsx(\"jkl-combobox__wrapper\", {\n \"jkl-combobox__wrapper--active-value\": hasSelection,\n })}\n style={{ width }}\n tabIndex={-1}\n onFocus={handleFocus}\n onBlur={handleBlur}\n data-invalid={!!errorLabel \|\| invalid}\n >\n <div\n className=\"jkl-combobox__chips\"\n data-testid=\"jkl-combobox__chips\"\n >\n {selectedValue\n .map(getComboboxValuePair)\n .map((option) => {\n return hasTagHover ? (\n <Tooltip key={option.value}>\n <TooltipTrigger>\n {renderSelectedOption(option)}\n </TooltipTrigger>\n <TooltipContent>\n {option.label}\n </TooltipContent>\n </Tooltip>\n ) : (\n renderSelectedOption(option)\n );\n })}\n <input\n {...inputProps}\n className=\"jkl-combobox__search-input\"\n onChange={onSearch}\n data-testid=\"jkl-combobox__search-input\"\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleSearchOnKeyDown}\n value={searchValue}\n ref={searchRef}\n aria-controls={listId}\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-expanded={showMenu}\n placeholder={\n selectedValue.length > 0 ? \"\" : placeholder\n }\n autoComplete=\"off\"\n />\n </div>\n\n <div\n className=\"jkl-combobox__menu\"\n // biome-ignore lint/a11y/useSemanticElements: Dette er en reimplementering av en liste\n role=\"listbox\"\n ref={dropdownRef}\n id={listId}\n aria-labelledby={labelId}\n aria-multiselectable=\"true\"\n aria-activedescendant={activeDescendant}\n onFocus={handleFocus}\n onBlur={handleBlur}\n tabIndex={-1}\n >\n {options.map((option, i) => (\n <button\n key={`${listId}-${option.value}`}\n type=\"button\"\n id={`${listId}__${option.value}`}\n aria-selected={isSelected(option)}\n // biome-ignore lint/a11y/useSemanticElements: Dette er en reimplementering av en liste\n role=\"option\"\n value={option.value}\n onBlur={handleBlur}\n className={`jkl-combobox__option ${\n isSelected(option) &&\n \"jkl-combobox__option--selected\"\n }`}\n data-testid=\"jkl-combobox__option\"\n data-testautoid={`jkl-combobox__option-${i}`}\n onFocus={handleFocus}\n onKeyDown={handleOptionOnKeyDown}\n onClick={(e) => {\n setActiveDescendant(\n `${listId}__${option.value}`,\n ); // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role#required_javascript_features\n e.stopPropagation();\n onItemClick(option.value);\n setSearchValue(\"\");\n }}\n onMouseOver={handleMouseOver}\n >\n {option.description ? (\n <span>\n {option.label}\n <span className=\"jkl-combobox__option-description\">\n {option.description}\n </span>\n </span>\n ) : (\n option.label\n )}\n {isSelected(option) ? (\n <span>\n <CheckIcon />{\" \"}\n </span>\n ) : null}\n </button>\n ))}\n {noResults && (\n <div className=\"jkl-combobox__no-option\">\n {noMatchingOption}\n </div>\n )}\n </div>\n <IconButton\n id={buttonId}\n onFocus={handleFocus}\n onBlur={handleBlur}\n className=\"jkl-text-input-action-button\"\n data-testid=\"jkl-combobox__button\"\n aria-label=\"Åpne meny\"\n aria-expanded={showMenu}\n aria-controls={listId}\n onClick={() => setShowMenu((previous) => !previous)}\n onMouseDown={(e) => {\n e.preventDefault();\n inputRef.current?.focus();\n }}\n >\n <ArrowVerticalAnimated pointingDown={isPointingDown} />\n </IconButton>\n </div>\n )}\n />\n );\n};\nCombobox.displayName = \"Combobox\";\n"],"names":["getComboboxValuePair","item","value","label","Combobox","props","dataSize","id","placeholder","items","onChange","onFocus","onBlur","noMatchingOption","labelProps","helpLabel","errorLabel","width","name","className","invalid","description","hasTagHover","listId","useId","generateSuffix","labelId","buttonId","inputId","selectedValue","setSelectedValue","useState","showMenu","setShowMenu","searchValue","setSearchValue","noResults","setNoResults","marked","setMarked","searchRef","useRef","inputRef","focusInsideRef","useEffect","current","focus","prev","isSelected","option","some","removeOption","useCallback","filter","onTagRemove","e","newValue","type","target","selectedOptions","stopPropagation","length","onItemClick","find","i","onSearch","options","useMemo","filteredOptions","toLowerCase","indexOf","activeDescendant","setActiveDescendant","isPointingDown","handleEscape","key","window","addEventListener","removeEventListener","handleFocusPlacement","isOpen","handleFocus","dropdownRef","useAnimatedHeight","onFirstVisible","onTransitionEnd","useListNavigation","ref","componentRootElementRef","handleBlur","contains","relatedTarget","dispatchEvent","Event","bubbles","handleMouseOver","preventScroll","handleSearchOnKeyDown","preventDefault","listElement","querySelector","metaKey","ctrlKey","updatedSelectedValue","map","isMarked","handleOptionOnKeyDown","shiftKey","firstVisible","currentTarget","hasSelection","renderSelectedOption","jsx","Chip","tagLabel","variant","onClick","children","InputGroup","clsx","render","inputProps","jsxs","style","tabIndex","Tooltip","TooltipTrigger","TooltipContent","onKeyDown","role","autoComplete","onMouseOver","CheckIcon","IconButton","previous","onMouseDown","ArrowVerticalAnimated","pointingDown","displayName"],"mappings":"i3BA0BO,SAASA,EACZC,GAEA,MAAuB,iBAATA,EAAoB,CAAEC,MAAOD,EAAME,MAAOF,GAASA,CACrE,CAEO,MAAMG,EAA+BC,IACxC,MACI,YAAaC,EACbC,GAAAA,EACAC,YAAAA,EACAC,MAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,OAAAA,EACAV,MAAAA,EACAC,MAAAA,EACAU,iBAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,MAAAA,EACAC,KAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,YAAAA,EACAC,YAAAA,GACAjB,EACEkB,EAASC,EAAMjB,GAAM,eAAgB,CAAEkB,gBAAiBlB,IACxDmB,EAAU,GAAGH,UACbI,EAAW,GAAGJ,WACdK,EAAU,GAAGL,kBAEZM,EAAeC,GAAoBC,EAExC7B,GAAS,KACJ8B,EAAUC,GAAeF,GAAkB,IAC3CG,EAAaC,GAAkBJ,EAAiB,KAChDK,EAAWC,GAAgBN,GAAS,IACpCO,EAAQC,GAAaR,GAAkB,GAExCS,GAAYC,EAAyB,MACrCC,GAAWD,EAAuB,MAClCE,GAAiBF,GAAO,GAE9BG,EAAU,KACNT,EAAe,IACXH,GAAYQ,GAAUK,SACtBL,GAAUK,QAAQC,SAEvB,CAACd,IAEJY,EAAU,KACNd,EAAkBiB,GAAS7C,GAAS6C,IACrC,CAAC7C,IAGJ,MAAM8C,GAAcC,KACXpB,GAIEA,EAAcqB,KAAMhD,GAAUA,EAAMA,QAAU+C,EAAO/C,OAI1DiD,GAAeC,EAChBH,GACUpB,EAAcwB,OAAQnD,GAAUA,EAAMA,QAAU+C,GAE3D,CAACpB,IAGCyB,GAAcF,EAChB,CACIG,EAGAN,KAEA,MAAMO,EAAWL,GAAaF,GAC9BnB,EAAiB0B,GACjB9C,EAAS,CACL+C,KAAM,SACNC,OAAQ,CAAExC,KAAAA,EAAMhB,MAAO+C,EAAQU,gBAAiBH,KAEpDD,EAAEK,kBAEsB,IAApBJ,EAASK,QACTtB,GAAU,IAGlB,CAACY,GAAczC,EAAUQ,IAIvB4C,GAAcV,EACfH,IACG,IAAIO,EAEJ,GAAI3B,EAAcqB,KAAMhD,GAAUA,EAAMA,QAAU+C,GAC9CO,EAAWL,GAAaF,OACrB,CACH,MAAMhD,EAAOQ,EAAMsD,KAAMC,GAAMA,EAAE9D,QAAU+C,GAC3CO,EAAW,IAAI3B,EAAe5B,EAClC,CACAuC,GAAUK,SAASC,QACnBhB,EAAiB0B,GACjB9C,EAAS,CACL+C,KAAM,SACNC,OAAQ,CAAExC,KAAAA,EAAMhB,MAAO+C,EAAQU,gBAAiBH,MAGxD,CAAC3B,EAAenB,EAAUQ,EAAMiC,GAAc1C,IAI5CwD,GAAYV,IAGdf,GAAUK,SAASC,QACnBb,GAAY,GACZE,EAAeoB,EAAEG,OAAOxD,QAGtBgE,GAAUC,EAAQ,KACpB,IAAKjC,EACD,OAAOzB,EAGX,MAAM2D,EAAkB3D,EAAM4C,OACzBJ,GACGA,EAAO9C,MAAMkE,cAAcC,QAAQpC,EAAYmC,gBAC/C,GAGR,OAAAhC,EAAwC,IAA3B+B,EAAgBP,QAEtBO,GACR,CAAClC,EAAazB,KAGV8D,GAAkBC,IAAuBzC,EAE9CmC,GAAQ,IAAIhE,MAAQ,GAAGqB,KAAU2C,GAAQ,IAAIhE,aAAU,GAGnDuE,IAAkBzC,EAGxBY,EAAU,KACN,MAAM8B,EAAgBnB,IACJ,WAAVA,EAAEoB,KAAoB3C,GACtBC,GAAY,IAGpB,cAAW2C,OAAW,KAClBA,OAAOC,iBAAiB,UAAWH,GAEhC,YACQE,OAAW,KAAe5C,GACjC4C,OAAOE,oBAAoB,UAAWJ,KAG/C,CAAC1C,IAGJ,MAAM+C,GAAuB3B,EAAa4B,IAClCA,EACIxC,GAAUK,SACVL,GAAUK,QAAQC,QAGlBH,GAAeE,SAAWH,GAASG,SACnCH,GAASG,QAAQC,SAG1B,IAEGmC,GAAc7B,EAAY,KACvBT,GAAeE,UACZlC,GACAA,EAAQ,CACJ8C,KAAM,SACNC,OAAQ,CACJxC,KAAAA,EACAhB,MAAO2B,IAAgB,GAAG3B,OAAS,GACnCyD,gBAAiB9B,KAI7Bc,GAAeE,SAAU,EACzBZ,GAAY,KAEjB,CAACtB,EAASkB,EAAeX,KAErBgE,IAAeC,EAAkCnD,EAAU,CAC9DoD,eAAgBL,GAChBM,gBAAiBN,KAGrBO,EAAkB,CAAEC,IAAKL,KAEzB,MAAMM,GAA0B/C,EAAuB,MAEjDgD,GAAarC,EAEXG,IAI6BiC,GAAwB3C,SACI6C,SACrDnC,EAAEoC,iBAGFxD,EAAe,IAEXvB,IACAA,EAAO,CACH6C,KAAM,OACNC,OAAQ,CACJxC,KAAAA,EACAhB,MAAO2B,IAAgB,IAAI3B,OAAS,GACpCyD,gBAAiB9B,KAGzBa,GAASG,SAAS+C,cACd,IAAIC,MAAM,WAAY,CAAEC,SAAS,MAGzCnD,GAAeE,SAAU,EACzBZ,GAAY,KAGpB,CAACrB,EAAQM,EAAMW,IAGbkE,GAAkB3C,EAAaG,IAGhCA,EAAEG,OAA6BZ,MAAM,CAAEkD,eAAe,KACxD,IAGGC,GAAwB7C,EACzBG,IACG,GAAc,cAAVA,EAAEoB,IAAqB,CACvBpB,EAAE2C,iBACF3C,EAAEK,kBACF,MAAMuC,EAAcjB,GAAYrC,QAC5BsD,GACAA,EACKC,cAAiC,oBAChCtD,OAEd,KAAqB,WAAVS,EAAEoB,MACTpB,EAAE2C,iBACF3C,EAAEK,kBACF3B,GAAY,IAGhB,GAAKsB,EAAE8C,SAAqB,MAAV9C,EAAEoB,KAAiBpB,EAAE+C,SAAqB,MAAV/C,EAAEoB,IAAc,CAC9DpB,EAAE2C,iBACF3C,EAAEK,kBACF,MAAM2C,EAAuB1E,EAAc2E,IAAKvG,IAAAA,IACzCA,EACHwG,UAAU,KAEdlE,GAAU,GACVT,EAAiByE,EACrB,MAAA,GAAqB,cAAVhD,EAAEoB,IAST,GARApB,EAAEK,kBACFrB,GAAU,GAGoBV,EAAcqB,KACvCjD,GAASA,EAAKwG,UAGQ,CACvB,MAAMF,EAAuB1E,EAAcwB,OACtCpD,IAAUA,EAAKwG,UAEpB3E,EAAiByE,GACjBpE,EAAe,GACnB,MAAWN,EAAcgC,OAAS,GAAqB,KAAhB3B,GAEnCoB,GACIC,EACA1B,EAAcA,EAAcgC,OAAS,GAAG3D,QAKxD,CAAC2B,EAAeK,EAAagD,GAAa5B,KAGxCoD,GAAwBtD,EACzBG,IACG,GAAc,QAAVA,EAAEoB,IACEnC,GAAUK,UACVU,EAAE2C,iBACF3C,EAAEK,kBAEEL,EAAEoD,UAGF1E,GAAY,GACZO,GAAUK,QAAQC,cAAA,GAGT,YAAVS,EAAEoB,KACLO,GAAYrC,SAAWL,GAAUK,QAAS,CAE1C,MAAM+D,EAAe1B,GAAYrC,QAAQuD,cACrC,iCAGA7C,EAAEsD,cAActG,KAAOqG,GAAcrG,IACrCiC,GAAUK,SAEVL,GAAUK,QAAQC,OAE1B,GAGR,CAACoC,KAGC4B,GAAejF,EAAcgC,QAAU,EAEvCkD,GAAuB3D,EACxBH,GACG+D,EAACC,EAAA,CAEG,cAAY,WACZ,aAAY,SAAShE,EAAOiE,WAC5B/F,UAAW,iCACPmB,GAAU,0CAEd6E,QAAQ,QACRC,QAAU7D,IACFf,GAAUK,SACVL,GAAUK,QAAQC,QAEtBQ,GAAYC,EAAGN,EAAO/C,QAE1BU,OAAQ6E,GAEP4B,SAAApE,EAAOiE,SAAWjE,EAAOiE,SAAWjE,EAAO9C,OAfvC8C,EAAO/C,OAkBpB,CAACuF,GAAYnC,GAAahB,IAG9B,OACI0E,EAACM,EAAA,CACGnH,MAAAA,EACAI,GAAIqB,EACJ2D,IAAKC,GACL,cAAY,eACZ,YAAWlF,EACXa,UAAWoG,EAAK,eAAgBpG,EAAW,CACvC,0BAA2BH,GAAcI,EACzC,0BAA2BY,EAC3B,6BAA8BA,GAAY8E,KAE9ChG,WAAY,CACRP,GAAImB,KACDZ,GAEPC,UAAAA,EACAC,WAAAA,EACAK,YAAAA,EACAmG,OAASC,GACLC,EAAC,MAAA,CACGvG,UAAWoG,EAAK,wBAAyB,CACrC,sCAAuCT,KAE3Ca,MAAO,CAAE1G,MAAAA,GACT2G,UAAU,EACVjH,QAASsE,GACTrE,OAAQ6E,GACR,iBAAgBzE,GAAcI,EAE9BiG,SAAA,CAAAK,EAAC,MAAA,CACGvG,UAAU,sBACV,cAAY,sBAEXkG,SAAA,CAAAxF,EACI2E,IAAIxG,GACJwG,IAAKvD,GACK3B,IACFuG,EAAA,CACGR,SAAA,CAAAL,EAACc,EAAA,CACIT,SAAAN,GAAqB9D,KAE1B+D,EAACe,EAAA,CACIV,SAAApE,EAAO9C,UALF8C,EAAO/C,OASrB6G,GAAqB9D,IAGjC+D,EAAC,QAAA,IACOS,EACJtG,UAAU,6BACVT,SAAUuD,GACV,cAAY,6BACZtD,QAASsE,GACTrE,OAAQ6E,GACRuC,UAAW/B,GACX/F,MAAOgC,EACPqD,IAAK/C,GACL,gBAAejB,EACf0G,KAAK,WACL,oBAAkB,OAClB,gBAAejG,EACfxB,YACIqB,EAAcgC,OAAS,EAAI,GAAKrD,EAEpC0H,aAAa,WAIrBR,EAAC,MAAA,CACGvG,UAAU,qBAEV8G,KAAK,UACL1C,IAAKL,GACL3E,GAAIgB,EACJ,kBAAiBG,EACjB,uBAAqB,OACrB,wBAAuB6C,GACvB5D,QAASsE,GACTrE,OAAQ6E,GACRmC,UAAU,EAETP,SAAA,CAAAnD,GAAQsC,IAAI,CAACvD,EAAQe,IAClB0D,EAAC,SAAA,CAEGjE,KAAK,SACLlD,GAAI,GAAGgB,MAAW0B,EAAO/C,QACzB,gBAAe8C,GAAWC,GAE1BgF,KAAK,SACL/H,MAAO+C,EAAO/C,MACdU,OAAQ6E,GACRtE,UAAW,wBACP6B,GAAWC,IACX,mCAEJ,cAAY,uBACZ,kBAAiB,wBAAwBe,IACzCrD,QAASsE,GACT+C,UAAWtB,GACXU,QAAU7D,IACNiB,GACI,GAAGjD,MAAW0B,EAAO/C,SAEzBqD,EAAEK,kBACFE,GAAYb,EAAO/C,OACnBiC,EAAe,KAEnBgG,YAAapC,GAEZsB,SAAA,CAAApE,EAAO5B,cACH,OAAA,CACIgG,SAAA,CAAApE,EAAO9C,MACR6G,EAAC,OAAA,CAAK7F,UAAU,mCACXkG,WAAOhG,iBAIhB4B,EAAO9C,MAEV6C,GAAWC,GACRyE,EAAC,OAAA,CACGL,SAAA,CAAAL,EAACoB,EAAA,IAAa,OAElB,OAxCC,GAAG7G,KAAU0B,EAAO/C,UA2ChCkC,GACG4E,EAAC,MAAA,CAAI7F,UAAU,0BACVkG,SAAAxG,OAIbmG,EAACqB,EAAA,CACG9H,GAAIoB,EACJhB,QAASsE,GACTrE,OAAQ6E,GACRtE,UAAU,+BACV,cAAY,uBACZ,aAAW,YACX,gBAAea,EACf,gBAAeT,EACf6F,QAAS,IAAMnF,EAAaqG,IAAcA,GAC1CC,YAAchF,IACVA,EAAE2C,iBACFxD,GAASG,SAASC,SAGtBuE,SAAAL,EAACwB,EAAA,CAAsBC,aAAchE,aAO7DrE,EAASsI,YAAc"}
1	+ {"version":3,"file":"Combobox.js","sources":["../../../../src/components/combobox/Combobox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type FC,\n type FocusEvent,\n type KeyboardEvent,\n type MouseEvent,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useListNavigation } from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport type { ValuePair } from \"../../utilities/valuePair.js\";\nimport { Chip } from \"../chip/Chip.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CheckIcon } from \"../icon/icons/CheckIcon.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport { Tooltip } from \"../tooltip/Tooltip.js\";\nimport { TooltipContent } from \"../tooltip/TooltipContent.js\";\nimport { TooltipTrigger } from \"../tooltip/TooltipTrigger.js\";\nimport type { ComboboxProps, ComboboxValuePair } from \"./types.js\";\n\nexport function getComboboxValuePair(\n item: string \| ComboboxValuePair,\n): ComboboxValuePair {\n return typeof item === \"string\" ? { value: item, label: item } : item;\n}\n\nexport const Combobox: FC<ComboboxProps> = (props) => {\n const {\n \"data-size\": dataSize,\n id,\n placeholder,\n items,\n onChange,\n onFocus,\n onBlur,\n value,\n label,\n noMatchingOption,\n labelProps,\n helpLabel,\n errorLabel,\n width,\n name,\n className,\n invalid,\n description,\n hasTagHover,\n tooltip,\n } = props;\n const listId = useId(id \|\| \"jkl-combobox\", { generateSuffix: !id });\n const labelId = `${listId}_label`;\n const buttonId = `${listId}_button`;\n const inputId = `${listId}_search-input`;\n\n const [selectedValue, setSelectedValue] = useState<\n Array<ComboboxValuePair>\n >(value \|\| []);\n const [showMenu, setShowMenu] = useState<boolean>(false);\n const [searchValue, setSearchValue] = useState<string>(\"\");\n const [noResults, setNoResults] = useState(false);\n const [marked, setMarked] = useState<boolean>(false);\n\n const searchRef = useRef<HTMLInputElement>(null);\n const inputRef = useRef<HTMLDivElement>(null);\n const focusInsideRef = useRef(false);\n\n useEffect(() => {\n setSearchValue(\"\");\n if (showMenu && searchRef.current) {\n searchRef.current.focus();\n }\n }, [showMenu]);\n\n useEffect(() => {\n setSelectedValue((prev) => value \|\| prev);\n }, [value]);\n\n // Funksjon for å stile valgt element\n const isSelected = (option: ValuePair) => {\n if (!selectedValue) {\n return false;\n }\n\n return selectedValue.some((value) => value.value === option.value);\n };\n\n // Fjerne ett eller flere valg\n const removeOption = useCallback(\n (option: string) => {\n return selectedValue.filter((value) => value.value !== option);\n },\n [selectedValue],\n );\n\n const onTagRemove = useCallback(\n (\n e:\n \| React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent>\n \| React.KeyboardEvent<HTMLInputElement>,\n option: string,\n ) => {\n const newValue = removeOption(option);\n setSelectedValue(newValue);\n onChange({\n type: \"change\",\n target: { name, value: option, selectedOptions: newValue },\n });\n e.stopPropagation();\n\n if (newValue.length === 0) {\n setMarked(false);\n }\n },\n [removeOption, onChange, name],\n );\n\n // Håndtere valgt verdi i listen\n const onItemClick = useCallback(\n (option: string) => {\n let newValue: Array<ValuePair>;\n\n if (selectedValue.some((value) => value.value === option)) {\n newValue = removeOption(option);\n } else {\n const item = items.find((i) => i.value === option);\n newValue = [...selectedValue, item as ValuePair];\n }\n searchRef.current?.focus();\n setSelectedValue(newValue);\n onChange({\n type: \"change\",\n target: { name, value: option, selectedOptions: newValue },\n });\n },\n [selectedValue, onChange, name, removeOption, items],\n );\n\n // Funksjon for søk\n const onSearch = (e: {\n target: { value: React.SetStateAction<string> };\n }) => {\n searchRef.current?.focus();\n setShowMenu(true);\n setSearchValue(e.target.value);\n };\n\n const options = useMemo(() => {\n if (!searchValue) {\n return items;\n }\n\n const filteredOptions = items.filter(\n (option) =>\n option.label.toLowerCase().indexOf(searchValue.toLowerCase()) >=\n 0,\n );\n\n setNoResults(filteredOptions.length === 0);\n\n return filteredOptions;\n }, [searchValue, items]);\n\n // Det første elementet i listen skal være aktivt fram til brukeren klikker på noe annet\n const [activeDescendant, setActiveDescendant] = useState<\n string \| undefined\n >(options[0]?.value ? `${listId}-${options[0]?.value}` : undefined);\n\n // Håndtere arrow-state\n const isPointingDown = !showMenu;\n\n // Lukk meny med ESC\n useEffect(() => {\n const handleEscape = (e: globalThis.KeyboardEvent) => {\n if (e.key === \"Escape\" && showMenu) {\n setShowMenu(false);\n }\n };\n if (typeof window !== \"undefined\") {\n window.addEventListener(\"keydown\", handleEscape);\n }\n return () => {\n if (typeof window !== \"undefined\" && showMenu) {\n window.removeEventListener(\"keydown\", handleEscape);\n }\n };\n }, [showMenu]);\n\n // Fokushåndtering\n const handleFocusPlacement = useCallback((isOpen: boolean) => {\n if (isOpen) {\n if (searchRef.current) {\n searchRef.current.focus();\n }\n } else {\n if (focusInsideRef.current && inputRef.current) {\n inputRef.current.focus();\n }\n }\n }, []);\n\n const handleFocus = useCallback(() => {\n if (!focusInsideRef.current) {\n if (onFocus) {\n onFocus({\n type: \"change\",\n target: {\n name,\n value: selectedValue?.[0].value \|\| \"\",\n selectedOptions: selectedValue,\n },\n });\n }\n focusInsideRef.current = true;\n setShowMenu(true);\n }\n }, [onFocus, selectedValue, name]);\n\n const [dropdownRef] = useAnimatedHeight<HTMLDivElement>(showMenu, {\n onFirstVisible: handleFocusPlacement,\n onTransitionEnd: handleFocusPlacement,\n });\n\n useListNavigation({ ref: dropdownRef });\n\n const componentRootElementRef = useRef<HTMLDivElement>(null);\n\n const handleBlur = useCallback(\n (\n e: FocusEvent<\n HTMLDivElement \| HTMLInputElement \| HTMLButtonElement\n >,\n ) => {\n const componentRootElement = componentRootElementRef.current;\n const nextFocusIsInsideComponent = componentRootElement?.contains(\n e.relatedTarget as Node,\n );\n if (!nextFocusIsInsideComponent) {\n setSearchValue(\"\");\n\n if (onBlur) {\n onBlur({\n type: \"blur\",\n target: {\n name,\n value: selectedValue?.[0]?.value \|\| \"\",\n selectedOptions: selectedValue,\n },\n });\n inputRef.current?.dispatchEvent(\n new Event(\"focusout\", { bubbles: true }),\n );\n }\n focusInsideRef.current = false;\n setShowMenu(false);\n }\n },\n [onBlur, name, selectedValue],\n );\n\n const handleMouseOver = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n // Ved mouseOver på options flytter vi fokus til dem for å unngå \"dobbel fokus\"\n // der det ser ut som to forskjellige elementer er fokusert/hovered samtidig\n (e.target as HTMLButtonElement).focus({ preventScroll: true });\n }, []);\n\n // Tastaturnavigasjon\n const handleSearchOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n e.stopPropagation();\n const listElement = dropdownRef.current;\n if (listElement) {\n listElement\n .querySelector<HTMLButtonElement>('[role=\"option\"]')\n ?.focus();\n }\n } else if (e.key === \"Escape\") {\n e.preventDefault();\n e.stopPropagation();\n setShowMenu(false);\n }\n\n if ((e.metaKey && e.key === \"a\") \|\| (e.ctrlKey && e.key === \"a\")) {\n e.preventDefault();\n e.stopPropagation();\n const updatedSelectedValue = selectedValue.map((item) => ({\n ...item,\n isMarked: true,\n }));\n setMarked(true);\n setSelectedValue(updatedSelectedValue);\n } else if (e.key === \"Backspace\") {\n e.stopPropagation();\n setMarked(false);\n\n // Sjekk om selectedValue er markert\n const selectedValueIsMarked = selectedValue.some(\n (item) => item.isMarked,\n );\n\n if (selectedValueIsMarked) {\n const updatedSelectedValue = selectedValue.filter(\n (item) => !item.isMarked,\n );\n setSelectedValue(updatedSelectedValue);\n setSearchValue(\"\");\n } else if (selectedValue.length > 0 && searchValue === \"\") {\n // Hvis ingen items er markert, fjern siste valgte item\n onTagRemove(\n e,\n selectedValue[selectedValue.length - 1].value,\n );\n }\n }\n },\n [selectedValue, searchValue, dropdownRef, onTagRemove],\n );\n\n const handleOptionOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === \"Tab\") {\n if (searchRef.current) {\n e.preventDefault();\n e.stopPropagation();\n\n if (e.shiftKey) {\n searchRef.current.focus();\n } else {\n setShowMenu(false);\n searchRef.current.focus();\n }\n }\n } else if (e.key === \"ArrowUp\") {\n if (dropdownRef.current && searchRef.current) {\n // Can't be based on index since the first item might be filtered out\n const firstVisible = dropdownRef.current.querySelector(\n '[role=\"option\"]:not([hidden])',\n );\n if (\n e.currentTarget.id === firstVisible?.id &&\n searchRef.current\n ) {\n searchRef.current.focus();\n }\n }\n }\n },\n [dropdownRef],\n );\n\n const hasSelection = selectedValue.length >= 1;\n\n const renderSelectedOption = useCallback(\n (option: ComboboxValuePair) => (\n <Chip\n key={option.value}\n data-testid=\"jkl-chip\"\n aria-label={`Fjern ${option.tagLabel}`}\n className={`jkl-combobox__selected-option ${\n marked && \"jkl-combobox__selected-option--marked\"\n }`}\n variant=\"input\"\n onClick={(e) => {\n if (searchRef.current) {\n searchRef.current.focus();\n }\n onTagRemove(e, option.value);\n }}\n onBlur={handleBlur}\n >\n {option.tagLabel ? option.tagLabel : option.label}\n </Chip>\n ),\n [handleBlur, onTagRemove, marked],\n );\n\n return (\n <InputGroup\n label={label}\n id={inputId}\n ref={componentRootElementRef}\n data-testid=\"jkl-combobox\"\n data-size={dataSize}\n className={clsx(\"jkl-combobox\", className, {\n \"jkl-combobox--invalid\": !!errorLabel \|\| invalid,\n \"jkl-combobox--menu-open\": showMenu,\n \"jkl-combobox--menu-closed\": !showMenu && hasSelection,\n })}\n labelProps={{\n id: labelId,\n ...labelProps,\n }}\n helpLabel={helpLabel}\n errorLabel={errorLabel}\n description={description}\n tooltip={tooltip}\n render={(inputProps) => (\n <div\n className={clsx(\"jkl-combobox__wrapper\", {\n \"jkl-combobox__wrapper--active-value\": hasSelection,\n })}\n style={{ width }}\n tabIndex={-1}\n onFocus={handleFocus}\n onBlur={handleBlur}\n data-invalid={!!errorLabel \|\| invalid}\n >\n <div\n className=\"jkl-combobox__chips\"\n data-testid=\"jkl-combobox__chips\"\n >\n {selectedValue\n .map(getComboboxValuePair)\n .map((option) => {\n return hasTagHover ? (\n <Tooltip key={option.value}>\n <TooltipTrigger>\n {renderSelectedOption(option)}\n </TooltipTrigger>\n <TooltipContent>\n {option.label}\n </TooltipContent>\n </Tooltip>\n ) : (\n renderSelectedOption(option)\n );\n })}\n <input\n {...inputProps}\n className=\"jkl-combobox__search-input\"\n onChange={onSearch}\n data-testid=\"jkl-combobox__search-input\"\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleSearchOnKeyDown}\n value={searchValue}\n ref={searchRef}\n aria-controls={listId}\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-expanded={showMenu}\n placeholder={\n selectedValue.length > 0 ? \"\" : placeholder\n }\n autoComplete=\"off\"\n />\n </div>\n\n <div\n className=\"jkl-combobox__menu\"\n // biome-ignore lint/a11y/useSemanticElements: Dette er en reimplementering av en liste\n role=\"listbox\"\n ref={dropdownRef}\n id={listId}\n aria-labelledby={labelId}\n aria-multiselectable=\"true\"\n aria-activedescendant={activeDescendant}\n onFocus={handleFocus}\n onBlur={handleBlur}\n tabIndex={-1}\n >\n {options.map((option, i) => (\n <button\n key={`${listId}-${option.value}`}\n type=\"button\"\n id={`${listId}__${option.value}`}\n aria-selected={isSelected(option)}\n // biome-ignore lint/a11y/useSemanticElements: Dette er en reimplementering av en liste\n role=\"option\"\n value={option.value}\n onBlur={handleBlur}\n className={`jkl-combobox__option ${\n isSelected(option) &&\n \"jkl-combobox__option--selected\"\n }`}\n data-testid=\"jkl-combobox__option\"\n data-testautoid={`jkl-combobox__option-${i}`}\n onFocus={handleFocus}\n onKeyDown={handleOptionOnKeyDown}\n onClick={(e) => {\n setActiveDescendant(\n `${listId}__${option.value}`,\n ); // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role#required_javascript_features\n e.stopPropagation();\n onItemClick(option.value);\n setSearchValue(\"\");\n }}\n onMouseOver={handleMouseOver}\n >\n {option.description ? (\n <span>\n {option.label}\n <span className=\"jkl-combobox__option-description\">\n {option.description}\n </span>\n </span>\n ) : (\n option.label\n )}\n {isSelected(option) ? (\n <span>\n <CheckIcon />{\" \"}\n </span>\n ) : null}\n </button>\n ))}\n {noResults && (\n <div className=\"jkl-combobox__no-option\">\n {noMatchingOption}\n </div>\n )}\n </div>\n <IconButton\n id={buttonId}\n onFocus={handleFocus}\n onBlur={handleBlur}\n className=\"jkl-text-input-action-button\"\n data-testid=\"jkl-combobox__button\"\n aria-label=\"Åpne meny\"\n aria-expanded={showMenu}\n aria-controls={listId}\n onClick={() => setShowMenu((previous) => !previous)}\n onMouseDown={(e) => {\n e.preventDefault();\n inputRef.current?.focus();\n }}\n >\n <ArrowVerticalAnimated pointingDown={isPointingDown} />\n </IconButton>\n </div>\n )}\n />\n );\n};\nCombobox.displayName = \"Combobox\";\n"],"names":["getComboboxValuePair","item","value","label","Combobox","props","dataSize","id","placeholder","items","onChange","onFocus","onBlur","noMatchingOption","labelProps","helpLabel","errorLabel","width","name","className","invalid","description","hasTagHover","tooltip","listId","useId","generateSuffix","labelId","buttonId","inputId","selectedValue","setSelectedValue","useState","showMenu","setShowMenu","searchValue","setSearchValue","noResults","setNoResults","marked","setMarked","searchRef","useRef","inputRef","focusInsideRef","useEffect","current","focus","prev","isSelected","option","some","removeOption","useCallback","filter","onTagRemove","e","newValue","type","target","selectedOptions","stopPropagation","length","onItemClick","find","i","onSearch","options","useMemo","filteredOptions","toLowerCase","indexOf","activeDescendant","setActiveDescendant","isPointingDown","handleEscape","key","window","addEventListener","removeEventListener","handleFocusPlacement","isOpen","handleFocus","dropdownRef","useAnimatedHeight","onFirstVisible","onTransitionEnd","useListNavigation","ref","componentRootElementRef","handleBlur","contains","relatedTarget","dispatchEvent","Event","bubbles","handleMouseOver","preventScroll","handleSearchOnKeyDown","preventDefault","listElement","querySelector","metaKey","ctrlKey","updatedSelectedValue","map","isMarked","handleOptionOnKeyDown","shiftKey","firstVisible","currentTarget","hasSelection","renderSelectedOption","jsx","Chip","tagLabel","variant","onClick","children","InputGroup","clsx","render","inputProps","jsxs","style","tabIndex","Tooltip","TooltipTrigger","TooltipContent","onKeyDown","role","autoComplete","onMouseOver","CheckIcon","IconButton","previous","onMouseDown","ArrowVerticalAnimated","pointingDown","displayName"],"mappings":"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"}

package/build/es/components/icon/Icon.d.ts CHANGED Viewed

@@ -1,22 +1,7 @@
 import { default as React } from 'react';
 import { PolymorphicPropsWithRef } from '../../utilities/polymorphism/polymorphism.js';
-import { IconVariant } from './types.js';
-type IconComponentProps<ElementType extends "span" | "div"> = PolymorphicPropsWithRef<ElementType, {
-    "data-testid"?: string;
-    /**
-     * Størrelsesvarianten til ikonet. `"small"` er 16px med 20px bounding box, og `"medium"` er 20px med 24px bounding box.
-     * `"inherit"` setter størrelsen til ikonet (ikke bounding box) lik skriftstørrelsen (1em).
-     */
-    variant?: IconVariant;
-    /**
-     * Angir om ikonet skal vises i fet versjon
-     * @default false
-     */
-    bold?: boolean;
-    filled?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-}>;
+import { IconProps } from './types.js';
+type IconComponentProps<ElementType extends "span" | "div"> = PolymorphicPropsWithRef<ElementType, IconProps>;
 export type IconComponent = (<ElementType extends "span" | "div" = "span">(props: IconComponentProps<ElementType>) => React.ReactElement | null) & {
     displayName?: string;
 };

package/build/es/components/icon/Icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Icon.js","sources":["../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport type {\n PolymorphicPropsWithRef,\n PolymorphicRef,\n} from \"../../utilities/polymorphism/polymorphism.js\";\nimport type { ~~IconVariant~~ } from \"./types.js\";\n\ntype IconComponentProps~~<\n~~ ElementType extends \"span\" \| \"div\"~~,\n~~> ~~= PolymorphicPropsWithRef<\~~n ElementType~~,\n {\n \"data-testid\"?: string;\n /*\n Størrelsesvarianten til ikonet. `\"small\"` er 16px med 20px bounding box~~, og `\"medium\"` er 20px med 24px bounding box.\n * `\"inherit\"` setter størrelsen til ikonet (ikke bounding box) lik skriftstørrelsen (1em).\n /\n variant?: IconVariant;\n /\n Angir om ikonet skal vises i fet versjon\n * @default false\n */\n bold?: boolean;\n filled?: boolean;\n className?: string;\n style?: React.CSSProperties;\n }\n>;\n\nexport type IconComponent = (~~<\n~~ ElementType extends \"span\" \| \"div\" = \"span\"~~,\n~~>(\n props: IconComponentProps<ElementType>,\n) => React.ReactElement \| null) & { displayName?: string };\n\nexport const Icon: IconComponent = React.forwardRef(function Icon<\n ElementType extends \"span\" \| \"div\" = \"span\",\n>(props: IconComponentProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n const {\n as = \"span\",\n bold,\n children,\n className,\n filled,\n variant,\n ...iconProps\n } = props;\n const iconClassName = clsx(\"jkl-icon\", className, {\n \"jkl-icon--filled\": filled,\n \"jkl-icon--bold\": bold,\n });\n\n if (as === \"div\") {\n return (\n <div\n aria-hidden\n ref={ref as PolymorphicRef<\"div\">}\n className={iconClassName}\n {...(iconProps as React.HTMLAttributes<HTMLDivElement>)}\n >\n {children}\n </div>\n );\n }\n\n return (\n <span\n aria-hidden\n ref={ref as PolymorphicRef<\"span\">}\n className={iconClassName}\n {...(iconProps as React.HTMLAttributes<HTMLSpanElement>)}\n >\n {children}\n </span>\n );\n}) as IconComponent;\n"],"names":["Icon","React","forwardRef","props","ref","as","bold","children","className","filled","variant","iconProps","iconClassName","clsx","jsx"],"mappings":"~~2GAoCO~~,MAAMA,EAAsBC,EAAMC,WAAW,SAElDC,EAAwCC,GACtC,MACIC,GAAAA,EAAK,OACLC,KAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,QAAAA,KACGC,GACHR,EACES,EAAgBC,EAAK,WAAYL,EAAW,CAC9C,mBAAoBC,EACpB,iBAAkBH,IAGtB,OAEQQ,EAFG,QAAPT,EAEK,MAYJ,OAZI,CACG,eAAW,EACXD,IAAAA,EACAI,UAAWI,KACND,EAEJJ,SAAAA,GAejB"}
1	+ {"version":3,"file":"Icon.js","sources":["../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport type {\n PolymorphicPropsWithRef,\n PolymorphicRef,\n} from \"../../utilities/polymorphism/polymorphism.js\";\nimport type { IconProps } from \"./types.js\";\n\ntype IconComponentProps<ElementType extends \"span\" \| \"div\"> =\n PolymorphicPropsWithRef<ElementType, IconProps>;\n\nexport type IconComponent = (<ElementType extends \"span\" \| \"div\" = \"span\">(\n props: IconComponentProps<ElementType>,\n) => React.ReactElement \| null) & { displayName?: string };\n\nexport const Icon: IconComponent = React.forwardRef(function Icon<\n ElementType extends \"span\" \| \"div\" = \"span\",\n>(props: IconComponentProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n const {\n as = \"span\",\n bold,\n children,\n className,\n filled,\n variant,\n ...iconProps\n } = props;\n const iconClassName = clsx(\"jkl-icon\", className, {\n \"jkl-icon--filled\": filled,\n \"jkl-icon--bold\": bold,\n });\n\n if (as === \"div\") {\n return (\n <div\n aria-hidden\n ref={ref as PolymorphicRef<\"div\">}\n className={iconClassName}\n {...(iconProps as React.HTMLAttributes<HTMLDivElement>)}\n >\n {children}\n </div>\n );\n }\n\n return (\n <span\n aria-hidden\n ref={ref as PolymorphicRef<\"span\">}\n className={iconClassName}\n {...(iconProps as React.HTMLAttributes<HTMLSpanElement>)}\n >\n {children}\n </span>\n );\n}) as IconComponent;\n"],"names":["Icon","React","forwardRef","props","ref","as","bold","children","className","filled","variant","iconProps","iconClassName","clsx","jsx"],"mappings":"2GAeO,MAAMA,EAAsBC,EAAMC,WAAW,SAElDC,EAAwCC,GACtC,MACIC,GAAAA,EAAK,OACLC,KAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,QAAAA,KACGC,GACHR,EACES,EAAgBC,EAAK,WAAYL,EAAW,CAC9C,mBAAoBC,EACpB,iBAAkBH,IAGtB,OAEQQ,EAFG,QAAPT,EAEK,MAYJ,OAZI,CACG,eAAW,EACXD,IAAAA,EACAI,UAAWI,KACND,EAEJJ,SAAAA,GAejB"}

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

@@ -1,2 +1,2 @@
-import{jsx as r}from"react/jsx-runtime";import"react";import{Icon as o}from"../Icon.js";const c=c=>r(o,{bold:!0,filled:!0,...c,children:""});c.displayName="ErrorIcon";export{c as ErrorIcon};
+import{jsx as r}from"react/jsx-runtime";import"react";import{Icon as o}from"../Icon.js";const c=c=>r(o,{...c,filled:!0,children:""});c.displayName="ErrorIcon";export{c as ErrorIcon};
 //# sourceMappingURL=ErrorIcon.js.map

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

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

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

@@ -1,2 +1,2 @@
-import{jsx as c}from"react/jsx-runtime";import{c as e}from"../../../../clsx-BeLtu-UY.js";import"react";import{Icon as r}from"../Icon.js";const s=s=>c(r,{...s,className:e("jkl-icon-green-check",s.className),children:""});s.displayName="GreenCheckIcon";export{s as GreenCheckIcon};
+import{jsx as e}from"react/jsx-runtime";import{c}from"../../../../clsx-BeLtu-UY.js";import"react";import{Icon as r}from"../Icon.js";const s=({className:s,...o})=>e(r,{...o,filled:!0,className:c("jkl-icon-green-check",s),children:""});s.displayName="GreenCheckIcon";export{s as GreenCheckIcon};
 //# sourceMappingURL=GreenCheckIcon.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"GreenCheckIcon.js","sources":["../../../../../src/components/icon/icons/GreenCheckIcon.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const GreenCheckIcon: IconComponent = (props: IconProps) => (\n <Icon {...props} className={clsx(\"jkl-icon-green-check\", ~~props.~~className)}>\n {\"\\~~ue5ca~~\"}\n </Icon>\n);\nGreenCheckIcon.displayName = \"GreenCheckIcon\";\n"],"names":["GreenCheckIcon","props","jsx","Icon","~~className~~","clsx","children","displayName"],"mappings":"~~yIAKO~~,MAAMA,~~EAAiCC~~,~~GAC1CC~~,EAACC,EAAA,IAASF,EAAOG,~~UAAWC~~,EAAK,~~uBAAwBJ~~,~~EAAMG~~,~~WAC1DE,~~SAAA,~~MAGTN~~,~~EAAeO~~,YAAc"}
1	+ {"version":3,"file":"GreenCheckIcon.js","sources":["../../../../../src/components/icon/icons/GreenCheckIcon.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const GreenCheckIcon: IconComponent = ({\n className,\n ...props\n}: IconProps) => (\n <Icon {...props} filled className={clsx(\"jkl-icon-green-check\", className)}>\n {\"\\uf0be\"}\n </Icon>\n);\nGreenCheckIcon.displayName = \"GreenCheckIcon\";\n"],"names":["GreenCheckIcon","className","props","jsx","Icon","filled","clsx","children","displayName"],"mappings":"oIAKO,MAAMA,EAAgC,EACzCC,UAAAA,KACGC,KAEHC,EAACC,EAAA,IAASF,EAAOG,QAAM,EAACJ,UAAWK,EAAK,uBAAwBL,GAC3DM,SAAA,MAGTP,EAAeQ,YAAc"}

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

@@ -1,2 +1,2 @@
-import{jsx as o}from"react/jsx-runtime";import"react";import{Icon as r}from"../Icon.js";const n=n=>o(r,{bold:!0,filled:!0,...n,children:""});n.displayName="InfoIcon";export{n as InfoIcon};
+import{jsx as o}from"react/jsx-runtime";import"react";import{Icon as r}from"../Icon.js";const n=n=>o(r,{...n,filled:!0,children:""});n.displayName="InfoIcon";export{n as InfoIcon};
 //# sourceMappingURL=InfoIcon.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InfoIcon.js","sources":["../../../../../src/components/icon/icons/InfoIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const InfoIcon: IconComponent = (props: IconProps) => (\n <Icon ~~bold filled~~ {...props}>\n {\"\\ue88e\"}\n </Icon>\n);\nInfoIcon.displayName = \"InfoIcon\";\n"],"names":["InfoIcon","props","jsx","Icon","~~bold","~~filled","children","displayName"],"mappings":"wFAIO,MAAMA,EAA2BC,GACpCC,EAACC,~~EAAA~~,~~CAAKC~~,~~MAAI,EAACC,~~QAAM,~~KAAKJ~~,~~EACjBK,~~SAAA,~~MAGTN~~,~~EAASO~~,YAAc"}
1	+ {"version":3,"file":"InfoIcon.js","sources":["../../../../../src/components/icon/icons/InfoIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const InfoIcon: IconComponent = (props: IconProps) => (\n <Icon {...props} filled>\n {\"\\ue88e\"}\n </Icon>\n);\nInfoIcon.displayName = \"InfoIcon\";\n"],"names":["InfoIcon","props","jsx","Icon","filled","children","displayName"],"mappings":"wFAIO,MAAMA,EAA2BC,GACpCC,EAACC,MAASF,EAAOG,QAAM,EAClBC,SAAA,MAGTL,EAASM,YAAc"}

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

@@ -1,2 +1,2 @@
-import{jsx as s}from"react/jsx-runtime";import{c as o}from"../../../../clsx-BeLtu-UY.js";import"react";import{Icon as r}from"../Icon.js";const c=c=>s(r,{...c,className:o("jkl-icon-red-cross",c.className),children:""});c.displayName="RedCrossIcon";export{c as RedCrossIcon};
+import{jsx as s}from"react/jsx-runtime";import{c as o}from"../../../../clsx-BeLtu-UY.js";import"react";import{Icon as r}from"../Icon.js";const c=({className:c,...e})=>s(r,{...e,filled:!0,className:o("jkl-icon-red-cross",c),children:""});c.displayName="RedCrossIcon";export{c as RedCrossIcon};
 //# sourceMappingURL=RedCrossIcon.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RedCrossIcon.js","sources":["../../../../../src/components/icon/icons/RedCrossIcon.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const RedCrossIcon: IconComponent = (props: IconProps) => (\n <Icon {...props} className={clsx(\"jkl-icon-red-cross\", ~~props.~~className)}>\n {\"\\~~ue5cd~~\"}\n </Icon>\n);\nRedCrossIcon.displayName = \"RedCrossIcon\";\n"],"names":["RedCrossIcon","props","jsx","Icon","~~className~~","clsx","children","displayName"],"mappings":"yIAKO,MAAMA,~~EAA+BC~~,~~GACxCC~~,EAACC,EAAA,IAASF,EAAOG,~~UAAWC~~,EAAK,~~qBAAsBJ~~,~~EAAMG~~,~~WACxDE,~~SAAA,~~MAGTN~~,~~EAAaO~~,YAAc"}
1	+ {"version":3,"file":"RedCrossIcon.js","sources":["../../../../../src/components/icon/icons/RedCrossIcon.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const RedCrossIcon: IconComponent = ({\n className,\n ...props\n}: IconProps) => (\n <Icon {...props} filled className={clsx(\"jkl-icon-red-cross\", className)}>\n {\"\\ue5c9\"}\n </Icon>\n);\nRedCrossIcon.displayName = \"RedCrossIcon\";\n"],"names":["RedCrossIcon","className","props","jsx","Icon","filled","clsx","children","displayName"],"mappings":"yIAKO,MAAMA,EAA8B,EACvCC,UAAAA,KACGC,KAEHC,EAACC,EAAA,IAASF,EAAOG,QAAM,EAACJ,UAAWK,EAAK,qBAAsBL,GACzDM,SAAA,MAGTP,EAAaQ,YAAc"}

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

@@ -1,2 +1,2 @@
-import{jsx as c}from"react/jsx-runtime";import"react";import{Icon as o}from"../Icon.js";const s=s=>c(o,{bold:!0,filled:!0,...s,children:""});s.displayName="SuccessIcon";export{s as SuccessIcon};
+import{jsx as c}from"react/jsx-runtime";import"react";import{Icon as s}from"../Icon.js";const o=o=>c(s,{...o,filled:!0,children:""});o.displayName="SuccessIcon";export{o as SuccessIcon};
 //# sourceMappingURL=SuccessIcon.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SuccessIcon.js","sources":["../../../../../src/components/icon/icons/SuccessIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const SuccessIcon: IconComponent = (props: IconProps) => (\n <Icon ~~bold filled~~ {...props}>\n {\"\\uf0be\"}\n </Icon>\n);\nSuccessIcon.displayName = \"SuccessIcon\";\n"],"names":["SuccessIcon","props","jsx","Icon","~~bold","~~filled","children","displayName"],"mappings":"wFAIO,MAAMA,EAA8BC,GACvCC,EAACC,~~EAAA~~,~~CAAKC~~,~~MAAI,EAACC,~~QAAM,~~KAAKJ~~,~~EACjBK,~~SAAA,~~MAGTN~~,~~EAAYO~~,YAAc"}
1	+ {"version":3,"file":"SuccessIcon.js","sources":["../../../../../src/components/icon/icons/SuccessIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const SuccessIcon: IconComponent = (props: IconProps) => (\n <Icon {...props} filled>\n {\"\\uf0be\"}\n </Icon>\n);\nSuccessIcon.displayName = \"SuccessIcon\";\n"],"names":["SuccessIcon","props","jsx","Icon","filled","children","displayName"],"mappings":"wFAIO,MAAMA,EAA8BC,GACvCC,EAACC,MAASF,EAAOG,QAAM,EAClBC,SAAA,MAGTL,EAAYM,YAAc"}

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

@@ -1,2 +1,2 @@
-import{jsx as o}from"react/jsx-runtime";import"react";import{Icon as r}from"../Icon.js";const n=n=>o(r,{bold:!0,filled:!0,...n,children:""});n.displayName="WarningIcon";export{n as WarningIcon};
+import{jsx as r}from"react/jsx-runtime";import"react";import{Icon as n}from"../Icon.js";const o=o=>r(n,{...o,filled:!0,children:""});o.displayName="WarningIcon";export{o as WarningIcon};
 //# sourceMappingURL=WarningIcon.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"WarningIcon.js","sources":["../../../../../src/components/icon/icons/WarningIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const WarningIcon: IconComponent = (props: IconProps) => (\n <Icon ~~bold filled~~ {...props}>\n {\"\\uf083\"}\n </Icon>\n);\nWarningIcon.displayName = \"WarningIcon\";\n"],"names":["WarningIcon","props","jsx","Icon","~~bold","~~filled","children","displayName"],"mappings":"wFAIO,MAAMA,EAA8BC,GACvCC,EAACC,~~EAAA~~,~~CAAKC~~,~~MAAI,EAACC,~~QAAM,~~KAAKJ~~,~~EACjBK,~~SAAA,~~MAGTN~~,~~EAAYO~~,YAAc"}
1	+ {"version":3,"file":"WarningIcon.js","sources":["../../../../../src/components/icon/icons/WarningIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const WarningIcon: IconComponent = (props: IconProps) => (\n <Icon {...props} filled>\n {\"\\uf083\"}\n </Icon>\n);\nWarningIcon.displayName = \"WarningIcon\";\n"],"names":["WarningIcon","props","jsx","Icon","filled","children","displayName"],"mappings":"wFAIO,MAAMA,EAA8BC,GACvCC,EAACC,MAASF,EAAOG,QAAM,EAClBC,SAAA,MAGTL,EAAYM,YAAc"}

package/build/es/components/icon/types.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 export type IconVariant = "inherit" | "small" | "medium";
 export interface IconProps {
-    as?: "div" | "span";
     "data-testid"?: string;
     /**
      * @deprecated Størrelsen settes nå automatisk etter fontstørrelse.
@@ -10,7 +9,7 @@ export interface IconProps {
      */
     variant?: IconVariant;
     /**
-     * Angir om ikonet skal vises i fet versjon
+     * @deprecated Fra Jøkul 5.0 har ikonene alltid samme vekt, og bold har ingen effekt
      * @default false
      */
     bold?: boolean;

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InputGroup.js","sources":["../../../../src/components/input-group/InputGroup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { Label } from \"./Label.js\";\nimport { SupportLabel } from \"./SupportLabel.js\";\nimport type { InputGroupProps, InputProps } from \"./types.js\";\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(\n (props, ref) => {\n const {\n className,\n children,\n 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 {...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 >\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 />\n </div>\n );\n },\n);\n\nInputGroup.displayName = \"InputGroup\";\n"],"names":["InputGroup","forwardRef","props","ref","className","children","errorLabel","helpLabel","inline","label","labelProps","render","supportLabelProps","description","tooltip","id","rest","uid","useId","generateSuffix","supportId","hasTooltip","supportText","supportTextType","inputProps","renderInput","input","React","Children","toArray","isValidElement","cloneElement","jsxs","clsx","jsx","Label","standAlone","htmlFor","srOnly","style","whiteSpace","Fragment","SupportLabel","labelType","displayName"],"mappings":"2RAOO,MAAMA,EAAaC,EACtB,CAACC,EAAOC,KACJ,MACIC,UAAAA,EACAC,SAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,OAAAA,EACAC,kBAAAA,EACAC,YAAAA,EACAC,QAAAA,EACAC,GAAAA,KACGC,GACHd,EAEEe,EAAMC,EAAMH,GAAM,YAAa,CAAEI,gBAAiBJ,IAClDK,EAAYF,EAAM,~~qBAElBG~~,~~IAAeP~~,~~EAEfQ~~,~~EAAchB~~,GAAcC,~~EAC5BgB~~,~~EAAkBjB~~,EAClB,QACAC,EACE,YACA,~~EAIFiB~~,EAAyB,CAC3B,~~mBAHgBF~~,~~EAAcF~~,OAAY,~~EAI1C~~,~~iBAAgBd~~,QAAoB,EACpCS,GAAIE,~~GAGFQ~~,~~EAAcd~~,EACd,IAAMA,~~EAAOa~~,GACb,KACI,~~MAAME~~,EAAQC,EAAMC,SAASC,~~QAAQ3B~~,EAAMG,UAAU,GAErD,~~GAAKsB~~,EAAMG,eAA2BJ,GAEtC,OAAOC,EAAMI,aAAyBL,EAAO,~~IACtCF~~,~~KACAE~~,~~EAAMxB~~,SAIvB,~~OACI8B~~,EAAC,MAAA,~~CACG7B~~,IAAAA,EACAC,~~UAAW6B~~,~~EAAK7B~~,EAAW,kBAAmB,CAC1C,0BAA2BI,OAE3BQ,EAEJX,SAAA,~~CAAA6B~~,EAACC,EAAA,CACGC,YAAU,EACVC,~~QAASpB~~,~~EACTqB~~,~~OAAQ9B~~,KACJE,~~EACJ6B~~,MAAO,CACHC,~~WAAYnB~~,EAAa,cAAW,~~KACjCX~~,~~GAAY6B~~,~~OAGlBlC~~,~~WACG2B~~,EAAAS,EAAA,~~CACIpC~~,SAAA,~~CAAA6B~~,EAAC,QAAKK,MAAO,CAAEC,WAAY,~~UACtBnC~~,SAAAI,IAEJ,IACAK,KAGLL,IAGPI,~~GACGqB~~,EAAC,IAAA,~~CAAE9B~~,UAAU,~~8BAA+BC~~,SAAAQ,~~IAE/CY~~,IACDS,EAACQ,EAAA,CACGJ,~~OAAQ9B~~,KACJI,EACJH,~~MAAOa~~,~~EACPqB~~,~~UAAWpB~~,~~EACXR~~,GAAIK,SAOxBpB,~~EAAW4C~~,YAAc"}
1	+ {"version":3,"file":"InputGroup.js","sources":["../../../../src/components/input-group/InputGroup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { Label } from \"./Label.js\";\nimport { SupportLabel } from \"./SupportLabel.js\";\nimport type { InputGroupProps, InputProps } from \"./types.js\";\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(\n (props, ref) => {\n const {\n className,\n children,\n 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 const descriptionId = useId(\"jkl-description\");\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 =\n [\n description ? descriptionId : undefined,\n supportText ? supportId : undefined,\n ]\n .filter(Boolean)\n .join(\" \") \|\| 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 {...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 >\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\n id={descriptionId}\n className=\"jkl-input-group-description\"\n >\n {description}\n </p>\n )}\n {renderInput()}\n <SupportLabel\n srOnly={inline}\n {...supportLabelProps}\n label={supportText}\n labelType={supportTextType}\n id={supportId}\n />\n </div>\n );\n },\n);\n\nInputGroup.displayName = \"InputGroup\";\n"],"names":["InputGroup","forwardRef","props","ref","className","children","errorLabel","helpLabel","inline","label","labelProps","render","supportLabelProps","description","tooltip","id","rest","uid","useId","generateSuffix","supportId","descriptionId","hasTooltip","supportText","supportTextType","inputProps","filter","Boolean","join","renderInput","input","React","Children","toArray","isValidElement","cloneElement","jsxs","clsx","jsx","Label","standAlone","htmlFor","srOnly","style","whiteSpace","Fragment","SupportLabel","labelType","displayName"],"mappings":"2RAOO,MAAMA,EAAaC,EACtB,CAACC,EAAOC,KACJ,MACIC,UAAAA,EACAC,SAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,OAAAA,EACAC,kBAAAA,EACAC,YAAAA,EACAC,QAAAA,EACAC,GAAAA,KACGC,GACHd,EAEEe,EAAMC,EAAMH,GAAM,YAAa,CAAEI,gBAAiBJ,IAClDK,EAAYF,EAAM,qBAClBG,EAAgBH,EAAM,mBAEtBI,IAAeR,EAEfS,EAAcjB,GAAcC,EAC5BiB,EAAkBlB,EAClB,QACAC,EACE,YACA,EAUFkB,EAAyB,CAC3B,mBARA,CACIZ,EAAcQ,OAAgB,EAC9BE,EAAcH,OAAY,GAEzBM,OAAOC,SACPC,KAAK,WAAQ,EAIlB,iBAAgBtB,QAAoB,EACpCS,GAAIE,GAGFY,EAAclB,EACd,IAAMA,EAAOc,GACb,KACI,MAAMK,EAAQC,EAAMC,SAASC,QAAQ/B,EAAMG,UAAU,GAErD,GAAK0B,EAAMG,eAA2BJ,GAEtC,OAAOC,EAAMI,aAAyBL,EAAO,IACtCL,KACAK,EAAM5B,SAIvB,OACIkC,EAAC,MAAA,CACGjC,IAAAA,EACAC,UAAWiC,EAAKjC,EAAW,kBAAmB,CAC1C,0BAA2BI,OAE3BQ,EAEJX,SAAA,CAAAiC,EAACC,EAAA,CACGC,YAAU,EACVC,QAASxB,EACTyB,OAAQlC,KACJE,EACJiC,MAAO,CACHC,WAAYtB,EAAa,cAAW,KACjCZ,GAAYiC,OAGlBtC,WACG+B,EAAAS,EAAA,CACIxC,SAAA,CAAAiC,EAAC,QAAKK,MAAO,CAAEC,WAAY,UACtBvC,SAAAI,IAEJ,IACAK,KAGLL,IAGPI,GACGyB,EAAC,IAAA,CACGvB,GAAIM,EACJjB,UAAU,8BAETC,SAAAQ,IAGRgB,IACDS,EAACQ,EAAA,CACGJ,OAAQlC,KACJI,EACJH,MAAOc,EACPwB,UAAWvB,EACXT,GAAIK,SAOxBpB,EAAWgD,YAAc"}

package/build/es/utilities/formatters/util/registerWithMask.d.ts CHANGED Viewed

@@ -35,8 +35,6 @@ export declare const registerWithMasks: <T extends FieldValues>(form: UseFormRet
     registerWithTelefonnummerMask: (name: Path<T>, options?: RegisterWithMaskOptions<T>) => UseFormRegisterReturn;
     registerWithOrganisasjonsnummerMask: (name: Path<T>, options?: RegisterWithMaskOptions<T>) => UseFormRegisterReturn;
     registerWithDateMask: (name: Path<T>, options?: RegisterWithMaskOptions<T>) => UseFormRegisterReturn;
-    registerWithNumber: (name: Path<T>, options?: RegisterWithMaskOptions<T>) => UseFormRegisterReturn & {
-        align: "right";
-    };
+    registerWithNumber: (name: Path<T>, options?: RegisterWithMaskOptions<T>) => UseFormRegisterReturn;
 };
 export {};

package/build/es/utilities/formatters/util/registerWithMask.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{formatDateString as e}from"../date/formatDate.js";import{formatFodselsnummer as r}from"../fodselsnummer/formatFodselsnummer.js";import{formatKontonummer as t}from"../kontonummer/formatKontonummer.js";import{formatKortnummer as m}from"../kortnummer/formatKortnummer.js";import{formatOrganisasjonsnummer as n}from"../organisasjonsnummer/formatOrganisasjonsnummer.js";import{formatTelefonnummer as s}from"../telefonnummer/formatTelefonnummer.js";import{formatNumber as o}from"./formatNumber.js";const a={date:e,fodselsnummer:r,kortnummer:m,kontonummer:t,telefonnummer:s,number:o,organisasjonsnummer:n},i=e=>(r,t,m)=>{let n=0,s="",o="";const i={setValueAs:e=>e.replace(/\s/g,""),onChange:i=>{m?.onChange?.(i);let u=0;const l=i.target.value.length;null!==i.target.selectionStart&&(u=i.target.selectionStart);const g=a[e](i.target.value,{partial:!0}),f=g.toString().length;r.setValue(t,g);let k=null;if(["Delete","Backspace"].includes(s)){const e=n-u,r=""===o.trim()?0:f-l;k=n-e+r}else if(u<i.target.value.length||l!==f){k=u+(f-l)}if(null!==k){const e=((e,r,t)=>Math.min(Math.max(e,r),t))(k,0,f);i.target.setSelectionRange(e,e,void 0)}}};m&&Object.assign(i,m);const u=r.register(t,i),l={onKeyDown:e=>{o="";const r=e.target,{selectionStart:t,selectionEnd:m,value:a}=r;null!==t&&(n=t,null!==m&&m>t?o=a.slice(t,m):"Backspace"===e.key?o=a[n-1]??"":"Delete"===e.key&&(o=a[n]??"")),s=e.key}};return"number"===e&&(l.align="right"),Object.assign(u,l)},u=i("fodselsnummer"),l=i("kortnummer"),g=i("kontonummer"),f=i("telefonnummer"),k=e=>({registerWithFodselsnummerMask:(r,t)=>i("fodselsnummer")(e,r,t),registerWithKortnummerMask:(r,t)=>i("kortnummer")(e,r,t),registerWithKontonummerMask:(r,t)=>i("kontonummer")(e,r,t),registerWithTelefonnummerMask:(r,t)=>i("telefonnummer")(e,r,t),registerWithOrganisasjonsnummerMask:(r,t)=>i("organisasjonsnummer")(e,r,t),registerWithDateMask:(r,t)=>i("date")(e,r,t),registerWithNumber:(r,t)=>i("number")(e,r,t)});export{u as registerWithFodselsnummerMask,g as registerWithKontonummerMask,l as registerWithKortnummerMask,k as registerWithMasks,f as registerWithTelefonnummerMask};
+import{formatDateString as e}from"../date/formatDate.js";import{formatFodselsnummer as r}from"../fodselsnummer/formatFodselsnummer.js";import{formatKontonummer as t}from"../kontonummer/formatKontonummer.js";import{formatKortnummer as m}from"../kortnummer/formatKortnummer.js";import{formatOrganisasjonsnummer as n}from"../organisasjonsnummer/formatOrganisasjonsnummer.js";import{formatTelefonnummer as s}from"../telefonnummer/formatTelefonnummer.js";import{formatNumber as o}from"./formatNumber.js";const a={date:e,fodselsnummer:r,kortnummer:m,kontonummer:t,telefonnummer:s,number:o,organisasjonsnummer:n},i=e=>(r,t,m)=>{let n=0,s="",o="";const i={setValueAs:e=>e.replace(/\s/g,""),onChange:i=>{m?.onChange?.(i);let u=0;const l=i.target.value.length;null!==i.target.selectionStart&&(u=i.target.selectionStart);const g=a[e](i.target.value,{partial:!0}),f=g.toString().length;r.setValue(t,g);let k=null;if(["Delete","Backspace"].includes(s)){const e=n-u,r=""===o.trim()?0:f-l;k=n-e+r}else if(u<i.target.value.length||l!==f){k=u+(f-l)}if(null!==k){const e=((e,r,t)=>Math.min(Math.max(e,r),t))(k,0,f);i.target.setSelectionRange(e,e,void 0)}}};m&&Object.assign(i,m);const u=r.register(t,i);return Object.assign(u,{onKeyDown:e=>{o="";const r=e.target,{selectionStart:t,selectionEnd:m,value:a}=r;null!==t&&(n=t,null!==m&&m>t?o=a.slice(t,m):"Backspace"===e.key?o=a[n-1]??"":"Delete"===e.key&&(o=a[n]??"")),s=e.key}})},u=i("fodselsnummer"),l=i("kortnummer"),g=i("kontonummer"),f=i("telefonnummer"),k=e=>({registerWithFodselsnummerMask:(r,t)=>i("fodselsnummer")(e,r,t),registerWithKortnummerMask:(r,t)=>i("kortnummer")(e,r,t),registerWithKontonummerMask:(r,t)=>i("kontonummer")(e,r,t),registerWithTelefonnummerMask:(r,t)=>i("telefonnummer")(e,r,t),registerWithOrganisasjonsnummerMask:(r,t)=>i("organisasjonsnummer")(e,r,t),registerWithDateMask:(r,t)=>i("date")(e,r,t),registerWithNumber:(r,t)=>i("number")(e,r,t)});export{u as registerWithFodselsnummerMask,g as registerWithKontonummerMask,l as registerWithKortnummerMask,k as registerWithMasks,f as registerWithTelefonnummerMask};
 //# sourceMappingURL=registerWithMask.js.map

package/build/es/utilities/formatters/util/registerWithMask.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"registerWithMask.js","sources":["../../../../../src/utilities/formatters/util/registerWithMask.ts"],"sourcesContent":["import type { ChangeEvent, KeyboardEventHandler } from \"react\";\nimport type {\n FieldValues,\n Path,\n PathValue,\n RegisterOptions,\n UseFormRegisterReturn,\n UseFormReturn,\n} from \"react-hook-form\";\nimport { formatDateString } from \"../date/formatDate.js\";\nimport { formatFodselsnummer } from \"../fodselsnummer/formatFodselsnummer.js\";\nimport { formatKontonummer } from \"../kontonummer/formatKontonummer.js\";\nimport { formatKortnummer } from \"../kortnummer/formatKortnummer.js\";\nimport { formatOrganisasjonsnummer } from \"../organisasjonsnummer/formatOrganisasjonsnummer.js\";\nimport { formatTelefonnummer } from \"../telefonnummer/formatTelefonnummer.js\";\nimport { formatNumber } from \"./formatNumber.js\";\n\nconst formatters = {\n date: formatDateString,\n fodselsnummer: formatFodselsnummer,\n kortnummer: formatKortnummer,\n kontonummer: formatKontonummer,\n telefonnummer: formatTelefonnummer,\n number: formatNumber,\n organisasjonsnummer: formatOrganisasjonsnummer,\n};\nexport type Formatter = keyof typeof formatters;\n\nconst clamp = (value: number, min: number, max: number) =>\n Math.min(Math.max(value, min), max);\n\nexport type RegisterWithMaskOptions<T extends FieldValues> = Omit<\n RegisterOptions<T>,\n \"setValueAs\"\n>;\n\nconst registerWithMask =\n (formatter: Formatter) =>\n <T extends FieldValues>(\n form: UseFormReturn<T>,\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ) => {\n let onKeyDownCaretPosition = 0;\n let onKeyDownKeyPressed = \"\";\n let deletedCharactersOnKeyDown = \"\";\n\n const setValueAs = (value: string) => value.replace(/\\s/g, \"\");\n const onChange = (event: ChangeEvent<HTMLInputElement>) => {\n options?.onChange?.(event);\n\n // save some values before event.target.value change\n let onChangeCaretPosition = 0;\n const inputLength = event.target.value.length;\n\n // type checking formalities\n if (event.target.selectionStart !== null) {\n onChangeCaretPosition = event.target.selectionStart;\n }\n\n const formattedValue = formatters[formatter](event.target.value, {\n partial: true,\n });\n const formattedLength = formattedValue.toString().length;\n\n form.setValue(name, formattedValue as PathValue<T, Path<T>>);\n\n let newPosition: number \| null = null;\n\n if ([\"Delete\", \"Backspace\"].includes(onKeyDownKeyPressed)) {\n // handle removing content\n // calculate how much to move the caret, this also accounts for removing sections of text\n const delta = onKeyDownCaretPosition - onChangeCaretPosition;\n const formattedLengthChange =\n deletedCharactersOnKeyDown.trim() === \"\"\n ? 0\n : formattedLength - inputLength;\n\n // calculate new caret position (- because we move backwards)\n newPosition =\n onKeyDownCaretPosition - delta + formattedLengthChange;\n } else if (\n onChangeCaretPosition < event.target.value.length \|\|\n inputLength !== formattedLength\n ) {\n // handle adding content from inside the string\n // calculate how much to move the caret forwards\n const delta = formattedLength - inputLength;\n\n // calculate new caret position (+ because we move forwards)\n newPosition = onChangeCaretPosition + delta;\n }\n\n if (newPosition !== null) {\n const clampedPosition = clamp(newPosition, 0, formattedLength);\n\n event.target.setSelectionRange(\n clampedPosition,\n clampedPosition,\n undefined,\n );\n }\n };\n\n const registerOptions: RegisterOptions<T, Path<T>> = {\n setValueAs,\n onChange,\n };\n if (options) {\n Object.assign(registerOptions, options);\n }\n const register = form.register(name, registerOptions);\n\n // save the caret position before the change occured\n const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n deletedCharactersOnKeyDown = \"\";\n\n const input = event.target as HTMLInputElement;\n const { selectionStart, selectionEnd, value } = input;\n\n if (selectionStart !== null) {\n onKeyDownCaretPosition = selectionStart;\n\n if (selectionEnd !== null && selectionEnd > selectionStart) {\n deletedCharactersOnKeyDown = value.slice(\n selectionStart,\n selectionEnd,\n );\n } else if (event.key === \"Backspace\") {\n deletedCharactersOnKeyDown =\n value[onKeyDownCaretPosition - 1] ?? \"\";\n } else if (event.key === \"Delete\") {\n deletedCharactersOnKeyDown =\n value[onKeyDownCaretPosition] ?? \"\";\n }\n }\n onKeyDownKeyPressed = event.key;\n };\n\n // add onKeyDown event handler to the registered input\n const extra: Record<string, unknown> = {\n onKeyDown,\n };\n\n if (formatter === \"number\") {\n extra.align = \"right\"; // Se https://github.com/fremtind/jokul/pull/2898\n }\n\n return Object.assign(register, extra);\n };\n\n/** @deprecated Bruk `registerWithMasks` i stedet /\nexport const registerWithFodselsnummerMask = registerWithMask(\"fodselsnummer\");\n/* @deprecated Bruk `registerWithMasks` i stedet /\nexport const registerWithKortnummerMask = registerWithMask(\"kortnummer\");\n/* @deprecated Bruk `registerWithMasks` i stedet /\nexport const registerWithKontonummerMask = registerWithMask(\"kontonummer\");\n/* @deprecated Bruk `registerWithMasks` i stedet /\nexport const registerWithTelefonnummerMask = registerWithMask(\"telefonnummer\");\n\n/\n Hjelpefunksjon for React Hook Form som lar deg bruke formateringsfunksjonene i denne pakken som inputmasker.\n */\nexport const registerWithMasks = <T extends FieldValues>(\n form: UseFormReturn<T>,\n) => ({\n registerWithFodselsnummerMask: (\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ): UseFormRegisterReturn =>\n registerWithMask(\"fodselsnummer\")<T>(form, name, options),\n registerWithKortnummerMask: (\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ): UseFormRegisterReturn =>\n registerWithMask(\"kortnummer\")<T>(form, name, options),\n registerWithKontonummerMask: (\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ): UseFormRegisterReturn =>\n registerWithMask(\"kontonummer\")<T>(form, name, options),\n registerWithTelefonnummerMask: (\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ): UseFormRegisterReturn =>\n registerWithMask(\"telefonnummer\")<T>(form, name, options),\n registerWithOrganisasjonsnummerMask: (\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ): UseFormRegisterReturn =>\n registerWithMask(\"organisasjonsnummer\")<T>(form, name, options),\n registerWithDateMask: (\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ): UseFormRegisterReturn =>\n registerWithMask(\"date\")<T>(form, name, options),\n registerWithNumber: (\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ): UseFormRegisterReturn & { align: \"right\" } =>\n registerWithMask(\"number\")<T>(\n form,\n name,\n options,\n ) as unknown as UseFormRegisterReturn & {\n align: \"right\";\n },\n});\n"],"names":["formatters","date","formatDateString","fodselsnummer","formatFodselsnummer","kortnummer","formatKortnummer","kontonummer","formatKontonummer","telefonnummer","formatTelefonnummer","number","formatNumber","organisasjonsnummer","formatOrganisasjonsnummer","registerWithMask","formatter","form","name","options","onKeyDownCaretPosition","onKeyDownKeyPressed","deletedCharactersOnKeyDown","registerOptions","setValueAs","value","replace","onChange","event","onChangeCaretPosition","inputLength","target","length","selectionStart","formattedValue","partial","formattedLength","toString","setValue","newPosition","includes","delta","formattedLengthChange","trim","clampedPosition","min","max","Math","clamp","setSelectionRange","Object","assign","register","extra","onKeyDown","input","selectionEnd","slice","key","align","registerWithFodselsnummerMask","registerWithKortnummerMask","registerWithKontonummerMask","registerWithTelefonnummerMask","registerWithMasks","registerWithOrganisasjonsnummerMask","registerWithDateMask","registerWithNumber"],"mappings":"mfAiBA,MAAMA,EAAa,CACfC,KAAMC,EACNC,cAAeC,EACfC,WAAYC,EACZC,YAAaC,EACbC,cAAeC,EACfC,OAAQC,EACRC,oBAAqBC,GAYnBC,EACDC,GACD,CACIC,EACAC,EACAC,KAEA,IAAIC,EAAyB,EACzBC,EAAsB,GACtBC,EAA6B,GA2DjC,MAAMC,EAA+C,CACjDC,WA1DgBC,GAAkBA,EAAMC,QAAQ,MAAO,IA2DvDC,SA1DcC,IACdT,GAASQ,WAAWC,GAGpB,IAAIC,EAAwB,EAC5B,MAAMC,EAAcF,EAAMG,OAAON,MAAMO,OAGH,OAAhCJ,EAAMG,OAAOE,iBACbJ,EAAwBD,EAAMG,OAAOE,gBAGzC,MAAMC,EAAiBlC,EAAWgB,GAAWY,EAAMG,OAAON,MAAO,CAC7DU,SAAS,IAEPC,EAAkBF,EAAeG,WAAWL,OAElDf,EAAKqB,SAASpB,EAAMgB,GAEpB,IAAIK,EAA6B,KAEjC,GAAI,CAAC,SAAU,aAAaC,SAASnB,GAAsB,CAGvD,MAAMoB,EAAQrB,EAAyBS,EACjCa,EACoC,KAAtCpB,EAA2BqB,OACrB,EACAP,EAAkBN,EAG5BS,EACInB,EAAyBqB,EAAQC,CACzC,SACIb,EAAwBD,EAAMG,OAAON,MAAMO,QAC3CF,IAAgBM,EAClB,CAMEG,EAAcV,GAHAO,EAAkBN,EAIpC,CAEA,GAAoB,OAAhBS,EAAsB,CACtB,MAAMK,EAlER,EAACnB,EAAeoB,EAAaC,IACvCC,KAAKF,IAAIE,KAAKD,IAAIrB,EAAOoB,GAAMC,GAiEKE,CAAMT,EAAa,EAAGH,GAE9CR,EAAMG,OAAOkB,kBACTL,EACAA,OACA,EAER,IAOAzB,GACA+B,OAAOC,OAAO5B,EAAiBJ,GAEnC,MAAMiC,EAAWnC,EAAKmC,SAASlC,EAAMK,GA6B/B8B,EAAiC,CACnCC,UA3BuD1B,IACvDN,EAA6B,GAE7B,MAAMiC,EAAQ3B,EAAMG,QACZE,eAAAA,EAAgBuB,aAAAA,EAAc/B,MAAAA,GAAU8B,EAEzB,OAAnBtB,IACAb,EAAyBa,EAEJ,OAAjBuB,GAAyBA,EAAevB,EACxCX,EAA6BG,EAAMgC,MAC/BxB,EACAuB,GAEiB,cAAd5B,EAAM8B,IACbpC,EACIG,EAAML,EAAyB,IAAM,GACpB,WAAdQ,EAAM8B,MACbpC,EACIG,EAAML,IAA2B,KAG7CC,EAAsBO,EAAM8B,MAQhC,MAAkB,WAAd1C,IACAqC,EAAMM,MAAQ,SAGXT,OAAOC,OAAOC,EAAUC,IAI1BO,EAAgC7C,EAAiB,iBAEjD8C,EAA6B9C,EAAiB,cAE9C+C,EAA8B/C,EAAiB,eAE/CgD,EAAgChD,EAAiB,iBAKjDiD,EACT/C,IAAAA,CAEA2C,8BAA+B,CAC3B1C,EACAC,IAEAJ,EAAiB,gBAAjBA,CAAqCE,EAAMC,EAAMC,GACrD0C,2BAA4B,CACxB3C,EACAC,IAEAJ,EAAiB,aAAjBA,CAAkCE,EAAMC,EAAMC,GAClD2C,4BAA6B,CACzB5C,EACAC,IAEAJ,EAAiB,cAAjBA,CAAmCE,EAAMC,EAAMC,GACnD4C,8BAA+B,CAC3B7C,EACAC,IAEAJ,EAAiB,gBAAjBA,CAAqCE,EAAMC,EAAMC,GACrD8C,oCAAqC,CACjC/C,EACAC,IAEAJ,EAAiB,sBAAjBA,CAA2CE,EAAMC,EAAMC,GAC3D+C,qBAAsB,CAClBhD,EACAC,IAEAJ,EAAiB,OAAjBA,CAA4BE,EAAMC,EAAMC,GAC5CgD,mBAAoB,CAChBjD,EACAC,IAEAJ,EAAiB,SAAjBA,CACIE,EACAC,EACAC"}
1	+ {"version":3,"file":"registerWithMask.js","sources":["../../../../../src/utilities/formatters/util/registerWithMask.ts"],"sourcesContent":["import type { ChangeEvent, KeyboardEventHandler } from \"react\";\nimport type {\n FieldValues,\n Path,\n PathValue,\n RegisterOptions,\n UseFormRegisterReturn,\n UseFormReturn,\n} from \"react-hook-form\";\nimport { formatDateString } from \"../date/formatDate.js\";\nimport { formatFodselsnummer } from \"../fodselsnummer/formatFodselsnummer.js\";\nimport { formatKontonummer } from \"../kontonummer/formatKontonummer.js\";\nimport { formatKortnummer } from \"../kortnummer/formatKortnummer.js\";\nimport { formatOrganisasjonsnummer } from \"../organisasjonsnummer/formatOrganisasjonsnummer.js\";\nimport { formatTelefonnummer } from \"../telefonnummer/formatTelefonnummer.js\";\nimport { formatNumber } from \"./formatNumber.js\";\n\nconst formatters = {\n date: formatDateString,\n fodselsnummer: formatFodselsnummer,\n kortnummer: formatKortnummer,\n kontonummer: formatKontonummer,\n telefonnummer: formatTelefonnummer,\n number: formatNumber,\n organisasjonsnummer: formatOrganisasjonsnummer,\n};\nexport type Formatter = keyof typeof formatters;\n\nconst clamp = (value: number, min: number, max: number) =>\n Math.min(Math.max(value, min), max);\n\nexport type RegisterWithMaskOptions<T extends FieldValues> = Omit<\n RegisterOptions<T>,\n \"setValueAs\"\n>;\n\nconst registerWithMask =\n (formatter: Formatter) =>\n <T extends FieldValues>(\n form: UseFormReturn<T>,\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ) => {\n let onKeyDownCaretPosition = 0;\n let onKeyDownKeyPressed = \"\";\n let deletedCharactersOnKeyDown = \"\";\n\n const setValueAs = (value: string) => value.replace(/\\s/g, \"\");\n const onChange = (event: ChangeEvent<HTMLInputElement>) => {\n options?.onChange?.(event);\n\n // save some values before event.target.value change\n let onChangeCaretPosition = 0;\n const inputLength = event.target.value.length;\n\n // type checking formalities\n if (event.target.selectionStart !== null) {\n onChangeCaretPosition = event.target.selectionStart;\n }\n\n const formattedValue = formatters[formatter](event.target.value, {\n partial: true,\n });\n const formattedLength = formattedValue.toString().length;\n\n form.setValue(name, formattedValue as PathValue<T, Path<T>>);\n\n let newPosition: number \| null = null;\n\n if ([\"Delete\", \"Backspace\"].includes(onKeyDownKeyPressed)) {\n // handle removing content\n // calculate how much to move the caret, this also accounts for removing sections of text\n const delta = onKeyDownCaretPosition - onChangeCaretPosition;\n const formattedLengthChange =\n deletedCharactersOnKeyDown.trim() === \"\"\n ? 0\n : formattedLength - inputLength;\n\n // calculate new caret position (- because we move backwards)\n newPosition =\n onKeyDownCaretPosition - delta + formattedLengthChange;\n } else if (\n onChangeCaretPosition < event.target.value.length \|\|\n inputLength !== formattedLength\n ) {\n // handle adding content from inside the string\n // calculate how much to move the caret forwards\n const delta = formattedLength - inputLength;\n\n // calculate new caret position (+ because we move forwards)\n newPosition = onChangeCaretPosition + delta;\n }\n\n if (newPosition !== null) {\n const clampedPosition = clamp(newPosition, 0, formattedLength);\n\n event.target.setSelectionRange(\n clampedPosition,\n clampedPosition,\n undefined,\n );\n }\n };\n\n const registerOptions: RegisterOptions<T, Path<T>> = {\n setValueAs,\n onChange,\n };\n if (options) {\n Object.assign(registerOptions, options);\n }\n const register = form.register(name, registerOptions);\n\n // save the caret position before the change occured\n const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n deletedCharactersOnKeyDown = \"\";\n\n const input = event.target as HTMLInputElement;\n const { selectionStart, selectionEnd, value } = input;\n\n if (selectionStart !== null) {\n onKeyDownCaretPosition = selectionStart;\n\n if (selectionEnd !== null && selectionEnd > selectionStart) {\n deletedCharactersOnKeyDown = value.slice(\n selectionStart,\n selectionEnd,\n );\n } else if (event.key === \"Backspace\") {\n deletedCharactersOnKeyDown =\n value[onKeyDownCaretPosition - 1] ?? \"\";\n } else if (event.key === \"Delete\") {\n deletedCharactersOnKeyDown =\n value[onKeyDownCaretPosition] ?? \"\";\n }\n }\n onKeyDownKeyPressed = event.key;\n };\n\n // add onKeyDown event handler to the registered input\n const extra: Record<string, unknown> = {\n onKeyDown,\n };\n\n return Object.assign(register, extra);\n };\n\n/** @deprecated Bruk `registerWithMasks` i stedet /\nexport const registerWithFodselsnummerMask = registerWithMask(\"fodselsnummer\");\n/* @deprecated Bruk `registerWithMasks` i stedet /\nexport const registerWithKortnummerMask = registerWithMask(\"kortnummer\");\n/* @deprecated Bruk `registerWithMasks` i stedet /\nexport const registerWithKontonummerMask = registerWithMask(\"kontonummer\");\n/* @deprecated Bruk `registerWithMasks` i stedet /\nexport const registerWithTelefonnummerMask = registerWithMask(\"telefonnummer\");\n\n/\n Hjelpefunksjon for React Hook Form som lar deg bruke formateringsfunksjonene i denne pakken som inputmasker.\n */\nexport const registerWithMasks = <T extends FieldValues>(\n form: UseFormReturn<T>,\n) => ({\n registerWithFodselsnummerMask: (\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ): UseFormRegisterReturn =>\n registerWithMask(\"fodselsnummer\")<T>(form, name, options),\n registerWithKortnummerMask: (\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ): UseFormRegisterReturn =>\n registerWithMask(\"kortnummer\")<T>(form, name, options),\n registerWithKontonummerMask: (\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ): UseFormRegisterReturn =>\n registerWithMask(\"kontonummer\")<T>(form, name, options),\n registerWithTelefonnummerMask: (\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ): UseFormRegisterReturn =>\n registerWithMask(\"telefonnummer\")<T>(form, name, options),\n registerWithOrganisasjonsnummerMask: (\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ): UseFormRegisterReturn =>\n registerWithMask(\"organisasjonsnummer\")<T>(form, name, options),\n registerWithDateMask: (\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ): UseFormRegisterReturn =>\n registerWithMask(\"date\")<T>(form, name, options),\n registerWithNumber: (\n name: Path<T>,\n options?: RegisterWithMaskOptions<T>,\n ): UseFormRegisterReturn =>\n registerWithMask(\"number\")<T>(form, name, options),\n});\n"],"names":["formatters","date","formatDateString","fodselsnummer","formatFodselsnummer","kortnummer","formatKortnummer","kontonummer","formatKontonummer","telefonnummer","formatTelefonnummer","number","formatNumber","organisasjonsnummer","formatOrganisasjonsnummer","registerWithMask","formatter","form","name","options","onKeyDownCaretPosition","onKeyDownKeyPressed","deletedCharactersOnKeyDown","registerOptions","setValueAs","value","replace","onChange","event","onChangeCaretPosition","inputLength","target","length","selectionStart","formattedValue","partial","formattedLength","toString","setValue","newPosition","includes","delta","formattedLengthChange","trim","clampedPosition","min","max","Math","clamp","setSelectionRange","Object","assign","register","onKeyDown","input","selectionEnd","slice","key","registerWithFodselsnummerMask","registerWithKortnummerMask","registerWithKontonummerMask","registerWithTelefonnummerMask","registerWithMasks","registerWithOrganisasjonsnummerMask","registerWithDateMask","registerWithNumber"],"mappings":"mfAiBA,MAAMA,EAAa,CACfC,KAAMC,EACNC,cAAeC,EACfC,WAAYC,EACZC,YAAaC,EACbC,cAAeC,EACfC,OAAQC,EACRC,oBAAqBC,GAYnBC,EACDC,GACD,CACIC,EACAC,EACAC,KAEA,IAAIC,EAAyB,EACzBC,EAAsB,GACtBC,EAA6B,GA2DjC,MAAMC,EAA+C,CACjDC,WA1DgBC,GAAkBA,EAAMC,QAAQ,MAAO,IA2DvDC,SA1DcC,IACdT,GAASQ,WAAWC,GAGpB,IAAIC,EAAwB,EAC5B,MAAMC,EAAcF,EAAMG,OAAON,MAAMO,OAGH,OAAhCJ,EAAMG,OAAOE,iBACbJ,EAAwBD,EAAMG,OAAOE,gBAGzC,MAAMC,EAAiBlC,EAAWgB,GAAWY,EAAMG,OAAON,MAAO,CAC7DU,SAAS,IAEPC,EAAkBF,EAAeG,WAAWL,OAElDf,EAAKqB,SAASpB,EAAMgB,GAEpB,IAAIK,EAA6B,KAEjC,GAAI,CAAC,SAAU,aAAaC,SAASnB,GAAsB,CAGvD,MAAMoB,EAAQrB,EAAyBS,EACjCa,EACoC,KAAtCpB,EAA2BqB,OACrB,EACAP,EAAkBN,EAG5BS,EACInB,EAAyBqB,EAAQC,CACzC,SACIb,EAAwBD,EAAMG,OAAON,MAAMO,QAC3CF,IAAgBM,EAClB,CAMEG,EAAcV,GAHAO,EAAkBN,EAIpC,CAEA,GAAoB,OAAhBS,EAAsB,CACtB,MAAMK,EAlER,EAACnB,EAAeoB,EAAaC,IACvCC,KAAKF,IAAIE,KAAKD,IAAIrB,EAAOoB,GAAMC,GAiEKE,CAAMT,EAAa,EAAGH,GAE9CR,EAAMG,OAAOkB,kBACTL,EACAA,OACA,EAER,IAOAzB,GACA+B,OAAOC,OAAO5B,EAAiBJ,GAEnC,MAAMiC,EAAWnC,EAAKmC,SAASlC,EAAMK,GAiCrC,OAAO2B,OAAOC,OAAOC,EAJkB,CACnCC,UA3BuDzB,IACvDN,EAA6B,GAE7B,MAAMgC,EAAQ1B,EAAMG,QACZE,eAAAA,EAAgBsB,aAAAA,EAAc9B,MAAAA,GAAU6B,EAEzB,OAAnBrB,IACAb,EAAyBa,EAEJ,OAAjBsB,GAAyBA,EAAetB,EACxCX,EAA6BG,EAAM+B,MAC/BvB,EACAsB,GAEiB,cAAd3B,EAAM6B,IACbnC,EACIG,EAAML,EAAyB,IAAM,GACpB,WAAdQ,EAAM6B,MACbnC,EACIG,EAAML,IAA2B,KAG7CC,EAAsBO,EAAM6B,QAY3BC,EAAgC3C,EAAiB,iBAEjD4C,EAA6B5C,EAAiB,cAE9C6C,EAA8B7C,EAAiB,eAE/C8C,EAAgC9C,EAAiB,iBAKjD+C,EACT7C,IAAAA,CAEAyC,8BAA+B,CAC3BxC,EACAC,IAEAJ,EAAiB,gBAAjBA,CAAqCE,EAAMC,EAAMC,GACrDwC,2BAA4B,CACxBzC,EACAC,IAEAJ,EAAiB,aAAjBA,CAAkCE,EAAMC,EAAMC,GAClDyC,4BAA6B,CACzB1C,EACAC,IAEAJ,EAAiB,cAAjBA,CAAmCE,EAAMC,EAAMC,GACnD0C,8BAA+B,CAC3B3C,EACAC,IAEAJ,EAAiB,gBAAjBA,CAAqCE,EAAMC,EAAMC,GACrD4C,oCAAqC,CACjC7C,EACAC,IAEAJ,EAAiB,sBAAjBA,CAA2CE,EAAMC,EAAMC,GAC3D6C,qBAAsB,CAClB9C,EACAC,IAEAJ,EAAiB,OAAjBA,CAA4BE,EAAMC,EAAMC,GAC5C8C,mBAAoB,CAChB/C,EACAC,IAEAJ,EAAiB,SAAjBA,CAA8BE,EAAMC,EAAMC"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fremtind/jokul",
-  "version": "5.1.0",
+  "version": "5.2.1",
   "type": "module",
   "engines": {
     "node": "^20.19.0 || >=22.12.0"

package/styles/base.css CHANGED Viewed

@@ -682,6 +682,7 @@
     background-color: var(--jkl-background-color);
     color: var(--jkl-color);
     font-family: var(--jkl-font-family-regular);
+    font-weight: var(--jkl-font-weight-normal);
   }
   .jkl strong {
     font-weight: var(--jkl-font-weight-bold);
@@ -702,9 +703,13 @@
 @layer jokul.global {
   [popover] {
     opacity: 0;
-    transition: opacity, overlay allow-discrete, display allow-discrete;
-    transition-timing-function: var(--jkl-motion-easing-standard);
-    transition-duration: var(--jkl-motion-timing-productive);
+  }
+  @supports (overlay: auto) {
+    [popover] {
+      transition: opacity, overlay allow-discrete, display allow-discrete;
+      transition-timing-function: var(--jkl-motion-easing-standard);
+      transition-duration: var(--jkl-motion-timing-productive);
+    }
   }
   [popover]:popover-open {
     opacity: 1;
@@ -714,6 +719,13 @@
       opacity: 0;
     }
   }
+  @supports not (overlay: auto) {
+    [popover]:popover-open {
+      transition: opacity;
+      transition-timing-function: var(--jkl-motion-easing-standard);
+      transition-duration: var(--jkl-motion-timing-productive);
+    }
+  }
 }
 @layer jokul.utility {
   .jkl-body {