@servicetitan/anvil2 3.0.1 → 3.0.2

package/dist/beta/components/InteractiveCard/InteractiveCard.d.ts

@@ -5,7 +5,9 @@ import { InteractiveCardProps } from './types';
  * Features:
  * - Clickable card area that can be a button or link
  * - Supports nested interactive elements without accessibility violations
- * - Uses sibling structure with pointer-events to avoid nested button issues
+ * - Dead-space clicks are forwarded to the action element via event delegation,
+ *   so any focusable child (button, link, input, switch, etc.) handles its own
+ *   click without bubbling to the card action
  * - Box-shadow feedback on hover and focus of any interactive element
  * - Full keyboard accessibility with proper focus management
  * - Touch-friendly with mobile support

package/dist/beta/components/RichTextEditor/RichTextEditor.d.ts

@@ -0,0 +1,27 @@
+import { RichTextEditorProps } from './types';
+/**
+ * RichTextEditor component for authoring formatted content.
+ *
+ * Features:
+ * - Supports both controlled (`value`) and uncontrolled (`defaultValue`) modes
+ * - Emits content as both HTML string (`onChange`) and TipTap JSON (`onJsonChange`)
+ * - Text formatting toolbar: bold, italic, underline, strikethrough, inline code, blockquote
+ * - Headings (H1–H3), paragraph, font size, text alignment, and indentation
+ * - Bullet lists, ordered lists, and checklists
+ * - Link insertion and removal via popover
+ * - Image upload and YouTube video embedding via Insert dropdown (`allowMedia`)
+ * - Drag handle for reordering content blocks (`allowDragDrop`)
+ * - @mention typeahead with hover card support (`allowMention`)
+ * - Disabled state disables both toolbar and editor content
+ * - Field-level label, hint, description, and error messaging
+ * - Accessible toolbar with ARIA roles, `aria-pressed` toggles, and keyboard navigation
+ * - Built on TipTap (ProseMirror) with Shadow DOM support
+ *
+ * @example
+ * <RichTextEditor
+ *   label="Notes"
+ *   defaultValue="<p>Hello world</p>"
+ *   onChange={(html) => console.log(html)}
+ * />
+ */
+export declare const RichTextEditor: import('react').ForwardRefExoticComponent<RichTextEditorProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/beta/components/RichTextEditor/index.d.ts

@@ -0,0 +1,2 @@
+export { RichTextEditor } from './RichTextEditor';
+export type { RichTextEditorProps, RichTextEditorMentionOption } from './types';

package/dist/beta/components/RichTextEditor/internal/LinkPopover.d.ts

@@ -0,0 +1,14 @@
+type LinkPopoverProps = {
+    open: boolean;
+    anchorRect: DOMRect | null;
+    initialHref: string;
+    initialDisplayText: string;
+    onSave: (href: string, displayText: string) => void;
+    onRemove: () => void;
+    onCancel: () => void;
+};
+export declare const LinkPopover: {
+    ({ open, anchorRect, initialHref, initialDisplayText, onSave, onRemove, onCancel, }: LinkPopoverProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/beta/components/RichTextEditor/internal/MentionList.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { RichTextEditorMentionOption } from '../types';
+export type MentionListRef = {
+    onKeyDown: (props: {
+        event: KeyboardEvent;
+    }) => boolean;
+};
+type MentionListProps = {
+    items: RichTextEditorMentionOption[];
+    command: (item: RichTextEditorMentionOption) => void;
+    renderOption?: (option: RichTextEditorMentionOption) => ReactNode;
+};
+export declare const MentionList: import('react').ForwardRefExoticComponent<MentionListProps & import('react').RefAttributes<MentionListRef>>;
+export {};

package/dist/beta/components/RichTextEditor/internal/MentionNodeView.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { NodeViewProps } from '@tiptap/react';
+import { RichTextEditorMentionOption } from '../types';
+type MentionNodeViewProps = NodeViewProps & {
+    renderHoverContent?: (option: RichTextEditorMentionOption) => ReactNode;
+};
+export declare const MentionNodeView: {
+    ({ node, renderHoverContent, }: MentionNodeViewProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/beta/components/RichTextEditor/internal/MentionPopover.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { RichTextEditorMentionOption } from '../types';
+export type MentionPopoverRef = {
+    onKeyDown: (props: {
+        event: KeyboardEvent;
+    }) => boolean;
+};
+type MentionPopoverProps = {
+    open: boolean;
+    rect: DOMRect | null;
+    items: RichTextEditorMentionOption[];
+    command: ((item: RichTextEditorMentionOption) => void) | null;
+    renderOption?: (option: RichTextEditorMentionOption) => ReactNode;
+};
+export declare const MentionPopover: import('react').ForwardRefExoticComponent<MentionPopoverProps & import('react').RefAttributes<MentionPopoverRef>>;
+export {};

package/dist/beta/components/RichTextEditor/internal/RichTextEditorContext.d.ts

@@ -0,0 +1,57 @@
+import { MutableRefObject, MouseEvent } from 'react';
+import { Editor } from '@tiptap/react';
+import { MentionPopoverRef } from './MentionPopover';
+import { MentionState } from './extensions/MentionExtension';
+import { OpenLinkPopover } from './extensions/LinkKeyboardShortcutExtension';
+import { RichTextEditorProps } from '../types';
+type LinkPopoverState = {
+    open: boolean;
+    anchorRect: DOMRect | null;
+    initialHref: string;
+    initialDisplayText: string;
+};
+type YouTubePopoverState = {
+    open: boolean;
+    anchorRect: DOMRect | null;
+};
+type YouTubeEmbedPromptState = {
+    open: boolean;
+    anchorRect: DOMRect | null;
+    url: string;
+    from: number;
+    to: number;
+};
+export type RichTextEditorContextValue = {
+    editor: Editor;
+    disabled: boolean;
+    allowTextFormat: boolean;
+    allowTextAlignment: boolean;
+    allowLists: boolean;
+    allowChecklist: boolean;
+    allowCode: boolean;
+    allowBlockquote: boolean;
+    allowLink: boolean;
+    allowMedia: boolean;
+    allowMention: boolean;
+    allowDragDrop: boolean;
+    onImageUpload: RichTextEditorProps["onImageUpload"];
+    allowedMimeTypes: `image/${string}`[];
+    mentionState: MentionState;
+    mentionPopoverRef: MutableRefObject<MentionPopoverRef | null>;
+    linkPopoverState: LinkPopoverState;
+    youtubePopoverState: YouTubePopoverState;
+    youtubeEmbedPromptState: YouTubeEmbedPromptState;
+    onEditorClick: (event: MouseEvent) => void;
+    openLinkPopover: OpenLinkPopover;
+    closeLinkPopover: () => void;
+    removeLinkPopover: () => void;
+    saveLinkPopover: (href: string, displayText: string) => void;
+    embedYoutubeFromPrompt: () => void;
+    closeYoutubeEmbedPrompt: () => void;
+    openYoutubePopover: (anchorRect: DOMRect) => void;
+    closeYoutubePopover: () => void;
+    saveYoutubePopover: (url: string) => void;
+};
+export declare const RichTextEditorContext: import('react').Context<RichTextEditorContextValue | null>;
+export declare const useRichTextEditorContext: () => RichTextEditorContextValue;
+export {};

package/dist/beta/components/RichTextEditor/internal/RichTextEditorDragHandle.d.ts

@@ -0,0 +1,6 @@
+import { Editor } from '@tiptap/core';
+type RichTextEditorDragHandleProps = {
+    editor: Editor;
+};
+export declare function RichTextEditorDragHandle({ editor, }: RichTextEditorDragHandleProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/beta/components/RichTextEditor/internal/RichTextEditorMockData.d.ts

@@ -0,0 +1,8 @@
+import { RichTextEditorMentionOption } from '../types';
+export declare const MOCK_MENTION_USERS: RichTextEditorMentionOption[];
+export declare const MOCK_CONTENT_BASIC = "<p>Hello <strong>world</strong>. This is <em>italic</em> and <u>underlined</u>.</p>";
+export declare const MOCK_CONTENT_RICH: string;
+export declare const MOCK_CONTENT_WITH_MENTION = "<p>Hey <span data-type=\"mention\" data-id=\"1\" data-label=\"Alice Johnson\"></span>, can you review this?</p>";
+export declare const MOCK_CONTENT_WITH_CHECKLIST: string;
+export declare const MOCK_CONTENT_WITH_YOUTUBE: string;
+export declare const MOCK_CONTENT_WITH_DRAG_BLOCKS: string;

package/dist/beta/components/RichTextEditor/internal/RichTextEditorProvider.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { RichTextEditorProps } from '../types';
+type RichTextEditorProviderProps = Pick<RichTextEditorProps, "value" | "defaultValue" | "onChange" | "onJsonChange" | "placeholder" | "disabled" | "allowTextFormat" | "allowTextAlignment" | "allowLists" | "allowChecklist" | "allowCode" | "allowBlockquote" | "allowLink" | "allowMedia" | "allowMention" | "allowDragDrop" | "mentionOptions" | "onMentionInputChange" | "renderMentionHoverContent" | "onImageUpload"> & {
+    allowedMimeTypes?: `image/${string}`[];
+    children: React.ReactNode;
+};
+export declare const RichTextEditorProvider: ({ children, allowTextFormat, allowTextAlignment, allowLists, allowChecklist, allowCode, allowBlockquote, allowLink, allowMedia, allowMention, allowDragDrop, disabled, mentionOptions, onMentionInputChange, renderMentionHoverContent, onImageUpload, allowedMimeTypes, ...editorProps }: RichTextEditorProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/beta/components/RichTextEditor/internal/RichTextEditorToolbar.d.ts

@@ -0,0 +1 @@
+export declare const RichTextEditorToolbar: () => import("react/jsx-runtime").JSX.Element | null;

package/dist/beta/components/RichTextEditor/internal/YouTubeEmbedPrompt.d.ts

@@ -0,0 +1,11 @@
+type YouTubeEmbedPromptProps = {
+    open: boolean;
+    anchorRect: DOMRect | null;
+    onEmbed: () => void;
+    onDismiss: () => void;
+};
+export declare const YouTubeEmbedPrompt: {
+    ({ open, anchorRect, onEmbed, onDismiss, }: YouTubeEmbedPromptProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/beta/components/RichTextEditor/internal/YouTubePopover.d.ts

@@ -0,0 +1,11 @@
+type YouTubePopoverProps = {
+    open: boolean;
+    anchorRect: DOMRect | null;
+    onSave: (url: string) => void;
+    onCancel: () => void;
+};
+export declare const YouTubePopover: {
+    ({ open, anchorRect, onSave, onCancel, }: YouTubePopoverProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/beta/components/RichTextEditor/internal/extensions/ImageUploadExtension.d.ts

@@ -0,0 +1,3 @@
+import { MutableRefObject } from 'react';
+export declare const DEFAULT_ALLOWED_MIME_TYPES: `image/${string}`[];
+export declare const createImageUploadExtension: (onImageUploadRef: MutableRefObject<((files: File[], onComplete: (srcs: string[]) => void) => void) | undefined>, allowedMimeTypes?: `image/${string}`[]) => import('@tiptap/core').Extension<Omit<import('@tiptap/extension-file-handler').FileHandlePluginOptions, "key" | "editor">, any>;

package/dist/beta/components/RichTextEditor/internal/extensions/LinkKeyboardShortcutExtension.d.ts

@@ -0,0 +1,8 @@
+import { MutableRefObject } from 'react';
+import { Extension } from '@tiptap/core';
+export type OpenLinkPopover = (params: {
+    anchorRect: DOMRect;
+    href: string;
+    displayText: string;
+}) => void;
+export declare const createLinkKeyboardShortcutExtension: (openLinkPopoverRef: MutableRefObject<OpenLinkPopover | null>) => Extension<any, any>;

package/dist/beta/components/RichTextEditor/internal/extensions/MentionExtension.d.ts

@@ -0,0 +1,18 @@
+import { MutableRefObject, Dispatch, SetStateAction, ReactNode } from 'react';
+import { RichTextEditorMentionOption } from '../../types';
+export declare const UNICODE_WHITESPACE_PATTERN = "[\0- \u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]";
+export declare const UNICODE_WHITESPACE_REGEX: RegExp;
+export type MentionState = {
+    open: boolean;
+    items: RichTextEditorMentionOption[];
+    command: ((item: RichTextEditorMentionOption) => void) | null;
+    rect: DOMRect | null;
+};
+export type MentionCallbacks = {
+    getOptions: () => RichTextEditorMentionOption[];
+    onQueryChange: (query: string) => void;
+    setState: Dispatch<SetStateAction<MentionState>>;
+    onKeyDown: (event: KeyboardEvent) => boolean;
+    getRenderHoverContent: () => ((option: RichTextEditorMentionOption) => ReactNode) | undefined;
+};
+export declare const createMentionExtension: (callbacksRef: MutableRefObject<MentionCallbacks>) => import('@tiptap/core').Node<import('@tiptap/extension-mention').MentionOptions<any, import('@tiptap/extension-mention').MentionNodeAttrs>, any>;

package/dist/beta/components/RichTextEditor/internal/extensions/YoutubeExtension.d.ts

@@ -0,0 +1,8 @@
+import { MutableRefObject } from 'react';
+export type OnYoutubePaste = (params: {
+    anchorRect: DOMRect;
+    url: string;
+    from: number;
+    to: number;
+}) => void;
+export declare const createYoutubeExtension: (onYoutubePasteRef: MutableRefObject<OnYoutubePaste>) => import('@tiptap/core').Node<import('@tiptap/extension-youtube').YoutubeOptions, any>;

package/dist/beta/components/RichTextEditor/internal/useRichTextEditor.d.ts

@@ -0,0 +1,32 @@
+import { MutableRefObject } from 'react';
+import { MentionCallbacks } from './extensions/MentionExtension';
+import { OnYoutubePaste } from './extensions/YoutubeExtension';
+import { OpenLinkPopover } from './extensions/LinkKeyboardShortcutExtension';
+import { RichTextEditorProps } from '../types';
+/**
+ * Parameters for the useRichTextEditor hook.
+ * @property {MutableRefObject<RichTextEditorProps["onImageUpload"]>} onImageUploadRef - Stable ref to the image upload callback, used by extensions without re-creating the editor.
+ * @property {MutableRefObject<MentionCallbacks>} mentionCallbacksRef - Stable ref to mention event callbacks (input change, item select).
+ * @property {MutableRefObject<OnYoutubePaste>} onYoutubePasteRef - Stable ref to the YouTube paste handler used by the YouTube extension.
+ * @property {MutableRefObject<OpenLinkPopover | null>} openLinkPopoverRef - Stable ref to the function that opens the link popover, wired to the `Ctrl/Cmd+K` keyboard shortcut extension.
+ * @property {`image/${string}`[]} [allowedMimeTypes] - MIME types accepted for image upload via paste and drop.
+ */
+export type UseRichTextEditorParams = Pick<RichTextEditorProps, "value" | "defaultValue" | "onChange" | "onJsonChange" | "placeholder" | "disabled" | "allowTextFormat" | "allowTextAlignment" | "allowLists" | "allowChecklist" | "allowCode" | "allowBlockquote" | "allowLink" | "allowMedia" | "allowMention" | "onImageUpload"> & {
+    allowedMimeTypes?: `image/${string}`[];
+    onImageUploadRef: MutableRefObject<RichTextEditorProps["onImageUpload"]>;
+    mentionCallbacksRef: MutableRefObject<MentionCallbacks>;
+    onYoutubePasteRef: MutableRefObject<OnYoutubePaste>;
+    openLinkPopoverRef: MutableRefObject<OpenLinkPopover | null>;
+};
+/**
+ * Internal hook that initializes and manages the TipTap editor instance for RichTextEditor.
+ *
+ * Conditionally registers TipTap extensions based on the `allow*` feature flags so that
+ * only the capabilities needed for a given editor configuration are included. Handles both
+ * controlled mode (via `value` + `onChange`) and uncontrolled mode (via `defaultValue`),
+ * and syncs the `disabled` prop to the editor's editable state.
+ *
+ * @param params - Configuration derived from RichTextEditorProps plus stable callback refs.
+ * @returns The TipTap `Editor` instance, or `null` during SSR / before mount.
+ */
+export declare const useRichTextEditor: ({ value, defaultValue, onChange, onJsonChange, placeholder, disabled, allowTextFormat, allowTextAlignment, allowLists, allowChecklist, allowCode, allowBlockquote, allowLink, allowMedia, allowMention, allowedMimeTypes, onImageUploadRef, mentionCallbacksRef, onYoutubePasteRef, openLinkPopoverRef, }: UseRichTextEditorParams) => import('@tiptap/core').Editor;

package/dist/beta/components/RichTextEditor/types.d.ts

@@ -0,0 +1,103 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { JSONContent } from '@tiptap/core';
+import { HelperProps } from '../../../internal/components';
+import { FieldLabelProps } from '../../../components/FieldLabel';
+import { LayoutUtilProps } from '../../../types';
+import { DataTrackingId } from '../../../types/DataTrackingId';
+/**
+ * A single option displayed in the @mention typeahead dropdown.
+ * @property {string} id - Unique identifier for the mention option, stored in the mention node's attributes.
+ * @property {string} label - Display name shown in the dropdown and rendered inside the inserted mention node.
+ */
+export type RichTextEditorMentionOption = {
+    id: string;
+    label: string;
+};
+type RichTextEditorBaseProps = {
+    id?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (html: string) => void;
+    onJsonChange?: (json: JSONContent) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: boolean | string | string[];
+    hint?: HelperProps["hint"];
+    description?: HelperProps["description"];
+    label?: FieldLabelProps["children"];
+    labelProps?: FieldLabelProps;
+    required?: boolean;
+    moreInfo?: ReactNode;
+    allowTextFormat?: boolean;
+    allowTextAlignment?: boolean;
+    allowLists?: boolean;
+    allowChecklist?: boolean;
+    allowCode?: boolean;
+    allowBlockquote?: boolean;
+    allowLink?: boolean;
+    allowMention?: boolean;
+    allowDragDrop?: boolean;
+    mentionOptions?: RichTextEditorMentionOption[];
+    onMentionInputChange?: (query: string) => void;
+    renderMentionOption?: (option: RichTextEditorMentionOption) => ReactNode;
+    renderMentionHoverContent?: (option: RichTextEditorMentionOption) => ReactNode;
+};
+type RichTextEditorWithMedia = {
+    /**
+     * Enables the Insert dropdown with Image and YouTube options. Requires `onImageUpload`.
+     */
+    allowMedia: true;
+    /**
+     * Called when the user selects, pastes, or drops image files into the editor.
+     * Receive the files and a callback — invoke it with the resulting URLs once upload is complete.
+     */
+    onImageUpload: (files: File[], onComplete: (srcs: string[]) => void) => void;
+    /**
+     * MIME types accepted by the file picker and paste/drop handler.
+     * e.g. `["image/jpeg", "image/png"]`. When omitted, defaults to common image types.
+     */
+    allowedMimeTypes?: `image/${string}`[];
+};
+type RichTextEditorWithoutMedia = {
+    allowMedia?: false;
+    onImageUpload?: never;
+    allowedMimeTypes?: never;
+};
+/**
+ * Props for the RichTextEditor component.
+ * @property {string} [id] - HTML id applied to the editor's contenteditable element.
+ * @property {string} [value] - Controlled HTML string value. When provided, the editor operates in controlled mode.
+ * @property {string} [defaultValue] - Default HTML string value for uncontrolled mode.
+ * @property {(html: string) => void} [onChange] - Callback fired with the HTML string on each content change.
+ * @property {(json: JSONContent) => void} [onJsonChange] - Callback fired with the TipTap JSON representation on each content change.
+ * @property {string} [placeholder] - Placeholder text shown when the editor is empty.
+ * @property {boolean} [disabled] - Disables the editor and toolbar when true.
+ * @property {boolean | string | string[]} [error] - Error state. Pass `true` for error styling only, or a string/string[] for error messages.
+ * @property {HelperProps["hint"]} [hint] - Hint text displayed below the editor.
+ * @property {HelperProps["description"]} [description] - Description text displayed below the editor.
+ * @property {FieldLabelProps["children"]} [label] - Label for the editor field.
+ * @property {FieldLabelProps} [labelProps] - Additional props passed to the label element.
+ * @property {boolean} [required] - Marks the field as required.
+ * @property {ReactNode} [moreInfo] - Additional info rendered alongside the label.
+ * @property {boolean} [allowTextFormat] - Enables text formatting toolbar section: text type dropdown, font size, bold, italic, underline, strikethrough. Default: true.
+ * @property {boolean} [allowTextAlignment] - Enables text alignment toolbar section: left, center, right, justify. Default: true.
+ * @property {boolean} [allowLists] - Enables list toolbar section: ordered list, unordered list, indent controls. Default: false.
+ * @property {boolean} [allowChecklist] - Enables checklist toolbar section. Default: false.
+ * @property {boolean} [allowCode] - Enables inline code toolbar button. Default: false.
+ * @property {boolean} [allowBlockquote] - Enables blockquote toolbar button. Default: false.
+ * @property {boolean} [allowLink] - Enables link insert/remove toolbar button. Default: false.
+ * @property {boolean} [allowMedia] - Enables the Insert dropdown (Image + YouTube). Requires `onImageUpload`. Default: false.
+ * @property {boolean} [allowMention] - Enables @mention toolbar button. Requires `mentionOptions`. Default: false.
+ * @property {boolean} [allowDragDrop] - Enables drag handle for reordering blocks. Default: false.
+ * @property {RichTextEditorMentionOption[]} [mentionOptions] - List of mention options to display in the dropdown.
+ * @property {(query: string) => void} [onMentionInputChange] - Fired when the user types after `@`. Use to filter or async-load `mentionOptions`.
+ * @property {(option: RichTextEditorMentionOption) => ReactNode} [renderMentionOption] - Custom render function for each option in the mention dropdown.
+ * @property {(option: RichTextEditorMentionOption) => ReactNode} [renderMentionHoverContent] - Render function for the hover card shown when hovering over an inserted mention.
+ * @property {(files: File[], onComplete: (srcs: string[]) => void) => void} [onImageUpload] - Required when `allowMedia` is true. Called when the user selects, pastes, or drops image files. Invoke the callback with the resulting URLs once upload is complete.
+ * @property {`image/${string}`[]} [allowedMimeTypes] - MIME types accepted by the file picker and paste/drop handler when `allowMedia` is true. Defaults to common image types when omitted.
+ * @extends Omit<ComponentPropsWithoutRef<"div">, "onChange">
+ * @extends LayoutUtilProps
+ * @extends DataTrackingId
+ */
+export type RichTextEditorProps = Omit<ComponentPropsWithoutRef<"div">, "onChange"> & RichTextEditorBaseProps & (RichTextEditorWithMedia | RichTextEditorWithoutMedia) & LayoutUtilProps & DataTrackingId;
+export {};

package/dist/beta/components/Table/DataTable/DataTable.d.ts

@@ -33,6 +33,10 @@ export type DataTableProps<T extends DataTableRowData> = LayoutUtilProps & Compo
      * @default false
      */
     disableExpandAll?: boolean;
+    /**
+     * The default active row ids.
+     */
+    defaultActiveRowIds?: TableRow<T>["id"][];
     /**
      * The default selected row ids.
      */
@@ -51,11 +55,23 @@ export type DataTableProps<T extends DataTableRowData> = LayoutUtilProps & Compo
      * @default false
      */
     disableSelectAll?: boolean;
+    /**
+     * Whether rows can be activated by clicking. When enabled, rows receive
+     * a pointer cursor and hover background, and clicking a row toggles it
+     * into the active set. Can be a boolean to apply to all rows, or a
+     * function to opt specific rows in.
+     * @default false
+     */
+    isActivatable?: boolean | ((row: T) => boolean);
     /**
      * Whether the table is selectable. Can be a boolean or a function to customize the selection logic.
      * @default false
      */
     isSelectable?: boolean | ((row: T) => boolean);
+    /**
+     * Called when the row activation state changes. Passes the active row ids.
+     */
+    onActivateRow?: (activeRowIds: TableRow<T>["id"][]) => void;
     /**
      * Called when the row expansion state changes. Passes the expanded row ids.
      */
@@ -74,6 +90,20 @@ export type DataTableProps<T extends DataTableRowData> = LayoutUtilProps & Compo
      * When `false` or `undefined`, no pagination is applied and all data is shown.
      */
     pagination?: boolean | DataTablePaginationConfig<T>;
+    /**
+     * The active row ids.
+     */
+    activeRowIds?: TableRow<T>["id"][];
+    /**
+     * Row ids that should render as read-only. Read-only rows gray their
+     * plain text content, show a `not-allowed` cursor when they would
+     * otherwise be activatable, and disable the selection checkbox.
+     * Links, chips, and custom cell content are unaffected.
+     *
+     * Pre-seeded `selectedRowIds` / `activeRowIds` are still accepted —
+     * read-only only gates user interaction, not the visual state.
+     */
+    readOnlyRowIds?: TableRow<T>["id"][];
     /**
      * The selected row ids.
      */
@@ -94,14 +124,23 @@ export type DataTableProps<T extends DataTableRowData> = LayoutUtilProps & Compo
      */
     emptyCellContent?: ReactNode;
     /**
-     * Disables row virtualization. By default, tables with 101 or more rows
+     * Disables row virtualization. By default, tables with 50 or more rows
      * virtualize their body to keep DOM size bounded; set this to `true` to
      * render every row in the DOM regardless of count. Intended as an escape
      * hatch for rollout safety and for flows that need every row mounted
      * (e.g., find-in-page, certain print or export paths).
+     *
+     * Takes precedence over `forceVirtualization`.
      * @default false
      */
     disableVirtualization?: boolean;
+    /**
+     * Forces row virtualization below the default row-count threshold.
+     *
+     * Ignored when `disableVirtualization` is `true`.
+     * @default false
+     */
+    forceVirtualization?: boolean;
     /**
      * Optional function that returns a value signaling whether a row has
      * changed since the last render. When supplied, each row is memoized:

package/dist/beta/components/Table/DataTable/internal/DataTableBody.d.ts

@@ -1,6 +1,7 @@
 import { ComponentPropsWithoutRef } from 'react';
 import { Table as TanstackTable } from '@tanstack/react-table';
 import { DataTableVirtualizer } from './useDataTableVirtualizer';
+import { TableRow } from '../../types';
 /**
  * Props for the DataTableBody component
  * @property {TanstackTable<T>} table - The table instance from @tanstack/react-table to render
@@ -32,5 +33,26 @@ export type DataTableBodyProps<T> = {
      * When omitted, every row re-renders whenever the parent re-renders.
      */
     getRowVersion?: (row: T) => unknown;
+    /**
+     * Whether rows can be activated. Mirrors the DataTable `isActivatable`
+     * prop — a boolean applies to every row, a function opts specific rows in.
+     */
+    isActivatable?: boolean | ((row: T) => boolean);
+    /**
+     * Map of currently active row ids keyed by id. An entry set to `true`
+     * marks the row as active.
+     */
+    activeRowMap: Record<string, boolean>;
+    /**
+     * Map of read-only row ids keyed by id. Read-only rows gray their text
+     * and ignore activation clicks; their selection checkbox is disabled.
+     */
+    readOnlyRowMap: Record<string, boolean>;
+    /**
+     * Called when an activatable row is clicked. Receives the row id and the
+     * ids of all descendant rows (flattened, any depth) so the parent's state
+     * can cascade to its sub-rows.
+     */
+    onToggleActive: (rowId: TableRow<T>["id"], descendantIds: TableRow<T>["id"][]) => void;
 } & ComponentPropsWithoutRef<"div">;
 export declare function DataTableBody<T>(props: DataTableBodyProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/beta/components/Table/DataTable/internal/DataTableBodyRow.d.ts

@@ -1,4 +1,5 @@
 import { Row } from '@tanstack/react-table';
+import { TableRow } from '../../types';
 import { useColumnOrder } from './useColumnOrder';
 export type DataTableBodyRowProps<T> = {
     columnOrder: ReturnType<typeof useColumnOrder>["columnOrder"];
@@ -11,6 +12,22 @@ export type DataTableBodyRowProps<T> = {
     parentRowCanExpand: boolean;
     isSelected: boolean;
     isSomeSelected: boolean;
+    isActivatable: boolean;
+    isActive: boolean;
+    /**
+     * True when the row is the topmost active ancestor in its active chain
+     * (itself active, has sub-rows, and no ancestor row is active). Drives
+     * the darker blue/100 background; non-topmost active rows use blue/50.
+     */
+    isTopMostActive: boolean;
+    /**
+     * True when the row is flagged read-only via `readOnlyRowIds`. Grays
+     * plain text, shows `not-allowed` cursor on activatable rows, and
+     * disables the activation click (checkbox disabling is gated at the
+     * DataTable level via `enableRowSelection`).
+     */
+    isReadOnly: boolean;
+    onToggleActive: (rowId: TableRow<T>["id"], descendantIds: TableRow<T>["id"][]) => void;
     /**
      * Optional consumer-provided function that returns a value expressing
      * "this row has changed." When supplied, the row is memoized: a row will
@@ -21,6 +38,6 @@ export type DataTableBodyRowProps<T> = {
      */
     getRowVersion?: (row: T) => unknown;
 };
-declare function DataTableBodyRowInner<T>({ columnOrder, row, rowIndex, tableHasSubRows, isExpanded, canExpand, depth, parentRowCanExpand, }: DataTableBodyRowProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function DataTableBodyRowInner<T>({ columnOrder, row, rowIndex, tableHasSubRows, isExpanded, canExpand, depth, parentRowCanExpand, isActivatable, isActive, isTopMostActive, isReadOnly, onToggleActive, }: DataTableBodyRowProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare const DataTableBodyRow: typeof DataTableBodyRowInner;
 export {};

package/dist/beta/components/Table/DataTable/internal/cells/CellFocusContext.d.ts

@@ -0,0 +1,16 @@
+export type CellFocusContextValue = {
+    /**
+     * Whether the cell currently has focus
+     */
+    isCellFocused: boolean;
+};
+/**
+ * Context for communicating cell focus state to child components.
+ * Used by CellStatus to show tooltips when the cell is focused via keyboard.
+ */
+export declare const CellFocusContext: import('react').Context<CellFocusContextValue | null>;
+/**
+ * Hook to consume the CellFocusContext.
+ * Returns null if used outside of a CellFocusContext.Provider.
+ */
+export declare function useCellFocusContext(): CellFocusContextValue | null;

package/dist/beta/components/Table/DataTable/internal/editable-cells/DataTableEditableCustomCell.d.ts

@@ -0,0 +1,8 @@
+import { BaseEditableCellProps, EditableCellImperativeHandle } from './types';
+type DataTableEditableCustomCellProps<T> = BaseEditableCellProps<T>;
+export declare const DataTableEditableCustomCell: (<T>(props: DataTableEditableCustomCellProps<T> & {
+    ref?: React.Ref<EditableCellImperativeHandle>;
+}) => React.ReactElement) & {
+    displayName: string;
+};
+export {};

package/dist/beta/components/Table/DataTable/internal/editable-cells/useCustomEditHelpers.d.ts

@@ -0,0 +1,49 @@
+import { CustomEditConfig, CustomEditController, CustomEditRenderContext, TableRow } from '../../../types';
+type CustomObjectValue = object;
+type CustomEditHelperValue<T, K extends keyof T> = CustomEditRenderContext<T, K>["controller"]["draftValue"];
+/**
+ * State returned by custom edit controller helpers.
+ * @property {CustomEditController<TValue>} controller - Controller object exposed to custom edit renderers.
+ * @property {() => void} runInitialFocus - Runs the initial focus callback registered by the custom editor.
+ */
+export type CustomEditControllerState<TValue extends CustomObjectValue> = {
+    controller: CustomEditController<TValue>;
+    runInitialFocus: () => void;
+};
+/**
+ * Options for creating custom edit controller state.
+ * @property {TableRow<T>} row - Row whose cell value is being edited.
+ * @property {K} columnId - Column id for the editable cell.
+ * @property {CustomEditConfig<T, K>} editConfig - Custom edit configuration for the column.
+ * @property {() => void} [onCloseEditor] - Called after the editor closes successfully.
+ */
+export type UseCustomEditControllerStateOptions<T, K extends keyof T> = {
+    row: TableRow<T>;
+    columnId: K;
+    editConfig: CustomEditConfig<T, K>;
+    onCloseEditor?: () => void;
+};
+export type UseCustomEditHelperStateOptions<T, K extends keyof T> = UseCustomEditControllerStateOptions<T, K>;
+/**
+ * Creates React stateful helpers for a custom editable DataTable cell.
+ *
+ * @param options Row, column, edit configuration, and close callback for the editable cell.
+ * @returns Controller state with draft value helpers and initial focus runner.
+ */
+export declare function useCustomEditControllerState<T, K extends keyof T>({ row, columnId, editConfig, onCloseEditor, }: UseCustomEditControllerStateOptions<T, K>): CustomEditControllerState<CustomEditHelperValue<T, K>>;
+/**
+ * Backward-compatible alias for the custom edit controller hook.
+ */
+export declare const useCustomEditHelperState: typeof useCustomEditControllerState;
+/**
+ * Creates imperative custom edit helpers for non-React consumers and tests.
+ *
+ * @param options Row, column, edit configuration, and close callback for the editable cell.
+ * @returns Controller state with mutable draft value helpers and initial focus runner.
+ */
+export declare function createCustomEditControllerState<T, K extends keyof T>({ row, columnId, editConfig, onCloseEditor, }: UseCustomEditControllerStateOptions<T, K>): CustomEditControllerState<CustomEditHelperValue<T, K>>;
+/**
+ * Backward-compatible alias for the imperative custom edit controller factory.
+ */
+export declare const createCustomEditHelperState: typeof createCustomEditControllerState;
+export {};