@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
88 lines (87 loc) • 4.84 kB
TypeScript
import { GroupBase } from 'react-select';
import { BreakpointCustomizable, Optional } from '../../../types';
import { ComboboxAriaTranslations, ComboboxFilterOption, ComboboxLanguage, ComboboxOption, ComboboxOptionsGroup, ComboboxOptionsOrOptGroups, ComboboxSize } from '../Combobox.utils';
import { PublicBaseSelectProps } from 'react-select/dist/declarations/src/Select';
import { StateManagerProps } from 'react-select/dist/declarations/src/useStateManager';
type IncludedReactSelectKeys = 'className' | 'filterOption' | 'form' | 'inputValue' | 'menuIsOpen' | 'name' | 'onBlur' | 'onFocus' | 'openMenuOnClick' | 'openMenuOnFocus' | 'tabIndex';
type PickedReactSelectProps<OptionType, IsMulti extends boolean, GroupType extends GroupBase<OptionType>> = Optional<Pick<PublicBaseSelectProps<OptionType, IsMulti, GroupType>, IncludedReactSelectKeys>, IncludedReactSelectKeys>;
type PickedReactSelectStateManagerProps<OptionType, IsMulti extends boolean, GroupType extends GroupBase<OptionType>> = Optional<Pick<StateManagerProps<OptionType, IsMulti, GroupType>, 'defaultInputValue'>, 'defaultInputValue'>;
export interface CustomReactSelectProps<IsMulti extends boolean> extends PickedReactSelectProps<ComboboxOption, IsMulti, ComboboxOptionsGroup>, PickedReactSelectStateManagerProps<ComboboxOption, IsMulti, ComboboxOptionsGroup> {
/** Unique id for the DSCombobox. */
id: string;
/** Label text displayed above the DSCombobox. */
label: string;
/**
* Defines the options, can be a mixed array of options and option groups.
* `type ComboboxOption = {label: string; value: string | number; leadingIconName?: IconName; isDisabled?: boolean;}`
* `type ComboboxOptionsGroup = {label: string; options: ComboboxOption[];}`
* `type ComboboxOptionsOrOptGroups = (ComboboxOption | ComboboxOptionsGroup)[];`
* */
options: ComboboxOptionsOrOptGroups;
/** The value of autoComplete to use for the DSCombobox. */
autoComplete?: string;
/** Value of the initially selected Option. */
defaultValue?: IsMulti extends true ? ComboboxOption[] : ComboboxOption;
/** Disables the DSCombobox, preventing user interaction.
* @default false
*/
disabled?: boolean;
/** Custom method to filter whether an option should be displayed in the menu */
filterOption?: ((option: ComboboxFilterOption<ComboboxOption>, inputValue: string) => boolean) | null;
/** Hides the DSCombobox label, can be responsive.
* `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
* @default false
*/
hideLabel?: BreakpointCustomizable<boolean>;
/** Short descriptive text displayed beneath the label. */
hint?: string;
/** Marks the DSCombobox as invalid, typically used for form validation.
* @default false
*/
invalid?: boolean;
/** Allows selection of multiple options.
* @default false
*/
isMulti: boolean;
/** Sets language to use for the screen reader messages and "No options found" message, if no translations object is provided.
* @default 'en'
*/
lang?: ComboboxLanguage;
/** Shows an info button next to the label that triggers a popover with the passed content. */
popoverContent?: React.ReactNode;
/** Popover info button props:
*
* `data-*`: Custom data attributes.
*
* `label`: Accessibility label for the default anchor button.
* (default) 'Toggle popover'
*/
popoverInfoButtonProps?: {
[key: `data-${string}`]: string | undefined;
label?: string;
};
/** Indicates that the DSCombobox is required.
* @default false
*/
required?: boolean;
/** Size of the Combobox.
* @default 'medium'
*/
size?: ComboboxSize;
/** Defines a system feedback message, shown when `invalid={true}`- */
systemFeedback?: string;
/** Translations for the DSCombobox. Use our [customization page](/?path=/story/components-combobox-translations--documentation) for creating custom translations. */
translations?: ComboboxAriaTranslations;
/** Value of the DSCombobox. */
value?: IsMulti extends true ? ComboboxOption[] : ComboboxOption;
/** Callback function called when the selection of the DSCombobox changes. */
onValueChange?: (newValue: IsMulti extends true ? ComboboxOption[] : ComboboxOption) => void;
/** Callback function called when the value of the DSCombobox input changes. */
onInputChange?: (newValue: string) => void;
}
/**
* Internal customized react select component, which is in parts exposed to our consumers
* via the DSCombobox component.
* */
export declare const CustomReactSelect: import('react').ForwardRefExoticComponent<CustomReactSelectProps<boolean> & import('react').RefAttributes<HTMLInputElement>>;
export {};