@progress/kendo-react-buttons 9.5.0 → 10.0.0-develop.2

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.
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 D=require("react"),s=require("prop-types"),e=require("@progress/kendo-react-common"),H=require("./package-metadata.js");function K(n){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const o in n)if(o!=="default"){const l=Object.getOwnPropertyDescriptor(n,o);Object.defineProperty(c,o,l.get?l:{enumerable:!0,get:()=>n[o]})}}return c.default=n,Object.freeze(c)}const t=K(D);function W({imageUrl:n,name:c,iconClass:o,svgIcon:l,imageAlt:u,buttonClasses:a}){return n?t.createElement("img",{role:"presentation",className:e.classNames(e.uButton.icon({c:a})),alt:u,src:n}):c||l?t.createElement(e.IconWrap,{className:e.classNames(e.uButton.icon({c:a})),name:c,icon:l}):o?t.createElement("span",{role:"presentation",className:e.classNames(e.uButton.icon({c:a}),o)}):null}const p=t.forwardRef((n,c)=>{e.validatePackage(H.packageMetadata);const{children:o,togglable:l,dir:u,disabled:a,selected:i,icon:b,iconClass:v,svgIcon:y,imageUrl:N,imageAlt:M,className:I,startIcon:h,endIcon:B,onClick:C,size:P=f.size,rounded:S=f.rounded,fillMode:T=f.fillMode,themeColor:j=f.themeColor,...z}=n,q=()=>{l&&i===void 0&&(d.current=!r,E(!r))},w=g=>{q(),C&&C.call(void 0,g)},d=t.useRef(),k=t.useRef(null),[r,E]=t.useState(l===!0&&i===!0),A=y!==void 0||b!==void 0||v!==void 0||N!==void 0,U=o!==void 0,_=e.useUnstyled(),O=n.unstyled||_,m=O&&O.uButton;t.useImperativeHandle(c,()=>({element:k.current,selected:d.current!==void 0?d.current:r})),t.useMemo(()=>{l&&i!==void 0&&i!==r&&E(i)},[l,i]),t.useEffect(()=>{d.current=void 0},[r]);const x=W({name:b,svgIcon:y,iconClass:v,imageUrl:N,imageAlt:M,buttonClasses:m}),R=g=>t.cloneElement(g,{className:e.classNames(e.uButton.icon({c:m}))});return t.createElement("button",{ref:k,"aria-pressed":l?r:void 0,...z,dir:u,disabled:a,onClick:w,className:e.classNames(e.uButton.wrapper({c:m,isRtl:u==="rtl",selected:r,disabled:a,size:P,fillMode:T,rounded:S,themeColor:j,iconButton:!U&&A}),I)},h&&R(h),x,o&&t.createElement("span",{className:e.classNames(e.uButton.text({c:m}))},o),B&&R(B))}),f={togglable:!1,size:"medium",rounded:"medium",fillMode:"solid",themeColor:"base"};p.displayName="KendoReactButton";p.propTypes={children:s.node,selected:s.bool,togglable:s.bool,icon:s.string,svgIcon:e.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","clear"]),themeColor:s.oneOf([null,"base","primary","secondary","tertiary","info","success","warning","error","dark","light","inverse"])};exports.Button=p;
8
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const D=require("react"),s=require("prop-types"),e=require("@progress/kendo-react-common");function H(n){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const o in n)if(o!=="default"){const l=Object.getOwnPropertyDescriptor(n,o);Object.defineProperty(c,o,l.get?l:{enumerable:!0,get:()=>n[o]})}}return c.default=n,Object.freeze(c)}const t=H(D);function K({imageUrl:n,name:c,iconClass:o,svgIcon:l,imageAlt:u,buttonClasses:a}){return n?t.createElement("img",{role:"presentation",className:e.classNames(e.uButton.icon({c:a})),alt:u,src:n}):c||l?t.createElement(e.IconWrap,{className:e.classNames(e.uButton.icon({c:a})),name:c,icon:l}):o?t.createElement("span",{role:"presentation",className:e.classNames(e.uButton.icon({c:a}),o)}):null}const p=t.forwardRef((n,c)=>{const{children:o,togglable:l,dir:u,disabled:a,selected:i,icon:b,iconClass:v,svgIcon:y,imageUrl:N,imageAlt:k,className:M,startIcon:h,endIcon:B,onClick:C,size:S=f.size,rounded:P=f.rounded,fillMode:T=f.fillMode,themeColor:j=f.themeColor,...z}=n,w=()=>{l&&i===void 0&&(d.current=!r,O(!r))},A=g=>{w(),C&&C.call(void 0,g)},d=t.useRef(),E=t.useRef(null),[r,O]=t.useState(l===!0&&i===!0),q=y!==void 0||b!==void 0||v!==void 0||N!==void 0,U=o!==void 0,_=e.useUnstyled(),R=n.unstyled||_,m=R&&R.uButton;t.useImperativeHandle(c,()=>({element:E.current,selected:d.current!==void 0?d.current:r})),t.useMemo(()=>{l&&i!==void 0&&i!==r&&O(i)},[l,i]),t.useEffect(()=>{d.current=void 0},[r]);const x=K({name:b,svgIcon:y,iconClass:v,imageUrl:N,imageAlt:k,buttonClasses:m}),I=g=>t.cloneElement(g,{className:e.classNames(e.uButton.icon({c:m}))});return t.createElement("button",{ref:E,"aria-pressed":l?r:void 0,...z,dir:u,disabled:a,onClick:A,className:e.classNames(e.uButton.wrapper({c:m,isRtl:u==="rtl",selected:r,disabled:a,size:S,fillMode:T,rounded:P,themeColor:j,iconButton:!U&&q}),M)},h&&I(h),x,o&&t.createElement("span",{className:e.classNames(e.uButton.text({c:m}))},o),B&&I(B))}),f={togglable:!1,size:"medium",rounded:"medium",fillMode:"solid",themeColor:"base"};p.displayName="KendoReactButton";p.propTypes={children:s.node,selected:s.bool,togglable:s.bool,icon:s.string,svgIcon:e.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","clear"]),themeColor:s.oneOf([null,"base","primary","secondary","tertiary","info","success","warning","error","dark","light","inverse"])};exports.Button=p;
package/Button.mjs CHANGED
@@ -7,27 +7,25 @@
7
7
  */
8
8
  import * as e from "react";
9
9
  import t from "prop-types";
10
- import { validatePackage as q, useUnstyled as D, classNames as c, uButton as i, svgIconPropType as F, IconWrap as G } from "@progress/kendo-react-common";
11
- import { packageMetadata as J } from "./package-metadata.mjs";
12
- function L({ imageUrl: a, name: d, iconClass: o, svgIcon: n, imageAlt: m, buttonClasses: r }) {
10
+ import { useUnstyled as q, classNames as c, uButton as i, svgIconPropType as D, IconWrap as F } from "@progress/kendo-react-common";
11
+ function G({ imageUrl: a, name: d, iconClass: o, svgIcon: n, imageAlt: u, buttonClasses: s }) {
13
12
  return a ? /* @__PURE__ */ e.createElement(
14
13
  "img",
15
14
  {
16
15
  role: "presentation",
17
- className: c(i.icon({ c: r })),
18
- alt: m,
16
+ className: c(i.icon({ c: s })),
17
+ alt: u,
19
18
  src: a
20
19
  }
21
- ) : d || n ? /* @__PURE__ */ e.createElement(G, { className: c(i.icon({ c: r })), name: d, icon: n }) : o ? /* @__PURE__ */ e.createElement("span", { role: "presentation", className: c(i.icon({ c: r }), o) }) : null;
20
+ ) : d || n ? /* @__PURE__ */ e.createElement(F, { className: c(i.icon({ c: s })), name: d, icon: n }) : o ? /* @__PURE__ */ e.createElement("span", { role: "presentation", className: c(i.icon({ c: s }), o) }) : null;
22
21
  }
23
- const B = e.forwardRef((a, d) => {
24
- q(J);
22
+ const M = e.forwardRef((a, d) => {
25
23
  const {
26
24
  children: o,
27
25
  togglable: n,
28
- dir: m,
29
- disabled: r,
30
- selected: s,
26
+ dir: u,
27
+ disabled: s,
28
+ selected: r,
31
29
  icon: v,
32
30
  iconClass: h,
33
31
  svgIcon: y,
@@ -38,59 +36,59 @@ const B = e.forwardRef((a, d) => {
38
36
  endIcon: E,
39
37
  onClick: N,
40
38
  size: O = p.size,
41
- rounded: P = p.rounded,
42
- fillMode: T = p.fillMode,
43
- themeColor: w = p.themeColor,
44
- ...x
39
+ rounded: T = p.rounded,
40
+ fillMode: w = p.fillMode,
41
+ themeColor: x = p.themeColor,
42
+ ...P
45
43
  } = a, S = () => {
46
- n && s === void 0 && (u.current = !l, R(!l));
44
+ n && r === void 0 && (m.current = !l, R(!l));
47
45
  }, U = (g) => {
48
46
  S(), N && N.call(void 0, g);
49
- }, u = e.useRef(), I = e.useRef(null), [l, R] = e.useState(n === !0 && s === !0), H = y !== void 0 || v !== void 0 || h !== void 0 || b !== void 0, K = o !== void 0, W = D(), k = a.unstyled || W, f = k && k.uButton;
47
+ }, m = e.useRef(), I = e.useRef(null), [l, R] = e.useState(n === !0 && r === !0), H = y !== void 0 || v !== void 0 || h !== void 0 || b !== void 0, K = o !== void 0, W = q(), k = a.unstyled || W, f = k && k.uButton;
50
48
  e.useImperativeHandle(d, () => ({
51
49
  element: I.current,
52
- selected: u.current !== void 0 ? u.current : l
50
+ selected: m.current !== void 0 ? m.current : l
53
51
  })), e.useMemo(() => {
54
- n && s !== void 0 && s !== l && R(s);
55
- }, [n, s]), e.useEffect(() => {
56
- u.current = void 0;
52
+ n && r !== void 0 && r !== l && R(r);
53
+ }, [n, r]), e.useEffect(() => {
54
+ m.current = void 0;
57
55
  }, [l]);
58
- const j = L({
56
+ const j = G({
59
57
  name: v,
60
58
  svgIcon: y,
61
59
  iconClass: h,
62
60
  imageUrl: b,
63
61
  imageAlt: z,
64
62
  buttonClasses: f
65
- }), M = (g) => e.cloneElement(g, { className: c(i.icon({ c: f })) });
63
+ }), B = (g) => e.cloneElement(g, { className: c(i.icon({ c: f })) });
66
64
  return /* @__PURE__ */ e.createElement(
67
65
  "button",
68
66
  {
69
67
  ref: I,
70
68
  "aria-pressed": n ? l : void 0,
71
- ...x,
72
- dir: m,
73
- disabled: r,
69
+ ...P,
70
+ dir: u,
71
+ disabled: s,
74
72
  onClick: U,
75
73
  className: c(
76
74
  i.wrapper({
77
75
  c: f,
78
- isRtl: m === "rtl",
76
+ isRtl: u === "rtl",
79
77
  selected: l,
80
- disabled: r,
78
+ disabled: s,
81
79
  size: O,
82
- fillMode: T,
83
- rounded: P,
84
- themeColor: w,
80
+ fillMode: w,
81
+ rounded: T,
82
+ themeColor: x,
85
83
  iconButton: !K && H
86
84
  }),
87
85
  A
88
86
  )
89
87
  },
90
- C && M(C),
88
+ C && B(C),
91
89
  j,
92
90
  o && /* @__PURE__ */ e.createElement("span", { className: c(i.text({ c: f })) }, o),
93
- E && M(E)
91
+ E && B(E)
94
92
  );
95
93
  }), p = {
96
94
  togglable: !1,
@@ -99,13 +97,13 @@ const B = e.forwardRef((a, d) => {
99
97
  fillMode: "solid",
100
98
  themeColor: "base"
101
99
  };
102
- B.displayName = "KendoReactButton";
103
- B.propTypes = {
100
+ M.displayName = "KendoReactButton";
101
+ M.propTypes = {
104
102
  children: t.node,
105
103
  selected: t.bool,
106
104
  togglable: t.bool,
107
105
  icon: t.string,
108
- svgIcon: F,
106
+ svgIcon: D,
109
107
  iconClass: t.string,
110
108
  imageUrl: t.string,
111
109
  imageAlt: t.string,
@@ -129,5 +127,5 @@ B.propTypes = {
129
127
  ])
130
128
  };
131
129
  export {
132
- B as Button
130
+ M as Button
133
131
  };
package/ButtonGroup.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 R=require("react"),s=require("prop-types"),u=require("@progress/kendo-react-common"),w=require("./package-metadata.js");function S(t){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(l,r,a.get?a:{enumerable:!0,get:()=>t[r]})}}return l.default=t,Object.freeze(l)}const n=S(R),B=t=>{u.validatePackage(w.packageMetadata);const{children:l,className:r,dir:a,disabled:m,width:p}=t,P=u.useUnstyled(),g=t.unstyled||P,y=g&&g.uButtonGroup,j=e=>{const i=n.Children.count(e),d=a!==void 0?a==="rtl":b.current&&getComputedStyle(b.current).direction==="rtl"||!1;return n.Children.map(e,(o,c)=>{if(n.isValidElement(o)){const N=c===i-1,O=d,G=u.classNames(o.props.className,u.uButtonGroup.position({c:y,start:O?N:c===0,end:O?c===0:N}));return k(o,G)}return o})},k=(e,i)=>{const d={...p?{width:p}:{},...e.props.style||{}},o=m||e.props.disabled,c={...e.props,...i?{className:i}:{},...Object.keys(d).length?{style:d}:{},...o!==void 0?{disabled:o}:{}};return n.Children.count(e.props.children)>0?n.cloneElement(e,c,e.props.children):n.cloneElement(e,c)},b=n.useRef(null),v=j(l),f=u.classNames(u.uButtonGroup.wrapper({c:y,stretched:!!p,disabled:m}),r),C={className:f,style:{width:`${p}`},dir:a,role:"group","aria-disabled":m};return n.createElement("div",{ref:b,...C,className:f},v)};B.propTypes={children:s.oneOfType([s.arrayOf(s.element),s.element]),className:s.string,disabled:s.bool,width:s.string,dir:s.string};exports.ButtonGroup=B;
8
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react"),s=require("prop-types"),a=require("@progress/kendo-react-common");function S(t){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(l,r,c.get?c:{enumerable:!0,get:()=>t[r]})}}return l.default=t,Object.freeze(l)}const n=S(w),B=t=>{const{children:l,className:r,dir:c,disabled:m,width:p}=t,j=a.useUnstyled(),y=t.unstyled||j,f=y&&y.uButtonGroup,C=e=>{const i=n.Children.count(e),d=c!==void 0?c==="rtl":b.current&&getComputedStyle(b.current).direction==="rtl"||!1;return n.Children.map(e,(o,u)=>{if(n.isValidElement(o)){const N=u===i-1,O=d,v=a.classNames(o.props.className,a.uButtonGroup.position({c:f,start:O?N:u===0,end:O?u===0:N}));return G(o,v)}return o})},G=(e,i)=>{const d={...p?{width:p}:{},...e.props.style||{}},o=m||e.props.disabled,u={...e.props,...i?{className:i}:{},...Object.keys(d).length?{style:d}:{},...o!==void 0?{disabled:o}:{}};return n.Children.count(e.props.children)>0?n.cloneElement(e,u,e.props.children):n.cloneElement(e,u)},b=n.useRef(null),P=C(l),g=a.classNames(a.uButtonGroup.wrapper({c:f,stretched:!!p,disabled:m}),r),R={className:g,style:{width:`${p}`},dir:c,role:"group","aria-disabled":m};return n.createElement("div",{ref:b,...R,className:g},P)};B.propTypes={children:s.oneOfType([s.arrayOf(s.element),s.element]),className:s.string,disabled:s.bool,width:s.string,dir:s.string};exports.ButtonGroup=B;
package/ButtonGroup.mjs CHANGED
@@ -7,52 +7,50 @@
7
7
  */
8
8
  import * as e from "react";
9
9
  import s from "prop-types";
10
- import { validatePackage as k, useUnstyled as O, classNames as g, uButtonGroup as N } from "@progress/kendo-react-common";
11
- import { packageMetadata as T } from "./package-metadata.mjs";
12
- const h = (i) => {
13
- k(T);
14
- const { children: B, className: C, dir: c, disabled: p, width: n } = i, v = O(), d = i.unstyled || v, m = d && d.uButtonGroup, w = (t) => {
15
- const a = e.Children.count(t), l = c !== void 0 ? c === "rtl" : u.current && getComputedStyle(u.current).direction === "rtl" || !1;
16
- return e.Children.map(t, (o, r) => {
10
+ import { useUnstyled as P, classNames as g, uButtonGroup as N } from "@progress/kendo-react-common";
11
+ const T = (i) => {
12
+ const { children: B, className: C, dir: c, disabled: p, width: r } = i, w = P(), d = i.unstyled || w, m = d && d.uButtonGroup, E = (t) => {
13
+ const l = e.Children.count(t), a = c !== void 0 ? c === "rtl" : u.current && getComputedStyle(u.current).direction === "rtl" || !1;
14
+ return e.Children.map(t, (o, n) => {
17
15
  if (e.isValidElement(o)) {
18
- const b = r === a - 1, f = l, R = g(
16
+ const b = n === l - 1, f = a, O = g(
19
17
  o.props.className,
20
18
  N.position({
21
19
  c: m,
22
- start: f ? b : r === 0,
23
- end: f ? r === 0 : b
20
+ start: f ? b : n === 0,
21
+ end: f ? n === 0 : b
24
22
  })
25
23
  );
26
- return E(o, R);
24
+ return G(o, O);
27
25
  }
28
26
  return o;
29
27
  });
30
- }, E = (t, a) => {
31
- const l = { ...n ? { width: n } : {}, ...t.props.style || {} }, o = p || t.props.disabled, r = {
28
+ }, G = (t, l) => {
29
+ const a = { ...r ? { width: r } : {}, ...t.props.style || {} }, o = p || t.props.disabled, n = {
32
30
  ...t.props,
33
- ...a ? { className: a } : {},
34
- ...Object.keys(l).length ? { style: l } : {},
31
+ ...l ? { className: l } : {},
32
+ ...Object.keys(a).length ? { style: a } : {},
35
33
  ...o !== void 0 ? { disabled: o } : {}
36
34
  };
37
- return e.Children.count(t.props.children) > 0 ? e.cloneElement(t, r, t.props.children) : e.cloneElement(t, r);
38
- }, u = e.useRef(null), G = w(B), y = g(
35
+ return e.Children.count(t.props.children) > 0 ? e.cloneElement(t, n, t.props.children) : e.cloneElement(t, n);
36
+ }, u = e.useRef(null), R = E(B), y = g(
39
37
  N.wrapper({
40
38
  c: m,
41
- stretched: !!n,
39
+ stretched: !!r,
42
40
  disabled: p
43
41
  }),
44
42
  C
45
- ), P = {
43
+ ), v = {
46
44
  className: y,
47
- style: { width: `${n}` },
45
+ style: { width: `${r}` },
48
46
  dir: c,
49
47
  // Accessibility properties
50
48
  role: "group",
51
49
  "aria-disabled": p
52
50
  };
53
- return /* @__PURE__ */ e.createElement("div", { ref: u, ...P, className: y }, G);
51
+ return /* @__PURE__ */ e.createElement("div", { ref: u, ...v, className: y }, R);
54
52
  };
55
- h.propTypes = {
53
+ T.propTypes = {
56
54
  children: s.oneOfType([s.arrayOf(s.element), s.element]),
57
55
  className: s.string,
58
56
  disabled: s.bool,
@@ -60,5 +58,5 @@ h.propTypes = {
60
58
  dir: s.string
61
59
  };
62
60
  export {
63
- h as ButtonGroup
61
+ T as ButtonGroup
64
62
  };
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 w=require("react"),c=require("prop-types"),h=require("./chip-list-contexts.js"),t=require("@progress/kendo-react-common"),M=require("@progress/kendo-svg-icons"),y=require("./focus-reducer.js"),z=require("./data-reducer.js"),N=require("./selection-reducer.js"),B=require("../package-metadata.js");function L(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=L(w),O=a.forwardRef((e,d)=>{t.validatePackage(B.packageMetadata);const l=a.useRef(null),i=a.useRef(null),{disabled:I=o.disabled,fillMode:u=o.fillMode,themeColor:E=o.themeColor,size:g=o.size,rounded:k=o.rounded,dir:D=o.dir,removeIcon:T=o.removeIcon,removeSvgIcon:A=o.removeSvgIcon,removable:m=o.removable}=e,S=t.useDir(i,D);a.useImperativeHandle(l,()=>({element:i.current,props:e})),a.useImperativeHandle(d,()=>l.current);const[v,s]=a.useContext(h.ChipListSelectionContext),[x,r]=a.useContext(h.ChipListFocusContext),[,R]=a.useContext(h.ChipListDataContext),f=a.useMemo(()=>e.selected||(Array.isArray(v)?v.some(n=>n===e.value):v===e.value),[e.selected,e.value,v]),C=a.useMemo(()=>x===e.value,[e.value,x]);a.useEffect(()=>{C&&i.current&&i.current.focus()},[C]);const _=a.useCallback(n=>{s({type:N.SELECTION_ACTION.toggle,payload:e.value,event:n})},[s,e.value]),b=a.useCallback(n=>{m&&(R({type:z.CHIP_DATA_ACTION.remove,payload:e.value,event:n}),r({type:y.FOCUS_ACTION.reset,payload:e.value,event:n}),s({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,r,s]),F=a.useCallback(n=>{switch(n.keyCode){case t.Keys.left:r({type:y.FOCUS_ACTION.prev,payload:e.value,event:n});break;case t.Keys.right:r({type:y.FOCUS_ACTION.next,payload:e.value,event:n});break;case t.Keys.enter:s({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,r,s,b]),P=a.useCallback(n=>{r({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,r]),K=a.useCallback(n=>{e.onBlur&&e.onBlur.call(void 0,{target:l.current,syntheticEvent:n})},[e.onBlur]),q=t.useMouse(e,l,{onClick:_});return a.createElement("div",{...q,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":f,"k-focus":C,[`k-chip-${t.kendoThemeMaps.sizeMap[g]||g}`]:g,[`k-rounded-${t.kendoThemeMaps.roundedMap[k]||k}`]:k,[`k-chip-${u}`]:u,[`k-chip-${u}-${E}`]:!!(u&&E)},e.className),"aria-pressed":e.role?void 0:f,"aria-disabled":I,"aria-describedby":e.ariaDescribedBy,"aria-keyshortcuts":m?"Enter Delete":void 0,onFocus:P,onBlur:K,onKeyDown:F},f&&(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)),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:A||M.xCircleIcon,size:"small"}))))}),$={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([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:M.xCircleIcon,dir:"ltr",size:"medium",rounded:"medium",fillMode:"solid",themeColor:"base"};O.displayName="KendoReactChip";O.propTypes=$;exports.Chip=O;
8
+ "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;
package/Chip/Chip.mjs CHANGED
@@ -8,47 +8,45 @@
8
8
  import * as a from "react";
9
9
  import l from "prop-types";
10
10
  import { ChipListSelectionContext as H, ChipListFocusContext as U, ChipListDataContext as W } from "./chip-list-contexts.mjs";
11
- import { validatePackage as j, useDir as q, Keys as u, useMouse as G, getTabIndex as J, classNames as T, kendoThemeMaps as O, IconWrap as I, toIconName as C, svgIconPropType as E } from "@progress/kendo-react-common";
11
+ 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";
12
12
  import { xCircleIcon as w } from "@progress/kendo-svg-icons";
13
13
  import { FOCUS_ACTION as v } from "./focus-reducer.mjs";
14
- import { CHIP_DATA_ACTION as Q } from "./data-reducer.mjs";
14
+ import { CHIP_DATA_ACTION as J } from "./data-reducer.mjs";
15
15
  import { SELECTION_ACTION as x } from "./selection-reducer.mjs";
16
- import { packageMetadata as V } from "../package-metadata.mjs";
17
16
  const z = a.forwardRef((e, A) => {
18
- j(V);
19
17
  const c = a.useRef(null), d = a.useRef(null), {
20
18
  disabled: y = n.disabled,
21
19
  fillMode: r = n.fillMode,
22
20
  themeColor: N = n.themeColor,
23
21
  size: f = n.size,
24
- rounded: k = n.rounded,
22
+ rounded: h = n.rounded,
25
23
  dir: B = n.dir,
26
24
  removeIcon: D = n.removeIcon,
27
25
  removeSvgIcon: F = n.removeSvgIcon,
28
26
  removable: s = n.removable
29
- } = e, M = q(d, B);
27
+ } = e, R = j(d, B);
30
28
  a.useImperativeHandle(c, () => ({
31
29
  element: d.current,
32
30
  props: e
33
31
  })), a.useImperativeHandle(A, () => c.current);
34
- const [m, i] = a.useContext(H), [R, o] = a.useContext(U), [, S] = 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]), g = a.useMemo(() => R === e.value, [e.value, R]);
32
+ 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]);
35
33
  a.useEffect(() => {
36
- g && d.current && d.current.focus();
37
- }, [g]);
34
+ b && d.current && d.current.focus();
35
+ }, [b]);
38
36
  const K = a.useCallback(
39
37
  (t) => {
40
38
  i({ type: x.toggle, payload: e.value, event: t });
41
39
  },
42
40
  [i, e.value]
43
- ), b = a.useCallback(
41
+ ), g = a.useCallback(
44
42
  (t) => {
45
- s && (S({ type: Q.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, {
43
+ 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, {
46
44
  target: c.current,
47
45
  syntheticEvent: t
48
46
  }));
49
47
  },
50
- [e.onRemove, e.value, s, S, o, i]
51
- ), P = a.useCallback(
48
+ [e.onRemove, e.value, s, T, o, i]
49
+ ), $ = a.useCallback(
52
50
  (t) => {
53
51
  switch (t.keyCode) {
54
52
  case u.left:
@@ -61,7 +59,7 @@ const z = a.forwardRef((e, A) => {
61
59
  i({ type: x.toggle, payload: e.value, event: t });
62
60
  break;
63
61
  case u.delete:
64
- b(t);
62
+ g(t);
65
63
  break;
66
64
  }
67
65
  e.onKeyDown && e.onKeyDown.call(void 0, {
@@ -69,8 +67,8 @@ const z = a.forwardRef((e, A) => {
69
67
  syntheticEvent: t
70
68
  });
71
69
  },
72
- [e.onKeyDown, e.value, o, i, b]
73
- ), $ = a.useCallback(
70
+ [e.onKeyDown, e.value, o, i, g]
71
+ ), L = a.useCallback(
74
72
  (t) => {
75
73
  o({ payload: e.value, type: v.current, event: t }), e.onFocus && e.onFocus.call(void 0, {
76
74
  target: c.current,
@@ -78,7 +76,7 @@ const z = a.forwardRef((e, A) => {
78
76
  });
79
77
  },
80
78
  [e.onFocus, e.value, o]
81
- ), L = a.useCallback(
79
+ ), P = a.useCallback(
82
80
  (t) => {
83
81
  e.onBlur && e.onBlur.call(void 0, {
84
82
  target: c.current,
@@ -86,7 +84,7 @@ const z = a.forwardRef((e, A) => {
86
84
  });
87
85
  },
88
86
  [e.onBlur]
89
- ), _ = G(e, c, { onClick: K });
87
+ ), _ = q(e, c, { onClick: K });
90
88
  return /* @__PURE__ */ a.createElement(
91
89
  "div",
92
90
  {
@@ -95,31 +93,31 @@ const z = a.forwardRef((e, A) => {
95
93
  id: e.value,
96
94
  style: e.style,
97
95
  ref: d,
98
- dir: M,
99
- tabIndex: J(e.tabIndex, y, void 0),
100
- className: T(
96
+ dir: R,
97
+ tabIndex: G(e.tabIndex, y, void 0),
98
+ className: M(
101
99
  "k-chip",
102
100
  {
103
- "k-rtl": M === "rtl",
101
+ "k-rtl": R === "rtl",
104
102
  "k-disabled": y,
105
- "k-selected": h,
106
- "k-focus": g,
103
+ "k-selected": k,
104
+ "k-focus": b,
107
105
  [`k-chip-${O.sizeMap[f] || f}`]: f,
108
- [`k-rounded-${O.roundedMap[k] || k}`]: k,
106
+ [`k-rounded-${O.roundedMap[h] || h}`]: h,
109
107
  [`k-chip-${r}`]: r,
110
108
  [`k-chip-${r}-${N}`]: !!(r && N)
111
109
  },
112
110
  e.className
113
111
  ),
114
- "aria-pressed": e.role ? void 0 : h,
112
+ "aria-pressed": e.role ? void 0 : k,
115
113
  "aria-disabled": y,
116
114
  "aria-describedby": e.ariaDescribedBy,
117
115
  "aria-keyshortcuts": s ? "Enter Delete" : void 0,
118
- onFocus: $,
119
- onBlur: L,
120
- onKeyDown: P
116
+ onFocus: L,
117
+ onBlur: P,
118
+ onKeyDown: $
121
119
  },
122
- h && (e.selectedIcon || e.selectedSvgIcon) && /* @__PURE__ */ a.createElement(
120
+ k && (e.selectedIcon || e.selectedSvgIcon) && /* @__PURE__ */ a.createElement(
123
121
  I,
124
122
  {
125
123
  className: "k-chip-icon",
@@ -146,7 +144,7 @@ const z = a.forwardRef((e, A) => {
146
144
  /* @__PURE__ */ a.createElement("span", { className: "k-avatar-image" }, /* @__PURE__ */ a.createElement("img", { src: e.avatar.image, alt: e.avatar.imageAlt }))
147
145
  ),
148
146
  /* @__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)),
149
- s && /* @__PURE__ */ a.createElement("span", { className: "k-chip-actions" }, /* @__PURE__ */ a.createElement("span", { className: T("k-chip-action", "k-chip-remove-action"), onClick: b }, /* @__PURE__ */ a.createElement(
147
+ 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(
150
148
  I,
151
149
  {
152
150
  name: D ? C(D) : void 0,
@@ -155,7 +153,7 @@ const z = a.forwardRef((e, A) => {
155
153
  }
156
154
  )))
157
155
  );
158
- }), X = {
156
+ }), Q = {
159
157
  id: l.string,
160
158
  text: l.string,
161
159
  value: l.any,
@@ -189,7 +187,7 @@ const z = a.forwardRef((e, A) => {
189
187
  themeColor: "base"
190
188
  };
191
189
  z.displayName = "KendoReactChip";
192
- z.propTypes = X;
190
+ z.propTypes = Q;
193
191
  export {
194
192
  z as Chip
195
193
  };
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"),o=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"),V=require("../package-metadata.js");function ee(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=ee(W),te=(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,c]=a.useState(e);return[l,u=>{const d=X.selectionReducer(i.state||l,{...u,...i});n&&n(d,u.event),i.selection!=="none"&&c(d)}]},ae=e=>{const[i,n]=a.useState(null);return[i,c=>{const h=Y.focusReducer(c.payload,{...c,...e});n(h)}]},ne=(e,i,n)=>{const[l,c]=a.useState(e);return[l,u=>{const d=Z.dataReducer(i.state||l,{...u,...i});n&&n(d,u.event),c(d)}]},x=a.forwardRef((e,i)=>{o.validatePackage(V.packageMetadata);const n=a.useRef(null),l=a.useRef(null),{id:c,style:h,tabIndex:u,className:d,ariaDescribedBy:q,ariaLabelledBy:T,ariaLabel:j,value:b,defaultData:z=r.defaultData,chip:R=r.chip,disabled:y=r.disabled,size:m=r.size,defaultValue:E=r.defaultValue,selection:k=r.selection,valueField:f=r.valueField,textField:O=r.textField,dir:N=r.dir,onChange:g,onDataChange:C}=e,F=o.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,p)=>{g&&n.current&&g.call(void 0,{value:s,target:n.current,syntheticEvent:p})},[g]),[L,B]=te(b||E,{selection:k,state:b},A),_=a.useCallback((s,p)=>{C&&n.current&&C.call(void 0,{value:s,target:n.current,syntheticEvent:p})},[C]),[M,G]=ne(e.data||z,{state:e.data,valueField:f},_),I=a.useCallback((s,p)=>(s.push(p[f]),s),[f]),v=a.useMemo(()=>e.data||M,[e.data,M]),H=a.useMemo(()=>b||L,[b,L]),K=a.useMemo(()=>v.reduce(I,[]),[v,I]),P=a.useCallback(s=>o.getter(f)(s),[f]),$=a.useCallback(s=>o.getter(O)(s),[O]),[J,Q]=ae({items:K}),U=o.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:[v,G]},a.createElement("div",{ref:l,...U,role:y?void 0:"listbox",id:c,dir:F,style:h,tabIndex:o.getTabIndex(u,y,void 0),className:o.classNames("k-chip-list",{"k-rtl":F==="rtl","k-disabled":y,[`k-chip-list-${o.kendoThemeMaps.sizeMap[m]||m}`]:m},d),"aria-label":j,"aria-labelledby":T,"aria-describedby":q,"aria-orientation":"horizontal","aria-multiselectable":k==="multiple"},v.map((s,p)=>a.createElement(w,{role:"option",dataItem:s,size:m,key:[P(s),p].join("-"),text:$(s),value:P(s),ariaLabel:s.ariaLabel,svgIcon:s.svgIcon||void 0}))))))}),se={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"])},r={chip:S.Chip,size:"medium",disabled:!1,defaultValue:null,defaultData:[],dir:"ltr",selection:"none",textField:"text",valueField:"value",removable:"removable"};x.displayName="KendoReactChipList";x.propTypes=se;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:y=r.disabled,size:m=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]),v=a.useMemo(()=>e.data||I,[e.data,I]),H=a.useMemo(()=>b||k,[b,k]),K=a.useMemo(()=>v.reduce(M,[]),[v,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:[v,G]},a.createElement("div",{ref:l,...U,role:y?void 0:"listbox",id:o,dir:L,style:h,tabIndex:p.getTabIndex(c,y,void 0),className:p.classNames("k-chip-list",{"k-rtl":L==="rtl","k-disabled":y,[`k-chip-list-${p.kendoThemeMaps.sizeMap[m]||m}`]:m},u),"aria-label":j,"aria-labelledby":q,"aria-describedby":T,"aria-orientation":"horizontal","aria-multiselectable":O==="multiple"},v.map((s,d)=>a.createElement(w,{role:"option",dataItem:s,size:m,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([null,"small","medium","large"])},r={chip:S.Chip,size:"medium",disabled:!1,defaultValue:null,defaultData:[],dir:"ltr",selection:"none",textField:"text",valueField:"value",removable:"removable"};x.displayName="KendoReactChipList";x.propTypes=ne;exports.ChipList=x;
package/Chip/ChipList.mjs CHANGED
@@ -7,44 +7,42 @@
7
7
  */
8
8
  import * as t from "react";
9
9
  import e from "prop-types";
10
- import { validatePackage as W, useDir as X, getter as M, useMouse as Y, getTabIndex as Z, classNames as _, kendoThemeMaps as V } from "@progress/kendo-react-common";
11
- import { selectionReducer as ee } from "./selection-reducer.mjs";
12
- import { focusReducer as te } from "./focus-reducer.mjs";
13
- import { dataReducer as ae } from "./data-reducer.mjs";
10
+ import { useDir as W, getter as O, useMouse as X, getTabIndex as Y, classNames as Z, kendoThemeMaps as _ } from "@progress/kendo-react-common";
11
+ import { selectionReducer as V } from "./selection-reducer.mjs";
12
+ import { focusReducer as ee } from "./focus-reducer.mjs";
13
+ import { dataReducer as te } from "./data-reducer.mjs";
14
14
  import { Chip as D } from "./Chip.mjs";
15
- import { ChipListSelectionContext as ne, ChipListFocusContext as se, ChipListDataContext as ie } from "./chip-list-contexts.mjs";
16
- import { packageMetadata as le } from "../package-metadata.mjs";
17
- const re = (a, i, s) => {
15
+ import { ChipListSelectionContext as ae, ChipListFocusContext as ne, ChipListDataContext as se } from "./chip-list-contexts.mjs";
16
+ const ie = (a, i, s) => {
18
17
  i.selection === "multiple" ? Array.isArray(a) || (a = a ? [a] : null) : i.selection === "single" && Array.isArray(a) && (a = a ? a.join("") : null);
19
18
  const [l, o] = t.useState(a);
20
19
  return [l, (c) => {
21
- const d = ee(i.state || l, { ...c, ...i });
20
+ const d = V(i.state || l, { ...c, ...i });
22
21
  s && s(d, c.event), i.selection !== "none" && o(d);
23
22
  }];
24
- }, oe = (a) => {
23
+ }, le = (a) => {
25
24
  const [i, s] = t.useState(null);
26
25
  return [i, (o) => {
27
- const m = te(o.payload, { ...o, ...a });
26
+ const m = ee(o.payload, { ...o, ...a });
28
27
  s(m);
29
28
  }];
30
- }, ce = (a, i, s) => {
29
+ }, re = (a, i, s) => {
31
30
  const [l, o] = t.useState(a);
32
31
  return [l, (c) => {
33
- const d = ae(i.state || l, { ...c, ...i });
32
+ const d = te(i.state || l, { ...c, ...i });
34
33
  s && s(d, c.event), o(d);
35
34
  }];
36
- }, O = t.forwardRef((a, i) => {
37
- W(le);
35
+ }, E = t.forwardRef((a, i) => {
38
36
  const s = t.useRef(null), l = t.useRef(null), {
39
37
  id: o,
40
38
  style: m,
41
39
  tabIndex: c,
42
40
  className: d,
43
- ariaDescribedBy: E,
44
- ariaLabelledBy: P,
45
- ariaLabel: T,
41
+ ariaDescribedBy: M,
42
+ ariaLabelledBy: T,
43
+ ariaLabel: z,
46
44
  value: h,
47
- defaultData: z = r.defaultData,
45
+ defaultData: P = r.defaultData,
48
46
  chip: g = r.chip,
49
47
  disabled: b = r.disabled,
50
48
  size: f = r.size,
@@ -55,7 +53,7 @@ const re = (a, i, s) => {
55
53
  dir: w = r.dir,
56
54
  onChange: y,
57
55
  onDataChange: C
58
- } = a, F = X(l, w), A = t.useMemo(() => g || D, [g, D]);
56
+ } = a, F = W(l, w), A = t.useMemo(() => g || D, [g, D]);
59
57
  t.useImperativeHandle(s, () => ({
60
58
  element: l.current,
61
59
  props: a
@@ -69,7 +67,7 @@ const re = (a, i, s) => {
69
67
  });
70
68
  },
71
69
  [y]
72
- ), [k, j] = re(
70
+ ), [L, j] = ie(
73
71
  h || N,
74
72
  {
75
73
  selection: x,
@@ -85,18 +83,18 @@ const re = (a, i, s) => {
85
83
  });
86
84
  },
87
85
  [C]
88
- ), [L, H] = ce(
89
- a.data || z,
86
+ ), [I, H] = re(
87
+ a.data || P,
90
88
  {
91
89
  state: a.data,
92
90
  valueField: p
93
91
  },
94
92
  G
95
- ), I = t.useCallback(
93
+ ), R = t.useCallback(
96
94
  (n, u) => (n.push(u[p]), n),
97
95
  [p]
98
- ), v = t.useMemo(() => a.data || L, [a.data, L]), K = t.useMemo(() => h || k, [h, k]), $ = t.useMemo(() => v.reduce(I, []), [v, I]), R = t.useCallback((n) => M(p)(n), [p]), q = t.useCallback((n) => M(S)(n), [S]), [J, Q] = oe({ items: $ }), U = Y(a, s);
99
- return /* @__PURE__ */ t.createElement(ne.Provider, { value: [K, j] }, /* @__PURE__ */ t.createElement(se.Provider, { value: [J, Q] }, /* @__PURE__ */ t.createElement(ie.Provider, { value: [v, H] }, /* @__PURE__ */ t.createElement(
96
+ ), v = t.useMemo(() => a.data || I, [a.data, I]), K = t.useMemo(() => h || L, [h, L]), $ = t.useMemo(() => v.reduce(R, []), [v, R]), k = t.useCallback((n) => O(p)(n), [p]), q = t.useCallback((n) => O(S)(n), [S]), [J, Q] = le({ items: $ }), U = X(a, s);
97
+ return /* @__PURE__ */ t.createElement(ae.Provider, { value: [K, j] }, /* @__PURE__ */ t.createElement(ne.Provider, { value: [J, Q] }, /* @__PURE__ */ t.createElement(se.Provider, { value: [v, H] }, /* @__PURE__ */ t.createElement(
100
98
  "div",
101
99
  {
102
100
  ref: l,
@@ -105,19 +103,19 @@ const re = (a, i, s) => {
105
103
  id: o,
106
104
  dir: F,
107
105
  style: m,
108
- tabIndex: Z(c, b, void 0),
109
- className: _(
106
+ tabIndex: Y(c, b, void 0),
107
+ className: Z(
110
108
  "k-chip-list",
111
109
  {
112
110
  "k-rtl": F === "rtl",
113
111
  "k-disabled": b,
114
- [`k-chip-list-${V.sizeMap[f] || f}`]: f
112
+ [`k-chip-list-${_.sizeMap[f] || f}`]: f
115
113
  },
116
114
  d
117
115
  ),
118
- "aria-label": T,
119
- "aria-labelledby": P,
120
- "aria-describedby": E,
116
+ "aria-label": z,
117
+ "aria-labelledby": T,
118
+ "aria-describedby": M,
121
119
  "aria-orientation": "horizontal",
122
120
  "aria-multiselectable": x === "multiple"
123
121
  },
@@ -127,15 +125,15 @@ const re = (a, i, s) => {
127
125
  role: "option",
128
126
  dataItem: n,
129
127
  size: f,
130
- key: [R(n), u].join("-"),
128
+ key: [k(n), u].join("-"),
131
129
  text: q(n),
132
- value: R(n),
130
+ value: k(n),
133
131
  ariaLabel: n.ariaLabel,
134
132
  svgIcon: n.svgIcon || void 0
135
133
  }
136
134
  ))
137
135
  ))));
138
- }), de = {
136
+ }), oe = {
139
137
  id: e.string,
140
138
  className: e.string,
141
139
  tabIndex: e.number,
@@ -165,8 +163,8 @@ const re = (a, i, s) => {
165
163
  valueField: "value",
166
164
  removable: "removable"
167
165
  };
168
- O.displayName = "KendoReactChipList";
169
- O.propTypes = de;
166
+ E.displayName = "KendoReactChipList";
167
+ E.propTypes = oe;
170
168
  export {
171
- O as ChipList
169
+ E as ChipList
172
170
  };