@servicetitan/anvil2 3.10.0 → 3.11.0

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

@@ -40,30 +40,30 @@ export type MultiSelectFieldGroupByValue = SelectFieldGroupByValue;
  * Controls the avatar, icon, description, and chip display within an option.
  */
 export type MultiSelectFieldOptionContent = SelectFieldOptionContent;
-export type MultiSelectFieldOption = SelectFieldOption;
-export type MultiSelectFieldGroupedOption = MultiSelectFieldOption & {
+export type MultiSelectFieldOption<TID extends string | number = string | number> = SelectFieldOption<TID>;
+export type MultiSelectFieldGroupedOption<TID extends string | number = string | number> = MultiSelectFieldOption<TID> & {
     group: MultiSelectFieldGroupByValue;
 };
-export type MultiSelectFieldUngroupedOption = Omit<MultiSelectFieldOption, "group"> & {
+export type MultiSelectFieldUngroupedOption<TID extends string | number = string | number> = Omit<MultiSelectFieldOption<TID>, "group"> & {
     group?: never;
 };
-export type MultiSelectFieldOptionsResult = MultiSelectFieldOption[] | Promise<MultiSelectFieldOption[]>;
-export type MultiSelectFieldEagerLoader = (searchValue: string) => MultiSelectFieldOptionsResult;
-export type MultiSelectFieldOffsetLazyResult = {
-    options: MultiSelectFieldUngroupedOption[];
+export type MultiSelectFieldOptionsResult<TID extends string | number = string | number> = MultiSelectFieldOption<TID>[] | Promise<MultiSelectFieldOption<TID>[]>;
+export type MultiSelectFieldEagerLoader<TID extends string | number = string | number> = (searchValue: string) => MultiSelectFieldOptionsResult<TID>;
+export type MultiSelectFieldOffsetLazyResult<TID extends string | number = string | number> = {
+    options: MultiSelectFieldUngroupedOption<TID>[];
     hasMore?: boolean;
 };
-export type MultiSelectFieldOffsetLazyLoader = (searchValue: string, offset: number, limit: number) => MultiSelectFieldOffsetLazyResult | Promise<MultiSelectFieldOffsetLazyResult>;
-export type MultiSelectFieldPageLazyResult = {
-    options: MultiSelectFieldUngroupedOption[];
+export type MultiSelectFieldOffsetLazyLoader<TID extends string | number = string | number> = (searchValue: string, offset: number, limit: number) => MultiSelectFieldOffsetLazyResult<TID> | Promise<MultiSelectFieldOffsetLazyResult<TID>>;
+export type MultiSelectFieldPageLazyResult<TID extends string | number = string | number> = {
+    options: MultiSelectFieldUngroupedOption<TID>[];
     hasMore?: boolean;
 };
-export type MultiSelectFieldPageLazyLoader = (searchValue: string, pageNumber: number, pageSize: number) => MultiSelectFieldPageLazyResult | Promise<MultiSelectFieldPageLazyResult>;
-export type MultiSelectFieldGroupLazyResult = {
-    options: MultiSelectFieldGroupedOption[];
+export type MultiSelectFieldPageLazyLoader<TID extends string | number = string | number> = (searchValue: string, pageNumber: number, pageSize: number) => MultiSelectFieldPageLazyResult<TID> | Promise<MultiSelectFieldPageLazyResult<TID>>;
+export type MultiSelectFieldGroupLazyResult<TID extends string | number = string | number> = {
+    options: MultiSelectFieldGroupedOption<TID>[];
     hasMore?: boolean;
 };
-export type MultiSelectFieldGroupLazyLoader = (searchValue: string, previousGroupKey: MultiSelectFieldGroupByValue | null) => MultiSelectFieldGroupLazyResult | Promise<MultiSelectFieldGroupLazyResult>;
+export type MultiSelectFieldGroupLazyLoader<TID extends string | number = string | number> = (searchValue: string, previousGroupKey: MultiSelectFieldGroupByValue | null) => MultiSelectFieldGroupLazyResult<TID> | Promise<MultiSelectFieldGroupLazyResult<TID>>;
 export type MultiSelectFieldSearchProps = {
     /**
      * The current search value.
@@ -80,8 +80,8 @@ export type MultiSelectFieldSearchProps = {
      */
     debounceMs?: number;
 };
-export type MultiSelectFieldPinnedOptionsSection = {
-    options: MultiSelectFieldOption[] | ((searchValue: string) => MultiSelectFieldOption[] | Promise<MultiSelectFieldOption[]>);
+export type MultiSelectFieldPinnedOptionsSection<TID extends string | number = string | number> = {
+    options: MultiSelectFieldOption<TID>[] | ((searchValue: string) => MultiSelectFieldOption<TID>[] | Promise<MultiSelectFieldOption<TID>[]>);
     label: string;
     /**
      * Whether to re-call the loader when search value changes.
@@ -103,8 +103,8 @@ export type MultiSelectFieldPinnedOptionsSection = {
  * 1. A labeled pinned options object (e.g. "Favorites", "Recent", "AI Suggestions", etc.)
  * 2. An array of labeled pinned options objects (e.g. [{"label": "Favorites", "options": [...]}])
  */
-export type MultiSelectFieldPinnedOptions = MultiSelectFieldPinnedOptionsSection | MultiSelectFieldPinnedOptionsSection[];
-type MultiSelectFieldCommonProps = {
+export type MultiSelectFieldPinnedOptions<TID extends string | number = string | number> = MultiSelectFieldPinnedOptionsSection<TID> | MultiSelectFieldPinnedOptionsSection<TID>[];
+type MultiSelectFieldCommonProps<TID extends string | number> = {
     /**
      * The id of the multi-select field.
      */
@@ -124,12 +124,12 @@ type MultiSelectFieldCommonProps = {
     /**
      * The selected options. Must be controlled state.
      */
-    value: MultiSelectFieldOption[];
+    value: MultiSelectFieldOption<TID>[];
     /**
      * The callback to call when the selected options change.
      * @param options - The new array of selected options.
      */
-    onSelectedOptionsChange: (options: MultiSelectFieldOption[]) => void;
+    onSelectedOptionsChange: (options: MultiSelectFieldOption<TID>[]) => void;
     /**
      * Defines the initial loading behavior of the options. Controls when loadOptions is called.
      * @default "auto"
@@ -141,7 +141,7 @@ type MultiSelectFieldCommonProps = {
     /**
      * The options to pin to the top of the list.
      */
-    pinned?: MultiSelectFieldPinnedOptions;
+    pinned?: MultiSelectFieldPinnedOptions<TID>;
     /**
      * Configuration for caching loadOptions results.
      * Caching is enabled by default. Set `{ enabled: false }` to disable.
@@ -235,7 +235,7 @@ type MultiSelectFieldCommonProps = {
      * - Select All is shown when the search input is empty.
      * - Select Filtered (if provided) is shown when a search term is active.
      */
-    selectAll?: BulkActionConfig;
+    selectAll?: BulkActionConfig<TID>;
     /**
      * Function that receives the current search value and returns configuration for
      * the "Select Filtered" option at the top of the list.
@@ -252,7 +252,7 @@ type MultiSelectFieldCommonProps = {
      * @param searchValue - The current search input value
      * @returns BulkActionConfig describing the row
      */
-    selectFiltered?: (searchValue: string) => BulkActionConfig;
+    selectFiltered?: (searchValue: string) => BulkActionConfig<TID>;
     /**
      * When true, restricts the field to a single row height.
      * Overflow chips will be collapsed into a "+N" indicator.
@@ -293,7 +293,7 @@ type MultiSelectFieldCommonProps = {
      * @param option - The selected option the chip represents
      * @returns Partial chip props to merge onto the chip
      */
-    getChipProps?: (option: MultiSelectFieldOption) => MultiSelectFieldChipProps;
+    getChipProps?: (option: MultiSelectFieldOption<TID>) => MultiSelectFieldChipProps;
 } & MultiSelectFieldSearchProps & LayoutUtilProps & AddNewItemProps & DataAttributes;
 type MultiSelectFieldGroupingProps = {
     /**
@@ -323,7 +323,7 @@ type MultiSelectFieldNonGroupingProps = {
      */
     groupSorter?: never;
 };
-export type MultiSelectFieldPropsLazyPage = MultiSelectFieldCommonProps & {
+export type MultiSelectFieldPropsLazyPage<TID extends string | number = string | number> = MultiSelectFieldCommonProps<TID> & {
     /**
      * Lazy loading mode using page-based pagination.
      * Options will be loaded on demand when the user scrolls to the bottom of the list.
@@ -336,9 +336,9 @@ export type MultiSelectFieldPropsLazyPage = MultiSelectFieldCommonProps & {
     /**
      * Function to load the options.
      */
-    loadOptions: MultiSelectFieldPageLazyLoader;
+    loadOptions: MultiSelectFieldPageLazyLoader<TID>;
 } & MultiSelectFieldNonGroupingProps;
-export type MultiSelectFieldPropsLazyOffset = MultiSelectFieldCommonProps & {
+export type MultiSelectFieldPropsLazyOffset<TID extends string | number = string | number> = MultiSelectFieldCommonProps<TID> & {
     /**
      * Lazy loading mode using offset-based pagination.
      * Options will be loaded on demand when the user scrolls to the bottom of the list.
@@ -351,9 +351,9 @@ export type MultiSelectFieldPropsLazyOffset = MultiSelectFieldCommonProps & {
     /**
      * Function to load the options.
      */
-    loadOptions: MultiSelectFieldOffsetLazyLoader;
+    loadOptions: MultiSelectFieldOffsetLazyLoader<TID>;
 } & MultiSelectFieldNonGroupingProps;
-export type MultiSelectFieldPropsLazyGroup = MultiSelectFieldCommonProps & {
+export type MultiSelectFieldPropsLazyGroup<TID extends string | number = string | number> = MultiSelectFieldCommonProps<TID> & {
     /**
      * Lazy loading mode using incremental group loading.
      * Groups will be loaded on demand when the user scrolls to the bottom of the list.
@@ -364,9 +364,9 @@ export type MultiSelectFieldPropsLazyGroup = MultiSelectFieldCommonProps & {
     /**
      * Function to load the options.
      */
-    loadOptions: MultiSelectFieldGroupLazyLoader;
+    loadOptions: MultiSelectFieldGroupLazyLoader<TID>;
 } & MultiSelectFieldGroupingProps;
-export type MultiSelectFieldPropsEager = MultiSelectFieldCommonProps & {
+export type MultiSelectFieldPropsEager<TID extends string | number = string | number> = MultiSelectFieldCommonProps<TID> & {
     /**
      * Whether the options are lazy loaded. If true, the options will be loaded on demand when the user scrolls to the bottom of the list.
      * @default false
@@ -375,8 +375,8 @@ export type MultiSelectFieldPropsEager = MultiSelectFieldCommonProps & {
     /**
      * Function to load the options.
      */
-    loadOptions: MultiSelectFieldEagerLoader;
+    loadOptions: MultiSelectFieldEagerLoader<TID>;
 } & MultiSelectFieldGroupingProps;
-export type MultiSelectFieldPropsLazy = MultiSelectFieldPropsLazyPage | MultiSelectFieldPropsLazyOffset | MultiSelectFieldPropsLazyGroup;
-export type MultiSelectFieldProps = MultiSelectFieldPropsLazy | MultiSelectFieldPropsEager;
+export type MultiSelectFieldPropsLazy<TID extends string | number = string | number> = MultiSelectFieldPropsLazyPage<TID> | MultiSelectFieldPropsLazyOffset<TID> | MultiSelectFieldPropsLazyGroup<TID>;
+export type MultiSelectFieldProps<TID extends string | number = string | number> = MultiSelectFieldPropsLazy<TID> | MultiSelectFieldPropsEager<TID>;
 export {};

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

@@ -1,11 +1,11 @@
 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"> & {
+export type MultiSelectMenuSyncProps<TID extends string | number = string | number> = Omit<MultiSelectMenuProps<TID>, "loadOptions" | "lazy" | "debounceMs" | "cache" | "initialLoad" | "selectAll" | "selectFiltered"> & {
     /**
      * The options to display in the multi-select menu.
      */
-    options: MultiSelectMenuOption[];
+    options: MultiSelectMenuOption<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,
@@ -13,7 +13,7 @@ export type MultiSelectMenuSyncProps = Omit<MultiSelectMenuProps, "loadOptions"
      *
      * By default, options are filtered by `label` and `searchText` using match-sorter.
      */
-    filter?: SyncFilterFn<MultiSelectMenuOption> | MatchSorterOptions<MultiSelectMenuOption>;
+    filter?: SyncFilterFn<TID, MultiSelectMenuOption<TID>> | MatchSorterOptions<MultiSelectMenuOption<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.

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

@@ -8,13 +8,13 @@ import { BulkActionConfig } from '../../internal/types/bulkActionTypes';
 /**
  * Configuration for the "Select All" / "Select Filtered" rows.
  */
-export type MultiSelectMenuBulkActionConfig = BulkActionConfig;
+export type MultiSelectMenuBulkActionConfig<TID extends string | number = string | number> = BulkActionConfig<TID>;
 /**
  * Rich content configuration for a MultiSelectMenu option row.
  * Controls the avatar, icon, description, and chip display within an option.
  */
 export type MultiSelectMenuOptionContent = SelectFieldOptionContent;
-export type MultiSelectMenuOption = SelectFieldOption;
+export type MultiSelectMenuOption<TID extends string | number = string | number> = SelectFieldOption<TID>;
 export type MultiSelectMenuGroupByValue = SelectFieldGroupByValue;
 /**
  * Configuration options for the MultiSelectMenu cache.
@@ -31,11 +31,11 @@ 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 MultiSelectMenuEagerLoader<TID extends string | number = string | number> = MultiSelectFieldEagerLoader<TID>;
+export type MultiSelectMenuPageLazyLoader<TID extends string | number = string | number> = MultiSelectFieldPageLazyLoader<TID>;
+export type MultiSelectMenuOffsetLazyLoader<TID extends string | number = string | number> = MultiSelectFieldOffsetLazyLoader<TID>;
+export type MultiSelectMenuGroupLazyLoader<TID extends string | number = string | number> = MultiSelectFieldGroupLazyLoader<TID>;
+export type MultiSelectMenuPinnedOptions<TID extends string | number = string | number> = MultiSelectFieldPinnedOptions<TID>;
 export type MultiSelectMenuSearchProps = MultiSelectFieldSearchProps;
 /**
  * Props provided to the trigger render function.
@@ -56,7 +56,7 @@ export type MultiSelectMenuTriggerProps = {
     "aria-expanded": boolean;
     "data-state": "open" | "close";
 } & DataAttributes;
-type MultiSelectMenuCommonProps = {
+type MultiSelectMenuCommonProps<TID extends string | number = string | number> = {
     /**
      * The id of the multi-select menu.
      */
@@ -91,12 +91,12 @@ type MultiSelectMenuCommonProps = {
     /**
      * The selected options. Must be controlled state.
      */
-    value: MultiSelectMenuOption[];
+    value: MultiSelectMenuOption<TID>[];
     /**
      * Callback fired when the selected options change.
      * @param options - The new array of selected options.
      */
-    onSelectedOptionsChange: (options: MultiSelectMenuOption[]) => void;
+    onSelectedOptionsChange: (options: MultiSelectMenuOption<TID>[]) => void;
     /**
      * Defines the initial loading behavior of the options.
      * @default "auto"
@@ -105,7 +105,7 @@ type MultiSelectMenuCommonProps = {
     /**
      * Options to pin to the top of the list.
      */
-    pinned?: MultiSelectMenuPinnedOptions;
+    pinned?: MultiSelectMenuPinnedOptions<TID>;
     /**
      * Configuration for caching loadOptions results.
      * Caching is enabled by default. Set `{ enabled: false }` to disable.
@@ -146,7 +146,7 @@ type MultiSelectMenuCommonProps = {
      * committed value), so the row's checkbox can reflect how much of the set is
      * selected.
      */
-    selectAll?: MultiSelectMenuBulkActionConfig;
+    selectAll?: MultiSelectMenuBulkActionConfig<TID>;
     /**
      * Function that receives the current search value and returns configuration for
      * the "Select Filtered" option at the top of the list.
@@ -154,7 +154,7 @@ type MultiSelectMenuCommonProps = {
      *
      * See `selectAll` for the `onClick` / `compute` choice.
      */
-    selectFiltered?: (searchValue: string) => MultiSelectMenuBulkActionConfig;
+    selectFiltered?: (searchValue: string) => MultiSelectMenuBulkActionConfig<TID>;
     /**
      * 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.
@@ -204,29 +204,29 @@ type MultiSelectMenuNonGroupingProps = {
     groupToString?: never;
     groupSorter?: never;
 };
-export type MultiSelectMenuPropsLazyPage = MultiSelectMenuCommonProps & {
+export type MultiSelectMenuPropsLazyPage<TID extends string | number = string | number> = MultiSelectMenuCommonProps<TID> & {
     lazy: "page";
     lazyOptions?: {
         pageSize?: number;
     };
     loadOptions: MultiSelectMenuPageLazyLoader;
 } & MultiSelectMenuNonGroupingProps;
-export type MultiSelectMenuPropsLazyOffset = MultiSelectMenuCommonProps & {
+export type MultiSelectMenuPropsLazyOffset<TID extends string | number = string | number> = MultiSelectMenuCommonProps<TID> & {
     lazy: "offset";
     lazyOptions?: {
         limit?: number;
     };
     loadOptions: MultiSelectMenuOffsetLazyLoader;
 } & MultiSelectMenuNonGroupingProps;
-export type MultiSelectMenuPropsLazyGroup = MultiSelectMenuCommonProps & {
+export type MultiSelectMenuPropsLazyGroup<TID extends string | number = string | number> = MultiSelectMenuCommonProps<TID> & {
     lazy: "group";
     lazyOptions?: object;
     loadOptions: MultiSelectMenuGroupLazyLoader;
 } & MultiSelectMenuGroupingProps;
-export type MultiSelectMenuPropsEager = MultiSelectMenuCommonProps & {
+export type MultiSelectMenuPropsEager<TID extends string | number = string | number> = MultiSelectMenuCommonProps<TID> & {
     lazy?: false;
     loadOptions: MultiSelectMenuEagerLoader;
 } & MultiSelectMenuGroupingProps;
-export type MultiSelectMenuPropsLazy = MultiSelectMenuPropsLazyPage | MultiSelectMenuPropsLazyOffset | MultiSelectMenuPropsLazyGroup;
-export type MultiSelectMenuProps = MultiSelectMenuPropsLazy | MultiSelectMenuPropsEager;
+export type MultiSelectMenuPropsLazy<TID extends string | number = string | number> = MultiSelectMenuPropsLazyPage<TID> | MultiSelectMenuPropsLazyOffset<TID> | MultiSelectMenuPropsLazyGroup<TID>;
+export type MultiSelectMenuProps<TID extends string | number = string | number> = MultiSelectMenuPropsLazy<TID> | MultiSelectMenuPropsEager<TID>;
 export {};

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

@@ -1,4 +1,5 @@
 import { SelectFieldHandle, SelectFieldProps } from './types';
+import { ForwardedRef, ReactNode } from 'react';
 /**
  * SelectField component for selecting a single option from a searchable dropdown.
  *
@@ -20,4 +21,6 @@ import { SelectFieldHandle, SelectFieldProps } from './types';
  *   loadOptions={async (search) => fetchTechnicians(search)}
  * />
  */
-export declare const SelectField: import('react').ForwardRefExoticComponent<SelectFieldProps & import('react').RefAttributes<SelectFieldHandle>>;
+export declare const SelectField: <TID extends string | number = string | number>(propsWithLayout: SelectFieldProps<TID> & {
+    ref?: ForwardedRef<SelectFieldHandle>;
+}) => ReactNode;

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

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

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

@@ -3,4 +3,4 @@ import { SelectFieldComboboxInternalProps } from '../../../internal/types/select
  * Combobox mode: searchable select using useCombobox.
  * This is the default behavior when disableSearch is false.
  */
-export declare const SelectFieldComboboxMode: ({ id, helperUid, selectedOption, onSelectedOptionChange, displayAs, isDisabledOrReadOnly, disabled, labelAiMark, 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, addItemLabel, onAddNewItem, dataAttributes, }: SelectFieldComboboxInternalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectFieldComboboxMode: <TID extends string | number>({ id, helperUid, selectedOption, onSelectedOptionChange, displayAs, isDisabledOrReadOnly, disabled, labelAiMark, 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, addItemLabel, onAddNewItem, dataAttributes, }: SelectFieldComboboxInternalProps<TID>) => import("react/jsx-runtime").JSX.Element;

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

@@ -3,4 +3,4 @@ import { SelectFieldBaseInternalProps } from '../../../internal/types/selectFiel
  * Select mode: non-searchable select using useSelect.
  * Active when disableSearch is true.
  */
-export declare const SelectFieldSelectMode: ({ labelAiMark, id, helperUid, selectedOption, onSelectedOptionChange, displayAs, isDisabledOrReadOnly, disabled, readOnly, isHighlighted, 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, required, addItemLabel, onAddNewItem, dataAttributes, }: SelectFieldBaseInternalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectFieldSelectMode: <TID extends string | number = string | number>({ labelAiMark, id, helperUid, selectedOption, onSelectedOptionChange, displayAs, isDisabledOrReadOnly, disabled, readOnly, isHighlighted, 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, required, addItemLabel, onAddNewItem, dataAttributes, }: SelectFieldBaseInternalProps<TID>) => import("react/jsx-runtime").JSX.Element;

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

@@ -2,13 +2,13 @@ import { UseComboboxProps } from 'downshift';
 import { SelectFieldGroupByValue, SelectFieldOption, SelectFieldPinnedOptions } from '../types';
 import { SectionMeta, SelectItem } from '../../../internal/types/selectFieldInternalTypes';
 export type { SectionMeta };
-export type UseComboOptions = {
-    options: SelectFieldOption[];
-    pinned?: SelectFieldPinnedOptions;
+export type UseComboOptions<TID extends string | number> = {
+    options: SelectFieldOption<TID>[];
+    pinned?: SelectFieldPinnedOptions<TID>;
     groupToString?: (groupValue: SelectFieldGroupByValue) => string;
     groupSorter?: (a: SelectFieldGroupByValue, b: SelectFieldGroupByValue) => number;
-    selectedOption: SelectFieldOption | null;
-    onSelectedOptionChange: (option: SelectFieldOption | null) => void;
+    selectedOption: SelectFieldOption<TID> | null;
+    onSelectedOptionChange: (option: SelectFieldOption<TID> | null) => void;
     displayAs: "popover" | "dialog";
     disableHighlightOnOpen?: boolean;
     disabled: boolean;
@@ -18,17 +18,17 @@ export type UseComboOptions = {
 /**
  * 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, onScrollToHighlight, }: UseComboOptions) => {
+export declare const useCombo: <TID extends string | number>({ options, pinned, groupToString, groupSorter, selectedOption, onSelectedOptionChange, onInputValueChange, onIsOpenChange, displayAs, disableHighlightOnOpen, disabled, virtualize, onScrollToHighlight, }: UseComboOptions<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: SectionMeta[];
     closeMenu: () => void;
     openMenu: () => void;

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

@@ -1,12 +1,12 @@
 import { SelectFieldGroupByValue, SelectFieldOption, SelectFieldPinnedOptions } from '../types';
 import { SelectItem } from '../../../internal/types/selectFieldInternalTypes';
-export type UseSelectModeOptions = {
-    options: SelectFieldOption[];
-    pinned?: SelectFieldPinnedOptions;
+export type UseSelectModeOptions<TID extends string | number> = {
+    options: SelectFieldOption<TID>[];
+    pinned?: SelectFieldPinnedOptions<TID>;
     groupToString?: (groupValue: SelectFieldGroupByValue) => string;
     groupSorter?: (a: SelectFieldGroupByValue, b: SelectFieldGroupByValue) => number;
-    selectedOption: SelectFieldOption | null;
-    onSelectedOptionChange: (option: SelectFieldOption | null) => void;
+    selectedOption: SelectFieldOption<TID> | null;
+    onSelectedOptionChange: (option: SelectFieldOption<TID> | null) => void;
     onIsOpenChange?: (changes: {
         isOpen?: boolean;
     }) => void;
@@ -20,15 +20,15 @@ export type UseSelectModeOptions = {
  * 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, onScrollToHighlight, }: UseSelectModeOptions) => {
+export declare const useSelectMode: <TID extends string | number>({ options, pinned, groupToString, groupSorter, selectedOption, onSelectedOptionChange, onIsOpenChange, displayAs, disableHighlightOnOpen, disabled, virtualize, onScrollToHighlight, }: UseSelectModeOptions<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('./useCombo').SectionMeta[];
     closeMenu: () => void;
     openMenu: () => void;

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

@@ -1,4 +1,4 @@
-import { SelectFieldOption, SelectFieldUngroupedOption, SelectFieldGroupedOption, SelectFieldGroupByValue } from '../types';
+import { SelectFieldOption, SelectFieldGroupByValue } from '../types';
 export type Book = {
     id: string;
     author: string;
@@ -15,7 +15,14 @@ export declare const books: Book[];
 export declare const allBooks: Book[];
 export declare const sourceOptions: SelectFieldOption[];
 export declare function filterBooks(bookList: Book[], searchValue: string): Book[];
-export declare function mapBookToOption(book: Book): SelectFieldUngroupedOption;
+export declare function mapBookToOption(book: Book): {
+    id: string;
+    label: string;
+    content: {
+        title: string;
+        description: string;
+    };
+};
 export declare const simulateFetchingPagedBooks: (searchValue: string, pageNumber: number, pageSize: number) => Promise<{
     data: Book[];
     count: number;
@@ -25,9 +32,168 @@ export declare const simulateFetchingOffsetBooks: (searchValue: string, offset:
     count: number;
 }>;
 export type GroupByField = "genre" | "author";
-export declare function mapBookToGroupedOption(book: Book, groupBy: GroupByField): SelectFieldGroupedOption;
+export declare function mapBookToGroupedOption(book: Book, groupBy: GroupByField): {
+    id: string;
+    label: string;
+    group: string;
+    content: {
+        title: string;
+        description: string;
+    };
+};
 export declare const simulateFetchingGroupedBooks: (groupBy: GroupByField) => (searchValue: string, previousGroupKey: SelectFieldGroupByValue | null) => Promise<{
-    options: SelectFieldGroupedOption[];
+    options: {
+        id: string;
+        label: string;
+        group: string;
+        content: {
+            title: string;
+            description: string;
+        };
+    }[];
     hasMore: boolean;
 }>;
-export declare const richContentOptions: SelectFieldOption[];
+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;
+        })[];
+    };
+})[];