@stihl-design-system/components/components/Combobox/Combobox.utils.d.ts

Welcome to the STIHL Design System react component library.

import { IconName } from '../../types';
import { DSLanguage } from '../../utils';
import { ComboboxProps } from './Combobox';
import { FilterOptionOption, GroupBase, OptionsOrGroups } from 'react-select';
export type ComboboxVariant = 'single' | 'multi';
type ValidationProps = Pick<ComboboxProps, 'id' | 'label' | 'options' | 'hideLabel' | 'popoverContent'>;
export type ComboboxFilterOption<Option> = FilterOptionOption<Option>;
/**
 * Validates the given properties of the DSCombobox component for common configuration errors.
 * This function is intended to be used in development mode to provide developers with
 * warnings about potential misuse of the component.
 *
 * @param validationProps - The subset of DSCombobox properties to validate. This includes
 *                          id and label.
 */
export declare const validateComboboxProps: ({ id, label, options, hideLabel, popoverContent, }: ValidationProps) => void;
export declare const COMBOBOX_SIZE: readonly ["medium", "small"];
export type ComboboxSize = (typeof COMBOBOX_SIZE)[number];
export interface ComboboxOption {
    /** Label text displayed as the option. */
    label: string;
    /** Value of the option. */
    value: string | number;
    /** Name of the icon to display. */
    leadingIconName?: IconName;
    /** Disables the Option, preventing user interaction.
     * @default false
     */
    isDisabled?: boolean;
    /** Custom data attributes. */
    [key: `data-${string}`]: string | undefined;
}
export type ComboboxOptionsGroup = GroupBase<ComboboxOption>;
export type ComboboxOptionsOrOptGroups = OptionsOrGroups<ComboboxOption, ComboboxOptionsGroup>;
export type ComboboxLanguage = DSLanguage;
export type ComboboxAriaTranslations = {
    /** Placeholder text shown when no option is selected. */
    placeholder: string;
    /** Guidance for keyboard navigation through options. */
    navigationGuidance: string;
    /** Guidance for selecting the currently focused option. */
    selectGuidance: string;
    /** Guidance for exiting the menu. */
    exitGuidance: string;
    /** Guidance for using Tab to select and exit. */
    tabGuidance: string;
    /**
     * Guidance announced when the input is focused.
     * Uses ICU select to conditionally include search guidance.
     *
     * Placeholders: `{label}` = combobox label, `{isSearchable}` = ICU select (true/false).
     */
    inputGuidance: string;
    /**
     * Announced when a disabled option is focused.
     *
     * Placeholder: `{label}` = the label of the disabled option.
     */
    selectOptionDisabled: string;
    /**
     * Announced when a value is focused.
     *
     * Placeholder: `{label}` = the label of the focused option.
     */
    focusValue: string;
    /** Word "of" used in position announcements (e.g. "1 of 2 options"). */
    of: string;
    /** Word "disabled" used in state announcements. */
    disabled: string;
    /** Word "selected" used in state announcements. */
    selected: string;
    /** Word "deselected" used in state announcements. */
    deselected: string;
    /** Guidance for focusing selected values in multi-select mode. */
    focusSelectedMultiGuidance: string;
    /** Guidance for navigating between focused values. */
    valueGuidance: string;
    /** Guidance for removing the currently focused value. */
    deleteGuidance: string;
    /** Announced when all selected options have been cleared. */
    clearAllOptions: string;
    /**
     * Hint appended to filter results.
     *
     * Placeholder: `{inputValue}` = the current search term.
     */
    filterTermHint: string;
    /** Announced when no options match the filter. */
    filterNoOptions: string;
    /**
     * Announced when filter results are available.
     * ICU plural: resolves correct plural form based on CLDR rules for the locale.
     *
     * Placeholder: `{count}` = number of results.
     */
    resultsAvailable: string;
    /**
     * Announced when a single option is selected (used in onChange/onFocus messages).
     *
     * Placeholder: `{label}` = the selected option's label.
     */
    optionSelected: string;
    /**
     * Announced when multiple options are selected (used in onChange/onFocus messages).
     * ICU plural.
     *
     * Placeholders: `{count}` = number of options, `{labels}` = comma-separated labels.
     */
    optionsSelected: string;
    /**
     * Announced to indicate the position of the focused option.
     *
     * Placeholders: `{index}` = current position, `{total}` = total options.
     */
    optionPosition: string;
    /** Label for the popover toggle button. */
    togglePopover: string;
};
export declare const DS_COMBOBOX_TRANSLATIONS_EN: ComboboxAriaTranslations;
export declare const DS_COMBOBOX_TRANSLATIONS_DE: ComboboxAriaTranslations;
export declare const DS_COMBOBOX_TRANSLATIONS: Record<string, ComboboxAriaTranslations>;
export {};