@commercetools-uikit/select-input

import type { ComponentType, ReactNode, JSX } from 'react'; import { type Props as ReactSelectProps, type GroupBase, type CommonPropsAndClassName, type MenuPlacement, type MenuPosition } from 'react-select'; export type TOption = { value: string; label?: ReactNode; isDisabled?: boolean; }; export type TOptionObject = { options: TOption[]; }; export type TOptions = TOption[] | TOptionObject[]; export type TCustomEvent = { target: { id?: ReactSelectProps<TOption>['inputId']; name?: ReactSelectProps<TOption>['name']; value?: string | string[] | null; }; persist: () => void; }; export type TSelectInputProps = { /** * Indicates the appearance of the input. * `quiet` appearance is meant to be used with the `horizontalConstraint="auto"`. * `filter` appearance provides a different look and feel for the select input when it is used as part of a filter component. */ appearance?: 'default' | 'quiet' | 'filter'; horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto'; /** * Indicates that input has errors */ hasError?: boolean; /** * Is the select read-only */ isReadOnly?: boolean; /** * Control to indicate on the input if there are selected values that are potentially invalid */ hasWarning?: boolean; /** * Icon to display on the left of the placeholder text and selected value. Has no effect when isMulti is enabled. */ iconLeft?: ReactNode; /** * Aria label (for assistive tech) * * [Props from React select was used](https://react-select.com/props) */ 'aria-label'?: ReactSelectProps<TOption>['aria-label']; /** * HTML ID of an element that should be used as the label (for assistive tech) * * [Props from React select was used](https://react-select.com/props) */ 'aria-labelledby'?: ReactSelectProps<TOption>['aria-labelledby']; /** * Indicate if the value entered in the input is invalid. * * [Props from React select was used](https://react-select.com/props) */ 'aria-invalid'?: ReactSelectProps<TOption>['aria-invalid']; /** * HTML ID of an element containing an error message related to the input. * * [Props from React select was used](https://react-select.com/props) */ 'aria-errormessage'?: ReactSelectProps<TOption>['aria-errormessage']; /** * Focus the control when it is mounted */ isAutofocussed?: boolean; /** * Remove the currently focused option when the user presses backspace * * [Props from React select was used](https://react-select.com/props) */ backspaceRemovesValue?: ReactSelectProps<TOption>['backspaceRemovesValue']; /** * Map of components to overwrite the default ones, see what components you can override * * [Props from React select was used](https://react-select.com/props) */ components?: ReactSelectProps<TOption>['components']; /** * Whether the input and options are rendered with condensed paddings */ isCondensed?: boolean; /** * Control whether the selected values should be rendered in the control * * [Props from React select was used](https://react-select.com/props) */ controlShouldRenderValue?: ReactSelectProps<TOption>['controlShouldRenderValue']; /** * Custom method to filter whether an option should be displayed in the menu * * [Props from React select was used](https://react-select.com/props) */ filterOption?: ReactSelectProps<TOption>['filterOption']; /** * Custom method to determine whether selected options should be displayed in the menu * * [Props from React select was used](https://react-select.com/props) */ hideSelectedOptions?: ReactSelectProps<TOption>['hideSelectedOptions']; /** * Used as HTML id property. An id is generated automatically when not provided. * This forwarded as react-select's "inputId" * * [Props from React select was used](https://react-select.com/props) */ id?: ReactSelectProps<TOption>['inputId']; /** * The value of the search input * * [Props from React select was used](https://react-select.com/props) */ inputValue?: ReactSelectProps<TOption>['inputValue']; /** * The id to set on the SelectContainer component * This is forwarded as react-select's "id" * * [Props from React select was used](https://react-select.com/props) */ containerId?: ReactSelectProps<TOption>['id']; /** * Is the select value clearable * * [Props from React select was used](https://react-select.com/props) */ isClearable?: ReactSelectProps<TOption>['isClearable']; /** * Is the select disabled * * [Props from React select was used](https://react-select.com/props) */ isDisabled?: ReactSelectProps<TOption>['isDisabled']; /** * Override the built-in logic to detect whether an option is disabled * * [Props from React select was used](https://react-select.com/props) */ isOptionDisabled?: ReactSelectProps<TOption>['isOptionDisabled']; /** * Support multiple selected options * * [Props from React select was used](https://react-select.com/props) */ isMulti?: ReactSelectProps<TOption>['isMulti']; /** * Whether to enable search functionality * * [Props from React select was used](https://react-select.com/props) */ isSearchable?: ReactSelectProps<TOption>['isSearchable']; /** * Can be used to enforce the select input to be opened * * [Props from React select was used](https://react-select.com/props) */ menuIsOpen?: ReactSelectProps<TOption>['menuIsOpen']; /** * Maximum height of the menu before scrolling * * [Props from React select was used](https://react-select.com/props) */ maxMenuHeight?: ReactSelectProps<TOption>['maxMenuHeight']; /** * Dom element to portal the select menu to * * [Props from React select was used](https://react-select.com/props) */ menuPortalTarget?: ReactSelectProps<TOption>['menuPortalTarget']; /** * z-index value for the menu portal * * Use in conjunction with `menuPortalTarget` */ menuPortalZIndex?: number; /** * whether the menu should block scroll while open * * [Props from React select was used](https://react-select.com/props) */ menuShouldBlockScroll?: ReactSelectProps<TOption>['menuShouldBlockScroll']; /** * Whether the menu should close after a value is selected. Defaults to `true`. * * [Props from React select was used](https://react-select.com/props) */ closeMenuOnSelect?: ReactSelectProps<TOption>['closeMenuOnSelect']; /** * Name of the HTML Input (optional - without this, no input will be rendered) * * [Props from React select was used](https://react-select.com/props) */ name?: ReactSelectProps<TOption>['name']; /** * Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place). Gets called with { inputValue: String }. * * `inputValue` will be an empty string when no search text is present. * * [Props from React select was used](https://react-select.com/props) */ noOptionsMessage?: ReactSelectProps<TOption>['noOptionsMessage']; /** * Handle blur events on the control */ onBlur?: (event: TCustomEvent) => void; /** * Called with a fake event when value changes. The event's target.name will be the name supplied in props. The event's target.value will hold the value. * * The value will be the selected option, or an array of options in case isMulti is true. */ onChange?: (event: TCustomEvent) => void; /** * Handle focus events on the control * * [Props from React select was used](https://react-select.com/props) */ onFocus?: ReactSelectProps<TOption>['onFocus']; /** * Handle change events on the input * * [Props from React select was used](https://react-select.com/props) */ onInputChange?: ReactSelectProps<TOption>['onInputChange']; /** * Array of options that populate the select menu */ options?: TOptions; /** defines how options are rendered */ optionStyle?: 'list' | 'checkbox'; showOptionGroupDivider?: boolean; /** * Placeholder text for the select value * * [Props from React select was used](https://react-select.com/props) */ placeholder?: ReactSelectProps<TOption>['placeholder']; /** * Sets the tabIndex attribute on the input * * [Props from React select was used](https://react-select.com/props) */ tabIndex?: ReactSelectProps<TOption>['tabIndex']; /** * Select the currently focused option when the user presses tab * * [Props from React select was used](https://react-select.com/props) */ tabSelectsValue?: ReactSelectProps<TOption>['tabSelectsValue']; /** * The value of the select; reflected by the selected option */ value?: string | string[] | null; /** * The min width (a range of values from the horizontalConrtaint set of values) for which the select-input menu * is allowed to shrink. If unset, the menu will shrink to a default value. */ minMenuWidth?: 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto'; /** * The max width (a range of values from the horizontalConrtaint set of values) for which the select-input menu * is allowed to grow. If unset, the menu will grow horrizontally to fill its parent. */ maxMenuWidth?: 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto'; /** * An additional value displayed on the select options menu. This value is only available in the checkbox option style when appearance is set to filter. */ count?: number; }; declare const SelectInput: { ({ appearance, maxMenuHeight, menuPortalZIndex, options, optionStyle, ...props }: TSelectInputProps): import("@emotion/react/jsx-runtime").JSX.Element; displayName: string; isTouched(touched: boolean | unknown[]): boolean; /** * Expose react-select components for customization purposes. */ ClearIndicator: { (props: import("@commercetools-uikit/select-utils").TClearIndicatorProps): import("@emotion/react/jsx-runtime").JSX.Element; displayName: string; }; Control: <Option_1, IsMulti_1 extends boolean, Group_1 extends GroupBase<Option_1>>(props: import("react-select").ControlProps<Option_1, IsMulti_1, Group_1>) => import("@emotion/react").jsx.JSX.Element; CrossIcon: ComponentType<import("react").SVGProps<SVGSVGElement> & { size?: number; }>; DownChevron: ComponentType<import("react").SVGProps<SVGSVGElement> & { size?: number; }>; DropdownIndicator: { (props: import("react-select").DropdownIndicatorProps): import("@emotion/react/jsx-runtime").JSX.Element; displayName: string; }; Group: <Option_3, IsMulti_3 extends boolean, Group_3 extends GroupBase<Option_3>>(props: import("react-select").GroupProps<Option_3, IsMulti_3, Group_3>) => import("@emotion/react").jsx.JSX.Element; GroupHeading: <Option_4, IsMulti_4 extends boolean, Group_4 extends GroupBase<Option_4>>(props: import("react-select").GroupHeadingProps<Option_4, IsMulti_4, Group_4>) => import("@emotion/react").jsx.JSX.Element; IndicatorSeparator: <Option_6, IsMulti_6 extends boolean, Group_6 extends GroupBase<Option_6>>(props: import("react-select").IndicatorSeparatorProps<Option_6, IsMulti_6, Group_6>) => import("@emotion/react").jsx.JSX.Element; IndicatorsContainer: <Option_5, IsMulti_5 extends boolean, Group_5 extends GroupBase<Option_5>>(props: import("react-select").IndicatorsContainerProps<Option_5, IsMulti_5, Group_5>) => import("@emotion/react").jsx.JSX.Element; Input: <Option_7, IsMulti_7 extends boolean, Group_7 extends GroupBase<Option_7>>(props: import("react-select").InputProps<Option_7, IsMulti_7, Group_7>) => import("@emotion/react").jsx.JSX.Element; LoadingIndicator: <Option_8, IsMulti_8 extends boolean, Group_8 extends GroupBase<Option_8>>({ innerProps, isRtl, size, ...restProps }: import("react-select").LoadingIndicatorProps<Option_8, IsMulti_8, Group_8>) => import("@emotion/react").jsx.JSX.Element; LoadingMessage: <Option_12, IsMulti_12 extends boolean, Group_12 extends GroupBase<Option_12>>({ children, innerProps, ...restProps }: import("react-select").NoticeProps<Option_12, IsMulti_12, Group_12>) => import("@emotion/react").jsx.JSX.Element; Menu: <Option_9, IsMulti_9 extends boolean, Group_9 extends GroupBase<Option_9>>(props: import("react-select").MenuProps<Option_9, IsMulti_9, Group_9>) => import("@emotion/react").jsx.JSX.Element; MenuList: <Option_10, IsMulti_10 extends boolean, Group_10 extends GroupBase<Option_10>>(props: import("react-select").MenuListProps<Option_10, IsMulti_10, Group_10>) => import("@emotion/react").jsx.JSX.Element; MenuPortal: ComponentType<CommonPropsAndClassName<unknown, false, GroupBase<unknown>> & { appendTo: HTMLElement | undefined; children: ReactNode; controlElement: HTMLDivElement | null; innerProps: JSX.IntrinsicElements["div"]; menuPlacement: MenuPlacement; menuPosition: MenuPosition; }>; MultiValue: <Option_14, IsMulti_14 extends boolean, Group_14 extends GroupBase<Option_14>>(props: import("react-select").MultiValueProps<Option_14, IsMulti_14, Group_14>) => import("@emotion/react").jsx.JSX.Element; MultiValueContainer: <Option_15, IsMulti_15 extends boolean, Group_15 extends GroupBase<Option_15>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element; MultiValueLabel: <Option_15, IsMulti_15 extends boolean, Group_15 extends GroupBase<Option_15>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element; MultiValueRemove: { (props: import("@commercetools-uikit/select-utils").TTagRemoveProps): import("@emotion/react/jsx-runtime").JSX.Element; displayName: string; }; NoOptionsMessage: <Option_13, IsMulti_13 extends boolean, Group_13 extends GroupBase<Option_13>>({ children, innerProps, ...restProps }: import("react-select").NoticeProps<Option_13, IsMulti_13, Group_13>) => import("@emotion/react").jsx.JSX.Element; Option: <Option_16, IsMulti_16 extends boolean, Group_16 extends GroupBase<Option_16>>(props: import("react-select").OptionProps<Option_16, IsMulti_16, Group_16>) => import("@emotion/react").jsx.JSX.Element; Placeholder: <Option_17, IsMulti_17 extends boolean, Group_17 extends GroupBase<Option_17>>(props: import("react-select").PlaceholderProps<Option_17, IsMulti_17, Group_17>) => import("@emotion/react").jsx.JSX.Element; SelectContainer: <Option_18, IsMulti_18 extends boolean, Group_18 extends GroupBase<Option_18>>(props: import("react-select").ContainerProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element; SingleValue: <Option_19, IsMulti_19 extends boolean, Group_19 extends GroupBase<Option_19>>(props: import("react-select").SingleValueProps<Option_19, IsMulti_19, Group_19>) => import("@emotion/react").jsx.JSX.Element; ValueContainer: <Option_20, IsMulti_20 extends boolean, Group_20 extends GroupBase<Option_20>>(props: import("react-select").ValueContainerProps<Option_20, IsMulti_20, Group_20>) => import("@emotion/react").jsx.JSX.Element; }; export default SelectInput;