@navikt/ds-react 8.10.5 → 8.11.0

package/src/data/table/tr/DataTableTr.tsx

@@ -6,32 +6,37 @@ import {
   PlusIcon,
 } from "@navikt/aksel-icons";
 import { Button } from "../../../button";
+import { useDataGridContext } from "../../../data-grid/root/DataGridRoot.context";
 import { CheckboxInput } from "../../../form/checkbox/checkbox-input/CheckboxInput";
 import { RadioInput } from "../../../form/radio/radio-input/RadioInput";
 import { Skeleton } from "../../../skeleton";
 import { Label } from "../../../typography";
 import { useId } from "../../../utils-external";
 import { cl, composeEventHandlers } from "../../../utils/helpers";
+import { consoleWarning } from "../../../utils/helpers/consoleWarning";
 import { DataTableBaseCell } from "../base-cell/DataTableBaseCell";
 import { DataTableColumnHeader } from "../column-header/DataTableColumnHeader";
 import {
   getDataTableDetailsPanelId,
   useDataTableDetailsPanel,
 } from "../hooks/useTableDetailsPanel";
+import type { TableRowEntryId } from "../root/DataGridTable.types";
 import {
   useDataTableContext,
   useDataTableLocation,
 } from "../root/DataTableRoot.context";
 import { DataTableTd } from "../td/DataTableTd";
 
-const SELECTION_CELL_WIDTH = "50px";
+const ACTION_CELL_WIDTH = 50;
+
+const ACTION_CELL_CSS_WIDTH = `${ACTION_CELL_WIDTH}px`;
 
 type DataTableTrProps = React.HTMLAttributes<HTMLTableRowElement> & {
   selected?: boolean;
   /**
-   * Unique identifier for the row, used for selection..
+   * Unique identifier for the row, used for selection.
    */
-  rowId?: string | number;
+  rowId?: TableRowEntryId;
 };
 
 const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
@@ -46,9 +51,10 @@ const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
     },
     forwardedRef,
   ) => {
-    const { layout, stickyHeader, selectionState, onRowClick } =
+    const { layout, stickyHeader, selectionState, onRowAction } =
       useDataTableContext();
     const { location } = useDataTableLocation();
+    const { tableItems } = useDataTableContext();
 
     const renderFillerCell = layout === "fixed" && children;
 
@@ -58,7 +64,11 @@ const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
     const isSticky = location === "thead" && stickyHeader;
 
     const handleClick =
-      location === "tbody" && rowId !== undefined
+      location === "tbody" &&
+      rowId !== undefined &&
+      ((selectionState.selectionTrigger === "row" &&
+        selectionState.selection.mode !== "none") ||
+        onRowAction)
         ? (event: React.MouseEvent<HTMLTableRowElement>) => {
             if (
               rowId === undefined ||
@@ -70,18 +80,44 @@ const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
               return;
             }
 
+            if (onRowAction) {
+              const rowData = tableItems.itemDetails.get(rowId)?.rowData;
+
+              if (rowData) {
+                onRowAction({
+                  row: rowData,
+                  id: rowId,
+                  event,
+                });
+              } else {
+                consoleWarning(
+                  `DataGrid.Table: Unable to find row data for rowId ${rowId} when calling onRowAction.`,
+                );
+              }
+            }
+
+            if (event.defaultPrevented) {
+              return;
+            }
+
             const selection = window.getSelection();
             if (selection && selection.toString().length > 0) {
               return;
             }
 
             if (
-              !selectionState.disableRowSelectionOnClick &&
-              selectionState.selection.selectionMode !== "none"
+              selectionState.selectionTrigger === "row" &&
+              selectionState.selection.mode !== "none"
             ) {
-              selectionState.selection.toggleSelection(rowId);
+              const rowData = tableItems.itemDetails.get(rowId)?.rowData;
+
+              if (!rowData) {
+                consoleWarning(
+                  `DataGrid.Table: No row data found for rowId ${rowId}. This may cause issues with selection if enableRowSelection is used.`,
+                );
+              }
+              selectionState.selection.toggleSelection(rowId, rowData);
             }
-            onRowClick?.(rowId, event);
           }
         : undefined;
 
@@ -113,8 +149,13 @@ const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
   },
 );
 
-function RowExpansionCell({ rowId }: { rowId?: string | number }) {
-  const { tableId, showLoadingSkeletons } = useDataTableContext();
+function RowExpansionCell({ rowId }: { rowId?: TableRowEntryId }) {
+  const { isLoading } = useDataGridContext();
+  const { tableId, loading, stickyStart } = useDataTableContext();
+  const stickyExpansion = stickyStart.expansion;
+
+  const expansionHeaderId = useId();
+
   const { location } = useDataTableLocation();
 
   const {
@@ -131,20 +172,26 @@ function RowExpansionCell({ rowId }: { rowId?: string | number }) {
     return null;
   }
 
-  if (showLoadingSkeletons) {
+  if (isLoading && loading?.variant === "skeleton") {
     if (location === "thead") {
       return (
         <DataTableColumnHeader
-          width={SELECTION_CELL_WIDTH}
-          UNSAFE_isSelection
+          id={expansionHeaderId}
+          width={{ value: ACTION_CELL_CSS_WIDTH }}
+          cellType="action"
           data-block-keyboard-nav
           label=""
-          /* isSticky={stickySelection && "start"} */
+          isSticky={stickyExpansion && "start"}
+          style={stickyExpansion ? { left: 0 } : undefined}
         />
       );
     }
     return (
-      <DataTableBaseCell as="td">
+      <DataTableBaseCell
+        as="td"
+        isSticky={stickyExpansion && "start"}
+        style={stickyExpansion ? { left: 0 } : undefined}
+      >
         <Skeleton variant="text" />
       </DataTableBaseCell>
     );
@@ -153,11 +200,13 @@ function RowExpansionCell({ rowId }: { rowId?: string | number }) {
   if (location === "thead" && !showExpandAll) {
     return (
       <DataTableColumnHeader
-        width={SELECTION_CELL_WIDTH}
-        UNSAFE_isSelection
+        id={expansionHeaderId}
+        width={{ value: ACTION_CELL_CSS_WIDTH }}
+        cellType="action"
         data-block-keyboard-nav
         label=""
-        /* isSticky={stickySelection && "start"} */
+        isSticky={stickyExpansion && "start"}
+        style={stickyExpansion ? { left: 0 } : undefined}
       />
     );
   }
@@ -165,11 +214,13 @@ function RowExpansionCell({ rowId }: { rowId?: string | number }) {
   if (location === "thead") {
     return (
       <DataTableColumnHeader
-        textAlign="center"
-        width={SELECTION_CELL_WIDTH}
-        UNSAFE_isSelection
+        id={expansionHeaderId}
+        align="center"
+        width={{ value: ACTION_CELL_CSS_WIDTH }}
+        cellType="action"
         label=""
-        /* isSticky={stickySelection && "start"} */
+        isSticky={stickyExpansion && "start"}
+        style={stickyExpansion ? { left: 0 } : undefined}
       >
         <Button
           variant="tertiary"
@@ -199,11 +250,23 @@ function RowExpansionCell({ rowId }: { rowId?: string | number }) {
   const expansionId = getDataTableDetailsPanelId(tableId, rowId);
 
   if (!canExpandRow) {
-    return <DataTableTd UNSAFE_isSelection preventRowClick />;
+    return (
+      <DataTableTd
+        cellType="action"
+        preventRowClick
+        isSticky={stickyExpansion && "start"}
+        style={stickyExpansion ? { left: 0 } : undefined}
+      />
+    );
   }
 
   return (
-    <DataTableTd UNSAFE_isSelection preventRowClick>
+    <DataTableTd
+      cellType="action"
+      preventRowClick
+      isSticky={stickyExpansion && "start"}
+      style={stickyExpansion ? { left: 0 } : undefined}
+    >
       <Button
         variant="tertiary"
         data-color="neutral"
@@ -227,40 +290,52 @@ function RowExpansionCell({ rowId }: { rowId?: string | number }) {
  * TODO: How do these cells handle multiple thead rows, or col/row-spans?
  * TODO: a11y for labels
  */
-function RowSelectionCell({ rowId }: { rowId?: string | number }) {
-  const { selectionState, stickySelection, showLoadingSkeletons } =
-    useDataTableContext();
+function RowSelectionCell({ rowId }: { rowId?: TableRowEntryId }) {
+  const { isLoading } = useDataGridContext();
+  const { selectionState, stickyStart, loading } = useDataTableContext();
+  const stickySelection = stickyStart.selection;
+  const stickySelectionOffset = stickyStart.selectionOffset;
   const { location } = useDataTableLocation();
+
+  const { tableItems } = useDataTableContext();
+
   const inputId = useId();
+  const selectionHeaderId = useId();
 
   const { selection, renderSelection } = selectionState;
 
-  if (selection.selectionMode === "none" || !renderSelection) {
+  if (selection.mode === "none" || !renderSelection) {
     return null;
   }
 
-  if (showLoadingSkeletons) {
+  if (isLoading && loading?.variant === "skeleton") {
     if (location === "thead") {
       return (
         <DataTableColumnHeader
-          width={SELECTION_CELL_WIDTH}
-          UNSAFE_isSelection
+          id={selectionHeaderId}
+          width={{ value: ACTION_CELL_CSS_WIDTH }}
+          cellType="action"
           label=""
           data-block-keyboard-nav
           isSticky={stickySelection && "start"}
+          style={stickySelection ? { left: stickySelectionOffset } : undefined}
         />
       );
     }
 
     return (
-      <DataTableBaseCell as="td">
+      <DataTableBaseCell
+        as="td"
+        isSticky={stickySelection && "start"}
+        style={stickySelection ? { left: stickySelectionOffset } : undefined}
+      >
         <Skeleton variant="text" />
       </DataTableBaseCell>
     );
   }
 
   /* TODO: A11y support */
-  if (selection.selectionMode === "multiple" && location === "thead") {
+  if (selection.mode === "multiple" && location === "thead") {
     const theadCheckboxProps = selection.getTheadCheckboxProps();
 
     let labelText = "Velg alle synlige rader";
@@ -270,11 +345,13 @@ function RowSelectionCell({ rowId }: { rowId?: string | number }) {
 
     return (
       <DataTableColumnHeader
-        textAlign="center"
-        width={SELECTION_CELL_WIDTH}
-        UNSAFE_isSelection
+        id={selectionHeaderId}
+        align="center"
+        width={{ value: ACTION_CELL_CSS_WIDTH }}
+        cellType="action"
         label=""
         isSticky={stickySelection && "start"}
+        style={stickySelection ? { left: stickySelectionOffset } : undefined}
       >
         <Label htmlFor={inputId} visuallyHidden>
           {labelText}
@@ -284,14 +361,16 @@ function RowSelectionCell({ rowId }: { rowId?: string | number }) {
     );
   }
 
-  if (selection.selectionMode === "single" && location === "thead") {
+  if (selection.mode === "single" && location === "thead") {
     return (
       <DataTableColumnHeader
-        width={SELECTION_CELL_WIDTH}
-        UNSAFE_isSelection
+        id={selectionHeaderId}
+        width={{ value: ACTION_CELL_CSS_WIDTH }}
+        cellType="action"
         label=""
         data-block-keyboard-nav
         isSticky={stickySelection && "start"}
+        style={stickySelection ? { left: stickySelectionOffset } : undefined}
       />
     );
   }
@@ -300,18 +379,37 @@ function RowSelectionCell({ rowId }: { rowId?: string | number }) {
     return null;
   }
 
-  if (selection.selectionMode === "multiple" && location === "tbody") {
+  if (selection.mode === "multiple" && location === "tbody") {
     return (
-      <DataTableTd UNSAFE_isSelection isSticky={stickySelection && "start"}>
-        <CheckboxInput {...selection.getRowCheckboxProps(rowId)} compact />
+      <DataTableTd
+        cellType="action"
+        isSticky={stickySelection && "start"}
+        style={stickySelection ? { left: stickySelectionOffset } : undefined}
+      >
+        <CheckboxInput
+          {...selection.getRowCheckboxProps(
+            rowId,
+            tableItems.itemDetails.get(rowId)?.rowData,
+          )}
+          compact
+        />
       </DataTableTd>
     );
   }
 
-  if (selection.selectionMode === "single" && location === "tbody") {
+  if (selection.mode === "single" && location === "tbody") {
     return (
-      <DataTableTd UNSAFE_isSelection isSticky={stickySelection && "start"}>
-        <RadioInput {...selection.getRowRadioProps(rowId)} />
+      <DataTableTd
+        cellType="action"
+        isSticky={stickySelection && "start"}
+        style={stickySelection ? { left: stickySelectionOffset } : undefined}
+      >
+        <RadioInput
+          {...selection.getRowRadioProps(
+            rowId,
+            tableItems.itemDetails.get(rowId)?.rowData,
+          )}
+        />
       </DataTableTd>
     );
   }
@@ -326,5 +424,5 @@ function isInteractiveTarget(target: EventTarget | null): boolean {
   );
 }
 
-export { DataTableTr };
+export { DataTableTr, ACTION_CELL_WIDTH };
 export type { DataTableTrProps };

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

@@ -23,7 +23,7 @@ type TokenFilterProps = {
   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).

package/src/data-grid/index.ts

@@ -0,0 +1,3 @@
+"use client";
+export { DataGrid } from "./root/DataGridRoot";
+export { DataGridTable } from "../data/table/root/DataGridTableRoot";

package/src/data-grid/root/DataGrid.types.ts

@@ -0,0 +1,36 @@
+type DataGridSettings = {
+  /**
+   * Controls vertical cell padding.
+   * @default "standard"
+   */
+  rowDensity?: "tight" | "standard" | "loose";
+  /**
+   * Zebra striped table
+   * @default false
+   */
+  zebraStripes?: boolean;
+  /**
+   * Truncate content in cells and show ellipsis for overflowed text.
+   *
+   * **NB:** When using this together with `layout="auto"`,
+   * you have to manually set a `maxWidth` on columns that should be truncated.
+   * @default false if layout="auto", else true
+   */
+  truncateContent?: boolean;
+  /**
+   * Sticky columns that remain visible when horizontally scrolling the table.
+   *
+   * You can specify 1 sticky column on the left and 1 on the right.
+   */
+  stickyColumns?: {
+    start?: 1;
+    end?: 1;
+  };
+  /**
+   * Adjusts font-size
+   * @default "medium"
+   */
+  textSize?: "small" | "medium";
+};
+
+export type { DataGridSettings };

package/src/data-grid/root/DataGridRoot.context.ts

@@ -0,0 +1,21 @@
+import type { SelectionProps } from "../../data/table/hooks/useTableSelection";
+import type { ColumnDefinitions } from "../../data/table/root/DataGridTable.types";
+import { createStrictContext } from "../../utils/helpers";
+import type { DataGridSettings } from "./DataGrid.types";
+
+type DataGridContextValue<RowT = unknown> = {
+  data: RowT[];
+  columnDefinitions: ColumnDefinitions<RowT>;
+  getRowId?: (rowData: RowT) => string;
+  selection?: SelectionProps<RowT>;
+  isLoading?: boolean;
+  tableSettings?: DataGridSettings;
+};
+
+const { Provider: DataGridContextProvider, useContext: useDataGridContext } =
+  createStrictContext<DataGridContextValue>({
+    name: "DataGridContext",
+    errorMessage: "DataGrid hooks must be used within a <DataGrid />",
+  });
+
+export { DataGridContextProvider, useDataGridContext };

package/src/data-grid/root/DataGridRoot.tsx

@@ -0,0 +1,152 @@
+import React, { forwardRef, useMemo } from "react";
+import type { SelectionProps } from "../../data/table/hooks/useTableSelection";
+import type { ColumnDefinitions } from "../../data/table/root/DataGridTable.types";
+import { DataGridTable } from "../../data/table/root/DataGridTableRoot";
+import { cl } from "../../utils/helpers";
+import type { DataGridSettings } from "./DataGrid.types";
+import { DataGridContextProvider } from "./DataGridRoot.context";
+
+interface DataGridProps<RowT> {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  /**
+   * Definitions of the columns to display.
+   */
+  columns: ColumnDefinitions<RowT>;
+  /**
+   * The data to display.
+   *
+   * Each object in the array represents a row, and the properties of the
+   * object are used to render the cells based on `columnDefinitions`.
+   */
+  data: RowT[];
+  /**
+   * Function to get unique row ID from row data.
+   *
+   * If not provided, the row index will be used as ID.
+   * This can cause issues if your data changes dynamically,
+   * so it's recommended to provide a stable ID if possible.
+   */
+  getRowId?: (rowData: RowT) => string;
+  /**
+   * Object with props related to row selection.
+   */
+  selection?: SelectionProps<RowT>;
+  /**
+   * Determines if the data grid is in a loading state.
+   * See `loadingContent` prop on the `DataGrid.Table` component for display settings.
+   * @default false
+   */
+  isLoading?: boolean;
+  /**
+   * Settings for the data grid.
+   */
+  settings?: DataGridSettings;
+}
+
+interface DataGridComponent {
+  <RowT>(
+    props: DataGridProps<RowT> & React.RefAttributes<HTMLDivElement>,
+  ): React.ReactElement | null;
+  /**
+   * @see 🏷️ {@link DataGridTableProps}
+   *
+   * @example
+   * <DataGrid columnDefinitions={columnDefs} data={rowData} getRowId={(row) => row.id}>
+   *   <DataGrid.Table />
+   * </DataGrid>
+   */
+  Table: typeof DataGridTable;
+}
+
+/**
+ * Component for displaying tabular data.
+ *
+ * **WARNING: This component is in active development and may receive breaking changes outside major releases!**
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/datagrid)
+ * @see 🏷️ {@link DataGridProps}
+ *
+ * @example
+ * ```jsx
+ * <DataGrid columnDefinitions={columnDefs} data={rowData} getRowId={(row) => row.id}>
+ *   <DataGrid.Table />
+ * </DataGrid>
+ * ```
+ */
+const DataGridInternal = forwardRef<HTMLDivElement, DataGridProps<any>>(
+  (
+    {
+      children,
+      className,
+      columns,
+      data,
+      getRowId,
+      selection,
+      isLoading = false,
+      settings,
+      ...rest
+    }: DataGridProps<unknown>,
+    ref,
+  ) => {
+    const resolvedSettings = useMemo(
+      () => ({
+        rowDensity: settings?.rowDensity ?? "standard",
+        zebraStripes: settings?.zebraStripes ?? false,
+        truncateContent: settings?.truncateContent,
+        stickyColumns: settings?.stickyColumns ?? {},
+        textSize: settings?.textSize ?? "medium",
+      }),
+      [
+        settings?.rowDensity,
+        settings?.zebraStripes,
+        settings?.truncateContent,
+        settings?.stickyColumns,
+        settings?.textSize,
+      ],
+    );
+
+    return (
+      <div {...rest} ref={ref} className={cl("aksel-data-grid", className)}>
+        <DataGridContextProvider
+          columnDefinitions={columns}
+          data={data}
+          getRowId={getRowId}
+          selection={selection}
+          isLoading={isLoading}
+          tableSettings={resolvedSettings}
+        >
+          {children}
+        </DataGridContextProvider>
+      </div>
+    );
+  },
+);
+
+const DataGrid = DataGridInternal as unknown as DataGridComponent;
+DataGrid.Table = DataGridTable;
+
+// eslint-disable-next-line @typescript-eslint/no-namespace, import/export
+export namespace DataGrid {
+  export type Props<T = unknown> = DataGridProps<T>;
+  export type Columns<T = unknown> = ColumnDefinitions<T>;
+  export type Selection<T = unknown> = SelectionProps<T>;
+  export type Settings = DataGridSettings;
+
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  export namespace Table {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    export type Props<T = unknown> = DataGridTable.Props<T>;
+    export type Sorting = DataGridTable.Sorting;
+    export type SortEntry = DataGridTable.SortEntry;
+    export type SortChangeDetail = DataGridTable.SortChangeDetail;
+    export type LoadingContent = DataGridTable.LoadingContent;
+    export type SubRows<T = unknown> = DataGridTable.SubRows<T>;
+    export type DetailsPanel<T = unknown> = DataGridTable.DetailsPanel<T>;
+  }
+}
+
+// eslint-disable-next-line import/export
+export { DataGrid, DataGridInternal }; // DataGridRoot needs to be exported b.c. of docgen
+export default DataGrid;

package/src/preview.ts

@@ -0,0 +1,2 @@
+"use client";
+export { DataGrid } from "./data-grid";

package/src/table/ColumnHeader.tsx

@@ -4,6 +4,7 @@ import {
   SortDownIcon,
   SortUpIcon,
 } from "@navikt/aksel-icons";
+import { consoleWarning } from "../utils/helpers/consoleWarning";
 import HeaderCell, { HeaderCellProps } from "./HeaderCell";
 import { TableContext } from "./context";
 
@@ -28,7 +29,7 @@ export const ColumnHeader: ColumnHeaderType = forwardRef(
     const context = useContext(TableContext);
 
     if (sortable && !sortKey) {
-      console.warn("ColumnHeader with `sortable=true` must have a sortKey.");
+      consoleWarning("ColumnHeader with `sortable=true` must have a sortKey.");
     }
 
     return (
@@ -44,6 +45,7 @@ export const ColumnHeader: ColumnHeaderType = forwardRef(
         }
         {...rest}
       >
+        {/* TODO: Padding on cell makes clickable area smaller than cell with button. Make cell clickable, have pointer etc */}
         {sortable ? (
           <button
             type="button"

package/cjs/data/drag-and-drop-legacy/drag-handler/DragAndDropDragHandlerLegacy.d.ts

@@ -1,22 +0,0 @@
-import React from "react";
-export interface DragAndDropDragHandlerLegacyProps {
-    /**
-     * Whether the drag handler is disabled
-     */
-    /**
-     * Wether dragging is done by keyboard. Used to conditionally render drag indicators.
-     */
-    keyboardDragging?: boolean;
-    /**
-     * Handle ref is forwarded to the button element serving as drag handle.
-     */
-    handleRef: React.Ref<HTMLDivElement>;
-    alt?: boolean;
-}
-/**
- * DragAndDropDragHandlerLegacy
- *
- * A button component that serves as a drag handle for drag and drop operations.
- * Can be used to initiate dragging of elements in a data table or list.
- */
-export declare const DragAndDropDragHandlerLegacy: React.ForwardRefExoticComponent<DragAndDropDragHandlerLegacyProps & React.RefAttributes<HTMLButtonElement>>;