@progress/kendo-react-buttons 4.14.1 → 5.0.0-dev.202201182040

package/dist/es/Button.d.ts

@@ -10,6 +10,74 @@ export interface ButtonProps extends ButtonInterface, React.ButtonHTMLAttributes
      * @hidden
      */
     children?: React.ReactNode;
+    /**
+     * Configures the `size` of the Button.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `className`.
+     *
+     * @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 `rectangle`
+     */
+    shape?: null | 'rectangle' | 'square';
+    /**
+     * Configures the `roundness` of the Button.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null—Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the Button.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - link
+     * - null—Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | 'flat' | 'link';
+    /**
+     * Configures the `themeColor` of the Button.
+     *
+     * The available options are:
+     * - base
+     * - primary
+     * - secondary
+     * - tertiary
+     * - info
+     * - success
+     * - warning
+     * - dark
+     * - light
+     * - inverse
+     * - null—Does not set a themeColor `className`.
+     *
+     * @default `base`
+     */
+    themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'dark' | 'light' | 'inverse';
 }
 /**
  * @hidden
@@ -23,22 +91,28 @@ export default class Button extends React.Component<ButtonProps, ButtonState> {
      */
     static propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        look: PropTypes.Requireable<string>;
-        primary: PropTypes.Requireable<boolean>;
         selected: PropTypes.Requireable<boolean>;
         togglable: PropTypes.Requireable<boolean>;
         icon: PropTypes.Requireable<string>;
         iconClass: PropTypes.Requireable<string>;
         imageUrl: PropTypes.Requireable<string>;
         imageAlt: PropTypes.Requireable<string>;
+        size: PropTypes.Requireable<string>;
+        shape: PropTypes.Requireable<string>;
+        rounded: PropTypes.Requireable<string>;
+        fillMode: PropTypes.Requireable<string>;
+        themeColor: PropTypes.Requireable<string>;
     };
     /**
      * @hidden
      */
     static defaultProps: {
-        look: string;
-        primary: boolean;
         togglable: boolean;
+        size: string;
+        shape: string;
+        rounded: string;
+        fillMode: string;
+        themeColor: string;
     };
     /**
      * @hidden
@@ -55,7 +129,7 @@ export default class Button extends React.Component<ButtonProps, ButtonState> {
      * Otherwise, returns `false`.
      */
     readonly selected: boolean;
-    constructor(props: ButtonProps);
+    constructor(props: any);
     /**
      * @hidden
      */

package/dist/es/Button.js

@@ -33,25 +33,23 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames } from '@progress/kendo-react-common';
+import { classNames, kendoThemeMaps } from '@progress/kendo-react-common';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from './package-metadata';
-import util from './util';
-var styles = util.styles;
 /**
  * @hidden
  */
 function iconElement(_a) {
     var imageUrl = _a.imageUrl, icon = _a.icon, iconClass = _a.iconClass, imageAlt = _a.imageAlt;
     if (imageUrl) {
-        return (React.createElement("img", { role: "presentation", className: 'k-image', alt: imageAlt, src: imageUrl }));
+        return (React.createElement("img", { role: "presentation", className: 'k-button-icon', alt: imageAlt, src: imageUrl }));
     }
     else if (icon) {
-        var iconClasses = classNames('k-icon', 'k-i-' + icon);
+        var iconClasses = classNames('k-button-icon k-icon', 'k-i-' + icon);
         return (React.createElement("span", { role: "presentation", className: iconClasses }));
     }
     else if (iconClass) {
-        return (React.createElement("span", { role: "presentation", className: iconClass }));
+        return (React.createElement("span", { role: "presentation", className: classNames('k-button-icon', iconClass) }));
     }
     return null;
 }
@@ -106,34 +104,28 @@ var Button = /** @class */ (function (_super) {
     Button.prototype.render = function () {
         var _this = this;
         var _a;
-        var _b = this.props, children = _b.children, look = _b.look, primary = _b.primary, togglable = _b.togglable, icon = _b.icon, iconClass = _b.iconClass, imageUrl = _b.imageUrl, imageAlt = _b.imageAlt, className = _b.className, onClick = _b.onClick, htmlAttributes = __rest(_b, ["children", "look", "primary", "togglable", "icon", "iconClass", "imageUrl", "imageAlt", "className", "onClick"]);
+        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 hasIcon = (icon !== undefined || iconClass !== undefined || imageUrl !== undefined);
         var hasChildren = children !== undefined;
-        var buttonClasses = classNames([styles.button], (_a = {},
-            _a[styles["" + look]] = look !== 'default',
-            _a[styles.primary] = primary,
-            _a[styles['state-disabled']] = this.props.disabled,
-            _a[styles['state-selected']] = this.state.selected,
-            _a[styles['button-icon']] = !hasChildren && hasIcon,
-            _a[styles['button-icontext']] = hasChildren && hasIcon,
-            _a), [styles["" + this.props.dir]], className);
-        var buttonProps = {
-            className: buttonClasses,
-            onClick: this.handleClick,
-            // Accessibility properties
-            role: togglable ? 'checkbox' : undefined,
-            'aria-disabled': this.props.disabled || undefined,
-            'aria-checked': togglable ? this.state.selected : undefined
-        };
         var iconEl = iconElement({
             icon: icon,
             iconClass: iconClass,
             imageUrl: imageUrl,
             imageAlt: imageAlt
         });
-        return (React.createElement("button", __assign({}, buttonProps, htmlAttributes, { ref: function (button) { return _this._element = button; } }),
+        return (React.createElement("button", __assign({ ref: function (button) { return _this._element = button; }, role: togglable ? 'checkbox' : undefined, "aria-disabled": this.props.disabled || undefined, "aria-checked": togglable ? this.state.selected : undefined }, htmlAttributes, { onClick: this.handleClick, className: classNames('k-button', (_a = {},
+                _a["k-button-" + (kendoThemeMaps.sizeMap[size] || size)] = size,
+                _a["k-button-" + shape] = shape,
+                _a["k-button-" + fillMode] = fillMode,
+                _a["k-button-" + fillMode + "-" + themeColor] = Boolean(fillMode && themeColor),
+                _a["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
+                _a['k-icon-button'] = !hasChildren && hasIcon,
+                _a['k-disabled'] = this.props.disabled,
+                _a['k-selected'] = this.state.selected,
+                _a['k-rtl'] = this.props.dir === 'rtl',
+                _a), this.props.className) }),
             iconEl,
-            children));
+            children && (React.createElement("span", { className: "k-button-text" }, children))));
     };
     Button.prototype.toggleIfApplicable = function () {
         var _this = this;
@@ -148,22 +140,29 @@ var Button = /** @class */ (function (_super) {
      */
     Button.propTypes = {
         children: PropTypes.node,
-        look: PropTypes.oneOf(['default', 'flat', 'outline', 'clear']),
-        primary: PropTypes.bool,
         selected: PropTypes.bool,
         togglable: PropTypes.bool,
         icon: PropTypes.string,
         iconClass: PropTypes.string,
         imageUrl: PropTypes.string,
-        imageAlt: 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
+        themeColor: PropTypes.oneOf([null, 'base', 'dark', 'error', 'info', 'inverse', 'inverse', 'light', 'primary', 'secondary', 'success', 'tertiary', 'warning'])
     };
     /**
      * @hidden
      */
     Button.defaultProps = {
-        look: 'default',
-        primary: false,
-        togglable: false
+        togglable: false,
+        size: 'medium',
+        shape: 'rectangle',
+        rounded: 'medium',
+        fillMode: 'solid',
+        themeColor: 'base'
     };
     return Button;
 }(React.Component));

package/dist/es/ButtonGroup.js

@@ -45,7 +45,7 @@ var ButtonGroup = /** @class */ (function (_super) {
         var _a;
         var buttons = this.mapButtons(this.props.children);
         var groupClasses = classNames([styles['button-group']], (_a = {},
-            _a[styles['state-disabled']] = this.props.disabled,
+            _a['k-state-disabled'] = this.props.disabled,
             _a[styles['button-group-stretched']] = !!this.props.width,
             _a), this.props.className);
         var groupProps = {

package/dist/es/ButtonInterface.d.ts

@@ -1,20 +1,7 @@
-import { ButtonLook } from './buttonLook';
 /**
  * Inherits the native HTML Button. Represents the properties which can be set to a Button.
  */
 export interface ButtonInterface {
-    /**
-     * Changes the visual appearance by using alternative styling options ([more information and examples]({% slug appearance_button %})).
-     *
-     * The available values are:
-     * * [`ButtonLook`]({% slug api_buttons_buttonlook %}) = `flat` | `outline`
-     * * `clear`
-     */
-    look?: ButtonLook | 'clear';
-    /**
-     * Adds visual weight to the Button and makes it primary ([see example]({% slug primary_button %})).
-     */
-    primary?: boolean;
     /**
      * Specifies if the Button is disabled ([see example]({% slug disabled_button %})). Defaults to `false`.
      */

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ChipRemoveEvent, ChipMouseEvent, ChipFocusEvent, ChipKeyboardEvent, ChipLook } from './../models/index';
+import { ChipRemoveEvent, ChipMouseEvent, ChipFocusEvent, ChipKeyboardEvent } from './../models/index';
 /**
  * Represents the properties of [Chip]({% slug api_buttons_chip %}) component.
  */
@@ -32,10 +32,6 @@ export interface ChipProps {
      * Sets the `id` value of the Chip.
      */
     value?: any;
-    /**
-     * Sets the `type` of the Chip element - 'warning', 'error', 'success', 'info', by default - 'none'.
-     */
-    type?: string;
     /**
      * The Chip direction 'ltr' as default or 'rtl'.
      */
@@ -60,10 +56,6 @@ export interface ChipProps {
      * Determines if the Chip has custom selection `icon`.
      */
     selectedIcon?: string;
-    /**
-     * Determines if the Chip has `solid` or `outline` appearance. Defaults to `solid`.
-     */
-    look?: ChipLook;
     /**
      * Triggered on Chip removing.
      */
@@ -133,6 +125,56 @@ export interface ChipProps {
      * @hidden
      */
     role?: string;
+    /**
+     * Configures the `size` of the Chip.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the Chip.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null—Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the Chip.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - null—Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline';
+    /**
+     * Configures the `themeColor` of the Chip.
+     *
+     * The available options are:
+     * - base
+     * - info
+     * - success
+     * - warning
+     * - error
+     * - null—Does not set a themeColor `className`.
+     *
+     * @default `base`
+     */
+    themeColor?: null | 'base' | 'info' | 'success' | 'warning' | 'error';
 }
 /**
  * Represents the target(element and props) of the ChipRemoveEvent.

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 } from '@progress/kendo-react-common';
+import { classNames, useDir, getTabIndex, Keys, kendoThemeMaps } from '@progress/kendo-react-common';
 import { FOCUS_ACTION } from './focus-reducer';
 import { DATA_ACTION } from './data-reducer';
 import { SELECTION_ACTION } from './selection-reducer';
@@ -23,6 +23,7 @@ import { useMouse } from '@progress/kendo-react-common';
  * Represents the Chip component.
  */
 export var Chip = React.forwardRef(function (props, ref) {
+    var _a;
     validatePackage(packageMetadata);
     var target = React.useRef(null);
     var chipRef = React.useRef(null);
@@ -32,22 +33,24 @@ export var Chip = React.forwardRef(function (props, ref) {
         props: props
     }); });
     React.useImperativeHandle(ref, function () { return target.current; });
-    var _a = React.useContext(ChipListSelectionContext), selection = _a[0], dispatchSelection = _a[1];
-    var _b = React.useContext(ChipListFocusContext), focus = _b[0], dispatchFocus = _b[1];
-    var _c = React.useContext(ChipListDataContext), dispatchData = _c[1];
+    var _b = React.useContext(ChipListSelectionContext), selection = _b[0], dispatchSelection = _b[1];
+    var _c = React.useContext(ChipListFocusContext), focus = _c[0], dispatchFocus = _c[1];
+    var _d = React.useContext(ChipListDataContext), dispatchData = _d[1];
     var selected = React.useMemo(function () {
         return (props.selected || (Array.isArray(selection)
             ? selection.some(function (i) { return i === props.value; })
             : selection === props.value));
     }, [props.selected, props.value, selection]);
     var focused = React.useMemo(function () { return focus === props.value; }, [props.value, focus]);
-    var look = React.useMemo(function () { return props.look || defaultProps.look; }, [props.look]);
+    /* const look = React.useMemo(
+        () => props.look || defaultProps.look,
+        [props.look]
+    ); */
     React.useEffect(function () {
         if (focused && chipRef.current) {
             chipRef.current.focus();
         }
     }, [focused]);
-    // React.useEffect(() => dispatchItemsContext({type: FOCUS_ACTION.register, payload: target }), []);
     var handleClick = React.useCallback(function (event) {
         dispatchSelection({ type: SELECTION_ACTION.toggle, payload: props.value, event: event });
     }, [props.onClick, dispatchSelection, props.value]);
@@ -107,61 +110,55 @@ export var Chip = React.forwardRef(function (props, ref) {
         }
     }, [props.onBlur]);
     var mouseProps = useMouse(props, target, { onClick: handleClick });
-    return (React.createElement("div", __assign({}, mouseProps, { role: props.role, id: props.value, style: props.style, ref: chipRef, dir: dir, tabIndex: getTabIndex(props.tabIndex, props.disabled, undefined), className: classNames('k-chip', {
-            'k-rtl': dir === 'rtl',
-            'k-state-disabled': props.disabled,
-            'k-state-selected': selected,
-            'k-state-focus': focused,
-            'k-chip-success': props.type === 'success',
-            'k-chip-warning': props.type === 'warning',
-            'k-chip-error': props.type === 'error',
-            'k-chip-info': props.type === 'info',
-            'k-chip-has-icon': props.icon,
-            // TODO: remove outlined and filled check once we deprecate them!
-            'k-chip-outline': look === 'outline' || look === 'outlined',
-            'k-chip-solid': look === 'solid' || look === 'filled'
-        }, props.className), "aria-checked": selected, "aria-disabled": props.disabled, "aria-describedby": props.ariaDescribedBy, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown }),
-        selected && React.createElement("span", { className: 'k-selected-icon-wrapper' },
-            React.createElement("span", { className: "k-selected-icon k-icon " + (props.selectedIcon || defaultProps.selectedIcon) })),
-        props.icon && React.createElement("span", { className: "k-icon k-chip-icon " + props.icon }),
+    return (React.createElement("div", __assign({}, mouseProps, { role: props.role, id: props.value, style: props.style, ref: chipRef, dir: dir, tabIndex: getTabIndex(props.tabIndex, props.disabled, undefined), className: classNames('k-chip', (_a = {
+                'k-rtl': dir === 'rtl',
+                'k-disabled': props.disabled,
+                'k-selected': selected,
+                'k-focus': focused
+            },
+            _a["k-chip-" + (kendoThemeMaps.sizeMap[props.size] || props.size)] = props.size,
+            _a["k-rounded-" + (kendoThemeMaps.roundedMap[props.rounded] || props.rounded)] = props.rounded,
+            _a["k-chip-" + props.fillMode] = props.fillMode,
+            _a["k-chip-" + props.fillMode + "-" + 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) }),
         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-remove-icon', onClick: handleRemove },
-                React.createElement("span", { className: "k-icon " + props.removeIcon }))));
+            React.createElement("span", { className: classNames('k-chip-icon', 'k-icon', props.removeIcon), onClick: handleRemove })));
 });
 var propTypes = {
     id: PropTypes.string,
     text: PropTypes.string,
     value: PropTypes.any,
-    type: PropTypes.oneOf([
-        'none',
-        'success',
-        'warning',
-        'error',
-        'info'
-    ]),
     dir: PropTypes.oneOf(['ltr', 'rtl']),
     removable: PropTypes.bool,
     removeIcon: PropTypes.string,
     disabled: PropTypes.bool,
     icon: PropTypes.string,
     selectedIcon: PropTypes.string,
-    look: PropTypes.string,
     onRemove: PropTypes.func,
     dataItem: PropTypes.any,
     selected: PropTypes.bool,
-    ariaDescribedBy: PropTypes.string
+    ariaDescribedBy: PropTypes.string,
+    size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
+    rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
+    fillMode: PropTypes.oneOf([null, 'outline', 'solid']),
+    // eslint-disable-next-line max-len
+    themeColor: PropTypes.oneOf([null, 'base', 'info', 'success', 'warning', 'error'])
 };
 var defaultProps = {
     disabled: false,
     removable: false,
-    selectedIcon: 'k-i-check',
-    look: 'solid',
     removeIcon: 'k-i-close-circle',
-    dir: 'ltr'
+    dir: 'ltr',
+    size: 'medium',
+    rounded: 'medium',
+    fillMode: 'solid',
+    themeColor: 'base'
 };
 Chip.displayName = 'KendoReactChip';
 // TODO: delete casting when @types/react is updated!

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

@@ -79,6 +79,18 @@ export interface ChipListProps extends FormComponentProps, KendoMouse<ChipListHa
      * Identifies the element(s) which will label the component.
      */
     ariaLabelledBy?: string;
+    /**
+     * Configures the `size` of the ChipList.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
 }
 /**
  * Represents the target(element and props) of the ChipListChangeEvent.

package/dist/es/Chip/ChipList.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { useDir, getter, getTabIndex, classNames, useMouse } from '@progress/kendo-react-common';
+import { useDir, getter, getTabIndex, classNames, useMouse, kendoThemeMaps } from '@progress/kendo-react-common';
 import { selectionReducer } from './selection-reducer';
 import { focusReducer } from './focus-reducer';
 import { dataReducer } from './data-reducer';
@@ -79,6 +79,7 @@ var useData = function (defaultData, args, callback) {
  * Represents the ChipList component.
  */
 export var ChipList = React.forwardRef(function (props, ref) {
+    var _a;
     validatePackage(packageMetadata);
     var target = React.useRef(null);
     var chipListRef = React.useRef(null);
@@ -99,10 +100,10 @@ export var ChipList = React.forwardRef(function (props, ref) {
             });
         }
     }, [props.onChange]);
-    var _a = useSelection(props.value || props.defaultValue, {
+    var _b = useSelection(props.value || props.defaultValue, {
         selection: selection,
         state: props.value
-    }, handleChange), stateValue = _a[0], dispatchStateValue = _a[1];
+    }, handleChange), stateValue = _b[0], dispatchStateValue = _b[1];
     var handleDataChange = React.useCallback(function (newData, event) {
         if (props.onDataChange && target.current) {
             props.onDataChange.call(undefined, {
@@ -112,10 +113,10 @@ export var ChipList = React.forwardRef(function (props, ref) {
             });
         }
     }, [props.onDataChange]);
-    var _b = useData(props.data || props.defaultData || defaultProps.defaultData, {
+    var _c = useData(props.data || props.defaultData || defaultProps.defaultData, {
         state: props.data,
         valueField: props.valueField || defaultProps.valueField
-    }, handleDataChange), stateData = _b[0], dispatchData = _b[1];
+    }, handleDataChange), stateData = _c[0], dispatchData = _c[1];
     var itemsReducer = React.useCallback(function (acc, current) {
         acc.push(current[props.valueField || defaultProps.valueField]);
         return acc;
@@ -123,18 +124,18 @@ export var ChipList = React.forwardRef(function (props, ref) {
     var data = React.useMemo(function () { return props.data || stateData; }, [props.data, stateData]);
     var value = React.useMemo(function () { return props.value || stateValue; }, [props.value, stateValue]);
     var items = React.useMemo(function () { return data.reduce(itemsReducer, []); }, [data, itemsReducer]);
-    var _c = useFocus({ items: items }), focus = _c[0], dispatchFocus = _c[1];
+    var _d = useFocus({ items: items }), focus = _d[0], dispatchFocus = _d[1];
     var mouseProps = useMouse(props, target);
     return (React.createElement(ChipListSelectionContext.Provider, { value: [value, dispatchStateValue] },
         React.createElement(ChipListFocusContext.Provider, { value: [focus, dispatchFocus] },
             React.createElement(ChipListDataContext.Provider, { value: [data, dispatchData] },
-                React.createElement("div", __assign({ ref: chipListRef }, mouseProps, { role: 'listbox', id: props.id, dir: dir, style: props.style, tabIndex: getTabIndex(props.tabIndex, props.disabled, undefined), className: classNames('k-chip-list', {
-                        'k-rtl': dir === 'rtl',
-                        'k-selection-single': selection === 'single',
-                        'k-selection-multiple': selection === 'multiple',
-                        'k-state-disabled': props.disabled
-                    }, props.className), "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy }), data.map(function (item) {
-                    return (React.createElement(ChipComponent, { role: 'option', dataItem: item, key: getter(props.valueField || defaultProps.valueField)(item), text: getter(props.textField || defaultProps.textField)(item), value: getter(props.valueField || defaultProps.valueField)(item) }));
+                React.createElement("div", __assign({ ref: chipListRef }, mouseProps, { role: 'listbox', id: props.id, dir: dir, style: props.style, tabIndex: getTabIndex(props.tabIndex, props.disabled, undefined), className: classNames('k-chip-list', (_a = {
+                            'k-rtl': dir === 'rtl',
+                            'k-disabled': props.disabled
+                        },
+                        _a["k-chip-list-" + (kendoThemeMaps.sizeMap[props.size] || props.size)] = props.size,
+                        _a), props.className), "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy }), data.map(function (item) {
+                    return (React.createElement(ChipComponent, { role: 'option', dataItem: item, size: props.size, key: getter(props.valueField || defaultProps.valueField)(item), text: getter(props.textField || defaultProps.textField)(item), value: getter(props.valueField || defaultProps.valueField)(item) }));
                 }))))));
 });
 var propTypes = {
@@ -157,6 +158,7 @@ var propTypes = {
 };
 var defaultProps = {
     chip: Chip,
+    size: 'medium',
     disabled: false,
     defaultValue: null,
     defaultData: [],