@progress/kendo-react-buttons 7.2.4-develop.3 → 7.3.0-develop.1

package/Button.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("react"),s=require("prop-types"),n=require("@progress/kendo-react-common"),y=require("./package-metadata.js");function T(l){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const t in l)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(l,t);Object.defineProperty(e,t,o.get?o:{enumerable:!0,get:()=>l[t]})}}return e.default=l,Object.freeze(e)}const r=T(P);function N({imageUrl:l,name:e,iconClass:t,svgIcon:o,imageAlt:a}){return l?r.createElement("img",{role:"presentation",className:"k-button-icon",alt:a,src:l}):e||o?r.createElement(n.IconWrap,{className:"k-button-icon",name:e,icon:o}):t?r.createElement("span",{role:"presentation",className:n.classNames("k-button-icon",t)}):null}const i=class i extends r.Component{constructor(e){super(e),this._element=null,this.handleClick=t=>{this.toggleIfApplicable(),this.props.onClick&&this.props.onClick.call(void 0,t)},n.validatePackage(y.packageMetadata),this.state={selected:this.props.togglable===!0&&this.props.selected===!0}}get element(){return this._element}get selected(){return this._selectedTemp!==void 0?this._selectedTemp:this.state.selected}static getDerivedStateFromProps(e,t){return e.togglable&&e.selected!==void 0&&e.selected!==t.selected?{selected:e.selected}:null}render(){const{children:e,togglable:t,icon:o,iconClass:a,svgIcon:m,imageUrl:g,imageAlt:f,className:O,onClick:E,size:d=i.defaultProps.size,rounded:u=i.defaultProps.rounded,fillMode:c=i.defaultProps.fillMode,themeColor:h=i.defaultProps.themeColor,...b}=this.props,k=m!==void 0||o!==void 0||a!==void 0||g!==void 0,v=e!==void 0,C=N({name:o,svgIcon:m,iconClass:a,imageUrl:g,imageAlt:f});return r.createElement("button",{ref:M=>this._element=M,"aria-pressed":t?this.state.selected:void 0,...b,onClick:this.handleClick,className:n.classNames("k-button",{[`k-button-${n.kendoThemeMaps.sizeMap[d]||d}`]:d,[`k-button-${c}`]:c,[`k-button-${c}-${h}`]:!!(c&&h),[`k-rounded-${n.kendoThemeMaps.roundedMap[u]||u}`]:u,"k-icon-button":!v&&k,"k-disabled":this.props.disabled,"k-selected":this.state.selected,"k-rtl":this.props.dir==="rtl"},this.props.className)},C,e&&r.createElement("span",{className:"k-button-text"},e))}toggleIfApplicable(){if(this.props.togglable&&this.props.selected===void 0){const e=!this.state.selected;this._selectedTemp=e,this.setState({selected:e},()=>this._selectedTemp=void 0)}}};i.propTypes={children:s.node,selected:s.bool,togglable:s.bool,icon:s.string,svgIcon:n.svgIconPropType,iconClass:s.string,imageUrl:s.string,imageAlt:s.string,size:s.oneOf([null,"small","medium","large"]),rounded:s.oneOf([null,"small","medium","large","full"]),fillMode:s.oneOf([null,"flat","link","outline","solid"]),themeColor:s.oneOf([null,"base","primary","secondary","tertiary","info","success","warning","error","dark","light","inverse"])},i.defaultProps={togglable:!1,size:"medium",rounded:"medium",fillMode:"solid",themeColor:"base"};let p=i;exports.Button=p;

package/Button.mjs

@@ -0,0 +1,124 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as o from "react";
+import t from "prop-types";
+import { validatePackage as N, svgIconPropType as T, classNames as f, kendoThemeMaps as h, IconWrap as E } from "@progress/kendo-react-common";
+import { packageMetadata as y } from "./package-metadata.mjs";
+function I({ imageUrl: d, name: e, iconClass: s, svgIcon: i, imageAlt: r }) {
+  return d ? /* @__PURE__ */ o.createElement("img", { role: "presentation", className: "k-button-icon", alt: r, src: d }) : e || i ? /* @__PURE__ */ o.createElement(E, { className: "k-button-icon", name: e, icon: i }) : s ? /* @__PURE__ */ o.createElement("span", { role: "presentation", className: f("k-button-icon", s) }) : null;
+}
+const l = class l extends o.Component {
+  constructor(e) {
+    super(e), this._element = null, this.handleClick = (s) => {
+      this.toggleIfApplicable(), this.props.onClick && this.props.onClick.call(void 0, s);
+    }, N(y), this.state = { selected: this.props.togglable === !0 && this.props.selected === !0 };
+  }
+  /**
+   * Gets the DOM element of the Button component.
+   */
+  get element() {
+    return this._element;
+  }
+  /**
+   * Returns `true` when the component is togglable and selected ([see example]({% slug toggleable_button %})).
+   * Otherwise, returns `false`.
+   */
+  get selected() {
+    return this._selectedTemp !== void 0 ? this._selectedTemp : this.state.selected;
+  }
+  /**
+   * @hidden
+   */
+  static getDerivedStateFromProps(e, s) {
+    return e.togglable && e.selected !== void 0 && e.selected !== s.selected ? { selected: e.selected } : null;
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    const {
+      children: e,
+      togglable: s,
+      icon: i,
+      iconClass: r,
+      svgIcon: m,
+      imageUrl: p,
+      imageAlt: b,
+      className: z,
+      onClick: A,
+      size: a = l.defaultProps.size,
+      rounded: c = l.defaultProps.rounded,
+      fillMode: n = l.defaultProps.fillMode,
+      themeColor: u = l.defaultProps.themeColor,
+      ...k
+    } = this.props, v = m !== void 0 || i !== void 0 || r !== void 0 || p !== void 0, C = e !== void 0, P = I({
+      name: i,
+      svgIcon: m,
+      iconClass: r,
+      imageUrl: p,
+      imageAlt: b
+    });
+    return /* @__PURE__ */ o.createElement(
+      "button",
+      {
+        ref: (M) => this._element = M,
+        "aria-pressed": s ? this.state.selected : void 0,
+        ...k,
+        onClick: this.handleClick,
+        className: f(
+          "k-button",
+          {
+            [`k-button-${h.sizeMap[a] || a}`]: a,
+            [`k-button-${n}`]: n,
+            [`k-button-${n}-${u}`]: !!(n && u),
+            [`k-rounded-${h.roundedMap[c] || c}`]: c,
+            "k-icon-button": !C && v,
+            "k-disabled": this.props.disabled,
+            "k-selected": this.state.selected,
+            "k-rtl": this.props.dir === "rtl"
+          },
+          this.props.className
+        )
+      },
+      P,
+      e && /* @__PURE__ */ o.createElement("span", { className: "k-button-text" }, e)
+    );
+  }
+  toggleIfApplicable() {
+    if (this.props.togglable && this.props.selected === void 0) {
+      const e = !this.state.selected;
+      this._selectedTemp = e, this.setState({ selected: e }, () => this._selectedTemp = void 0);
+    }
+  }
+};
+l.propTypes = {
+  children: t.node,
+  selected: t.bool,
+  togglable: t.bool,
+  icon: t.string,
+  svgIcon: T,
+  iconClass: t.string,
+  imageUrl: t.string,
+  imageAlt: t.string,
+  size: t.oneOf([null, "small", "medium", "large"]),
+  rounded: t.oneOf([null, "small", "medium", "large", "full"]),
+  fillMode: t.oneOf([null, "flat", "link", "outline", "solid"]),
+  // eslint-disable-next-line max-len
+  themeColor: t.oneOf([null, "base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse"])
+}, l.defaultProps = {
+  togglable: !1,
+  size: "medium",
+  rounded: "medium",
+  fillMode: "solid",
+  themeColor: "base"
+};
+let g = l;
+export {
+  g as Button
+};

package/ButtonGroup.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react"),o=require("prop-types"),l=require("@progress/kendo-react-common"),g=require("./package-metadata.js"),f=require("./util.js");function y(a){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const t in a)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(a,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>a[t]})}}return e.default=a,Object.freeze(e)}const n=y(b),i=f.default.styles,d=class d extends n.Component{constructor(e){super(e),this._element=null,l.validatePackage(g.packageMetadata)}render(){const e=this.mapButtons(this.props.children),t=l.classNames([i["button-group"]],{"k-disabled":this.props.disabled,[i["button-group-stretched"]]:!!this.props.width},this.props.className),s={className:t,style:{width:`${this.props.width}`},dir:this.props.dir,role:"group","aria-disabled":this.props.disabled};return n.createElement("div",{ref:r=>{this._element=r},...s,className:t},e)}mapButtons(e){const t=n.Children.count(e),s=this.props.dir!==void 0?this.props.dir==="rtl":this._element&&getComputedStyle(this._element).direction==="rtl"||!1;return n.Children.map(e,(r,p)=>n.isValidElement(r)?this.renderButton(r,p,p===t-1,s):r)}renderButton(e,t,s,r){const p=l.classNames(e.props.className,{[i["group-start"]]:r?s:t===0,[i["group-end"]]:r?t===0:s}),u={...this.props.width?{width:this.props.width}:{},...e.props.style||{}},m=this.props.disabled||e.props.disabled,h={...e.props,...p?{className:p}:{},...Object.keys(u).length?{style:u}:{},...m!==void 0?{disabled:m}:{}};return n.Children.count(e.props.children)>0?n.cloneElement(e,h,e.props.children):n.cloneElement(e,h)}};d.propTypes={children:o.oneOfType([o.arrayOf(o.element),o.element]),className:o.string,disabled:o.bool,width:o.string,dir:o.string};let c=d;exports.ButtonGroup=c;

package/ButtonGroup.mjs

@@ -0,0 +1,76 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as e from "react";
+import r from "prop-types";
+import { validatePackage as u, classNames as c } from "@progress/kendo-react-common";
+import { packageMetadata as b } from "./package-metadata.mjs";
+import g from "./util.mjs";
+const i = g.styles, a = class a extends e.Component {
+  constructor(t) {
+    super(t), this._element = null, u(b);
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    const t = this.mapButtons(this.props.children), o = c(
+      [i["button-group"]],
+      {
+        "k-disabled": this.props.disabled,
+        [i["button-group-stretched"]]: !!this.props.width
+      },
+      this.props.className
+    ), p = {
+      className: o,
+      style: { width: `${this.props.width}` },
+      dir: this.props.dir,
+      // Accessibility properties
+      role: "group",
+      "aria-disabled": this.props.disabled
+    };
+    return /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        ref: (s) => {
+          this._element = s;
+        },
+        ...p,
+        className: o
+      },
+      t
+    );
+  }
+  mapButtons(t) {
+    const o = e.Children.count(t), p = this.props.dir !== void 0 ? this.props.dir === "rtl" : this._element && getComputedStyle(this._element).direction === "rtl" || !1;
+    return e.Children.map(t, (s, n) => e.isValidElement(s) ? this.renderButton(s, n, n === o - 1, p) : s);
+  }
+  renderButton(t, o, p, s) {
+    const n = c(t.props.className, {
+      [i["group-start"]]: s ? p : o === 0,
+      [i["group-end"]]: s ? o === 0 : p
+    }), l = { ...this.props.width ? { width: this.props.width } : {}, ...t.props.style || {} }, d = this.props.disabled || t.props.disabled, m = {
+      ...t.props,
+      ...n ? { className: n } : {},
+      ...Object.keys(l).length ? { style: l } : {},
+      ...d !== void 0 ? { disabled: d } : {}
+    };
+    return e.Children.count(t.props.children) > 0 ? e.cloneElement(t, m, t.props.children) : e.cloneElement(t, m);
+  }
+};
+a.propTypes = {
+  children: r.oneOfType([r.arrayOf(r.element), r.element]),
+  className: r.string,
+  disabled: r.bool,
+  width: r.string,
+  dir: r.string
+};
+let h = a;
+export {
+  h as ButtonGroup
+};

package/Chip/Chip.js

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

package/Chip/Chip.mjs

@@ -0,0 +1,220 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as a from "react";
+import t from "prop-types";
+import { ChipListSelectionContext as z, ChipListFocusContext as S, ChipListDataContext as w } from "./chip-list-contexts.mjs";
+import { validatePackage as A, useDir as B, Keys as m, useMouse as F, getTabIndex as K, classNames as E, kendoThemeMaps as x, IconWrap as f, toIconName as y, svgIconPropType as k } from "@progress/kendo-react-common";
+import { xCircleIcon as P } from "@progress/kendo-svg-icons";
+import { FOCUS_ACTION as u } from "./focus-reducer.mjs";
+import { CHIP_DATA_ACTION as $ } from "./data-reducer.mjs";
+import { SELECTION_ACTION as h } from "./selection-reducer.mjs";
+import { packageMetadata as L } from "../package-metadata.mjs";
+const b = a.forwardRef((e, N) => {
+  A(L);
+  const n = a.useRef(null), o = a.useRef(null), g = B(o, e.dir);
+  a.useImperativeHandle(n, () => ({
+    element: o.current,
+    props: e
+  })), a.useImperativeHandle(N, () => n.current);
+  const [d, i] = a.useContext(z), [C, c] = a.useContext(S), [, I] = a.useContext(w), r = a.useMemo(
+    () => e.selected || (Array.isArray(d) ? d.some((l) => l === e.value) : d === e.value),
+    [e.selected, e.value, d]
+  ), s = a.useMemo(
+    () => C === e.value,
+    [e.value, C]
+  );
+  a.useEffect(
+    () => {
+      s && o.current && o.current.focus();
+    },
+    [s]
+  );
+  const M = a.useCallback(
+    (l) => {
+      i({ type: h.toggle, payload: e.value, event: l });
+    },
+    [i, e.value]
+  ), v = a.useCallback(
+    (l) => {
+      e.removable && (I({ type: $.remove, payload: e.value, event: l }), c({ type: u.reset, payload: e.value, event: l }), i({ type: h.remove, payload: e.value, event: l }), e.onRemove && e.onRemove.call(
+        void 0,
+        {
+          target: n.current,
+          syntheticEvent: l
+        }
+      ));
+    },
+    [e.onRemove, e.value, e.removable, I, c, i]
+  ), D = a.useCallback(
+    (l) => {
+      switch (l.keyCode) {
+        case m.left:
+          c({ type: u.prev, payload: e.value, event: l });
+          break;
+        case m.right:
+          c({ type: u.next, payload: e.value, event: l });
+          break;
+        case m.enter:
+          i({ type: h.toggle, payload: e.value, event: l });
+          break;
+        case m.delete:
+          v(l);
+          break;
+      }
+      e.onKeyDown && e.onKeyDown.call(
+        void 0,
+        {
+          target: n.current,
+          syntheticEvent: l
+        }
+      );
+    },
+    [e.onKeyDown, e.value, c, i, v]
+  ), R = a.useCallback(
+    (l) => {
+      c({ payload: e.value, type: u.current, event: l }), e.onFocus && e.onFocus.call(
+        void 0,
+        {
+          target: n.current,
+          syntheticEvent: l
+        }
+      );
+    },
+    [e.onFocus, e.value, c]
+  ), T = a.useCallback(
+    (l) => {
+      e.onBlur && e.onBlur.call(
+        void 0,
+        {
+          target: n.current,
+          syntheticEvent: l
+        }
+      );
+    },
+    [e.onBlur]
+  ), O = F(e, n, { onClick: M });
+  return /* @__PURE__ */ a.createElement(
+    "div",
+    {
+      ...O,
+      role: e.role || "button",
+      id: e.value,
+      style: e.style,
+      ref: o,
+      dir: g,
+      tabIndex: K(e.tabIndex, e.disabled, void 0),
+      className: E(
+        "k-chip",
+        {
+          "k-rtl": g === "rtl",
+          "k-disabled": e.disabled,
+          "k-selected": r,
+          "k-focus": s,
+          [`k-chip-${x.sizeMap[e.size] || e.size}`]: e.size,
+          [`k-rounded-${x.roundedMap[e.rounded] || e.rounded}`]: e.rounded,
+          [`k-chip-${e.fillMode}`]: e.fillMode,
+          [`k-chip-${e.fillMode}-${e.themeColor}`]: !!(e.fillMode && e.themeColor)
+        },
+        e.className
+      ),
+      "aria-pressed": e.role ? void 0 : r,
+      "aria-disabled": e.disabled,
+      "aria-describedby": e.ariaDescribedBy,
+      "aria-keyshortcuts": e.removable ? "Enter Delete" : void 0,
+      onFocus: R,
+      onBlur: T,
+      onKeyDown: D
+    },
+    r && (e.selectedIcon || e.selectedSvgIcon) && /* @__PURE__ */ a.createElement(
+      f,
+      {
+        className: "k-chip-icon",
+        name: e.selectedIcon ? y(e.selectedIcon) : void 0,
+        icon: e.selectedSvgIcon,
+        size: "small"
+      }
+    ),
+    (e.icon || e.svgIcon) && /* @__PURE__ */ a.createElement(
+      f,
+      {
+        className: "k-chip-icon",
+        name: e.icon ? y(e.icon) : void 0,
+        icon: e.svgIcon,
+        size: "small"
+      }
+    ),
+    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`,
+        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
+    )),
+    e.removable && /* @__PURE__ */ a.createElement("span", { className: "k-chip-actions" }, /* @__PURE__ */ a.createElement("span", { className: E("k-chip-action", "k-chip-remove-action"), onClick: v }, /* @__PURE__ */ a.createElement(
+      f,
+      {
+        name: e.removeIcon ? y(e.removeIcon) : void 0,
+        icon: e.removeSvgIcon || P,
+        size: "small"
+      }
+    )))
+  );
+}), _ = {
+  id: t.string,
+  text: t.string,
+  value: t.any,
+  dir: t.oneOf(["ltr", "rtl"]),
+  removable: t.bool,
+  removeIcon: t.string,
+  removeIconSvg: k,
+  disabled: t.bool,
+  icon: t.string,
+  svgIcon: k,
+  selectedIcon: t.string,
+  selectedIconSvg: k,
+  onRemove: t.func,
+  dataItem: t.any,
+  selected: t.bool,
+  ariaDescribedBy: t.string,
+  size: t.oneOf([null, "small", "medium", "large"]),
+  rounded: t.oneOf([null, "small", "medium", "large", "full"]),
+  fillMode: t.oneOf([null, "outline", "solid"]),
+  // eslint-disable-next-line max-len
+  themeColor: t.oneOf([null, "base", "info", "success", "warning", "error"])
+}, H = {
+  disabled: !1,
+  removable: !1,
+  removeIcon: "k-i-x-circle",
+  dir: "ltr",
+  size: "medium",
+  rounded: "medium",
+  fillMode: "solid",
+  themeColor: "base"
+};
+b.displayName = "KendoReactChip";
+b.propTypes = _;
+b.defaultProps = H;
+export {
+  b as Chip
+};

package/Chip/ChipList.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Q=require("react"),t=require("prop-types"),c=require("@progress/kendo-react-common"),U=require("./selection-reducer.js"),W=require("./focus-reducer.js"),X=require("./data-reducer.js"),x=require("./Chip.js"),S=require("./chip-list-contexts.js"),Y=require("../package-metadata.js");function Z(e){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const l=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(i,n,l.get?l:{enumerable:!0,get:()=>e[n]})}}return i.default=e,Object.freeze(i)}const a=Z(Q),V=(e,i,n)=>{i.selection==="multiple"?Array.isArray(e)||(e=e?[e]:null):i.selection==="single"&&Array.isArray(e)&&(e=e?e.join(""):null);const[l,r]=a.useState(e);return[l,o=>{const u=U.selectionReducer(i.state||l,{...o,...i});n&&n(u,o.event),i.selection!=="none"&&r(u)}]},ee=e=>{const[i,n]=a.useState(null);return[i,r=>{const h=W.focusReducer(r.payload,{...r,...e});n(h)}]},te=(e,i,n)=>{const[l,r]=a.useState(e);return[l,o=>{const u=X.dataReducer(i.state||l,{...o,...i});n&&n(u,o.event),r(u)}]},y=a.forwardRef((e,i)=>{c.validatePackage(Y.packageMetadata);const n=a.useRef(null),l=a.useRef(null),r=c.useDir(l,e.dir),{chip:h,id:o,style:u,tabIndex:P,disabled:g,size:m,className:q,ariaDescribedBy:I,ariaLabelledBy:T,ariaLabel:j,selection:R=p.selection,value:b=p.defaultValue,defaultData:E=p.defaultData,valueField:f=p.valueField,textField:k=p.textField,onChange:C,onDataChange:D}=e,z=a.useMemo(()=>h||x.Chip,[h,x.Chip]);a.useImperativeHandle(n,()=>({element:l.current,props:e})),a.useImperativeHandle(i,()=>n.current);const N=a.useCallback((s,d)=>{C&&n.current&&C.call(void 0,{value:s,target:n.current,syntheticEvent:d})},[C]),[O,w]=V(b||e.defaultValue,{selection:R,state:b},N),A=a.useCallback((s,d)=>{D&&n.current&&D.call(void 0,{value:s,target:n.current,syntheticEvent:d})},[D]),[F,B]=te(e.data||E,{state:e.data,valueField:f},A),L=a.useCallback((s,d)=>(s.push(d[f]),s),[f]),v=a.useMemo(()=>e.data||F,[e.data,F]),_=a.useMemo(()=>b||O,[b,O]),G=a.useMemo(()=>v.reduce(L,[]),[v,L]),M=a.useCallback(s=>c.getter(f)(s),[f]),H=a.useCallback(s=>c.getter(k)(s),[k]),[K,$]=ee({items:G}),J=c.useMouse(e,n);return a.createElement(S.ChipListSelectionContext.Provider,{value:[_,w]},a.createElement(S.ChipListFocusContext.Provider,{value:[K,$]},a.createElement(S.ChipListDataContext.Provider,{value:[v,B]},a.createElement("div",{ref:l,...J,role:g?void 0:"listbox",id:o,dir:r,style:u,tabIndex:c.getTabIndex(P,g,void 0),className:c.classNames("k-chip-list",{"k-rtl":r==="rtl","k-disabled":g,[`k-chip-list-${c.kendoThemeMaps.sizeMap[m]||m}`]:m},q),"aria-label":j,"aria-labelledby":T,"aria-describedby":I,"aria-orientation":"horizontal","aria-multiselectable":R==="multiple"},v.map((s,d)=>a.createElement(z,{role:"option",dataItem:s,size:m,key:[M(s),d].join("-"),text:H(s),value:M(s),ariaLabel:s.ariaLabel,svgIcon:s.svgIcon||void 0}))))))}),ae={id:t.string,className:t.string,tabIndex:t.number,data:t.any,defaultData:t.arrayOf(t.any),onDataChange:t.func,value:t.oneOfType([t.any,t.arrayOf(t.any)]),defaultValue:t.oneOfType([t.any,t.arrayOf(t.any)]),onChange:t.func,selection:t.oneOf(["single","none","multiple"]),textField:t.string,valueField:t.string,disabled:t.bool,dir:t.oneOf(["ltr","rtl"]),ariaLabelledBy:t.string,ariaDescribedBy:t.string,size:t.oneOf([null,"small","medium","large"])},p={chip:x.Chip,size:"medium",disabled:!1,defaultValue:null,defaultData:[],dir:"ltr",selection:"none",textField:"text",valueField:"value",removable:"removable"};y.displayName="KendoReactChipList";y.propTypes=ae;y.defaultProps=p;exports.ChipList=y;

package/Chip/ChipList.mjs

@@ -0,0 +1,190 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as a from "react";
+import e from "prop-types";
+import { validatePackage as Q, useDir as U, getter as I, useMouse as W, getTabIndex as X, classNames as Y, kendoThemeMaps as Z } from "@progress/kendo-react-common";
+import { selectionReducer as _ } from "./selection-reducer.mjs";
+import { focusReducer as V } from "./focus-reducer.mjs";
+import { dataReducer as ee } from "./data-reducer.mjs";
+import { Chip as D } from "./Chip.mjs";
+import { ChipListSelectionContext as te, ChipListFocusContext as ae, ChipListDataContext as ne } from "./chip-list-contexts.mjs";
+import { packageMetadata as se } from "../package-metadata.mjs";
+const ie = (t, i, s) => {
+  i.selection === "multiple" ? Array.isArray(t) || (t = t ? [t] : null) : i.selection === "single" && Array.isArray(t) && (t = t ? t.join("") : null);
+  const [l, o] = a.useState(t);
+  return [l, (r) => {
+    const c = _(i.state || l, { ...r, ...i });
+    s && s(c, r.event), i.selection !== "none" && o(c);
+  }];
+}, le = (t) => {
+  const [i, s] = a.useState(null);
+  return [i, (o) => {
+    const d = V(o.payload, { ...o, ...t });
+    s(d);
+  }];
+}, oe = (t, i, s) => {
+  const [l, o] = a.useState(t);
+  return [l, (r) => {
+    const c = ee(i.state || l, { ...r, ...i });
+    s && s(c, r.event), o(c);
+  }];
+}, g = a.forwardRef((t, i) => {
+  Q(se);
+  const s = a.useRef(null), l = a.useRef(null), o = U(l, t.dir), {
+    chip: d,
+    id: r,
+    style: c,
+    tabIndex: M,
+    disabled: y,
+    size: h,
+    className: O,
+    ariaDescribedBy: P,
+    ariaLabelledBy: E,
+    ariaLabel: T,
+    selection: x = m.selection,
+    value: f = m.defaultValue,
+    defaultData: z = m.defaultData,
+    valueField: p = m.valueField,
+    textField: S = m.textField,
+    onChange: b,
+    onDataChange: C
+  } = t, N = a.useMemo(
+    () => d || D,
+    [d, D]
+  );
+  a.useImperativeHandle(s, () => ({
+    element: l.current,
+    props: t
+  })), a.useImperativeHandle(i, () => s.current);
+  const w = a.useCallback(
+    (n, u) => {
+      b && s.current && b.call(void 0, {
+        value: n,
+        target: s.current,
+        syntheticEvent: u
+      });
+    },
+    [b]
+  ), [F, A] = ie(
+    f || t.defaultValue,
+    {
+      selection: x,
+      state: f
+    },
+    w
+  ), B = a.useCallback(
+    (n, u) => {
+      C && s.current && C.call(void 0, {
+        value: n,
+        target: s.current,
+        syntheticEvent: u
+      });
+    },
+    [C]
+  ), [k, j] = oe(
+    t.data || z,
+    {
+      state: t.data,
+      valueField: p
+    },
+    B
+  ), L = a.useCallback(
+    (n, u) => (n.push(u[p]), n),
+    [p]
+  ), v = a.useMemo(
+    () => t.data || k,
+    [t.data, k]
+  ), G = a.useMemo(
+    () => f || F,
+    [f, F]
+  ), H = a.useMemo(
+    () => v.reduce(L, []),
+    [v, L]
+  ), R = a.useCallback(
+    (n) => I(p)(n),
+    [p]
+  ), K = a.useCallback(
+    (n) => I(S)(n),
+    [S]
+  ), [$, q] = le({ items: H }), J = W(t, s);
+  return /* @__PURE__ */ a.createElement(te.Provider, { value: [G, A] }, /* @__PURE__ */ a.createElement(ae.Provider, { value: [$, q] }, /* @__PURE__ */ a.createElement(ne.Provider, { value: [v, j] }, /* @__PURE__ */ a.createElement(
+    "div",
+    {
+      ref: l,
+      ...J,
+      role: y ? void 0 : "listbox",
+      id: r,
+      dir: o,
+      style: c,
+      tabIndex: X(M, y, void 0),
+      className: Y(
+        "k-chip-list",
+        {
+          "k-rtl": o === "rtl",
+          "k-disabled": y,
+          [`k-chip-list-${Z.sizeMap[h] || h}`]: h
+        },
+        O
+      ),
+      "aria-label": T,
+      "aria-labelledby": E,
+      "aria-describedby": P,
+      "aria-orientation": "horizontal",
+      "aria-multiselectable": x === "multiple"
+    },
+    v.map((n, u) => /* @__PURE__ */ a.createElement(
+      N,
+      {
+        role: "option",
+        dataItem: n,
+        size: h,
+        key: [R(n), u].join("-"),
+        text: K(n),
+        value: R(n),
+        ariaLabel: n.ariaLabel,
+        svgIcon: n.svgIcon || void 0
+      }
+    ))
+  ))));
+}), re = {
+  id: e.string,
+  className: e.string,
+  tabIndex: e.number,
+  data: e.any,
+  defaultData: e.arrayOf(e.any),
+  onDataChange: e.func,
+  value: e.oneOfType([e.any, e.arrayOf(e.any)]),
+  defaultValue: e.oneOfType([e.any, e.arrayOf(e.any)]),
+  onChange: e.func,
+  selection: e.oneOf(["single", "none", "multiple"]),
+  textField: e.string,
+  valueField: e.string,
+  disabled: e.bool,
+  dir: e.oneOf(["ltr", "rtl"]),
+  ariaLabelledBy: e.string,
+  ariaDescribedBy: e.string,
+  size: e.oneOf([null, "small", "medium", "large"])
+}, m = {
+  chip: D,
+  size: "medium",
+  disabled: !1,
+  defaultValue: null,
+  defaultData: [],
+  dir: "ltr",
+  selection: "none",
+  textField: "text",
+  valueField: "value",
+  removable: "removable"
+};
+g.displayName = "KendoReactChipList";
+g.propTypes = re;
+g.defaultProps = m;
+export {
+  g as ChipList
+};

package/Chip/chip-list-contexts.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),n=t.createContext([null,e=>{}]),o=t.createContext([null,e=>{}]),i=t.createContext([null,e=>{}]);exports.ChipListDataContext=i;exports.ChipListFocusContext=o;exports.ChipListSelectionContext=n;