@progress/kendo-react-grid/toolbar-tools/smartbox/listItemRenders.d.ts

React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { ListItemProps, ListGroupItemProps } from '@progress/kendo-react-dropdowns';
import { SmartBoxMode, HistoryItem } from './interfaces/index.js';
import * as React from 'react';
/**
 * Represents the configuration options for creating a custom list item render function.
 * This interface is used to customize how items are rendered in the SmartBox dropdown list.
 *
 * @hidden
 */
interface CreateListItemRenderProps {
    /**
     * Specifies a custom render function for history items.
     * When provided, this function will be used to render items that are marked as history items
     * (items with `isHistoryItem: true` in their data).
     *
     * @param item - The history item containing text content and timestamp information.
     * @param onClick - Callback function to handle click events on the history item.
     *                  Invoke this to select the history item and populate the search input.
     * @returns A React node representing the custom rendered history item.
     *
     * @example
     * ```tsx
     * historyItemRender={(item, onClick) => (
     *   <li className="custom-history-item" onClick={onClick}>
     *     <span>{item.text}</span>
     *     <span className="timestamp">{item.timestamp.toLocaleString()}</span>
     *   </li>
     * )}
     * ```
     */
    historyItemRender?: (item: HistoryItem, onClick: () => void) => React.ReactNode;
    /**
     * Specifies a custom render function for prompt suggestions.
     * When provided, this function will be used to render items that are not history items
     * (e.g., AI prompt suggestions in the dropdown list).
     *
     * @param text - The text content of the prompt suggestion.
     * @param onClick - Callback function to handle click events on the prompt suggestion.
     *                  Invoke this to select the suggestion and populate the search input.
     * @returns A React node representing the custom rendered prompt suggestion.
     *
     * @example
     * ```tsx
     * promptSuggestionRender={(text, onClick) => (
     *   <li className="custom-suggestion" onClick={onClick}>
     *     <span className="suggestion-icon">💡</span>
     *     <span>{text}</span>
     *   </li>
     * )}
     * ```
     */
    promptSuggestionRender?: (text: string, onClick: () => void) => React.ReactNode;
    /**
     * Specifies the callback function to handle click events on list items.
     * This function is called internally when a user clicks on any list item,
     * populating the search input with the selected item's text.
     *
     * @param text - The text content of the clicked list item.
     */
    handleListItemClick: (text: string) => void;
}
/**
 * Creates a custom list item render function for the SmartBox dropdown.
 * This factory function returns a render function that handles both history items
 * and prompt suggestions with support for custom rendering.
 *
 * @param props - The configuration options for creating the list item render function.
 * @returns A render function compatible with KendoReact ComboBox/DropDownList itemRender prop.
 *
 * @example
 * ```tsx
 * const itemRender = createListItemRender({
 *   historyItemRender: (item, onClick) => (
 *     <li onClick={onClick}>{item.text}</li>
 *   ),
 *   handleListItemClick: (text) => console.log('Selected:', text)
 * });
 * ```
 *
 * @hidden
 */
export declare function createListItemRender({ historyItemRender, promptSuggestionRender, handleListItemClick }: CreateListItemRenderProps): (li: React.ReactElement<any>, itemProps: ListItemProps) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;
/**
 * Renders a list item for search mode selection in the SmartBox.
 * Displays a check icon for the currently selected mode and shows
 * both the mode name and description.
 *
 * @param li - The React element representing the list item container.
 * @param itemProps - The props for the list item including the data item.
 * @returns A cloned React element with the customized content.
 *
 * @example
 * ```tsx
 * <ComboBox itemRender={searchModeItemRender} />
 * ```
 * @hidden
 */
export declare function searchModeItemRender(li: React.ReactElement<any>, itemProps: ListItemProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
/**
 * Renders a group header item in the SmartBox dropdown list.
 * Displays an optional SVG icon followed by the group name.
 * Used for visually separating different categories of items (e.g., history vs suggestions).
 *
 * @param li - The React element representing the group header container.
 * @param groupProps - The props for the group item including group name and optional icon.
 * @returns A cloned React element with the customized group header content.
 *
 * @example
 * ```tsx
 * <ComboBox groupHeaderItemRender={listGroupHeaderRender} />
 * ```
 * @hidden
 */
export declare function listGroupHeaderRender(li: React.ReactElement<HTMLLIElement>, groupProps: ListGroupItemProps): React.ReactElement<HTMLLIElement, string | React.JSXElementConstructor<any>>;
/**
 * Represents the props for the NoDataRender component.
 * This component displays a message when there are no items to show in the SmartBox dropdown,
 * such as when there is no search history or no matching results.
 *
 * @hidden
 */
interface NoDataRenderProps {
    /**
     * Specifies the currently selected SmartBox mode.
     * Used to determine the appropriate "no data" message to display based on the active context.
     *
     * The available options are:
     * - `'aiAssistant'` - Displays "No previous prompts" message for AI assistant mode.
     * - `'search'` - Displays "No previous searches" message for standard search mode.
     * - `'semanticSearch'` - Displays "No previous searches" message for semantic search mode.
     * - `null` - Defaults to displaying "No previous searches" message.
     *
     * @example
     * ```tsx
     * <NoDataRender selectedView="aiAssistant" />
     * ```
     */
    readonly selectedView: SmartBoxMode | null;
}
/**
 * Renders a "no data" message when the SmartBox dropdown has no items to display.
 * Shows an icon and localized message based on the currently selected SmartBox mode.
 *
 * @param props - The component props.
 * @returns A React element displaying the appropriate "no data" message.
 *
 * @example
 * ```tsx
 * <NoDataRender selectedView="aiAssistant" />
 * // Displays: "No previous prompts"
 *
 * <NoDataRender selectedView="search" />
 * // Displays: "No previous searches"
 * ```
 * @hidden
 */
export declare function NoDataRender({ selectedView }: NoDataRenderProps): React.JSX.Element;
export {};