@navikt/ds-react 8.11.0 → 8.11.1

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

@@ -137,7 +137,7 @@ function getStickyOffsets(element: HTMLElement): {
   }
 
   const stickyHeader = table.querySelector<HTMLElement>(
-    `.aksel-data-table__tr[data-sticky="true"]`,
+    `.aksel-data-table__thead[data-sticky="true"]`,
   );
 
   const stickyNodesStart = table.querySelectorAll<HTMLElement>(

package/src/data/table/hooks/useColumnOptions.ts

@@ -1,4 +1,5 @@
 import { useMemo } from "react";
+import { consoleWarning } from "../../../utils/helpers/consoleWarning";
 import type {
   ColumnDefinition,
   ColumnDefinitions,
@@ -13,6 +14,10 @@ type UseColumnOptions = {
   hasSelection: boolean;
   hasDetailsPanel: boolean;
   layout: "fixed" | "auto";
+  columnDisplay?: {
+    id: string;
+    visible: boolean;
+  }[];
 };
 
 type StickyStartState = {
@@ -37,7 +42,13 @@ function useColumnOptions<T>(
   columnDefinitions: ColumnDefinitions<T>,
   options: UseColumnOptions,
 ): UseColumnOptionsResult<T> {
-  const { stickyColumns, hasSelection, hasDetailsPanel, layout } = options;
+  const {
+    stickyColumns,
+    hasSelection,
+    hasDetailsPanel,
+    layout,
+    columnDisplay,
+  } = options;
 
   const hasStickyStart = stickyColumns?.start === 1;
 
@@ -49,11 +60,15 @@ function useColumnOptions<T>(
     (stickyExpansion ? ACTION_CELL_WIDTH : 0) +
     (stickySelection ? ACTION_CELL_WIDTH : 0);
 
+  const visibleColumns = useMemo(() => {
+    return orderColumnsAndFilterByVisibility(columnDefinitions, columnDisplay);
+  }, [columnDefinitions, columnDisplay]);
+
   const columns = useMemo(() => {
-    return columnDefinitions.map((colDef, index) => {
+    return visibleColumns.map((colDef, index) => {
       const isFirstSticky = hasStickyStart && index === 0;
       const isLastSticky =
-        stickyColumns?.end === 1 && index === columnDefinitions.length - 1;
+        stickyColumns?.end === 1 && index === visibleColumns.length - 1;
 
       return {
         isSticky: isFirstSticky
@@ -66,12 +81,7 @@ function useColumnOptions<T>(
         colDef,
       };
     });
-  }, [
-    columnDefinitions,
-    hasStickyStart,
-    stickyColumns,
-    stickyFirstColumnOffset,
-  ]);
+  }, [visibleColumns, hasStickyStart, stickyColumns, stickyFirstColumnOffset]);
 
   const totalColSpan =
     columns.length +
@@ -91,6 +101,31 @@ function useColumnOptions<T>(
   };
 }
 
+function orderColumnsAndFilterByVisibility<T>(
+  columns: ColumnDefinition<T>[],
+  columnDisplay?: { id: string; visible: boolean }[],
+): ColumnDefinition<T>[] {
+  if (!columnDisplay) {
+    return columns;
+  }
+
+  const columnMap = new Map(columns.map((col) => [col.id, col]));
+
+  return columnDisplay.reduce<ColumnDefinition<T>[]>((acc, { id, visible }) => {
+    const col = columnMap.get(id);
+
+    if (!col) {
+      consoleWarning(
+        `DataGrid: Column with id "${id}" not found in column definitions. Please check your columnDisplay configuration.`,
+      );
+    }
+
+    if (col && visible) {
+      acc.push(col);
+    }
+    return acc;
+  }, []);
+}
+
 export { useColumnOptions };
-export type { StickyStartState };
-export type { UseColumnOptionsResult };
+export type { StickyStartState, UseColumnOptionsResult };

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

@@ -195,6 +195,7 @@ const DataGridTableInternal = forwardRef<
         hasSelection: tableSelectionState.selection.mode !== "none",
         hasDetailsPanel: !!detailsPanel?.getContent,
         layout,
+        columnDisplay: tableSettings?.columnDisplay,
       },
     );
 
@@ -239,7 +240,7 @@ const DataGridTableInternal = forwardRef<
             aria-busy={isLoading || undefined}
           >
             <DataTableDetailsPanelProvider detailsPanel={detailsPanel}>
-              <DataTableThead>
+              <DataTableThead data-sticky={stickyHeader || undefined}>
                 <DataTableTr>
                   {columns.map(
                     ({ isSticky, isStickyLast, stickyLeftOffset, colDef }) => {

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

@@ -51,18 +51,15 @@ const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
     },
     forwardedRef,
   ) => {
-    const { layout, stickyHeader, selectionState, onRowAction } =
+    const { layout, selectionState, onRowAction, tableItems } =
       useDataTableContext();
     const { location } = useDataTableLocation();
-    const { tableItems } = useDataTableContext();
 
     const renderFillerCell = layout === "fixed" && children;
 
     const selected =
       selectionState.selection.isRowSelected(rowId ?? "") ?? selectedProp;
 
-    const isSticky = location === "thead" && stickyHeader;
-
     const handleClick =
       location === "tbody" &&
       rowId !== undefined &&
@@ -131,7 +128,6 @@ const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
         ref={forwardedRef}
         className={cl("aksel-data-table__tr", className)}
         data-selected={selected}
-        data-sticky={isSticky || undefined}
       >
         <RowExpansionCell rowId={rowId} />
         <RowSelectionCell rowId={rowId} />

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

@@ -31,6 +31,16 @@ type DataGridSettings = {
    * @default "medium"
    */
   textSize?: "small" | "medium";
+  /**
+   * Optional configuration for column order and visibility.
+   *
+   * If provided, only columns listed here are rendered, and the array order
+   * determines the rendered column order.
+   *
+   * Set `visible: false` to hide a column without removing it from the list.
+   * Each `id` must be unique and match a column `id` in the `columns` prop.
+   */
+  columnDisplay?: { id: string; visible: boolean }[];
 };
 
 export type { DataGridSettings };

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

@@ -97,6 +97,7 @@ const DataGridInternal = forwardRef<HTMLDivElement, DataGridProps<any>>(
         truncateContent: settings?.truncateContent,
         stickyColumns: settings?.stickyColumns ?? {},
         textSize: settings?.textSize ?? "medium",
+        columnDisplay: settings?.columnDisplay,
       }),
       [
         settings?.rowDensity,
@@ -104,6 +105,7 @@ const DataGridInternal = forwardRef<HTMLDivElement, DataGridProps<any>>(
         settings?.truncateContent,
         settings?.stickyColumns,
         settings?.textSize,
+        settings?.columnDisplay,
       ],
     );
 

package/src/primitives/bleed/Bleed.tsx

@@ -13,7 +13,6 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
    * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space)
    * or an object of spacing tokens for different breakpoints.
    *
-   * The `px` value is useful to nudge by just 1px.
    * The `full` value is used to extend the margin to the full width of the parent.
    *
    * @example
@@ -29,7 +28,6 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
    * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space)
    * or an object of spacing tokens for different breakpoints.
    *
-   * The `px` value is useful to nudge by just 1px.
    * This prop does **not** accept the `full` value.
    *
    * @example

package/src/utils/components/dismissablelayer/DismissableLayer.tsx

@@ -460,6 +460,7 @@ const DismissableLayer = forwardRef<HTMLDivElement, DismissableLayerProps>(
             () => {
               pointerDownOutside.onPointerDownCapture();
               pointerUpOutside.onPointerDownCapture();
+              focusOutside.onPointerDownCapture();
             },
           )}
           onPointerUpCapture={composeEventHandlers(

package/src/utils/components/dismissablelayer/util/useFocusOutside.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { useEventCallback } from "../../../hooks";
+import { useEventCallback, useTimeout } from "../../../hooks";
 import {
   CUSTOM_EVENTS,
   CustomFocusEvent,
@@ -16,6 +16,8 @@ export function useFocusOutside(
 ) {
   const handleFocusOutside = useEventCallback(callback) as EventListener;
   const isFocusInsideReactTreeRef = useRef(false);
+  const skipFocusCheckRef = useRef(false);
+  const timeout = useTimeout();
 
   useEffect(() => {
     if (!enabled) {
@@ -23,7 +25,11 @@ export function useFocusOutside(
     }
 
     const handleFocus = (event: FocusEvent) => {
-      if (event.target && !isFocusInsideReactTreeRef.current) {
+      if (
+        event.target &&
+        !isFocusInsideReactTreeRef.current &&
+        !skipFocusCheckRef.current
+      ) {
         const eventDetail = { originalEvent: event };
 
         /**
@@ -59,5 +65,11 @@ export function useFocusOutside(
     onBlurCapture: () => {
       isFocusInsideReactTreeRef.current = false;
     },
+    onPointerDownCapture: () => {
+      skipFocusCheckRef.current = true;
+      timeout.start(0, () => {
+        skipFocusCheckRef.current = false;
+      });
+    },
   };
 }

package/src/utils/hooks/useControllableState.ts

@@ -25,16 +25,18 @@ export function useControllableState<StateT, ChangeT extends StateT = StateT>({
   const controlled = valueProp !== undefined;
   const value = controlled ? valueProp : uncontrolledState;
 
-  const setValue = useEventCallback((next: React.SetStateAction<ChangeT>) => {
-    const setter = next as (prevState?: StateT) => ChangeT;
-    const nextValue = typeof next === "function" ? setter(value) : next;
+  const setValue = useEventCallback(
+    (next: ChangeT | ((prevState: StateT) => ChangeT)) => {
+      const setter = next as (prevState?: StateT) => ChangeT;
+      const nextValue = typeof next === "function" ? setter(value) : next;
 
-    if (!controlled) {
-      setUncontrolledState(nextValue);
-    }
+      if (!controlled) {
+        setUncontrolledState(nextValue);
+      }
 
-    onChangeProp(nextValue);
-  });
+      onChangeProp(nextValue);
+    },
+  );
 
   return [value, setValue] as const;
 }