@elliemae/ds-data-table 3.80.0-next.64 → 3.80.0-next.67

package/dist/types/parts/SkeletonTable.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 export declare const SkeletonTable: React.MemoExoticComponent<({ height }: {
-    height: string;
+    height: string | number;
 }) => React.JSX.Element>;

package/dist/types/react-desc-prop-types.d.ts

@@ -5,7 +5,10 @@ import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
 import type { DnDKitTree, useSortable } from '@elliemae/ds-drag-and-drop';
 import type { DSControlledCheckboxT } from '@elliemae/ds-form-checkbox';
 import type { DSComboboxT } from '@elliemae/ds-form-combobox';
-import { type DSPropTypesSchema, type ValidationMap } from '@elliemae/ds-props-helpers';
+import type { DSHookFloatingContextT } from '@elliemae/ds-floating-context';
+import type { DSMenuButtonT } from '@elliemae/ds-menu-button';
+import { type DSPropTypesSchema, type ValidationMap, type XstyledProps } from '@elliemae/ds-props-helpers';
+import type { DSDropdownMenuT } from './exported-related/FilterBar/dropdownMenuV2Bridge/types.js';
 import { type DropIndicatorPosition, ColsLayoutStyle } from './configs/constants.js';
 import { DSDataTableName, DSDataTableSlots } from './constants/index.js';
 export declare namespace DSDataTableT {
@@ -171,7 +174,7 @@ export declare namespace DSDataTableT {
         pageDetails?: string[];
         pageDetailsTitle?: string;
     }
-    export type RowVariant = 'ds-header-group-row' | 'ds-primary-row' | 'ds-secondary-row';
+    export type RowVariant = 'ds-header-group-row' | 'ds-primary-row' | 'ds-secondary-row' | 'ds-compact-primary-row' | 'ds-compact-secondary-row' | 'ds-skeleton-row';
     export interface RenderRowActionsConfig {
         columnWidth: number;
         renderer: React.ComponentType<CellProps>;
@@ -190,12 +193,22 @@ export declare namespace DSDataTableT {
         [key: string]: unknown;
         id: string;
         subRows?: Row[];
+        /**
+         * @deprecated Master-detail is officially deprecated: do not use it in new code.
+         */
         tableRowDetails?: React.ComponentType<DetailsProps>;
         dimsumHeaderValue?: string;
     }
     export interface EditableCellProps<T extends HTMLElement = HTMLElement> extends CellProps<T> {
         DefaultCellRender: JSX.Element;
     }
+    /**
+     * The resizer works in pixels: a column `width` is a number of pixels or a px string (`'200px'`). Any other string
+     * (`'20%'`, `'12rem'`) is a CSS size the table renders, but the resizer does not support it. The types do not
+     * enforce it: the documentation states it.
+     */
+    export type ResizeableColumnWidth = number | `${number}px` | undefined;
+    export type NonResizeableColumnWidth = number | string | undefined;
     export interface Column {
         id?: string;
         Header: string | React.ComponentType<HeaderProps>;
@@ -209,7 +222,7 @@ export declare namespace DSDataTableT {
         Cell?: React.ComponentType<CellRendererProps>;
         editable?: string | React.ComponentType<EditableCellProps>;
         disableDnD?: boolean;
-        width?: number;
+        width?: NonResizeableColumnWidth | ResizeableColumnWidth;
         minWidth?: number;
         maxWidth?: number;
         padding?: number;
@@ -330,8 +343,8 @@ export declare namespace DSDataTableT {
         setIsHeaderCellDragging: React.Dispatch<React.SetStateAction<boolean>>;
     }
     export interface DefaultProps {
-        height: string;
-        width: string;
+        height: string | number;
+        width: string | number;
         renderRowActions: false | RenderRowActionsConfig;
         getRowVariant: (row: InternalRow, defaultCellRenderer: React.ComponentType<{
             row: DSDataTableT.InternalRow;
@@ -392,7 +405,7 @@ export declare namespace DSDataTableT {
         uniqueRowAccessor?: UniqueRowAccessorType;
         cellRendererProps?: Record<string, unknown>;
         selection?: Selection;
-        groupedRowsRenderHeader?: ((dimsumHeaderValue: string | undefined, subRows: Row[] | undefined) => JSX.Element) | string;
+        groupedRowsRenderHeader?: (dimsumHeaderValue: string | undefined, subRows: Row[] | undefined) => React.ReactNode;
         filterBarProps?: {
             filterBarAddonRenderer?: React.ComponentType<{
                 innerRef: React.MutableRefObject<HTMLButtonElement | null>;
@@ -435,7 +448,293 @@ export declare namespace DSDataTableT {
     }
     export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps>;
     export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps>;
+    /**
+     * Arguments the DataTable hands to the function form of a slot prop (`dsDatatableXxx={(args) => ({ ... })}`).
+     * Slots that repeat per row, cell or column receive that instance; the other slots receive no arguments.
+     *
+     * Arguments are objects whose shape we own, with named keys (`{ row }`, `{ cell }`, `{ columnId }`): we own the fact
+     * that `row` is there, not the shape of the row, and new keys can be added later without breaking anyone.
+     * Legacy exception: `dsDatatableRow` and `dsDatatableCellsContainer` receive the row itself, and `dsDatatableCell`,
+     * `dsDatatableCellContent`, `dsDatatableEditableContainer` and `dsDatatableTextEditableCellInput` receive the cell
+     * itself. They shipped before this rule; moving them to `{ row }` / `{ cell }` is a breaking change.
+     */
+    export interface HeaderSlotArguments {
+        columnId: string;
+        firstFocuseableColumnHeaderId: string | undefined;
+    }
+    export interface RowSlotArguments {
+        row: InternalRow;
+    }
+    export interface CellSlotArguments {
+        cell: Cell;
+    }
+    export interface ColumnSlotArguments {
+        columnId: string;
+    }
+    export interface ExpandSlotArguments {
+        isGlobal: boolean;
+    }
+    /**
+     * One shape for a slot that wraps several kinds of control: the keys that describe the control at the render site
+     * are filled, the others are not there. `dsDatatableDragAndDropGripper` is a row handle (`row`) or a column header
+     * handle (`columnId`).
+     */
+    export interface DragAndDropGripperSlotArguments {
+        row?: InternalRow;
+        columnId?: string;
+    }
+    /**
+     * One shape for the focus wrapper of the controls of the table. At the header drag handle `columnId` and
+     * `firstFocuseableColumnHeaderId` are filled, at the expand carets `isGlobal`, at the row drag handle `row`.
+     */
+    export interface FocusWithinSlotArguments {
+        row?: InternalRow;
+        columnId?: string;
+        firstFocuseableColumnHeaderId?: string;
+        isGlobal?: boolean;
+    }
+    export type SlotFunctionArguments = {
+        dsDatatableRoot: () => object;
+        dsDatatableContentWrapper: () => object;
+        dsDatatableTableWrapper: () => object;
+        dsDatatablePaginationWrapper: () => object;
+        dsDatatableTableContentWrapper: () => object;
+        dsDatatableVirtualListWrapper: () => object;
+        dsDatatableHeadWrapper: () => object;
+        dsDatatableHeadTr: () => object;
+        dsDatatableHeadTh: (args: HeaderSlotArguments) => object;
+        dsDatatableHeadRightIconsWrapper: (args: HeaderSlotArguments) => object;
+        dsDatatableHeaderCellWrapper: (args: ColumnSlotArguments) => object;
+        dsDatatableEmptyHeader: (args: ColumnSlotArguments) => object;
+        dsDatatableResizer: (args: ColumnSlotArguments) => object;
+        dsDatatableActionCell: (args: RowSlotArguments) => object;
+        dsDatatableExpandCellContainer: (args: ExpandSlotArguments) => object;
+        dsDatatableGlobalCheckboxContainer: () => object;
+        dsDatatableSingleCellContainer: (args: RowSlotArguments) => object;
+        dsDatatableDragAndDropGripper: (args: DragAndDropGripperSlotArguments) => object;
+        dsDatatableTextEditableCellInput: (args: Cell) => object;
+        dsDatatableFilterPopoverButton: (args: ColumnSlotArguments) => object;
+        dsDatatableFilterPopoverContent: (args: ColumnSlotArguments) => object;
+        dsDatatableDropIndicator: () => object;
+        dsDatatableCell: (args: Cell) => object;
+        dsDatatableCellContent: (args: Cell) => object;
+        dsDatatablePencilIcon: (args: CellSlotArguments) => object;
+        dsDatatableEditableContainer: (args: Cell) => object;
+        dsDatatableFullsizeGrid: (args: RowSlotArguments) => object;
+        dsDatatableRow: (args: InternalRow) => object;
+        dsDatatableGroupHeaderContainer: (args: RowSlotArguments) => object;
+        dsDatatableHeaderTitle: (args: RowSlotArguments) => object;
+        dsDatatableCellsContainer: (args: InternalRow) => object;
+        dsDatatableToolbarWrapper: (args: RowSlotArguments) => object;
+        dsDatatableToolbarButtonsWrapper: (args: RowSlotArguments) => object;
+        dsDatatableToolbarButton: (args: RowSlotArguments) => object;
+        dsDatatableToolbarPosition: (args: RowSlotArguments) => object;
+        dsDatatableEmptyStateWrapper: () => object;
+        dsDatatableWarningIcon: () => object;
+        dsDatatableEmptyPrimaryMessage: () => object;
+        dsDatatableEmptySecondaryMessage: () => object;
+        dsDatatableEmptyButton: () => object;
+        dsDatatableCenterContentFlexWrapper: () => object;
+        dsDatatableLoaderWrapper: () => object;
+        dsDatatableFilterBarWrapper: () => object;
+        dsDatatableFreeTextSearchFilter: (args: ColumnSlotArguments) => object;
+        dsDatatableFreeTextSearchWrapper: (args: ColumnSlotArguments) => object;
+        dsDatatableFilterPopover: (args: ColumnSlotArguments) => object;
+        dsDatatableFilterBarMenuButton: () => object;
+        dsDatatableFilterPopoverFooter: (args: ColumnSlotArguments) => object;
+        dsDatatableFocusWithin: (args: FocusWithinSlotArguments) => object;
+    };
     export type GetOwnerPropsT = () => ZustandT.PropsStore<DefaultProps & RequiredProps & OptionalProps & UseAutoCalculatedT>;
+    export interface RowContentRendererProps {
+        row: DSDataTableT.InternalRow;
+        compact?: boolean;
+        focusedRowId: string | null;
+        drilldownRowId: string | null;
+        itemIndex: number;
+        draggableProps: DraggablePropsT;
+        backgroundColor?: XstyledProps['backgroundColor'];
+        isDragOverlay: boolean;
+        minHeight: string;
+        height: string;
+        rowsLayout?: (string | number)[];
+        dropIndicatorPosition: false | DropIndicatorPositionValues;
+        isDropValid: boolean;
+        CustomRowContentRenderer?: React.ComponentType<RowContentRendererProps>;
+    }
+    export interface TruncatedTooltipTextProps {
+        value?: React.ReactNode;
+        placement?: DSHookFloatingContextT.PopperPlacementsT;
+    }
+    export type ConfigurableColumn = (renderRowActions: DSDataTableT.RenderRowActionsConfig) => DSDataTableT.InternalColumn;
+    export interface CurrentRangeFilterValue {
+        from: string | null;
+        to: string | null;
+    }
+    export interface DateRangeFilterValue {
+        startDate: string | null;
+        endDate: string | null;
+    }
+    export interface DateSwitcherFilterValue {
+        startDate: string | null;
+        endDate: string | null;
+        isDateRange: boolean;
+    }
+    export interface NumberRangeFilterValue {
+        from: number | '' | null;
+        to: number | '' | null;
+    }
+    export type BaseSelectFilterValue = DSComboboxT.SelectedOptionsT;
+    export interface BaseSelectProps {
+        isMulti?: boolean;
+        creatable?: boolean;
+        type: string;
+    }
+    export type MultiCreatableFilterValue = DSComboboxT.SelectedOptionsT;
+    export type MultiSelectFilterValue = DSComboboxT.SelectedOptionsT;
+    export type SingleCreatableFilterValue = DSComboboxT.SelectedOptionsT;
+    export type SingleSelectFilterValue = DSComboboxT.SelectedOptionsT;
+    export type SingleDataFilterValue = string | null;
+    export interface FilterBarDropdownMenuProps {
+        options?: DSDropdownMenuT.Item[] | readonly DSDropdownMenuT.Item[];
+        innerRef?: React.RefObject<HTMLButtonElement>;
+    }
+    export interface FilterPopoverProps {
+        column: InternalColumn;
+        columnId: string;
+        columnReference?: HTMLElement | null;
+        triggerIcon: JSX.Element;
+        menuContent: JSX.Element;
+        onTriggerClick?: (id: string, e: React.MouseEvent | React.KeyboardEvent) => void;
+        onClickOutsideMenu?: (id: string) => void;
+        reduxHeader: ReduxHeader;
+        innerRef: React.MutableRefObject<HTMLButtonElement | null>;
+        ariaLabel: string;
+        customStyles?: React.CSSProperties;
+        firstElementRef: React.RefObject<HTMLElement>;
+        lastElementRef: React.RefObject<HTMLElement>;
+    }
+    export interface FilterPopoverV2Props {
+        column: InternalColumn;
+        columnId: string;
+        columnReference?: HTMLElement | null;
+        triggerIcon: JSX.Element;
+        menuContent: JSX.Element;
+        onTriggerClick?: (id: string, e: React.MouseEvent | React.KeyboardEvent) => void;
+        onClickOutsideMenu?: (id: string) => void;
+        reduxHeader: ReduxHeader;
+        innerRef: React.MutableRefObject<HTMLButtonElement | null>;
+        ariaLabel: string;
+        customStyles?: React.CSSProperties;
+        firstElementRef: React.RefObject<HTMLElement>;
+        onFilterSubmit: (e: React.SyntheticEvent) => void;
+        onFilterReset: () => void;
+    }
+    export interface FilterMenuButtonProps {
+        options?: DSMenuButtonT.MenuItemInterface[];
+        innerRef?: React.RefObject<HTMLButtonElement>;
+        onClearFilters: TypescriptHelpersT.GenericFunc;
+        onItemSelected?: (newSelection: DSMenuButtonT.SelectionableMenuNodes[], metainfo: {
+            itemNode: DSMenuButtonT.SelectionableMenuNodes;
+            event?: React.SyntheticEvent;
+        }) => void | TypescriptHelpersT.StateSetter<DSMenuButtonT.SelectionableMenuNodes[]>;
+        onActivateItem?: (itemNode: DSMenuButtonT.PseudoFocusableMenuNodes, metainfo: {
+            itemNode: DSMenuButtonT.PseudoFocusableMenuNodes;
+            event?: React.SyntheticEvent;
+        }) => void;
+        onOpen?: (metainfo: DSMenuButtonT.MenuOpenMetainfo) => void;
+        onClose?: (metainfo: DSMenuButtonT.MenuCloseMetainfo) => void;
+        [key: string]: unknown;
+        selectedItems?: DSMenuButtonT.SelectionableMenuNodes[] | DSMenuButtonT.SelectionableMenuItemInterface[];
+    }
+    export interface PillsFromDataTableFiltersProps {
+        filters: DSDataTableT.Filter[];
+        columns: DSDataTableT.Column[];
+        onFiltersChange: (filters: DSDataTableT.Filter[]) => void;
+        onPillRemove?: (remove: () => void) => void;
+        customPillRenderers?: Record<string, React.ComponentType<DSDataTableT.FilterPillProps<unknown>>>;
+        customPillRenderer?: React.ComponentType<DSDataTableT.FilterPillProps<unknown>>;
+    }
+    export interface RowRendererProps {
+        row: DSDataTableT.InternalRow;
+        compact?: boolean;
+        itemIndex: number;
+        isDragOverlay: boolean;
+        minHeight: string;
+        height: string;
+        rowsLayout?: string[] | number[];
+        CustomRowContentRenderer?: React.ComponentType<RowContentRendererProps>;
+        focusedRowId: string | null;
+        drilldownRowId: string | null;
+        backgroundColor?: XstyledProps['backgroundColor'];
+    }
+    export interface ToolbarProps {
+        isRowSelected?: boolean;
+        cell: DSDataTableT.Cell;
+        children: React.ReactNode;
+    }
+    export interface CellFactoryProps {
+        cell: DSDataTableT.Cell;
+        column: DSDataTableT.InternalColumn;
+        row: DSDataTableT.InternalRow;
+        isRowSelected: boolean;
+        shouldAddExpandCell: boolean;
+        cellIsNextToExpander: boolean;
+        isDragOverlay: boolean;
+    }
+    export interface DropIndicatorProps {
+        vertical: boolean;
+        dropIndicatorPosition: false | DSDataTableT.DropIndicatorPositionValues;
+        isDropValid: boolean;
+        isLast?: boolean;
+    }
+    export type MultiSelectPillValues = DSComboboxT.ItemOption[];
+    export interface HeaderCellCompProps {
+        column: DSDataTableT.InternalColumn;
+        isDragOverlay?: boolean;
+        colSpan: number;
+    }
+    export interface HeaderCellTitleProps {
+        column: DSDataTableT.InternalColumn;
+        draggableProps: DraggablePropsT;
+        textWrap: 'wrap' | 'wrap-all' | 'truncate';
+    }
+    export type UseHeaderCellConfigType = (args: {
+        column: DSDataTableT.InternalColumn;
+        isDragOverlay?: boolean;
+    }) => {
+        hasFilter: boolean;
+        hasDnD: boolean;
+        hasSortingCaret: boolean;
+        hasRightIcons: boolean;
+        isDragging: boolean;
+        shouldShowDnD: boolean;
+        shouldShowResize: boolean;
+        hCols: string[];
+    };
+    export type UseHeaderCellHandlersType = (args: {
+        hasFilter: boolean;
+        column: DSDataTableT.InternalColumn;
+        hasDnD: boolean;
+        dragHandleRef: React.MutableRefObject<HTMLDivElement | null>;
+        sortRef: React.MutableRefObject<HTMLButtonElement | null>;
+        filterIconRef: React.MutableRefObject<HTMLButtonElement | null>;
+        resizeHandlerRef: React.MutableRefObject<HTMLInputElement | null>;
+        hasSortingCaret: boolean;
+        isDragOverlay?: boolean;
+        draggableProps: DSDataTableT.DraggablePropsT;
+        referenceColumn: React.MutableRefObject<HTMLDivElement | null>;
+    }) => {
+        onMouseEnter: React.MouseEventHandler;
+        onMouseLeave: React.MouseEventHandler;
+        handleSort: React.MouseEventHandler;
+        onKeyDown: React.KeyboardEventHandler;
+        onFocus: React.FocusEventHandler;
+        onBlur: React.FocusEventHandler;
+    };
+    export interface WithConditionalDnDSortableContextProps {
+        items: DSDataTableT.InternalColumn[];
+        isDragOverlay: boolean;
+    }
     export {};
 }
 export declare const defaultProps: () => DSDataTableT.DefaultProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-data-table",
-  "version": "3.80.0-next.64",
+  "version": "3.80.0-next.67",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Data Table",
   "files": [
@@ -37,41 +37,39 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-button-v2": "3.80.0-next.64",
-    "@elliemae/ds-circular-progress-indicator": "3.80.0-next.64",
-    "@elliemae/ds-dialog": "3.80.0-next.64",
-    "@elliemae/ds-drag-and-drop": "3.80.0-next.64",
-    "@elliemae/ds-dropdownmenu-v2": "3.80.0-next.64",
-    "@elliemae/ds-floating-context": "3.80.0-next.64",
-    "@elliemae/ds-form-checkbox": "3.80.0-next.64",
-    "@elliemae/ds-form-combobox": "3.80.0-next.64",
-    "@elliemae/ds-form-date-range-picker": "3.80.0-next.64",
-    "@elliemae/ds-form-date-time-picker": "3.80.0-next.64",
-    "@elliemae/ds-form-helpers-mask-hooks": "3.80.0-next.64",
-    "@elliemae/ds-form-input-text": "3.80.0-next.64",
-    "@elliemae/ds-form-layout-blocks": "3.80.0-next.64",
-    "@elliemae/ds-form-radio": "3.80.0-next.64",
-    "@elliemae/ds-grid": "3.80.0-next.64",
-    "@elliemae/ds-hooks-focus-trap": "3.80.0-next.64",
-    "@elliemae/ds-icons": "3.80.0-next.64",
-    "@elliemae/ds-legacy-dropdownmenu": "^1.0.0",
-    "@elliemae/ds-menu-button": "3.80.0-next.64",
-    "@elliemae/ds-pagination": "3.80.0-next.64",
-    "@elliemae/ds-pills-v2": "3.80.0-next.64",
-    "@elliemae/ds-props-helpers": "3.80.0-next.64",
-    "@elliemae/ds-skeleton": "3.80.0-next.64",
-    "@elliemae/ds-system": "3.80.0-next.64",
-    "@elliemae/ds-typescript-helpers": "3.80.0-next.64",
-    "@elliemae/ds-zustand-helpers": "3.80.0-next.64",
+    "@elliemae/ds-button-v2": "3.80.0-next.67",
+    "@elliemae/ds-circular-progress-indicator": "3.80.0-next.67",
+    "@elliemae/ds-dialog": "3.80.0-next.67",
+    "@elliemae/ds-drag-and-drop": "3.80.0-next.67",
+    "@elliemae/ds-floating-context": "3.80.0-next.67",
+    "@elliemae/ds-form-checkbox": "3.80.0-next.67",
+    "@elliemae/ds-form-combobox": "3.80.0-next.67",
+    "@elliemae/ds-form-date-range-picker": "3.80.0-next.67",
+    "@elliemae/ds-form-date-time-picker": "3.80.0-next.67",
+    "@elliemae/ds-form-helpers-mask-hooks": "3.80.0-next.67",
+    "@elliemae/ds-form-input-text": "3.80.0-next.67",
+    "@elliemae/ds-form-layout-blocks": "3.80.0-next.67",
+    "@elliemae/ds-form-radio": "3.80.0-next.67",
+    "@elliemae/ds-grid": "3.80.0-next.67",
+    "@elliemae/ds-hooks-focus-trap": "3.80.0-next.67",
+    "@elliemae/ds-icons": "3.80.0-next.67",
+    "@elliemae/ds-menu-button": "3.80.0-next.67",
+    "@elliemae/ds-pagination": "3.80.0-next.67",
+    "@elliemae/ds-pills-v2": "3.80.0-next.67",
+    "@elliemae/ds-props-helpers": "3.80.0-next.67",
+    "@elliemae/ds-skeleton": "3.80.0-next.67",
+    "@elliemae/ds-system": "3.80.0-next.67",
+    "@elliemae/ds-typescript-helpers": "3.80.0-next.67",
+    "@elliemae/ds-zustand-helpers": "3.80.0-next.67",
     "@tanstack/react-virtual": "3.13.18",
     "uid": "^2.0.2",
     "use-onclickoutside": "0.4.1"
   },
   "devDependencies": {
-    "@elliemae/ds-monorepo-devops": "3.80.0-next.64",
-    "@elliemae/ds-tabs": "3.80.0-next.64",
-    "@elliemae/ds-test-utils": "3.80.0-next.64",
-    "@elliemae/ds-toolbar-v2": "3.80.0-next.64",
+    "@elliemae/ds-monorepo-devops": "3.80.0-next.67",
+    "@elliemae/ds-tabs": "3.80.0-next.67",
+    "@elliemae/ds-test-utils": "3.80.0-next.67",
+    "@elliemae/ds-toolbar-v2": "3.80.0-next.67",
     "jest": "^30.0.0",
     "styled-components": "~5.3.11",
     "styled-system": "^5.1.5"

package/skills/ds-data-table-boundaries/SKILL.md

@@ -9,7 +9,7 @@ description: >
   DataTable cell. DataTable-as-form forbidden — use @elliemae/ds-grid.
 type: core
 library: ds-data-table
-library_version: '3.60.0'
+library_version: '3.80.0'
 sources:
   - '@elliemae/ds-data-table:dist/types/react-desc-prop-types.d.ts'
 ---
@@ -71,18 +71,26 @@ When a column is needed exclusively for per-row action buttons, use the dedicate
 
 Use when each action is a direct button (delete, print, copy, edit) with no sub-menus.
 
-```jsx
-import { DataTable, Toolbar } from '@elliemae/ds-data-table';
+```tsx
+import { DataTable, Toolbar, type DSDataTableT } from '@elliemae/ds-data-table';
 import { DSToolbarV2, DSToolbarItemV2 } from '@elliemae/ds-toolbar-v2';
 import { DSButtonV3 } from '@elliemae/ds-button-v2';
+import { Delete } from '@elliemae/ds-icons';
 
-const RowActionsRenderer = React.memo((props) => (
+const RowActionsRenderer = React.memo((props: DSDataTableT.CellProps) => (
   <Toolbar {...props}>
     <DSToolbarV2 withDepth={false}>
       <DSToolbarItemV2
         render={(itemProps) => (
-          <DSButtonV3 autoFocus buttonType="icon" {...itemProps} aria-label="Delete">
-            {/* icon */}
+          <DSButtonV3
+            autoFocus
+            buttonType="icon"
+            {...itemProps}
+            // the toolbar types the ref as any HTMLElement; you know it is rendered on a button
+            innerRef={itemProps.innerRef as React.MutableRefObject<HTMLButtonElement | null>}
+            aria-label="Delete"
+          >
+            <Delete />
           </DSButtonV3>
         )}
       />
@@ -109,39 +117,42 @@ import { Grid } from '@elliemae/ds-grid';
 import { MoreOptionsVert } from '@elliemae/ds-icons';
 import { DSMenuButton } from '@elliemae/ds-menu-button';
 
-const RowActionsRenderer: DSDataTableT.RenderRowActionsConfig['renderer'] = React.memo(
-  ({ isRowSelected, cell }) => {
-    const { ref } = cell as unknown as { ref: React.MutableRefObject<HTMLButtonElement> };
-
-    const handleConflictingKeyPresses = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(
-      (event) => {
-        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
-          event.stopPropagation();
-          event.preventDefault();
+const RowActionsRenderer: DSDataTableT.RenderRowActionsConfig['renderer'] = React.memo(({ isRowSelected, cell }) => {
+  const { ref } = cell as unknown as { ref: React.MutableRefObject<HTMLButtonElement> };
+
+  const handleConflictingKeyPresses = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>((event) => {
+    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }, []);
+
+  return (
+    <Grid
+      minHeight="100%"
+      minWidth="100%"
+      justifyContent="center"
+      alignItems="center"
+      onKeyDown={handleConflictingKeyPresses}
+    >
+      <DSMenuButton
+        innerRef={ref}
+        tabIndex={isRowSelected ? 0 : -1}
+        buttonType={BUTTON_TYPES.ICON}
+        aria-label="Show row actions, to resume table row navigation press tab"
+        {
+          ...menuButtonProps /* options, onActivateItem, etc. per scenario */
         }
-      },
-      [],
-    );
-
-    return (
-      <Grid minHeight="100%" minWidth="100%" justifyContent="center" alignItems="center" onKeyDown={handleConflictingKeyPresses}>
-        <DSMenuButton
-          innerRef={ref}
-          tabIndex={isRowSelected ? 0 : -1}
-          buttonType={BUTTON_TYPES.ICON}
-          aria-label="Show row actions, to resume table row navigation press tab"
-          {/* ...DSMenuButton props per scenario (options, onActivateItem, etc.) */}
-        >
-          <MoreOptionsVert />
-        </DSMenuButton>
-      </Grid>
-    );
-  },
-);
+      >
+        <MoreOptionsVert />
+      </DSMenuButton>
+    </Grid>
+  );
+});
 
 const renderRowActions: DSDataTableT.RenderRowActionsConfig = { columnWidth: 32, renderer: RowActionsRenderer };
 
-<DataTable columns={columns} data={rows} height={500} renderRowActions={renderRowActions} />
+<DataTable columns={columns} data={rows} height={500} renderRowActions={renderRowActions} />;
 ```
 
 **`onKeyDown` on the Grid wrapper is required.** `DSMenuButton` uses ArrowUp/ArrowDown to navigate menu items. Without `stopPropagation`, those keystrokes also move the DataTable's row focus — the two navigation models conflict silently.
@@ -266,14 +277,14 @@ Cell: ({ row, cell, isRowSelected }) => (
 ),
 ```
 
-The DataTable uses an Enter-to-enter-row keyboard model: Tab moves between rows; Enter "enters" a row to navigate its interactive elements; Escape exits back to row navigation. An interactive element with `tabIndex={0}` unconditionally is permanently tabbable from outside the row — it intercepts Tab focus and breaks the row navigation model entirely.
+The DataTable uses an Enter-to-enter-row keyboard model: Tab moves between rows; Enter "enters" a row to navigate its interactive elements; moving focus back onto the row element exits back to row navigation (Escape is not handled at row level). An interactive element with `tabIndex={0}` unconditionally is permanently tabbable from outside the row — it intercepts Tab focus and breaks the row navigation model entirely.
 
 Two props from `CellRendererProps` are required:
 
 - `tabIndex={isRowSelected ? 0 : -1}` — makes the element focusable only when the row is entered
 - `cell.ref` — registers the element as the row's focusable target so Enter moves focus to it
 
-For components that accept `innerRef`: pass `innerRef={cell.ref}`. For components that wrap the element: pass `containerProps={{ ref: cell.ref }}`. For standard DOM elements: pass `ref={cell.ref}`.
+For components that accept `innerRef`: pass `innerRef={cell.ref}`. For standard DOM elements: pass `ref={cell.ref}`. Do not pass `cell.ref` through `containerProps`: it lands on the component's wrapper element, not on the focusable control, so Enter has nothing to focus.
 
 Source: https://dimsum.mortgagetech.ice.com/iframe.html?id=components-datatable-features-cell--custom-cell-row-and-header
 
@@ -313,7 +324,7 @@ const renderRowActions: DSDataTableT.RenderRowActionsConfig = {
 <DataTable columns={columns} data={rows} height={500} renderRowActions={renderRowActions} />;
 ```
 
-`renderRowActions` is the dedicated first-class API for per-row action columns. `Column.Cell` misses the arrow key conflict handler and loses built-in column width management for the actions column.
+`renderRowActions` is the dedicated first-class API for per-row action columns. `Column.Cell` loses built-in column width management for the actions column: the table adds the `renderRowActions` column with a fixed width (`columnWidth`), not resizable, not draggable and not focusable as a header. Neither API adds the arrow key conflict handler — the renderer adds it (see the multi-level pattern above).
 
 Source: https://dimsum.mortgagetech.ice.com/iframe.html?id=components-datatable-advanced--with-multilevel-menu-button
 
@@ -328,11 +339,7 @@ Wrong:
 const RowActionsRenderer = React.memo((props) => (
   <Toolbar {...props}>
     <DSToolbarV2 withDepth={false}>
-      <DSToolbarItemV2
-        render={(itemProps) => (
-          <DSMenuButton {...itemProps} {/* ...options, onActivateItem, etc. */} />
-        )}
-      />
+      <DSToolbarItemV2 render={(itemProps) => <DSMenuButton {...itemProps} /* ...options, onActivateItem, etc. */ />} />
     </DSToolbarV2>
   </Toolbar>
 ));