@navikt/ds-react 8.5.0 → 8.5.1

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

@@ -0,0 +1,148 @@
+import type { ParsedProperty, QueryFilterOperator } from "../TokenFilter.types";
+
+type ParsedText =
+  | {
+      /** User has typed property + complete operator + value (e.g., "Status != active") */
+      step: "property";
+      property: ParsedProperty;
+      operator: QueryFilterOperator;
+      value: string;
+    }
+  | {
+      /** User is typing the operator after property (e.g., "Status !") */
+      step: "operator";
+      property: ParsedProperty;
+      operatorPrefix: string;
+    }
+  | {
+      /** No property match; treat as free-text search */
+      step: "free-text";
+      value: string;
+      operator?: QueryFilterOperator;
+    };
+
+/**
+ * Parse user input text to extract property, operator, and value components.
+ * Handles partial input (e.g., user typing "Status !" to complete the operator).
+ */
+function parseQueryText(
+  filteringText: string,
+  filteringProperties: ParsedProperty[],
+): ParsedText {
+  const property = matchFilteringProperty(filteringProperties, filteringText);
+  if (!property) {
+    const freeTextOperator = matchOperator(QUERY_OPERATORS, filteringText);
+    if (freeTextOperator) {
+      return {
+        step: "free-text",
+        operator: freeTextOperator,
+        value: filteringText.substring(freeTextOperator.length).trimStart(),
+      };
+    }
+
+    return {
+      step: "free-text",
+      value: filteringText,
+    };
+  }
+
+  const textWithoutProperty = filteringText
+    .substring(property.propertyLabel.length)
+    .trimStart();
+
+  const operator = matchOperator(QUERY_OPERATORS, textWithoutProperty);
+
+  if (operator) {
+    return {
+      step: "property",
+      property,
+      operator,
+      value: textWithoutProperty.substring(operator.length).trimStart(),
+    };
+  }
+
+  const operatorPrefix = matchOperatorPrefix(
+    QUERY_OPERATORS,
+    textWithoutProperty,
+  );
+
+  if (operatorPrefix !== null) {
+    return { step: "operator", property, operatorPrefix };
+  }
+
+  return {
+    step: "free-text",
+    value: filteringText,
+  };
+}
+
+/**
+ * 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 type { ParsedText };

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;