@progress/kendo-react-grid 6.1.1 → 7.0.0-develop.2

package/dist/npm/footer/FooterRow.js

@@ -1,78 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FooterRow = void 0;
-var React = require("react");
-var utils_1 = require("./../utils");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-/**
- * @hidden
- */
-var FooterRow = /** @class */ (function (_super) {
-    __extends(FooterRow, _super);
-    function FooterRow() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this._element = null;
-        _this.renderCell = function (column, index) {
-            var _a;
-            var tdProps = (_a = {
-                    colSpan: column.colSpan !== 1 ? column.colSpan : undefined,
-                    style: column.left !== undefined
-                        ? !_this.props.isRtl
-                            ? { left: column.left, right: column.right }
-                            : { left: column.right, right: column.left }
-                        : {},
-                    className: (0, kendo_react_common_1.classNames)('k-table-td', column.locked && column.left !== undefined ? 'k-grid-footer-sticky' : ''),
-                    key: index,
-                    role: 'gridcell'
-                },
-                _a['aria-colindex'] = column.ariaColumnIndex,
-                _a);
-            var cellProps = __assign({ field: column.field, ariaColumnIndex: column.ariaColumnIndex }, tdProps);
-            var customCells = (0, utils_1.resolveCells)(_this.props.cells, column.cells);
-            if (customCells && customCells.footerCell) {
-                var CustomCell = customCells.footerCell;
-                return React.createElement(CustomCell, __assign({}, cellProps, { tdProps: tdProps, index: index }));
-            }
-            return (column.footerCell && React.createElement(column.footerCell, __assign({}, cellProps, { key: index }))) || (React.createElement("td", __assign({}, tdProps)));
-        };
-        return _this;
-    }
-    Object.defineProperty(FooterRow.prototype, "element", {
-        get: function () {
-            return this._element;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    FooterRow.prototype.render = function () {
-        return React.createElement("tr", { className: 'k-table-row', role: "row", "aria-rowindex": this.props.ariaRowIndex }, (0, utils_1.footerColumns)(this.props.columns).map(this.renderCell));
-    };
-    return FooterRow;
-}(React.Component));
-exports.FooterRow = FooterRow;

package/dist/npm/header/FilterRow.js

@@ -1,142 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterRow = exports.FILTER_ROW_CLASS = void 0;
-var React = require("react");
-var kendo_react_intl_1 = require("@progress/kendo-react-intl");
-var GridFilterCell_1 = require("../cells/GridFilterCell");
-var filterCommon_1 = require("../filterCommon");
-var kendo_react_data_tools_1 = require("@progress/kendo-react-data-tools");
-var messages_1 = require("../messages");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-var utils_1 = require("../utils");
-/**
- * @hidden
- */
-exports.FILTER_ROW_CLASS = 'k-table-row k-filter-row';
-/**
- *
- * @hidden
- */
-var FilterRow = /** @class */ (function (_super) {
-    __extends(FilterRow, _super);
-    function FilterRow() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    FilterRow.prototype.headerCellClassName = function (field, locked) {
-        var result = "".concat(locked ? 'k-grid-header-sticky' : '');
-        if (this.props.sort &&
-            this.props.sort.filter(function (descriptor) { return descriptor.field === field; }).length > 0) {
-            result += ' k-sorted';
-        }
-        return result;
-    };
-    FilterRow.prototype.setFilter = function (value, operator, field, e) {
-        if (!this.props.filterChange) {
-            return;
-        }
-        var filters = [];
-        if (value !== '' && value !== null || operator !== '') {
-            filters.push({
-                field: field,
-                operator: operator,
-                value: value
-            });
-        }
-        if (this.props.filter && this.props.filter.filters) {
-            var oldFilters = this.props.filter.filters || [];
-            oldFilters.forEach(function (filter) {
-                var descriptor = filter;
-                if (descriptor && descriptor.field !== field) {
-                    filters.push(descriptor);
-                }
-            });
-        }
-        var logic = this.props.filter && this.props.filter.logic ? this.props.filter.logic : 'and';
-        this.props.filterChange(filters.length > 0 ? { logic: logic, filters: filters } : null, e);
-    };
-    FilterRow.prototype.render = function () {
-        var _this = this;
-        var intl = (0, kendo_react_intl_1.provideLocalizationService)(this);
-        var oldFilters = this.props.filter && this.props.filter.filters || [];
-        var activeFilter = function (field) {
-            if (field === undefined) {
-                return;
-            }
-            var currentFilters = oldFilters.filter(function (filter) { return filter.field === field; });
-            return currentFilters.length ? currentFilters[0] : undefined;
-        };
-        var serviceIndex = 0, index = -1;
-        var filterCells = this.props.columns.filter(function (c) { return c.children.length === 0; })
-            .map(function (column) {
-            var filterType = (0, 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 value = currentActiveFilter && currentActiveFilter.value;
-            if (value === undefined) {
-                value = filterType === 'text' ? '' : null;
-            }
-            var filterCellProps = column.filterable && {
-                render: _this.props.cellRender,
-                field: column.field,
-                title: column.filterTitle,
-                value: value,
-                operator: currentActiveFilter && currentActiveFilter.operator,
-                operators: (0, filterCommon_1.operatorMap)(_this.props.filterOperators[filterType] || [], intl),
-                booleanValues: (0, 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: ariaLabel,
-                ariaColumnIndex: column.ariaColumnIndex
-            };
-            var style = column.left !== undefined
-                ? !_this.props.isRtl
-                    ? { left: column.left, right: column.right }
-                    : { left: column.right, right: column.left }
-                : {};
-            var thProps = __assign({ columnId: kendo_react_data_tools_1.tableKeyboardNavigationTools.getFilterColumnId(column.id), navigatable: column.navigatable, style: style, className: (0, kendo_react_common_1.classNames)('k-table-th', _this.headerCellClassName(column.field, column.locked) || undefined), role: 'columnheader' }, ariaAttrs);
-            var content = (filterCellProps && (column.filterCell ?
-                React.createElement(column.filterCell, __assign({}, filterCellProps)) :
-                React.createElement(GridFilterCell_1.GridFilterCell, __assign({ size: _this.props.size }, filterCellProps))));
-            var customCells = (0, utils_1.resolveCells)(_this.props.cells, column.cells);
-            if (customCells && customCells.filterCell) {
-                var CustomCell = customCells.filterCell;
-                return (React.createElement(CustomCell, __assign({ key: key }, filterCellProps, { thProps: thProps, index: index }), content));
-            }
-            return (React.createElement(kendo_react_data_tools_1.HeaderThElement, __assign({ key: key }, thProps), content));
-        });
-        return React.createElement("tr", { className: exports.FILTER_ROW_CLASS, "aria-rowindex": this.props.ariaRowIndex, role: "row" }, filterCells);
-    };
-    return FilterRow;
-}(React.Component));
-exports.FilterRow = FilterRow;
-(0, kendo_react_intl_1.registerForLocalization)(FilterRow);

package/dist/npm/header/GridHeaderCell.js

@@ -1,104 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GridHeaderCell = void 0;
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-var React = require("react");
-var GridColumnMenuWrapper_1 = require("../columnMenu/GridColumnMenuWrapper");
-/**
- * @example
- * ```jsx
- * class App extends React.PureComponent {
- *    state = {
- *        details: false,
- *        data: [
- *               { foo: 'A1', bar: 'B1', b1: 1, b2:2 },
- *               { foo: 'A2', bar: 'B2', b1: 3, b2:4 },
- *               { foo: 'A3', bar: 'B2', b1: 5, b2:6 }
- *           ]
- *    };
- *
- *    CustomHeaderCell = (props) =>
- *        <span>
- *            {props.title || props.field + ' '}
- *            <button onClick={() => this.setState({ barDetails: !this.state.barDetails })}>
- *                {this.state.barDetails ? 'collapse' : 'expand'}
- *            </button>
- *            {props.children}
- *        </span>
- *
- *    render() {
- *        return (
- *            <Grid
- *                style={{ height: '420px' }}
- *                data={this.state.data}
- *                reorderable={true}
- *            >
- *                <GridColumn field="foo" />
- *                <GridColumn field="bar" headerCell={this.CustomHeaderCell}>
- *                    {this.state.barDetails && [
- *                        <GridColumn field="b1" />,
- *                        <GridColumn field="b2" />
- *                    ]}
- *                </GridColumn>
- *            </Grid>
- *        );
- *    }
- * }
- *
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-var GridHeaderCell = /** @class */ (function (_super) {
-    __extends(GridHeaderCell, _super);
-    function GridHeaderCell() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    /**
-     * @hidden
-     */
-    GridHeaderCell.prototype.render = function () {
-        var columnMenuWrapperProps = this.props.columnMenuWrapperProps;
-        var clickProps = this.props.onClick ? {
-            onClick: this.props.onClick
-        } : {};
-        var defaultRendering = (React.createElement("span", { className: 'k-cell-inner' },
-            React.createElement("span", __assign({ className: (0, kendo_react_common_1.classNames)('k-link', {
-                    '!k-cursor-default': !this.props.columnMenuWrapperProps.sortable
-                }) }, clickProps),
-                React.createElement("span", { className: 'k-column-title' }, this.props.title || this.props.field || '\u00A0'),
-                this.props.children),
-            columnMenuWrapperProps.columnMenu && React.createElement(GridColumnMenuWrapper_1.GridColumnMenuWrapper, __assign({}, columnMenuWrapperProps))));
-        if (this.props.render) {
-            return this.props.render.call(undefined, defaultRendering, this.props);
-        }
-        return defaultRendering;
-    };
-    return GridHeaderCell;
-}(React.Component));
-exports.GridHeaderCell = GridHeaderCell;

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

@@ -1,9 +0,0 @@
-import * as React from 'react';
-import { GridHeaderCellProps } from '../interfaces/GridHeaderCellProps';
-/**
- * @hidden
- */
-export declare class GridHeaderSelectionCell extends React.Component<GridHeaderCellProps> {
-    private _inputId;
-    render(): string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | (JSX.Element | null | undefined)[] | null | undefined;
-}

package/dist/npm/header/GridHeaderSelectionCell.js

@@ -1,62 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GridHeaderSelectionCell = void 0;
-var React = require("react");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-var GridColumnMenuWrapper_1 = require("../columnMenu/GridColumnMenuWrapper");
-/**
- * @hidden
- */
-var GridHeaderSelectionCell = /** @class */ (function (_super) {
-    __extends(GridHeaderSelectionCell, _super);
-    function GridHeaderSelectionCell() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this._inputId = (0, kendo_react_common_1.guid)();
-        return _this;
-    }
-    GridHeaderSelectionCell.prototype.render = function () {
-        var _this = this;
-        var columnMenuWrapperProps = this.props.columnMenuWrapperProps;
-        var defaultRendering = [
-            (React.createElement("input", { key: 0, checked: this.props.selectionValue, id: this._inputId, type: "checkbox", className: "k-checkbox k-checkbox-md k-rounded-md", onChange: function (e) {
-                    return _this.props.selectionChange({
-                        field: _this.props.field,
-                        syntheticEvent: e
-                    });
-                } })),
-            (React.createElement("label", { key: 1, className: "k-checkbox-label", htmlFor: this._inputId })),
-            columnMenuWrapperProps.columnMenu && React.createElement(GridColumnMenuWrapper_1.GridColumnMenuWrapper, __assign({}, columnMenuWrapperProps))
-        ];
-        return this.props.render ?
-            this.props.render.call(undefined, defaultRendering, this.props) :
-            defaultRendering;
-    };
-    return GridHeaderSelectionCell;
-}(React.Component));
-exports.GridHeaderSelectionCell = GridHeaderSelectionCell;

package/dist/npm/header/GroupPanel.js

@@ -1,60 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GroupPanel = void 0;
-var React = require("react");
-var GroupingIndicator_1 = require("../drag/GroupingIndicator");
-var kendo_react_intl_1 = require("@progress/kendo-react-intl");
-var messages_1 = require("./../messages");
-/**
- * @hidden
- */
-var GroupPanel = /** @class */ (function (_super) {
-    __extends(GroupPanel, _super);
-    function GroupPanel() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.onGroupRemove = function (event, index) {
-            var newGroups = _this.props.group.slice();
-            newGroups.splice(index, 1);
-            _this.props.groupChange(newGroups, event);
-        };
-        _this.onGroupSortChange = function (event, index, groupDesc, dir) {
-            var group = Object.assign({}, groupDesc, { dir: dir });
-            var newGroups = _this.props.group.slice();
-            newGroups.splice(index, 1, group);
-            _this.props.groupChange(newGroups, event);
-        };
-        return _this;
-    }
-    GroupPanel.prototype.render = function () {
-        var _this = this;
-        var groupsProp = this.props.group || [];
-        var groups = groupsProp.map(function (groupDesc, index) { return (React.createElement(GroupingIndicator_1.GroupingIndicator, { key: index, index: index, dir: groupDesc.dir || 'asc', title: _this.props.resolveTitle(groupDesc.field), onRemove: function (event) {
-                _this.onGroupRemove(event, index);
-            }, onSortChange: function (event, dir) {
-                _this.onGroupSortChange(event, index, groupDesc, dir);
-            }, onPress: _this.props.pressHandler, onDrag: _this.props.dragHandler, onRelease: _this.props.releaseHandler, onContextMenu: _this.props.onContextMenu })); });
-        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]),
-                "\u00A0")));
-    };
-    return GroupPanel;
-}(React.Component));
-exports.GroupPanel = GroupPanel;
-(0, kendo_react_intl_1.registerForLocalization)(GroupPanel);

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

@@ -1,42 +0,0 @@
-import * as React from 'react';
-/**
- * @hidden
- */
-export interface HeaderProps {
-    staticHeaders: boolean;
-    scrollableDataElement: () => HTMLDivElement | null;
-    headerRow: React.ReactElement<any>;
-    filterRow?: React.ReactElement<any>;
-    columnResize: {
-        colGroupHeader: HTMLTableColElement | null;
-        setIsRtl: (isRtl: boolean) => void;
-    };
-    cols: React.ReactElement<HTMLTableColElement>[];
-    draggable?: boolean | undefined;
-    elemRef: React.RefObject<HTMLDivElement>;
-    className?: string;
-    size?: string;
-}
-/**
- * @hidden
- */
-export declare class Header extends React.Component<HeaderProps, {}> {
-    private headerWrap;
-    private table;
-    private syncScroll;
-    private scrollbarWidth;
-    get element(): HTMLDivElement | null;
-    componentDidMount(): void;
-    /**
-     *
-     * @param scrollLeft - Scrolls to the left (in pixels).
-     */
-    setScrollLeft(scrollLeft: number): void;
-    /**
-     *
-     * @param width - Scrolls the width (in pixels).
-     */
-    setWidth(width: number): void;
-    onScroll: (_event: React.UIEvent<HTMLDivElement>) => void;
-    render(): JSX.Element;
-}

package/dist/npm/header/Header.js

@@ -1,115 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Header = void 0;
-var React = require("react");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-var kendo_react_data_tools_1 = require("@progress/kendo-react-data-tools");
-/**
- * @hidden
- */
-var Header = /** @class */ (function (_super) {
-    __extends(Header, _super);
-    function Header() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.headerWrap = null;
-        _this.table = null;
-        _this.syncScroll = false;
-        _this.scrollbarWidth = (0, kendo_react_common_1.getScrollbarWidth)();
-        _this.onScroll = function (_event) {
-            if (_this.syncScroll) {
-                _this.syncScroll = false;
-                return;
-            }
-            if (!_this.headerWrap) {
-                return;
-            }
-            var scrollLeft = _this.headerWrap.scrollLeft;
-            var scrollableDataElement = _this.props.scrollableDataElement();
-            if (scrollableDataElement && scrollableDataElement.scrollLeft !== scrollLeft) {
-                scrollableDataElement.scrollLeft = scrollLeft;
-            }
-        };
-        return _this;
-    }
-    Object.defineProperty(Header.prototype, "element", {
-        get: function () {
-            return this.props.elemRef.current;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Header.prototype.componentDidMount = function () {
-        var rtl = (0, kendo_react_data_tools_1.isRtl)(this.element);
-        if (this.props.columnResize) {
-            this.props.columnResize.setIsRtl(rtl);
-        }
-        this.forceUpdate();
-    };
-    /**
-     *
-     * @param scrollLeft - Scrolls to the left (in pixels).
-     */
-    Header.prototype.setScrollLeft = function (scrollLeft) {
-        if (this.headerWrap && this.headerWrap.scrollLeft !== scrollLeft) {
-            this.syncScroll = true;
-            this.headerWrap.scrollLeft = scrollLeft;
-        }
-    };
-    /**
-     *
-     * @param width - Scrolls the width (in pixels).
-     */
-    Header.prototype.setWidth = function (width) {
-        if (this.table) {
-            this.table.style.width = width + 'px';
-        }
-    };
-    Header.prototype.render = function () {
-        var _a;
-        var _this = this;
-        if (!this.props.staticHeaders) {
-            return (React.createElement("thead", __assign({ role: "presentation", className: (0, kendo_react_common_1.classNames)('k-table-thead', { 'k-grid-draggable-header': this.props.draggable }) }, kendo_react_data_tools_1.tableKeyboardNavigationHeaderAttributes),
-                this.props.headerRow,
-                this.props.filterRow));
-        }
-        return (React.createElement("div", { ref: this.props.elemRef, className: (0, kendo_react_common_1.classNames)('k-grid-header', { 'k-grid-draggable-header': this.props.draggable }), role: "presentation" },
-            React.createElement("div", { ref: function (div) { _this.headerWrap = div; }, className: "k-grid-header-wrap", style: this.scrollbarWidth ? {} : { borderWidth: 0 }, onScroll: this.onScroll, role: "presentation" },
-                React.createElement("table", { ref: function (table) { _this.table = table; }, className: (0, kendo_react_common_1.classNames)('k-table k-grid-header-table', (_a = {
-                            'k-table-md': !this.props.size
-                        },
-                        _a["k-table-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
-                        _a), this.props.className), role: "presentation" },
-                    React.createElement("colgroup", { ref: function (e) { _this.props.columnResize.colGroupHeader = e; } }, this.props.cols),
-                    React.createElement("thead", __assign({ className: 'k-table-thead', role: "rowgroup" }, kendo_react_data_tools_1.tableKeyboardNavigationHeaderAttributes),
-                        this.props.headerRow,
-                        this.props.filterRow)))));
-    };
-    return Header;
-}(React.Component));
-exports.Header = Header;