@progress/kendo-react-buttons/Chip/Chip.js

All you need in React Button in one package: disabled/enabled states, built-in styles and more. KendoReact Buttons package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * 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;