@progress/kendo-react-grid 5.1.0-dev.202202230642 → 5.1.0-dev.202202230917

package/dist/es/cells/GridFilterCell.js

@@ -74,13 +74,13 @@ var GridFilterCell = /** @class */ (function (_super) {
         var _this = this;
         switch (filterType) {
             case 'numeric':
-                return (React.createElement(NumericTextBox, { value: value, onChange: function (e) { _this.inputChange(e.value, e.syntheticEvent); }, title: this.props.title }));
+                return (React.createElement(NumericTextBox, { value: value, onChange: function (e) { _this.inputChange(e.value, e.syntheticEvent); }, title: this.props.title, ariaLabel: this.props.ariaLabel }));
             case 'date':
-                return (React.createElement(DatePicker, { value: value, onChange: function (e) { _this.inputChange(e.value, e.syntheticEvent); }, title: this.props.title }));
+                return (React.createElement(DatePicker, { value: value, onChange: function (e) { _this.inputChange(e.value, e.syntheticEvent); }, title: this.props.title, ariaLabel: this.props.ariaLabel }));
             case 'boolean':
                 var noFilterSet_1 = function (filter) { return filter === null || filter === undefined; };
-                return (React.createElement(DropDownList, { onChange: this.boolDropdownChange, value: booleanValues.find(function (item) { return item.operator === (noFilterSet_1(value) ? '' : value); }), data: booleanValues, textField: "text", title: this.props.title }));
-            default: return (React.createElement(Input, { value: value || '', onChange: function (e) { _this.inputChange(e.target.value, e.syntheticEvent); }, title: this.props.title }));
+                return (React.createElement(DropDownList, { onChange: this.boolDropdownChange, value: booleanValues.find(function (item) { return item.operator === (noFilterSet_1(value) ? '' : value); }), data: booleanValues, textField: "text", title: this.props.title, ariaLabel: this.props.ariaLabel }));
+            default: return (React.createElement(Input, { value: value || '', onChange: function (e) { _this.inputChange(e.target.value, e.syntheticEvent); }, title: this.props.title, "aria-label": this.props.ariaLabel }));
         }
     };
     return GridFilterCell;

package/dist/es/cells/GridGroupCell.js

@@ -11,7 +11,9 @@ var __assign = (this && this.__assign) || function () {
 };
 import { Keys } from '@progress/kendo-react-common';
 import { useTableKeyboardNavigation } from '@progress/kendo-react-data-tools';
+import { useLocalization } from '@progress/kendo-react-intl';
 import * as React from 'react';
+import { messages, groupCollapse, groupExpand } from '../messages';
 /**
  * @hidden
  */
@@ -20,6 +22,7 @@ export var GridGroupCell = function (props) {
     var columnIndex = props.columnIndex, level = props.level, columnsCount = props.columnsCount, rowType = props.rowType, dataItem = props.dataItem, field = props.field, onChange = props.onChange, expanded = props.expanded, render = props.render, dataIndex = props.dataIndex, ariaColumnIndex = props.ariaColumnIndex;
     var definedField = field || '';
     var navigationAttributes = useTableKeyboardNavigation(props.id);
+    var localization = useLocalization();
     var onKeyDownHandler = React.useCallback(function (event) {
         if (event.isDefaultPrevented()) {
             return;
@@ -40,6 +43,8 @@ export var GridGroupCell = function (props) {
         defaultRendering = (React.createElement("td", { style: props.style, key: 'g' + columnIndex, className: "k-group-cell", role: "presentation" }));
     }
     else if (columnIndex <= level) {
+        var baseMessage = expanded ? groupCollapse : groupExpand;
+        var message = localization.toLanguageString(baseMessage, messages[baseMessage]);
         defaultRendering = (React.createElement("td", __assign({ style: props.style, key: 'g-colspan', colSpan: columnsCount - columnIndex, role: 'gridcell', "aria-selected": false, "aria-expanded": expanded, "aria-colindex": ariaColumnIndex, onKeyDown: onKeyDownHandler }, navigationAttributes),
             React.createElement("p", { className: "k-reset" },
                 React.createElement("a", { onClick: function (e) {
@@ -53,7 +58,7 @@ export var GridGroupCell = function (props) {
                                 value: !expanded
                             });
                         }
-                    }, href: "#", tabIndex: -1, className: expanded ? 'k-i-collapse k-icon' : 'k-i-expand k-icon' }),
+                    }, href: "#", tabIndex: -1, "aria-label": message, className: expanded ? 'k-i-collapse k-icon' : 'k-i-expand k-icon' }),
                 ((dataItem[definedField] instanceof Date) && dataItem[definedField].toString) ?
                     dataItem[definedField].toString() :
                     dataItem[definedField])));

package/dist/es/cells/GridHierarchyCell.js

@@ -12,7 +12,9 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import { getNestedValue } from './../utils';
 import { useTableKeyboardNavigation } from '@progress/kendo-react-data-tools';
+import { useLocalization } from '@progress/kendo-react-intl';
 import { Keys } from '@progress/kendo-react-common';
+import { detailCollapse, detailExpand, messages } from '../messages';
 /**
  * @hidden
  */
@@ -20,6 +22,7 @@ export var GridHierarchyCell = function (props) {
     var defaultRendering = null;
     var expanded = getNestedValue(props.field, props.dataItem);
     var navigationAttributes = useTableKeyboardNavigation(props.id);
+    var localization = useLocalization();
     var onKeyDownHandler = React.useCallback(function (event) {
         if (event.isDefaultPrevented()) {
             return;
@@ -40,6 +43,8 @@ export var GridHierarchyCell = function (props) {
     }
     else if (props.rowType !== 'groupHeader') {
         var className = expanded ? 'k-icon k-i-minus' : 'k-icon k-i-plus';
+        var baseMessage = expanded ? detailCollapse : detailExpand;
+        var message = localization.toLanguageString(baseMessage, messages[baseMessage]);
         defaultRendering = (React.createElement("td", __assign({ className: "k-hierarchy-cell", onKeyDown: onKeyDownHandler, "aria-expanded": expanded ? 'true' : 'false', role: 'gridcell', "aria-colindex": props.ariaColumnIndex }, navigationAttributes),
             React.createElement("a", { onClick: function (e) {
                     e.preventDefault();
@@ -52,7 +57,7 @@ export var GridHierarchyCell = function (props) {
                             value: !expanded
                         });
                     }
-                }, className: className, href: "#", tabIndex: -1 })));
+                }, "aria-label": message, className: className, href: "#", tabIndex: -1 })));
     }
     return props.render ?
         props.render.call(undefined, defaultRendering, props) :

package/dist/es/header/FilterRow.js

@@ -89,6 +89,7 @@ var FilterRow = /** @class */ (function (_super) {
             .map(function (column) {
             var filterType = getFilterType(column.filter);
             var currentActiveFilter = activeFilter(column.field);
+            var ariaLabel = column.filterable ? intl.toLanguageString(filterAriaLabel, messages[filterAriaLabel]) : undefined;
             var filterCellProps = column.filterable && {
                 render: _this.props.cellRender,
                 field: column.field,
@@ -98,11 +99,12 @@ var FilterRow = /** @class */ (function (_super) {
                 operators: operatorMap(_this.props.filterOperators[filterType] || [], intl),
                 booleanValues: operatorMap(booleanFilterValues, intl),
                 filterType: filterType,
+                ariaLabel: ariaLabel,
                 onChange: function (e) { _this.setFilter(e.value, e.operator, column.field, e.syntheticEvent); }
             };
             var key = (column.declarationIndex >= 0) ? ++index : --serviceIndex;
             var ariaAttrs = {
-                ariaLabel: column.filterable ? intl.toLanguageString(filterAriaLabel, messages[filterAriaLabel]) : undefined,
+                ariaLabel: ariaLabel,
                 ariaColumnIndex: column.ariaColumnIndex
             };
             var style = column.left !== undefined

package/dist/es/interfaces/GridFilterCellProps.d.ts

@@ -46,4 +46,8 @@ export interface GridFilterCellProps {
      * A function for overriding the default rendering of the filter cell.
      */
     render?: (row: React.ReactElement<any>, dataItem: GridFilterCellProps) => React.ReactNode;
+    /**
+     * Accessible label of the filter.
+     */
+    ariaLabel?: string;
 }

package/dist/es/messages/index.d.ts

@@ -94,10 +94,30 @@ export declare const sortAriaLabel = "grid.sortAriaLabel";
  * @hidden
  */
 export declare const filterAriaLabel = "grid.filterAriaLabel";
+/**
+ * @hidden
+ */
+export declare const groupExpand = "grid.groupExpand";
+/**
+ * @hidden
+ */
+export declare const groupCollapse = "grid.groupCollapse";
+/**
+ * @hidden
+ */
+export declare const detailExpand = "grid.detailExpand";
+/**
+ * @hidden
+ */
+export declare const detailCollapse = "grid.detailCollapse";
 /**
  * @hidden
  */
 export declare const messages: {
+    [detailExpand]: string;
+    [detailCollapse]: string;
+    [groupExpand]: string;
+    [groupCollapse]: string;
     [noRecords]: string;
     [groupPanelEmpty]: string;
     [filterClearButton]: string;

package/dist/es/messages/index.js

@@ -95,10 +95,30 @@ export var sortAriaLabel = 'grid.sortAriaLabel';
  * @hidden
  */
 export var filterAriaLabel = 'grid.filterAriaLabel';
+/**
+ * @hidden
+ */
+export var groupExpand = 'grid.groupExpand';
+/**
+ * @hidden
+ */
+export var groupCollapse = 'grid.groupCollapse';
+/**
+ * @hidden
+ */
+export var detailExpand = 'grid.detailExpand';
+/**
+ * @hidden
+ */
+export var detailCollapse = 'grid.detailCollapse';
 /**
  * @hidden
  */
 export var messages = (_a = {},
+    _a[detailExpand] = 'Expand detail row',
+    _a[detailCollapse] = 'Collapse detail row',
+    _a[groupExpand] = 'Expand group',
+    _a[groupCollapse] = 'Collapse Group',
     _a[noRecords] = 'No records available',
     _a[groupPanelEmpty] = 'Drag a column header and drop it here to group by that column',
     _a[filterClearButton] = 'Clear',

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-grid',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1645597997,
+    publishDate: 1645607312,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/npm/cells/GridFilterCell.js

@@ -76,13 +76,13 @@ var GridFilterCell = /** @class */ (function (_super) {
         var _this = this;
         switch (filterType) {
             case 'numeric':
-                return (React.createElement(kendo_react_inputs_1.NumericTextBox, { value: value, onChange: function (e) { _this.inputChange(e.value, e.syntheticEvent); }, title: this.props.title }));
+                return (React.createElement(kendo_react_inputs_1.NumericTextBox, { value: value, onChange: function (e) { _this.inputChange(e.value, e.syntheticEvent); }, title: this.props.title, ariaLabel: this.props.ariaLabel }));
             case 'date':
-                return (React.createElement(kendo_react_dateinputs_1.DatePicker, { value: value, onChange: function (e) { _this.inputChange(e.value, e.syntheticEvent); }, title: this.props.title }));
+                return (React.createElement(kendo_react_dateinputs_1.DatePicker, { value: value, onChange: function (e) { _this.inputChange(e.value, e.syntheticEvent); }, title: this.props.title, ariaLabel: this.props.ariaLabel }));
             case 'boolean':
                 var noFilterSet_1 = function (filter) { return filter === null || filter === undefined; };
-                return (React.createElement(kendo_react_dropdowns_1.DropDownList, { onChange: this.boolDropdownChange, value: booleanValues.find(function (item) { return item.operator === (noFilterSet_1(value) ? '' : value); }), data: booleanValues, textField: "text", title: this.props.title }));
-            default: return (React.createElement(kendo_react_inputs_1.Input, { value: value || '', onChange: function (e) { _this.inputChange(e.target.value, e.syntheticEvent); }, title: this.props.title }));
+                return (React.createElement(kendo_react_dropdowns_1.DropDownList, { onChange: this.boolDropdownChange, value: booleanValues.find(function (item) { return item.operator === (noFilterSet_1(value) ? '' : value); }), data: booleanValues, textField: "text", title: this.props.title, ariaLabel: this.props.ariaLabel }));
+            default: return (React.createElement(kendo_react_inputs_1.Input, { value: value || '', onChange: function (e) { _this.inputChange(e.target.value, e.syntheticEvent); }, title: this.props.title, "aria-label": this.props.ariaLabel }));
         }
     };
     return GridFilterCell;

package/dist/npm/cells/GridGroupCell.js

@@ -13,7 +13,9 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var kendo_react_data_tools_1 = require("@progress/kendo-react-data-tools");
+var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var React = require("react");
+var messages_1 = require("../messages");
 /**
  * @hidden
  */
@@ -22,6 +24,7 @@ exports.GridGroupCell = function (props) {
     var columnIndex = props.columnIndex, level = props.level, columnsCount = props.columnsCount, rowType = props.rowType, dataItem = props.dataItem, field = props.field, onChange = props.onChange, expanded = props.expanded, render = props.render, dataIndex = props.dataIndex, ariaColumnIndex = props.ariaColumnIndex;
     var definedField = field || '';
     var navigationAttributes = kendo_react_data_tools_1.useTableKeyboardNavigation(props.id);
+    var localization = kendo_react_intl_1.useLocalization();
     var onKeyDownHandler = React.useCallback(function (event) {
         if (event.isDefaultPrevented()) {
             return;
@@ -42,6 +45,8 @@ exports.GridGroupCell = function (props) {
         defaultRendering = (React.createElement("td", { style: props.style, key: 'g' + columnIndex, className: "k-group-cell", role: "presentation" }));
     }
     else if (columnIndex <= level) {
+        var baseMessage = expanded ? messages_1.groupCollapse : messages_1.groupExpand;
+        var message = localization.toLanguageString(baseMessage, messages_1.messages[baseMessage]);
         defaultRendering = (React.createElement("td", __assign({ style: props.style, key: 'g-colspan', colSpan: columnsCount - columnIndex, role: 'gridcell', "aria-selected": false, "aria-expanded": expanded, "aria-colindex": ariaColumnIndex, onKeyDown: onKeyDownHandler }, navigationAttributes),
             React.createElement("p", { className: "k-reset" },
                 React.createElement("a", { onClick: function (e) {
@@ -55,7 +60,7 @@ exports.GridGroupCell = function (props) {
                                 value: !expanded
                             });
                         }
-                    }, href: "#", tabIndex: -1, className: expanded ? 'k-i-collapse k-icon' : 'k-i-expand k-icon' }),
+                    }, href: "#", tabIndex: -1, "aria-label": message, className: expanded ? 'k-i-collapse k-icon' : 'k-i-expand k-icon' }),
                 ((dataItem[definedField] instanceof Date) && dataItem[definedField].toString) ?
                     dataItem[definedField].toString() :
                     dataItem[definedField])));

package/dist/npm/cells/GridHierarchyCell.js

@@ -14,7 +14,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
 var utils_1 = require("./../utils");
 var kendo_react_data_tools_1 = require("@progress/kendo-react-data-tools");
+var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
+var messages_1 = require("../messages");
 /**
  * @hidden
  */
@@ -22,6 +24,7 @@ exports.GridHierarchyCell = function (props) {
     var defaultRendering = null;
     var expanded = utils_1.getNestedValue(props.field, props.dataItem);
     var navigationAttributes = kendo_react_data_tools_1.useTableKeyboardNavigation(props.id);
+    var localization = kendo_react_intl_1.useLocalization();
     var onKeyDownHandler = React.useCallback(function (event) {
         if (event.isDefaultPrevented()) {
             return;
@@ -42,6 +45,8 @@ exports.GridHierarchyCell = function (props) {
     }
     else if (props.rowType !== 'groupHeader') {
         var className = expanded ? 'k-icon k-i-minus' : 'k-icon k-i-plus';
+        var baseMessage = expanded ? messages_1.detailCollapse : messages_1.detailExpand;
+        var message = localization.toLanguageString(baseMessage, messages_1.messages[baseMessage]);
         defaultRendering = (React.createElement("td", __assign({ className: "k-hierarchy-cell", onKeyDown: onKeyDownHandler, "aria-expanded": expanded ? 'true' : 'false', role: 'gridcell', "aria-colindex": props.ariaColumnIndex }, navigationAttributes),
             React.createElement("a", { onClick: function (e) {
                     e.preventDefault();
@@ -54,7 +59,7 @@ exports.GridHierarchyCell = function (props) {
                             value: !expanded
                         });
                     }
-                }, className: className, href: "#", tabIndex: -1 })));
+                }, "aria-label": message, className: className, href: "#", tabIndex: -1 })));
     }
     return props.render ?
         props.render.call(undefined, defaultRendering, props) :

package/dist/npm/header/FilterRow.js

@@ -91,6 +91,7 @@ var FilterRow = /** @class */ (function (_super) {
             .map(function (column) {
             var filterType = filterCommon_1.getFilterType(column.filter);
             var currentActiveFilter = activeFilter(column.field);
+            var ariaLabel = column.filterable ? intl.toLanguageString(messages_1.filterAriaLabel, messages_1.messages[messages_1.filterAriaLabel]) : undefined;
             var filterCellProps = column.filterable && {
                 render: _this.props.cellRender,
                 field: column.field,
@@ -100,11 +101,12 @@ var FilterRow = /** @class */ (function (_super) {
                 operators: filterCommon_1.operatorMap(_this.props.filterOperators[filterType] || [], intl),
                 booleanValues: filterCommon_1.operatorMap(filterCommon_1.booleanFilterValues, intl),
                 filterType: filterType,
+                ariaLabel: ariaLabel,
                 onChange: function (e) { _this.setFilter(e.value, e.operator, column.field, e.syntheticEvent); }
             };
             var key = (column.declarationIndex >= 0) ? ++index : --serviceIndex;
             var ariaAttrs = {
-                ariaLabel: column.filterable ? intl.toLanguageString(messages_1.filterAriaLabel, messages_1.messages[messages_1.filterAriaLabel]) : undefined,
+                ariaLabel: ariaLabel,
                 ariaColumnIndex: column.ariaColumnIndex
             };
             var style = column.left !== undefined

package/dist/npm/interfaces/GridFilterCellProps.d.ts

@@ -46,4 +46,8 @@ export interface GridFilterCellProps {
      * A function for overriding the default rendering of the filter cell.
      */
     render?: (row: React.ReactElement<any>, dataItem: GridFilterCellProps) => React.ReactNode;
+    /**
+     * Accessible label of the filter.
+     */
+    ariaLabel?: string;
 }

package/dist/npm/messages/index.d.ts

@@ -94,10 +94,30 @@ export declare const sortAriaLabel = "grid.sortAriaLabel";
  * @hidden
  */
 export declare const filterAriaLabel = "grid.filterAriaLabel";
+/**
+ * @hidden
+ */
+export declare const groupExpand = "grid.groupExpand";
+/**
+ * @hidden
+ */
+export declare const groupCollapse = "grid.groupCollapse";
+/**
+ * @hidden
+ */
+export declare const detailExpand = "grid.detailExpand";
+/**
+ * @hidden
+ */
+export declare const detailCollapse = "grid.detailCollapse";
 /**
  * @hidden
  */
 export declare const messages: {
+    [detailExpand]: string;
+    [detailCollapse]: string;
+    [groupExpand]: string;
+    [groupCollapse]: string;
     [noRecords]: string;
     [groupPanelEmpty]: string;
     [filterClearButton]: string;

package/dist/npm/messages/index.js

@@ -97,10 +97,30 @@ exports.sortAriaLabel = 'grid.sortAriaLabel';
  * @hidden
  */
 exports.filterAriaLabel = 'grid.filterAriaLabel';
+/**
+ * @hidden
+ */
+exports.groupExpand = 'grid.groupExpand';
+/**
+ * @hidden
+ */
+exports.groupCollapse = 'grid.groupCollapse';
+/**
+ * @hidden
+ */
+exports.detailExpand = 'grid.detailExpand';
+/**
+ * @hidden
+ */
+exports.detailCollapse = 'grid.detailCollapse';
 /**
  * @hidden
  */
 exports.messages = (_a = {},
+    _a[exports.detailExpand] = 'Expand detail row',
+    _a[exports.detailCollapse] = 'Collapse detail row',
+    _a[exports.groupExpand] = 'Expand group',
+    _a[exports.groupCollapse] = 'Collapse Group',
     _a[exports.noRecords] = 'No records available',
     _a[exports.groupPanelEmpty] = 'Drag a column header and drop it here to group by that column',
     _a[exports.filterClearButton] = 'Clear',

package/dist/npm/package-metadata.js

@@ -7,7 +7,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-grid',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1645597997,
+    publishDate: 1645607312,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };