@servicetitan/anvil2 3.0.0 → 3.0.2

package/dist/assets/icons/st/unsorted.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path transform="scale(1.5)" d="M11.363 8.722V4.275l1.772 1.665a.672.672 0 0 0 1.09-.216.66.66 0 0 0-.144-.724L11.17 2.195a.663.663 0 0 0-.94 0L7.195 5a.665.665 0 1 0 .94.94l1.894-1.665v4.447c0 .366.3.666.667.666s.667-.3.667-.666M4.914 7.667v4.446l-1.772-1.665a.672.672 0 0 0-1.091.216.66.66 0 0 0 .144.724l2.912 2.805a.663.663 0 0 0 .94 0l3.035-2.805a.665.665 0 1 0-.94-.94l-1.895 1.665V7.667c0-.367-.3-.667-.667-.667-.366 0-.666.3-.666.667"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17.045 13.083v-6.67l2.657 2.497a1.008 1.008 0 0 0 1.635-.324.99.99 0 0 0-.215-1.086l-4.367-4.208a.995.995 0 0 0-1.41 0L10.793 7.5a.998.998 0 1 0 1.41 1.41l2.84-2.497v6.67c0 .549.45.999 1.001.999s1-.45 1-.999M7.371 11.5v6.67l-2.658-2.498a1.008 1.008 0 0 0-1.637.324.99.99 0 0 0 .216 1.086l4.369 4.207a.995.995 0 0 0 1.41 0l4.552-4.207a.998.998 0 1 0-1.41-1.41L9.37 18.169V11.5c0-.55-.45-1-1-1-.549 0-.999.45-.999 1"/></svg>

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

@@ -0,0 +1,87 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { Filter } from './internal/types';
+import { LayoutUtilProps } from '../../../types';
+import { ToolbarOverflowTypes, ToolbarSize } from '../Toolbar/types';
+/**
+ * Props for the FilterBar component
+ *
+ * @extends ComponentPropsWithoutRef<"div">
+ * @extends LayoutUtilProps
+ */
+export type FilterBarProps = ComponentPropsWithoutRef<"div"> & LayoutUtilProps & {
+    /** Array of filter objects */
+    filters: Filter[];
+    /** Description of the content this filter bar is associated with, used for accessibility */
+    associatedContent: string;
+    /** Callback function when filters change */
+    onFilterChange: (filters: Filter[]) => void;
+    /** Whether the filters submission is controlled via an apply button */
+    controlledFiltering?: boolean;
+    /**
+     * Size of filter controls
+     * @default xsmall
+     */
+    size?: ToolbarSize;
+    /**
+     * How to handle overflow when items don't fit
+     * @default wrap
+     */
+    overflow?: ToolbarOverflowTypes;
+};
+/**
+ * FilterBar component for displaying a standalone group of filters with toggles and a clear button.
+ *
+ * Features:
+ * - Standalone component with `role="toolbar"` and keyboard navigation
+ * - Renders filter toggles and popovers for all filter types
+ * - Supports controlled and uncontrolled filtering
+ * - Integrates with FilterDrawer for batch filter editing
+ * - Provides a clear all filters button
+ * - Handles overflow and hidden filters
+ * - Shares filter state via context for child components
+ * - Supports boolean, custom, single-select, multi-select, date, and date range filter types
+ * - Preserves filter state when filter configuration changes
+ * - Responsive: condenses to drawer-only at small container sizes
+ * - Can be composed alongside Toolbar as a sibling using Flex layout
+ *
+ * @example
+ * <FilterBar
+ *   associatedContent="invoices"
+ *   filters={filters}
+ *   onFilterChange={handleFilter}
+ *   controlledFiltering={true}
+ * />
+ *
+ * @example
+ * // With Toolbar as sibling
+ * <Flex alignItems="center" justifyContent="space-between">
+ *   <Toolbar associatedContent="invoice actions">
+ *     <Toolbar.Button icon={SaveIcon} aria-label="Save" />
+ *   </Toolbar>
+ *   <FilterBar
+ *     associatedContent="invoices"
+ *     filters={filters}
+ *     onFilterChange={handleFilter}
+ *   />
+ * </Flex>
+ */
+export declare const FilterBar: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & LayoutUtilProps & {
+    /** Array of filter objects */
+    filters: Filter[];
+    /** Description of the content this filter bar is associated with, used for accessibility */
+    associatedContent: string;
+    /** Callback function when filters change */
+    onFilterChange: (filters: Filter[]) => void;
+    /** Whether the filters submission is controlled via an apply button */
+    controlledFiltering?: boolean;
+    /**
+     * Size of filter controls
+     * @default xsmall
+     */
+    size?: ToolbarSize;
+    /**
+     * How to handle overflow when items don't fit
+     * @default wrap
+     */
+    overflow?: ToolbarOverflowTypes;
+} & import('react').RefAttributes<HTMLDivElement>>;

package/dist/beta/components/{Toolbar/Filters → FilterBar}/FilterToggleButton.d.ts

@@ -1,4 +1,4 @@
-import { ToolbarButtonToggleProps } from '../ToolbarButtonToggle';
+import { ToolbarButtonToggleProps } from '../Toolbar/ToolbarButtonToggle';
 /**
  * Props for the FilterToggleButton component
  *

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

@@ -0,0 +1,3 @@
+export * from './FilterBar';
+export { FilterBar as default, type FilterBarProps } from './FilterBar';
+export { type Filter, type BooleanFilter, type CustomFilter, type SingleSelectFilter, type MultiSelectFilter, type DateFilter, type DateRangeFilter, type FilterValue, type FilterRenderProps, type BaseFilter, } from './internal/types';

package/dist/beta/components/{Toolbar/Filters → FilterBar}/internal/FilterGroupContext.d.ts

@@ -1,12 +1,12 @@
 import { RefObject } from 'react';
-import { FilterGroupProps } from '../FilterGroup';
+import { FilterBarProps } from '../FilterBar';
 import { Filter, FilterValue } from './types';
 /**
- * Context for sharing filter state and operations between FilterGroup and its children
+ * Context for sharing filter state and operations between FilterBar and its children
  *
- * @extends FilterGroupProps
+ * @extends FilterBarProps
  */
-type FilterGroupContextProps = FilterGroupProps & {
+type FilterGroupContextProps = FilterBarProps & {
     /** Reference to the filter group DOM element
      *  @default { current: null }
      */
@@ -34,7 +34,7 @@ type FilterGroupContextProps = FilterGroupProps & {
 };
 /**
  * Context provider for filter-related operations
- * Used to share filter state between FilterGroup and FilterDrawer
+ * Used to share filter state between FilterBar and FilterDrawer
  */
 export declare const FilterGroupContext: import('react').Context<FilterGroupContextProps>;
 export {};

package/dist/beta/components/{Toolbar/Filters → FilterBar}/internal/types.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { DateFieldSingleProps } from '../../../../../components/DateFieldSingle';
-import { DateFieldRangeProps } from '../../../../../components/DateFieldRange';
+import { DateFieldSingleProps } from '../../../../components/DateFieldSingle';
+import { DateFieldRangeProps } from '../../../../components/DateFieldRange';
 /**
  * Base properties shared by all filter types
  */

package/dist/beta/components/{Toolbar/Filters → FilterBar}/internal/utils/test.d.ts

@@ -40,6 +40,7 @@ export declare function createMockFilterContext(filters?: Filter[], contextOverr
     addHiddenFilter: import('vitest').Mock<(...args: any[]) => any>;
     removeHiddenFilter: import('vitest').Mock<(...args: any[]) => any>;
     controlledFiltering: boolean;
+    associatedContent: string;
 };
 export declare function createMockBooleanFilter(overrides?: Partial<BooleanFilter>): BooleanFilter;
 export declare function createMockCustomFilter<T = unknown>(overrides?: Partial<CustomFilter<T>>): CustomFilter<T>;

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: