@progress/kendo-react-buttons 14.4.1 → 14.5.0-develop.10
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.d.ts +2 -2
- package/Button.js +1 -1
- package/Button.mjs +31 -33
- package/Chip/Chip.js +1 -1
- package/Chip/Chip.mjs +36 -36
- package/FloatingActionButton/FloatingActionButton.js +1 -1
- package/FloatingActionButton/FloatingActionButton.mjs +72 -82
- package/FloatingActionButton/interfaces/FloatingActionButtonProps.d.ts +1 -7
- package/FloatingActionButton/models/size.d.ts +2 -1
- package/FloatingActionButton/models/theme-color.d.ts +2 -8
- package/ListButton/DropDownButton.js +1 -1
- package/ListButton/DropDownButton.mjs +0 -2
- package/ListButton/SplitButton.js +1 -1
- package/ListButton/SplitButton.mjs +2 -4
- package/ListButton/models/ListButtonProps.d.ts +2 -2
- package/SegmentedControl/SegmentedControl.js +1 -1
- package/SegmentedControl/SegmentedControl.mjs +28 -27
- package/SpeechToTextButton/SpeechToTextButton.js +1 -1
- package/SpeechToTextButton/SpeechToTextButton.mjs +10 -10
- package/dist/cdn/js/kendo-react-buttons.js +1 -1
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +11 -6
- package/toolbar/tools/ToolbarScrollButton.js +1 -1
- package/toolbar/tools/ToolbarScrollButton.mjs +9 -9
|
@@ -7,33 +7,33 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import * as t from "react";
|
|
9
9
|
import o from "prop-types";
|
|
10
|
-
import { useZIndexContext as ye, useId as Y, useDir as
|
|
11
|
-
import { FloatingActionButtonItem as
|
|
10
|
+
import { useZIndexContext as ye, useId as Y, useDir as Ie, dispatchEvent as b, getActiveElement as ve, Keys as c, classNames as N, kendoThemeMaps as xe, ZIndexContext as Ee, getTabIndex as De, IconWrap as Ne, svgIconPropType as Re } from "@progress/kendo-react-common";
|
|
11
|
+
import { FloatingActionButtonItem as we } from "./FloatingActionButtonItem.mjs";
|
|
12
12
|
import { position as Ae, getTextDirectionClass as Fe, getPopupAlign as Oe, getAnchorAlign as ze } from "./utils.mjs";
|
|
13
13
|
import { Popup as Te } from "@progress/kendo-react-popup";
|
|
14
14
|
const Be = 2, Me = 100, ee = t.forwardRef(
|
|
15
15
|
(P, te) => {
|
|
16
16
|
const {
|
|
17
|
-
align: u =
|
|
17
|
+
align: u = C.align,
|
|
18
18
|
alignOffset: $,
|
|
19
19
|
className: K,
|
|
20
20
|
disabled: d,
|
|
21
|
-
icon:
|
|
22
|
-
svgIcon:
|
|
21
|
+
icon: R,
|
|
22
|
+
svgIcon: w,
|
|
23
23
|
iconClass: S,
|
|
24
24
|
id: W,
|
|
25
|
-
items:
|
|
25
|
+
items: s,
|
|
26
26
|
item: oe,
|
|
27
|
-
text:
|
|
28
|
-
positionMode: A =
|
|
29
|
-
size:
|
|
27
|
+
text: y,
|
|
28
|
+
positionMode: A = C.positionMode,
|
|
29
|
+
size: g = C.size,
|
|
30
30
|
style: ae,
|
|
31
|
-
rounded:
|
|
32
|
-
themeColor: F =
|
|
33
|
-
overlayStyle:
|
|
34
|
-
tabIndex:
|
|
31
|
+
rounded: I = C.rounded,
|
|
32
|
+
themeColor: F = C.themeColor,
|
|
33
|
+
overlayStyle: se,
|
|
34
|
+
tabIndex: ne,
|
|
35
35
|
accessKey: le,
|
|
36
|
-
popupSettings:
|
|
36
|
+
popupSettings: v = {},
|
|
37
37
|
modal: ie,
|
|
38
38
|
onClick: O,
|
|
39
39
|
onItemClick: Z,
|
|
@@ -56,95 +56,95 @@ const Be = 2, Me = 100, ee = t.forwardRef(
|
|
|
56
56
|
te,
|
|
57
57
|
() => U.current
|
|
58
58
|
);
|
|
59
|
-
const [i, r] = t.useState(!1), [
|
|
59
|
+
const [i, r] = t.useState(!1), [x, p] = t.useState(!1), [k, n] = t.useState(-1), de = Y() + "-button-id", T = Ie(l, P.dir), h = T === "rtl", E = Y() + "-list-id";
|
|
60
60
|
t.useEffect(() => {
|
|
61
|
-
Ae(l, u, $,
|
|
62
|
-
}, [l, u, $,
|
|
63
|
-
|
|
64
|
-
}, [
|
|
61
|
+
Ae(l, u, $, h);
|
|
62
|
+
}, [l, u, $, h]), t.useEffect(() => {
|
|
63
|
+
x && l && l.current && l.current.focus();
|
|
64
|
+
}, [x, l]);
|
|
65
65
|
const m = t.useCallback(
|
|
66
66
|
(e, a) => {
|
|
67
|
-
|
|
67
|
+
s && b(a ? H : j, e, f(), void 0);
|
|
68
68
|
},
|
|
69
|
-
[H, j,
|
|
69
|
+
[H, j, s]
|
|
70
70
|
), J = t.useCallback(
|
|
71
71
|
(e) => {
|
|
72
|
-
!e.target || d || (!
|
|
72
|
+
!e.target || d || (!s && O ? b(
|
|
73
73
|
O,
|
|
74
74
|
e,
|
|
75
75
|
f(),
|
|
76
76
|
void 0
|
|
77
|
-
) : (r(!i), p(!0),
|
|
77
|
+
) : (r(!i), p(!0), n(i ? -1 : 0), m(e, !i)));
|
|
78
78
|
},
|
|
79
|
-
[r, p,
|
|
79
|
+
[r, p, n, O, m, i, s, d]
|
|
80
80
|
), fe = t.useCallback(
|
|
81
81
|
(e) => {
|
|
82
|
-
p(!0),
|
|
82
|
+
p(!0), n(i ? 0 : -1), z && b(
|
|
83
83
|
z,
|
|
84
84
|
e,
|
|
85
85
|
f(),
|
|
86
86
|
void 0
|
|
87
87
|
);
|
|
88
88
|
},
|
|
89
|
-
[z, p,
|
|
89
|
+
[z, p, n]
|
|
90
90
|
), pe = t.useCallback(
|
|
91
91
|
(e) => {
|
|
92
|
-
p(!1), r(!1),
|
|
92
|
+
p(!1), r(!1), n(-1), b(
|
|
93
93
|
q,
|
|
94
94
|
e,
|
|
95
95
|
f(),
|
|
96
96
|
void 0
|
|
97
97
|
), i && m(e, !1);
|
|
98
98
|
},
|
|
99
|
-
[q, p, r,
|
|
99
|
+
[q, p, r, n, m]
|
|
100
100
|
), me = t.useCallback((e) => {
|
|
101
101
|
e.preventDefault();
|
|
102
102
|
}, []), B = t.useCallback(
|
|
103
103
|
(e, a) => {
|
|
104
|
-
|
|
105
|
-
itemProps:
|
|
104
|
+
s && (s[a].disabled || b(Z, e, f(), {
|
|
105
|
+
itemProps: s[a],
|
|
106
106
|
itemIndex: a
|
|
107
107
|
}));
|
|
108
108
|
},
|
|
109
109
|
[Z]
|
|
110
110
|
), be = t.useCallback(
|
|
111
111
|
(e, a) => {
|
|
112
|
-
!e.target || !
|
|
112
|
+
!e.target || !s || (n(a), r(!1), B(e, a), m(e, !1));
|
|
113
113
|
},
|
|
114
|
-
[
|
|
114
|
+
[n, r, B, m]
|
|
115
115
|
), ge = t.useCallback(
|
|
116
116
|
(e) => {
|
|
117
|
-
|
|
117
|
+
ve(document) === l.current && e.preventDefault();
|
|
118
118
|
},
|
|
119
119
|
[l]
|
|
120
120
|
), ke = t.useCallback(
|
|
121
121
|
(e) => {
|
|
122
|
-
const a =
|
|
122
|
+
const a = k, M = s ? s.length : -1;
|
|
123
123
|
if (e.altKey) {
|
|
124
|
-
!i && e.keyCode === c.down && (e.preventDefault(), r(!0),
|
|
124
|
+
!i && e.keyCode === c.down && (e.preventDefault(), r(!0), n(0)), i && e.keyCode === c.up && (e.preventDefault(), r(!1), n(-1));
|
|
125
125
|
return;
|
|
126
126
|
}
|
|
127
127
|
switch (e.keyCode) {
|
|
128
128
|
case c.enter:
|
|
129
129
|
case c.space:
|
|
130
|
-
a >= 0 && B(e, a),
|
|
130
|
+
a >= 0 && B(e, a), s || J(e), e.preventDefault(), r(!i), n(i ? -1 : 0);
|
|
131
131
|
break;
|
|
132
132
|
case c.esc:
|
|
133
|
-
e.preventDefault(), r(!1),
|
|
133
|
+
e.preventDefault(), r(!1), n(-1);
|
|
134
134
|
break;
|
|
135
135
|
case c.home:
|
|
136
|
-
e.preventDefault(),
|
|
136
|
+
e.preventDefault(), n(0);
|
|
137
137
|
break;
|
|
138
138
|
case c.end:
|
|
139
|
-
e.preventDefault(),
|
|
139
|
+
e.preventDefault(), n(M - 1);
|
|
140
140
|
break;
|
|
141
141
|
case c.down:
|
|
142
142
|
case c.right:
|
|
143
|
-
e.preventDefault(),
|
|
143
|
+
e.preventDefault(), n(a + 1 >= M ? 0 : a + 1);
|
|
144
144
|
break;
|
|
145
145
|
case c.up:
|
|
146
146
|
case c.left:
|
|
147
|
-
e.preventDefault(),
|
|
147
|
+
e.preventDefault(), n(a - 1 < 0 ? M - 1 : a - 1);
|
|
148
148
|
break;
|
|
149
149
|
}
|
|
150
150
|
b(
|
|
@@ -154,43 +154,44 @@ const Be = 2, Me = 100, ee = t.forwardRef(
|
|
|
154
154
|
void 0
|
|
155
155
|
);
|
|
156
156
|
},
|
|
157
|
-
[_,
|
|
157
|
+
[_, k, n, h, r]
|
|
158
158
|
), he = t.useMemo(
|
|
159
159
|
() => N(
|
|
160
160
|
"k-fab",
|
|
161
161
|
{
|
|
162
|
-
"k-fab-
|
|
163
|
-
"k-fab-
|
|
164
|
-
"k-fab-
|
|
162
|
+
"k-fab-xs": g === "xsmall",
|
|
163
|
+
"k-fab-sm": g === "small",
|
|
164
|
+
"k-fab-md": g === "medium",
|
|
165
|
+
"k-fab-lg": g === "large",
|
|
165
166
|
"k-disabled": d,
|
|
166
167
|
"k-pos-absolute": A === "absolute",
|
|
167
168
|
"k-pos-fixed": A === "fixed",
|
|
168
|
-
"k-focus":
|
|
169
|
-
[`k-rounded-${
|
|
169
|
+
"k-focus": x,
|
|
170
|
+
[`k-rounded-${xe.roundedMap[I] || I}`]: I,
|
|
170
171
|
[`k-fab-${F}`]: F
|
|
171
172
|
},
|
|
172
173
|
`k-${u.vertical}-${u.horizontal}`,
|
|
173
174
|
K
|
|
174
175
|
),
|
|
175
|
-
[F,
|
|
176
|
-
), Ce =
|
|
177
|
-
|
|
176
|
+
[F, g, I, d, A, u, x, K]
|
|
177
|
+
), Ce = s && s.map((e, a) => /* @__PURE__ */ t.createElement(
|
|
178
|
+
we,
|
|
178
179
|
{
|
|
179
180
|
...e,
|
|
180
181
|
key: a,
|
|
181
182
|
index: a,
|
|
182
|
-
id: `${
|
|
183
|
+
id: `${E}-${a}`,
|
|
183
184
|
disabled: d || e.disabled,
|
|
184
|
-
focused:
|
|
185
|
+
focused: k === a,
|
|
185
186
|
dataItem: e,
|
|
186
187
|
item: oe,
|
|
187
188
|
className: N(e.className, Fe(T || "ltr", u.horizontal)),
|
|
188
189
|
onClick: be,
|
|
189
190
|
onDown: ge
|
|
190
191
|
}
|
|
191
|
-
)), Q = !!((
|
|
192
|
+
)), Q = !!((R || w) && !y), V = (l.current ? l.current.offsetWidth : 0) / 2 - 32 / 2;
|
|
192
193
|
let D;
|
|
193
|
-
return
|
|
194
|
+
return R || w ? D = /* @__PURE__ */ t.createElement(Ne, { className: "k-fab-icon", name: R, icon: w }) : S ? D = /* @__PURE__ */ t.createElement("span", { role: "presentation", className: S }) : D = null, /* @__PURE__ */ t.createElement(Ee.Provider, { value: X }, /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
|
|
194
195
|
"button",
|
|
195
196
|
{
|
|
196
197
|
ref: l,
|
|
@@ -198,12 +199,12 @@ const Be = 2, Me = 100, ee = t.forwardRef(
|
|
|
198
199
|
role: "button",
|
|
199
200
|
type: "button",
|
|
200
201
|
"aria-disabled": d,
|
|
201
|
-
"aria-expanded":
|
|
202
|
-
"aria-haspopup": !!
|
|
203
|
-
"aria-label": `${
|
|
204
|
-
"aria-owns":
|
|
205
|
-
"aria-activedescendant":
|
|
206
|
-
tabIndex: De(
|
|
202
|
+
"aria-expanded": s ? i : void 0,
|
|
203
|
+
"aria-haspopup": !!s,
|
|
204
|
+
"aria-label": `${y || ""} floatingactionbutton`,
|
|
205
|
+
"aria-owns": s ? E : void 0,
|
|
206
|
+
"aria-activedescendant": k >= 0 && s ? `${E}-${k}` : void 0,
|
|
207
|
+
tabIndex: De(ne, d),
|
|
207
208
|
accessKey: le,
|
|
208
209
|
dir: T,
|
|
209
210
|
disabled: d,
|
|
@@ -217,14 +218,14 @@ const Be = 2, Me = 100, ee = t.forwardRef(
|
|
|
217
218
|
...re
|
|
218
219
|
},
|
|
219
220
|
D,
|
|
220
|
-
|
|
221
|
+
y && /* @__PURE__ */ t.createElement("span", { className: "k-fab-text" }, y)
|
|
221
222
|
), ie && i && /* @__PURE__ */ t.createElement(
|
|
222
223
|
"div",
|
|
223
224
|
{
|
|
224
225
|
className: "k-overlay",
|
|
225
226
|
style: {
|
|
226
227
|
zIndex: X,
|
|
227
|
-
...
|
|
228
|
+
...se
|
|
228
229
|
}
|
|
229
230
|
}
|
|
230
231
|
), /* @__PURE__ */ t.createElement(
|
|
@@ -233,10 +234,10 @@ const Be = 2, Me = 100, ee = t.forwardRef(
|
|
|
233
234
|
ref: ue,
|
|
234
235
|
anchor: l.current,
|
|
235
236
|
show: i,
|
|
236
|
-
animate:
|
|
237
|
-
popupClass: N("k-popup-transparent k-fab-popup",
|
|
238
|
-
anchorAlign:
|
|
239
|
-
popupAlign:
|
|
237
|
+
animate: v.animate,
|
|
238
|
+
popupClass: N("k-popup-transparent k-fab-popup", v.popupClass),
|
|
239
|
+
anchorAlign: v.anchorAlign || ze(u, h),
|
|
240
|
+
popupAlign: v.popupAlign || Oe(u, h),
|
|
240
241
|
style: { boxShadow: "none" }
|
|
241
242
|
},
|
|
242
243
|
/* @__PURE__ */ t.createElement(
|
|
@@ -245,7 +246,7 @@ const Be = 2, Me = 100, ee = t.forwardRef(
|
|
|
245
246
|
ref: ce,
|
|
246
247
|
role: "menu",
|
|
247
248
|
"aria-labelledby": W,
|
|
248
|
-
id:
|
|
249
|
+
id: E,
|
|
249
250
|
className: N("k-fab-items", {
|
|
250
251
|
"k-fab-items-bottom": u.vertical !== "bottom",
|
|
251
252
|
"k-fab-items-top": u.vertical === "bottom"
|
|
@@ -269,7 +270,7 @@ ee.propTypes = {
|
|
|
269
270
|
accessKey: o.string,
|
|
270
271
|
disabled: o.bool,
|
|
271
272
|
icon: o.string,
|
|
272
|
-
svgIcon:
|
|
273
|
+
svgIcon: Re,
|
|
273
274
|
iconClass: o.string,
|
|
274
275
|
text: o.string,
|
|
275
276
|
alignOffset: o.shape({
|
|
@@ -281,24 +282,13 @@ ee.propTypes = {
|
|
|
281
282
|
horizontal: o.oneOf(["start", "center", "end"]).isRequired
|
|
282
283
|
}),
|
|
283
284
|
positionMode: o.oneOf(["absolute", "fixed"]),
|
|
284
|
-
size: o.oneOf(["small", "medium", "large"]),
|
|
285
|
+
size: o.oneOf(["xsmall", "small", "medium", "large"]),
|
|
285
286
|
rounded: o.oneOf(["small", "medium", "large", "full", "none"]),
|
|
286
|
-
themeColor: o.oneOf([
|
|
287
|
-
"primary",
|
|
288
|
-
"secondary",
|
|
289
|
-
"tertiary",
|
|
290
|
-
"info",
|
|
291
|
-
"success",
|
|
292
|
-
"warning",
|
|
293
|
-
"error",
|
|
294
|
-
"dark",
|
|
295
|
-
"light",
|
|
296
|
-
"inverse"
|
|
297
|
-
]),
|
|
287
|
+
themeColor: o.oneOf(["base", "primary", "secondary", "tertiary"]),
|
|
298
288
|
modal: o.bool,
|
|
299
289
|
overlayStyle: o.object
|
|
300
290
|
};
|
|
301
|
-
const
|
|
291
|
+
const C = {
|
|
302
292
|
align: { vertical: "bottom", horizontal: "end" },
|
|
303
293
|
size: void 0,
|
|
304
294
|
rounded: void 0,
|
|
@@ -206,16 +206,10 @@ export interface FloatingActionButtonProps extends Omit<React.ButtonHTMLAttribut
|
|
|
206
206
|
* [see example](https://www.telerik.com/kendo-react-ui/components/buttons/floatingactionbutton/appearance).
|
|
207
207
|
*
|
|
208
208
|
* The possible values are:
|
|
209
|
+
* * `base`—Applies coloring based on the base theme color.
|
|
209
210
|
* * `primary`—Applies coloring based on the primary theme color.
|
|
210
211
|
* * `secondary`—Applies coloring based on the secondary theme color.
|
|
211
212
|
* * `tertiary`— Applies coloring based on the tertiary theme color.
|
|
212
|
-
* * `info`—Applies coloring based on the info theme color.
|
|
213
|
-
* * `success`— Applies coloring based on the success theme color.
|
|
214
|
-
* * `warning`— Applies coloring based on the warning theme color.
|
|
215
|
-
* * `error`— Applies coloring based on the error theme color.
|
|
216
|
-
* * `dark`— Applies coloring based on the dark theme color.
|
|
217
|
-
* * `light`— Applies coloring based on the light theme color.
|
|
218
|
-
* * `inverse`— Applies coloring based on the inverse theme color.
|
|
219
213
|
*
|
|
220
214
|
* @default undefined (theme-controlled)
|
|
221
215
|
* @example
|
|
@@ -9,9 +9,10 @@
|
|
|
9
9
|
* Specifies the size of the FloatingActionButton.
|
|
10
10
|
*
|
|
11
11
|
* The possible values are:
|
|
12
|
+
* * `xsmall`—Applies the smallest available spacing and icon scale.
|
|
12
13
|
* * `small`—Applies half of the default padding, e.g. `8px`.
|
|
13
14
|
* * `medium` (Default)—Applies the default padding, e.g. `16px`.
|
|
14
15
|
* * `large`—Applies one and one half of the default padding, e.g. `24px`.
|
|
15
16
|
*
|
|
16
17
|
*/
|
|
17
|
-
export type FloatingActionButtonSize = 'small' | 'medium' | 'large';
|
|
18
|
+
export type FloatingActionButtonSize = 'xsmall' | 'small' | 'medium' | 'large';
|
|
@@ -12,13 +12,7 @@
|
|
|
12
12
|
* * `primary` (Default)—Applies coloring based on the primary theme color.
|
|
13
13
|
* * `secondary`—Applies coloring based on the secondary theme color.
|
|
14
14
|
* * `tertiary`— Applies coloring based on the tertiary theme color.
|
|
15
|
-
* * `
|
|
16
|
-
* * `success`— Applies coloring based on the success theme color.
|
|
17
|
-
* * `warning`— Applies coloring based on the warning theme color.
|
|
18
|
-
* * `error`— Applies coloring based on the error theme color.
|
|
19
|
-
* * `dark`— Applies coloring based on the dark theme color.
|
|
20
|
-
* * `light`— Applies coloring based on the light theme color.
|
|
21
|
-
* * `inverse`— Applies coloring based on the inverse theme color.
|
|
15
|
+
* * `base`— Applies coloring based on the base theme color.
|
|
22
16
|
*
|
|
23
17
|
*/
|
|
24
|
-
export type FloatingActionButtonThemeColor = '
|
|
18
|
+
export type FloatingActionButtonThemeColor = 'base' | 'primary' | 'secondary' | 'tertiary';
|
|
@@ -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 N=require("react"),o=require("prop-types"),M=require("../Button.js"),e=require("@progress/kendo-react-common"),R=require("./utils/navigation.js"),A=require("./DropDownButtonItem.js"),T=require("./ButtonItem.js"),q=require("@progress/kendo-react-popup"),m=require("./utils/popup.js"),f=require("../package-metadata.js");function z(c){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const t in c)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(c,t);Object.defineProperty(i,t,s.get?s:{enumerable:!0,get:()=>c[t]})}}return i.default=c,Object.freeze(i)}const u=z(N),L=12e3,j=2e3,h=class h extends u.Component{constructor(i){super(i),this.state={opened:!1,focused:!1,focusedIndex:-1},this.mainButton=null,this.list=null,this.skipFocus=!1,this.showLicenseWatermark=!1,this.buttonsData=[],this.onKeyDown=t=>{const{focusedIndex:s}=this.state;if(t.altKey){!this.opened&&t.keyCode===e.Keys.down?(t.preventDefault(),this.setOpen(!0,t),this.setState({focusedIndex:0})):this.opened&&t.keyCode===e.Keys.up&&(t.preventDefault(),this.setState({focusedIndex:-1}),this.setOpen(!1,t));return}const n={...this.state};if(t.keyCode===e.Keys.enter||t.keyCode===e.Keys.space){t.preventDefault(),s>=0&&this.dispatchClickEvent(t,s);const a=!this.opened;this.setState({focused:!0,focusedIndex:a?0:-1}),this.setOpen(a,t);return}if(this.opened&&t.keyCode===e.Keys.esc){this.setState({focusedIndex:-1}),this.setOpen(!1,t);return}if(this.opened){const a=R.navigate(s,t.keyCode,t.altKey,this.buttonsData.length);n.focusedIndex=a;const
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("react"),o=require("prop-types"),M=require("../Button.js"),e=require("@progress/kendo-react-common"),R=require("./utils/navigation.js"),A=require("./DropDownButtonItem.js"),T=require("./ButtonItem.js"),q=require("@progress/kendo-react-popup"),m=require("./utils/popup.js"),f=require("../package-metadata.js");function z(c){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const t in c)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(c,t);Object.defineProperty(i,t,s.get?s:{enumerable:!0,get:()=>c[t]})}}return i.default=c,Object.freeze(i)}const u=z(N),L=12e3,j=2e3,h=class h extends u.Component{constructor(i){super(i),this.state={opened:!1,focused:!1,focusedIndex:-1},this.mainButton=null,this.list=null,this.skipFocus=!1,this.showLicenseWatermark=!1,this.buttonsData=[],this.onKeyDown=t=>{const{focusedIndex:s}=this.state;if(t.altKey){!this.opened&&t.keyCode===e.Keys.down?(t.preventDefault(),this.setOpen(!0,t),this.setState({focusedIndex:0})):this.opened&&t.keyCode===e.Keys.up&&(t.preventDefault(),this.setState({focusedIndex:-1}),this.setOpen(!1,t));return}const n={...this.state};if(t.keyCode===e.Keys.enter||t.keyCode===e.Keys.space){t.preventDefault(),s>=0&&this.dispatchClickEvent(t,s);const a=!this.opened;this.setState({focused:!0,focusedIndex:a?0:-1}),this.setOpen(a,t);return}if(this.opened&&t.keyCode===e.Keys.esc){this.setState({focusedIndex:-1}),this.setOpen(!1,t);return}if(this.opened){const a=R.navigate(s,t.keyCode,t.altKey,this.buttonsData.length);n.focusedIndex=a;const p=t.keyCode===e.Keys.up||t.keyCode===e.Keys.down||t.keyCode===e.Keys.left||t.keyCode===e.Keys.right;!t.altKey&&(p||t.keyCode===e.Keys.home||t.keyCode===e.Keys.end)&&t.preventDefault()}this.setState(n)},this.switchFocus=t=>{this.skipFocus=!0,t(),window.setTimeout(()=>this.skipFocus=!1,0)},this.handleFocus=t=>{this.skipFocus||(this.setState({focused:!0,focusedIndex:this.opened?0:-1}),e.dispatchEvent(this.props.onFocus,t,this,void 0))},this.handleButtonBlur=t=>{this.opened||(this.setState({focused:!1}),e.dispatchEvent(this.props.onBlur,t,this,void 0))},this.handleMenuBlur=t=>{this.skipFocus||(this.setState({focused:!1,focusedIndex:-1}),e.dispatchEvent(this.props.onBlur,t,this,void 0),setTimeout(()=>{this.setOpen(!1,t)},0))},this.setOpen=(t,s)=>{this.opened!==t&&(this.openedDuringOnChange=t,this.setState({opened:t}),s?this.dispatchPopupEvent(s,t):this.openedDuringOnChange=void 0)},this.onItemClick=(t,s)=>{this.setState({focusedIndex:-1}),this.dispatchClickEvent(t,s),this.setOpen(!1,t)},this.onItemDown=t=>{e.getActiveElement(document)===this.list&&t.preventDefault()},this.mouseDown=t=>{t.preventDefault();const s=e.getActiveElement(document);this.element&&s!==this.element&&s!==this.list&&this.element.focus()},this.onPopupClose=t=>{var n;const s=e.getActiveElement(document);this.element&&this.element.removeAttribute("tabindex"),(s===this.list||(n=this.list)!=null&&n.contains(s))&&this.switchFocus(()=>{this.element&&this.element.focus({preventScroll:!0})}),this.props.popupSettings&&this.props.popupSettings.onClose&&this.props.popupSettings.onClose.call(void 0,t)},this.listRef=t=>{this.list=t,t&&this.state.focused&&this.switchFocus(()=>{t.focus({preventScroll:!0}),this.element&&(this.element.tabIndex=-1)})},this.onClickMainButton=t=>{if(e.dispatchEvent(this.props.onClick,t,this,void 0),!this.buttonsData.length)return;const s=!this.opened;this.setState({focused:!0,focusedIndex:s?0:-1}),this.setOpen(s,t)},this.dispatchPopupEvent=(t,s)=>{e.dispatchEvent(s?this.props.onOpen:this.props.onClose,t,this,void 0),this.openedDuringOnChange=void 0},this.showLicenseWatermark=!e.validatePackage(f.packageMetadata,{component:"DropDownButton"}),this.licenseMessage=e.getLicenseMessage(f.packageMetadata)}get guid(){return this.props.id+"-accessibility-id"}get opened(){return this.openedDuringOnChange!==void 0?this.openedDuringOnChange:this.props.opened===void 0?this.state.opened:this.props.opened}render(){const i=this.isRtl(),t=this.props.unstyled&&this.props.unstyled.uDropDownButton,s=i?"rtl":void 0,{id:n,style:a,tabIndex:p,disabled:r,size:y,rounded:C,fillMode:k,themeColor:w,ariaLabel:I,title:b,accessKey:B,icon:O,svgIcon:v,iconClass:E,buttonClass:S,className:x,imageUrl:P,startIcon:K,endIcon:F}=this.props;return this.buttonsData=this.props.items||u.Children.toArray(this.props.children).filter(l=>l&&l.type===A.DropDownButtonItem).map(l=>l.props),u.createElement(u.Fragment,null,u.createElement(M.Button,{id:n,size:y,style:a,rounded:C,fillMode:k,themeColor:w,onClick:this.onClickMainButton,onMouseDown:this.mouseDown,onKeyDown:this.onKeyDown,onFocus:this.handleFocus,onBlur:this.handleButtonBlur,"aria-disabled":r?"true":void 0,tabIndex:p,accessKey:B,icon:O,svgIcon:v,iconClass:E,className:e.classNames(S,x,e.uDropDownButton.wrapper({c:t,focused:this.state.focused,disabled:r})),imageUrl:P,dir:s,ref:l=>{this.mainButton=(l==null?void 0:l.element)||null},type:"button","aria-expanded":this.opened?"true":"false","aria-label":I,"aria-controls":this.opened?this.guid:void 0,title:b,startIcon:K,endIcon:F},this.props.text),this.showLicenseWatermark&&u.createElement(e.WatermarkOverlay,{message:this.licenseMessage}),this.renderPopup(i))}componentDidMount(){(this.props.dir===void 0&&this.isRtl()||this.opened)&&this.forceUpdate()}get element(){return this.mainButton}dispatchClickEvent(i,t){this.isItemDisabled(t)||e.dispatchEvent(this.props.onItemClick,i,this,{item:this.buttonsData[t],itemIndex:t})}renderPopup(i){const{popupSettings:t={},_zIndex:s,unstyled:n}=this.props,a=s?s+j:L,p=n&&n.uDropDownButton,{focusedIndex:r}=this.state;return u.createElement(e.ZIndexContext.Provider,{value:a},u.createElement(q.Popup,{anchor:this.mainButton,show:this.opened,animate:t.animate,popupClass:e.classNames(e.uDropDownButton.popup({c:p}),t.popupClass),anchorAlign:t.anchorAlign||m.getAnchorAlign(i),popupAlign:t.popupAlign||m.getPopupAlign(i),style:i?{direction:"rtl"}:void 0,onClose:this.onPopupClose},u.createElement("ul",{role:"list",id:this.guid,tabIndex:-1,"aria-activedescendant":r>=0?`${this.guid}-${r}`:void 0,ref:this.listRef,onKeyDown:this.onKeyDown,onBlur:this.handleMenuBlur,className:e.classNames(e.uDropDownButton.ul({c:p,size:this.props.size}))},this.renderChildItems())))}renderChildItems(){const{item:i,itemRender:t,textField:s,unstyled:n}=this.props,a=n&&n.uDropDownButton;return this.buttonsData.length>0?this.buttonsData.map((p,r)=>u.createElement(T.ButtonItem,{className:e.classNames(e.uDropDownButton.item({c:a}),p.className,{"k-first":r===0},{"k-last":r===this.buttonsData.length-1}),dataItem:p,textField:s,focused:this.state.focusedIndex===r,onClick:this.onItemClick,onDown:this.onItemDown,render:t,item:i,index:r,key:r,id:`${this.guid}-${r}`})):null}isItemDisabled(i){return this.buttonsData[i]?this.buttonsData[i].disabled:this.props.disabled}isRtl(){return this.props.dir!==void 0?this.props.dir==="rtl":!!this.mainButton&&getComputedStyle(this.mainButton).direction==="rtl"}};h.propTypes={accessKey:o.string,ariaLabel:o.string,title:o.string,onFocus:o.func,onBlur:o.func,onClick:o.func,onItemClick:o.func,onOpen:o.func,onClose:o.func,items:o.arrayOf(o.any),textField:o.string,tabIndex:o.number,disabled:o.bool,icon:o.string,svgIcon:e.svgIconPropType,iconClass:o.string,imageUrl:o.string,popupSettings:o.object,itemRender:o.func,item:o.func,className:o.string,buttonClass:o.string,dir:o.string,size:o.oneOf(["small","medium","large"]),rounded:o.oneOf(["small","medium","large","full","none"]),fillMode:o.oneOf(["flat","link","outline","solid","clear"]),themeColor:o.oneOf(["base","primary","secondary","tertiary","info","success","warning","error","inverse"])},h.defaultProps={size:void 0,rounded:void 0,fillMode:void 0,themeColor:void 0};let d=h;const g=e.createPropsContext(),D=e.withIdHOC(e.withPropsContext(g,e.withUnstyledHOC(e.withZIndexContext(d))));D.displayName="KendoReactDropDownButton";exports.DropDownButton=D;exports.DropDownButtonPropsContext=g;exports.DropDownButtonWithoutContext=d;
|
|
@@ -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 g=require("react"),i=require("prop-types"),c=require("../Button.js"),s=require("@progress/kendo-react-common"),y=require("./ButtonItem.js"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),i=require("prop-types"),c=require("../Button.js"),s=require("@progress/kendo-react-common"),y=require("./ButtonItem.js"),C=require("./SplitButtonItem.js"),k=require("./utils/navigation.js"),b=require("@progress/kendo-react-popup"),m=require("./utils/popup.js"),f=require("../package-metadata.js"),D=require("@progress/kendo-svg-icons");function I(h){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const e in h)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(h,e);Object.defineProperty(o,e,t.get?t:{enumerable:!0,get:()=>h[e]})}}return o.default=h,Object.freeze(o)}const a=I(g),d=class d extends a.Component{constructor(o){super(o),this.state={focused:!1,focusedIndex:-1,opened:!1},this.wrapper=null,this.mainButton=null,this.list=null,this.skipFocus=!1,this.buttonsData=[],this.showLicenseWatermark=!1,this.onKeyDown=e=>{const{focusedIndex:t}=this.state;if(e.altKey){!this.opened&&e.keyCode===s.Keys.down?(e.preventDefault(),this.setState({focusedIndex:0}),this.setOpen(!0,e)):this.opened&&e.keyCode===s.Keys.up&&(e.preventDefault(),this.setState({focusedIndex:-1}),this.setOpen(!1,e));return}let n;if(e.keyCode===s.Keys.enter||e.keyCode===s.Keys.space){if(e.preventDefault(),this.dispatchClickEvent(e,t),t>=0){n={focusedIndex:this.opened?-1:0};const r=!this.opened;this.setOpen(r,e)}}else if(this.opened&&e.keyCode===s.Keys.esc){this.setState({focusedIndex:-1}),this.setOpen(!1,e);return}if(this.opened){const r=k.navigate(t,e.keyCode,e.altKey,this.buttonsData.length);r!==t&&(n=n||{},n.focusedIndex=r);const l=e.keyCode===s.Keys.up||e.keyCode===s.Keys.down||e.keyCode===s.Keys.left||e.keyCode===s.Keys.right;!e.altKey&&(l||e.keyCode===s.Keys.home||e.keyCode===s.Keys.end)&&e.preventDefault()}n&&this.setState(n)},this.switchFocus=e=>{this.skipFocus=!0,e(),window.setTimeout(()=>this.skipFocus=!1,0)},this.onFocus=e=>{this.skipFocus||(s.dispatchEvent(this.props.onFocus,e,this,void 0),this.setState({focused:!0}))},this.setOpen=(e,t)=>{this.opened!==e&&(this.openedDuringOnChange=e,this.setState({opened:e}),t?this.dispatchPopupEvent(t,e):this.openedDuringOnChange=void 0)},this.onItemClick=(e,t)=>{this.opened&&this.setState({focusedIndex:0}),this.dispatchClickEvent(e,t),this.setOpen(!1,e)},this.onBlur=e=>{this.skipFocus||(this.setState({focused:!1,focusedIndex:-1}),s.dispatchEvent(this.props.onBlur,e,this,void 0),setTimeout(()=>{this.setOpen(!1,e)},0))},this.onPopupClose=e=>{var n;const t=s.getActiveElement(document);this.element&&this.element.removeAttribute("tabindex"),(t===this.list||(n=this.list)!=null&&n.contains(t))&&this.switchFocus(()=>{this.element&&this.element.focus({preventScroll:!0})}),this.props.popupSettings&&this.props.popupSettings.onClose&&this.props.popupSettings.onClose.call(void 0,e)},this.listRef=e=>{this.list=e,e&&this.state.focused&&this.switchFocus(()=>{e.focus({preventScroll:!0}),this.element&&(this.element.tabIndex=-1)})},this.onSplitPartClick=e=>{if(this.buttonsData.length){const t=!this.opened;this.setState({focusedIndex:t?0:-1,focused:!0}),this.setOpen(t,e)}},this.onDownSplitPart=e=>{e.preventDefault();const t=s.getActiveElement(document);this.element&&t!==this.element&&t!==this.list&&this.element.focus()},this.onItemDown=e=>{s.getActiveElement(document)===this.list&&e.preventDefault()},this.dispatchPopupEvent=(e,t)=>{s.dispatchEvent(t?this.props.onOpen:this.props.onClose,e,this,void 0),this.openedDuringOnChange=void 0},this.showLicenseWatermark=!s.validatePackage(f.packageMetadata,{component:"SplitButton"}),this.licenseMessage=s.getLicenseMessage(f.packageMetadata)}get guid(){return this.props.id?this.props.id+"-accessibility-id":this.props.id}get opened(){return this.openedDuringOnChange!==void 0?this.openedDuringOnChange:this.props.opened===void 0?this.state.opened:this.props.opened}render(){this.buttonsData=this.props.items||a.Children.toArray(this.props.children).filter(p=>p&&p.type===C.SplitButtonItem).map(p=>p.props);const o=this.isRtl(),e=o?"rtl":void 0,{id:t,style:n,tabIndex:r,disabled:l}=this.props;return a.createElement(a.Fragment,null,a.createElement("div",{id:t,style:n,className:s.classNames("k-split-button","k-button-group",{"k-focus":this.state.focused},this.props.rounded&&`k-rounded-${s.kendoThemeMaps.roundedMap[this.props.rounded]}`,this.props.className),onKeyDown:this.onKeyDown,onFocus:this.onFocus,onBlur:this.onBlur,dir:e,ref:p=>{this.wrapper=p}},a.createElement(c.Button,{ref:p=>{this.mainButton=p&&p.element},type:"button",size:this.props.size,rounded:this.props.rounded,fillMode:this.props.fillMode,themeColor:this.props.themeColor,onClick:p=>this.onItemClick(p,-1),disabled:l||void 0,tabIndex:r,accessKey:this.props.accessKey,className:this.props.buttonClass,icon:this.props.icon,svgIcon:this.props.svgIcon,iconClass:this.props.iconClass,startIcon:this.props.startIcon,endIcon:this.props.endIcon,imageUrl:this.props.imageUrl,dir:e,"aria-disabled":l,"aria-haspopup":!0,"aria-expanded":this.opened||void 0,"aria-label":this.props.ariaLabel,"aria-controls":this.opened?this.guid:void 0,id:"button-"+this.guid,title:this.props.title},this.props.text),a.createElement(c.Button,{type:"button",size:this.props.size,rounded:this.props.rounded,fillMode:this.props.fillMode,themeColor:this.props.themeColor,icon:"chevron-down",svgIcon:D.chevronDownIcon,className:"k-split-button-arrow",disabled:l||void 0,tabIndex:-1,onClick:this.onSplitPartClick,onMouseDown:this.onDownSplitPart,onPointerDown:this.onDownSplitPart,dir:e,"aria-label":"menu toggling button"}),this.renderPopup(o)),this.showLicenseWatermark&&a.createElement(s.WatermarkOverlay,{message:this.licenseMessage}))}componentDidMount(){(this.props.dir===void 0&&this.isRtl()||this.opened)&&this.forceUpdate()}get element(){return this.mainButton}dispatchClickEvent(o,e){this.isItemDisabled(e)||(e===-1?s.dispatchEvent(this.props.onButtonClick,o,this,void 0):s.dispatchEvent(this.props.onItemClick,o,this,{item:this.buttonsData[e],itemIndex:e}))}renderPopup(o){const{popupSettings:e={}}=this.props,{focusedIndex:t}=this.state;return a.createElement(b.Popup,{anchor:this.wrapper,show:this.opened,animate:e.animate,popupClass:s.classNames("k-menu-popup",e.popupClass),anchorAlign:e.anchorAlign||m.getAnchorAlign(o),popupAlign:e.popupAlign||m.getPopupAlign(o),style:o?{direction:"rtl"}:void 0,onClose:this.onPopupClose},a.createElement("ul",{role:"menu",id:this.guid,"aria-labelledby":"button-"+this.guid,tabIndex:-1,ref:this.listRef,"aria-activedescendant":t>=0?`${this.guid}-${t}`:void 0,className:s.classNames("k-menu-group",{[`k-menu-group-${s.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size})},this.renderChildItems()))}renderChildItems(){const{item:o,itemRender:e,textField:t}=this.props;return this.buttonsData.length>0?this.buttonsData.map((n,r)=>a.createElement(y.ButtonItem,{className:s.classNames("k-menu-item",{"k-first":r===0},{"k-last":r===this.buttonsData.length-1}),dataItem:n,textField:t,focused:this.state.focusedIndex===r,onClick:this.onItemClick,onDown:this.onItemDown,render:e,item:o,key:r,index:r,id:`${this.guid}-${r}`})):null}isItemDisabled(o){return this.buttonsData[o]?this.buttonsData[o].disabled:this.props.disabled}isRtl(){return this.props.dir!==void 0?this.props.dir==="rtl":!!this.wrapper&&getComputedStyle(this.wrapper).direction==="rtl"}};d.propTypes={accessKey:i.string,ariaLabel:i.string,title:i.string,onButtonClick:i.func,onFocus:i.func,onBlur:i.func,onItemClick:i.func,onOpen:i.func,onClose:i.func,text:i.string,items:i.arrayOf(i.any),textField:i.string,tabIndex:i.number,disabled:i.bool,icon:i.string,svgIcon:s.svgIconPropType,imageUrl:i.string,popupSettings:i.object,itemRender:i.any,item:i.func,className:i.string,buttonClass:i.string,dir:i.string,size:i.oneOf(["small","medium","large"]),rounded:i.oneOf(["small","medium","large","full","none"]),fillMode:i.oneOf(["flat","link","outline","solid","clear"]),themeColor:i.oneOf(["base","primary","secondary","tertiary","info","success","warning","error","inverse"])},d.defaultProps={size:void 0,rounded:void 0,fillMode:void 0,themeColor:void 0};let u=d;exports.SplitButton=u;
|
|
@@ -15,7 +15,7 @@ import { navigate as v } from "./utils/navigation.mjs";
|
|
|
15
15
|
import { Popup as O } from "@progress/kendo-react-popup";
|
|
16
16
|
import { getPopupAlign as S, getAnchorAlign as E } from "./utils/popup.mjs";
|
|
17
17
|
import { packageMetadata as g } from "../package-metadata.mjs";
|
|
18
|
-
import {
|
|
18
|
+
import { chevronDownIcon as P } from "@progress/kendo-svg-icons";
|
|
19
19
|
const u = class u extends p.Component {
|
|
20
20
|
constructor(i) {
|
|
21
21
|
super(i), this.state = {
|
|
@@ -166,7 +166,7 @@ const u = class u extends p.Component {
|
|
|
166
166
|
rounded: this.props.rounded,
|
|
167
167
|
fillMode: this.props.fillMode,
|
|
168
168
|
themeColor: this.props.themeColor,
|
|
169
|
-
icon: "
|
|
169
|
+
icon: "chevron-down",
|
|
170
170
|
svgIcon: P,
|
|
171
171
|
className: "k-split-button-arrow",
|
|
172
172
|
disabled: h || void 0,
|
|
@@ -296,8 +296,6 @@ u.propTypes = {
|
|
|
296
296
|
"success",
|
|
297
297
|
"warning",
|
|
298
298
|
"error",
|
|
299
|
-
"dark",
|
|
300
|
-
"light",
|
|
301
299
|
"inverse"
|
|
302
300
|
])
|
|
303
301
|
}, u.defaultProps = {
|
|
@@ -212,7 +212,7 @@ export interface DropDownButtonProps extends KendoReactComponentBaseProps {
|
|
|
212
212
|
* <DropDownButton themeColor="primary" text="Actions" />
|
|
213
213
|
* ```
|
|
214
214
|
*/
|
|
215
|
-
themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | '
|
|
215
|
+
themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'inverse';
|
|
216
216
|
/**
|
|
217
217
|
* Sets an SVG icon or custom element before the content of the DropDownButton. For the custom component, we recommend using [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content)
|
|
218
218
|
* but there must be no [Interactive content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#interactive_content).
|
|
@@ -427,5 +427,5 @@ export interface SplitButtonProps extends KendoReactComponentBaseProps {
|
|
|
427
427
|
* <SplitButton themeColor="primary" text="Actions" />
|
|
428
428
|
* ```
|
|
429
429
|
*/
|
|
430
|
-
themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | '
|
|
430
|
+
themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'inverse';
|
|
431
431
|
}
|
|
@@ -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 F=require("react"),m=require("@progress/kendo-react-common");function H(c){const u=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const l in c)if(l!=="default"){const a=Object.getOwnPropertyDescriptor(c,l);Object.defineProperty(u,l,a.get?a:{enumerable:!0,get:()=>c[l]})}}return u.default=c,Object.freeze(u)}const n=H(F),R=n.forwardRef((c,u)=>{const{items:l=[],size:a,layoutMode:O="compact",value:d,onChange:b,itemTemplate:
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const F=require("react"),m=require("@progress/kendo-react-common");function H(c){const u=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const l in c)if(l!=="default"){const a=Object.getOwnPropertyDescriptor(c,l);Object.defineProperty(u,l,a.get?a:{enumerable:!0,get:()=>c[l]})}}return u.default=c,Object.freeze(u)}const n=H(F),R=n.forwardRef((c,u)=>{const{items:l=[],size:a,layoutMode:O="compact",value:d,onChange:b,itemTemplate:V,defaultValue:z,className:E,...I}=c,S=a?m.kendoThemeMaps.sizeMap[a]:void 0,k=n.useRef(null),N=n.useRef(null),[v,j]=n.useState({selectedValue:z,focusedValue:void 0}),h=d!=null?d:v.selectedValue,w=v.focusedValue,o=n.useCallback(()=>{const e=k.current,t=N.current;if(!e||!t)return;const s=e.querySelector(".k-segmented-control-button.k-selected");if(!s)return;const r=e.offsetWidth,{offsetWidth:p,offsetLeft:f}=s,g=`${f}px`,y=`${r-f-p}px`;t.style.left!==g&&(t.style.left=g),t.style.right!==y&&(t.style.right=y)},[]),i=e=>{j(t=>({...t,...e}))},T=n.useCallback(e=>t=>{var s,r;if(h===e.value){(s=e.onClick)==null||s.call(e,t);return}d===void 0&&e&&i({selectedValue:e.value}),b==null||b(e.value),(r=e.onClick)==null||r.call(e,t),o()},[d,b,o,h]),W=n.useCallback((e,t)=>s=>{i({hoveredValue:e}),t==null||t(s)},[]),x=n.useCallback(e=>t=>{i({hoveredValue:void 0}),e==null||e(t)},[]),P=n.useCallback((e,t)=>s=>{i({focusedValue:e}),t==null||t(s)},[]),q=n.useCallback(e=>t=>{i({focusedValue:void 0}),e==null||e(t)},[]);return n.useLayoutEffect(()=>{o()},[h,o]),n.useEffect(()=>{const e=k.current;if(!e||typeof ResizeObserver=="undefined")return;const t=new ResizeObserver(()=>{o()});return t.observe(e),()=>{t.disconnect()}},[o]),n.useImperativeHandle(u,()=>({element:k.current}),[]),n.createElement("div",{ref:k,className:m.classNames("k-segmented-control",S&&`k-segmented-control-${S}`,{"k-segmented-control-stretched":O==="stretch"},E),...I},n.createElement("div",{className:"k-segmented-control-thumb",ref:N,"aria-hidden":"true"}),l.map(e=>{const{value:t,disabled:s,text:r,svgIcon:p,iconClassName:f,type:g="button",onClick:y,onMouseEnter:L,onMouseLeave:M,onFocus:_,onBlur:$,...A}=e,C=h===t;return n.createElement("button",{key:t,type:g,className:m.classNames("k-segmented-control-button",{"k-selected":C,"k-hover":v.hoveredValue===t&&!s,"k-focus":w===t&&!s,"k-disabled":s}),"aria-pressed":C,disabled:s,onClick:T(e),onMouseEnter:W(t,L),onMouseLeave:x(M),onFocus:P(t,_),onBlur:q($),...A},V?V(e):n.createElement(n.Fragment,null,p&&n.createElement(m.IconWrap,{className:m.classNames("k-segmented-control-button-icon",{...f&&{[f]:C}}),icon:p}),n.createElement("span",{className:"k-segmented-control-button-text"},r)))}))});R.displayName="KendoReactSegmentedControl";exports.SegmentedControl=R;
|