@progress/kendo-react-listbox 14.5.0-develop.14 → 14.5.0-develop.16

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/ListBox.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 V=require("react"),u=require("prop-types"),a=require("@progress/kendo-react-common"),W=require("@progress/kendo-react-intl"),R=require("./interfaces/Enums.js"),x=require("./messages/index.js");function J(i){const f=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const d in i)if(d!=="default"){const g=Object.getOwnPropertyDescriptor(i,d);Object.defineProperty(f,d,g.get?g:{enumerable:!0,get:()=>i[d]})}}return f.default=i,Object.freeze(f)}const s=J(V),D=s.forwardRef((i,f)=>{const{id:d,style:g,data:c,textField:h,className:S,valueField:T,selectedField:v,onDrop:z,onKeyDown:N,onDragStart:C,onDragLeave:K,onDragOver:F,onItemClick:q,onItemSelect:b,onKeyboardNavigate:m,size:y=E.size,draggable:B=E.draggable,toolbarPosition:O=E.toolbarPosition}=i,w=s.useRef(null),k=s.useRef(null),L=s.useRef(null),M=W.useLocalization(),o=s.useCallback(()=>({element:L.current,props:i}),[]);s.useImperativeHandle(k,o),s.useImperativeHandle(f,()=>k.current),a.useWebMcpRegister("listbox",k,i,i.webMcp);const P=d+"-accessibility-id",I=a.kendoThemeMaps.sizeMap[y]||y,_=t=>{if(v)return!!t[v]},A=t=>h?t[h]:t.toString(),j=t=>{N&&a.dispatchEvent(N,t,o(),void 0)},H=t=>{t.target.classList.contains("k-list-content")&&(i.data.length>0?a.dispatchEvent(i.onDrop,t,o(),{dataItem:i.data[i.data.length-1]}):a.dispatchEvent(i.onDrop,t,o(),{dataItem:null}))},$=()=>O===R.toolbarPosition.NONE||i.toolbar===void 0?`k-listbox-actions-${E.toolbarPosition}`:`k-listbox-actions-${O}`,G=t=>{K&&t.target.classList.contains("k-list-content")&&a.dispatchEvent(K,t,o(),void 0)},p=s.useMemo(()=>new a.Navigation({root:w,selectors:[".k-list-item"],tabIndex:0,keyboardEvents:{keydown:{Space:(t,n,e)=>{const r=n.elements.indexOf(t);e.metaKey&&a.dispatchEvent(b,e,o(),{dataItem:c[r]}),a.dispatchEvent(b,e,o(),{dataItem:c[r]})},ArrowDown:(t,n,e)=>{if(e.metaKey&&e.shiftKey)a.dispatchEvent(m,e,o(),{actionName:"moveDown"});else if(e.metaKey&&!e.shiftKey)e.preventDefault(),n.focusNext(t);else if(!(e.shiftKey&&!e.metaKey)){e.preventDefault();const r=n.elements.indexOf(t),l=c[r+1];l&&(a.dispatchEvent(b,e,o(),{dataItem:l}),n.focusNext(t))}},ArrowUp:(t,n,e)=>{if(e.metaKey&&e.shiftKey)a.dispatchEvent(m,e,o(),{actionName:"moveUp"});else if(e.metaKey&&!e.shiftKey)e.preventDefault(),n.focusPrevious(t);else if(!(e.shiftKey&&!e.metaKey)){e.preventDefault();const r=n.elements.indexOf(t),l=c[r-1];l&&(a.dispatchEvent(b,e,o(),{dataItem:l}),n.focusPrevious(t))}},ArrowLeft:(t,n,e)=>{e.metaKey&&e.shiftKey?a.dispatchEvent(m,e,o(),{actionName:"transferAllFrom"}):e.metaKey&&a.dispatchEvent(m,e,o(),{actionName:"transferFrom"})},ArrowRight:(t,n,e)=>{e.metaKey&&e.shiftKey?a.dispatchEvent(m,e,o(),{actionName:"transferAllTo"}):e.metaKey&&a.dispatchEvent(m,e,o(),{actionName:"transferTo"})},Backspace:(t,n,e)=>{a.dispatchEvent(m,e,o(),{actionName:"remove"})}}}}),[c]),U=s.useCallback(p.triggerKeyboardEvent.bind(p),[c]);return s.useEffect(()=>(p.initializeRovingTab(),()=>p.removeFocusListener()),[c]),s.createElement("div",{id:d,ref:L,style:g,unselectable:"on",className:a.classNames(S,"k-listbox",{[`k-listbox-${I}`]:y},$())},i.toolbar&&s.createElement(i.toolbar,null),s.createElement("div",{className:"k-list-scroller k-selectable","data-role":"selectable",ref:w,onDragOver:t=>t.preventDefault(),onDrop:H,onDragLeave:G,onKeyDown:U},s.createElement("div",{className:a.classNames("k-list",{[`k-list-${I}`]:y})},s.createElement("div",{className:"k-list-content"},s.createElement("ul",{className:"k-list-ul",role:"listbox","aria-label":"listbox-container",onKeyDown:j},c.map((t,n)=>{const e=_(t),r={className:a.classNames("k-list-item",{"k-selected":e}),role:"option",key:n,id:P+n,"aria-selected":e,"data-uid":P+n,draggable:B,onDragStart:l=>{a.dispatchEvent(C,l,o(),{dataItem:t})},onDragOver:l=>{l.preventDefault(),a.dispatchEvent(F,l,o(),{dataItem:t})},onDrop:l=>{a.dispatchEvent(z,l,o(),{dataItem:t})},onClick:l=>{a.dispatchEvent(q,l,o(),{dataItem:t})}};return i.item?s.createElement(i.item,{selected:e,dataItem:t,...r,key:r.key},s.createElement("span",{className:"k-list-item-text"},t.name)):s.createElement("li",{...r,key:r.key},s.createElement("span",{className:"k-list-item-text"},A(t)))}))))),s.createElement("select",{style:{display:"none"},multiple:!0,"data-role":"listbox","aria-label":M.toLanguageString(x.ariaLabelListBox,x.messages[x.ariaLabelListBox])},c.map((t,n)=>{const e=t[T||h];return s.createElement("option",{key:n,value:e},e)})))}),E={toolbarPosition:R.toolbarPosition.RIGHT,draggable:!0,size:void 0};D.propTypes={size:u.oneOf(["small","medium","large"]),toolbarPosition:u.oneOf(["none","top","bottom","left","right"]),textField:u.string.isRequired,valueField:u.string,selectedField:u.string,data:u.array.isRequired};D.displayName="ListBoxInner";exports.ListBox=D;
8
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=require("react"),u=require("prop-types"),a=require("@progress/kendo-react-common"),Y=require("@progress/kendo-react-intl"),S=require("./interfaces/Enums.js"),Z=require("./ListBoxContext.js"),v=require("./messages/index.js");function ee(i){const f=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const c in i)if(c!=="default"){const g=Object.getOwnPropertyDescriptor(i,c);Object.defineProperty(f,c,g.get?g:{enumerable:!0,get:()=>i[c]})}}return f.default=i,Object.freeze(f)}const s=ee(X),D=s.forwardRef((i,f)=>{const{id:c,style:g,data:d,textField:h,className:T,valueField:C,selectedField:N,onDrop:F,onKeyDown:K,onDragStart:z,onDragLeave:L,onDragOver:q,onItemClick:B,onItemSelect:b,onKeyboardNavigate:m,size:y=E.size,draggable:M=E.draggable,toolbarPosition:I=E.toolbarPosition}=i,O=s.useRef(null),k=s.useRef(null),w=s.useRef(null),[_,A]=s.useState(0),j=Y.useLocalization(),n=s.useCallback(()=>({element:w.current,props:i}),[]);s.useImperativeHandle(k,n),s.useImperativeHandle(f,()=>k.current),a.useWebMcpRegister("listbox",k,i,i.webMcp);const P=c+"-accessibility-id",x=c?`${c}-list`:void 0,R=a.kendoThemeMaps.sizeMap[y]||y,$=t=>{if(N)return!!t[N]},H=t=>h?t[h]:t.toString(),G=t=>{K&&a.dispatchEvent(K,t,n(),void 0)},U=t=>{t.target.classList.contains("k-list-content")&&(i.data.length>0?a.dispatchEvent(i.onDrop,t,n(),{dataItem:i.data[i.data.length-1]}):a.dispatchEvent(i.onDrop,t,n(),{dataItem:null}))},V=()=>I===S.toolbarPosition.NONE||i.toolbar===void 0?`k-listbox-actions-${E.toolbarPosition}`:`k-listbox-actions-${I}`,W=t=>{L&&t.target.classList.contains("k-list-content")&&a.dispatchEvent(L,t,n(),void 0)},p=s.useMemo(()=>new a.Navigation({root:O,selectors:[".k-list-item"],tabIndex:0,keyboardEvents:{keydown:{Space:(t,o,e)=>{const r=o.elements.indexOf(t);e.metaKey&&a.dispatchEvent(b,e,n(),{dataItem:d[r]}),a.dispatchEvent(b,e,n(),{dataItem:d[r]})},ArrowDown:(t,o,e)=>{if(e.metaKey&&e.shiftKey)a.dispatchEvent(m,e,n(),{actionName:"moveDown"});else if(e.metaKey&&!e.shiftKey)e.preventDefault(),o.focusNext(t);else if(!(e.shiftKey&&!e.metaKey)){e.preventDefault();const r=o.elements.indexOf(t),l=d[r+1];l&&(a.dispatchEvent(b,e,n(),{dataItem:l}),o.focusNext(t))}},ArrowUp:(t,o,e)=>{if(e.metaKey&&e.shiftKey)a.dispatchEvent(m,e,n(),{actionName:"moveUp"});else if(e.metaKey&&!e.shiftKey)e.preventDefault(),o.focusPrevious(t);else if(!(e.shiftKey&&!e.metaKey)){e.preventDefault();const r=o.elements.indexOf(t),l=d[r-1];l&&(a.dispatchEvent(b,e,n(),{dataItem:l}),o.focusPrevious(t))}},ArrowLeft:(t,o,e)=>{e.metaKey&&e.shiftKey?a.dispatchEvent(m,e,n(),{actionName:"transferAllFrom"}):e.metaKey&&a.dispatchEvent(m,e,n(),{actionName:"transferFrom"})},ArrowRight:(t,o,e)=>{e.metaKey&&e.shiftKey?a.dispatchEvent(m,e,n(),{actionName:"transferAllTo"}):e.metaKey&&a.dispatchEvent(m,e,n(),{actionName:"transferTo"})},Backspace:(t,o,e)=>{a.dispatchEvent(m,e,n(),{actionName:"remove"})}}}}),[d]),J=s.useCallback(p.triggerKeyboardEvent.bind(p),[d]),Q=s.useMemo(()=>({listId:x}),[x]);return s.useEffect(()=>(p.initializeRovingTab(),()=>p.removeFocusListener()),[d]),s.createElement("div",{id:c,ref:w,style:g,unselectable:"on",className:a.classNames(T,"k-listbox",{[`k-listbox-${R}`]:y},V())},s.createElement(Z.ListBoxContext.Provider,{value:Q},i.toolbar&&s.createElement(i.toolbar,null)),s.createElement("div",{className:"k-list-scroller k-selectable","data-role":"selectable",ref:O,onDragOver:t=>t.preventDefault(),onDrop:U,onDragLeave:W,onKeyDown:J},s.createElement("div",{className:a.classNames("k-list",{[`k-list-${R}`]:y})},s.createElement("div",{className:"k-list-content"},s.createElement("ul",{id:x,className:"k-list-ul",role:"listbox","aria-label":"listbox-container",onKeyDown:G},d.map((t,o)=>{const e=$(t),r={className:a.classNames("k-list-item",{"k-selected":e,"k-focus":o===_}),role:"option",key:o,id:P+o,"aria-selected":e,"data-uid":P+o,draggable:M,onDragStart:l=>{a.dispatchEvent(z,l,n(),{dataItem:t})},onDragOver:l=>{l.preventDefault(),a.dispatchEvent(q,l,n(),{dataItem:t})},onDrop:l=>{a.dispatchEvent(F,l,n(),{dataItem:t})},onClick:l=>{a.dispatchEvent(B,l,n(),{dataItem:t})},onFocus:()=>A(o)};return i.item?s.createElement(i.item,{selected:e,dataItem:t,...r,key:r.key},s.createElement("span",{className:"k-list-item-text"},t.name)):s.createElement("li",{...r,key:r.key},s.createElement("span",{className:"k-list-item-text"},H(t)))}))))),s.createElement("select",{style:{display:"none"},multiple:!0,"data-role":"listbox","aria-label":j.toLanguageString(v.ariaLabelListBox,v.messages[v.ariaLabelListBox])},d.map((t,o)=>{const e=t[C||h];return s.createElement("option",{key:o,value:e},e)})))}),E={toolbarPosition:S.toolbarPosition.RIGHT,draggable:!0,size:void 0};D.propTypes={size:u.oneOf(["small","medium","large"]),toolbarPosition:u.oneOf(["none","top","bottom","left","right"]),textField:u.string.isRequired,valueField:u.string,selectedField:u.string,data:u.array.isRequired};D.displayName="ListBoxInner";exports.ListBox=D;
package/ListBox.mjs CHANGED
@@ -7,172 +7,178 @@
7
7
  */
8
8
  import * as a from "react";
9
9
  import f from "prop-types";
10
- import { useWebMcpRegister as j, kendoThemeMaps as J, Navigation as Q, dispatchEvent as s, classNames as x } from "@progress/kendo-react-common";
11
- import { useLocalization as X } from "@progress/kendo-react-intl";
12
- import { toolbarPosition as O } from "./interfaces/Enums.mjs";
13
- import { ariaLabelListBox as P, messages as Y } from "./messages/index.mjs";
14
- const R = a.forwardRef((l, T) => {
10
+ import { useWebMcpRegister as Y, kendoThemeMaps as Z, Navigation as ee, dispatchEvent as i, classNames as K } from "@progress/kendo-react-common";
11
+ import { useLocalization as te } from "@progress/kendo-react-intl";
12
+ import { toolbarPosition as F } from "./interfaces/Enums.mjs";
13
+ import { ListBoxContext as ae } from "./ListBoxContext.mjs";
14
+ import { ariaLabelListBox as v, messages as oe } from "./messages/index.mjs";
15
+ const O = a.forwardRef((l, R) => {
15
16
  const {
16
- id: D,
17
- style: z,
17
+ id: d,
18
+ style: S,
18
19
  data: c,
19
- textField: b,
20
- className: F,
21
- valueField: S,
22
- selectedField: K,
23
- onDrop: v,
24
- onKeyDown: N,
25
- onDragStart: C,
26
- onDragLeave: p,
27
- onDragOver: A,
28
- onItemClick: B,
29
- onItemSelect: d,
20
+ textField: k,
21
+ className: T,
22
+ valueField: z,
23
+ selectedField: N,
24
+ onDrop: C,
25
+ onKeyDown: p,
26
+ onDragStart: A,
27
+ onDragLeave: E,
28
+ onDragOver: B,
29
+ onItemClick: M,
30
+ onItemSelect: u,
30
31
  onKeyboardNavigate: m,
31
- size: u = y.size,
32
- draggable: M = y.draggable,
33
- toolbarPosition: E = y.toolbarPosition
34
- } = l, h = a.useRef(null), k = a.useRef(null), w = a.useRef(null), $ = X(), o = a.useCallback(
32
+ size: g = b.size,
33
+ draggable: $ = b.draggable,
34
+ toolbarPosition: h = b.toolbarPosition
35
+ } = l, I = a.useRef(null), x = a.useRef(null), w = a.useRef(null), [H, _] = a.useState(0), q = te(), s = a.useCallback(
35
36
  () => ({
36
37
  element: w.current,
37
38
  props: l
38
39
  }),
39
40
  []
40
41
  );
41
- a.useImperativeHandle(k, o), a.useImperativeHandle(T, () => k.current), j("listbox", k, l, l.webMcp);
42
- const I = D + "-accessibility-id", L = J.sizeMap[u] || u, H = (t) => {
43
- if (K)
44
- return !!t[K];
45
- }, _ = (t) => b ? t[b] : t.toString(), q = (t) => {
46
- N && s(N, t, o(), void 0);
47
- }, G = (t) => {
48
- t.target.classList.contains("k-list-content") && (l.data.length > 0 ? s(l.onDrop, t, o(), {
42
+ a.useImperativeHandle(x, s), a.useImperativeHandle(R, () => x.current), Y("listbox", x, l, l.webMcp);
43
+ const L = d + "-accessibility-id", D = d ? `${d}-list` : void 0, P = Z.sizeMap[g] || g, G = (t) => {
44
+ if (N)
45
+ return !!t[N];
46
+ }, U = (t) => k ? t[k] : t.toString(), V = (t) => {
47
+ p && i(p, t, s(), void 0);
48
+ }, W = (t) => {
49
+ t.target.classList.contains("k-list-content") && (l.data.length > 0 ? i(l.onDrop, t, s(), {
49
50
  dataItem: l.data[l.data.length - 1]
50
- }) : s(l.onDrop, t, o(), {
51
+ }) : i(l.onDrop, t, s(), {
51
52
  dataItem: null
52
53
  }));
53
- }, U = () => E === O.NONE || l.toolbar === void 0 ? `k-listbox-actions-${y.toolbarPosition}` : `k-listbox-actions-${E}`, V = (t) => {
54
- p && t.target.classList.contains("k-list-content") && s(p, t, o(), void 0);
55
- }, g = a.useMemo(
56
- () => new Q({
57
- root: h,
54
+ }, j = () => h === F.NONE || l.toolbar === void 0 ? `k-listbox-actions-${b.toolbarPosition}` : `k-listbox-actions-${h}`, J = (t) => {
55
+ E && t.target.classList.contains("k-list-content") && i(E, t, s(), void 0);
56
+ }, y = a.useMemo(
57
+ () => new ee({
58
+ root: I,
58
59
  selectors: [".k-list-item"],
59
60
  tabIndex: 0,
60
61
  keyboardEvents: {
61
62
  keydown: {
62
- Space: (t, i, e) => {
63
- const r = i.elements.indexOf(t);
64
- e.metaKey && s(d, e, o(), {
63
+ Space: (t, o, e) => {
64
+ const r = o.elements.indexOf(t);
65
+ e.metaKey && i(u, e, s(), {
65
66
  dataItem: c[r]
66
- }), s(d, e, o(), { dataItem: c[r] });
67
+ }), i(u, e, s(), { dataItem: c[r] });
67
68
  },
68
- ArrowDown: (t, i, e) => {
69
+ ArrowDown: (t, o, e) => {
69
70
  if (e.metaKey && e.shiftKey)
70
- s(m, e, o(), {
71
+ i(m, e, s(), {
71
72
  actionName: "moveDown"
72
73
  });
73
74
  else if (e.metaKey && !e.shiftKey)
74
- e.preventDefault(), i.focusNext(t);
75
+ e.preventDefault(), o.focusNext(t);
75
76
  else if (!(e.shiftKey && !e.metaKey)) {
76
77
  e.preventDefault();
77
- const r = i.elements.indexOf(t), n = c[r + 1];
78
- n && (s(d, e, o(), { dataItem: n }), i.focusNext(t));
78
+ const r = o.elements.indexOf(t), n = c[r + 1];
79
+ n && (i(u, e, s(), { dataItem: n }), o.focusNext(t));
79
80
  }
80
81
  },
81
- ArrowUp: (t, i, e) => {
82
+ ArrowUp: (t, o, e) => {
82
83
  if (e.metaKey && e.shiftKey)
83
- s(m, e, o(), {
84
+ i(m, e, s(), {
84
85
  actionName: "moveUp"
85
86
  });
86
87
  else if (e.metaKey && !e.shiftKey)
87
- e.preventDefault(), i.focusPrevious(t);
88
+ e.preventDefault(), o.focusPrevious(t);
88
89
  else if (!(e.shiftKey && !e.metaKey)) {
89
90
  e.preventDefault();
90
- const r = i.elements.indexOf(t), n = c[r - 1];
91
- n && (s(d, e, o(), { dataItem: n }), i.focusPrevious(t));
91
+ const r = o.elements.indexOf(t), n = c[r - 1];
92
+ n && (i(u, e, s(), { dataItem: n }), o.focusPrevious(t));
92
93
  }
93
94
  },
94
- ArrowLeft: (t, i, e) => {
95
- e.metaKey && e.shiftKey ? s(m, e, o(), {
95
+ ArrowLeft: (t, o, e) => {
96
+ e.metaKey && e.shiftKey ? i(m, e, s(), {
96
97
  actionName: "transferAllFrom"
97
- }) : e.metaKey && s(m, e, o(), {
98
+ }) : e.metaKey && i(m, e, s(), {
98
99
  actionName: "transferFrom"
99
100
  });
100
101
  },
101
- ArrowRight: (t, i, e) => {
102
- e.metaKey && e.shiftKey ? s(m, e, o(), {
102
+ ArrowRight: (t, o, e) => {
103
+ e.metaKey && e.shiftKey ? i(m, e, s(), {
103
104
  actionName: "transferAllTo"
104
- }) : e.metaKey && s(m, e, o(), {
105
+ }) : e.metaKey && i(m, e, s(), {
105
106
  actionName: "transferTo"
106
107
  });
107
108
  },
108
- Backspace: (t, i, e) => {
109
- s(m, e, o(), { actionName: "remove" });
109
+ Backspace: (t, o, e) => {
110
+ i(m, e, s(), { actionName: "remove" });
110
111
  }
111
112
  }
112
113
  }
113
114
  }),
114
115
  [c]
115
- ), W = a.useCallback(g.triggerKeyboardEvent.bind(g), [c]);
116
- return a.useEffect(() => (g.initializeRovingTab(), () => g.removeFocusListener()), [c]), /* @__PURE__ */ a.createElement(
116
+ ), Q = a.useCallback(y.triggerKeyboardEvent.bind(y), [c]), X = a.useMemo(() => ({ listId: D }), [D]);
117
+ return a.useEffect(() => (y.initializeRovingTab(), () => y.removeFocusListener()), [c]), /* @__PURE__ */ a.createElement(
117
118
  "div",
118
119
  {
119
- id: D,
120
+ id: d,
120
121
  ref: w,
121
- style: z,
122
+ style: S,
122
123
  unselectable: "on",
123
- className: x(
124
- F,
124
+ className: K(
125
+ T,
125
126
  "k-listbox",
126
- { [`k-listbox-${L}`]: u },
127
- U()
127
+ { [`k-listbox-${P}`]: g },
128
+ j()
128
129
  )
129
130
  },
130
- l.toolbar && /* @__PURE__ */ a.createElement(l.toolbar, null),
131
+ /* @__PURE__ */ a.createElement(ae.Provider, { value: X }, l.toolbar && /* @__PURE__ */ a.createElement(l.toolbar, null)),
131
132
  /* @__PURE__ */ a.createElement(
132
133
  "div",
133
134
  {
134
135
  className: "k-list-scroller k-selectable",
135
136
  "data-role": "selectable",
136
- ref: h,
137
+ ref: I,
137
138
  onDragOver: (t) => t.preventDefault(),
138
- onDrop: G,
139
- onDragLeave: V,
140
- onKeyDown: W
139
+ onDrop: W,
140
+ onDragLeave: J,
141
+ onKeyDown: Q
141
142
  },
142
- /* @__PURE__ */ a.createElement("div", { className: x("k-list", { [`k-list-${L}`]: u }) }, /* @__PURE__ */ a.createElement("div", { className: "k-list-content" }, /* @__PURE__ */ a.createElement(
143
+ /* @__PURE__ */ a.createElement("div", { className: K("k-list", { [`k-list-${P}`]: g }) }, /* @__PURE__ */ a.createElement("div", { className: "k-list-content" }, /* @__PURE__ */ a.createElement(
143
144
  "ul",
144
145
  {
146
+ id: D,
145
147
  className: "k-list-ul",
146
148
  role: "listbox",
147
149
  "aria-label": "listbox-container",
148
- onKeyDown: q
150
+ onKeyDown: V
149
151
  },
150
- c.map((t, i) => {
151
- const e = H(t), r = {
152
- className: x("k-list-item", { "k-selected": e }),
152
+ c.map((t, o) => {
153
+ const e = G(t), r = {
154
+ className: K("k-list-item", {
155
+ "k-selected": e,
156
+ "k-focus": o === H
157
+ }),
153
158
  role: "option",
154
- key: i,
155
- id: I + i,
159
+ key: o,
160
+ id: L + o,
156
161
  "aria-selected": e,
157
- "data-uid": I + i,
158
- draggable: M,
162
+ "data-uid": L + o,
163
+ draggable: $,
159
164
  onDragStart: (n) => {
160
- s(
161
- C,
165
+ i(
166
+ A,
162
167
  n,
163
- o(),
168
+ s(),
164
169
  { dataItem: t }
165
170
  );
166
171
  },
167
172
  onDragOver: (n) => {
168
- n.preventDefault(), s(A, n, o(), { dataItem: t });
173
+ n.preventDefault(), i(B, n, s(), { dataItem: t });
169
174
  },
170
175
  onDrop: (n) => {
171
- s(v, n, o(), { dataItem: t });
176
+ i(C, n, s(), { dataItem: t });
172
177
  },
173
178
  onClick: (n) => {
174
- s(B, n, o(), { dataItem: t });
175
- }
179
+ i(M, n, s(), { dataItem: t });
180
+ },
181
+ onFocus: () => _(o)
176
182
  };
177
183
  return l.item ? /* @__PURE__ */ a.createElement(
178
184
  l.item,
@@ -183,7 +189,7 @@ const R = a.forwardRef((l, T) => {
183
189
  key: r.key
184
190
  },
185
191
  /* @__PURE__ */ a.createElement("span", { className: "k-list-item-text" }, t.name)
186
- ) : /* @__PURE__ */ a.createElement("li", { ...r, key: r.key }, /* @__PURE__ */ a.createElement("span", { className: "k-list-item-text" }, _(t)));
192
+ ) : /* @__PURE__ */ a.createElement("li", { ...r, key: r.key }, /* @__PURE__ */ a.createElement("span", { className: "k-list-item-text" }, U(t)));
187
193
  })
188
194
  )))
189
195
  ),
@@ -193,23 +199,23 @@ const R = a.forwardRef((l, T) => {
193
199
  style: { display: "none" },
194
200
  multiple: !0,
195
201
  "data-role": "listbox",
196
- "aria-label": $.toLanguageString(
197
- P,
198
- Y[P]
202
+ "aria-label": q.toLanguageString(
203
+ v,
204
+ oe[v]
199
205
  )
200
206
  },
201
- c.map((t, i) => {
202
- const e = t[S || b];
203
- return /* @__PURE__ */ a.createElement("option", { key: i, value: e }, e);
207
+ c.map((t, o) => {
208
+ const e = t[z || k];
209
+ return /* @__PURE__ */ a.createElement("option", { key: o, value: e }, e);
204
210
  })
205
211
  )
206
212
  );
207
- }), y = {
208
- toolbarPosition: O.RIGHT,
213
+ }), b = {
214
+ toolbarPosition: F.RIGHT,
209
215
  draggable: !0,
210
216
  size: void 0
211
217
  };
212
- R.propTypes = {
218
+ O.propTypes = {
213
219
  size: f.oneOf(["small", "medium", "large"]),
214
220
  toolbarPosition: f.oneOf(["none", "top", "bottom", "left", "right"]),
215
221
  textField: f.string.isRequired,
@@ -217,7 +223,7 @@ R.propTypes = {
217
223
  selectedField: f.string,
218
224
  data: f.array.isRequired
219
225
  };
220
- R.displayName = "ListBoxInner";
226
+ O.displayName = "ListBoxInner";
221
227
  export {
222
- R as ListBox
228
+ O as ListBox
223
229
  };
@@ -0,0 +1,18 @@
1
+ /**
2
+ * @license
3
+ *-------------------------------------------------------------------------------------------
4
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
5
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
6
+ *-------------------------------------------------------------------------------------------
7
+ */
8
+ import * as React from 'react';
9
+ /**
10
+ * @hidden
11
+ */
12
+ export interface ListBoxContextValue {
13
+ listId?: string;
14
+ }
15
+ /**
16
+ * @hidden
17
+ */
18
+ export declare const ListBoxContext: React.Context<ListBoxContextValue>;
@@ -0,0 +1,8 @@
1
+ /**
2
+ * @license
3
+ *-------------------------------------------------------------------------------------------
4
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
5
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
6
+ *-------------------------------------------------------------------------------------------
7
+ */
8
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react");function c(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const a=c(r),i=a.createContext({});exports.ListBoxContext=i;
@@ -0,0 +1,12 @@
1
+ /**
2
+ * @license
3
+ *-------------------------------------------------------------------------------------------
4
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
5
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
6
+ *-------------------------------------------------------------------------------------------
7
+ */
8
+ import * as t from "react";
9
+ const o = t.createContext({});
10
+ export {
11
+ o as ListBoxContext
12
+ };
package/ListBoxToolbar.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 P=require("react"),h=require("prop-types"),k=require("@progress/kendo-react-common"),B=require("@progress/kendo-react-buttons"),j=require("@progress/kendo-react-intl"),c=require("@progress/kendo-svg-icons"),U=require("./messages/index.js");function _(a){const m=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const i in a)if(i!=="default"){const f=Object.getOwnPropertyDescriptor(a,i);Object.defineProperty(m,i,f.get?f:{enumerable:!0,get:()=>a[i]})}}return m.default=a,Object.freeze(m)}const r=_(P),L=[{name:"moveUp",iconName:"chevron-up",svgIcon:c.chevronUpIcon},{name:"moveDown",iconName:"chevron-down",svgIcon:c.chevronDownIcon},{name:"transferTo",iconName:"chevron-right",svgIcon:c.chevronRightIcon},{name:"transferFrom",iconName:"chevron-left",svgIcon:c.chevronLeftIcon},{name:"transferAllTo",iconName:"chevron-double-right",svgIcon:c.chevronDoubleRightIcon},{name:"transferAllFrom",iconName:"chevron-double-left",svgIcon:c.chevronDoubleLeftIcon},{name:"remove",iconName:"x",svgIcon:c.xIcon}],p=r.forwardRef((a,m)=>{const{tools:i,dir:f,onToolClick:w,size:C=b.size,data:d=b.data,dataConnected:n=b.dataConnected,selectedField:F=b.selectedField}=a,S=j.useLocalization(),T=r.useRef(null),x=r.useRef(null),y=r.useCallback(()=>({onToolClick:w,props:a,context:{},state:{},refs:{}}),[]);r.useImperativeHandle(x,y),r.useImperativeHandle(m,()=>x.current);const N=(t,e,s)=>{s.preventDefault(),e.focusNext(t)},R=(t,e,s)=>{s.preventDefault(),e.focusPrevious(t)},g=r.useMemo(()=>new k.Navigation({root:T,selectors:[".k-button:not([disabled])"],tabIndex:0,keyboardEvents:{keydown:{ArrowDown:N,ArrowRight:N,ArrowUp:R,ArrowLeft:R,Enter:(t,e,s)=>{t.click(),e.focusElement(e.current,t)}}}}),[]),q=r.useCallback(g.triggerKeyboardEvent.bind(g),[]);r.useEffect(()=>(g.initializeRovingTab(),()=>g.removeFocusListener()),[]);const A=t=>{switch(t.name){case"chevron-right":return c.chevronLeftIcon;case"chevron-left":return c.chevronRightIcon;case"chevron-double-right":return c.chevronDoubleLeftIcon;case"chevron-double-left":return c.chevronDoubleRightIcon}return t},E=t=>{switch(t){case"chevron-right":return"chevron-left";case"chevron-left":return"chevron-right";case"chevron-double-right":return"chevron-double-left";case"chevron-double-left":return"chevron-double-right"}return t},O=(t,e)=>{k.dispatchEvent(w,t,y(),{toolName:e})},z=t=>{let e=!0;const s=F||"selected",o=d.length,I=n.length,u=d.findIndex(l=>l[s]===!0)>=0,v=n.findIndex(l=>l[s]===!0)>=0;switch(t){case"moveUp":u?e=d.length>0?d[0].selected:!0:v?e=n.length>0?n[0].selected:!0:e=!0;break;case"moveDown":u?e=d[o-1]?d[o-1].selected:!0:v?e=n.length>0?n[I-1].selected:!0:e=!0;break;case"transferTo":e=!(n&&u);break;case"transferFrom":n?e=!(n&&v):e=!0;break;case"transferAllTo":e=!(n&&d.length>0);break;case"transferAllFrom":e=!(n&&n.length>0);break;case"remove":e=!(u||v);break}return e},D=f==="rtl";return r.createElement("div",{className:k.classNames("k-listbox-actions"),ref:T,onKeyDown:q},i&&i.map((t,e)=>{const s=L.findIndex(l=>l.name===t),o=L[s],I=z(o.name),u=`listbox.${o.name}`,v=S.toLanguageString(u,U.messages[u]);return r.createElement(B.Button,{size:C,key:e,disabled:I,"data-command":o.name,title:v,"aria-label":v,icon:D?E(o.iconName):o.iconName,svgIcon:D?A(o.svgIcon):o.svgIcon,onClick:l=>{l.preventDefault(),O(l,o.name)}})}))}),b={data:[],dataConnected:[],selectedField:"selected",size:void 0};p.propTypes={data:h.array.isRequired,dataConnected:h.array.isRequired,tools:h.array,selectedField:h.string,dir:h.string,size:h.oneOf(["small","medium","large"])};p.displayName="ListBoxToolbarInner";exports.ListBoxToolbar=p;
8
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const U=require("react"),h=require("prop-types"),p=require("@progress/kendo-react-common"),_=require("@progress/kendo-react-buttons"),H=require("@progress/kendo-react-intl"),c=require("@progress/kendo-svg-icons"),b=require("./messages/index.js"),K=require("./ListBoxContext.js");function M(a){const m=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const i in a)if(i!=="default"){const g=Object.getOwnPropertyDescriptor(a,i);Object.defineProperty(m,i,g.get?g:{enumerable:!0,get:()=>a[i]})}}return m.default=a,Object.freeze(m)}const o=M(U),A=[{name:"moveUp",iconName:"chevron-up",svgIcon:c.chevronUpIcon},{name:"moveDown",iconName:"chevron-down",svgIcon:c.chevronDownIcon},{name:"transferTo",iconName:"chevron-right",svgIcon:c.chevronRightIcon},{name:"transferFrom",iconName:"chevron-left",svgIcon:c.chevronLeftIcon},{name:"transferAllTo",iconName:"chevron-double-right",svgIcon:c.chevronDoubleRightIcon},{name:"transferAllFrom",iconName:"chevron-double-left",svgIcon:c.chevronDoubleLeftIcon},{name:"remove",iconName:"x",svgIcon:c.xIcon}],x=o.forwardRef((a,m)=>{const{tools:i,dir:g,onToolClick:w,size:F=I.size,data:d=I.data,dataConnected:n=I.dataConnected,selectedField:S=I.selectedField}=a,L=H.useLocalization(),{listId:q}=o.useContext(K.ListBoxContext),T=o.useRef(null),y=o.useRef(null),N=o.useCallback(()=>({onToolClick:w,props:a,context:{},state:{},refs:{}}),[]);o.useImperativeHandle(y,N),o.useImperativeHandle(m,()=>y.current);const R=(t,e,s)=>{s.preventDefault(),e.focusNext(t)},D=(t,e,s)=>{s.preventDefault(),e.focusPrevious(t)},f=o.useMemo(()=>new p.Navigation({root:T,selectors:[".k-button:not([disabled])"],tabIndex:0,keyboardEvents:{keydown:{ArrowDown:R,ArrowRight:R,ArrowUp:D,ArrowLeft:D,Enter:(t,e,s)=>{t.click(),e.focusElement(e.current,t)}}}}),[]),B=o.useCallback(f.triggerKeyboardEvent.bind(f),[]);o.useEffect(()=>(f.initializeRovingTab(),()=>f.removeFocusListener()),[]);const E=t=>{switch(t.name){case"chevron-right":return c.chevronLeftIcon;case"chevron-left":return c.chevronRightIcon;case"chevron-double-right":return c.chevronDoubleLeftIcon;case"chevron-double-left":return c.chevronDoubleRightIcon}return t},O=t=>{switch(t){case"chevron-right":return"chevron-left";case"chevron-left":return"chevron-right";case"chevron-double-right":return"chevron-double-left";case"chevron-double-left":return"chevron-double-right"}return t},z=(t,e)=>{p.dispatchEvent(w,t,N(),{toolName:e})},P=t=>{let e=!0;const s=S||"selected",r=d.length,k=n.length,u=d.findIndex(l=>l[s]===!0)>=0,v=n.findIndex(l=>l[s]===!0)>=0;switch(t){case"moveUp":u?e=d.length>0?d[0].selected:!0:v?e=n.length>0?n[0].selected:!0:e=!0;break;case"moveDown":u?e=d[r-1]?d[r-1].selected:!0:v?e=n.length>0?n[k-1].selected:!0:e=!0;break;case"transferTo":e=!(n&&u);break;case"transferFrom":n?e=!(n&&v):e=!0;break;case"transferAllTo":e=!(n&&d.length>0);break;case"transferAllFrom":e=!(n&&n.length>0);break;case"remove":e=!(u||v);break}return e},C=g==="rtl",j=L.toLanguageString(b.listBoxActions,b.messages[b.listBoxActions]);return o.createElement("div",{className:p.classNames("k-listbox-actions"),ref:T,onKeyDown:B,role:"toolbar","aria-label":j,"aria-controls":q},i&&i.map((t,e)=>{const s=A.findIndex(l=>l.name===t),r=A[s],k=P(r.name),u=`listbox.${r.name}`,v=L.toLanguageString(u,b.messages[u]);return o.createElement(_.Button,{size:F,key:e,disabled:k,"data-command":r.name,title:v,"aria-label":v,icon:C?O(r.iconName):r.iconName,svgIcon:C?E(r.svgIcon):r.svgIcon,onClick:l=>{l.preventDefault(),z(l,r.name)}})}))}),I={data:[],dataConnected:[],selectedField:"selected",size:void 0};x.propTypes={data:h.array.isRequired,dataConnected:h.array.isRequired,tools:h.array,selectedField:h.string,dir:h.string,size:h.oneOf(["small","medium","large"])};x.displayName="ListBoxToolbarInner";exports.ListBoxToolbar=x;
@@ -5,31 +5,32 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- import * as r from "react";
8
+ import * as n from "react";
9
9
  import d from "prop-types";
10
- import { Navigation as K, classNames as q, dispatchEvent as O } from "@progress/kendo-react-common";
11
- import { Button as M } from "@progress/kendo-react-buttons";
12
- import { useLocalization as _ } from "@progress/kendo-react-intl";
13
- import { chevronUpIcon as $, chevronDownIcon as j, chevronRightIcon as T, chevronLeftIcon as y, chevronDoubleRightIcon as D, chevronDoubleLeftIcon as F, xIcon as G } from "@progress/kendo-svg-icons";
14
- import { messages as J } from "./messages/index.mjs";
15
- const N = [
16
- { name: "moveUp", iconName: "chevron-up", svgIcon: $ },
17
- { name: "moveDown", iconName: "chevron-down", svgIcon: j },
18
- { name: "transferTo", iconName: "chevron-right", svgIcon: T },
19
- { name: "transferFrom", iconName: "chevron-left", svgIcon: y },
20
- { name: "transferAllTo", iconName: "chevron-double-right", svgIcon: D },
21
- { name: "transferAllFrom", iconName: "chevron-double-left", svgIcon: F },
22
- { name: "remove", iconName: "x", svgIcon: G }
23
- ], L = r.forwardRef((h, R) => {
10
+ import { Navigation as _, classNames as $, dispatchEvent as j } from "@progress/kendo-react-common";
11
+ import { Button as G } from "@progress/kendo-react-buttons";
12
+ import { useLocalization as J } from "@progress/kendo-react-intl";
13
+ import { chevronUpIcon as Q, chevronDownIcon as V, chevronRightIcon as C, chevronLeftIcon as D, chevronDoubleRightIcon as F, chevronDoubleLeftIcon as R, xIcon as W } from "@progress/kendo-svg-icons";
14
+ import { listBoxActions as T, messages as L } from "./messages/index.mjs";
15
+ import { ListBoxContext as X } from "./ListBoxContext.mjs";
16
+ const y = [
17
+ { name: "moveUp", iconName: "chevron-up", svgIcon: Q },
18
+ { name: "moveDown", iconName: "chevron-down", svgIcon: V },
19
+ { name: "transferTo", iconName: "chevron-right", svgIcon: C },
20
+ { name: "transferFrom", iconName: "chevron-left", svgIcon: D },
21
+ { name: "transferAllTo", iconName: "chevron-double-right", svgIcon: F },
22
+ { name: "transferAllFrom", iconName: "chevron-double-left", svgIcon: R },
23
+ { name: "remove", iconName: "x", svgIcon: W }
24
+ ], A = n.forwardRef((h, E) => {
24
25
  const {
25
26
  tools: f,
26
- dir: C,
27
+ dir: z,
27
28
  onToolClick: g,
28
- size: A = u.size,
29
+ size: B = u.size,
29
30
  data: s = u.data,
30
- dataConnected: n = u.dataConnected,
31
- selectedField: E = u.selectedField
32
- } = h, z = _(), b = r.useRef(null), p = r.useRef(null), I = r.useCallback(
31
+ dataConnected: o = u.dataConnected,
32
+ selectedField: S = u.selectedField
33
+ } = h, b = J(), { listId: P } = n.useContext(X), p = n.useRef(null), I = n.useRef(null), k = n.useCallback(
33
34
  () => ({
34
35
  onToolClick: g,
35
36
  props: h,
@@ -39,47 +40,47 @@ const N = [
39
40
  }),
40
41
  []
41
42
  );
42
- r.useImperativeHandle(p, I), r.useImperativeHandle(
43
- R,
44
- () => p.current
43
+ n.useImperativeHandle(I, k), n.useImperativeHandle(
44
+ E,
45
+ () => I.current
45
46
  );
46
- const k = (t, e, c) => {
47
- c.preventDefault(), e.focusNext(t);
48
- }, w = (t, e, c) => {
49
- c.preventDefault(), e.focusPrevious(t);
50
- }, m = r.useMemo(
51
- () => new K({
52
- root: b,
47
+ const x = (t, e, a) => {
48
+ a.preventDefault(), e.focusNext(t);
49
+ }, w = (t, e, a) => {
50
+ a.preventDefault(), e.focusPrevious(t);
51
+ }, m = n.useMemo(
52
+ () => new _({
53
+ root: p,
53
54
  selectors: [".k-button:not([disabled])"],
54
55
  tabIndex: 0,
55
56
  keyboardEvents: {
56
57
  keydown: {
57
- ArrowDown: k,
58
- ArrowRight: k,
58
+ ArrowDown: x,
59
+ ArrowRight: x,
59
60
  ArrowUp: w,
60
61
  ArrowLeft: w,
61
- Enter: (t, e, c) => {
62
+ Enter: (t, e, a) => {
62
63
  t.click(), e.focusElement(e.current, t);
63
64
  }
64
65
  }
65
66
  }
66
67
  }),
67
68
  []
68
- ), S = r.useCallback(m.triggerKeyboardEvent.bind(m), []);
69
- r.useEffect(() => (m.initializeRovingTab(), () => m.removeFocusListener()), []);
70
- const B = (t) => {
69
+ ), U = n.useCallback(m.triggerKeyboardEvent.bind(m), []);
70
+ n.useEffect(() => (m.initializeRovingTab(), () => m.removeFocusListener()), []);
71
+ const H = (t) => {
71
72
  switch (t.name) {
72
73
  case "chevron-right":
73
- return y;
74
+ return D;
74
75
  case "chevron-left":
75
- return T;
76
+ return C;
76
77
  case "chevron-double-right":
77
- return F;
78
+ return R;
78
79
  case "chevron-double-left":
79
- return D;
80
+ return F;
80
81
  }
81
82
  return t;
82
- }, P = (t) => {
83
+ }, K = (t) => {
83
84
  switch (t) {
84
85
  case "chevron-right":
85
86
  return "chevron-left";
@@ -91,62 +92,73 @@ const N = [
91
92
  return "chevron-double-right";
92
93
  }
93
94
  return t;
94
- }, U = (t, e) => {
95
- O(g, t, I(), { toolName: e });
96
- }, H = (t) => {
95
+ }, q = (t, e) => {
96
+ j(g, t, k(), { toolName: e });
97
+ }, O = (t) => {
97
98
  let e = !0;
98
- const c = E || "selected", o = s.length, v = n.length, l = s.findIndex((a) => a[c] === !0) >= 0, i = n.findIndex((a) => a[c] === !0) >= 0;
99
+ const a = S || "selected", r = s.length, v = o.length, l = s.findIndex((c) => c[a] === !0) >= 0, i = o.findIndex((c) => c[a] === !0) >= 0;
99
100
  switch (t) {
100
101
  case "moveUp":
101
- l ? e = s.length > 0 ? s[0].selected : !0 : i ? e = n.length > 0 ? n[0].selected : !0 : e = !0;
102
+ l ? e = s.length > 0 ? s[0].selected : !0 : i ? e = o.length > 0 ? o[0].selected : !0 : e = !0;
102
103
  break;
103
104
  case "moveDown":
104
- l ? e = s[o - 1] ? s[o - 1].selected : !0 : i ? e = n.length > 0 ? n[v - 1].selected : !0 : e = !0;
105
+ l ? e = s[r - 1] ? s[r - 1].selected : !0 : i ? e = o.length > 0 ? o[v - 1].selected : !0 : e = !0;
105
106
  break;
106
107
  case "transferTo":
107
- e = !(n && l);
108
+ e = !(o && l);
108
109
  break;
109
110
  case "transferFrom":
110
- n ? e = !(n && i) : e = !0;
111
+ o ? e = !(o && i) : e = !0;
111
112
  break;
112
113
  case "transferAllTo":
113
- e = !(n && s.length > 0);
114
+ e = !(o && s.length > 0);
114
115
  break;
115
116
  case "transferAllFrom":
116
- e = !(n && n.length > 0);
117
+ e = !(o && o.length > 0);
117
118
  break;
118
119
  case "remove":
119
120
  e = !(l || i);
120
121
  break;
121
122
  }
122
123
  return e;
123
- }, x = C === "rtl";
124
- return /* @__PURE__ */ r.createElement("div", { className: q("k-listbox-actions"), ref: b, onKeyDown: S }, f && f.map((t, e) => {
125
- const c = N.findIndex((a) => a.name === t), o = N[c], v = H(o.name), l = `listbox.${o.name}`, i = z.toLanguageString(l, J[l]);
126
- return /* @__PURE__ */ r.createElement(
127
- M,
128
- {
129
- size: A,
130
- key: e,
131
- disabled: v,
132
- "data-command": o.name,
133
- title: i,
134
- "aria-label": i,
135
- icon: x ? P(o.iconName) : o.iconName,
136
- svgIcon: x ? B(o.svgIcon) : o.svgIcon,
137
- onClick: (a) => {
138
- a.preventDefault(), U(a, o.name);
124
+ }, N = z === "rtl", M = b.toLanguageString(T, L[T]);
125
+ return /* @__PURE__ */ n.createElement(
126
+ "div",
127
+ {
128
+ className: $("k-listbox-actions"),
129
+ ref: p,
130
+ onKeyDown: U,
131
+ role: "toolbar",
132
+ "aria-label": M,
133
+ "aria-controls": P
134
+ },
135
+ f && f.map((t, e) => {
136
+ const a = y.findIndex((c) => c.name === t), r = y[a], v = O(r.name), l = `listbox.${r.name}`, i = b.toLanguageString(l, L[l]);
137
+ return /* @__PURE__ */ n.createElement(
138
+ G,
139
+ {
140
+ size: B,
141
+ key: e,
142
+ disabled: v,
143
+ "data-command": r.name,
144
+ title: i,
145
+ "aria-label": i,
146
+ icon: N ? K(r.iconName) : r.iconName,
147
+ svgIcon: N ? H(r.svgIcon) : r.svgIcon,
148
+ onClick: (c) => {
149
+ c.preventDefault(), q(c, r.name);
150
+ }
139
151
  }
140
- }
141
- );
142
- }));
152
+ );
153
+ })
154
+ );
143
155
  }), u = {
144
156
  data: [],
145
157
  dataConnected: [],
146
158
  selectedField: "selected",
147
159
  size: void 0
148
160
  };
149
- L.propTypes = {
161
+ A.propTypes = {
150
162
  data: d.array.isRequired,
151
163
  dataConnected: d.array.isRequired,
152
164
  tools: d.array,
@@ -154,7 +166,7 @@ L.propTypes = {
154
166
  dir: d.string,
155
167
  size: d.oneOf(["small", "medium", "large"])
156
168
  };
157
- L.displayName = "ListBoxToolbarInner";
169
+ A.displayName = "ListBoxToolbarInner";
158
170
  export {
159
- L as ListBoxToolbar
171
+ A as ListBoxToolbar
160
172
  };
@@ -12,4 +12,4 @@
12
12
  * Licensed under commercial license. See LICENSE.md in the package root for more information
13
13
  *-------------------------------------------------------------------------------------------
14
14
  */
15
- !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-react-intl"),require("@progress/kendo-react-buttons"),require("@progress/kendo-svg-icons")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-intl","@progress/kendo-react-buttons","@progress/kendo-svg-icons"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactListbox={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoReactIntl,e.KendoReactButtons,e.KendoSvgIcons)}(this,function(e,t,a,o,n,r,s){"use strict";function l(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(a){if("default"!==a){var o=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,o.get?o:{enumerable:!0,get:function(){return e[a]}})}}),t.default=e,Object.freeze(t)}var i=l(t),c=(e=>(e.TOP="top",e.BOTTOM="bottom",e.LEFT="left",e.RIGHT="right",e.NONE="none",e))(c||{});const d="listbox.moveUp",m="listbox.moveDown",u="listbox.transferTo",f="listbox.transferFrom",v="listbox.transferAllTo",p="listbox.transferAllFrom",b="listbox.remove",h="listbox.ariaLabel",g={[d]:"Move Up",[m]:"Move Down",[u]:"Transfer To",[f]:"Transfer From",[v]:"Transfer All To",[p]:"Transfer All From",[b]:"Delete",[h]:"ListBox"},x=i.forwardRef((e,t)=>{const{id:a,style:r,data:s,textField:l,className:d,valueField:m,selectedField:u,onDrop:f,onKeyDown:v,onDragStart:p,onDragLeave:b,onDragOver:x,onItemClick:k,onItemSelect:y,onKeyboardNavigate:I,size:E=D.size,draggable:w=D.draggable,toolbarPosition:T=D.toolbarPosition}=e,N=i.useRef(null),B=i.useRef(null),O=i.useRef(null),K=n.useLocalization(),R=i.useCallback(()=>({element:O.current,props:e}),[]);i.useImperativeHandle(B,R),i.useImperativeHandle(t,()=>B.current),o.useWebMcpRegister("listbox",B,e,e.webMcp);const L=a+"-accessibility-id",F=o.kendoThemeMaps.sizeMap[E]||E,A=i.useMemo(()=>new o.Navigation({root:N,selectors:[".k-list-item"],tabIndex:0,keyboardEvents:{keydown:{Space:(e,t,a)=>{const n=t.elements.indexOf(e);a.metaKey&&o.dispatchEvent(y,a,R(),{dataItem:s[n]}),o.dispatchEvent(y,a,R(),{dataItem:s[n]})},ArrowDown:(e,t,a)=>{if(a.metaKey&&a.shiftKey)o.dispatchEvent(I,a,R(),{actionName:"moveDown"});else if(a.metaKey&&!a.shiftKey)a.preventDefault(),t.focusNext(e);else if(!a.shiftKey||a.metaKey){a.preventDefault();const n=t.elements.indexOf(e),r=s[n+1];r&&(o.dispatchEvent(y,a,R(),{dataItem:r}),t.focusNext(e))}},ArrowUp:(e,t,a)=>{if(a.metaKey&&a.shiftKey)o.dispatchEvent(I,a,R(),{actionName:"moveUp"});else if(a.metaKey&&!a.shiftKey)a.preventDefault(),t.focusPrevious(e);else if(!a.shiftKey||a.metaKey){a.preventDefault();const n=t.elements.indexOf(e),r=s[n-1];r&&(o.dispatchEvent(y,a,R(),{dataItem:r}),t.focusPrevious(e))}},ArrowLeft:(e,t,a)=>{a.metaKey&&a.shiftKey?o.dispatchEvent(I,a,R(),{actionName:"transferAllFrom"}):a.metaKey&&o.dispatchEvent(I,a,R(),{actionName:"transferFrom"})},ArrowRight:(e,t,a)=>{a.metaKey&&a.shiftKey?o.dispatchEvent(I,a,R(),{actionName:"transferAllTo"}):a.metaKey&&o.dispatchEvent(I,a,R(),{actionName:"transferTo"})},Backspace:(e,t,a)=>{o.dispatchEvent(I,a,R(),{actionName:"remove"})}}}}),[s]),z=i.useCallback(A.triggerKeyboardEvent.bind(A),[s]);return i.useEffect(()=>(A.initializeRovingTab(),()=>A.removeFocusListener()),[s]),i.createElement("div",{id:a,ref:O,style:r,unselectable:"on",className:o.classNames(d,"k-listbox",{[`k-listbox-${F}`]:E},T===c.NONE||void 0===e.toolbar?`k-listbox-actions-${D.toolbarPosition}`:`k-listbox-actions-${T}`)},e.toolbar&&i.createElement(e.toolbar,null),i.createElement("div",{className:"k-list-scroller k-selectable","data-role":"selectable",ref:N,onDragOver:e=>e.preventDefault(),onDrop:t=>{t.target.classList.contains("k-list-content")&&(e.data.length>0?o.dispatchEvent(e.onDrop,t,R(),{dataItem:e.data[e.data.length-1]}):o.dispatchEvent(e.onDrop,t,R(),{dataItem:null}))},onDragLeave:e=>{b&&e.target.classList.contains("k-list-content")&&o.dispatchEvent(b,e,R(),void 0)},onKeyDown:z},i.createElement("div",{className:o.classNames("k-list",{[`k-list-${F}`]:E})},i.createElement("div",{className:"k-list-content"},i.createElement("ul",{className:"k-list-ul",role:"listbox","aria-label":"listbox-container",onKeyDown:e=>{v&&o.dispatchEvent(v,e,R(),void 0)}},s.map((t,a)=>{const n=(e=>{if(u)return!!e[u]})(t),r={className:o.classNames("k-list-item",{"k-selected":n}),role:"option",key:a,id:L+a,"aria-selected":n,"data-uid":L+a,draggable:w,onDragStart:e=>{o.dispatchEvent(p,e,R(),{dataItem:t})},onDragOver:e=>{e.preventDefault(),o.dispatchEvent(x,e,R(),{dataItem:t})},onDrop:e=>{o.dispatchEvent(f,e,R(),{dataItem:t})},onClick:e=>{o.dispatchEvent(k,e,R(),{dataItem:t})}};return e.item?i.createElement(e.item,{selected:n,dataItem:t,...r,key:r.key},i.createElement("span",{className:"k-list-item-text"},t.name)):i.createElement("li",{...r,key:r.key},i.createElement("span",{className:"k-list-item-text"},(e=>l?e[l]:e.toString())(t)))}))))),i.createElement("select",{style:{display:"none"},multiple:!0,"data-role":"listbox","aria-label":K.toLanguageString(h,g[h])},s.map((e,t)=>{const a=e[m||l];return i.createElement("option",{key:t,value:a},a)})))}),D={toolbarPosition:c.RIGHT,draggable:!0,size:void 0};x.propTypes={size:a.oneOf(["small","medium","large"]),toolbarPosition:a.oneOf(["none","top","bottom","left","right"]),textField:a.string.isRequired,valueField:a.string,selectedField:a.string,data:a.array.isRequired},x.displayName="ListBoxInner";const k=[{name:"moveUp",iconName:"chevron-up",svgIcon:s.chevronUpIcon},{name:"moveDown",iconName:"chevron-down",svgIcon:s.chevronDownIcon},{name:"transferTo",iconName:"chevron-right",svgIcon:s.chevronRightIcon},{name:"transferFrom",iconName:"chevron-left",svgIcon:s.chevronLeftIcon},{name:"transferAllTo",iconName:"chevron-double-right",svgIcon:s.chevronDoubleRightIcon},{name:"transferAllFrom",iconName:"chevron-double-left",svgIcon:s.chevronDoubleLeftIcon},{name:"remove",iconName:"x",svgIcon:s.xIcon}],y=i.forwardRef((e,t)=>{const{tools:a,dir:l,onToolClick:c,size:d=I.size,data:m=I.data,dataConnected:u=I.dataConnected,selectedField:f=I.selectedField}=e,v=n.useLocalization(),p=i.useRef(null),b=i.useRef(null),h=i.useCallback(()=>({onToolClick:c,props:e,context:{},state:{},refs:{}}),[]);i.useImperativeHandle(b,h),i.useImperativeHandle(t,()=>b.current);const x=(e,t,a)=>{a.preventDefault(),t.focusNext(e)},D=(e,t,a)=>{a.preventDefault(),t.focusPrevious(e)},y=i.useMemo(()=>new o.Navigation({root:p,selectors:[".k-button:not([disabled])"],tabIndex:0,keyboardEvents:{keydown:{ArrowDown:x,ArrowRight:x,ArrowUp:D,ArrowLeft:D,Enter:(e,t,a)=>{e.click(),t.focusElement(t.current,e)}}}}),[]),E=i.useCallback(y.triggerKeyboardEvent.bind(y),[]);i.useEffect(()=>(y.initializeRovingTab(),()=>y.removeFocusListener()),[]);const w=e=>{switch(e.name){case"chevron-right":return s.chevronLeftIcon;case"chevron-left":return s.chevronRightIcon;case"chevron-double-right":return s.chevronDoubleLeftIcon;case"chevron-double-left":return s.chevronDoubleRightIcon}return e},T=e=>{switch(e){case"chevron-right":return"chevron-left";case"chevron-left":return"chevron-right";case"chevron-double-right":return"chevron-double-left";case"chevron-double-left":return"chevron-double-right"}return e},N="rtl"===l;return i.createElement("div",{className:o.classNames("k-listbox-actions"),ref:p,onKeyDown:E},a&&a.map((e,t)=>{const a=k.findIndex(t=>t.name===e),n=k[a],s=(e=>{let t=!0;const a=f||"selected",o=m.length,n=u.length,r=m.findIndex(e=>!0===e[a])>=0,s=u.findIndex(e=>!0===e[a])>=0;switch(e){case"moveUp":t=r?!(m.length>0)||m[0].selected:!s||!(u.length>0)||u[0].selected;break;case"moveDown":t=r?!m[o-1]||m[o-1].selected:!s||!(u.length>0)||u[n-1].selected;break;case"transferTo":t=!(u&&r);break;case"transferFrom":t=!u||!(u&&s);break;case"transferAllTo":t=!(u&&m.length>0);break;case"transferAllFrom":t=!(u&&u.length>0);break;case"remove":t=!(r||s)}return t})(n.name),l=`listbox.${n.name}`,p=v.toLanguageString(l,g[l]);return i.createElement(r.Button,{size:d,key:t,disabled:s,"data-command":n.name,title:p,"aria-label":p,icon:N?T(n.iconName):n.iconName,svgIcon:N?w(n.svgIcon):n.svgIcon,onClick:e=>{e.preventDefault(),((e,t)=>{o.dispatchEvent(c,e,h(),{toolName:t})})(e,n.name)}})}))}),I={data:[],dataConnected:[],selectedField:"selected",size:void 0};y.propTypes={data:a.array.isRequired,dataConnected:a.array.isRequired,tools:a.array,selectedField:a.string,dir:a.string,size:a.oneOf(["small","medium","large"])},y.displayName="ListBoxToolbarInner";const E=(e,t,a)=>{const o=a.splice(e,1)[0];return a.splice(t,0,o),a},w=o.withIdHOC(x);w.displayName="KendoReactListBox",e.ListBox=w,e.ListBoxToolbar=y,e.moveItem=E,e.processListBoxData=(e=[],t=[],a,o)=>{let n=[],r=[],s=[];const l={listBoxOneData:e,listBoxTwoData:t};switch(a){case"moveUp":n=[...e],n.forEach((e,t)=>{e[o]&&(n=E(t,t-1,n))}),s=[...t],s.forEach((e,t)=>{e[o]&&(s=E(t,t-1,s))}),l.listBoxOneData=n,l.listBoxTwoData=s;break;case"moveDown":n=e.reverse(),n.forEach((e,t)=>{e[o]&&(n=E(t,t-1,n))}),s=t.reverse(),s.forEach((e,t)=>{e[o]&&(s=E(t,t-1,s))}),l.listBoxOneData=[...n].reverse(),l.listBoxTwoData=[...s].reverse();break;case"transferTo":n=e.filter(e=>!e[o]),r=e.filter(e=>e[o]),s=t.concat(r),l.listBoxOneData=n,l.listBoxTwoData=s;break;case"transferFrom":s=t.filter(e=>!e[o]),r=t.filter(e=>e[o]),n=e.concat(r),l.listBoxOneData=n,l.listBoxTwoData=s;break;case"transferAllTo":l.listBoxOneData=[],l.listBoxTwoData=t.concat(e);break;case"transferAllFrom":l.listBoxOneData=t.concat(e),l.listBoxTwoData=[];break;case"remove":s=t.filter(e=>!e[o]),n=e.filter(e=>!e[o]),l.listBoxOneData=n,l.listBoxTwoData=s}return l},e.processListBoxDragAndDrop=(e=[],t=[],a,o,n)=>{const r=e.findIndex(e=>e[n]===a[n]),s=t.findIndex(e=>e[n]===a[n]),l=null!==o?e.findIndex(e=>e[n]===o[n]):-1,i=null!==o?t.findIndex(e=>e[n]===o[n]):-1,c=r>=0,d=s>=0,m=l>=0,u=i>=0,f=[...e],v=[...t];return c&&m?{listBoxOneData:E(r,l,e),listBoxTwoData:t}:d&&u?{listBoxOneData:e,listBoxTwoData:E(s,i,t)}:c&&(u||null===o)?(null===o?v.push(e[r]):v.splice(i+1,0,e[r]),f.splice(r,1),{listBoxOneData:f,listBoxTwoData:v}):d&&(m||null===o)?(null===o?f.push(t[s]):f.splice(l+1,0,t[s]),v.splice(s,1),{listBoxOneData:f,listBoxTwoData:v}):{listBoxOneData:e,listBoxTwoData:t}}});
15
+ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-react-intl"),require("@progress/kendo-react-buttons"),require("@progress/kendo-svg-icons")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-intl","@progress/kendo-react-buttons","@progress/kendo-svg-icons"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactListbox={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoReactIntl,e.KendoReactButtons,e.KendoSvgIcons)}(this,function(e,t,o,a,n,r,s){"use strict";function l(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(o){if("default"!==o){var a=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,a.get?a:{enumerable:!0,get:function(){return e[o]}})}}),t.default=e,Object.freeze(t)}var i=l(t),c=(e=>(e.TOP="top",e.BOTTOM="bottom",e.LEFT="left",e.RIGHT="right",e.NONE="none",e))(c||{});const d=i.createContext({}),m="listbox.moveUp",u="listbox.moveDown",v="listbox.transferTo",f="listbox.transferFrom",p="listbox.transferAllTo",b="listbox.transferAllFrom",h="listbox.remove",g="listbox.actions",x="listbox.ariaLabel",D={[m]:"Move up",[u]:"Move down",[v]:"Move right",[f]:"Move left",[p]:"Move all right",[b]:"Move all left",[h]:"Remove",[g]:"ListBox actions",[x]:"ListBox"},k=i.forwardRef((e,t)=>{const{id:o,style:r,data:s,textField:l,className:m,valueField:u,selectedField:v,onDrop:f,onKeyDown:p,onDragStart:b,onDragLeave:h,onDragOver:g,onItemClick:k,onItemSelect:I,onKeyboardNavigate:E,size:w=y.size,draggable:N=y.draggable,toolbarPosition:T=y.toolbarPosition}=e,B=i.useRef(null),O=i.useRef(null),K=i.useRef(null),[L,R]=i.useState(0),F=n.useLocalization(),A=i.useCallback(()=>({element:K.current,props:e}),[]);i.useImperativeHandle(O,A),i.useImperativeHandle(t,()=>O.current),a.useWebMcpRegister("listbox",O,e,e.webMcp);const C=o+"-accessibility-id",z=o?`${o}-list`:void 0,M=a.kendoThemeMaps.sizeMap[w]||w,P=i.useMemo(()=>new a.Navigation({root:B,selectors:[".k-list-item"],tabIndex:0,keyboardEvents:{keydown:{Space:(e,t,o)=>{const n=t.elements.indexOf(e);o.metaKey&&a.dispatchEvent(I,o,A(),{dataItem:s[n]}),a.dispatchEvent(I,o,A(),{dataItem:s[n]})},ArrowDown:(e,t,o)=>{if(o.metaKey&&o.shiftKey)a.dispatchEvent(E,o,A(),{actionName:"moveDown"});else if(o.metaKey&&!o.shiftKey)o.preventDefault(),t.focusNext(e);else if(!o.shiftKey||o.metaKey){o.preventDefault();const n=t.elements.indexOf(e),r=s[n+1];r&&(a.dispatchEvent(I,o,A(),{dataItem:r}),t.focusNext(e))}},ArrowUp:(e,t,o)=>{if(o.metaKey&&o.shiftKey)a.dispatchEvent(E,o,A(),{actionName:"moveUp"});else if(o.metaKey&&!o.shiftKey)o.preventDefault(),t.focusPrevious(e);else if(!o.shiftKey||o.metaKey){o.preventDefault();const n=t.elements.indexOf(e),r=s[n-1];r&&(a.dispatchEvent(I,o,A(),{dataItem:r}),t.focusPrevious(e))}},ArrowLeft:(e,t,o)=>{o.metaKey&&o.shiftKey?a.dispatchEvent(E,o,A(),{actionName:"transferAllFrom"}):o.metaKey&&a.dispatchEvent(E,o,A(),{actionName:"transferFrom"})},ArrowRight:(e,t,o)=>{o.metaKey&&o.shiftKey?a.dispatchEvent(E,o,A(),{actionName:"transferAllTo"}):o.metaKey&&a.dispatchEvent(E,o,A(),{actionName:"transferTo"})},Backspace:(e,t,o)=>{a.dispatchEvent(E,o,A(),{actionName:"remove"})}}}}),[s]),q=i.useCallback(P.triggerKeyboardEvent.bind(P),[s]),S=i.useMemo(()=>({listId:z}),[z]);return i.useEffect(()=>(P.initializeRovingTab(),()=>P.removeFocusListener()),[s]),i.createElement("div",{id:o,ref:K,style:r,unselectable:"on",className:a.classNames(m,"k-listbox",{[`k-listbox-${M}`]:w},T===c.NONE||void 0===e.toolbar?`k-listbox-actions-${y.toolbarPosition}`:`k-listbox-actions-${T}`)},i.createElement(d.Provider,{value:S},e.toolbar&&i.createElement(e.toolbar,null)),i.createElement("div",{className:"k-list-scroller k-selectable","data-role":"selectable",ref:B,onDragOver:e=>e.preventDefault(),onDrop:t=>{t.target.classList.contains("k-list-content")&&(e.data.length>0?a.dispatchEvent(e.onDrop,t,A(),{dataItem:e.data[e.data.length-1]}):a.dispatchEvent(e.onDrop,t,A(),{dataItem:null}))},onDragLeave:e=>{h&&e.target.classList.contains("k-list-content")&&a.dispatchEvent(h,e,A(),void 0)},onKeyDown:q},i.createElement("div",{className:a.classNames("k-list",{[`k-list-${M}`]:w})},i.createElement("div",{className:"k-list-content"},i.createElement("ul",{id:z,className:"k-list-ul",role:"listbox","aria-label":"listbox-container",onKeyDown:e=>{p&&a.dispatchEvent(p,e,A(),void 0)}},s.map((t,o)=>{const n=(e=>{if(v)return!!e[v]})(t),r={className:a.classNames("k-list-item",{"k-selected":n,"k-focus":o===L}),role:"option",key:o,id:C+o,"aria-selected":n,"data-uid":C+o,draggable:N,onDragStart:e=>{a.dispatchEvent(b,e,A(),{dataItem:t})},onDragOver:e=>{e.preventDefault(),a.dispatchEvent(g,e,A(),{dataItem:t})},onDrop:e=>{a.dispatchEvent(f,e,A(),{dataItem:t})},onClick:e=>{a.dispatchEvent(k,e,A(),{dataItem:t})},onFocus:()=>R(o)};return e.item?i.createElement(e.item,{selected:n,dataItem:t,...r,key:r.key},i.createElement("span",{className:"k-list-item-text"},t.name)):i.createElement("li",{...r,key:r.key},i.createElement("span",{className:"k-list-item-text"},(e=>l?e[l]:e.toString())(t)))}))))),i.createElement("select",{style:{display:"none"},multiple:!0,"data-role":"listbox","aria-label":F.toLanguageString(x,D[x])},s.map((e,t)=>{const o=e[u||l];return i.createElement("option",{key:t,value:o},o)})))}),y={toolbarPosition:c.RIGHT,draggable:!0,size:void 0};k.propTypes={size:o.oneOf(["small","medium","large"]),toolbarPosition:o.oneOf(["none","top","bottom","left","right"]),textField:o.string.isRequired,valueField:o.string,selectedField:o.string,data:o.array.isRequired},k.displayName="ListBoxInner";const I=[{name:"moveUp",iconName:"chevron-up",svgIcon:s.chevronUpIcon},{name:"moveDown",iconName:"chevron-down",svgIcon:s.chevronDownIcon},{name:"transferTo",iconName:"chevron-right",svgIcon:s.chevronRightIcon},{name:"transferFrom",iconName:"chevron-left",svgIcon:s.chevronLeftIcon},{name:"transferAllTo",iconName:"chevron-double-right",svgIcon:s.chevronDoubleRightIcon},{name:"transferAllFrom",iconName:"chevron-double-left",svgIcon:s.chevronDoubleLeftIcon},{name:"remove",iconName:"x",svgIcon:s.xIcon}],E=i.forwardRef((e,t)=>{const{tools:o,dir:l,onToolClick:c,size:m=w.size,data:u=w.data,dataConnected:v=w.dataConnected,selectedField:f=w.selectedField}=e,p=n.useLocalization(),{listId:b}=i.useContext(d),h=i.useRef(null),x=i.useRef(null),k=i.useCallback(()=>({onToolClick:c,props:e,context:{},state:{},refs:{}}),[]);i.useImperativeHandle(x,k),i.useImperativeHandle(t,()=>x.current);const y=(e,t,o)=>{o.preventDefault(),t.focusNext(e)},E=(e,t,o)=>{o.preventDefault(),t.focusPrevious(e)},N=i.useMemo(()=>new a.Navigation({root:h,selectors:[".k-button:not([disabled])"],tabIndex:0,keyboardEvents:{keydown:{ArrowDown:y,ArrowRight:y,ArrowUp:E,ArrowLeft:E,Enter:(e,t,o)=>{e.click(),t.focusElement(t.current,e)}}}}),[]),T=i.useCallback(N.triggerKeyboardEvent.bind(N),[]);i.useEffect(()=>(N.initializeRovingTab(),()=>N.removeFocusListener()),[]);const B=e=>{switch(e.name){case"chevron-right":return s.chevronLeftIcon;case"chevron-left":return s.chevronRightIcon;case"chevron-double-right":return s.chevronDoubleLeftIcon;case"chevron-double-left":return s.chevronDoubleRightIcon}return e},O=e=>{switch(e){case"chevron-right":return"chevron-left";case"chevron-left":return"chevron-right";case"chevron-double-right":return"chevron-double-left";case"chevron-double-left":return"chevron-double-right"}return e},K="rtl"===l,L=p.toLanguageString(g,D[g]);return i.createElement("div",{className:a.classNames("k-listbox-actions"),ref:h,onKeyDown:T,role:"toolbar","aria-label":L,"aria-controls":b},o&&o.map((e,t)=>{const o=I.findIndex(t=>t.name===e),n=I[o],s=(e=>{let t=!0;const o=f||"selected",a=u.length,n=v.length,r=u.findIndex(e=>!0===e[o])>=0,s=v.findIndex(e=>!0===e[o])>=0;switch(e){case"moveUp":t=r?!(u.length>0)||u[0].selected:!s||!(v.length>0)||v[0].selected;break;case"moveDown":t=r?!u[a-1]||u[a-1].selected:!s||!(v.length>0)||v[n-1].selected;break;case"transferTo":t=!(v&&r);break;case"transferFrom":t=!v||!(v&&s);break;case"transferAllTo":t=!(v&&u.length>0);break;case"transferAllFrom":t=!(v&&v.length>0);break;case"remove":t=!(r||s)}return t})(n.name),l=`listbox.${n.name}`,d=p.toLanguageString(l,D[l]);return i.createElement(r.Button,{size:m,key:t,disabled:s,"data-command":n.name,title:d,"aria-label":d,icon:K?O(n.iconName):n.iconName,svgIcon:K?B(n.svgIcon):n.svgIcon,onClick:e=>{e.preventDefault(),((e,t)=>{a.dispatchEvent(c,e,k(),{toolName:t})})(e,n.name)}})}))}),w={data:[],dataConnected:[],selectedField:"selected",size:void 0};E.propTypes={data:o.array.isRequired,dataConnected:o.array.isRequired,tools:o.array,selectedField:o.string,dir:o.string,size:o.oneOf(["small","medium","large"])},E.displayName="ListBoxToolbarInner";const N=(e,t,o)=>{const a=o.splice(e,1)[0];return o.splice(t,0,a),o},T=a.withIdHOC(k);T.displayName="KendoReactListBox",e.ListBox=T,e.ListBoxToolbar=E,e.moveItem=N,e.processListBoxData=(e=[],t=[],o,a)=>{let n=[],r=[],s=[];const l={listBoxOneData:e,listBoxTwoData:t};switch(o){case"moveUp":n=[...e],n.forEach((e,t)=>{e[a]&&(n=N(t,t-1,n))}),s=[...t],s.forEach((e,t)=>{e[a]&&(s=N(t,t-1,s))}),l.listBoxOneData=n,l.listBoxTwoData=s;break;case"moveDown":n=e.reverse(),n.forEach((e,t)=>{e[a]&&(n=N(t,t-1,n))}),s=t.reverse(),s.forEach((e,t)=>{e[a]&&(s=N(t,t-1,s))}),l.listBoxOneData=[...n].reverse(),l.listBoxTwoData=[...s].reverse();break;case"transferTo":n=e.filter(e=>!e[a]),r=e.filter(e=>e[a]),s=t.concat(r),l.listBoxOneData=n,l.listBoxTwoData=s;break;case"transferFrom":s=t.filter(e=>!e[a]),r=t.filter(e=>e[a]),n=e.concat(r),l.listBoxOneData=n,l.listBoxTwoData=s;break;case"transferAllTo":l.listBoxOneData=[],l.listBoxTwoData=t.concat(e);break;case"transferAllFrom":l.listBoxOneData=t.concat(e),l.listBoxTwoData=[];break;case"remove":s=t.filter(e=>!e[a]),n=e.filter(e=>!e[a]),l.listBoxOneData=n,l.listBoxTwoData=s}return l},e.processListBoxDragAndDrop=(e=[],t=[],o,a,n)=>{const r=e.findIndex(e=>e[n]===o[n]),s=t.findIndex(e=>e[n]===o[n]),l=null!==a?e.findIndex(e=>e[n]===a[n]):-1,i=null!==a?t.findIndex(e=>e[n]===a[n]):-1,c=r>=0,d=s>=0,m=l>=0,u=i>=0,v=[...e],f=[...t];return c&&m?{listBoxOneData:N(r,l,e),listBoxTwoData:t}:d&&u?{listBoxOneData:e,listBoxTwoData:N(s,i,t)}:c&&(u||null===a)?(null===a?f.push(e[r]):f.splice(i+1,0,e[r]),v.splice(r,1),{listBoxOneData:v,listBoxTwoData:f}):d&&(m||null===a)?(null===a?v.push(t[s]):v.splice(l+1,0,t[s]),f.splice(s,1),{listBoxOneData:v,listBoxTwoData:f}):{listBoxOneData:e,listBoxTwoData:t}}});
@@ -33,6 +33,10 @@ export declare const transferAllFrom = "listbox.transferAllFrom";
33
33
  * @hidden
34
34
  */
35
35
  export declare const remove = "listbox.remove";
36
+ /**
37
+ * @hidden
38
+ */
39
+ export declare const listBoxActions = "listbox.actions";
36
40
  /**
37
41
  * @hidden
38
42
  */
@@ -48,5 +52,6 @@ export declare const messages: {
48
52
  "listbox.transferAllTo": string;
49
53
  "listbox.transferAllFrom": string;
50
54
  "listbox.remove": string;
55
+ "listbox.actions": string;
51
56
  "listbox.ariaLabel": string;
52
57
  };
package/messages/index.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 o="listbox.moveUp",r="listbox.moveDown",e="listbox.transferTo",s="listbox.transferFrom",t="listbox.transferAllTo",l="listbox.transferAllFrom",n="listbox.remove",a="listbox.ariaLabel",m={[o]:"Move Up",[r]:"Move Down",[e]:"Transfer To",[s]:"Transfer From",[t]:"Transfer All To",[l]:"Transfer All From",[n]:"Delete",[a]:"ListBox"};exports.ariaLabelListBox=a;exports.messages=m;exports.moveDown=r;exports.moveUp=o;exports.remove=n;exports.transferAllFrom=l;exports.transferAllTo=t;exports.transferFrom=s;exports.transferTo=e;
8
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o="listbox.moveUp",t="listbox.moveDown",s="listbox.transferTo",e="listbox.transferFrom",r="listbox.transferAllTo",l="listbox.transferAllFrom",n="listbox.remove",a="listbox.actions",i="listbox.ariaLabel",m={[o]:"Move up",[t]:"Move down",[s]:"Move right",[e]:"Move left",[r]:"Move all right",[l]:"Move all left",[n]:"Remove",[a]:"ListBox actions",[i]:"ListBox"};exports.ariaLabelListBox=i;exports.listBoxActions=a;exports.messages=m;exports.moveDown=t;exports.moveUp=o;exports.remove=n;exports.transferAllFrom=l;exports.transferAllTo=r;exports.transferFrom=e;exports.transferTo=s;
@@ -5,24 +5,26 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- const o = "listbox.moveUp", r = "listbox.moveDown", s = "listbox.transferTo", e = "listbox.transferFrom", t = "listbox.transferAllTo", n = "listbox.transferAllFrom", l = "listbox.remove", a = "listbox.ariaLabel", m = {
9
- [o]: "Move Up",
10
- [r]: "Move Down",
11
- [s]: "Transfer To",
12
- [e]: "Transfer From",
13
- [t]: "Transfer All To",
14
- [n]: "Transfer All From",
15
- [l]: "Delete",
8
+ const o = "listbox.moveUp", t = "listbox.moveDown", s = "listbox.transferTo", e = "listbox.transferFrom", r = "listbox.transferAllTo", l = "listbox.transferAllFrom", n = "listbox.remove", i = "listbox.actions", a = "listbox.ariaLabel", x = {
9
+ [o]: "Move up",
10
+ [t]: "Move down",
11
+ [s]: "Move right",
12
+ [e]: "Move left",
13
+ [r]: "Move all right",
14
+ [l]: "Move all left",
15
+ [n]: "Remove",
16
+ [i]: "ListBox actions",
16
17
  [a]: "ListBox"
17
18
  };
18
19
  export {
19
20
  a as ariaLabelListBox,
20
- m as messages,
21
- r as moveDown,
21
+ i as listBoxActions,
22
+ x as messages,
23
+ t as moveDown,
22
24
  o as moveUp,
23
- l as remove,
24
- n as transferAllFrom,
25
- t as transferAllTo,
25
+ n as remove,
26
+ l as transferAllFrom,
27
+ r as transferAllTo,
26
28
  e as transferFrom,
27
29
  s as transferTo
28
30
  };
@@ -6,7 +6,7 @@ export const packageMetadata = Object.freeze({
6
6
  productName: 'KendoReact',
7
7
  productCode: 'KENDOUIREACT',
8
8
  productCodes: ['KENDOUIREACT'],
9
- publishDate: 1778746087,
10
- version: '14.5.0-develop.14',
9
+ publishDate: 1778828645,
10
+ version: '14.5.0-develop.16',
11
11
  licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/components/my-license/'
12
12
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-react-listbox",
3
- "version": "14.5.0-develop.14",
3
+ "version": "14.5.0-develop.16",
4
4
  "description": "React ListBox enables you to display a list of items and manage the data between multiple lists. KendoReact ListBox package",
5
5
  "author": "Progress",
6
6
  "license": "SEE LICENSE IN LICENSE.md",
@@ -26,9 +26,9 @@
26
26
  "sideEffects": false,
27
27
  "peerDependencies": {
28
28
  "@progress/kendo-licensing": "^1.7.2",
29
- "@progress/kendo-react-buttons": "14.5.0-develop.14",
30
- "@progress/kendo-react-common": "14.5.0-develop.14",
31
- "@progress/kendo-react-intl": "14.5.0-develop.14",
29
+ "@progress/kendo-react-buttons": "14.5.0-develop.16",
30
+ "@progress/kendo-react-common": "14.5.0-develop.16",
31
+ "@progress/kendo-react-intl": "14.5.0-develop.16",
32
32
  "@progress/kendo-svg-icons": "^4.9.0 || ^5.0.0",
33
33
  "react": "^18.0.0 || ^19.0.0",
34
34
  "react-dom": "^18.0.0 || ^19.0.0"
@@ -56,7 +56,7 @@
56
56
  "package": {
57
57
  "productName": "KendoReact",
58
58
  "productCode": "KENDOUIREACT",
59
- "publishDate": 1778746087,
59
+ "publishDate": 1778828645,
60
60
  "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
61
61
  }
62
62
  },