@navikt/ds-react 8.5.2 → 8.7.0

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

@@ -1,53 +1,160 @@
-import React, { forwardRef } from "react";
-import { Box } from "../../primitives/box";
+import React, { forwardRef, useState } from "react";
+import { Search } from "../../form/search";
 import { VStack } from "../../primitives/stack";
-import { Label } from "../../typography";
+import { Detail, Label } from "../../typography";
+import { ListboxGroup } from "../../utils/components/Listbox/group/ListboxGroup";
+import { ListboxItem } from "../../utils/components/Listbox/item/ListboxItem";
+import Listbox from "../../utils/components/Listbox/root/ListboxRoot";
+import { DismissableLayer } from "../../utils/components/dismissablelayer/DismissableLayer";
+import { Floating } from "../../utils/components/floating/Floating";
+import { useMergeRefsN } from "../../utils/hooks";
 import type { AutoCompleteOption, OptionGroup } from "./AutoSuggest.types";
 
 interface AutoSuggestProps {
   options: OptionGroup<AutoCompleteOption>[];
-  onSelect: (value: string) => void;
+  onSelect: (option: AutoCompleteOption) => boolean;
   className?: string;
+  value: string;
+  onChange: (newValue: string) => void;
+  open: boolean;
+  setOpen: (open: boolean) => void;
 }
 
-const AutoSuggest = forwardRef<HTMLDivElement, AutoSuggestProps>(
-  ({ options, onSelect }, ref) => {
+const AutoSuggest = forwardRef<HTMLInputElement, AutoSuggestProps>(
+  ({ options, onSelect, value, onChange, open, setOpen }, ref) => {
+    const [virtuallyFocusedItemId, setVirtuallyFocusedItemId] = useState("");
+
+    const [inputRef, setInputRef] = useState<HTMLInputElement | null>(null);
+
+    /* Unsure why N version works, but not regular here */
+    const mergedRef = useMergeRefsN([setInputRef, ref]);
+
+    const handleClose = () => {
+      setOpen(false);
+    };
+
+    const handleChange = (newValue: string) => {
+      onChange(newValue);
+      setOpen(true);
+    };
+
+    const handleSelectOption = (option: AutoCompleteOption) => {
+      const createdNewToken = onSelect(option);
+
+      if (createdNewToken) {
+        inputRef?.focus();
+        setOpen(false);
+      }
+    };
+
+    return (
+      <Floating>
+        <Listbox setVirtuallyFocusedItemId={setVirtuallyFocusedItemId}>
+          <Floating.Anchor>
+            <Listbox.InputSlot>
+              <Search
+                label="Tabellsøk"
+                variant="simple"
+                className="aksel-property-filter__input"
+                placeholder="Type to filter..."
+                ref={mergedRef}
+                value={value}
+                onChange={handleChange}
+                onClick={() => {
+                  setOpen(true);
+                }}
+                onFocus={() => setOpen(true)}
+                /* onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                createToken(filterText);
+              }
+            }} */
+              />
+            </Listbox.InputSlot>
+          </Floating.Anchor>
+          {open && (
+            <AutoSuggestPopup
+              options={options}
+              onSelect={handleSelectOption}
+              focusedValue={virtuallyFocusedItemId}
+              setFocusedValue={setVirtuallyFocusedItemId}
+              onClose={handleClose}
+              safeZoneAnchor={inputRef}
+            />
+          )}
+        </Listbox>
+      </Floating>
+    );
+  },
+);
+
+type AutoSuggestPopupProps = {
+  options: OptionGroup<AutoCompleteOption>[];
+  onSelect: (option: AutoCompleteOption) => void;
+  focusedValue: string;
+  setFocusedValue: (value: string) => void;
+  onClose: () => void;
+  safeZoneAnchor: HTMLInputElement | null;
+};
+
+const AutoSuggestPopup = forwardRef<HTMLDivElement, AutoSuggestPopupProps>(
+  (
+    {
+      options,
+      onSelect,
+      focusedValue,
+      setFocusedValue,
+      onClose,
+      safeZoneAnchor,
+    },
+    ref,
+  ) => {
     return (
-      <Box ref={ref} padding="space-6">
-        {options.map((group) => (
-          <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={() =>
-                        /* @ts-expect-error TODO: We need to convert the data properly */
-                        onSelect(option.value ?? option.propertyKey)
-                      }
+      <DismissableLayer
+        asChild
+        onDismiss={onClose}
+        safeZone={{ anchor: safeZoneAnchor }}
+      >
+        <Floating.Content
+          ref={ref}
+          align="start"
+          side="bottom"
+          fallbackPlacements={[]}
+          sideOffset={8}
+          className="aksel-property-filter__popup"
+        >
+          <div className="aksel-property-filter__popup-inner">
+            <Listbox.List setVirtuallyFocusedItemId={setFocusedValue}>
+              {options.map((group) => (
+                <ListboxGroup key={group.label} label={group.label}>
+                  {group.options.map((item) => (
+                    <ListboxItem
+                      key={item.value}
+                      id={item.value}
+                      onClick={() => onSelect(item)}
+                      hasVirtualFocus={focusedValue === item.value}
                     >
-                      <span>
-                        {/* @ts-expect-error TODO: We need to convert the data properly */}
-                        {option.value ?? option.label ?? option.propertyLabel}
-                      </span>
-                      {option.description && <span>{option.description}</span>}
-                      {option.tags && option.tags.length > 0 && (
+                      <VStack gap="space-0">
+                        <Label as="div">{item.label}</Label>
+                        {item.description && (
+                          <Detail as="div">{item.description}</Detail>
+                        )}
+                      </VStack>
+                      {/* {item.tags && item.tags.length > 0 && (
                         <div>
-                          {option.tags.map((tag) => (
+                          {item.tags.map((tag) => (
                             <span key={tag}>{tag}</span>
                           ))}
                         </div>
-                      )}
-                    </button>
-                  </div>
-                );
-              })}
-            </VStack>
+                      )} */}
+                    </ListboxItem>
+                  ))}
+                </ListboxGroup>
+              ))}
+            </Listbox.List>
           </div>
-        ))}
-      </Box>
+        </Floating.Content>
+      </DismissableLayer>
     );
   },
 );

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

@@ -7,7 +7,6 @@ interface AutoCompleteOption {
   value: string;
   label: string;
   tags?: string[];
-  filteringTags?: string[];
   description?: string;
 }
 

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

@@ -1,51 +1,105 @@
 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;
 };
 
+/**
+ * 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>(
-      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
@@ -53,77 +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
-            /* @ts-expect-error TODO: handle conversion better */
-            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 ?? [],
-    filteringTags: option.filteringTags ?? [],
-  }));
+  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,75 +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[];
-  filteringTags?: 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[];
-  filteringTags: 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,
 };