@navikt/ds-react 8.5.0 → 8.5.2

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

@@ -24,18 +24,49 @@ import { useTableKeyboardNav } from "./useTableKeyboardNav";
 
 interface DataTableProps extends React.HTMLAttributes<HTMLTableElement> {
   children: React.ReactNode;
+  /**
+   * Controls vertical cell padding.
+   * @default "normal"
+   */
   rowDensity?: "condensed" | "normal" | "spacious";
+  /**
+   * Zebra striped table
+   * @default false
+   */
+  zebraStripes?: boolean;
+  /**
+   * Truncate content in cells and show ellipsis for overflowed text.
+   *
+   * **NB:** When using `layout="auto"`, you have to manually set a `maxWidth` on columns that should be truncated.
+   * @default true
+   */
+  truncateContent?: boolean; // TODO: Consider making this default false when layout=auto, and maybe disallow it but add a wrap prop on the td-comp.
   /**
    * 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;
+  /**
+   * Controls table layout.
+   *
+   * ### fixed
+   * Gives you full control of column widths. This is required for resizable columns.
+   *
+   * ### auto
+   * Makes the columns resize automatically based on the content.
+   * The table will take up at least 100% of available width.
+   *
+   * **NB:** When using this with `truncateContent`, you have to manually
+   * set a `contentMaxWidth` on cells that should be truncated.
+   * @default "fixed"
+   */
+  layout?: "fixed" | "auto";
 }
 
 interface DataTableRootComponent extends React.ForwardRefExoticComponent<
@@ -133,6 +164,12 @@ interface DataTableRootComponent extends React.ForwardRefExoticComponent<
   Tfoot: typeof DataTableTfoot;
 }
 
+/**
+ * TODO Component description etc.
+ *
+ * **NB:** To get sticky headers, you have to set a height restriction on the table container. You can use VStack for this:
+ * TODO example
+ */
 const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
   (
     {
@@ -141,6 +178,8 @@ const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
       withKeyboardNav = false,
       zebraStripes = false,
       truncateContent = true,
+      shouldBlockNavigation,
+      layout = "fixed",
       ...rest
     },
     forwardedRef,
@@ -148,8 +187,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 +198,12 @@ 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}
+            data-layout={layout}
+            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/table/td/DataTableTd.tsx

@@ -1,23 +1,30 @@
 import React, { forwardRef } from "react";
 import { cl } from "../../../utils/helpers";
 
-interface DataTableTdProps extends React.HTMLAttributes<HTMLTableCellElement> {
+interface DataTableTdProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
   /**
-   * TODO: Shouldnt be needed to declare these here... But getting type-errors if not
+   * Sets a max-width on the content wrapper div inside the cell.
+   * This is only needed when using `layout="auto"` together with
+   * `truncateContent` on `<DataTable>` and you want the cell to be truncated.
    */
-  colSpan?: number;
-  rowSpan?: number;
+  contentMaxWidth?: number | `${number}${string}`;
+  /**
+   * TODO: Consider a prop like this instead of contentMaxWidth to use together with layout=auto.
+   * Maybe even with layout=auto as a way to override truncateContent on single cells?
+   * Need to work on the name though. Or maybe have two separate props?
+   */
+  //textWrap?: boolean | number | `${number}${string}`;
 }
 
 const DataTableTd = forwardRef<HTMLTableCellElement, DataTableTdProps>(
-  ({ className, children, ...rest }, forwardedRef) => {
+  ({ className, children, contentMaxWidth, ...rest }, forwardedRef) => {
     return (
       <td
         {...rest}
         ref={forwardedRef}
         className={cl("aksel-data-table__td", className)}
       >
-        <div>{children}</div>
+        <div style={{ maxWidth: contentMaxWidth }}>{children}</div>
       </td>
     );
   },

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

@@ -0,0 +1,55 @@
+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: OptionGroup<AutoCompleteOption>[];
+  onSelect: (value: string) => void;
+  className?: string;
+}
+
+const AutoSuggest = forwardRef<HTMLDivElement, AutoSuggestProps>(
+  ({ options, onSelect }, 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)
+                      }
+                    >
+                      <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 && (
+                        <div>
+                          {option.tags.map((tag) => (
+                            <span key={tag}>{tag}</span>
+                          ))}
+                        </div>
+                      )}
+                    </button>
+                  </div>
+                );
+              })}
+            </VStack>
+          </div>
+        ))}
+      </Box>
+    );
+  },
+);
+
+export { AutoSuggest };

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

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

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

@@ -0,0 +1,129 @@
+import React, { forwardRef, useState } from "react";
+import { Popover } from "../../popover";
+import { cl } from "../../utils/helpers";
+import { AutoSuggest } from "./AutoSuggest";
+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);
+      setCustomOpen(false);
+    };
+
+    const [customOpen, setCustomOpen] = useState(false);
+
+    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)}
+          onFocus={() => setCustomOpen(true)}
+        />
+        <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>
+      </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 ?? [],
+      /* 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,85 @@
+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 QueryFilteringScopedOperator =
+  | string
+  | { operator: string; tokenType: "single" | "multiple" };
+
+type QueryFilteringProperty = {
+  key: string;
+  propertyLabel: string;
+  groupValuesLabel?: string;
+  group?: string;
+  operators?: QueryFilteringScopedOperator[];
+};
+
+type QueryFilteringProperties = QueryFilteringProperty[];
+
+type ParsedProperty = {
+  propertyKey: string;
+  propertyLabel: string;
+  groupValuesLabel: string;
+  propertyGroup: string;
+  operators: QueryFilteringScopedOperator[];
+  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,
+};