@progress/kendo-react-grid 11.3.1 → 11.4.0-develop.1

package/index.d.mts

@@ -5,6 +5,10 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
+import { AIPromptCardInterface } from '@progress/kendo-react-conversational-ui';
+import { AIPromptOutputInterface } from '@progress/kendo-react-conversational-ui';
+import { AxiosRequestConfig } from 'axios';
+import { AxiosResponse } from 'axios';
 import { BaseEvent } from '@progress/kendo-react-common';
 import { ButtonProps } from '@progress/kendo-react-buttons';
 import { CellProps } from '@progress/kendo-react-data-tools';
@@ -13,6 +17,7 @@ import { ColumnBaseProps } from '@progress/kendo-react-data-tools';
 import { ColumnSortSettings } from '@progress/kendo-react-data-tools';
 import { ComponentType } from 'react';
 import { CompositeFilterDescriptor } from '@progress/kendo-data-query';
+import { CustomComponent } from '@progress/kendo-react-common';
 import { DataResult } from '@progress/kendo-data-query';
 import { DetailExpandDescriptor } from '@progress/kendo-react-data-tools';
 import { DialogProps } from '@progress/kendo-react-dialogs';
@@ -20,6 +25,7 @@ import { DragClue } from '@progress/kendo-react-data-tools';
 import { DropClue } from '@progress/kendo-react-data-tools';
 import { EditDescriptor } from '@progress/kendo-react-data-tools';
 import { FieldProps } from '@progress/kendo-react-form';
+import { FilterDescriptor } from '@progress/kendo-data-query';
 import { FilterOperator } from '@progress/kendo-react-data-tools';
 import { getSelectedState } from '@progress/kendo-react-data-tools';
 import { getSelectedStateFromKeyDown } from '@progress/kendo-react-data-tools';
@@ -39,8 +45,10 @@ import { MenuSelectEvent } from '@progress/kendo-react-layout';
 import { NavigatableSettings } from '@progress/kendo-react-data-tools';
 import { NormalizedDragEvent } from '@progress/kendo-react-common';
 import { Offset } from '@progress/kendo-react-popup';
+import { outputViewDefaults } from '@progress/kendo-react-conversational-ui';
 import { PagerProps } from '@progress/kendo-react-data-tools';
 import { PagerTargetEvent } from '@progress/kendo-react-data-tools';
+import { promptViewDefaults } from '@progress/kendo-react-conversational-ui';
 import * as React_2 from 'react';
 import { ReactElement } from 'react';
 import { SearchField } from '@progress/kendo-react-data-tools';
@@ -59,6 +67,7 @@ import { TableKeyDownEvent } from '@progress/kendo-react-data-tools';
 import { TableSelectableMode } from '@progress/kendo-react-data-tools';
 import { TableSelectableSettings } from '@progress/kendo-react-data-tools';
 import { TableSelectionChangeEvent } from '@progress/kendo-react-data-tools';
+import { TextAreaProps } from '@progress/kendo-react-inputs';
 import { TextBoxChangeEvent } from '@progress/kendo-react-inputs';
 import { TextBoxProps } from '@progress/kendo-react-inputs';
 import { ToolbarProps } from '@progress/kendo-react-buttons';
@@ -91,6 +100,28 @@ export declare const cellInputChange: (value: any, e: React_2.SyntheticEvent<any
  */
 export declare const cellOperatorChange: (event: any, currentValue: any, onChange: Function) => void;
 
+/**
+ * Represents a composite highlight descriptor for a grid.
+ * It contains a map of cell identifiers to their highlight status,
+ * an array of filter descriptors, and the logical operator used to combine the filters.
+ */
+export declare interface CompositeHighlightDescriptor {
+    /**
+     * A map of cell identifiers to a boolean indicating whether the cell should be highlighted.
+     */
+    cells: {
+        [key: string]: boolean;
+    };
+    /**
+     * An array of filter descriptors representing the filters applied to the grid.
+     */
+    filters: FilterDescriptor[];
+    /**
+     * The logical operator ('and' | 'or') used to combine the filters.
+     */
+    logic: 'and' | 'or';
+}
+
 /**
  * @hidden
  */
@@ -313,6 +344,139 @@ export declare const GRID_PREVENT_SELECTION_ELEMENT = "data-prevent-selection";
 /** The attribute required by the Grid selection on Grid `tr` elements. */
 export declare const GRID_ROW_INDEX_ATTRIBUTE = "data-grid-row-index";
 
+export declare const GridAIPrompt: (props: GridAIPromptProps) => JSX.Element;
+
+/**
+ * Props for the `GridAIPrompt` component, which provides AI-powered prompt and output functionality in a grid toolbar.
+ *
+ * @example
+ * ```tsx
+ * <GridAIPrompt
+ *   promptValue="Summarize this data"
+ *   outputs={[{ text: "Summary...", ... }]}
+ *   streaming={true}
+ *   onPromptRequest={handlePrompt}
+ *   suggestionsList={["Summarize", "Explain", "Generate chart"]}
+ * />
+ * ```
+ */
+export declare interface GridAIPromptProps {
+    /**
+     * List of AI-generated outputs to display.
+     *
+     * @example
+     * outputs={[{ text: "AI output 1" }, { text: "AI output 2" }]}
+     */
+    outputs?: AIPromptOutputInterface[];
+    /**
+     * Indicates whether the prompt is currently streaming or processing.
+     *
+     * @example
+     * streaming={true}
+     */
+    streaming?: boolean;
+    /**
+     * Configuration for the output card displaying AI results.
+     *
+     * @example
+     * outputCard={{ title: "AI Result", content: "..." }}
+     */
+    outputCard?: AIPromptCardInterface;
+    /**
+     * Current value of the prompt input field.
+     *
+     * @example
+     * promptValue="Describe the selected rows"
+     */
+    promptValue?: string;
+    /**
+     * Placeholder text for the prompt input field.
+     *
+     * @example
+     * promptPlaceHolder="Type your question here..."
+     */
+    promptPlaceHolder?: string;
+    /**
+     * Custom component to render the prompt input field.
+     *
+     * @example
+     * promptInput={CustomTextArea}
+     */
+    promptInput?: CustomComponent<TextAreaProps>;
+    /**
+     * Callback fired when the active view changes.
+     *
+     * @param viewName The name of the new active view.
+     * @example
+     * onActiveViewChange={(view) => setActiveView(view)}
+     */
+    onActiveViewChange?: (viewName: string) => void;
+    /**
+     * Custom component to render the generate button.
+     *
+     * @example
+     * generateButton={CustomGenerateButton}
+     */
+    generateButton?: CustomComponent<ButtonProps>;
+    /**
+     * Name of the currently active view.
+     *
+     * @example
+     * activeView="prompt"
+     */
+    activeView?: string;
+    /**
+     * Array of toolbar items to display, can include prompt or output view defaults.
+     *
+     * @example
+     * toolbarItems={[promptViewDefaults, outputViewDefaults]}
+     */
+    toolbarItems?: Array<typeof promptViewDefaults | typeof outputViewDefaults>;
+    /**
+     * Callback fired when the user clicks the Copy button in the output card.
+     *
+     * @example
+     * onCopy={() => copyToClipboard()}
+     */
+    onCopy?: () => void;
+    /**
+     * Callback fired when the user rates the output.
+     *
+     * @example
+     * onOutputRating={() => handleRating()}
+     */
+    onOutputRating?: () => void;
+    /**
+     * Callback fired when the user submits a prompt request.
+     *
+     * @param prompt The prompt text submitted by the user.
+     * @example
+     * onPromptRequest={(prompt) => sendPrompt(prompt)}
+     */
+    onPromptRequest?: (prompt: string) => void;
+    /**
+     * List of prompt suggestions to display to the user.
+     *
+     * @example
+     * suggestionsList={["Summarize", "Explain", "Generate chart"]}
+     */
+    suggestionsList?: string[];
+    /**
+     * Callback fired when the user cancels the current operation.
+     *
+     * @example
+     * onCancel={() => cancelPrompt()}
+     */
+    onCancel?: () => void;
+    /**
+     * Callback fired when the user closes the current operation.
+     *
+     * @example
+     * onClose={() => closePrompt()}
+     */
+    onClose?: () => void;
+}
+
 /**
  * @hidden
  */
@@ -2070,6 +2234,22 @@ export declare const GridHierarchyCell: (props: {
     cellProps: GridCellProps;
 }) => JSX.Element | null;
 
+/**
+ * Represents the object of the `onHighlightChange` Grid event.
+ */
+export declare interface GridHighlightChangeEvent {
+    /**
+     * The new highlight descriptor based on the user action.
+     */
+    highlight: GridHighlightDescriptor;
+}
+
+export declare interface GridHighlightDescriptor {
+    [id: string]: boolean | {
+        [id: string]: boolean;
+    };
+}
+
 /**
  * Represents the object of the `onItemChange` Grid event.
  */
@@ -2124,6 +2304,10 @@ export declare const gridMessages: {
     "grid.adaptiveToolbarSortTitle": string;
     "grid.adaptiveToolbarGroupTitle": string;
     "grid.toolbarSort": string;
+    "grid.toolbarAI": string;
+    "grid.toolbarAIApply": string;
+    "grid.aIResponseData": string;
+    "grid.generatedWithAI": string;
     "grid.toolbarGroup": string;
     "grid.toolbarFilter": string;
     "grid.toolbarColumnsChooser": string;
@@ -2542,6 +2726,17 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      * ```
      */
     onFilterChange?: (event: GridFilterChangeEvent) => void;
+    /**
+     * Fires when the Grid highlight is modified. You must handle the event and filter the data.
+     *
+     * @example
+     * ```jsx
+     * <Grid
+     *   onHighlightChange={(event) => console.log('Highlight changed:', event.highlight)}
+     * />
+     * ```
+     */
+    onHighlightChange?: (event: GridHighlightChangeEvent) => void;
     /**
      * Specifies whether the loader of the Grid will be displayed.
      *
@@ -2834,11 +3029,7 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      * <Grid highlight={{ ['item-data-key-id']: { name: true } }} />
      * ```
      */
-    highlight?: {
-        [id: string]: boolean | {
-            [id: string]: boolean;
-        };
-    };
+    highlight?: GridHighlightDescriptor;
     /**
      * The default `select` state applied to the Grid when using uncontrolled mode.
      *
@@ -3562,6 +3753,135 @@ export declare const GridToolbar: {
     displayName: string;
 };
 
+/**
+ * Represents the GridToolbarAI component.
+ */
+export declare const GridToolbarAI: {
+    (props: GridToolbarAIProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface GridToolbarAIProps {
+    /**
+     * Defines the URL to which the request will be sent.
+     *
+     * @example
+     * ```jsx
+     * <GridToolbarAI requestUrl="https://example.com/api/ai" />
+     * ```
+     */
+    requestUrl?: string;
+    /**
+     * Defines the options for the axios request.
+     *
+     * @example
+     * ```jsx
+     * <GridToolbarAI requestOptions={{ timeout: 5000 }} />
+     * ```
+     */
+    requestOptions?: AxiosRequestConfig;
+    /**
+     * Called before the request is sent.
+     *
+     * @example
+     * ```jsx
+     * <GridToolbarAI onPromptRequest={(request) => console.log(request)} />
+     * ```
+     */
+    onPromptRequest?: (request: GridToolbarAIRequestData, isRetry?: boolean) => void;
+    /**
+     * Called when the response is received.
+     *
+     * @example
+     * ```jsx
+     * <GridToolbarAI onResponseSuccess={(response) => console.log(response)} />
+     * ```
+     */
+    onResponseSuccess?: (response: AxiosResponse<any>) => void;
+    /**
+     * Called when the response returns an error.
+     *
+     * @example
+     * ```jsx
+     * <GridToolbarAI onResponseError={(error) => console.error(error)} />
+     * ```
+     */
+    onResponseError?: (error: any) => void;
+    /**
+     * Defines the user role for the request. Defaults to 'user'.
+     *
+     * @example
+     * ```jsx
+     * <GridToolbarAI role="admin" />
+     * ```
+     */
+    role?: string;
+    /**
+     * Customizes the AI prompt component.
+     *
+     * @example
+     * ```jsx
+     * <GridToolbarAI gridAIPrompt={MyCustomPromptComponent} />
+     * ```
+     */
+    gridAIPrompt?: CustomComponent<GridAIPromptProps>;
+    /**
+     * Defines the icon rendered in the GridToolbarAI tool ([see example]({% slug overview_icon %})).
+     *
+     * @example
+     * ```jsx
+     * <GridToolbarAI icon="home" />
+     * ```
+     */
+    icon?: string;
+    /**
+     * Defines the SVG icon rendered in the GridToolbarAI tool ([see example]({% slug overview_svgicon %})).
+     *
+     * @example
+     * ```jsx
+     * import { gearIcon } from '@progress/kendo-svg-icons';
+     *
+     * <GridToolbarAI svgIcon={gearIcon} />
+     * ```
+     */
+    svgIcon?: SVGIcon_2;
+    /**
+     * Specifies if the popup will be displayed.
+     *
+     * @example
+     * ```jsx
+     * <GridToolbarAI show={true} />
+     * ```
+     */
+    show?: boolean;
+    /**
+     * The method that will be called to close the column menu.
+     *
+     * @example
+     * ```jsx
+     * <GridToolbarAI onCloseWindow={() => console.log('close menu');} />
+     * ```
+     */
+    onCloseWindow?: () => void;
+}
+
+export declare interface GridToolbarAIRequestData {
+    role: string;
+    columns: Array<{
+        field: string;
+    }>;
+    headers: Record<string, string>;
+    promptMessage: string;
+    requestOptions: {
+        url?: string;
+        method?: string;
+        withCredentials?: boolean;
+        responseType?: string;
+        cancelToken?: any;
+        [key: string]: any;
+    };
+}
+
 /**
  * Represents the GridToolbarCheckboxFilter component.
  */