@navikt/ds-react 8.10.5 → 8.11.0

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

@@ -1,562 +0,0 @@
-/** biome-ignore-all lint/correctness/useHookAtTopLevel: False positive because of the way forwardRef() is added */
-import React, {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { Skeleton } from "../../../skeleton";
-import { useId } from "../../../utils-external";
-import { Slot } from "../../../utils/components/slot/Slot";
-import { cl } from "../../../utils/helpers";
-import { useMergeRefs } from "../../../utils/hooks";
-import { DataTableBaseCell } from "../base-cell/DataTableBaseCell";
-import { DataTableColumnHeader } from "../column-header/DataTableColumnHeader";
-import { DataTableDetailsPanelRow } from "../details-panel-row/DataTableDetailsPanelRow";
-import { DataTableEmptyState } from "../empty-state/DataTableEmptyState";
-import { useColumnOptions } from "../hooks/useColumnOptions";
-import {
-  DataTableDetailsPanelProvider,
-  type DetailsPanelProps,
-} from "../hooks/useTableDetailsPanel";
-import {
-  type SubRowsProps,
-  TableItemsProvider,
-  useTableItems,
-  useTableItemsContext,
-} from "../hooks/useTableItems";
-import { useTableKeyboardNav } from "../hooks/useTableKeyboardNav";
-import {
-  type SelectionProps,
-  useTableSelection,
-} from "../hooks/useTableSelection";
-import { type TableSortOptions, useTableSort } from "../hooks/useTableSort";
-import { DataTableLoadingState } from "../loading-state/DataTableLoadingState";
-import { DataTableSubRowToggle } from "../sub-row-toggle/DataTableSubRowToggle";
-import { DataTableTbody } from "../tbody/DataTableTbody";
-import { DataTableThead } from "../thead/DataTableThead";
-import { DataTableTr } from "../tr/DataTableTr";
-import type { ColumnDefinitions } from "./DataTable.types";
-import {
-  DataTableContextProvider,
-  useDataTableContext,
-} from "./DataTableRoot.context";
-
-interface DataTableProps<T>
-  extends React.HTMLAttributes<HTMLTableElement>, 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; // 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 true
-   */
-  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) => 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 true
-   */
-  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;
-  loading?: {
-    /**
-     * 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;
-  };
-
-  /**
-   * Function to get sub-rows for a given row, used for nested rows.
-   * When provided, an expand toggle column is added automatically.
-   *
-   *
-   * TODO:
-   * - Table might need to be implemented with role="treegrid" for a11y when having nested rows.
-   */
-  selection?: SelectionProps;
-  subRows?: SubRowsProps<T>;
-  detailsPanel?: DetailsPanelProps<T>;
-}
-
-function DataTableInner<T>(
-  {
-    className,
-    id,
-    rowDensity = "normal",
-    withKeyboardNav = true,
-    zebraStripes = false,
-    truncateContent = true,
-    shouldBlockNavigation,
-    layout = "fixed",
-    selection,
-    data,
-    columnDefinitions,
-    getRowId,
-    stickyColumns,
-    stickyHeader = true,
-    sort: sortProp,
-    defaultSort = [],
-    onSortChange,
-    onRowClick,
-    emptyState,
-    loading,
-    detailsPanel,
-    subRows,
-    ...rest
-  }: DataTableProps<T>,
-  forwardedRef: React.ForwardedRef<HTMLTableElement>,
-) {
-  const { sortState, onSortClick } = useTableSort({
-    defaultSort,
-    onSortChange,
-    sort: sortProp,
-  });
-
-  const tableItems = useTableItems({
-    items: data,
-    getRowId,
-    subRows,
-  });
-
-  const tableSelectionState = useTableSelection({
-    selection,
-    visibleRowIds: tableItems.visibleRowIds,
-    childRowIdsById: tableItems.childRowIdsById,
-  });
-
-  const { columns, stickySelection } = useColumnOptions<T>(columnDefinitions, {
-    stickyColumns,
-    selectionMode: tableSelectionState.selection.selectionMode,
-  });
-
-  const {
-    isLoading = false,
-    loadingState,
-    loadingRows,
-    loadingLabel = "Laster innhold",
-  } = loading || {};
-
-  const fullWidthColSpan = useMemo(() => {
-    return (
-      columns.length +
-      (layout === "fixed" ? 1 : 0) +
-      (tableSelectionState.selection.selectionMode !== "none" ? 1 : 0) +
-      (detailsPanel?.getContent ? 1 : 0)
-    );
-  }, [
-    columns,
-    layout,
-    tableSelectionState.selection.selectionMode,
-    detailsPanel,
-  ]);
-
-  const tableId = useId(id);
-
-  return (
-    <DataTableContextProvider
-      layout={layout}
-      withKeyboardNav={withKeyboardNav}
-      selectionState={tableSelectionState}
-      stickySelection={stickySelection}
-      stickyHeader={stickyHeader}
-      tableId={tableId}
-      showLoadingSkeletons={isLoading && loadingState == null}
-      onRowClick={onRowClick}
-      isLoading={isLoading}
-      showLoadingOverlay={isLoading && !loadingState && !loadingRows}
-      columns={columns}
-      fullWidthColSpan={fullWidthColSpan}
-    >
-      <TableItemsProvider
-        itemDetails={tableItems.itemDetails}
-        items={tableItems.items}
-        visibleRowIds={tableItems.visibleRowIds}
-        onExpandedRowIdsChange={tableItems.onExpandedRowIdsChange}
-        isSubRowExpanded={tableItems.isSubRowExpanded}
-      >
-        <DataTableDetailsPanelProvider detailsPanel={detailsPanel}>
-          <TableElementWrapper
-            shouldBlockNavigation={shouldBlockNavigation}
-            enabled={withKeyboardNav}
-          >
-            <table
-              {...rest}
-              ref={forwardedRef}
-              className={cl("aksel-data-table", className)}
-              data-zebra-stripes={zebraStripes}
-              data-truncate-content={truncateContent}
-              data-density={rowDensity}
-              data-layout={layout}
-              data-loading={isLoading || undefined}
-              aria-busy={isLoading || undefined}
-            >
-              <DataTableThead>
-                <DataTableTr>
-                  {columns.map(({ isSticky, colDef }) => {
-                    const sortEntry = sortState.find(
-                      (s) => s.columnId === colDef.id,
-                    );
-                    const sortDirection = sortEntry?.direction ?? "none";
-                    return (
-                      <DataTableColumnHeader
-                        resizable={colDef.resizable}
-                        width={colDef.width}
-                        defaultWidth={colDef.defaultWidth}
-                        autoWidth={colDef.autoWidth}
-                        minWidth={colDef.minWidth}
-                        maxWidth={colDef.maxWidth}
-                        onWidthChange={colDef.onWidthChange}
-                        textAlign={colDef.align ?? "left"}
-                        key={colDef.id}
-                        isSticky={isSticky}
-                        sortable={colDef.sortable}
-                        sortDirection={sortDirection}
-                        onSortClick={(event) => onSortClick(colDef.id, event)}
-                        label={colDef.label}
-                      >
-                        {colDef.header ?? colDef.label}
-                      </DataTableColumnHeader>
-                    );
-                  })}
-                </DataTableTr>
-              </DataTableThead>
-
-              <DataTableTbody>
-                <DataTableTBodyContent
-                  loadingState={loadingState}
-                  loadingRows={loadingRows}
-                  loadingLabel={loadingLabel}
-                  emptyState={emptyState}
-                />
-              </DataTableTbody>
-            </table>
-          </TableElementWrapper>
-        </DataTableDetailsPanelProvider>
-      </TableItemsProvider>
-    </DataTableContextProvider>
-  );
-}
-
-/**
- * Temp optimization to avoid re-renders on every keyboard-move, selection change etc
- */
-function TableElementWrapper({
-  children,
-  enabled,
-  shouldBlockNavigation,
-}: {
-  children: React.ReactNode;
-  shouldBlockNavigation?: (event: KeyboardEvent) => boolean;
-  enabled: boolean;
-}) {
-  const [applyStickyStyles, setApplyStickyStyles] = useState<boolean>(false);
-
-  const tableWrapperRef = useRef<HTMLDivElement>(null);
-  const tableRef = useRef<HTMLTableElement>(null);
-  const rafRef = useRef<number | null>(null);
-  const { tabIndex, setTableRef } = useTableKeyboardNav({
-    enabled,
-    shouldBlockNavigation,
-  });
-
-  const mergedTableRefs = useMergeRefs(tableRef, setTableRef);
-
-  const updateStickyStyles = useCallback(() => {
-    if (!tableWrapperRef.current) {
-      return;
-    }
-
-    const doesWrapperHasScroll =
-      tableWrapperRef.current.scrollWidth > tableWrapperRef.current.clientWidth;
-
-    setApplyStickyStyles(doesWrapperHasScroll);
-  }, []);
-
-  const scheduleStickyStylesUpdate = useCallback(() => {
-    if (rafRef.current !== null) {
-      return;
-    }
-
-    rafRef.current = requestAnimationFrame(() => {
-      rafRef.current = null;
-      updateStickyStyles();
-    });
-  }, [updateStickyStyles]);
-
-  useEffect(
-    function observeAndUpdateStickyStyles() {
-      const tableWrapperElement = tableWrapperRef.current;
-
-      if (!tableWrapperElement) {
-        return;
-      }
-
-      const handleResize = () => scheduleStickyStylesUpdate();
-
-      window.addEventListener("resize", handleResize);
-
-      let resizeObserver: ResizeObserver | undefined;
-      if (typeof ResizeObserver !== "undefined") {
-        resizeObserver = new ResizeObserver(handleResize);
-        resizeObserver.observe(tableWrapperElement);
-        if (tableRef.current) {
-          resizeObserver.observe(tableRef.current);
-        }
-      }
-
-      scheduleStickyStylesUpdate();
-
-      return () => {
-        window.removeEventListener("resize", handleResize);
-        resizeObserver?.disconnect();
-        if (rafRef.current !== null) {
-          cancelAnimationFrame(rafRef.current);
-          rafRef.current = null;
-        }
-      };
-    },
-    [scheduleStickyStylesUpdate],
-  );
-
-  return (
-    <div className="aksel-data-table__border-wrapper">
-      <div ref={tableWrapperRef} className="aksel-data-table__scroll-wrapper">
-        <Slot
-          tabIndex={tabIndex}
-          /* @ts-expect-error Ref is not typed correctly to handle this case */
-          ref={mergedTableRefs}
-          data-scroll={applyStickyStyles ? "true" : undefined}
-        >
-          {children}
-        </Slot>
-      </div>
-    </div>
-  );
-}
-
-interface DataTableTBodyContentProps {
-  loadingState: React.ReactNode;
-  loadingLabel: string;
-  loadingRows?: number;
-  emptyState: React.ReactNode;
-}
-
-function DataTableTBodyContent({
-  loadingState,
-  loadingRows,
-  loadingLabel,
-  emptyState,
-}: DataTableTBodyContentProps) {
-  const { items, itemDetails, visibleRowIds } = useTableItemsContext();
-  const { columns, isLoading, fullWidthColSpan } = useDataTableContext();
-
-  if (isLoading && loadingState != null) {
-    return (
-      <DataTableLoadingState colSpan={fullWidthColSpan}>
-        {loadingState}
-      </DataTableLoadingState>
-    );
-  }
-
-  if (isLoading && loadingRows) {
-    return (
-      <>
-        <tr>
-          <td colSpan={fullWidthColSpan} className="aksel-sr-only">
-            {loadingLabel}
-          </td>
-        </tr>
-        {Array.from({ length: loadingRows }, (_, rowIndex) => (
-          <DataTableTr key={`skeleton-row-${rowIndex}`} aria-hidden>
-            {columns.map(({ isSticky, colDef }, colDefIndex) => (
-              <DataTableBaseCell
-                textAlign={colDef.align ?? "left"}
-                key={colDef.id || colDefIndex}
-                as={colDef.isRowHeader ? "th" : "td"}
-                isSticky={isSticky}
-              >
-                <Skeleton variant="text" />
-              </DataTableBaseCell>
-            ))}
-          </DataTableTr>
-        ))}
-      </>
-    );
-  }
-
-  if (items.length === 0 && emptyState !== undefined) {
-    return (
-      <DataTableEmptyState colSpan={fullWidthColSpan}>
-        {emptyState}
-      </DataTableEmptyState>
-    );
-  }
-
-  const renderLoadingAnnouncement = isLoading && !loadingState && !loadingRows;
-
-  return (
-    <>
-      {renderLoadingAnnouncement && (
-        <tr>
-          <td colSpan={fullWidthColSpan} className="aksel-sr-only">
-            {loadingLabel}
-          </td>
-        </tr>
-      )}
-      {items.map((rowData, rowIndex) => {
-        const rowId = visibleRowIds[rowIndex];
-        const details = rowId != null ? itemDetails.get(rowId) : undefined;
-
-        /* Should in theory be impossible. Look about typing this? */
-        if (!details) {
-          return null;
-        }
-
-        const hasSubRows = details.children.length > 0;
-
-        return (
-          <React.Fragment key={details.id}>
-            <DataTableTr rowId={details.id}>
-              {columns.map(({ isSticky, colDef }, colDefIndex) => {
-                const renderNestedToggle = colDefIndex === 0 && hasSubRows;
-                const renderNestedIndent =
-                  colDefIndex === 0 && (details.level > 0 || hasSubRows);
-
-                const style: React.CSSProperties = {
-                  "--__axc-data-table-nested-depth": details.level,
-                };
-
-                return (
-                  <DataTableBaseCell
-                    textAlign={colDef.align ?? "left"}
-                    key={colDef.id || colDefIndex}
-                    as={colDef.isRowHeader ? "th" : "td"}
-                    isSticky={isSticky}
-                    data-nested={renderNestedIndent || undefined}
-                    style={style}
-                  >
-                    {renderNestedToggle && (
-                      <DataTableSubRowToggle details={details} />
-                    )}
-                    {colDef.cell(rowData)}
-                  </DataTableBaseCell>
-                );
-              })}
-            </DataTableTr>
-            <DataTableDetailsPanelRow rowId={details.id} rowData={rowData} />
-          </React.Fragment>
-        );
-      })}
-    </>
-  );
-}
-
-const DataTable = forwardRef(DataTableInner) as <T>(
-  props: DataTableProps<T> & React.RefAttributes<HTMLTableElement>,
-) => React.ReactElement | null;
-
-export { DataTable };
-export type { DataTableProps };
-export default DataTable;

package/src/data/table/root/agent-feature-gap.md

@@ -1,96 +0,0 @@
-### Component: DataTable
-
-**Primitive type:** Data table with optional selection, sorting, nested rows, details panels, sticky columns, column resizing, and keyboard cell navigation.
-**Reference libraries:** React Aria Table / Adobe Spectrum TableView, MUI Data Grid, Base UI table patterns. Cloudscape Table is a useful secondary reference for resize/details behavior.
-
-### Launch Review Findings
-
-1. **The auto API has no visible caption slot or caption prop.**
-   Consumers can still pass `aria-label`/`aria-labelledby` through native table props, but `children?: never` means the preview API cannot render a native `caption` or a built-in visible summary/title. Mature table APIs usually provide at least one clear accessible naming path.
-
-2. **Column resizing is present, but the preview API still reads as unfinished.**
-   Resizing is effectively opt-out in fixed layout because `DataTableColumnHeader` defaults `resizable` to `true`. The interaction also still has unfinished accessibility and i18n details, and `onWidthChange` currently fires for every width step while dragging.
-
-3. **Critical behaviors are under-tested for a preview launch.**
-   Existing tests cover selection trees, item expansion state, and low-level keyboard helpers, but not the end-to-end behaviors users will notice first: sorting, details panels, loading states, row click behavior, column resizing, and selection accessibility.
-
-### Feature Gap Table
-
-| #   | Feature                                             | Status     | Priority        | Reference                    | Notes                                                                   |
-| --- | --------------------------------------------------- | ---------- | --------------- | ---------------------------- | ----------------------------------------------------------------------- |
-| 1   | Arrow/Home/End keyboard cell navigation             | ✅ Present | —               | React Aria, MUI              | Good base coverage in helper tests.                                     |
-| 2   | Controlled/uncontrolled sorting                     | ✅ Present | —               | React Aria, MUI              | Supports controlled and uncontrolled sort arrays.                       |
-| 3   | Multi-column sorting                                | ✅ Present | —               | MUI, Spectrum                | Shift-click is supported.                                               |
-| 4   | Controlled/uncontrolled row selection               | ✅ Present | —               | React Aria, MUI              | Single and multiple selection both exist.                               |
-| 5   | Controlled/uncontrolled nested row expansion        | ✅ Present | —               | MUI, Spectrum                | `subRows` API is already solid for preview.                             |
-| 6   | Controlled/uncontrolled details panel expansion     | ✅ Present | —               | MUI                          | Good baseline, limited to top-level rows by design.                     |
-| 7   | Loading overlay / loading rows / empty state        | ✅ Present | —               | MUI, Spectrum                | Baseline states exist.                                                  |
-| 9   | Visible caption / built-in accessible naming path   | ❌ Missing | 🔴 Expected     | React Aria, Spectrum         | Auto API cannot render `caption`; users only get raw HTML attrs.        |
-| 13  | Opt-in / polished column resize API                 | ⚠️ Partial | 🟡 Valuable     | MUI, Cloudscape              | Feature exists, but defaults and a11y polish are not preview-ready yet. |
-| 14  | Per-row disabled selection callback                 | ❌ Missing | 🟡 Valuable     | React Aria, MUI              | Current API only accepts disabled keys, not row-driven logic.           |
-| 15  | Row-level prop/className callback                   | ❌ Missing | 🟡 Valuable     | MUI                          | No way to attach row-specific attrs/classes without custom rendering.   |
-| 16  | Header-group / multi-row header support in auto API | ❌ Missing | 🟢 Nice-to-have | React Aria, MUI              | Current auto API is intentionally flat.                                 |
-| 17  | Accessor shorthand for simple columns               | ❌ Missing | 🟢 Nice-to-have | MUI, TanStack-style patterns | Would reduce boilerplate for simple data tables.                        |
-| 18  | Typeahead row navigation                            | ❌ Missing | 🟢 Nice-to-have | React Aria                   | Useful on large data sets, not necessary for first preview.             |
-| 19  | RTL-aware sticky/nesting layout                     | ❌ Missing | 🟢 Nice-to-have | React Aria, MUI              | Current sticky/nesting CSS is mostly physical, not logical.             |
-
-### Implementation Notes
-
-#### 9. Visible caption / built-in accessible naming path
-
-- **What it does:** Lets consumers provide a native table caption or a clearly supported naming API without dropping to raw HTML attributes.
-- **Reference behavior:** React Aria tables require an accessible label; Spectrum and MUI also expose a clear naming path.
-- **Approach here:** Keep `children` forbidden, but add a `caption?: React.ReactNode` prop that renders a native `caption`. Optionally add `captionProps` for styling hooks.
-- **Props/API additions needed:** `caption?: React.ReactNode`, optionally `captionProps?: React.HTMLAttributes<HTMLTableCaptionElement>`.
-
-#### 13. Opt-in / polished column resize API
-
-- **What it does:** Makes resize behavior predictable and avoids surprising every preview consumer with advanced header affordances.
-- **Reference behavior:** MUI and Cloudscape treat column resize as an explicit feature and spend a lot of API surface on labels, limits, and commit behavior.
-- **Approach here:** Default `resizable` to `false`, add missing slider aria metadata, and only call `onWidthChange` on commit or with a small debounce. Also move hard-coded Norwegian labels into the same i18n pattern as the rest of the component.
-- **Props/API additions needed:** No new public props required for a first pass. The main change is default behavior and polish.
-
-#### 14. Per-row disabled selection callback
-
-- **What it does:** Lets consumers disable selection from row data instead of precomputing key arrays.
-- **Reference behavior:** Many mature table APIs allow row-driven selection rules.
-- **Approach here:** Resolve disabled state during row collection so selection helpers can still work with ids internally.
-- **Props/API additions needed:** `isRowSelectionDisabled?: (rowData: T) => boolean`.
-
-#### 15. Row-level prop/className callback
-
-- **What it does:** Lets consumers add row-specific classes, test hooks, aria hooks, and state styling without replacing the table implementation.
-- **Reference behavior:** MUI exposes row-class callbacks and row metadata hooks.
-- **Approach here:** Apply callbacks when rendering `DataTableTr` so the row id and row data are both available.
-- **Props/API additions needed:** `getRowProps?: (rowData: T, rowId: string | number) => React.HTMLAttributes<HTMLTableRowElement>` or a narrower `getRowClassName` if you want to keep the API tighter.
-
-### Internal Refactors
-
-1. Split the current root into a small orchestration hook plus presentational sub-components. `DataTableRoot.tsx` currently owns state setup, context assembly, loading/empty rendering, row rendering, and sticky-wrapper logic in one file.
-
-2. Replace object-keyed `itemDetails` lookups with id-keyed row entries. This fixes the duplicate-object bug and simplifies details-panel and selection wiring.
-
-3. Unify loading-state presence checks. `DataTableTBodyContent` uses nullish checks for `loadingState`, while `showLoadingOverlay` in the root uses truthiness checks; those should match.
-
-4. Make localization an explicit seam. The component currently hard-codes visible and aria labels such as sort-resize instructions, expand/collapse labels, and selection labels directly in render code.
-
-5. Revisit the resize default and commit path before large-table performance work. Continuous `onWidthChange` callbacks can easily push rerenders through the whole table if consumers control widths externally.
-
-6. Decide whether the preview API is a plain table or the start of a data-grid abstraction. A few current seams, especially keyboard navigation and selection, are already grid-like, while captioning and row-header semantics still assume a plain table model.
-
-### Test Gaps Before Preview
-
-1. Sorting interaction story/test covering click, keyboard activation, and multi-sort.
-2. Details-panel story/test covering expand, collapse, `aria-controls`, and controlled mode.
-3. Loading/empty-state tests covering overlay vs skeleton vs custom loading content.
-4. Row-click tests covering selection interaction, text-selection guard, and interactive-content guard.
-5. Resize tests covering keyboard resize, pointer resize, and form embedding.
-6. Accessibility test coverage for selection labels and row-header semantics once those are implemented.
-
-### Suggested Order For Follow-up Work
-
-1. Fix selection labeling and row-header semantics together.
-2. Add a built-in caption/naming API.
-3. Harden resize defaults and button semantics.
-4. Refactor row metadata to be id-based.
-5. Fill the missing user-facing stories/tests around sort, details, loading, and row click.