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

package/dist/es/FloatingActionButton/FloatingActionButtonItem.js

@@ -1,82 +0,0 @@
-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);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { classNames, getTabIndex, IconWrap, svgIconPropType } from '@progress/kendo-react-common';
-/**
- * Represents the [KendoReact FloatingActionButtonItem component]({% slug overview_floatingactionbutton %}).
- *
- * @example
- * ```jsx
- *
- * const App = () => {
- *   return (
- *       <FloatingActionButton items={[{icon: 'pencil', text: 'Edit'}, {icon: 'close', text: 'Remove'}] icon: 'plus'} />
- *   );
- * };
- *    ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-export var FloatingActionButtonItem = React.forwardRef(function (props, ref) {
-    var className = props.className, disabled = props.disabled, text = props.text, icon = props.icon, style = props.style, id = props.id, focused = props.focused, tabIndex = props.tabIndex, index = props.index, dataItem = props.dataItem, item = props.item, svgIcon = props.svgIcon, onDown = props.onDown, onClick = props.onClick, others = __rest(props, ["className", "disabled", "text", "icon", "style", "id", "focused", "tabIndex", "index", "dataItem", "item", "svgIcon", "onDown", "onClick"]);
-    var elementRef = React.useRef(null);
-    var focusElement = React.useCallback(function () {
-        if (elementRef.current) {
-            elementRef.current.focus();
-        }
-    }, []);
-    var getImperativeHandle = React.useCallback(function () { return ({
-        element: elementRef.current,
-        focus: focusElement
-    }); }, [focusElement]);
-    React.useImperativeHandle(ref, getImperativeHandle);
-    var handleClick = React.useCallback(function (event) {
-        if (onClick && index !== undefined && !disabled) {
-            onClick(event, index);
-        }
-    }, [onClick, index]);
-    var itemClassNames = React.useMemo(function () { return classNames('k-fab-item', {
-        'k-focus': focused,
-        'k-disabled': disabled
-    }, className); }, [className, disabled, focused]);
-    var ItemComp = item;
-    return (React.createElement("li", __assign({ ref: elementRef, id: id, className: itemClassNames, style: style, role: 'menuitem', tabIndex: getTabIndex(tabIndex, disabled), "aria-disabled": disabled, "aria-label": "".concat(text || '', " floatingactionbutton item"), onClick: handleClick, onMouseDown: onDown, onPointerDown: onDown }, others), ItemComp ?
-        React.createElement(ItemComp, { itemIndex: index, item: dataItem }) :
-        (React.createElement(React.Fragment, null,
-            text && React.createElement("span", { className: "k-fab-item-text" }, text),
-            (icon || svgIcon) ? React.createElement(IconWrap, { className: "k-fab-item-icon", name: icon, icon: svgIcon }) : null))));
-});
-FloatingActionButtonItem.propTypes = {
-    className: PropTypes.string,
-    style: PropTypes.object,
-    children: PropTypes.any,
-    disabled: PropTypes.bool,
-    focused: PropTypes.bool,
-    index: PropTypes.number,
-    icon: PropTypes.string,
-    svgIcon: svgIconPropType,
-    text: PropTypes.string,
-    tabIndex: PropTypes.number,
-    customProp: PropTypes.any
-};
-FloatingActionButtonItem.displayName = 'KendoFloatingActionButtonItem';

package/dist/es/FloatingActionButton/interfaces/FloatingActionButtonHandle.d.ts

@@ -1,13 +0,0 @@
-/**
- * The FloatingActionButton ref.
- */
-export interface FloatingActionButtonHandle {
-    /**
-     * The FloatingActionButton element.
-     */
-    element: HTMLButtonElement | null;
-    /**
-     * Focus the FloatingActionButton.
-     */
-    focus: () => void;
-}

package/dist/es/FloatingActionButton/interfaces/FloatingActionButtonHandle.js

@@ -1 +0,0 @@
-export {};

package/dist/es/FloatingActionButton/interfaces/FloatingActionButtonPopupSettings.js

@@ -1 +0,0 @@
-export {};

package/dist/es/FloatingActionButton/interfaces/FloatingActionButtonProps.d.ts

@@ -1,216 +0,0 @@
-/// <reference types="react" />
-import { FloatingActionButtonPopupSettings } from './FloatingActionButtonPopupSettings';
-import { FloatingActionButtonItemProps } from '../FloatingActionButtonItem';
-import { FloatingActionButtonAlign } from '../models/align';
-import { FloatingActionButtonAlignOffset } from '../models/align-offset';
-import { FloatingActionButtonEvent, FloatingActionButtonItemEvent } from '../models/events';
-import { FloatingActionButtonPositionMode } from '../models/position-mode';
-import { FloatingActionButtonSize } from '../models/size';
-import { FloatingActionButtonThemeColor } from '../models/theme-color';
-import { FloatingActionButtonRounded } from '../models/rounded';
-import { SVGIcon } from '@progress/kendo-react-common';
-/**
- * @hidden
- */
-declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
-/**
- * Represents the props of the [KendoReact FloatingActionButton component]({% slug overview_floatingactionbutton %}).
- */
-export interface FloatingActionButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onBlur' | 'onFocus' | 'onKeyDown' | 'onClick'> {
-    /**
-     * Sets additional CSS styles to the Floating Action Button.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Specifies a list of CSS classes that will be added to the Floating Action Button.
-     */
-    className?: string;
-    /**
-     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL [see example]({% slug rtl_buttons %}).
-     */
-    dir?: string;
-    /**
-     * Sets the `id` property of the root HTML element.
-     */
-    id?: string;
-    /**
-     * Specifies if the Floating Action Button is disabled [see example]({% slug disabled_floatingactionbutton %}). Defaults to `false`.
-     */
-    disabled?: boolean;
-    /**
-     * Defines the icon rendered in the Floating Action Button [see example]({% slug contenttypes_floatingactionbutton %}).
-     */
-    icon?: string;
-    /**
-     * Defines the SVG icon rendered in the Floating Action Button [see example]({% slug contenttypes_floatingactionbutton %}).
-     */
-    svgIcon?: SVGIcon;
-    /**
-     * Defines a CSS class or multiple classes separated by spaces which are applied
-     * to a `span` element inside the Floating Action Button. Allows the usage of custom icons.
-     */
-    iconClass?: string;
-    /**
-     * Specifies the text of the Floating Action Button [see example]({% slug contenttypes_floatingactionbutton %}).
-     */
-    text?: string;
-    /**
-     * Specifies the horizontal and vertical offset applied to the Floating Action Button
-     * [see example]({% slug positioning_floatingactionbutton %}).
-     *
-     * Normally, the floating button is positioned next to the boundaries of its container with a default offset of `16px`.
-     *
-     * Positive offsets move floating buttons, which are in a corner, further from that corner. Buttons, which are
-     * not in a corner, can be moved along the container's boundary or towards the center of the container.
-     *
-     * A negative offset can be used to force a button to overflow the boundaries of its container.
-     *
-     * The possible keys are:
-     * * `x`&mdash;Sets the horizontal offset of the Floating Action Button.
-     * * `y`&mdash;Sets the vertical offset of the Floating Action Button.
-     *
-     */
-    alignOffset?: FloatingActionButtonAlignOffset;
-    /**
-     * Specifies the horizontal and vertical alignment of the Floating Action Button in relation to the container
-     * [see example]({% slug positioning_floatingactionbutton %}).
-     *
-     * > Centering the Floating Action Button in both horizontal and vertical dimension is not a typical use case.
-     * Still, it is possible to achieve such a layout with appropriate offsets. Setting horizontal: "center" and vertical: "middle"
-     * at the same time is not supported.
-     *
-     * The possible keys are:
-     * * `horizontal`&mdash; Defines the possible horizontal alignment of the Floating Action Button..
-     *   * `start`&mdash;Uses the start point of the container.
-     *   * `center`&mdash;Uses the center point of the container.
-     *   * `end`(Default)&mdash;Uses the end point of the container
-     * * `vertical`&mdash; Defines the possible vertical alignment of the Floating Action Button..
-     *   * `top`&mdash;Uses the top point of the container.
-     *   * `middle`&mdash;Uses the middle point of the container.
-     *   * `bottom`(Default)&mdash;Uses the bottom point of the container.
-     *
-     */
-    align?: FloatingActionButtonAlign;
-    /**
-     * Specifies the position mode of the Floating Action Button
-     * [see example]({% slug positioning_floatingactionbutton %}). It is based on the
-     * [CSS position](https://developer.mozilla.org/en-US/docs/Web/CSS/position) rule.
-     *
-     * * The possible values are:
-     * * 'fixed' (Default)
-     * * 'absolute'
-     */
-    positionMode?: FloatingActionButtonPositionMode;
-    /**
-     * Specifies the size of the Floating Action Button
-     * [see example]({% slug appearance_floatingactionbutton %}).
-     *
-     * The possible values are:
-     * * `small`&mdash;Applies half of the default padding, e.g. `8px`.
-     * * `medium` (Default)&mdash;Applies the default padding, e.g. `16px`.
-     * * `large`&mdash;Applies one and one half of the default padding, e.g. `24px`.
-     * * `null`&mdash;Does not set a size `className`.
-     *
-     */
-    size?: FloatingActionButtonSize;
-    /**
-     * Specifies the rounding of the Floating Action Button.
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium`
-     * * `large`
-     * * `full`
-     * * `null`&mdash;Does not set a rounded `className`.
-     *
-     * @default `full`
-     */
-    rounded?: FloatingActionButtonRounded;
-    /**
-     * Specifies the theme color of the Floating Action Button
-     * [see example]({% slug appearance_floatingactionbutton %}).
-     *
-     * The possible values are:
-     * * `primary` (Default)&mdash;Applies coloring based on the primary theme color.
-     * * `secondary`&mdash;Applies coloring based on the secondary theme color.
-     * * `tertiary`&mdash; Applies coloring based on the tertiary theme color.
-     * * `info`&mdash;Applies coloring based on the info theme color.
-     * * `success`&mdash; Applies coloring based on the success theme color.
-     * * `warning`&mdash; Applies coloring based on the warning theme color.
-     * * `error`&mdash; Applies coloring based on the error theme color.
-     * * `dark`&mdash; Applies coloring based on the dark theme color.
-     * * `light`&mdash; Applies coloring based on the light theme color.
-     * * `inverse`&mdash; Applies coloring based on the inverse theme color.
-     * * `null`&mdash;Does not set a theme color `className`.
-     *
-     */
-    themeColor?: FloatingActionButtonThemeColor;
-    /**
-     * The collection of items that will be rendered in the Floating Action Button
-     * [see example]({% slug databinding_floatingactionbutton %}).
-     */
-    items?: Array<FloatingActionButtonItemProps>;
-    /**
-     * Overrides the default component responsible for visualizing a single item
-     * [see example]({% slug customization_floatingactionbutton %}#toc-items-rendering).
-     *
-     * The default Component is: [FloatingActionButtonItem]({% slug api_buttons_floatingactionbuttonitem %}).
-     */
-    item?: React.ComponentType<FloatingActionButtonItemProps>;
-    /**
-     * Represents the additional props that will be passed to the Popup inside the Floating Action Button
-     * [see example]({% slug customization_floatingactionbutton %}#toc-popup-behavior).
-     */
-    popupSettings?: FloatingActionButtonPopupSettings;
-    /**
-     * Specifies the `tabIndex` of the main button.
-     */
-    tabIndex?: number;
-    /**
-     * Specifies the `accessKey` of the main button.
-     */
-    accessKey?: string;
-    /**
-     * Specifies if the Floating Action Button will be modal by rendering an overlay under the component.
-     */
-    modal?: boolean;
-    /**
-     * Set styles to the Floating Action Button overlay element rendered when the `modal` prop is enabled.
-     */
-    overlayStyle?: React.CSSProperties;
-    /**
-     * Fires when the Floating Action Button is focused
-     * [see example]({% slug overview_floatingactionbutton %}#toc-events).
-     */
-    onFocus?: (event: FloatingActionButtonEvent) => void;
-    /**
-     * Fires when the Floating Action Button is blurred
-     * [see example]({% slug overview_floatingactionbutton %}#toc-events).
-     */
-    onBlur?: (event: FloatingActionButtonEvent) => void;
-    /**
-     * Fires when the Floating Action Button is clicked.
-     */
-    onClick?: (event: FloatingActionButtonEvent) => void;
-    /**
-     * Fires when the Floating Action Button Item is clicked
-     * [see example]({% slug overview_floatingactionbutton %}#toc-events).
-     */
-    onItemClick?: (event: FloatingActionButtonItemEvent) => void;
-    /**
-     * Triggers onKeyDown event
-     * [see example]({% slug overview_floatingactionbutton %}#toc-events).
-     */
-    onKeyDown?: (event: FloatingActionButtonEvent) => void;
-    /**
-     * Fires when the popup which contains the items is opened
-     * [see example]({% slug overview_floatingactionbutton %}#toc-events).
-     */
-    onOpen?: (event: FloatingActionButtonEvent) => void;
-    /**
-     * Fires when the popup which contains the items is closed
-     * [see example]({% slug overview_floatingactionbutton %}#toc-events).
-     */
-    onClose?: (event: FloatingActionButtonEvent) => void;
-}
-export {};

package/dist/es/FloatingActionButton/interfaces/FloatingActionButtonProps.js

@@ -1 +0,0 @@
-export {};

package/dist/es/FloatingActionButton/models/align-offset.js

@@ -1 +0,0 @@
-export {};

package/dist/es/FloatingActionButton/models/align.d.ts

@@ -1,27 +0,0 @@
-/**
- * Specifies the horizontal and vertical alignment of the Floating Action Button in relation to the container.
- *
- * > Centering the Floating Action Button in both horizontal and vertical dimension is not a typical use case.
- * Still, it is possible to achieve such a layout with appropriate offsets. Setting horizontal: "center" and
- * vertical: "middle" at the same time is not supported.
- */
-export interface FloatingActionButtonAlign {
-    /**
-     * Defines the possible horizontal alignment of the Floating Action Button.
-     *
-     * The available values are:
-     * - `start`—Uses the start point of the container.
-     * - `center`—Uses the center point of the container.
-     * - `end`(Default)—Uses the end point of the container.
-     */
-    horizontal?: 'start' | 'center' | 'end';
-    /**
-     * Defines the possible vertical alignment of the Floating Action Button.
-     *
-     * The available values are:
-     * - `top`—Uses the top point of the container.
-     * - `middle`—Uses the middle point of the container.
-     * - `bottom`(Default)—Uses the bottom point of the container.
-     */
-    vertical?: 'top' | 'middle' | 'bottom';
-}

package/dist/es/FloatingActionButton/models/align.js

@@ -1 +0,0 @@
-export {};

package/dist/es/FloatingActionButton/models/events.js

@@ -1 +0,0 @@
-export {};

package/dist/es/FloatingActionButton/models/position-mode.d.ts

@@ -1,9 +0,0 @@
-/**
- * Specifies the position mode of the Floating Action Button. It is based on the
- * [CSS position](https://developer.mozilla.org/en-US/docs/Web/CSS/position) rule.
- *
- * * The possible values are:
- * * 'absolute' (Default)
- * * 'fixed'
- */
-export declare type FloatingActionButtonPositionMode = 'absolute' | 'fixed';

package/dist/es/FloatingActionButton/models/position-mode.js

@@ -1 +0,0 @@
-export {};

package/dist/es/FloatingActionButton/models/rounded.d.ts

@@ -1,12 +0,0 @@
-/**
- * Specifies the rounding of the Floating Action Button.
- *
- * The possible values are:
- * * `small`
- * * `medium`
- * * `large`
- * * `full`
- * * `null`—Does not set a rounded `className`.
- *
- */
-export declare type FloatingActionButtonRounded = null | 'small' | 'medium' | 'large' | 'full';

package/dist/es/FloatingActionButton/models/rounded.js

@@ -1 +0,0 @@
-export {};

package/dist/es/FloatingActionButton/models/size.d.ts

@@ -1,11 +0,0 @@
-/**
- * Specifies the size of the Floating Action Button.
- *
- * The possible values are:
- * * `small`—Applies half of the default padding, e.g. `8px`.
- * * `medium` (Default)—Applies the default padding, e.g. `16px`.
- * * `large`—Applies one and one half of the default padding, e.g. `24px`.
- * * `null`—Does not set a size `className`.
- *
- */
-export declare type FloatingActionButtonSize = null | 'small' | 'medium' | 'large';

package/dist/es/FloatingActionButton/models/size.js

@@ -1 +0,0 @@
-export {};

package/dist/es/FloatingActionButton/models/theme-color.d.ts

@@ -1,18 +0,0 @@
-/**
- * Specifies the theme color of the Floating Action Button..
- *
- * The possible values are:
- * * `primary` (Default)—Applies coloring based on the primary theme color.
- * * `secondary`—Applies coloring based on the secondary theme color.
- * * `tertiary`— Applies coloring based on the tertiary theme color.
- * * `info`—Applies coloring based on the info theme color.
- * * `success`— Applies coloring based on the success theme color.
- * * `warning`— Applies coloring based on the warning theme color.
- * * `error`— Applies coloring based on the error theme color.
- * * `dark`— Applies coloring based on the dark theme color.
- * * `light`— Applies coloring based on the light theme color.
- * * `inverse`— Applies coloring based on the inverse theme color.
- * * `null`—Does not set a theme color `className`.
- *
- */
-export declare type FloatingActionButtonThemeColor = null | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';

package/dist/es/FloatingActionButton/models/theme-color.js

@@ -1 +0,0 @@
-export {};

package/dist/es/FloatingActionButton/utils.d.ts

@@ -1,27 +0,0 @@
-import { Align } from '@progress/kendo-react-popup';
-import { FloatingActionButtonAlignOffset } from './models/align-offset';
-import { FloatingActionButtonAlign } from './models/align';
-/**
- * @hidden
- */
-export declare const DEFAULT_OFFSET = "16px";
-/**
- * @hidden
- */
-export declare const toStringValues: (val: number | string) => string;
-/**
- * @hidden
- */
-export declare const getAnchorAlign: (fabAlign: FloatingActionButtonAlign, rtl?: boolean) => Align;
-/**
- * @hidden
- */
-export declare const getPopupAlign: (fabAlign: FloatingActionButtonAlign, rtl: boolean) => Align;
-/**
- * @hidden
- */
-export declare const getTextDirectionClass: (rtl: string, hAlign: any) => any;
-/**
- * @hidden
- */
-export declare const position: (ref: any, align: FloatingActionButtonAlign, alignOffset: FloatingActionButtonAlignOffset | undefined, isRtl: boolean) => void;

package/dist/es/FloatingActionButton/utils.js

@@ -1,93 +0,0 @@
-/**
- * @hidden
- */
-export var DEFAULT_OFFSET = '16px';
-/**
- * @hidden
- */
-export var toStringValues = function (val) {
-    if (typeof val === 'number') {
-        return val + 'px';
-    }
-    return val;
-};
-/**
- * @hidden
- */
-export var getAnchorAlign = function (fabAlign, rtl) {
-    var align = { horizontal: (rtl ? 'right' : 'left'), vertical: 'bottom' };
-    if (fabAlign.horizontal === 'end') {
-        align.horizontal = rtl ? 'left' : 'right';
-    }
-    return align;
-};
-/**
- * @hidden
- */
-export var getPopupAlign = function (fabAlign, rtl) {
-    var align = { horizontal: (rtl ? 'right' : 'left'), vertical: 'top' };
-    if (fabAlign.horizontal === 'end') {
-        align.horizontal = rtl ? 'left' : 'right';
-    }
-    return align;
-};
-/**
- * @hidden
- */
-export var getTextDirectionClass = function (rtl, hAlign) {
-    var al = hAlign === 'end' ? 'end' : 'start';
-    var directions = {
-        rtl: { end: 'k-text-left', start: 'k-text-right' },
-        ltr: { start: 'k-text-left', end: 'k-text-right' }
-    };
-    return directions[rtl][al];
-};
-/**
- * @hidden
- */
-export var position = function (ref, align, alignOffset, isRtl) {
-    var horizontal = align.horizontal;
-    var vertical = align.vertical;
-    if (ref.current) {
-        var xFab = alignOffset && alignOffset.x !== undefined ?
-            toStringValues(alignOffset.x) :
-            DEFAULT_OFFSET;
-        var xCenterFab = alignOffset && alignOffset.x !== undefined ?
-            "calc(50% + ".concat(toStringValues(alignOffset.x), ")") :
-            '50%';
-        var yFab = alignOffset && alignOffset.y !== undefined ?
-            toStringValues(alignOffset.y) :
-            DEFAULT_OFFSET;
-        var yCenterFab = alignOffset && alignOffset.y !== undefined ?
-            "calc(50% + ".concat(toStringValues(alignOffset.y), ")") :
-            '50%';
-        ref.current.style.setProperty(horizontalPosition(align, isRtl), horizontal === 'center' ? xCenterFab : xFab);
-        ref.current.style.setProperty(verticalPosition(align), vertical === 'middle' ? yCenterFab : yFab);
-        if (isRtl) {
-            if ((vertical === 'top' || vertical === 'bottom') && horizontal === 'start') {
-                ref.current.style.setProperty('left', 'unset');
-            }
-            if (vertical === 'middle' && horizontal === 'end') {
-                ref.current.style.setProperty('right', 'unset');
-            }
-            if (vertical === 'middle' && horizontal === 'start') {
-                ref.current.style.setProperty('left', 'unset');
-            }
-        }
-    }
-};
-var horizontalPosition = function (align, isRtl) {
-    var horizontal = align.horizontal;
-    return {
-        end: isRtl ? 'left' : 'right',
-        center: 'left',
-        start: isRtl ? 'right' : 'left'
-    }[horizontal || 'end'];
-};
-var verticalPosition = function (align) {
-    return {
-        top: 'top',
-        middle: 'top',
-        bottom: 'bottom'
-    }[align.vertical || 'bottom'];
-};

package/dist/es/ListButton/ButtonItem.js

@@ -1,24 +0,0 @@
-import * as React from 'react';
-import { classNames, IconWrap } from '@progress/kendo-react-common';
-/**
- * @hidden
- */
-export var ButtonItem = function (props) {
-    var handleClick = React.useCallback(function (event) {
-        props.onClick(event, props.index);
-    }, [props]);
-    var As = props.dataItem.render || props.item || (props.item === undefined ? props.render : null);
-    var text = props.dataItem.text !== undefined ? props.dataItem.text : (props.textField ? props.dataItem[props.textField] : props.dataItem);
-    var item = (React.createElement("li", { id: props.id, className: classNames('k-item', props.className, { 'k-focus': props.focused }), tabIndex: -1, onClick: handleClick, onMouseDown: props.onDown, onPointerDown: props.onDown, role: "menuitem", "aria-disabled": props.dataItem.disabled || undefined }, (React.createElement("span", { tabIndex: -1, className: classNames('k-link k-menu-link', {
-            'k-selected': props.dataItem.selected,
-            'k-disabled': props.dataItem.disabled
-        }), key: "icon" }, As
-        ? (React.createElement(As, { item: props.dataItem, itemIndex: props.index }))
-        : (React.createElement(React.Fragment, null,
-            (props.dataItem.icon || props.dataItem.iconClass) && (React.createElement(IconWrap, { className: props.dataItem.iconClass, name: props.dataItem.icon, icon: props.dataItem.svgIcon })),
-            (props.dataItem.imageUrl) && (React.createElement("img", { role: "presentation", alt: "", src: props.dataItem.imageUrl, className: 'k-icon' })),
-            (text) && (React.createElement("span", { className: "k-menu-link-text" }, text))))))));
-    return ((props.item !== undefined && /* to be removed in 5.0.0 */
-        props.render !== undefined) ? props.render.call(undefined, item, props) : item);
-};
-ButtonItem.displayName = 'KendoReactButtonItem';