@progress/kendo-react-buttons 9.0.0-develop.2 → 9.0.0-develop.3

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.
@@ -13,284 +13,255 @@ import { FloatingActionButtonItem as Ae } from "./FloatingActionButtonItem.mjs";
13
13
  import { packageMetadata as Fe } from "../package-metadata.mjs";
14
14
  import { position as Oe, getTextDirectionClass as Re, getAnchorAlign as ze, getPopupAlign as Me } from "./utils.mjs";
15
15
  import { Popup as Pe } from "@progress/kendo-react-popup";
16
- const Te = 2, Be = 100, Y = t.forwardRef((T, ee) => {
17
- Ce(Fe);
18
- const {
19
- align: u = h.align,
20
- alignOffset: B,
21
- className: $,
22
- disabled: d,
23
- icon: N,
24
- svgIcon: w,
25
- iconClass: K,
26
- id: S,
27
- items: n,
28
- item: te,
29
- text: C,
30
- positionMode: A = h.positionMode,
31
- size: y = h.size,
32
- style: oe,
33
- rounded: I = h.rounded,
34
- themeColor: F = h.themeColor,
35
- overlayStyle: ae,
36
- tabIndex: ne,
37
- accessKey: se,
38
- popupSettings: v = {},
39
- modal: le,
40
- onClick: O,
41
- onItemClick: W,
42
- onFocus: R,
43
- onBlur: Z,
44
- onKeyDown: _,
45
- onOpen: H,
46
- onClose: j,
47
- ...re
48
- } = T, L = ye(), X = L ? L + Te : Be, U = t.useRef(null), l = t.useRef(null), ie = t.useRef(null), ce = t.useRef(null), q = t.useCallback(
49
- () => {
16
+ const Te = 2, Be = 100, Y = t.forwardRef(
17
+ (T, ee) => {
18
+ Ce(Fe);
19
+ const {
20
+ align: u = h.align,
21
+ alignOffset: B,
22
+ className: $,
23
+ disabled: d,
24
+ icon: N,
25
+ svgIcon: w,
26
+ iconClass: K,
27
+ id: S,
28
+ items: n,
29
+ item: te,
30
+ text: C,
31
+ positionMode: A = h.positionMode,
32
+ size: y = h.size,
33
+ style: oe,
34
+ rounded: I = h.rounded,
35
+ themeColor: F = h.themeColor,
36
+ overlayStyle: ae,
37
+ tabIndex: ne,
38
+ accessKey: se,
39
+ popupSettings: v = {},
40
+ modal: le,
41
+ onClick: O,
42
+ onItemClick: W,
43
+ onFocus: R,
44
+ onBlur: Z,
45
+ onKeyDown: _,
46
+ onOpen: H,
47
+ onClose: j,
48
+ ...re
49
+ } = T, L = ye(), X = L ? L + Te : Be, U = t.useRef(null), l = t.useRef(null), ie = t.useRef(null), ce = t.useRef(null), q = t.useCallback(() => {
50
50
  l.current && l.current.focus();
51
- },
52
- []
53
- ), f = t.useCallback(
54
- () => ({
55
- element: l.current,
56
- focus: q
57
- }),
58
- [q]
59
- );
60
- t.useImperativeHandle(U, f), t.useImperativeHandle(ee, () => U.current);
61
- const [r, i] = t.useState(!1), [E, p] = t.useState(!1), [g, s] = t.useState(-1), ue = V() + "-button-id", z = Ie(l, T.dir), k = z === "rtl", x = V() + "-list-id";
62
- t.useEffect(
63
- () => {
51
+ }, []), f = t.useCallback(
52
+ () => ({
53
+ element: l.current,
54
+ focus: q
55
+ }),
56
+ [q]
57
+ );
58
+ t.useImperativeHandle(U, f), t.useImperativeHandle(
59
+ ee,
60
+ () => U.current
61
+ );
62
+ const [r, i] = t.useState(!1), [E, p] = t.useState(!1), [g, s] = t.useState(-1), ue = V() + "-button-id", z = Ie(l, T.dir), k = z === "rtl", x = V() + "-list-id";
63
+ t.useEffect(() => {
64
64
  Oe(l, u, B, k);
65
- },
66
- [l, u, B, k]
67
- ), t.useEffect(
68
- () => {
65
+ }, [l, u, B, k]), t.useEffect(() => {
69
66
  E && l && l.current && l.current.focus();
70
- },
71
- [E, l]
72
- );
73
- const m = t.useCallback(
74
- (e, a) => {
75
- n && b(
76
- a ? H : j,
77
- e,
78
- f(),
79
- void 0
80
- );
81
- },
82
- [H, j, n]
83
- ), G = t.useCallback(
84
- (e) => {
85
- !e.target || d || (!n && O ? b(
86
- O,
87
- e,
88
- f(),
89
- void 0
90
- ) : (i(!r), p(!0), s(r ? -1 : 0), m(e, !r)));
91
- },
92
- [
93
- i,
94
- p,
95
- s,
96
- O,
97
- m,
98
- r,
99
- n,
100
- d
101
- ]
102
- ), de = t.useCallback(
103
- (e) => {
104
- p(!0), s(r ? 0 : -1), R && b(
105
- R,
106
- e,
107
- f(),
108
- void 0
109
- );
110
- },
111
- [R, p, s]
112
- ), fe = t.useCallback(
113
- (e) => {
114
- p(!1), i(!1), s(-1), b(
115
- Z,
116
- e,
117
- f(),
118
- void 0
119
- ), r && m(e, !1);
120
- },
121
- [Z, p, i, s, m]
122
- ), pe = t.useCallback(
123
- (e) => {
67
+ }, [E, l]);
68
+ const m = t.useCallback(
69
+ (e, a) => {
70
+ n && b(a ? H : j, e, f(), void 0);
71
+ },
72
+ [H, j, n]
73
+ ), G = t.useCallback(
74
+ (e) => {
75
+ !e.target || d || (!n && O ? b(
76
+ O,
77
+ e,
78
+ f(),
79
+ void 0
80
+ ) : (i(!r), p(!0), s(r ? -1 : 0), m(e, !r)));
81
+ },
82
+ [i, p, s, O, m, r, n, d]
83
+ ), de = t.useCallback(
84
+ (e) => {
85
+ p(!0), s(r ? 0 : -1), R && b(
86
+ R,
87
+ e,
88
+ f(),
89
+ void 0
90
+ );
91
+ },
92
+ [R, p, s]
93
+ ), fe = t.useCallback(
94
+ (e) => {
95
+ p(!1), i(!1), s(-1), b(
96
+ Z,
97
+ e,
98
+ f(),
99
+ void 0
100
+ ), r && m(e, !1);
101
+ },
102
+ [Z, p, i, s, m]
103
+ ), pe = t.useCallback((e) => {
124
104
  e.preventDefault();
125
- },
126
- []
127
- ), M = t.useCallback(
128
- (e, a) => {
129
- n && (n[a].disabled || b(
130
- W,
131
- e,
132
- f(),
133
- {
105
+ }, []), M = t.useCallback(
106
+ (e, a) => {
107
+ n && (n[a].disabled || b(W, e, f(), {
134
108
  itemProps: n[a],
135
109
  itemIndex: a
110
+ }));
111
+ },
112
+ [W]
113
+ ), me = t.useCallback(
114
+ (e, a) => {
115
+ !e.target || !n || (s(a), i(!1), M(e, a), m(e, !1));
116
+ },
117
+ [s, i, M, m]
118
+ ), be = t.useCallback(
119
+ (e) => {
120
+ ve(document) === l.current && e.preventDefault();
121
+ },
122
+ [l]
123
+ ), ge = t.useCallback(
124
+ (e) => {
125
+ const a = g, P = n ? n.length : -1;
126
+ if (e.altKey) {
127
+ !r && e.keyCode === c.down && (e.preventDefault(), i(!0), s(0)), r && e.keyCode === c.up && (e.preventDefault(), i(!1), s(-1));
128
+ return;
136
129
  }
137
- ));
138
- },
139
- [W]
140
- ), me = t.useCallback(
141
- (e, a) => {
142
- !e.target || !n || (s(a), i(!1), M(e, a), m(e, !1));
143
- },
144
- [s, i, M, m]
145
- ), be = t.useCallback(
146
- (e) => {
147
- ve(document) === l.current && e.preventDefault();
148
- },
149
- [l]
150
- ), ge = t.useCallback(
151
- (e) => {
152
- const a = g, P = n ? n.length : -1;
153
- if (e.altKey) {
154
- !r && e.keyCode === c.down && (e.preventDefault(), i(!0), s(0)), r && e.keyCode === c.up && (e.preventDefault(), i(!1), s(-1));
155
- return;
156
- }
157
- switch (e.keyCode) {
158
- case c.enter:
159
- case c.space:
160
- a >= 0 && M(e, a), n || G(e), e.preventDefault(), i(!r), s(r ? -1 : 0);
161
- break;
162
- case c.esc:
163
- e.preventDefault(), i(!1), s(-1);
164
- break;
165
- case c.home:
166
- e.preventDefault(), s(0);
167
- break;
168
- case c.end:
169
- e.preventDefault(), s(P - 1);
170
- break;
171
- case c.down:
172
- case c.right:
173
- e.preventDefault(), s(a + 1 >= P ? 0 : a + 1);
174
- break;
175
- case c.up:
176
- case c.left:
177
- e.preventDefault(), s(a - 1 < 0 ? P - 1 : a - 1);
178
- break;
179
- }
180
- b(
181
- _,
182
- e,
183
- f(),
184
- void 0
185
- );
186
- },
187
- [_, g, s, k, i]
188
- ), ke = t.useMemo(
189
- () => D(
190
- "k-fab k-fab-solid",
191
- {
192
- "k-fab-sm": y === "small",
193
- "k-fab-md": y === "medium",
194
- "k-fab-lg": y === "large",
195
- "k-disabled": d,
196
- "k-pos-absolute": A === "absolute",
197
- "k-pos-fixed": A === "fixed",
198
- "k-focus": E,
199
- [`k-rounded-${Ee.roundedMap[I] || I}`]: I,
200
- [`k-fab-solid-${F}`]: F
130
+ switch (e.keyCode) {
131
+ case c.enter:
132
+ case c.space:
133
+ a >= 0 && M(e, a), n || G(e), e.preventDefault(), i(!r), s(r ? -1 : 0);
134
+ break;
135
+ case c.esc:
136
+ e.preventDefault(), i(!1), s(-1);
137
+ break;
138
+ case c.home:
139
+ e.preventDefault(), s(0);
140
+ break;
141
+ case c.end:
142
+ e.preventDefault(), s(P - 1);
143
+ break;
144
+ case c.down:
145
+ case c.right:
146
+ e.preventDefault(), s(a + 1 >= P ? 0 : a + 1);
147
+ break;
148
+ case c.up:
149
+ case c.left:
150
+ e.preventDefault(), s(a - 1 < 0 ? P - 1 : a - 1);
151
+ break;
152
+ }
153
+ b(
154
+ _,
155
+ e,
156
+ f(),
157
+ void 0
158
+ );
201
159
  },
202
- `k-${u.vertical}-${u.horizontal}`,
203
- $
204
- ),
205
- [F, y, I, d, A, u, E, $]
206
- ), he = n && n.map((e, a) => /* @__PURE__ */ t.createElement(
207
- Ae,
208
- {
209
- ...e,
210
- key: a,
211
- index: a,
212
- id: `${x}-${a}`,
213
- disabled: d || e.disabled,
214
- focused: g === a,
215
- dataItem: e,
216
- item: te,
217
- className: D(
218
- e.className,
219
- Re(z || "ltr", u.horizontal)
160
+ [_, g, s, k, i]
161
+ ), ke = t.useMemo(
162
+ () => D(
163
+ "k-fab k-fab-solid",
164
+ {
165
+ "k-fab-sm": y === "small",
166
+ "k-fab-md": y === "medium",
167
+ "k-fab-lg": y === "large",
168
+ "k-disabled": d,
169
+ "k-pos-absolute": A === "absolute",
170
+ "k-pos-fixed": A === "fixed",
171
+ "k-focus": E,
172
+ [`k-rounded-${Ee.roundedMap[I] || I}`]: I,
173
+ [`k-fab-solid-${F}`]: F
174
+ },
175
+ `k-${u.vertical}-${u.horizontal}`,
176
+ $
220
177
  ),
221
- onClick: me,
222
- onDown: be
223
- }
224
- )), J = !!((N || w) && !C), Q = (l.current ? l.current.offsetWidth : 0) / 2 - 32 / 2;
225
- return /* @__PURE__ */ t.createElement(xe.Provider, { value: X }, /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
226
- "button",
227
- {
228
- ref: l,
229
- id: S || ue,
230
- role: "button",
231
- type: "button",
232
- "aria-disabled": d,
233
- "aria-expanded": n ? r : void 0,
234
- "aria-haspopup": !!n,
235
- "aria-label": `${C || ""} floatingactionbutton`,
236
- "aria-owns": n ? x : void 0,
237
- "aria-activedescendant": g >= 0 && n ? `${x}-${g}` : void 0,
238
- tabIndex: De(ne, d),
239
- accessKey: se,
240
- dir: z,
241
- disabled: d,
242
- className: ke,
243
- style: oe,
244
- onClick: G,
245
- onMouseDown: pe,
246
- onFocus: de,
247
- onBlur: fe,
248
- onKeyDown: ge,
249
- ...re
250
- },
251
- N || w ? /* @__PURE__ */ t.createElement(Ne, { className: "k-fab-icon", name: N, icon: w }) : K ? /* @__PURE__ */ t.createElement("span", { role: "presentation", className: K }) : null,
252
- C && /* @__PURE__ */ t.createElement("span", { className: "k-fab-text" }, C)
253
- ), le && r && /* @__PURE__ */ t.createElement(
254
- "div",
255
- {
256
- className: "k-overlay",
257
- style: {
258
- zIndex: X,
259
- ...ae
178
+ [F, y, I, d, A, u, E, $]
179
+ ), he = n && n.map((e, a) => /* @__PURE__ */ t.createElement(
180
+ Ae,
181
+ {
182
+ ...e,
183
+ key: a,
184
+ index: a,
185
+ id: `${x}-${a}`,
186
+ disabled: d || e.disabled,
187
+ focused: g === a,
188
+ dataItem: e,
189
+ item: te,
190
+ className: D(e.className, Re(z || "ltr", u.horizontal)),
191
+ onClick: me,
192
+ onDown: be
260
193
  }
261
- }
262
- ), /* @__PURE__ */ t.createElement(
263
- Pe,
264
- {
265
- ref: ce,
266
- anchor: l.current,
267
- show: r,
268
- animate: v.animate,
269
- popupClass: D("k-popup-transparent k-fab-popup", v.popupClass),
270
- anchorAlign: v.anchorAlign || ze(u, k),
271
- popupAlign: v.popupAlign || Me(u, k),
272
- style: { boxShadow: "none" }
273
- },
274
- /* @__PURE__ */ t.createElement(
275
- "ul",
194
+ )), J = !!((N || w) && !C), Q = (l.current ? l.current.offsetWidth : 0) / 2 - 32 / 2;
195
+ return /* @__PURE__ */ t.createElement(xe.Provider, { value: X }, /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
196
+ "button",
197
+ {
198
+ ref: l,
199
+ id: S || ue,
200
+ role: "button",
201
+ type: "button",
202
+ "aria-disabled": d,
203
+ "aria-expanded": n ? r : void 0,
204
+ "aria-haspopup": !!n,
205
+ "aria-label": `${C || ""} floatingactionbutton`,
206
+ "aria-owns": n ? x : void 0,
207
+ "aria-activedescendant": g >= 0 && n ? `${x}-${g}` : void 0,
208
+ tabIndex: De(ne, d),
209
+ accessKey: se,
210
+ dir: z,
211
+ disabled: d,
212
+ className: ke,
213
+ style: oe,
214
+ onClick: G,
215
+ onMouseDown: pe,
216
+ onFocus: de,
217
+ onBlur: fe,
218
+ onKeyDown: ge,
219
+ ...re
220
+ },
221
+ N || w ? /* @__PURE__ */ t.createElement(Ne, { className: "k-fab-icon", name: N, icon: w }) : K ? /* @__PURE__ */ t.createElement("span", { role: "presentation", className: K }) : null,
222
+ C && /* @__PURE__ */ t.createElement("span", { className: "k-fab-text" }, C)
223
+ ), le && r && /* @__PURE__ */ t.createElement(
224
+ "div",
276
225
  {
277
- ref: ie,
278
- role: "menu",
279
- "aria-labelledby": S,
280
- id: x,
281
- className: D("k-fab-items", {
282
- "k-fab-items-bottom": u.vertical !== "bottom",
283
- "k-fab-items-top": u.vertical === "bottom"
284
- }),
226
+ className: "k-overlay",
285
227
  style: {
286
- paddingLeft: J ? Q : void 0,
287
- paddingRight: J ? Q : void 0
228
+ zIndex: X,
229
+ ...ae
288
230
  }
231
+ }
232
+ ), /* @__PURE__ */ t.createElement(
233
+ Pe,
234
+ {
235
+ ref: ce,
236
+ anchor: l.current,
237
+ show: r,
238
+ animate: v.animate,
239
+ popupClass: D("k-popup-transparent k-fab-popup", v.popupClass),
240
+ anchorAlign: v.anchorAlign || ze(u, k),
241
+ popupAlign: v.popupAlign || Me(u, k),
242
+ style: { boxShadow: "none" }
289
243
  },
290
- he
291
- )
292
- )));
293
- });
244
+ /* @__PURE__ */ t.createElement(
245
+ "ul",
246
+ {
247
+ ref: ie,
248
+ role: "menu",
249
+ "aria-labelledby": S,
250
+ id: x,
251
+ className: D("k-fab-items", {
252
+ "k-fab-items-bottom": u.vertical !== "bottom",
253
+ "k-fab-items-top": u.vertical === "bottom"
254
+ }),
255
+ style: {
256
+ paddingLeft: J ? Q : void 0,
257
+ paddingRight: J ? Q : void 0
258
+ }
259
+ },
260
+ he
261
+ )
262
+ )));
263
+ }
264
+ );
294
265
  Y.propTypes = {
295
266
  className: o.string,
296
267
  style: o.object,
@@ -26,12 +26,9 @@ const f = e.forwardRef((p, I) => {
26
26
  onDown: u,
27
27
  onClick: l,
28
28
  ...N
29
- } = p, a = e.useRef(null), d = e.useCallback(
30
- () => {
31
- a.current && a.current.focus();
32
- },
33
- []
34
- ), v = e.useCallback(
29
+ } = p, a = e.useRef(null), d = e.useCallback(() => {
30
+ a.current && a.current.focus();
31
+ }, []), v = e.useCallback(
35
32
  () => ({
36
33
  element: a.current,
37
34
  focus: d
@@ -18,10 +18,13 @@ const x = (e) => {
18
18
  "li",
19
19
  {
20
20
  id: e.id,
21
- className: i(c.li({
22
- c: n,
23
- focused: e.focused
24
- }), e.className),
21
+ className: i(
22
+ c.li({
23
+ c: n,
24
+ focused: e.focused
25
+ }),
26
+ e.className
27
+ ),
25
28
  tabIndex: -1,
26
29
  onClick: I,
27
30
  onMouseDown: e.onDown,
@@ -33,26 +36,26 @@ const x = (e) => {
33
36
  "span",
34
37
  {
35
38
  tabIndex: -1,
36
- className: i(c.link({
37
- c: n,
38
- selected: e.dataItem.selected,
39
- disabled: e.dataItem.disabled
40
- })),
39
+ className: i(
40
+ c.link({
41
+ c: n,
42
+ selected: e.dataItem.selected,
43
+ disabled: e.dataItem.disabled
44
+ })
45
+ ),
41
46
  key: "icon"
42
47
  },
43
- d ? /* @__PURE__ */ t.createElement(d, { item: e.dataItem, itemIndex: e.index }) : /* @__PURE__ */ t.createElement(t.Fragment, null, (e.dataItem.icon || e.dataItem.iconClass || e.dataItem.svgIcon) && /* @__PURE__ */ t.createElement(u, { className: e.dataItem.iconClass, name: e.dataItem.icon, icon: e.dataItem.svgIcon }), e.dataItem.imageUrl && /* @__PURE__ */ t.createElement(
44
- "img",
48
+ d ? /* @__PURE__ */ t.createElement(d, { item: e.dataItem, itemIndex: e.index }) : /* @__PURE__ */ t.createElement(t.Fragment, null, (e.dataItem.icon || e.dataItem.iconClass || e.dataItem.svgIcon) && /* @__PURE__ */ t.createElement(
49
+ u,
45
50
  {
46
- role: "presentation",
47
- alt: "",
48
- src: e.dataItem.imageUrl,
49
- className: "k-icon"
51
+ className: e.dataItem.iconClass,
52
+ name: e.dataItem.icon,
53
+ icon: e.dataItem.svgIcon
50
54
  }
51
- ), m && /* @__PURE__ */ t.createElement("span", { className: "k-menu-link-text" }, m))
55
+ ), e.dataItem.imageUrl && /* @__PURE__ */ t.createElement("img", { role: "presentation", alt: "", src: e.dataItem.imageUrl, className: "k-icon" }), m && /* @__PURE__ */ t.createElement("span", { className: "k-menu-link-text" }, m))
52
56
  )
53
57
  );
54
- return e.item !== void 0 && /* to be removed in 5.0.0 */
55
- e.render !== void 0 ? e.render.call(void 0, l, e) : l;
58
+ return e.item !== void 0 && e.render !== void 0 ? e.render.call(void 0, l, e) : l;
56
59
  };
57
60
  x.displayName = "KendoReactButtonItem";
58
61
  export {
@@ -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 client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function e(i){let t={horizontal:"left",vertical:"bottom"};return i&&(t.horizontal="right"),t}function n(i){let t={horizontal:"left",vertical:"top"};return i&&(t.horizontal="right"),t}exports.getAnchorAlign=e;exports.getPopupAlign=n;
8
+ "use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function o(n){const t={horizontal:"left",vertical:"bottom"};return n&&(t.horizontal="right"),t}function i(n){const t={horizontal:"left",vertical:"top"};return n&&(t.horizontal="right"),t}exports.getAnchorAlign=o;exports.getPopupAlign=i;
@@ -6,15 +6,15 @@
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
8
  "use client";
9
- function n(i) {
10
- let t = { horizontal: "left", vertical: "bottom" };
11
- return i && (t.horizontal = "right"), t;
9
+ function o(n) {
10
+ const t = { horizontal: "left", vertical: "bottom" };
11
+ return n && (t.horizontal = "right"), t;
12
12
  }
13
- function o(i) {
14
- let t = { horizontal: "left", vertical: "top" };
15
- return i && (t.horizontal = "right"), t;
13
+ function i(n) {
14
+ const t = { horizontal: "left", vertical: "top" };
15
+ return n && (t.horizontal = "right"), t;
16
16
  }
17
17
  export {
18
- n as getAnchorAlign,
19
- o as getPopupAlign
18
+ o as getAnchorAlign,
19
+ i as getPopupAlign
20
20
  };