@navikt/ds-react 8.10.2 → 8.10.4

package/src/data/table/sub-row-toggle/DataTableSubRowToggle.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { ChevronDownIcon, ChevronRightIcon } from "@navikt/aksel-icons";
+import { Button } from "../../../button";
+import { type ItemDetail, useTableItemsContext } from "../hooks/useTableItems";
+
+function DataTableSubRowToggle({ details }: { details: ItemDetail<any> }) {
+  const { isSubRowExpanded, onExpandedRowIdsChange } = useTableItemsContext();
+
+  const subRows = details.children;
+  const hasSubRows = subRows && subRows.length > 0;
+  const isRowExpanded = isSubRowExpanded(details.id);
+
+  return (
+    <div className="aksel-data-table__nested-toggle">
+      {hasSubRows && (
+        <Button
+          variant="tertiary"
+          data-color="neutral"
+          size="small"
+          onClick={(e) => {
+            e.stopPropagation();
+            onExpandedRowIdsChange(details.id);
+          }}
+          aria-expanded={isRowExpanded}
+          aria-label={isRowExpanded ? "Skjul under-rader" : "Vis under-rader"}
+          icon={
+            isRowExpanded ? (
+              <ChevronDownIcon aria-hidden />
+            ) : (
+              <ChevronRightIcon aria-hidden />
+            )
+          }
+        />
+      )}
+    </div>
+  );
+}
+
+export { DataTableSubRowToggle };

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

@@ -15,9 +15,9 @@ import { cl, composeEventHandlers } from "../../../utils/helpers";
 import { DataTableBaseCell } from "../base-cell/DataTableBaseCell";
 import { DataTableColumnHeader } from "../column-header/DataTableColumnHeader";
 import {
-  getDataTableExpansionId,
-  useDataTableExpansion,
-} from "../hooks/useTableExpansion";
+  getDataTableDetailsPanelId,
+  useDataTableDetailsPanel,
+} from "../hooks/useTableDetailsPanel";
 import {
   useDataTableContext,
   useDataTableLocation,
@@ -46,13 +46,8 @@ const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
     },
     forwardedRef,
   ) => {
-    const {
-      layout,
-      stickyHeader,
-      selectionState,
-      onRowClick,
-      disableRowSelectionOnClick,
-    } = useDataTableContext();
+    const { layout, stickyHeader, selectionState, onRowClick } =
+      useDataTableContext();
     const { location } = useDataTableLocation();
 
     const renderFillerCell = layout === "fixed" && children;
@@ -81,7 +76,7 @@ const DataTableTr = forwardRef<HTMLTableRowElement, DataTableTrProps>(
             }
 
             if (
-              !disableRowSelectionOnClick &&
+              !selectionState.disableRowSelectionOnClick &&
               selectionState.selection.selectionMode !== "none"
             ) {
               selectionState.selection.toggleSelection(rowId);
@@ -130,7 +125,7 @@ function RowExpansionCell({ rowId }: { rowId?: string | number }) {
     isAllExpanded,
     toggleAll,
     showExpandAll,
-  } = useDataTableExpansion();
+  } = useDataTableDetailsPanel();
 
   if (!enableDetailsPanel) {
     return null;
@@ -143,6 +138,7 @@ function RowExpansionCell({ rowId }: { rowId?: string | number }) {
           width={SELECTION_CELL_WIDTH}
           UNSAFE_isSelection
           data-block-keyboard-nav
+          label=""
           /* isSticky={stickySelection && "start"} */
         />
       );
@@ -160,6 +156,7 @@ function RowExpansionCell({ rowId }: { rowId?: string | number }) {
         width={SELECTION_CELL_WIDTH}
         UNSAFE_isSelection
         data-block-keyboard-nav
+        label=""
         /* isSticky={stickySelection && "start"} */
       />
     );
@@ -171,6 +168,7 @@ function RowExpansionCell({ rowId }: { rowId?: string | number }) {
         textAlign="center"
         width={SELECTION_CELL_WIDTH}
         UNSAFE_isSelection
+        label=""
         /* isSticky={stickySelection && "start"} */
       >
         <Button
@@ -198,7 +196,7 @@ function RowExpansionCell({ rowId }: { rowId?: string | number }) {
 
   const isRowExpanded = isExpanded(rowId);
   const canExpandRow = isDetailsPanelExpandable(rowId);
-  const expansionId = getDataTableExpansionId(tableId, rowId);
+  const expansionId = getDataTableDetailsPanelId(tableId, rowId);
 
   if (!canExpandRow) {
     return <DataTableTd UNSAFE_isSelection preventRowClick />;
@@ -247,6 +245,7 @@ function RowSelectionCell({ rowId }: { rowId?: string | number }) {
         <DataTableColumnHeader
           width={SELECTION_CELL_WIDTH}
           UNSAFE_isSelection
+          label=""
           data-block-keyboard-nav
           isSticky={stickySelection && "start"}
         />
@@ -274,6 +273,7 @@ function RowSelectionCell({ rowId }: { rowId?: string | number }) {
         textAlign="center"
         width={SELECTION_CELL_WIDTH}
         UNSAFE_isSelection
+        label=""
         isSticky={stickySelection && "start"}
       >
         <Label htmlFor={inputId} visuallyHidden>
@@ -289,6 +289,7 @@ function RowSelectionCell({ rowId }: { rowId?: string | number }) {
       <DataTableColumnHeader
         width={SELECTION_CELL_WIDTH}
         UNSAFE_isSelection
+        label=""
         data-block-keyboard-nav
         isSticky={stickySelection && "start"}
       />

package/src/form/checkbox/Checkbox.tsx

@@ -35,6 +35,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             "indeterminate",
             "errorId",
             "readOnly",
+            "className",
           ])}
           {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
           aria-describedby={

package/src/form/radio/Radio.tsx

@@ -24,7 +24,13 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
       >
         <RadioInput
           ref={forwardedRef}
-          {...omit(props, ["children", "size", "description", "readOnly"])}
+          {...omit(props, [
+            "children",
+            "size",
+            "description",
+            "readOnly",
+            "className",
+          ])}
           {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
           aria-describedby={
             cl(inputProps["aria-describedby"], {

package/src/modal/types.ts

@@ -39,7 +39,8 @@ interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
   /**
    * Called when the user tries to close the modal by one of the built-in methods.
    * Used if you want to ask the user for confirmation before closing.
-   * @warning Will not always be called when pressing Esc. See `onCancel` for more info.
+   *
+   * **NB:** Will not always be called when pressing Esc. See `onCancel` for more info.
    * @returns Whether to close the modal or not
    */
   onBeforeClose?: () => boolean;
@@ -52,7 +53,8 @@ interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
   onCancel?: React.ReactEventHandler<HTMLDialogElement>;
   /**
    * Whether to close when clicking on the backdrop.
-   * @warning Users may click outside by accident. Don't use if closing can cause data loss, or the modal contains important info.
+   *
+   * **NB:** Users may click outside by accident. Don't use if closing can cause data loss, or the modal contains important info.
    * @default false
    */
   closeOnBackdropClick?: boolean;
@@ -77,13 +79,15 @@ interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
   /**
    * ID of the element that labels the modal.
    * No need to set this manually if the `header` prop is used. A reference to `header.heading` will be created automatically.
-   * @warning If not using `header`, you should set either `aria-labelledby` or `aria-label`.
+   *
+   * **NB:** If not using `header`, you should set either `aria-labelledby` or `aria-label`.
    */
   "aria-labelledby"?: string;
   /**
    * String value that labels the modal.
    * No need to set this if the `header` prop is used.
-   * @warning If not using `header`, you should set either `aria-labelledby` or `aria-label`.
+   *
+   * **NB:** If not using `header`, you should set either `aria-labelledby` or `aria-label`.
    */
   "aria-label"?: string;
 }

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

@@ -342,7 +342,7 @@ const DismissableLayer = forwardRef<HTMLDivElement, DismissableLayerProps>(
       if (disableOutsidePointerEvents) {
         if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
           originalBodyPointerEvents = ownerDoc.body.style.pointerEvents;
-          ownerDoc.body.style.pointerEvents = "none"; // eslint-disable-line react-hooks/immutability
+          ownerDoc.body.style.pointerEvents = "none";
         }
         context.layersWithOutsidePointerEventsDisabled.add(node);
       }

package/src/utils/components/floating/Floating.tsx

@@ -36,6 +36,22 @@ import {
   transformOrigin,
 } from "./Floating.utils";
 
+/**
+ * Used for menus that prefer top/bottom placements and
+ * use height-var to limit their height.
+ */
+const MENU_COLLISION_AVOIDANCE = {
+  fallbackAxisSide: "none",
+} as const;
+
+/**
+ * Used by regular popovers that usually aren't scrollable and are allowed to
+ * freely flip to any axis of placement.
+ */
+const POPOVER_COLLISION_AVOIDANCE = {
+  fallbackAxisSide: "end",
+} as const;
+
 /**
  * Floating Root
  */
@@ -189,6 +205,7 @@ interface FloatingContentProps extends HTMLAttributes<HTMLDivElement> {
   hideWhenDetached?: boolean;
   updatePositionStrategy?: "optimized" | "always";
   fallbackPlacements?: FlipOptions["fallbackPlacements"];
+  fallbackAxisSideDirection?: FlipOptions["fallbackAxisSideDirection"];
   onPlaced?: () => void;
   /**
    * @default true
@@ -225,6 +242,7 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
       fallbackPlacements,
       enabled = true,
       autoUpdateWhileMounted = true,
+      fallbackAxisSideDirection = POPOVER_COLLISION_AVOIDANCE.fallbackAxisSide,
       ...contentProps
     }: FloatingContentProps,
     forwardedRef,
@@ -245,10 +263,31 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
     const desiredPlacement = (side +
       (align !== "center" ? "-" + align : "")) as Placement;
 
+    /**
+     * Create a bias to the preferred side.
+     * On iOS, when the mobile software keyboard opens, the input is exactly centered
+     * in the viewport, but this can cause it to flip to the top undesirably.
+     */
+    const bias = 1;
+    const biasTop = side === "bottom" ? bias : 0;
+    const biasBottom = side === "top" ? bias : 0;
+    const biasLeft = side === "right" ? bias : 0;
+    const biasRight = side === "left" ? bias : 0;
+
     const collisionPadding =
       typeof collisionPaddingProp === "number"
-        ? collisionPaddingProp
-        : { top: 0, right: 0, bottom: 0, left: 0, ...collisionPaddingProp };
+        ? {
+            top: collisionPaddingProp + biasTop,
+            right: collisionPaddingProp + biasRight,
+            bottom: collisionPaddingProp + biasBottom,
+            left: collisionPaddingProp + biasLeft,
+          }
+        : {
+            top: (collisionPaddingProp.top || 0) + biasTop,
+            right: (collisionPaddingProp.right || 0) + biasRight,
+            bottom: (collisionPaddingProp.bottom || 0) + biasBottom,
+            left: (collisionPaddingProp.left || 0) + biasLeft,
+          };
 
     const boundary = Array.isArray(collisionBoundary)
       ? collisionBoundary
@@ -256,20 +295,13 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
 
     const hasExplicitBoundaries = boundary.length > 0;
 
-    /**
-     * .filter(x => x !== null) does not narrow the type of the array enough.
-     */
-    function isNotNull<T>(value: T | null): value is T {
-      return value !== null;
-    }
-
+    /* https://floating-ui.com/docs/detectOverflow#boundary */
     const detectOverflowOptions: FlipOptions = {
       padding: collisionPadding,
       boundary: boundary.filter(isNotNull),
       // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
       altBoundary: hasExplicitBoundaries,
-      /* https://floating-ui.com/docs/flip#fallbackaxissidedirection */
-      fallbackAxisSideDirection: "end",
+      fallbackAxisSideDirection,
       fallbackPlacements,
     };
 
@@ -308,7 +340,11 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
             crossAxis: false,
             limiter: limitShift(),
           }),
-        avoidCollisions && flip({ ...detectOverflowOptions }),
+        avoidCollisions &&
+          flip({
+            ...detectOverflowOptions,
+            padding: collisionPadding,
+          }),
         size({
           ...detectOverflowOptions,
           apply: ({ elements, rects, availableWidth, availableHeight }) => {
@@ -437,7 +473,14 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
   },
 );
 
+/**
+ * .filter(x => x !== null) does not narrow the type of the array enough.
+ */
+function isNotNull<T>(value: T | null): value is T {
+  return value !== null;
+}
+
 Floating.Anchor = FloatingAnchor;
 Floating.Content = FloatingContent;
 
-export { Floating };
+export { Floating, MENU_COLLISION_AVOIDANCE, POPOVER_COLLISION_AVOIDANCE };

package/src/utils/components/floating-menu/Menu.tsx

@@ -9,7 +9,7 @@ import {
   useMergeRefs,
 } from "../../hooks";
 import { DismissableLayer } from "../dismissablelayer/DismissableLayer";
-import { Floating } from "../floating/Floating";
+import { Floating, MENU_COLLISION_AVOIDANCE } from "../floating/Floating";
 import { FocusBoundary } from "../focus-boundary/FocusBoundary";
 import { RovingFocus, RovingFocusProps } from "./parts/RovingFocus";
 import {
@@ -328,6 +328,9 @@ const MenuContentInternal = forwardRef<
               data-state={getOpenState(context.open)}
               data-aksel-menu-content=""
               dir="ltr"
+              fallbackAxisSideDirection={
+                MENU_COLLISION_AVOIDANCE.fallbackAxisSide
+              }
               {...rest}
               ref={composedRefs}
               style={{ outline: "none", ...rest.style }}

package/src/utils/helpers/create-strict-context.tsx

@@ -65,7 +65,7 @@ function createStrictContext<T>(options: {
 
   function Provider({ children, ...context }: ProviderProps<T>) {
     // biome-ignore lint/correctness/useExhaustiveDependencies: Object.values(context) includes all dependencies.
-    const value = React.useMemo(() => context, Object.values(context)) as T; // eslint-disable-line react-hooks/exhaustive-deps, react-hooks/use-memo
+    const value = React.useMemo(() => context, Object.values(context)) as T; // eslint-disable-line react-hooks/exhaustive-deps
 
     return <Context.Provider value={value}>{children}</Context.Provider>;
   }

package/src/utils/hooks/useControllableState.ts

@@ -2,28 +2,31 @@
 import { useState } from "react";
 import { useEventCallback } from "./useEventCallback";
 
-export interface UseControllableStateProps<T> {
-  value?: T;
-  defaultValue: T | (() => T);
-  onChange?: (value: T) => void;
+export interface UseControllableStateProps<
+  StateT,
+  ChangeT extends StateT = StateT,
+> {
+  value?: StateT;
+  defaultValue: StateT | (() => StateT);
+  onChange?: (value: ChangeT) => void;
 }
 
 /**
  * `useControllableState` returns the state and function that updates the state, just like React.useState does.
  */
-export function useControllableState<T>({
+export function useControllableState<StateT, ChangeT extends StateT = StateT>({
   value: valueProp,
   defaultValue,
   onChange,
-}: UseControllableStateProps<T>) {
+}: UseControllableStateProps<StateT, ChangeT>) {
   const onChangeProp = useEventCallback(onChange);
 
   const [uncontrolledState, setUncontrolledState] = useState(defaultValue);
   const controlled = valueProp !== undefined;
   const value = controlled ? valueProp : uncontrolledState;
 
-  const setValue = useEventCallback((next: React.SetStateAction<T>) => {
-    const setter = next as (prevState?: T) => T;
+  const setValue = useEventCallback((next: React.SetStateAction<ChangeT>) => {
+    const setter = next as (prevState?: StateT) => ChangeT;
     const nextValue = typeof next === "function" ? setter(value) : next;
 
     if (!controlled) {

package/src/utils/hooks/useValueAsRef.ts

@@ -6,7 +6,7 @@ import { useRefWithInit } from "./useRefWithInit";
 function useValueAsRef<T>(value: T) {
   const latest = useRefWithInit(createLatestRef, value).current!;
 
-  latest.next = value;
+  latest.next = value; // eslint-disable-line react-hooks/immutability
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useClientLayoutEffect(latest.effect);

package/src/utils-external/hooks/useId.ts

@@ -19,7 +19,7 @@ function useGlobalId(idOverride?: string): string | undefined {
       // We can't use it server-side.
       // If you want to use random values please consider the Birthday Problem: https://en.wikipedia.org/wiki/Birthday_problem
       globalId += 1;
-      setDefaultId(`aksel-id-${globalId}`);
+      setDefaultId(`aksel-id-${globalId}`); // eslint-disable-line react-hooks/set-state-in-effect
     }
   }, [defaultId]);
   return id;

package/cjs/data/table/hooks/useTableExpansion.d.ts

@@ -1,29 +0,0 @@
-import React from "react";
-import type { ItemDetail } from "./useTableItems";
-type DataTableExpansionContextT = {
-    isExpanded: (id: string | number) => boolean;
-    isDetailsPanelExpandable: (id: string | number) => boolean;
-    toggleExpansion: (id: string | number) => void;
-    toggleAll: () => void;
-    isAllExpanded: boolean;
-    getDetailsPanelContent?: (row: unknown) => React.ReactNode;
-    getDetailsPanelHeight?: (row: unknown) => number | "auto";
-    showExpandAll: boolean;
-    enableDetailsPanel: boolean;
-};
-declare const useDataTableExpansion: <S extends boolean = true>(strict?: S | undefined) => S extends true ? DataTableExpansionContextT : DataTableExpansionContextT | undefined;
-type TableExpansionOptions<T> = {
-    detailsPanelRowIds?: (string | number)[];
-    defaultDetailsPanelRowIds?: (string | number)[];
-    onDetailsPanelChange?: (ids: (string | number)[]) => void;
-    itemDetails: Map<T, ItemDetail<T>>;
-    getDetailsPanelContent?: (row: T) => React.ReactNode;
-    isDetailsPanelExpandable?: (rowData: T) => boolean;
-    getDetailsPanelHeight?: (row: T) => number | "auto";
-    showExpandAll?: boolean;
-};
-declare function getDataTableExpansionId(tableId: string, rowId: string | number): string;
-declare function DataTableExpansionProvider<T>({ children, detailsPanelRowIds, defaultDetailsPanelRowIds, onDetailsPanelChange, itemDetails, getDetailsPanelContent, isDetailsPanelExpandable, getDetailsPanelHeight, showExpandAll, }: TableExpansionOptions<T> & {
-    children: React.ReactNode;
-}): React.JSX.Element;
-export { DataTableExpansionProvider, getDataTableExpansionId, useDataTableExpansion, };

package/cjs/data/table/hooks/useTableExpansion.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTableExpansion.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useTableExpansion.tsx"],"names":[],"mappings":"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"}

package/cjs/data/table/root/DataTableAuto.d.ts

@@ -1,174 +0,0 @@
-/** biome-ignore-all lint/correctness/useHookAtTopLevel: False positive because of the way forwardRef() is added */
-import React from "react";
-import { type SelectionProps } from "../hooks/useTableSelection";
-import { type TableSortOptions } from "../hooks/useTableSort";
-import type { ColumnDefinitions } from "./DataTable.types";
-interface DataTableProps<T> extends React.HTMLAttributes<HTMLTableElement>, SelectionProps, TableSortOptions {
-    children?: never;
-    /**
-     * 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;
-    /**
-     * Enables keyboard navigation for table rows and cells.
-     * @default false
-     */
-    withKeyboardNav?: boolean;
-    /**
-     * Custom callback to determine if navigation should be blocked.
-     * Called before default blocking logic.
-     * Requires `withKeyboardNav` to be `true`.
-     */
-    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";
-    /**
-     * Defines the columns of the table and how to render them.
-     *
-     *
-     * Each column definition should have a unique `id` (or use the column index as fallback) and a `cell`-renderer function that takes the row data as argument and returns a React node.
-     */
-    columnDefinitions: ColumnDefinitions<T>;
-    /**
-     * The data to display in the table.
-     *
-     *
-     * Each object in the array represents a row, and the properties of the object are used to render the cells based on the `columnDefinitions`.
-     */
-    data: T[];
-    /**
-     * 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: T, index: number) => string | number;
-    /**
-     * 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?: {
-        first?: "1";
-        last?: "1";
-    };
-    /**
-     * @default false
-     */
-    stickyHeader?: boolean;
-    /**
-     * Callback invoked when a data row is clicked.
-     * Not called when clicking header, loading, or empty-state rows.
-     */
-    onRowClick?: (rowId: string | number, event: React.MouseEvent<HTMLTableRowElement>) => void;
-    /**
-     * Content to render when `data` is empty.
-     * Rendered inside a `DataTable.EmptyState` row spanning all columns.
-     */
-    emptyState?: React.ReactNode;
-    /**
-     * Shows the table in a loading state.
-     *
-     * - When `loadingState` is provided, it is rendered inside a `DataTable.LoadingState` row.
-     * - When `loadingState` is **not** provided, skeleton placeholder rows are rendered instead.
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * Custom content to render when `isLoading` is `true`.
-     * Rendered inside a `DataTable.LoadingState` row spanning all columns.
-     * When omitted, skeleton rows are rendered based on `loadingRows`.
-     */
-    loadingState?: React.ReactNode;
-    /**
-     * Number of skeleton rows to render when `isLoading` is `true` and no `loadingState` is provided.
-     *
-     *
-     * If not provided, the rendered content will get a temporarily overlay while loading
-     */
-    loadingRows?: number;
-    /**
-     * Visually hidden label announced to screen readers when skeleton rows are shown.
-     * Only used when `isLoading` is `true` and no `loadingState` is provided.
-     * @default "Laster innhold"
-     */
-    loadingLabel?: string;
-    /**
-     * Renders a details panel below the row when expanded.
-     * When provided, an expand toggle column is added automatically.
-     */
-    getDetailsPanelContent?: (rowData: T) => React.ReactNode;
-    /**
-     * Determines whether a row can be expanded to show details panel content.
-     * @default () => true
-     */
-    isDetailsPanelExpandable?: (rowData: T) => boolean;
-    /**
-     * Controlled list of expanded row IDs.
-     * Use with `onDetailsPanelChange` for controlled usage, or `defaultDetailsPanelRowIds` for uncontrolled.
-     */
-    detailsPanelRowIds?: (string | number)[];
-    /**
-     * Initial list of expanded row IDs for uncontrolled usage.
-     * @default []
-     */
-    defaultDetailsPanelRowIds?: (string | number)[];
-    /**
-     * Called when the list of expanded row IDs changes.
-     *
-     *
-     * TODO:
-     * - Docs: This pattern is called "Master / Detail" in general terms
-     */
-    onDetailsPanelChange?: (ids: (string | number)[]) => void;
-    /**
-     * Returns the height (in px) or `"auto"` for a row's details panel.
-     * When a number is returned, the panel scrolls within that fixed height.
-     * @default "auto"
-     */
-    getDetailsPanelHeight?: (rowData: T) => number | "auto";
-    /**
-     * Shows an expand-all toggle button in the expand column header.
-     * @default false
-     */
-    showExpandAll?: boolean;
-    /**
-     * Function to get sub-rows for a given row, used for nested rows.
-     * When provided, an expand toggle column is added automatically.
-     */
-    getSubRows?: (rowData: T) => T[];
-    expandedSubRowIds?: (string | number)[];
-    defaultExpandedSubRowIds?: (string | number)[];
-    isSubRowExpandable?: (rowData: T) => boolean;
-    onExpandedSubRowIdsChange?: (ids: (string | number)[]) => void;
-}
-declare const DataTableAuto: <T>(props: DataTableProps<T> & React.RefAttributes<HTMLTableElement>) => React.ReactElement | null;
-export { DataTableAuto };
-export type { DataTableProps };
-export default DataTableAuto;