@navikt/ds-react 8.4.1 → 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/link-card/LinkCard.tsx

@@ -33,6 +33,19 @@ interface LinkCardProps extends HTMLAttributes<HTMLDivElement> {
    * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
    */
   "data-color"?: AkselColor;
+  /**
+   * Changes the HTML element used for the root element.
+   *
+   * **When using `section`, provide either `aria-label` or `aria-labelledby` for better accessibility.**
+   * `axe-core` might warn about unique landmarks if you have multiple Accordions on page with the same label.
+   * In those cases consider updating to unique `aria-label` or `aria-labelledby` props.
+   * @see [📝 Landmarks unique](https://dequeuniversity.com/rules/axe/4.6/landmark-unique)
+   *
+   *
+   * **When using `article`, make sure `<LinkCard.Title />` is a heading and not a `span`.**
+   * @default "div"
+   */
+  as?: "div" | "section" | "article";
 }
 
 type LinkCardContextProps = {
@@ -106,6 +119,7 @@ export const LinkCard = forwardRef<HTMLDivElement, LinkCardProps>(
       arrow = true,
       arrowPosition = "baseline",
       size = "medium",
+      as: Component = "div",
       ...restProps
     }: LinkCardProps,
     forwardedRef,
@@ -114,7 +128,7 @@ export const LinkCard = forwardRef<HTMLDivElement, LinkCardProps>(
       <LinkCardContextProvider size={size}>
         <LinkAnchorOverlay asChild>
           <BodyLong
-            as="div"
+            as={Component}
             size={size}
             ref={forwardedRef}
             data-color="neutral"

package/src/process/Process.tsx

@@ -15,7 +15,7 @@ interface ProcessProps extends React.HTMLAttributes<HTMLOListElement> {
   /**
    * `<Process.Event />` elements.
    */
-  children: React.ReactElement<typeof ProcessEvent>[];
+  children: React.ReactNode;
   /**
    * Hides the "aktiv"-text when the event is active.
    * @default false

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