@progress/kendo-react-buttons 5.10.0-dev.202301091032 → 5.10.0-dev.202301111405

package/dist/es/Button.d.ts

@@ -22,19 +22,6 @@ export interface ButtonProps extends ButtonInterface, React.ButtonHTMLAttributes
      * @default `medium`
      */
     size?: null | 'small' | 'medium' | 'large';
-    /**
-     * Configures the `shape` of the Button.
-     *
-     * The available options are:
-     * - rectangle
-     * - square
-     * - null—Does not set a shape `className`.
-     *
-     * @default `null`
-     *
-     * @deprecated The `shape` property will be deprecated with version `^6` of the `@progress/kendo-react-buttons` package.
-     */
-    shape?: null | 'rectangle' | 'square';
     /**
      * Configures the `roundness` of the Button.
      *
@@ -97,11 +84,15 @@ export declare class Button extends React.Component<ButtonProps, ButtonState> {
         selected: PropTypes.Requireable<boolean>;
         togglable: PropTypes.Requireable<boolean>;
         icon: PropTypes.Requireable<string>;
+        svgIcon: PropTypes.Requireable<PropTypes.InferProps<{
+            name: PropTypes.Validator<string>;
+            content: PropTypes.Validator<string>;
+            viewBox: PropTypes.Validator<string>;
+        }>>;
         iconClass: PropTypes.Requireable<string>;
         imageUrl: PropTypes.Requireable<string>;
         imageAlt: PropTypes.Requireable<string>;
         size: PropTypes.Requireable<string | null>;
-        shape: PropTypes.Requireable<string | null>;
         rounded: PropTypes.Requireable<string | null>;
         fillMode: PropTypes.Requireable<string | null>;
         themeColor: PropTypes.Requireable<string | null>;
@@ -112,7 +103,6 @@ export declare class Button extends React.Component<ButtonProps, ButtonState> {
     static defaultProps: {
         togglable: boolean;
         size: string;
-        shape: null;
         rounded: string;
         fillMode: string;
         themeColor: string;

package/dist/es/Button.js

@@ -37,20 +37,19 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames, kendoThemeMaps } from '@progress/kendo-react-common';
+import { classNames, kendoThemeMaps, IconWrap, svgIconPropType } from '@progress/kendo-react-common';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from './package-metadata';
 /**
  * @hidden
  */
 function iconElement(_a) {
-    var imageUrl = _a.imageUrl, icon = _a.icon, iconClass = _a.iconClass, imageAlt = _a.imageAlt;
+    var imageUrl = _a.imageUrl, name = _a.name, iconClass = _a.iconClass, svgIcon = _a.svgIcon, imageAlt = _a.imageAlt;
     if (imageUrl) {
         return (React.createElement("img", { role: "presentation", className: 'k-button-icon', alt: imageAlt, src: imageUrl }));
     }
-    else if (icon) {
-        var iconClasses = classNames('k-button-icon k-icon', 'k-i-' + icon);
-        return (React.createElement("span", { role: "presentation", className: iconClasses }));
+    else if (name || svgIcon) {
+        return React.createElement(IconWrap, { className: 'k-button-icon', name: name, icon: svgIcon });
     }
     else if (iconClass) {
         return (React.createElement("span", { role: "presentation", className: classNames('k-button-icon', iconClass) }));
@@ -108,18 +107,18 @@ var Button = /** @class */ (function (_super) {
     Button.prototype.render = function () {
         var _a;
         var _this = this;
-        var _b = this.props, children = _b.children, togglable = _b.togglable, icon = _b.icon, iconClass = _b.iconClass, imageUrl = _b.imageUrl, imageAlt = _b.imageAlt, className = _b.className, onClick = _b.onClick, _c = _b.size, size = _c === void 0 ? Button.defaultProps.size : _c, _d = _b.shape, shape = _d === void 0 ? Button.defaultProps.shape : _d, _e = _b.rounded, rounded = _e === void 0 ? Button.defaultProps.rounded : _e, _f = _b.fillMode, fillMode = _f === void 0 ? Button.defaultProps.fillMode : _f, _g = _b.themeColor, themeColor = _g === void 0 ? Button.defaultProps.themeColor : _g, htmlAttributes = __rest(_b, ["children", "togglable", "icon", "iconClass", "imageUrl", "imageAlt", "className", "onClick", "size", "shape", "rounded", "fillMode", "themeColor"]);
+        var _b = this.props, children = _b.children, togglable = _b.togglable, icon = _b.icon, iconClass = _b.iconClass, svgIcon = _b.svgIcon, imageUrl = _b.imageUrl, imageAlt = _b.imageAlt, className = _b.className, onClick = _b.onClick, _c = _b.size, size = _c === void 0 ? Button.defaultProps.size : _c, _d = _b.rounded, rounded = _d === void 0 ? Button.defaultProps.rounded : _d, _e = _b.fillMode, fillMode = _e === void 0 ? Button.defaultProps.fillMode : _e, _f = _b.themeColor, themeColor = _f === void 0 ? Button.defaultProps.themeColor : _f, htmlAttributes = __rest(_b, ["children", "togglable", "icon", "iconClass", "svgIcon", "imageUrl", "imageAlt", "className", "onClick", "size", "rounded", "fillMode", "themeColor"]);
         var hasIcon = (icon !== undefined || iconClass !== undefined || imageUrl !== undefined);
         var hasChildren = children !== undefined;
         var iconEl = iconElement({
-            icon: icon,
+            name: icon,
+            svgIcon: svgIcon,
             iconClass: iconClass,
             imageUrl: imageUrl,
             imageAlt: imageAlt
         });
         return (React.createElement("button", __assign({ ref: function (button) { return _this._element = button; }, "aria-pressed": togglable ? this.state.selected : undefined }, htmlAttributes, { onClick: this.handleClick, className: classNames('k-button', (_a = {},
                 _a["k-button-".concat(kendoThemeMaps.sizeMap[size] || size)] = size,
-                _a["k-button-".concat(shape)] = shape,
                 _a["k-button-".concat(fillMode)] = fillMode,
                 _a["k-button-".concat(fillMode, "-").concat(themeColor)] = Boolean(fillMode && themeColor),
                 _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
@@ -147,11 +146,11 @@ var Button = /** @class */ (function (_super) {
         selected: PropTypes.bool,
         togglable: PropTypes.bool,
         icon: PropTypes.string,
+        svgIcon: svgIconPropType,
         iconClass: PropTypes.string,
         imageUrl: PropTypes.string,
         imageAlt: PropTypes.string,
         size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
-        shape: PropTypes.oneOf([null, 'rectangle', 'square']),
         rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
         fillMode: PropTypes.oneOf([null, 'flat', 'link', 'outline', 'solid']),
         // eslint-disable-next-line max-len
@@ -163,7 +162,6 @@ var Button = /** @class */ (function (_super) {
     Button.defaultProps = {
         togglable: false,
         size: 'medium',
-        shape: null,
         rounded: 'medium',
         fillMode: 'solid',
         themeColor: 'base'

package/dist/es/ButtonInterface.d.ts

@@ -1,3 +1,4 @@
+import { SVGIcon } from '@progress/kendo-react-common';
 /**
  * Inherits the native HTML Button. Represents the properties which can be set to a Button.
  */
@@ -18,6 +19,7 @@ export interface ButtonInterface {
      * Defines the name for an existing icon in a KendoReact theme ([see example]({% slug icons_button %})). The icon is rendered inside the Button by a `span.k-icon` element.
      */
     icon?: string;
+    svgIcon?: SVGIcon;
     /**
      * Defines a CSS class—or multiple classes separated by spaces—which are applied to a `span` element inside the Button ([see example]({% slug icons_button %})). Allows the usage of custom icons.
      */

package/dist/es/ButtonInterface.js

@@ -1,2 +1,3 @@
+/* eslint-disable max-len */
 export {};
 // tslint:enable:max-line-length

package/dist/es/Chip/Chip.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SVGIcon } from '@progress/kendo-react-common';
 import { ChipRemoveEvent, ChipMouseEvent, ChipFocusEvent, ChipKeyboardEvent } from './../models/index';
 /**
  * Represents the properties of [Chip]({% slug api_buttons_chip %}) component.
@@ -41,21 +42,33 @@ export interface ChipProps {
      */
     removable?: boolean;
     /**
-     * Determines if the Chip has custom `removeIcon`.
+     * Determines if the Chip has custom font `removeIcon`.
      */
     removeIcon?: string;
+    /**
+     * Determines if the Chip has custom SVG `removeIcon`.
+     */
+    removeSvgIcon?: SVGIcon;
     /**
      * Determines if the Chip is disabled.
      */
     disabled?: boolean;
     /**
-     * Determines if the Chip has an `icon`.
+     * Determines if the Chip has a font `icon`.
      */
     icon?: string;
     /**
-     * Determines if the Chip has custom selection `icon`.
+     * Determines if the Chip has an SVG `icon`.
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Determines if the Chip has custom selection font `icon`.
      */
     selectedIcon?: string;
+    /**
+     * Determines if the Chip has custom selection SVG `icon`.
+     */
+    selectedSvgIcon?: SVGIcon;
     /**
      * Triggered on Chip removing.
      */

package/dist/es/Chip/Chip.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { ChipListSelectionContext, ChipListFocusContext, ChipListDataContext } from './ChipList';
-import { classNames, useDir, getTabIndex, Keys, kendoThemeMaps } from '@progress/kendo-react-common';
+import { classNames, useDir, getTabIndex, Keys, IconWrap, kendoThemeMaps, toIconName, svgIconPropType } from '@progress/kendo-react-common';
 import { FOCUS_ACTION } from './focus-reducer';
 import { DATA_ACTION } from './data-reducer';
 import { SELECTION_ACTION } from './selection-reducer';
@@ -117,15 +117,17 @@ export var Chip = React.forwardRef(function (props, ref) {
             _a["k-chip-".concat(props.fillMode)] = props.fillMode,
             _a["k-chip-".concat(props.fillMode, "-").concat(props.themeColor)] = Boolean(props.fillMode && props.themeColor),
             _a), props.className), "aria-checked": selected, "aria-disabled": props.disabled, "aria-describedby": props.ariaDescribedBy, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown }),
-        (selected && props.selectedIcon) && React.createElement("span", { className: classNames('k-chip-icon', 'k-icon', props.selectedIcon) }),
-        props.icon && React.createElement("span", { className: classNames('k-chip-icon', 'k-icon', props.icon) }),
+        (selected && (props.selectedIcon || props.selectedSvgIcon)) &&
+            React.createElement(IconWrap, { className: 'k-chip-icon', name: props.selectedIcon ? toIconName(props.selectedIcon) : undefined, icon: props.selectedSvgIcon }),
+        (props.icon || props.svgIcon) &&
+            React.createElement(IconWrap, { className: 'k-chip-icon', name: props.icon ? toIconName(props.icon) : undefined, icon: props.svgIcon }),
         React.createElement("span", { className: 'k-chip-content' }, props.children !== undefined
             ? props.children
             : props.text &&
                 React.createElement("span", { "aria-label": props.text, className: 'k-chip-label' }, props.text)),
         props.removable && (React.createElement("span", { className: "k-chip-actions" },
-            React.createElement("span", { className: classNames('k-chip-action', 'k-chip-remove-action') },
-                React.createElement("span", { className: classNames('k-icon', props.removeIcon), onClick: handleRemove }))))));
+            React.createElement("span", { className: classNames('k-chip-action', 'k-chip-remove-action'), onClick: handleRemove },
+                React.createElement(IconWrap, { name: props.removeIcon ? toIconName(props.removeIcon) : undefined, icon: props.removeSvgIcon }))))));
 });
 var propTypes = {
     id: PropTypes.string,
@@ -134,9 +136,12 @@ var propTypes = {
     dir: PropTypes.oneOf(['ltr', 'rtl']),
     removable: PropTypes.bool,
     removeIcon: PropTypes.string,
+    removeIconSvg: svgIconPropType,
     disabled: PropTypes.bool,
     icon: PropTypes.string,
+    svgIcon: svgIconPropType,
     selectedIcon: PropTypes.string,
+    selectedIconSvg: svgIconPropType,
     onRemove: PropTypes.func,
     dataItem: PropTypes.any,
     selected: PropTypes.bool,

package/dist/es/FloatingActionButton/FloatingActionButton.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { kendoThemeMaps, useZIndexContext, validatePackage, ZIndexContext } from '@progress/kendo-react-common';
+import { IconWrap, kendoThemeMaps, svgIconPropType, useZIndexContext, validatePackage, ZIndexContext } from '@progress/kendo-react-common';
 import { classNames, guid, useDir, dispatchEvent, Keys, getTabIndex } from '@progress/kendo-react-common';
 import { FloatingActionButtonItem } from './FloatingActionButtonItem';
 import { packageMetadata } from '../package-metadata';
@@ -47,7 +47,7 @@ var DEFAULT_FAB_ZINDEX = 100;
  */
 export var FloatingActionButton = React.forwardRef(function (props, ref) {
     validatePackage(packageMetadata);
-    var _a = props.align, align = _a === void 0 ? defaultProps.align : _a, alignOffset = props.alignOffset, className = props.className, disabled = props.disabled, icon = props.icon, iconClass = props.iconClass, id = props.id, items = props.items, item = props.item, text = props.text, _b = props.positionMode, positionMode = _b === void 0 ? defaultProps.positionMode : _b, _c = props.shape, shape = _c === void 0 ? defaultProps.shape : _c, _d = props.size, size = _d === void 0 ? defaultProps.size : _d, style = props.style, _e = props.rounded, rounded = _e === void 0 ? defaultProps.rounded : _e, _f = props.themeColor, themeColor = _f === void 0 ? defaultProps.themeColor : _f, overlayStyle = props.overlayStyle, tabIndex = props.tabIndex, accessKey = props.accessKey, _g = props.popupSettings, popupSettings = _g === void 0 ? {} : _g, modal = props.modal, onClick = props.onClick, onItemClick = props.onItemClick, onFocus = props.onFocus, onBlur = props.onBlur, onKeyDown = props.onKeyDown, onOpen = props.onOpen, onClose = props.onClose, others = __rest(props, ["align", "alignOffset", "className", "disabled", "icon", "iconClass", "id", "items", "item", "text", "positionMode", "shape", "size", "style", "rounded", "themeColor", "overlayStyle", "tabIndex", "accessKey", "popupSettings", "modal", "onClick", "onItemClick", "onFocus", "onBlur", "onKeyDown", "onOpen", "onClose"]);
+    var _a = props.align, align = _a === void 0 ? defaultProps.align : _a, alignOffset = props.alignOffset, className = props.className, disabled = props.disabled, icon = props.icon, svgIcon = props.svgIcon, iconClass = props.iconClass, id = props.id, items = props.items, item = props.item, text = props.text, _b = props.positionMode, positionMode = _b === void 0 ? defaultProps.positionMode : _b, _c = props.size, size = _c === void 0 ? defaultProps.size : _c, style = props.style, _d = props.rounded, rounded = _d === void 0 ? defaultProps.rounded : _d, _e = props.themeColor, themeColor = _e === void 0 ? defaultProps.themeColor : _e, overlayStyle = props.overlayStyle, tabIndex = props.tabIndex, accessKey = props.accessKey, _f = props.popupSettings, popupSettings = _f === void 0 ? {} : _f, modal = props.modal, onClick = props.onClick, onItemClick = props.onItemClick, onFocus = props.onFocus, onBlur = props.onBlur, onKeyDown = props.onKeyDown, onOpen = props.onOpen, onClose = props.onClose, others = __rest(props, ["align", "alignOffset", "className", "disabled", "icon", "svgIcon", "iconClass", "id", "items", "item", "text", "positionMode", "size", "style", "rounded", "themeColor", "overlayStyle", "tabIndex", "accessKey", "popupSettings", "modal", "onClick", "onItemClick", "onFocus", "onBlur", "onKeyDown", "onOpen", "onClose"]);
     var zIndexContext = useZIndexContext();
     var currentZIndex = zIndexContext ? zIndexContext + ZINDEX_FAB_STEP : DEFAULT_FAB_ZINDEX;
     var target = React.useRef(null);
@@ -65,9 +65,9 @@ export var FloatingActionButton = React.forwardRef(function (props, ref) {
     }); }, [focusElement]);
     React.useImperativeHandle(target, getImperativeHandle);
     React.useImperativeHandle(ref, function () { return target.current; });
-    var _h = React.useState(false), open = _h[0], setOpen = _h[1];
-    var _j = React.useState(false), focused = _j[0], setFocused = _j[1];
-    var _k = React.useState(-1), focusedIndex = _k[0], setFocusedIndex = _k[1];
+    var _g = React.useState(false), open = _g[0], setOpen = _g[1];
+    var _h = React.useState(false), focused = _h[0], setFocused = _h[1];
+    var _j = React.useState(-1), focusedIndex = _j[0], setFocusedIndex = _j[1];
     var buttonId = React.useMemo(function () { return guid(); }, []);
     var dir = useDir(elementRef, props.dir);
     var isRtl = dir === 'rtl';
@@ -201,31 +201,31 @@ export var FloatingActionButton = React.forwardRef(function (props, ref) {
     }, [onKeyDown, focusedIndex, setFocusedIndex, isRtl, setOpen]);
     var buttonClassNames = React.useMemo(function () {
         var _a;
-        return classNames('k-fab k-fab-solid', (_a = {},
-            _a["k-fab-".concat(shape)] = shape,
-            _a['k-fab-sm'] = size === 'small',
-            _a['k-fab-md'] = size === 'medium',
-            _a['k-fab-lg'] = size === 'large',
-            _a['k-disabled'] = disabled,
-            _a['k-pos-absolute'] = positionMode === 'absolute',
-            _a['k-pos-fixed'] = positionMode === 'fixed',
-            _a['k-focus'] = focused,
+        return classNames('k-fab k-fab-solid', (_a = {
+                'k-fab-sm': size === 'small',
+                'k-fab-md': size === 'medium',
+                'k-fab-lg': size === 'large',
+                'k-disabled': disabled,
+                'k-pos-absolute': positionMode === 'absolute',
+                'k-pos-fixed': positionMode === 'fixed',
+                'k-focus': focused
+            },
             _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
             _a["k-fab-solid-".concat(themeColor)] = themeColor,
             _a), "k-".concat(align.vertical, "-").concat(align.horizontal), className);
-    }, [themeColor, size, rounded, shape, disabled, positionMode, align, focused, className]);
+    }, [themeColor, size, rounded, disabled, positionMode, align, focused, className]);
     var fabItems = (items && (items.map(function (element, index) {
         return (React.createElement(FloatingActionButtonItem, __assign({}, element, { key: index, index: index, id: "".concat(listId, "-").concat(index), disabled: disabled || element.disabled, focused: focusedIndex === index, dataItem: element, item: item, className: classNames(element.className, getTextDirectionClass(dir || 'ltr', align.horizontal)), onClick: handleItemClick, onDown: handleItemDown })));
     })));
-    var isIconFab = icon && !text;
+    var isIconFab = Boolean((icon || svgIcon) && !text);
     var fabWidth = elementRef.current ? elementRef.current.offsetWidth : 0;
     var iconWidth = 32;
     var spacing = (fabWidth / 2) - (iconWidth / 2);
     return (React.createElement(ZIndexContext.Provider, { value: currentZIndex },
         React.createElement(React.Fragment, null,
             React.createElement("button", __assign({ ref: elementRef, id: id || buttonId, role: items ? 'menubutton' : 'button', type: 'button', "aria-disabled": disabled, "aria-expanded": items ? open : undefined, "aria-haspopup": items ? true : false, "aria-label": "".concat(text || '', " floatingactionbutton"), "aria-owns": items ? listId : undefined, "aria-activedescendant": focusedIndex >= 0 && items ? "".concat(listId, "-").concat(focusedIndex) : undefined, tabIndex: getTabIndex(tabIndex, disabled), accessKey: accessKey, dir: dir, disabled: disabled, className: buttonClassNames, style: style, onClick: handleClick, onMouseDown: handleMouseDown, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown }, others),
-                icon ?
-                    React.createElement("span", { role: "presentation", className: classNames("k-fab-icon k-icon k-i-".concat(icon)) }) :
+                (icon || svgIcon) ?
+                    React.createElement(IconWrap, { className: "k-fab-icon", name: icon, icon: svgIcon }) :
                     iconClass ?
                         React.createElement("span", { role: "presentation", className: iconClass }) :
                         null,
@@ -249,6 +249,7 @@ FloatingActionButton.propTypes = {
     accessKey: PropTypes.string,
     disabled: PropTypes.bool,
     icon: PropTypes.string,
+    svgIcon: svgIconPropType,
     iconClass: PropTypes.string,
     text: PropTypes.string,
     alignOffset: PropTypes.shape({
@@ -260,7 +261,6 @@ FloatingActionButton.propTypes = {
         horizontal: PropTypes.oneOf(['start', 'center', 'end'])
     }),
     positionMode: PropTypes.oneOf(['absolute', 'fixed']),
-    shape: PropTypes.oneOf([null, 'rectangle', 'square']),
     size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
     rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
     themeColor: PropTypes.oneOf([null,
@@ -273,7 +273,6 @@ FloatingActionButton.propTypes = {
 };
 var defaultProps = {
     align: { vertical: 'bottom', horizontal: 'end' },
-    shape: null,
     size: 'medium',
     rounded: 'full',
     themeColor: 'primary',

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

@@ -5,10 +5,10 @@ import { FloatingActionButtonAlign } from '../models/align';
 import { FloatingActionButtonAlignOffset } from '../models/align-offset';
 import { FloatingActionButtonEvent, FloatingActionButtonItemEvent } from '../models/events';
 import { FloatingActionButtonPositionMode } from '../models/position-mode';
-import { FloatingActionButtonShape } from '../models/shape';
 import { FloatingActionButtonSize } from '../models/size';
 import { FloatingActionButtonThemeColor } from '../models/theme-color';
 import { FloatingActionButtonRounded } from '../models/rounded';
+import { SVGIcon } from '@progress/kendo-react-common';
 /**
  * @hidden
  */
@@ -41,6 +41,10 @@ export interface FloatingActionButtonProps extends Omit<React.ButtonHTMLAttribut
      * 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.
@@ -97,20 +101,6 @@ export interface FloatingActionButtonProps extends Omit<React.ButtonHTMLAttribut
      * * 'absolute'
      */
     positionMode?: FloatingActionButtonPositionMode;
-    /**
-     * Specifies the shape of the Floating Action Button
-     * [see example]({% slug appearance_floatingactionbutton %}).
-     *
-     * The possible values are:
-     * * `rectangle`&mdash;Applies no border radius on the FloatingActionButton.
-     * * `square`&mdash;Applies square shape on the FloatingActionButton.
-     * * `null`&mdash;Does not set a shape `className`.
-     *
-     * @default null
-     *
-     * @deprecated The `shape` property will be deprecated with version `^6` of the `@progress/kendo-react-buttons` package.
-     */
-    shape?: FloatingActionButtonShape;
     /**
      * Specifies the size of the Floating Action Button
      * [see example]({% slug appearance_floatingactionbutton %}).

package/dist/es/ListButton/ButtonItem.js

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { classNames } from '@progress/kendo-react-common';
+import { classNames, IconWrap } from '@progress/kendo-react-common';
 /**
  * @hidden
  */
 export var ButtonItem = function (props) {
-    var _a;
     var handleClick = React.useCallback(function (event) {
         props.onClick(event, props.index);
     }, [props]);
@@ -16,10 +15,7 @@ export var ButtonItem = function (props) {
         }), 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("span", { className: classNames('k-icon', (_a = {},
-                    _a["k-i-".concat(props.dataItem.icon)] = props.dataItem.icon,
-                    _a["".concat(props.dataItem.iconClass)] = props.dataItem.iconClass,
-                    _a)) })),
+            (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 */

package/dist/es/ListButton/DropDownButton.d.ts

@@ -46,6 +46,11 @@ export declare class DropDownButton extends React.Component<DropDownButtonProps,
         tabIndex: PropTypes.Requireable<number>;
         disabled: PropTypes.Requireable<boolean>;
         icon: PropTypes.Requireable<string>;
+        svgIcon: PropTypes.Requireable<PropTypes.InferProps<{
+            name: PropTypes.Validator<string>;
+            content: PropTypes.Validator<string>;
+            viewBox: PropTypes.Validator<string>;
+        }>>;
         iconClass: PropTypes.Requireable<string>;
         imageUrl: PropTypes.Requireable<string>;
         popupSettings: PropTypes.Requireable<object>;
@@ -61,7 +66,6 @@ export declare class DropDownButton extends React.Component<DropDownButtonProps,
     static defaultProps: {
         size: string;
         rounded: string;
-        shape: null;
         fillMode: string;
         themeColor: string;
     };

package/dist/es/ListButton/DropDownButton.js

@@ -27,7 +27,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { Button } from './../main';
-import { classNames, guid, Keys, kendoThemeMaps } from '@progress/kendo-react-common';
+import { classNames, guid, Keys, kendoThemeMaps, svgIconPropType } from '@progress/kendo-react-common';
 import { dispatchEvent } from '@progress/kendo-react-common';
 import { navigate as navigation } from './utils/navigation';
 import { DropDownButtonItem } from './DropDownButtonItem';
@@ -215,7 +215,7 @@ var DropDownButton = /** @class */ (function (_super) {
         return (React.createElement("div", { id: id, style: style, className: classNames('k-dropdown-button', {
                 'k-focus': this.state.focused
             }, this.props.className), onKeyDown: this.onKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, dir: dir, ref: function (el) { return _this.wrapper = el; } },
-            React.createElement(Button, { size: this.props.size, shape: this.props.shape, rounded: this.props.rounded, fillMode: this.props.fillMode, themeColor: this.props.themeColor, onClick: this.onClickMainButton, onMouseDown: this.mouseDown, disabled: disabled || undefined, tabIndex: tabIndex, accessKey: this.props.accessKey, icon: this.props.icon, iconClass: this.props.iconClass, className: this.props.buttonClass, imageUrl: this.props.imageUrl, dir: dir, ref: function (btn) { return _this.mainButton = btn && btn.element; }, type: "button", "aria-haspopup": true, "aria-expanded": this.opened || undefined, "aria-label": this.props.ariaLabel, "aria-controls": this.opened ? this.guid : undefined, id: 'button-' + this.guid, title: this.props.title }, this.props.text),
+            React.createElement(Button, { size: this.props.size, rounded: this.props.rounded, fillMode: this.props.fillMode, themeColor: this.props.themeColor, onClick: this.onClickMainButton, onMouseDown: this.mouseDown, disabled: disabled || undefined, tabIndex: tabIndex, accessKey: this.props.accessKey, icon: this.props.icon, svgIcon: this.props.svgIcon, iconClass: this.props.iconClass, className: this.props.buttonClass, imageUrl: this.props.imageUrl, dir: dir, ref: function (btn) { return _this.mainButton = btn && btn.element; }, type: "button", "aria-haspopup": true, "aria-expanded": this.opened || undefined, "aria-label": this.props.ariaLabel, "aria-controls": this.opened ? this.guid : undefined, id: 'button-' + this.guid, title: this.props.title }, this.props.text),
             this.renderPopup(rtl)));
     };
     /**
@@ -285,6 +285,7 @@ var DropDownButton = /** @class */ (function (_super) {
         tabIndex: PropTypes.number,
         disabled: PropTypes.bool,
         icon: PropTypes.string,
+        svgIcon: svgIconPropType,
         iconClass: PropTypes.string,
         imageUrl: PropTypes.string,
         popupSettings: PropTypes.object,
@@ -300,7 +301,6 @@ var DropDownButton = /** @class */ (function (_super) {
     DropDownButton.defaultProps = {
         size: 'medium',
         rounded: 'medium',
-        shape: null,
         fillMode: 'solid',
         themeColor: 'base'
     };

package/dist/es/ListButton/SplitButton.d.ts

@@ -48,6 +48,11 @@ export declare class SplitButton extends React.Component<SplitButtonProps, Split
         tabIndex: PropTypes.Requireable<number>;
         disabled: PropTypes.Requireable<boolean>;
         icon: PropTypes.Requireable<string>;
+        svgIcon: PropTypes.Requireable<PropTypes.InferProps<{
+            name: PropTypes.Validator<string>;
+            content: PropTypes.Validator<string>;
+            viewBox: PropTypes.Validator<string>;
+        }>>;
         iconClass: PropTypes.Requireable<string>;
         imageUrl: PropTypes.Requireable<string>;
         popupSettings: PropTypes.Requireable<object>;
@@ -63,7 +68,6 @@ export declare class SplitButton extends React.Component<SplitButtonProps, Split
     static defaultProps: {
         size: string;
         rounded: string;
-        shape: null;
         fillMode: string;
         themeColor: string;
     };

package/dist/es/ListButton/SplitButton.js

@@ -16,7 +16,7 @@ var __extends = (this && this.__extends) || (function () {
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { Button } from './../main';
-import { classNames, guid, kendoThemeMaps, Keys } from '@progress/kendo-react-common';
+import { classNames, guid, kendoThemeMaps, Keys, svgIconPropType } from '@progress/kendo-react-common';
 import { dispatchEvent } from '@progress/kendo-react-common';
 import { ButtonItem } from './ButtonItem';
 import { SplitButtonItem } from './SplitButtonItem';
@@ -25,6 +25,7 @@ import { Popup } from '@progress/kendo-react-popup';
 import { getAnchorAlign, getPopupAlign } from './utils/popup';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
+import { caretAltDownIcon } from '@progress/kendo-svg-icons';
 /**
  * Represents the [KendoReact SplitButton component]({% slug overview_splitbutton %}).
  *
@@ -220,8 +221,8 @@ var SplitButton = /** @class */ (function (_super) {
         return (React.createElement("div", { id: id, style: style, className: classNames('k-split-button', 'k-button-group', {
                 'k-focus': this.state.focused
             }, "k-rounded-".concat(kendoThemeMaps.roundedMap[this.props.rounded || 'medium']), this.props.className), onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, dir: dir, ref: function (el) { return _this.wrapper = el; } },
-            React.createElement(Button, { ref: function (el) { return _this.mainButton = el && el.element; }, type: "button", size: this.props.size, rounded: this.props.rounded, fillMode: this.props.fillMode, themeColor: this.props.themeColor, onClick: function (event) { return _this.onItemClick(event, -1); }, disabled: disabled || undefined, tabIndex: tabIndex, accessKey: this.props.accessKey, className: this.props.buttonClass, icon: this.props.icon, iconClass: this.props.iconClass, imageUrl: this.props.imageUrl, dir: dir, "aria-disabled": disabled, "aria-haspopup": true, "aria-expanded": this.opened || undefined, "aria-label": this.props.ariaLabel, "aria-controls": this.opened ? this.guid : undefined, id: 'button-' + this.guid, title: this.props.title }, this.props.text),
-            React.createElement(Button, { type: "button", size: this.props.size, rounded: this.props.rounded, fillMode: this.props.fillMode, themeColor: this.props.themeColor, icon: "caret-alt-down", className: "k-split-button-arrow", disabled: disabled || undefined, tabIndex: -1, onClick: this.onSplitPartClick, onMouseDown: this.onDownSplitPart, onPointerDown: this.onDownSplitPart, dir: dir, "aria-label": "menu toggling button" }),
+            React.createElement(Button, { ref: function (el) { return _this.mainButton = el && el.element; }, type: "button", size: this.props.size, rounded: this.props.rounded, fillMode: this.props.fillMode, themeColor: this.props.themeColor, onClick: function (event) { return _this.onItemClick(event, -1); }, disabled: disabled || undefined, tabIndex: tabIndex, accessKey: this.props.accessKey, className: this.props.buttonClass, icon: this.props.icon, svgIcon: this.props.svgIcon, iconClass: this.props.iconClass, imageUrl: this.props.imageUrl, dir: dir, "aria-disabled": disabled, "aria-haspopup": true, "aria-expanded": this.opened || undefined, "aria-label": this.props.ariaLabel, "aria-controls": this.opened ? this.guid : undefined, id: 'button-' + this.guid, title: this.props.title }, this.props.text),
+            React.createElement(Button, { type: "button", size: this.props.size, rounded: this.props.rounded, fillMode: this.props.fillMode, themeColor: this.props.themeColor, icon: "caret-alt-down", svgIcon: caretAltDownIcon, className: "k-split-button-arrow", disabled: disabled || undefined, tabIndex: -1, onClick: this.onSplitPartClick, onMouseDown: this.onDownSplitPart, onPointerDown: this.onDownSplitPart, dir: dir, "aria-label": "menu toggling button" }),
             this.renderPopup(rtl)));
     };
     /**
@@ -298,6 +299,7 @@ var SplitButton = /** @class */ (function (_super) {
         tabIndex: PropTypes.number,
         disabled: PropTypes.bool,
         icon: PropTypes.string,
+        svgIcon: svgIconPropType,
         iconClass: PropTypes.string,
         imageUrl: PropTypes.string,
         popupSettings: PropTypes.object,
@@ -313,7 +315,6 @@ var SplitButton = /** @class */ (function (_super) {
     SplitButton.defaultProps = {
         size: 'medium',
         rounded: 'medium',
-        shape: null,
         fillMode: 'solid',
         themeColor: 'base'
     };

package/dist/es/ListButton/models/ButtonItem.d.ts

@@ -1,3 +1,4 @@
+import { SVGIcon } from '@progress/kendo-react-common';
 /**
  * The interface for describing items that can be passed to the `items` property of the SplitButton or the DropDownButton as an alternative to passing them as children.
  */
@@ -10,6 +11,10 @@ export interface ButtonItem {
      * Defines an icon that will be rendered next to the item text.
      */
     icon?: string;
+    /**
+     * Defines an SVG icon that will be rendered next to the item text.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Defines an icon with a custom CSS class that will be rendered next to the item text.
      */

package/dist/es/ListButton/models/ButtonItem.js

@@ -1,2 +1,3 @@
+/* eslint-disable max-len */
 export {};
 // tslint:enable:max-line-length

package/dist/es/ListButton/models/ListButtonProps.d.ts

@@ -2,7 +2,7 @@
 import { ButtonsPopupSettings } from './PopupSettings';
 import { SplitButtonClickEvent, SplitButtonItemClickEvent, SplitButtonFocusEvent, SplitButtonBlurEvent, SplitButtonOpenEvent, SplitButtonCloseEvent, DropDownButtonItemClickEvent, DropDownButtonFocusEvent, DropDownButtonBlurEvent, DropDownButtonOpenEvent, DropDownButtonCloseEvent } from './events';
 import { ButtonItemProps } from '../ButtonItem';
-import { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
+import { KendoReactComponentBaseProps, SVGIcon } from '@progress/kendo-react-common';
 export interface DropDownButtonProps extends KendoReactComponentBaseProps {
     /**
      * Specifies the `accessKey` of the main button.
@@ -44,6 +44,10 @@ export interface DropDownButtonProps extends KendoReactComponentBaseProps {
      * Defines an icon that will be rendered next to the main button text ([see example]({% slug icons_dropdownbutton %})).
      */
     icon?: string;
+    /**
+     * Defines a SVG icon that will be rendered next to the main button text ([see example]({% slug icons_dropdownbutton %})).
+     */
+    svgIcon?: SVGIcon;
     /**
      * Defines an icon with a custom CSS class that will be rendered next to the main button text ([see example]({% slug icons_dropdownbutton %})).
      */
@@ -116,19 +120,6 @@ export interface DropDownButtonProps extends KendoReactComponentBaseProps {
      * @default `medium`
      */
     size?: null | 'small' | 'medium' | 'large';
-    /**
-     * Configures the `shape` of the DropDownButton.
-     *
-     * The available options are:
-     * - rectangle
-     * - square
-     * - null—Does not set a shape `className`.
-     *
-     * @default `null`
-     *
-     * @deprecated The `shape` property will be deprecated with version `^6` of the `@progress/kendo-react-buttons` package.
-     */
-    shape?: null | 'rectangle' | 'square';
     /**
      * Configures the `roundness` of the DropDownButton.
      *
@@ -212,6 +203,10 @@ export interface SplitButtonProps extends KendoReactComponentBaseProps {
      * Defines an icon that will be rendered next to the main button text ([see example]({% slug icons_splitbutton %})).
      */
     icon?: string;
+    /**
+     * Defines a SVG icon that will be rendered next to the main button text ([see example]({% slug icons_splitbutton %})).
+     */
+    svgIcon?: SVGIcon;
     /**
      * Defines an icon with a custom CSS class that will be rendered next to the main button text ([see example]({% slug icons_splitbutton %})).
      */

package/dist/es/main.d.ts

@@ -26,8 +26,7 @@ export * from './FloatingActionButton/models/events';
 import { FloatingActionButtonAlign } from './FloatingActionButton/models/align';
 import { FloatingActionButtonAlignOffset } from './FloatingActionButton/models/align-offset';
 import { FloatingActionButtonPositionMode } from './FloatingActionButton/models/position-mode';
-import { FloatingActionButtonShape } from './FloatingActionButton/models/shape';
 import { FloatingActionButtonSize } from './FloatingActionButton/models/size';
 import { FloatingActionButtonRounded } from './FloatingActionButton/models/rounded';
 import { FloatingActionButtonThemeColor } from './FloatingActionButton/models/theme-color';
-export { Toolbar, ToolbarProps, ToolbarItem, ToolbarItemProps, ToolbarSeparator, ToolbarResizeEvent, ToolbarSpacer, ToolbarSpacerProps, toolbarButtons, Button, ButtonProps, ButtonGroup, ButtonGroupProps, SplitButton, SplitButtonItem, SplitButtonItemProps, DropDownButton, DropDownButtonProps, DropDownButtonItem, DropDownButtonItemProps, ButtonItem, ButtonItemProps, SplitButtonFocusEvent, SplitButtonBlurEvent, SplitButtonClickEvent, SplitButtonOpenEvent, SplitButtonCloseEvent, SplitButtonItemClickEvent, DropDownButtonFocusEvent, DropDownButtonBlurEvent, DropDownButtonOpenEvent, DropDownButtonCloseEvent, DropDownButtonItemClickEvent, ButtonsPopupSettings, Chip, ChipProps, ChipHandle, ChipRemoveEvent, ChipMouseEvent, ChipKeyboardEvent, ChipFocusEvent, ChipList, ChipListProps, ChipListHandle, ChipListDataChangeEvent, ChipListChangeEvent, FloatingActionButton, FloatingActionButtonProps, FloatingActionButtonHandle, FloatingActionButtonItem, FloatingActionButtonItemHandle, FloatingActionButtonItemProps, FloatingActionButtonPopupSettings, FloatingActionButtonAlign, FloatingActionButtonAlignOffset, FloatingActionButtonPositionMode, FloatingActionButtonSize, FloatingActionButtonShape, FloatingActionButtonRounded, FloatingActionButtonThemeColor };
+export { Toolbar, ToolbarProps, ToolbarItem, ToolbarItemProps, ToolbarSeparator, ToolbarResizeEvent, ToolbarSpacer, ToolbarSpacerProps, toolbarButtons, Button, ButtonProps, ButtonGroup, ButtonGroupProps, SplitButton, SplitButtonItem, SplitButtonItemProps, DropDownButton, DropDownButtonProps, DropDownButtonItem, DropDownButtonItemProps, ButtonItem, ButtonItemProps, SplitButtonFocusEvent, SplitButtonBlurEvent, SplitButtonClickEvent, SplitButtonOpenEvent, SplitButtonCloseEvent, SplitButtonItemClickEvent, DropDownButtonFocusEvent, DropDownButtonBlurEvent, DropDownButtonOpenEvent, DropDownButtonCloseEvent, DropDownButtonItemClickEvent, ButtonsPopupSettings, Chip, ChipProps, ChipHandle, ChipRemoveEvent, ChipMouseEvent, ChipKeyboardEvent, ChipFocusEvent, ChipList, ChipListProps, ChipListHandle, ChipListDataChangeEvent, ChipListChangeEvent, FloatingActionButton, FloatingActionButtonProps, FloatingActionButtonHandle, FloatingActionButtonItem, FloatingActionButtonItemHandle, FloatingActionButtonItemProps, FloatingActionButtonPopupSettings, FloatingActionButtonAlign, FloatingActionButtonAlignOffset, FloatingActionButtonPositionMode, FloatingActionButtonSize, FloatingActionButtonRounded, FloatingActionButtonThemeColor };

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-buttons',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1673258873,
+    publishDate: 1673444453,
     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'
 };