@navikt/ds-react 8.5.1 → 8.6.0

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

@@ -1,179 +1,49 @@
-import React, { forwardRef, useMemo } from "react";
-import { cl } from "../../utils/helpers";
-import type {
-  QueryFilteringOption,
-  QueryFilteringOptionGroup,
-} from "./TokenFilter.types";
-
-interface AutoSuggestOption {
-  value: string;
-  label: string;
-  tags?: string[];
-  filteringTags?: string[];
-  description?: string;
-}
-
-interface AutoSuggestGroup {
-  label: string;
-  options: AutoSuggestOption[];
-}
+import React, { forwardRef } from "react";
+import { Box } from "../../primitives/box";
+import { VStack } from "../../primitives/stack";
+import { Label } from "../../typography";
+import type { AutoCompleteOption, OptionGroup } from "./AutoSuggest.types";
 
 interface AutoSuggestProps {
-  options: AutoSuggestGroup[];
-  value: string;
-  filterText: string;
+  options: OptionGroup<AutoCompleteOption>[];
   onSelect: (value: string) => void;
   className?: string;
 }
 
 const AutoSuggest = forwardRef<HTMLDivElement, AutoSuggestProps>(
-  ({ options, value, filterText, onSelect, className }, ref) => {
-    console.info({ options, value, filterText });
-    /* const highlightedText = filterText === undefined ? value : filterText; */
-    /* const filterValue = (value || "").toLowerCase();
-
-    const filteredGroups = options
-      .map((group) => ({
-        ...group,
-        options: group.options.filter((option) => {
-          const searchableText = [
-            option.label,
-            option.description,
-            ...(option.filteringTags ?? []),
-            ...(option.tags ?? []),
-          ]
-            .filter(Boolean)
-            .join(" ")
-            .toLowerCase();
-          return searchableText.includes(filterValue);
-        }),
-      }))
-      .filter((group) => group.options.length > 0); */
-
-    const { items } = useAutosuggestItems({ options, filterValue: filterText });
-
-    console.info({ items });
-
+  ({ options, onSelect }, ref) => {
     return (
-      <div ref={ref} className={cl("aksel-auto-suggest", className)}>
+      <Box ref={ref} padding="space-6">
         {options.map((group) => (
-          <div key={group.label} className="aksel-auto-suggest__group">
-            <div className="aksel-auto-suggest__group-label">{group.label}</div>
-            <ul className="aksel-auto-suggest__list">
-              {group.options.map((option) => (
-                <li key={option.value} className="aksel-auto-suggest__item">
-                  <button
-                    type="button"
-                    className="aksel-auto-suggest__button"
-                    onClick={() => onSelect(option.value)}
-                  >
-                    <span className="aksel-auto-suggest__label">
-                      {option.label}
-                    </span>
-                    {option.description && (
-                      <span className="aksel-auto-suggest__description">
-                        {option.description}
-                      </span>
-                    )}
-                    {option.tags && option.tags.length > 0 && (
-                      <div className="aksel-auto-suggest__tags">
-                        {option.tags.map((tag) => (
-                          <span key={tag} className="aksel-auto-suggest__tag">
-                            {tag}
-                          </span>
-                        ))}
-                      </div>
-                    )}
-                  </button>
-                </li>
-              ))}
-            </ul>
+          <div key={group.label}>
+            <Label as="div">{group.label}</Label>
+            <VStack gap="space-4">
+              {group.options.map((option) => {
+                return (
+                  <div key={option.value}>
+                    <button
+                      type="button"
+                      onClick={() => onSelect(option.value)}
+                    >
+                      <span>{option.label}</span>
+                      {option.description && <span>{option.description}</span>}
+                      {option.tags && option.tags.length > 0 && (
+                        <div>
+                          {option.tags.map((tag) => (
+                            <span key={tag}>{tag}</span>
+                          ))}
+                        </div>
+                      )}
+                    </button>
+                  </div>
+                );
+              })}
+            </VStack>
           </div>
         ))}
-      </div>
+      </Box>
     );
   },
 );
 
-function useAutosuggestItems({ options, filterValue }) {
-  const { items } = useMemo(() => createItems(options), [options]);
-
-  const filteredItems = useMemo(() => {
-    const localFilteredItems = items;
-    if (filterValue) {
-      localFilteredItems.unshift({
-        value: filterValue,
-        type: "use-entered",
-        label: `Use "${filterValue}"`,
-        option: { value: filterValue },
-      });
-    }
-    return localFilteredItems;
-  }, [items, filterValue]);
-
-  return { items: filteredItems };
-}
-
-/* TODO: Need to split autosuggest types and filter types */
-type AutoSuggestItem = {
-  type?: "parent" | "child" | "use-entered";
-  option: QueryFilteringOption | QueryFilteringOptionGroup | { value: string };
-  parent?: QueryFilteringOptionGroup;
-  disabled?: boolean;
-  value?: string;
-  label?: string;
-};
-
-function createItems(
-  options: (QueryFilteringOption | QueryFilteringOptionGroup)[],
-) {
-  const items: AutoSuggestItem[] = [];
-  const itemToGroup = new WeakMap<AutoSuggestItem, AutoSuggestItem>();
-
-  for (const option of options) {
-    if (isGroup(option)) {
-      for (const item of flattenGroup(option, itemToGroup)) {
-        items.push(item);
-      }
-    } else {
-      items.push({ ...option, option });
-    }
-  }
-
-  return { items };
-}
-
-function flattenGroup(
-  group: QueryFilteringOptionGroup,
-  map: WeakMap<AutoSuggestItem, AutoSuggestItem>,
-) {
-  const { options, ...rest } = group;
-
-  const groupItem: AutoSuggestItem = { ...rest, type: "parent", option: group };
-
-  const items: AutoSuggestItem[] = [groupItem];
-
-  for (const option of options) {
-    const childOption: AutoSuggestItem = {
-      ...option,
-      type: "child",
-      disabled: option.disabled ?? false,
-      option,
-      parent: group,
-    };
-
-    items.push(childOption);
-
-    map.set(childOption, groupItem);
-  }
-
-  return items;
-}
-
-function isGroup(
-  optionOrGroup: QueryFilteringOption | QueryFilteringOptionGroup,
-): optionOrGroup is QueryFilteringOptionGroup {
-  return "options" in optionOrGroup;
-}
-
 export { AutoSuggest };

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

@@ -0,0 +1,13 @@
+interface OptionGroup<T> {
+  label: string;
+  options: T[];
+}
+
+interface AutoCompleteOption {
+  value: string;
+  label: string;
+  tags?: string[];
+  description?: string;
+}
+
+export type { AutoCompleteOption, OptionGroup };

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,
@@ -19,6 +20,11 @@ type TokenFilterProps = {
   filteringProperties: QueryFilteringProperties;
 };
 
+/**
+ * TODO:
+ * - Implement onChange handler to update query state when user selects an autocomplete option.
+ * - 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>(
@@ -39,9 +45,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 +65,20 @@ 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
             options={autoCompleteOptions.options}
-            value={filterText}
-            filterText={autoCompleteOptions.value}
             onSelect={handleSelectOption}
-          /> */}
+          />
         </Popover>
         {query.tokens.map((token, index) => {
           return (
@@ -83,7 +92,7 @@ export const TokenFilter = forwardRef<HTMLDivElement, TokenFilterProps>(
             <li key={prop.key}>{prop.propertyLabel}</li>
           ))}
         </ul>
-        <pre>{JSON.stringify(queryState, null, 2)}</pre>
+        {/* <pre>{JSON.stringify(queryState, null, 2)}</pre> */}
         <pre>{JSON.stringify(autoCompleteOptions, null, 2)}</pre>
       </div>
     );
@@ -106,7 +115,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,
     });
@@ -117,7 +126,6 @@ function derrivedFilterState(
     value: option.value,
     label: option.label ?? option.value ?? "",
     tags: option.tags ?? [],
-    filteringTags: option.filteringTags ?? [],
   }));
 
   return { properties: [...propertyMap.values()], options: internalOptions };

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

@@ -29,7 +29,6 @@ type QueryFilteringOption = {
   value: any;
   label?: string;
   tags?: string[];
-  filteringTags?: string[];
   disabled?: boolean;
 };
 
@@ -40,11 +39,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 +58,7 @@ type ParsedProperty = {
   propertyLabel: string;
   groupValuesLabel: string;
   propertyGroup: string;
+  operators: QueryFilteringScopedOperator[];
   externalProperty: QueryFilteringProperty;
 };
 
@@ -62,7 +67,6 @@ type ParsedOption = {
   value: any;
   label: string;
   tags: string[];
-  filteringTags: string[];
 };
 
 export type {