@progress/kendo-react-buttons 14.5.0-develop.8 → 15.0.0-develop.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/Button.d.ts +7 -3
  2. package/Button.js +1 -1
  3. package/Button.mjs +80 -78
  4. package/Chip/Chip.d.ts +6 -0
  5. package/Chip/Chip.js +1 -1
  6. package/Chip/Chip.mjs +67 -63
  7. package/Chip/ChipList.js +1 -1
  8. package/Chip/ChipList.mjs +1 -1
  9. package/FloatingActionButton/FloatingActionButton.js +1 -1
  10. package/FloatingActionButton/FloatingActionButton.mjs +100 -111
  11. package/FloatingActionButton/interfaces/FloatingActionButtonProps.d.ts +1 -7
  12. package/FloatingActionButton/models/size.d.ts +2 -1
  13. package/FloatingActionButton/models/theme-color.d.ts +2 -8
  14. package/ListButton/DropDownButton.js +1 -1
  15. package/ListButton/DropDownButton.mjs +44 -46
  16. package/ListButton/SplitButton.js +1 -1
  17. package/ListButton/SplitButton.mjs +58 -56
  18. package/ListButton/models/ListButtonProps.d.ts +2 -2
  19. package/README.md +4 -4
  20. package/SegmentedControl/SegmentedControl.js +1 -1
  21. package/SegmentedControl/SegmentedControl.mjs +28 -27
  22. package/SpeechToTextButton/SpeechToTextButton.js +1 -1
  23. package/SpeechToTextButton/SpeechToTextButton.mjs +27 -27
  24. package/dist/cdn/js/kendo-react-buttons.js +1 -1
  25. package/messages/index.d.ts +5 -0
  26. package/messages/index.js +1 -1
  27. package/messages/index.mjs +8 -6
  28. package/package-metadata.js +1 -1
  29. package/package-metadata.mjs +2 -2
  30. package/package.json +11 -6
  31. package/toolbar/Toolbar.js +1 -1
  32. package/toolbar/Toolbar.mjs +68 -62
  33. package/toolbar/tools/ToolbarOverflowSection.js +1 -1
  34. package/toolbar/tools/ToolbarOverflowSection.mjs +66 -40
  35. package/toolbar/tools/ToolbarScrollButton.js +1 -1
  36. package/toolbar/tools/ToolbarScrollButton.mjs +14 -16
package/Button.d.ts CHANGED
@@ -5,7 +5,7 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- import { ButtonsClassStructure } from '@progress/kendo-react-common';
8
+ import { ButtonsClassStructure, WebMcpProps } from '@progress/kendo-react-common';
9
9
  import { ButtonInterface } from './ButtonInterface';
10
10
  import * as React from 'react';
11
11
  /**
@@ -27,7 +27,7 @@ export interface ButtonProps extends ButtonInterface, React.ButtonHTMLAttributes
27
27
  * <Button size="large">Large Button</Button>
28
28
  * ```
29
29
  */
30
- size?: 'small' | 'medium' | 'large';
30
+ size?: 'xs' | 'small' | 'medium' | 'large';
31
31
  /**
32
32
  * Configures the `roundness` of the Button. See [Button Appearance](https://www.telerik.com/kendo-react-ui/components/buttons/button/appearance).
33
33
  *
@@ -71,7 +71,7 @@ export interface ButtonProps extends ButtonInterface, React.ButtonHTMLAttributes
71
71
  * <Button themeColor="primary">Primary Button</Button>
72
72
  * ```
73
73
  */
74
- themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
74
+ themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'inverse';
75
75
  /**
76
76
  * Sets an SVG icon or custom element before the content of the Button. For the custom component, consider using
77
77
  * [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content).
@@ -106,6 +106,10 @@ export interface ButtonProps extends ButtonInterface, React.ButtonHTMLAttributes
106
106
  * ```
107
107
  */
108
108
  iconSize?: 'small' | 'medium' | 'large';
109
+ /**
110
+ * Enables Web MCP tool registration for this Button.
111
+ */
112
+ webMcp?: boolean | WebMcpProps;
109
113
  }
110
114
  /**
111
115
  * @hidden
package/Button.js CHANGED
@@ -5,4 +5,4 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react"),r=require("prop-types"),e=require("@progress/kendo-react-common");function F(o){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const s in o)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(o,s);Object.defineProperty(l,s,n.get?n:{enumerable:!0,get:()=>o[s]})}}return l.default=o,Object.freeze(l)}const t=F(W);function G({imageUrl:o,name:l,iconClass:s,svgIcon:n,imageAlt:u,buttonClasses:a,iconSize:c}){return o?t.createElement("img",{role:"presentation",className:e.classNames(e.uButton.icon({c:a})),alt:u,src:o}):l||n?t.createElement(e.IconWrap,{className:e.classNames(e.uButton.icon({c:a})),name:l,icon:n,size:c}):s?t.createElement("span",{role:"presentation",className:e.classNames(e.uButton.icon({c:a}),s)}):null}const g=t.forwardRef((o,l)=>{const{children:s,togglable:n,dir:u,disabled:a,selected:c,icon:v,iconClass:b,svgIcon:y,imageUrl:N,imageAlt:P,className:S,startIcon:h,endIcon:B,onClick:C,size:k=p.size,rounded:z=p.rounded,fillMode:T=p.fillMode,themeColor:j=p.themeColor,ariaPressed:E,iconSize:A,...w}=o,q=()=>{n&&c===void 0&&(d.current=!i,R(!i))},U=f=>{q(),C&&C.call(void 0,f)},d=t.useRef(void 0),O=t.useRef(null),[i,R]=t.useState(n===!0&&c===!0),_=y!==void 0||v!==void 0||b!==void 0||N!==void 0,x=s!==void 0,D=e.useUnstyled(),I=o.unstyled||D,m=I&&I.uButton;t.useImperativeHandle(l,()=>({element:O.current,selected:d.current!==void 0?d.current:i})),t.useMemo(()=>{n&&c!==void 0&&c!==i&&R(c)},[n,c]),t.useEffect(()=>{d.current=void 0},[i]);const H=G({name:v,svgIcon:y,iconClass:b,imageUrl:N,imageAlt:P,buttonClasses:m,iconSize:A}),M=f=>t.cloneElement(f,{className:e.classNames(e.uButton.icon({c:m}),f.props.className)}),K=t.useMemo(()=>n?i:E||void 0,[n,i,E]);return t.createElement("button",{ref:O,"aria-pressed":K,...w,dir:u,disabled:a,onClick:U,className:e.classNames(e.uButton.wrapper({c:m,isRtl:u==="rtl",selected:i,disabled:a,size:k,fillMode:T,rounded:z,themeColor:j,iconButton:!x&&_}),S)},h&&M(h),H,s&&t.createElement("span",{className:e.classNames(e.uButton.text({c:m}))},s),B&&M(B))}),p={size:void 0,rounded:void 0,fillMode:void 0,themeColor:void 0};g.displayName="KendoReactButton";g.propTypes={children:r.node,selected:r.bool,togglable:r.bool,icon:r.string,svgIcon:e.svgIconPropType,iconClass:r.string,imageUrl:r.string,imageAlt:r.string,size:r.oneOf(["small","medium","large"]),rounded:r.oneOf(["small","medium","large","full","none"]),fillMode:r.oneOf(["flat","link","outline","solid","clear"]),themeColor:r.oneOf(["base","primary","secondary","tertiary","info","success","warning","error","dark","light","inverse"])};exports.Button=g;
8
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const F=require("react"),l=require("prop-types"),e=require("@progress/kendo-react-common");function G(n){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const s in n)if(s!=="default"){const o=Object.getOwnPropertyDescriptor(n,s);Object.defineProperty(r,s,o.get?o:{enumerable:!0,get:()=>n[s]})}}return r.default=n,Object.freeze(r)}const t=G(F);function J({imageUrl:n,name:r,iconClass:s,svgIcon:o,imageAlt:d,buttonClasses:u,iconSize:i}){return n?t.createElement("img",{role:"presentation",className:e.classNames(e.uButton.icon({c:u})),alt:d,src:n}):r||o?t.createElement(e.IconWrap,{className:e.classNames(e.uButton.icon({c:u})),name:r,icon:o,size:i}):s?t.createElement("span",{role:"presentation",className:e.classNames(e.uButton.icon({c:u}),s)}):null}const v=t.forwardRef((n,r)=>{const{children:s,togglable:o,dir:d,disabled:u,selected:i,icon:b,iconClass:y,svgIcon:N,imageUrl:R,imageAlt:z,className:k,startIcon:h,endIcon:B,onClick:C,size:T=g.size,rounded:j=g.rounded,fillMode:w=g.fillMode,themeColor:A=g.themeColor,ariaPressed:M,iconSize:x,...q}=n,U=()=>{o&&i===void 0&&(m.current=!c,I(!c))},_=a=>{U(),C&&C.call(void 0,a)},m=t.useRef(void 0),E=t.useRef(null),O=t.useRef(null),[c,I]=t.useState(o===!0&&i===!0),D=N!==void 0||b!==void 0||y!==void 0||R!==void 0,H=s!==void 0,W=e.useUnstyled(),P=n.unstyled||W,f=P&&P.uButton;let p=c;m.current===void 0?p=c:p=m.current,t.useImperativeHandle(r,()=>{const a={element:E.current,selected:p};return O.current=a,a}),e.useWebMcpRegister("button",O,n,n.webMcp),t.useMemo(()=>{o&&i!==void 0&&i!==c&&I(i)},[o,i]),t.useEffect(()=>{m.current=void 0},[c]);const K=J({name:b,svgIcon:N,iconClass:y,imageUrl:R,imageAlt:z,buttonClasses:f,iconSize:x}),S=a=>t.cloneElement(a,{className:e.classNames(e.uButton.icon({c:f}),a.props.className)}),V=t.useMemo(()=>o?c:M||void 0,[o,c,M]);return t.createElement("button",{ref:E,"aria-pressed":V,...q,dir:d,disabled:u,onClick:_,className:e.classNames(e.uButton.wrapper({c:f,isRtl:d==="rtl",selected:c,disabled:u,size:T,fillMode:w,rounded:j,themeColor:A,iconButton:!H&&D}),k)},h&&S(h),K,s&&t.createElement("span",{className:e.classNames(e.uButton.text({c:f}))},s),B&&S(B))}),g={size:void 0,rounded:void 0,fillMode:void 0,themeColor:void 0};v.displayName="KendoReactButton";v.propTypes={children:l.node,selected:l.bool,togglable:l.bool,icon:l.string,svgIcon:e.svgIconPropType,iconClass:l.string,imageUrl:l.string,imageAlt:l.string,size:l.oneOf(["xsmall","xs","small","medium","large"]),rounded:l.oneOf(["small","medium","large","full","none"]),fillMode:l.oneOf(["flat","link","outline","solid","clear"]),themeColor:l.oneOf(["base","primary","secondary","tertiary","info","success","warning","error","inverse"])};exports.Button=v;
package/Button.mjs CHANGED
@@ -7,101 +7,105 @@
7
7
  */
8
8
  import * as e from "react";
9
9
  import t from "prop-types";
10
- import { useUnstyled as G, classNames as i, uButton as c, IconWrap as J, svgIconPropType as L } from "@progress/kendo-react-common";
11
- function Q({ imageUrl: a, name: d, iconClass: s, svgIcon: o, imageAlt: u, buttonClasses: l, iconSize: n }) {
12
- return a ? /* @__PURE__ */ e.createElement(
10
+ import { useUnstyled as J, useWebMcpRegister as L, classNames as a, uButton as d, IconWrap as Q, svgIconPropType as X } from "@progress/kendo-react-common";
11
+ function Y({ imageUrl: l, name: u, iconClass: c, svgIcon: n, imageAlt: m, buttonClasses: i, iconSize: s }) {
12
+ return l ? /* @__PURE__ */ e.createElement(
13
13
  "img",
14
14
  {
15
15
  role: "presentation",
16
- className: i(c.icon({ c: l })),
17
- alt: u,
18
- src: a
16
+ className: a(d.icon({ c: i })),
17
+ alt: m,
18
+ src: l
19
19
  }
20
- ) : d || o ? /* @__PURE__ */ e.createElement(
21
- J,
20
+ ) : u || n ? /* @__PURE__ */ e.createElement(
21
+ Q,
22
22
  {
23
- className: i(c.icon({ c: l })),
24
- name: d,
25
- icon: o,
26
- size: n
23
+ className: a(d.icon({ c: i })),
24
+ name: u,
25
+ icon: n,
26
+ size: s
27
27
  }
28
- ) : s ? /* @__PURE__ */ e.createElement("span", { role: "presentation", className: i(c.icon({ c: l }), s) }) : null;
28
+ ) : c ? /* @__PURE__ */ e.createElement("span", { role: "presentation", className: a(d.icon({ c: i }), c) }) : null;
29
29
  }
30
- const A = e.forwardRef((a, d) => {
30
+ const P = e.forwardRef((l, u) => {
31
31
  const {
32
- children: s,
33
- togglable: o,
34
- dir: u,
35
- disabled: l,
36
- selected: n,
37
- icon: v,
32
+ children: c,
33
+ togglable: n,
34
+ dir: m,
35
+ disabled: i,
36
+ selected: s,
37
+ icon: b,
38
38
  iconClass: h,
39
39
  svgIcon: y,
40
- imageUrl: C,
41
- imageAlt: B,
42
- className: P,
43
- startIcon: E,
44
- endIcon: N,
45
- onClick: b,
40
+ imageUrl: R,
41
+ imageAlt: k,
42
+ className: w,
43
+ startIcon: C,
44
+ endIcon: E,
45
+ onClick: N,
46
46
  size: O = g.size,
47
47
  rounded: S = g.rounded,
48
48
  fillMode: T = g.fillMode,
49
- themeColor: w = g.themeColor,
50
- ariaPressed: I,
51
- iconSize: x,
52
- ...U
53
- } = a, H = () => {
54
- o && n === void 0 && (m.current = !r, z(!r));
55
- }, K = (p) => {
56
- H(), b && b.call(void 0, p);
57
- }, m = e.useRef(void 0), R = e.useRef(null), [r, z] = e.useState(o === !0 && n === !0), W = y !== void 0 || v !== void 0 || h !== void 0 || C !== void 0, j = s !== void 0, q = G(), M = a.unstyled || q, f = M && M.uButton;
58
- e.useImperativeHandle(d, () => ({
59
- element: R.current,
60
- selected: m.current !== void 0 ? m.current : r
61
- })), e.useMemo(() => {
62
- o && n !== void 0 && n !== r && z(n);
63
- }, [o, n]), e.useEffect(() => {
64
- m.current = void 0;
65
- }, [r]);
66
- const D = Q({
67
- name: v,
49
+ themeColor: U = g.themeColor,
50
+ ariaPressed: M,
51
+ iconSize: H,
52
+ ...W
53
+ } = l, K = () => {
54
+ n && s === void 0 && (f.current = !o, x(!o));
55
+ }, V = (r) => {
56
+ K(), N && N.call(void 0, r);
57
+ }, f = e.useRef(void 0), I = e.useRef(null), z = e.useRef(null), [o, x] = e.useState(n === !0 && s === !0), j = y !== void 0 || b !== void 0 || h !== void 0 || R !== void 0, q = c !== void 0, D = J(), A = l.unstyled || D, p = A && A.uButton;
58
+ let v = o;
59
+ f.current === void 0 ? v = o : v = f.current, e.useImperativeHandle(u, () => {
60
+ const r = {
61
+ element: I.current,
62
+ selected: v
63
+ };
64
+ return z.current = r, r;
65
+ }), L("button", z, l, l.webMcp), e.useMemo(() => {
66
+ n && s !== void 0 && s !== o && x(s);
67
+ }, [n, s]), e.useEffect(() => {
68
+ f.current = void 0;
69
+ }, [o]);
70
+ const F = Y({
71
+ name: b,
68
72
  svgIcon: y,
69
73
  iconClass: h,
70
- imageUrl: C,
71
- imageAlt: B,
72
- buttonClasses: f,
73
- iconSize: x
74
- }), k = (p) => e.cloneElement(p, {
75
- className: i(c.icon({ c: f }), p.props.className)
76
- }), F = e.useMemo(() => o ? r : I || void 0, [o, r, I]);
74
+ imageUrl: R,
75
+ imageAlt: k,
76
+ buttonClasses: p,
77
+ iconSize: H
78
+ }), B = (r) => e.cloneElement(r, {
79
+ className: a(d.icon({ c: p }), r.props.className)
80
+ }), G = e.useMemo(() => n ? o : M || void 0, [n, o, M]);
77
81
  return /* @__PURE__ */ e.createElement(
78
82
  "button",
79
83
  {
80
- ref: R,
81
- "aria-pressed": F,
82
- ...U,
83
- dir: u,
84
- disabled: l,
85
- onClick: K,
86
- className: i(
87
- c.wrapper({
88
- c: f,
89
- isRtl: u === "rtl",
90
- selected: r,
91
- disabled: l,
84
+ ref: I,
85
+ "aria-pressed": G,
86
+ ...W,
87
+ dir: m,
88
+ disabled: i,
89
+ onClick: V,
90
+ className: a(
91
+ d.wrapper({
92
+ c: p,
93
+ isRtl: m === "rtl",
94
+ selected: o,
95
+ disabled: i,
92
96
  size: O,
93
97
  fillMode: T,
94
98
  rounded: S,
95
- themeColor: w,
96
- iconButton: !j && W
99
+ themeColor: U,
100
+ iconButton: !q && j
97
101
  }),
98
- P
102
+ w
99
103
  )
100
104
  },
101
- E && k(E),
102
- D,
103
- s && /* @__PURE__ */ e.createElement("span", { className: i(c.text({ c: f })) }, s),
104
- N && k(N)
105
+ C && B(C),
106
+ F,
107
+ c && /* @__PURE__ */ e.createElement("span", { className: a(d.text({ c: p })) }, c),
108
+ E && B(E)
105
109
  );
106
110
  }), g = {
107
111
  size: void 0,
@@ -109,17 +113,17 @@ const A = e.forwardRef((a, d) => {
109
113
  fillMode: void 0,
110
114
  themeColor: void 0
111
115
  };
112
- A.displayName = "KendoReactButton";
113
- A.propTypes = {
116
+ P.displayName = "KendoReactButton";
117
+ P.propTypes = {
114
118
  children: t.node,
115
119
  selected: t.bool,
116
120
  togglable: t.bool,
117
121
  icon: t.string,
118
- svgIcon: L,
122
+ svgIcon: X,
119
123
  iconClass: t.string,
120
124
  imageUrl: t.string,
121
125
  imageAlt: t.string,
122
- size: t.oneOf(["small", "medium", "large"]),
126
+ size: t.oneOf(["xsmall", "xs", "small", "medium", "large"]),
123
127
  rounded: t.oneOf(["small", "medium", "large", "full", "none"]),
124
128
  fillMode: t.oneOf(["flat", "link", "outline", "solid", "clear"]),
125
129
  themeColor: t.oneOf([
@@ -131,11 +135,9 @@ A.propTypes = {
131
135
  "success",
132
136
  "warning",
133
137
  "error",
134
- "dark",
135
- "light",
136
138
  "inverse"
137
139
  ])
138
140
  };
139
141
  export {
140
- A as Button
142
+ P as Button
141
143
  };
package/Chip/Chip.d.ts CHANGED
@@ -397,6 +397,12 @@ export interface ChipProps {
397
397
  * This property is related to accessibility.
398
398
  */
399
399
  ariaLabel?: string;
400
+ /**
401
+ * Sets the `aria-selected` attribute on the Chip.
402
+ * When provided, overrides the internally computed selected state for the ARIA attribute.
403
+ * Only applies when `role` is `"option"`.
404
+ */
405
+ ariaSelected?: boolean;
400
406
  }
401
407
  /**
402
408
  * Represents the target(element and props) of the ChipRemoveEvent.
package/Chip/Chip.js CHANGED
@@ -5,4 +5,4 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=require("react"),c=require("prop-types"),b=require("./chip-list-contexts.js"),n=require("@progress/kendo-react-common"),A=require("@progress/kendo-svg-icons"),u=require("./focus-reducer.js"),q=require("./data-reducer.js"),k=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 s=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(d,l,s.get?s:{enumerable:!0,get:()=>e[l]})}}return d.default=e,Object.freeze(d)}const a=B(z),N=a.forwardRef((e,d)=>{const l=a.useRef(null),s=a.useRef(null),{disabled:y=i.disabled,fillMode:O=i.fillMode,themeColor:T=i.themeColor,size:I=i.size,rounded:C=i.rounded,dir:D=i.dir,removeIcon:E=i.removeIcon,removeSvgIcon:M=i.removeSvgIcon,removable:m=i.removable}=e,S=n.useDir(s,D);a.useImperativeHandle(l,()=>({element:s.current,props:e})),a.useImperativeHandle(d,()=>l.current);const[v,r]=a.useContext(b.ChipListSelectionContext),[x,o]=a.useContext(b.ChipListFocusContext),[,R]=a.useContext(b.ChipListDataContext),f=a.useMemo(()=>e.selected||(Array.isArray(v)?v.some(t=>t===e.value):v===e.value),[e.selected,e.value,v]),g=a.useMemo(()=>x===e.value,[e.value,x]);a.useEffect(()=>{g&&s.current&&s.current.focus()},[g]);const _=a.useCallback(t=>{r({type:k.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}),o({type:u.FOCUS_ACTION.reset,payload:e.value,event:t}),r({type:k.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,o,r]),F=a.useCallback(t=>{switch(t.keyCode){case n.Keys.left:o({type:u.FOCUS_ACTION.prev,payload:e.value,event:t});break;case n.Keys.right:o({type:u.FOCUS_ACTION.next,payload:e.value,event:t});break;case n.Keys.enter:r({type:k.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,o,r,h]),K=a.useCallback(t=>{o({payload:e.value,type:u.FOCUS_ACTION.current,event:t}),e.onFocus&&e.onFocus.call(void 0,{target:l.current,syntheticEvent:t})},[e.onFocus,e.value,o]),P=a.useCallback(t=>{o({type:u.FOCUS_ACTION.reset,payload:e.value,event:t}),e.onBlur&&e.onBlur.call(void 0,{target:l.current,syntheticEvent:t})},[e.onBlur,e.value,o]),w=n.useMouse(e,l,{onClick:_});return a.createElement("div",{...w,role:e.role||"button",id:e.value,style:e.style,ref:s,dir:S,tabIndex:n.getTabIndex(e.tabIndex,y,void 0),className:n.classNames("k-chip",{"k-rtl":S==="rtl","k-disabled":y,"k-selected":f,"k-focus":g,[`k-chip-${n.kendoThemeMaps.sizeMap[I]||I}`]:I,[`k-rounded-${n.kendoThemeMaps.roundedMap[C]||C}`]:C,[`k-chip-${O}`]:O,[`k-chip-${T}`]:!!T},e.className),"aria-pressed":e.role?void 0:f,"aria-disabled":y,"aria-describedby":e.ariaDescribedBy,"aria-keyshortcuts":m?"Enter Delete":void 0,onFocus:K,onBlur:P,onKeyDown:F},f&&(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:n.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:n.classNames("k-chip-action","k-chip-remove-action"),onClick:h},a.createElement(n.IconWrap,{name:E?n.toIconName(E):void 0,icon:M||A.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(["small","medium","large"]),rounded:c.oneOf(["small","medium","large","full","none"]),fillMode:c.oneOf(["outline","solid"]),themeColor:c.oneOf(["base","info","success","warning","error"])},i={disabled:!1,removable:!1,removeIcon:"k-i-x-circle",removeSvgIcon:A.xCircleIcon,dir:"ltr",size:void 0,rounded:void 0,fillMode:void 0,themeColor:void 0};N.displayName="KendoReactChip";N.propTypes=L;exports.Chip=N;
8
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("react"),n=require("prop-types"),h=require("./chip-list-contexts.js"),c=require("@progress/kendo-react-common"),D=require("@progress/kendo-svg-icons"),u=require("./focus-reducer.js"),B=require("./data-reducer.js"),k=require("./selection-reducer.js");function j(e){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const l in e)if(l!=="default"){const r=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(d,l,r.get?r:{enumerable:!0,get:()=>e[l]})}}return d.default=e,Object.freeze(d)}const a=j(q),N=a.forwardRef((e,d)=>{var A;const l=a.useRef(null),r=a.useRef(null),{disabled:I=i.disabled,fillMode:O=i.fillMode,themeColor:S=i.themeColor,size:C=i.size,rounded:b=i.rounded,dir:M=i.dir,removeIcon:T=i.removeIcon,removeSvgIcon:_=i.removeSvgIcon,removable:m=i.removable}=e,E=c.useDir(r,M);a.useImperativeHandle(l,()=>({element:r.current,props:e})),a.useImperativeHandle(d,()=>l.current);const[v,s]=a.useContext(h.ChipListSelectionContext),[x,o]=a.useContext(h.ChipListFocusContext),[,R]=a.useContext(h.ChipListDataContext),y=a.useMemo(()=>e.selected||(Array.isArray(v)?v.some(t=>t===e.value):v===e.value),[e.selected,e.value,v]),F=e.role==="option"?(A=e.ariaSelected)!=null?A:y:void 0,f=a.useMemo(()=>x===e.value,[e.value,x]);a.useEffect(()=>{f&&r.current&&r.current.focus()},[f]);const K=a.useCallback(t=>{s({type:k.SELECTION_ACTION.toggle,payload:e.value,event:t})},[s,e.value]),g=a.useCallback(t=>{m&&(R({type:B.CHIP_DATA_ACTION.remove,payload:e.value,event:t}),o({type:u.FOCUS_ACTION.reset,payload:e.value,event:t}),s({type:k.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,o,s]),P=a.useCallback(t=>{switch(t.keyCode){case c.Keys.left:o({type:u.FOCUS_ACTION.prev,payload:e.value,event:t});break;case c.Keys.right:o({type:u.FOCUS_ACTION.next,payload:e.value,event:t});break;case c.Keys.enter:s({type:k.SELECTION_ACTION.toggle,payload:e.value,event:t});break;case c.Keys.delete:g(t);break}e.onKeyDown&&e.onKeyDown.call(void 0,{target:l.current,syntheticEvent:t})},[e.onKeyDown,e.value,o,s,g]),w=a.useCallback(t=>{o({payload:e.value,type:u.FOCUS_ACTION.current,event:t}),e.onFocus&&e.onFocus.call(void 0,{target:l.current,syntheticEvent:t})},[e.onFocus,e.value,o]),z=a.useCallback(t=>{o({type:u.FOCUS_ACTION.reset,payload:e.value,event:t}),e.onBlur&&e.onBlur.call(void 0,{target:l.current,syntheticEvent:t})},[e.onBlur,e.value,o]),L=c.useMouse(e,l,{onClick:K});return a.createElement("div",{...L,role:e.role||"button",id:e.value,style:e.style,ref:r,dir:E,tabIndex:c.getTabIndex(e.tabIndex,I,void 0),className:c.classNames("k-chip",{"k-rtl":E==="rtl","k-disabled":I,"k-selected":y,"k-focus":f,[`k-chip-${c.kendoThemeMaps.sizeMap[C]||C}`]:C,[`k-rounded-${c.kendoThemeMaps.roundedMap[b]||b}`]:b,[`k-chip-${O}`]:O,[`k-chip-${S}`]:!!S},e.className),"aria-pressed":e.role?void 0:y,"aria-selected":F,"aria-disabled":I||void 0,"aria-label":e.ariaLabel,"aria-describedby":e.ariaDescribedBy,"aria-keyshortcuts":m&&e.role==="option"?"Enter Delete":void 0,onFocus:w,onBlur:z,onKeyDown:P},y&&(e.selectedIcon||e.selectedSvgIcon)&&a.createElement(c.IconWrap,{className:"k-chip-icon",name:e.selectedIcon?c.toIconName(e.selectedIcon):void 0,icon:e.selectedSvgIcon,size:"small"}),(e.icon||e.svgIcon)&&a.createElement(c.IconWrap,{className:"k-chip-icon",name:e.icon?c.toIconName(e.icon):void 0,icon:e.svgIcon,size:"small"}),e.avatar&&a.createElement("div",{className:c.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||void 0,className:"k-chip-label"},e.text)),m&&a.createElement("span",{className:"k-chip-actions"},a.createElement("span",{className:c.classNames("k-chip-action","k-chip-remove-action"),onClick:g},a.createElement(c.IconWrap,{name:T?c.toIconName(T):void 0,icon:_||D.xCircleIcon,size:"small"}))))}),U={id:n.string,text:n.string,value:n.any,dir:n.oneOf(["ltr","rtl"]),removable:n.bool,removeIcon:n.string,removeIconSvg:c.svgIconPropType,disabled:n.bool,icon:n.string,svgIcon:c.svgIconPropType,selectedIcon:n.string,selectedIconSvg:c.svgIconPropType,onRemove:n.func,dataItem:n.any,selected:n.bool,ariaSelected:n.bool,ariaDescribedBy:n.string,size:n.oneOf(["small","medium","large"]),rounded:n.oneOf(["small","medium","large","full","none"]),fillMode:n.oneOf(["outline","solid"]),themeColor:n.oneOf(["base","info","success","warning","error"])},i={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};N.displayName="KendoReactChip";N.propTypes=U;exports.Chip=N;
package/Chip/Chip.mjs CHANGED
@@ -7,59 +7,60 @@
7
7
  */
8
8
  import * as a from "react";
9
9
  import l from "prop-types";
10
- import { ChipListSelectionContext as H, ChipListFocusContext as U, ChipListDataContext as W } from "./chip-list-contexts.mjs";
11
- import { useDir as j, Keys as u, useMouse as q, classNames as b, kendoThemeMaps as O, getTabIndex as G, IconWrap as I, toIconName as C, svgIconPropType as E } from "@progress/kendo-react-common";
12
- import { xCircleIcon as w } from "@progress/kendo-svg-icons";
10
+ import { ChipListSelectionContext as W, ChipListFocusContext as j, ChipListDataContext as q } from "./chip-list-contexts.mjs";
11
+ import { useDir as G, Keys as v, useMouse as J, classNames as g, kendoThemeMaps as w, getTabIndex as Q, IconWrap as I, toIconName as C, svgIconPropType as E } from "@progress/kendo-react-common";
12
+ import { xCircleIcon as z } from "@progress/kendo-svg-icons";
13
13
  import { FOCUS_ACTION as r } from "./focus-reducer.mjs";
14
- import { CHIP_DATA_ACTION as J } from "./data-reducer.mjs";
15
- import { SELECTION_ACTION as x } from "./selection-reducer.mjs";
16
- const z = a.forwardRef((e, A) => {
14
+ import { CHIP_DATA_ACTION as V } from "./data-reducer.mjs";
15
+ import { SELECTION_ACTION as N } from "./selection-reducer.mjs";
16
+ const A = a.forwardRef((e, B) => {
17
+ var O;
17
18
  const o = a.useRef(null), d = a.useRef(null), {
18
- disabled: v = c.disabled,
19
- fillMode: N = c.fillMode,
20
- themeColor: D = c.themeColor,
21
- size: y = c.size,
22
- rounded: f = c.rounded,
23
- dir: B = c.dir,
24
- removeIcon: R = c.removeIcon,
25
- removeSvgIcon: F = c.removeSvgIcon,
19
+ disabled: y = c.disabled,
20
+ fillMode: x = c.fillMode,
21
+ themeColor: S = c.themeColor,
22
+ size: f = c.size,
23
+ rounded: h = c.rounded,
24
+ dir: F = c.dir,
25
+ removeIcon: D = c.removeIcon,
26
+ removeSvgIcon: K = c.removeSvgIcon,
26
27
  removable: s = c.removable
27
- } = e, S = j(d, B);
28
+ } = e, R = G(d, F);
28
29
  a.useImperativeHandle(o, () => ({
29
30
  element: d.current,
30
31
  props: e
31
- })), a.useImperativeHandle(A, () => o.current);
32
- const [m, i] = a.useContext(H), [T, n] = a.useContext(U), [, M] = a.useContext(W), h = a.useMemo(() => e.selected || (Array.isArray(m) ? m.some((t) => t === e.value) : m === e.value), [e.selected, e.value, m]), k = a.useMemo(() => T === e.value, [e.value, T]);
32
+ })), a.useImperativeHandle(B, () => o.current);
33
+ const [m, i] = a.useContext(W), [T, n] = a.useContext(j), [, M] = a.useContext(q), u = a.useMemo(() => e.selected || (Array.isArray(m) ? m.some((t) => t === e.value) : m === e.value), [e.selected, e.value, m]), L = e.role === "option" ? (O = e.ariaSelected) != null ? O : u : void 0, b = a.useMemo(() => T === e.value, [e.value, T]);
33
34
  a.useEffect(() => {
34
- k && d.current && d.current.focus();
35
- }, [k]);
36
- const K = a.useCallback(
35
+ b && d.current && d.current.focus();
36
+ }, [b]);
37
+ const P = a.useCallback(
37
38
  (t) => {
38
- i({ type: x.toggle, payload: e.value, event: t });
39
+ i({ type: N.toggle, payload: e.value, event: t });
39
40
  },
40
41
  [i, e.value]
41
- ), g = a.useCallback(
42
+ ), k = a.useCallback(
42
43
  (t) => {
43
- s && (M({ type: J.remove, payload: e.value, event: t }), n({ type: r.reset, payload: e.value, event: t }), i({ type: x.remove, payload: e.value, event: t }), e.onRemove && e.onRemove.call(void 0, {
44
+ s && (M({ type: V.remove, payload: e.value, event: t }), n({ type: r.reset, payload: e.value, event: t }), i({ type: N.remove, payload: e.value, event: t }), e.onRemove && e.onRemove.call(void 0, {
44
45
  target: o.current,
45
46
  syntheticEvent: t
46
47
  }));
47
48
  },
48
49
  [e.onRemove, e.value, s, M, n, i]
49
- ), L = a.useCallback(
50
+ ), $ = a.useCallback(
50
51
  (t) => {
51
52
  switch (t.keyCode) {
52
- case u.left:
53
+ case v.left:
53
54
  n({ type: r.prev, payload: e.value, event: t });
54
55
  break;
55
- case u.right:
56
+ case v.right:
56
57
  n({ type: r.next, payload: e.value, event: t });
57
58
  break;
58
- case u.enter:
59
- i({ type: x.toggle, payload: e.value, event: t });
59
+ case v.enter:
60
+ i({ type: N.toggle, payload: e.value, event: t });
60
61
  break;
61
- case u.delete:
62
- g(t);
62
+ case v.delete:
63
+ k(t);
63
64
  break;
64
65
  }
65
66
  e.onKeyDown && e.onKeyDown.call(void 0, {
@@ -67,8 +68,8 @@ const z = a.forwardRef((e, A) => {
67
68
  syntheticEvent: t
68
69
  });
69
70
  },
70
- [e.onKeyDown, e.value, n, i, g]
71
- ), P = a.useCallback(
71
+ [e.onKeyDown, e.value, n, i, k]
72
+ ), _ = a.useCallback(
72
73
  (t) => {
73
74
  n({ payload: e.value, type: r.current, event: t }), e.onFocus && e.onFocus.call(void 0, {
74
75
  target: o.current,
@@ -76,7 +77,7 @@ const z = a.forwardRef((e, A) => {
76
77
  });
77
78
  },
78
79
  [e.onFocus, e.value, n]
79
- ), $ = a.useCallback(
80
+ ), H = a.useCallback(
80
81
  (t) => {
81
82
  n({ type: r.reset, payload: e.value, event: t }), e.onBlur && e.onBlur.call(void 0, {
82
83
  target: o.current,
@@ -84,40 +85,42 @@ const z = a.forwardRef((e, A) => {
84
85
  });
85
86
  },
86
87
  [e.onBlur, e.value, n]
87
- ), _ = q(e, o, { onClick: K });
88
+ ), U = J(e, o, { onClick: P });
88
89
  return /* @__PURE__ */ a.createElement(
89
90
  "div",
90
91
  {
91
- ..._,
92
+ ...U,
92
93
  role: e.role || "button",
93
94
  id: e.value,
94
95
  style: e.style,
95
96
  ref: d,
96
- dir: S,
97
- tabIndex: G(e.tabIndex, v, void 0),
98
- className: b(
97
+ dir: R,
98
+ tabIndex: Q(e.tabIndex, y, void 0),
99
+ className: g(
99
100
  "k-chip",
100
101
  {
101
- "k-rtl": S === "rtl",
102
- "k-disabled": v,
103
- "k-selected": h,
104
- "k-focus": k,
105
- [`k-chip-${O.sizeMap[y] || y}`]: y,
106
- [`k-rounded-${O.roundedMap[f] || f}`]: f,
107
- [`k-chip-${N}`]: N,
108
- [`k-chip-${D}`]: !!D
102
+ "k-rtl": R === "rtl",
103
+ "k-disabled": y,
104
+ "k-selected": u,
105
+ "k-focus": b,
106
+ [`k-chip-${w.sizeMap[f] || f}`]: f,
107
+ [`k-rounded-${w.roundedMap[h] || h}`]: h,
108
+ [`k-chip-${x}`]: x,
109
+ [`k-chip-${S}`]: !!S
109
110
  },
110
111
  e.className
111
112
  ),
112
- "aria-pressed": e.role ? void 0 : h,
113
- "aria-disabled": v,
113
+ "aria-pressed": e.role ? void 0 : u,
114
+ "aria-selected": L,
115
+ "aria-disabled": y || void 0,
116
+ "aria-label": e.ariaLabel,
114
117
  "aria-describedby": e.ariaDescribedBy,
115
- "aria-keyshortcuts": s ? "Enter Delete" : void 0,
116
- onFocus: P,
117
- onBlur: $,
118
- onKeyDown: L
118
+ "aria-keyshortcuts": s && e.role === "option" ? "Enter Delete" : void 0,
119
+ onFocus: _,
120
+ onBlur: H,
121
+ onKeyDown: $
119
122
  },
120
- h && (e.selectedIcon || e.selectedSvgIcon) && /* @__PURE__ */ a.createElement(
123
+ u && (e.selectedIcon || e.selectedSvgIcon) && /* @__PURE__ */ a.createElement(
121
124
  I,
122
125
  {
123
126
  className: "k-chip-icon",
@@ -138,7 +141,7 @@ const z = a.forwardRef((e, A) => {
138
141
  e.avatar && /* @__PURE__ */ a.createElement(
139
142
  "div",
140
143
  {
141
- className: b(
144
+ className: g(
142
145
  "k-chip-avatar",
143
146
  "k-avatar",
144
147
  e.avatar.rounded && `k-rounded-${e.avatar.rounded}`
@@ -147,17 +150,17 @@ const z = a.forwardRef((e, A) => {
147
150
  },
148
151
  /* @__PURE__ */ a.createElement("span", { className: "k-avatar-image" }, /* @__PURE__ */ a.createElement("img", { src: e.avatar.image, alt: e.avatar.imageAlt }))
149
152
  ),
150
- /* @__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)),
151
- s && /* @__PURE__ */ a.createElement("span", { className: "k-chip-actions" }, /* @__PURE__ */ a.createElement("span", { className: b("k-chip-action", "k-chip-remove-action"), onClick: g }, /* @__PURE__ */ a.createElement(
153
+ /* @__PURE__ */ a.createElement("span", { className: "k-chip-content" }, e.children !== void 0 ? e.children : e.text && /* @__PURE__ */ a.createElement("span", { "aria-label": e.ariaLabel || void 0, className: "k-chip-label" }, e.text)),
154
+ s && /* @__PURE__ */ a.createElement("span", { className: "k-chip-actions" }, /* @__PURE__ */ a.createElement("span", { className: g("k-chip-action", "k-chip-remove-action"), onClick: k }, /* @__PURE__ */ a.createElement(
152
155
  I,
153
156
  {
154
- name: R ? C(R) : void 0,
155
- icon: F || w,
157
+ name: D ? C(D) : void 0,
158
+ icon: K || z,
156
159
  size: "small"
157
160
  }
158
161
  )))
159
162
  );
160
- }), Q = {
163
+ }), X = {
161
164
  id: l.string,
162
165
  text: l.string,
163
166
  value: l.any,
@@ -173,6 +176,7 @@ const z = a.forwardRef((e, A) => {
173
176
  onRemove: l.func,
174
177
  dataItem: l.any,
175
178
  selected: l.bool,
179
+ ariaSelected: l.bool,
176
180
  ariaDescribedBy: l.string,
177
181
  size: l.oneOf(["small", "medium", "large"]),
178
182
  rounded: l.oneOf(["small", "medium", "large", "full", "none"]),
@@ -182,15 +186,15 @@ const z = a.forwardRef((e, A) => {
182
186
  disabled: !1,
183
187
  removable: !1,
184
188
  removeIcon: "k-i-x-circle",
185
- removeSvgIcon: w,
189
+ removeSvgIcon: z,
186
190
  dir: "ltr",
187
191
  size: void 0,
188
192
  rounded: void 0,
189
193
  fillMode: void 0,
190
194
  themeColor: void 0
191
195
  };
192
- z.displayName = "KendoReactChip";
193
- z.propTypes = Q;
196
+ A.displayName = "KendoReactChip";
197
+ A.propTypes = X;
194
198
  export {
195
- z as Chip
199
+ A as Chip
196
200
  };
package/Chip/ChipList.js CHANGED
@@ -5,4 +5,4 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react"),t=require("prop-types"),p=require("@progress/kendo-react-common"),X=require("./selection-reducer.js"),Y=require("./focus-reducer.js"),Z=require("./data-reducer.js"),S=require("./Chip.js"),D=require("./chip-list-contexts.js");function V(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=V(W),ee=(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,o]=a.useState(e);return[l,c=>{const u=X.selectionReducer(i.state||l,{...c,...i});n&&n(u,c.event),i.selection!=="none"&&o(u)}]},te=e=>{const[i,n]=a.useState(null);return[i,o=>{const h=Y.focusReducer(o.payload,{...o,...e});n(h)}]},ae=(e,i,n)=>{const[l,o]=a.useState(e);return[l,c=>{const u=Z.dataReducer(i.state||l,{...c,...i});n&&n(u,c.event),o(u)}]},x=a.forwardRef((e,i)=>{const n=a.useRef(null),l=a.useRef(null),{id:o,style:h,tabIndex:c,className:u,ariaDescribedBy:T,ariaLabelledBy:q,ariaLabel:j,value:b,defaultData:z=r.defaultData,chip:R=r.chip,disabled:v=r.disabled,size:y=r.size,defaultValue:E=r.defaultValue,selection:O=r.selection,valueField:f=r.valueField,textField:F=r.textField,dir:N=r.dir,onChange:C,onDataChange:g}=e,L=p.useDir(l,N),w=a.useMemo(()=>R||S.Chip,[R,S.Chip]);a.useImperativeHandle(n,()=>({element:l.current,props:e})),a.useImperativeHandle(i,()=>n.current);const A=a.useCallback((s,d)=>{C&&n.current&&C.call(void 0,{value:s,target:n.current,syntheticEvent:d})},[C]),[k,B]=ee(b||E,{selection:O,state:b},A),_=a.useCallback((s,d)=>{g&&n.current&&g.call(void 0,{value:s,target:n.current,syntheticEvent:d})},[g]),[I,G]=ae(e.data||z,{state:e.data,valueField:f},_),M=a.useCallback((s,d)=>(s.push(d[f]),s),[f]),m=a.useMemo(()=>e.data||I,[e.data,I]),H=a.useMemo(()=>b||k,[b,k]),K=a.useMemo(()=>m.reduce(M,[]),[m,M]),P=a.useCallback(s=>p.getter(f)(s),[f]),$=a.useCallback(s=>p.getter(F)(s),[F]),[J,Q]=te({items:K}),U=p.useMouse(e,n);return a.createElement(D.ChipListSelectionContext.Provider,{value:[H,B]},a.createElement(D.ChipListFocusContext.Provider,{value:[J,Q]},a.createElement(D.ChipListDataContext.Provider,{value:[m,G]},a.createElement("div",{ref:l,...U,role:v?void 0:"listbox",id:o,dir:L,style:h,tabIndex:p.getTabIndex(c,v,void 0),className:p.classNames("k-chip-list",{"k-rtl":L==="rtl","k-disabled":v,[`k-chip-list-${p.kendoThemeMaps.sizeMap[y]||y}`]:y},u),"aria-label":j,"aria-labelledby":q,"aria-describedby":T,"aria-orientation":"horizontal","aria-multiselectable":O==="multiple"},m.map((s,d)=>a.createElement(w,{role:"option",dataItem:s,size:y,key:[P(s),d].join("-"),text:$(s),value:P(s),ariaLabel:s.ariaLabel,svgIcon:s.svgIcon||void 0}))))))}),ne={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(["small","medium","large"])},r={chip:S.Chip,size:void 0,disabled:!1,defaultValue:null,defaultData:[],dir:"ltr",selection:"none",textField:"text",valueField:"value"};x.displayName="KendoReactChipList";x.propTypes=ne;exports.ChipList=x;
8
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react"),t=require("prop-types"),p=require("@progress/kendo-react-common"),X=require("./selection-reducer.js"),Y=require("./focus-reducer.js"),Z=require("./data-reducer.js"),S=require("./Chip.js"),D=require("./chip-list-contexts.js");function V(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=V(W),ee=(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,o]=a.useState(e);return[l,c=>{const u=X.selectionReducer(i.state||l,{...c,...i});n&&n(u,c.event),i.selection!=="none"&&o(u)}]},te=e=>{const[i,n]=a.useState(null);return[i,o=>{const h=Y.focusReducer(o.payload,{...o,...e});n(h)}]},ae=(e,i,n)=>{const[l,o]=a.useState(e);return[l,c=>{const u=Z.dataReducer(i.state||l,{...c,...i});n&&n(u,c.event),o(u)}]},x=a.forwardRef((e,i)=>{const n=a.useRef(null),l=a.useRef(null),{id:o,style:h,tabIndex:c,className:u,ariaDescribedBy:T,ariaLabelledBy:q,ariaLabel:j,value:b,defaultData:z=r.defaultData,chip:R=r.chip,disabled:m=r.disabled,size:v=r.size,defaultValue:E=r.defaultValue,selection:O=r.selection,valueField:f=r.valueField,textField:F=r.textField,dir:N=r.dir,onChange:C,onDataChange:g}=e,L=p.useDir(l,N),w=a.useMemo(()=>R||S.Chip,[R,S.Chip]);a.useImperativeHandle(n,()=>({element:l.current,props:e})),a.useImperativeHandle(i,()=>n.current);const A=a.useCallback((s,d)=>{C&&n.current&&C.call(void 0,{value:s,target:n.current,syntheticEvent:d})},[C]),[k,B]=ee(b||E,{selection:O,state:b},A),_=a.useCallback((s,d)=>{g&&n.current&&g.call(void 0,{value:s,target:n.current,syntheticEvent:d})},[g]),[I,G]=ae(e.data||z,{state:e.data,valueField:f},_),M=a.useCallback((s,d)=>(s.push(d[f]),s),[f]),y=a.useMemo(()=>e.data||I,[e.data,I]),H=a.useMemo(()=>b||k,[b,k]),K=a.useMemo(()=>y.reduce(M,[]),[y,M]),P=a.useCallback(s=>p.getter(f)(s),[f]),$=a.useCallback(s=>p.getter(F)(s),[F]),[J,Q]=te({items:K}),U=p.useMouse(e,n);return a.createElement(D.ChipListSelectionContext.Provider,{value:[H,B]},a.createElement(D.ChipListFocusContext.Provider,{value:[J,Q]},a.createElement(D.ChipListDataContext.Provider,{value:[y,G]},a.createElement("div",{ref:l,...U,role:m?void 0:"listbox",id:o,dir:L,style:h,tabIndex:p.getTabIndex(c,m,void 0),className:p.classNames("k-chip-list",{"k-rtl":L==="rtl","k-disabled":m,[`k-chip-list-${p.kendoThemeMaps.sizeMap[v]||v}`]:v},u),"aria-label":j,"aria-labelledby":q,"aria-describedby":T,"aria-orientation":"horizontal","aria-multiselectable":O==="multiple"||void 0},y.map((s,d)=>a.createElement(w,{role:"option",dataItem:s,size:v,key:[P(s),d].join("-"),text:$(s),value:P(s),ariaLabel:s.ariaLabel,svgIcon:s.svgIcon||void 0}))))))}),ne={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(["small","medium","large"])},r={chip:S.Chip,size:void 0,disabled:!1,defaultValue:null,defaultData:[],dir:"ltr",selection:"none",textField:"text",valueField:"value"};x.displayName="KendoReactChipList";x.propTypes=ne;exports.ChipList=x;
package/Chip/ChipList.mjs CHANGED
@@ -117,7 +117,7 @@ const ie = (a, i, s) => {
117
117
  "aria-labelledby": T,
118
118
  "aria-describedby": M,
119
119
  "aria-orientation": "horizontal",
120
- "aria-multiselectable": x === "multiple"
120
+ "aria-multiselectable": x === "multiple" || void 0
121
121
  },
122
122
  v.map((n, u) => /* @__PURE__ */ t.createElement(
123
123
  A,