@servicetitan/anvil2 1.45.2 → 1.46.1

package/dist/beta/components/Toolbar/Filters/internal/utils/filter-state.d.ts

@@ -0,0 +1,40 @@
+import { Filter, FilterValue } from '../types';
+/**
+ * Returns an array of filters that are currently active (i.e., have a value set).
+ *
+ * @param {Filter[]} filters - Array of filter objects to check
+ * @returns {Filter[]} Array of active filters
+ */
+export declare const getActiveFilters: (filters: Filter[]) => Filter[];
+/**
+ * Checks if any filters in the array have active values
+ *
+ * @param {Filter[]} filters - Array of filter objects to check
+ * @returns {boolean} True if any filter has an active value
+ */
+export declare const checkActiveFilters: (filters: Filter[]) => boolean;
+/**
+ * Resets all filters to their default state
+ *
+ * @param {Filter[]} filters - Array of filter objects to reset
+ * @returns {Filter[]} New array with reset filters
+ */
+export declare const resetFilters: (filters: Filter[]) => Filter[];
+/**
+ * Updates a single filter in an array of filters
+ *
+ * @param {Filter[]} filters - Array of filter objects
+ * @param {string} filterId - ID of the filter to update
+ * @param {FilterValue} value - New value for the filter
+ * @returns {Filter[]} New array with updated filter
+ */
+export declare const updateSingleFilter: (filters: Filter[], filterId: string, value: FilterValue) => Filter[];
+/**
+ * Determines if two filter values are different.
+ * For singleSelect, compares by id if both are objects with id.
+ *
+ * @param {T} a - First value to compare
+ * @param {T} b - Second value to compare
+ * @returns {boolean} True if the values are different
+ */
+export declare const hasChangedFilter: <T>(a: T, b: T) => boolean;

package/dist/beta/components/Toolbar/Filters/internal/utils/test.d.ts

@@ -0,0 +1,57 @@
+import { Filter, BooleanFilter, CustomFilter, SingleSelectFilter, MultiSelectFilter, DateFilter, DateRangeFilter } from '../types';
+export type TestValue = {
+    id: number;
+    label: string;
+    value: string;
+};
+export declare const mockFilterOptions: {
+    id: number;
+    label: string;
+    value: string;
+}[];
+export declare const defaultMockBooleanFilter: BooleanFilter;
+export declare const defaultMockCustomFilter: CustomFilter<TestValue>;
+export declare const defaultMockSingleSelectFilter: SingleSelectFilter<{
+    id: string;
+    label: string;
+}>;
+export declare const defaultMockMultiSelectFilter: MultiSelectFilter<{
+    id: string;
+    label: string;
+}>;
+export declare const defaultMockDateFilter: DateFilter;
+export declare const defaultMockDateRangeFilter: DateRangeFilter;
+export declare const defaultMockFilters: (BooleanFilter | DateFilter | DateRangeFilter | CustomFilter<TestValue> | SingleSelectFilter<{
+    id: string;
+    label: string;
+}> | MultiSelectFilter<{
+    id: string;
+    label: string;
+}>)[];
+export declare function createMockFilter<T = unknown>(overrides?: Partial<Filter | CustomFilter<T> | SingleSelectFilter<T>>): Filter | CustomFilter<T> | SingleSelectFilter<T>;
+export declare function createMockFilterContext(filters?: Filter[], contextOverrides?: {}): {
+    filterGroupRef: {
+        current: HTMLDivElement;
+    };
+    filters: Filter[];
+    updateFilter: import('vitest').Mock<(...args: any[]) => any>;
+    onFilterChange: import('vitest').Mock<(...args: any[]) => any>;
+    hiddenFilters: never[];
+    addHiddenFilter: import('vitest').Mock<(...args: any[]) => any>;
+    removeHiddenFilter: import('vitest').Mock<(...args: any[]) => any>;
+    controlledFiltering: boolean;
+};
+export declare function createMockBooleanFilter(overrides?: Partial<BooleanFilter>): BooleanFilter;
+export declare function createMockCustomFilter<T = unknown>(overrides?: Partial<CustomFilter<T>>): CustomFilter<T>;
+export declare function createMockSingleSelectFilter<T = {
+    id: string;
+    label: string;
+}>(overrides?: Partial<SingleSelectFilter<T>>): SingleSelectFilter<T>;
+export declare function createMockMultiSelectFilter<T = {
+    id: string;
+    label: string;
+}>(overrides?: Partial<MultiSelectFilter<T>>): MultiSelectFilter<T>;
+export declare function createMockDateFilter(overrides?: Partial<DateFilter>): DateFilter;
+export declare function createMockDateRangeFilter(overrides?: Partial<DateRangeFilter>): DateRangeFilter;
+export declare const setupDesktopContainer: () => void;
+export declare const setupMobileContainer: () => void;

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

@@ -0,0 +1,302 @@
+import { ToolbarOverflowTypes } from './types';
+import { ComponentPropsWithoutRef, ReactElement } from 'react';
+import { LayoutUtilProps } from '../../../types';
+/**
+ * Props for the Toolbar component
+ * @extends ComponentPropsWithoutRef<"div">
+ * @extends LayoutUtilProps
+ */
+export type ToolbarProps = ComponentPropsWithoutRef<"div"> & LayoutUtilProps & {
+    /**
+     * Description of the content this toolbar is associated with, used for accessibility
+     */
+    associatedContent: string;
+    /**
+     * Orientation of the toolbar
+     * @default horizontal
+     */
+    direction?: "vertical" | "horizontal";
+    /**
+     * How to handle overflow when items don't fit
+     * @default wrap
+     */
+    overflow?: ToolbarOverflowTypes;
+    /**
+     * Additional items to display in the overflow menu
+     */
+    additionalItems?: ReactElement[];
+};
+/**
+ * Toolbar component for grouping related interactive elements with anvil2 tracking.
+ *
+ * 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
+ * - Automatic tracking ID generation for analytics
+ * - Integration with anvil2 tracking system
+ *
+ * @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>
+ */
+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
+     */
+    associatedContent: string;
+    /**
+     * Orientation of the toolbar
+     * @default horizontal
+     */
+    direction?: "vertical" | "horizontal";
+    /**
+     * How to handle overflow when items don't fit
+     * @default wrap
+     */
+    overflow?: ToolbarOverflowTypes;
+    /**
+     * Additional items to display in the overflow menu
+     */
+    additionalItems?: ReactElement[];
+} & 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 & {
+    /**
+     * Description of the content this toolbar is associated with, used for accessibility
+     */
+    associatedContent: string;
+    /**
+     * Orientation of the toolbar
+     * @default horizontal
+     */
+    direction?: "vertical" | "horizontal";
+    /**
+     * How to handle overflow when items don't fit
+     * @default wrap
+     */
+    overflow?: ToolbarOverflowTypes;
+    /**
+     * Additional items to display in the overflow menu
+     */
+    additionalItems?: ReactElement[];
+} & 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
+     * - Small size optimized for toolbar layout
+     * - 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
+     * - Small size optimized for toolbar layout
+     * - 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
+     * - Small size optimized for toolbar layout
+     * - 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
+     * - Small size optimized for toolbar layout
+     * - 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 & {
+        appearance?: import('../../..').ButtonAppearance;
+        size?: Extract<import('../../..').Size, "small" | "medium" | "large">;
+        loading?: boolean;
+    } & {
+        children?: ComponentPropsWithoutRef<"button">["children"];
+        icon?: import('../../..').IconProps["svg"] | {
+            after: import('../../..').IconProps["svg"];
+        } | {
+            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 & {
+        appearance?: import('../../..').ButtonAppearance;
+        size?: Extract<import('../../..').Size, "small" | "medium" | "large">;
+        loading?: boolean;
+    } & {
+        children?: never;
+        icon?: import('../../..').IconProps["svg"];
+    } & import('../../..').DataTrackingId & 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('./Filters/internal/types').Filter[];
+        onFilterChange?: (filters: import('./Filters/internal/types').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 small-sized search field for use in toolbars.
+     *
+     * Features:
+     * - Renders a search field styled for toolbar usage
+     * - Always uses small size for compact layout
+     * - 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>>;
+};

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

@@ -0,0 +1,41 @@
+import { ButtonProps } from '../../../components/Button';
+import { ToolbarItemAppearance, WithAriaLabelEnforcement } from './types';
+import { DataTrackingId } from '../../../types';
+/**
+ * Base props for the ToolbarButton component
+ * @extends Omit<ButtonProps, "appearance" | "aria-label" | "children">
+ */
+type ToolbarButtonBaseProps = Omit<ButtonProps, "appearance" | "aria-label" | "children"> & {
+    /**
+     * Visual appearance of the button
+     * @default ghost
+     */
+    appearance?: ToolbarItemAppearance;
+};
+/**
+ * Props for the ToolbarButton component
+ * @extends WithAriaLabelEnforcement<ToolbarButtonBaseProps>
+ */
+export type ToolbarButtonProps = WithAriaLabelEnforcement<ToolbarButtonBaseProps> & DataTrackingId;
+/**
+ * ToolbarButton component for standard clickable actions within a toolbar.
+ *
+ * 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
+ * - Small size optimized for toolbar layout
+ * - Ghost and primary appearance options
+ *
+ * @example
+ * <ToolbarButton icon={BoldIcon} aria-label="Bold text" />
+ *
+ * @example
+ * <ToolbarButton appearance="primary">
+ *   Save
+ * </ToolbarButton>
+ */
+export declare const ToolbarButton: import('react').ForwardRefExoticComponent<ToolbarButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -0,0 +1,43 @@
+import { ButtonLinkProps } from '../../../components/ButtonLink';
+import { ToolbarItemAppearance, WithAriaLabelEnforcement } from './types';
+import { DataTrackingId } from '../../../types';
+/**
+ * Base props for the ToolbarButtonLink component
+ * @extends Omit<ButtonLinkProps, "appearance" | "aria-label" | "children">
+ */
+type ToolbarButtonLinkBaseProps = Omit<ButtonLinkProps, "appearance" | "aria-label" | "children"> & {
+    /**
+     * Visual appearance of the button link
+     * @default ghost
+     */
+    appearance?: ToolbarItemAppearance;
+};
+/**
+ * Props for the ToolbarButtonLink component
+ * @extends WithAriaLabelEnforcement<ToolbarButtonLinkBaseProps>
+ */
+export type ToolbarButtonLinkProps = WithAriaLabelEnforcement<ToolbarButtonLinkBaseProps> & DataTrackingId;
+/**
+ * ToolbarButtonLink component for link actions within a toolbar.
+ *
+ * Features:
+ * - Link functionality with href support
+ * - Designed specifically for toolbar integration
+ * - Consistent styling with other toolbar items
+ * - Automatic tooltip for icon-only links
+ * - Overflow menu support
+ * - Accessibility enforcement for aria-labels
+ * - Small size optimized for toolbar layout
+ * - Ghost and primary appearance options
+ * - Proper anchor element semantics
+ *
+ * @example
+ * <ToolbarButtonLink href="/help">
+ *   Help
+ * </ToolbarButtonLink>
+ *
+ * @example
+ * <ToolbarButtonLink icon={ExternalLinkIcon} href="/docs" aria-label="Documentation" />
+ */
+export declare const ToolbarButtonLink: import('react').ForwardRefExoticComponent<ToolbarButtonLinkProps & import('react').RefAttributes<HTMLAnchorElement>>;
+export {};

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

@@ -0,0 +1,42 @@
+import { ButtonToggleProps } from '../../../components/ButtonToggle';
+import { WithAriaLabelEnforcement } from './types';
+import { DataTrackingId } from '../../../types';
+/**
+ * Base props for the ToolbarButtonToggle component
+ * @extends Omit<ButtonToggleProps, "aria-label" | "children">
+ */
+type ToolbarButtonToggleBaseProps = Omit<ButtonToggleProps, "aria-label" | "children"> & {
+    /**
+     * Is this toolbar control a filter?
+     */
+    isFilter?: boolean;
+};
+/**
+ * Props for the ToolbarButtonToggle component
+ * @extends WithAriaLabelEnforcement<ToolbarButtonToggleBaseProps>
+ */
+export type ToolbarButtonToggleProps = WithAriaLabelEnforcement<ToolbarButtonToggleBaseProps> & DataTrackingId;
+/**
+ * ToolbarButtonToggle component for toggleable actions within a toolbar.
+ *
+ * Features:
+ * - Toggle state management (on/off)
+ * - Designed specifically for toolbar integration
+ * - Consistent styling with other toolbar items
+ * - Automatic tooltip for icon-only toggles
+ * - Overflow menu support
+ * - Accessibility enforcement for aria-labels
+ * - Small size optimized for toolbar layout
+ * - Visual feedback for toggle state
+ * - Proper ARIA attributes for toggle semantics
+ *
+ * @example
+ * <ToolbarButtonToggle icon={BoldIcon} aria-label="Bold" checked={isBold} />
+ *
+ * @example
+ * <ToolbarButtonToggle checked={isItalic}>
+ *   Italic
+ * </ToolbarButtonToggle>
+ */
+export declare const ToolbarButtonToggle: import('react').ForwardRefExoticComponent<ToolbarButtonToggleProps & import('react').RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -0,0 +1,20 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { LayoutUtilProps } from '../../../types';
+/**
+ * Props for the ToolbarControlGroup component
+ *
+ * @extends ComponentPropsWithoutRef<'div'>
+ * @extends LayoutUtilProps
+ */
+export type ToolbarControlGroupProps = ComponentPropsWithoutRef<"div"> & LayoutUtilProps & {
+    /**
+     * Accessible label for the control group
+     */
+    "aria-label"?: string;
+};
+export declare const ToolbarControlGroup: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & LayoutUtilProps & {
+    /**
+     * Accessible label for the control group
+     */
+    "aria-label"?: string;
+} & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,20 @@
+import { SearchFieldProps } from '../../../components/SearchField';
+/**
+ * Props for the ToolbarSearchField component
+ *
+ * @extends Omit<SearchFieldProps, "size">
+ */
+export type ToolbarSearchFieldProps = Omit<SearchFieldProps, "size">;
+/**
+ * ToolbarSearchField component renders a small-sized search field for use in toolbars.
+ *
+ * Features:
+ * - Renders a search field styled for toolbar usage
+ * - Always uses small size for compact layout
+ * - Supports all SearchField props except size
+ * - Integrates with toolbar layouts and accessibility
+ *
+ * @example
+ * <ToolbarSearchField placeholder="Search..." />
+ */
+export declare const ToolbarSearchField: import('react').ForwardRefExoticComponent<ToolbarSearchFieldProps & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,108 @@
+import { ListboxItemType } from '../../../components/Listbox';
+import { default as Popover } from '../../../components/Popover';
+import { ToolbarItemAppearance } from './types';
+import { DataTrackingId } from '../../../types';
+/**
+ * Type for items in the ToolbarSelect dropdown
+ * @extends ItemType<T & { id: string }>
+ */
+type ToolbarSelectItem<T = Record<string, unknown>> = ListboxItemType<T & {
+    id: string;
+}>;
+/**
+ * Props for the ToolbarSelect component
+ * @extends Omit<React.ComponentPropsWithoutRef<typeof Popover.Button>, "appearance" | "onChange">
+ */
+export type ToolbarSelectProps<T = Record<string, unknown>> = Omit<React.ComponentPropsWithoutRef<typeof Popover.Button>, "appearance" | "onChange"> & {
+    /**
+     * Visual appearance of the select button
+     * @default ghost
+     */
+    appearance?: ToolbarItemAppearance;
+    /**
+     * Callback function when selection changes
+     */
+    onChange?: (optionId: string) => void;
+    /**
+     * Currently selected item ID (controlled mode)
+     */
+    selected?: string;
+    /**
+     * Array of selectable items
+     */
+    items: ToolbarSelectItem<T>[];
+    /**
+     * Accessible label for the select component
+     */
+    accessibleLabel: string;
+} & DataTrackingId;
+/**
+ * ToolbarSelect component provides a dropdown selector within a toolbar.
+ *
+ * Features:
+ * - Dropdown menu with selectable options
+ * - Controlled and uncontrolled usage patterns
+ * - Automatic overflow menu integration
+ * - Accessibility support with proper ARIA labels
+ * - Small size optimized for toolbar layout
+ * - Ghost and primary appearance options
+ * - Dropdown arrow icon indicator
+ * - Listbox integration for keyboard navigation
+ *
+ * @example
+ * <ToolbarSelect
+ *   items={fontOptions}
+ *   selected="arial"
+ *   accessibleLabel="Font family"
+ *   onChange={(id) => setFont(id)}
+ * />
+ *
+ * @example
+ * <ToolbarSelect
+ *   appearance="primary"
+ *   items={colorOptions}
+ *   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 & {
+    appearance?: import('../../..').ButtonAppearance;
+    size?: Extract<import('../../..').Size, "small" | "medium" | "large">;
+    loading?: boolean;
+} & {
+    children?: import('react').ComponentPropsWithoutRef<"button">["children"];
+    icon?: import('../../..').IconProps["svg"] | {
+        after: import('../../..').IconProps["svg"];
+    } | {
+        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 & {
+    appearance?: import('../../..').ButtonAppearance;
+    size?: Extract<import('../../..').Size, "small" | "medium" | "large">;
+    loading?: boolean;
+} & {
+    children?: never;
+    icon?: import('../../..').IconProps["svg"];
+} & DataTrackingId & import('react').RefAttributes<HTMLButtonElement>, "ref">, "onChange" | "appearance"> & {
+    /**
+     * Visual appearance of the select button
+     * @default ghost
+     */
+    appearance?: ToolbarItemAppearance;
+    /**
+     * Callback function when selection changes
+     */
+    onChange?: (optionId: string) => void;
+    /**
+     * Currently selected item ID (controlled mode)
+     */
+    selected?: string;
+    /**
+     * Array of selectable items
+     */
+    items: ToolbarSelectItem<Record<string, unknown>>[];
+    /**
+     * Accessible label for the select component
+     */
+    accessibleLabel: string;
+} & DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;
+export {};