@servicetitan/anvil2 2.5.1 → 2.6.1

package/dist/beta/components/MultiSelectField/internal/useComboMultiple.d.ts

@@ -1,5 +1,6 @@
 import { UseComboboxProps } from 'downshift';
-import { MultiSelectFieldDownshiftItem, MultiSelectFieldGroupByValue, MultiSelectFieldOption, MultiSelectFieldPinnedOptions } from '../types';
+import { MultiSelectFieldGroupByValue, MultiSelectFieldOption, MultiSelectFieldPinnedOptions } from '../types';
+import { SelectItem } from '../../../../internal/types/selectFieldInternalTypes';
 import { CheckState } from '../../../../types';
 export type UseComboMultipleOptions = {
     /** An array of currently loaded options */
@@ -31,7 +32,8 @@ export type UseComboMultipleOptions = {
     loading?: boolean;
     /** Whether the list is virtualized (disables built-in scroll behavior) */
     virtualize?: boolean;
-} & Pick<UseComboboxProps<MultiSelectFieldDownshiftItem>, "onInputValueChange" | "onIsOpenChange">;
+    onScrollToHighlight?: (index: number) => void;
+} & Pick<UseComboboxProps<SelectItem>, "onInputValueChange" | "onIsOpenChange">;
 /**
  * Hook that wraps downshift's useCombobox for multi-select behavior.
  * Unlike useCombo, this hook:
@@ -41,19 +43,18 @@ export type UseComboMultipleOptions = {
  * @param options - Configuration options for the hook
  * @returns Downshift combobox props and state
  */
-export declare const useComboMultiple: ({ options, pinned, groupToString, groupSorter, selectAll, selectFiltered, selectedOptions, onSelectedOptionsChange, onInputValueChange, onIsOpenChange, displayAs, disabled, loading, virtualize, }: UseComboMultipleOptions) => {
+export declare const useComboMultiple: ({ options, pinned, groupToString, groupSorter, selectAll, selectFiltered, selectedOptions, onSelectedOptionsChange, onInputValueChange, onIsOpenChange, displayAs, disabled, loading, virtualize, onScrollToHighlight, }: UseComboMultipleOptions) => {
     inputValue: string;
     wrapperDivRef: import('react').RefObject<HTMLDivElement>;
     getToggleButtonProps: <Options>(options?: import('downshift').UseComboboxGetToggleButtonPropsOptions & Options) => import('downshift').Overwrite<import('downshift').UseComboboxGetToggleButtonPropsReturnValue, Options>;
     getLabelProps: <Options>(options?: import('downshift').UseComboboxGetLabelPropsOptions & Options) => import('downshift').Overwrite<import('downshift').UseComboboxGetLabelPropsReturnValue, Options>;
     getMenuProps: <Options>(options?: import('downshift').UseComboboxGetMenuPropsOptions & Options, otherOptions?: import('downshift').GetPropsCommonOptions) => import('downshift').Overwrite<import('downshift').UseComboboxGetMenuPropsReturnValue, Options>;
     getInputProps: <Options>(options?: import('downshift').UseComboboxGetInputPropsOptions & Options, otherOptions?: import('downshift').GetPropsCommonOptions) => import('downshift').Overwrite<import('downshift').UseComboboxGetInputPropsReturnValue, Options>;
-    getItemProps: <Options>(options: import('downshift').UseComboboxGetItemPropsOptions<import('../..').SelectFieldDownshiftItem> & Options) => Omit<import('downshift').Overwrite<import('downshift').UseComboboxGetItemPropsReturnValue, Options>, "item" | "index">;
+    getItemProps: <Options>(options: import('downshift').UseComboboxGetItemPropsOptions<SelectItem> & Options) => Omit<import('downshift').Overwrite<import('downshift').UseComboboxGetItemPropsReturnValue, Options>, "item" | "index">;
     highlightedIndex: number;
-    highlightChangeTypeRef: import('react').MutableRefObject<string>;
     isOpen: boolean;
-    downshiftItems: import('../..').SelectFieldDownshiftItem[];
-    sectionsMeta: import('../../SelectField/internal/types').SectionMeta[];
+    items: SelectItem[];
+    sectionsMeta: import('../../SelectField/internal/useCombo').SectionMeta[];
     closeMenu: () => void;
     openMenu: () => void;
     toggleMenu: () => void;

package/dist/beta/components/MultiSelectField/internal/useSelectModeMultiple.d.ts

@@ -1,4 +1,5 @@
 import { MultiSelectFieldGroupByValue, MultiSelectFieldOption, MultiSelectFieldPinnedOptions } from '../types';
+import { SelectItem } from '../../../../internal/types/selectFieldInternalTypes';
 import { CheckState } from '../../../../types';
 export type UseSelectModeMultipleOptions = {
     options: MultiSelectFieldOption[];
@@ -18,21 +19,22 @@ export type UseSelectModeMultipleOptions = {
     displayAs: "popover" | "dialog";
     disabled: boolean;
     virtualize?: boolean;
+    onScrollToHighlight?: (index: number) => void;
 };
 /**
  * Wraps downshift's useSelect for non-searchable multi-select fields.
  * Keeps menu open after selection and handles bulk actions.
  */
-export declare const useSelectModeMultiple: ({ options, pinned, groupToString, groupSorter, selectAll, selectedOptions, onSelectedOptionsChange, onIsOpenChange, displayAs, disabled, virtualize, }: UseSelectModeMultipleOptions) => {
+export declare const useSelectModeMultiple: ({ options, pinned, groupToString, groupSorter, selectAll, selectedOptions, onSelectedOptionsChange, onIsOpenChange, displayAs, disabled, virtualize, onScrollToHighlight, }: UseSelectModeMultipleOptions) => {
     wrapperDivRef: import('react').RefObject<HTMLDivElement>;
     getToggleButtonProps: <Options>(options?: import('downshift').UseSelectGetToggleButtonPropsOptions & Options, otherOptions?: import('downshift').GetPropsCommonOptions) => import('downshift').Overwrite<import('downshift').UseSelectGetToggleButtonReturnValue, Options>;
     getLabelProps: <Options>(options?: import('downshift').UseSelectGetLabelPropsOptions & Options) => import('downshift').Overwrite<import('downshift').UseSelectGetLabelPropsReturnValue, Options>;
     getMenuProps: <Options>(options?: import('downshift').UseSelectGetMenuPropsOptions & Options, otherOptions?: import('downshift').GetPropsCommonOptions) => import('downshift').Overwrite<import('downshift').UseSelectGetMenuReturnValue, Options>;
-    getItemProps: <Options>(options: import('downshift').UseSelectGetItemPropsOptions<import('../..').SelectFieldDownshiftItem> & Options) => Omit<import('downshift').Overwrite<import('downshift').UseSelectGetItemPropsReturnValue, Options>, "item" | "index">;
+    getItemProps: <Options>(options: import('downshift').UseSelectGetItemPropsOptions<SelectItem> & Options) => Omit<import('downshift').Overwrite<import('downshift').UseSelectGetItemPropsReturnValue, Options>, "item" | "index">;
     highlightedIndex: number;
     isOpen: boolean;
-    downshiftItems: import('../..').SelectFieldDownshiftItem[];
-    sectionsMeta: import('../../SelectField/internal/types').SectionMeta[];
+    items: SelectItem[];
+    sectionsMeta: import('../../SelectField/internal/useCombo').SectionMeta[];
     closeMenu: () => void;
     openMenu: () => void;
     toggleMenu: () => void;

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

@@ -1,10 +1,10 @@
 import { AriaAttributes, CSSProperties, ReactElement, ReactNode } from 'react';
 import { CheckState, LayoutUtilProps, Size } from '../../../types';
-import { SelectFieldDownshiftItem, SelectFieldGroupByValue, SelectFieldOption } from '../SelectField/types';
+import { SelectFieldGroupByValue, SelectFieldOption } from '../SelectField/types';
 /**
  * Configuration options for the MultiSelectField cache.
  * @property enabled - Whether caching is enabled. Defaults to true.
- * @property maxSize - Maximum number of cached entries before clearing the cache. Defaults to 50.
+ * @property maxSize - Maximum number of cached entries before clearing the cache. Defaults to 15.
  */
 export type MultiSelectFieldCacheOptions = {
     enabled?: boolean;
@@ -360,5 +360,4 @@ export type MultiSelectFieldPropsEager = MultiSelectFieldCommonProps & {
 } & MultiSelectFieldGroupingProps;
 export type MultiSelectFieldPropsLazy = MultiSelectFieldPropsLazyPage | MultiSelectFieldPropsLazyOffset | MultiSelectFieldPropsLazyGroup;
 export type MultiSelectFieldProps = MultiSelectFieldPropsLazy | MultiSelectFieldPropsEager;
-export type MultiSelectFieldDownshiftItem = SelectFieldDownshiftItem;
 export {};

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

@@ -0,0 +1,30 @@
+import { MultiSelectMenuHandle, MultiSelectMenuProps } from './types';
+/**
+ * MultiSelectMenu component for selecting multiple options from a dropdown triggered by any element.
+ *
+ * Features:
+ * - Attaches to any trigger element via a render prop
+ * - Multiple selection with checkbox indicators
+ * - Optional search input rendered inside the popover/dialog
+ * - Lazy loading with pagination (page, offset, or group modes)
+ * - Optional "Select All" functionality
+ * - Optional "Select Filtered" functionality
+ * - Pinned options support
+ * - Grouped options support
+ * - Supports both popover and dialog display modes
+ * - Adaptive display based on device (mobile uses dialog)
+ * - Cache support for loadOptions results
+ * - Full accessibility support with ARIA attributes
+ * - Controlled selection state
+ * - Configurable popover width
+ *
+ * @example
+ * <MultiSelectMenu
+ *   trigger={(props) => <Button {...props}>Select books</Button>}
+ *   label="Books"
+ *   value={selectedOptions}
+ *   onSelectedOptionsChange={setSelectedOptions}
+ *   loadOptions={loadOptions}
+ * />
+ */
+export declare const MultiSelectMenu: import('react').ForwardRefExoticComponent<MultiSelectMenuProps & import('react').RefAttributes<MultiSelectMenuHandle>>;

package/dist/beta/components/MultiSelectMenu/MultiSelectMenuSync.d.ts

@@ -0,0 +1,54 @@
+import { MatchSorterOptions } from 'match-sorter';
+import { MultiSelectMenuProps, MultiSelectMenuOption } from './types';
+import { SyncFilterFn } from '../../../internal/functions/syncFilterUtils';
+export type MultiSelectMenuSyncProps = Omit<MultiSelectMenuProps, "loadOptions" | "lazy" | "debounceMs" | "cache" | "initialLoad" | "selectAll" | "selectFiltered"> & {
+    /**
+     * The options to display in the multi-select menu.
+     */
+    options: MultiSelectMenuOption[];
+    /**
+     * Controls how options are filtered and sorted when the user types a search value.
+     * Can be a function that returns options in the desired display order,
+     * or a MatchSorterOptions object to customize the default match-sorter behavior.
+     *
+     * By default, options are filtered by `label` and `searchText` using match-sorter.
+     */
+    filter?: SyncFilterFn<MultiSelectMenuOption> | MatchSorterOptions<MultiSelectMenuOption>;
+    /**
+     * Enables the "Select All" option at the top of the list.
+     * Can be a boolean to enable with default label, or an object to customize the label.
+     * Click handling and check state are managed automatically.
+     */
+    selectAll?: boolean | {
+        label?: string | ((checked: boolean) => string);
+    };
+    /**
+     * Enables the "Select Filtered" option when a search term is active.
+     * Can be a boolean to enable with default label, or a function returning a config with a custom label.
+     * Click handling and check state are managed automatically.
+     */
+    selectFiltered?: boolean | ((searchValue: string) => {
+        label?: string;
+    });
+};
+/**
+ * MultiSelectMenuSync is a simplified version of MultiSelectMenu for client-side option sets.
+ *
+ * Features:
+ * - Accepts `options` instead of `loadOptions` and `lazy`
+ * - Performs client-side filtering of the options
+ * - Simplified `selectAll` prop that automatically handles click and check state
+ * - Simplified `selectFiltered` prop that automatically selects/deselects filtered options
+ * - Supports all other props of MultiSelectMenu
+ *
+ * @example
+ * <MultiSelectMenuSync
+ *   trigger={(props) => <Button {...props}>Pick books</Button>}
+ *   label="Books"
+ *   options={bookOptions}
+ *   value={selectedOptions}
+ *   onSelectedOptionsChange={setSelectedOptions}
+ *   selectAll
+ * />
+ */
+export declare const MultiSelectMenuSync: (props: MultiSelectMenuSyncProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+export * from './MultiSelectMenu';
+export * from './MultiSelectMenuSync';
+export * from './types';

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

@@ -0,0 +1,170 @@
+import { KeyboardEvent, ReactElement, RefObject } from 'react';
+import { CheckState } from '../../../types';
+import { SelectFieldGroupByValue, SelectFieldOption } from '../SelectField/types';
+import { MultiSelectFieldCacheOptions, MultiSelectFieldEagerLoader, MultiSelectFieldGroupLazyLoader, MultiSelectFieldOffsetLazyLoader, MultiSelectFieldPageLazyLoader, MultiSelectFieldPinnedOptions, MultiSelectFieldSearchProps } from '../MultiSelectField/types';
+export type MultiSelectMenuOption = SelectFieldOption;
+export type MultiSelectMenuGroupByValue = SelectFieldGroupByValue;
+/**
+ * Configuration options for the MultiSelectMenu cache.
+ * @property enabled - Whether caching is enabled. Defaults to true.
+ * @property maxSize - Maximum number of cached entries before clearing the cache. Defaults to 15.
+ */
+export type MultiSelectMenuCacheOptions = MultiSelectFieldCacheOptions;
+/**
+ * Imperative handle for the MultiSelectMenu component.
+ * @property clearCache - Clears the options cache.
+ * @property invalidate - Clears the cache and triggers a fresh options load from the data source.
+ */
+export type MultiSelectMenuHandle = {
+    clearCache: () => void;
+    invalidate: () => void;
+};
+export type MultiSelectMenuEagerLoader = MultiSelectFieldEagerLoader;
+export type MultiSelectMenuPageLazyLoader = MultiSelectFieldPageLazyLoader;
+export type MultiSelectMenuOffsetLazyLoader = MultiSelectFieldOffsetLazyLoader;
+export type MultiSelectMenuGroupLazyLoader = MultiSelectFieldGroupLazyLoader;
+export type MultiSelectMenuPinnedOptions = MultiSelectFieldPinnedOptions;
+export type MultiSelectMenuSearchProps = MultiSelectFieldSearchProps;
+/**
+ * Props provided to the trigger render function.
+ * @property ref - Ref to attach to the trigger element for positioning
+ * @property onClick - Click handler to toggle the menu
+ * @property onKeyDown - Key handler for keyboard navigation
+ * @property aria-haspopup - ARIA attribute indicating the trigger opens a listbox
+ * @property aria-controls - ARIA attribute linking to the menu element
+ * @property aria-expanded - ARIA attribute indicating whether the menu is open
+ * @property data-state - Data attribute indicating the open/close state
+ */
+export type MultiSelectMenuTriggerProps = {
+    ref: RefObject<HTMLButtonElement>;
+    onClick: () => void;
+    onKeyDown: (e: KeyboardEvent<HTMLButtonElement>) => void;
+    "aria-haspopup": "listbox";
+    "aria-controls": string;
+    "aria-expanded": boolean;
+    "data-state": "open" | "close";
+};
+type MultiSelectMenuCommonProps = {
+    /**
+     * The id of the multi-select menu.
+     */
+    id?: string;
+    /**
+     * Render function that receives trigger props and returns the element that opens the menu.
+     */
+    trigger: (props: MultiSelectMenuTriggerProps) => ReactElement;
+    /**
+     * Accessible label for the menu. Used by screen readers but not rendered visually.
+     */
+    label: string;
+    /**
+     * Placeholder text shown in the search input inside the menu.
+     */
+    searchPlaceholder?: string;
+    /**
+     * The selected options. Must be controlled state.
+     */
+    value: MultiSelectMenuOption[];
+    /**
+     * Callback fired when the selected options change.
+     * @param options - The new array of selected options.
+     */
+    onSelectedOptionsChange: (options: MultiSelectMenuOption[]) => void;
+    /**
+     * Defines the initial loading behavior of the options.
+     * @default "auto"
+     */
+    initialLoad?: "auto" | "immediate" | "open";
+    /**
+     * Options to pin to the top of the list.
+     */
+    pinned?: MultiSelectMenuPinnedOptions;
+    /**
+     * Configuration for caching loadOptions results.
+     * Caching is enabled by default. Set `{ enabled: false }` to disable.
+     */
+    cache?: MultiSelectMenuCacheOptions;
+    /**
+     * Controls how the menu is displayed.
+     * @default "auto"
+     * @description "auto" uses a popover on desktop and a dialog on mobile.
+     * @description "popover" always uses a popover.
+     * @description "dialog" always uses a dialog.
+     */
+    displayMenuAs?: "auto" | "popover" | "dialog";
+    /**
+     * Whether to virtualize the list using windowed rendering.
+     * @default false
+     */
+    virtualize?: boolean;
+    /**
+     * Whether to disable the search input inside the menu.
+     * @default false
+     */
+    disableSearch?: boolean;
+    /**
+     * Configuration for the "Select All" option at the top of the list.
+     * Shown when the search input is empty.
+     */
+    selectAll?: {
+        label?: string;
+        onClick: () => void;
+        checkState: boolean | CheckState;
+    };
+    /**
+     * Function that receives the current search value and returns configuration for
+     * the "Select Filtered" option at the top of the list.
+     * Shown when a search term is active (instead of Select All).
+     */
+    selectFiltered?: (searchValue: string) => {
+        label?: string;
+        onClick: () => void;
+        checkState: boolean | CheckState;
+    };
+    /**
+     * Width of the popover. Only applies when `displayMenuAs="popover"` (or when the adaptive mode resolves to popover). Has no effect in dialog mode.
+     * Accepts a CSS width value or "reference" to match the trigger element's width.
+     * @default 320
+     */
+    popoverWidth?: "reference" | number | string;
+} & MultiSelectMenuSearchProps;
+type MultiSelectMenuGroupingProps = {
+    /**
+     * Function to convert a group value to a display label.
+     */
+    groupToString?: (groupValue: MultiSelectMenuGroupByValue) => string;
+    /**
+     * Custom comparator function to sort groups.
+     */
+    groupSorter?: (a: MultiSelectMenuGroupByValue, b: MultiSelectMenuGroupByValue) => number;
+};
+type MultiSelectMenuNonGroupingProps = {
+    groupToString?: never;
+    groupSorter?: never;
+};
+export type MultiSelectMenuPropsLazyPage = MultiSelectMenuCommonProps & {
+    lazy: "page";
+    lazyOptions?: {
+        pageSize?: number;
+    };
+    loadOptions: MultiSelectMenuPageLazyLoader;
+} & MultiSelectMenuNonGroupingProps;
+export type MultiSelectMenuPropsLazyOffset = MultiSelectMenuCommonProps & {
+    lazy: "offset";
+    lazyOptions?: {
+        limit?: number;
+    };
+    loadOptions: MultiSelectMenuOffsetLazyLoader;
+} & MultiSelectMenuNonGroupingProps;
+export type MultiSelectMenuPropsLazyGroup = MultiSelectMenuCommonProps & {
+    lazy: "group";
+    lazyOptions?: object;
+    loadOptions: MultiSelectMenuGroupLazyLoader;
+} & MultiSelectMenuGroupingProps;
+export type MultiSelectMenuPropsEager = MultiSelectMenuCommonProps & {
+    lazy?: false;
+    loadOptions: MultiSelectMenuEagerLoader;
+} & MultiSelectMenuGroupingProps;
+export type MultiSelectMenuPropsLazy = MultiSelectMenuPropsLazyPage | MultiSelectMenuPropsLazyOffset | MultiSelectMenuPropsLazyGroup;
+export type MultiSelectMenuProps = MultiSelectMenuPropsLazy | MultiSelectMenuPropsEager;
+export {};

package/dist/beta/components/SelectField/SelectFieldSync.d.ts

@@ -1,6 +1,6 @@
 import { MatchSorterOptions } from 'match-sorter';
 import { SelectFieldProps, SelectFieldOption, SelectFieldGroupByValue } from './types';
-type FilterFn = (options: SelectFieldOption[], searchValue: string) => SelectFieldOption[];
+import { SyncFilterFn } from '../../../internal/functions/syncFilterUtils';
 export type SelectFieldSyncProps = Omit<SelectFieldProps, "loadOptions" | "lazy" | "debounceMs" | "cache" | "initialLoad"> & {
     /**
      * The options to display in the select field.
@@ -31,7 +31,7 @@ export type SelectFieldSyncProps = Omit<SelectFieldProps, "loadOptions" | "lazy"
      *   filter={{ keys: ["label"] }}
      * />
      */
-    filter?: FilterFn | MatchSorterOptions<SelectFieldOption>;
+    filter?: SyncFilterFn | MatchSorterOptions<SelectFieldOption>;
     /**
      * Function to compare two group values for sorting.
      * When provided, options are sorted by group using this comparator,
@@ -53,4 +53,3 @@ export type SelectFieldSyncProps = Omit<SelectFieldProps, "loadOptions" | "lazy"
  * - Supports all the other props of SelectField.
  */
 export declare const SelectFieldSync: (props: SelectFieldSyncProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/beta/components/SelectField/internal/SelectFieldComboboxMode.d.ts

@@ -1,4 +1,4 @@
-import { SelectFieldComboboxInternalProps } from './types';
+import { SelectFieldComboboxInternalProps } from '../../../../internal/types/selectFieldInternalTypes';
 /**
  * Combobox mode: searchable select using useCombobox.
  * This is the default behavior when disableSearch is false.

package/dist/beta/components/SelectField/internal/SelectFieldSelectMode.d.ts

@@ -1,4 +1,4 @@
-import { SelectFieldBaseInternalProps } from './types';
+import { SelectFieldBaseInternalProps } from '../../../../internal/types/selectFieldInternalTypes';
 /**
  * Select mode: non-searchable select using useSelect.
  * Active when disableSearch is true.

package/dist/beta/components/SelectField/internal/useCombo.d.ts

@@ -1,6 +1,6 @@
 import { UseComboboxProps } from 'downshift';
-import { SelectFieldDownshiftItem, SelectFieldGroupByValue, SelectFieldOption, SelectFieldPinnedOptions } from '../types';
-import { SectionMeta } from './types';
+import { SelectFieldGroupByValue, SelectFieldOption, SelectFieldPinnedOptions } from '../types';
+import { SectionMeta, SelectItem } from '../../../../internal/types/selectFieldInternalTypes';
 export type { SectionMeta };
 export type UseComboOptions = {
     options: SelectFieldOption[];
@@ -13,22 +13,22 @@ export type UseComboOptions = {
     disableHighlightOnOpen?: boolean;
     disabled: boolean;
     virtualize?: boolean;
-} & Pick<UseComboboxProps<SelectFieldDownshiftItem>, "onInputValueChange" | "onIsOpenChange">;
+    onScrollToHighlight?: (index: number) => void;
+} & Pick<UseComboboxProps<SelectItem>, "onInputValueChange" | "onIsOpenChange">;
 /**
  * The purpose of useCombo is to provide an abstraction over the downshift combobox hook.
  */
-export declare const useCombo: ({ options, pinned, groupToString, groupSorter, selectedOption, onSelectedOptionChange, onInputValueChange, onIsOpenChange, displayAs, disableHighlightOnOpen, disabled, virtualize, }: UseComboOptions) => {
+export declare const useCombo: ({ options, pinned, groupToString, groupSorter, selectedOption, onSelectedOptionChange, onInputValueChange, onIsOpenChange, displayAs, disableHighlightOnOpen, disabled, virtualize, onScrollToHighlight, }: UseComboOptions) => {
     inputValue: string;
     wrapperDivRef: import('react').RefObject<HTMLDivElement>;
     getToggleButtonProps: <Options>(options?: import('downshift').UseComboboxGetToggleButtonPropsOptions & Options) => import('downshift').Overwrite<import('downshift').UseComboboxGetToggleButtonPropsReturnValue, Options>;
     getLabelProps: <Options>(options?: import('downshift').UseComboboxGetLabelPropsOptions & Options) => import('downshift').Overwrite<import('downshift').UseComboboxGetLabelPropsReturnValue, Options>;
     getMenuProps: <Options>(options?: import('downshift').UseComboboxGetMenuPropsOptions & Options, otherOptions?: import('downshift').GetPropsCommonOptions) => import('downshift').Overwrite<import('downshift').UseComboboxGetMenuPropsReturnValue, Options>;
     getInputProps: <Options>(options?: import('downshift').UseComboboxGetInputPropsOptions & Options, otherOptions?: import('downshift').GetPropsCommonOptions) => import('downshift').Overwrite<import('downshift').UseComboboxGetInputPropsReturnValue, Options>;
-    getItemProps: <Options>(options: import('downshift').UseComboboxGetItemPropsOptions<SelectFieldDownshiftItem> & Options) => Omit<import('downshift').Overwrite<import('downshift').UseComboboxGetItemPropsReturnValue, Options>, "item" | "index">;
+    getItemProps: <Options>(options: import('downshift').UseComboboxGetItemPropsOptions<SelectItem> & Options) => Omit<import('downshift').Overwrite<import('downshift').UseComboboxGetItemPropsReturnValue, Options>, "item" | "index">;
     highlightedIndex: number;
-    highlightChangeTypeRef: import('react').MutableRefObject<string>;
     isOpen: boolean;
-    downshiftItems: SelectFieldDownshiftItem[];
+    items: SelectItem[];
     sectionsMeta: SectionMeta[];
     closeMenu: () => void;
     openMenu: () => void;

package/dist/beta/components/SelectField/internal/useSelectMode.d.ts

@@ -1,4 +1,5 @@
-import { SelectFieldDownshiftItem, SelectFieldGroupByValue, SelectFieldOption, SelectFieldPinnedOptions } from '../types';
+import { SelectFieldGroupByValue, SelectFieldOption, SelectFieldPinnedOptions } from '../types';
+import { SelectItem } from '../../../../internal/types/selectFieldInternalTypes';
 export type UseSelectModeOptions = {
     options: SelectFieldOption[];
     pinned?: SelectFieldPinnedOptions;
@@ -13,22 +14,22 @@ export type UseSelectModeOptions = {
     disableHighlightOnOpen?: boolean;
     disabled: boolean;
     virtualize?: boolean;
+    onScrollToHighlight?: (index: number) => void;
 };
 /**
  * Wraps downshift's useSelect for non-searchable select fields.
  * Returns a compatible interface to useCombo (minus getInputProps/inputValue).
  */
-export declare const useSelectMode: ({ options, pinned, groupToString, groupSorter, selectedOption, onSelectedOptionChange, onIsOpenChange, displayAs, disableHighlightOnOpen, disabled, virtualize, }: UseSelectModeOptions) => {
+export declare const useSelectMode: ({ options, pinned, groupToString, groupSorter, selectedOption, onSelectedOptionChange, onIsOpenChange, displayAs, disableHighlightOnOpen, disabled, virtualize, onScrollToHighlight, }: UseSelectModeOptions) => {
     wrapperDivRef: import('react').RefObject<HTMLDivElement>;
     getToggleButtonProps: <Options>(options?: import('downshift').UseSelectGetToggleButtonPropsOptions & Options, otherOptions?: import('downshift').GetPropsCommonOptions) => import('downshift').Overwrite<import('downshift').UseSelectGetToggleButtonReturnValue, Options>;
     getLabelProps: <Options>(options?: import('downshift').UseSelectGetLabelPropsOptions & Options) => import('downshift').Overwrite<import('downshift').UseSelectGetLabelPropsReturnValue, Options>;
     getMenuProps: <Options>(options?: import('downshift').UseSelectGetMenuPropsOptions & Options, otherOptions?: import('downshift').GetPropsCommonOptions) => import('downshift').Overwrite<import('downshift').UseSelectGetMenuReturnValue, Options>;
-    getItemProps: <Options>(options: import('downshift').UseSelectGetItemPropsOptions<SelectFieldDownshiftItem> & Options) => Omit<import('downshift').Overwrite<import('downshift').UseSelectGetItemPropsReturnValue, Options>, "item" | "index">;
+    getItemProps: <Options>(options: import('downshift').UseSelectGetItemPropsOptions<SelectItem> & Options) => Omit<import('downshift').Overwrite<import('downshift').UseSelectGetItemPropsReturnValue, Options>, "item" | "index">;
     highlightedIndex: number;
-    highlightChangeTypeRef: import('react').MutableRefObject<string>;
     isOpen: boolean;
-    downshiftItems: SelectFieldDownshiftItem[];
-    sectionsMeta: import('./types').SectionMeta[];
+    items: SelectItem[];
+    sectionsMeta: import('./useCombo').SectionMeta[];
     closeMenu: () => void;
     openMenu: () => void;
 };

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

@@ -1,10 +1,10 @@
 import { AriaAttributes, CSSProperties, ReactElement, ReactNode } from 'react';
-import { CheckState, LayoutUtilProps, Size } from '../../../types';
+import { LayoutUtilProps, Size } from '../../../types';
 import { AvatarProps, ChipProps, IconProps } from '../../..';
 /**
  * Configuration options for the SelectField cache.
  * @property enabled - Whether caching is enabled. Defaults to true.
- * @property maxSize - Maximum number of cached entries before clearing the cache. Defaults to 50.
+ * @property maxSize - Maximum number of cached entries before clearing the cache. Defaults to 15.
  */
 export type SelectFieldCacheOptions = {
     enabled?: boolean;
@@ -331,11 +331,4 @@ export type SelectFieldPropsEager = SelectFieldCommonSelectFieldProps & {
 } & SelectFieldGroupingProps;
 export type SelectFieldPropsLazy = SelectFieldPropsLazyPage | SelectFieldPropsLazyOffset | SelectFieldPropsLazyGroup;
 export type SelectFieldProps = SelectFieldPropsLazy | SelectFieldPropsEager;
-export type SelectFieldDownshiftItem = {
-    id: string | number;
-    type: "option" | "pinned-option" | "grouped-option" | "select-all" | "select-filtered";
-    original: SelectFieldOption;
-    disabled?: boolean;
-    checkState?: CheckState;
-};
 export {};

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

@@ -0,0 +1,27 @@
+import { SelectMenuHandle, SelectMenuProps } from './types';
+/**
+ * SelectMenu component for selecting a single option from a dropdown triggered by any element.
+ *
+ * Features:
+ * - Attaches to any trigger element via a render prop
+ * - Optional search input rendered inside the popover/dialog
+ * - Lazy loading with pagination (page, offset, or group modes)
+ * - Pinned options support
+ * - Grouped options support
+ * - Supports both popover and dialog display modes
+ * - Adaptive display based on device (mobile uses dialog)
+ * - Cache support for loadOptions results
+ * - Full accessibility support with ARIA attributes
+ * - Controlled selection state
+ * - Configurable popover width
+ *
+ * @example
+ * <SelectMenu
+ *   trigger={(props) => <Button {...props}>Select a book</Button>}
+ *   label="Books"
+ *   value={selectedOption}
+ *   onSelectedOptionChange={setSelectedOption}
+ *   loadOptions={loadOptions}
+ * />
+ */
+export declare const SelectMenu: import('react').ForwardRefExoticComponent<SelectMenuProps & import('react').RefAttributes<SelectMenuHandle>>;

package/dist/beta/components/SelectMenu/SelectMenuSync.d.ts

@@ -0,0 +1,41 @@
+import { MatchSorterOptions } from 'match-sorter';
+import { SelectMenuProps, SelectMenuOption, SelectMenuGroupByValue } from './types';
+import { SyncFilterFn } from '../../../internal/functions/syncFilterUtils';
+export type SelectMenuSyncProps = Omit<SelectMenuProps, "loadOptions" | "lazy" | "debounceMs" | "cache" | "initialLoad"> & {
+    /**
+     * The options to display in the select menu.
+     */
+    options: SelectMenuOption[];
+    /**
+     * Controls how options are filtered and sorted when the user types a search value.
+     * Can be a function that returns options in the desired display order,
+     * or a MatchSorterOptions object to customize the default match-sorter behavior.
+     *
+     * By default, options are filtered by `label` and `searchText` using match-sorter.
+     */
+    filter?: SyncFilterFn | MatchSorterOptions<SelectMenuOption>;
+    /**
+     * Custom comparator function to sort groups.
+     */
+    groupSorter?: (a: SelectMenuGroupByValue, b: SelectMenuGroupByValue) => number;
+};
+/**
+ * SelectMenuSync is a simplified version of SelectMenu for client-side option sets.
+ *
+ * Features:
+ * - Accepts `options` instead of `loadOptions` and `lazy`
+ * - Performs client-side filtering of the options
+ * - Optionally accepts a custom filter function or MatchSorterOptions
+ * - Supports grouping with optional group sorting via `groupSorter`
+ * - Supports all other props of SelectMenu
+ *
+ * @example
+ * <SelectMenuSync
+ *   trigger={(props) => <Button {...props}>Pick a book</Button>}
+ *   label="Books"
+ *   options={bookOptions}
+ *   value={selectedOption}
+ *   onSelectedOptionChange={setSelectedOption}
+ * />
+ */
+export declare const SelectMenuSync: (props: SelectMenuSyncProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+export * from './SelectMenu';
+export * from './SelectMenuSync';
+export * from './types';

package/dist/beta/components/SelectMenu/internal/useMenuInteraction.d.ts

@@ -0,0 +1,72 @@
+import { CSSProperties, KeyboardEvent, RefObject } from 'react';
+import { SelectItem, SectionMeta } from '../../../../internal/types/selectFieldInternalTypes';
+import { OptionsPanelHandle } from '../../../../internal/components/OptionsPanel';
+export type UseMenuInteractionConfig = {
+    items: SelectItem[];
+    sectionsMeta: SectionMeta[];
+    onItemActivate: (item: SelectItem) => void;
+    selectedItemIds: Set<string | number>;
+    displayAs: "popover" | "dialog";
+    closeOnActivate: boolean;
+    disabled?: boolean;
+    id: string;
+    triggerRef: RefObject<HTMLButtonElement>;
+    label: string;
+};
+export type MenuTriggerProps = {
+    ref: RefObject<HTMLButtonElement>;
+    onClick: () => void;
+    onKeyDown: (e: KeyboardEvent) => void;
+    "aria-haspopup": "listbox";
+    "aria-controls": string;
+    "aria-expanded": boolean;
+    "data-state": "open" | "close";
+};
+type MenuPropsArg = {
+    className?: string;
+    style?: CSSProperties;
+};
+type MenuReturnProps = MenuPropsArg & {
+    role: "listbox";
+    id: string;
+    "aria-label": string;
+    "aria-labelledby"?: string;
+    tabIndex?: number;
+    "aria-activedescendant"?: string;
+    ref: RefObject<HTMLDivElement>;
+    onKeyDown: (e: KeyboardEvent) => void;
+};
+type ItemPropsArg = {
+    item: SelectItem;
+    index: number;
+    className?: string;
+    "data-type"?: string;
+};
+type ItemReturnProps = {
+    role: "option";
+    id: string;
+    "aria-selected": boolean;
+    "aria-disabled"?: boolean;
+    onClick: () => void;
+    onMouseMove: () => void;
+    className?: string;
+    "data-type"?: string;
+};
+export type GetMenuPropsFn = (opts?: MenuPropsArg) => MenuReturnProps;
+export type GetItemPropsFn = (opts: ItemPropsArg) => ItemReturnProps;
+export declare const useMenuInteraction: ({ items, sectionsMeta: _sectionsMeta, onItemActivate, selectedItemIds, displayAs: _displayAs, closeOnActivate, disabled, id, triggerRef, label, }: UseMenuInteractionConfig) => {
+    isOpen: boolean;
+    openMenu: () => void;
+    closeMenu: (options?: {
+        restoreFocus?: boolean;
+    }) => void;
+    highlightedIndex: number;
+    setHighlightedIndex: import('react').Dispatch<import('react').SetStateAction<number>>;
+    getTriggerProps: () => MenuTriggerProps;
+    getMenuProps: GetMenuPropsFn;
+    getItemProps: GetItemPropsFn;
+    listRef: RefObject<OptionsPanelHandle>;
+    menuContainerRef: RefObject<HTMLDivElement>;
+    handleKeyDown: (e: KeyboardEvent) => void;
+};
+export {};