@progress/kendo-react-layout 9.5.0-develop.6 → 10.0.0-develop.1
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 +8 -10
- package/appbar/AppBar.js +1 -1
- package/appbar/AppBar.mjs +12 -14
- package/bottomnavigation/BottomNavigation.js +1 -1
- package/bottomnavigation/BottomNavigation.mjs +30 -32
- package/bottomnavigation/BottomNavigationItem.js +1 -1
- package/bottomnavigation/BottomNavigationItem.mjs +28 -30
- package/breadcrumb/Breadcrumb.js +1 -1
- package/breadcrumb/Breadcrumb.mjs +25 -27
- package/breadcrumb/BreadcrumbDelimiter.js +1 -1
- package/breadcrumb/BreadcrumbDelimiter.mjs +14 -16
- package/breadcrumb/BreadcrumbLink.js +1 -1
- package/breadcrumb/BreadcrumbLink.mjs +25 -27
- package/breadcrumb/BreadcrumbListItem.js +1 -1
- package/breadcrumb/BreadcrumbListItem.mjs +12 -14
- package/breadcrumb/BreadcrumbOrderedList.js +1 -1
- package/breadcrumb/BreadcrumbOrderedList.mjs +25 -27
- package/card/Avatar.js +1 -1
- package/card/Avatar.mjs +16 -17
- package/card/Card.js +1 -1
- package/card/Card.mjs +7 -9
- package/dist/cdn/js/kendo-react-layout.js +1 -1
- package/drawer/Drawer.js +1 -1
- package/drawer/Drawer.mjs +34 -36
- package/drawer/DrawerNavigation.js +1 -1
- package/drawer/DrawerNavigation.mjs +60 -64
- package/expansionpanel/ExpansionPanel.js +1 -1
- package/expansionpanel/ExpansionPanel.mjs +45 -47
- package/gridlayout/GridLayout.js +1 -1
- package/gridlayout/GridLayout.mjs +19 -21
- package/gridlayout/GridLayoutItem.js +1 -1
- package/gridlayout/GridLayoutItem.mjs +6 -8
- package/index.d.mts +1 -4
- package/index.d.ts +1 -4
- package/menu/components/Menu.js +1 -1
- package/menu/components/Menu.mjs +25 -26
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +8 -8
- package/panelbar/PanelBar.js +1 -1
- package/panelbar/PanelBar.mjs +46 -48
- package/splitter/Splitter.js +1 -1
- package/splitter/Splitter.mjs +64 -63
- package/stacklayout/StackLayout.js +1 -1
- package/stacklayout/StackLayout.mjs +4 -6
- package/stepper/Stepper.js +1 -1
- package/stepper/Stepper.mjs +35 -37
- package/tabstrip/TabStrip.js +1 -1
- package/tabstrip/TabStrip.mjs +31 -33
- package/tilelayout/TileLayout.js +1 -1
- package/tilelayout/TileLayout.mjs +47 -48
- package/timeline/Timeline.js +1 -1
- package/timeline/Timeline.mjs +21 -19
package/splitter/Splitter.mjs
CHANGED
|
@@ -5,51 +5,51 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import * as
|
|
8
|
+
import * as u from "react";
|
|
9
9
|
import { SplitterPane as T } from "./SplitterPane.mjs";
|
|
10
|
-
import { SplitterBar as
|
|
11
|
-
import { validatePackage as
|
|
12
|
-
import { packageMetadata as
|
|
13
|
-
import { splitBarLabel as O, messages as
|
|
14
|
-
import { provideLocalizationService as
|
|
15
|
-
const
|
|
10
|
+
import { SplitterBar as w } from "./SplitterBar.mjs";
|
|
11
|
+
import { validatePackage as b, classNames as k, WatermarkOverlay as B } from "@progress/kendo-react-common";
|
|
12
|
+
import { packageMetadata as N } from "../package-metadata.mjs";
|
|
13
|
+
import { splitBarLabel as O, messages as R } from "./messages/index.mjs";
|
|
14
|
+
import { provideLocalizationService as L } from "@progress/kendo-react-intl";
|
|
15
|
+
const _ = {
|
|
16
16
|
collapsible: !1,
|
|
17
17
|
collapsed: !1,
|
|
18
18
|
resizable: !0,
|
|
19
19
|
scrollable: !0
|
|
20
|
-
}, K = 150, D = class D extends
|
|
20
|
+
}, K = 150, D = class D extends u.Component {
|
|
21
21
|
/**
|
|
22
22
|
* @hidden
|
|
23
23
|
*/
|
|
24
|
-
constructor(
|
|
25
|
-
super(
|
|
24
|
+
constructor(n) {
|
|
25
|
+
super(n), this.showLicenseWatermark = !1, this._container = null, this.validatePanes = (t) => {
|
|
26
26
|
if (!t.filter((i) => i.size === void 0).length)
|
|
27
27
|
throw new Error("The Splitter should have at least one pane without a set size.");
|
|
28
28
|
}, this.mapPaneOptions = (t, e) => {
|
|
29
29
|
const i = this.orientation, { dragIndex: r, isDragging: a } = this.state, l = [];
|
|
30
|
-
for (let
|
|
30
|
+
for (let s = 0; s < e.length; s++) {
|
|
31
31
|
let o = !1;
|
|
32
|
-
const p = e[
|
|
33
|
-
|
|
32
|
+
const p = e[s];
|
|
33
|
+
u.isValidElement(p) && (o = p.type.displayName === "Splitter");
|
|
34
34
|
let h = !1;
|
|
35
|
-
a && r !== void 0 && (h = r ===
|
|
36
|
-
...
|
|
35
|
+
a && r !== void 0 && (h = r === s || r + 1 === s), l.push({
|
|
36
|
+
..._,
|
|
37
37
|
orientation: i,
|
|
38
38
|
containsSplitter: o,
|
|
39
39
|
overlay: h,
|
|
40
|
-
...(t || [])[
|
|
40
|
+
...(t || [])[s]
|
|
41
41
|
});
|
|
42
42
|
}
|
|
43
43
|
return l;
|
|
44
44
|
}, this.mapSplitterPanes = (t, e) => {
|
|
45
|
-
const i =
|
|
45
|
+
const i = L(this).toLanguageString(O, R[O]);
|
|
46
46
|
return t.map((r, a) => {
|
|
47
47
|
let l;
|
|
48
|
-
const
|
|
48
|
+
const s = a * 2, o = s + 1;
|
|
49
49
|
if (a + 1 < t.length) {
|
|
50
50
|
const h = t[a + 1];
|
|
51
|
-
l = /* @__PURE__ */
|
|
52
|
-
|
|
51
|
+
l = /* @__PURE__ */ u.createElement(
|
|
52
|
+
w,
|
|
53
53
|
{
|
|
54
54
|
key: o,
|
|
55
55
|
index: a,
|
|
@@ -64,16 +64,16 @@ const k = {
|
|
|
64
64
|
}
|
|
65
65
|
);
|
|
66
66
|
}
|
|
67
|
-
return [/* @__PURE__ */
|
|
67
|
+
return [/* @__PURE__ */ u.createElement(T, { key: s, ...r }, e[a]), l];
|
|
68
68
|
});
|
|
69
69
|
}, this.onBarToggle = (t, e) => {
|
|
70
70
|
const r = this.panesOptions(this.panesContent).map((a, l) => {
|
|
71
|
-
const
|
|
71
|
+
const s = this.getPaneProps(a);
|
|
72
72
|
return l === t ? {
|
|
73
|
-
...
|
|
73
|
+
...s,
|
|
74
74
|
collapsed: !a.collapsed
|
|
75
75
|
} : {
|
|
76
|
-
...
|
|
76
|
+
...s
|
|
77
77
|
};
|
|
78
78
|
});
|
|
79
79
|
this.props.onChange && this.props.onChange({
|
|
@@ -82,7 +82,7 @@ const k = {
|
|
|
82
82
|
nativeEvent: e
|
|
83
83
|
});
|
|
84
84
|
}, this.onBarDragResize = (t, e, i, r, a) => {
|
|
85
|
-
const l = (/* @__PURE__ */ new Date()).getTime(), { pageX:
|
|
85
|
+
const l = (/* @__PURE__ */ new Date()).getTime(), { pageX: s, pageY: o } = t, { prevElement: p, nextElement: h } = this.surroudingPanes(e);
|
|
86
86
|
if (!p || !h)
|
|
87
87
|
return;
|
|
88
88
|
if (r) {
|
|
@@ -90,27 +90,27 @@ const k = {
|
|
|
90
90
|
isDragging: !0,
|
|
91
91
|
dragIndex: i,
|
|
92
92
|
startTime: l,
|
|
93
|
-
originalX:
|
|
93
|
+
originalX: s,
|
|
94
94
|
originalY: o,
|
|
95
95
|
originalPrevSize: this.elementSize(p),
|
|
96
96
|
originalNextSize: this.elementSize(h)
|
|
97
97
|
});
|
|
98
98
|
return;
|
|
99
99
|
}
|
|
100
|
-
const { originalPrevSize: d, originalNextSize:
|
|
101
|
-
if (!r && l -
|
|
100
|
+
const { originalPrevSize: d, originalNextSize: c, startTime: v, originalX: f, originalY: S } = this.state;
|
|
101
|
+
if (!r && l - v < K) {
|
|
102
102
|
a && this.resetDragState();
|
|
103
103
|
return;
|
|
104
104
|
}
|
|
105
|
-
let
|
|
106
|
-
this.orientation === "vertical" ?
|
|
105
|
+
let g;
|
|
106
|
+
this.orientation === "vertical" ? g = o - S : this.isRtl ? g = f - s : g = s - f, this.resize(i, i + 1, d, c, g, a, t), a && this.resetDragState();
|
|
107
107
|
}, this.onBarKeyboardResize = (t, e, i, r) => {
|
|
108
|
-
const { prevElement: a, nextElement: l } = this.surroudingPanes(t),
|
|
109
|
-
this.resize(e, e + 1,
|
|
108
|
+
const { prevElement: a, nextElement: l } = this.surroudingPanes(t), s = this.elementSize(a), o = this.elementSize(l);
|
|
109
|
+
this.resize(e, e + 1, s, o, i, !0, r);
|
|
110
110
|
}, this.containerSize = () => this._container ? this.elementSize(this._container, !0) : 0, this.panesOptions = (t) => this.mapPaneOptions(this.panes, t), this.elementSize = (t, e) => {
|
|
111
111
|
const i = e ? "client" : "offset";
|
|
112
112
|
return this.orientation === "vertical" ? t[`${i}Height`] : t[`${i}Width`];
|
|
113
|
-
}, this.clamp = (t, e, i) => Math.min(e, Math.max(t, i)), this.fixedSize = (t) => t && t.length > 0,
|
|
113
|
+
}, this.clamp = (t, e, i) => Math.min(e, Math.max(t, i)), this.fixedSize = (t) => t && t.length > 0, this.showLicenseWatermark = !b(N, { component: "Splitter" }), this.state = {
|
|
114
114
|
isDragging: !1,
|
|
115
115
|
dragIndex: void 0,
|
|
116
116
|
startTime: 0,
|
|
@@ -118,7 +118,7 @@ const k = {
|
|
|
118
118
|
originalY: 0,
|
|
119
119
|
originalPrevSize: 0,
|
|
120
120
|
originalNextSize: 0,
|
|
121
|
-
panes:
|
|
121
|
+
panes: n.defaultPanes || []
|
|
122
122
|
};
|
|
123
123
|
}
|
|
124
124
|
get isControlledState() {
|
|
@@ -134,19 +134,19 @@ const k = {
|
|
|
134
134
|
return this._container && getComputedStyle(this._container).direction === "rtl" || !1;
|
|
135
135
|
}
|
|
136
136
|
get panesContent() {
|
|
137
|
-
return
|
|
137
|
+
return u.Children.toArray(this.props.children).filter((n) => n);
|
|
138
138
|
}
|
|
139
139
|
/**
|
|
140
140
|
* @hidden
|
|
141
141
|
*/
|
|
142
142
|
render() {
|
|
143
|
-
const
|
|
143
|
+
const n = this.panesContent, t = this.panesOptions(n), e = k(
|
|
144
144
|
"k-splitter",
|
|
145
145
|
"k-splitter-flex",
|
|
146
146
|
`k-splitter-${this.orientation}`,
|
|
147
147
|
this.props.className
|
|
148
148
|
);
|
|
149
|
-
return this.validatePanes(t), /* @__PURE__ */
|
|
149
|
+
return this.validatePanes(t), /* @__PURE__ */ u.createElement(
|
|
150
150
|
"div",
|
|
151
151
|
{
|
|
152
152
|
id: this.props.id,
|
|
@@ -154,21 +154,22 @@ const k = {
|
|
|
154
154
|
ref: (i) => this._container = i,
|
|
155
155
|
className: e
|
|
156
156
|
},
|
|
157
|
-
this.mapSplitterPanes(t,
|
|
157
|
+
this.mapSplitterPanes(t, n),
|
|
158
|
+
this.showLicenseWatermark && /* @__PURE__ */ u.createElement(B, null)
|
|
158
159
|
);
|
|
159
160
|
}
|
|
160
|
-
surroudingPanes(
|
|
161
|
+
surroudingPanes(n) {
|
|
161
162
|
return {
|
|
162
|
-
prevElement:
|
|
163
|
-
nextElement:
|
|
163
|
+
prevElement: n.previousElementSibling,
|
|
164
|
+
nextElement: n.nextElementSibling
|
|
164
165
|
};
|
|
165
166
|
}
|
|
166
|
-
isPercent(
|
|
167
|
-
return /%$/.test(
|
|
167
|
+
isPercent(n) {
|
|
168
|
+
return /%$/.test(n);
|
|
168
169
|
}
|
|
169
|
-
toPixels(
|
|
170
|
-
let e = parseInt(
|
|
171
|
-
return this.isPercent(
|
|
170
|
+
toPixels(n, t) {
|
|
171
|
+
let e = parseInt(n, 10);
|
|
172
|
+
return this.isPercent(n) && (e = t * e / 100), e;
|
|
172
173
|
}
|
|
173
174
|
resetDragState() {
|
|
174
175
|
this.setState({
|
|
@@ -181,29 +182,29 @@ const k = {
|
|
|
181
182
|
originalNextSize: 0
|
|
182
183
|
});
|
|
183
184
|
}
|
|
184
|
-
resize(
|
|
185
|
-
const
|
|
186
|
-
index:
|
|
185
|
+
resize(n, t, e, i, r, a, l) {
|
|
186
|
+
const s = this.panesOptions(this.panesContent), o = s[n], p = s[t], h = e + i, d = this.containerSize(), c = (m) => this.toPixels(m, d), v = {
|
|
187
|
+
index: n,
|
|
187
188
|
initialSize: e,
|
|
188
|
-
min:
|
|
189
|
-
max:
|
|
189
|
+
min: c(o.min) || h - c(p.max) || 0,
|
|
190
|
+
max: c(o.max) || h - c(p.min) || h
|
|
190
191
|
}, f = {
|
|
191
192
|
index: t,
|
|
192
193
|
initialSize: i,
|
|
193
|
-
min:
|
|
194
|
-
max:
|
|
195
|
-
},
|
|
196
|
-
const z =
|
|
194
|
+
min: c(p.min) || h - c(o.max) || 0,
|
|
195
|
+
max: c(p.max) || h - c(o.min) || h
|
|
196
|
+
}, S = (m, P) => {
|
|
197
|
+
const z = s[m.index], E = this.clamp(m.min, m.max, m.initialSize + P);
|
|
197
198
|
return this.isPercent(z.size || "") ? 100 * E / d + "%" : E + "px";
|
|
198
199
|
};
|
|
199
|
-
let
|
|
200
|
-
this.fixedSize(o.size) && this.fixedSize(p.size) ? (
|
|
201
|
-
const C =
|
|
200
|
+
let g, x;
|
|
201
|
+
this.fixedSize(o.size) && this.fixedSize(p.size) ? (g = S(v, r), x = S(f, -r)) : p.collapsible || this.fixedSize(p.size) ? x = S(f, -r) : g = S(v, r);
|
|
202
|
+
const C = s.map((m, P) => {
|
|
202
203
|
const z = this.getPaneProps(m);
|
|
203
|
-
return
|
|
204
|
+
return P === n ? {
|
|
204
205
|
...z,
|
|
205
|
-
size:
|
|
206
|
-
} :
|
|
206
|
+
size: g
|
|
207
|
+
} : P === t ? {
|
|
207
208
|
...z,
|
|
208
209
|
size: x
|
|
209
210
|
} : {
|
|
@@ -218,8 +219,8 @@ const k = {
|
|
|
218
219
|
nativeEvent: l
|
|
219
220
|
}), this.panesDuringOnChange = void 0;
|
|
220
221
|
}
|
|
221
|
-
getPaneProps(
|
|
222
|
-
const { orientation: t, overlay: e, containsSplitter: i, ...r } =
|
|
222
|
+
getPaneProps(n) {
|
|
223
|
+
const { orientation: t, overlay: e, containsSplitter: i, ...r } = n;
|
|
223
224
|
return r;
|
|
224
225
|
}
|
|
225
226
|
};
|
|
@@ -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 j=require("react"),n=require("prop-types"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("react"),n=require("prop-types"),m=require("@progress/kendo-react-common");function O(t){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const c in t)if(c!=="default"){const l=Object.getOwnPropertyDescriptor(t,c);Object.defineProperty(s,c,l.get?l:{enumerable:!0,get:()=>t[c]})}}return s.default=t,Object.freeze(s)}const i=O(j),g=i.forwardRef((t,s)=>{const c=i.useRef(null),l=i.useCallback(()=>({element:c.current}),[]);i.useImperativeHandle(s,l);const{className:d,style:y,id:f,children:h}=t,k=m.useId(),r=i.useMemo(()=>t.orientation||u.orientation,[t.orientation]),e=r==="horizontal",a=i.useMemo(()=>t.align&&t.align.horizontal?t.align.horizontal:u.hAlign,[t.align]),o=i.useMemo(()=>t.align&&t.align.vertical?t.align.vertical:u.vAlign,[t.align]),b=i.useMemo(()=>m.classNames("k-stack-layout",{"k-hstack":r==="horizontal","k-vstack":r==="vertical","k-justify-content-start":e&&a==="start"||!e&&o==="top","k-justify-content-center":e&&a==="center"||!e&&o==="middle","k-justify-content-end":e&&a==="end"||!e&&o==="bottom","k-justify-content-stretch":e&&a==="stretch"||!e&&o==="stretch","k-align-items-start":!e&&a==="start"||e&&o==="top","k-align-items-center":!e&&a==="center"||e&&o==="middle","k-align-items-end":!e&&a==="end"||e&&o==="bottom","k-align-items-stretch":!e&&a==="stretch"||e&&o==="stretch"},d),[r,e,a,o,d]),v={gap:`${typeof t.gap=="number"?t.gap+"px":t.gap}`,...y};return i.createElement("div",{ref:c,className:b,style:v,id:f||k},h)}),u={orientation:"horizontal",hAlign:"stretch",vAlign:"stretch"};g.propTypes={className:n.string,style:n.object,children:n.any,id:n.string,orientation:n.oneOf(["horizontal","vertical"]),gap:n.oneOfType([n.string,n.number]),align:n.shape({vertical:n.oneOf(["top","middle","bottom","stretch"]),horizontal:n.oneOf(["start","center","end","stretch"])})};g.displayName="KendoReactStackLayout";exports.StackLayout=g;
|
|
@@ -7,10 +7,8 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import * as o from "react";
|
|
9
9
|
import n from "prop-types";
|
|
10
|
-
import {
|
|
11
|
-
import { validatePackage as b, useId as A, classNames as j } from "@progress/kendo-react-common";
|
|
10
|
+
import { useId as z, classNames as b } from "@progress/kendo-react-common";
|
|
12
11
|
const m = o.forwardRef((e, g) => {
|
|
13
|
-
b(z);
|
|
14
12
|
const c = o.useRef(null), d = o.useCallback(
|
|
15
13
|
() => ({
|
|
16
14
|
element: c.current
|
|
@@ -18,14 +16,14 @@ const m = o.forwardRef((e, g) => {
|
|
|
18
16
|
[]
|
|
19
17
|
);
|
|
20
18
|
o.useImperativeHandle(g, d);
|
|
21
|
-
const { className: r, style: h, id: u, children:
|
|
19
|
+
const { className: r, style: h, id: u, children: y } = e, k = z(), s = o.useMemo(() => e.orientation || l.orientation, [e.orientation]), t = s === "horizontal", a = o.useMemo(
|
|
22
20
|
() => e.align && e.align.horizontal ? e.align.horizontal : l.hAlign,
|
|
23
21
|
[e.align]
|
|
24
22
|
), i = o.useMemo(
|
|
25
23
|
() => e.align && e.align.vertical ? e.align.vertical : l.vAlign,
|
|
26
24
|
[e.align]
|
|
27
25
|
), f = o.useMemo(
|
|
28
|
-
() =>
|
|
26
|
+
() => b(
|
|
29
27
|
"k-stack-layout",
|
|
30
28
|
{
|
|
31
29
|
"k-hstack": s === "horizontal",
|
|
@@ -46,7 +44,7 @@ const m = o.forwardRef((e, g) => {
|
|
|
46
44
|
gap: `${typeof e.gap == "number" ? e.gap + "px" : e.gap}`,
|
|
47
45
|
...h
|
|
48
46
|
};
|
|
49
|
-
return /* @__PURE__ */ o.createElement("div", { ref: c, className: f, style: v, id: u ||
|
|
47
|
+
return /* @__PURE__ */ o.createElement("div", { ref: c, className: f, style: v, id: u || k }, y);
|
|
50
48
|
}), l = {
|
|
51
49
|
orientation: "horizontal",
|
|
52
50
|
hAlign: "stretch",
|
package/stepper/Stepper.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 te=require("react"),o=require("prop-types"),ne=require("./context/StepperContext.js"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const te=require("react"),o=require("prop-types"),ne=require("./context/StepperContext.js"),p=require("@progress/kendo-react-common"),se=require("./Step.js"),oe=require("@progress/kendo-react-progressbars"),z=require("./contants.js"),re=require("@progress/kendo-react-intl"),O=require("./messages/index.js");function ie(m){const k=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(m){for(const d in m)if(d!=="default"){const h=Object.getOwnPropertyDescriptor(m,d);Object.defineProperty(k,d,h.get?h:{enumerable:!0,get:()=>m[d]})}}return k.default=m,Object.freeze(k)}const e=ie(te),T=e.forwardRef((m,k)=>{const{animationDuration:d,children:h,className:D,disabled:g,errorIcon:V,errorSVGIcon:j,item:w,items:b,linear:y,mode:_,orientation:S,selectOnFocus:E,style:P,successIcon:K,successSVGIcon:G,value:c=0,onChange:C,onFocus:N}=m,B=re.useLocalization().toLanguageString(O.progBarAriaLabel,O.messages[O.progBarAriaLabel]),v=e.useRef(null),q=e.useCallback(()=>{v.current&&p.focusFirstFocusableChild(v.current)},[]),x=e.useCallback(()=>({element:v.current,focus:q}),[q]);e.useImperativeHandle(k,x);const[H,u]=e.useState(c),f=b?b.length:0,s=S==="vertical",R=p.useDir(v,m.dir),U=typeof d=="number"?d:d!==!1?z.DEFAULT_ANIMATION_DURATION:z.NO_ANIMATION;e.useEffect(()=>{u(c)},[c]);const F=e.useCallback((i,r)=>{const t=r===c-1,n=r===c,a=r===c+1;c!==r&&C&&!g&&(!y||t||n||a)&&(p.dispatchEvent(C,i,x(),{value:r}),u(r))},[c,y,C,g,u]),J=e.useCallback(i=>{const r=i.value,t=i.syntheticEvent;F(t,r)},[F]),Q=e.useCallback(i=>{N&&!g&&p.dispatchEvent(N,i.syntheticEvent,x(),void 0)},[N,g]),I=e.useMemo(()=>{const i=R==="rtl",r=b.length-1;return new p.Navigation({root:v,selectors:["ol.k-step-list li.k-step a.k-step-link"],tabIndex:0,keyboardEvents:{keydown:{Tab:(t,n,a)=>{a.preventDefault();const l=n.elements.indexOf(t),M=n.previous(t).children[0],A=n.next(t).children[0];a.shiftKey?!i&&l>0?(n.focusPrevious(t),u(l-1),E&&M.click()):i&&l<r&&(n.focusNext(t),u(l+1),E&&A.click()):!i&&l<r?(n.focusNext(t),u(l+1),E&&A.click()):i&&l>0&&(n.focusPrevious(t),u(l-1),E&&M.click())},Home:(t,n,a)=>{a.preventDefault(),n.focusElement(n.first,t),u(0)},End:(t,n,a)=>{a.preventDefault(),n.focusElement(n.last,t),u(r)},Space:(t,n,a)=>{a.preventDefault(),t.children[0].click()},Enter:(t,n,a)=>{a.preventDefault(),t.children[0].click()}}}})},[R,b.length,u,E]);e.useEffect(()=>(I.initializeRovingTab(c),()=>I.removeFocusListener()),[]);const W=e.useCallback(I.triggerKeyboardEvent.bind(I),[]),X=e.useMemo(()=>p.classNames("k-stepper",{"k-stepper-linear":y},D),[y,D]),Y=e.useMemo(()=>({display:"grid",gridTemplateColumns:s?void 0:"repeat("+f*2+", 1fr)",gridTemplateRows:s?"repeat("+f+", 1fr)":void 0,...P}),[s,f,P]),Z=e.useMemo(()=>p.classNames("k-step-list",{"k-step-list-horizontal":!s,"k-step-list-vertical":s}),[s]),$=e.useMemo(()=>({gridColumnStart:s?void 0:1,gridColumnEnd:s?void 0:-1,gridRowStart:s?1:void 0,gridRowEnd:s?-1:void 0}),[s]),ee=e.useMemo(()=>({gridColumnStart:s?void 0:2,gridColumnEnd:s?void 0:f*2,gridRowStart:s?1:void 0,gridRowEnd:s?f:void 0,top:s?17:void 0}),[s,f]),L=b&&b.map((i,r)=>{const t={index:r,disabled:g||i.disabled,focused:r===H,current:r===c,...i},n=w||se.Step;return e.createElement(n,{key:r,...t})});return e.createElement(ne.StepperContext.Provider,{value:{animationDuration:d,isVertical:s,item:w,linear:y,mode:_,numOfSteps:f,value:c,successIcon:K,successSVGIcon:G,errorIcon:V,errorSVGIcon:j,onChange:J,onFocus:Q}},e.createElement("nav",{className:X,style:Y,dir:R,role:"navigation",ref:v,onKeyDown:W},e.createElement("ol",{className:Z,style:$},L||h),e.createElement(oe.ProgressBar,{style:ee,labelPlacement:"start",animation:{duration:U},ariaLabel:B,"aria-hidden":!0,max:f-1,labelVisible:!1,orientation:S,reverse:S==="vertical",value:c,disabled:g,tabIndex:-1})))});T.propTypes={animationDuration:o.oneOfType([o.bool,o.number]),children:o.any,className:o.string,dir:o.string,disabled:o.bool,errorIcon:o.string,errorSVGIcon:p.svgIconPropType,item:o.any,items:o.any,linear:o.bool,mode:o.oneOf(["steps","labels"]),orientation:o.oneOf(["horizontal","vertical"]),style:o.object,successIcon:o.string,successSVGIcon:p.svgIconPropType,value:o.number.isRequired,onChange:o.func,onFocus:o.func};T.displayName="KendoStepper";exports.Stepper=T;
|
package/stepper/Stepper.mjs
CHANGED
|
@@ -8,15 +8,13 @@
|
|
|
8
8
|
import * as e from "react";
|
|
9
9
|
import n from "prop-types";
|
|
10
10
|
import { StepperContext as oe } from "./context/StepperContext.mjs";
|
|
11
|
-
import {
|
|
12
|
-
import { Step as
|
|
11
|
+
import { focusFirstFocusableChild as se, useDir as ne, dispatchEvent as L, Navigation as re, classNames as A, svgIconPropType as M } from "@progress/kendo-react-common";
|
|
12
|
+
import { Step as ie } from "./Step.mjs";
|
|
13
13
|
import { ProgressBar as le } from "@progress/kendo-react-progressbars";
|
|
14
|
-
import { DEFAULT_ANIMATION_DURATION as
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import { progBarAriaLabel as A, messages as pe } from "./messages/index.mjs";
|
|
14
|
+
import { DEFAULT_ANIMATION_DURATION as ae, NO_ANIMATION as ce } from "./contants.mjs";
|
|
15
|
+
import { useLocalization as ue } from "@progress/kendo-react-intl";
|
|
16
|
+
import { progBarAriaLabel as P, messages as de } from "./messages/index.mjs";
|
|
18
17
|
const V = e.forwardRef((S, z) => {
|
|
19
|
-
se(de);
|
|
20
18
|
const {
|
|
21
19
|
animationDuration: b,
|
|
22
20
|
children: K,
|
|
@@ -33,11 +31,11 @@ const V = e.forwardRef((S, z) => {
|
|
|
33
31
|
style: R,
|
|
34
32
|
successIcon: B,
|
|
35
33
|
successSVGIcon: U,
|
|
36
|
-
value:
|
|
34
|
+
value: l = 0,
|
|
37
35
|
onChange: y,
|
|
38
36
|
onFocus: h
|
|
39
|
-
} = S, j =
|
|
40
|
-
f.current &&
|
|
37
|
+
} = S, j = ue().toLanguageString(P, de[P]), f = e.useRef(null), w = e.useCallback(() => {
|
|
38
|
+
f.current && se(f.current);
|
|
41
39
|
}, []), I = e.useCallback(
|
|
42
40
|
() => ({
|
|
43
41
|
element: f.current,
|
|
@@ -46,18 +44,18 @@ const V = e.forwardRef((S, z) => {
|
|
|
46
44
|
[w]
|
|
47
45
|
);
|
|
48
46
|
e.useImperativeHandle(z, I);
|
|
49
|
-
const [q, u] = e.useState(
|
|
47
|
+
const [q, u] = e.useState(l), d = p ? p.length : 0, s = E === "vertical", C = ne(f, S.dir), J = typeof b == "number" ? b : b !== !1 ? ae : ce;
|
|
50
48
|
e.useEffect(() => {
|
|
51
|
-
u(
|
|
52
|
-
}, [
|
|
49
|
+
u(l);
|
|
50
|
+
}, [l]);
|
|
53
51
|
const D = e.useCallback(
|
|
54
52
|
(i, r) => {
|
|
55
|
-
const t = r ===
|
|
56
|
-
|
|
53
|
+
const t = r === l - 1, o = r === l, a = r === l + 1;
|
|
54
|
+
l !== r && y && !m && (!g || t || o || a) && (L(y, i, I(), {
|
|
57
55
|
value: r
|
|
58
56
|
}), u(r));
|
|
59
57
|
},
|
|
60
|
-
[
|
|
58
|
+
[l, g, y, m, u]
|
|
61
59
|
), Q = e.useCallback(
|
|
62
60
|
(i) => {
|
|
63
61
|
const r = i.value, t = i.syntheticEvent;
|
|
@@ -76,36 +74,36 @@ const V = e.forwardRef((S, z) => {
|
|
|
76
74
|
[h, m]
|
|
77
75
|
), k = e.useMemo(() => {
|
|
78
76
|
const i = C === "rtl", r = p.length - 1;
|
|
79
|
-
return new
|
|
77
|
+
return new re({
|
|
80
78
|
root: f,
|
|
81
79
|
selectors: ["ol.k-step-list li.k-step a.k-step-link"],
|
|
82
80
|
tabIndex: 0,
|
|
83
81
|
keyboardEvents: {
|
|
84
82
|
keydown: {
|
|
85
|
-
Tab: (t, o,
|
|
86
|
-
|
|
83
|
+
Tab: (t, o, a) => {
|
|
84
|
+
a.preventDefault();
|
|
87
85
|
const c = o.elements.indexOf(t), F = o.previous(t).children[0], O = o.next(t).children[0];
|
|
88
|
-
|
|
86
|
+
a.shiftKey ? !i && c > 0 ? (o.focusPrevious(t), u(c - 1), v && F.click()) : i && c < r && (o.focusNext(t), u(c + 1), v && O.click()) : !i && c < r ? (o.focusNext(t), u(c + 1), v && O.click()) : i && c > 0 && (o.focusPrevious(t), u(c - 1), v && F.click());
|
|
89
87
|
},
|
|
90
|
-
Home: (t, o,
|
|
91
|
-
|
|
88
|
+
Home: (t, o, a) => {
|
|
89
|
+
a.preventDefault(), o.focusElement(o.first, t), u(0);
|
|
92
90
|
},
|
|
93
|
-
End: (t, o,
|
|
94
|
-
|
|
91
|
+
End: (t, o, a) => {
|
|
92
|
+
a.preventDefault(), o.focusElement(o.last, t), u(r);
|
|
95
93
|
},
|
|
96
|
-
Space: (t, o,
|
|
97
|
-
|
|
94
|
+
Space: (t, o, a) => {
|
|
95
|
+
a.preventDefault(), t.children[0].click();
|
|
98
96
|
},
|
|
99
|
-
Enter: (t, o,
|
|
100
|
-
|
|
97
|
+
Enter: (t, o, a) => {
|
|
98
|
+
a.preventDefault(), t.children[0].click();
|
|
101
99
|
}
|
|
102
100
|
}
|
|
103
101
|
}
|
|
104
102
|
});
|
|
105
103
|
}, [C, p.length, u, v]);
|
|
106
|
-
e.useEffect(() => (k.initializeRovingTab(
|
|
104
|
+
e.useEffect(() => (k.initializeRovingTab(l), () => k.removeFocusListener()), []);
|
|
107
105
|
const X = e.useCallback(k.triggerKeyboardEvent.bind(k), []), Y = e.useMemo(
|
|
108
|
-
() =>
|
|
106
|
+
() => A(
|
|
109
107
|
"k-stepper",
|
|
110
108
|
{
|
|
111
109
|
"k-stepper-linear": g
|
|
@@ -122,7 +120,7 @@ const V = e.forwardRef((S, z) => {
|
|
|
122
120
|
}),
|
|
123
121
|
[s, d, R]
|
|
124
122
|
), $ = e.useMemo(
|
|
125
|
-
() =>
|
|
123
|
+
() => A("k-step-list", {
|
|
126
124
|
"k-step-list-horizontal": !s,
|
|
127
125
|
"k-step-list-vertical": s
|
|
128
126
|
}),
|
|
@@ -149,9 +147,9 @@ const V = e.forwardRef((S, z) => {
|
|
|
149
147
|
index: r,
|
|
150
148
|
disabled: m || i.disabled,
|
|
151
149
|
focused: r === q,
|
|
152
|
-
current: r ===
|
|
150
|
+
current: r === l,
|
|
153
151
|
...i
|
|
154
|
-
}, o = N ||
|
|
152
|
+
}, o = N || ie;
|
|
155
153
|
return /* @__PURE__ */ e.createElement(o, { key: r, ...t });
|
|
156
154
|
});
|
|
157
155
|
return /* @__PURE__ */ e.createElement(
|
|
@@ -164,7 +162,7 @@ const V = e.forwardRef((S, z) => {
|
|
|
164
162
|
linear: g,
|
|
165
163
|
mode: _,
|
|
166
164
|
numOfSteps: d,
|
|
167
|
-
value:
|
|
165
|
+
value: l,
|
|
168
166
|
successIcon: B,
|
|
169
167
|
successSVGIcon: U,
|
|
170
168
|
errorIcon: G,
|
|
@@ -196,7 +194,7 @@ const V = e.forwardRef((S, z) => {
|
|
|
196
194
|
labelVisible: !1,
|
|
197
195
|
orientation: E,
|
|
198
196
|
reverse: E === "vertical",
|
|
199
|
-
value:
|
|
197
|
+
value: l,
|
|
200
198
|
disabled: m,
|
|
201
199
|
tabIndex: -1
|
|
202
200
|
}
|
|
@@ -211,7 +209,7 @@ V.propTypes = {
|
|
|
211
209
|
dir: n.string,
|
|
212
210
|
disabled: n.bool,
|
|
213
211
|
errorIcon: n.string,
|
|
214
|
-
errorSVGIcon:
|
|
212
|
+
errorSVGIcon: M,
|
|
215
213
|
item: n.any,
|
|
216
214
|
items: n.any,
|
|
217
215
|
linear: n.bool,
|
|
@@ -219,7 +217,7 @@ V.propTypes = {
|
|
|
219
217
|
orientation: n.oneOf(["horizontal", "vertical"]),
|
|
220
218
|
style: n.object,
|
|
221
219
|
successIcon: n.string,
|
|
222
|
-
successSVGIcon:
|
|
220
|
+
successSVGIcon: M,
|
|
223
221
|
value: n.number.isRequired,
|
|
224
222
|
onChange: n.func,
|
|
225
223
|
onFocus: n.func
|
package/tabstrip/TabStrip.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 v=require("react"),l=require("prop-types"),S=require("./TabStripNavigation.js"),y=require("./TabStripContent.js"),b=require("@progress/kendo-react-common");function P(p){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const s in p)if(s!=="default"){const o=Object.getOwnPropertyDescriptor(p,s);Object.defineProperty(r,s,o.get?o:{enumerable:!0,get:()=>p[s]})}}return r.default=p,Object.freeze(r)}const d=P(v),u=class u extends d.Component{constructor(r){super(r),this.tabStripRef=d.createRef(),this.itemsNavRef=d.createRef(),this.onScroll=()=>{const s=this.horizontalScroll(),o=this.itemsNavRef.current;if(!o)return;const e=o.scrollLeft,t=o.clientWidth,i=o.scrollWidth,n=o.scrollTop,c=o.scrollHeight,h=o.clientHeight;let a=null;const g=s?i>t:c>h,m=this.props.dir==="rtl";g?s?e+t===i||(m&&t-e)===i?a="end":e===0||m&&-e===0?a="start":e>0&&e+t<i||-e>0&&t-e<i?a="middle":a=null:c-(n+h)===0?a="bottom":n===0?a="top":n>0&&c-(n+h)>0?a="middle":a=null:a=null,this.setState({containerScrollPosition:a})},this.handleResize=()=>{this.onScroll()},this.onSelect=s=>{this.props.selected!==s&&this.props.onSelect&&this.props.onSelect({selected:s})},this.onKeyDown=s=>{this.navigation&&this.navigation.triggerKeyboardEvent(s)},this.onKeyboardSelect=s=>{const o=this.children();o&&o[s].props.disabled||this.onSelect(s)},this.renderContent=s=>{const{selected:o,children:e,tabContentStyle:t}=s,i=d.Children.count(e);return o<i&&o>-1?d.createElement(y.TabStripContent,{index:o,...s,style:t}):null},this.state={containerScrollPosition:null},this.itemsNavRef=d.createRef()}get contentPanelId(){return this.props.id+"-content-panel-id"}get navItemId(){return this.props.id+"-nav-item-id"}componentDidMount(){var o;const r=this.tabStripRef.current,s=r&&getComputedStyle(r).direction==="rtl"||!1;r&&(this.navigation=new b.Navigation({tabIndex:0,root:this.tabStripRef,rovingTabIndex:!0,focusClass:"k-focus",selectors:[".k-tabstrip .k-tabstrip-item"],keyboardEvents:{keydown:{ArrowLeft:(e,t,i)=>{i.preventDefault();const n=t.elements.indexOf(e),c=n!==0?n-1:t.elements.length-1,h=n!==t.elements.length-1?n+1:0;s?(t.focusNext(e),this.onKeyboardSelect(h)):(t.focusPrevious(e),this.onKeyboardSelect(c))},ArrowRight:(e,t,i)=>{i.preventDefault();const n=t.elements.indexOf(e),c=n!==0?n-1:t.elements.length-1,h=n!==t.elements.length-1?n+1:0;s?(t.focusPrevious(e),this.onKeyboardSelect(c)):(t.focusNext(e),this.onKeyboardSelect(h))},ArrowDown:(e,t,i)=>{i.preventDefault();const n=t.elements.indexOf(e),c=n!==t.elements.length-1?n+1:0;t.focusNext(e),this.onKeyboardSelect(c)},ArrowUp:(e,t,i)=>{i.preventDefault();const n=t.elements.indexOf(e),c=n!==0?n-1:t.elements.length-1;t.focusPrevious(e),this.onKeyboardSelect(c)},Home:(e,t,i)=>{i.preventDefault(),t.focusElement(t.first,e),this.onKeyboardSelect(0)},End:(e,t,i)=>{i.preventDefault(),t.focusElement(t.last,e),this.onKeyboardSelect(t.elements.length-1)}}}}),(o=this.navigation)==null||o.initializeRovingTab(this.props.selected),this.onScroll(),this.resizeObserver=window.ResizeObserver&&new ResizeObserver(()=>this.onScroll()),this.tabStripRef.current&&this.resizeObserver&&this.resizeObserver.observe(this.tabStripRef.current))}componentWillUnmount(){var r;(r=this.navigation)==null||r.removeFocusListener(),this.resizeObserver&&this.resizeObserver.disconnect()}horizontalScroll(){return/top|bottom/.test(this.props.tabPosition||"top")}render(){const r={itemsNavRef:this.itemsNavRef,...this.props,children:this.children(),contentPanelId:this.contentPanelId,renderAllContent:this.props.renderAllContent,navItemId:this.navItemId,onKeyDown:this.onKeyDown,onSelect:this.onSelect,onScroll:this.onScroll,containerScrollPosition:this.state.containerScrollPosition,scrollButtons:this.props.scrollButtons==="hidden"||this.state.containerScrollPosition===null&&this.props.scrollButtons==="auto"?"hidden":"visible"},{scrollable:s,scrollButtons:o,size:e,tabPosition:t,tabIndex:i}=r,n=t==="bottom",c=b.classNames("k-tabstrip k-pos-relative",{[`k-tabstrip-${b.kendoThemeMaps.sizeMap[e]||e}`]:e,"k-tabstrip-left":t==="left","k-tabstrip-right":t==="right","k-tabstrip-bottom":t==="bottom","k-tabstrip-top":t==="top","k-tabstrip-scrollable":s,"k-tabstrip-scrollable-start k-tabstrip-scrollable-end":s&&o==="visible","k-tabstrip-scrollable-start":s&&(o==="auto"||!o)&&(this.state.containerScrollPosition==="end"||this.state.containerScrollPosition==="middle"),"k-tabstrip-scrollable-end":s&&o==="auto"&&(this.state.containerScrollPosition==="start"||this.state.containerScrollPosition==="middle")},this.props.className);return d.createElement("div",{id:this.props.id,ref:this.tabStripRef,dir:this.props.dir,className:c,style:this.props.style,onScroll:this.onScroll,onResize:this.handleResize},!n&&d.createElement(S.TabStripNavigation,{...r,tabIndex:i}),this.renderContent(r),n&&d.createElement(S.TabStripNavigation,{...r,tabIndex:i}))}children(){return d.Children.toArray(this.props.children).filter(r=>r)}};u.propTypes={id:l.string,animation:l.bool,children:l.node,onSelect:l.func,selected:l.number,style:l.object,tabContentStyle:l.object,tabPosition:l.string,tabAlignment:l.string,tabIndex:l.number,className:l.string,dir:l.string,renderAllContent:l.bool,size:l.oneOf(["small","medium","large",null]),scrollButtons:l.oneOf(["auto","visible","hidden"]),scrollButtonsPosition:l.oneOf(["split","start","end","around","before","after"])},u.defaultProps={animation:!0,tabPosition:"top",tabAlignment:"start",keepTabsMounted:!1,buttonScrollSpeed:100,mouseScrollSpeed:10,scrollButtons:"auto",scrollButtonsPosition:"split",size:"medium",renderAllContent:!1};let f=u;exports.TabStrip=f;
|