@servicetitan/anvil2 3.10.0 → 3.11.0

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

@@ -1,4 +1,4 @@
-import { PaginationProps } from '../../../../..';
+import { PaginationProps } from '../../../../../components/Pagination';
 type DataTableCursorPaginationProps = Pick<PaginationProps, "page" | "itemsPerPage" | "onPageChange" | "onItemsPerPageChange" | "itemsPerPageOptions"> & {
     hasNextPage?: boolean;
     hasPrevPage?: boolean;

package/dist/src/beta/components/deprecatedReexports/MultiSelectField.d.ts

@@ -1,14 +1,15 @@
-import { MultiSelectFieldSyncProps as StableMultiSelectFieldSyncProps } from '../../../components/MultiSelectField';
+import { MultiSelectFieldProps as StableMultiSelectFieldProps, MultiSelectFieldHandle as StableMultiSelectFieldHandleProps, MultiSelectFieldSyncProps as StableMultiSelectFieldSyncProps } from '../../../components/MultiSelectField';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /**
  * @deprecated Import `MultiSelectField` from `@servicetitan/anvil2` instead. The beta export will be removed in Anvil2 4.0.
  * @see {@link https://anvil.servicetitan.com/docs/web/components/multi-select-field/beta-changes/stable-promotion Migration guide}
  */
-export declare const MultiSelectField: import('react').ForwardRefExoticComponent<import('./MultiSelectField').MultiSelectFieldProps & import('react').RefAttributes<import('./MultiSelectField').MultiSelectFieldHandle>>;
+export declare const MultiSelectField: ForwardRefExoticComponent<StableMultiSelectFieldProps & RefAttributes<StableMultiSelectFieldHandleProps>>;
 /**
  * @deprecated Import `MultiSelectFieldSync` from `@servicetitan/anvil2` instead. The beta export will be removed in Anvil2 4.0.
  * @see {@link https://anvil.servicetitan.com/docs/web/components/multi-select-field/beta-changes/stable-promotion Migration guide}
  */
-export declare const MultiSelectFieldSync: (props: StableMultiSelectFieldSyncProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelectFieldSync: <TID extends string | number>(props: StableMultiSelectFieldSyncProps<TID>) => import("react/jsx-runtime").JSX.Element;
 /**
  * @deprecated Import `MultiSelectFieldSyncProps` from `@servicetitan/anvil2` instead. The beta export will be removed in Anvil2 4.0.
  * @see {@link https://anvil.servicetitan.com/docs/web/components/multi-select-field/beta-changes/stable-promotion Migration guide}

package/dist/src/beta/components/deprecatedReexports/SelectField.d.ts

@@ -1,14 +1,15 @@
-import { SelectFieldSyncProps as StableSelectFieldSyncProps } from '../../../components/SelectField';
+import { SelectFieldProps as StableSelectFieldProps, SelectFieldHandle as StableSelectFieldHandleProps, SelectFieldSyncProps as StableSelectFieldSyncProps } from '../../../components/SelectField';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /**
  * @deprecated Import `SelectField` from `@servicetitan/anvil2` instead. The beta export will be removed in Anvil2 4.0.
  * @see {@link https://anvil.servicetitan.com/docs/web/components/select-field/beta-changes/stable-promotion Migration guide}
  */
-export declare const SelectField: import('react').ForwardRefExoticComponent<import('./SelectField').SelectFieldProps & import('react').RefAttributes<import('./SelectField').SelectFieldHandle>>;
+export declare const SelectField: ForwardRefExoticComponent<StableSelectFieldProps & RefAttributes<StableSelectFieldHandleProps>>;
 /**
  * @deprecated Import `SelectFieldSync` from `@servicetitan/anvil2` instead. The beta export will be removed in Anvil2 4.0.
  * @see {@link https://anvil.servicetitan.com/docs/web/components/select-field/beta-changes/stable-promotion Migration guide}
  */
-export declare const SelectFieldSync: (props: StableSelectFieldSyncProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectFieldSync: <TID extends string | number>(props: StableSelectFieldSyncProps<TID>) => import("react/jsx-runtime").JSX.Element;
 /**
  * @deprecated Import `SelectFieldSyncProps` from `@servicetitan/anvil2` instead. The beta export will be removed in Anvil2 4.0.
  * @see {@link https://anvil.servicetitan.com/docs/web/components/select-field/beta-changes/stable-promotion Migration guide}

package/dist/src/components/MultiSelectField/MultiSelectField.d.ts

@@ -1,4 +1,5 @@
 import { MultiSelectFieldHandle, MultiSelectFieldProps } from './types';
+import { ForwardedRef, ReactNode } from 'react';
 /**
  * MultiSelectField component: a form field for selecting multiple options at once from a searchable dropdown, showing the chosen values as tags or chips.
  *
@@ -18,4 +19,6 @@ import { MultiSelectFieldHandle, MultiSelectFieldProps } from './types';
  * - Controlled selection state
  * - Optional "Add new item" affordance below the option list with consumer-owned dialog
  */
-export declare const MultiSelectField: import('react').ForwardRefExoticComponent<MultiSelectFieldProps & import('react').RefAttributes<MultiSelectFieldHandle>>;
+export declare const MultiSelectField: <TID extends string | number = string | number>(propsWithLayout: MultiSelectFieldProps<TID> & {
+    ref?: ForwardedRef<MultiSelectFieldHandle>;
+}) => ReactNode;

package/dist/src/components/MultiSelectField/MultiSelectFieldSync.d.ts

@@ -1,11 +1,11 @@
 import { MatchSorterOptions } from 'match-sorter';
 import { MultiSelectFieldProps, MultiSelectFieldOption } from './types';
 import { SyncFilterFn } from '../../internal/functions/syncFilterUtils';
-export type MultiSelectFieldSyncProps = Omit<MultiSelectFieldProps, "loadOptions" | "lazy" | "debounceMs" | "cache" | "initialLoad" | "selectAll" | "selectFiltered"> & {
+export type MultiSelectFieldSyncProps<TID extends string | number = string | number> = Omit<MultiSelectFieldProps<TID>, "loadOptions" | "lazy" | "debounceMs" | "cache" | "initialLoad" | "selectAll" | "selectFiltered"> & {
     /**
      * The options to display in the multi-select field.
      */
-    options: MultiSelectFieldOption[];
+    options: MultiSelectFieldOption<TID>[];
     /**
      * 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,
@@ -31,7 +31,7 @@ export type MultiSelectFieldSyncProps = Omit<MultiSelectFieldProps, "loadOptions
      *   filter={{ keys: ["label"] }}
      * />
      */
-    filter?: SyncFilterFn<MultiSelectFieldOption> | MatchSorterOptions<MultiSelectFieldOption>;
+    filter?: SyncFilterFn<TID, MultiSelectFieldOption<TID>> | MatchSorterOptions<MultiSelectFieldOption<TID>>;
     /**
      * 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.
@@ -98,4 +98,4 @@ export type MultiSelectFieldSyncProps = Omit<MultiSelectFieldProps, "loadOptions
  * - Simplified `selectFiltered` prop that automatically selects/deselects filtered options.
  * - Supports all the other props of MultiSelectField.
  */
-export declare const MultiSelectFieldSync: (props: MultiSelectFieldSyncProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelectFieldSync: <TID extends string | number>(props: MultiSelectFieldSyncProps<TID>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/MultiSelectField/internal/MultiSelectFieldComboboxMode.d.ts

@@ -2,4 +2,4 @@ import { MultiSelectFieldComboboxInternalProps } from './types';
 /**
  * Combobox mode: searchable multi-select using useCombobox.
  */
-export declare const MultiSelectFieldComboboxMode: ({ labelAiMark, id, helperUid, selectedOptions, onSelectedOptionsChange, displayAs, isDisabledOrReadOnly, disabled, readOnly, isHighlighted, required, placeholder, size, error, hasHelperText, disableClearButton, prefix, suffix, label, hideLabel, hint, moreInfo, moreInfoId, errorMessages, warning, description, className, style, layoutStyles, pinned, groupToString, groupSorter, virtualize, options, loading, loadingMore, hasMore, loadOptions, loadMore, initialLoad, initialLoadPerformed, setInitialLoadPerformed, inputWrapperRef, debounceMs, selectAll, selectFiltered, bulkPending, onBulkActivate, singleRow, maxChips, getChipProps, onSearchChange, addItemLabel, onAddNewItem, handleRemoveOption, handleClear, dataAttributes, }: MultiSelectFieldComboboxInternalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelectFieldComboboxMode: <TID extends string | number>({ labelAiMark, id, helperUid, selectedOptions, onSelectedOptionsChange, displayAs, isDisabledOrReadOnly, disabled, readOnly, isHighlighted, required, placeholder, size, error, hasHelperText, disableClearButton, prefix, suffix, label, hideLabel, hint, moreInfo, moreInfoId, errorMessages, warning, description, className, style, layoutStyles, pinned, groupToString, groupSorter, virtualize, options, loading, loadingMore, hasMore, loadOptions, loadMore, initialLoad, initialLoadPerformed, setInitialLoadPerformed, inputWrapperRef, debounceMs, selectAll, selectFiltered, bulkPending, onBulkActivate, singleRow, maxChips, getChipProps, onSearchChange, addItemLabel, onAddNewItem, handleRemoveOption, handleClear, dataAttributes, }: MultiSelectFieldComboboxInternalProps<TID>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/MultiSelectField/internal/MultiSelectFieldInput.d.ts

@@ -24,7 +24,7 @@ import { MultiSelectFieldChipProps, MultiSelectFieldOption } from '../types';
  * @property {boolean} [singleRow] - When true, restricts the field to a single row height
  * @property {number} [maxChips] - Maximum number of chips to display before showing +N indicator (default: 10)
  */
-export type MultiSelectFieldInputProps = {
+export type MultiSelectFieldInputProps<TID extends string | number> = {
     placeholder?: string;
     size?: Extract<Size, "small" | "medium" | "large">;
     disableClearButton?: boolean;
@@ -41,11 +41,11 @@ export type MultiSelectFieldInputProps = {
     toggleButtonProps?: PassThroughProps<"button">;
     prefix?: string | ReactElement;
     suffix?: string | ReactElement;
-    selectedOptions?: MultiSelectFieldOption[];
-    onRemoveOption?: (option: MultiSelectFieldOption) => void;
+    selectedOptions?: MultiSelectFieldOption<TID>[];
+    onRemoveOption?: (option: MultiSelectFieldOption<TID>) => void;
     singleRow?: boolean;
     maxChips?: number;
-    getChipProps?: (option: MultiSelectFieldOption) => MultiSelectFieldChipProps;
+    getChipProps?: (option: MultiSelectFieldOption<TID>) => MultiSelectFieldChipProps;
     onWrapperClick?: (e: MouseEvent<HTMLDivElement>) => void;
 };
 /**
@@ -75,6 +75,6 @@ export type MultiSelectFieldInputProps = {
  * />
  */
 export declare const MultiSelectFieldInput: {
-    ({ placeholder, size, disableClearButton, disableToggleButton, disabled, readOnly, isHighlighted, error, onClear, id, inputWrapperRef, htmlInputWrapperProps, inputProps, toggleButtonProps, prefix, suffix, selectedOptions, onRemoveOption, singleRow, maxChips, getChipProps, onWrapperClick, }: MultiSelectFieldInputProps): import("react/jsx-runtime").JSX.Element;
+    <TID extends string | number>({ placeholder, size, disableClearButton, disableToggleButton, disabled, readOnly, isHighlighted, error, onClear, id, inputWrapperRef, htmlInputWrapperProps, inputProps, toggleButtonProps, prefix, suffix, selectedOptions, onRemoveOption, singleRow, maxChips, getChipProps, onWrapperClick, }: MultiSelectFieldInputProps<TID>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/src/components/MultiSelectField/internal/MultiSelectFieldSelectMode.d.ts

@@ -3,4 +3,4 @@ import { MultiSelectFieldBaseInternalProps } from './types';
  * Select mode: non-searchable multi-select using useSelect.
  * Active when disableSearch is true.
  */
-export declare const MultiSelectFieldSelectMode: ({ labelAiMark, id, helperUid, selectedOptions, onSelectedOptionsChange, displayAs, isDisabledOrReadOnly, disabled, readOnly, isHighlighted, required, placeholder, size, error, hasHelperText, disableClearButton, prefix, suffix, label, hideLabel, hint, moreInfo, moreInfoId, errorMessages, warning, description, className, style, layoutStyles, pinned, groupToString, groupSorter, virtualize, options, loading, loadingMore, hasMore, loadOptions, loadMore, initialLoad, initialLoadPerformed, setInitialLoadPerformed, inputWrapperRef, selectAll, bulkPending, onBulkActivate, singleRow, maxChips, getChipProps, addItemLabel, onAddNewItem, handleRemoveOption, handleClear, dataAttributes, }: MultiSelectFieldBaseInternalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelectFieldSelectMode: <TID extends string | number>({ labelAiMark, id, helperUid, selectedOptions, onSelectedOptionsChange, displayAs, isDisabledOrReadOnly, disabled, readOnly, isHighlighted, required, placeholder, size, error, hasHelperText, disableClearButton, prefix, suffix, label, hideLabel, hint, moreInfo, moreInfoId, errorMessages, warning, description, className, style, layoutStyles, pinned, groupToString, groupSorter, virtualize, options, loading, loadingMore, hasMore, loadOptions, loadMore, initialLoad, initialLoadPerformed, setInitialLoadPerformed, inputWrapperRef, selectAll, bulkPending, onBulkActivate, singleRow, maxChips, getChipProps, addItemLabel, onAddNewItem, handleRemoveOption, handleClear, dataAttributes, }: MultiSelectFieldBaseInternalProps<TID>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/MultiSelectField/internal/MultiSelectFieldTrigger.d.ts

@@ -1,7 +1,7 @@
 import { Size } from '../../../types';
 import { ReactElement, RefObject } from 'react';
 import { MultiSelectFieldChipProps, MultiSelectFieldOption } from '../types';
-export type MultiSelectFieldTriggerProps = {
+export type MultiSelectFieldTriggerProps<TID extends string | number> = {
     placeholder?: string;
     size?: Extract<Size, "small" | "medium" | "large">;
     disableClearButton?: boolean;
@@ -16,17 +16,17 @@ export type MultiSelectFieldTriggerProps = {
     toggleButtonProps?: Record<string, any>;
     prefix?: string | ReactElement;
     suffix?: string | ReactElement;
-    selectedOptions?: MultiSelectFieldOption[];
-    onRemoveOption?: (option: MultiSelectFieldOption) => void;
+    selectedOptions?: MultiSelectFieldOption<TID>[];
+    onRemoveOption?: (option: MultiSelectFieldOption<TID>) => void;
     singleRow?: boolean;
     maxChips?: number;
-    getChipProps?: (option: MultiSelectFieldOption) => MultiSelectFieldChipProps;
+    getChipProps?: (option: MultiSelectFieldOption<TID>) => MultiSelectFieldChipProps;
 };
 /**
  * Non-searchable trigger for MultiSelectField when disableSearch is true.
  * Renders chips for selected items in a div-based trigger (no input element).
  */
 export declare const MultiSelectFieldTrigger: {
-    ({ placeholder, size, disableClearButton, disabled, readOnly, isHighlighted, error, onClear, id, inputWrapperRef, toggleButtonProps, prefix, suffix, selectedOptions, onRemoveOption, singleRow, maxChips, getChipProps, popoverTarget, }: MultiSelectFieldTriggerProps): import("react/jsx-runtime").JSX.Element;
+    <TID extends string | number>({ placeholder, size, disableClearButton, disabled, readOnly, isHighlighted, error, onClear, id, inputWrapperRef, toggleButtonProps, prefix, suffix, selectedOptions, onRemoveOption, singleRow, maxChips, getChipProps, popoverTarget, }: MultiSelectFieldTriggerProps<TID>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/src/components/MultiSelectField/internal/types.d.ts

@@ -2,11 +2,11 @@ import { ReactElement, ReactNode, RefObject } from 'react';
 import { AiMarkWithTooltipOrPopoverProps, CheckState, DataAttributes } from '../../../types';
 import { AddNewItemProps } from '../../../internal/types/addNewItemTypes';
 import { MultiSelectFieldChipProps, MultiSelectFieldOption, MultiSelectFieldProps } from '../types';
-export type MultiSelectFieldBaseInternalProps = {
+export type MultiSelectFieldBaseInternalProps<TID extends string | number> = {
     id: string;
     helperUid: string;
-    selectedOptions: MultiSelectFieldOption[];
-    onSelectedOptionsChange: (options: MultiSelectFieldOption[]) => void;
+    selectedOptions: MultiSelectFieldOption<TID>[];
+    onSelectedOptionsChange: (options: MultiSelectFieldOption<TID>[]) => void;
     displayAs: "popover" | "dialog";
     isDisabledOrReadOnly: boolean;
     disabled?: boolean;
@@ -32,11 +32,11 @@ export type MultiSelectFieldBaseInternalProps = {
     className?: string;
     style?: React.CSSProperties;
     layoutStyles?: React.CSSProperties;
-    pinned?: MultiSelectFieldProps["pinned"];
+    pinned?: MultiSelectFieldProps<TID>["pinned"];
     groupToString?: (groupValue: string | number) => string;
     groupSorter?: (a: string | number, b: string | number) => number;
     virtualize?: boolean;
-    options: MultiSelectFieldOption[];
+    options: MultiSelectFieldOption<TID>[];
     loading: boolean;
     loadingMore: boolean;
     hasMore: boolean;
@@ -58,7 +58,7 @@ export type MultiSelectFieldBaseInternalProps = {
     onBulkActivate: (kind: "selectAll" | "selectFiltered", searchValue: string) => void;
     singleRow?: boolean;
     maxChips?: number;
-    getChipProps?: (option: MultiSelectFieldOption) => MultiSelectFieldChipProps;
+    getChipProps?: (option: MultiSelectFieldOption<TID>) => MultiSelectFieldChipProps;
     handleRemoveOption: (option: {
         id: string | number;
     }) => void;
@@ -66,7 +66,7 @@ export type MultiSelectFieldBaseInternalProps = {
     /** Consumer-supplied `data-*` attributes forwarded to the field wrapper. */
     dataAttributes?: DataAttributes;
 } & AddNewItemProps;
-export type MultiSelectFieldComboboxInternalProps = MultiSelectFieldBaseInternalProps & {
+export type MultiSelectFieldComboboxInternalProps<TID extends string | number> = MultiSelectFieldBaseInternalProps<TID> & {
     debounceMs: number;
     selectFiltered?: (searchValue: string) => {
         label?: string;

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

@@ -2,11 +2,11 @@ import { UseComboboxProps } from 'downshift';
 import { MultiSelectFieldGroupByValue, MultiSelectFieldOption, MultiSelectFieldPinnedOptions } from '../types';
 import { SelectItem } from '../../../internal/types/selectFieldInternalTypes';
 import { CheckState } from '../../../types';
-export type UseComboMultipleOptions = {
+export type UseComboMultipleOptions<TID extends string | number = string | number> = {
     /** An array of currently loaded options */
-    options: MultiSelectFieldOption[];
+    options: MultiSelectFieldOption<TID>[];
     /** Options to pin to the top of the list */
-    pinned?: MultiSelectFieldPinnedOptions;
+    pinned?: MultiSelectFieldPinnedOptions<TID>;
     /** Function to convert a group value to a display label */
     groupToString?: (groupValue: MultiSelectFieldGroupByValue) => string;
     /** Function to sort group sections */
@@ -26,8 +26,8 @@ export type UseComboMultipleOptions = {
     /** Called when the user activates the select-all or select-filtered row. */
     onBulkActivate: (kind: "selectAll" | "selectFiltered", searchValue: string) => void;
     /** The currently selected options (controlled from outside) */
-    selectedOptions: MultiSelectFieldOption[];
-    onSelectedOptionsChange: (options: MultiSelectFieldOption[]) => void;
+    selectedOptions: MultiSelectFieldOption<TID>[];
+    onSelectedOptionsChange: (options: MultiSelectFieldOption<TID>[]) => void;
     displayAs: "popover" | "dialog";
     disabled: boolean;
     /** Whether options are currently loading (hides select-filtered to prevent stale selections) */
@@ -45,20 +45,20 @@ 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, bulkPending, onBulkActivate, selectedOptions, onSelectedOptionsChange, onInputValueChange, onIsOpenChange, displayAs, disabled, loading, virtualize, onScrollToHighlight, }: UseComboMultipleOptions) => {
+export declare const useComboMultiple: <TID extends string | number>({ options, pinned, groupToString, groupSorter, selectAll, selectFiltered, bulkPending, onBulkActivate, selectedOptions, onSelectedOptionsChange, onInputValueChange, onIsOpenChange, displayAs, disabled, loading, virtualize, onScrollToHighlight, }: UseComboMultipleOptions<TID>) => {
     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<SelectItem> & Options) => Omit<import('downshift').Overwrite<import('downshift').UseComboboxGetItemPropsReturnValue, Options>, "item" | "index">;
+    getItemProps: <Options>(options: import('downshift').UseComboboxGetItemPropsOptions<SelectItem<TID>> & Options) => Omit<import('downshift').Overwrite<import('downshift').UseComboboxGetItemPropsReturnValue, Options>, "item" | "index">;
     highlightedIndex: number;
     isOpen: boolean;
-    items: SelectItem[];
+    items: SelectItem<TID>[];
     sectionsMeta: import('../../SelectField/internal/useCombo').SectionMeta[];
     closeMenu: () => void;
     openMenu: () => void;
     toggleMenu: () => void;
-    selectedOptions: import('../..').SelectFieldOption[];
+    selectedOptions: MultiSelectFieldOption<TID>[];
 };

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

@@ -1,9 +1,9 @@
 import { MultiSelectFieldGroupByValue, MultiSelectFieldOption, MultiSelectFieldPinnedOptions } from '../types';
 import { SelectItem } from '../../../internal/types/selectFieldInternalTypes';
 import { CheckState } from '../../../types';
-export type UseSelectModeMultipleOptions = {
-    options: MultiSelectFieldOption[];
-    pinned?: MultiSelectFieldPinnedOptions;
+export type UseSelectModeMultipleOptions<TID extends string | number> = {
+    options: MultiSelectFieldOption<TID>[];
+    pinned?: MultiSelectFieldPinnedOptions<TID>;
     groupToString?: (groupValue: MultiSelectFieldGroupByValue) => string;
     groupSorter?: (a: MultiSelectFieldGroupByValue, b: MultiSelectFieldGroupByValue) => number;
     selectAll?: {
@@ -14,8 +14,8 @@ export type UseSelectModeMultipleOptions = {
     bulkPending: boolean;
     /** Called when the user activates the select-all row. */
     onBulkActivate: (kind: "selectAll" | "selectFiltered", searchValue: string) => void;
-    selectedOptions: MultiSelectFieldOption[];
-    onSelectedOptionsChange: (options: MultiSelectFieldOption[]) => void;
+    selectedOptions: MultiSelectFieldOption<TID>[];
+    onSelectedOptionsChange: (options: MultiSelectFieldOption<TID>[]) => void;
     onIsOpenChange?: (changes: {
         isOpen?: boolean;
     }) => void;
@@ -28,18 +28,18 @@ export type UseSelectModeMultipleOptions = {
  * 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, bulkPending, onBulkActivate, selectedOptions, onSelectedOptionsChange, onIsOpenChange, displayAs, disabled, virtualize, onScrollToHighlight, }: UseSelectModeMultipleOptions) => {
+export declare const useSelectModeMultiple: <TID extends string | number>({ options, pinned, groupToString, groupSorter, selectAll, bulkPending, onBulkActivate, selectedOptions, onSelectedOptionsChange, onIsOpenChange, displayAs, disabled, virtualize, onScrollToHighlight, }: UseSelectModeMultipleOptions<TID>) => {
     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<SelectItem> & Options) => Omit<import('downshift').Overwrite<import('downshift').UseSelectGetItemPropsReturnValue, Options>, "item" | "index">;
+    getItemProps: <Options>(options: import('downshift').UseSelectGetItemPropsOptions<SelectItem<TID>> & Options) => Omit<import('downshift').Overwrite<import('downshift').UseSelectGetItemPropsReturnValue, Options>, "item" | "index">;
     highlightedIndex: number;
     isOpen: boolean;
-    items: SelectItem[];
+    items: SelectItem<TID>[];
     sectionsMeta: import('../../SelectField/internal/useCombo').SectionMeta[];
     closeMenu: () => void;
     openMenu: () => void;
     toggleMenu: () => void;
-    selectedOptions: import('../..').SelectFieldOption[];
+    selectedOptions: MultiSelectFieldOption<TID>[];
 };

package/dist/src/components/MultiSelectField/stories/MultiSelectField.stories.data.d.ts

@@ -1,4 +1,3 @@
-import { MultiSelectFieldGroupedOption, MultiSelectFieldOption, MultiSelectFieldUngroupedOption } from '../types';
 export type Book = {
     id: string;
     author: string;
@@ -9,10 +8,27 @@ export type Book = {
  * Small curated list of diverse books for simple examples
  */
 export declare const books: Book[];
-export declare const sourceOptions: MultiSelectFieldOption[];
+export declare const sourceOptions: {
+    id: string;
+    label: string;
+}[];
 export declare function filterBooks(bookList: Book[], searchValue: string): Book[];
-export declare function mapBookToOption(book: Book): MultiSelectFieldUngroupedOption;
-export declare const simulateFetchingBooks: (searchValue: string) => Promise<MultiSelectFieldOption[]>;
+export declare function mapBookToOption(book: Book): {
+    id: string;
+    label: string;
+    content: {
+        title: string;
+        description: string;
+    };
+};
+export declare const simulateFetchingBooks: (searchValue: string) => Promise<{
+    id: string;
+    label: string;
+    content: {
+        title: string;
+        description: string;
+    };
+}[]>;
 export declare const simulateFetchingPagedBooks: (searchValue: string, pageNumber: number, pageSize: number) => Promise<{
     data: Book[];
     count: number;
@@ -23,7 +39,158 @@ export declare const simulateFetchingOffsetBooks: (searchValue: string, offset:
 }>;
 export type GroupByField = "genre" | "author";
 export declare const simulateFetchingGroupedBooks: (groupBy: GroupByField) => (searchValue: string, previousGroupKey: string | number | null) => Promise<{
-    options: MultiSelectFieldGroupedOption[];
+    options: {
+        group: string;
+        id: string;
+        label: string;
+        content: {
+            title: string;
+            description: string;
+        };
+    }[];
     hasMore: boolean;
 }>;
-export declare const richContentOptions: MultiSelectFieldOption[];
+export declare const richContentOptions: ({
+    id: string;
+    label: string;
+    content?: undefined;
+} | {
+    id: string;
+    label: string;
+    content: {
+        title: string;
+        description: string;
+        chips?: undefined;
+        avatar?: undefined;
+        icon?: undefined;
+    };
+} | {
+    id: string;
+    label: string;
+    content: {
+        title: string;
+        chips: ({
+            label: string;
+            color?: undefined;
+        } | {
+            label: string;
+            color: string;
+        })[];
+        description?: undefined;
+        avatar?: undefined;
+        icon?: undefined;
+    };
+} | {
+    id: string;
+    label: string;
+    content: {
+        title: string;
+        description: string;
+        chips: ({
+            label: string;
+            color?: undefined;
+        } | {
+            label: string;
+            color: string;
+        })[];
+        avatar?: undefined;
+        icon?: undefined;
+    };
+} | {
+    id: string;
+    label: string;
+    content: {
+        title: string;
+        description: string;
+        avatar: {
+            name: string;
+            color: string;
+            image?: undefined;
+        };
+        chips?: undefined;
+        icon?: undefined;
+    };
+} | {
+    id: string;
+    label: string;
+    content: {
+        title: string;
+        description: string;
+        avatar: {
+            name: string;
+            image: string;
+            color?: undefined;
+        };
+        chips?: undefined;
+        icon?: undefined;
+    };
+} | {
+    id: string;
+    label: string;
+    content: {
+        title: string;
+        description: string;
+        icon: {
+            svg: import('react').FC<import('react').SVGProps<SVGSVGElement>>;
+        };
+        chips?: undefined;
+        avatar?: undefined;
+    };
+} | {
+    id: string;
+    label: string;
+    content: {
+        title: string;
+        description: string;
+        avatar: {
+            name: string;
+            image: string;
+            color?: undefined;
+        };
+        chips: ({
+            label: string;
+            color: string;
+        } | {
+            label: string;
+            color?: undefined;
+        })[];
+        icon?: undefined;
+    };
+} | {
+    id: string;
+    label: string;
+    content: {
+        title: string;
+        description: string;
+        icon: {
+            svg: import('react').FC<import('react').SVGProps<SVGSVGElement>>;
+        };
+        chips: {
+            label: string;
+            color: string;
+        }[];
+        avatar?: undefined;
+    };
+} | {
+    id: string;
+    label: string;
+    content: {
+        title: string;
+        description: string;
+        avatar: {
+            name: string;
+            image: string;
+            color?: undefined;
+        };
+        icon: {
+            svg: import('react').FC<import('react').SVGProps<SVGSVGElement>>;
+        };
+        chips: ({
+            label: string;
+            color: string;
+        } | {
+            label: string;
+            color?: undefined;
+        })[];
+    };
+})[];