@navikt/ds-react 8.5.1 → 8.5.2

package/src/data/token-filter/helpers/parse-query-text.ts

@@ -1,4 +1,10 @@
 import type { ParsedProperty, QueryFilterOperator } from "../TokenFilter.types";
+import {
+  QUERY_OPERATORS,
+  matchFilteringProperty,
+  matchOperator,
+  matchOperatorPrefix,
+} from "./operators";
 
 type ParsedText =
   | {
@@ -76,73 +82,5 @@ function parseQueryText(
   };
 }
 
-/**
- * Operators ordered by specificity (longest/most specific first)
- * This ensures longer operators like ">=" and "<=" are matched
- * before shorter ones like ">" and "<"
- */
-const QUERY_OPERATORS: QueryFilterOperator[] = [
-  ">=",
-  "<=",
-  "!=",
-  "!:",
-  "!^",
-  "=",
-  ":",
-  "^",
-  ">",
-  "<",
-];
-
-/**
- * Match a property from the input text by longest property label.
- * Case-insensitive matching.
- */
-function matchFilteringProperty(
-  filteringProperties: ParsedProperty[],
-  text: string,
-): ParsedProperty | undefined {
-  const sortedProperties = [...filteringProperties].sort(
-    (a, b) => b.propertyLabel.length - a.propertyLabel.length,
-  );
-  return sortedProperties.find((prop) =>
-    text.toLowerCase().startsWith(prop.propertyLabel.toLowerCase()),
-  );
-}
-
-/**
- * Check if the input text is a valid prefix of any allowed operator.
- * Returns the prefix if valid, null otherwise.
- */
-function matchOperatorPrefix(
-  allowedOperators: QueryFilterOperator[],
-  filteringText: string,
-): string | null {
-  const trimmedText = filteringText.trim();
-
-  if (trimmedText.length === 0) {
-    return "";
-  }
-
-  const isValidPrefix = allowedOperators.some((operator) =>
-    operator.toLowerCase().startsWith(trimmedText.toLowerCase()),
-  );
-
-  return isValidPrefix ? trimmedText : null;
-}
-
-/**
- * Match an operator from the input text.
- * Operators are already sorted by specificity, so no re-sorting needed.
- */
-function matchOperator(
-  allowedOperators: QueryFilterOperator[],
-  text: string,
-): QueryFilterOperator | undefined {
-  return allowedOperators.find((operator) =>
-    text.toLowerCase().startsWith(operator.toLowerCase()),
-  );
-}
-
-export { QUERY_OPERATORS, parseQueryText };
+export { parseQueryText };
 export type { ParsedText };

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";