@progress/kendo-react-layout 7.3.0 → 7.4.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/dist/cdn/js/kendo-react-layout.js +1 -1
- package/index.d.mts +29 -9
- package/index.d.ts +29 -9
- package/package-metadata.mjs +1 -1
- package/package.json +6 -6
- package/panelbar/PanelBar.js +1 -1
- package/panelbar/PanelBar.mjs +3 -3
- package/panelbar/util.js +1 -1
- package/panelbar/util.mjs +3 -2
- package/tabstrip/TabStrip.js +1 -1
- package/tabstrip/TabStrip.mjs +24 -22
- package/tabstrip/TabStripContent.js +1 -1
- package/tabstrip/TabStripContent.mjs +64 -33
- package/tabstrip/TabStripNavigation.js +1 -1
- package/tabstrip/TabStripNavigation.mjs +35 -34
- package/tabstrip/TabStripNavigationItem.js +1 -1
- package/tabstrip/TabStripNavigationItem.mjs +7 -7
|
@@ -6,13 +6,13 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
|
-
import * as
|
|
10
|
-
import
|
|
11
|
-
import { Fade as
|
|
12
|
-
import { classNames as
|
|
13
|
-
const
|
|
9
|
+
import * as n from "react";
|
|
10
|
+
import i from "prop-types";
|
|
11
|
+
import { Fade as d } from "@progress/kendo-react-animation";
|
|
12
|
+
import { classNames as c } from "@progress/kendo-react-common";
|
|
13
|
+
const l = class l extends n.Component {
|
|
14
14
|
constructor() {
|
|
15
|
-
super(...arguments), this.contentId = this.props.contentPanelId, this.childFactory = (e) =>
|
|
15
|
+
super(...arguments), this.contentId = this.props.contentPanelId, this.childFactory = (e) => n.cloneElement(e, {
|
|
16
16
|
...e.props,
|
|
17
17
|
in: e.props.children.props.id === String(this.contentId + this.props.selected)
|
|
18
18
|
});
|
|
@@ -21,61 +21,92 @@ const p = class p extends r.Component {
|
|
|
21
21
|
* @hidden
|
|
22
22
|
*/
|
|
23
23
|
render() {
|
|
24
|
-
const { children: e, selected: t, contentPanelId:
|
|
24
|
+
const { children: e, selected: t, contentPanelId: r, keepTabsMounted: s, navItemId: o, renderAllContent: p } = this.props, a = e && typeof t == "number" && n.Children.toArray(e)[t], m = c(
|
|
25
25
|
"k-tabstrip-content",
|
|
26
26
|
"k-active",
|
|
27
|
-
|
|
27
|
+
a && a.props.contentClassName
|
|
28
28
|
);
|
|
29
|
-
return /* @__PURE__ */
|
|
29
|
+
return p ? this.renderAllContent(e) : /* @__PURE__ */ n.createElement(
|
|
30
30
|
"div",
|
|
31
31
|
{
|
|
32
|
-
className:
|
|
32
|
+
className: m,
|
|
33
33
|
style: this.props.style,
|
|
34
|
-
id:
|
|
34
|
+
id: r,
|
|
35
35
|
role: "tabpanel",
|
|
36
|
-
"aria-hidden":
|
|
37
|
-
"aria-labelledby": `${
|
|
36
|
+
"aria-hidden": s,
|
|
37
|
+
"aria-labelledby": `${o}-${(t == null ? void 0 : t.toString()) || ""}`
|
|
38
38
|
},
|
|
39
39
|
this.renderContent(e)
|
|
40
40
|
);
|
|
41
41
|
}
|
|
42
42
|
renderContent(e) {
|
|
43
|
-
return this.props.keepTabsMounted ?
|
|
44
|
-
|
|
43
|
+
return this.props.keepTabsMounted ? n.Children.map(this.props.children, (t, r) => this.renderChild(t, r)) : this.renderChild(
|
|
44
|
+
n.Children.toArray(e)[this.props.selected],
|
|
45
45
|
this.props.selected
|
|
46
46
|
);
|
|
47
47
|
}
|
|
48
|
+
renderAllContent(e) {
|
|
49
|
+
return n.Children.map(e, (t, r) => {
|
|
50
|
+
const s = t, o = r === this.props.selected, p = c(
|
|
51
|
+
"k-tabstrip-content",
|
|
52
|
+
{ "k-active": o },
|
|
53
|
+
s.props.contentClassName
|
|
54
|
+
);
|
|
55
|
+
return /* @__PURE__ */ n.createElement(
|
|
56
|
+
"div",
|
|
57
|
+
{
|
|
58
|
+
className: p,
|
|
59
|
+
style: this.props.style,
|
|
60
|
+
id: `${this.props.contentPanelId}-${r}`,
|
|
61
|
+
role: "tabpanel",
|
|
62
|
+
"aria-hidden": !o,
|
|
63
|
+
hidden: !o,
|
|
64
|
+
"aria-labelledby": `${this.props.navItemId}-${r}`
|
|
65
|
+
},
|
|
66
|
+
this.props.animation ? /* @__PURE__ */ n.createElement(
|
|
67
|
+
d,
|
|
68
|
+
{
|
|
69
|
+
key: `${r}-${o}`,
|
|
70
|
+
appear: !0,
|
|
71
|
+
enter: !0,
|
|
72
|
+
exit: !1
|
|
73
|
+
},
|
|
74
|
+
s.props.children
|
|
75
|
+
) : s.props.children
|
|
76
|
+
);
|
|
77
|
+
});
|
|
78
|
+
}
|
|
48
79
|
renderChild(e, t) {
|
|
49
|
-
const
|
|
80
|
+
const r = t === this.props.selected, s = {
|
|
50
81
|
style: {
|
|
51
|
-
display:
|
|
82
|
+
display: r ? void 0 : "none"
|
|
52
83
|
}
|
|
53
|
-
},
|
|
84
|
+
}, o = {
|
|
54
85
|
position: "initial",
|
|
55
|
-
display:
|
|
86
|
+
display: r ? void 0 : "none"
|
|
56
87
|
};
|
|
57
|
-
return e.props.disabled ? null : this.props.animation ? /* @__PURE__ */
|
|
58
|
-
|
|
88
|
+
return e.props.disabled ? null : this.props.animation ? /* @__PURE__ */ n.createElement(
|
|
89
|
+
d,
|
|
59
90
|
{
|
|
60
91
|
appear: !0,
|
|
61
92
|
exit: this.props.keepTabsMounted,
|
|
62
|
-
style:
|
|
93
|
+
style: o,
|
|
63
94
|
childFactory: this.props.keepTabsMounted ? this.childFactory : void 0
|
|
64
95
|
},
|
|
65
|
-
/* @__PURE__ */
|
|
66
|
-
) : /* @__PURE__ */
|
|
96
|
+
/* @__PURE__ */ n.createElement("div", { ...s, id: String(this.contentId + t), key: t }, e.props.children)
|
|
97
|
+
) : /* @__PURE__ */ n.createElement("div", { ...s, key: t }, e.props.children);
|
|
67
98
|
}
|
|
68
99
|
};
|
|
69
|
-
|
|
70
|
-
animation:
|
|
71
|
-
children:
|
|
72
|
-
|
|
73
|
-
|
|
100
|
+
l.propTypes = {
|
|
101
|
+
animation: i.bool,
|
|
102
|
+
children: i.oneOfType([
|
|
103
|
+
i.element,
|
|
104
|
+
i.arrayOf(i.element)
|
|
74
105
|
]),
|
|
75
|
-
selected:
|
|
76
|
-
style:
|
|
106
|
+
selected: i.number,
|
|
107
|
+
style: i.object
|
|
77
108
|
};
|
|
78
|
-
let
|
|
109
|
+
let h = l;
|
|
79
110
|
export {
|
|
80
|
-
|
|
111
|
+
h as TabStripContent
|
|
81
112
|
};
|
|
@@ -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"});const R=require("react"),
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react"),f=require("prop-types"),C=require("./TabStripNavigationItem.js"),k=require("@progress/kendo-react-common"),A=require("@progress/kendo-react-buttons"),m=require("@progress/kendo-svg-icons");function M(h){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const t in h)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(h,t);Object.defineProperty(l,t,s.get?s:{enumerable:!0,get:()=>h[t]})}}return l.default=h,Object.freeze(l)}const a=M(R),x=h=>Array.apply(null,Array(h)),L=h=>h.preventDefault(),v="smooth",b="prev",S="next",P=class P extends a.Component{constructor(l){super(l),this.itemsNavRef=a.createRef(),this.isRtl=()=>this.props.dir==="rtl",this.onWheel=t=>{t.stopPropagation();const s=t.deltaY<0?b:S;this.setNewScrollPosition(s,t)},this.arrowClickPrev=t=>{this.handleArrowClick(b,t)},this.arrowClickNext=t=>{this.handleArrowClick(S,t)},this.handleArrowClick=(t,s)=>{this.setNewScrollPosition(t,s)},this.setNewScrollPosition=(t,s)=>{const e=this.itemsNavRef.current;if(!e)return;const n=this.horizontalScroll(),c=n?e.scrollWidth-e.offsetWidth:e.scrollHeight-e.offsetHeight,r=(s.type==="click"?this.props.buttonScrollSpeed:this.props.mouseScrollSpeed)||0;let o=n?e.scrollLeft:e.scrollTop,i=n?e.scrollWidth-e.scrollLeft:e.scrollHeight-e.scrollTop,d=e.scrollWidth-e.scrollLeft*-1;this.isRtl()&&this.horizontalScroll()?(t===b&&o<0&&(o+=r,d+=r),t===S&&o<c&&(o-=r,d-=r),o=Math.min(0,Math.min(c,o))):(t===b&&o>0&&(o-=r,i+=r),t===S&&o<c&&(o+=r,i-=r),o=Math.max(0,Math.min(c,o)));const u=o===0,g=s.type==="click"?v:void 0;if(n){const T=this.isRtl()?Math.round(d)<=e.clientWidth||Math.floor(d)<=e.clientWidth:Math.round(i)<=e.clientWidth||Math.floor(i)<=e.clientWidth;this.setState({disabledPrev:u,disabledNext:T}),e.scrollTo({left:o,behavior:g})}else this.setState({disabledPrev:u,disabledNext:Math.round(i)<=e.clientHeight||Math.floor(i)<=e.clientHeight}),e.scrollTo({top:o,behavior:g})},this.renderArrow=(t,s)=>{const e=this.horizontalScroll(),n={prev:{arrowTab:"k-tabstrip-prev",fontIcon:e?this.isRtl()?"caret-alt-right":"caret-alt-left":"caret-alt-up",svgIcon:e?this.isRtl()?m.caretAltRightIcon:m.caretAltLeftIcon:m.caretAltUpIcon},next:{arrowTab:"k-tabstrip-next",fontIcon:e?this.isRtl()?"caret-alt-left":"caret-alt-right":"caret-alt-down",svgIcon:e?this.isRtl()?m.caretAltLeftIcon:m.caretAltRightIcon:m.caretAltDownIcon}},c=(t===b?this.props.prevButton:this.props.nextButton)||A.Button,r=t===b?this.arrowClickPrev:this.arrowClickNext;return a.createElement(c,{disabled:s,className:`${n[t].arrowTab}`,onClick:r,icon:n[t].fontIcon,svgIcon:n[t].svgIcon,onMouseDown:L,tabIndex:-1,fillMode:"flat"})},this.state={disabledPrev:this.props.selected===0,disabledNext:this.props.selected===a.Children.count(this.props.children)-1}}componentDidMount(){this.props.scrollable&&this.scrollToSelected()}componentDidUpdate(l){const{scrollable:t,selected:s}=this.props;t&&l.selected!==s&&(this.scrollToSelected(),this.setState({disabledPrev:s===0,disabledNext:s===a.Children.count(this.props.children)-1}))}render(){const{selected:l,tabPosition:t,children:s,onSelect:e,onKeyDown:n,navItemId:c,contentPanelId:r,renderAllContent:o}=this.props,i=a.Children.count(s),d=a.Children.toArray(s);let u;s&&(u=x(i).map((y,p,w)=>{const N={active:l===p,disabled:d[p].props.disabled,index:p,title:d[p].props.title,first:p===0,last:p===w.length-1,contentPanelId:r,renderAllContent:o,id:c,onSelect:e};return a.createElement(C.TabStripNavigationItem,{key:p,...N})}));const g=k.classNames("k-tabstrip-items-wrapper",{"k-hstack":t==="top"||t==="bottom","k-vstack":t==="left"||t==="right"}),T=k.classNames("k-tabstrip-items","k-reset");return a.createElement("div",{className:g},this.props.scrollable?a.createElement(a.Fragment,null,this.renderArrow(b,this.state.disabledPrev),a.createElement("ul",{ref:this.itemsNavRef,className:T,role:"tablist",tabIndex:this.props.tabIndex,onKeyDown:n,onWheel:this.onWheel,"aria-orientation":t==="left"||t==="right"?"vertical":void 0},u),this.renderArrow(S,this.state.disabledNext)):a.createElement("ul",{className:T,role:"tablist",tabIndex:this.props.tabIndex,onKeyDown:n},u))}scrollToSelected(){const l=this.itemsNavRef.current,t=l&&l.children[this.props.selected||0];if(t instanceof HTMLElement&&l instanceof HTMLElement){const s=this.horizontalScroll(),e=s?l.offsetWidth:l.offsetHeight,n=s?t.offsetWidth:t.offsetHeight,c=s?"left":"top";let r=s?l.scrollLeft:l.scrollTop,o=0;if(this.isRtl()){const i=t.offsetLeft;r=r*-1,i<0?(o=i-n+l.offsetLeft,l.scrollTo({[c]:o,behavior:v})):i+n>e-r&&(o=r+i-n,l.scrollTo({[c]:o,behavior:v}))}else{const i=s?t.offsetLeft-l.offsetLeft:t.offsetTop-l.offsetTop;r+e<i+n?(o=i+n-e,l.scrollTo({[c]:o,behavior:v})):r>i&&(o=i,l.scrollTo({[c]:o,behavior:v}))}}}horizontalScroll(){return/top|bottom/.test(this.props.tabPosition||"top")}};P.propTypes={children:f.oneOfType([f.element,f.arrayOf(f.element)]),onSelect:f.func,onKeyDown:f.func,selected:f.number,tabIndex:f.number};let I=P;exports.TabStripNavigation=I;
|
|
@@ -7,12 +7,12 @@
|
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
9
|
import * as a from "react";
|
|
10
|
-
import
|
|
11
|
-
import { TabStripNavigationItem as
|
|
10
|
+
import h from "prop-types";
|
|
11
|
+
import { TabStripNavigationItem as g } from "./TabStripNavigationItem.mjs";
|
|
12
12
|
import { classNames as I } from "@progress/kendo-react-common";
|
|
13
13
|
import { Button as x } from "@progress/kendo-react-buttons";
|
|
14
14
|
import { caretAltRightIcon as P, caretAltLeftIcon as k, caretAltUpIcon as A, caretAltDownIcon as M } from "@progress/kendo-svg-icons";
|
|
15
|
-
const E = (
|
|
15
|
+
const E = (w) => Array.apply(null, Array(w)), L = (w) => w.preventDefault(), b = "smooth", d = "prev", u = "next", T = class T extends a.Component {
|
|
16
16
|
constructor(l) {
|
|
17
17
|
super(l), this.itemsNavRef = a.createRef(), this.isRtl = () => this.props.dir === "rtl", this.onWheel = (t) => {
|
|
18
18
|
t.stopPropagation();
|
|
@@ -29,20 +29,20 @@ const E = (S) => Array.apply(null, Array(S)), L = (S) => S.preventDefault(), b =
|
|
|
29
29
|
if (!e)
|
|
30
30
|
return;
|
|
31
31
|
const n = this.horizontalScroll(), c = n ? e.scrollWidth - e.offsetWidth : e.scrollHeight - e.offsetHeight, r = (s.type === "click" ? this.props.buttonScrollSpeed : this.props.mouseScrollSpeed) || 0;
|
|
32
|
-
let o = n ? e.scrollLeft : e.scrollTop, i = n ? e.scrollWidth - e.scrollLeft : e.scrollHeight - e.scrollTop,
|
|
33
|
-
this.isRtl() && this.horizontalScroll() ? (t === d && o < 0 && (o += r,
|
|
34
|
-
const
|
|
32
|
+
let o = n ? e.scrollLeft : e.scrollTop, i = n ? e.scrollWidth - e.scrollLeft : e.scrollHeight - e.scrollTop, f = e.scrollWidth - e.scrollLeft * -1;
|
|
33
|
+
this.isRtl() && this.horizontalScroll() ? (t === d && o < 0 && (o += r, f += r), t === u && o < c && (o -= r, f -= r), o = Math.min(0, Math.min(c, o))) : (t === d && o > 0 && (o -= r, i += r), t === u && o < c && (o += r, i -= r), o = Math.max(0, Math.min(c, o)));
|
|
34
|
+
const m = o === 0, v = s.type === "click" ? b : void 0;
|
|
35
35
|
if (n) {
|
|
36
|
-
const
|
|
36
|
+
const S = this.isRtl() ? Math.round(f) <= e.clientWidth || Math.floor(f) <= e.clientWidth : Math.round(i) <= e.clientWidth || Math.floor(i) <= e.clientWidth;
|
|
37
37
|
this.setState({
|
|
38
|
-
disabledPrev:
|
|
39
|
-
disabledNext:
|
|
40
|
-
}), e.scrollTo({ left: o, behavior:
|
|
38
|
+
disabledPrev: m,
|
|
39
|
+
disabledNext: S
|
|
40
|
+
}), e.scrollTo({ left: o, behavior: v });
|
|
41
41
|
} else
|
|
42
42
|
this.setState({
|
|
43
|
-
disabledPrev:
|
|
43
|
+
disabledPrev: m,
|
|
44
44
|
disabledNext: Math.round(i) <= e.clientHeight || Math.floor(i) <= e.clientHeight
|
|
45
|
-
}), e.scrollTo({ top: o, behavior:
|
|
45
|
+
}), e.scrollTo({ top: o, behavior: v });
|
|
46
46
|
}, this.renderArrow = (t, s) => {
|
|
47
47
|
const e = this.horizontalScroll(), n = {
|
|
48
48
|
prev: {
|
|
@@ -94,47 +94,48 @@ const E = (S) => Array.apply(null, Array(S)), L = (S) => S.preventDefault(), b =
|
|
|
94
94
|
* @hidden
|
|
95
95
|
*/
|
|
96
96
|
render() {
|
|
97
|
-
const { selected: l, tabPosition: t, children: s, onSelect: e, onKeyDown: n, navItemId: c, contentPanelId: r } = this.props,
|
|
98
|
-
let
|
|
99
|
-
s && (
|
|
100
|
-
const
|
|
97
|
+
const { selected: l, tabPosition: t, children: s, onSelect: e, onKeyDown: n, navItemId: c, contentPanelId: r, renderAllContent: o } = this.props, i = a.Children.count(s), f = a.Children.toArray(s);
|
|
98
|
+
let m;
|
|
99
|
+
s && (m = E(i).map((W, p, C) => {
|
|
100
|
+
const R = {
|
|
101
101
|
active: l === p,
|
|
102
|
-
disabled:
|
|
102
|
+
disabled: f[p].props.disabled,
|
|
103
103
|
index: p,
|
|
104
|
-
title:
|
|
104
|
+
title: f[p].props.title,
|
|
105
105
|
first: p === 0,
|
|
106
|
-
last: p ===
|
|
106
|
+
last: p === C.length - 1,
|
|
107
107
|
contentPanelId: r,
|
|
108
|
+
renderAllContent: o,
|
|
108
109
|
id: c,
|
|
109
110
|
onSelect: e
|
|
110
111
|
};
|
|
111
|
-
return /* @__PURE__ */ a.createElement(
|
|
112
|
+
return /* @__PURE__ */ a.createElement(g, { key: p, ...R });
|
|
112
113
|
}));
|
|
113
114
|
const v = I("k-tabstrip-items-wrapper", {
|
|
114
115
|
"k-hstack": t === "top" || t === "bottom",
|
|
115
116
|
"k-vstack": t === "left" || t === "right"
|
|
116
|
-
}),
|
|
117
|
+
}), S = I("k-tabstrip-items", "k-reset");
|
|
117
118
|
return /* @__PURE__ */ a.createElement("div", { className: v }, this.props.scrollable ? /* @__PURE__ */ a.createElement(a.Fragment, null, this.renderArrow(d, this.state.disabledPrev), /* @__PURE__ */ a.createElement(
|
|
118
119
|
"ul",
|
|
119
120
|
{
|
|
120
121
|
ref: this.itemsNavRef,
|
|
121
|
-
className:
|
|
122
|
+
className: S,
|
|
122
123
|
role: "tablist",
|
|
123
124
|
tabIndex: this.props.tabIndex,
|
|
124
125
|
onKeyDown: n,
|
|
125
126
|
onWheel: this.onWheel,
|
|
126
127
|
"aria-orientation": t === "left" || t === "right" ? "vertical" : void 0
|
|
127
128
|
},
|
|
128
|
-
|
|
129
|
+
m
|
|
129
130
|
), this.renderArrow(u, this.state.disabledNext)) : /* @__PURE__ */ a.createElement(
|
|
130
131
|
"ul",
|
|
131
132
|
{
|
|
132
|
-
className:
|
|
133
|
+
className: S,
|
|
133
134
|
role: "tablist",
|
|
134
135
|
tabIndex: this.props.tabIndex,
|
|
135
136
|
onKeyDown: n
|
|
136
137
|
},
|
|
137
|
-
|
|
138
|
+
m
|
|
138
139
|
));
|
|
139
140
|
}
|
|
140
141
|
scrollToSelected() {
|
|
@@ -155,17 +156,17 @@ const E = (S) => Array.apply(null, Array(S)), L = (S) => S.preventDefault(), b =
|
|
|
155
156
|
return /top|bottom/.test(this.props.tabPosition || "top");
|
|
156
157
|
}
|
|
157
158
|
};
|
|
158
|
-
|
|
159
|
-
children:
|
|
160
|
-
|
|
161
|
-
|
|
159
|
+
T.propTypes = {
|
|
160
|
+
children: h.oneOfType([
|
|
161
|
+
h.element,
|
|
162
|
+
h.arrayOf(h.element)
|
|
162
163
|
]),
|
|
163
|
-
onSelect:
|
|
164
|
-
onKeyDown:
|
|
165
|
-
selected:
|
|
166
|
-
tabIndex:
|
|
164
|
+
onSelect: h.func,
|
|
165
|
+
onKeyDown: h.func,
|
|
166
|
+
selected: h.number,
|
|
167
|
+
tabIndex: h.number
|
|
167
168
|
};
|
|
168
|
-
let N =
|
|
169
|
+
let N = T;
|
|
169
170
|
export {
|
|
170
171
|
N as TabStripNavigation
|
|
171
172
|
};
|
|
@@ -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"});const
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react"),e=require("prop-types"),h=require("@progress/kendo-react-common");function R(s){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const t in s)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(s,t);Object.defineProperty(n,t,i.get?i:{enumerable:!0,get:()=>s[t]})}}return n.default=s,Object.freeze(n)}const o=R(b),l=class l extends o.Component{constructor(){super(...arguments),this.itemRef=null,this.focus=()=>{this.itemRef&&(this.itemRef.tabIndex=0,this.itemRef.focus())},this.blur=()=>{this.itemRef&&(this.itemRef.tabIndex=-1,this.itemRef.blur())},this.onClick=()=>{this.props.onSelect&&this.props.onSelect(this.props.index),this.itemRef&&(this.itemRef.tabIndex=0,this.itemRef.focus())}}render(){const{id:n,active:t,disabled:i,title:d="Untitled",index:c,renderAllContent:f}=this.props,a=f?`${this.props.contentPanelId}-${c.toString()}`:this.props.contentPanelId,u={id:`${n}-${c.toString()}`,"aria-selected":t,"aria-controls":t?a:void 0,"aria-disabled":i,role:"tab",onClick:i?void 0:this.onClick},p=h.classNames("k-item","k-tabstrip-item",{"k-disabled":i,"k-active":t});return o.createElement("li",{...u,className:p,ref:m=>this.itemRef=m,onBlur:this.blur,"aria-controls":a},o.createElement("span",{className:"k-link"},d))}};l.propTypes={active:e.bool,disabled:e.bool,index:e.number,onSelect:e.func,title:e.oneOfType([e.string,e.element]),first:e.bool,last:e.bool};let r=l;exports.TabStripNavigationItem=r;
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"use client";
|
|
9
9
|
import * as s from "react";
|
|
10
10
|
import e from "prop-types";
|
|
11
|
-
import { classNames as
|
|
11
|
+
import { classNames as h } from "@progress/kendo-react-common";
|
|
12
12
|
const o = class o extends s.Component {
|
|
13
13
|
constructor() {
|
|
14
14
|
super(...arguments), this.itemRef = null, this.focus = () => {
|
|
@@ -23,18 +23,18 @@ const o = class o extends s.Component {
|
|
|
23
23
|
* @hidden
|
|
24
24
|
*/
|
|
25
25
|
render() {
|
|
26
|
-
const { id:
|
|
27
|
-
id: `${
|
|
26
|
+
const { id: c, active: t, disabled: i, title: a = "Untitled", index: n, renderAllContent: m } = this.props, l = m ? `${this.props.contentPanelId}-${n.toString()}` : this.props.contentPanelId, d = {
|
|
27
|
+
id: `${c}-${n.toString()}`,
|
|
28
28
|
"aria-selected": t,
|
|
29
29
|
"aria-controls": t ? l : void 0,
|
|
30
30
|
"aria-disabled": i,
|
|
31
31
|
role: "tab",
|
|
32
32
|
onClick: i ? void 0 : this.onClick
|
|
33
|
-
},
|
|
33
|
+
}, p = h("k-item", "k-tabstrip-item", {
|
|
34
34
|
"k-disabled": i,
|
|
35
35
|
"k-active": t
|
|
36
36
|
});
|
|
37
|
-
return /* @__PURE__ */ s.createElement("li", { ...
|
|
37
|
+
return /* @__PURE__ */ s.createElement("li", { ...d, className: p, ref: (f) => this.itemRef = f, onBlur: this.blur, "aria-controls": l }, /* @__PURE__ */ s.createElement("span", { className: "k-link" }, a));
|
|
38
38
|
}
|
|
39
39
|
};
|
|
40
40
|
o.propTypes = {
|
|
@@ -49,7 +49,7 @@ o.propTypes = {
|
|
|
49
49
|
first: e.bool,
|
|
50
50
|
last: e.bool
|
|
51
51
|
};
|
|
52
|
-
let
|
|
52
|
+
let r = o;
|
|
53
53
|
export {
|
|
54
|
-
|
|
54
|
+
r as TabStripNavigationItem
|
|
55
55
|
};
|