@progress/kendo-react-buttons 13.3.0 → 13.4.0-develop.2

package/Chip/Chip.d.ts

@@ -0,0 +1,425 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { SVGIcon } from '@progress/kendo-react-common';
+import { ChipRemoveEvent, ChipMouseEvent, ChipFocusEvent, ChipKeyboardEvent } from './../models/index.js';
+import * as React from 'react';
+/**
+ * Represents the properties of [Chip](https://www.telerik.com/kendo-react-ui/components/buttons/api/chip) component.
+ */
+export interface ChipProps {
+    /**
+     * Sets the `id` property of the top div element of the Chip.
+     *
+     * @example
+     * ```jsx
+     * <Chip id="chip1" />
+     * ```
+     */
+    id?: string;
+    /**
+     * Sets additional classes to the Chip.
+     *
+     * @example
+     * ```jsx
+     * <Chip className="custom-chip" />
+     * ```
+     */
+    className?: string;
+    /**
+     * The React elements that will be rendered as custom content inside the Chip.
+     *
+     * @example
+     * ```jsx
+     * <Chip>Custom Content</Chip>
+     * ```
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets the `tabIndex` attribute.
+     *
+     * @example
+     * ```jsx
+     * <Chip tabIndex={0} />
+     * ```
+     */
+    tabIndex?: number;
+    /**
+     * Sets additional CSS styles to the Chip.
+     *
+     * @example
+     * ```jsx
+     * <Chip style={{ margin: '10px' }} />
+     * ```
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the label text of the Chip.
+     *
+     * @example
+     * ```jsx
+     * <Chip text="Label" />
+     * ```
+     */
+    text?: string;
+    /**
+     * Sets the `id` value of the Chip.
+     *
+     * @example
+     * ```jsx
+     * <Chip value="chip1" />
+     * ```
+     */
+    value?: any;
+    /**
+     * The Chip direction 'ltr' as default or 'rtl'.
+     *
+     * @example
+     * ```jsx
+     * <Chip dir="rtl" />
+     * ```
+     */
+    dir?: string;
+    /**
+     * Determines if the Chip could be removed.
+     *
+     * @example
+     * ```jsx
+     * <Chip removable />
+     * ```
+     */
+    removable?: boolean;
+    /**
+     * Determines if the Chip has custom font `removeIcon`.
+     *
+     * @example
+     * ```jsx
+     * <Chip removeIcon="k-i-close" />
+     * ```
+     */
+    removeIcon?: string;
+    /**
+     * Determines if the Chip has custom SVG `removeIcon`.
+     *
+     * @example
+     * ```jsx
+     * import { gearIcon } from '@progress/kendo-svg-icons';
+     *
+     * <Chip removeSvgIcon={gearIcon} />
+     * ```
+     */
+    removeSvgIcon?: SVGIcon;
+    /**
+     * Determines if the Chip is disabled.
+     *
+     * @example
+     * ```jsx
+     * <Chip disabled />
+     * ```
+     */
+    disabled?: boolean;
+    /**
+     * Determines if the Chip has a font `icon`.
+     *
+     * @example
+     * ```jsx
+     * <Chip icon="k-i-user" />
+     * ```
+     */
+    icon?: string;
+    /**
+     * Determines if the Chip has an SVG `icon`.
+     *
+     * @example
+     * ```jsx
+     * import { gearIcon } from '@progress/kendo-svg-icons';
+     *
+     * <Chip svgIcon={gearIcon} />
+     * ```
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Determines if the Chip has an avatar.
+     *
+     * @example
+     * ```jsx
+     * <Chip avatar={{ image: 'avatar.png', imageAlt: 'Avatar' }} />
+     * ```
+     */
+    avatar?: ChipAvatarProps;
+    /**
+     * Determines if the Chip has custom selection font `icon`.
+     *
+     * @example
+     * ```jsx
+     * <Chip selectedIcon="k-i-check" />
+     * ```
+     */
+    selectedIcon?: string;
+    /**
+     * Determines if the Chip has custom selection SVG `icon`.
+     *
+     * @example
+     * ```jsx
+     * import { gearIcon } from '@progress/kendo-svg-icons';
+     *
+     * <Chip selectedSvgIcon={gearIcon} />
+     * ```
+     */
+    selectedSvgIcon?: SVGIcon;
+    /**
+     * Fires on Chip removing.
+     *
+     * @example
+     * ```jsx
+     * <Chip onRemove={(event) => console.log(event)} />
+     * ```
+     */
+    onRemove?: (event: ChipRemoveEvent) => void;
+    /**
+     * Fires on `onClick` event.
+     *
+     * @example
+     * ```jsx
+     * <Chip onClick={(event) => console.log(event)} />
+     * ```
+     */
+    onClick?: (event: ChipMouseEvent) => void;
+    /**
+     * Fires on `onMouseDown` event.
+     *
+     * @example
+     * ```jsx
+     * <Chip onMouseDown={(event) => console.log(event)} />
+     * ```
+     */
+    onMouseDown?: (event: ChipMouseEvent) => void;
+    /**
+     * Fires on `onMouseUp` event.
+     *
+     * @example
+     * ```jsx
+     * <Chip onMouseUp={(event) => console.log(event)} />
+     * ```
+     */
+    onMouseUp?: (event: ChipMouseEvent) => void;
+    /**
+     * Fires on `onDoubleClick` event.
+     *
+     * @example
+     * ```jsx
+     * <Chip onDoubleClick={(event) => console.log(event)} />
+     * ```
+     */
+    onDoubleClick?: (event: ChipMouseEvent) => void;
+    /**
+     * Fires on `onMouseEnter` event.
+     *
+     * @example
+     * ```jsx
+     * <Chip onMouseEnter={(event) => console.log(event)} />
+     * ```
+     */
+    onMouseEnter?: (event: ChipMouseEvent) => void;
+    /**
+     * Fires on `onMouseLeave` event.
+     *
+     * @example
+     * ```jsx
+     * <Chip onMouseLeave={(event) => console.log(event)} />
+     * ```
+     */
+    onMouseLeave?: (event: ChipMouseEvent) => void;
+    /**
+     * Fires on `onMouseMove` event.
+     *
+     * @example
+     * ```jsx
+     * <Chip onMouseMove={(event) => console.log(event)} />
+     * ```
+     */
+    onMouseMove?: (event: ChipMouseEvent) => void;
+    /**
+     * Fires on `onMouseOut` event.
+     *
+     * @example
+     * ```jsx
+     * <Chip onMouseOut={(event) => console.log(event)} />
+     * ```
+     */
+    onMouseOut?: (event: ChipMouseEvent) => void;
+    /**
+     * Fires on `onMouseOver` event.
+     *
+     * @example
+     * ```jsx
+     * <Chip onMouseOver={(event) => console.log(event)} />
+     * ```
+     */
+    onMouseOver?: (event: ChipMouseEvent) => void;
+    /**
+     * Fires on `onKeyDown` event.
+     *
+     * @example
+     * ```jsx
+     * <Chip onKeyDown={(event) => console.log(event)} />
+     * ```
+     */
+    onKeyDown?: (event: ChipKeyboardEvent) => void;
+    /**
+     * Fires on `onFocus` event.
+     *
+     * @example
+     * ```jsx
+     * <Chip onFocus={(event) => console.log(event)} />
+     * ```
+     */
+    onFocus?: (event: ChipFocusEvent) => void;
+    /**
+     * Fires on `onBlur` event.
+     *
+     * @example
+     * ```jsx
+     * <Chip onBlur={(event) => console.log(event)} />
+     * ```
+     */
+    onBlur?: (event: ChipFocusEvent) => void;
+    /**
+     * Represents the item data, coming from the `ChipList` component.
+     *
+     * @example
+     * ```jsx
+     * <Chip dataItem={{ text: 'Chip1' }} />
+     * ```
+     */
+    dataItem?: any;
+    /**
+     * Determines if the Chip is selected.
+     *
+     * @example
+     * ```jsx
+     * <Chip selected />
+     * ```
+     */
+    selected?: boolean;
+    /**
+     * Identifies the element(s) which describe the component, similar to an [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example, these elements could contain an error or a hint message.
+     *
+     * @example
+     * ```jsx
+     * <Chip ariaDescribedBy="description" />
+     * ```
+     */
+    ariaDescribedBy?: string;
+    /**
+     * @hidden
+     */
+    role?: string;
+    /**
+     * Configures the `size` of the Chip.
+     * The available options are:
+     * - `small`
+     * - `medium`
+     * - `large`
+     *
+     * @default undefined (theme-controlled)
+     * @example
+     * ```jsx
+     * <Chip size="large" />
+     * ```
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the Chip.
+     * The available options are:
+     * - `small`
+     * - `medium`
+     * - `large`
+     * - `full`
+     *
+     * @default undefined (theme-controlled)
+     * @example
+     * ```jsx
+     * <Chip rounded="full" />
+     * ```
+     */
+    rounded?: 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the Chip.
+     * The available options are:
+     * - `solid`
+     * - `outline`
+     *
+     * @default undefined (theme-controlled)
+     * @example
+     * ```jsx
+     * <Chip fillMode="outline" />
+     * ```
+     */
+    fillMode?: 'solid' | 'outline';
+    /**
+     * Configures the `themeColor` of the Chip.
+     * The available options are:
+     * - `base`
+     * - `info`
+     * - `success`
+     * - `warning`
+     * - `error`
+     *
+     * @default undefined (theme-controlled)
+     * @example
+     * ```jsx
+     * <Chip themeColor="success" />
+     * ```
+     */
+    themeColor?: 'base' | 'info' | 'success' | 'warning' | 'error';
+    /**
+     * Represents the label of the Chip component.
+     *
+     * @example
+     * ```jsx
+     * <Chip ariaLabel="Chip Label" />
+     * ```
+     */
+    ariaLabel?: string;
+}
+/**
+ * Represents the target(element and props) of the ChipRemoveEvent.
+ */
+export interface ChipHandle {
+    /**
+     * The current element or `null` if there is no one.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The props values of the Chip.
+     */
+    props: ChipProps;
+}
+export interface ChipAvatarProps {
+    /**
+     * Sets the image of the avatar.
+     */
+    image: string;
+    /**
+     * Defines the alternative text of the avatar image.
+     */
+    imageAlt: string;
+    /**
+     * Configures the `roundness` of the avatar
+     */
+    rounded?: 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Sets additional CSS styles to the avatar
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * Represents the Chip component.
+ */
+export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<ChipHandle | null>>;

package/Chip/Chip.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=require("react"),c=require("prop-types"),k=require("./chip-list-contexts.js"),n=require("@progress/kendo-react-common"),D=require("@progress/kendo-svg-icons"),y=require("./focus-reducer.js"),q=require("./data-reducer.js"),N=require("./selection-reducer.js");function B(e){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const l in e)if(l!=="default"){const i=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(d,l,i.get?i:{enumerable:!0,get:()=>e[l]})}}return d.default=e,Object.freeze(d)}const a=B(z),O=a.forwardRef((e,d)=>{const l=a.useRef(null),i=a.useRef(null),{disabled:I=o.disabled,fillMode:u=o.fillMode,themeColor:E=o.themeColor,size:f=o.size,rounded:g=o.rounded,dir:A=o.dir,removeIcon:T=o.removeIcon,removeSvgIcon:M=o.removeSvgIcon,removable:m=o.removable}=e,S=n.useDir(i,A);a.useImperativeHandle(l,()=>({element:i.current,props:e})),a.useImperativeHandle(d,()=>l.current);const[v,r]=a.useContext(k.ChipListSelectionContext),[x,s]=a.useContext(k.ChipListFocusContext),[,R]=a.useContext(k.ChipListDataContext),C=a.useMemo(()=>e.selected||(Array.isArray(v)?v.some(t=>t===e.value):v===e.value),[e.selected,e.value,v]),b=a.useMemo(()=>x===e.value,[e.value,x]);a.useEffect(()=>{b&&i.current&&i.current.focus()},[b]);const _=a.useCallback(t=>{r({type:N.SELECTION_ACTION.toggle,payload:e.value,event:t})},[r,e.value]),h=a.useCallback(t=>{m&&(R({type:q.CHIP_DATA_ACTION.remove,payload:e.value,event:t}),s({type:y.FOCUS_ACTION.reset,payload:e.value,event:t}),r({type:N.SELECTION_ACTION.remove,payload:e.value,event:t}),e.onRemove&&e.onRemove.call(void 0,{target:l.current,syntheticEvent:t}))},[e.onRemove,e.value,m,R,s,r]),F=a.useCallback(t=>{switch(t.keyCode){case n.Keys.left:s({type:y.FOCUS_ACTION.prev,payload:e.value,event:t});break;case n.Keys.right:s({type:y.FOCUS_ACTION.next,payload:e.value,event:t});break;case n.Keys.enter:r({type:N.SELECTION_ACTION.toggle,payload:e.value,event:t});break;case n.Keys.delete:h(t);break}e.onKeyDown&&e.onKeyDown.call(void 0,{target:l.current,syntheticEvent:t})},[e.onKeyDown,e.value,s,r,h]),K=a.useCallback(t=>{s({payload:e.value,type:y.FOCUS_ACTION.current,event:t}),e.onFocus&&e.onFocus.call(void 0,{target:l.current,syntheticEvent:t})},[e.onFocus,e.value,s]),P=a.useCallback(t=>{e.onBlur&&e.onBlur.call(void 0,{target:l.current,syntheticEvent:t})},[e.onBlur]),w=n.useMouse(e,l,{onClick:_});return a.createElement("div",{...w,role:e.role||"button",id:e.value,style:e.style,ref:i,dir:S,tabIndex:n.getTabIndex(e.tabIndex,I,void 0),className:n.classNames("k-chip",{"k-rtl":S==="rtl","k-disabled":I,"k-selected":C,"k-focus":b,[`k-chip-${n.kendoThemeMaps.sizeMap[f]||f}`]:f,[`k-rounded-${n.kendoThemeMaps.roundedMap[g]||g}`]:g,[`k-chip-${u}`]:u,[`k-chip-${u}-${E}`]:!!(u&&E)},e.className),"aria-pressed":e.role?void 0:C,"aria-disabled":I,"aria-describedby":e.ariaDescribedBy,"aria-keyshortcuts":m?"Enter Delete":void 0,onFocus:K,onBlur:P,onKeyDown:F},C&&(e.selectedIcon||e.selectedSvgIcon)&&a.createElement(n.IconWrap,{className:"k-chip-icon",name:e.selectedIcon?n.toIconName(e.selectedIcon):void 0,icon:e.selectedSvgIcon,size:"small"}),(e.icon||e.svgIcon)&&a.createElement(n.IconWrap,{className:"k-chip-icon",name:e.icon?n.toIconName(e.icon):void 0,icon:e.svgIcon,size:"small"}),e.avatar&&a.createElement("div",{className:`k-chip-avatar k-avatar k-rounded-${e.avatar.rounded} k-avatar-md k-avatar-solid k-avatar-solid-primary`,style:e.avatar.style},a.createElement("span",{className:"k-avatar-image"},a.createElement("img",{src:e.avatar.image,alt:e.avatar.imageAlt}))),a.createElement("span",{className:"k-chip-content"},e.children!==void 0?e.children:e.text&&a.createElement("span",{"aria-label":e.ariaLabel||e.text,className:"k-chip-label"},e.text)),m&&a.createElement("span",{className:"k-chip-actions"},a.createElement("span",{className:n.classNames("k-chip-action","k-chip-remove-action"),onClick:h},a.createElement(n.IconWrap,{name:T?n.toIconName(T):void 0,icon:M||D.xCircleIcon,size:"small"}))))}),L={id:c.string,text:c.string,value:c.any,dir:c.oneOf(["ltr","rtl"]),removable:c.bool,removeIcon:c.string,removeIconSvg:n.svgIconPropType,disabled:c.bool,icon:c.string,svgIcon:n.svgIconPropType,selectedIcon:c.string,selectedIconSvg:n.svgIconPropType,onRemove:c.func,dataItem:c.any,selected:c.bool,ariaDescribedBy:c.string,size:c.oneOf([null,"small","medium","large"]),rounded:c.oneOf([null,"small","medium","large","full"]),fillMode:c.oneOf([null,"outline","solid"]),themeColor:c.oneOf([null,"base","info","success","warning","error"])},o={disabled:!1,removable:!1,removeIcon:"k-i-x-circle",removeSvgIcon:D.xCircleIcon,dir:"ltr",size:"medium",rounded:"medium",fillMode:"solid",themeColor:"base"};O.displayName="KendoReactChip";O.propTypes=L;exports.Chip=O;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=require("react"),c=require("prop-types"),k=require("./chip-list-contexts.js"),t=require("@progress/kendo-react-common"),D=require("@progress/kendo-svg-icons"),y=require("./focus-reducer.js"),q=require("./data-reducer.js"),N=require("./selection-reducer.js");function B(e){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const l in e)if(l!=="default"){const i=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(d,l,i.get?i:{enumerable:!0,get:()=>e[l]})}}return d.default=e,Object.freeze(d)}const a=B(z),O=a.forwardRef((e,d)=>{const l=a.useRef(null),i=a.useRef(null),{disabled:I=o.disabled,fillMode:u=o.fillMode,themeColor:E=o.themeColor,size:f=o.size,rounded:g=o.rounded,dir:A=o.dir,removeIcon:T=o.removeIcon,removeSvgIcon:M=o.removeSvgIcon,removable:m=o.removable}=e,S=t.useDir(i,A);a.useImperativeHandle(l,()=>({element:i.current,props:e})),a.useImperativeHandle(d,()=>l.current);const[v,r]=a.useContext(k.ChipListSelectionContext),[x,s]=a.useContext(k.ChipListFocusContext),[,R]=a.useContext(k.ChipListDataContext),C=a.useMemo(()=>e.selected||(Array.isArray(v)?v.some(n=>n===e.value):v===e.value),[e.selected,e.value,v]),h=a.useMemo(()=>x===e.value,[e.value,x]);a.useEffect(()=>{h&&i.current&&i.current.focus()},[h]);const _=a.useCallback(n=>{r({type:N.SELECTION_ACTION.toggle,payload:e.value,event:n})},[r,e.value]),b=a.useCallback(n=>{m&&(R({type:q.CHIP_DATA_ACTION.remove,payload:e.value,event:n}),s({type:y.FOCUS_ACTION.reset,payload:e.value,event:n}),r({type:N.SELECTION_ACTION.remove,payload:e.value,event:n}),e.onRemove&&e.onRemove.call(void 0,{target:l.current,syntheticEvent:n}))},[e.onRemove,e.value,m,R,s,r]),F=a.useCallback(n=>{switch(n.keyCode){case t.Keys.left:s({type:y.FOCUS_ACTION.prev,payload:e.value,event:n});break;case t.Keys.right:s({type:y.FOCUS_ACTION.next,payload:e.value,event:n});break;case t.Keys.enter:r({type:N.SELECTION_ACTION.toggle,payload:e.value,event:n});break;case t.Keys.delete:b(n);break}e.onKeyDown&&e.onKeyDown.call(void 0,{target:l.current,syntheticEvent:n})},[e.onKeyDown,e.value,s,r,b]),K=a.useCallback(n=>{s({payload:e.value,type:y.FOCUS_ACTION.current,event:n}),e.onFocus&&e.onFocus.call(void 0,{target:l.current,syntheticEvent:n})},[e.onFocus,e.value,s]),P=a.useCallback(n=>{e.onBlur&&e.onBlur.call(void 0,{target:l.current,syntheticEvent:n})},[e.onBlur]),w=t.useMouse(e,l,{onClick:_});return a.createElement("div",{...w,role:e.role||"button",id:e.value,style:e.style,ref:i,dir:S,tabIndex:t.getTabIndex(e.tabIndex,I,void 0),className:t.classNames("k-chip",{"k-rtl":S==="rtl","k-disabled":I,"k-selected":C,"k-focus":h,[`k-chip-${t.kendoThemeMaps.sizeMap[f]||f}`]:f,[`k-rounded-${t.kendoThemeMaps.roundedMap[g]||g}`]:g,[`k-chip-${u}`]:u,[`k-chip-${u}-${E}`]:!!(u&&E)},e.className),"aria-pressed":e.role?void 0:C,"aria-disabled":I,"aria-describedby":e.ariaDescribedBy,"aria-keyshortcuts":m?"Enter Delete":void 0,onFocus:K,onBlur:P,onKeyDown:F},C&&(e.selectedIcon||e.selectedSvgIcon)&&a.createElement(t.IconWrap,{className:"k-chip-icon",name:e.selectedIcon?t.toIconName(e.selectedIcon):void 0,icon:e.selectedSvgIcon,size:"small"}),(e.icon||e.svgIcon)&&a.createElement(t.IconWrap,{className:"k-chip-icon",name:e.icon?t.toIconName(e.icon):void 0,icon:e.svgIcon,size:"small"}),e.avatar&&a.createElement("div",{className:t.classNames("k-chip-avatar","k-avatar",e.avatar.rounded&&`k-rounded-${e.avatar.rounded}`),style:e.avatar.style},a.createElement("span",{className:"k-avatar-image"},a.createElement("img",{src:e.avatar.image,alt:e.avatar.imageAlt}))),a.createElement("span",{className:"k-chip-content"},e.children!==void 0?e.children:e.text&&a.createElement("span",{"aria-label":e.ariaLabel||e.text,className:"k-chip-label"},e.text)),m&&a.createElement("span",{className:"k-chip-actions"},a.createElement("span",{className:t.classNames("k-chip-action","k-chip-remove-action"),onClick:b},a.createElement(t.IconWrap,{name:T?t.toIconName(T):void 0,icon:M||D.xCircleIcon,size:"small"}))))}),L={id:c.string,text:c.string,value:c.any,dir:c.oneOf(["ltr","rtl"]),removable:c.bool,removeIcon:c.string,removeIconSvg:t.svgIconPropType,disabled:c.bool,icon:c.string,svgIcon:t.svgIconPropType,selectedIcon:c.string,selectedIconSvg:t.svgIconPropType,onRemove:c.func,dataItem:c.any,selected:c.bool,ariaDescribedBy:c.string,size:c.oneOf(["small","medium","large"]),rounded:c.oneOf(["small","medium","large","full"]),fillMode:c.oneOf(["outline","solid"]),themeColor:c.oneOf(["base","info","success","warning","error"])},o={disabled:!1,removable:!1,removeIcon:"k-i-x-circle",removeSvgIcon:D.xCircleIcon,dir:"ltr",size:void 0,rounded:void 0,fillMode:void 0,themeColor:void 0};O.displayName="KendoReactChip";O.propTypes=L;exports.Chip=O;

package/Chip/Chip.mjs

@@ -8,44 +8,44 @@
 import * as a from "react";
 import l from "prop-types";
 import { ChipListSelectionContext as H, ChipListFocusContext as U, ChipListDataContext as W } from "./chip-list-contexts.mjs";
-import { useDir as j, Keys as u, useMouse as q, getTabIndex as G, classNames as M, kendoThemeMaps as O, IconWrap as I, toIconName as C, svgIconPropType as E } from "@progress/kendo-react-common";
+import { useDir as j, Keys as u, useMouse as q, classNames as I, getTabIndex as G, kendoThemeMaps as O, IconWrap as C, toIconName as E, svgIconPropType as x } from "@progress/kendo-react-common";
 import { xCircleIcon as w } from "@progress/kendo-svg-icons";
 import { FOCUS_ACTION as v } from "./focus-reducer.mjs";
 import { CHIP_DATA_ACTION as J } from "./data-reducer.mjs";
-import { SELECTION_ACTION as x } from "./selection-reducer.mjs";
+import { SELECTION_ACTION as N } from "./selection-reducer.mjs";
 const z = a.forwardRef((e, A) => {
   const c = a.useRef(null), d = a.useRef(null), {
     disabled: y = n.disabled,
     fillMode: r = n.fillMode,
-    themeColor: N = n.themeColor,
+    themeColor: D = n.themeColor,
     size: f = n.size,
     rounded: h = n.rounded,
     dir: B = n.dir,
-    removeIcon: D = n.removeIcon,
+    removeIcon: R = n.removeIcon,
     removeSvgIcon: F = n.removeSvgIcon,
     removable: s = n.removable
-  } = e, R = j(d, B);
+  } = e, S = j(d, B);
   a.useImperativeHandle(c, () => ({
     element: d.current,
     props: e
   })), a.useImperativeHandle(A, () => c.current);
-  const [m, i] = a.useContext(H), [S, o] = a.useContext(U), [, T] = a.useContext(W), k = a.useMemo(() => e.selected || (Array.isArray(m) ? m.some((t) => t === e.value) : m === e.value), [e.selected, e.value, m]), b = a.useMemo(() => S === e.value, [e.value, S]);
+  const [m, i] = a.useContext(H), [T, o] = a.useContext(U), [, M] = a.useContext(W), k = a.useMemo(() => e.selected || (Array.isArray(m) ? m.some((t) => t === e.value) : m === e.value), [e.selected, e.value, m]), g = a.useMemo(() => T === e.value, [e.value, T]);
   a.useEffect(() => {
-    b && d.current && d.current.focus();
-  }, [b]);
+    g && d.current && d.current.focus();
+  }, [g]);
   const K = a.useCallback(
     (t) => {
-      i({ type: x.toggle, payload: e.value, event: t });
+      i({ type: N.toggle, payload: e.value, event: t });
     },
     [i, e.value]
-  ), g = a.useCallback(
+  ), b = a.useCallback(
     (t) => {
-      s && (T({ type: J.remove, payload: e.value, event: t }), o({ type: v.reset, payload: e.value, event: t }), i({ type: x.remove, payload: e.value, event: t }), e.onRemove && e.onRemove.call(void 0, {
+      s && (M({ type: J.remove, payload: e.value, event: t }), o({ type: v.reset, payload: e.value, event: t }), i({ type: N.remove, payload: e.value, event: t }), e.onRemove && e.onRemove.call(void 0, {
         target: c.current,
         syntheticEvent: t
       }));
     },
-    [e.onRemove, e.value, s, T, o, i]
+    [e.onRemove, e.value, s, M, o, i]
   ), $ = a.useCallback(
     (t) => {
       switch (t.keyCode) {
@@ -56,10 +56,10 @@ const z = a.forwardRef((e, A) => {
           o({ type: v.next, payload: e.value, event: t });
           break;
         case u.enter:
-          i({ type: x.toggle, payload: e.value, event: t });
+          i({ type: N.toggle, payload: e.value, event: t });
           break;
         case u.delete:
-          g(t);
+          b(t);
           break;
       }
       e.onKeyDown && e.onKeyDown.call(void 0, {
@@ -67,7 +67,7 @@ const z = a.forwardRef((e, A) => {
         syntheticEvent: t
       });
     },
-    [e.onKeyDown, e.value, o, i, g]
+    [e.onKeyDown, e.value, o, i, b]
   ), L = a.useCallback(
     (t) => {
       o({ payload: e.value, type: v.current, event: t }), e.onFocus && e.onFocus.call(void 0, {
@@ -93,19 +93,19 @@ const z = a.forwardRef((e, A) => {
       id: e.value,
       style: e.style,
       ref: d,
-      dir: R,
+      dir: S,
       tabIndex: G(e.tabIndex, y, void 0),
-      className: M(
+      className: I(
         "k-chip",
         {
-          "k-rtl": R === "rtl",
+          "k-rtl": S === "rtl",
           "k-disabled": y,
           "k-selected": k,
-          "k-focus": b,
+          "k-focus": g,
           [`k-chip-${O.sizeMap[f] || f}`]: f,
           [`k-rounded-${O.roundedMap[h] || h}`]: h,
           [`k-chip-${r}`]: r,
-          [`k-chip-${r}-${N}`]: !!(r && N)
+          [`k-chip-${r}-${D}`]: !!(r && D)
         },
         e.className
       ),
@@ -118,19 +118,19 @@ const z = a.forwardRef((e, A) => {
       onKeyDown: $
     },
     k && (e.selectedIcon || e.selectedSvgIcon) && /* @__PURE__ */ a.createElement(
-      I,
+      C,
       {
         className: "k-chip-icon",
-        name: e.selectedIcon ? C(e.selectedIcon) : void 0,
+        name: e.selectedIcon ? E(e.selectedIcon) : void 0,
         icon: e.selectedSvgIcon,
         size: "small"
       }
     ),
     (e.icon || e.svgIcon) && /* @__PURE__ */ a.createElement(
-      I,
+      C,
       {
         className: "k-chip-icon",
-        name: e.icon ? C(e.icon) : void 0,
+        name: e.icon ? E(e.icon) : void 0,
         icon: e.svgIcon,
         size: "small"
       }
@@ -138,16 +138,20 @@ const z = a.forwardRef((e, A) => {
     e.avatar && /* @__PURE__ */ a.createElement(
       "div",
       {
-        className: `k-chip-avatar k-avatar k-rounded-${e.avatar.rounded} k-avatar-md k-avatar-solid k-avatar-solid-primary`,
+        className: I(
+          "k-chip-avatar",
+          "k-avatar",
+          e.avatar.rounded && `k-rounded-${e.avatar.rounded}`
+        ),
         style: e.avatar.style
       },
       /* @__PURE__ */ a.createElement("span", { className: "k-avatar-image" }, /* @__PURE__ */ a.createElement("img", { src: e.avatar.image, alt: e.avatar.imageAlt }))
     ),
     /* @__PURE__ */ a.createElement("span", { className: "k-chip-content" }, e.children !== void 0 ? e.children : e.text && /* @__PURE__ */ a.createElement("span", { "aria-label": e.ariaLabel || e.text, className: "k-chip-label" }, e.text)),
-    s && /* @__PURE__ */ a.createElement("span", { className: "k-chip-actions" }, /* @__PURE__ */ a.createElement("span", { className: M("k-chip-action", "k-chip-remove-action"), onClick: g }, /* @__PURE__ */ a.createElement(
-      I,
+    s && /* @__PURE__ */ a.createElement("span", { className: "k-chip-actions" }, /* @__PURE__ */ a.createElement("span", { className: I("k-chip-action", "k-chip-remove-action"), onClick: b }, /* @__PURE__ */ a.createElement(
+      C,
       {
-        name: D ? C(D) : void 0,
+        name: R ? E(R) : void 0,
         icon: F || w,
         size: "small"
       }
@@ -160,31 +164,31 @@ const z = a.forwardRef((e, A) => {
   dir: l.oneOf(["ltr", "rtl"]),
   removable: l.bool,
   removeIcon: l.string,
-  removeIconSvg: E,
+  removeIconSvg: x,
   disabled: l.bool,
   icon: l.string,
-  svgIcon: E,
+  svgIcon: x,
   selectedIcon: l.string,
-  selectedIconSvg: E,
+  selectedIconSvg: x,
   onRemove: l.func,
   dataItem: l.any,
   selected: l.bool,
   ariaDescribedBy: l.string,
-  size: l.oneOf([null, "small", "medium", "large"]),
-  rounded: l.oneOf([null, "small", "medium", "large", "full"]),
-  fillMode: l.oneOf([null, "outline", "solid"]),
+  size: l.oneOf(["small", "medium", "large"]),
+  rounded: l.oneOf(["small", "medium", "large", "full"]),
+  fillMode: l.oneOf(["outline", "solid"]),
   // eslint-disable-next-line max-len
-  themeColor: l.oneOf([null, "base", "info", "success", "warning", "error"])
+  themeColor: l.oneOf(["base", "info", "success", "warning", "error"])
 }, n = {
   disabled: !1,
   removable: !1,
   removeIcon: "k-i-x-circle",
   removeSvgIcon: w,
   dir: "ltr",
-  size: "medium",
-  rounded: "medium",
-  fillMode: "solid",
-  themeColor: "base"
+  size: void 0,
+  rounded: void 0,
+  fillMode: void 0,
+  themeColor: void 0
 };
 z.displayName = "KendoReactChip";
 z.propTypes = Q;