@navikt/ds-react 8.5.1 → 8.5.2

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

@@ -1,6 +1,7 @@
 import React, { forwardRef, useState } from "react";
 import { Popover } from "../../popover";
 import { cl } from "../../utils/helpers";
+import { AutoSuggest } from "./AutoSuggest";
 import type {
   ParsedOption,
   ParsedProperty,
@@ -39,9 +40,12 @@ export const TokenFilter = forwardRef<HTMLDivElement, TokenFilterProps>(
       options,
     );
 
-    /* const handleSelectOption = (value: string) => {
+    const handleSelectOption = (value: string) => {
       setFilterText(value);
-    }; */
+      setCustomOpen(false);
+    };
+
+    const [customOpen, setCustomOpen] = useState(false);
 
     return (
       <div
@@ -56,20 +60,21 @@ export const TokenFilter = forwardRef<HTMLDivElement, TokenFilterProps>(
           ref={setInputAnchor}
           value={filterText}
           onChange={(e) => setFilterText(e.target.value)}
+          onFocus={() => setCustomOpen(true)}
         />
         <Popover
           anchorEl={inputAnchor}
-          open={filterText.length > 0}
-          onClose={() => setFilterText("")}
+          open={customOpen}
+          onClose={() => {
+            setFilterText("");
+            setCustomOpen(false);
+          }}
         >
-          a
-          {/* <AutoSuggest
-
+          <AutoSuggest
+            /* @ts-expect-error TODO: handle conversion better */
             options={autoCompleteOptions.options}
-            value={filterText}
-            filterText={autoCompleteOptions.value}
             onSelect={handleSelectOption}
-          /> */}
+          />
         </Popover>
         {query.tokens.map((token, index) => {
           return (
@@ -106,7 +111,7 @@ function derrivedFilterState(
       propertyLabel: property?.propertyLabel ?? "",
       groupValuesLabel: property?.groupValuesLabel ?? "",
       propertyGroup: property?.group,
-      /* operators: (property?.operators ?? []).map(op => (typeof op === 'string' ? op : op.operator)), */
+      operators: property?.operators ?? [],
       /* defaultOperator: property?.defaultOperator ?? '=', */
       externalProperty: property,
     });

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

@@ -40,11 +40,16 @@ type QueryFilteringOptionGroup = {
   options: QueryFilteringOptions;
 };
 
+type QueryFilteringScopedOperator =
+  | string
+  | { operator: string; tokenType: "single" | "multiple" };
+
 type QueryFilteringProperty = {
   key: string;
   propertyLabel: string;
-  groupValuesLabel: string;
-  group: string;
+  groupValuesLabel?: string;
+  group?: string;
+  operators?: QueryFilteringScopedOperator[];
 };
 
 type QueryFilteringProperties = QueryFilteringProperty[];
@@ -54,6 +59,7 @@ type ParsedProperty = {
   propertyLabel: string;
   groupValuesLabel: string;
   propertyGroup: string;
+  operators: QueryFilteringScopedOperator[];
   externalProperty: QueryFilteringProperty;
 };