@servicetitan/anvil2 2.7.0 → 2.8.0

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

@@ -1,5 +1,11 @@
 import { ReactNode } from 'react';
 import { BooleanFormatterOptions, CurrencyFormatterOptions, DateFormatterOptions, DateTimeFormatterOptions, NumberFormatterOptions, PercentFormatterOptions, TimeFormatterOptions } from './formatters';
+import { SelectMenuOption, SelectMenuGroupByValue } from '../SelectMenu';
+import { SelectMenuSyncProps } from '../SelectMenu/SelectMenuSync';
+import { SelectMenuProps } from '../SelectMenu/types';
+import { MultiSelectMenuOption } from '../MultiSelectMenu';
+import { MultiSelectMenuSyncProps } from '../MultiSelectMenu/MultiSelectMenuSync';
+import { MultiSelectMenuProps } from '../MultiSelectMenu/types';
 /**
  * Column type literals for display configuration.
  * Each type maps to a default formatter and alignment.
@@ -36,15 +42,10 @@ export type ColumnTypeConfig<T extends ColumnType = ColumnType> = T | {
     type: T;
     options: ColumnTypeOptionsMap[T];
 };
-/**
- * Utility type that extracts the element type from an array type.
- * Used for multiselect options type inference.
- */
-type ArrayElement<T> = T extends (infer U)[] ? U : never;
 /**
  * Edit mode literals for editable cells.
  */
-export type EditMode = "text" | "number" | "select" | "multiselect" | "boolean";
+export type EditMode = "text" | "number" | "select" | "select-async" | "multiselect" | "multiselect-async" | "boolean";
 /**
  * Base edit configuration shared by all edit modes.
  * @template T - The row data type
@@ -107,42 +108,235 @@ export type NumberEditConfig<T, K extends keyof T> = BaseEditConfig<T, K> & {
      */
     minimumFractionDigits?: number;
 };
+type SelectMenuCellPassthroughProps = Omit<SelectMenuSyncProps, "trigger" | "label" | "value" | "onSelectedOptionChange" | "options" | "onMenuKeyDown" | "onImplicitClose" | "onExplicitClose">;
+type MultiSelectMenuCellPassthroughProps = Omit<MultiSelectMenuSyncProps, "trigger" | "label" | "value" | "onSelectedOptionsChange" | "options" | "onMenuKeyDown" | "onImplicitClose" | "onExplicitClose">;
 /**
  * Edit configuration for select mode cells.
  * @template T - The row data type
  * @template K - The column key
  */
-export type SelectEditConfig<T, K extends keyof T> = BaseEditConfig<T, K> & {
+export type SelectEditConfig<T, K extends keyof T> = Omit<BaseEditConfig<T, K>, "onChange"> & {
     /**
-     * Select edit mode - renders a dropdown menu.
+     * Select edit mode - renders a SelectMenu popover.
      */
     mode: "select";
     /**
      * The options available for selection.
      */
-    options: {
-        value: T[K];
-        label: string;
-    }[];
-};
+    options: SelectMenuOption[];
+    /**
+     * Callback fired when the selected option changes.
+     * @param option - The newly selected option, or null if cleared
+     * @param rowId - The id of the row being edited
+     */
+    onChange: (option: SelectMenuOption | null, rowId: string) => void;
+} & SelectMenuCellPassthroughProps;
 /**
  * Edit configuration for multiselect mode cells.
  * @template T - The row data type
  * @template K - The column key
  */
-export type MultiselectEditConfig<T, K extends keyof T> = BaseEditConfig<T, K> & {
+export type MultiselectEditConfig<T, K extends keyof T> = Omit<BaseEditConfig<T, K>, "onChange"> & {
     /**
-     * Multiselect edit mode - renders a searchable multi-select popover.
+     * Multiselect edit mode - renders a searchable MultiSelectMenu popover.
      */
     mode: "multiselect";
     /**
      * The options available for selection.
      */
-    options: {
-        value: ArrayElement<T[K]>;
-        label: string;
-    }[];
+    options: MultiSelectMenuOption[];
+    /**
+     * Callback fired when the selected options change.
+     * @param options - The newly selected options
+     * @param rowId - The id of the row being edited
+     */
+    onChange: (options: MultiSelectMenuOption[], rowId: string) => void;
+} & MultiSelectMenuCellPassthroughProps;
+type SelectMenuAsyncCellPassthroughProps = Omit<SelectMenuProps, "trigger" | "label" | "value" | "onSelectedOptionChange" | "loadOptions" | "lazy" | "lazyOptions" | "onMenuKeyDown" | "onImplicitClose" | "onExplicitClose">;
+type MultiSelectMenuAsyncCellPassthroughProps = Omit<MultiSelectMenuProps, "trigger" | "label" | "value" | "onSelectedOptionsChange" | "loadOptions" | "lazy" | "lazyOptions" | "onMenuKeyDown" | "onImplicitClose" | "onExplicitClose">;
+/**
+ * Context passed to `loadOptions` for async edit configs.
+ * Provides row data for per-row option loading.
+ * @template T - The row data type
+ * @property row - The full row data object
+ * @property rowId - The string id of the row
+ */
+export type AsyncCellContext<T> = {
+    row: T;
+    rowId: string;
 };
+/**
+ * Eager loader for `mode: "select-async"` — returns all matching options at once.
+ * @template T - The row data type
+ */
+export type SelectAsyncCellEagerLoader<T> = (searchValue: string, context: AsyncCellContext<T>) => SelectMenuOption[] | Promise<SelectMenuOption[]>;
+/**
+ * Page-based lazy loader for `mode: "select-async"`.
+ * @template T - The row data type
+ */
+export type SelectAsyncCellPageLoader<T> = (searchValue: string, pageNumber: number, pageSize: number, context: AsyncCellContext<T>) => {
+    options: SelectMenuOption[];
+    hasMore?: boolean;
+} | Promise<{
+    options: SelectMenuOption[];
+    hasMore?: boolean;
+}>;
+/**
+ * Offset-based lazy loader for `mode: "select-async"`.
+ * @template T - The row data type
+ */
+export type SelectAsyncCellOffsetLoader<T> = (searchValue: string, offset: number, limit: number, context: AsyncCellContext<T>) => {
+    options: SelectMenuOption[];
+    hasMore?: boolean;
+} | Promise<{
+    options: SelectMenuOption[];
+    hasMore?: boolean;
+}>;
+/**
+ * Group-based lazy loader for `mode: "select-async"`.
+ * @template T - The row data type
+ */
+export type SelectAsyncCellGroupLoader<T> = (searchValue: string, previousGroupKey: SelectMenuGroupByValue | null, context: AsyncCellContext<T>) => {
+    options: SelectMenuOption[];
+    hasMore?: boolean;
+} | Promise<{
+    options: SelectMenuOption[];
+    hasMore?: boolean;
+}>;
+/**
+ * Eager loader for `mode: "multiselect-async"` — returns all matching options at once.
+ * @template T - The row data type
+ */
+export type MultiselectAsyncCellEagerLoader<T> = (searchValue: string, context: AsyncCellContext<T>) => MultiSelectMenuOption[] | Promise<MultiSelectMenuOption[]>;
+/**
+ * Page-based lazy loader for `mode: "multiselect-async"`.
+ * @template T - The row data type
+ */
+export type MultiselectAsyncCellPageLoader<T> = (searchValue: string, pageNumber: number, pageSize: number, context: AsyncCellContext<T>) => {
+    options: MultiSelectMenuOption[];
+    hasMore?: boolean;
+} | Promise<{
+    options: MultiSelectMenuOption[];
+    hasMore?: boolean;
+}>;
+/**
+ * Offset-based lazy loader for `mode: "multiselect-async"`.
+ * @template T - The row data type
+ */
+export type MultiselectAsyncCellOffsetLoader<T> = (searchValue: string, offset: number, limit: number, context: AsyncCellContext<T>) => {
+    options: MultiSelectMenuOption[];
+    hasMore?: boolean;
+} | Promise<{
+    options: MultiSelectMenuOption[];
+    hasMore?: boolean;
+}>;
+/**
+ * Group-based lazy loader for `mode: "multiselect-async"`.
+ * @template T - The row data type
+ */
+export type MultiselectAsyncCellGroupLoader<T> = (searchValue: string, previousGroupKey: SelectMenuGroupByValue | null, context: AsyncCellContext<T>) => {
+    options: MultiSelectMenuOption[];
+    hasMore?: boolean;
+} | Promise<{
+    options: MultiSelectMenuOption[];
+    hasMore?: boolean;
+}>;
+type SelectAsyncEditConfigBase = {
+    /**
+     * Callback fired when the selected option changes.
+     * @param option - The newly selected option, or null if cleared
+     * @param rowId - The id of the row being edited
+     */
+    onChange: (option: SelectMenuOption | null, rowId: string) => void;
+} & SelectMenuAsyncCellPassthroughProps;
+/**
+ * Edit configuration for async select mode cells.
+ * Uses `SelectMenu` directly (not `SelectMenuSync`) to support server-side option loading.
+ *
+ * The `loadOptions` function receives a `context` argument as its last parameter,
+ * containing the current row data and row id. This enables per-row option loading.
+ *
+ * By default, caching is disabled to prevent cross-row cache pollution when `loadOptions`
+ * uses row context. Pass `cache={{ enabled: true }}` to override.
+ *
+ * Cell value is expected to be a primitive that matches a `SelectMenuOption.id`.
+ *
+ * @template T - The row data type
+ */
+export type SelectAsyncEditConfig<T> = (SelectAsyncEditConfigBase & {
+    mode: "select-async";
+    lazy?: false;
+    loadOptions: SelectAsyncCellEagerLoader<T>;
+    lazyOptions?: never;
+}) | (SelectAsyncEditConfigBase & {
+    mode: "select-async";
+    lazy: "page";
+    loadOptions: SelectAsyncCellPageLoader<T>;
+    lazyOptions?: {
+        pageSize?: number;
+    };
+}) | (SelectAsyncEditConfigBase & {
+    mode: "select-async";
+    lazy: "offset";
+    loadOptions: SelectAsyncCellOffsetLoader<T>;
+    lazyOptions?: {
+        limit?: number;
+    };
+}) | (SelectAsyncEditConfigBase & {
+    mode: "select-async";
+    lazy: "group";
+    loadOptions: SelectAsyncCellGroupLoader<T>;
+    lazyOptions?: object;
+});
+type MultiselectAsyncEditConfigBase = {
+    /**
+     * Callback fired when the selected options change.
+     * @param options - The newly selected options (full option objects)
+     * @param rowId - The id of the row being edited
+     */
+    onChange: (options: MultiSelectMenuOption[], rowId: string) => void;
+} & MultiSelectMenuAsyncCellPassthroughProps;
+/**
+ * Edit configuration for async multiselect mode cells.
+ * Uses `MultiSelectMenu` directly (not `MultiSelectMenuSync`) to support server-side option loading.
+ *
+ * The `loadOptions` function receives a `context` argument as its last parameter,
+ * containing the current row data and row id. This enables per-row option loading.
+ *
+ * By default, caching is disabled to prevent cross-row cache pollution when `loadOptions`
+ * uses row context. Pass `cache={{ enabled: true }}` to override.
+ *
+ * **Value contract**: Unlike `mode: "multiselect"` (which stores ID arrays), the cell value
+ * for `mode: "multiselect-async"` must be `MultiSelectMenuOption[]` — full option objects.
+ * The `onChange` callback receives these objects directly and the consumer stores them wholesale.
+ *
+ * @template T - The row data type
+ */
+export type MultiselectAsyncEditConfig<T> = (MultiselectAsyncEditConfigBase & {
+    mode: "multiselect-async";
+    lazy?: false;
+    loadOptions: MultiselectAsyncCellEagerLoader<T>;
+    lazyOptions?: never;
+}) | (MultiselectAsyncEditConfigBase & {
+    mode: "multiselect-async";
+    lazy: "page";
+    loadOptions: MultiselectAsyncCellPageLoader<T>;
+    lazyOptions?: {
+        pageSize?: number;
+    };
+}) | (MultiselectAsyncEditConfigBase & {
+    mode: "multiselect-async";
+    lazy: "offset";
+    loadOptions: MultiselectAsyncCellOffsetLoader<T>;
+    lazyOptions?: {
+        limit?: number;
+    };
+}) | (MultiselectAsyncEditConfigBase & {
+    mode: "multiselect-async";
+    lazy: "group";
+    loadOptions: MultiselectAsyncCellGroupLoader<T>;
+    lazyOptions?: object;
+});
 /**
  * Edit configuration for boolean mode cells.
  * Renders a dropdown menu with predefined true/false options and an optional null option.
@@ -200,8 +394,8 @@ export type BooleanEditConfig<T, K extends keyof T> = BaseEditConfig<T, K> & {
  * // Select editing
  * editConfig: {
  *   mode: "select",
- *   options: [{ value: "active", label: "Active" }],
- *   onChange: (value, rowId) => save(value, rowId)
+ *   options: [{ id: "active", label: "Active" }],
+ *   onChange: (option, rowId) => save(option?.id, rowId)
  * }
  *
  * // Boolean editing
@@ -213,7 +407,7 @@ export type BooleanEditConfig<T, K extends keyof T> = BaseEditConfig<T, K> & {
  * }
  * ```
  */
-export type EditConfig<T, K extends keyof T> = TextEditConfig<T, K> | NumberEditConfig<T, K> | SelectEditConfig<T, K> | MultiselectEditConfig<T, K> | BooleanEditConfig<T, K>;
+export type EditConfig<T, K extends keyof T> = TextEditConfig<T, K> | NumberEditConfig<T, K> | SelectEditConfig<T, K> | SelectAsyncEditConfig<T> | MultiselectEditConfig<T, K> | MultiselectAsyncEditConfig<T> | BooleanEditConfig<T, K>;
 /**
  * The type for a table row
  * @extends T
@@ -327,17 +521,12 @@ export type ColumnDef<T> = {
      * // Select editing
      * editConfig: {
      *   mode: "select",
-     *   options: [{ value: "active", label: "Active" }],
-     *   onChange: (value, rowId) => save(value, rowId)
+     *   options: [{ id: "active", label: "Active" }],
+     *   onChange: (option, rowId) => save(option?.id, rowId)
      * }
      * ```
      */
     editConfig?: EditConfig<T, keyof T>;
-    /**
-     * The edit mode of the cells in the column.
-     * @deprecated Use `editConfig` instead. Example: `editConfig: { mode: "text", onChange: ... }`
-     */
-    editMode?: "text" | "number" | "select" | "multiselect" | "boolean";
     /**
      * Custom content to display when a cell value is empty (null, undefined, or empty string).
      * Overrides the default em dash. When set on both the column and the DataTable,
@@ -356,19 +545,6 @@ export type ColumnDef<T> = {
      * The minimum width of the column, in pixels
      */
     minWidth?: number;
-    /**
-     * The function to call when the value of an editable cell is saved.
-     * @deprecated Move inside `editConfig`. Example: `editConfig: { mode: "text", onChange: ... }`
-     */
-    onChange?: (value: T[keyof T], rowId: string) => void;
-    /**
-     * The options for the select or multiselect cells.
-     * @deprecated Move inside `editConfig`. Example: `editConfig: { mode: "select", options: [...], onChange: ... }`
-     */
-    options?: {
-        value: T[keyof T];
-        label: string;
-    }[];
     /**
      * The pinning location of the column
      */

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

@@ -57,7 +57,7 @@ export type ToolbarProps = ComponentPropsWithoutRef<"div"> & LayoutUtilProps & {
  *   />
  * </Toolbar>
  */
-export declare const ToolbarElement: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & LayoutUtilProps & {
+export declare const Toolbar: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & LayoutUtilProps & {
     /**
      * Description of the content this toolbar is associated with, used for accessibility
      */
@@ -81,46 +81,175 @@ export declare const ToolbarElement: import('react').ForwardRefExoticComponent<O
      * @default xsmall
      */
     size?: ToolbarSize;
-} & import('react').RefAttributes<HTMLDivElement>>;
-/**
- * Toolbar component for grouping related interactive elements.
- *
- * Features:
- * - Horizontal or vertical orientation
- * - Overflow handling with wrap or collapse behavior
- * - Keyboard navigation following ARIA best practices
- * - Screen reader announcements and accessibility
- * - Automatic overflow menu for collapsed items
- * - Support for buttons, toggles, selects, and links
- * - Layout utilities for positioning and spacing
- * - Context-based state management for child components
- *
- * @example
- * <Toolbar associatedContent="document editor" overflow="collapse">
- *   <Toolbar.Button icon={BoldIcon} aria-label="Bold" />
- *   <Toolbar.ButtonToggle icon={ItalicIcon} aria-label="Italic" />
- *   <Toolbar.Select
- *     items={fontOptions}
- *     selected="arial"
- *     accessibleLabel="Font family"
- *   />
- * </Toolbar>
- *
- * @example
- * <Toolbar associatedContent="data table" overflow="wrap">
- *   <Toolbar.Search placeholder="Search..." />
- *   <Toolbar.Filters
- *     filters={filters}
- *     onFilterChange={handleFilter}
- *     controlledFiltering={true}
- *   />
- *   <Toolbar.ControlGroup aria-label="Actions">
- *     <Toolbar.Button icon={AddIcon} aria-label="Add item" />
- *     <Toolbar.Button icon={ExportIcon} aria-label="Export" />
- *   </Toolbar.ControlGroup>
- * </Toolbar>
- */
-export declare const Toolbar: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & LayoutUtilProps & {
+} & import('react').RefAttributes<HTMLDivElement>> & {
+    /**
+     * ToolbarButton component for standard clickable actions within a toolbar with anvil2 tracking.
+     *
+     * Features:
+     * - Designed specifically for toolbar integration
+     * - Consistent styling with other toolbar items
+     * - Automatic tooltip for icon-only buttons
+     * - Overflow menu support
+     * - Accessibility enforcement for aria-labels
+     * - Ghost and primary appearance options
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Toolbar.Button icon={BoldIcon} aria-label="Bold text" />
+     *
+     * @example
+     * <Toolbar.Button appearance="primary">
+     *   Save
+     * </Toolbar.Button>
+     */
+    Button: import('react').ForwardRefExoticComponent<import('./ToolbarButton').ToolbarButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+    /**
+     * ToolbarButtonToggle component for toggleable actions within a toolbar with anvil2 tracking.
+     *
+     * Features:
+     * - Toggle state management
+     * - Designed specifically for toolbar integration
+     * - Consistent styling with other toolbar items
+     * - Overflow menu support
+     * - Accessibility enforcement for aria-labels
+     * - Ghost and primary appearance options
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Toolbar.ButtonToggle icon={BoldIcon} aria-label="Bold" checked={isBold} />
+     */
+    ButtonToggle: import('react').ForwardRefExoticComponent<import('./ToolbarButtonToggle').ToolbarButtonToggleProps & import('react').RefAttributes<HTMLButtonElement>>;
+    /**
+     * ToolbarButtonLink component for link actions within a toolbar with anvil2 tracking.
+     *
+     * Features:
+     * - Link functionality with href support
+     * - Designed specifically for toolbar integration
+     * - Consistent styling with other toolbar items
+     * - Overflow menu support
+     * - Accessibility enforcement for aria-labels
+     * - Ghost and primary appearance options
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Toolbar.ButtonLink href="/help">
+     *   Help
+     * </Toolbar.ButtonLink>
+     */
+    ButtonLink: import('react').ForwardRefExoticComponent<import('./ToolbarButtonLink').ToolbarButtonLinkProps & import('react').RefAttributes<HTMLAnchorElement>>;
+    /**
+     * ToolbarSelect component provides a dropdown selector within a toolbar with anvil2 tracking.
+     *
+     * Features:
+     * - Dropdown menu with selectable options
+     * - Controlled and uncontrolled usage patterns
+     * - Automatic overflow menu integration
+     * - Accessibility support with proper ARIA labels
+     * - Ghost and primary appearance options
+     * - Dropdown arrow icon indicator
+     * - Listbox integration for keyboard navigation
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Toolbar.Select
+     *   items={fontOptions}
+     *   selected="arial"
+     *   accessibleLabel="Font family"
+     *   onChange={(id) => setFont(id)}
+     * />
+     */
+    Select: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & LayoutUtilProps & import('../../..').DataTrackingId & {
+        aiMark?: boolean | import('../../..').AiIconName;
+        appearance?: import('../../..').ButtonAppearance;
+        size?: Extract<import('../../..').Size, "xsmall" | "small" | "medium" | "large">;
+        loading?: boolean;
+    } & {
+        children?: ComponentPropsWithoutRef<"button">["children"];
+        icon?: import('../../..').IconProps["svg"] | {
+            after: import('../../..').IconProps["svg"];
+        } | {
+            before: import('../../..').IconProps["svg"];
+        };
+    } & import('react').RefAttributes<HTMLButtonElement>, "ref"> | Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & LayoutUtilProps & import('../../..').DataTrackingId & {
+        aiMark?: boolean | import('../../..').AiIconName;
+        appearance?: import('../../..').ButtonAppearance;
+        size?: Extract<import('../../..').Size, "xsmall" | "small" | "medium" | "large">;
+        loading?: boolean;
+    } & {
+        children?: never;
+        icon?: import('../../..').IconProps["svg"];
+    } & import('react').RefAttributes<HTMLButtonElement>, "ref">, "onChange" | "appearance"> & {
+        appearance?: import('./types').ToolbarItemAppearance;
+        onChange?: (optionId: string) => void;
+        selected?: string;
+        items: (Record<string, unknown> & {
+            id: string;
+        } & {
+            label: string;
+            disabled?: boolean;
+        })[];
+        accessibleLabel: string;
+    } & import('../../..').DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;
+    /**
+     * FilterGroup component displays a group of filters with toggles and a clear button.
+     * Also contains the FilterDrawer for additional filter options.
+     *
+     * Features:
+     * - 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
+     * - Date filters include calendar popup for easy selection
+     * - Date range filters support start and end date selection
+     *
+     * @example
+     * <Toolbar.Filters
+     *   filters={filters}
+     *   onFilterChange={handleFilter}
+     *   controlledFiltering={true}
+     * />
+     */
+    Filters: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & LayoutUtilProps & {
+        filters: import('.').Filter[];
+        onFilterChange?: (filters: import('.').Filter[]) => void;
+        controlledFiltering?: boolean;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    /**
+     * ToolbarControlGroup component provides a flex container for grouping related toolbar controls.
+     * Can be used for filters, buttons, or other toolbar items.
+     *
+     * Features:
+     * - Groups related toolbar controls in a flex container
+     * - Supports accessibility with aria-label
+     * - Handles overflow and wrapping based on toolbar context
+     * - Integrates with layout utilities for spacing and alignment
+     *
+     * @example
+     * <Toolbar.ControlGroup aria-label="Formatting controls">
+     *   <Toolbar.Button icon={BoldIcon} aria-label="Bold" />
+     *   <Toolbar.Button icon={ItalicIcon} aria-label="Italic" />
+     * </Toolbar.ControlGroup>
+     */
+    ControlGroup: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & LayoutUtilProps & {
+        "aria-label"?: string;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    /**
+     * ToolbarSearchField component renders a search field for use in toolbars.
+     *
+     * Features:
+     * - Renders a search field styled for toolbar usage
+     * - Supports all SearchField props except size
+     * - Integrates with toolbar layouts and accessibility
+     *
+     * @example
+     * <Toolbar.Search placeholder="Search..." />
+     */
+    Search: import('react').ForwardRefExoticComponent<import('./ToolbarSearchField').ToolbarSearchFieldProps & import('react').RefAttributes<HTMLInputElement>>;
+};
+export declare const ToolbarElement: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & LayoutUtilProps & {
     /**
      * Description of the content this toolbar is associated with, used for accessibility
      */
@@ -221,7 +350,8 @@ export declare const Toolbar: import('react').ForwardRefExoticComponent<Omit<imp
      *   onChange={(id) => setFont(id)}
      * />
      */
-    Select: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & LayoutUtilProps & {
+    Select: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & LayoutUtilProps & import('../../..').DataTrackingId & {
+        aiMark?: boolean | import('../../..').AiIconName;
         appearance?: import('../../..').ButtonAppearance;
         size?: Extract<import('../../..').Size, "xsmall" | "small" | "medium" | "large">;
         loading?: boolean;
@@ -232,14 +362,15 @@ export declare const Toolbar: import('react').ForwardRefExoticComponent<Omit<imp
         } | {
             before: import('../../..').IconProps["svg"];
         };
-    } & import('../../..').DataTrackingId & import('react').RefAttributes<HTMLButtonElement>, "ref"> | Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & LayoutUtilProps & {
+    } & import('react').RefAttributes<HTMLButtonElement>, "ref"> | Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & LayoutUtilProps & import('../../..').DataTrackingId & {
+        aiMark?: boolean | import('../../..').AiIconName;
         appearance?: import('../../..').ButtonAppearance;
         size?: Extract<import('../../..').Size, "xsmall" | "small" | "medium" | "large">;
         loading?: boolean;
     } & {
         children?: never;
         icon?: import('../../..').IconProps["svg"];
-    } & import('../../..').DataTrackingId & import('react').RefAttributes<HTMLButtonElement>, "ref">, "onChange" | "appearance"> & {
+    } & import('react').RefAttributes<HTMLButtonElement>, "ref">, "onChange" | "appearance"> & {
         appearance?: import('./types').ToolbarItemAppearance;
         onChange?: (optionId: string) => void;
         selected?: string;

package/dist/beta/components/Toolbar/ToolbarSelect.d.ts

@@ -63,7 +63,8 @@ export type ToolbarSelectProps<T = Record<string, unknown>> = Omit<React.Compone
  *   accessibleLabel="Text color"
  * />
  */
-export declare const ToolbarSelect: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & import('../../..').LayoutUtilProps & {
+export declare const ToolbarSelect: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & import('../../..').LayoutUtilProps & DataTrackingId & {
+    aiMark?: boolean | import('../../..').AiIconName;
     appearance?: import('../../..').ButtonAppearance;
     size?: Extract<import('../../..').Size, "xsmall" | "small" | "medium" | "large">;
     loading?: boolean;
@@ -74,14 +75,15 @@ export declare const ToolbarSelect: import('react').ForwardRefExoticComponent<Om
     } | {
         before: import('../../..').IconProps["svg"];
     };
-} & DataTrackingId & import('react').RefAttributes<HTMLButtonElement>, "ref"> | Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & import('../../..').LayoutUtilProps & {
+} & import('react').RefAttributes<HTMLButtonElement>, "ref"> | Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & import('../../..').LayoutUtilProps & DataTrackingId & {
+    aiMark?: boolean | import('../../..').AiIconName;
     appearance?: import('../../..').ButtonAppearance;
     size?: Extract<import('../../..').Size, "xsmall" | "small" | "medium" | "large">;
     loading?: boolean;
 } & {
     children?: never;
     icon?: import('../../..').IconProps["svg"];
-} & DataTrackingId & import('react').RefAttributes<HTMLButtonElement>, "ref">, "onChange" | "appearance"> & {
+} & import('react').RefAttributes<HTMLButtonElement>, "ref">, "onChange" | "appearance"> & {
     /**
      * Visual appearance of the select button
      * @default ghost

package/dist/beta.js

@@ -1,11 +1,11 @@
-export { C as COLUMN_TYPE_DEFAULTS, D as DataTable, b as booleanFormatter, a as chipsFormatter, c as createColumnHelper, d as currencyFormatter, h as dateFormatPresets, e as dateFormatter, f as dateTimeFormatter, g as getColumnTypeDefaults, n as numberFormatter, p as percentFormatter, r as resolveColumnTypeConfig, t as timeFormatPresets, i as timeFormatter, y as yearlessDateFormatter } from './DataTable-BYOS6icI.js';
-export { T as Toolbar, a as ToolbarButton, c as ToolbarButtonLink, b as ToolbarButtonToggle, e as ToolbarControlGroup, g as ToolbarElement, f as ToolbarSearchField, d as ToolbarSelect } from './Toolbar-DAuz4Gs2.js';
-export { u as useCalendarBetaProps } from './Calendar-SGlTt-bs.js';
-export { C as Calendar } from './Calendar-C1U2npPP.js';
-export { S as SelectField, a as SelectFieldSync } from './SelectFieldSync-CJ2Ie_v1.js';
-export { M as MultiSelectField, a as MultiSelectFieldSync } from './MultiSelectFieldSync-DGpGgu8q.js';
-export { S as SelectMenu, a as SelectMenuSync } from './SelectMenuSync-CJA_coqD.js';
-export { M as MultiSelectMenu, a as MultiSelectMenuSync } from './MultiSelectMenuSync-DiLddJDw.js';
+export { C as COLUMN_TYPE_DEFAULTS, D as DataTable, b as booleanFormatter, a as chipsFormatter, c as createColumnHelper, d as currencyFormatter, h as dateFormatPresets, e as dateFormatter, f as dateTimeFormatter, g as getColumnTypeDefaults, n as numberFormatter, p as percentFormatter, r as resolveColumnTypeConfig, t as timeFormatPresets, i as timeFormatter, y as yearlessDateFormatter } from './DataTable-DK9xRjnq.js';
+export { T as Toolbar, a as ToolbarButton, c as ToolbarButtonLink, b as ToolbarButtonToggle, e as ToolbarControlGroup, g as ToolbarElement, f as ToolbarSearchField, d as ToolbarSelect } from './Toolbar-CWRk523l.js';
+export { u as useCalendarBetaProps } from './Calendar-Bd_WELZC.js';
+export { C as Calendar } from './Calendar-d2owsYe9.js';
+export { S as SelectField, a as SelectFieldSync } from './SelectFieldSync-DGK8F2G9.js';
+export { M as MultiSelectField, a as MultiSelectFieldSync } from './MultiSelectFieldSync-Ei7DXzvs.js';
+export { S as SelectMenu, a as SelectMenuSync } from './SelectMenuSync-CuZp9mnt.js';
+export { M as MultiSelectMenu, a as MultiSelectMenuSync } from './MultiSelectMenuSync-B_mXpTEe.js';
 export { I as InteractiveCard } from './InteractiveCard-GTYbR6Xy.js';
-export { u as useAdaptiveView } from './syncFilterUtils-vt8ldsES.js';
+export { u as useAdaptiveView } from './syncFilterUtils-CsbCnI1-.js';
 //# sourceMappingURL=beta.js.map