@progress/kendo-react-layout 7.4.0-develop.9 → 7.5.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/appbar/AppBar.js +1 -1
- package/appbar/AppBar.mjs +41 -43
- package/breadcrumb/BreadcrumbLink.js +1 -1
- package/breadcrumb/BreadcrumbLink.mjs +22 -22
- package/card/Card.js +1 -1
- package/card/Card.mjs +19 -19
- package/dist/cdn/js/kendo-react-layout.js +1 -1
- package/index.d.mts +17 -9
- package/index.d.ts +17 -9
- package/package-metadata.mjs +1 -1
- package/package.json +6 -6
- package/panelbar/PanelBar.js +1 -1
- package/panelbar/PanelBar.mjs +9 -10
- package/panelbar/PanelBarItem.js +1 -1
- package/panelbar/PanelBarItem.mjs +68 -65
- package/panelbar/util.js +1 -1
- package/panelbar/util.mjs +74 -70
- package/splitter/Splitter.js +1 -1
- package/splitter/Splitter.mjs +6 -7
- package/stepper/Step.js +1 -1
- package/stepper/Step.mjs +48 -48
- package/stepper/Stepper.js +1 -1
- package/stepper/Stepper.mjs +76 -75
- package/timeline/TimelineCard.js +1 -1
- package/timeline/TimelineCard.mjs +15 -20
- package/timeline/TimelineHorizontal.js +1 -1
- package/timeline/TimelineHorizontal.mjs +98 -93
package/panelbar/util.mjs
CHANGED
|
@@ -6,98 +6,102 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
|
-
import * as
|
|
10
|
-
import { PanelBarItem as
|
|
11
|
-
const
|
|
9
|
+
import * as t from "react";
|
|
10
|
+
import { PanelBarItem as i } from "./PanelBarItem.mjs";
|
|
11
|
+
const y = (n) => typeof n != "object" || !("type" in n) || n.type !== i, I = ({
|
|
12
12
|
animation: n = !0,
|
|
13
13
|
keepItemsMounted: r = !1,
|
|
14
14
|
state: e,
|
|
15
15
|
expanded: o,
|
|
16
16
|
handleSelect: f,
|
|
17
17
|
children: p,
|
|
18
|
-
parentExpanded:
|
|
19
|
-
level:
|
|
20
|
-
parentPrivateKey:
|
|
21
|
-
}) =>
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
if (s.
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
{
|
|
41
|
-
...s.props,
|
|
42
|
-
animation: s.props.animation !== void 0 ? s.props.animation : n,
|
|
43
|
-
keepItemsMounted: r,
|
|
44
|
-
id: s.props.id || `k-panelbar-item-default-${d}`,
|
|
45
|
-
uniquePrivateKey: d,
|
|
46
|
-
parentUniquePrivateKey: u,
|
|
47
|
-
parentExpanded: i,
|
|
48
|
-
level: t,
|
|
49
|
-
expanded: (o || []).indexOf(d) > -1,
|
|
50
|
-
focused: e.focused === d && e.wrapperFocused,
|
|
51
|
-
selected: e.selected === d,
|
|
52
|
-
children: m,
|
|
53
|
-
onSelect: f
|
|
18
|
+
parentExpanded: u = !0,
|
|
19
|
+
level: a = 0,
|
|
20
|
+
parentPrivateKey: c = []
|
|
21
|
+
}) => {
|
|
22
|
+
const m = t.Children.toArray(p).filter(y), C = m.length ? m : p;
|
|
23
|
+
return t.Children.map(C, (s, E) => {
|
|
24
|
+
if (s && s.type === i) {
|
|
25
|
+
let g;
|
|
26
|
+
const d = l(s, c, E);
|
|
27
|
+
if (s.props.children) {
|
|
28
|
+
const b = {
|
|
29
|
+
animation: n,
|
|
30
|
+
keepItemsMounted: r,
|
|
31
|
+
state: e,
|
|
32
|
+
expanded: o,
|
|
33
|
+
handleSelect: f,
|
|
34
|
+
children: s.props.children,
|
|
35
|
+
parentExpanded: (o || []).indexOf(d) > -1,
|
|
36
|
+
level: a + 1,
|
|
37
|
+
parentPrivateKey: [...c, d]
|
|
38
|
+
};
|
|
39
|
+
g = I(b);
|
|
54
40
|
}
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
41
|
+
return t.cloneElement(
|
|
42
|
+
s,
|
|
43
|
+
{
|
|
44
|
+
...s.props,
|
|
45
|
+
animation: s.props.animation !== void 0 ? s.props.animation : n,
|
|
46
|
+
keepItemsMounted: r,
|
|
47
|
+
id: s.props.id || `k-panelbar-item-default-${d}`,
|
|
48
|
+
uniquePrivateKey: d,
|
|
49
|
+
parentUniquePrivateKey: c,
|
|
50
|
+
parentExpanded: u,
|
|
51
|
+
level: a,
|
|
52
|
+
expanded: (o || []).indexOf(d) > -1,
|
|
53
|
+
focused: e.focused === d && e.wrapperFocused,
|
|
54
|
+
selected: e.selected === d,
|
|
55
|
+
children: g,
|
|
56
|
+
onSelect: f
|
|
57
|
+
}
|
|
58
|
+
);
|
|
59
|
+
} else
|
|
60
|
+
return /* @__PURE__ */ t.createElement("div", { className: "k-panelbar-content" }, s);
|
|
61
|
+
});
|
|
62
|
+
}, w = (n) => {
|
|
63
|
+
const r = t.Children.toArray(n.children)[0];
|
|
60
64
|
return r ? l(r, [], 0) : "";
|
|
61
|
-
},
|
|
65
|
+
}, v = (n, r, e = {
|
|
62
66
|
expanded: n.expanded || [],
|
|
63
67
|
selected: n.selected || "",
|
|
64
68
|
focused: n.focused || "",
|
|
65
69
|
wrapperFocused: !1
|
|
66
|
-
}, o = !0, f = []) => (
|
|
67
|
-
if (p && p.type ===
|
|
68
|
-
|
|
69
|
-
!p.props.disabled && o && (p.props.selected && (e.selected =
|
|
70
|
+
}, o = !0, f = []) => (t.Children.map(n.children, (p, u) => {
|
|
71
|
+
if (p && p.type === i) {
|
|
72
|
+
const a = l(p, f, u);
|
|
73
|
+
!p.props.disabled && o && (p.props.selected && (e.selected = a), p.props.focused && (e.focused = a), p.props.expanded && (r === "multiple" ? e.expanded.push(a) : r === "single" && (e.expanded = [a])), p.props.children && (e = v(
|
|
70
74
|
p.props,
|
|
71
75
|
r,
|
|
72
76
|
e,
|
|
73
77
|
!!p.props.expanded,
|
|
74
|
-
[...f,
|
|
78
|
+
[...f, a]
|
|
75
79
|
)));
|
|
76
80
|
}
|
|
77
81
|
}), e), l = (n, r, e) => n && n.props && n.props.id ? n.props.id : r.length ? r[r.length - 1] + `.${e}` : `.${e}`;
|
|
78
|
-
function
|
|
82
|
+
function q(n, r = []) {
|
|
79
83
|
return (n || []).forEach((e) => {
|
|
80
|
-
e.disabled || (r.push(e), e.expanded && e.children &&
|
|
84
|
+
e.disabled || (r.push(e), e.expanded && e.children && q(e.children, r));
|
|
81
85
|
}), r;
|
|
82
86
|
}
|
|
83
|
-
function
|
|
84
|
-
return
|
|
85
|
-
e && e.props && !e.props.disabled && (r.push(e), e.props.children &&
|
|
87
|
+
function F(n, r = []) {
|
|
88
|
+
return t.Children.forEach(n, (e) => {
|
|
89
|
+
e && e.props && !e.props.disabled && (r.push(e), e.props.children && F(e.props.children, r));
|
|
86
90
|
}), r;
|
|
87
91
|
}
|
|
88
|
-
function
|
|
89
|
-
return
|
|
90
|
-
e && e.props && !e.props.disabled && (e.props.expanded || e.props.parentExpanded) && (r.push(e), e.props.children &&
|
|
92
|
+
function $(n, r = []) {
|
|
93
|
+
return t.Children.forEach(n, (e) => {
|
|
94
|
+
e && e.props && !e.props.disabled && (e.props.expanded || e.props.parentExpanded) && (r.push(e), e.props.children && $(e.props.children, r));
|
|
91
95
|
}), r;
|
|
92
96
|
}
|
|
93
|
-
const
|
|
97
|
+
const A = (n) => n != null;
|
|
94
98
|
var x;
|
|
95
99
|
((n) => {
|
|
96
100
|
function r(e) {
|
|
97
101
|
return e.map((o, f) => {
|
|
98
102
|
let p;
|
|
99
|
-
return o.content && (p = o.content), o.children && (p = r(o.children)), /* @__PURE__ */
|
|
100
|
-
|
|
103
|
+
return o.content && (p = o.content), o.children && (p = r(o.children)), /* @__PURE__ */ t.createElement(
|
|
104
|
+
i,
|
|
101
105
|
{
|
|
102
106
|
...o,
|
|
103
107
|
children: p,
|
|
@@ -108,15 +112,15 @@ var x;
|
|
|
108
112
|
}
|
|
109
113
|
n.mapItemsToComponents = r;
|
|
110
114
|
})(x || (x = {}));
|
|
111
|
-
const
|
|
115
|
+
const B = (n, r) => n.length !== r.length ? !1 : n.every((e, o) => e === r[o]);
|
|
112
116
|
export {
|
|
113
117
|
x as PanelBarUtils,
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
118
|
+
F as flatChildren,
|
|
119
|
+
$ as flatVisibleChildren,
|
|
120
|
+
q as flatVisibleItems,
|
|
121
|
+
w as getFirstId,
|
|
122
|
+
v as getInitialState,
|
|
123
|
+
B as isArrayEqual,
|
|
124
|
+
A as isPresent,
|
|
125
|
+
I as renderChildren
|
|
122
126
|
};
|
package/splitter/Splitter.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 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"),B=require("./SplitterPane.js"),_=require("./SplitterBar.js"),T=require("@progress/kendo-react-common"),k=require("../package-metadata.js"),C=require("./messages/index.js"),N=require("@progress/kendo-react-intl");function w(d){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(i,e,t.get?t:{enumerable:!0,get:()=>d[e]})}}return i.default=d,Object.freeze(i)}const S=w(R),q={collapsible:!1,collapsed:!1,resizable:!0,scrollable:!0},L=150,b=class b extends S.Component{constructor(i){super(i),this._container=null,this.validatePanes=e=>{if(!e.filter(n=>n.size===void 0).length)throw new Error("The Splitter should have at least one pane without a set size.")},this.mapPaneOptions=(e,t)=>{const n=this.orientation,{dragIndex:r,isDragging:a}=this.state,l=[];for(let s=0;s<t.length;s++){let o=!1;const p=t[s];S.isValidElement(p)&&(o=p.type.displayName==="Splitter");let h=!1;a&&r!==void 0&&(h=r===s||r+1===s),l.push({...q,orientation:n,containsSplitter:o,overlay:h,...(e||[])[s]})}return l},this.mapSplitterPanes=(e,t)=>{const n=N.provideLocalizationService(this).toLanguageString(C.splitBarLabel,C.messages[C.splitBarLabel]);return e.map((r,a)=>{let l;const s=a*2,o=s+1;if(a+1<e.length){const h=e[a+1];l=S.createElement(_.SplitterBar,{key:o,index:a,orientation:r.orientation,prev:r,next:h,ariaLabel:n,onDrag:this.onBarDragResize,onToggle:this.onBarToggle,onKeyboardResize:this.onBarKeyboardResize,isRtl:this.isRtl})}return[S.createElement(B.SplitterPane,{key:s,...r},t[a]),l]})},this.onBarToggle=(e,t)=>{const r=this.panesOptions(this.panesContent).map((a,l)=>{const s=this.getPaneProps(a);return l===e?{...s,collapsed:!a.collapsed}:{...s}});this.props.onChange&&this.props.onChange({newState:r,isLast:!0,nativeEvent:t})},this.onBarDragResize=(e,t,n,r,a)=>{const l=new Date().getTime(),{pageX:s,pageY:o}=e,{prevElement:p,nextElement:h}=this.surroudingPanes(t);if(!p||!h)return;if(r){this.setState({isDragging:!0,dragIndex:n,startTime:l,originalX:s,originalY:o,originalPrevSize:this.elementSize(p),originalNextSize:this.elementSize(h)});return}const{originalPrevSize:P,originalNextSize:c,startTime:v,originalX:f,originalY:m}=this.state;if(!r&&l-v<L){a&&this.resetDragState();return}let g;this.orientation==="vertical"?g=o-m:this.isRtl?g=f-s:g=s-f,this.resize(n,n+1,P,c,g,a,e),a&&this.resetDragState()},this.onBarKeyboardResize=(e,t,n,r)=>{const{prevElement:a,nextElement:l}=this.surroudingPanes(e),s=this.elementSize(a),o=this.elementSize(l);this.resize(t,t+1,s,o,n,!0,r)},this.containerSize=()=>this._container?this.elementSize(this._container,!0):0,this.panesOptions=e=>this.mapPaneOptions(this.panes,e),this.elementSize=(e,t)=>{const n=t?"client":"offset";return this.orientation==="vertical"?e[`${n}Height`]:e[`${n}Width`]},this.clamp=(e,t,n)=>Math.min(t,Math.max(e,n)),this.fixedSize=e=>e&&e.length>0,T.validatePackage(k.packageMetadata),this.state={isDragging:!1,dragIndex:void 0,startTime:0,originalX:0,originalY:0,originalPrevSize:0,originalNextSize:0,panes:i.defaultPanes||[]}}get isControlledState(){return this.props.panes!==void 0}get panes(){return this.panesDuringOnChange!==void 0?this.panesDuringOnChange:this.isControlledState?this.props.panes:this.state.panes}get orientation(){return this.props.orientation||"horizontal"}get isRtl(){return this._container&&getComputedStyle(this._container).direction==="rtl"||!1}get panesContent(){return S.Children.toArray(this.props.children).filter(i=>i)}render(){const i=this.panesContent,e=this.panesOptions(i),t=T.classNames("k-splitter","k-splitter-flex",`k-splitter-${this.orientation}`,this.props.className);return this.validatePanes(e),S.createElement("div",{style:this.props.style,ref:n=>this._container=n,className:t},this.mapSplitterPanes(e,i))}surroudingPanes(i){return{prevElement:i.previousElementSibling,nextElement:i.nextElementSibling}}isPercent(i){return/%$/.test(i)}toPixels(i,e){let t=parseInt(i,10);return this.isPercent(i)&&(t=e*t/100),t}resetDragState(){this.setState({isDragging:!1,dragIndex:void 0,startTime:0,originalX:0,originalY:0,originalPrevSize:0,originalNextSize:0})}resize(i,e,t,n,r,a,l){const s=this.panesOptions(this.panesContent),o=s[i],p=s[e],h=t+n,P=this.containerSize(),c=u=>this.toPixels(u,P),v={index:i,initialSize:t,min:c(o.min)||h-c(p.max)||0,max:c(o.max)||h-c(p.min)||h},f={index:e,initialSize:n,min:c(p.min)||h-c(o.max)||0,max:c(p.max)||h-c(o.min)||h},m=(u,x)=>{const z=s[u.index],E=this.clamp(u.min,u.max,u.initialSize+x);return this.isPercent(z.size||"")?100*E/P+"%":E+"px"};let g,O;this.fixedSize(o.size)&&this.fixedSize(p.size)?(g=m(v,r),O=m(f,-r)):p.collapsible||this.fixedSize(p.size)?O=m(f,-r):g=m(v,r);const y=s.map((u,x)=>{const z=this.getPaneProps(u);return x===i?{...z,size:g}:x===e?{...z,size:O}:{...z}});this.panesDuringOnChange=y,this.isControlledState||this.setState({panes:y}),this.props.onChange&&this.props.onChange({newState:y,isLast:a,nativeEvent:l}),this.panesDuringOnChange=void 0}getPaneProps(i){const{orientation:e,overlay:t,containsSplitter:n,...r}=i;return r}};b.displayName="Splitter";let D=b;exports.Splitter=D;
|
package/splitter/Splitter.mjs
CHANGED
|
@@ -9,9 +9,9 @@
|
|
|
9
9
|
import * as S from "react";
|
|
10
10
|
import { SplitterPane as T } from "./SplitterPane.mjs";
|
|
11
11
|
import { SplitterBar as b } from "./SplitterBar.mjs";
|
|
12
|
-
import { validatePackage as
|
|
13
|
-
import { packageMetadata as
|
|
14
|
-
import { splitBarLabel as O, messages as
|
|
12
|
+
import { validatePackage as B, classNames as N } from "@progress/kendo-react-common";
|
|
13
|
+
import { packageMetadata as R } from "../package-metadata.mjs";
|
|
14
|
+
import { splitBarLabel as O, messages as w } from "./messages/index.mjs";
|
|
15
15
|
import { provideLocalizationService as _ } from "@progress/kendo-react-intl";
|
|
16
16
|
const k = {
|
|
17
17
|
collapsible: !1,
|
|
@@ -43,7 +43,7 @@ const k = {
|
|
|
43
43
|
}
|
|
44
44
|
return l;
|
|
45
45
|
}, this.mapSplitterPanes = (t, e) => {
|
|
46
|
-
const i = _(this).toLanguageString(O,
|
|
46
|
+
const i = _(this).toLanguageString(O, w[O]);
|
|
47
47
|
return t.map((r, a) => {
|
|
48
48
|
let l;
|
|
49
49
|
const n = a * 2, o = n + 1;
|
|
@@ -118,7 +118,7 @@ const k = {
|
|
|
118
118
|
}, this.containerSize = () => this._container ? this.elementSize(this._container, !0) : 0, this.panesOptions = (t) => this.mapPaneOptions(this.panes, t), this.elementSize = (t, e) => {
|
|
119
119
|
const i = e ? "client" : "offset";
|
|
120
120
|
return this.orientation === "vertical" ? t[`${i}Height`] : t[`${i}Width`];
|
|
121
|
-
}, this.clamp = (t, e, i) => Math.min(e, Math.max(t, i)), this.fixedSize = (t) => t && t.length > 0,
|
|
121
|
+
}, this.clamp = (t, e, i) => Math.min(e, Math.max(t, i)), this.fixedSize = (t) => t && t.length > 0, B(R), this.state = {
|
|
122
122
|
isDragging: !1,
|
|
123
123
|
dragIndex: void 0,
|
|
124
124
|
startTime: 0,
|
|
@@ -148,8 +148,7 @@ const k = {
|
|
|
148
148
|
* @hidden
|
|
149
149
|
*/
|
|
150
150
|
render() {
|
|
151
|
-
const s = this.panesContent, t = this.panesOptions(s), e =
|
|
152
|
-
"k-widget",
|
|
151
|
+
const s = this.panesContent, t = this.panesOptions(s), e = N(
|
|
153
152
|
"k-splitter",
|
|
154
153
|
"k-splitter-flex",
|
|
155
154
|
`k-splitter-${this.orientation}`,
|
package/stepper/Step.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 client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const te=require("react"),n=require("prop-types"),ne=require("./context/StepperContext.js"),c=require("@progress/kendo-react-common"),ae=require("@progress/kendo-react-intl"),D=require("@progress/kendo-svg-icons"),L=require("./contants.js"),P=require("./messages/index.js");function se(s){const
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const te=require("react"),n=require("prop-types"),ne=require("./context/StepperContext.js"),c=require("@progress/kendo-react-common"),ae=require("@progress/kendo-react-intl"),D=require("@progress/kendo-svg-icons"),L=require("./contants.js"),P=require("./messages/index.js");function se(s){const p=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const l in s)if(l!=="default"){const m=Object.getOwnPropertyDescriptor(s,l);Object.defineProperty(p,l,m.get?m:{enumerable:!0,get:()=>s[l]})}}return p.default=s,Object.freeze(p)}const e=se(te),v=e.forwardRef((s,p)=>{const{children:l,className:m,current:I,disabled:o,focused:g,icon:b,svgIcon:M,index:a,isValid:t,label:i,optional:k,style:T,tabIndex:q,text:F,..._}=s,{animationDuration:N,isVertical:x,item:z,linear:V,mode:R,numOfSteps:r,value:u,onChange:E,onFocus:C,successIcon:w,errorIcon:H,successSVGIcon:W,errorSVGIcon:$}=e.useContext(ne.StepperContext),f=e.useRef(null),A=e.useCallback(()=>{f.current&&c.focusFirstFocusableChild(f.current)},[]),S=e.useCallback(()=>({element:f.current,focus:A}),[A]);e.useImperativeHandle(p,S);const h=!V||a===u-1||a===u||a===u+1,y=R==="labels"||!!b&&!!i,B=ae.useLocalization(),G=(d=>B.toLanguageString(d,P.messages[d]))(P.optionalText),U=typeof N=="number"?N:N!==!1?L.DEFAULT_ANIMATION_DURATION:L.NO_ANIMATION,K=e.useCallback(d=>{E&&!o&&c.dispatchEvent(E,d,S(),{value:a})},[E,u,o]),J=e.useCallback(d=>{C&&!o&&c.dispatchEvent(C,d,S(),void 0)},[C,o]),Q=e.useMemo(()=>c.classNames("k-step",{"k-step-first":a===0,"k-step-last":r&&a===r-1,"k-step-done":a<u,"k-step-current":I,"k-step-optional":k,"k-step-error":t!==void 0&&!t,"k-step-success":t},{"k-disabled":o,"k-focus":g},m),[a,r,u,I,k,o,g,t,m]),X=e.useMemo(()=>({maxWidth:x?void 0:`calc(100% / ${r})`,maxHeight:x?`calc(100% / ${r})`:void 0,pointerEvents:h?void 0:"none",...T}),[x,r,T,h]),j=t?w:H,O=j?e.createElement("span",{className:"k-step-indicator-icon "+j,"aria-hidden":"true"}):e.createElement(c.IconWrap,{className:"k-step-indicator-icon",name:t?"check-circle":"exclamation-circle",icon:t?W||D.checkOutlineIcon:$||D.exclamationCircleIcon}),Y=e.createElement(e.Fragment,null,R!=="labels"?e.createElement("span",{className:"k-step-indicator","aria-hidden":!0,style:{transitionDuration:U+"ms"}},b||M?!y&&t!==void 0?O:e.createElement(c.IconWrap,{className:"k-step-indicator-icon",name:b&&c.toIconName(b),icon:M}):t!==void 0?O:e.createElement("span",{className:"k-step-indicator-text"},F||a+1)):null),Z=(i||y||k)&&e.createElement("span",{className:"k-step-label"},i&&e.createElement("span",{className:"k-step-text"},i),y&&t!==void 0&&O,k&&e.createElement("span",{className:"k-step-label-optional"},G)),ee=e.createElement(e.Fragment,null,Y,Z);return e.createElement("li",{ref:f,className:Q,style:X,..._},e.createElement("a",{className:"k-step-link",title:i||void 0,onClick:K,onFocus:J,tabIndex:q||(g?0:-1),"aria-current":I,"aria-disabled":o||!h||void 0,"aria-invalid":t!==void 0&&!t||void 0},z?l:ee))});v.propTypes={children:n.any,className:n.string,current:n.bool,disabled:n.bool,icon:n.string,index:n.number,isValid:n.bool,label:n.string,optional:n.bool,style:n.object,tabIndex:n.number,text:n.string};const oe={tabIndex:0};v.defaultProps=oe;v.displayName="KendoStep";exports.Step=v;
|
package/stepper/Step.mjs
CHANGED
|
@@ -14,66 +14,66 @@ import { useLocalization as se } from "@progress/kendo-react-intl";
|
|
|
14
14
|
import { checkOutlineIcon as ne, exclamationCircleIcon as oe } from "@progress/kendo-svg-icons";
|
|
15
15
|
import { DEFAULT_ANIMATION_DURATION as ce, NO_ANIMATION as le } from "./contants.mjs";
|
|
16
16
|
import { messages as ie, optionalText as re } from "./messages/index.mjs";
|
|
17
|
-
const
|
|
17
|
+
const E = e.forwardRef((R, V) => {
|
|
18
18
|
const {
|
|
19
19
|
// content
|
|
20
20
|
children: z,
|
|
21
|
-
className:
|
|
22
|
-
current:
|
|
21
|
+
className: h,
|
|
22
|
+
current: d,
|
|
23
23
|
disabled: n,
|
|
24
|
-
focused:
|
|
25
|
-
icon:
|
|
26
|
-
svgIcon:
|
|
24
|
+
focused: u,
|
|
25
|
+
icon: r,
|
|
26
|
+
svgIcon: C,
|
|
27
27
|
index: s,
|
|
28
28
|
isValid: t,
|
|
29
|
-
label:
|
|
30
|
-
optional:
|
|
31
|
-
style:
|
|
32
|
-
tabIndex:
|
|
33
|
-
text:
|
|
29
|
+
label: o,
|
|
30
|
+
optional: m,
|
|
31
|
+
style: y,
|
|
32
|
+
tabIndex: S,
|
|
33
|
+
text: F,
|
|
34
34
|
...D
|
|
35
35
|
} = R, {
|
|
36
36
|
animationDuration: k,
|
|
37
37
|
isVertical: b,
|
|
38
38
|
item: H,
|
|
39
39
|
linear: P,
|
|
40
|
-
mode:
|
|
41
|
-
numOfSteps:
|
|
42
|
-
value:
|
|
40
|
+
mode: A,
|
|
41
|
+
numOfSteps: c,
|
|
42
|
+
value: l,
|
|
43
43
|
onChange: f,
|
|
44
44
|
onFocus: I,
|
|
45
45
|
successIcon: _,
|
|
46
46
|
errorIcon: w,
|
|
47
47
|
successSVGIcon: B,
|
|
48
48
|
errorSVGIcon: G
|
|
49
|
-
} = e.useContext(Z),
|
|
49
|
+
} = e.useContext(Z), p = e.useRef(null), M = e.useCallback(
|
|
50
50
|
() => {
|
|
51
|
-
|
|
51
|
+
p.current && ee(p.current);
|
|
52
52
|
},
|
|
53
53
|
[]
|
|
54
54
|
), v = e.useCallback(
|
|
55
55
|
() => ({
|
|
56
|
-
element:
|
|
57
|
-
focus:
|
|
56
|
+
element: p.current,
|
|
57
|
+
focus: M
|
|
58
58
|
}),
|
|
59
|
-
[
|
|
59
|
+
[M]
|
|
60
60
|
);
|
|
61
61
|
e.useImperativeHandle(V, v);
|
|
62
|
-
const N = !P || s ===
|
|
63
|
-
(
|
|
62
|
+
const N = !P || s === l - 1 || s === l || s === l + 1, x = A === "labels" || !!r && !!o, U = se(), W = ((i) => U.toLanguageString(i, ie[i]))(re), $ = typeof k == "number" ? k : k !== !1 ? ce : le, j = e.useCallback(
|
|
63
|
+
(i) => {
|
|
64
64
|
f && !n && L(
|
|
65
65
|
f,
|
|
66
|
-
|
|
66
|
+
i,
|
|
67
67
|
v(),
|
|
68
68
|
{ value: s }
|
|
69
69
|
);
|
|
70
70
|
},
|
|
71
|
-
[f,
|
|
71
|
+
[f, l, n]
|
|
72
72
|
), K = e.useCallback(
|
|
73
|
-
(
|
|
73
|
+
(i) => {
|
|
74
74
|
I && !n && L(
|
|
75
75
|
I,
|
|
76
|
-
|
|
76
|
+
i,
|
|
77
77
|
v(),
|
|
78
78
|
void 0
|
|
79
79
|
);
|
|
@@ -84,29 +84,29 @@ const g = e.forwardRef((R, V) => {
|
|
|
84
84
|
"k-step",
|
|
85
85
|
{
|
|
86
86
|
"k-step-first": s === 0,
|
|
87
|
-
"k-step-last":
|
|
88
|
-
"k-step-done": s <
|
|
89
|
-
"k-step-current":
|
|
90
|
-
"k-step-optional":
|
|
87
|
+
"k-step-last": c && s === c - 1,
|
|
88
|
+
"k-step-done": s < l,
|
|
89
|
+
"k-step-current": d,
|
|
90
|
+
"k-step-optional": m,
|
|
91
91
|
"k-step-error": t !== void 0 && !t,
|
|
92
92
|
"k-step-success": t
|
|
93
93
|
},
|
|
94
94
|
{
|
|
95
95
|
"k-disabled": n,
|
|
96
|
-
"k-focus":
|
|
96
|
+
"k-focus": u
|
|
97
97
|
},
|
|
98
|
-
|
|
98
|
+
h
|
|
99
99
|
),
|
|
100
|
-
[s,
|
|
100
|
+
[s, c, l, d, m, n, u, t, h]
|
|
101
101
|
), J = e.useMemo(
|
|
102
102
|
() => ({
|
|
103
|
-
maxWidth: b ? void 0 : `calc(100% / ${
|
|
104
|
-
maxHeight: b ? `calc(100% / ${
|
|
103
|
+
maxWidth: b ? void 0 : `calc(100% / ${c})`,
|
|
104
|
+
maxHeight: b ? `calc(100% / ${c})` : void 0,
|
|
105
105
|
pointerEvents: N ? void 0 : "none",
|
|
106
|
-
...
|
|
106
|
+
...y
|
|
107
107
|
}),
|
|
108
|
-
[b,
|
|
109
|
-
), T = t ? _ : w,
|
|
108
|
+
[b, c, y, N]
|
|
109
|
+
), T = t ? _ : w, g = T ? /* @__PURE__ */ e.createElement(
|
|
110
110
|
"span",
|
|
111
111
|
{
|
|
112
112
|
className: "k-step-indicator-icon " + T,
|
|
@@ -119,19 +119,19 @@ const g = e.forwardRef((R, V) => {
|
|
|
119
119
|
name: t ? "check-circle" : "exclamation-circle",
|
|
120
120
|
icon: t ? B || ne : G || oe
|
|
121
121
|
}
|
|
122
|
-
), Q = /* @__PURE__ */ e.createElement(e.Fragment, null,
|
|
122
|
+
), Q = /* @__PURE__ */ e.createElement(e.Fragment, null, A !== "labels" ? /* @__PURE__ */ e.createElement(
|
|
123
123
|
"span",
|
|
124
124
|
{
|
|
125
125
|
className: "k-step-indicator",
|
|
126
126
|
"aria-hidden": !0,
|
|
127
127
|
style: { transitionDuration: $ + "ms" }
|
|
128
128
|
},
|
|
129
|
-
|
|
130
|
-
) : null), X = /* @__PURE__ */ e.createElement("span", { className: "k-step-label" },
|
|
129
|
+
r || C ? !x && t !== void 0 ? g : /* @__PURE__ */ e.createElement(O, { className: "k-step-indicator-icon", name: r && ae(r), icon: C }) : t !== void 0 ? g : /* @__PURE__ */ e.createElement("span", { className: "k-step-indicator-text" }, F || s + 1)
|
|
130
|
+
) : null), X = (o || x || m) && /* @__PURE__ */ e.createElement("span", { className: "k-step-label" }, o && /* @__PURE__ */ e.createElement("span", { className: "k-step-text" }, o), x && t !== void 0 && g, m && /* @__PURE__ */ e.createElement("span", { className: "k-step-label-optional" }, W)), Y = /* @__PURE__ */ e.createElement(e.Fragment, null, Q, X);
|
|
131
131
|
return /* @__PURE__ */ e.createElement(
|
|
132
132
|
"li",
|
|
133
133
|
{
|
|
134
|
-
ref:
|
|
134
|
+
ref: p,
|
|
135
135
|
className: q,
|
|
136
136
|
style: J,
|
|
137
137
|
...D
|
|
@@ -140,11 +140,11 @@ const g = e.forwardRef((R, V) => {
|
|
|
140
140
|
"a",
|
|
141
141
|
{
|
|
142
142
|
className: "k-step-link",
|
|
143
|
-
title:
|
|
143
|
+
title: o || void 0,
|
|
144
144
|
onClick: j,
|
|
145
145
|
onFocus: K,
|
|
146
|
-
tabIndex:
|
|
147
|
-
"aria-current":
|
|
146
|
+
tabIndex: S || (u ? 0 : -1),
|
|
147
|
+
"aria-current": d,
|
|
148
148
|
"aria-disabled": n || !N || void 0,
|
|
149
149
|
"aria-invalid": t !== void 0 && !t || void 0
|
|
150
150
|
},
|
|
@@ -152,7 +152,7 @@ const g = e.forwardRef((R, V) => {
|
|
|
152
152
|
)
|
|
153
153
|
);
|
|
154
154
|
});
|
|
155
|
-
|
|
155
|
+
E.propTypes = {
|
|
156
156
|
children: a.any,
|
|
157
157
|
className: a.string,
|
|
158
158
|
// content: PropTypes.any,
|
|
@@ -170,8 +170,8 @@ g.propTypes = {
|
|
|
170
170
|
const me = {
|
|
171
171
|
tabIndex: 0
|
|
172
172
|
};
|
|
173
|
-
|
|
174
|
-
|
|
173
|
+
E.defaultProps = me;
|
|
174
|
+
E.displayName = "KendoStep";
|
|
175
175
|
export {
|
|
176
|
-
|
|
176
|
+
E as Step
|
|
177
177
|
};
|
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 client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Z=require("react"),r=require("prop-types"),$=require("./context/StepperContext.js"),o=require("@progress/kendo-react-common"),ee=require("./Step.js"),te=require("@progress/kendo-react-progressbars"),K=require("./contants.js"),se=require("../package-metadata.js"),ae=require("@progress/kendo-react-intl"),N=require("./messages/index.js");function ne(
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Z=require("react"),r=require("prop-types"),$=require("./context/StepperContext.js"),o=require("@progress/kendo-react-common"),ee=require("./Step.js"),te=require("@progress/kendo-react-progressbars"),K=require("./contants.js"),se=require("../package-metadata.js"),ae=require("@progress/kendo-react-intl"),N=require("./messages/index.js");function ne(i){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const u in i)if(u!=="default"){const v=Object.getOwnPropertyDescriptor(i,u);Object.defineProperty(b,u,v.get?v:{enumerable:!0,get:()=>i[u]})}}return b.default=i,Object.freeze(b)}const a=ne(Z),I=a.forwardRef((i,b)=>{o.validatePackage(se.packageMetadata);const{animationDuration:u,children:v,className:O,disabled:f,errorIcon:A,errorSVGIcon:F,item:P,items:m,linear:g,mode:L,orientation:S,style:w,successIcon:V,successSVGIcon:j,onChange:h,onFocus:E}=i,z=ae.useLocalization().toLanguageString(N.progBarAriaLabel,N.messages[N.progBarAriaLabel]),k=a.useRef(null),T=a.useCallback(()=>{k.current&&o.focusFirstFocusableChild(k.current)},[]),R=a.useCallback(()=>({element:k.current,focus:T}),[T]);a.useImperativeHandle(b,R);const l=i.value||M.value,[y,c]=a.useState(l),p=m?m.length:0,n=S==="vertical",D=o.useRtl(k,i.dir),_=typeof u=="number"?u:u!==!1?K.DEFAULT_ANIMATION_DURATION:K.NO_ANIMATION;a.useEffect(()=>{c(l)},[l]);const C=a.useCallback((t,s)=>{const e=s===l-1,d=s===l,Y=s===l+1;l!==s&&h&&!f&&(!g||e||d||Y)&&(o.dispatchEvent(h,t,R(),{value:s}),c(s))},[l,g,h,f,c]),G=a.useCallback(t=>{let s=t.value,e=t.syntheticEvent;C(e,s)},[C]),B=a.useCallback(t=>{E&&!f&&o.dispatchEvent(E,t.syntheticEvent,R(),void 0)},[E,f]),q=a.useCallback(t=>{C(t,y)},[C,y]),H=a.useCallback(t=>{const s=D==="rtl",e=y,d=m.length-1;switch(t.keyCode){case o.Keys.left:t.preventDefault(),!s&&e>0&&c(e-1),s&&e<d&&c(e+1);break;case o.Keys.right:t.preventDefault(),!s&&e<d&&c(e+1),s&&e>0&&c(e-1);break;case o.Keys.up:t.preventDefault(),!s&&e>0&&c(e-1),s&&e>0&&c(e-1);break;case o.Keys.down:t.preventDefault(),!s&&e<d&&c(e+1),s&&e<d&&c(e+1);break;case o.Keys.home:t.preventDefault(),c(0);break;case o.Keys.end:t.preventDefault(),c(d);break;case o.Keys.space:t.preventDefault();break;case o.Keys.enter:t.preventDefault(),m[e].disabled||q(t);break}},[m,c,y,D,q]),U=a.useMemo(()=>o.classNames("k-stepper",{"k-stepper-linear":g},O),[g,O]),J=a.useMemo(()=>({display:"grid",gridTemplateColumns:n?void 0:"repeat("+p*2+", 1fr)",gridTemplateRows:n?"repeat("+p+", 1fr)":void 0,...w}),[n,p,w]),Q=a.useMemo(()=>o.classNames("k-step-list",{"k-step-list-horizontal":!n,"k-step-list-vertical":n}),[n]),W=a.useMemo(()=>({gridColumnStart:n?void 0:1,gridColumnEnd:n?void 0:-1,gridRowStart:n?1:void 0,gridRowEnd:n?-1:void 0}),[n]),X=a.useMemo(()=>({gridColumnStart:n?void 0:2,gridColumnEnd:n?void 0:p*2,gridRowStart:n?1:void 0,gridRowEnd:n?p:void 0,top:n?17:void 0}),[n,p]),x=m&&m.map((t,s)=>{const e={index:s,disabled:f||t.disabled,focused:s===y,current:s===l,...t},d=P||ee.Step;return a.createElement(d,{key:s,...e})});return a.createElement($.StepperContext.Provider,{value:{animationDuration:u,isVertical:n,item:P,linear:g,mode:L,numOfSteps:p,value:l,successIcon:V,successSVGIcon:j,errorIcon:A,errorSVGIcon:F,onChange:G,onFocus:B}},a.createElement("nav",{className:U,style:J,dir:D,onKeyDown:H},a.createElement("ol",{className:Q,style:W},x||v),a.createElement(te.ProgressBar,{style:X,labelPlacement:"start",animation:{duration:_},ariaLabel:z,"aria-hidden":!0,max:p-1,labelVisible:!1,orientation:S,reverse:S==="vertical",value:l,disabled:f,tabIndex:-1})))});I.propTypes={animationDuration:r.oneOfType([r.bool,r.number]),children:r.any,className:r.string,dir:r.string,disabled:r.bool,errorIcon:r.string,errorSVGIcon:o.svgIconPropType,item:r.any,items:r.any,linear:r.bool,mode:r.oneOf(["steps","labels"]),orientation:r.oneOf(["horizontal","vertical"]),style:r.object,successIcon:r.string,successSVGIcon:o.svgIconPropType,value:r.number.isRequired,onChange:r.func,onFocus:r.func};const M={value:0};I.defaultProps=M;I.displayName="KendoStepper";exports.Stepper=I;
|