@navikt/ds-react 8.5.0 → 8.5.2

package/src/data/token-filter/helpers/query-builder.test.ts

@@ -0,0 +1,126 @@
+import { describe, expect, test } from "vitest";
+import { buildQueryString } from "./query-builder";
+
+describe("buildQueryString", () => {
+  describe("basic query building", () => {
+    test("builds complete query with all parts", () => {
+      expect(buildQueryString("Status", "=", "active")).toBe("Status = active");
+    });
+
+    test("builds query with property and operator only", () => {
+      expect(buildQueryString("Status", "=", "")).toBe("Status =");
+    });
+
+    test("builds query with property only", () => {
+      expect(buildQueryString("Status", "", "")).toBe("Status");
+    });
+
+    test("returns empty string when all parts are empty", () => {
+      expect(buildQueryString("", "", "")).toBe("");
+    });
+  });
+
+  describe("operator variations", () => {
+    test("builds query with contains operator", () => {
+      expect(buildQueryString("Name", ":", "test")).toBe("Name : test");
+    });
+
+    test("builds query with not equal operator", () => {
+      expect(buildQueryString("Status", "!=", "inactive")).toBe(
+        "Status != inactive",
+      );
+    });
+
+    test("builds query with starts with operator", () => {
+      expect(buildQueryString("ID", "^", "prefix")).toBe("ID ^ prefix");
+    });
+
+    test("builds query with greater than or equal operator", () => {
+      expect(buildQueryString("Count", ">=", "10")).toBe("Count >= 10");
+    });
+
+    test("builds query with all comparison operators", () => {
+      expect(buildQueryString("Value", ">", "5")).toBe("Value > 5");
+      expect(buildQueryString("Value", "<", "5")).toBe("Value < 5");
+      expect(buildQueryString("Value", ">=", "5")).toBe("Value >= 5");
+      expect(buildQueryString("Value", "<=", "5")).toBe("Value <= 5");
+    });
+  });
+
+  describe("whitespace handling", () => {
+    test("joins parts with single space", () => {
+      expect(buildQueryString("Property", "=", "value")).toBe(
+        "Property = value",
+      );
+    });
+
+    test("does not add extra spaces for missing parts", () => {
+      expect(buildQueryString("Property", "", "value")).toBe("Property value");
+    });
+
+    test("handles value with spaces", () => {
+      expect(buildQueryString("Region", "=", "US East")).toBe(
+        "Region = US East",
+      );
+    });
+
+    test("handles property with spaces", () => {
+      expect(buildQueryString("Instance ID", "=", "12345")).toBe(
+        "Instance ID = 12345",
+      );
+    });
+  });
+
+  describe("edge cases", () => {
+    test("handles numeric values", () => {
+      expect(buildQueryString("Count", "=", "123")).toBe("Count = 123");
+    });
+
+    test("handles special characters in value", () => {
+      expect(buildQueryString("Path", "=", "/var/log")).toBe("Path = /var/log");
+    });
+
+    test("handles hyphenated values", () => {
+      expect(buildQueryString("Region", "=", "us-east-1")).toBe(
+        "Region = us-east-1",
+      );
+    });
+
+    test("omits operator when undefined", () => {
+      expect(buildQueryString("Status", undefined as any, "active")).toBe(
+        "Status active",
+      );
+    });
+
+    test("omits value when null", () => {
+      expect(buildQueryString("Status", "=", null as any)).toBe("Status =");
+    });
+
+    test("filters out falsy values correctly", () => {
+      // 0 is falsy but should be filtered by Boolean()
+      expect(buildQueryString("Count", "=", "0")).toBe("Count = 0");
+      // Empty string is falsy and should be filtered
+      expect(buildQueryString("Test", "", "")).toBe("Test");
+    });
+  });
+
+  describe("real-world examples", () => {
+    test("builds property-only queries for operator selection", () => {
+      expect(buildQueryString("Status", "!", "")).toBe("Status !");
+    });
+
+    test("builds complete filter queries", () => {
+      expect(buildQueryString("Availability Zone", ":", "east")).toBe(
+        "Availability Zone : east",
+      );
+    });
+
+    test("builds negation queries", () => {
+      expect(buildQueryString("Status", "!=", "terminated")).toBe(
+        "Status != terminated",
+      );
+      expect(buildQueryString("Name", "!:", "test")).toBe("Name !: test");
+      expect(buildQueryString("ID", "!^", "prod")).toBe("ID !^ prod");
+    });
+  });
+});

package/src/data/token-filter/helpers/query-builder.ts

@@ -0,0 +1,41 @@
+import type { QueryFilterOperator } from "../TokenFilter.types";
+
+/**
+ * Human-readable labels for query filter operators.
+ * Used for displaying operator descriptions in autocomplete suggestions.
+ * TODO: Support i18n
+ */
+const OPERATOR_LABELS: Record<QueryFilterOperator, string> = {
+  ":": "contains",
+  "!:": "does not contain",
+  "=": "is",
+  "!=": "is not",
+  "^": "starts with",
+  "!^": "does not start with",
+  ">=": "is greater than or equal to",
+  "<=": "is less than or equal to",
+  ">": "is greater than",
+  "<": "is less than",
+};
+
+/**
+ * Builds a query string from property label, operator, and value.
+ * Only includes non-empty parts, joined by spaces.
+ * @returns Space-joined query string
+ *
+ * @example
+ * buildQueryString("Status", "=", "active") // "Status = active"
+ * buildQueryString("Status", "=", "") // "Status ="
+ * buildQueryString("Status", "", "") // "Status"
+ * buildQueryString("", "", "") // ""
+ */
+function buildQueryString(
+  propertyLabel: string,
+  operator: string,
+  value: string,
+): string {
+  const parts = [propertyLabel, operator, value].filter(Boolean);
+  return parts.join(" ");
+}
+
+export { buildQueryString, OPERATOR_LABELS };

package/src/data/token-filter/helpers/text-matching.test.ts

@@ -0,0 +1,125 @@
+import { describe, expect, test } from "vitest";
+import { matchesFilterText } from "./text-matching";
+
+describe("matchesFilterText", () => {
+  describe("basic matching", () => {
+    test("returns true for empty filter text", () => {
+      expect(matchesFilterText(["hello", "world"], "")).toBe(true);
+    });
+
+    test("returns true for whitespace-only filter text", () => {
+      expect(matchesFilterText(["hello", "world"], "   ")).toBe(true);
+    });
+
+    test("returns true when single word matches", () => {
+      expect(matchesFilterText(["hello", "world"], "hello")).toBe(true);
+    });
+
+    test("returns true when match is case-insensitive", () => {
+      expect(matchesFilterText(["Hello World"], "hello")).toBe(true);
+      expect(matchesFilterText(["hello world"], "HELLO")).toBe(true);
+    });
+
+    test("returns true when partial match exists", () => {
+      expect(matchesFilterText(["testing"], "test")).toBe(true);
+    });
+
+    test("returns false when no match exists", () => {
+      expect(matchesFilterText(["hello", "world"], "foo")).toBe(false);
+    });
+  });
+
+  describe("multi-word matching", () => {
+    test("returns true when all words match across fields", () => {
+      expect(matchesFilterText(["hello", "world"], "hello world")).toBe(true);
+    });
+
+    test("returns true when all words match in single field", () => {
+      expect(matchesFilterText(["hello world"], "hello world")).toBe(true);
+    });
+
+    test("returns true when words match in any order", () => {
+      expect(matchesFilterText(["world hello"], "hello world")).toBe(true);
+    });
+
+    test("returns false when not all words match", () => {
+      expect(matchesFilterText(["hello"], "hello world")).toBe(false);
+    });
+
+    test("handles multiple spaces in filter text", () => {
+      expect(matchesFilterText(["hello world"], "hello  world")).toBe(true);
+    });
+  });
+
+  describe("null/undefined handling", () => {
+    test("returns false for null searchFieldValues", () => {
+      expect(matchesFilterText(null as any, "test")).toBe(false);
+    });
+
+    test("returns false for undefined searchFieldValues", () => {
+      expect(matchesFilterText(undefined as any, "test")).toBe(false);
+    });
+
+    test("returns true for null filterText", () => {
+      expect(matchesFilterText(["test"], null as any)).toBe(true);
+    });
+
+    test("returns true for undefined filterText", () => {
+      expect(matchesFilterText(["test"], undefined as any)).toBe(true);
+    });
+
+    test("filters out null values in searchFieldValues", () => {
+      expect(matchesFilterText(["hello", null as any, "world"], "world")).toBe(
+        true,
+      );
+    });
+
+    test("filters out undefined values in searchFieldValues", () => {
+      expect(
+        matchesFilterText(["hello", undefined as any, "world"], "world"),
+      ).toBe(true);
+    });
+
+    test("returns false when all searchFieldValues are null/undefined", () => {
+      expect(matchesFilterText([null as any, undefined as any], "test")).toBe(
+        false,
+      );
+    });
+  });
+
+  describe("edge cases", () => {
+    test("returns true for empty searchFieldValues with empty filter", () => {
+      expect(matchesFilterText([], "")).toBe(true);
+    });
+
+    test("returns false for empty searchFieldValues with non-empty filter", () => {
+      expect(matchesFilterText([], "test")).toBe(false);
+    });
+
+    test("handles special characters in filter text", () => {
+      expect(matchesFilterText(["test-value"], "test-value")).toBe(true);
+      expect(matchesFilterText(["test.value"], "test.value")).toBe(true);
+    });
+
+    test("handles numbers in filter text", () => {
+      expect(matchesFilterText(["version 123"], "123")).toBe(true);
+    });
+
+    test("handles unicode characters", () => {
+      expect(matchesFilterText(["café"], "café")).toBe(true);
+      expect(matchesFilterText(["🎉 party"], "party")).toBe(true);
+    });
+
+    test("trims whitespace from filter text", () => {
+      expect(matchesFilterText(["hello"], "  hello  ")).toBe(true);
+    });
+
+    test("handles array with single empty string", () => {
+      expect(matchesFilterText([""], "test")).toBe(false);
+    });
+
+    test("matches when filter is substring of field", () => {
+      expect(matchesFilterText(["prefix-test-suffix"], "test")).toBe(true);
+    });
+  });
+});

package/src/data/token-filter/helpers/text-matching.ts

@@ -0,0 +1,58 @@
+/**
+ * Checks if search field values match the given filter text.
+ *
+ * @param searchFieldValues - Array of strings to search within (e.g., labels, tags, descriptions)
+ * @param filterText - The search text to match against
+ * @returns true if all space-separated parts of filterText are found in at least one searchFieldValue
+ *
+ * @example
+ * matchesFilterText(['Hello World', 'foo'], 'hello') // true
+ * matchesFilterText(['Hello World', 'foo'], 'hello bar') // false
+ * matchesFilterText(['Hello World', 'bar'], 'hello bar') // true
+ * matchesFilterText([], 'test') // false
+ * matchesFilterText(['test'], '') // true (empty filter matches all)
+ */
+function matchesFilterText(
+  searchFieldValues: string[],
+  filterText: string,
+): boolean {
+  /* Guard against null/undefined inputs */
+  if (!searchFieldValues || !Array.isArray(searchFieldValues)) {
+    return false;
+  }
+
+  if (filterText === null || filterText === undefined) {
+    return true;
+  }
+
+  const normalizedFilter = filterText.trim().toLowerCase();
+
+  /* Empty filter matches everything */
+  if (!normalizedFilter) {
+    return true;
+  }
+
+  /* Split filter into parts ("nord land" -> ["nord", "land"]) */
+  const parts = normalizedFilter.split(/\s+/).filter(Boolean);
+
+  if (parts.length === 0) {
+    return true;
+  }
+
+  /* Normalize and filter out nullish values */
+  const normalizedFields = searchFieldValues
+    .map((value) => value?.toLowerCase())
+    .filter(Boolean);
+
+  /* If no valid fields to search, no match */
+  if (normalizedFields.length === 0) {
+    return false;
+  }
+
+  /* Every part of the filter must be found in at least one field */
+  return parts.every((part) =>
+    normalizedFields.some((field) => field.includes(part)),
+  );
+}
+
+export { matchesFilterText };

package/src/form/combobox/Input/InputController.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { forwardRef } from "react";
 import { Floating } from "../../../utils/components/floating/Floating";

package/src/form/file-upload/dropzone/FileUploadDropzone.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import React, { forwardRef } from "react";
 import { CircleSlashIcon, CloudUpIcon } from "@navikt/aksel-icons";

package/src/tooltip/Tooltip.tsx

@@ -11,7 +11,7 @@ import {
   useHover,
   useInteractions,
 } from "@floating-ui/react";
-import React, { HTMLAttributes, forwardRef, useRef } from "react";
+import React, { Fragment, HTMLAttributes, forwardRef, useRef } from "react";
 import { useModalContext } from "../modal/Modal.context";
 import { Portal } from "../portal";
 import { HStack } from "../primitives/stack";
@@ -296,7 +296,7 @@ function TooltipShortcuts({ shortcuts }: { shortcuts: TooltipProps["keys"] }) {
     return (
       <span className="aksel-tooltip__keys" aria-hidden>
         {shortcuts.map((key, index) => (
-          <>
+          <Fragment key={key.join("+")}>
             <HStack gap="space-4">
               {key.map((k, i) => (
                 <Detail as="kbd" key={i} className="aksel-tooltip__key">
@@ -307,7 +307,7 @@ function TooltipShortcuts({ shortcuts }: { shortcuts: TooltipProps["keys"] }) {
             {index < shortcuts.length - 1 && (
               <span> {translate("shortcutSeparator")} </span>
             )}
-          </>
+          </Fragment>
         ))}
       </span>
     );

package/src/utils/i18n/locales/nb.ts

@@ -7,218 +7,139 @@ interface TranslationMap {
 export default {
   global: {
     dateLocale: nb,
-    /** @default "Vis mer" */
     showMore: "Vis mer",
-    /** @default "Vis mindre" */
     showLess: "Vis mindre",
-    /** @default "Skrivebeskyttet" */
     readOnly: "Skrivebeskyttet",
-    /** @default "Lukk" */
     close: "Lukk",
-    /** @default "Feil" */
     error: "Feil",
-    /** @default "Informasjon" */
     info: "Informasjon",
-    /** @default "Suksess" */
     success: "Suksess",
-    /** @default "Advarsel" */
     warning: "Advarsel",
-    /** @default "Kunngjøring" */
     announcement: "Kunngjøring",
   },
   Chips: {
     Removable: {
-      /** Will be appended to the accessible name for the button.
-       * @default "slett" */
+      /** Will be appended to the accessible name for the button. */
       labelSuffix: "slett",
     },
   },
   Combobox: {
-    /** The input value will be appended to the end of this text, e.g. `Legg til "input value"`.
-     * @default "Legg til" */
+    /** The input value will be appended to the end of this text, e.g. `Legg til "input value"`. */
     addOption: "Legg til",
-    /** @default "Ingen søketreff" */
     noMatches: "Ingen søketreff",
-    /** Loader title
-     * @default "Søker…" */
+    /** Loader title */
     loading: "Søker…",
-    /** @default "{selected} av maks {limit} er valgt." */
     maxSelected: "{selected} av maks {limit} er valgt.",
   },
   CopyButton: {
-    /** @default "Kopier" */
     title: "Kopier",
-    /** @default "Kopiert!" */
     activeText: "Kopiert!",
   },
   DatePicker: {
-    /** @default "Velg dato" */
     chooseDate: "Velg dato",
-    /** @default "Velg datoer" */
     chooseDates: "Velg datoer",
-    /** @default "Velg start- og sluttdato" */
     chooseDateRange: "Velg start- og sluttdato",
-    /** @default "Velg måned" */
     chooseMonth: "Velg måned",
-    /** @default "Uke" */
     week: "Uke",
-    /** @default "Uke {week}" */
     weekNumber: "Uke {week}",
-    /** @default "Velg uke {week}" */
     selectWeekNumber: "Velg uke {week}",
-    /** @default "Måned" */
     month: "Måned",
-    /** @default "Gå til neste måned" */
     goToNextMonth: "Gå til neste måned",
-    /** @default "Gå til forrige måned" */
     goToPreviousMonth: "Gå til forrige måned",
-    /** @default "År" */
     year: "År",
-    /** @default "Gå til neste år" */
     goToNextYear: "Gå til neste år",
-    /** @default "Gå til forrige år" */
     goToPreviousYear: "Gå til forrige år",
-    /** @default "Åpne datovelger" */
     openDatePicker: "Åpne datovelger",
-    /** @default "Åpne månedsvelger" */
     openMonthPicker: "Åpne månedsvelger",
-    /** @default "Lukk datovelger" */
     closeDatePicker: "Lukk datovelger",
-    /** @default "Lukk månedsvelger" */
     closeMonthPicker: "Lukk månedsvelger",
   },
   ErrorSummary: {
-    /** @default "Du må rette disse feilene før du kan fortsette:" */
     heading: "Du må rette disse feilene før du kan fortsette:",
   },
   FileUpload: {
     dropzone: {
-      /** @default "Velg fil" */
       button: "Velg fil",
-      /** @default "Velg filer" */
       buttonMultiple: "Velg filer",
-      /** @default "Dra og slipp filen her" */
       dragAndDrop: "Dra og slipp filen her",
-      /** @default "Dra og slipp filer her" */
       dragAndDropMultiple: "Dra og slipp filer her",
-      /** @default "Slipp" */
       drop: "Slipp",
-      /** @default "eller" */
       or: "eller",
-      /** @default "Filopplasting er deaktivert" */
       disabled: "Filopplasting er deaktivert",
-      /** @default "Du kan ikke laste opp flere filer" */
       disabledFilelimit: "Du kan ikke laste opp flere filer",
     },
     item: {
-      /** @default "Prøv å laste opp filen på nytt" */
       retryButtonTitle: "Prøv å laste opp filen på nytt",
-      /** @default "Slett filen" */
       deleteButtonTitle: "Slett filen",
-      /** @default "Laster opp…" */
       uploading: "Laster opp…",
-      /** @default "Laster ned…" */
       downloading: "Laster ned…",
     },
   },
   FormProgress: {
-    /** @default "Steg {activeStep} av {totalSteps}" */
     step: "Steg {activeStep} av {totalSteps}",
-    /** @default "Vis alle steg" */
     showAllSteps: "Vis alle steg",
-    /** @default "Skjul alle steg" */
     hideAllSteps: "Skjul alle steg",
   },
   FormSummary: {
-    /** @default "Endre svar" */
     editAnswer: "Endre svar",
   },
   GuidePanel: {
-    /** @default "Illustrasjon av veileder" */
     illustrationLabel: "Illustrasjon av veileder",
   },
   HelpText: {
-    /** @default "Mer informasjon" */
     title: "Mer informasjon",
   },
   Loader: {
-    /** @default "Venter…" */
     title: "Venter…",
   },
   Pagination: {
-    /** @default "Forrige" */
     previous: "Forrige",
-    /** @default "Neste" */
     next: "Neste",
   },
   Process: {
-    /** @default "Aktiv" */
     active: "Aktiv",
   },
   ProgressBar: {
-    /** @default "{current} av {max}" */
     progress: "{current} av {max}",
-    /** @default "Fremdrift kan ikke beregnes, antatt tid er {seconds} sekunder." */
     progressUnknown:
       "Fremdrift kan ikke beregnes, antatt tid er {seconds} sekunder.",
   },
   Search: {
-    /** @default "Tøm feltet" */
     clear: "Tøm feltet",
-    /** @default "Søk" */
     search: "Søk",
   },
   Textarea: {
-    /** Screen readers only
-     * @default "Tekstområde med plass til {maxLength} tegn." */
+    /** Screen readers only */
     maxLength: "Tekstområde med plass til {maxLength} tegn.",
-    /** @default "{chars} tegn for mye" */
     charsTooMany: "{chars} tegn for mye",
-    /** @default "{chars} tegn igjen" */
     charsLeft: "{chars} tegn igjen",
   },
   Timeline: {
-    /** @default "dd.MM.yyyy" */
     dateFormat: "dd.MM.yyyy",
-    /** @default "dd.MM" */
     dayFormat: "dd.MM",
-    /** @default "MMM yy" */
     monthFormat: "MMM yy",
-    /** @default "yyyy" */
     yearFormat: "yyyy",
     Row: {
-      /** @default "Ingen perioder" */
       noPeriods: "Ingen perioder",
-      /** @default "{start} til {end}" */
       period: "{start} til {end}",
     },
     Period: {
-      /** @default "Suksess" */
       success: "Suksess",
-      /** @default "Advarsel" */
       warning: "Advarsel",
-      /** @default "Fare" */
       danger: "Fare",
-      /** @default "Info" */
       info: "Info",
-      /** @default "Nøytral" */
       neutral: "Nøytral",
-      /** @default "{status} fra {start} til {end}" */
       period: "{status} fra {start} til {end}",
     },
     Pin: {
-      /** @default "Pin: {date}" */
       pin: "Pin: {date}",
     },
     Zoom: {
-      /** @default "Zoom tidslinjen {start} til {end}" */
       zoom: "Zoom tidslinjen {start} til {end}",
-      /** @default "Tilbakestill tidsperspektiv" */
       reset: "Tilbakestill tidsperspektiv",
     },
   },
   Tooltip: {
-    /** @default "eller" */
     shortcutSeparator: "eller",
   },
 } satisfies TranslationMap;