@danske/sapphire-react-lab 0.106.3 → 0.107.0

package/build/index.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import React__default, { ReactNode, Key, ReactElement, RefObject } from 'react';
+import React__default, { ReactNode, Key, ReactElement, RefObject, FormEvent } from 'react';
 import * as _react_types_shared from '@react-types/shared';
-import { DOMProps, AriaLabelingProps, PressEvents, FocusableRefValue, CollectionBase, ItemProps } from '@react-types/shared';
+import { DOMProps, AriaLabelingProps, PressEvents, FocusableRefValue, CollectionBase, ItemProps, DisabledBehavior } from '@react-types/shared';
 import * as _danske_sapphire_react from '@danske/sapphire-react';
-import { GlobalDomAttributes, SapphireStyleProps, TypographyHeadingProps, TypographyBodyProps, ListBoxProps, ButtonProps, PopoverTriggerProps, SearchFieldPropsWithRef, IconButtonProps, ThemeVariant, FieldProps } from '@danske/sapphire-react';
+import { GlobalDomAttributes, SapphireStyleProps, TypographyHeadingProps, TypographyBodyProps, ListBoxProps, ButtonProps, PopoverTriggerProps, SearchFieldPropsWithRef, IconButtonProps, ThemeVariant, FieldProps, SapphireViewStyleProps, ColumnAlignment, CellSpacing, StickyPosition } from '@danske/sapphire-react';
 import { DisclosureGroupProps, DisclosureProps, DisclosurePanelProps, BreadcrumbsProps as BreadcrumbsProps$1, BreadcrumbProps, SliderProps as SliderProps$1, SliderThumbProps, TimeValue } from 'react-aria-components';
 import { ComboBoxProps } from 'react-stately/useComboBoxState';
 import { HoverProps } from 'react-aria/useHover';
@@ -11,6 +11,7 @@ import { DropOptions } from 'react-aria/useDrop';
 import { AriaNumberFieldProps } from 'react-aria/useNumberField';
 import { FocusWithinProps } from 'react-aria/useFocusWithin';
 import { AriaTimeFieldProps } from 'react-aria/useTimeField';
+import { SortDirection } from '@react-types/shared/src/collections';
 export { useLocale } from 'react-aria/I18nProvider';
 
 interface AccordionProps extends GlobalDomAttributes, SapphireStyleProps, DOMProps, Pick<DisclosureGroupProps, 'allowsMultipleExpanded' | 'expandedKeys' | 'defaultExpandedKeys' | 'onExpandedChange' | 'children' | 'isDisabled'> {
@@ -162,9 +163,9 @@ declare type BreadcrumbsProps<T extends object> = Pick<BreadcrumbsProps$1<T>, 'a
     maxWidth?: React__default.CSSProperties['maxWidth'];
 } & SapphireStyleProps & GlobalDomAttributes;
 /**
- * Implementation is based on React Aria's Breadcrumbs component.
- * It was necessary to own the implementation to add support for
- * handling the collection directly, as we need it for the overflow calculation logic.
+ * Shows the path to the current page through a hierarchical trail of links,
+ * helping users understand their location within the application and navigate back to
+ * parent pages.
  */
 declare const Breadcrumbs: <T extends object>(props: Pick<BreadcrumbsProps$1<T>, "children" | "isDisabled" | "aria-label"> & {
     /**
@@ -627,6 +628,9 @@ declare type ProgressIndicatorProps = {
 } | {
     'aria-label': string;
 });
+/**
+ * When users need a visual representation of how far along a process or operation is, either as a continuous bar or divided into discrete segments.
+ */
 declare const ProgressIndicator: (props: ProgressIndicatorProps) => JSX.Element;
 
 declare type SliderProps = {
@@ -746,6 +750,9 @@ declare type TimeFieldProps<T extends TimeValue> = Pick<AriaTimeFieldProps<T>, '
      */
     contextualHelp?: ReactNode;
 };
+/**
+ * For collecting a specific time value from users with a segmented, locale-aware input that supports keyboard navigation between hours and minutes.
+ */
 declare const TimeField: <T extends TimeValue>(props: Pick<AriaTimeFieldProps<T>, "isDisabled" | "onFocus" | "onBlur" | "value" | "defaultValue" | "onChange" | "label" | "isRequired" | "isReadOnly" | "shouldForceLeadingZeros"> & SapphireStyleProps & Pick<_react_types_shared.GlobalDOMAttributes<Element>, "translate" | "dir" | "lang" | "inert"> & Pick<_react_types_shared.DOMProps, "id"> & {
     /**
      * @default 'lg'
@@ -792,5 +799,541 @@ declare const TimeField: <T extends TimeValue>(props: Pick<AriaTimeFieldProps<T>
     ref?: React__default.RefObject<HTMLDivElement> | undefined;
 }) => React__default.ReactElement;
 
-export { _Accordion as Accordion, AccordionContext, Alert, Amount, Autocomplete, BreadcrumbItem, Breadcrumbs, FileDropzone, FileTrigger, FilterDropdown, Flag, LabeledValue, NumberField, ProgressIndicator, SearchableSelectFilter, _Sidebar as Sidebar, _Slider as Slider, TagGroup, TagItem, TimeField };
-export type { AccordionHeadingProps, AccordionItemProps, AccordionPanelProps, AccordionProps, AmountProps, AutocompleteProps, BreadcrumbItemProps, BreadcrumbsProps, FileDropzoneProps, FileTriggerProps, FilterDropdownProps, FlagProps, NumberFieldProps, NumberFieldRef, ProgressIndicatorProps, SapphireAlertProps, SearchableSelectFilterProps, SidebarBodyProps, SidebarExpandableItemProps, SidebarHeaderProps, SidebarItemProps, SidebarListProps, SidebarProps, SidebarSectionProps, SliderProps, TagGroupProps, TimeFieldProps };
+interface TruncateOverflowProps extends SapphireViewStyleProps {
+    /** Content to truncate. */
+    children: React__default.ReactNode;
+    /**
+     * Overrides the tooltip shown when the text is truncated.
+     * When omitted, the tooltip is derived automatically from the `children` if
+     * it's a string or from element's `textContent` otherwise.
+     */
+    tooltip?: React__default.ReactNode;
+}
+/**
+ * Renders its children in a block that clips overflowing text with an ellipsis.
+ * When the text is actually truncated, a tooltip is shown on hover with
+ * the full content.
+ */
+declare const TruncateOverflow: React__default.ForwardRefExoticComponent<TruncateOverflowProps & React__default.RefAttributes<HTMLSpanElement>>;
+
+interface EditableCellContentProps extends SapphireStyleProps {
+    /**
+     * The display value rendered when not editing.
+     */
+    children?: React__default.ReactNode;
+    /**
+     * A function that renders the editable form content.
+     * This should typically contain form inputs like {@link TextField} or {@link Select}.
+     */
+    renderEditor: () => ReactNode;
+    /**
+     * Callback fired when the user submits the edit (via Enter key or checkmark button).
+     * If this returns false, the editor popover is not closed. This is useful
+     * when the field contains errors.
+     */
+    onSubmit?: (e: FormEvent<HTMLFormElement>) => boolean | void;
+    /**
+     * Callback fired when the user cancels the edit (via Escape key).
+     */
+    onCancel?: () => void;
+    /**
+     * aria-label of the edit button
+     * @default: 'Edit'
+     */
+    editButtonLabel?: string;
+    /**
+     * aria-label of the save button
+     * @default: 'Save'
+     */
+    saveButtonLabel?: string;
+}
+
+/**
+ * The interaction that triggered an `onSelectionChange` callback.
+ *
+ * - `'select-all'` — the user clicked the "Select all" header checkbox.
+ * - `'select'` — the user selected or deselected an individual row.
+ */
+declare type DataGridSelectionInteraction = 'select-all' | 'select';
+/**
+ * Determines how column widths are calculated.
+ *
+ * - `'auto'` — uses the browser's native
+ *   [`table-layout: auto`](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) algorithm.
+ * - `'fixed'` — uses the browser's native
+ *   [`table-layout: fixed`](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) algorithm.
+ */
+declare type Layout = 'auto' | 'fixed';
+/**
+ * Column sizing options when using `layout="fixed"`.
+ * Only `width` is effective in fixed table layout; `minWidth` and `maxWidth` have no effect.
+ *
+ * Note: this type is the *most restrictive* column sizing shape. A value of
+ * this type is structurally assignable to both fixed- and auto-mode column
+ * arrays, which is what lets column helpers return "mode-agnostic" columns
+ * (and therefore reusable) whenever `minWidth`/`maxWidth` are not used.
+ */
+interface FixedColumnSizing {
+    /**
+     * Width of the column. Accepts a pixel count (`number`) or any valid CSS `width` value
+     * (`string`, e.g. `'50%'`). In fixed layout this is the exact column width.
+     */
+    width?: number | string;
+    /** @internal Not available in fixed layout */
+    minWidth?: never;
+    /** @internal Not available in fixed layout */
+    maxWidth?: never;
+}
+/**
+ * Column sizing options when using `layout="auto"`.
+ * All three properties are treated as hints by the browser's sizing algorithm —
+ * see the `"auto"` docs section for caveats.
+ */
+interface AutoColumnSizing {
+    /**
+     * Preferred width hint. Accepts a pixel count (`number`) or any valid CSS `width` value
+     * (`string`, e.g. `'50%'`, `'10rem'`). Pass `0` to make the column as narrow as its
+     * content — useful for icon or action button columns.
+     */
+    width?: number | string;
+    /**
+     * Minimum width of the column. Accepts a pixel count (`number`) or any valid CSS
+     * `min-width` value (`string`).
+     */
+    minWidth?: number | string;
+    /**
+     * Maximum width of the column. Accepts a pixel count (`number`) or any valid CSS
+     * `max-width` value (`string`).
+     */
+    maxWidth?: number | string;
+}
+/**
+ * Sizing shape available for a given {@link Layout}.
+ */
+declare type ColumnSizingFor<TMode extends Layout> = TMode extends 'fixed' ? FixedColumnSizing : AutoColumnSizing;
+/**
+ * Context passed to a column's `cell` renderer.
+ *
+ * - `row` — the plain row data (`TData`).
+ * - `value` — the cell value, typed from `accessorKey` / `accessorFn`.
+ *   For display columns (no accessor) this is `undefined`.
+ * - `rowIndex` — the zero-based index of the row within the current data.
+ * - `context` — the `context` object passed to the DataGrid. Typed via the
+ *   `TContext` generic.
+ */
+interface DataGridBodyCellRenderProps<TData, TValue, TContext> extends DataGridCellRendererProps<TContext> {
+    /** The cell value (typed from `accessorKey`/`accessorFn`). */
+    value: TValue;
+    /** The row data. */
+    rowData: TData;
+    /** Zero-based row index in the current data. */
+    rowIndex: number;
+}
+interface DataGridCellRendererProps<TContext> {
+    /** Custom context object passed via the DataGrid `context` prop. */
+    context: TContext;
+}
+/**
+ * Props shared by all DataGrid column definitions, regardless of column kind
+ * (accessor / accessor function / display) and sizing mode.
+ */
+interface DataGridColumnShared<TMode extends Layout, TContext> {
+    /** Stable id for the column. Required for display columns. */
+    id?: string;
+    /** Header rendered in the column's header cell. */
+    header?: ReactNode | (({ context }: DataGridCellRendererProps<TContext>) => ReactNode);
+    /** Footer rendered in the column's footer cell. */
+    footer?: ReactNode | (({ context }: DataGridCellRendererProps<TContext>) => ReactNode);
+    /** Whether sorting can be toggled on this column. */
+    enableSorting?: boolean;
+    /** Horizontal alignment of cell content. Defaults to `'left'`. */
+    align?: ColumnAlignment;
+    /** Whether this column is a [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader). */
+    isRowHeader?: boolean;
+    /**
+     * Custom skeleton loading content for this column. Receives the skeleton row
+     * index and returns a `ReactNode` to render inside the cell while the grid is
+     * in a loading state. Defaults to `<Skeleton.Text>`.
+     */
+    renderLoadingSkeleton?: (rowIndex: number) => ReactNode;
+    /** Column width/min/max (shape depends on sizing mode). */
+    sizing?: ColumnSizingFor<TMode>;
+}
+/**
+ * Accessor column — reads a value directly from a property of `TData` by key.
+ * `value` in the cell renderer is typed as `TData[TKey]`.
+ */
+interface DataGridAccessorKeyColumn<TData, TKey extends keyof TData, TContext, TMode extends Layout> extends DataGridColumnShared<TMode, TContext> {
+    accessorKey: TKey;
+    accessorFn?: never;
+    cell?: (context: DataGridBodyCellRenderProps<TData, TData[TKey], TContext>) => ReactNode;
+}
+/**
+ * Accessor-function column — derives the value via a function of `TData`.
+ * `value` in the cell renderer is typed as the function's return type.
+ * `id` is required since there is no `accessorKey` to derive it from.
+ */
+interface DataGridAccessorFnColumn<TData, TValue, TContext, TMode extends Layout> extends DataGridColumnShared<TMode, TContext> {
+    id: string;
+    accessorKey?: never;
+    accessorFn: (row: TData) => TValue;
+    cell?: (context: DataGridBodyCellRenderProps<TData, TValue, TContext>) => ReactNode;
+}
+/**
+ * Display column — no accessor. `value` in the cell renderer is `undefined`.
+ * Typically used for action columns that render controls derived only from
+ * row data / custom context.
+ */
+interface DataGridDisplayColumn<TData, TContext, TMode extends Layout> extends DataGridColumnShared<TMode, TContext> {
+    id: string;
+    accessorKey?: never;
+    accessorFn?: never;
+    cell?: (context: DataGridBodyCellRenderProps<TData, undefined, TContext>) => ReactNode;
+}
+/**
+ * A column definition. Union of:
+ * - {@link DataGridAccessorKeyColumn} — one per key of `TData`, with `value` typed as `TData[K]`
+ * - {@link DataGridAccessorFnColumn} — `value` typed from the `accessorFn` return
+ * - {@link DataGridDisplayColumn} — no accessor, `value` is `undefined`
+ *
+ * Generic order is `<TData, TMode, TContext>`: the sizing mode is the most
+ * common "second argument" consumers need, and `TContext` defaults to
+ * `undefined` so the single-arg form works.
+ */
+declare type DataGridColumn<TData, TMode extends Layout = 'auto', TContext = undefined> = {
+    [K in keyof TData]: DataGridAccessorKeyColumn<TData, K, TContext, TMode>;
+}[keyof TData] | DataGridAccessorFnColumn<TData, unknown, TContext, TMode> | DataGridDisplayColumn<TData, TContext, TMode>;
+declare type DataGridSelectionMode = 'none' | 'single' | 'multiple';
+interface DataGridSortDescriptor {
+    /** The id of the column to sort by. */
+    column: string;
+    /** The direction to sort by. */
+    direction: SortDirection;
+}
+/**
+ * Context-ergonomics helper: when `TContext` is `undefined` (consumer didn't
+ * specify a context type), the `context` prop is optional. Otherwise it is
+ * required, mirroring the shape of the column definitions.
+ */
+declare type ContextProp<TContext> = [TContext] extends [undefined] ? {
+    context?: undefined;
+} : {
+    /**
+     * Object passed to every cell renderer as `context`. Use it to share
+     * table-level state or callbacks (e.g. editing handlers) with cells
+     * without closing over ad-hoc references in every column `cell`.
+     */
+    context: TContext;
+};
+declare type DataGridProps<TData, TContext = undefined> = ({
+    layout?: 'auto';
+    /** Column definitions */
+    columns: DataGridColumn<TData, 'auto', TContext>[];
+} | {
+    layout: 'fixed';
+    /** Column definitions */
+    columns: DataGridColumn<TData, 'fixed', TContext>[];
+}) & SapphireStyleProps & DOMProps & ContextProp<TContext> & {
+    /** Accessibility label for the grid */
+    'aria-label': string;
+    /** Row data */
+    data: TData[];
+    /**
+     * The spacing inside table cells.
+     * @default 'md'
+     */
+    cellSpacing?: CellSpacing;
+    /**
+     * Default sorting state. Used for initializing uncontrolled sorting.
+     */
+    defaultSortDescriptor?: DataGridSortDescriptor;
+    /**
+     * The current sort state. Used for controlled sorting.
+     * If not provided, the component will manage its own sort state.
+     */
+    sortDescriptor?: DataGridSortDescriptor;
+    /**
+     * Called when the sort state changes.
+     * Use together with `sortingDescriptor` for controlled sorting.
+     */
+    onSortChange?: (sorting: DataGridSortDescriptor | undefined) => void;
+    /**
+     * Function to derive a stable unique identifier for each row.
+     * Defaults to the row's index. Provide this when using controlled selection
+     * or when row order can change (e.g. after sorting).
+     */
+    getRowId?: (row: TData, index: number) => string;
+    /**
+     * Enables row selection. Pass `'single'` for single-row selection or
+     * `'multiple'` for multi-row selection with a "select all" header checkbox.
+     */
+    selectionMode?: DataGridSelectionMode;
+    /**
+     * When `true`, no user interaction can result in an empty selection.
+     * In single-selection mode, radio buttons are rendered instead of checkboxes
+     * to communicate this to users.
+     * Has no effect on the initial or controlled state.
+     */
+    disallowEmptySelection?: boolean;
+    /**
+     * The currently selected row ids (controlled).
+     * Use together with `onSelectionChange`.
+     */
+    selectedRowIds?: string[];
+    /**
+     * Default selected row ids (uncontrolled).
+     */
+    defaultSelectedRowIds?: string[];
+    /**
+     * Called when the selection changes with the new array of selected row ids
+     * and the interaction that triggered the change.
+     *
+     * - `'select-all'` — the user clicked the "Select all" header checkbox.
+     * - `'select'` — the user selected or deselected an individual row.
+     */
+    onSelectionChange?: (selectedRowsIds: string[], interaction: DataGridSelectionInteraction) => void;
+    /**
+     * Content to show when there are no rows to display. Can be used to
+     * communicate empty, or error state. The value is typically a
+     * {@link FeedbackMessage} element. For loading state, render skeleton
+     * loading rows using {@link loadingState} prop.
+     */
+    emptyState?: ReactNode;
+    /**
+     * Whether the grid is currently loading data.
+     * When set to `'loading'`, the grid will show loading skeleton rows instead of the actual content.
+     * When set to `'loadingMore'`, the grid will show loading skeleton rows in addition to the actual content.
+     * Use this for "infinite scrolling" scenarios when you want to indicate that more content is being loaded, but you
+     * still have some content to show.
+     **/
+    loadingState?: 'loading' | 'loadingMore';
+    /**
+     * Number of loading skeleton rows to render when {@link loadingState} is set.
+     * Use it to match amount of actual content rows being loaded as closely as possible.
+     * @default 3
+     */
+    loadingSkeletonRowsCount?: number;
+    /**
+     * Whether to hide the divider after the last row.
+     * @default false
+     */
+    hideLastDivider?: boolean;
+    /**
+     * When `true`, rows are virtualized — only the rows currently in the
+     * viewport are rendered. The table must have a bounded scroll area for this
+     * to work, either via {@link height} or by constraining the container through
+     * parent layout.
+     * @default false
+     */
+    enableRowVirtualization?: boolean;
+    /**
+     * Estimated height of each row in pixels, used to improve scroll accuracy
+     * during virtualization. Defaults to the natural row height for the current
+     * {@link cellSpacing}.
+     */
+    estimatedRowHeight?: number;
+    /**
+     * Called when the user scrolls near the bottom of the table.
+     * Use this to append more rows for infinite scrolling.
+     * Not called while {@link loadingState} is set.
+     */
+    onLoadMore?: () => void;
+    /**
+     * Element rendered in a sticky footer below the table.
+     * Normally used to render a {@link Pagination} component.
+     *
+     * The DataGrid automatically provides the scroll container reference to
+     * the `Pagination` component so that it scrolls back to the top of the
+     * table when the page changes.
+     */
+    footer?: ReactNode;
+    /**
+     * Whether the table header should be sticky relative to the first
+     * scrolling ancestor.
+     *
+     * - `'auto'` (default) — the header sticks when the component has a
+     *   set (or constrained) height.
+     * - `true` — always sticky.
+     * - `false` — never sticky.
+     *
+     * @default 'auto'
+     */
+    stickyHeader?: StickyPosition;
+    /**
+     * Whether the table footer (rendered via the [`footer`](#props:footer)
+     * prop) should be sticky relative to the first scrolling ancestor.
+     *
+     * - `'auto'` (default) — the footer sticks when the component has a
+     *   set (or constrained) height.
+     * - `true` — always sticky.
+     * - `false` — never sticky.
+     *
+     * @default 'auto'
+     */
+    stickyFooter?: StickyPosition;
+    /**
+     * Configures row expansion.
+     *
+     * - `{ type: 'subRows', getSubRows }` — tree-grid structure. `getSubRows`
+     *   returns the child rows for a given parent row. Child rows are indented
+     *   to convey depth.
+     * - `{ type: 'expandedView', getExpandedView }` — accordion-style panel.
+     *   `getExpandedView` returns the `ReactNode` to render below the row when
+     *   it is expanded.
+     *
+     * Use {@link defaultExpandedRowIds} to pre-expand rows, or control expansion
+     * fully with {@link expandedRowIds} and {@link onExpandedRowsChange}.
+     */
+    rowExpansion?: {
+        type: 'subRows';
+        getSubRows: (row: TData, index: number) => TData[] | undefined;
+    } | {
+        type: 'expandedView';
+        getExpandedView: (row: TData, index: number) => ReactNode;
+    };
+    /**
+     * The currently expanded row ids (controlled).
+     * Use together with {@link onExpandedRowsChange}.
+     */
+    expandedRowIds?: string[];
+    /**
+     * Default expanded row ids (uncontrolled).
+     */
+    defaultExpandedRowIds?: string[];
+    /**
+     * Called when the set of expanded rows changes.
+     */
+    onExpandedRowsChange?: (expandedRowIds: string[]) => void;
+    /**
+     * Called when a row is clicked. Passing it makes the rows interactive.
+     */
+    onRowAction?: (row: TData) => void;
+    /**
+     * Disables individual rows. Pass a function to evaluate the disabled state
+     * per row, or a static `true` to disable all rows.
+     * Use {@link disabledBehavior} to control whether disabled rows are fully
+     * inert (`'all'`, the default) or only prevented from being selected
+     * (`'selection'`).
+     */
+    isDisabled?: boolean | ((row: TData) => boolean);
+    /**
+     * Whether disabled state applies to all interactions, or only selection.
+     * @default "all"
+     */
+    disabledBehavior?: DisabledBehavior;
+};
+/**
+ * DataGrid renders an array of objects into a grid layout following Sapphire Table design.
+ * It supports features such as sorting or row selection, typically required for data-heavy applications.
+ */
+declare function DataGrid<TData, TContext = undefined>({ 'aria-label': ariaLabel, columns, data, cellSpacing, sortDescriptor, onSortChange, defaultSortDescriptor, selectionMode, disallowEmptySelection, getRowId, selectedRowIds: selectedRowsProp, defaultSelectedRowIds, onSelectionChange, emptyState, loadingState, loadingSkeletonRowsCount, hideLastDivider, enableRowVirtualization, estimatedRowHeight, rowExpansion, expandedRowIds, defaultExpandedRowIds, onExpandedRowsChange, onLoadMore, onRowAction, isDisabled, disabledBehavior, layout, footer, stickyHeader, stickyFooter, context, ...otherProps }: DataGridProps<TData, TContext>): React__default.JSX.Element;
+
+/**
+ * Options accepted by {@link createDataGridColumnHelper}.
+ */
+interface CreateDataGridColumnHelperOptions<TMode extends Layout = 'auto'> {
+    /**
+     * The column sizing mode the produced columns will be used with.
+     * Determines the shape of the `sizing` option on each column.
+     *
+     * @default 'auto'
+     */
+    layout?: TMode;
+}
+/**
+ * Column helper returned by {@link createDataGridColumnHelper}. Provides
+ * type-safe builders for the three kinds of column definition:
+ * accessor (by key), accessor (by function), and display.
+ *
+ * Each builder method is overloaded: the first overload covers the
+ * "mode-neutral" case where `sizing` does not use `minWidth` / `maxWidth`,
+ * returning a `'fixed'`-typed column. Because
+ * {@link FixedColumnSizing} uses `never` for `minWidth` / `maxWidth` (and
+ * `never` is assignable to any type), such a column is structurally
+ * assignable to both fixed- and auto-layout column arrays — making it
+ * reusable across grids with different `layout` settings regardless
+ * of which helper created it.
+ *
+ * The second overload covers the remaining case and keeps the column
+ * bound to the helper's declared mode (`TMode`). If the helper was created
+ * for `'fixed'`, the call site still rejects `minWidth` /
+ * `maxWidth` at the property level.
+ */
+interface DataGridColumnHelper<TData, TContext, TMode extends Layout> {
+    /**
+     * Define an accessor column that reads a value directly from a property of
+     * `TData` by key. The `value` received in the cell renderer is typed as
+     * `TData[TKey]`.
+     */
+    accessor<TKey extends keyof TData>(accessorKey: TKey, column: Omit<DataGridAccessorKeyColumn<TData, TKey, TContext, 'fixed'>, 'accessorKey'>): DataGridAccessorKeyColumn<TData, TKey, TContext, 'fixed'>;
+    accessor<TKey extends keyof TData>(accessorKey: TKey, column: Omit<DataGridAccessorKeyColumn<TData, TKey, TContext, TMode>, 'accessorKey'>): DataGridAccessorKeyColumn<TData, TKey, TContext, TMode>;
+    /**
+     * Define an accessor column that derives its value via a function. The
+     * `value` received in the cell renderer is typed as the function's return
+     * type. `id` is required since there is no `accessorKey` to derive it from.
+     */
+    accessor<TValue>(accessorFn: (row: TData) => TValue, column: Omit<DataGridAccessorFnColumn<TData, TValue, TContext, 'fixed'>, 'accessorFn'>): DataGridAccessorFnColumn<TData, TValue, TContext, 'fixed'>;
+    accessor<TValue>(accessorFn: (row: TData) => TValue, column: Omit<DataGridAccessorFnColumn<TData, TValue, TContext, TMode>, 'accessorFn'>): DataGridAccessorFnColumn<TData, TValue, TContext, TMode>;
+    /**
+     * Define a display column — no accessor. The cell renderer receives a
+     * `row` and `context` but `value` is `undefined`. Typically used for
+     * action columns.
+     */
+    display(column: DataGridDisplayColumn<TData, TContext, 'fixed'>): DataGridDisplayColumn<TData, TContext, 'fixed'>;
+    display(column: DataGridDisplayColumn<TData, TContext, TMode>): DataGridDisplayColumn<TData, TContext, TMode>;
+}
+/**
+ * Create a typed column helper for a `DataGrid` with the given row data type
+ * `TData` and cell rendering context type `TContext`. The helper's
+ * `accessor` / `display` methods return correctly typed column definitions
+ * that plug into the `columns` prop.
+ *
+ * @example
+ * ```tsx
+ * interface Person { id: string; name: string; age: number; }
+ * interface Ctx { onEdit: (p: Person) => void; }
+ *
+ * const helper = createDataGridColumnHelper<Person, Ctx>();
+ *
+ * const columns = [
+ *   helper.accessor('name', {
+ *     header: 'Name',
+ *     cell: ({ value }) => value.toUpperCase(), // value: string
+ *   }),
+ *   helper.accessor((row) => row.age * 12, {
+ *     id: 'ageInMonths',
+ *     header: 'Age (months)',
+ *     cell: ({ value }) => value.toLocaleString(), // value: number
+ *   }),
+ *   helper.display({
+ *     id: 'actions',
+ *     header: 'Actions',
+ *     cell: ({ row, context }) => (
+ *       <button onClick={() => context.onEdit(row)}>Edit</button>
+ *     ),
+ *   }),
+ * ];
+ * ```
+ *
+ * Pass `{ layout: 'fixed' }` in the options to type the
+ * column `sizing` property for fixed-layout grids. The sizing mode is
+ * inferred from the options object — there is no need to pass it as an
+ * explicit generic argument.
+ *
+ * Columns whose `sizing` does not use `minWidth` / `maxWidth` are returned
+ * as mode-agnostic so that they can be reused across both fixed- and
+ * auto-layout grids, regardless of which helper created them.
+ */
+declare function createDataGridColumnHelper<TData, TContext = undefined>(options: {
+    layout: 'fixed';
+}): DataGridColumnHelper<TData, TContext, 'fixed'>;
+declare function createDataGridColumnHelper<TData, TContext = undefined>(options?: {
+    layout?: 'auto';
+}): DataGridColumnHelper<TData, TContext, 'auto'>;
+
+declare const _DataGrid: typeof DataGrid & {
+    EditableCellContent: React.ForwardRefExoticComponent<EditableCellContentProps & React.RefAttributes<HTMLSpanElement>>;
+};
+
+export { _Accordion as Accordion, AccordionContext, Alert, Amount, Autocomplete, BreadcrumbItem, Breadcrumbs, _DataGrid as DataGrid, FileDropzone, FileTrigger, FilterDropdown, Flag, LabeledValue, NumberField, ProgressIndicator, SearchableSelectFilter, _Sidebar as Sidebar, _Slider as Slider, TagGroup, TagItem, TimeField, TruncateOverflow, createDataGridColumnHelper };
+export type { AccordionHeadingProps, AccordionItemProps, AccordionPanelProps, AccordionProps, AmountProps, AutoColumnSizing, AutocompleteProps, BreadcrumbItemProps, BreadcrumbsProps, ColumnSizingFor, CreateDataGridColumnHelperOptions, DataGridAccessorFnColumn, DataGridAccessorKeyColumn, DataGridBodyCellRenderProps, DataGridColumn, DataGridColumnHelper, DataGridDisplayColumn, DataGridProps, DataGridSelectionMode, DataGridSortDescriptor, FileDropzoneProps, FileTriggerProps, FilterDropdownProps, FixedColumnSizing, FlagProps, Layout, NumberFieldProps, NumberFieldRef, ProgressIndicatorProps, SapphireAlertProps, SearchableSelectFilterProps, SidebarBodyProps, SidebarExpandableItemProps, SidebarHeaderProps, SidebarItemProps, SidebarListProps, SidebarProps, SidebarSectionProps, SliderProps, TagGroupProps, TimeFieldProps, TruncateOverflowProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-react-lab",
-  "version": "0.106.3",
+  "version": "0.107.0",
   "license": "SEE LICENSE IN LICENSE",
   "description": "Experimental React components of the Sapphire Design System from Danske Bank A/S",
   "exports": {
@@ -25,28 +25,30 @@
   },
   "peerDependencies": {
     "@danske/sapphire-icons": "^3.1.0",
-    "@danske/sapphire-react": "^5.16.2",
+    "@danske/sapphire-react": "^5.17.2",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
     "@danske/sapphire-icons": "^3.2.0",
-    "@danske/sapphire-react": "^5.17.0",
+    "@danske/sapphire-react": "^5.17.2",
     "@types/react-transition-group": "^4.4.5",
     "cross-env": "^7.0.3"
   },
   "dependencies": {
-    "@danske/sapphire-css": "^50.2.0",
+    "@danske/sapphire-css": "^51.0.0",
     "@internationalized/date": "3.12.1",
     "@internationalized/string": "3.2.8",
     "@react-aria/i18n": "3.13.0",
     "@react-spectrum/utils": "3.13.0",
     "@react-types/shared": "3.34.0",
+    "@tanstack/react-table": "8.21.3",
+    "@tanstack/react-virtual": "3.13.23",
     "clsx": "^1.1.1",
     "react-aria": "3.48.0",
     "react-aria-components": "1.17.0",
     "react-stately": "3.46.0",
     "react-transition-group": "^4.4.5"
   },
-  "gitHead": "9a184dd3280a44a99d35cf7a954ba4ea2d905a92"
+  "gitHead": "4903f9d28140b74e3e42467f790174d7f977f15d"
 }

package/build/esm/Accordion/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../src/Accordion/index.ts"],"sourcesContent":["import { Accordion, type AccordionProps } from './src/Accordion';\nimport {\n  AccordionHeading,\n  type AccordionHeadingProps,\n} from './src/AccordionHeading';\nimport { AccordionItem, type AccordionItemProps } from './src/AccordionItem';\nimport { AccordionContext } from './src/AccordionContext';\nimport { AccordionPanel, type AccordionPanelProps } from './src/AccordionPanel';\n\n/*\n * Before moving Accordion component to the core package, it's important to check on the\n * latest release of \"@react-aria/accordion\".\n * The hook and the component package are marked as \"pre-release\", so we can expect some changes.\n *\n * https://github.com/adobe/react-spectrum/issues/2801#issuecomment-1035377858\n * https://github.com/adobe/react-spectrum/discussions/6635#discussioncomment-9990027\n *\n * The current implementation is based on the SelectableCollection API, which creates bugs when\n * focusable items are used inside of the Accordion.Item.\n * E.g. UC-3414 (fixed), UC-3545 (to-do)\n *\n * Alternatively, we can re-implement the component.\n */\nconst _Accordion = Object.assign(Accordion, {\n  Heading: AccordionHeading,\n  Item: AccordionItem,\n  Panel: AccordionPanel,\n});\n\nexport {\n  _Accordion as Accordion,\n  AccordionContext,\n  type AccordionProps,\n  type AccordionItemProps,\n  type AccordionHeadingProps,\n  type AccordionPanelProps,\n};\n"],"names":[],"mappings":";;;;;;AAuBA,MAAM,UAAA,GAAa,MAAA,CAAO,MAAA,CAAO,SAAA,EAAW;AAAA,EAC1C,OAAA,EAAS,gBAAA;AAAA,EACT,IAAA,EAAM,aAAA;AAAA,EACN,KAAA,EAAO;AACT,CAAC;;;;"}

package/build/esm/Accordion/src/Accordion.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Accordion.js","sources":["../../../../src/Accordion/src/Accordion.tsx"],"sourcesContent":["import React, { ForwardedRef, forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\nimport { useObjectRef } from 'react-aria/useObjectRef';\nimport { DOMProps } from '@react-types/shared';\nimport styles from '@danske/sapphire-css/components/accordion/accordion.module.css';\nimport {\n  SapphireStyleProps,\n  TypographyHeadingProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n  withTruthyZero as hasAllowedCustomSidePadding,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { FocusScope } from 'react-aria/FocusScope';\n\nimport { AccordionContext } from './AccordionContext';\nimport { DisclosureGroup, DisclosureGroupProps } from 'react-aria-components';\n\nexport type TreeExpansionMode = 'single' | 'multiple';\n\nexport interface AccordionProps\n  extends GlobalDomAttributes,\n    SapphireStyleProps,\n    DOMProps,\n    Pick<\n      DisclosureGroupProps,\n      | 'allowsMultipleExpanded'\n      | 'expandedKeys'\n      | 'defaultExpandedKeys'\n      | 'onExpandedChange'\n      | 'children'\n      | 'isDisabled'\n    > {\n  /** Set aria-level attribute for item's header. Accessibility requirement.\n   * Defines the hierarchical level of an element within a page structure.\n   * @default 5\n   */\n  headerLevel?: TypographyHeadingProps['level'];\n  /**\n   * Removes the divider after the last accordion item.\n   * Useful when rendered in a container which already has borders.\n   */\n  hideLastDivider?: boolean;\n  /**\n   * Counter acts the side padding, so that accordion is shifted to the left with same amount\n   * and having side padding * 2 added to width – resulting in full width accordion.\n   * Useful in scenarions where accordion is inside a padded container and desired layout has accordion going from edge to edge horizontally.\n   * @example\n   * ```tsx\n   * <Accordion hasNegativeSideMargin>...</Accordion>\n   * ```\n   */\n  hasNegativeSideMargin?: boolean;\n  /**\n   * Add custom sized padding to the sides of the accordion items.\n   * @example\n   * ```tsx\n   * <Accordion sidePadding={tokens.size.spacingContainerHorizontalM.value} hasNegativeSideMargin>...</Accordion>\n   * ```\n   */\n  sidePadding?: number | string;\n}\n\n/**\n * Accordion is a vertically stacked set of items, that consist of an interactive header and expandable content section. An accordion item’s content display can be toggled on and off by clicking the component’s header above.\n */\nexport const Accordion = forwardRef(function Accordion(\n  {\n    allowsMultipleExpanded = true,\n    headerLevel = 5,\n    hideLastDivider = false,\n    hasNegativeSideMargin = false,\n    sidePadding,\n    children,\n    expandedKeys,\n    defaultExpandedKeys,\n    onExpandedChange,\n    isDisabled,\n    ...props\n  }: AccordionProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n  const forwardedRef = useObjectRef<HTMLDivElement>(ref);\n\n  return (\n    <FocusScope>\n      <AccordionContext.Provider value={{ sidePadding, headerLevel }}>\n        <DisclosureGroup\n          {...filterDOMProps(props, { global: true, labelable: true })}\n          allowsMultipleExpanded={allowsMultipleExpanded}\n          expandedKeys={expandedKeys}\n          defaultExpandedKeys={defaultExpandedKeys}\n          onExpandedChange={onExpandedChange}\n          isDisabled={isDisabled}\n          ref={forwardedRef}\n          className={clsx(\n            styles['sapphire-accordion'],\n            {\n              [styles['sapphire-accordion--without-last-divider']]:\n                hideLastDivider,\n              [styles['sapphire-accordion--negative-margin-self']]:\n                !hasAllowedCustomSidePadding(sidePadding) &&\n                hasNegativeSideMargin,\n            },\n            styleProps.className\n          )}\n          style={{\n            ...(hasAllowedCustomSidePadding(sidePadding) &&\n            hasNegativeSideMargin\n              ? {\n                  marginLeft:\n                    typeof sidePadding === 'string'\n                      ? `calc(${sidePadding} * -1)`\n                      : `-${sidePadding}px`,\n                  width: `calc(100% + calc(${sidePadding} * 2${\n                    typeof sidePadding === 'string' ? '' : 'px'\n                  }))`,\n                }\n              : {}),\n            ...styleProps.style,\n          }}\n        >\n          {children}\n        </DisclosureGroup>\n      </AccordionContext.Provider>\n    </FocusScope>\n  );\n});\n"],"names":["Accordion","hasAllowedCustomSidePadding"],"mappings":";;;;;;;;;;AAmEO,MAAM,SAAA,GAAY,UAAA,CAAW,SAASA,UAAAA,CAC3C;AAAA,EACE,sBAAA,GAAyB,IAAA;AAAA,EACzB,WAAA,GAAc,CAAA;AAAA,EACd,eAAA,GAAkB,KAAA;AAAA,EAClB,qBAAA,GAAwB,KAAA;AAAA,EACxB,WAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,mBAAA;AAAA,EACA,gBAAA;AAAA,EACA,UAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,aAAA,EAAc;AACd,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,KAAK,CAAA;AAClD,EAAA,MAAM,YAAA,GAAe,aAA6B,GAAG,CAAA;AAErD,EAAA,uBACE,KAAA,CAAA,aAAA,CAAC,UAAA,EAAA,IAAA,kBACC,KAAA,CAAA,aAAA,CAAC,gBAAA,CAAiB,QAAA,EAAjB,EAA0B,KAAA,EAAO,EAAE,WAAA,EAAa,WAAA,EAAY,EAAA,kBAC3D,KAAA,CAAA,aAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACE,GAAG,eAAe,KAAA,EAAO,EAAE,QAAQ,IAAA,EAAM,SAAA,EAAW,MAAM,CAAA;AAAA,MAC3D,sBAAA;AAAA,MACA,YAAA;AAAA,MACA,mBAAA;AAAA,MACA,gBAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAA,EAAK,YAAA;AAAA,MACL,SAAA,EAAW,IAAA;AAAA,QACT,OAAO,oBAAoB,CAAA;AAAA,QAC3B;AAAA,UACE,CAAC,MAAA,CAAO,0CAA0C,CAAC,GACjD,eAAA;AAAA,UACF,CAAC,OAAO,0CAA0C,CAAC,GACjD,CAACC,cAAA,CAA4B,WAAW,CAAA,IACxC;AAAA,SACJ;AAAA,QACA,UAAA,CAAW;AAAA,OACb;AAAA,MACA,KAAA,EAAO;AAAA,QACL,GAAIA,cAAA,CAA4B,WAAW,CAAA,IAC3C,qBAAA,GACI;AAAA,UACE,UAAA,EACE,OAAO,WAAA,KAAgB,QAAA,GACnB,QAAQ,WAAW,CAAA,MAAA,CAAA,GACnB,IAAI,WAAW,CAAA,EAAA,CAAA;AAAA,UACrB,KAAA,EAAO,oBAAoB,WAAW,CAAA,IAAA,EACpC,OAAO,WAAA,KAAgB,QAAA,GAAW,KAAK,IACzC,CAAA,EAAA;AAAA,YAEF,EAAC;AAAA,QACL,GAAG,UAAA,CAAW;AAAA;AAChB,KAAA;AAAA,IAEC;AAAA,GAEL,CACF,CAAA;AAEJ,CAAC;;;;"}

package/build/esm/Accordion/src/AccordionContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AccordionContext.js","sources":["../../../../src/Accordion/src/AccordionContext.ts"],"sourcesContent":["import { TypographyHeadingProps } from '@danske/sapphire-react';\nimport React, { useContext } from 'react';\n\ninterface AccordionContextProps {\n  sidePadding?: number | string;\n  headerLevel?: TypographyHeadingProps['level'];\n}\n\nexport const AccordionContext = React.createContext<AccordionContextProps>({\n  sidePadding: undefined,\n  headerLevel: 5,\n});\n\nexport function useAccordionContext(): AccordionContextProps {\n  const context = useContext(AccordionContext);\n  if (context) {\n    return context;\n  }\n  throw new Error(\n    'Accordion context can only be used within Accordion component.'\n  );\n}\n"],"names":[],"mappings":";;AAQO,MAAM,gBAAA,GAAmB,MAAM,aAAA,CAAqC;AAAA,EACzE,WAAA,EAAa,MAAA;AAAA,EACb,WAAA,EAAa;AACf,CAAC;AAEM,SAAS,mBAAA,GAA6C;AAC3D,EAAA,MAAM,OAAA,GAAU,WAAW,gBAAgB,CAAA;AAC3C,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,OAAO,OAAA;AAAA,EACT;AACA,EAAA,MAAM,IAAI,KAAA;AAAA,IACR;AAAA,GACF;AACF;;;;"}