@progress/kendo-react-grid 12.0.0 → 12.0.1

package/index.d.mts

@@ -56,6 +56,7 @@ import { SelectDescriptor } from '@progress/kendo-react-data-tools';
 import { setSelectedState } from '@progress/kendo-react-data-tools';
 import { SortDescriptor } from '@progress/kendo-data-query';
 import { SortSettings } from '@progress/kendo-react-data-tools';
+import { SpeechToTextButtonProps } from '@progress/kendo-react-buttons';
 import { State } from '@progress/kendo-data-query';
 import { SVGIcon } from '@progress/kendo-react-common';
 import { SVGIcon as SVGIcon_2 } from '@progress/kendo-svg-icons';
@@ -373,6 +374,15 @@ export declare interface GridAIPromptProps {
      * outputs={[{ text: "AI output 1" }, { text: "AI output 2" }]}
      */
     outputs?: AIPromptOutputInterface[];
+    /**
+     * Enables the speech-to-text functionality for the input of the GridToolbarAIAssistant.
+     *
+     * @example
+     * ```jsx
+     * <GridToolbarAIAssistant enableSpeechToText={true} />
+     * ```
+     */
+    enableSpeechToText?: boolean | SpeechToTextButtonProps;
     /**
      * Indicates whether the prompt is currently streaming or processing.
      *
@@ -608,31 +618,238 @@ export declare interface GridCellProps extends Omit<CellProps, 'onChange' | 'ren
  * The settings of the cells prop options.
  */
 export declare interface GridCellsSettings {
+    /**
+     * Custom component for rendering the header cell.
+     *
+     * @example
+     * ```tsx
+     * import { MyHeaderCell } from './MyHeaderCell';
+     * <Grid cells={{ headerCell: MyHeaderCell }} />
+     * ```
+     */
     headerCell?: ComponentType<GridCustomHeaderCellProps>;
+    /**
+     * Custom component for rendering the filter cell.
+     *
+     * @example
+     * ```tsx
+     * import { MyFilterCell } from './MyFilterCell';
+     * <Grid cells={{ filterCell: MyFilterCell }} />
+     * ```
+     */
     filterCell?: ComponentType<GridCustomFilterCellProps>;
+    /**
+     * Custom component for rendering the footer cell.
+     *
+     * @example
+     * ```tsx
+     * import { MyFooterCell } from './MyFooterCell';
+     * <Grid cells={{ footerCell: MyFooterCell }} />
+     * ```
+     */
     footerCell?: ComponentType<GridCustomFooterCellProps>;
+    /**
+     * Custom component for rendering the group header cell.
+     *
+     * @example
+     * ```tsx
+     * import { MyGroupHeaderCell } from './MyGroupHeaderCell';
+     * <Grid cells={{ groupHeader: MyGroupHeaderCell }} />
+     * ```
+     */
     groupHeader?: ComponentType<GridCustomCellProps>;
+    /**
+     * Custom component for rendering the data cell.
+     *
+     * @example
+     * ```tsx
+     * import { MyDataCell } from './MyDataCell';
+     * <Grid cells={{ data: MyDataCell }} />
+     * ```
+     */
     data?: ComponentType<GridCustomCellProps>;
+    /**
+     * Custom component for rendering the group footer cell.
+     *
+     * @example
+     * ```tsx
+     * import { MyGroupFooterCell } from './MyGroupFooterCell';
+     * <Grid cells={{ groupFooter: MyGroupFooterCell }} />
+     * ```
+     */
     groupFooter?: ComponentType<GridCustomCellProps>;
+    /**
+     * Custom cell components for selection columns.
+     *
+     * @example
+     * ```tsx
+     * import { MySelectDataCell } from './MySelectDataCell';
+     * <Grid cells={{ select: { data: MySelectDataCell } }} />
+     * ```
+     */
     select?: {
+        /**
+         * Custom component for rendering the group header cell in selection columns.
+         *
+         * @example
+         * ```tsx
+         * import { MySelectGroupHeaderCell } from './MySelectGroupHeaderCell';
+         * <Grid cells={{ select: { groupHeader: MySelectGroupHeaderCell } }} />
+         * ```
+         */
         groupHeader?: ComponentType<GridCustomCellProps>;
+        /**
+         * Custom component for rendering the data cell in selection columns.
+         *
+         * @example
+         * ```tsx
+         * import { MySelectDataCell } from './MySelectDataCell';
+         * <Grid cells={{ select: { data: MySelectDataCell } }} />
+         * ```
+         */
         data?: ComponentType<GridCustomCellProps>;
+        /**
+         * Custom component for rendering the group footer cell in selection columns.
+         *
+         * @example
+         * ```tsx
+         * import { MySelectGroupFooterCell } from './MySelectGroupFooterCell';
+         * <Grid cells={{ select: { groupFooter: MySelectGroupFooterCell } }} />
+         * ```
+         */
         groupFooter?: ComponentType<GridCustomCellProps>;
     };
+    /**
+     * Custom cell components for hierarchy columns.
+     *
+     * @example
+     * ```tsx
+     * import { MyHierarchyDataCell } from './MyHierarchyDataCell';
+     * <Grid cells={{ hierarchy: { data: MyHierarchyDataCell } }} />
+     * ```
+     */
     hierarchy?: {
+        /**
+         * Custom component for rendering the group header cell in hierarchy columns.
+         *
+         * @example
+         * ```tsx
+         * import { MyHierarchyGroupHeaderCell } from './MyHierarchyGroupHeaderCell';
+         * <Grid cells={{ hierarchy: { groupHeader: MyHierarchyGroupHeaderCell } }} />
+         * ```
+         */
         groupHeader?: ComponentType<GridCustomCellProps>;
+        /**
+         * Custom component for rendering the data cell in hierarchy columns.
+         *
+         * @example
+         * ```tsx
+         * import { MyHierarchyDataCell } from './MyHierarchyDataCell';
+         * <Grid cells={{ hierarchy: { data: MyHierarchyDataCell } }} />
+         * ```
+         */
         data?: ComponentType<GridCustomCellProps>;
+        /**
+         * Custom component for rendering the group footer cell in hierarchy columns.
+         *
+         * @example
+         * ```tsx
+         * import { MyHierarchyGroupFooterCell } from './MyHierarchyGroupFooterCell';
+         * <Grid cells={{ hierarchy: { groupFooter: MyHierarchyGroupFooterCell } }} />
+         * ```
+         */
         groupFooter?: ComponentType<GridCustomCellProps>;
     };
+    /**
+     * Custom cell components for group columns.
+     *
+     * @example
+     * ```tsx
+     * import { MyGroupDataCell } from './MyGroupDataCell';
+     * <Grid cells={{ group: { data: MyGroupDataCell } }} />
+     * ```
+     */
     group?: {
+        /**
+         * Custom component for rendering the group header cell in group columns.
+         *
+         * @example
+         * ```tsx
+         * import { MyGroupGroupHeaderCell } from './MyGroupGroupHeaderCell';
+         * <Grid cells={{ group: { groupHeader: MyGroupGroupHeaderCell } }} />
+         * ```
+         */
         groupHeader?: ComponentType<GridCustomCellProps>;
+        /**
+         * Custom component for rendering the data cell in group columns.
+         *
+         * @example
+         * ```tsx
+         * import { MyGroupDataCell } from './MyGroupDataCell';
+         * <Grid cells={{ group: { data: MyGroupDataCell } }} />
+         * ```
+         */
         data?: ComponentType<GridCustomCellProps>;
+        /**
+         * Custom component for rendering the group footer cell in group columns.
+         *
+         * @example
+         * ```tsx
+         * import { MyGroupGroupFooterCell } from './MyGroupGroupFooterCell';
+         * <Grid cells={{ group: { groupFooter: MyGroupGroupFooterCell } }} />
+         * ```
+         */
         groupFooter?: ComponentType<GridCustomCellProps>;
     };
+    /**
+     * Custom cell components for edit columns.
+     *
+     * @example
+     * ```tsx
+     * import { MyTextEditCell } from './MyTextEditCell';
+     * <Grid cells={{ edit: { text: MyTextEditCell } }} />
+     * ```
+     */
     edit?: {
+        /**
+         * Custom component for rendering the text edit cell.
+         *
+         * @example
+         * ```tsx
+         * import { MyTextEditCell } from './MyTextEditCell';
+         * <Grid cells={{ edit: { text: MyTextEditCell } }} />
+         * ```
+         */
         text?: ComponentType<GridCustomCellProps>;
+        /**
+         * Custom component for rendering the numeric edit cell.
+         *
+         * @example
+         * ```tsx
+         * import { MyNumericEditCell } from './MyNumericEditCell';
+         * <Grid cells={{ edit: { numeric: MyNumericEditCell } }} />
+         * ```
+         */
         numeric?: ComponentType<GridCustomCellProps>;
+        /**
+         * Custom component for rendering the boolean edit cell.
+         *
+         * @example
+         * ```tsx
+         * import { MyBooleanEditCell } from './MyBooleanEditCell';
+         * <Grid cells={{ edit: { boolean: MyBooleanEditCell } }} />
+         * ```
+         */
         boolean?: ComponentType<GridCustomCellProps>;
+        /**
+         * Custom component for rendering the date edit cell.
+         *
+         * @example
+         * ```tsx
+         * import { MyDateEditCell } from './MyDateEditCell';
+         * <Grid cells={{ edit: { date: MyDateEditCell } }} />
+         * ```
+         */
         date?: ComponentType<GridCustomCellProps>;
     };
 }
@@ -2127,9 +2344,9 @@ export declare interface GridHandle {
      *                 <GridColumn field="foo" />
      *                 <GridColumn field="bar" />
      *             </Grid>
-     *             <button onClick={() => console.log(JSON.stringify(grid.current?.columns))}>
+     *             <Button onClick={() => console.log(JSON.stringify(grid.current?.columns))}>
      *                 log current properties into browser console.
-     *             </button>
+     *             </Button>
      *         </div>
      *     );
      * };
@@ -2176,9 +2393,9 @@ export declare interface GridHandle {
  *           colSpan={1}>
  *           <span>
  *               {props.title || props.field + ' '}
- *               <button onClick={() => setBarDetails(!barDetails)}>
+ *               <Button onClick={() => setBarDetails(!barDetails)}>
  *                   {barDetails ? 'collapse' : 'expand'}
- *               </button>
+ *               </Button>
  *               {props.children}
  *           </span>
  *       </td>
@@ -3740,9 +3957,9 @@ export declare interface GridThAttributes extends HeaderThElementProps {
  *     return (
  *         <Grid data={data}>
  *             <GridToolbar>
- *                 <button title="Click" className="k-button k-primary" onClick={customClick}>
+ *                 <Button title="Click" onClick={customClick}>
  *                     Click
- *                 </button>
+ *                 </Button>
  *             </GridToolbar>
  *         </Grid>
  *     );
@@ -3761,7 +3978,7 @@ export declare const GridToolbar: {
  */
 export declare const GridToolbarAIAssistant: React_2.ForwardRefExoticComponent<GridToolbarAIAssistantProps & React_2.RefAttributes<GridToolbarAIAssistantHandle>>;
 
-declare interface GridToolbarAIAssistantHandle {
+export declare interface GridToolbarAIAssistantHandle {
     show: () => void;
     hide: () => void;
 }
@@ -3776,6 +3993,15 @@ export declare interface GridToolbarAIAssistantProps {
      * ```
      */
     requestUrl?: string;
+    /**
+     * Enables the speech-to-text functionality for the input of the GridToolbarAIAssistant.
+     *
+     * @example
+     * ```jsx
+     * <GridToolbarAIAssistant enableSpeechToText={true} />
+     * ```
+     */
+    enableSpeechToText?: boolean | SpeechToTextButtonProps;
     /**
      * Defines the placeholder text for the AI prompt input.
      *

package/index.d.ts

@@ -56,6 +56,7 @@ import { SelectDescriptor } from '@progress/kendo-react-data-tools';
 import { setSelectedState } from '@progress/kendo-react-data-tools';
 import { SortDescriptor } from '@progress/kendo-data-query';
 import { SortSettings } from '@progress/kendo-react-data-tools';
+import { SpeechToTextButtonProps } from '@progress/kendo-react-buttons';
 import { State } from '@progress/kendo-data-query';
 import { SVGIcon } from '@progress/kendo-react-common';
 import { SVGIcon as SVGIcon_2 } from '@progress/kendo-svg-icons';
@@ -373,6 +374,15 @@ export declare interface GridAIPromptProps {
      * outputs={[{ text: "AI output 1" }, { text: "AI output 2" }]}
      */
     outputs?: AIPromptOutputInterface[];
+    /**
+     * Enables the speech-to-text functionality for the input of the GridToolbarAIAssistant.
+     *
+     * @example
+     * ```jsx
+     * <GridToolbarAIAssistant enableSpeechToText={true} />
+     * ```
+     */
+    enableSpeechToText?: boolean | SpeechToTextButtonProps;
     /**
      * Indicates whether the prompt is currently streaming or processing.
      *
@@ -608,31 +618,238 @@ export declare interface GridCellProps extends Omit<CellProps, 'onChange' | 'ren
  * The settings of the cells prop options.
  */
 export declare interface GridCellsSettings {
+    /**
+     * Custom component for rendering the header cell.
+     *
+     * @example
+     * ```tsx
+     * import { MyHeaderCell } from './MyHeaderCell';
+     * <Grid cells={{ headerCell: MyHeaderCell }} />
+     * ```
+     */
     headerCell?: ComponentType<GridCustomHeaderCellProps>;
+    /**
+     * Custom component for rendering the filter cell.
+     *
+     * @example
+     * ```tsx
+     * import { MyFilterCell } from './MyFilterCell';
+     * <Grid cells={{ filterCell: MyFilterCell }} />
+     * ```
+     */
     filterCell?: ComponentType<GridCustomFilterCellProps>;
+    /**
+     * Custom component for rendering the footer cell.
+     *
+     * @example
+     * ```tsx
+     * import { MyFooterCell } from './MyFooterCell';
+     * <Grid cells={{ footerCell: MyFooterCell }} />
+     * ```
+     */
     footerCell?: ComponentType<GridCustomFooterCellProps>;
+    /**
+     * Custom component for rendering the group header cell.
+     *
+     * @example
+     * ```tsx
+     * import { MyGroupHeaderCell } from './MyGroupHeaderCell';
+     * <Grid cells={{ groupHeader: MyGroupHeaderCell }} />
+     * ```
+     */
     groupHeader?: ComponentType<GridCustomCellProps>;
+    /**
+     * Custom component for rendering the data cell.
+     *
+     * @example
+     * ```tsx
+     * import { MyDataCell } from './MyDataCell';
+     * <Grid cells={{ data: MyDataCell }} />
+     * ```
+     */
     data?: ComponentType<GridCustomCellProps>;
+    /**
+     * Custom component for rendering the group footer cell.
+     *
+     * @example
+     * ```tsx
+     * import { MyGroupFooterCell } from './MyGroupFooterCell';
+     * <Grid cells={{ groupFooter: MyGroupFooterCell }} />
+     * ```
+     */
     groupFooter?: ComponentType<GridCustomCellProps>;
+    /**
+     * Custom cell components for selection columns.
+     *
+     * @example
+     * ```tsx
+     * import { MySelectDataCell } from './MySelectDataCell';
+     * <Grid cells={{ select: { data: MySelectDataCell } }} />
+     * ```
+     */
     select?: {
+        /**
+         * Custom component for rendering the group header cell in selection columns.
+         *
+         * @example
+         * ```tsx
+         * import { MySelectGroupHeaderCell } from './MySelectGroupHeaderCell';
+         * <Grid cells={{ select: { groupHeader: MySelectGroupHeaderCell } }} />
+         * ```
+         */
         groupHeader?: ComponentType<GridCustomCellProps>;
+        /**
+         * Custom component for rendering the data cell in selection columns.
+         *
+         * @example
+         * ```tsx
+         * import { MySelectDataCell } from './MySelectDataCell';
+         * <Grid cells={{ select: { data: MySelectDataCell } }} />
+         * ```
+         */
         data?: ComponentType<GridCustomCellProps>;
+        /**
+         * Custom component for rendering the group footer cell in selection columns.
+         *
+         * @example
+         * ```tsx
+         * import { MySelectGroupFooterCell } from './MySelectGroupFooterCell';
+         * <Grid cells={{ select: { groupFooter: MySelectGroupFooterCell } }} />
+         * ```
+         */
         groupFooter?: ComponentType<GridCustomCellProps>;
     };
+    /**
+     * Custom cell components for hierarchy columns.
+     *
+     * @example
+     * ```tsx
+     * import { MyHierarchyDataCell } from './MyHierarchyDataCell';
+     * <Grid cells={{ hierarchy: { data: MyHierarchyDataCell } }} />
+     * ```
+     */
     hierarchy?: {
+        /**
+         * Custom component for rendering the group header cell in hierarchy columns.
+         *
+         * @example
+         * ```tsx
+         * import { MyHierarchyGroupHeaderCell } from './MyHierarchyGroupHeaderCell';
+         * <Grid cells={{ hierarchy: { groupHeader: MyHierarchyGroupHeaderCell } }} />
+         * ```
+         */
         groupHeader?: ComponentType<GridCustomCellProps>;
+        /**
+         * Custom component for rendering the data cell in hierarchy columns.
+         *
+         * @example
+         * ```tsx
+         * import { MyHierarchyDataCell } from './MyHierarchyDataCell';
+         * <Grid cells={{ hierarchy: { data: MyHierarchyDataCell } }} />
+         * ```
+         */
         data?: ComponentType<GridCustomCellProps>;
+        /**
+         * Custom component for rendering the group footer cell in hierarchy columns.
+         *
+         * @example
+         * ```tsx
+         * import { MyHierarchyGroupFooterCell } from './MyHierarchyGroupFooterCell';
+         * <Grid cells={{ hierarchy: { groupFooter: MyHierarchyGroupFooterCell } }} />
+         * ```
+         */
         groupFooter?: ComponentType<GridCustomCellProps>;
     };
+    /**
+     * Custom cell components for group columns.
+     *
+     * @example
+     * ```tsx
+     * import { MyGroupDataCell } from './MyGroupDataCell';
+     * <Grid cells={{ group: { data: MyGroupDataCell } }} />
+     * ```
+     */
     group?: {
+        /**
+         * Custom component for rendering the group header cell in group columns.
+         *
+         * @example
+         * ```tsx
+         * import { MyGroupGroupHeaderCell } from './MyGroupGroupHeaderCell';
+         * <Grid cells={{ group: { groupHeader: MyGroupGroupHeaderCell } }} />
+         * ```
+         */
         groupHeader?: ComponentType<GridCustomCellProps>;
+        /**
+         * Custom component for rendering the data cell in group columns.
+         *
+         * @example
+         * ```tsx
+         * import { MyGroupDataCell } from './MyGroupDataCell';
+         * <Grid cells={{ group: { data: MyGroupDataCell } }} />
+         * ```
+         */
         data?: ComponentType<GridCustomCellProps>;
+        /**
+         * Custom component for rendering the group footer cell in group columns.
+         *
+         * @example
+         * ```tsx
+         * import { MyGroupGroupFooterCell } from './MyGroupGroupFooterCell';
+         * <Grid cells={{ group: { groupFooter: MyGroupGroupFooterCell } }} />
+         * ```
+         */
         groupFooter?: ComponentType<GridCustomCellProps>;
     };
+    /**
+     * Custom cell components for edit columns.
+     *
+     * @example
+     * ```tsx
+     * import { MyTextEditCell } from './MyTextEditCell';
+     * <Grid cells={{ edit: { text: MyTextEditCell } }} />
+     * ```
+     */
     edit?: {
+        /**
+         * Custom component for rendering the text edit cell.
+         *
+         * @example
+         * ```tsx
+         * import { MyTextEditCell } from './MyTextEditCell';
+         * <Grid cells={{ edit: { text: MyTextEditCell } }} />
+         * ```
+         */
         text?: ComponentType<GridCustomCellProps>;
+        /**
+         * Custom component for rendering the numeric edit cell.
+         *
+         * @example
+         * ```tsx
+         * import { MyNumericEditCell } from './MyNumericEditCell';
+         * <Grid cells={{ edit: { numeric: MyNumericEditCell } }} />
+         * ```
+         */
         numeric?: ComponentType<GridCustomCellProps>;
+        /**
+         * Custom component for rendering the boolean edit cell.
+         *
+         * @example
+         * ```tsx
+         * import { MyBooleanEditCell } from './MyBooleanEditCell';
+         * <Grid cells={{ edit: { boolean: MyBooleanEditCell } }} />
+         * ```
+         */
         boolean?: ComponentType<GridCustomCellProps>;
+        /**
+         * Custom component for rendering the date edit cell.
+         *
+         * @example
+         * ```tsx
+         * import { MyDateEditCell } from './MyDateEditCell';
+         * <Grid cells={{ edit: { date: MyDateEditCell } }} />
+         * ```
+         */
         date?: ComponentType<GridCustomCellProps>;
     };
 }
@@ -2127,9 +2344,9 @@ export declare interface GridHandle {
      *                 <GridColumn field="foo" />
      *                 <GridColumn field="bar" />
      *             </Grid>
-     *             <button onClick={() => console.log(JSON.stringify(grid.current?.columns))}>
+     *             <Button onClick={() => console.log(JSON.stringify(grid.current?.columns))}>
      *                 log current properties into browser console.
-     *             </button>
+     *             </Button>
      *         </div>
      *     );
      * };
@@ -2176,9 +2393,9 @@ export declare interface GridHandle {
  *           colSpan={1}>
  *           <span>
  *               {props.title || props.field + ' '}
- *               <button onClick={() => setBarDetails(!barDetails)}>
+ *               <Button onClick={() => setBarDetails(!barDetails)}>
  *                   {barDetails ? 'collapse' : 'expand'}
- *               </button>
+ *               </Button>
  *               {props.children}
  *           </span>
  *       </td>
@@ -3740,9 +3957,9 @@ export declare interface GridThAttributes extends HeaderThElementProps {
  *     return (
  *         <Grid data={data}>
  *             <GridToolbar>
- *                 <button title="Click" className="k-button k-primary" onClick={customClick}>
+ *                 <Button title="Click" onClick={customClick}>
  *                     Click
- *                 </button>
+ *                 </Button>
  *             </GridToolbar>
  *         </Grid>
  *     );
@@ -3761,7 +3978,7 @@ export declare const GridToolbar: {
  */
 export declare const GridToolbarAIAssistant: React_2.ForwardRefExoticComponent<GridToolbarAIAssistantProps & React_2.RefAttributes<GridToolbarAIAssistantHandle>>;
 
-declare interface GridToolbarAIAssistantHandle {
+export declare interface GridToolbarAIAssistantHandle {
     show: () => void;
     hide: () => void;
 }
@@ -3776,6 +3993,15 @@ export declare interface GridToolbarAIAssistantProps {
      * ```
      */
     requestUrl?: string;
+    /**
+     * Enables the speech-to-text functionality for the input of the GridToolbarAIAssistant.
+     *
+     * @example
+     * ```jsx
+     * <GridToolbarAIAssistant enableSpeechToText={true} />
+     * ```
+     */
+    enableSpeechToText?: boolean | SpeechToTextButtonProps;
     /**
      * Defines the placeholder text for the AI prompt input.
      *

package/package-metadata.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-grid",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1756204272,version:"12.0.0",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"});exports.packageMetadata=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-grid",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1756396965,version:"12.0.1",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"});exports.packageMetadata=e;

package/package-metadata.mjs

@@ -10,8 +10,8 @@ const e = Object.freeze({
   productName: "KendoReact",
   productCode: "KENDOUIREACT",
   productCodes: ["KENDOUIREACT"],
-  publishDate: 1756204272,
-  version: "12.0.0",
+  publishDate: 1756396965,
+  version: "12.0.1",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 });
 export {