@progress/kendo-react-data-tools 4.10.0-dev.202110110856 → 4.10.0

package/dist/es/header/HeaderCell.js

@@ -17,8 +17,8 @@ export function HeaderCell(props) {
     var clickProps = props.onClick ? {
         onClick: props.onClick
     } : {};
-    var defaultRendering = (React.createElement("span", __assign({ className: "k-link" }, clickProps),
-        props.title || props.field || '\u00A0',
+    var defaultRendering = (React.createElement("span", __assign({ className: 'k-link' }, clickProps),
+        React.createElement("span", { className: 'k-column-title' }, props.title || props.field || '\u00A0'),
         props.children));
     return props.render ?
         props.render.call(undefined, defaultRendering, props) :

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { SortDescriptor, CompositeFilterDescriptor } from '@progress/kendo-data-query';
 import { TreeColumnBaseProps, ExtendedColumnProps } from './ColumnProps';
 import { HeaderCellProps } from './HeaderCell';
-import { SortSettings, ColumnSortSettings } from './SortSettings';
+import { SortSettings } from './SortSettings';
 import { ColumnResize } from '../drag/ColumnResize';
 import { ColumnDraggableProps } from '../drag/ColumnDraggable';
 /**
@@ -27,8 +27,7 @@ export interface HeaderRowProps extends ColumnDraggableProps {
 export declare class HeaderRow extends React.Component<HeaderRowProps, {}> {
     cellClick: (e: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLSpanElement, MouseEvent>, column: TreeColumnBaseProps) => void;
     cellKeyDown: (event: React.KeyboardEvent<HTMLElement>, column: TreeColumnBaseProps) => void;
-    cellClass(field: string | undefined, headerClassName: string | undefined, locked?: boolean): string;
-    sortIcon(sortIndex: number, sortable: ColumnSortSettings | undefined): JSX.Element | JSX.Element[];
+    sortIcon(sortIndex: number): JSX.Element[];
     render(): JSX.Element[];
     private cells;
 }

package/dist/es/header/HeaderRow.js

@@ -28,7 +28,7 @@ import { normalize } from './SortSettings';
 import { ColumnResizer } from '../drag/ColumnResizer';
 import { ColumnDraggable } from '../drag/ColumnDraggable';
 import { HeaderThElement } from './HeaderThElement';
-import { Keys } from '@progress/kendo-react-common';
+import { classNames, Keys } from '@progress/kendo-react-common';
 import { registerForLocalization, provideLocalizationService as intl } from '@progress/kendo-react-intl';
 import { messages, sortAriaLabel } from '../messages';
 /**
@@ -90,49 +90,49 @@ var HeaderRow = /** @class */ (function (_super) {
                 title: column.title,
                 selectionValue: column.headerSelectionValue,
                 render: _this.props.cellRender,
-                children: _this.sortIcon(sortIndex, sortable)
+                children: _this.sortIcon(sortIndex)
             };
-            var className = (column.kFirst ? 'k-first ' : '')
-                + _this.cellClass(column.field, column.headerClassName, column.locked);
+            var ColumnMenu = column.columnMenu || _this.props.columnMenu;
+            var className = classNames({
+                'k-first': column.kFirst,
+                'k-filterable': Boolean(ColumnMenu),
+                'k-header': true,
+                'k-grid-header-sticky': column.locked,
+                'k-sorted': _this.props.sort && _this.props.sort.some(function (descriptor) { return descriptor.field === column.field; })
+            }, column.headerClassName);
             var style = (column.locked !== undefined) ? {
                 left: column.left,
                 right: column.right,
                 borderRightWidth: column.rightBorder ? '1px' : ''
             } : {};
-            var ColumnMenu = column.columnMenu || _this.props.columnMenu;
+            var sortLabel = intl(_this).toLanguageString(sortAriaLabel, messages[sortAriaLabel]);
             var ariaAttrs = column.isAccessible ? {
                 ariaSort: sortable ? ariaSortMap[sortDir] : undefined,
                 role: 'columnheader',
                 ariaColumnIndex: column.ariaColumnIndex,
-                ariaSelected: false
+                ariaSelected: false,
+                ariaDescription: sortable ? sortLabel : ''
             } : {
                 role: 'presentation'
             };
             return (React.createElement(HeaderThElement, __assign({ key: index, colSpan: column.colSpan, rowSpan: column.rowSpan, className: className, style: style, columnId: column.id, navigatable: column.navigatable, onKeyDown: sortable && (function (e) { return _this.cellKeyDown(e, column); }) || undefined }, ariaAttrs),
-                ColumnMenu && (React.createElement(ColumnMenu, { sort: _this.props.sort, onSortChange: _this.props.sortChange, filter: _this.props.columnMenuFilter, onFilterChange: _this.props.columnMenuFilterChange, field: column.field })),
-                column.headerCell && React.createElement(column.headerCell, __assign({}, headerCellProps)) ||
+                column.headerCell && React.createElement(column.headerCell, __assign({}, headerCellProps)),
+                !column.headerCell && (React.createElement("span", { className: 'k-cell-inner' },
                     React.createElement(HeaderCell, __assign({}, headerCellProps)),
-                resizable && columnResize &&
+                    ColumnMenu && (React.createElement(ColumnMenu, { sort: _this.props.sort, onSortChange: _this.props.sortChange, filter: _this.props.columnMenuFilter, onFilterChange: _this.props.columnMenuFilterChange, field: column.field })))),
+                columnResize && resizable &&
                     React.createElement(ColumnResizer, { key: "ColumnResizer", resize: function (e, element, end) { return columnResize.dragHandler(e, column, element, end); } })));
         }); };
         return _this;
     }
-    HeaderRow.prototype.cellClass = function (field, headerClassName, locked) {
-        var result = "k-header" + (locked ? ' k-grid-header-sticky' : '') + (headerClassName ? ' ' + headerClassName : '');
-        if (this.props.sort && this.props.sort.some(function (descriptor) { return descriptor.field === field; })) {
-            result += ' k-sorted';
-        }
-        return result;
-    };
-    HeaderRow.prototype.sortIcon = function (sortIndex, sortable) {
+    HeaderRow.prototype.sortIcon = function (sortIndex) {
         if (!this.props.sort) {
             return null;
         }
-        var sortLabel = intl(this).toLanguageString(sortAriaLabel, messages[sortAriaLabel]);
-        return sortIndex >= 0 ? [
-            React.createElement("span", { key: 1, "aria-label": sortLabel, className: 'k-icon k-i-sort-' + this.props.sort[sortIndex].dir + '-sm' }),
+        return sortIndex >= 0 && [
+            React.createElement("span", { key: 1, className: 'k-icon k-i-sort-' + this.props.sort[sortIndex].dir + '-sm' }),
             this.props.sort.length > 1 && React.createElement("span", { key: 2, className: "k-sort-order" }, sortIndex + 1)
-        ] : (sortable && React.createElement("span", { "aria-label": sortLabel }));
+        ];
     };
     HeaderRow.prototype.render = function () {
         var _this = this;

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

@@ -8,6 +8,7 @@ export declare const HeaderThElement: {
         ariaLabel?: string;
         ariaColumnIndex?: number;
         ariaSelected?: boolean;
+        ariaDescription?: string;
         colSpan?: number;
         rowSpan?: number;
         role?: string;

package/dist/es/header/HeaderThElement.js

@@ -17,6 +17,9 @@ import { useTableKeyboardNavigation } from '../navigation/hooks';
 export var HeaderThElement = function (props) {
     var ariaSort = props.ariaSort, colSpan = props.colSpan, rowSpan = props.rowSpan, className = props.className, style = props.style, columnId = props.columnId, onKeyDown = props.onKeyDown, navigatable = props.navigatable, ariaColumnIndex = props.ariaColumnIndex, ariaLabel = props.ariaLabel, role = props.role, ariaSelected = props.ariaSelected;
     var navigationAttributes = useTableKeyboardNavigation(columnId, navigatable);
-    return (React.createElement("th", __assign({ "aria-sort": ariaSort, "aria-label": ariaLabel, "aria-colindex": ariaColumnIndex, "aria-selected": ariaSelected, colSpan: colSpan, rowSpan: rowSpan, className: className, style: style, onKeyDown: onKeyDown, role: role }, navigationAttributes), props.children));
+    return (React.createElement("th", __assign({ "aria-sort": ariaSort, "aria-label": ariaLabel, "aria-colindex": ariaColumnIndex, "aria-selected": ariaSelected, 
+        // TODO: Enable this with React 18. Currently throws warnings
+        // aria-description={ariaDescription}
+        colSpan: colSpan, rowSpan: rowSpan, className: className, style: style, onKeyDown: onKeyDown, role: role }, navigationAttributes), props.children));
 };
 HeaderThElement.displayName = 'KendoReactHeaderThElement';

package/dist/es/header/utils/index.js

@@ -11,6 +11,13 @@ function nextColumn(columns, current) {
     }
     return next;
 }
+var getColumnWidth = function (column) {
+    var width = column.width ? parseFloat(column.width.toString()) : 0;
+    if (!width && column.children && column.children.length) {
+        width = column.children.reduce(function (currentSum, child) { return getColumnWidth(child) + currentSum; }, 0);
+    }
+    return width;
+};
 /**
  * @hidden
  */
@@ -56,7 +63,7 @@ export function mapColumns(columns) {
     columns.forEach(function (column) {
         if (column.locked) {
             column.left = stickyLeftWidth[column.depth];
-            width = column.width ? parseFloat(column.width.toString()) : 0;
+            width = getColumnWidth(column);
             if (column.children.length === 0) {
                 for (var i = column.depth; i < stickyLeftWidth.length; i++) {
                     stickyLeftWidth[i] += width;
@@ -73,7 +80,7 @@ export function mapColumns(columns) {
         var column = columns[i];
         if (column.locked) {
             column.right = stickyRightWidth[column.depth];
-            width = column.width ? parseFloat(column.width.toString()) : 0;
+            width = getColumnWidth(column);
             if (column.children.length === 0) {
                 for (var j = column.depth; j < stickyRightWidth.length; j++) {
                     stickyRightWidth[j] += width;

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-data-tools',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1633941860,
+    publishDate: 1635344879,
     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/es/pager/Pager.js

@@ -140,7 +140,7 @@ var Pager = /** @class */ (function (_super) {
                 e.preventDefault();
                 _this.changePage(page, e);
             }, href: "#", className: className, title: title },
-            React.createElement("span", { className: icon, "aria-label": title })));
+            React.createElement("span", { className: icon })));
     };
     Object.defineProperty(Pager.prototype, "totalPages", {
         get: function () {

package/dist/npm/header/HeaderCell.js

@@ -19,8 +19,8 @@ function HeaderCell(props) {
     var clickProps = props.onClick ? {
         onClick: props.onClick
     } : {};
-    var defaultRendering = (React.createElement("span", __assign({ className: "k-link" }, clickProps),
-        props.title || props.field || '\u00A0',
+    var defaultRendering = (React.createElement("span", __assign({ className: 'k-link' }, clickProps),
+        React.createElement("span", { className: 'k-column-title' }, props.title || props.field || '\u00A0'),
         props.children));
     return props.render ?
         props.render.call(undefined, defaultRendering, props) :

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { SortDescriptor, CompositeFilterDescriptor } from '@progress/kendo-data-query';
 import { TreeColumnBaseProps, ExtendedColumnProps } from './ColumnProps';
 import { HeaderCellProps } from './HeaderCell';
-import { SortSettings, ColumnSortSettings } from './SortSettings';
+import { SortSettings } from './SortSettings';
 import { ColumnResize } from '../drag/ColumnResize';
 import { ColumnDraggableProps } from '../drag/ColumnDraggable';
 /**
@@ -27,8 +27,7 @@ export interface HeaderRowProps extends ColumnDraggableProps {
 export declare class HeaderRow extends React.Component<HeaderRowProps, {}> {
     cellClick: (e: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLSpanElement, MouseEvent>, column: TreeColumnBaseProps) => void;
     cellKeyDown: (event: React.KeyboardEvent<HTMLElement>, column: TreeColumnBaseProps) => void;
-    cellClass(field: string | undefined, headerClassName: string | undefined, locked?: boolean): string;
-    sortIcon(sortIndex: number, sortable: ColumnSortSettings | undefined): JSX.Element | JSX.Element[];
+    sortIcon(sortIndex: number): JSX.Element[];
     render(): JSX.Element[];
     private cells;
 }

package/dist/npm/header/HeaderRow.js

@@ -92,49 +92,49 @@ var HeaderRow = /** @class */ (function (_super) {
                 title: column.title,
                 selectionValue: column.headerSelectionValue,
                 render: _this.props.cellRender,
-                children: _this.sortIcon(sortIndex, sortable)
+                children: _this.sortIcon(sortIndex)
             };
-            var className = (column.kFirst ? 'k-first ' : '')
-                + _this.cellClass(column.field, column.headerClassName, column.locked);
+            var ColumnMenu = column.columnMenu || _this.props.columnMenu;
+            var className = kendo_react_common_1.classNames({
+                'k-first': column.kFirst,
+                'k-filterable': Boolean(ColumnMenu),
+                'k-header': true,
+                'k-grid-header-sticky': column.locked,
+                'k-sorted': _this.props.sort && _this.props.sort.some(function (descriptor) { return descriptor.field === column.field; })
+            }, column.headerClassName);
             var style = (column.locked !== undefined) ? {
                 left: column.left,
                 right: column.right,
                 borderRightWidth: column.rightBorder ? '1px' : ''
             } : {};
-            var ColumnMenu = column.columnMenu || _this.props.columnMenu;
+            var sortLabel = kendo_react_intl_1.provideLocalizationService(_this).toLanguageString(messages_1.sortAriaLabel, messages_1.messages[messages_1.sortAriaLabel]);
             var ariaAttrs = column.isAccessible ? {
                 ariaSort: sortable ? ariaSortMap[sortDir] : undefined,
                 role: 'columnheader',
                 ariaColumnIndex: column.ariaColumnIndex,
-                ariaSelected: false
+                ariaSelected: false,
+                ariaDescription: sortable ? sortLabel : ''
             } : {
                 role: 'presentation'
             };
             return (React.createElement(HeaderThElement_1.HeaderThElement, __assign({ key: index, colSpan: column.colSpan, rowSpan: column.rowSpan, className: className, style: style, columnId: column.id, navigatable: column.navigatable, onKeyDown: sortable && (function (e) { return _this.cellKeyDown(e, column); }) || undefined }, ariaAttrs),
-                ColumnMenu && (React.createElement(ColumnMenu, { sort: _this.props.sort, onSortChange: _this.props.sortChange, filter: _this.props.columnMenuFilter, onFilterChange: _this.props.columnMenuFilterChange, field: column.field })),
-                column.headerCell && React.createElement(column.headerCell, __assign({}, headerCellProps)) ||
+                column.headerCell && React.createElement(column.headerCell, __assign({}, headerCellProps)),
+                !column.headerCell && (React.createElement("span", { className: 'k-cell-inner' },
                     React.createElement(HeaderCell_1.HeaderCell, __assign({}, headerCellProps)),
-                resizable && columnResize &&
+                    ColumnMenu && (React.createElement(ColumnMenu, { sort: _this.props.sort, onSortChange: _this.props.sortChange, filter: _this.props.columnMenuFilter, onFilterChange: _this.props.columnMenuFilterChange, field: column.field })))),
+                columnResize && resizable &&
                     React.createElement(ColumnResizer_1.ColumnResizer, { key: "ColumnResizer", resize: function (e, element, end) { return columnResize.dragHandler(e, column, element, end); } })));
         }); };
         return _this;
     }
-    HeaderRow.prototype.cellClass = function (field, headerClassName, locked) {
-        var result = "k-header" + (locked ? ' k-grid-header-sticky' : '') + (headerClassName ? ' ' + headerClassName : '');
-        if (this.props.sort && this.props.sort.some(function (descriptor) { return descriptor.field === field; })) {
-            result += ' k-sorted';
-        }
-        return result;
-    };
-    HeaderRow.prototype.sortIcon = function (sortIndex, sortable) {
+    HeaderRow.prototype.sortIcon = function (sortIndex) {
         if (!this.props.sort) {
             return null;
         }
-        var sortLabel = kendo_react_intl_1.provideLocalizationService(this).toLanguageString(messages_1.sortAriaLabel, messages_1.messages[messages_1.sortAriaLabel]);
-        return sortIndex >= 0 ? [
-            React.createElement("span", { key: 1, "aria-label": sortLabel, className: 'k-icon k-i-sort-' + this.props.sort[sortIndex].dir + '-sm' }),
+        return sortIndex >= 0 && [
+            React.createElement("span", { key: 1, className: 'k-icon k-i-sort-' + this.props.sort[sortIndex].dir + '-sm' }),
             this.props.sort.length > 1 && React.createElement("span", { key: 2, className: "k-sort-order" }, sortIndex + 1)
-        ] : (sortable && React.createElement("span", { "aria-label": sortLabel }));
+        ];
     };
     HeaderRow.prototype.render = function () {
         var _this = this;

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

@@ -8,6 +8,7 @@ export declare const HeaderThElement: {
         ariaLabel?: string;
         ariaColumnIndex?: number;
         ariaSelected?: boolean;
+        ariaDescription?: string;
         colSpan?: number;
         rowSpan?: number;
         role?: string;

package/dist/npm/header/HeaderThElement.js

@@ -19,6 +19,9 @@ var hooks_1 = require("../navigation/hooks");
 exports.HeaderThElement = function (props) {
     var ariaSort = props.ariaSort, colSpan = props.colSpan, rowSpan = props.rowSpan, className = props.className, style = props.style, columnId = props.columnId, onKeyDown = props.onKeyDown, navigatable = props.navigatable, ariaColumnIndex = props.ariaColumnIndex, ariaLabel = props.ariaLabel, role = props.role, ariaSelected = props.ariaSelected;
     var navigationAttributes = hooks_1.useTableKeyboardNavigation(columnId, navigatable);
-    return (React.createElement("th", __assign({ "aria-sort": ariaSort, "aria-label": ariaLabel, "aria-colindex": ariaColumnIndex, "aria-selected": ariaSelected, colSpan: colSpan, rowSpan: rowSpan, className: className, style: style, onKeyDown: onKeyDown, role: role }, navigationAttributes), props.children));
+    return (React.createElement("th", __assign({ "aria-sort": ariaSort, "aria-label": ariaLabel, "aria-colindex": ariaColumnIndex, "aria-selected": ariaSelected, 
+        // TODO: Enable this with React 18. Currently throws warnings
+        // aria-description={ariaDescription}
+        colSpan: colSpan, rowSpan: rowSpan, className: className, style: style, onKeyDown: onKeyDown, role: role }, navigationAttributes), props.children));
 };
 exports.HeaderThElement.displayName = 'KendoReactHeaderThElement';

package/dist/npm/header/utils/index.js

@@ -13,6 +13,13 @@ function nextColumn(columns, current) {
     }
     return next;
 }
+var getColumnWidth = function (column) {
+    var width = column.width ? parseFloat(column.width.toString()) : 0;
+    if (!width && column.children && column.children.length) {
+        width = column.children.reduce(function (currentSum, child) { return getColumnWidth(child) + currentSum; }, 0);
+    }
+    return width;
+};
 /**
  * @hidden
  */
@@ -58,7 +65,7 @@ function mapColumns(columns) {
     columns.forEach(function (column) {
         if (column.locked) {
             column.left = stickyLeftWidth[column.depth];
-            width = column.width ? parseFloat(column.width.toString()) : 0;
+            width = getColumnWidth(column);
             if (column.children.length === 0) {
                 for (var i = column.depth; i < stickyLeftWidth.length; i++) {
                     stickyLeftWidth[i] += width;
@@ -75,7 +82,7 @@ function mapColumns(columns) {
         var column = columns[i];
         if (column.locked) {
             column.right = stickyRightWidth[column.depth];
-            width = column.width ? parseFloat(column.width.toString()) : 0;
+            width = getColumnWidth(column);
             if (column.children.length === 0) {
                 for (var j = column.depth; j < stickyRightWidth.length; j++) {
                     stickyRightWidth[j] += width;

package/dist/npm/package-metadata.js

@@ -7,7 +7,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-data-tools',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1633941860,
+    publishDate: 1635344879,
     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/pager/Pager.js

@@ -142,7 +142,7 @@ var Pager = /** @class */ (function (_super) {
                 e.preventDefault();
                 _this.changePage(page, e);
             }, href: "#", className: className, title: title },
-            React.createElement("span", { className: icon, "aria-label": title })));
+            React.createElement("span", { className: icon })));
     };
     Object.defineProperty(Pager.prototype, "totalPages", {
         get: function () {