@navikt/ds-react 8.4.1 → 8.5.1

package/src/data/table/root/useTableKeyboardNav.ts

@@ -1,90 +1,129 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect } from "react";
 import { useEventCallback } from "../../../utils/hooks";
-import { getActiveCell, getFirstCell } from "../helpers/table-cell";
-import { focusCell, focusCellAndUpdateTabIndex } from "../helpers/table-focus";
+import { focusInitialTableTarget } from "../helpers/table-cell";
+import { focusCellAndUpdateTabIndex } from "../helpers/table-focus";
 import {
-  type GridCache,
-  ensureTableGrid,
-  findNextCell,
+  findFirstCell,
+  findFirstCellInRow,
+  findLastCell,
+  findLastCellInRow,
+  findNextFocusableCell,
 } from "../helpers/table-grid-nav";
 import {
-  getDeltaFromKey,
-  shouldBlockArrowKeyNavigation,
+  type NavigationAction,
+  getNavigationAction,
+  shouldBlockNavigation,
 } from "../helpers/table-keyboard";
+import { useGridCache } from "../hooks/useGridCache";
+
+type UseTableKeyboardNavOptions = {
+  enabled: boolean;
+  /**
+   * Custom callback to determine if navigation should be blocked.
+   * Called before default blocking logic.
+   */
+  shouldBlockNavigation?: (event: KeyboardEvent) => boolean;
+};
 
 function useTableKeyboardNav(
   tableRef: HTMLTableElement | null,
-  { enabled }: { enabled: boolean },
+  { enabled, shouldBlockNavigation: customBlockFn }: UseTableKeyboardNavOptions,
 ) {
-  const [activeCell, setActiveCell] = useState<Element | null>(null);
-  const activeCellRef = useRef<Element | null>(null);
-  activeCellRef.current = activeCell;
-
-  const observerRef = useRef<MutationObserver | null>(null);
-
-  const gridCacheRef = useRef<GridCache>({
-    grid: null,
-    dirty: true,
-  });
+  const { getTableGrid, activeCell, setActiveCell } = useGridCache(
+    tableRef,
+    enabled,
+  );
 
   /**
-   * TODO:
-   * - Save original tabIndex of cells and restore when navigating away?
+   * Executes a navigation action and returns the target cell.
    */
-  const navigateByArrowKey = useEventCallback(
-    (delta: { x: number; y: number }) => {
-      const currentCell = getActiveCell(tableRef, activeCell);
-      if (!currentCell || !tableRef) {
+  const executeNavigationAction = useEventCallback(
+    (action: NavigationAction) => {
+      if (!tableRef) {
+        return null;
+      }
+
+      let currentCell = activeCell;
+      currentCell ??= focusInitialTableTarget(tableRef);
+
+      if (!currentCell) {
         return null;
       }
 
-      const { grid, positions, maxCols } = ensureTableGrid(
-        tableRef,
-        gridCacheRef.current,
-      );
+      const { grid, positions } = getTableGrid(tableRef);
       const currentPos = positions.get(currentCell);
 
-      if (!currentPos) {
+      let nextCell: Element | null = null;
+
+      switch (action.type) {
+        case "delta": {
+          if (!currentPos) {
+            return null;
+          }
+          nextCell = findNextFocusableCell(
+            grid,
+            currentPos,
+            action.delta,
+            currentCell,
+          );
+          break;
+        }
+
+        case "home": {
+          if (!currentPos) {
+            return null;
+          }
+          nextCell = findFirstCellInRow(grid, currentPos.y);
+          break;
+        }
+
+        case "end": {
+          if (!currentPos) {
+            return null;
+          }
+          nextCell = findLastCellInRow(grid, currentPos.y);
+          break;
+        }
+
+        case "tableStart": {
+          nextCell = findFirstCell(grid);
+          break;
+        }
+
+        case "tableEnd": {
+          nextCell = findLastCell(grid);
+          break;
+        }
+      }
+
+      if (!nextCell || nextCell === currentCell) {
         return null;
       }
 
-      const nextCell = findNextCell(
-        grid,
-        currentPos,
-        delta,
-        currentCell,
-        maxCols,
-      );
-      return nextCell
-        ? focusCellAndUpdateTabIndex(nextCell, currentCell)
-        : null;
+      return focusCellAndUpdateTabIndex(nextCell, currentCell);
     },
   );
 
   /**
-   * Handles keyboard navigation with arrow keys.
-   * We check if the key is an arrow key, and if so, we calculate the next cell to focus based on the current active cell and the grid structure.
-   *
-   * TODO:
-   * - Check for other "blocking" scenarios, like actionmenus, dropdown etc
-   * - Consider having acallback user can hook into to determine if navigation should be blocked
-   * - Consider adding Home, End, PageUp, PageDown navigation
-   *
+   * Handles keyboard navigation with arrow keys, Home/End, and PageUp/PageDown.
+   * Checks if navigation should be blocked based on current focus context.
    */
-  const onKeyDown = useEventCallback((event: KeyboardEvent): void => {
-    /* Stops keydown from moving if we can assume that you are currently editing input, select etc */
-    if (shouldBlockArrowKeyNavigation(event)) {
+  const handleTableKeyDown = useEventCallback((event: KeyboardEvent): void => {
+    if (customBlockFn?.(event)) {
       return;
     }
 
-    let newCell: Element | null = null;
+    if (shouldBlockNavigation(event)) {
+      return;
+    }
 
-    const delta = getDeltaFromKey(event.key);
-    if (delta) {
-      event.preventDefault();
-      newCell = navigateByArrowKey(delta);
+    const action = getNavigationAction(event);
+    if (!action) {
+      return;
     }
 
+    event.preventDefault();
+    const newCell = executeNavigationAction(action);
     newCell && setActiveCell(newCell);
   });
 
@@ -92,8 +131,14 @@ function useTableKeyboardNav(
    * When focus is moved to elements inside a cell like inputs, checkbox etc
    * we want to update the active cell to the parent td/th, so that keyboard navigation continues to work as expected from there.
    */
-  const onFocusIn = useEventCallback((event: FocusEvent): void => {
+  const handleTableFocusIn = useEventCallback((event: FocusEvent): void => {
     const target = event.target as Element | null;
+
+    if (tableRef && target === tableRef) {
+      focusInitialTableTarget(tableRef);
+      return;
+    }
+
     const newCell = target?.closest("td, th") ?? null;
     if (!newCell || newCell === activeCell) {
       return;
@@ -108,90 +153,27 @@ function useTableKeyboardNav(
   });
 
   /**
-   * Observes changes is table structure and updates the grid cache accordingly.
-   * - We want to check if elements are removed/added, like when filtering table, pagination etc
-   * - Changes in colspan/rowspan that can affect the grid structure
-   * - Hidden attribute or styles that can affect focusability of cells
-   *
-   * We also check if the active cell is removed from the DOM, and clear it if so.
+   * Attach event listeners for keyboard navigation and focus management.
    */
   useEffect(() => {
     if (!tableRef || !enabled) {
       return;
     }
 
-    observerRef.current = new MutationObserver(() => {
-      gridCacheRef.current.dirty = true;
-      if (activeCellRef.current && !activeCellRef.current.isConnected) {
-        setActiveCell(null);
-      }
-    });
-
-    observerRef.current.observe(tableRef, {
-      subtree: true,
-      childList: true,
-      attributes: true,
-      attributeFilter: ["colspan", "rowspan", "hidden", "style"],
-    });
-
-    return () => {
-      if (observerRef.current) {
-        observerRef.current.disconnect();
-        observerRef.current = null;
-      }
-    };
-  }, [tableRef, enabled]);
-
-  useEffect(() => {
-    if (!tableRef || !enabled) {
-      return;
-    }
-
-    tableRef.addEventListener("keydown", onKeyDown);
-    tableRef.addEventListener("focusin", onFocusIn);
+    tableRef.addEventListener("keydown", handleTableKeyDown);
+    tableRef.addEventListener("focusin", handleTableFocusIn);
 
     return () => {
-      tableRef.removeEventListener("keydown", onKeyDown);
-      tableRef.removeEventListener("focusin", onFocusIn);
+      tableRef.removeEventListener("keydown", handleTableKeyDown);
+      tableRef.removeEventListener("focusin", handleTableFocusIn);
     };
-  }, [tableRef, onKeyDown, onFocusIn, enabled]);
-
-  /*
-   * If keyboard-nav is re-enabled, we need to make sure to update the grid cache,
-   * since the table might have changed while it was disabled.
-   */
-  useEffect(() => {
-    if (!enabled) {
-      return;
-    }
-
-    gridCacheRef.current.dirty = true;
-  }, [enabled]);
+  }, [tableRef, handleTableKeyDown, handleTableFocusIn, enabled]);
 
   return {
     /* Table should only have tabIndex until the focus is moved inside and is enabled */
-    tableTabIndex: enabled ? (activeCell ? undefined : 0) : undefined,
-    /*
-     * Allows us to capture focus on the table when navigating with Tab from outside, and move it to the first cell.
-     * We only want to do this if no cell is already focused.
-     */
-    onFocus: () => {
-      if (!tableRef) {
-        return;
-      }
-
-      const focusedElement = document.activeElement;
-      const cellInTable = focusedElement?.closest("td, th");
-
-      /* Assume onFocusIn handler has updates cell */
-      if (cellInTable && tableRef.contains(cellInTable)) {
-        return;
-      }
-
-      const firstCell = getFirstCell(tableRef);
-      return firstCell ? focusCell(firstCell) : null;
-    },
+    tabIndex: enabled ? (activeCell ? undefined : 0) : undefined,
   };
 }
 
 export { useTableKeyboardNav };
+export type { UseTableKeyboardNavOptions };

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

@@ -0,0 +1,179 @@
+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[];
+}
+
+interface AutoSuggestProps {
+  options: AutoSuggestGroup[];
+  value: string;
+  filterText: string;
+  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 });
+
+    return (
+      <div ref={ref} className={cl("aksel-auto-suggest", className)}>
+        {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>
+        ))}
+      </div>
+    );
+  },
+);
+
+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/TokenFilter.tsx

@@ -0,0 +1,124 @@
+import React, { forwardRef, useState } from "react";
+import { Popover } from "../../popover";
+import { cl } from "../../utils/helpers";
+import type {
+  ParsedOption,
+  ParsedProperty,
+  QueryFilterQuery,
+  QueryFilteringOptions,
+  QueryFilteringProperties,
+} 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;
+  className?: string;
+  filteringOptions: QueryFilteringOptions;
+  filteringProperties: QueryFilteringProperties;
+};
+
+export const TokenFilter = forwardRef<HTMLDivElement, TokenFilterProps>(
+  ({ query, className, filteringProperties, filteringOptions }, ref) => {
+    const [inputAnchor, setInputAnchor] = useState<HTMLInputElement | null>(
+      null,
+    );
+
+    const [filterText, setFilterText] = useState<string>("");
+    const { properties, options } = derrivedFilterState(
+      filteringProperties,
+      filteringOptions,
+    );
+
+    const queryState = parseQueryText(filterText, properties);
+
+    const autoCompleteOptions = generateAutoCompleteOptions(
+      queryState,
+      properties,
+      options,
+    );
+
+    /* const handleSelectOption = (value: string) => {
+      setFilterText(value);
+    }; */
+
+    return (
+      <div
+        ref={ref}
+        className={cl("aksel-property-filter", className)}
+        role="search"
+      >
+        <input
+          type="text"
+          className="aksel-property-filter__input"
+          placeholder="Type to filter..."
+          ref={setInputAnchor}
+          value={filterText}
+          onChange={(e) => setFilterText(e.target.value)}
+        />
+        <Popover
+          anchorEl={inputAnchor}
+          open={filterText.length > 0}
+          onClose={() => setFilterText("")}
+        >
+          a
+          {/* <AutoSuggest
+
+            options={autoCompleteOptions.options}
+            value={filterText}
+            filterText={autoCompleteOptions.value}
+            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>
+      </div>
+    );
+  },
+);
+
+function derrivedFilterState(
+  filteringProperties: QueryFilteringProperties,
+  filteringOptions: QueryFilteringOptions,
+  /* query: QueryFilterQuery */
+): {
+  properties: ParsedProperty[];
+  options: ParsedOption[];
+} {
+  const propertyMap = new Map<string, any>();
+
+  for (const property of filteringProperties) {
+    propertyMap.set(property.key, {
+      propertyKey: property.key,
+      propertyLabel: property?.propertyLabel ?? "",
+      groupValuesLabel: property?.groupValuesLabel ?? "",
+      propertyGroup: property?.group,
+      /* operators: (property?.operators ?? []).map(op => (typeof op === 'string' ? op : op.operator)), */
+      /* 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 ?? [],
+  }));
+
+  return { properties: [...propertyMap.values()], options: internalOptions };
+}

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

@@ -0,0 +1,79 @@
+type QueryFilterOperator =
+  | "<"
+  | "<="
+  | ">"
+  | ">="
+  | ":"
+  | "!:"
+  | "="
+  | "!="
+  | "^"
+  | "!^"
+  | (string & {});
+
+type QueryFilterOperation = "and" | "or";
+
+type QueryFilterToken = {
+  propertyKey: string;
+  operator: QueryFilterOperator;
+  value: any;
+};
+
+type QueryFilterQuery = {
+  tokens: QueryFilterToken[];
+  operation: QueryFilterOperation;
+};
+
+type QueryFilteringOption = {
+  propertyKey: string;
+  value: any;
+  label?: string;
+  tags?: string[];
+  filteringTags?: string[];
+  disabled?: boolean;
+};
+
+type QueryFilteringOptions = QueryFilteringOption[];
+
+type QueryFilteringOptionGroup = {
+  label: string;
+  options: QueryFilteringOptions;
+};
+
+type QueryFilteringProperty = {
+  key: string;
+  propertyLabel: string;
+  groupValuesLabel: string;
+  group: string;
+};
+
+type QueryFilteringProperties = QueryFilteringProperty[];
+
+type ParsedProperty = {
+  propertyKey: string;
+  propertyLabel: string;
+  groupValuesLabel: string;
+  propertyGroup: string;
+  externalProperty: QueryFilteringProperty;
+};
+
+type ParsedOption = {
+  property: ParsedProperty | null;
+  value: any;
+  label: string;
+  tags: string[];
+  filteringTags: string[];
+};
+
+export type {
+  QueryFilterOperator,
+  QueryFilterQuery,
+  QueryFilteringOptions,
+  QueryFilteringProperty,
+  QueryFilterOperation,
+  QueryFilteringProperties,
+  ParsedProperty,
+  ParsedOption,
+  QueryFilteringOption,
+  QueryFilteringOptionGroup,
+};