@progress/kendo-react-dropdowns 6.1.1 → 7.0.0-develop.1

package/dist/npm/MultiSelectTree/MultiSelectTreeProps.d.ts

@@ -1,320 +0,0 @@
-import * as React from 'react';
-import { FormComponentProps } from '@progress/kendo-react-common';
-import { ItemRenderProps } from '@progress/kendo-react-treeview';
-import { FilterChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, DropdownEvent, CancelEvent } from '../common/events';
-import { DropDownsPopupSettings } from '../common/settings';
-import { TagData } from '../MultiSelect/TagList';
-/**
- * Represents the Object which is passed to the
- * [`ref`](https://reactjs.org/docs/refs-and-the-dom.html) callback of the MultiSelectTree component.
- */
-export interface MultiSelectTreeHandle {
-    /**
-     * The current element or `null` if there is no one.
-     */
-    element: HTMLElement | null;
-    /**
-     * The props of the MultiSelectTree component.
-     */
-    props: MultiSelectTreeProps;
-    /**
-     * The focus function.
-     */
-    focus: () => void;
-}
-/**
- * Represents the object of the `onFilterChange` MultiSelectTree event.
- */
-export interface MultiSelectTreeFilterChangeEvent extends FilterChangeEvent<MultiSelectTreeHandle> {
-}
-export declare type MultiSelectTreeChangeEventOperation = 'clear' | 'delete' | 'toggle';
-/**
- * Represents the object of the `onChange` MultiSelectTree event.
- */
-export interface MultiSelectTreeChangeEvent extends DropdownEvent<MultiSelectTreeHandle> {
-    /**
-     * The items related to current operation.
-     */
-    items: any[];
-    /**
-     * Describes the current operation:
-     * * `clear` - clear button is clicked and value is cleared. Null value is retured.
-     * * `delete` - tag is deleted using keyboard or mouse. The items contained in current tag are returned.
-     * * `toggle` - item in TreeView is toggled. Single item is returned.
-     */
-    operation: MultiSelectTreeChangeEventOperation;
-}
-/**
- * Represents the object of the `onOpen` MultiSelectTree event.
- */
-export interface MultiSelectTreeOpenEvent extends OpenEvent<MultiSelectTreeHandle> {
-}
-/**
- * Represents the object of the `onClose` MultiSelectTree event.
- */
-export interface MultiSelectTreeCloseEvent extends CloseEvent<MultiSelectTreeHandle> {
-}
-/**
- * Represents the object of the `onFocus` MultiSelectTree event.
- */
-export interface MultiSelectTreeFocusEvent extends FocusEvent<MultiSelectTreeHandle> {
-}
-/**
- * Represents the object of the `onBlur` MultiSelectTree event.
- */
-export interface MultiSelectTreeBlurEvent extends BlurEvent<MultiSelectTreeHandle> {
-}
-/**
- * Represents the object of the `onCancel` MultiSelectTree event.
- */
-export interface MultiSelectTreeCancelEvent extends CancelEvent<MultiSelectTreeHandle> {
-}
-/**
- * Represents the object of the `onExpandChange` MultiSelectTree event.
- */
-export interface MultiSelectTreeExpandEvent extends DropdownEvent<MultiSelectTreeHandle> {
-    item: any;
-    level: number[];
-}
-/**
- * The props of component that will be used for rendering each of the MultiSelectTree items
- * ([see example]({% slug customrendering_multiselecttree %}#toc-items-and-value-element)).
- */
-export interface MultiSelectTreeItemProps extends ItemRenderProps {
-}
-/**
- * The props of component that will be used for rendering each of the MultiSelectTree tags
- */
-export interface MultiSelectTreeTagProps {
-    tagData: TagData;
-    guid: string;
-    focusedTag?: TagData;
-    onTagDelete: (items: Array<any>, event: React.MouseEvent<HTMLSpanElement>) => void;
-}
-/**
- * The props of the `ListNoData` component ([see example]({% slug customrendering_multiselecttree %}#toc-no-data)).
- */
-export interface MultiSelectTreeListNoDataProps {
-    children?: React.ReactNode;
-}
-/**
- * Represents the props of the [KendoReact MultiSelectTree component]({% slug overview_multiselecttree %}).
- */
-export interface MultiSelectTreeProps extends FormComponentProps {
-    /**
-     * Sets the data of the MultiSelectTree ([see example]({% slug overview_multiselecttree %})).
-     */
-    data?: any[];
-    /**
-     * Sets the opened state of the MultiSelectTree.
-     */
-    opened?: boolean;
-    /**
-     * The styles that are applied to the MultiSelectTree.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Sets the value of the MultiSelectTree. It can either be of the primitive (string, numbers) or of the complex (objects) type.
-     */
-    value?: Array<any>;
-    /**
-     * The hint that is displayed when the MultiSelectTree is empty.
-     */
-    placeholder?: string;
-    /**
-     * Sets the key for comparing the data items of the MultiSelectTree ([see example]({% slug overview_multiselecttree %})).
-     * If `dataItemKey` is not set, the MultiSelectTree compares the items by reference.
-     */
-    dataItemKey: string;
-    /**
-     * Sets additional classes to the MultiSelectTree.
-     */
-    className?: string;
-    /**
-     * Sets the disabled state of the MultiSelectTree.
-     */
-    disabled?: boolean;
-    /**
-     * Represents the `dir` HTML attribute.
-     */
-    dir?: string;
-    /**
-     * Renders a floating label for the MultiSelectTree.
-     */
-    label?: string;
-    /**
-     * Specifies the id of the component.
-     */
-    id?: string;
-    /**
-     * Sets the tags of the MultiSelect ([see example]({% slug customtags_multiselect %})).
-     */
-    tags?: Array<TagData>;
-    /**
-     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
-     * For example these elements could contain error or hint message.
-     */
-    ariaDescribedBy?: string;
-    /**
-     * Identifies the element(s) which will label the component.
-     */
-    ariaLabelledBy?: string;
-    /**
-     * Enables the filtering functionality of the MultiSelectTree ([more information and examples]({% slug filtering_multiselecttree %})).
-     */
-    filterable?: boolean;
-    /**
-     * Sets the value of filtering input.
-     * Useful for making the filtering input a [controlled component](https://reactjs.org/docs/forms.html#controlled-components).
-     */
-    filter?: string;
-    /**
-     * Sets the loading state of the MultiSelectTree ([see example]({% slug filtering_multiselecttree %}#toc-visualize-filtering)).
-     */
-    loading?: boolean;
-    /**
-     * Specifies the `tabIndex` of the MultiSelectTree.
-     */
-    tabIndex?: number;
-    /**
-     * Specifies the `accessKey` of the MultiSelectTree.
-     */
-    accessKey?: string;
-    /**
-     * Sets the data item field that represents the item text ([see example]({% slug overview_multiselecttree %})).
-     */
-    textField: string;
-    /**
-     * Specifies the name of the field which will provide a Boolean representation of the checked state of the item.
-     */
-    checkField?: string;
-    /**
-     * Specifies the name of the field which will provide a Boolean representation of the checked indeterminaet state of the item.
-     */
-    checkIndeterminateField?: string;
-    /**
-     * Specifies the name of the field which will provide a Boolean representation of the expanded state of the item.
-     */
-    expandField?: string;
-    /**
-     * Specifies the name of the field which will provide an array representation of the item subitems.
-     * Defaults to 'items'.
-     */
-    subItemsField?: string;
-    /**
-     * Configures the popup of the MultiSelectTree.
-     */
-    popupSettings?: DropDownsPopupSettings;
-    /**
-     * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden [`select`](https://reactjs.org/docs/forms.html#the-select-tag) element.
-     *
-     * @example
-     * ```jsx-no-run
-     * class App extends React.Component {
-     *    render() {
-     *       return (
-     *          <form>
-     *              <MultiSelectTree
-     *                  data={[ { text: "Austria", id: 1 } , { text: "Belarus", id: 2 } ]}
-     *                  valueMap={value => value && value.id}
-     *              />
-     *              <button type="submit">Submit</button>
-     *          </form>
-     *       );
-     *    }
-     * }
-     * ReactDOM.render(<App />, document.querySelector('my-app'));
-     * ```
-     */
-    valueMap?: (value: Array<any>) => any;
-    /**
-     * Fires each time the popup of the MultiSelectTree is about to open.
-     */
-    onOpen?: (event: MultiSelectTreeOpenEvent) => void;
-    /**
-     * Fires each time the popup of the MultiSelectTree is about to close.
-     */
-    onClose?: (event: MultiSelectTreeCloseEvent) => void;
-    /**
-     * Fires each time the user focuses the MultiSelectTree.
-     */
-    onFocus?: (event: MultiSelectTreeFocusEvent) => void;
-    /**
-     * Fires each time the MultiSelectTree gets blurred.
-     */
-    onBlur?: (event: MultiSelectTreeBlurEvent) => void;
-    /**
-     * Fires each time the value of the MultiSelectTree is about to change ([see examples]({% slug overview_multiselecttree %})).
-     */
-    onChange?: (event: MultiSelectTreeChangeEvent) => void;
-    /**
-     * Fires each time the popup of the MultiSelectTree is about to cancel in ([adaptive mode]({% slug adaptive_rendering_multiselecttree %})).
-     */
-    onCancel?: (event: MultiSelectTreeCancelEvent) => void;
-    /**
-     * Fires each time the user types in the filter input
-     * ([see example]({% slug filtering_multiselecttree %}#toc-basic-configuration)).
-     * You can filter the source based on the passed filtration value.
-     */
-    onFilterChange?: (event: MultiSelectTreeFilterChangeEvent) => void;
-    /**
-     * Fires when the expanding or collapsing of an item is requested ([see examples]({% slug overview_multiselecttree %})).
-     */
-    onExpandChange?: (event: any) => void;
-    /**
-     * Defines the component that will be used for rendering each of the MultiSelectTree items
-     * ([see example]({% slug customrendering_multiselecttree %}#toc-items-and-value-element)).
-     */
-    item?: React.ComponentType<MultiSelectTreeItemProps>;
-    /**
-     * Defines the component that will be rendered in the MultiSelectTree popup when no data is available
-     * ([see example]({% slug customrendering_multiselecttree %}#toc-no-data)).
-     */
-    listNoData?: React.ComponentType<MultiSelectTreeListNoDataProps>;
-    tag?: React.ComponentType<MultiSelectTreeTagProps>;
-    /**
-     * Configures the `size` of the MultiSelectTree.
-     *
-     * The available options are:
-     * - small
-     * - medium
-     * - large
-     * - null&mdash;Does not set a size `className`.
-     *
-     * @default `medium`
-     */
-    size?: null | 'small' | 'medium' | 'large';
-    /**
-     * Configures the `roundness` of the MultiSelectTree.
-     *
-     * The available options are:
-     * - small
-     * - medium
-     * - large
-     * - full
-     * - null&mdash;Does not set a rounded `className`.
-     *
-     * @default `medium`
-     */
-    rounded?: null | 'small' | 'medium' | 'large' | 'full';
-    /**
-     * Configures the `fillMode` of the MultiSelectTree.
-     *
-     * The available options are:
-     * - solid
-     * - flat
-     * - outline
-     * - null&mdash;Does not set a fillMode `className`.
-     *
-     * @default `solid`
-     */
-    fillMode?: null | 'solid' | 'flat' | 'outline';
-    /**
-     * Providing different rendering of the popup element based on the screen dimensions.
-     */
-    adaptive?: boolean;
-    /**
-     * Specifies the text that is rendered as title in the adaptive popup.
-     */
-    adaptiveTitle?: string | React.ReactNode;
-}

package/dist/npm/MultiSelectTree/MultiSelectTreeProps.js

@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-// tslint:enable:max-line-length

package/dist/npm/MultiSelectTree/utils.js

@@ -1,196 +0,0 @@
-"use strict";
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getMultiSelectTreeValue = exports.getValueMap = void 0;
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-/** @hidden */
-var getValueMap = function (value, idGetter) {
-    var map = {};
-    if (value && value.length) {
-        value.forEach(function (item) {
-            map[idGetter(item)] = true;
-        });
-    }
-    return map;
-};
-exports.getValueMap = getValueMap;
-/**
- * Get MultiSelectTree new value from the component `onChange` event.
- *
- * @param {any[]} data
- * @param {object} options
- * @returns {any[]}
- */
-var getMultiSelectTreeValue = function (data, options) {
-    var items = options.items, dataItemKey = options.dataItemKey, value = options.value, _a = options.subItemsField, subItemsField = _a === void 0 ? 'items' : _a, operation = options.operation;
-    var idGetter = (0, kendo_react_common_1.getter)(dataItemKey);
-    var valueMap = (0, exports.getValueMap)(value, idGetter);
-    if (operation === 'clear') {
-        return [];
-    }
-    else if (operation === 'delete') {
-        var deletedItemsMap_1 = (0, exports.getValueMap)(items, idGetter);
-        return value.filter(function (item) { return !deletedItemsMap_1[idGetter(item)]; });
-    }
-    // operation === 'toggle'
-    var selectedItem = items[0];
-    var selectedId = idGetter(selectedItem);
-    var subItemGetter = (0, kendo_react_common_1.getter)(subItemsField);
-    var stack = __spreadArray([], data, true);
-    var context = [];
-    var parents = [];
-    var foundItem;
-    while (stack.length) {
-        var currentItem = stack.pop();
-        if (selectedId === idGetter(currentItem)) {
-            parents = context.map(function (contextItem) { return contextItem.item; });
-            foundItem = currentItem;
-            break;
-        }
-        else {
-            if (context &&
-                context.length &&
-                context[context.length - 1].parentPosition === stack.length) {
-                context.pop();
-            }
-            var subItems = subItemGetter(currentItem);
-            if (subItems && subItems.length) {
-                context.push({ item: currentItem, parentPosition: stack.length });
-                stack.push.apply(stack, subItems);
-            }
-        }
-    }
-    var childrenStack = __spreadArray([], (subItemGetter(foundItem) || []), true);
-    var children = [];
-    while (childrenStack.length) {
-        var currentItem = childrenStack.pop();
-        children.push(currentItem);
-        var subItems = subItemGetter(currentItem);
-        if (subItems && subItems.length) {
-            childrenStack.push.apply(childrenStack, subItems);
-        }
-    }
-    var isChecked = !valueMap[selectedId];
-    var newValue = [];
-    if (isChecked) {
-        newValue.push.apply(newValue, value);
-        newValue.push(foundItem);
-        newValue.push.apply(newValue, children.filter(function (item) { return !valueMap[idGetter(item)]; }));
-        var parentCandidates = parents.filter(function (item) { return !valueMap[idGetter(item)]; });
-        var newValueMap_1 = (0, exports.getValueMap)(newValue, idGetter);
-        for (var i = parentCandidates.length - 1; i > -1; i--) {
-            var candidate = parentCandidates[i];
-            var subItems = subItemGetter(candidate);
-            var checkedChildrenLength = subItems.filter(function (item) { return newValueMap_1[idGetter(item)]; }).length;
-            if (checkedChildrenLength < subItems.length) {
-                break;
-            }
-            else {
-                newValue.push(candidate);
-                newValueMap_1[idGetter(candidate)] = true;
-            }
-        }
-    }
-    else {
-        var foundId_1 = idGetter(foundItem);
-        var childrenMap_1 = (0, exports.getValueMap)(children, idGetter);
-        var parentsMap_1 = (0, exports.getValueMap)(parents, idGetter);
-        newValue.push.apply(newValue, (value
-            .filter(function (item) {
-            var itemId = idGetter(item);
-            return !childrenMap_1[itemId] && foundId_1 !== itemId && !parentsMap_1[itemId];
-        })));
-    }
-    return newValue;
-};
-exports.getMultiSelectTreeValue = getMultiSelectTreeValue;
-// /** @hidden */
-// const mapCheckAndIntermidiate = (
-//     data,
-//     options: {
-//         valueMap: {[dataItemKey: string]: boolean};
-//         callback?: (item: any) => any;
-//         idGetter: (item: any) => any;
-//         subItemGetter: (item: any) => any;
-//         subItemSetter: (item: any, value: any) => void;
-//         checkSetter: (item: any, value: any) => void;
-//         checkIndeterminateSetter: (item: any, value: any) => void;
-//     }
-// ) => {
-//     const {
-//         idGetter,
-//         subItemGetter,
-//         subItemSetter,
-//         checkSetter,
-//         checkIndeterminateSetter
-//     } = options;
-//     if (!data || !data.length) { return [data, false];}
-//     let hasChecked = false;
-//     const newData = [...data].map(dataItem => {
-//         const [children, hasCheckedChildren] = mapCheckAndIntermidiate(subItemGetter(dataItem), options);
-//         const isChecked = options.valueMap[idGetter(dataItem)];
-//         if (isChecked || hasCheckedChildren) {
-//             hasChecked = true;
-//         }
-//         const newItem = { ...dataItem };
-//         subItemSetter(newItem, children);
-//         checkSetter(newItem, isChecked);
-//         checkIndeterminateSetter(newItem, !isChecked && hasCheckedChildren);
-//         return options.callback ? options.callback(newItem) : newItem;
-//     });
-//     return [newData, hasChecked];
-// };
-// /**
-//  *
-//  * @param data
-//  * @param options
-//  * @returns
-//  */
-// /**
-//  * Creates a new array with the results of calling the provided callback function
-//  * on every element in the provided data tree. The new tree items have their `check` and `checkIndeterminate` fields set based on provided value.
-//  *
-//  * @param {any[]} tree - The data tree.
-//  * @param {object} options - The options used to map the tree items like check and checkIndeterminateField fields
-//  * @returns {any[]} - The new data tree.
-//  */
-// export const mapMultiSelectTreeData = (
-//     tree,
-//     options: {
-//         checkField?: string;
-//         checkIndeterminateField?: string;
-//         subItemsField?: string;
-//         dataItemKey: string;
-//         value: Array<any>;
-//         callback?: (item) => any;
-//     }
-// ) => {
-//     const {
-//         subItemsField = 'items',
-//         checkField = 'checkField',
-//         checkIndeterminateField = 'checkIndeterminateField',
-//         callback
-//     } = options;
-//     const idGetter = getter(options.dataItemKey);
-//     const [result] = mapCheckAndIntermidiate(
-//         tree,
-//         {
-//             callback,
-//             valueMap: getValueMap(options.value, idGetter),
-//             idGetter,
-//             subItemGetter: getter(subItemsField),
-//             subItemSetter: setter(subItemsField),
-//             checkSetter: setter(checkField),
-//             checkIndeterminateSetter: setter(checkIndeterminateField)
-//         }
-//     );
-//     return result;
-// };

package/dist/npm/common/AdaptiveMode.js

@@ -1,49 +0,0 @@
-"use strict";
-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.AdaptiveMode = void 0;
-var React = require("react");
-var kendo_react_layout_1 = require("@progress/kendo-react-layout");
-var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
-var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
-/** @hidden */
-var MOBILE_SMALL_DEVISE = 500;
-/** @hidden */
-var AdaptiveMode = function (props) {
-    var footer = props.footer, children = props.children, _a = props.windowWidth, windowWidth = _a === void 0 ? 0 : _a, navigatable = props.navigatable, navigatableElements = props.navigatableElements, expand = props.expand, animation = props.animation, onClose = props.onClose, adaptiveTitle = props.adaptiveTitle, mobileFilter = props.mobileFilter;
-    var defaultProps = {
-        navigatable: navigatable || false,
-        navigatableElements: navigatableElements || [],
-        expand: expand,
-        animation: animation === false ? false : true,
-        onClose: onClose,
-        animationStyles: windowWidth <= MOBILE_SMALL_DEVISE ? { top: 0, width: '100%', height: '100%' } : undefined,
-        className: windowWidth <= MOBILE_SMALL_DEVISE
-            ? 'k-adaptive-actionsheet k-actionsheet-fullscreen'
-            : 'k-adaptive-actionsheet k-actionsheet-bottom'
-    };
-    return (React.createElement(kendo_react_layout_1.ActionSheet, __assign({}, defaultProps),
-        React.createElement(kendo_react_layout_1.ActionSheetHeader, { className: 'k-text-center' },
-            React.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" },
-                React.createElement("div", { className: "k-actionsheet-title" },
-                    React.createElement("div", null, adaptiveTitle)),
-                React.createElement("div", { className: "k-actionsheet-actions" },
-                    React.createElement(kendo_react_buttons_1.Button, { tabIndex: 0, "aria-label": "Cancel", "aria-disabled": "false", type: "button", fillMode: "flat", icon: 'x', svgIcon: kendo_svg_icons_1.xIcon, onClick: onClose }))),
-            mobileFilter &&
-                React.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, mobileFilter)),
-        children,
-        footer && React.createElement(kendo_react_layout_1.ActionSheetFooter, { className: 'k-actions k-actions-stretched' },
-            React.createElement(kendo_react_buttons_1.Button, { size: "large", tabIndex: 0, "aria-label": footer.cancelText, "aria-disabled": "false", type: "button", onClick: footer.onCancel }, footer.cancelText),
-            React.createElement(kendo_react_buttons_1.Button, { tabIndex: 0, themeColor: "primary", size: "large", "aria-label": footer.applyText, "aria-disabled": "false", type: "button", onClick: footer.onApply }, footer.applyText))));
-};
-exports.AdaptiveMode = AdaptiveMode;

package/dist/npm/common/ClearButton.d.ts

@@ -1,14 +0,0 @@
-import * as React from 'react';
-/**
- * @hidden
- */
-export interface ClearButtonProps {
-    onClick?: React.MouseEventHandler<HTMLSpanElement>;
-}
-/**
- * @hidden
- */
-export default class ClearButton extends React.Component<ClearButtonProps> {
-    onMouseDown: (e: any) => any;
-    render(): JSX.Element;
-}

package/dist/npm/common/ClearButton.js

@@ -1,41 +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 });
-var React = require("react");
-var kendo_react_intl_1 = require("@progress/kendo-react-intl");
-var messages_1 = require("../messages");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
-/**
- * @hidden
- */
-var ClearButton = /** @class */ (function (_super) {
-    __extends(ClearButton, _super);
-    function ClearButton() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.onMouseDown = function (e) { return e.preventDefault(); };
-        return _this;
-    }
-    ClearButton.prototype.render = function () {
-        var title = (0, kendo_react_intl_1.provideLocalizationService)(this).toLanguageString(messages_1.clear, messages_1.messages[messages_1.clear]);
-        return (React.createElement("span", { className: "k-clear-value", role: "button", onClick: this.props.onClick, onMouseDown: this.onMouseDown, tabIndex: -1, title: title, key: "clearbutton" },
-            React.createElement(kendo_react_common_1.IconWrap, { name: 'x', icon: kendo_svg_icons_1.xIcon })));
-    };
-    return ClearButton;
-}(React.Component));
-exports.default = ClearButton;
-(0, kendo_react_intl_1.registerForLocalization)(ClearButton);