@smashing/select-menu/lib/esm/types.d.ts

Component used to select options

/// <reference types="react" />
import { PopoverProps } from '@smashing/popover';
import { ButtonAppearanceType } from '@smashing/button';
import { MenuOptionValue, MenuOption } from '@smashing/menu';
export declare type SelectMenuAppearanceType = ButtonAppearanceType;
export declare type SelectMenuPopoverAppearanceType = 'card' | 'accordion';
export declare type SelectButtonProps = {
    toggle: () => void;
    getRef: (ref: any) => void;
    isShown: boolean;
};
export declare type SelectMenuChildrenFn = (props: SelectButtonProps & {
    selectedItems: MenuOptionValue | MenuOptionValue[];
}) => React.ReactNode;
export interface SelectMenuProps {
    options: MenuOption[];
    value: MenuOptionValue | MenuOptionValue[];
    children?: React.ReactNode | SelectMenuChildrenFn;
    /**
     * Select button appearance
     */
    appearance?: ButtonAppearanceType;
    /**
     * Display filter input in popover
     * @default false
     */
    hasFilter?: boolean;
    /**
     * Display close button in popover
     * @default true
     */
    hasCloseButton?: boolean;
    /**
     * Display title in popover
     * @default false
     */
    hasTitle?: boolean;
    /**
     * Title content displayed in popover
     */
    title?: string;
    /**
     * Select button height
     */
    height?: number;
    onChange?: (value: MenuOptionValue | MenuOptionValue[]) => void;
    onSelect?: (value: MenuOptionValue) => void;
    onDeselect?: (value: MenuOptionValue) => void;
    placeholder?: MenuOption | ((selected: MenuOption[]) => React.ReactNode);
    /**
     * Helper function for configuring message in multiple-selection scenarios, a syntactic sugar over `placeholder` prop.
     * Usage:
     *
     * ```ts
     *    <SelectMenu value={[]} placeholderForMultipleSelected={selected => `Tags: ${selected.length}`} />
     *    // is the same as
     *    <SelectMenu value={[]} placeholder={selected => selected.length === 0 ? 'Select...' : selected.length === 1 ? selected[0].label : `Tags: ${selected.length}`} />
     * ```
     */
    placeholderForMultipleSelected?: (selected: MenuOption[]) => React.ReactNode;
    /**
     * Class name passed to select button
     */
    className?: string;
    /**
     * If set to true, will filter out currently selected item from the list
     */
    hideSelectedItem?: boolean;
    /**
     * Props that will be passed to the internal Popover component. Please note that
     * vital control props (isShown, children etc.) will have no effect when placed here.
     */
    popoverProps?: Partial<PopoverProps>;
    /**
     * Popover appearance
     */
    popoverAppearance?: SelectMenuPopoverAppearanceType;
    /**
     * Used to set component's visual style for indicating errors
     */
    invalid?: boolean;
    /**
     * Select button width
     */
    width?: number;
    /**
     * Are items selectable
     * (true: items are select with checkboxes,
     * false: menu close when item is selected)
     */
    isSelectable?: boolean;
    disabled?: boolean;
    /**
     * Sets arrow (chevron) icon to be displayed on the far right side of the select menu.
     * No icon is displayed if property is unset.
     */
    arrowIcon?: React.ReactNode;
}