@servicetitan/anvil2 3.0.7 → 3.0.9

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

@@ -1,13 +1,15 @@
-import { CustomEditConfig, CustomEditController, CustomEditRenderContext, TableRow } from '../../../types';
+import { CustomEditConfig, CustomEditController, CustomEditDraftValue, CustomEditInitialValue, CustomEditPresentObjectValue, TableRow } from '../../../types';
 type CustomObjectValue = object;
-type CustomEditHelperValue<T, K extends keyof T> = CustomEditRenderContext<T, K>["controller"]["draftValue"];
+type CustomEditHelperValue<T, K extends keyof T> = CustomEditDraftValue<T, K>;
+type CustomEditHelperPresentValue<T, K extends keyof T> = CustomEditPresentObjectValue<T, K>;
+type CustomEditHelperInitialValue<T, K extends keyof T> = CustomEditInitialValue<T, K>;
 /**
  * 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>;
+export type CustomEditControllerState<TValue extends CustomObjectValue, TDraftValue = Partial<TValue>, TInitialValue = TValue> = {
+    controller: CustomEditController<TValue, TDraftValue, TInitialValue>;
     runInitialFocus: () => void;
 };
 /**
@@ -30,7 +32,7 @@ export type UseCustomEditHelperStateOptions<T, K extends keyof T> = UseCustomEdi
  * @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>>;
+export declare function useCustomEditControllerState<T, K extends keyof T>({ row, columnId, editConfig, onCloseEditor, }: UseCustomEditControllerStateOptions<T, K>): CustomEditControllerState<CustomEditHelperPresentValue<T, K>, CustomEditHelperValue<T, K>, CustomEditHelperInitialValue<T, K>>;
 /**
  * Backward-compatible alias for the custom edit controller hook.
  */
@@ -41,7 +43,7 @@ export declare const useCustomEditHelperState: typeof useCustomEditControllerSta
  * @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>>;
+export declare function createCustomEditControllerState<T, K extends keyof T>({ row, columnId, editConfig, onCloseEditor, }: UseCustomEditControllerStateOptions<T, K>): CustomEditControllerState<CustomEditHelperPresentValue<T, K>, CustomEditHelperValue<T, K>, CustomEditHelperInitialValue<T, K>>;
 /**
  * Backward-compatible alias for the imperative custom edit controller factory.
  */

package/dist/src/beta/components/Table/DataTable/internal/useColumnOrder.d.ts

@@ -7,4 +7,5 @@ export declare const useColumnOrder: <T>({ table }: {
     table: TanstackTable<T>;
 }) => {
     columnOrder: number[];
+    columnIndexMap: Map<number, number>;
 };

package/dist/src/beta/components/Table/createColumnHelper.d.ts

@@ -182,8 +182,10 @@ type ColumnConfig<T, K extends keyof T> = ReadOnlyColumnConfig<T, K> | TextEditC
  * - `editConfig.mode: "number"` can only be used with number columns
  * - `editConfig.mode: "multiselect"` can only be used with array columns
  * - `editConfig.mode: "select"` options values must match the column's value type
- * - `editConfig.mode: "custom"` preserves object-valued canonical state and typed draft helpers
- * - `editConfig.onChange` callback receives the correct value type for the column
+ * - `editConfig.mode: "custom"` can only be used with structured object columns;
+ *   drafts may be partial objects, plus null/undefined when declared by the row type
+ * - non-custom `editConfig.onChange` callbacks receive the correct value type;
+ *   custom mode uses `onCommit` and `onDraftUpdate`
  * - `getCellText` provides a simple sortable read string when `renderCell` returns rich content
  *
  * @template T - The type of the row data

package/dist/src/beta/components/Table/formatters/htmlFormatter.d.ts

@@ -3,8 +3,10 @@ import { ReactNode } from 'react';
  * Formats an HTML string value for DataTable cells by converting to markdown
  * and rendering through the markdown formatter.
  *
- * Supported HTML: strong, b, em, i, code, mark, ul, ol, li, br, p.
- * Unsupported tags and their content are dropped entirely.
+ * Supported HTML: strong, b, em, i, code, mark, s, strike, del, h1, h2, h3,
+ * ul, ol, li, br, p. The u and span tags, along with text-align styling on
+ * p/h1-h3, are rendered as plain text (styling ignored, content preserved).
+ * Other unsupported tags and their content are dropped entirely.
  * HTML entities are decoded to plain text.
  *
  * @param value - The HTML string to format

package/dist/src/beta/components/Table/formatters/htmlToMarkdown.d.ts

@@ -1,8 +1,11 @@
 /**
  * Converts an HTML string to the markdown subset supported by markdownFormatter.
  *
- * Supported tags: strong, b, em, i, code, mark, ul, ol, li, br, p.
- * Unsupported tags and their content are dropped entirely.
+ * Supported tags: strong, b, em, i, code, mark, s, strike, del, h1, h2, h3,
+ * ul, ol, li, br, p.
+ * The u and span tags, along with text-align styling on p/h1-h3, are rendered
+ * as plain text: their styling is ignored but their content is preserved.
+ * Other unsupported tags and their content are dropped entirely.
  * HTML entities are decoded to plain text.
  *
  * @param value - The HTML string to convert

package/dist/src/beta/components/Table/formatters/markdownFormatter.d.ts

@@ -2,8 +2,9 @@ import { ReactNode } from 'react';
 /**
  * Formats a string value as markdown content for DataTable cells.
  *
- * Supports inline constructs (bold, italic, bold+italic, inline code, highlight)
- * and block-level flat lists (unordered with `- `, ordered with `N. `).
+ * Supports inline constructs (bold, italic, bold+italic, strikethrough, inline
+ * code, highlight) and block-level constructs: headings (`# ` through `### `)
+ * and flat lists (unordered with `- `, ordered with `N. `).
  *
  * @param value - The markdown string to format
  * @returns Formatted React nodes, or null for empty/null/undefined values

package/dist/src/beta/components/Table/types.d.ts

@@ -61,9 +61,19 @@ type BaseEditConfig<T, K extends keyof T> = {
      */
     onChange: (value: T[K], rowId: string) => void;
 };
-type CustomEditCanonicalValueForValue<TValue> = TValue extends readonly (infer _Element)[] ? never : TValue extends object ? NonNullable<TValue> : never;
-type CustomEditCanonicalValue<T, K extends keyof T> = CustomEditCanonicalValueForValue<NonNullable<T[K]>>;
-export type CustomEditFieldValueUpdater<TValue extends object, TField extends keyof TValue> = TValue[TField] | ((previousValue: TValue[TField], draftValue: TValue) => TValue[TField]);
+type CustomEditInvalidPresentValue<TValue> = Extract<NonNullable<TValue>, readonly unknown[]> | Extract<NonNullable<TValue>, (...args: never[]) => unknown> | Exclude<NonNullable<TValue>, object>;
+type CustomEditPresentObjectValueForValue<TValue> = [
+    CustomEditInvalidPresentValue<TValue>
+] extends [never] ? NonNullable<TValue> extends object ? NonNullable<TValue> : never : never;
+type CustomEditPartialPresentValue<TValue extends object> = TValue extends object ? Partial<TValue> : never;
+export type CustomEditAllowedNullishValue<TValue> = Extract<TValue, null | undefined>;
+export type CustomEditPresentObjectValue<T, K extends keyof T> = CustomEditPresentObjectValueForValue<T[K]>;
+export type CustomEditDraftValueForValue<TValue> = [
+    CustomEditPresentObjectValueForValue<TValue>
+] extends [never] ? never : CustomEditPartialPresentValue<CustomEditPresentObjectValueForValue<TValue>> | CustomEditAllowedNullishValue<TValue>;
+export type CustomEditDraftValue<T, K extends keyof T> = CustomEditDraftValueForValue<T[K]>;
+export type CustomEditInitialValue<T, K extends keyof T> = T[K];
+export type CustomEditFieldValueUpdater<TValue extends object, TField extends keyof TValue> = TValue[TField] | ((previousValue: TValue[TField] | undefined, draftValue: Partial<TValue>) => TValue[TField]);
 export type CustomEditCloseReason = "submit" | "escape" | "outside-click" | "close-button" | "programmatic";
 export type CustomEditValidation<TValue extends object> = {
     /**
@@ -97,7 +107,7 @@ export type CustomEditSurfaceConfig = {
      */
     onKeyDown?: (event: ReactKeyboardEvent<HTMLDivElement>) => void;
 };
-export type CustomEditCloseRequest<TValue extends object> = {
+export type CustomEditCloseRequest<TValue extends object, TDraftValue = Partial<TValue>, TInitialValue = TValue> = {
     /**
      * Why the close was requested.
      */
@@ -105,11 +115,11 @@ export type CustomEditCloseRequest<TValue extends object> = {
     /**
      * Draft value at the time the request is evaluated.
      */
-    draftValue: TValue;
+    draftValue: TDraftValue;
     /**
      * Original committed value when editing began.
      */
-    initialValue: TValue;
+    initialValue: TInitialValue;
     /**
      * Whether the draft differs from the initial value.
      */
@@ -119,21 +129,23 @@ export type CustomEditCloseRequest<TValue extends object> = {
      */
     validation: CustomEditValidation<TValue>;
 };
-export type CustomEditController<TValue extends object> = {
+export type CustomEditController<TValue extends object, TDraftValue = Partial<TValue>, TInitialValue = TValue> = {
     /**
-     * Current local draft value owned by the custom editor.
+     * Current local draft. Custom editors may hold a partial object, or a
+     * row-type-supported nullish value.
      */
-    draftValue: TValue;
+    draftValue: TDraftValue;
     /**
      * Original value before editing began.
      */
-    initialValue: TValue;
+    initialValue: TInitialValue;
     /**
      * Whether the draft differs from the initial value.
      */
     isDirty: boolean;
     /**
-     * Ordered list of changed fields.
+     * Ordered list of changed object fields. Whole-value nullish changes are
+     * represented by `isDirty`, not by synthetic field names.
      */
     changedFields: ReadonlyArray<keyof TValue>;
     /**
@@ -141,13 +153,15 @@ export type CustomEditController<TValue extends object> = {
      */
     validation: CustomEditValidation<TValue>;
     /**
-     * Replace the entire draft value.
+     * Replace the entire draft value. Null and undefined are accepted only when
+     * the column's row value type includes that nullish value.
      */
-    setDraftValue: (nextValue: SetStateAction<TValue>) => TValue;
+    setDraftValue: (nextValue: SetStateAction<TDraftValue>) => TDraftValue;
     /**
-     * Update a single field in the current draft value.
+     * Update a single field in the current draft value. If the current draft is
+     * nullish, a partial object containing this field is synthesized.
      */
-    setDraftField: <TField extends keyof TValue>(field: TField, nextValue: CustomEditFieldValueUpdater<TValue, TField>) => TValue;
+    setDraftField: <TField extends keyof TValue>(field: TField, nextValue: CustomEditFieldValueUpdater<TValue, TField>) => TDraftValue;
     /**
      * Submit the current draft and close the editor.
      */
@@ -197,41 +211,43 @@ export type CustomEditRenderContext<T, K extends keyof T> = {
      */
     rowId: string;
     /**
-     * Canonical committed value for the cell.
+     * Committed value for the cell, exactly as declared by the row type.
      */
     value: T[K];
     /**
      * Typed controller for draft mutation, validation, focus, and lifecycle control.
      */
-    controller: CustomEditController<CustomEditCanonicalValue<T, K>>;
+    controller: CustomEditController<CustomEditPresentObjectValue<T, K>, CustomEditDraftValue<T, K>, CustomEditInitialValue<T, K>>;
 };
 /**
  * Edit configuration for custom mode cells.
- * Preserves canonical object values while continuing to use `renderCell`
- * for the read path.
+ * Custom mode is for structured object-valued columns. The committed read
+ * value remains `T[K]`; editable drafts may be partial objects, plus `null`
+ * or `undefined` when those values are part of `T[K]`.
  *
  * @template T - The row data type
  * @template K - The column key
  */
 export type CustomEditConfig<T, K extends keyof T> = [
-    CustomEditCanonicalValue<T, K>
+    CustomEditPresentObjectValue<T, K>
 ] extends [never] ? never : Omit<BaseEditConfig<T, K>, "onChange"> & {
     /**
      * Custom edit mode - renders a multi-field editor surface.
      */
     mode: "custom";
     /**
-     * Callback fired when the draft is committed.
+     * Callback fired when the current draft is committed. The value is the
+     * exact draft state: partial object, full object, or allowed nullish value.
      */
-    onCommit: (value: T[K], rowId: string) => void;
+    onCommit: (value: CustomEditDraftValue<T, K>, rowId: string) => void;
     /**
-     * Callback fired on every local draft mutation.
+     * Callback fired on every local draft mutation with the exact draft state.
      */
-    onDraftUpdate?: (value: T[K], rowId: string) => void;
+    onDraftUpdate?: (value: CustomEditDraftValue<T, K>, rowId: string) => void;
     /**
      * Optional validation metadata derived from the current draft.
      */
-    validateDraft?: (draftValue: CustomEditCanonicalValue<T, K>, rowId: string) => CustomEditValidation<CustomEditCanonicalValue<T, K>> | undefined;
+    validateDraft?: (draftValue: CustomEditDraftValue<T, K>, rowId: string) => CustomEditValidation<CustomEditPresentObjectValue<T, K>> | undefined;
     /**
      * When true, submit-style close requests are blocked while validation contains
      * a form error or any field error. Defaults to `false`.
@@ -241,13 +257,14 @@ export type CustomEditConfig<T, K extends keyof T> = [
      * Optional close interception hook.
      * Return `false` to keep the editor open.
      */
-    onRequestClose?: (request: CustomEditCloseRequest<CustomEditCanonicalValue<T, K>>) => boolean | void;
+    onRequestClose?: (request: CustomEditCloseRequest<CustomEditPresentObjectValue<T, K>, CustomEditDraftValue<T, K>, CustomEditInitialValue<T, K>>) => boolean | void;
     /**
      * Optional surface presentation overrides.
      */
     surface?: CustomEditSurfaceConfig;
     /**
-     * Consumer-owned renderer for the custom editor contents.
+     * Consumer-owned renderer for the custom editor contents. Editors should
+     * handle partial and row-type-supported nullish draft values defensively.
      */
     renderEditor: (context: CustomEditRenderContext<T, K>) => ReactNode;
 };
@@ -601,9 +618,9 @@ export type BooleanEditConfig<T, K extends keyof T> = BaseEditConfig<T, K> & {
  * // Custom editing keeps renderCell as the read path
  * editConfig: {
  *   mode: "custom",
- *   onChange: (value, rowId) => save(value, rowId),
- *   onDraftChange: (value, rowId) => saveDraft(value, rowId),
- *   renderEditor: ({ helpers }) => renderAddressEditor(helpers)
+ *   onCommit: (draft, rowId) => saveDraft(draft, rowId),
+ *   onDraftUpdate: (draft, rowId) => previewDraft(draft, rowId),
+ *   renderEditor: ({ controller }) => renderAddressEditor(controller)
  * }
  * ```
  */

package/dist/src/beta/components/TreeSelectField/TreeSelectField.d.ts

@@ -0,0 +1,68 @@
+import { TreeSelectFieldHandle, TreeSelectFieldNode } from './types';
+/**
+ * TreeSelectField component for selecting one or more nodes from a hierarchical tree structure.
+ *
+ * Features:
+ * - Async tree data loading via loadOptions callback with optional LRU caching
+ * - Single-select and multi-select modes
+ * - Multi-select chips display with optional singleRow and maxChips limits
+ * - Search filtering that preserves tree structure
+ * - Cascading parent/child selection (linked mode) or independent node selection
+ * - Lazy branch expansion with on-demand children loading
+ * - Virtualized rendering for large trees via the virtualize prop
+ * - Full keyboard navigation (ArrowDown/Up, ArrowRight/Left, Enter, Home/End, Escape, Backspace)
+ * - Imperative handle for clearCache, invalidate, expandAll, collapseAll
+ * - Accessible label, error, hint, description, and warning helper text
+ * - Prefix and suffix slot support
+ * - Supports layout utilities for positioning and spacing
+ *
+ * @example
+ * <TreeSelectField
+ *   label="Select Categories"
+ *   value={selected}
+ *   onSelectedOptionsChange={setSelected}
+ *   loadOptions={async (search) => fetchCategories(search)}
+ * />
+ */
+export declare const TreeSelectField: import('react').ForwardRefExoticComponent<{
+    id?: string;
+    label: string;
+    labelNode?: import('react').ReactNode;
+    hideLabel?: boolean;
+    placeholder?: string;
+    size?: Extract<import('../../..').Size, "small" | "medium" | "large">;
+    displayMenuAs?: "auto" | "popover" | "dialog";
+    error?: boolean | string | string[] | import('react').ReactElement;
+    hint?: import('react').ReactElement | string;
+    moreInfo?: import('react').ReactNode;
+    labelAiMark?: import('../../..').AiMarkWithTooltipOrPopoverProps["aiMark"];
+    description?: import('react').ReactElement | string;
+    warning?: string | string[];
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    prefix?: string | import('react').ReactElement;
+    suffix?: string | import('react').ReactElement;
+    className?: string;
+    style?: import('react').CSSProperties;
+    disableSearch?: boolean;
+    debounceMs?: number;
+    searchValue?: string;
+    onSearchChange?: (v: string) => void;
+    singleRow?: boolean;
+    maxChips?: number;
+    virtualize?: boolean;
+    value: import('./types').TreeSelectFieldValue[];
+    onSelectedOptionsChange: (nodes: import('./types').TreeSelectFieldValue[]) => void;
+    selectionMode?: "single" | "independent" | "linked";
+    valueConsistsOf?: import('./types').TreeSelectFieldValueConsistsOf;
+    defaultExpandLevel?: number;
+    expandedIds?: Set<string | number>;
+    onExpandedIdsChange?: (ids: Set<string | number>) => void;
+    loadOptions: (searchValue: string, parentNode?: TreeSelectFieldNode) => TreeSelectFieldNode[] | Promise<TreeSelectFieldNode[]>;
+    cache?: {
+        enabled?: boolean;
+        maxSize?: number;
+    };
+    initialLoad?: "auto" | "immediate" | "open";
+} & import('../../..').LayoutUtilProps & import('react').RefAttributes<TreeSelectFieldHandle>>;

package/dist/src/beta/components/TreeSelectField/TreeSelectFieldSync.d.ts

@@ -0,0 +1,64 @@
+import { MatchSorterOptions } from 'match-sorter';
+import { TreeSelectFieldNode, TreeSelectFieldProps } from './types';
+import { TreeSyncFilterFn } from './internal/treeSync';
+export type { TreeSyncFilterFn };
+/**
+ * Props for the TreeSelectFieldSync component.
+ * @property options - The static tree options to display.
+ * @property filter - Custom filter function or MatchSorterOptions to control how nodes are filtered during search.
+ *   By default, filters by label and searchText using match-sorter, preserving parent nodes of any match.
+ * @extends TreeSelectFieldProps
+ */
+export type TreeSelectFieldSyncProps = Omit<TreeSelectFieldProps, "loadOptions" | "debounceMs" | "cache" | "initialLoad"> & {
+    /**
+     * The static tree options to display in the field.
+     */
+    options: TreeSelectFieldNode[];
+    /**
+     * Controls how options are filtered when the user types a search value.
+     * Can be a function that returns nodes in the desired display order,
+     * or a MatchSorterOptions object to customize the default match-sorter behavior.
+     *
+     * By default, nodes are filtered by `label` and `searchText` using match-sorter,
+     * and parents of matching nodes are preserved in the tree structure.
+     *
+     * @example
+     * <TreeSelectFieldSync
+     *   options={options}
+     *   filter={(nodes, searchValue) => {
+     *     return nodes.filter((node) =>
+     *       node.label.toLowerCase().includes(searchValue.toLowerCase())
+     *     );
+     *   }}
+     * />
+     *
+     * @example
+     * <TreeSelectFieldSync
+     *   options={options}
+     *   filter={{ keys: ["label"] }}
+     * />
+     */
+    filter?: TreeSyncFilterFn | MatchSorterOptions<TreeSelectFieldNode>;
+};
+/**
+ * TreeSelectFieldSync is a simplified wrapper around TreeSelectField for static (non-async) tree data.
+ *
+ * Features:
+ * - Accepts static `options` instead of `loadOptions`.
+ * - Performs client-side filtering with tree-structure awareness (parents of matches are preserved).
+ * - Accepts a custom filter function or MatchSorterOptions to customize filtering behavior.
+ * - Invalidates the field when the options reference changes.
+ * - Supports all other props of TreeSelectField.
+ *
+ * @example
+ * <TreeSelectFieldSync
+ *   label="Select location"
+ *   options={locationTree}
+ *   value={selected}
+ *   onSelectedOptionsChange={setSelected}
+ * />
+ */
+export declare const TreeSelectFieldSync: {
+    (props: TreeSelectFieldSyncProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/src/beta/components/TreeSelectField/index.d.ts

@@ -0,0 +1,3 @@
+export { TreeSelectField } from './TreeSelectField';
+export { TreeSelectFieldSync } from './TreeSelectFieldSync';
+export * from './types';

package/dist/src/beta/components/TreeSelectField/internal/TreeContent.d.ts

@@ -0,0 +1,31 @@
+import { TreePanelProps } from './TreePanel';
+/**
+ * Props for the TreeContent component.
+ *
+ * @property loading - Whether the tree is currently loading data; renders a spinner while true.
+ * @property hasNoVisibleNodes - True when there are no nodes to render (e.g. a search returned no matches); renders an empty-state message.
+ * @property virtualize - When true, renders the virtualized panel; otherwise renders the standard panel.
+ * @property panelProps - Props forwarded to the underlying TreePanel or VirtualizedTreePanel.
+ */
+export type TreeContentProps = {
+    loading: boolean;
+    hasNoVisibleNodes: boolean;
+    virtualize?: boolean;
+    panelProps: TreePanelProps;
+};
+/**
+ * Renders the body of a tree select popover or dialog: a centered spinner
+ * while loading, a "No match found" message when there are no visible
+ * nodes, or the (optionally virtualized) tree panel.
+ *
+ * Used by both TreeSelectField and TreeSelectMenu to keep the three
+ * states consistent across the field's dialog and popover branches and
+ * the menu's render path.
+ *
+ * Features:
+ * - Centered medium Spinner while loading
+ * - "No match found" empty state (small, subdued text)
+ * - Switches between TreePanel and VirtualizedTreePanel via the `virtualize` flag
+ * - Forwards a ref to the underlying tree panel for focus management
+ */
+export declare const TreeContent: import('react').ForwardRefExoticComponent<TreeContentProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/src/beta/components/TreeSelectField/internal/TreePanel.d.ts

@@ -0,0 +1,56 @@
+import { TreeSelectFieldNode } from '../types';
+import { VisibleNode } from './types';
+/**
+ * Props for the TreePanel component.
+ * @property {VisibleNode[]} visibleNodes - Flat list of nodes currently visible in the tree.
+ * @property {(id: string | number) => "checked" | "unchecked" | "indeterminate" | "loading"} getCheckState - Returns the check state for a given node id.
+ * @property {(id: string | number) => void} toggleNode - Toggles the selection state of a node.
+ * @property {(id: string | number) => void} toggleExpand - Toggles the expanded state of a branch node.
+ * @property {(id: string | number) => Record<string, unknown>} getTreeItemProps - Returns ARIA/accessibility props for a tree item.
+ * @property {Record<string, unknown>} treeProps - Props to spread onto the tree container element.
+ * @property {string | undefined} activeDescendantId - The id of the currently active/focused tree item.
+ * @property {boolean} [branchesSelectable] - When true, branch nodes can be selected.
+ * @property {boolean} [leavesSelectable] - When true, leaf nodes can be selected.
+ * @property {boolean} [emptyBranchesSelectable] - When true, empty branches can be selected.
+ * @property {(node: TreeSelectFieldNode) => void} [onLoadChildren] - Callback to trigger lazy loading of children.
+ */
+export type TreePanelProps = {
+    visibleNodes: VisibleNode[];
+    getCheckState: (id: string | number) => "checked" | "unchecked" | "indeterminate" | "loading";
+    toggleNode: (id: string | number) => void;
+    toggleExpand: (id: string | number) => void;
+    getTreeItemProps: (id: string | number) => Record<string, unknown>;
+    treeProps: Record<string, unknown>;
+    activeDescendantId: string | undefined;
+    branchesSelectable?: boolean;
+    leavesSelectable?: boolean;
+    emptyBranchesSelectable?: boolean;
+    readOnly?: boolean;
+    onHover?: (id: string | number) => void;
+    onLoadChildren?: (node: TreeSelectFieldNode) => void;
+};
+/**
+ * TreePanel component that renders the tree dropdown content.
+ *
+ * Features:
+ * - Renders a flat list of visible nodes with depth-based indentation
+ * - Supports expand/collapse controls for branch nodes
+ * - Shows loading indicator for lazily-loaded branches
+ * - Checkboxes for multi-select mode (hidden in single-select mode)
+ * - Optional breadcrumb display for flattened search results
+ * - Optional child count display for branch nodes
+ * - Full accessibility support with ARIA tree/treeitem roles
+ * - Focusable container via forwardRef
+ *
+ * @example
+ * <TreePanel
+ *   visibleNodes={visibleNodes}
+ *   getCheckState={getCheckState}
+ *   toggleNode={toggleNode}
+ *   toggleExpand={toggleExpand}
+ *   getTreeItemProps={getTreeItemProps}
+ *   treeProps={treeProps}
+ *   activeDescendantId={activeDescendantId}
+ * />
+ */
+export declare const TreePanel: import('react').ForwardRefExoticComponent<TreePanelProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/src/beta/components/TreeSelectField/internal/TreeRow.d.ts

@@ -0,0 +1,56 @@
+import { TreeSelectFieldNode } from '../types';
+import { VisibleNode } from './types';
+/**
+ * Props for the TreeRow component.
+ * @property {VisibleNode} visible - The visible node data including depth, expand state, and branch info.
+ * @property {"checked" | "unchecked" | "indeterminate"} checkState - The checkbox state for this row.
+ * @property {Record<string, unknown>} itemProps - ARIA/accessibility props from getTreeItemProps.
+ * @property {boolean} [branchesSelectable] - When true, branch nodes can be selected. Defaults to true.
+ * @property {boolean} [leavesSelectable] - When true, leaf nodes can be selected. Defaults to true.
+ * @property {boolean} [emptyBranchesSelectable] - When true, empty branches (children: []) can be selected. Defaults to true.
+ * @property {boolean} [isActive] - When true, applies a highlight background for keyboard focus.
+ * @property {(id: string | number) => void} onToggleNode - Callback to toggle selection of the node.
+ * @property {(id: string | number) => void} onToggleExpand - Callback to toggle expansion of a branch node.
+ * @property {(node: TreeSelectFieldNode) => void} [onLoadChildren] - Callback to trigger lazy loading of children.
+ * @property {number} depth - Depth of the node in the tree, used to calculate indentation.
+ */
+export type TreeRowProps = {
+    visible: VisibleNode;
+    checkState: "checked" | "unchecked" | "indeterminate" | "loading";
+    itemProps: Record<string, unknown>;
+    branchesSelectable?: boolean;
+    leavesSelectable?: boolean;
+    emptyBranchesSelectable?: boolean;
+    readOnly?: boolean;
+    isActive?: boolean;
+    onToggleNode: (id: string | number) => void;
+    onToggleExpand: (id: string | number) => void;
+    onHover?: (id: string | number) => void;
+    onLoadChildren?: (node: TreeSelectFieldNode) => void;
+    depth: number;
+};
+/**
+ * TreeRow renders a single row in the tree dropdown.
+ *
+ * Features:
+ * - Depth-based indentation via inline paddingInlineStart
+ * - Expand/collapse icon using Icon component with keyboard_arrow_right/down icons
+ * - Spinning icon animation for lazy-loading branch nodes
+ * - Checkbox in multi-select mode, hidden in single-select mode
+ * - Rich content support via node.content (title, description, chips, avatar, icon)
+ * - Label text with overflow ellipsis
+ * - Disabled state with reduced opacity and default cursor
+ * - Active (keyboard focus) state with highlight background
+ * - Full ARIA semantics via spread itemProps
+ *
+ * @example
+ * <TreeRow
+ *   visible={visibleNode}
+ *   checkState={getCheckState(visibleNode.node.id)}
+ *   itemProps={getTreeItemProps(visibleNode.node.id)}
+ *   onToggleNode={toggleNode}
+ *   onToggleExpand={toggleExpand}
+ *   depth={visibleNode.depth}
+ * />
+ */
+export declare function TreeRow({ visible, checkState, itemProps, branchesSelectable, leavesSelectable, emptyBranchesSelectable, readOnly, isActive, onToggleNode, onToggleExpand, onHover, onLoadChildren, depth, }: TreeRowProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/beta/components/TreeSelectField/internal/TreeSelectFieldInput.d.ts

@@ -0,0 +1,82 @@
+import { ReactElement, RefObject } from 'react';
+import { TreeSelectFieldValue } from '../types';
+/**
+ * Props for the TreeSelectFieldInput component.
+ * @property {string} [id] - HTML id attribute for the input element
+ * @property {string} [placeholder] - Placeholder text displayed when no options are selected
+ * @property {"small" | "medium" | "large"} [size] - Size variant of the input
+ * @property {boolean} [disabled] - Disables the input entirely
+ * @property {boolean} [readOnly] - Cannot be modified but remains interactive
+ * @property {boolean} [error] - Shows error styling on the input when true
+ * @property {boolean} [single] - When true, renders single-select text display instead of chips
+ * @property {boolean} [singleRow] - When true, restricts chip display to a single row
+ * @property {number} [maxChips] - Maximum number of chips to display before showing +N indicator
+ * @property {string | ReactElement} [prefix] - Content to display before the input area
+ * @property {string | ReactElement} [suffix] - Content to display after the input area
+ * @property {TreeSelectFieldValue[]} selectedOptions - Array of currently selected options
+ * @property {(option: TreeSelectFieldValue) => void} onRemoveOption - Callback fired when a chip is removed
+ * @property {RefObject<HTMLInputElement>} [inputRef] - Ref for the input element
+ * @property {RefObject<HTMLDivElement>} [inputWrapperRef] - Ref for the input wrapper div element
+ * @property {string} [searchValue] - Current search input value
+ * @property {(e: React.ChangeEvent<HTMLInputElement>) => void} [onSearchChange] - Callback fired when search input changes
+ * @property {(e: React.KeyboardEvent) => void} [onInputKeyDown] - Callback fired on key down in the search input
+ * @property {() => void} [onWrapperClick] - Callback fired when the input wrapper is clicked
+ * @property {boolean} [isOpen] - Whether the dropdown is currently open
+ * @property {boolean} [disableSearch] - When true, hides the search input
+ * @property {Record<string, unknown>} [comboboxProps] - Additional ARIA props for the combobox input role
+ */
+export type TreeSelectFieldInputProps = {
+    id?: string;
+    placeholder?: string;
+    size?: "small" | "medium" | "large";
+    disabled?: boolean;
+    readOnly?: boolean;
+    error?: boolean;
+    single?: boolean;
+    singleRow?: boolean;
+    maxChips?: number;
+    prefix?: string | ReactElement;
+    suffix?: string | ReactElement;
+    selectedOptions: TreeSelectFieldValue[];
+    onRemoveOption: (option: TreeSelectFieldValue) => void;
+    inputRef?: RefObject<HTMLInputElement>;
+    inputWrapperRef?: RefObject<HTMLDivElement>;
+    searchValue?: string;
+    onSearchChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onInputKeyDown?: (e: React.KeyboardEvent) => void;
+    onWrapperClick?: () => void;
+    isOpen?: boolean;
+    ariaControls?: string;
+    disableSearch?: boolean;
+    comboboxProps?: Record<string, unknown>;
+};
+/**
+ * Internal input component for the TreeSelectField that renders the trigger area
+ * with chips, search input, single-select text, and the toggle button.
+ *
+ * Features:
+ * - Chip display for selected options in multi-select mode with remove functionality
+ * - Single-row chip overflow detection with +N hidden chip indicator
+ * - Text input for filtering tree options when search is enabled
+ * - Plain text display for single-select mode
+ * - Chevron toggle button to open/close the dropdown
+ * - Optional prefix and suffix content slots
+ * - Supports small, medium, and large size variants
+ * - Error state styling
+ * - Disabled and read-only state styling
+ * - Accessible combobox role with aria-expanded and aria-haspopup
+ *
+ * @example
+ * <TreeSelectFieldInput
+ *   placeholder="Select categories..."
+ *   size="medium"
+ *   selectedOptions={[{ id: 1, label: "Category A" }]}
+ *   onRemoveOption={(option) => handleRemove(option)}
+ *   isOpen={isOpen}
+ *   onWrapperClick={() => setIsOpen(true)}
+ * />
+ */
+export declare const TreeSelectFieldInput: {
+    ({ id, placeholder, size, disabled, readOnly, error, single, singleRow, maxChips, prefix, suffix, selectedOptions, onRemoveOption, inputRef, inputWrapperRef, searchValue, onSearchChange, onInputKeyDown, onWrapperClick, isOpen, ariaControls, disableSearch, comboboxProps, }: TreeSelectFieldInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};