@navikt/ds-react 8.6.0 → 8.8.0

package/src/data/token-filter/TokenFilter.tsx

@@ -1,23 +1,27 @@
 import React, { forwardRef, useState } from "react";
-import { Popover } from "../../popover";
+import { Chips } from "../../chips";
+import { HStack } from "../../primitives/stack";
 import { cl } from "../../utils/helpers";
 import { AutoSuggest } from "./AutoSuggest";
+import { AutoCompleteOption } from "./AutoSuggest.types";
 import type {
-  ParsedOption,
-  ParsedProperty,
-  QueryFilterQuery,
-  QueryFilteringOptions,
-  QueryFilteringProperties,
+  ExternalOptions,
+  ExternalPropertyDefinitions,
+  ExternalQuery,
+  ExternalToken,
+  InternalPropertyDefinition,
+  InternalPropertyOption,
+  OperationT,
 } from "./TokenFilter.types";
 import { generateAutoCompleteOptions } from "./helpers/generate-autocomplete-options";
 import { parseQueryText } from "./helpers/parse-query-text";
 
 type TokenFilterProps = {
-  query: QueryFilterQuery;
-  onChange: (newQuery: QueryFilterQuery) => void;
+  query: ExternalQuery;
+  onChange: (newQuery: ExternalQuery) => void;
   className?: string;
-  filteringOptions: QueryFilteringOptions;
-  filteringProperties: QueryFilteringProperties;
+  propertyDefinitions: ExternalPropertyDefinitions;
+  options: ExternalOptions;
 };
 
 /**
@@ -26,31 +30,76 @@ type TokenFilterProps = {
  * - Handle token rendering and editing (e.g., show tokens for matched properties/operators/values, allow deleting tokens).
  */
 export const TokenFilter = forwardRef<HTMLDivElement, TokenFilterProps>(
-  ({ query, className, filteringProperties, filteringOptions }, ref) => {
-    const [inputAnchor, setInputAnchor] = useState<HTMLInputElement | null>(
-      null,
-    );
-
+  ({ query, className, propertyDefinitions, options, onChange }, ref) => {
     const [filterText, setFilterText] = useState<string>("");
-    const { properties, options } = derrivedFilterState(
-      filteringProperties,
-      filteringOptions,
-    );
+    const [open, setOpen] = useState(false);
 
-    const queryState = parseQueryText(filterText, properties);
+    const { parsedPropertyDefinitions, parsedPropertyOptions } =
+      derrivedFilterState(propertyDefinitions, options);
+
+    const queryState = parseQueryText(filterText, parsedPropertyDefinitions);
 
     const autoCompleteOptions = generateAutoCompleteOptions(
       queryState,
-      properties,
-      options,
+      parsedPropertyDefinitions,
+      parsedPropertyOptions,
     );
 
-    const handleSelectOption = (value: string) => {
-      setFilterText(value);
-      setCustomOpen(false);
+    const { addToken, removeToken } = createActionHandlers({
+      query,
+      onChange,
+    });
+
+    const createToken = (newText: string): boolean => {
+      const newQueryState = parseQueryText(newText, parsedPropertyDefinitions);
+
+      let newToken: ExternalToken | null = null;
+
+      switch (newQueryState.step) {
+        case "property": {
+          if (newQueryState.value === "") {
+            return false;
+          }
+          newToken = {
+            propertyKey: newQueryState.property.key,
+            operator: newQueryState.operator,
+            value: newQueryState.value,
+          };
+          break;
+        }
+        case "free-text": {
+          break;
+        }
+        case "operator": {
+          break;
+        }
+      }
+      if (newToken) {
+        addToken(newToken);
+        setFilterText("");
+        return true;
+      }
+      return false;
     };
 
-    const [customOpen, setCustomOpen] = useState(false);
+    const handleSelectOption = (option: AutoCompleteOption) => {
+      const newQueryState = parseQueryText(
+        option.value,
+        parsedPropertyDefinitions,
+      );
+
+      if (
+        (newQueryState.step === "property" && newQueryState.value === "") ||
+        newQueryState.step === "operator"
+      ) {
+        /* Add space after for better formatting */
+        /* TODO: Handle this scenario better */
+        setFilterText(`${option.value} `);
+        return false;
+      }
+      setFilterText(option.value);
+      return createToken(option.value);
+    };
 
     return (
       <div
@@ -58,75 +107,121 @@ export const TokenFilter = forwardRef<HTMLDivElement, TokenFilterProps>(
         className={cl("aksel-property-filter", className)}
         role="search"
       >
-        <input
-          type="text"
-          className="aksel-property-filter__input"
-          placeholder="Type to filter..."
-          ref={setInputAnchor}
+        <AutoSuggest
+          onSelect={handleSelectOption}
+          options={autoCompleteOptions.options}
           value={filterText}
-          onChange={(e) => setFilterText(e.target.value)}
-          onFocus={() => setCustomOpen(true)}
+          onChange={setFilterText}
+          open={open}
+          setOpen={setOpen}
         />
-        <Popover
-          anchorEl={inputAnchor}
-          open={customOpen}
-          onClose={() => {
-            setFilterText("");
-            setCustomOpen(false);
-          }}
-        >
-          <AutoSuggest
-            options={autoCompleteOptions.options}
-            onSelect={handleSelectOption}
-          />
-        </Popover>
-        {query.tokens.map((token, index) => {
-          return (
-            <div key={index} className="aksel-property-filter__token">
-              <strong>{token.propertyKey}</strong> {token.operator}{" "}
-            </div>
-          );
-        })}
-        <ul>
-          {filteringProperties.map((prop) => (
-            <li key={prop.key}>{prop.propertyLabel}</li>
-          ))}
-        </ul>
-        {/* <pre>{JSON.stringify(queryState, null, 2)}</pre> */}
-        <pre>{JSON.stringify(autoCompleteOptions, null, 2)}</pre>
+        <HStack marginBlock="space-8" gap="space-8">
+          {query.tokens.map((token, index) => {
+            return (
+              <React.Fragment
+                key={`${token.propertyKey}-${token.operator}-${token.value}-${index}`}
+              >
+                <Chips.Removable
+                  key={index}
+                  onClick={() => {
+                    removeToken(index);
+                  }}
+                >
+                  {`${token.propertyKey} ${token.operator} ${token.value}`}
+                </Chips.Removable>
+                {index < query.tokens.length - 1 && (
+                  <span>{query.operation}</span>
+                )}
+              </React.Fragment>
+            );
+          })}
+        </HStack>
       </div>
     );
   },
 );
 
 function derrivedFilterState(
-  filteringProperties: QueryFilteringProperties,
-  filteringOptions: QueryFilteringOptions,
-  /* query: QueryFilterQuery */
+  propertyDefinitions: ExternalPropertyDefinitions,
+  propteryOptions: ExternalOptions,
 ): {
-  properties: ParsedProperty[];
-  options: ParsedOption[];
+  parsedPropertyDefinitions: InternalPropertyDefinition[];
+  parsedPropertyOptions: InternalPropertyOption[];
 } {
-  const propertyMap = new Map<string, any>();
+  const propertyMap = new Map<string, InternalPropertyDefinition>();
 
-  for (const property of filteringProperties) {
+  for (const property of propertyDefinitions) {
     propertyMap.set(property.key, {
-      propertyKey: property.key,
-      propertyLabel: property?.propertyLabel ?? "",
-      groupValuesLabel: property?.groupValuesLabel ?? "",
-      propertyGroup: property?.group,
+      key: property.key,
+      label: property?.label ?? "",
+      groupLabel: property?.groupLabel ?? "",
+      group: property?.group ?? "",
       operators: property?.operators ?? [],
-      /* defaultOperator: property?.defaultOperator ?? '=', */
       externalProperty: property,
     });
   }
 
-  const internalOptions = filteringOptions.map((option) => ({
-    property: propertyMap.get(option.propertyKey) ?? null,
-    value: option.value,
-    label: option.label ?? option.value ?? "",
-    tags: option.tags ?? [],
-  }));
+  const internalOptions: InternalPropertyOption[] = [];
+
+  for (const option of propteryOptions) {
+    internalOptions.push({
+      property: propertyMap.get(option.propertyKey) ?? null,
+      value: option.value,
+      label: option.label ?? option.value ?? "",
+      tags: option.tags ?? [],
+    });
+  }
+
+  return {
+    parsedPropertyDefinitions: [...propertyMap.values()],
+    parsedPropertyOptions: internalOptions,
+  };
+}
+
+function createActionHandlers({
+  query,
+  onChange,
+}: {
+  query: ExternalQuery;
+  onChange: (newQuery: ExternalQuery) => void;
+}) {
+  const handleChange = (newQuery: ExternalQuery) => {
+    onChange(newQuery);
+  };
+
+  const addToken = (token: ExternalToken) => {
+    handleChange({ ...query, tokens: [...query.tokens, token] });
+  };
+
+  const updateToken = (updateIndex: number, updatedToken: ExternalToken) => {
+    handleChange({
+      ...query,
+      tokens: query.tokens.map((token, index) =>
+        index === updateIndex ? updatedToken : token,
+      ),
+    });
+  };
+
+  const updateOperation = (operation: OperationT) => {
+    handleChange({ ...query, operation });
+  };
+
+  const removeToken = (removeIndex: number) => {
+    handleChange({
+      ...query,
+      tokens: query.tokens.filter((_, index) => index !== removeIndex),
+    });
+  };
+
+  const removeAllTokens = () => {
+    handleChange({ ...query, tokens: [] });
+  };
 
-  return { properties: [...propertyMap.values()], options: internalOptions };
+  return {
+    addToken,
+    updateToken,
+    updateOperation,
+    removeToken,
+    removeAllTokens,
+  };
 }

package/src/data/token-filter/TokenFilter.types.ts

@@ -1,4 +1,5 @@
-type QueryFilterOperator =
+/* External API */
+type OperatorT =
   | "<"
   | "<="
   | ">"
@@ -11,73 +12,100 @@ type QueryFilterOperator =
   | "!^"
   | (string & {});
 
-type QueryFilterOperation = "and" | "or";
+type OperationT = "and" | "or";
 
-type QueryFilterToken = {
+type ExternalToken = {
   propertyKey: string;
-  operator: QueryFilterOperator;
-  value: any;
+  operator: OperatorT;
+  value: string;
 };
 
-type QueryFilterQuery = {
-  tokens: QueryFilterToken[];
-  operation: QueryFilterOperation;
+type ExternalQuery = {
+  tokens: ExternalToken[];
+  operation: OperationT;
 };
 
-type QueryFilteringOption = {
+type ExternalOption = {
   propertyKey: string;
-  value: any;
+  value: string;
   label?: string;
   tags?: string[];
   disabled?: boolean;
 };
 
-type QueryFilteringOptions = QueryFilteringOption[];
+type ExternalOptions = ExternalOption[];
 
-type QueryFilteringOptionGroup = {
+type ExternalPropertyGroup = {
   label: string;
-  options: QueryFilteringOptions;
+  options: ExternalOptions;
 };
 
-type QueryFilteringScopedOperator =
-  | string
-  | { operator: string; tokenType: "single" | "multiple" };
-
-type QueryFilteringProperty = {
+type ExternalPropertyDefinition = {
   key: string;
-  propertyLabel: string;
-  groupValuesLabel?: string;
+  label: string;
+  groupLabel?: string;
   group?: string;
-  operators?: QueryFilteringScopedOperator[];
+  operators?: ExternalPropertyOperator[];
 };
 
-type QueryFilteringProperties = QueryFilteringProperty[];
+type ExternalPropertyDefinitions = ExternalPropertyDefinition[];
 
-type ParsedProperty = {
-  propertyKey: string;
-  propertyLabel: string;
-  groupValuesLabel: string;
-  propertyGroup: string;
-  operators: QueryFilteringScopedOperator[];
-  externalProperty: QueryFilteringProperty;
+type ExternalPropertyOperator =
+  | string
+  | { operator: string; type: "single" | "multiple" };
+
+export type {
+  ExternalOption,
+  ExternalOptions,
+  ExternalPropertyDefinition,
+  ExternalPropertyDefinitions,
+  ExternalPropertyGroup,
+  ExternalQuery,
+  ExternalToken,
+  OperationT,
+  OperatorT,
+};
+
+/* Internal API */
+type InternalPropertyDefinition = {
+  key: string;
+  label: string;
+  groupLabel: string;
+  group: string;
+  operators: ExternalPropertyOperator[];
+  externalProperty: ExternalPropertyDefinition;
 };
 
-type ParsedOption = {
-  property: ParsedProperty | null;
-  value: any;
+type InternalPropertyOption = {
+  property: InternalPropertyDefinition | null;
+  value: string;
   label: string;
   tags: string[];
 };
 
+type InternalParsedTextState =
+  | {
+      /** User has typed property + complete operator + value (e.g., "Status != active") */
+      step: "property";
+      property: InternalPropertyDefinition;
+      operator: OperatorT;
+      value: string;
+    }
+  | {
+      /** User is typing the operator after property (e.g., "Status !") */
+      step: "operator";
+      property: InternalPropertyDefinition;
+      operatorPrefix: string;
+    }
+  | {
+      /** No property match; treat as free-text search */
+      step: "free-text";
+      value: string;
+      operator?: OperatorT;
+    };
+
 export type {
-  QueryFilterOperator,
-  QueryFilterQuery,
-  QueryFilteringOptions,
-  QueryFilteringProperty,
-  QueryFilterOperation,
-  QueryFilteringProperties,
-  ParsedProperty,
-  ParsedOption,
-  QueryFilteringOption,
-  QueryFilteringOptionGroup,
+  InternalPropertyDefinition,
+  InternalPropertyOption,
+  InternalParsedTextState,
 };