@navikt/ds-react 8.5.0 → 8.5.1

package/src/data/table/helpers/table-grid-nav.ts

@@ -85,14 +85,11 @@ function getNextGridPosition(
 }
 
 /**
- * Checks if a cell is focusable (not the same as current cell and contains focusable elements).
+ * Checks if a cell is focusable (contains focusable elements).
  * Type guard that narrows Element | undefined to Element.
  */
-function isCellFocusable(
-  cell: Element | undefined,
-  currentCell: Element,
-): cell is Element {
-  if (!cell || cell === currentCell) {
+function isCellFocusable(cell: Element | undefined): cell is Element {
+  if (!cell) {
     return false;
   }
   return !!findFocusableElementInCell(cell);
@@ -100,7 +97,7 @@ function isCellFocusable(
 
 /**
  * Finds the next cell in the given direction, starting from the current position.
- * Skips over cells that are not focusable or are the same as the current cell.
+ * Skips over cells that are not focusable.
  * Returns null if no next cell is found in the given direction.
  */
 function findNextFocusableCell(
@@ -118,7 +115,9 @@ function findNextFocusableCell(
     }
 
     const cell = grid[nextPos.y][nextPos.x];
-    if (isCellFocusable(cell, currentCell)) {
+
+    /* We check against current cell to avoid returning the same cell in cases of rowspan/colspan. */
+    if (cell !== currentCell && isCellFocusable(cell)) {
       return cell;
     }
 
@@ -127,22 +126,16 @@ function findNextFocusableCell(
 }
 
 /**
- * Finds the first focusable cell in the same row as the current position.
+ * Finds the first focusable cell in the given row.
  */
 function findFirstCellInRow(
   grid: (Element | undefined)[][],
-  positions: Map<Element, { x: number; y: number }>,
-  currentCell: Element,
+  rowIndex: number,
 ): Element | null {
-  const currentPos = positions.get(currentCell);
-  if (!currentPos) {
-    return null;
-  }
-
-  const row = grid[currentPos.y] ?? [];
+  const row = grid[rowIndex] ?? [];
   for (let x = 0; x < row.length; x += 1) {
     const cell = row[x];
-    if (isCellFocusable(cell, currentCell)) {
+    if (isCellFocusable(cell)) {
       return cell;
     }
   }
@@ -151,22 +144,16 @@ function findFirstCellInRow(
 }
 
 /**
- * Finds the last focusable cell in the same row as the current position.
+ * Finds the last focusable cell in the given row.
  */
 function findLastCellInRow(
   grid: (Element | undefined)[][],
-  positions: Map<Element, { x: number; y: number }>,
-  currentCell: Element,
+  rowIndex: number,
 ): Element | null {
-  const currentPos = positions.get(currentCell);
-  if (!currentPos) {
-    return null;
-  }
-
-  const row = grid[currentPos.y] ?? [];
+  const row = grid[rowIndex] ?? [];
   for (let x = row.length - 1; x >= 0; x -= 1) {
     const cell = row[x];
-    if (isCellFocusable(cell, currentCell)) {
+    if (isCellFocusable(cell)) {
       return cell;
     }
   }
@@ -177,15 +164,12 @@ function findLastCellInRow(
 /**
  * Finds the first focusable cell in the entire table.
  */
-function findFirstCell(
-  grid: (Element | undefined)[][],
-  currentCell: Element,
-): Element | null {
+function findFirstCell(grid: (Element | undefined)[][]): Element | null {
   for (let y = 0; y < grid.length; y += 1) {
     const row = grid[y] ?? [];
     for (let x = 0; x < row.length; x += 1) {
       const cell = row[x];
-      if (isCellFocusable(cell, currentCell)) {
+      if (isCellFocusable(cell)) {
         return cell;
       }
     }
@@ -197,15 +181,12 @@ function findFirstCell(
 /**
  * Finds the last focusable cell in the entire table.
  */
-function findLastCell(
-  grid: (Element | undefined)[][],
-  currentCell: Element,
-): Element | null {
+function findLastCell(grid: (Element | undefined)[][]): Element | null {
   for (let y = grid.length - 1; y >= 0; y -= 1) {
     const row = grid[y] ?? [];
     for (let x = row.length - 1; x >= 0; x -= 1) {
       const cell = row[x];
-      if (isCellFocusable(cell, currentCell)) {
+      if (isCellFocusable(cell)) {
         return cell;
       }
     }

package/src/data/table/helpers/table-keyboard.ts

@@ -27,7 +27,6 @@ function getNavigationAction(event: KeyboardEvent): NavigationAction | null {
     return { type: "delta", delta: keyToCoord[key as DirectionsT] };
   }
 
-  // Home/End keys
   if (key === "Home") {
     return event.ctrlKey || event.metaKey
       ? { type: "tableStart" }
@@ -54,15 +53,7 @@ function getNavigationAction(event: KeyboardEvent): NavigationAction | null {
  * - User is navigating inside multiline textarea
  * - contenteditable attrb is in use
  */
-function shouldBlockNavigation(
-  event: KeyboardEvent,
-  customBlockFn?: (event: KeyboardEvent) => boolean,
-): boolean {
-  /* Check custom block function first */
-  if (customBlockFn?.(event)) {
-    return true;
-  }
-
+function shouldBlockNavigation(event: KeyboardEvent): boolean {
   const key = event.key;
   if (!(key in keyToCoord)) {
     return false;

package/src/data/table/root/DataTableRoot.tsx

@@ -25,17 +25,27 @@ import { useTableKeyboardNav } from "./useTableKeyboardNav";
 interface DataTableProps extends React.HTMLAttributes<HTMLTableElement> {
   children: React.ReactNode;
   rowDensity?: "condensed" | "normal" | "spacious";
+  /**
+   * Zebra striped table
+   * @default false
+   */
+  zebraStripes?: boolean;
+  /**
+   * Truncate content in cells and show ellipsis for overflowed text.
+   * @default true
+   */
+  truncateContent?: boolean;
   /**
    * Enables keyboard navigation for table rows and cells.
    * @default false
    */
   withKeyboardNav?: boolean;
   /**
-   * Zebra striped table
-   * @default false
+   * Custom callback to determine if navigation should be blocked.
+   * Called before default blocking logic.
+   * Requires `withKeyboardNav` to be `true`.
    */
-  zebraStripes?: boolean;
-  truncateContent?: boolean;
+  shouldBlockNavigation?: (event: KeyboardEvent) => boolean;
 }
 
 interface DataTableRootComponent extends React.ForwardRefExoticComponent<
@@ -141,6 +151,7 @@ const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
       withKeyboardNav = false,
       zebraStripes = false,
       truncateContent = true,
+      shouldBlockNavigation,
       ...rest
     },
     forwardedRef,
@@ -148,8 +159,9 @@ const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
     const [tableRef, setTableRef] = useState<HTMLTableElement | null>(null);
     const mergedRef = useMergeRefs(forwardedRef, setTableRef);
 
-    const { tableTabIndex } = useTableKeyboardNav(tableRef, {
+    const { tabIndex } = useTableKeyboardNav(tableRef, {
       enabled: withKeyboardNav,
+      shouldBlockNavigation,
     });
 
     return (
@@ -158,12 +170,11 @@ const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
           <table
             {...rest}
             ref={mergedRef}
-            className={cl("aksel-data-table", className, {
-              "aksel-data-table--zebra-stripes": zebraStripes,
-              "aksel-data-table--truncate-content": truncateContent,
-            })}
+            className={cl("aksel-data-table", className)}
+            data-zebra-stripes={zebraStripes}
+            data-truncate-content={truncateContent}
             data-density={rowDensity}
-            tabIndex={tableTabIndex}
+            tabIndex={tabIndex}
           />
         </div>
       </div>

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

@@ -53,46 +53,54 @@ function useTableKeyboardNav(
       const { grid, positions } = getTableGrid(tableRef);
       const currentPos = positions.get(currentCell);
 
-      if (
-        !currentPos &&
-        action.type !== "tableStart" &&
-        action.type !== "tableEnd"
-      ) {
-        return null;
-      }
-
       let nextCell: Element | null = null;
 
       switch (action.type) {
-        case "delta":
+        case "delta": {
+          if (!currentPos) {
+            return null;
+          }
           nextCell = findNextFocusableCell(
             grid,
-            currentPos!,
+            currentPos,
             action.delta,
             currentCell,
           );
           break;
+        }
 
-        case "home":
-          nextCell = findFirstCellInRow(grid, positions, currentCell);
+        case "home": {
+          if (!currentPos) {
+            return null;
+          }
+          nextCell = findFirstCellInRow(grid, currentPos.y);
           break;
+        }
 
-        case "end":
-          nextCell = findLastCellInRow(grid, positions, currentCell);
+        case "end": {
+          if (!currentPos) {
+            return null;
+          }
+          nextCell = findLastCellInRow(grid, currentPos.y);
           break;
+        }
 
-        case "tableStart":
-          nextCell = findFirstCell(grid, currentCell);
+        case "tableStart": {
+          nextCell = findFirstCell(grid);
           break;
+        }
 
-        case "tableEnd":
-          nextCell = findLastCell(grid, currentCell);
+        case "tableEnd": {
+          nextCell = findLastCell(grid);
           break;
+        }
       }
 
-      return nextCell
-        ? focusCellAndUpdateTabIndex(nextCell, currentCell)
-        : null;
+      if (!nextCell || nextCell === currentCell) {
+        return null;
+      }
+
+      return focusCellAndUpdateTabIndex(nextCell, currentCell);
     },
   );
 
@@ -101,7 +109,11 @@ function useTableKeyboardNav(
    * Checks if navigation should be blocked based on current focus context.
    */
   const handleTableKeyDown = useEventCallback((event: KeyboardEvent): void => {
-    if (shouldBlockNavigation(event, customBlockFn)) {
+    if (customBlockFn?.(event)) {
+      return;
+    }
+
+    if (shouldBlockNavigation(event)) {
       return;
     }
 
@@ -159,7 +171,7 @@ function useTableKeyboardNav(
 
   return {
     /* Table should only have tabIndex until the focus is moved inside and is enabled */
-    tableTabIndex: enabled ? (activeCell ? undefined : 0) : undefined,
+    tabIndex: enabled ? (activeCell ? undefined : 0) : undefined,
   };
 }
 

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,
+};