@fremtind/jokul 5.2.3 → 6.0.0-next.1

package/codemods/transforms/date-input.mjs

@@ -0,0 +1,225 @@
+// DatePicker er omdøpt til DateInput og Calendar er skrevet om til å bygge på det native
+// <input type="date">-elementet i Jøkul 6. Denne transformen håndterer de
+// mekaniske delene av migreringen og varsler om det som må vurderes manuelt.
+//
+// Automatiske endringer:
+//   - Import path: @fremtind/jokul/datepicker → @fremtind/jokul/date-input
+//   - Komponentnavn: DatePicker → DateInput
+//   - Props på <DateInput>:
+//     disableBeforeDate={...} → min={...}
+//     disableAfterDate={...}  → max={...}
+//
+// Manuell oppfølging (varsler):
+//   - value/defaultValue/min/max bruker nå ISO-format (yyyy-mm-dd), ikke dd.mm.yyyy
+//   - onChange gir nå et standard React ChangeEvent (les event.target.value)
+//   - defaultShow, initialShow, extended, invalid, yearsToShow, days, months,
+//     monthLabel, yearLabel, action, showCalendarLabel, hideCalendarLabel og
+//     textInputProps er fjernet
+//   - hjelpefunksjonen formatInput er fjernet – bruk toValidInputValue
+
+const IMPORT_PATH_RENAMES = [
+    [
+        /from\s+["']@fremtind\/jokul\/datepicker["']/g,
+        'from "@fremtind/jokul/date-input"',
+    ],
+    [
+        /from\s+["']@fremtind\/jokul\/date-inputs["']/g,
+        'from "@fremtind/jokul/date-input"',
+    ],
+    [
+        /from\s+["']@fremtind\/jokul\/date-picker["']/g,
+        'from "@fremtind/jokul/date-input"',
+    ],
+];
+
+// Component name replacements (imports + JSX tags)
+const COMPONENT_RENAMES = [
+    // Import specifiers: `import { DatePicker } ...` -> `import { DateInput } ...`
+    [/\bDatePicker\b(?=\s*(?:,|}|as\b))/g, "DateInput"],
+    // JSX opening/closing tags
+    [/<\s*DatePicker\b/g, "<DateInput"],
+    [/<\s*\/\s*DatePicker\b/g, "</DateInput"],
+];
+
+// Prop name replacements - Kun JSX-attributter (etterfulgt av `=`) matches
+const PROP_RENAMES = [
+    [/\bdisableBeforeDate(?=\s*=)/g, "min"],
+    [/\bdisableAfterDate(?=\s*=)/g, "max"],
+];
+
+// Fjernede props uten direkte erstatning. Codemoden kan ikke gjette intensjonen,
+// så vi varsler i stedet for å endre koden. Boolske props brukes ofte uten `=`,
+// derfor to lister.
+const REMOVED_BOOLEAN_PROPS = [
+    ["defaultShow", "Kalenderen åpnes via kalenderknappen (popover)."],
+    ["initialShow", "Kalenderen åpnes via kalenderknappen (popover)."],
+    ["extended", "Kalenderen har alltid måneds- og årsvelger."],
+    [
+        "invalid",
+        "Bruk `errorLabel`, som setter både `aria-invalid` og feilstilen.",
+    ],
+];
+
+const REMOVED_VALUE_PROPS = [
+    [
+        "yearsToShow",
+        "Årsvelgeren utledes fra `min`/`max` (±5 år som standard).",
+    ],
+    ["months", "Månedsnavn hentes fra `Intl` med `nb-NO`."],
+    ["days", "Ukedagsnavn hentes fra `Intl` med `nb-NO`."],
+    ["monthLabel", "Månedsvelgeren har fast, skjult label «Måned»."],
+    ["yearLabel", "Årsvelgeren har fast, skjult label «År»."],
+    [
+        "showCalendarLabel",
+        "Kalenderknappen har fast aria-label «Åpne kalender».",
+    ],
+    ["hideCalendarLabel", "Kalenderen lukkes med Esc eller klikk utenfor."],
+    ["action", "Egne handlinger må plasseres utenfor feltet."],
+    [
+        "textInputProps",
+        'Send attributtene direkte på <DateInput>; de videresendes til <input type="date">.',
+    ],
+];
+
+const USES_DATE_COMPONENT = /<\s*(?:DateInput|DatePicker)\b/;
+
+// Kun JSX-attributter: hopp over `aria-invalid`, `obj.invalid`, `isInvalid`,
+// variabeldeklarasjoner (`const months = ...`) og sammenligninger (`days === 3`).
+const NOT_PART_OF_IDENTIFIER = "(?<![-\\w.$])";
+const NOT_A_DECLARATION = "(?<!\\b(?:const|let|var)\\s+)";
+
+const DATE_COMPONENT_TAG_START = /<\s*(?:DateInput|DatePicker)\b/g;
+
+// Leser en JSX-tag fra `<DateInput` til matchende `>`. Hopper over `>` inne i
+// uttrykk (`onChange={(e) => ...}`), strenger og template-literaler.
+function replaceInDateComponentTags(text, replaceTag) {
+    let output = "";
+    let lastIndex = 0;
+    DATE_COMPONENT_TAG_START.lastIndex = 0;
+
+    for (
+        let match = DATE_COMPONENT_TAG_START.exec(text);
+        match !== null;
+        match = DATE_COMPONENT_TAG_START.exec(text)
+    ) {
+        const start = match.index;
+        let i = DATE_COMPONENT_TAG_START.lastIndex;
+        let depth = 0;
+        let stringChar = null;
+        let end = -1;
+
+        while (i < text.length) {
+            const char = text[i];
+
+            if (stringChar) {
+                if (char === "\\") {
+                    i += 2;
+                    continue;
+                }
+                if (char === stringChar) stringChar = null;
+                i += 1;
+                continue;
+            }
+            if (char === '"' || char === "'" || char === "`") {
+                stringChar = char;
+            } else if (char === "{") {
+                depth += 1;
+            } else if (char === "}") {
+                depth -= 1;
+            } else if (char === ">" && depth === 0) {
+                end = i + 1;
+                break;
+            }
+            i += 1;
+        }
+
+        if (end === -1) break;
+
+        output +=
+            text.slice(lastIndex, start) + replaceTag(text.slice(start, end));
+        lastIndex = end;
+        DATE_COMPONENT_TAG_START.lastIndex = end;
+    }
+
+    return output + text.slice(lastIndex);
+}
+
+export function applyDateInputTransforms(text) {
+    let next = text;
+    let count = 0;
+
+    // Replace import paths
+    for (const [pattern, replacement] of IMPORT_PATH_RENAMES) {
+        next = next.replace(pattern, () => {
+            count += 1;
+            return replacement;
+        });
+    }
+
+    // Replace component names in JSX
+    for (const [pattern, replacement] of COMPONENT_RENAMES) {
+        const matches = next.match(pattern);
+        if (matches) {
+            next = next.replace(pattern, replacement);
+            count += matches.length;
+        }
+    }
+
+    // Replace prop names
+    for (const [pattern, replacement] of PROP_RENAMES) {
+        next = replaceInDateComponentTags(next, (tag) => {
+            let replacedTag = tag;
+            for (const [pattern, replacement] of PROP_RENAMES) {
+                replacedTag = replacedTag.replace(pattern, () => {
+                    count += 1;
+                    return replacement;
+                });
+            }
+            return replacedTag;
+        });
+    }
+
+    const warnings = [];
+
+    if (USES_DATE_COMPONENT.test(next)) {
+        warnings.push(
+            "Manuell vurdering: DateInput `onChange`, `onFocus` og `onBlur` er nå vanlige React-handlere som kun får `event`. Les datoen fra `event.target.value` i stedet for `(event, date, { error, value })`.",
+        );
+        warnings.push(
+            "Manuell vurdering: DateInput bruker nå ISO-datoformat (yyyy-mm-dd) for `value`, `defaultValue`, `min` og `max`. Konverter eventuelle `dd.mm.yyyy`-strenger.",
+        );
+        warnings.push(
+            "Manuell vurdering: DateInput `onChange` gir nå et standard React change-event. Les datoen fra `event.target.value` i stedet for `(event, date, { error, value })`.",
+        );
+
+        for (const [prop, hint] of REMOVED_BOOLEAN_PROPS) {
+            const pattern = new RegExp(
+                `${NOT_PART_OF_IDENTIFIER}${prop}\\b(?=[\\s/>=}])`,
+            );
+            if (pattern.test(next)) {
+                warnings.push(
+                    `Manuell vurdering: \`${prop}\` er fjernet fra DateInput. ${hint}`,
+                );
+            }
+        }
+
+        for (const [prop, hint] of REMOVED_VALUE_PROPS) {
+            const pattern = new RegExp(
+                `${NOT_PART_OF_IDENTIFIER}${NOT_A_DECLARATION}${prop}\\s*=(?!=)`,
+            );
+            if (pattern.test(next)) {
+                warnings.push(
+                    `Manuell vurdering: \`${prop}\` er fjernet fra DateInput. ${hint}`,
+                );
+            }
+        }
+    }
+
+    if (/\bformatInput\b/.test(next)) {
+        warnings.push(
+            "Manuell vurdering: hjelpefunksjonen `formatInput` er fjernet. Bruk `toValidInputValue` for å normalisere datostrenger til ISO-format.",
+        );
+    }
+
+    return { text: next, count, warnings };
+}

package/codemods/transforms/import-specifiers.mjs

@@ -1,5 +1,29 @@
 import { escapeRegExp, replaceSpecifier } from "../utils.mjs";
 
+// DatePicker ble omdøpt til DateInput i Jøkul 6. Den publiserte stilmappa følger
+// komponentmappa, så både mappe- og filnavn må skrives om.
+const DATE_INPUT_LEGACY_STYLE_DIRS = [
+    "datepicker",
+    "date-picker",
+    "date-inputs",
+];
+
+const DATE_INPUT_STYLE_REPLACEMENTS = DATE_INPUT_LEGACY_STYLE_DIRS.flatMap(
+    (legacy) => {
+        const from = `@fremtind/jokul/styles/components/${legacy}`;
+        const to = "@fremtind/jokul/styles/components/date-input";
+
+        return [
+            [`${from}/${legacy}.min.css`, `${to}/date-input.min.css`],
+            [`${from}/${legacy}.css`, `${to}/date-input.css`],
+            [`${from}/${legacy}.scss`, `${to}/date-input.scss`],
+            [`${from}/${legacy}`, `${to}/date-input`],
+            [`${from}/_index.scss`, `${to}/_index.scss`],
+            [from, to],
+        ];
+    },
+);
+
 const DIRECT_REPLACEMENTS = [
     [
         "@fremtind/jokul/styles/core/core.min.css",
@@ -45,6 +69,8 @@ const DIRECT_REPLACEMENTS = [
     ["@fremtind/jokul/styles/core", "@fremtind/jokul/styles/base.scss"],
     ["@fremtind/jokul/styles", "@fremtind/jokul/styles/components.scss"],
     ["@fremtind/jokul/core", "@fremtind/jokul/utilities"],
+    ["@fremtind/jokul/datepicker", "@fremtind/jokul/date-input"],
+    ...DATE_INPUT_STYLE_REPLACEMENTS,
 ].sort(([a], [b]) => b.length - a.length);
 
 const BETA_STYLE_MIGRATIONS = [

package/codemods/transforms/register-with-mask.mjs

@@ -0,0 +1,267 @@
+// De frittstående, utgåtte maskefunksjonene er fjernet i Jøkul 6:
+//   registerWithFodselsnummerMask
+//   registerWithKontonummerMask
+//   registerWithKortnummerMask
+//   registerWithTelefonnummerMask
+//
+// De erstattes av metodene på `registerWithMasks(form)`. Signaturen endres fra
+//   registerWithXMask(form, name, options)
+// til
+//   registerWithMasks(form).registerWithXMask(name, options)
+//
+// Transformen skriver om kallsteder, rydder importene og varsler når et kall
+// ikke kan migreres automatisk (mangler form-argument) eller er aliased.
+
+const REMOVED_MASKS = [
+    "registerWithFodselsnummerMask",
+    "registerWithKontonummerMask",
+    "registerWithKortnummerMask",
+    "registerWithTelefonnummerMask",
+];
+
+const CALL_PATTERN = new RegExp(`(${REMOVED_MASKS.join("|")})\\s*\\(`, "g");
+
+const IMPORT_PATTERN =
+    /(import\s+(?:type\s+)?\{)([^}]*)(\}\s*from\s*)(["'])(@fremtind\/jokul\/(?:utilities|core))\4(\s*;?)/g;
+
+function isMemberOrIdentifier(text, nameIndex) {
+    const prev = text[nameIndex - 1];
+    if (prev === undefined) {
+        return false;
+    }
+    if (/[\w$]/.test(prev)) {
+        return true;
+    }
+    if (prev === ".") {
+        const isSpread =
+            text[nameIndex - 2] === "." && text[nameIndex - 3] === ".";
+        return !isSpread;
+    }
+    return false;
+}
+
+// Leser argumentlisten fra og med `(` på openParenIndex, og deler den i
+// argumenter på toppnivå. Håndterer nøstede parenteser/klammer, strenger,
+// template-literaler og kommentarer.
+function readArguments(text, openParenIndex) {
+    const args = [];
+    let current = "";
+    let i = openParenIndex + 1;
+    const stack = ["("];
+    let stringChar = null;
+    let inLineComment = false;
+    let inBlockComment = false;
+
+    while (i < text.length) {
+        const char = text[i];
+        const next = text[i + 1];
+
+        if (inLineComment) {
+            current += char;
+            if (char === "\n") {
+                inLineComment = false;
+            }
+            i += 1;
+            continue;
+        }
+
+        if (inBlockComment) {
+            current += char;
+            if (char === "*" && next === "/") {
+                current += next;
+                i += 2;
+                inBlockComment = false;
+                continue;
+            }
+            i += 1;
+            continue;
+        }
+
+        if (stringChar) {
+            current += char;
+            if (char === "\\") {
+                if (next !== undefined) {
+                    current += next;
+                    i += 2;
+                    continue;
+                }
+            } else if (char === stringChar) {
+                stringChar = null;
+            }
+            i += 1;
+            continue;
+        }
+
+        if (char === "/" && next === "/") {
+            inLineComment = true;
+            current += char;
+            i += 1;
+            continue;
+        }
+
+        if (char === "/" && next === "*") {
+            inBlockComment = true;
+            current += char;
+            i += 1;
+            continue;
+        }
+
+        if (char === '"' || char === "'" || char === "`") {
+            stringChar = char;
+            current += char;
+            i += 1;
+            continue;
+        }
+
+        if (char === "(" || char === "[" || char === "{") {
+            stack.push(char);
+            current += char;
+            i += 1;
+            continue;
+        }
+
+        if (char === ")" || char === "]" || char === "}") {
+            stack.pop();
+            if (stack.length === 0) {
+                if (current.trim() !== "" || args.length > 0) {
+                    args.push(current);
+                }
+                return { args, endIndex: i + 1 };
+            }
+            current += char;
+            i += 1;
+            continue;
+        }
+
+        if (char === "," && stack.length === 1) {
+            args.push(current);
+            current = "";
+            i += 1;
+            continue;
+        }
+
+        current += char;
+        i += 1;
+    }
+
+    return null;
+}
+
+function transformCallSites(text) {
+    let count = 0;
+    const warnings = [];
+    let output = "";
+    let lastIndex = 0;
+
+    CALL_PATTERN.lastIndex = 0;
+    for (
+        let match = CALL_PATTERN.exec(text);
+        match !== null;
+        match = CALL_PATTERN.exec(text)
+    ) {
+        const name = match[1];
+        const nameIndex = match.index;
+
+        if (isMemberOrIdentifier(text, nameIndex)) {
+            continue;
+        }
+
+        const openParenIndex = CALL_PATTERN.lastIndex - 1;
+        const parsed = readArguments(text, openParenIndex);
+        if (!parsed) {
+            break;
+        }
+
+        const { args, endIndex } = parsed;
+        const form = args.length > 0 ? args[0].trim() : "";
+
+        if (form === "") {
+            warnings.push(
+                `Kunne ikke migrere \`${name}\` automatisk: fant ikke form-argumentet. Migrer manuelt til \`registerWithMasks(form).${name}(...)\`.`,
+            );
+            CALL_PATTERN.lastIndex = endIndex;
+            continue;
+        }
+
+        const restArgs = args
+            .slice(1)
+            .map((arg) => arg.trim())
+            .filter((arg) => arg !== "");
+
+        const replacement = `registerWithMasks(${form}).${name}(${restArgs.join(", ")})`;
+
+        output += text.slice(lastIndex, nameIndex) + replacement;
+        lastIndex = endIndex;
+        count += 1;
+        CALL_PATTERN.lastIndex = endIndex;
+    }
+
+    output += text.slice(lastIndex);
+
+    return { text: output, count, warnings };
+}
+
+function transformImports(text) {
+    let count = 0;
+    const warnings = [];
+
+    const next = text.replace(
+        IMPORT_PATTERN,
+        (full, open, body, mid, quote, specifierPath, tail) => {
+            const specifiers = body
+                .split(",")
+                .map((entry) => entry.trim())
+                .filter((entry) => entry !== "");
+
+            let removedAny = false;
+            let hasRegisterWithMasks = false;
+            const kept = [];
+
+            for (const specifier of specifiers) {
+                const baseName = specifier.split(/\s+as\s+/)[0].trim();
+
+                if (baseName === "registerWithMasks") {
+                    hasRegisterWithMasks = true;
+                    kept.push(specifier);
+                    continue;
+                }
+
+                if (REMOVED_MASKS.includes(baseName)) {
+                    removedAny = true;
+                    count += 1;
+                    if (/\s+as\s+/.test(specifier)) {
+                        warnings.push(
+                            `\`${baseName}\` importeres med alias (\`${specifier}\`). Importen er fjernet, men kallstedene bruker aliaset og må migreres manuelt til \`registerWithMasks(form).${baseName}(...)\`.`,
+                        );
+                    }
+                    continue;
+                }
+
+                kept.push(specifier);
+            }
+
+            if (!removedAny) {
+                return full;
+            }
+
+            if (!hasRegisterWithMasks) {
+                kept.unshift("registerWithMasks");
+            }
+
+            return `${open} ${kept.join(", ")} ${mid}${quote}${specifierPath}${quote}${tail}`;
+        },
+    );
+
+    return { text: next, count, warnings };
+}
+
+export function applyRegisterWithMaskTransforms(text) {
+    const calls = transformCallSites(text);
+    const imports = transformImports(calls.text);
+
+    return {
+        text: imports.text,
+        count: calls.count + imports.count,
+        warnings: [...calls.warnings, ...imports.warnings],
+    };
+}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@fremtind/jokul",
-  "version": "5.2.3",
+  "version": "6.0.0-next.1",
   "type": "module",
   "engines": {
-    "node": "^20.19.0 || >=22.12.0"
+    "node": "^22.22.2 || ^24.15.0 || ^26.0.0"
   },
   "publishConfig": {
     "access": "public"
@@ -75,8 +75,8 @@
     }
   },
   "dependencies": {
-    "downshift": "^7.6.2",
-    "match-sorter": "^6.3.4"
+    "downshift": "^9.4.0",
+    "match-sorter": "^8.3.0"
   },
   "optionalDependencies": {
     "@floating-ui/react": "0.24.1 - 0.27",
@@ -86,36 +86,37 @@
     "tailwindcss": "^3.4.17"
   },
   "devDependencies": {
-    "@babel/cli": "^7.29.7",
-    "@babel/preset-react": "^7.29.7",
+    "@babel/core": "^8.0.1",
+    "@babel/cli": "^8.0.4",
+    "@babel/preset-react": "^8.0.1",
     "@figma/code-connect": "^1.5.2",
     "@rollup/plugin-terser": "^1.0.0",
     "@types/react": "18.3.1",
     "@vitejs/plugin-react": "^4.7.0",
-    "@vitejs/plugin-react-swc": "^3.11.0",
+    "@vitejs/plugin-react-swc": "^4.3.3",
     "autoprefixer": "^10.5.4",
     "change-case": "^5.4.4",
-    "cssnano": "^7.1.9",
-    "cssnano-preset-lite": "^4.0.6",
+    "cssnano": "^8.0.2",
+    "cssnano-preset-lite": "^5.0.1",
     "dayjs": "^1.11.21",
     "glob": "^13.0.6",
     "ink": "^5.1.0",
     "ink-select-input": "^6.0.0",
-    "jsdom": "^26.1.0",
-    "nanoid": "^5.1.16",
+    "jsdom": "^30.0.1",
+    "nanoid": "^6.0.1",
     "postcss": "^8.5.10",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-hook-form": "^7.84.0",
     "react-is": "18.3.1",
     "rollup-plugin-node-externals": "^8.0.1",
-    "rollup-plugin-visualizer": "^6.0.11",
+    "rollup-plugin-visualizer": "^7.0.1",
     "sass-embedded": "^1.100.0",
     "style-dictionary": "^5.5.0",
     "tailwindcss": "^3.4.17",
     "tsx": "^4.23.5",
     "vite": "^7.3.6",
-    "vite-plugin-dts": "^5.0.0",
+    "vite-plugin-dts": "^5.0.3",
     "vitest": "^4.1.10",
     "vitest-axe": "^0.1.0"
   },

package/styles/base.css

@@ -278,7 +278,7 @@
     font-family: "Jokul Icons";
     font-weight: 300 400;
     font-style: normal;
-    src: url("/fonts/Fremtind-Material-Symbols.woff2") format("woff2");
+    src: url("/fonts/Jokul-Icons.woff2") format("woff2");
   }
   @font-face {
     font-family: "Adjusted Arial Fallback";
@@ -1405,4 +1405,11 @@
   .jkl-spacing-2xl--right {
     margin-right: var(--jkl-spacing-2xl);
   }
+}
+@layer jokul.utility {
+  :is(ul, ol):is(.jkl-list-reset) {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
 }