@progress/kendo-react-layout 13.4.0-develop.5 → 14.0.0-develop.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdn/js/kendo-react-layout.js +1 -1
- package/index.d.mts +1 -0
- package/index.d.ts +1 -0
- package/index.js +1 -1
- package/index.mjs +105 -104
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +1 -1
- package/package.json +10 -10
- package/panelbar/PanelBar.d.ts +4 -65
- package/panelbar/PanelBar.js +1 -1
- package/panelbar/PanelBar.mjs +182 -161
- package/panelbar/PanelBarItem.d.ts +8 -46
- package/panelbar/PanelBarItem.js +1 -1
- package/panelbar/PanelBarItem.mjs +125 -119
- package/panelbar/interfaces/PanelBarItemClickEventArguments.d.ts +2 -2
- package/panelbar/interfaces/PanelBarItemHandle.d.ts +17 -0
- package/tabstrip/TabStrip.d.ts +13 -79
- package/tabstrip/TabStrip.js +1 -1
- package/tabstrip/TabStrip.mjs +179 -132
- package/tabstrip/TabStripContent.d.ts +1 -21
- package/tabstrip/TabStripContent.js +1 -1
- package/tabstrip/TabStripContent.mjs +75 -83
- package/tabstrip/TabStripNavigation.d.ts +1 -41
- package/tabstrip/TabStripNavigation.js +1 -1
- package/tabstrip/TabStripNavigation.mjs +159 -146
- package/tabstrip/TabStripNavigationItem.d.ts +5 -27
- package/tabstrip/TabStripNavigationItem.js +1 -1
- package/tabstrip/TabStripNavigationItem.mjs +56 -46
- package/tabstrip/TabStripTab.d.ts +1 -16
- package/tabstrip/TabStripTab.js +1 -1
- package/tabstrip/TabStripTab.mjs +3 -11
package/panelbar/PanelBar.mjs
CHANGED
|
@@ -5,212 +5,233 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import * as
|
|
9
|
-
import
|
|
10
|
-
import { PanelBarItem as
|
|
11
|
-
import {
|
|
12
|
-
import { Keys as
|
|
13
|
-
import { NavigationAction as
|
|
14
|
-
const
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
8
|
+
import * as a from "react";
|
|
9
|
+
import b from "prop-types";
|
|
10
|
+
import { PanelBarItem as L } from "./PanelBarItem.mjs";
|
|
11
|
+
import { getInitialState as J, getFirstId as Q, flatChildren as X, isArrayEqual as Y, flatVisibleChildren as Z, getFocusedChild as _, renderChildren as ee } from "./util.mjs";
|
|
12
|
+
import { Keys as m, classNames as re } from "@progress/kendo-react-common";
|
|
13
|
+
import { NavigationAction as n } from "./interfaces/NavigationAction.mjs";
|
|
14
|
+
const U = (p) => {
|
|
15
|
+
const {
|
|
16
|
+
animation: d = !0,
|
|
17
|
+
children: o,
|
|
18
|
+
dir: N,
|
|
19
|
+
selected: w,
|
|
20
|
+
expanded: O,
|
|
21
|
+
expandMode: I = "multiple",
|
|
22
|
+
className: A,
|
|
23
|
+
keepItemsMounted: T = !1,
|
|
24
|
+
onSelect: C,
|
|
25
|
+
style: D,
|
|
26
|
+
isControlled: W
|
|
27
|
+
} = p, v = a.useRef(null), E = a.useRef(void 0), x = a.useRef(null), [c, f] = a.useState(() => {
|
|
28
|
+
const l = J(p, I || "multiple");
|
|
29
|
+
return l.focused || (l.focused = Q(p)), l;
|
|
30
|
+
}), F = I || "multiple", R = w !== void 0 ? w : c.selected, h = W ? O || [] : c.expanded, S = a.useCallback((r) => {
|
|
31
|
+
x.current = window.setTimeout(() => r());
|
|
32
|
+
}, []), g = a.useCallback(
|
|
33
|
+
(r) => {
|
|
34
|
+
const l = K, s = X(a.Children.toArray(l));
|
|
35
|
+
let t, i;
|
|
36
|
+
switch (s.forEach((e) => {
|
|
37
|
+
e.props.uniquePrivateKey === (r.uniquePrivateKey || c.focused) && (t = e);
|
|
38
|
+
}), F) {
|
|
24
39
|
case "single":
|
|
25
|
-
i = [...
|
|
40
|
+
i = [...t.props.parentUniquePrivateKey, t.props.uniquePrivateKey], Y(h, i) && (t.props.parentUniquePrivateKey ? i = [...t.props.parentUniquePrivateKey] : i = []);
|
|
26
41
|
break;
|
|
27
42
|
case "multiple": {
|
|
28
|
-
i =
|
|
29
|
-
const e = i.indexOf(
|
|
30
|
-
e === -1 ? i.push(
|
|
43
|
+
i = h.slice();
|
|
44
|
+
const e = i.indexOf(t.props.uniquePrivateKey);
|
|
45
|
+
e === -1 ? i.push(t.props.uniquePrivateKey) : i.splice(e, 1);
|
|
31
46
|
break;
|
|
32
47
|
}
|
|
33
48
|
default:
|
|
34
|
-
i =
|
|
49
|
+
i = h.slice();
|
|
35
50
|
break;
|
|
36
51
|
}
|
|
37
|
-
|
|
38
|
-
target:
|
|
52
|
+
f((e) => ({ ...e, selected: t.props.uniquePrivateKey, expanded: i })), C && C({
|
|
53
|
+
target: t,
|
|
39
54
|
expandedItems: i
|
|
40
55
|
});
|
|
41
|
-
},
|
|
42
|
-
|
|
56
|
+
},
|
|
57
|
+
[o, c.focused, F, h, C]
|
|
58
|
+
), u = a.useCallback(
|
|
59
|
+
(r, l = 0, s) => {
|
|
60
|
+
const t = K, i = Z(a.Children.toArray(t)), e = _(i, l, r, c.focused, s);
|
|
43
61
|
if (e) {
|
|
44
|
-
const
|
|
45
|
-
if (s ===
|
|
46
|
-
if (
|
|
47
|
-
const
|
|
48
|
-
|
|
62
|
+
const k = h.slice();
|
|
63
|
+
if (s === n.Right && e && e.props && e.props.children && e.props.children.length > 0) {
|
|
64
|
+
if (k.push(e.props.uniquePrivateKey), f((y) => ({ ...y, expanded: [...new Set(k)] })), e.props.expanded) {
|
|
65
|
+
const y = e.props.children[0].props.uniquePrivateKey;
|
|
66
|
+
f((P) => ({ ...P, focused: y }));
|
|
49
67
|
}
|
|
50
|
-
} else if (s ===
|
|
51
|
-
const
|
|
68
|
+
} else if (s === n.Left && (e && e.props && e.props.parentUniquePrivateKey && e.props.parentUniquePrivateKey.length > 0 || e && e.props && !e.props.disabled && e.props.children && e.props.children.length > 0)) {
|
|
69
|
+
const y = e.props.parentUniquePrivateKey;
|
|
52
70
|
if (e.props.expanded) {
|
|
53
|
-
const
|
|
54
|
-
|
|
71
|
+
const P = e.props.uniquePrivateKey, q = k.indexOf(P);
|
|
72
|
+
k.splice(q, 1), f((H) => ({ ...H, expanded: k }));
|
|
55
73
|
} else if (e.props.level > 0) {
|
|
56
|
-
const
|
|
57
|
-
|
|
74
|
+
const P = e.props.parentUniquePrivateKey[y.length - 1];
|
|
75
|
+
f((q) => ({ ...q, focused: P }));
|
|
58
76
|
}
|
|
59
77
|
} else
|
|
60
|
-
|
|
78
|
+
E.current = e.props.id, f((y) => ({ ...y, focused: e.props.uniquePrivateKey }));
|
|
61
79
|
}
|
|
62
|
-
},
|
|
80
|
+
},
|
|
81
|
+
[o, c.focused, h]
|
|
82
|
+
), B = a.useCallback(
|
|
83
|
+
(r) => {
|
|
84
|
+
g(r), u(r);
|
|
85
|
+
},
|
|
86
|
+
[g, u]
|
|
87
|
+
), K = a.useMemo(() => ee({
|
|
88
|
+
animation: d,
|
|
89
|
+
keepItemsMounted: T,
|
|
90
|
+
state: { ...c, selected: R },
|
|
91
|
+
expanded: h,
|
|
92
|
+
handleSelect: B,
|
|
93
|
+
children: o
|
|
94
|
+
}), [d, T, c, R, h, o, B]), M = a.useCallback(
|
|
95
|
+
(r, l) => {
|
|
63
96
|
let s;
|
|
64
|
-
switch (
|
|
65
|
-
case
|
|
66
|
-
|
|
97
|
+
switch (l) {
|
|
98
|
+
case n.First:
|
|
99
|
+
u(r, s, n.First);
|
|
67
100
|
break;
|
|
68
|
-
case
|
|
69
|
-
|
|
101
|
+
case n.Last:
|
|
102
|
+
u(r, s, n.Last);
|
|
70
103
|
break;
|
|
71
|
-
case
|
|
72
|
-
|
|
104
|
+
case n.Left:
|
|
105
|
+
u(r, s, n.Left);
|
|
73
106
|
break;
|
|
74
|
-
case
|
|
75
|
-
|
|
107
|
+
case n.Right:
|
|
108
|
+
u(r, s, n.Right);
|
|
76
109
|
break;
|
|
77
|
-
case
|
|
78
|
-
s = -1,
|
|
110
|
+
case n.Previous:
|
|
111
|
+
s = -1, u(r, s);
|
|
79
112
|
break;
|
|
80
|
-
case
|
|
81
|
-
s = 1,
|
|
113
|
+
case n.Next:
|
|
114
|
+
s = 1, u(r, s);
|
|
82
115
|
break;
|
|
83
|
-
case
|
|
84
|
-
|
|
116
|
+
case n.Toggle:
|
|
117
|
+
g(r);
|
|
85
118
|
break;
|
|
86
119
|
}
|
|
87
|
-
},
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
120
|
+
},
|
|
121
|
+
[u, g]
|
|
122
|
+
), $ = a.useCallback(() => {
|
|
123
|
+
clearTimeout(x.current), c.wrapperFocused || f((r) => ({ ...r, wrapperFocused: !0 }));
|
|
124
|
+
}, [c.wrapperFocused]), V = a.useCallback(() => {
|
|
125
|
+
S(() => {
|
|
126
|
+
f((r) => ({ ...r, wrapperFocused: !1 }));
|
|
127
|
+
});
|
|
128
|
+
}, [S]), j = a.useCallback(
|
|
129
|
+
(r) => {
|
|
130
|
+
const l = v.current && getComputedStyle(v.current).direction === "rtl" || !1;
|
|
131
|
+
if (r.target === r.currentTarget) {
|
|
132
|
+
const s = r.keyCode;
|
|
133
|
+
let t;
|
|
98
134
|
switch (s) {
|
|
99
|
-
case
|
|
100
|
-
|
|
135
|
+
case m.left:
|
|
136
|
+
t = l ? n.Right : n.Left;
|
|
101
137
|
break;
|
|
102
|
-
case
|
|
103
|
-
|
|
138
|
+
case m.up:
|
|
139
|
+
t = n.Previous;
|
|
104
140
|
break;
|
|
105
|
-
case
|
|
106
|
-
|
|
141
|
+
case m.right:
|
|
142
|
+
t = l ? n.Left : n.Right;
|
|
107
143
|
break;
|
|
108
|
-
case
|
|
109
|
-
|
|
144
|
+
case m.down:
|
|
145
|
+
t = n.Next;
|
|
110
146
|
break;
|
|
111
|
-
case
|
|
112
|
-
|
|
147
|
+
case m.home:
|
|
148
|
+
t = n.First;
|
|
113
149
|
break;
|
|
114
|
-
case
|
|
115
|
-
|
|
150
|
+
case m.end:
|
|
151
|
+
t = n.Last;
|
|
116
152
|
break;
|
|
117
|
-
case
|
|
118
|
-
case
|
|
119
|
-
|
|
153
|
+
case m.space:
|
|
154
|
+
case m.enter:
|
|
155
|
+
t = n.Toggle;
|
|
120
156
|
break;
|
|
121
157
|
default:
|
|
122
|
-
|
|
158
|
+
t = null;
|
|
123
159
|
break;
|
|
124
160
|
}
|
|
125
|
-
|
|
161
|
+
t !== null && (r.preventDefault(), M(r, t));
|
|
126
162
|
}
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
|
|
163
|
+
},
|
|
164
|
+
[M]
|
|
165
|
+
);
|
|
166
|
+
a.useEffect(() => () => {
|
|
167
|
+
x.current && clearTimeout(x.current);
|
|
168
|
+
}, []);
|
|
169
|
+
const z = {
|
|
170
|
+
"aria-activedescendant": E.current
|
|
171
|
+
}, G = re("k-panelbar", A);
|
|
172
|
+
return /* @__PURE__ */ a.createElement(
|
|
173
|
+
"ul",
|
|
174
|
+
{
|
|
175
|
+
ref: v,
|
|
176
|
+
dir: N,
|
|
177
|
+
role: "tree",
|
|
178
|
+
tabIndex: 0,
|
|
179
|
+
onKeyDown: j,
|
|
180
|
+
onFocus: $,
|
|
181
|
+
onBlur: V,
|
|
182
|
+
className: G,
|
|
183
|
+
style: D,
|
|
184
|
+
...z
|
|
185
|
+
},
|
|
186
|
+
K
|
|
187
|
+
);
|
|
188
|
+
};
|
|
189
|
+
U.propTypes = {
|
|
152
190
|
/**
|
|
153
|
-
*
|
|
191
|
+
* A collection of `PanelBarItem` components.
|
|
154
192
|
*/
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
"
|
|
158
|
-
},
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
ref: (t) => {
|
|
163
|
-
this._element = t;
|
|
164
|
-
},
|
|
165
|
-
dir: this.props.dir,
|
|
166
|
-
role: "tree",
|
|
167
|
-
tabIndex: 0,
|
|
168
|
-
onKeyDown: this.handleKeyDown,
|
|
169
|
-
onFocus: this.handleWrapperFocus,
|
|
170
|
-
onBlur: this.handleWrapperBlur,
|
|
171
|
-
className: p,
|
|
172
|
-
style: this.props.style,
|
|
173
|
-
...a
|
|
174
|
-
},
|
|
175
|
-
this.children
|
|
176
|
-
);
|
|
177
|
-
}
|
|
178
|
-
nextTick(a) {
|
|
179
|
-
this.nextTickId = window.setTimeout(() => a());
|
|
180
|
-
}
|
|
181
|
-
};
|
|
182
|
-
h.propTypes = {
|
|
183
|
-
animation: o.bool,
|
|
184
|
-
children: function(a, p) {
|
|
185
|
-
const t = a[p];
|
|
186
|
-
if (t) {
|
|
187
|
-
if (Array.isArray(t)) {
|
|
188
|
-
for (const n of t)
|
|
189
|
-
if (!n.type || n.type !== m)
|
|
190
|
-
return new Error(
|
|
191
|
-
"PanelBar children should be either PanelBarItem or Array of PanelBarItem."
|
|
192
|
-
);
|
|
193
|
-
} else if (t.type !== m)
|
|
194
|
-
return new Error("PanelBar child should be either PanelBarItem or Array of PanelBarItem.");
|
|
195
|
-
return null;
|
|
193
|
+
children: b.oneOfType([
|
|
194
|
+
b.arrayOf(function(p, d) {
|
|
195
|
+
return p[d].type !== L ? new Error("PanelBar children should be either PanelBarItem or an array of PanelBarItem.") : null;
|
|
196
|
+
}),
|
|
197
|
+
function(p, d) {
|
|
198
|
+
const o = p[d];
|
|
199
|
+
return o && o.type !== L ? new Error("PanelBar children should be either PanelBarItem or an array of PanelBarItem.") : null;
|
|
196
200
|
}
|
|
197
|
-
|
|
201
|
+
]),
|
|
202
|
+
/**
|
|
203
|
+
* Expands the item or items that match the `selected` property while respecting the `expandMode` property (see [example]({% slug expandModes_panelbar %}#toc-single-expandMode)).
|
|
204
|
+
* To expand the item on the initial load of the PanelBar, define the `expanded` property of each PanelBarItem.
|
|
205
|
+
*/
|
|
206
|
+
selected: b.string,
|
|
207
|
+
/**
|
|
208
|
+
* Sets the expand mode of the PanelBar through the `single`, `multiple`, or `default` keywords (see [example]({% slug expandModes_panelbar %})).
|
|
209
|
+
*/
|
|
210
|
+
expandMode(p, d) {
|
|
211
|
+
const o = p[d];
|
|
212
|
+
return o !== "single" && o !== "multiple" && o !== "default" ? new Error(
|
|
213
|
+
`Invalid value '${o}' given to '${d}'. It must be either 'single', 'multiple' or 'default'.`
|
|
214
|
+
) : null;
|
|
198
215
|
},
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
216
|
+
/**
|
|
217
|
+
* Enables or disables the animation of the PanelBar items.
|
|
218
|
+
*/
|
|
219
|
+
animation: b.bool,
|
|
220
|
+
/**
|
|
221
|
+
* When enabled, keeps PanelBarItem content mounted in the DOM even when collapsed.
|
|
222
|
+
*/
|
|
223
|
+
keepItemsMounted: b.bool,
|
|
224
|
+
/**
|
|
225
|
+
* Fires when the expand mode of the PanelBar is set to `single` or `multiple`
|
|
226
|
+
* and an item is toggled (see [example]({% slug overview_panelbar %}#toc-expanded-state-management)).
|
|
227
|
+
*/
|
|
228
|
+
onSelect: b.func
|
|
229
|
+
};
|
|
230
|
+
U.defaultProps = {
|
|
209
231
|
expandMode: "multiple",
|
|
210
232
|
animation: !0,
|
|
211
233
|
keepItemsMounted: !1
|
|
212
234
|
};
|
|
213
|
-
let y = h;
|
|
214
235
|
export {
|
|
215
|
-
|
|
236
|
+
U as PanelBar
|
|
216
237
|
};
|
|
@@ -5,57 +5,19 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import { default as PropTypes } from 'prop-types';
|
|
9
8
|
import { PanelBarItemProps } from '../index.js';
|
|
9
|
+
import { PanelBarItemHandle } from './interfaces/PanelBarItemHandle.js';
|
|
10
10
|
import * as React from 'react';
|
|
11
|
-
/** @hidden */
|
|
12
|
-
interface PanelBarItemState {
|
|
13
|
-
show: boolean;
|
|
14
|
-
}
|
|
15
11
|
/**
|
|
16
12
|
* Represents the PanelBarItem component.
|
|
17
13
|
*
|
|
18
14
|
* @remarks
|
|
19
15
|
* Supported children components are: {@link PanelBarItem}.
|
|
20
16
|
*/
|
|
21
|
-
export declare
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
className: PropTypes.Requireable<string>;
|
|
29
|
-
icon: PropTypes.Requireable<string>;
|
|
30
|
-
iconClass: PropTypes.Requireable<string>;
|
|
31
|
-
imageUrl: PropTypes.Requireable<string>;
|
|
32
|
-
svgIcon: PropTypes.Requireable<PropTypes.InferProps<{
|
|
33
|
-
name: PropTypes.Validator<string>;
|
|
34
|
-
content: PropTypes.Validator<string>;
|
|
35
|
-
viewBox: PropTypes.Validator<string>;
|
|
36
|
-
}>>;
|
|
37
|
-
expanded: PropTypes.Requireable<boolean>;
|
|
38
|
-
disabled: PropTypes.Requireable<boolean>;
|
|
39
|
-
onSelect: PropTypes.Requireable<(...args: any[]) => any>;
|
|
40
|
-
selected: PropTypes.Requireable<boolean>;
|
|
41
|
-
level: PropTypes.Requireable<number>;
|
|
42
|
-
title: PropTypes.Requireable<NonNullable<string | PropTypes.ReactElementLike | null | undefined>>;
|
|
43
|
-
id: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
|
|
44
|
-
focused: PropTypes.Requireable<boolean>;
|
|
45
|
-
keepItemsMounted: PropTypes.Requireable<boolean>;
|
|
46
|
-
};
|
|
47
|
-
/**
|
|
48
|
-
* @hidden
|
|
49
|
-
*/
|
|
50
|
-
static defaultProps: {
|
|
51
|
-
title: string;
|
|
52
|
-
};
|
|
53
|
-
constructor(props: PanelBarItemProps);
|
|
54
|
-
/**
|
|
55
|
-
* @hidden
|
|
56
|
-
*/
|
|
57
|
-
render(): React.JSX.Element;
|
|
58
|
-
private handleItemClick;
|
|
59
|
-
private childFactory;
|
|
60
|
-
}
|
|
61
|
-
export {};
|
|
17
|
+
export declare const PanelBarItem: React.ForwardRefExoticComponent<Omit<PanelBarItemProps, "ref"> & React.RefAttributes<PanelBarItemHandle | null>>;
|
|
18
|
+
/**
|
|
19
|
+
* The default props of the PanelBarItem component.
|
|
20
|
+
*
|
|
21
|
+
* @hidden
|
|
22
|
+
*/
|
|
23
|
+
export declare const panelBarItemDefaultProps: Partial<PanelBarItemProps>;
|
package/panelbar/PanelBarItem.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
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=require("react"),n=require("prop-types"),i=require("@progress/kendo-react-common"),N=require("@progress/kendo-svg-icons"),G=require("@progress/kendo-react-animation");function $(a){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const r in a)if(r!=="default"){const t=Object.getOwnPropertyDescriptor(a,r);Object.defineProperty(c,r,t.get?t:{enumerable:!0,get:()=>a[r]})}}return c.default=a,Object.freeze(c)}const e=$(z);function J({imageUrl:a,icon:c,svgIcon:r,iconClass:t}){return a?e.createElement("img",{role:"presentation",className:"k-panelbar-item-icon k-image",src:a}):c||r?e.createElement(i.IconWrap,{className:"k-panelbar-item-icon",name:c,icon:r}):t?e.createElement("span",{role:"presentation",className:"k-panelbar-item-icon "+t}):null}const d=e.forwardRef((a,c)=>{const{id:r,children:t,title:E=h.title,uniquePrivateKey:u,disabled:l,selected:b,focused:C,expanded:o,className:P,level:k,headerClassName:R,animation:y,keepItemsMounted:s,onSelect:m,imageUrl:S,icon:B,svgIcon:x,iconClass:O}=a,p=e.useRef({props:a}),D=e.useRef(null);e.useImperativeHandle(p,()=>({props:a})),e.useImperativeHandle(c,()=>p.current);const[w,g]=e.useState(o||!1),T=e.useCallback(()=>{m&&!l&&m({uniquePrivateKey:u,id:r,target:p.current})},[m,l,u,r]),q=e.useCallback(f=>s?e.cloneElement(f,{...f.props,in:o}):f,[s,o]),A=e.useCallback(()=>{s&&g(!0)},[s]),j=e.useCallback(()=>{s&&g(!1)},[s]),U={role:"treeitem","aria-disabled":l,"aria-hidden":!l&&!o?"true":"false","aria-selected":!l&&b,"aria-expanded":!l&&o&&!!t},M=i.classNames("k-panelbar-item",{"k-panelbar-header":k===0,"k-expanded":o&&!!t,"k-disabled":l},`k-level-${k}`,P),_=i.classNames("k-link",{"k-selected":!l&&b,"k-focus":C},R),H={display:"block"},L=J({imageUrl:S,icon:B,svgIcon:x,iconClass:O}),F=!l&&t?e.createElement(i.IconWrap,{name:o?"chevron-up":"chevron-down",icon:o?N.chevronUpIcon:N.chevronDownIcon,className:i.classNames("k-panelbar-toggle",o?"k-panelbar-collapse":"k-panelbar-expand")}):null;let I=!1;t&&t[0]&&Array.isArray(t)&&(I=t[0].type===d);const K=s&&!w?"none":"block",v=!l&&o||s?I?e.createElement("ul",{role:"group","aria-hidden":o?"false":"true",className:"k-panelbar-group",style:{display:K}},t):t:null,W=(y===void 0||y)&&!l&&t?e.createElement(G.Reveal,{transitionEnterDuration:200,transitionExitDuration:200,key:u+"_animation",style:H,children:v,childFactory:s?q:void 0,unmountOnExit:!s,onBeforeEnter:A,onAfterExited:j}):v;return e.createElement("li",{ref:D,id:r,className:M,...U},e.createElement("span",{className:_,onClick:T},L,e.createElement("span",{className:"k-panelbar-item-text"},E),F),W)}),h={title:"Untitled"};d.propTypes={animation:n.bool,children:n.any,className:n.string,icon:n.string,iconClass:n.string,imageUrl:n.string,svgIcon:i.svgIconPropType,expanded:n.bool,disabled:n.bool,onSelect:n.func,selected:n.bool,level:n.number,title:n.oneOfType([n.string,n.element]),id:n.oneOfType([n.string,n.number]),focused:n.bool,keepItemsMounted:n.bool};d.displayName="KendoReactPanelBarItem";exports.PanelBarItem=d;exports.panelBarItemDefaultProps=h;
|