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

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

import { ClipboardEventHandler, type FC, KeyboardEvent, type ReactNode, Ref } from "react";
import { Optional } from "../../Foundations/utils";
export declare const SEARCH_BOX_MAX_WIDTH = 500;
export declare const SEARCH_BOX_MULTI_LINE_MAX_HEIGHT = 130;
export declare const DEFAULT_SEARCH_BOX_HEIGHT = "36px";
export interface BlokSearchBoxSlots {
    slot1?: ReactNode;
    slot2?: ReactNode;
}
export interface BlokSearchBoxProps {
    /**
     * Callback when typing into the searchBox.
     */
    onSearch: (searchFilter: string) => void;
    /**
     * Callback when clearing the searchBox.
     */
    onClearSearch?: () => void;
    /**
     * Callback when pushing the enter button.
     */
    onEnterPress?: () => void;
    /**
     * Value for the search filter.
     */
    value: string;
    /**
     * A class name to overrule some styles.
     */
    className?: string;
    /**
     * Placeholder text for the searchBox.
     */
    placeholder?: string;
    /**
     * Indicates if the search needs to be canceled when the ESC key is pressed.
     */
    cancelOnEscape?: boolean;
    /**
     * Indicates if the searchBox should stay in view (will render with a white background and shadow).
     */
    isSticky?: boolean;
    /**
     * The top position of the sticky searchBox in px.
     */
    stickyTopPosition?: string;
    /**
     * Indicates if the searchBox should be auto focused.
     */
    isAutofocus?: boolean;
    /**
     * Indicates if the searchBox is used inside a dropdown.
     */
    isInsideDropdown?: boolean;
    /**
     * Indicate if the searchBox should be disabled.
     */
    isDisabled?: boolean;
    /**
     * Indicates if the searchBox should have a bottom gutter.
     */
    hasGutterBottom?: boolean;
    /**
     * Optional sticky searchBox background color.
     */
    stickySearchBoxBackground?: string;
    /**
     * Optional status to show the sticky search box in scrolled status.
     */
    shouldShowScrolledStatus?: boolean;
    /**
     * Optional class name for the clear button to override some styles.
     */
    clearButtonClassName?: string;
    /**
     * Allows the keypress events to propagate (for the autosuggest).
     */
    allowKeyPressPropagation?: boolean;
    /**
     * A function to handle the keyPresses (for autosuggest).
     */
    handleKeyPress?: (e: KeyboardEvent<HTMLTextAreaElement>) => void;
    /**
     * A callback to call when pasting a value.
     */
    onPaste?: ClipboardEventHandler<HTMLTextAreaElement>;
    /**
     * Max number of characters a user can type.
     */
    maxNumberOfCharacters?: number;
    /**
     * Max number of words a user can type.
     */
    maxNumberOfWords?: number;
    /**
     * Clear message to show when hovering over the clear button.
     */
    clearMessage: string;
    /**
     * Search message to show when hovering over the search button.
     */
    searchMessage: string;
    /**
     * Indicates if the searchBox should allow multiple lines.
     */
    allowMultipleLines?: boolean;
    /**
     * Slots for rendering custom content in different parts of the search box.
     */
    slots?: BlokSearchBoxSlots;
    /**
     * Indicates if the searchBox should have a limited width.
     */
    hasLimitedWidth?: boolean;
    /**
     * When true, the multiline search box will expand and overlay content below it.
     * When false, it will push content down as it expands.
     */
    expandOverContent?: boolean;
    /**
     * Icon to show in the search button.
     */
    searchIcon?: string;
    /**
     * An optional search icon image to show in the search button instead of a normal icon (e.g. for AI search).
     */
    searchIconImage?: string;
    /**
     * Indicates if the searchBox should be shown with specific AI styles.
     */
    applyAiStyles?: boolean;
    /**
     * A function to handle pasted text.
     * @param text
     */
    handlePastedText?: (pastedText: string, searchBoxValue: string) => string;
    /**
     * Indicates if the searchBox should show a character counter.
     * For this a maxNumberOfCharacters prop is required.
     */
    showCounter?: boolean;
    /**
     * When provided, text matching this regular expression will be exempt from character and word limitations.
     * For example, when the text contains id= we ignore the limitations.
     */
    ignoreLimitationsRegex?: RegExp;
    /**
     * A function to transform the typed text.
     */
    transformTypedText?: (text: string) => string;
    ref?: Ref<HTMLTextAreaElement>;
}
export declare const truncateString: (str: string, maxChars: Optional<number>, maxWords: Optional<number>) => string;
export declare const BlokSearchBox: FC<BlokSearchBoxProps>;