@progress/kendo-react-layout 12.0.2-develop.1 → 12.0.2-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.
- package/actionsheet/ActionSheet.js +1 -1
- package/actionsheet/ActionSheet.mjs +75 -86
- package/bottomnavigation/BottomNavigation.js +1 -1
- package/bottomnavigation/BottomNavigation.mjs +49 -50
- package/dist/cdn/js/kendo-react-layout.js +1 -1
- package/index.d.mts +324 -170
- package/index.d.ts +324 -170
- package/menu/components/Menu.mjs +3 -0
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +8 -8
|
@@ -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 Q=require("react"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Q=require("react"),u=require("prop-types"),W=require("@progress/kendo-react-animation"),A=require("@progress/kendo-react-common"),K=require("./ActionSheetItem.js"),F=require("./ActionSheetHeader.js"),X=require("./ActionSheetFooter.js"),Y=require("./ActionSheetContent.js"),H=require("./ActionSheetView.js");function Z(e){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const f=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(d,r,f.get?f:{enumerable:!0,get:()=>e[r]})}}return d.default=e,Object.freeze(d)}const n=Z(Q),R=n.forwardRef((e,d)=>{var q,_;const{navigatableElements:r=k.navigatableElements,navigatable:f=k.navigatable,position:V=k.position,animationDuration:l=300,prefixActions:N,suffixActions:g,filter:w}=e,L=(t,a,i)=>{i.preventDefault(),i.shiftKey?a.focusPrevious(t):a.focusNext(t)},M=(t,a,i)=>{if(t.ariaDisabled)return;const s=t.className&&t.className.indexOf?t.className.indexOf("k-actionsheet-item")!==-1:!1,x=a.elements.filter(y=>y.className.indexOf("k-actionsheet-item")!==-1);if(s&&e.onItemSelect){i.preventDefault();const y=e.items[x.indexOf(t)];e.onItemSelect.call(void 0,{syntheticEvent:i,item:y,title:y&&y.title})}e.animation||h()},$=(t,a,i)=>{e.onClose&&(i.preventDefault(),e.onClose.call(void 0,i)),e.animation||h()},h=()=>{b({show:!1})},B=t=>{f&&v.current.triggerKeyboardEvent(t)},z=t=>{e.onClose&&e.onClose.call(void 0,t),e.animation||h()},C=t=>{e.onItemSelect&&e.onItemSelect.call(void 0,t),e.animation||h()},U=t=>{const a={},i=[];return n.Children.forEach(t,s=>{s&&(s.type.displayName===H.ActionSheetViewDisplayName?i.push(s):a[s.type.displayName]=s)}),i.length>0?i:a},I=n.useRef(null),E=n.useRef(null);n.useImperativeHandle(I,()=>({props:e,element:E.current})),n.useImperativeHandle(d,()=>I.current);const v=n.useRef(void 0),D=n.useRef({bottom:"0",width:"100%"}),O=n.useRef(void 0),[o,G]=n.useState({show:!1,slide:!1}),b=t=>{G(a=>({...a,...t}))};n.useEffect(()=>{e.expand&&!o.show&&b({show:!0})},[]),n.useEffect(()=>{const t=E.current;if(e.expand&&!o.show&&b({show:!0}),e.expand&&o.show&&!o.slide&&b({slide:!0}),!e.expand&&o.show&&o.slide&&b({slide:!1}),O!==o&&o.slide&&t&&!e.className&&(t.style.setProperty("--kendo-actionsheet-height","auto"),t.style.setProperty("--kendo-actionsheet-max-height","none")),t&&f){const i=[".k-actionsheet-item",...[".k-actionsheet-footer",".k-actionsheet-content",".k-actionsheet-view",".k-actionsheet-titlebar"].map(s=>A.FOCUSABLE_ELEMENTS.concat(r).map(x=>`${s} ${x}`)).flat()];v.current=new A.Navigation({tabIndex:e.tabIndex||0,root:E,rovingTabIndex:!1,selectors:i,keyboardEvents:{keydown:{Tab:L,Enter:M,Escape:$}}}),v.current.focusElement(v.current.first,null)}O.current={...o}});const T="k-actionsheet-title",P=T,c=(q=e.items)==null?void 0:q.filter(t=>!t.group||t.group==="top"),S=(_=e.items)==null?void 0:_.filter(t=>t.group==="bottom"),J=c&&c.length>0&&S&&S.length>0,m=U(e.children),j=o.slide&&n.createElement("div",{className:A.classNames(`k-actionsheet k-actionsheet-${V}`,e.className),role:"dialog","aria-modal":"true",style:e.style,"aria-hidden":!1,"aria-labelledby":P,ref:E,onKeyDown:B},Array.isArray(m)?n.createElement(n.Fragment,null,m.map(t=>t)):n.createElement(H.ActionSheetView,null,m[F.headerDisplayName]&&!e.title&&!e.subTitle&&m[F.headerDisplayName],(e.title||e.subTitle||N||g||w)&&n.createElement("div",{className:"k-actionsheet-titlebar"},n.createElement("div",{className:"k-actionsheet-titlebar-group"},N&&n.createElement("div",{className:"k-actionsheet-actions"},N),n.createElement("div",{className:T,id:P},n.createElement("div",{className:"k-text-center"},e.title),e.subTitle&&n.createElement("div",{className:"k-actionsheet-subtitle k-text-center"},e.subTitle)),g&&n.createElement("div",{className:"k-actionsheet-actions"},g)),w&&n.createElement("div",{className:"k-actionsheet-titlebar-group k-actionsheet-filter"},w)),m[Y.contentDisplayName]||n.createElement("div",{className:"k-actionsheet-content"},n.createElement("div",{className:"k-list-ul",role:"group"},c&&c.map((t,a)=>n.createElement(K.ActionSheetItem,{...t,id:a,key:a,item:t,onClick:C})),J&&n.createElement("hr",{className:"k-hr"}),S&&S.map((t,a)=>n.createElement(K.ActionSheetItem,{...t,id:a+((c==null?void 0:c.length)||0),key:a,item:t,onClick:C})))),m[X.footerDisplayName]));return n.createElement(n.Fragment,null,e.expand||o.show?n.createElement("div",{className:"k-actionsheet-container"},n.createElement("div",{className:"k-overlay",onClick:z}),e.animation?n.createElement(W.Animation,{transitionName:o.slide?"slide-up":"slide-down",onExited:h,transitionEnterDuration:typeof l=="object"&&Object.keys(l).length>0&&l.openDuration?Number(l.openDuration):Number(l),transitionExitDuration:typeof l=="object"&&Object.keys(l).length>0&&l.closeDuration?Number(l.closeDuration):Number(l),animationEnteringStyle:e.animationStyles||D.current,animationEnteredStyle:e.animationStyles||D.current,animationExitingStyle:e.animationStyles||D.current,exit:!0,enter:!0,appear:!1},j):j):null)}),k={navigatable:!0,navigatableElements:[],position:"bottom"};R.propTypes={items:u.array,subTitle:u.node,title:u.node,navigatable:u.bool,navigatableElements:u.array,position:u.oneOf(["top","bottom","left","right","fullscreen"])};R.displayName="KendoReactActionSheet";exports.ActionSheet=R;exports.actionSheetDefaultProps=k;
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
import * as n from "react";
|
|
9
|
-
import
|
|
9
|
+
import m from "prop-types";
|
|
10
10
|
import { Animation as G } from "@progress/kendo-react-animation";
|
|
11
11
|
import { FOCUSABLE_ELEMENTS as J, Navigation as Q, classNames as W } from "@progress/kendo-react-common";
|
|
12
12
|
import { ActionSheetItem as P } from "./ActionSheetItem.mjs";
|
|
@@ -15,84 +15,75 @@ import { footerDisplayName as X } from "./ActionSheetFooter.mjs";
|
|
|
15
15
|
import { contentDisplayName as Y } from "./ActionSheetContent.mjs";
|
|
16
16
|
import { ActionSheetView as Z, ActionSheetViewDisplayName as p } from "./ActionSheetView.mjs";
|
|
17
17
|
const j = n.forwardRef((e, _) => {
|
|
18
|
-
var
|
|
18
|
+
var T, O;
|
|
19
19
|
const {
|
|
20
|
-
navigatableElements: F =
|
|
21
|
-
navigatable: x =
|
|
22
|
-
position: H =
|
|
23
|
-
animationDuration:
|
|
24
|
-
prefixActions:
|
|
20
|
+
navigatableElements: F = S.navigatableElements,
|
|
21
|
+
navigatable: x = S.navigatable,
|
|
22
|
+
position: H = S.position,
|
|
23
|
+
animationDuration: l = 300,
|
|
24
|
+
prefixActions: y,
|
|
25
25
|
suffixActions: v,
|
|
26
|
-
filter:
|
|
27
|
-
} = e, L = (t,
|
|
28
|
-
|
|
29
|
-
}, V = (t,
|
|
26
|
+
filter: k
|
|
27
|
+
} = e, L = (t, a, i) => {
|
|
28
|
+
i.preventDefault(), i.shiftKey ? a.focusPrevious(t) : a.focusNext(t);
|
|
29
|
+
}, V = (t, a, i) => {
|
|
30
30
|
if (t.ariaDisabled)
|
|
31
31
|
return;
|
|
32
|
-
const
|
|
33
|
-
if (
|
|
34
|
-
|
|
35
|
-
const
|
|
36
|
-
e.onItemClick.call(void 0, {
|
|
37
|
-
syntheticEvent: a,
|
|
38
|
-
item: s,
|
|
39
|
-
title: s && s.title
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
|
-
if (c && e.onItemSelect) {
|
|
43
|
-
a.preventDefault();
|
|
44
|
-
const s = e.items[E.indexOf(t)];
|
|
32
|
+
const s = t.className && t.className.indexOf ? t.className.indexOf("k-actionsheet-item") !== -1 : !1, g = a.elements.filter((d) => d.className.indexOf("k-actionsheet-item") !== -1);
|
|
33
|
+
if (s && e.onItemSelect) {
|
|
34
|
+
i.preventDefault();
|
|
35
|
+
const d = e.items[g.indexOf(t)];
|
|
45
36
|
e.onItemSelect.call(void 0, {
|
|
46
|
-
syntheticEvent:
|
|
47
|
-
item:
|
|
48
|
-
title:
|
|
37
|
+
syntheticEvent: i,
|
|
38
|
+
item: d,
|
|
39
|
+
title: d && d.title
|
|
49
40
|
});
|
|
50
41
|
}
|
|
51
|
-
e.animation ||
|
|
52
|
-
}, $ = (t,
|
|
53
|
-
e.
|
|
54
|
-
},
|
|
42
|
+
e.animation || f();
|
|
43
|
+
}, $ = (t, a, i) => {
|
|
44
|
+
e.onClose && (i.preventDefault(), e.onClose.call(void 0, i)), e.animation || f();
|
|
45
|
+
}, f = () => {
|
|
55
46
|
u({ show: !1 });
|
|
56
47
|
}, B = (t) => {
|
|
57
|
-
x &&
|
|
48
|
+
x && E.current.triggerKeyboardEvent(t);
|
|
58
49
|
}, M = (t) => {
|
|
59
|
-
e.
|
|
60
|
-
},
|
|
61
|
-
e.
|
|
50
|
+
e.onClose && e.onClose.call(void 0, t), e.animation || f();
|
|
51
|
+
}, w = (t) => {
|
|
52
|
+
e.onItemSelect && e.onItemSelect.call(void 0, t), e.animation || f();
|
|
62
53
|
}, U = (t) => {
|
|
63
|
-
const
|
|
64
|
-
return n.Children.forEach(t, (
|
|
65
|
-
|
|
66
|
-
}),
|
|
67
|
-
},
|
|
54
|
+
const a = {}, i = [];
|
|
55
|
+
return n.Children.forEach(t, (s) => {
|
|
56
|
+
s && (s.type.displayName === p ? i.push(s) : a[s.type.displayName] = s);
|
|
57
|
+
}), i.length > 0 ? i : a;
|
|
58
|
+
}, D = n.useRef(null), h = n.useRef(null);
|
|
68
59
|
n.useImperativeHandle(
|
|
69
|
-
|
|
60
|
+
D,
|
|
70
61
|
() => ({ props: e, element: h.current })
|
|
71
62
|
), n.useImperativeHandle(
|
|
72
63
|
_,
|
|
73
|
-
() =>
|
|
64
|
+
() => D.current
|
|
74
65
|
);
|
|
75
|
-
const
|
|
76
|
-
q((
|
|
66
|
+
const E = n.useRef(void 0), N = n.useRef({ bottom: "0", width: "100%" }), R = n.useRef(void 0), [o, q] = n.useState({ show: !1, slide: !1 }), u = (t) => {
|
|
67
|
+
q((a) => ({ ...a, ...t }));
|
|
77
68
|
};
|
|
78
69
|
n.useEffect(() => {
|
|
79
|
-
e.expand && !
|
|
70
|
+
e.expand && !o.show && u({ show: !0 });
|
|
80
71
|
}, []), n.useEffect(() => {
|
|
81
72
|
const t = h.current;
|
|
82
|
-
if (e.expand && !
|
|
83
|
-
const
|
|
73
|
+
if (e.expand && !o.show && u({ show: !0 }), e.expand && o.show && !o.slide && u({ slide: !0 }), !e.expand && o.show && o.slide && u({ slide: !1 }), R !== o && o.slide && t && !e.className && (t.style.setProperty("--kendo-actionsheet-height", "auto"), t.style.setProperty("--kendo-actionsheet-max-height", "none")), t && x) {
|
|
74
|
+
const i = [".k-actionsheet-item", ...[
|
|
84
75
|
".k-actionsheet-footer",
|
|
85
76
|
".k-actionsheet-content",
|
|
86
77
|
".k-actionsheet-view",
|
|
87
78
|
".k-actionsheet-titlebar"
|
|
88
|
-
].map((
|
|
89
|
-
(
|
|
79
|
+
].map((s) => J.concat(F).map(
|
|
80
|
+
(g) => `${s} ${g}`
|
|
90
81
|
)).flat()];
|
|
91
|
-
|
|
82
|
+
E.current = new Q({
|
|
92
83
|
tabIndex: e.tabIndex || 0,
|
|
93
84
|
root: h,
|
|
94
85
|
rovingTabIndex: !1,
|
|
95
|
-
selectors:
|
|
86
|
+
selectors: i,
|
|
96
87
|
keyboardEvents: {
|
|
97
88
|
keydown: {
|
|
98
89
|
Tab: L,
|
|
@@ -100,15 +91,15 @@ const j = n.forwardRef((e, _) => {
|
|
|
100
91
|
Escape: $
|
|
101
92
|
}
|
|
102
93
|
}
|
|
103
|
-
}),
|
|
94
|
+
}), E.current.focusElement(E.current.first, null);
|
|
104
95
|
}
|
|
105
|
-
|
|
96
|
+
R.current = { ...o };
|
|
106
97
|
});
|
|
107
|
-
const
|
|
98
|
+
const C = "k-actionsheet-title", I = C, c = (T = e.items) == null ? void 0 : T.filter(
|
|
108
99
|
(t) => !t.group || t.group === "top"
|
|
109
|
-
), b = (
|
|
100
|
+
), b = (O = e.items) == null ? void 0 : O.filter(
|
|
110
101
|
(t) => t.group === "bottom"
|
|
111
|
-
), z =
|
|
102
|
+
), z = c && c.length > 0 && b && b.length > 0, r = U(e.children), A = o.slide && /* @__PURE__ */ n.createElement(
|
|
112
103
|
"div",
|
|
113
104
|
{
|
|
114
105
|
className: W(`k-actionsheet k-actionsheet-${H}`, e.className),
|
|
@@ -116,63 +107,61 @@ const j = n.forwardRef((e, _) => {
|
|
|
116
107
|
"aria-modal": "true",
|
|
117
108
|
style: e.style,
|
|
118
109
|
"aria-hidden": !1,
|
|
119
|
-
"aria-labelledby":
|
|
110
|
+
"aria-labelledby": I,
|
|
120
111
|
ref: h,
|
|
121
112
|
onKeyDown: B
|
|
122
113
|
},
|
|
123
|
-
Array.isArray(
|
|
114
|
+
Array.isArray(r) ? /* @__PURE__ */ n.createElement(n.Fragment, null, r.map((t) => t)) : /* @__PURE__ */ n.createElement(Z, null, r[K] && !e.title && !e.subTitle && r[K], (e.title || e.subTitle || y || v || k) && /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-titlebar" }, /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-titlebar-group" }, y && /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-actions" }, y), /* @__PURE__ */ n.createElement("div", { className: C, id: I }, /* @__PURE__ */ n.createElement("div", { className: "k-text-center" }, e.title), e.subTitle && /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-subtitle k-text-center" }, e.subTitle)), v && /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-actions" }, v)), k && /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, k)), r[Y] || /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-content" }, /* @__PURE__ */ n.createElement("div", { className: "k-list-ul", role: "group" }, c && c.map((t, a) => /* @__PURE__ */ n.createElement(
|
|
124
115
|
P,
|
|
125
116
|
{
|
|
126
117
|
...t,
|
|
127
|
-
id:
|
|
128
|
-
key:
|
|
118
|
+
id: a,
|
|
119
|
+
key: a,
|
|
129
120
|
item: t,
|
|
130
|
-
|
|
131
|
-
onClick: C
|
|
121
|
+
onClick: w
|
|
132
122
|
}
|
|
133
|
-
)), z && /* @__PURE__ */ n.createElement("hr", { className: "k-hr" }), b && b.map((t,
|
|
123
|
+
)), z && /* @__PURE__ */ n.createElement("hr", { className: "k-hr" }), b && b.map((t, a) => /* @__PURE__ */ n.createElement(
|
|
134
124
|
P,
|
|
135
125
|
{
|
|
136
126
|
...t,
|
|
137
|
-
id:
|
|
138
|
-
key:
|
|
127
|
+
id: a + ((c == null ? void 0 : c.length) || 0),
|
|
128
|
+
key: a,
|
|
139
129
|
item: t,
|
|
140
|
-
|
|
141
|
-
onClick: C
|
|
130
|
+
onClick: w
|
|
142
131
|
}
|
|
143
|
-
)))),
|
|
132
|
+
)))), r[X])
|
|
144
133
|
);
|
|
145
|
-
return /* @__PURE__ */ n.createElement(n.Fragment, null, e.expand ||
|
|
134
|
+
return /* @__PURE__ */ n.createElement(n.Fragment, null, e.expand || o.show ? /* @__PURE__ */ n.createElement("div", { className: "k-actionsheet-container" }, /* @__PURE__ */ n.createElement("div", { className: "k-overlay", onClick: M }), e.animation ? /* @__PURE__ */ n.createElement(
|
|
146
135
|
G,
|
|
147
136
|
{
|
|
148
|
-
transitionName:
|
|
149
|
-
onExited:
|
|
150
|
-
transitionEnterDuration: typeof
|
|
151
|
-
transitionExitDuration: typeof
|
|
152
|
-
animationEnteringStyle: e.animationStyles ||
|
|
153
|
-
animationEnteredStyle: e.animationStyles ||
|
|
154
|
-
animationExitingStyle: e.animationStyles ||
|
|
137
|
+
transitionName: o.slide ? "slide-up" : "slide-down",
|
|
138
|
+
onExited: f,
|
|
139
|
+
transitionEnterDuration: typeof l == "object" && Object.keys(l).length > 0 && l.openDuration ? Number(l.openDuration) : Number(l),
|
|
140
|
+
transitionExitDuration: typeof l == "object" && Object.keys(l).length > 0 && l.closeDuration ? Number(l.closeDuration) : Number(l),
|
|
141
|
+
animationEnteringStyle: e.animationStyles || N.current,
|
|
142
|
+
animationEnteredStyle: e.animationStyles || N.current,
|
|
143
|
+
animationExitingStyle: e.animationStyles || N.current,
|
|
155
144
|
exit: !0,
|
|
156
145
|
enter: !0,
|
|
157
146
|
appear: !1
|
|
158
147
|
},
|
|
159
|
-
|
|
160
|
-
) :
|
|
161
|
-
}),
|
|
148
|
+
A
|
|
149
|
+
) : A) : null);
|
|
150
|
+
}), S = {
|
|
162
151
|
navigatable: !0,
|
|
163
152
|
navigatableElements: [],
|
|
164
153
|
position: "bottom"
|
|
165
154
|
};
|
|
166
155
|
j.propTypes = {
|
|
167
|
-
items:
|
|
168
|
-
subTitle:
|
|
169
|
-
title:
|
|
170
|
-
navigatable:
|
|
171
|
-
navigatableElements:
|
|
172
|
-
position:
|
|
156
|
+
items: m.array,
|
|
157
|
+
subTitle: m.node,
|
|
158
|
+
title: m.node,
|
|
159
|
+
navigatable: m.bool,
|
|
160
|
+
navigatableElements: m.array,
|
|
161
|
+
position: m.oneOf(["top", "bottom", "left", "right", "fullscreen"])
|
|
173
162
|
};
|
|
174
163
|
j.displayName = "KendoReactActionSheet";
|
|
175
164
|
export {
|
|
176
165
|
j as ActionSheet,
|
|
177
|
-
|
|
166
|
+
S as actionSheetDefaultProps
|
|
178
167
|
};
|
|
@@ -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 _=require("react"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react"),a=require("prop-types"),l=require("@progress/kendo-react-common"),N=require("./models/utils.js"),j=require("./BottomNavigationItem.js");function B(e){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const c=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(i,n,c.get?c:{enumerable:!0,get:()=>e[n]})}}return i.default=e,Object.freeze(i)}const o=B(_),g=o.forwardRef((e,i)=>{const n=o.useRef(null),c=o.useCallback(()=>{n.current&&l.focusFirstFocusableChild(n.current)},[]),f=o.useCallback(()=>({element:n.current,focus:c}),[c]);o.useImperativeHandle(i,f);const{positionMode:C=u.positionMode,itemFlow:M=u.itemFlow,border:k=u.border,className:S,items:s,item:w,itemRender:I,disabled:b,style:E,id:h,onSelect:v,onKeyDown:p}=e,O=l.useId(),D=l.useDir(n,e.dir),d=o.useMemo(()=>e.fillMode===null?null:e.fillMode||u.fillMode,[e.fillMode]),y=o.useMemo(()=>e.themeColor||u.themeColor,[e.themeColor]),R=o.useMemo(()=>l.classNames("k-bottom-nav",N.POSITION_MODE_CLASSES[C],N.ITEM_FLOW_CLASSES[M],{[`k-bottom-nav-${d}`]:d,[`k-bottom-nav-${d}-${y}`]:!!(d&&y),"k-bottom-nav-border":k,"k-disabled":b},S),[C,y,d,M,k,b,S]),m=o.useCallback((t,r)=>{s&&!s[r].disabled&&v&&l.dispatchEvent(v,t,f(),{itemTarget:s[r],itemIndex:r})},[s,v]),F=o.useCallback((t,r)=>{m(t,r)},[m]),T=o.useCallback((t,r)=>{switch(t.keyCode){case l.Keys.enter:case l.Keys.space:m(t,r),t.preventDefault();break}l.dispatchEvent(p,t,f(),void 0)},[m,p]);return o.createElement("nav",{ref:n,className:R,style:E,id:h||O,dir:D},s&&s.map((t,r)=>o.createElement(j.BottomNavigationItem,{...t,key:r,index:r,id:`${h||O}-${r}`,disabled:b||t.disabled,selected:t.selected,dataItem:t,item:w,render:I,onSelect:F,onKeyDown:T})))}),u={themeColor:"primary",fillMode:"flat",itemFlow:"vertical",positionMode:"fixed",border:!0};g.propTypes={className:a.string,style:a.object,id:a.string,dir:a.string,themeColor:a.oneOf(["primary","secondary","tertiary","info","success","warning","error","dark","light","inverse"]),fillMode:a.oneOf(["solid","flat"]),itemFlow:a.oneOf(["vertical","horizontal"]),border:a.bool,disabled:a.bool,selected:a.number,onSelect:a.func};g.displayName="KendoReactBottomNavigation";exports.BottomNavigation=g;
|
|
@@ -6,70 +6,70 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
import * as o from "react";
|
|
9
|
-
import
|
|
10
|
-
import { focusFirstFocusableChild as T, useId as $, useDir as B, classNames as _, dispatchEvent as
|
|
9
|
+
import l from "prop-types";
|
|
10
|
+
import { focusFirstFocusableChild as T, useId as $, useDir as B, classNames as _, dispatchEvent as S, Keys as g } from "@progress/kendo-react-common";
|
|
11
11
|
import { POSITION_MODE_CLASSES as L, ITEM_FLOW_CLASSES as P } from "./models/utils.mjs";
|
|
12
12
|
import { BottomNavigationItem as A } from "./BottomNavigationItem.mjs";
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
|
|
13
|
+
const w = o.forwardRef((r, I) => {
|
|
14
|
+
const s = o.useRef(null), b = o.useCallback(() => {
|
|
15
|
+
s.current && T(s.current);
|
|
16
16
|
}, []), c = o.useCallback(
|
|
17
17
|
() => ({
|
|
18
|
-
element:
|
|
18
|
+
element: s.current,
|
|
19
19
|
focus: b
|
|
20
20
|
}),
|
|
21
21
|
[b]
|
|
22
22
|
);
|
|
23
|
-
o.useImperativeHandle(
|
|
23
|
+
o.useImperativeHandle(I, c);
|
|
24
24
|
const {
|
|
25
|
-
positionMode: v =
|
|
26
|
-
itemFlow: C =
|
|
27
|
-
border: y =
|
|
25
|
+
positionMode: v = n.positionMode,
|
|
26
|
+
itemFlow: C = n.itemFlow,
|
|
27
|
+
border: y = n.border,
|
|
28
28
|
className: M,
|
|
29
29
|
items: a,
|
|
30
|
-
item:
|
|
31
|
-
itemRender:
|
|
30
|
+
item: E,
|
|
31
|
+
itemRender: N,
|
|
32
32
|
disabled: m,
|
|
33
|
-
style:
|
|
33
|
+
style: F,
|
|
34
34
|
id: h,
|
|
35
35
|
onSelect: f,
|
|
36
36
|
onKeyDown: k
|
|
37
|
-
} = r,
|
|
37
|
+
} = r, p = $(), O = B(s, r.dir), i = o.useMemo(() => r.fillMode === null ? null : r.fillMode || n.fillMode, [r.fillMode]), u = o.useMemo(() => r.themeColor || n.themeColor, [r.themeColor]), D = o.useMemo(
|
|
38
38
|
() => _(
|
|
39
39
|
"k-bottom-nav",
|
|
40
40
|
L[v],
|
|
41
41
|
P[C],
|
|
42
42
|
{
|
|
43
|
-
[`k-bottom-nav-${
|
|
44
|
-
[`k-bottom-nav-${
|
|
43
|
+
[`k-bottom-nav-${i}`]: i,
|
|
44
|
+
[`k-bottom-nav-${i}-${u}`]: !!(i && u),
|
|
45
45
|
"k-bottom-nav-border": y,
|
|
46
46
|
"k-disabled": m
|
|
47
47
|
},
|
|
48
48
|
M
|
|
49
49
|
),
|
|
50
|
-
[v, u,
|
|
50
|
+
[v, u, i, C, y, m, M]
|
|
51
51
|
), d = o.useCallback(
|
|
52
|
-
(e,
|
|
53
|
-
a && !a[
|
|
54
|
-
itemTarget: a[
|
|
55
|
-
itemIndex:
|
|
52
|
+
(e, t) => {
|
|
53
|
+
a && !a[t].disabled && f && S(f, e, c(), {
|
|
54
|
+
itemTarget: a[t],
|
|
55
|
+
itemIndex: t
|
|
56
56
|
});
|
|
57
57
|
},
|
|
58
58
|
[a, f]
|
|
59
59
|
), R = o.useCallback(
|
|
60
|
-
(e,
|
|
61
|
-
d(e,
|
|
60
|
+
(e, t) => {
|
|
61
|
+
d(e, t);
|
|
62
62
|
},
|
|
63
63
|
[d]
|
|
64
64
|
), K = o.useCallback(
|
|
65
|
-
(e,
|
|
65
|
+
(e, t) => {
|
|
66
66
|
switch (e.keyCode) {
|
|
67
|
-
case
|
|
68
|
-
case
|
|
69
|
-
d(e,
|
|
67
|
+
case g.enter:
|
|
68
|
+
case g.space:
|
|
69
|
+
d(e, t), e.preventDefault();
|
|
70
70
|
break;
|
|
71
71
|
}
|
|
72
|
-
|
|
72
|
+
S(
|
|
73
73
|
k,
|
|
74
74
|
e,
|
|
75
75
|
c(),
|
|
@@ -78,35 +78,35 @@ const I = o.forwardRef((r, E) => {
|
|
|
78
78
|
},
|
|
79
79
|
[d, k]
|
|
80
80
|
);
|
|
81
|
-
return /* @__PURE__ */ o.createElement("nav", { ref:
|
|
81
|
+
return /* @__PURE__ */ o.createElement("nav", { ref: s, className: D, style: F, id: h || p, dir: O }, a && a.map((e, t) => /* @__PURE__ */ o.createElement(
|
|
82
82
|
A,
|
|
83
83
|
{
|
|
84
84
|
...e,
|
|
85
|
-
key:
|
|
86
|
-
index:
|
|
87
|
-
id: `${h ||
|
|
85
|
+
key: t,
|
|
86
|
+
index: t,
|
|
87
|
+
id: `${h || p}-${t}`,
|
|
88
88
|
disabled: m || e.disabled,
|
|
89
89
|
selected: e.selected,
|
|
90
90
|
dataItem: e,
|
|
91
|
-
item:
|
|
92
|
-
render:
|
|
91
|
+
item: E,
|
|
92
|
+
render: N,
|
|
93
93
|
onSelect: R,
|
|
94
94
|
onKeyDown: K
|
|
95
95
|
}
|
|
96
96
|
)));
|
|
97
|
-
}),
|
|
97
|
+
}), n = {
|
|
98
98
|
themeColor: "primary",
|
|
99
99
|
fillMode: "flat",
|
|
100
100
|
itemFlow: "vertical",
|
|
101
101
|
positionMode: "fixed",
|
|
102
102
|
border: !0
|
|
103
103
|
};
|
|
104
|
-
|
|
105
|
-
className:
|
|
106
|
-
style:
|
|
107
|
-
id:
|
|
108
|
-
dir:
|
|
109
|
-
themeColor:
|
|
104
|
+
w.propTypes = {
|
|
105
|
+
className: l.string,
|
|
106
|
+
style: l.object,
|
|
107
|
+
id: l.string,
|
|
108
|
+
dir: l.string,
|
|
109
|
+
themeColor: l.oneOf([
|
|
110
110
|
"primary",
|
|
111
111
|
"secondary",
|
|
112
112
|
"tertiary",
|
|
@@ -118,15 +118,14 @@ I.propTypes = {
|
|
|
118
118
|
"light",
|
|
119
119
|
"inverse"
|
|
120
120
|
]),
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
onSelect: t.func
|
|
121
|
+
fillMode: l.oneOf(["solid", "flat"]),
|
|
122
|
+
itemFlow: l.oneOf(["vertical", "horizontal"]),
|
|
123
|
+
border: l.bool,
|
|
124
|
+
disabled: l.bool,
|
|
125
|
+
selected: l.number,
|
|
126
|
+
onSelect: l.func
|
|
128
127
|
};
|
|
129
|
-
|
|
128
|
+
w.displayName = "KendoReactBottomNavigation";
|
|
130
129
|
export {
|
|
131
|
-
|
|
130
|
+
w as BottomNavigation
|
|
132
131
|
};
|