@navikt/ds-react 8.5.0 → 8.5.2

package/src/data/token-filter/helpers/generate-autocomplete-options.ts

@@ -0,0 +1,289 @@
+import type { AutoCompleteOption, OptionGroup } from "../AutoSuggest.types";
+import type {
+  ParsedOption,
+  ParsedProperty,
+  QueryFilterOperator,
+} from "../TokenFilter.types";
+import { createGroups } from "./grouping";
+import { QUERY_OPERATORS } from "./operators";
+import { type ParsedText } from "./parse-query-text";
+import { OPERATOR_LABELS, buildQueryString } from "./query-builder";
+import { matchesFilterText } from "./text-matching";
+
+/**
+ * Generates "options" to be used as autosuggest-ottion based on the current query state.
+ *
+ * The query parser recognizes three states:
+ * - "property": User has selected/matched a property and operator ("Status = active")
+ * - "operator": User has matched a property but is typing the operator ("Status" or "Status !")
+ * - "free-text": User is typing freely without a property match (e.g., "act" or "!: test")
+ *
+ * @returns
+ * - value: The canonical query string representation for the current state.
+ *   Used by the UI to determine cursor position and input replacement.
+ * - options: Grouped suggestions to display (properties, operators, or values).
+ */
+function generateAutoCompleteOptions(
+  queryState: ParsedText,
+  filteringProperties: ParsedProperty[] = [],
+  filteringOptions: ParsedOption[] = [],
+) {
+  /* State: Property and operator are matched, suggest values */
+  if (queryState.step === "property") {
+    const filterText = queryState.value || "";
+
+    return {
+      value: queryState.value,
+      options: createValueSuggestions(
+        filteringOptions,
+        queryState.operator,
+        filterText,
+        queryState.property,
+      ),
+    };
+  }
+
+  /* State: Property matched, but operator is incomplete */
+  if (queryState.step === "operator") {
+    const operators = filterOperatorsByPrefix(
+      getValidOperatorsForProperty(queryState.property),
+      queryState.operatorPrefix,
+    );
+
+    const partialQuery = buildQueryString(
+      queryState.property.propertyLabel,
+      queryState.operatorPrefix,
+      "",
+    );
+
+    /**
+     * Edge case: User typed an invalid operator prefix that doesn't match any operators.
+     * This can happen when typing characters that don't start any valid operator.
+     * Return empty suggestions gracefully - the UI will show "no results".
+     *
+     * TODO: When per-property operator configuration is implemented,
+     * this could also occur when a property restricts which operators are valid.
+     */
+    if (operators.length === 0) {
+      return {
+        value: partialQuery,
+        options: [],
+      };
+    }
+
+    return {
+      value: partialQuery,
+      options: generateOperatorSuggestions(
+        queryState.property,
+        queryState.operatorPrefix,
+      ),
+    };
+  }
+
+  /*
+   * Edge case: Input starts with operator but has no value yet (user typed just "!=")
+   * Wait for value before showing suggestions
+   */
+  if (!queryState.value && queryState.operator) {
+    return {
+      value: "",
+      options: [],
+    };
+  }
+
+  /* Empty input: Show all properties */
+  if (!queryState.value) {
+    return {
+      value: "",
+      options: generatePropertySuggestions(filteringProperties),
+    };
+  }
+
+  /*
+   * Free-text search: Show matching values across all properties
+   * Use the detected operator if input started with one (e.g., "!= test"), otherwise default to "="
+   */
+  return {
+    value: queryState.value,
+    options: createValueSuggestions(
+      filteringOptions,
+      queryState.operator ?? "=",
+      queryState.value,
+    ),
+  };
+}
+
+/**
+ * Returns the valid operators for a given property.
+ * Extracts operators from the property's custom operator configuration.
+ * If none are configured, falls back to all available operators.
+ *
+ * The QueryFilteringScopedOperator can be a simple string (e.g., "=")
+ * or an object with operator and tokenType (e.g., { operator: ":", tokenType: "single" }).
+ * This function normalizes both formats and returns just the operator strings.
+ *
+ * @returns Array of valid operators for the property
+ *
+ * TODO: We omit passing the tokenType for now since it's not currently used in the UI. But will be needed for single/multi-selection.
+ */
+function getValidOperatorsForProperty(
+  property: ParsedProperty,
+): QueryFilterOperator[] {
+  const { operators } = property;
+
+  /* If no operators configured, return all available operators */
+  if (!operators || operators.length === 0) {
+    return QUERY_OPERATORS;
+  }
+
+  /*
+   * Extract operator strings from QueryFilteringScopedOperator format
+   * Handle both simple strings and objects with operator property
+   */
+  const operatorStrings = operators.map((op) =>
+    typeof op === "string" ? op : op.operator,
+  );
+
+  /* Filter to only valid QUERY_OPERATORS to ensure type safety */
+  return operatorStrings.filter((op) =>
+    QUERY_OPERATORS.includes(op as QueryFilterOperator),
+  ) as QueryFilterOperator[];
+}
+
+/**
+ * Filters the list of operators based on the provided prefix.
+ * If the prefix is empty, all operators are returned.
+ */
+function filterOperatorsByPrefix(
+  operators: QueryFilterOperator[],
+  prefix: string,
+): QueryFilterOperator[] {
+  if (!prefix) {
+    return operators;
+  }
+
+  return operators.filter((operator) => operator.startsWith(prefix));
+}
+
+function generatePropertySuggestions(
+  filteringProperties: ParsedProperty[] = [],
+  filterText = "",
+): OptionGroup<ParsedProperty>[] {
+  const filteredProperties: ParsedProperty[] = [];
+
+  for (const property of filteringProperties) {
+    if (!property) {
+      continue;
+    }
+
+    if (
+      matchesFilterText(
+        [
+          property.propertyLabel,
+          property.groupValuesLabel,
+          property.propertyGroup,
+        ].filter(Boolean),
+        filterText,
+      )
+    ) {
+      filteredProperties.push(property);
+    }
+  }
+
+  return createGroups(
+    filteredProperties,
+    (property) => property.propertyGroup,
+    "Properties",
+  );
+}
+
+function generateOperatorSuggestions(
+  property: ParsedProperty,
+  operatorPrefix = "",
+): OptionGroup<AutoCompleteOption>[] {
+  const operators = filterOperatorsByPrefix(
+    getValidOperatorsForProperty(property),
+    operatorPrefix,
+  );
+
+  if (operators.length === 0) {
+    return [];
+  }
+
+  return [
+    {
+      label: "Operators",
+      options: operators.map((operator) => ({
+        value: buildQueryString(property.propertyLabel, operator, ""),
+        label: buildQueryString(property.propertyLabel, operator, ""),
+        description: OPERATOR_LABELS[operator] ?? "",
+      })),
+    },
+  ];
+}
+
+/**
+ * Creates value suggestions for autocomplete.
+ * When scopedProperty is provided, only shows values for that property (single group).
+ * When scopedProperty is omitted, searches across all properties (multiple groups).
+ */
+function createValueSuggestions(
+  filteringOptions: ParsedOption[] = [],
+  operator: QueryFilterOperator,
+  filterText = "",
+  scopedProperty?: ParsedProperty,
+): OptionGroup<AutoCompleteOption>[] {
+  const groups: Record<string, OptionGroup<AutoCompleteOption>> = {};
+
+  for (const option of filteringOptions) {
+    if (!option?.property) {
+      continue;
+    }
+
+    /* If scoped to a property, filter to only that property's options */
+    if (scopedProperty && option.property !== scopedProperty) {
+      continue;
+    }
+
+    /* Build search fields */
+    const searchFields = [
+      option.label,
+      ...(option.tags ?? []),
+      ...(option.filteringTags ?? []),
+    ];
+
+    if (!scopedProperty) {
+      searchFields.push(option.property.propertyLabel);
+    }
+
+    const matches = matchesFilterText(searchFields.filter(Boolean), filterText);
+
+    if (!matches) {
+      continue;
+    }
+
+    const groupLabel = option.property.groupValuesLabel || "Values";
+
+    if (!groups[groupLabel]) {
+      groups[groupLabel] = {
+        label: groupLabel,
+        options: [],
+      };
+    }
+
+    groups[groupLabel].options.push({
+      value: buildQueryString(
+        option.property.propertyLabel,
+        operator,
+        option.value,
+      ),
+      label: option.label,
+      tags: option.tags,
+      filteringTags: option.filteringTags,
+    });
+  }
+
+  return Object.values(groups).filter((group) => group.options.length > 0);
+}
+
+export { generateAutoCompleteOptions };

package/src/data/token-filter/helpers/grouping.test.ts

@@ -0,0 +1,206 @@
+import { describe, expect, test } from "vitest";
+import { createGroups } from "./grouping";
+
+interface TestItem {
+  name: string;
+  group?: string;
+  value: string;
+}
+
+describe("createGroups", () => {
+  describe("basic grouping", () => {
+    test("groups items by label", () => {
+      const items: TestItem[] = [
+        { name: "Item 1", group: "Group A", value: "1" },
+        { name: "Item 2", group: "Group B", value: "2" },
+        { name: "Item 3", group: "Group A", value: "3" },
+      ];
+
+      const groups = createGroups(items, (item) => item.group);
+
+      expect(groups).toHaveLength(2);
+      expect(groups[0].label).toBe("Group A");
+      expect(groups[0].options).toHaveLength(2);
+      expect(groups[1].label).toBe("Group B");
+      expect(groups[1].options).toHaveLength(1);
+    });
+
+    test("uses default group for items without group label", () => {
+      const items: TestItem[] = [
+        { name: "Item 1", group: "Group A", value: "1" },
+        { name: "Item 2", value: "2" },
+      ];
+
+      const groups = createGroups(items, (item) => item.group, "Default");
+
+      expect(groups).toHaveLength(2);
+      expect(groups[0].label).toBe("Group A");
+      expect(groups[1].label).toBe("Default");
+      expect(groups[1].options).toHaveLength(1);
+    });
+
+    test("places default group last", () => {
+      const items: TestItem[] = [
+        { name: "No group", value: "0" },
+        { name: "Item 1", group: "Group A", value: "1" },
+        { name: "Item 2", group: "Group B", value: "2" },
+      ];
+
+      const groups = createGroups(items, (item) => item.group, "Default");
+
+      expect(groups).toHaveLength(3);
+      expect(groups[2].label).toBe("Default");
+    });
+
+    test("returns empty array when no items", () => {
+      const groups = createGroups([], (item: TestItem) => item.group);
+
+      expect(groups).toEqual([]);
+    });
+  });
+
+  describe("empty string handling", () => {
+    test("treats empty string as default group", () => {
+      const items: TestItem[] = [
+        { name: "Item 1", group: "Group A", value: "1" },
+        { name: "Item 2", group: "", value: "2" },
+      ];
+
+      const groups = createGroups(items, (item) => item.group, "Properties");
+
+      expect(groups).toHaveLength(2);
+      expect(groups[0].label).toBe("Group A");
+      expect(groups[1].label).toBe("Properties");
+      expect(groups[1].options).toHaveLength(1);
+    });
+
+    test("treats whitespace-only string as default group", () => {
+      const items: TestItem[] = [
+        { name: "Item 1", group: "Group A", value: "1" },
+        { name: "Item 2", group: "   ", value: "2" },
+      ];
+
+      const groups = createGroups(items, (item) => item.group, "Default");
+
+      expect(groups).toHaveLength(2);
+      expect(groups[1].label).toBe("Default");
+      expect(groups[1].options).toHaveLength(1);
+    });
+  });
+
+  describe("null/undefined handling", () => {
+    test("treats undefined group as default group", () => {
+      const items: TestItem[] = [
+        { name: "Item 1", group: "Group A", value: "1" },
+        { name: "Item 2", group: undefined, value: "2" },
+      ];
+
+      const groups = createGroups(items, (item) => item.group, "Default");
+
+      expect(groups).toHaveLength(2);
+      expect(groups[1].label).toBe("Default");
+    });
+
+    test("treats null group as default group", () => {
+      const items: TestItem[] = [
+        { name: "Item 1", group: "Group A", value: "1" },
+        { name: "Item 2", group: null as any, value: "2" },
+      ];
+
+      const groups = createGroups(items, (item) => item.group, "Default");
+
+      expect(groups).toHaveLength(2);
+      expect(groups[1].label).toBe("Default");
+    });
+
+    test("skips null/undefined items", () => {
+      const items = [
+        { name: "Item 1", group: "Group A", value: "1" },
+        null as any,
+        undefined as any,
+        { name: "Item 2", group: "Group A", value: "2" },
+      ];
+
+      const groups = createGroups(items, (item) => item.group);
+
+      expect(groups).toHaveLength(1);
+      expect(groups[0].options).toHaveLength(2);
+    });
+  });
+
+  describe("edge cases", () => {
+    test("handles all items in default group", () => {
+      const items: TestItem[] = [
+        { name: "Item 1", value: "1" },
+        { name: "Item 2", value: "2" },
+      ];
+
+      const groups = createGroups(items, (item) => item.group, "All");
+
+      expect(groups).toHaveLength(1);
+      expect(groups[0].label).toBe("All");
+      expect(groups[0].options).toHaveLength(2);
+    });
+
+    test("handles single item", () => {
+      const items: TestItem[] = [
+        { name: "Item 1", group: "Group A", value: "1" },
+      ];
+
+      const groups = createGroups(items, (item) => item.group);
+
+      expect(groups).toHaveLength(1);
+      expect(groups[0].label).toBe("Group A");
+      expect(groups[0].options).toHaveLength(1);
+    });
+
+    test("preserves item order within groups", () => {
+      const items: TestItem[] = [
+        { name: "Item 3", group: "Group A", value: "3" },
+        { name: "Item 1", group: "Group A", value: "1" },
+        { name: "Item 2", group: "Group A", value: "2" },
+      ];
+
+      const groups = createGroups(items, (item) => item.group);
+
+      expect(groups[0].options[0].value).toBe("3");
+      expect(groups[0].options[1].value).toBe("1");
+      expect(groups[0].options[2].value).toBe("2");
+    });
+
+    test("trims group labels", () => {
+      const items: TestItem[] = [
+        { name: "Item 1", group: "  Group A  ", value: "1" },
+        { name: "Item 2", group: "Group A", value: "2" },
+      ];
+
+      const groups = createGroups(items, (item) => item.group);
+
+      expect(groups).toHaveLength(1);
+      expect(groups[0].label).toBe("Group A");
+      expect(groups[0].options).toHaveLength(2);
+    });
+  });
+
+  describe("custom default group label", () => {
+    test("uses custom default group label", () => {
+      const items: TestItem[] = [{ name: "Item 1", value: "1" }];
+
+      const groups = createGroups(
+        items,
+        (item) => item.group,
+        "Custom Default",
+      );
+
+      expect(groups[0].label).toBe("Custom Default");
+    });
+
+    test("defaults to 'Default' when not provided", () => {
+      const items: TestItem[] = [{ name: "Item 1", value: "1" }];
+
+      const groups = createGroups(items, (item) => item.group);
+
+      expect(groups[0].label).toBe("Default");
+    });
+  });
+});

package/src/data/token-filter/helpers/grouping.ts

@@ -0,0 +1,73 @@
+import type { OptionGroup } from "../AutoSuggest.types";
+
+/**
+ * Groups items into labeled groups with support for a default group.
+ * Empty or whitespace-only group labels are treated as belonging to the default group.
+ *
+ * @returns Array of groups with non-empty options
+ *
+ * @example
+ * const properties = [
+ *   { name: "Status", group: "Metadata" },
+ *   { name: "Region", group: "Location" },
+ *   { name: "Type", group: "" },
+ * ];
+ * const groups = createGroups(
+ *   properties,
+ *   (p) => p.group,
+ *   "Properties"
+ * );
+ *
+ * Returns:
+ * [
+ *   { label: "Metadata", options: [{ name: "Status", group: "Metadata" }] },
+ *   { label: "Location", options: [{ name: "Region", group: "Location" }] },
+ *   { label: "Properties", options: [{ name: "Type", group: "" }] }
+ * ]
+ */
+function createGroups<T>(
+  items: T[],
+  getGroupLabel: (item: T) => string | undefined | null,
+  defaultGroupLabel = "Default",
+): OptionGroup<T>[] {
+  const defaultGroup: OptionGroup<T> = {
+    label: defaultGroupLabel,
+    options: [],
+  };
+  const customGroups: Record<string, OptionGroup<T>> = {};
+
+  for (const item of items) {
+    if (!item) {
+      continue;
+    }
+
+    const rawLabel = getGroupLabel(item);
+    const groupLabel = rawLabel?.trim();
+
+    /* Empty string after trim or falsy values go to default group */
+    if (!groupLabel) {
+      defaultGroup.options.push(item);
+      continue;
+    }
+
+    if (!customGroups[groupLabel]) {
+      customGroups[groupLabel] = {
+        label: groupLabel,
+        options: [],
+      };
+    }
+
+    customGroups[groupLabel].options.push(item);
+  }
+
+  /* Custom groups first, then default group if it has items */
+  const groups: OptionGroup<T>[] = [...Object.values(customGroups)];
+
+  if (defaultGroup.options.length > 0) {
+    groups.push(defaultGroup);
+  }
+
+  return groups;
+}
+
+export { createGroups };