@sitecore/sc-contenthub-blok/dist/Components/BlokSelect/BlokSelect.d.ts

A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).

import { ReactElement } from "react";
import { Nullable } from "../../Foundations/utils";
interface BlokSelectProps<T, K> {
    /**
     * Unique id of the SelectMenu.
     */
    id: string;
    /**
     * Different options that menu provides.
     */
    options: Array<T>;
    /**
     * OnChange function to propagate the new item back to the parent.
     */
    onChange: (item: K) => void | Promise<void> | unknown;
    /**
     * The current value of the SelectMenu.
     */
    value?: T;
    /**
     * A function that maps the item to a label.
     */
    labelMapper?: (item: T) => string;
    /**
     *  A function that maps the item to a value.
     */
    valueMapper?: (item: T) => string;
    /**
     * Callback that returns the value of the selected item.
     */
    returnValue?: (item: T) => K;
    /**
     * Placeholder in case no value is found.
     */
    placeholder?: string;
    /**
     * Indicates if an empty value should be selectable.
     */
    emptyValueSelectable?: boolean;
    /**
     * Custom css class name to overrule some styling.
     */
    className?: string;
    /**
     * IsReadOnly mode for SelectMenu component.
     */
    isReadOnly?: boolean;
    /**
     * The minimum amount of items to have before searchbox is shown.
     */
    searchBoxMinAmountOfItems?: number;
    /**
     * An optional tooltip that is shown on hover.
     */
    tooltip?: string;
    /**
     * Indicates if both the icon and text for selected value should be displayed (e.g. search grouping column and row dropdowns).
     */
    showIconAndText?: boolean;
    /**
     * Indicates if the icons on the dropdown items should be hidden (e.g. search grouping column and row dropdown values).
     */
    hideItemIcons?: boolean;
    /**
     * Indicates if the select menu button should be full width (to align it with text boxes that are also full width).
     */
    isFullWidth?: boolean;
    /**
     * Used to link a label that can focus the select menu
     */
    accessibilityId?: string;
    /**
     * An optional max height for the dropdown.
     */
    maxHeight?: number;
    /**
     * An optional array of items to disable.
     */
    itemsToDisable?: Array<T>;
    /**
     * Indicates whether the dropdown should be open on initial render. Defaults to false.
     */
    openMenuByDefault?: boolean;
    /**
     * Indicates whether the dropdown should be rendered when there is no option available.
     */
    showEmptyDropdown?: boolean;
    /**
     * The message to show when no results are found.
     */
    noneLabel?: string;
    /**
     * The message to show when no results are found.
     */
    noResultsText?: string;
    /**
     * Clear message to show when hovering over the clear button.
     */
    clearMessage: string;
    /**
     * Search message to show when hovering over the search button.
     */
    searchMessage: string;
}
declare function BlokSelect<T = string, K = T>({ id, options, onChange: onChange_, value, labelMapper, valueMapper, returnValue, placeholder, emptyValueSelectable, className, isReadOnly, searchBoxMinAmountOfItems, tooltip, showIconAndText, hideItemIcons, isFullWidth, accessibilityId, maxHeight, itemsToDisable, openMenuByDefault, showEmptyDropdown, noneLabel, noResultsText, clearMessage, searchMessage, }: BlokSelectProps<T, K>): Nullable<ReactElement>;
export { BlokSelect };
export type { BlokSelectProps };