@progress/kendo-react-grid 5.17.0 → 5.18.0-dev.202308311010

package/dist/es/Grid.d.ts

@@ -173,6 +173,7 @@ export declare class Grid extends React.Component<GridProps> {
     private forceUpdateTimeout;
     private isRtl;
     private _gridId;
+    private _gridRoleElementId;
     private rowIndex;
     private get _header();
     private observer;

package/dist/es/Grid.js

@@ -119,6 +119,7 @@ var Grid = /** @class */ (function (_super) {
         _this.forceUpdateTimeout = undefined;
         _this.isRtl = false;
         _this._gridId = guid();
+        _this._gridRoleElementId = guid(); // Needed for aria-control accessibility attribute
         _this.observer = null;
         _this.handleIntersection = function (entries) {
             var options = { rowIndex: _this.rowIndex };
@@ -630,7 +631,7 @@ var Grid = /** @class */ (function (_super) {
         var noRecords = children.filter(function (child) { return child && child.type &&
             child.type.displayName === 'KendoReactGridNoRecords'; });
         var leafColumns = this._columns.filter(function (c) { return c.children.length === 0; });
-        var groupingPanel = groupable && (React.createElement(GroupPanel, { group: this.props.group || [], groupChange: this.groupChange, pressHandler: this.dragLogic.pressHandler, dragHandler: this.dragLogic.dragHandler, releaseHandler: this.dragLogic.releaseHandler, refCallback: this.dragLogic.refGroupPanelDiv, resolveTitle: this.resolveTitle }));
+        var groupingPanel = groupable && (React.createElement(GroupPanel, { group: this.props.group || [], groupChange: this.groupChange, pressHandler: this.dragLogic.pressHandler, dragHandler: this.dragLogic.dragHandler, releaseHandler: this.dragLogic.releaseHandler, refCallback: this.dragLogic.refGroupPanelDiv, resolveTitle: this.resolveTitle, ariaControls: this._gridRoleElementId }));
         var _g = this.props, sort = _g.sort, sortable = _g.sortable, group = _g.group, filter = _g.filter, filterable = _g.filterable, _h = _g.filterOperators, filterOperators = _h === void 0 ? operators : _h, headerCellRender = _g.headerCellRender, columnMenu = _g.columnMenu;
         var header = (React.createElement(Header, { size: this.props.size, columnResize: this.columnResize, staticHeaders: this.props.scrollable !== 'none', scrollableDataElement: function () { return _this.vs.container; }, draggable: this.props.reorderable || groupable, ref: this.headerRef, elemRef: this.headerElementRef, headerRow: this.getHeaderRow(sort, sortable, group, groupable, filter, filterable, filterOperators, headerCellRender, columnMenu, this._columns, this._columnsMap, this.isRtl), filterRow: this.props.filterable && React.createElement(FilterRow, { cells: this.props.cells, size: this.props.size, columns: this._columns, filter: this.props.filter, filterOperators: this.props.filterOperators || operators, filterChange: this.filterChange, sort: this.props.sort, cellRender: this.props.filterCellRender, isRtl: this.isRtl, ariaRowIndex: this._columnsMap.length + 1 }) || undefined, cols: leafColumns.map(function (column, index) { return (React.createElement("col", { key: index.toString(), width: getColumnWidth(column) })); }) }));
         var scrollLeft = this.vs && this.vs.container && this.vs.container.scrollLeft || 0;
@@ -793,27 +794,28 @@ var Grid = /** @class */ (function (_super) {
                     _c['k-grid-virtual'] = this.props.scrollable === 'virtual',
                     _c), this.props.className), ref: function (el) {
                     _this._element = el;
-                }, role: "grid", "aria-colcount": leafColumns.length, "aria-rowcount": total, "aria-label": this.props.ariaLabel, onKeyDown: this.onKeyDown, onFocus: this.onFocus }, tableKeyboardNavigationScopeAttributes),
+                }, "aria-label": this.props.ariaLabel, onKeyDown: this.onKeyDown, onFocus: this.onFocus }, tableKeyboardNavigationScopeAttributes),
                 toolbar,
                 groupingPanel,
-                header,
-                React.createElement("div", { className: "k-grid-container", role: "presentation" },
-                    React.createElement("div", { ref: this.containerRef, className: "k-grid-content k-virtual-content", onScroll: this.scrollHandler, role: "presentation" },
-                        React.createElement("div", { className: 'k-grid-table-wrap', role: "presentation" },
-                            React.createElement(TableSelection, { selectable: this.props.selectable, onRelease: this.selectionRelease, childRef: function (table) {
-                                    _this.tableElement = table;
-                                } },
-                                React.createElement("table", { className: classNames('k-table k-grid-table', (_d = {
-                                            'k-table-md': !this.props.size
-                                        },
-                                        _d["k-table-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
-                                        _d)), role: "presentation", style: { userSelect: tableUserSelect, display: tableDisplay } },
-                                    colGroups,
-                                    React.createElement("tbody", __assign({ className: 'k-table-tbody', ref: this.tableBodyRef, role: 'rowgroup' }, tableKeyboardNavigationBodyAttributes), body)))),
-                        React.createElement("div", { className: "k-height-container", role: "presentation" },
-                            React.createElement("div", { style: this.props.scrollable === 'virtual' ?
-                                    { 'height': (this.vs.containerHeight) + 'px' } : {} })))),
-                footer,
+                React.createElement("div", { role: "grid", className: "k-grid-aria-root", id: this._gridRoleElementId, "aria-colcount": leafColumns.length, "aria-rowcount": total },
+                    header,
+                    React.createElement("div", { className: "k-grid-container", role: "presentation" },
+                        React.createElement("div", { ref: this.containerRef, className: "k-grid-content k-virtual-content", onScroll: this.scrollHandler, role: "presentation" },
+                            React.createElement("div", { className: 'k-grid-table-wrap', role: "presentation" },
+                                React.createElement(TableSelection, { selectable: this.props.selectable, onRelease: this.selectionRelease, childRef: function (table) {
+                                        _this.tableElement = table;
+                                    } },
+                                    React.createElement("table", { className: classNames('k-table k-grid-table', (_d = {
+                                                'k-table-md': !this.props.size
+                                            },
+                                            _d["k-table-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
+                                            _d)), role: "presentation", style: { userSelect: tableUserSelect, display: tableDisplay } },
+                                        colGroups,
+                                        React.createElement("tbody", __assign({ className: 'k-table-tbody', ref: this.tableBodyRef, role: 'rowgroup' }, tableKeyboardNavigationBodyAttributes), body)))),
+                            React.createElement("div", { className: "k-height-container", role: "presentation" },
+                                React.createElement("div", { style: this.props.scrollable === 'virtual' ?
+                                        { 'height': (this.vs.containerHeight) + 'px' } : {} }))),
+                        footer)),
                 this.props.pageable && pager,
                 enableDragClues && (React.createElement(React.Fragment, null,
                     React.createElement(DropClue, { ref: this.dragLogic.refDropElementClue }),

package/dist/es/GridToolbar.js

@@ -67,7 +67,7 @@ var GridToolbar = /** @class */ (function (_super) {
                     'k-toolbar-md': !this.props.size
                 },
                 _a["k-toolbar-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
-                _a), this.props.className) }, this.props.children));
+                _a), this.props.className), "aria-label": this.props.ariaLabel, role: "toolbar" }, this.props.children));
     };
     /**
      * @hidden

package/dist/es/header/GroupPanel.d.ts

@@ -9,6 +9,7 @@ export interface GroupPanelProps extends ColumnDraggableProps {
     groupChange: (groups: GroupDescriptor[], event: React.MouseEvent<HTMLElement>) => void;
     refCallback: (e: HTMLDivElement | null) => void;
     resolveTitle: (field: string) => string;
+    ariaControls: string;
 }
 /**
  * @hidden

package/dist/es/header/GroupPanel.js

@@ -45,7 +45,7 @@ var GroupPanel = /** @class */ (function (_super) {
             }, onSortChange: function (event, dir) {
                 _this.onGroupSortChange(event, index, groupDesc, dir);
             }, onPress: _this.props.pressHandler, onDrag: _this.props.dragHandler, onRelease: _this.props.releaseHandler })); });
-        return (React.createElement("div", { ref: this.props.refCallback, className: "k-grouping-header", role: "toolbar", "aria-label": intl(this).toLanguageString(groupPanelAriaLabel, messages[groupPanelAriaLabel]) },
+        return (React.createElement("div", { ref: this.props.refCallback, className: "k-grouping-header", role: "toolbar", "aria-label": intl(this).toLanguageString(groupPanelAriaLabel, messages[groupPanelAriaLabel]), "aria-controls": this.props.ariaControls },
             React.createElement("div", { className: "k-chip-list k-chip-list-md", role: "none" }, groups),
             React.createElement("div", { className: "k-grouping-drop-container" },
                 !groups.length && intl(this).toLanguageString(messageKey, messages[messageKey]),

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

@@ -23,4 +23,8 @@ export interface GridToolbarProps {
      * @default `medium`
      */
     size?: null | 'small' | 'medium' | 'large';
+    /**
+     * The accessible label of the GridToolbar component.
+     */
+    ariaLabel?: string;
 }

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-grid',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1693312367,
+    publishDate: 1693475397,
     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/Grid.d.ts

@@ -173,6 +173,7 @@ export declare class Grid extends React.Component<GridProps> {
     private forceUpdateTimeout;
     private isRtl;
     private _gridId;
+    private _gridRoleElementId;
     private rowIndex;
     private get _header();
     private observer;

package/dist/npm/Grid.js

@@ -122,6 +122,7 @@ var Grid = /** @class */ (function (_super) {
         _this.forceUpdateTimeout = undefined;
         _this.isRtl = false;
         _this._gridId = (0, kendo_react_common_1.guid)();
+        _this._gridRoleElementId = (0, kendo_react_common_1.guid)(); // Needed for aria-control accessibility attribute
         _this.observer = null;
         _this.handleIntersection = function (entries) {
             var options = { rowIndex: _this.rowIndex };
@@ -633,7 +634,7 @@ var Grid = /** @class */ (function (_super) {
         var noRecords = children.filter(function (child) { return child && child.type &&
             child.type.displayName === 'KendoReactGridNoRecords'; });
         var leafColumns = this._columns.filter(function (c) { return c.children.length === 0; });
-        var groupingPanel = groupable && (React.createElement(GroupPanel_1.GroupPanel, { group: this.props.group || [], groupChange: this.groupChange, pressHandler: this.dragLogic.pressHandler, dragHandler: this.dragLogic.dragHandler, releaseHandler: this.dragLogic.releaseHandler, refCallback: this.dragLogic.refGroupPanelDiv, resolveTitle: this.resolveTitle }));
+        var groupingPanel = groupable && (React.createElement(GroupPanel_1.GroupPanel, { group: this.props.group || [], groupChange: this.groupChange, pressHandler: this.dragLogic.pressHandler, dragHandler: this.dragLogic.dragHandler, releaseHandler: this.dragLogic.releaseHandler, refCallback: this.dragLogic.refGroupPanelDiv, resolveTitle: this.resolveTitle, ariaControls: this._gridRoleElementId }));
         var _g = this.props, sort = _g.sort, sortable = _g.sortable, group = _g.group, filter = _g.filter, filterable = _g.filterable, _h = _g.filterOperators, filterOperators = _h === void 0 ? filterCommon_1.operators : _h, headerCellRender = _g.headerCellRender, columnMenu = _g.columnMenu;
         var header = (React.createElement(Header_1.Header, { size: this.props.size, columnResize: this.columnResize, staticHeaders: this.props.scrollable !== 'none', scrollableDataElement: function () { return _this.vs.container; }, draggable: this.props.reorderable || groupable, ref: this.headerRef, elemRef: this.headerElementRef, headerRow: this.getHeaderRow(sort, sortable, group, groupable, filter, filterable, filterOperators, headerCellRender, columnMenu, this._columns, this._columnsMap, this.isRtl), filterRow: this.props.filterable && React.createElement(FilterRow_1.FilterRow, { cells: this.props.cells, size: this.props.size, columns: this._columns, filter: this.props.filter, filterOperators: this.props.filterOperators || filterCommon_1.operators, filterChange: this.filterChange, sort: this.props.sort, cellRender: this.props.filterCellRender, isRtl: this.isRtl, ariaRowIndex: this._columnsMap.length + 1 }) || undefined, cols: leafColumns.map(function (column, index) { return (React.createElement("col", { key: index.toString(), width: (0, index_1.getColumnWidth)(column) })); }) }));
         var scrollLeft = this.vs && this.vs.container && this.vs.container.scrollLeft || 0;
@@ -796,27 +797,28 @@ var Grid = /** @class */ (function (_super) {
                     _c['k-grid-virtual'] = this.props.scrollable === 'virtual',
                     _c), this.props.className), ref: function (el) {
                     _this._element = el;
-                }, role: "grid", "aria-colcount": leafColumns.length, "aria-rowcount": total, "aria-label": this.props.ariaLabel, onKeyDown: this.onKeyDown, onFocus: this.onFocus }, kendo_react_data_tools_1.tableKeyboardNavigationScopeAttributes),
+                }, "aria-label": this.props.ariaLabel, onKeyDown: this.onKeyDown, onFocus: this.onFocus }, kendo_react_data_tools_1.tableKeyboardNavigationScopeAttributes),
                 toolbar,
                 groupingPanel,
-                header,
-                React.createElement("div", { className: "k-grid-container", role: "presentation" },
-                    React.createElement("div", { ref: this.containerRef, className: "k-grid-content k-virtual-content", onScroll: this.scrollHandler, role: "presentation" },
-                        React.createElement("div", { className: 'k-grid-table-wrap', role: "presentation" },
-                            React.createElement(kendo_react_data_tools_1.TableSelection, { selectable: this.props.selectable, onRelease: this.selectionRelease, childRef: function (table) {
-                                    _this.tableElement = table;
-                                } },
-                                React.createElement("table", { className: (0, kendo_react_common_1.classNames)('k-table k-grid-table', (_d = {
-                                            'k-table-md': !this.props.size
-                                        },
-                                        _d["k-table-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
-                                        _d)), role: "presentation", style: { userSelect: tableUserSelect, display: tableDisplay } },
-                                    colGroups,
-                                    React.createElement("tbody", __assign({ className: 'k-table-tbody', ref: this.tableBodyRef, role: 'rowgroup' }, kendo_react_data_tools_1.tableKeyboardNavigationBodyAttributes), body)))),
-                        React.createElement("div", { className: "k-height-container", role: "presentation" },
-                            React.createElement("div", { style: this.props.scrollable === 'virtual' ?
-                                    { 'height': (this.vs.containerHeight) + 'px' } : {} })))),
-                footer,
+                React.createElement("div", { role: "grid", className: "k-grid-aria-root", id: this._gridRoleElementId, "aria-colcount": leafColumns.length, "aria-rowcount": total },
+                    header,
+                    React.createElement("div", { className: "k-grid-container", role: "presentation" },
+                        React.createElement("div", { ref: this.containerRef, className: "k-grid-content k-virtual-content", onScroll: this.scrollHandler, role: "presentation" },
+                            React.createElement("div", { className: 'k-grid-table-wrap', role: "presentation" },
+                                React.createElement(kendo_react_data_tools_1.TableSelection, { selectable: this.props.selectable, onRelease: this.selectionRelease, childRef: function (table) {
+                                        _this.tableElement = table;
+                                    } },
+                                    React.createElement("table", { className: (0, kendo_react_common_1.classNames)('k-table k-grid-table', (_d = {
+                                                'k-table-md': !this.props.size
+                                            },
+                                            _d["k-table-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
+                                            _d)), role: "presentation", style: { userSelect: tableUserSelect, display: tableDisplay } },
+                                        colGroups,
+                                        React.createElement("tbody", __assign({ className: 'k-table-tbody', ref: this.tableBodyRef, role: 'rowgroup' }, kendo_react_data_tools_1.tableKeyboardNavigationBodyAttributes), body)))),
+                            React.createElement("div", { className: "k-height-container", role: "presentation" },
+                                React.createElement("div", { style: this.props.scrollable === 'virtual' ?
+                                        { 'height': (this.vs.containerHeight) + 'px' } : {} }))),
+                        footer)),
                 this.props.pageable && pager,
                 enableDragClues && (React.createElement(React.Fragment, null,
                     React.createElement(kendo_react_data_tools_1.DropClue, { ref: this.dragLogic.refDropElementClue }),

package/dist/npm/GridToolbar.js

@@ -70,7 +70,7 @@ var GridToolbar = /** @class */ (function (_super) {
                     'k-toolbar-md': !this.props.size
                 },
                 _a["k-toolbar-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
-                _a), this.props.className) }, this.props.children));
+                _a), this.props.className), "aria-label": this.props.ariaLabel, role: "toolbar" }, this.props.children));
     };
     /**
      * @hidden

package/dist/npm/header/GroupPanel.d.ts

@@ -9,6 +9,7 @@ export interface GroupPanelProps extends ColumnDraggableProps {
     groupChange: (groups: GroupDescriptor[], event: React.MouseEvent<HTMLElement>) => void;
     refCallback: (e: HTMLDivElement | null) => void;
     resolveTitle: (field: string) => string;
+    ariaControls: string;
 }
 /**
  * @hidden

package/dist/npm/header/GroupPanel.js

@@ -48,7 +48,7 @@ var GroupPanel = /** @class */ (function (_super) {
             }, onSortChange: function (event, dir) {
                 _this.onGroupSortChange(event, index, groupDesc, dir);
             }, onPress: _this.props.pressHandler, onDrag: _this.props.dragHandler, onRelease: _this.props.releaseHandler })); });
-        return (React.createElement("div", { ref: this.props.refCallback, className: "k-grouping-header", role: "toolbar", "aria-label": (0, kendo_react_intl_1.provideLocalizationService)(this).toLanguageString(messages_1.groupPanelAriaLabel, messages_1.messages[messages_1.groupPanelAriaLabel]) },
+        return (React.createElement("div", { ref: this.props.refCallback, className: "k-grouping-header", role: "toolbar", "aria-label": (0, kendo_react_intl_1.provideLocalizationService)(this).toLanguageString(messages_1.groupPanelAriaLabel, messages_1.messages[messages_1.groupPanelAriaLabel]), "aria-controls": this.props.ariaControls },
             React.createElement("div", { className: "k-chip-list k-chip-list-md", role: "none" }, groups),
             React.createElement("div", { className: "k-grouping-drop-container" },
                 !groups.length && (0, kendo_react_intl_1.provideLocalizationService)(this).toLanguageString(messages_1.groupPanelEmpty, messages_1.messages[messages_1.groupPanelEmpty]),

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

@@ -23,4 +23,8 @@ export interface GridToolbarProps {
      * @default `medium`
      */
     size?: null | 'small' | 'medium' | 'large';
+    /**
+     * The accessible label of the GridToolbar component.
+     */
+    ariaLabel?: string;
 }

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-grid',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1693312367,
+    publishDate: 1693475397,
     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'
 };