npm - @fremtind/jokul - Versions diffs - 6.0.0-next.3 → 6.0.0-next.5 - Mend

@fremtind/jokul 6.0.0-next.3 → 6.0.0-next.5

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.js","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {\n type CSSProperties,\n type ComponentPropsWithoutRef,\n type KeyboardEvent,\n type FocusEvent,\n forwardRef,\n useId,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useListNavigation } from \"../../hooks/index.js\";\nimport { mergeRefs } from \"../../utilities/mergeRefs.js\";\nimport { type ValuePair, getValuePair } from \"../../utilities/valuePair.js\";\nimport { Button } from \"../button/Button.js\";\nimport { Flex } from \"../flex/Flex.js\";\nimport { ArrowDownIcon, CloseIcon } from \"../icon/index.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport type { InputGroupProps } from \"../input-group/types.js\";\nimport { Search } from \"../search/Search.js\";\nimport { Text } from \"../typography/Text.js\";\nimport { Title } from \"../typography/Title.js\";\nimport { Option } from \"./Option.js\";\nimport { autofocus, getButtonText, getReactNodeText } from \"./utils.js\";\nimport type { DataTestAutoId } from \"../../utilities/types.js\";\n\nexport type SelectProps = Omit<InputGroupProps, \"children\" \| \"inline\"> &\n DataTestAutoId &\n Omit<ComponentPropsWithoutRef<\"select\">, \"size\" \| \"children\"> & {\n width?: string;\n items: (string \| ValuePair)[];\n placeholder?: string;\n } & (\n \| {\n searchable: true;\n onSearch?: (searchTerm: string) => void;\n filterFunction?: (item: ValuePair, searchTerm: string) => boolean;\n }\n \| {\n searchable?: false;\n onSearch?: never;\n filterFunction?: never;\n }\n );\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n function Select(props, externalRef) {\n const {\n label,\n errorLabel,\n helpLabel,\n labelProps,\n supportLabelProps,\n tooltip,\n description,\n style,\n className,\n id: idProp,\n items: rawItems,\n multiple = false,\n searchable = false,\n onSearch,\n filterFunction,\n placeholder,\n width,\n value,\n \"data-testautoid\": dataTestautoid,\n \"data-size\": size,\n ...elementProps\n } = props;\n\n const popoverRef = useRef<HTMLDivElement>(null);\n const selectRef = useRef<HTMLSelectElement>(null);\n const unifiedRef = mergeRefs(externalRef, selectRef);\n\n const baseId = `jkl-select-${useId()}`;\n const selectId = idProp ?? baseId;\n const popoverId = `${selectId}-popover`;\n\n const [filter, setFilter] = useState(\"\");\n const [selected, setSelected] = useState(() => new Set<string>());\n\n useListNavigation({ ref: popoverRef, disableTypeahead: searchable });\n\n const items = rawItems.map(getValuePair);\n const filteredItems =\n searchable && filter\n ? items.filter((item) =>\n filterFunction\n ? filterFunction(item, filter)\n : item.label\n .toLowerCase()\n .includes(filter.toLowerCase()),\n )\n : items;\n\n const showPlaceholder =\n selected.size === 0 \|\| (selected.size === 1 && placeholder && selected.has(\"\"));\n const placeholderText = placeholder \|\| \"Ingen valgt\";\n const buttonText = getButtonText(selected, items, placeholderText);\n\n /*\n Setter event-lyttere for å synkronisere verdier i det skjulte select-elementet med\n * visningen i vår komponent, samt nullstilling av filter når menyen lukkes.\n /\n // biome-ignore lint/correctness/useExhaustiveDependencies:\n useLayoutEffect(() => {\n const select = selectRef.current;\n const popover = popoverRef.current;\n if (!select) return;\n\n const syncSelected = () => {\n setSelected(\n new Set(Array.from(select.selectedOptions, (o) => o.value)),\n );\n };\n\n const resetFilterOnClose = (event: ToggleEvent) => {\n if (event.newState === \"closed\") setFilter(\"\");\n };\n\n syncSelected();\n popover?.addEventListener(\"toggle\", resetFilterOnClose);\n select.addEventListener(\"change\", syncSelected);\n\n return () => {\n select.removeEventListener(\"change\", syncSelected);\n popover?.removeEventListener(\"toggle\", resetFilterOnClose);\n };\n }, [multiple, rawItems]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: Oppdaterer visning når value settes\n useLayoutEffect(() => {\n setSelected(\n new Set(\n Array.from(\n selectRef.current?.selectedOptions ?? [],\n (o) => o.value,\n ),\n ),\n );\n }, [value, elementProps.defaultValue]);\n\n /\n Sørger for at menyen kan åpnes med piltastene slik som i native select\n /\n const openWithArrows = (event: KeyboardEvent) => {\n if (event.key === \"ArrowDown\" \|\| event.key === \"ArrowUp\") {\n event.preventDefault();\n popoverRef.current?.showPopover?.();\n }\n };\n\n /\n Fyrer av focus- eller blur-event på det skjulte select-elementet når\n * fokus går inn eller ut av komponenten, slik at f.eks. react-hook-form\n * oppdaterer sin state riktig.\n */\n const syncFocus = (event: FocusEvent) => {\n const sel = selectRef.current;\n if (!popoverRef.current?.contains(event.relatedTarget)) {\n if (!sel) return;\n if ([\"focus\", \"focusin\"].includes(event.type)) {\n sel.dispatchEvent(new Event(\"focusin\", { bubbles: true }));\n sel.dispatchEvent(new Event(\"focus\", { bubbles: true }));\n } else if ([\"blur\", \"focusout\"].includes(event.type)) {\n sel.dispatchEvent(new Event(\"focusout\", { bubbles: true }));\n sel.dispatchEvent(new Event(\"blur\", { bubbles: true }));\n }\n }\n };\n\n return (\n <InputGroup\n id={selectId}\n label={label}\n errorLabel={errorLabel}\n helpLabel={helpLabel}\n labelProps={labelProps}\n supportLabelProps={supportLabelProps}\n tooltip={tooltip}\n description={description}\n style={style}\n data-testautoid={dataTestautoid}\n data-size={size}\n className={clsx(\"jkl-select\", className)}\n render={(inputProps) => (\n <>\n <button\n aria-label={`${showPlaceholder ? placeholderText : buttonText}, ${getReactNodeText(label)}`}\n className=\"jkl-select__button\"\n data-testid=\"jkl-select__button\"\n disabled={elementProps.disabled}\n type=\"button\"\n // @ts-ignore\n popovertarget={popoverId}\n style={{ \"--width\": width } as CSSProperties}\n onKeyDown={openWithArrows}\n onFocus={syncFocus}\n onBlur={syncFocus}\n {...inputProps}\n >\n {showPlaceholder ? placeholderText : buttonText}\n <ArrowDownIcon />\n </button>\n <Flex\n direction=\"column\"\n gap=\"16\"\n ref={popoverRef}\n // @ts-ignore\n popover=\"auto\"\n id={popoverId}\n className=\"jkl-select__popover\"\n aria-label={getReactNodeText(label)}\n >\n <Flex\n as=\"header\"\n alignItems=\"start\"\n justifyContent=\"space-between\"\n gap=\"8\"\n >\n <Title\n size=\"m\"\n as=\"h3\"\n id={`${selectId}-title`}\n >\n {label}\n </Title>\n <Button\n type=\"button\"\n variant=\"ghost\"\n icon={<CloseIcon />}\n aria-label=\"Lukk\"\n // @ts-ignore\n popovertarget={popoverId}\n popovertargetaction=\"hide\"\n />\n </Flex>\n {searchable && (\n <Search\n value={filter}\n onChange={(e) => {\n setFilter(e.target.value);\n onSearch?.(e.target.value);\n }}\n ref={autofocus(searchable)}\n autoComplete=\"off\"\n labelProps={{ srOnly: true }}\n label=\"Søk\"\n placeholder=\"Søk...\"\n width=\"100%\"\n className=\"jkl-spacing-8--bottom\"\n />\n )}\n <Flex\n direction=\"column\"\n gap=\"8\"\n // biome-ignore lint/a11y/useSemanticElements: Vi reimplementerer select\n role=\"listbox\"\n aria-multiselectable={multiple}\n aria-labelledby={`${selectId}-title`}\n >\n {filteredItems.map((pair, index) => (\n <Option\n {...pair}\n key={pair.value}\n selected={selected.has(pair.value)}\n multiple={multiple}\n selectRef={selectRef}\n // @ts-ignore\n popovertarget={\n multiple ? undefined : popoverId\n }\n popovertargetaction={\n multiple ? undefined : \"hide\"\n }\n ref={autofocus(() => {\n if (searchable) return false;\n if (showPlaceholder)\n return index === 0;\n return (\n selected.has(pair.value) &&\n filteredItems.findIndex((p) =>\n selected.has(p.value),\n ) === index\n );\n })}\n />\n ))}\n {searchable && !filteredItems.length && (\n <Text short>Ingen treff</Text>\n )}\n </Flex>\n {multiple && (\n <Button\n type=\"button\"\n variant=\"primary\"\n // @ts-ignore\n popovertarget={popoverId}\n popovertargetaction=\"hide\"\n >\n Bekreft\n </Button>\n )}\n </Flex>\n <select\n defaultValue={\n !multiple && value === undefined && placeholder\n ? \"\"\n : undefined\n }\n {...elementProps}\n tabIndex={-1}\n value={value}\n multiple={multiple}\n ref={unifiedRef}\n aria-labelledby={inputProps.id}\n >\n {!multiple && placeholder && (\n <option value=\"\" disabled>\n {placeholder}\n </option>\n )}\n {items.map((item) => (\n <option key={item.value} value={item.value}>\n {item.label}\n </option>\n ))}\n </select>\n </>\n )}\n />\n );\n },\n);\n\nSelect.displayName = \"Select\";\n"],"names":["Select","forwardRef","props","externalRef","label","errorLabel","helpLabel","labelProps","supportLabelProps","tooltip","description","style","className","id","idProp","items","rawItems","multiple","searchable","onSearch","filterFunction","placeholder","width","value","dataTestautoid","size","elementProps","popoverRef","useRef","selectRef","unifiedRef","mergeRefs","baseId","useId","selectId","popoverId","filter","setFilter","useState","selected","setSelected","Set","useListNavigation","ref","disableTypeahead","map","getValuePair","filteredItems","item","toLowerCase","includes","showPlaceholder","has","placeholderText","buttonText","getButtonText","useLayoutEffect","select","current","popover","syncSelected","Array","from","selectedOptions","o","resetFilterOnClose","event","newState","addEventListener","removeEventListener","defaultValue","openWithArrows","key","preventDefault","showPopover","syncFocus","sel","contains","relatedTarget","type","dispatchEvent","Event","bubbles","jsx","InputGroup","clsx","render","inputProps","jsxs","Fragment","children","getReactNodeText","disabled","popovertarget","onKeyDown","onFocus","onBlur","ArrowDownIcon","Flex","direction","gap","as","alignItems","justifyContent","Title","Button","variant","icon","CloseIcon","popovertargetaction","Search","onChange","e","target","autofocus","autoComplete","srOnly","role","pair","index","createElement","Option","findIndex","p","length","Text","short","tabIndex","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"Select.js","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {\n type CSSProperties,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type KeyboardEvent,\n forwardRef,\n useId,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useListNavigation } from \"../../hooks/index.js\";\nimport { mergeRefs } from \"../../utilities/mergeRefs.js\";\nimport type { DataTestAutoId } from \"../../utilities/types.js\";\nimport { type ValuePair, getValuePair } from \"../../utilities/valuePair.js\";\nimport { Button } from \"../button/Button.js\";\nimport { Flex } from \"../flex/Flex.js\";\nimport { ArrowDownIcon, CloseIcon } from \"../icon/index.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport type { InputGroupProps } from \"../input-group/types.js\";\nimport { Search } from \"../search/Search.js\";\nimport { Text } from \"../typography/Text.js\";\nimport { Title } from \"../typography/Title.js\";\nimport { Option } from \"./Option.js\";\nimport { autofocus, getButtonText, getReactNodeText } from \"./utils.js\";\n\nexport type SelectProps = Omit<InputGroupProps, \"children\" \| \"inline\"> &\n DataTestAutoId &\n Omit<ComponentPropsWithoutRef<\"select\">, \"size\" \| \"children\"> & {\n width?: string;\n items: (string \| ValuePair)[];\n placeholder?: string;\n } & (\n \| {\n searchable: true;\n onSearch?: (searchTerm: string) => void;\n filterFunction?: (item: ValuePair, searchTerm: string) => boolean;\n }\n \| {\n searchable?: false;\n onSearch?: never;\n filterFunction?: never;\n }\n );\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n function Select(props, externalRef) {\n const {\n label,\n errorLabel,\n helpLabel,\n labelProps,\n supportLabelProps,\n tooltip,\n description,\n style,\n className,\n id: idProp,\n items: rawItems,\n multiple = false,\n searchable = false,\n onSearch,\n filterFunction,\n placeholder,\n width,\n value,\n \"data-testautoid\": dataTestautoid,\n \"data-size\": size,\n ...elementProps\n } = props;\n\n const popoverRef = useRef<HTMLDivElement>(null);\n const selectRef = useRef<HTMLSelectElement>(null);\n const unifiedRef = mergeRefs(externalRef, selectRef);\n\n const baseId = `jkl-select-${useId()}`;\n const selectId = idProp ?? baseId;\n const popoverId = `${selectId}-popover`;\n\n const [filter, setFilter] = useState(\"\");\n const [selected, setSelected] = useState(() => new Set<string>());\n\n useListNavigation({ ref: popoverRef, disableTypeahead: searchable });\n\n const items = rawItems.map(getValuePair);\n const filteredItems =\n searchable && filter\n ? items.filter((item) =>\n filterFunction\n ? filterFunction(item, filter)\n : item.label\n .toLowerCase()\n .includes(filter.toLowerCase()),\n )\n : items;\n\n const showPlaceholder =\n selected.size === 0 \|\|\n (selected.size === 1 && placeholder && selected.has(\"\"));\n const placeholderText = placeholder \|\| \"Ingen valgt\";\n const buttonText = getButtonText(selected, items, placeholderText);\n\n /*\n Setter event-lyttere for å synkronisere verdier i det skjulte select-elementet med\n * visningen i vår komponent, samt nullstilling av filter når menyen lukkes.\n /\n // biome-ignore lint/correctness/useExhaustiveDependencies:\n useLayoutEffect(() => {\n const select = selectRef.current;\n const popover = popoverRef.current;\n if (!select) return;\n\n const syncSelected = () => {\n setSelected(\n new Set(Array.from(select.selectedOptions, (o) => o.value)),\n );\n };\n\n const resetFilterOnClose = (event: ToggleEvent) => {\n if (event.newState === \"closed\") setFilter(\"\");\n };\n\n syncSelected();\n popover?.addEventListener(\"toggle\", resetFilterOnClose);\n select.addEventListener(\"change\", syncSelected);\n\n return () => {\n select.removeEventListener(\"change\", syncSelected);\n popover?.removeEventListener(\"toggle\", resetFilterOnClose);\n };\n }, [multiple, rawItems]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: Oppdaterer visning når value settes\n useLayoutEffect(() => {\n setSelected(\n new Set(\n Array.from(\n selectRef.current?.selectedOptions ?? [],\n (o) => o.value,\n ),\n ),\n );\n }, [value, elementProps.defaultValue]);\n\n /\n Sørger for at menyen kan åpnes med piltastene slik som i native select\n /\n const openWithArrows = (event: KeyboardEvent) => {\n if (event.key === \"ArrowDown\" \|\| event.key === \"ArrowUp\") {\n event.preventDefault();\n popoverRef.current?.showPopover?.();\n }\n };\n\n /\n Fyrer av focus- eller blur-event på det skjulte select-elementet når\n * fokus går inn eller ut av komponenten, slik at f.eks. react-hook-form\n * oppdaterer sin state riktig.\n */\n const syncFocus = (event: FocusEvent) => {\n const sel = selectRef.current;\n if (!popoverRef.current?.contains(event.relatedTarget)) {\n if (!sel) return;\n if ([\"focus\", \"focusin\"].includes(event.type)) {\n sel.dispatchEvent(new Event(\"focusin\", { bubbles: true }));\n sel.dispatchEvent(new Event(\"focus\", { bubbles: true }));\n } else if ([\"blur\", \"focusout\"].includes(event.type)) {\n sel.dispatchEvent(new Event(\"focusout\", { bubbles: true }));\n sel.dispatchEvent(new Event(\"blur\", { bubbles: true }));\n }\n }\n };\n\n return (\n <InputGroup\n id={selectId}\n label={label}\n errorLabel={errorLabel}\n helpLabel={helpLabel}\n labelProps={labelProps}\n supportLabelProps={supportLabelProps}\n tooltip={tooltip}\n description={description}\n style={style}\n data-testautoid={dataTestautoid}\n data-size={size}\n className={clsx(\"jkl-select\", className)}\n render={(inputProps) => (\n <>\n <button\n aria-label={`${showPlaceholder ? placeholderText : buttonText}, ${getReactNodeText(label)}`}\n className=\"jkl-select__button\"\n data-testid=\"jkl-select__button\"\n disabled={elementProps.disabled}\n type=\"button\"\n // @ts-ignore\n popovertarget={popoverId}\n style={{ \"--width\": width } as CSSProperties}\n onKeyDown={openWithArrows}\n onFocus={syncFocus}\n onBlur={syncFocus}\n {...inputProps}\n >\n {showPlaceholder ? placeholderText : buttonText}\n <ArrowDownIcon />\n </button>\n <Flex\n direction=\"column\"\n gap=\"16\"\n ref={popoverRef}\n // @ts-ignore\n popover=\"auto\"\n id={popoverId}\n className=\"jkl-select__popover\"\n aria-label={getReactNodeText(label)}\n >\n <Flex\n as=\"header\"\n alignItems=\"start\"\n justifyContent=\"space-between\"\n gap=\"8\"\n >\n <Title\n size=\"m\"\n as=\"h3\"\n id={`${selectId}-title`}\n >\n {label}\n </Title>\n <Button\n type=\"button\"\n variant=\"ghost\"\n icon={<CloseIcon />}\n aria-label=\"Lukk\"\n // @ts-ignore\n popovertarget={popoverId}\n popovertargetaction=\"hide\"\n />\n </Flex>\n {searchable && (\n <Search\n value={filter}\n onChange={(e) => {\n setFilter(e.target.value);\n onSearch?.(e.target.value);\n }}\n ref={autofocus(searchable)}\n autoComplete=\"off\"\n labelProps={{ srOnly: true }}\n label=\"Søk\"\n placeholder=\"Søk...\"\n width=\"100%\"\n className=\"jkl-spacing-8--bottom\"\n />\n )}\n <Flex\n direction=\"column\"\n gap=\"8\"\n // biome-ignore lint/a11y/useSemanticElements: Vi reimplementerer select\n role=\"listbox\"\n aria-multiselectable={multiple}\n aria-labelledby={`${selectId}-title`}\n >\n {filteredItems.map((pair, index) => (\n <Option\n {...pair}\n key={pair.value}\n selected={selected.has(pair.value)}\n multiple={multiple}\n selectRef={selectRef}\n // @ts-ignore\n popovertarget={\n multiple ? undefined : popoverId\n }\n popovertargetaction={\n multiple ? undefined : \"hide\"\n }\n ref={autofocus(() => {\n if (searchable) return false;\n if (showPlaceholder)\n return index === 0;\n return (\n selected.has(pair.value) &&\n filteredItems.findIndex((p) =>\n selected.has(p.value),\n ) === index\n );\n })}\n />\n ))}\n {searchable && !filteredItems.length && (\n <Text short>Ingen treff</Text>\n )}\n </Flex>\n {multiple && (\n <Button\n type=\"button\"\n variant=\"primary\"\n // @ts-ignore\n popovertarget={popoverId}\n popovertargetaction=\"hide\"\n >\n Bekreft\n </Button>\n )}\n </Flex>\n <select\n defaultValue={\n !multiple && value === undefined && placeholder\n ? \"\"\n : undefined\n }\n {...elementProps}\n tabIndex={-1}\n value={value}\n multiple={multiple}\n ref={unifiedRef}\n aria-labelledby={inputProps.id}\n >\n {!multiple && placeholder && (\n <option value=\"\" disabled>\n {placeholder}\n </option>\n )}\n {items.map((item) => (\n <option key={item.value} value={item.value}>\n {item.label}\n </option>\n ))}\n </select>\n </>\n )}\n />\n );\n },\n);\n\nSelect.displayName = \"Select\";\n"],"names":["Select","forwardRef","props","externalRef","label","errorLabel","helpLabel","labelProps","supportLabelProps","tooltip","description","style","className","id","idProp","items","rawItems","multiple","searchable","onSearch","filterFunction","placeholder","width","value","dataTestautoid","size","elementProps","popoverRef","useRef","selectRef","unifiedRef","mergeRefs","baseId","useId","selectId","popoverId","filter","setFilter","useState","selected","setSelected","Set","useListNavigation","ref","disableTypeahead","map","getValuePair","filteredItems","item","toLowerCase","includes","showPlaceholder","has","placeholderText","buttonText","getButtonText","useLayoutEffect","select","current","popover","syncSelected","Array","from","selectedOptions","o","resetFilterOnClose","event","newState","addEventListener","removeEventListener","defaultValue","openWithArrows","key","preventDefault","showPopover","syncFocus","sel","contains","relatedTarget","type","dispatchEvent","Event","bubbles","jsx","InputGroup","clsx","render","inputProps","jsxs","Fragment","children","getReactNodeText","disabled","popovertarget","onKeyDown","onFocus","onBlur","ArrowDownIcon","Flex","direction","gap","as","alignItems","justifyContent","Title","Button","variant","icon","CloseIcon","popovertargetaction","Search","onChange","e","target","autofocus","autoComplete","srOnly","role","pair","index","createElement","Option","findIndex","p","length","Text","short","tabIndex","displayName"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sources":["../../../../src/components/select/utils.ts"],"sourcesContent":["import { type ReactNode, isValidElement } from \"react\";\nimport type { ValuePair } from \"../../utilities/valuePair.js\";\n\nexport function getReactNodeText(node: ReactNode): string {\n if (typeof node === \"string\" \|\| typeof node === \"number\") return String(node);\n if (Array.isArray(node)) return node.map(getReactNodeText).join(\"\");\n if (isValidElement(node)) return getReactNodeText(node.props.children);\n return \"\";\n}\n\nexport const getButtonText = (\n selected: Set<string>,\n valuePairs: ValuePair[],\n placeholderText: string,\n): string => {\n if (selected.size === 1) {\n return (\n valuePairs.find((p) => selected.has(p.value))?.label ??\n placeholderText\n );\n }\n return `${selected.size} valgt`;\n};\n\nexport const autofocus =\n (active: boolean \| (() => boolean)) => (el: HTMLElement \| null) => {\n if (el) el.autofocus = typeof active === \"boolean\" ? active : active();\n };\n"],"names":["getReactNodeText","node","String","Array","isArray","map","join","isValidElement","props","children","getButtonText","selected","valuePairs","placeholderText","size","find","p","has","value","label","autofocus","active","el"],"mappings":"uCAGO,SAASA,EAAiBC,GAC7B,MAAoB,iBAATA,GAAqC,iBAATA,~~EAA0BC~~,OAAOD,~~GACpEE~~,MAAMC,QAAQH,GAAcA,EAAKI,IAAIL,GAAkBM,KAAK,IAC5DC,EAAeN,GAAcD,EAAiBC,EAAKO,MAAMC,UACtD,EACX,CAEO,MAAMC,EAAgB,CACzBC,EACAC,EACAC,IAEsB,IAAlBF,EAASG,KAELF,EAAWG,KAAMC,GAAML,EAASM,IAAID,EAAEE,SAASC,OAC/CN,EAGD,GAAGF,EAASG,aAGVM,EACRC,GAAuCC,IAChCA,IAAIA,EAAGF,UAA8B,kBAAXC,EAAuBA,EAASA"}
1	+ {"version":3,"file":"utils.js","sources":["../../../../src/components/select/utils.ts"],"sourcesContent":["import { type ReactNode, isValidElement } from \"react\";\nimport type { ValuePair } from \"../../utilities/valuePair.js\";\n\nexport function getReactNodeText(node: ReactNode): string {\n if (typeof node === \"string\" \|\| typeof node === \"number\")\n return String(node);\n if (Array.isArray(node)) return node.map(getReactNodeText).join(\"\");\n if (isValidElement(node)) return getReactNodeText(node.props.children);\n return \"\";\n}\n\nexport const getButtonText = (\n selected: Set<string>,\n valuePairs: ValuePair[],\n placeholderText: string,\n): string => {\n if (selected.size === 1) {\n return (\n valuePairs.find((p) => selected.has(p.value))?.label ??\n placeholderText\n );\n }\n return `${selected.size} valgt`;\n};\n\nexport const autofocus =\n (active: boolean \| (() => boolean)) => (el: HTMLElement \| null) => {\n if (el) el.autofocus = typeof active === \"boolean\" ? active : active();\n };\n"],"names":["getReactNodeText","node","String","Array","isArray","map","join","isValidElement","props","children","getButtonText","selected","valuePairs","placeholderText","size","find","p","has","value","label","autofocus","active","el"],"mappings":"uCAGO,SAASA,EAAiBC,GAC7B,MAAoB,iBAATA,GAAqC,iBAATA,EAC5BC,OAAOD,GACdE,MAAMC,QAAQH,GAAcA,EAAKI,IAAIL,GAAkBM,KAAK,IAC5DC,EAAeN,GAAcD,EAAiBC,EAAKO,MAAMC,UACtD,EACX,CAEO,MAAMC,EAAgB,CACzBC,EACAC,EACAC,IAEsB,IAAlBF,EAASG,KAELF,EAAWG,KAAMC,GAAML,EAASM,IAAID,EAAEE,SAASC,OAC/CN,EAGD,GAAGF,EAASG,aAGVM,EACRC,GAAuCC,IAChCA,IAAIA,EAAGF,UAA8B,kBAAXC,EAAuBA,EAASA"}

package/build/es/components/table/stories/assets/table-data.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+export declare const skadesaker: {
+    columns: string[];
+    rows: string[][];
+};
+export declare const faktura: {
+    columns: string[];
+    rows: (string | number | string[] | Date)[][];
+};

package/build/es/components/table/stories/assets/table-data.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ const r={columns:["Dato","Saksnummer","Kundenummer","Kundenavn","Milepæl","Følger saken"],rows:[["24.02.2025","20-1234567","010203 99887","Ola Nordmann","Opprettet","Siri Saksbehandler"],["13.04.2019","20-8382811","010203 99887","Kari Nordkvinne","Opprettet","Siri Saksbehandler"],["31.07.2017","20-1111","010203 99887","Kari Nordkvinne","Opprettet","Per Persen"]]},e={columns:["Forfallsdato","Type","Beløp","Status","Produkt","Kontonummer","KID","Betalingstype"],rows:[[new Date(2025,10,15),"Skade",612.32,"Faktura",["Bilforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,9,15),"Person",402.67,"Påminnelse",["Hundeforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,8,15),"Person",2412.67,"Inkassovarsel",["Bilforsikring","Katteforsikring","Båtforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,7,15),"Person",719.17,"Faktura",["Båtforsikring","Hundeforsikring","Bilforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,6,15),"Skade",992.01,"Faktura",["Bilforsikring","Hundeforsikring","Elsparkesykkel"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,5,15),"Person",772.79,"Faktura",["Bilforsikring","Hus","Bilforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,4,15),"Person",772.79,"Faktura",["Bilforsikring","Hundeforsikring","Bilforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,3,15),"Person",772.79,"Faktura",["Bilforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,2,15),"Person",772.79,"Faktura",["Bil","Hus","Innbo"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,1,15),"Person",772.79,"Faktura",["Bilforsikring","Hundeforsikring","Katteforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2025,0,15),"Person",772.79,"Faktura",["Hundeforsikring","Barneforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2024,11,15),"Person",772.79,"Faktura",["Elsparkesykkel"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2024,10,15),"Person",772.79,"Faktura",["Hundeforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2024,9,15),"Person",772.79,"Faktura",["Bilforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"],[new Date(2024,8,15),"Person",772.79,"Faktura",["Bilforsikring","Hundeforsikring"],"9001.17.00771","1631 4283 2245","eFaktura"]]};export{e as faktura,r as skadesaker};
2	+ //# sourceMappingURL=table-data.js.map

package/build/es/components/table/stories/assets/table-data.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"table-data.js","sources":["../../../../../../src/components/table/stories/assets/table-data.ts"],"sourcesContent":["export const skadesaker = {\n columns: [\n \"Dato\",\n \"Saksnummer\",\n \"Kundenummer\",\n \"Kundenavn\",\n \"Milepæl\",\n \"Følger saken\",\n ],\n rows: [\n [\n \"24.02.2025\",\n \"20-1234567\",\n \"010203 99887\",\n \"Ola Nordmann\",\n \"Opprettet\",\n \"Siri Saksbehandler\",\n ],\n [\n \"13.04.2019\",\n \"20-8382811\",\n \"010203 99887\",\n \"Kari Nordkvinne\",\n \"Opprettet\",\n \"Siri Saksbehandler\",\n ],\n [\n \"31.07.2017\",\n \"20-1111\",\n \"010203 99887\",\n \"Kari Nordkvinne\",\n \"Opprettet\",\n \"Per Persen\",\n ],\n ],\n};\n\nexport const faktura = {\n columns: [\n \"Forfallsdato\",\n \"Type\",\n \"Beløp\",\n \"Status\",\n \"Produkt\",\n \"Kontonummer\",\n \"KID\",\n \"Betalingstype\",\n ],\n rows: [\n [\n new Date(2025, 10, 15),\n \"Skade\",\n 612.32,\n \"Faktura\",\n [\"Bilforsikring\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n [\n new Date(2025, 9, 15),\n \"Person\",\n 402.67,\n \"Påminnelse\",\n [\"Hundeforsikring\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n [\n new Date(2025, 8, 15),\n \"Person\",\n 2412.67,\n \"Inkassovarsel\",\n [\"Bilforsikring\", \"Katteforsikring\", \"Båtforsikring\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n [\n new Date(2025, 7, 15),\n \"Person\",\n 719.17,\n \"Faktura\",\n [\"Båtforsikring\", \"Hundeforsikring\", \"Bilforsikring\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n [\n new Date(2025, 6, 15),\n \"Skade\",\n 992.01,\n \"Faktura\",\n [\"Bilforsikring\", \"Hundeforsikring\", \"Elsparkesykkel\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n [\n new Date(2025, 5, 15),\n \"Person\",\n 772.79,\n \"Faktura\",\n [\"Bilforsikring\", \"Hus\", \"Bilforsikring\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n [\n new Date(2025, 4, 15),\n \"Person\",\n 772.79,\n \"Faktura\",\n [\"Bilforsikring\", \"Hundeforsikring\", \"Bilforsikring\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n [\n new Date(2025, 3, 15),\n \"Person\",\n 772.79,\n \"Faktura\",\n [\"Bilforsikring\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n [\n new Date(2025, 2, 15),\n \"Person\",\n 772.79,\n \"Faktura\",\n [\"Bil\", \"Hus\", \"Innbo\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n [\n new Date(2025, 1, 15),\n \"Person\",\n 772.79,\n \"Faktura\",\n [\"Bilforsikring\", \"Hundeforsikring\", \"Katteforsikring\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n [\n new Date(2025, 0, 15),\n \"Person\",\n 772.79,\n \"Faktura\",\n [\"Hundeforsikring\", \"Barneforsikring\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n [\n new Date(2024, 11, 15),\n \"Person\",\n 772.79,\n \"Faktura\",\n [\"Elsparkesykkel\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n [\n new Date(2024, 10, 15),\n \"Person\",\n 772.79,\n \"Faktura\",\n [\"Hundeforsikring\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n [\n new Date(2024, 9, 15),\n \"Person\",\n 772.79,\n \"Faktura\",\n [\"Bilforsikring\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n [\n new Date(2024, 8, 15),\n \"Person\",\n 772.79,\n \"Faktura\",\n [\"Bilforsikring\", \"Hundeforsikring\"],\n \"9001.17.00771\",\n \"1631 4283 2245\",\n \"eFaktura\",\n ],\n ],\n};\n"],"names":["skadesaker","columns","rows","faktura","Date"],"mappings":"AAAO,MAAMA,EAAa,CACtBC,QAAS,CACL,OACA,aACA,cACA,YACA,UACA,gBAEJC,KAAM,CACF,CACI,aACA,aACA,eACA,eACA,YACA,sBAEJ,CACI,aACA,aACA,eACA,kBACA,YACA,sBAEJ,CACI,aACA,UACA,eACA,kBACA,YACA,gBAKCC,EAAU,CACnBF,QAAS,CACL,eACA,OACA,QACA,SACA,UACA,cACA,MACA,iBAEJC,KAAM,CACF,CACI,IAAIE,KAAK,KAAM,GAAI,IACnB,QACA,OACA,UACA,CAAC,iBACD,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,aACA,CAAC,mBACD,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,QACA,gBACA,CAAC,gBAAiB,kBAAmB,iBACrC,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,gBAAiB,kBAAmB,iBACrC,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,QACA,OACA,UACA,CAAC,gBAAiB,kBAAmB,kBACrC,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,gBAAiB,MAAO,iBACzB,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,gBAAiB,kBAAmB,iBACrC,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,iBACD,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,MAAO,MAAO,SACf,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,gBAAiB,kBAAmB,mBACrC,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,kBAAmB,mBACpB,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,GAAI,IACnB,SACA,OACA,UACA,CAAC,kBACD,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,GAAI,IACnB,SACA,OACA,UACA,CAAC,mBACD,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,iBACD,gBACA,iBACA,YAEJ,CACI,IAAIA,KAAK,KAAM,EAAG,IAClB,SACA,OACA,UACA,CAAC,gBAAiB,mBAClB,gBACA,iBACA"}

package/codemods/CODEMODS.md CHANGED Viewed

@@ -32,28 +32,28 @@ Standardcodemoden for Jøkul 4 → 5-migrering. Kjøres automatisk med `jokul co
 #### Importstier for stilark og Sass-hjelpere
-| Gammel import | Ny import |
-|---|---|
-| `@fremtind/jokul/styles/core` | `@fremtind/jokul/styles/base.scss` |
-| `@fremtind/jokul/styles/core/core` | `@fremtind/jokul/styles/base` |
-| `@fremtind/jokul/styles/core/core.scss` | `@fremtind/jokul/styles/base.scss` |
-| `@fremtind/jokul/styles/core/core.css` | `@fremtind/jokul/styles/base.css` |
-| `@fremtind/jokul/styles/core/core.min.css` | `@fremtind/jokul/styles/base.min.css` |
-| `@fremtind/jokul/styles` | `@fremtind/jokul/styles/components.scss` |
-| `@fremtind/jokul/styles/styles` | `@fremtind/jokul/styles/components` |
-| `@fremtind/jokul/styles/styles.scss` | `@fremtind/jokul/styles/components.scss` |
-| `@fremtind/jokul/styles/styles.css` | `@fremtind/jokul/styles/components.css` |
-| `@fremtind/jokul/styles/styles.min.css` | `@fremtind/jokul/styles/components.min.css` |
-| `@fremtind/jokul/styles/core/jkl` | `@fremtind/jokul/styles/jkl` |
-| `@fremtind/jokul/styles/core/jkl/index` | `@fremtind/jokul/styles/jkl` |
-| `@fremtind/jokul/styles/fonts/webfonts` | `@fremtind/jokul/styles/theme/fonts` |
-| `@fremtind/jokul/styles/fonts/webfonts.scss` | `@fremtind/jokul/styles/theme/fonts` |
-| `@fremtind/jokul/styles/fonts` | `@fremtind/jokul/styles/theme/fonts` |
-| `@fremtind/jokul/tailwind/v4` | `@fremtind/jokul/styles/tailwind` |
-| `@fremtind/jokul/core` | `@fremtind/jokul/utilities` |
-| `../core/jkl` (relativ) | `../styles/jkl` |
-| `../../core/jkl` (relativ) | `../../styles/jkl` |
-| `../../../core/jkl` (relativ) | `../../../styles/jkl` |
+| Gammel import                                | Ny import                                   |
+| -------------------------------------------- | ------------------------------------------- |
+| `@fremtind/jokul/styles/core`                | `@fremtind/jokul/styles/base.scss`          |
+| `@fremtind/jokul/styles/core/core`           | `@fremtind/jokul/styles/base`               |
+| `@fremtind/jokul/styles/core/core.scss`      | `@fremtind/jokul/styles/base.scss`          |
+| `@fremtind/jokul/styles/core/core.css`       | `@fremtind/jokul/styles/base.css`           |
+| `@fremtind/jokul/styles/core/core.min.css`   | `@fremtind/jokul/styles/base.min.css`       |
+| `@fremtind/jokul/styles`                     | `@fremtind/jokul/styles/components.scss`    |
+| `@fremtind/jokul/styles/styles`              | `@fremtind/jokul/styles/components`         |
+| `@fremtind/jokul/styles/styles.scss`         | `@fremtind/jokul/styles/components.scss`    |
+| `@fremtind/jokul/styles/styles.css`          | `@fremtind/jokul/styles/components.css`     |
+| `@fremtind/jokul/styles/styles.min.css`      | `@fremtind/jokul/styles/components.min.css` |
+| `@fremtind/jokul/styles/core/jkl`            | `@fremtind/jokul/styles/jkl`                |
+| `@fremtind/jokul/styles/core/jkl/index`      | `@fremtind/jokul/styles/jkl`                |
+| `@fremtind/jokul/styles/fonts/webfonts`      | `@fremtind/jokul/styles/theme/fonts`        |
+| `@fremtind/jokul/styles/fonts/webfonts.scss` | `@fremtind/jokul/styles/theme/fonts`        |
+| `@fremtind/jokul/styles/fonts`               | `@fremtind/jokul/styles/theme/fonts`        |
+| `@fremtind/jokul/tailwind/v4`                | `@fremtind/jokul/styles/tailwind`           |
+| `@fremtind/jokul/core`                       | `@fremtind/jokul/utilities`                 |
+| `../core/jkl` (relativ)                      | `../styles/jkl`                             |
+| `../../core/jkl` (relativ)                   | `../../styles/jkl`                          |
+| `../../../core/jkl` (relativ)                | `../../../styles/jkl`                       |
 #### Fjerning av `webfonts.css`-import (CSS)
@@ -63,11 +63,11 @@ Hvis `webfonts.css` fjernes uten at `base.css` eller `components.css` er importe
 #### Stilimporter for beta-komponenter
-| Gammel import | Ny import |
-|---|---|
+| Gammel import                                        | Ny import                                                 |
+| ---------------------------------------------------- | --------------------------------------------------------- |
 | `@fremtind/jokul/styles/components/description-list` | `@fremtind/jokul/styles/components/beta/description-list` |
-| `@fremtind/jokul/styles/components/nav-link` | `@fremtind/jokul/styles/components/beta/nav-link` |
-| `@fremtind/jokul/styles/components/select` | `@fremtind/jokul/styles/components/beta/select` |
+| `@fremtind/jokul/styles/components/nav-link`         | `@fremtind/jokul/styles/components/beta/nav-link`         |
+| `@fremtind/jokul/styles/components/select`           | `@fremtind/jokul/styles/components/beta/select`           |
 Erstatningen skjer bare hvis beta-komponent-identifikatoren (`BETA_Select` o.l.) finnes i samme fil. Hvis stilimporten finnes uten komponentreferanse gis det et varsel om manuell vurdering.
@@ -77,44 +77,44 @@ I SCSS-filer flyttes `@use "@fremtind/jokul/styles/theme/fonts"` til å stå _f
 #### Font-familienavn
-| Gammelt navn | Nytt navn |
-|---|---|
-| `"Fremtind Material Symbols"` | `"Jokul Icons"` |
+| Gammelt navn                           | Nytt navn                |
+| -------------------------------------- | ------------------------ |
+| `"Fremtind Material Symbols"`          | `"Jokul Icons"`          |
 | `"Fremtind Material Symbols Fallback"` | `"Jokul Icons Fallback"` |
 #### CSS-fargetokens
 Semantiske `--jkl-color-*` custom properties omdøpt fra v4 til v5. Gjelder både `var()`-bruk og direktedefinerte properties.
-| Gammel token | Ny token |
-|---|---|
-| `--jkl-color-background-action` | `--jkl-color-background-contrast` |
-| `--jkl-color-text-on-action` | `--jkl-color-text-on-contrast` |
-| `--jkl-color-text-inverted` | `--jkl-color-text-on-contrast` |
-| `--jkl-color-background-container-high` | `--jkl-color-background-container` |
-| `--jkl-color-background-container-low` | `--jkl-color-background-container` |
-| `--jkl-color-background-container-inverted` | `--jkl-color-background-contrast` |
-| `--jkl-color-background-alert-info` | `--jkl-color-info-background-container` |
-| `--jkl-color-background-alert-warning` | `--jkl-color-warning-background-container` |
-| `--jkl-color-background-alert-error` | `--jkl-color-error-background-container` |
-| `--jkl-color-background-alert-success` | `--jkl-color-success-background-container` |
+| Gammel token                                | Ny token                                   |
+| ------------------------------------------- | ------------------------------------------ |
+| `--jkl-color-background-action`             | `--jkl-color-background-contrast`          |
+| `--jkl-color-text-on-action`                | `--jkl-color-text-on-contrast`             |
+| `--jkl-color-text-inverted`                 | `--jkl-color-text-on-contrast`             |
+| `--jkl-color-background-container-high`     | `--jkl-color-background-container`         |
+| `--jkl-color-background-container-low`      | `--jkl-color-background-container`         |
+| `--jkl-color-background-container-inverted` | `--jkl-color-background-contrast`          |
+| `--jkl-color-background-alert-info`         | `--jkl-color-info-background-container`    |
+| `--jkl-color-background-alert-warning`      | `--jkl-color-warning-background-container` |
+| `--jkl-color-background-alert-error`        | `--jkl-color-error-background-container`   |
+| `--jkl-color-background-alert-success`      | `--jkl-color-success-background-container` |
 #### Tailwind-fargeklasser
 Tilsvarende omdøping for alle Tailwind v4-fargeklasser generert fra `--color-*`-variabler. Alle vanlige prefikser håndteres: `bg-`, `text-`, `border-`, `ring-`, `shadow-`, `fill-`, `stroke-`, `accent-`, `caret-`, `outline-`, `placeholder-`, `divide-`, `from-`, `via-`, `to-`, `decoration-`.
-| Gammelt fargenøkkel | Nytt fargenøkkel | Eksempel på klasse |
-|---|---|---|
-| `background-action` | `background-contrast` | `bg-background-action` → `bg-background-contrast` |
-| `text-on-action` | `text-on-contrast` | `text-text-on-action` → `text-text-on-contrast` |
-| `text-inverted` | `text-on-contrast` | `text-text-inverted` → `text-text-on-contrast` |
-| `background-container-high` | `background-container` | `bg-background-container-high` → `bg-background-container` |
-| `background-container-low` | `background-container` | `bg-background-container-low` → `bg-background-container` |
-| `background-container-inverted` | `background-contrast` | `bg-background-container-inverted` → `bg-background-contrast` |
-| `background-alert-info` | `info-background-container` | `bg-background-alert-info` → `bg-info-background-container` |
-| `background-alert-warning` | `warning-background-container` | `bg-background-alert-warning` → `bg-warning-background-container` |
-| `background-alert-error` | `error-background-container` | `bg-background-alert-error` → `bg-error-background-container` |
-| `background-alert-success` | `success-background-container` | `bg-background-alert-success` → `bg-success-background-container` |
+| Gammelt fargenøkkel             | Nytt fargenøkkel               | Eksempel på klasse                                                |
+| ------------------------------- | ------------------------------ | ----------------------------------------------------------------- |
+| `background-action`             | `background-contrast`          | `bg-background-action` → `bg-background-contrast`                 |
+| `text-on-action`                | `text-on-contrast`             | `text-text-on-action` → `text-text-on-contrast`                   |
+| `text-inverted`                 | `text-on-contrast`             | `text-text-inverted` → `text-text-on-contrast`                    |
+| `background-container-high`     | `background-container`         | `bg-background-container-high` → `bg-background-container`        |
+| `background-container-low`      | `background-container`         | `bg-background-container-low` → `bg-background-container`         |
+| `background-container-inverted` | `background-contrast`          | `bg-background-container-inverted` → `bg-background-contrast`     |
+| `background-alert-info`         | `info-background-container`    | `bg-background-alert-info` → `bg-info-background-container`       |
+| `background-alert-warning`      | `warning-background-container` | `bg-background-alert-warning` → `bg-warning-background-container` |
+| `background-alert-error`        | `error-background-container`   | `bg-background-alert-error` → `bg-error-background-container`     |
+| `background-alert-success`      | `success-background-container` | `bg-background-alert-success` → `bg-success-background-container` |
 Tailwind-modifikatorer (`hover:`, `dark:`, `md:`, `focus:` o.l.), opacity-modifikatorer (`/50`) og viktig-prefiks (`!`) håndteres korrekt.
@@ -122,49 +122,81 @@ Tailwind-modifikatorer (`hover:`, `dark:`, `md:`, `focus:` o.l.), opacity-modifi
 Import path, stilimporter og komponentnavn omdøpes automatisk:
-| Gammel import | Ny import |
-|---|---|
-| `@fremtind/jokul/datepicker` | `@fremtind/jokul/date-input` |
+| Gammel import                 | Ny import                    |
+| ----------------------------- | ---------------------------- |
+| `@fremtind/jokul/datepicker`  | `@fremtind/jokul/date-input` |
 | `@fremtind/jokul/date-inputs` | `@fremtind/jokul/date-input` |
 | `@fremtind/jokul/date-picker` | `@fremtind/jokul/date-input` |
 Stilmappa følger komponentmappa, så både mappe- og filnavn skrives om. Gjelder både `import "..."` og Sass `@use`/`@forward`:
-| Gammel stilimport | Ny stilimport |
-|---|---|
-| `@fremtind/jokul/styles/components/datepicker` | `@fremtind/jokul/styles/components/date-input` |
-| `@fremtind/jokul/styles/components/datepicker/_index.scss` | `@fremtind/jokul/styles/components/date-input/_index.scss` |
-| `@fremtind/jokul/styles/components/datepicker/datepicker.scss` | `@fremtind/jokul/styles/components/date-input/date-input.scss` |
-| `@fremtind/jokul/styles/components/datepicker/datepicker.css` | `@fremtind/jokul/styles/components/date-input/date-input.css` |
+| Gammel stilimport                                                 | Ny stilimport                                                     |
+| ----------------------------------------------------------------- | ----------------------------------------------------------------- |
+| `@fremtind/jokul/styles/components/datepicker`                    | `@fremtind/jokul/styles/components/date-input`                    |
+| `@fremtind/jokul/styles/components/datepicker/_index.scss`        | `@fremtind/jokul/styles/components/date-input/_index.scss`        |
+| `@fremtind/jokul/styles/components/datepicker/datepicker.scss`    | `@fremtind/jokul/styles/components/date-input/date-input.scss`    |
+| `@fremtind/jokul/styles/components/datepicker/datepicker.css`     | `@fremtind/jokul/styles/components/date-input/date-input.css`     |
 | `@fremtind/jokul/styles/components/datepicker/datepicker.min.css` | `@fremtind/jokul/styles/components/date-input/date-input.min.css` |
 De samme variantene håndteres for de eldre mappenavnene `date-picker` og `date-inputs`.
 | Gammel komponent | Ny komponent |
-|---|---|
-| `DatePicker` | `DateInput` |
+| ---------------- | ------------ |
+| `DatePicker`     | `DateInput`  |
 Prop-navnene som begrenser datovalg omdøpes automatisk:
-| Gammel prop | Ny prop |
-|---|---|
-| `disableBeforeDate` | `min` |
-| `disableAfterDate` | `max` |
+| Gammel prop         | Ny prop |
+| ------------------- | ------- |
+| `disableBeforeDate` | `min`   |
+| `disableAfterDate`  | `max`   |
 Fjernede props endres ikke automatisk, men gir varsel når de finnes i en fil som bruker `DateInput`/`DatePicker`: `defaultShow`, `initialShow`, `extended`, `invalid`, `yearsToShow`, `days`, `months`, `monthLabel`, `yearLabel`, `action`, `showCalendarLabel`, `hideCalendarLabel` og `textInputProps`. Se [MIGRATION.md](../MIGRATION.md#fjernede-props-og-hjelpefunksjoner) for erstatninger.
 ---
+#### `Select` (Jøkul 6)
+`Select` er skrevet om til å bygge på det native Popover API-et. Disse endres automatisk:
+| Gammel prop     | Ny prop       |
+| --------------- | ------------- |
+| `defaultPrompt` | `placeholder` |
+`searchable` som en inline-funksjon med to enkle parametere skrives om til `searchable filterFunction={...}`, med parameterrekkefølgen snudd (funksjonskroppen refererer til parameterne ved navn og trenger ikke endres):
+```tsx
+// Før
+<Select searchable={(searchValue, item) => item.label.includes(searchValue)} />
+// Etter
+<Select searchable filterFunction={(item, searchValue) => item.label.includes(searchValue)} />
+```
+Er `searchable` satt til en funksjonsreferanse (f.eks. `searchable={filterItems}`) i stedet for en inline-funksjon, kan ikke codemoden trygt bytte parameterrekkefølgen inne i den refererte funksjonen, og det gis et varsel i stedet.
+Disse gir varsel når de finnes i en fil som bruker `Select`, `NativeSelect` eller `BETA_Select`:
+| Mønster                            | Varsel                                                                                                         |
+| ---------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| `NativeSelect`                     | Fjernet. Migrer til den nye `Select`.                                                                          |
+| `BETA_Select` / `BETA_SelectProps` | Fjernet. Migrer til den stabile `Select`.                                                                      |
+| `searchable={funksjonsreferanse}`  | Kan ikke skrives om automatisk. Sett `searchable` til `true` og send filtreringslogikken til `filterFunction`. |
+| `maxShownOptions`, `inline`        | Fjernet uten direkte erstatning.                                                                               |
+| `invalid`                          | Bruk `errorLabel` i stedet.                                                                                    |
+---
 #### Fjernede maskefunksjoner
 De frittstående, utgåtte maskefunksjonene er fjernet. Kall og importer skrives om
 til `registerWithMasks(form)`-API-et.
-| Fjernet funksjon | Erstatning |
-|---|---|
+| Fjernet funksjon                                     | Erstatning                                                             |
+| ---------------------------------------------------- | ---------------------------------------------------------------------- |
 | `registerWithFodselsnummerMask(form, name, options)` | `registerWithMasks(form).registerWithFodselsnummerMask(name, options)` |
-| `registerWithKontonummerMask(form, name, options)` | `registerWithMasks(form).registerWithKontonummerMask(name, options)` |
-| `registerWithKortnummerMask(form, name, options)` | `registerWithMasks(form).registerWithKortnummerMask(name, options)` |
+| `registerWithKontonummerMask(form, name, options)`   | `registerWithMasks(form).registerWithKontonummerMask(name, options)`   |
+| `registerWithKortnummerMask(form, name, options)`    | `registerWithMasks(form).registerWithKortnummerMask(name, options)`    |
 | `registerWithTelefonnummerMask(form, name, options)` | `registerWithMasks(form).registerWithTelefonnummerMask(name, options)` |
 Importer fra `@fremtind/jokul/utilities` (og gamle `@fremtind/jokul/core`) ryddes:
@@ -175,14 +207,14 @@ de fjernede navnene tas ut og `registerWithMasks` legges til. Aliaserte importer
 Disse mønstrene kan ikke omdøpes automatisk. Codemoden skriver ut ett varsel per fil der mønsteret finnes.
-| Mønster | Varsel |
-|---|---|
-| `--jkl-color-text-on-alert-*` | Fjernede tokens. Bruk `--jkl-color-<rolle>-text-default`, f.eks. `--jkl-color-info-text-default`. |
-| `--jkl-color-background-interactive` / `--jkl-color-text-interactive` | Fjernede tokens. Skal ikke brukes lenger. |
-| `variant="outlined\|high\|low"` (på `Card`) | `variant`-prop er fjernet. Bruk `outlined` (boolean) for ramme, fjern `high`/`low`. |
-| `bg-background-interactive` o.l. (Tailwind) | Fjernede Tailwind-klasser basert på `background-interactive`/`text-interactive`. |
-| `border-border-separator` o.l. (Tailwind) | Fjernede Tailwind-kantklasser. Bruk `border-border-default`, `-subdued` eller `-strong`. |
-| `<DateInput>` | Datoverdier bruker nå ISO-format (`yyyy-mm-dd`), ikke `dd.mm.yyyy`. |
-| `<DateInput>` `onChange` | Gir nå et standard React change-event. Les datoen fra `event.target.value`. |
-| `defaultShow` | Fjernet fra DateInput. Kalenderen åpnes via kalenderknappen. |
-| `extended`, `invalid`, `yearsToShow`, `days`, `months`, `monthLabel`, `yearLabel`, `action`, `showCalendarLabel`, `hideCalendarLabel`, `textInputProps` | Fjernet fra DateInput. Se migrasjonsguiden for erstatninger. |
+| Mønster                                                                                                                                                 | Varsel                                                                                            |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
+| `--jkl-color-text-on-alert-*`                                                                                                                           | Fjernede tokens. Bruk `--jkl-color-<rolle>-text-default`, f.eks. `--jkl-color-info-text-default`. |
+| `--jkl-color-background-interactive` / `--jkl-color-text-interactive`                                                                                   | Fjernede tokens. Skal ikke brukes lenger.                                                         |
+| `variant="outlined\|high\|low"` (på `Card`)                                                                                                             | `variant`-prop er fjernet. Bruk `outlined` (boolean) for ramme, fjern `high`/`low`.               |
+| `bg-background-interactive` o.l. (Tailwind)                                                                                                             | Fjernede Tailwind-klasser basert på `background-interactive`/`text-interactive`.                  |
+| `border-border-separator` o.l. (Tailwind)                                                                                                               | Fjernede Tailwind-kantklasser. Bruk `border-border-default`, `-subdued` eller `-strong`.          |
+| `<DateInput>`                                                                                                                                           | Datoverdier bruker nå ISO-format (`yyyy-mm-dd`), ikke `dd.mm.yyyy`.                               |
+| `<DateInput>` `onChange`                                                                                                                                | Gir nå et standard React change-event. Les datoen fra `event.target.value`.                       |
+| `defaultShow`                                                                                                                                           | Fjernet fra DateInput. Kalenderen åpnes via kalenderknappen.                                      |
+| `extended`, `invalid`, `yearsToShow`, `days`, `months`, `monthLabel`, `yearLabel`, `action`, `showCalendarLabel`, `hideCalendarLabel`, `textInputProps` | Fjernet fra DateInput. Se migrasjonsguiden for erstatninger.                                      |

package/codemods/__tests__/import-paths.test.mjs CHANGED Viewed

@@ -69,7 +69,9 @@ import "@fremtind/jokul/styles/components/select";
         result.text.includes("@fremtind/jokul/styles/components/beta/select"),
         true,
     );
-    assert.deepEqual(result.warnings, []);
+    assert.deepEqual(result.warnings, [
+        "Manuell vurdering: `BETA_Select`/`BETA_SelectProps` er fjernet. Migrer til den stabile `Select`.",
+    ]);
 });
 test("warns when beta style import is ambiguous (no beta identifier in file)", () => {
@@ -900,3 +902,107 @@ test("DateInput: håndterer piluttrykk i props ved omdøping", () => {
     );
     assert.equal(result.text.includes("<Other disableAfterDate={b} />"), true);
 });
+test("renames Select defaultPrompt to placeholder", () => {
+    const source = `<Select defaultPrompt="Velg land" items={items} />;`;
+    const result = transformImportPaths(source, "src/App.tsx");
+    assert.equal(result.text.includes('placeholder="Velg land"'), true);
+    assert.equal(result.text.includes("defaultPrompt"), false);
+});
+test("Select: rører ikke like prop-navn på andre komponenter", () => {
+    const source = `<Other defaultPrompt="Velg" invalid maxShownOptions={5} />;`;
+    const result = transformImportPaths(source, "src/App.tsx");
+    assert.equal(result.text.includes('defaultPrompt="Velg"'), true);
+    assert.equal(result.warnings.length, 0);
+});
+test("warns about NativeSelect usage", () => {
+    const source = `import { NativeSelect } from "@fremtind/jokul/select";
+<NativeSelect items={items} />;
+`;
+    const result = transformImportPaths(source, "src/App.tsx");
+    assert.equal(
+        result.warnings.some((w) => w.includes("NativeSelect")),
+        true,
+    );
+});
+test("warns about BETA_Select usage", () => {
+    const source = `import { BETA_Select } from "@fremtind/jokul/select";
+<BETA_Select items={items} />;
+`;
+    const result = transformImportPaths(source, "src/App.tsx");
+    assert.equal(
+        result.warnings.some((w) => w.includes("BETA_Select")),
+        true,
+    );
+});
+test("rewrites searchable inline function to filterFunction, swapping parameter order", () => {
+    const source =
+        "<Select searchable={(searchValue, item) => item.label.includes(searchValue)} items={items} />;";
+    const result = transformImportPaths(source, "src/App.tsx");
+    assert.equal(
+        result.text.includes(
+            "searchable filterFunction={(item, searchValue) => item.label.includes(searchValue)}",
+        ),
+        true,
+    );
+    assert.equal(
+        result.warnings.some((w) => w.includes("filterFunction")),
+        false,
+    );
+});
+test("rewrites searchable function expression to filterFunction", () => {
+    const source =
+        "<Select searchable={function (searchValue, item) { return item.label.includes(searchValue); }} items={items} />;";
+    const result = transformImportPaths(source, "src/App.tsx");
+    assert.equal(
+        result.text.includes(
+            "searchable filterFunction={function (item, searchValue) { return item.label.includes(searchValue); }}",
+        ),
+        true,
+    );
+});
+test("warns when searchable is a function reference that cannot be rewritten automatically", () => {
+    const source = "<Select searchable={myFilterFn} items={items} />;";
+    const result = transformImportPaths(source, "src/App.tsx");
+    assert.equal(
+        result.warnings.some((w) => w.includes("filterFunction")),
+        true,
+    );
+    assert.equal(result.text.includes("searchable={myFilterFn}"), true);
+});
+test("does not warn about searchable boolean on Select", () => {
+    const source = "<Select searchable items={items} />;";
+    const result = transformImportPaths(source, "src/App.tsx");
+    assert.equal(
+        result.warnings.some((w) => w.includes("filterFunction")),
+        false,
+    );
+});
+test("warns about removed Select props", () => {
+    const source =
+        "<Select invalid maxShownOptions={5} inline items={items} />;";
+    const result = transformImportPaths(source, "src/App.tsx");
+    for (const prop of ["invalid", "maxShownOptions", "inline"]) {
+        assert.equal(
+            result.warnings.some((w) => w.includes(`\`${prop}\``)),
+            true,
+        );
+    }
+});

package/codemods/import-paths.mjs CHANGED Viewed

@@ -16,6 +16,7 @@ import {
     reorderConfiguredFontImport,
 } from "./transforms/import-specifiers.mjs";
 import { applyRegisterWithMaskTransforms } from "./transforms/register-with-mask.mjs";
+import { applySelectTransforms } from "./transforms/select.mjs";
 import { collectManualMigrationWarnings } from "./transforms/warnings.mjs";
 const TEXT_EXTENSIONS = new Set([
@@ -75,7 +76,8 @@ export function transformImportPaths(text, filePath = "") {
     const tailwindColors = applyTailwindColorRenames(cssTokens.text);
     const expandablePanel = applyExpandablePanelTransforms(tailwindColors.text);
     const dateInput = applyDateInputTransforms(expandablePanel.text);
-    const masks = applyRegisterWithMaskTransforms(dateInput.text);
+    const select = applySelectTransforms(dateInput.text);
+    const masks = applyRegisterWithMaskTransforms(select.text);
     let next = masks.text;
     let reordered = false;
@@ -88,6 +90,7 @@ export function transformImportPaths(text, filePath = "") {
     const warnings = [
         ...beta.warnings,
         ...dateInput.warnings,
+        ...select.warnings,
         ...masks.warnings,
         ...collectManualMigrationWarnings(text),
     ];
@@ -113,6 +116,7 @@ export function transformImportPaths(text, filePath = "") {
             tailwindColors.count +
             expandablePanel.count +
             dateInput.count +
+            select.count +
             masks.count,
         warnings,
         reordered,