@progress/kendo-react-layout 14.5.0-develop.1 → 14.5.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/actionsheet/ActionSheet.d.ts +12 -0
- package/actionsheet/ActionSheet.js +1 -1
- package/actionsheet/ActionSheet.mjs +60 -58
- package/appbar/interfaces/AppBarProps.d.ts +2 -14
- package/bottomnavigation/BottomNavigation.js +1 -1
- package/bottomnavigation/BottomNavigation.mjs +24 -35
- package/bottomnavigation/BottomNavigationProps.d.ts +3 -13
- package/card/Avatar.js +1 -1
- package/card/Avatar.mjs +14 -26
- package/card/interfaces/AvatarProps.d.ts +1 -8
- package/dist/cdn/js/kendo-react-layout.js +1 -1
- package/drawer/Drawer.d.ts +1 -1
- package/drawer/DrawerContent.d.ts +1 -1
- package/drawer/DrawerItem.d.ts +1 -1
- package/menu/components/MenuItemArrow.d.ts +3 -3
- package/menu/components/MenuItemArrow.js +1 -1
- package/menu/components/MenuItemArrow.mjs +13 -23
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +14 -9
- package/splitter/SplitterBar.js +1 -1
- package/splitter/SplitterBar.mjs +65 -64
- package/stepper/Step.js +1 -1
- package/stepper/Step.mjs +1 -1
- package/tabstrip/TabStripNavigation.js +1 -1
- package/tabstrip/TabStripNavigation.mjs +31 -31
- package/timeline/TimelineCard.js +1 -1
- package/timeline/TimelineCard.mjs +13 -5
- package/timeline/TimelineHorizontal.js +1 -1
- package/timeline/TimelineHorizontal.mjs +39 -39
|
@@ -29,7 +29,7 @@ export interface DrawerContentHandle {
|
|
|
29
29
|
* { text: 'Calendar', icon: 'k-i-calendar' },
|
|
30
30
|
* { separator: true },
|
|
31
31
|
* { text: 'Attachments', icon: 'k-i-hyperlink-email' },
|
|
32
|
-
* { text: 'Favourites', icon: 'k-i-star
|
|
32
|
+
* { text: 'Favourites', icon: 'k-i-star' }
|
|
33
33
|
* ];
|
|
34
34
|
*
|
|
35
35
|
* const [expanded, setExpanded] = React.useState(true);
|
package/drawer/DrawerItem.d.ts
CHANGED
|
@@ -26,7 +26,7 @@ import * as React from 'react';
|
|
|
26
26
|
* <DrawerItem text="Calendar" icon="k-i-calendar"/>
|
|
27
27
|
* <DrawerItem separator={true} />
|
|
28
28
|
* <DrawerItem text="Attachments" icon="k-i-hyperlink-email" selected={true}/>
|
|
29
|
-
* <DrawerItem text="Favourites" icon="k-i-star
|
|
29
|
+
* <DrawerItem text="Favourites" icon="k-i-star"/>
|
|
30
30
|
* </DrawerNavigation>
|
|
31
31
|
* <DrawerContent><Button onClick={handleClick}>Toggle the drawer state</Button></DrawerContent>
|
|
32
32
|
* </Drawer>
|
|
@@ -26,13 +26,13 @@ export interface MenuItemArrowProps {
|
|
|
26
26
|
/**
|
|
27
27
|
* @hidden
|
|
28
28
|
*/
|
|
29
|
-
export declare const downArrowName = "
|
|
29
|
+
export declare const downArrowName = "chevron-down";
|
|
30
30
|
/**
|
|
31
31
|
* @hidden
|
|
32
32
|
*/
|
|
33
|
-
export declare const rightArrowName = "
|
|
33
|
+
export declare const rightArrowName = "chevron-right";
|
|
34
34
|
/**
|
|
35
35
|
* @hidden
|
|
36
36
|
*/
|
|
37
|
-
export declare const leftArrowName = "
|
|
37
|
+
export declare const leftArrowName = "chevron-left";
|
|
38
38
|
export declare const MenuItemArrow: (props: MenuItemArrowProps) => React.JSX.Element;
|
|
@@ -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 u=require("react"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),s=require("@progress/kendo-react-common"),n=require("@progress/kendo-svg-icons"),d=require("../utils/misc.js");function l(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const m=l(u),c="chevron-down",i="chevron-right",a="chevron-left",w=e=>{switch(d.getChildrenPosition(e.itemId,e.verticalMenu===!0,e.dir==="rtl")){case"downward":return{name:c,icon:n.chevronDownIcon};case"rightward":return{name:i,icon:n.chevronRightIcon};case"leftward":return{name:a,icon:n.chevronLeftIcon};default:return{}}},f=e=>m.createElement(s.IconWrap,{"aria-hidden":!0,...w(e)});exports.MenuItemArrow=f;exports.downArrowName=c;exports.leftArrowName=a;exports.rightArrowName=i;
|
|
@@ -6,34 +6,24 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
import * as e from "react";
|
|
9
|
-
import
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
switch (c(
|
|
15
|
-
t.itemId,
|
|
16
|
-
t.verticalMenu === !0,
|
|
17
|
-
t.dir === "rtl"
|
|
18
|
-
)) {
|
|
9
|
+
import { IconWrap as n } from "@progress/kendo-react-common";
|
|
10
|
+
import { chevronLeftIcon as o, chevronRightIcon as t, chevronDownIcon as c } from "@progress/kendo-svg-icons";
|
|
11
|
+
import { getChildrenPosition as i } from "../utils/misc.mjs";
|
|
12
|
+
const a = "chevron-down", m = "chevron-right", h = "chevron-left", d = (r) => {
|
|
13
|
+
switch (i(r.itemId, r.verticalMenu === !0, r.dir === "rtl")) {
|
|
19
14
|
case "downward":
|
|
20
|
-
return { name:
|
|
15
|
+
return { name: a, icon: c };
|
|
21
16
|
case "rightward":
|
|
22
|
-
return { name:
|
|
17
|
+
return { name: m, icon: t };
|
|
23
18
|
case "leftward":
|
|
24
|
-
return { name:
|
|
19
|
+
return { name: h, icon: o };
|
|
25
20
|
default:
|
|
26
21
|
return {};
|
|
27
22
|
}
|
|
28
|
-
},
|
|
29
|
-
w.propTypes = {
|
|
30
|
-
itemId: r.string,
|
|
31
|
-
dir: r.string,
|
|
32
|
-
verticalMenu: r.bool
|
|
33
|
-
};
|
|
23
|
+
}, f = (r) => /* @__PURE__ */ e.createElement(n, { "aria-hidden": !0, ...d(r) });
|
|
34
24
|
export {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
25
|
+
f as MenuItemArrow,
|
|
26
|
+
a as downArrowName,
|
|
27
|
+
h as leftArrowName,
|
|
28
|
+
m as rightArrowName
|
|
39
29
|
};
|
package/package-metadata.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 e=Object.freeze({name:"@progress/kendo-react-layout",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-layout",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1778663981,version:"14.5.0-develop.10",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"});exports.packageMetadata=e;
|
package/package-metadata.mjs
CHANGED
|
@@ -7,7 +7,7 @@ export const packageMetadata = Object.freeze({
|
|
|
7
7
|
productName: 'KendoReact',
|
|
8
8
|
productCode: 'KENDOUIREACT',
|
|
9
9
|
productCodes: ['KENDOUIREACT'],
|
|
10
|
-
publishDate:
|
|
11
|
-
version: '14.5.0-develop.
|
|
10
|
+
publishDate: 1778663981,
|
|
11
|
+
version: '14.5.0-develop.10',
|
|
12
12
|
licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/components/my-license/'
|
|
13
13
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-layout",
|
|
3
|
-
"version": "14.5.0-develop.
|
|
3
|
+
"version": "14.5.0-develop.10",
|
|
4
4
|
"description": "React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -26,13 +26,13 @@
|
|
|
26
26
|
"sideEffects": false,
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"@progress/kendo-licensing": "^1.7.2",
|
|
29
|
-
"@progress/kendo-react-animation": "14.5.0-develop.
|
|
30
|
-
"@progress/kendo-react-buttons": "14.5.0-develop.
|
|
31
|
-
"@progress/kendo-react-common": "14.5.0-develop.
|
|
32
|
-
"@progress/kendo-react-intl": "14.5.0-develop.
|
|
33
|
-
"@progress/kendo-react-popup": "14.5.0-develop.
|
|
34
|
-
"@progress/kendo-react-progressbars": "14.5.0-develop.
|
|
35
|
-
"@progress/kendo-svg-icons": "^4.0.0",
|
|
29
|
+
"@progress/kendo-react-animation": "14.5.0-develop.10",
|
|
30
|
+
"@progress/kendo-react-buttons": "14.5.0-develop.10",
|
|
31
|
+
"@progress/kendo-react-common": "14.5.0-develop.10",
|
|
32
|
+
"@progress/kendo-react-intl": "14.5.0-develop.10",
|
|
33
|
+
"@progress/kendo-react-popup": "14.5.0-develop.10",
|
|
34
|
+
"@progress/kendo-react-progressbars": "14.5.0-develop.10",
|
|
35
|
+
"@progress/kendo-svg-icons": "^4.9.0 || ^5.0.0",
|
|
36
36
|
"react": "^18.0.0 || ^19.0.0",
|
|
37
37
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
38
38
|
},
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
"package": {
|
|
77
77
|
"productName": "KendoReact",
|
|
78
78
|
"productCode": "KENDOUIREACT",
|
|
79
|
-
"publishDate":
|
|
79
|
+
"publishDate": 1778663981,
|
|
80
80
|
"licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
81
81
|
}
|
|
82
82
|
},
|
|
@@ -86,5 +86,10 @@
|
|
|
86
86
|
},
|
|
87
87
|
"publishConfig": {
|
|
88
88
|
"access": "public"
|
|
89
|
+
},
|
|
90
|
+
"peerDependenciesMeta": {
|
|
91
|
+
"@progress/kendo-svg-icons": {
|
|
92
|
+
"optional": true
|
|
93
|
+
}
|
|
89
94
|
}
|
|
90
95
|
}
|
package/splitter/SplitterBar.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 b=require("react"),g=require("@progress/kendo-react-common"),c=require("@progress/kendo-svg-icons");function f(p){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const t in p)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(p,t);Object.defineProperty(o,t,s.get?s:{enumerable:!0,get:()=>p[t]})}}return o.default=p,Object.freeze(o)}const l=f(b);class d extends l.Component{constructor(o){super(o),this.draggable=null,this.spliterBarRef=l.createRef(),this.onDrag=(t,s,i)=>{const{event:r}=t,{onDrag:a,index:e}=this.props,h=this.draggable&&this.draggable.element;h&&!this.isStatic&&this.isDraggable&&a(r,h,e,s,i)},this.onFocus=()=>{this.setState({focused:!0})},this.onBlur=()=>{this.setState({focused:!1})},this.onToggle=t=>{const{onToggle:s,index:i,prev:r,next:a}=this.props;(r.collapsible||a.collapsible)&&s(r.collapsible?i:i+1,t)},this.onPrevToggle=t=>{const{onToggle:s,index:i,prev:r}=this.props;r.collapsible&&s(i,t)},this.onNextToggle=t=>{const{onToggle:s,index:i,next:r}=this.props;r.collapsible&&s(i+1,t)},this.onKeyDown=t=>{this.navigation.triggerKeyboardEvent(t)},this.state={focused:!1}}get isStatic(){const{prev:o,next:t}=this.props,s=o.resizable&&t.resizable,i=o.collapsible||t.collapsible;return!s&&!i}get isDraggable(){const{prev:o,next:t}=this.props,s=o.resizable&&t.resizable,i=o.collapsed||t.collapsed;return!!s&&!i}get isHorizontal(){return this.props.orientation==="horizontal"}componentDidMount(){const o=this.draggable&&this.draggable.element,{index:t,onKeyboardResize:s}=this.props,i=this.isHorizontal;o&&(this.navigation=new g.Navigation({tabIndex:0,root:this.spliterBarRef,selectors:[".k-splitter .k-splitbar"],keyboardEvents:{keydown:{ArrowLeft:(r,a,e)=>{i&&(e.preventDefault(),this.isDraggable&&s(o,t,-10,e),(e.metaKey||e.ctrlKey)&&(s(o,t,0,e),this.isDraggable?this.onPrevToggle(e):this.onNextToggle(e)))},ArrowRight:(r,a,e)=>{i&&(e.preventDefault(),this.isDraggable&&s(o,t,10,e),(e.metaKey||e.ctrlKey)&&(s(o,t,0,e),this.isDraggable?this.onNextToggle(e):this.onPrevToggle(e)))},ArrowDown:(r,a,e)=>{i||(e.preventDefault(),this.isDraggable&&s(o,t,10,e),(e.metaKey||e.ctrlKey)&&(s(o,t,0,e),this.isDraggable?this.onNextToggle(e):this.onPrevToggle(e)))},ArrowUp:(r,a,e)=>{i||(e.preventDefault(),this.isDraggable&&s(o,t,-10,e),(e.metaKey||e.ctrlKey)&&(s(o,t,0,e),this.isDraggable?this.onPrevToggle(e):this.onNextToggle(e)))},Enter:(r,a,e)=>{e.preventDefault(),this.onToggle(e)}}}}))}render(){const o=this.isDraggable,t=this.isStatic,s=this.isHorizontal;let i,r;if(this.props.prev.collapsible)if(s){const n=!!this.props.prev.collapsed!=!!this.props.isRtl;i=n?"chevron-right":"chevron-left",r=n?c.chevronRightIcon:c.chevronLeftIcon}else i=this.props.prev.collapsed?"chevron-down":"chevron-up",r=this.props.prev.collapsed?c.chevronDownIcon:c.chevronUpIcon;let a,e;if(this.props.next.collapsible)if(s){const n=!!this.props.next.collapsed==!!this.props.isRtl;a=n?"chevron-right":"chevron-left",e=n?c.chevronRightIcon:c.chevronLeftIcon}else a=this.props.next.collapsed?"chevron-up":"chevron-down",e=this.props.next.collapsed?c.chevronUpIcon:c.chevronDownIcon;const h=g.classNames("k-splitbar",{"k-focus":this.state.focused,"k-splitbar-horizontal":s,"k-splitbar-vertical":!s,"k-splitbar-draggable-horizontal":s&&o,"k-splitbar-draggable-vertical":!s&&o,"k-splitbar-static-horizontal":s&&t,"k-splitbar-static-vertical":!s&&t});return l.createElement(g.Draggable,{onPress:n=>this.onDrag(n,!0,!1),onDrag:n=>this.onDrag(n,!1,!1),onRelease:n=>this.onDrag(n,!1,!0),ref:n=>{this.draggable=n}},l.createElement("div",{ref:this.spliterBarRef,tabIndex:t?-1:0,role:"separator","aria-valuenow":0,"aria-label":this.props.ariaLabel,"aria-orientation":s?"vertical":void 0,"aria-keyshortcuts":"ArrowLeft ArrowRight ArrowUp ArrowDown",className:h,style:{touchAction:"none"},onFocus:this.onFocus,onBlur:this.onBlur,onDoubleClick:this.onToggle,onKeyDown:this.onKeyDown},this.props.prev.collapsible&&l.createElement("div",{className:"k-collapse-prev",onClick:this.onPrevToggle},l.createElement(g.IconWrap,{name:i,icon:r,size:"xsmall"})),l.createElement("div",{className:"k-resize-handle"}),this.props.next.collapsible&&l.createElement("div",{className:"k-collapse-next",onClick:this.onNextToggle},l.createElement(g.IconWrap,{name:a,icon:e,size:"xsmall"}))))}}exports.SplitterBar=d;
|
package/splitter/SplitterBar.mjs
CHANGED
|
@@ -5,14 +5,14 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import * as
|
|
9
|
-
import { Navigation as d, classNames as
|
|
10
|
-
import {
|
|
11
|
-
class
|
|
12
|
-
constructor(
|
|
13
|
-
super(
|
|
14
|
-
const { event:
|
|
15
|
-
c && !this.isStatic && this.isDraggable && r
|
|
8
|
+
import * as n from "react";
|
|
9
|
+
import { Navigation as d, classNames as m, Draggable as u, IconWrap as p } from "@progress/kendo-react-common";
|
|
10
|
+
import { chevronDownIcon as h, chevronUpIcon as g, chevronRightIcon as b, chevronLeftIcon as f } from "@progress/kendo-svg-icons";
|
|
11
|
+
class w extends n.Component {
|
|
12
|
+
constructor(i) {
|
|
13
|
+
super(i), this.draggable = null, this.spliterBarRef = n.createRef(), this.onDrag = (s, t, o) => {
|
|
14
|
+
const { event: r } = s, { onDrag: l, index: e } = this.props, c = this.draggable && this.draggable.element;
|
|
15
|
+
c && !this.isStatic && this.isDraggable && l(r, c, e, t, o);
|
|
16
16
|
}, this.onFocus = () => {
|
|
17
17
|
this.setState({
|
|
18
18
|
focused: !0
|
|
@@ -22,14 +22,14 @@ class v extends l.Component {
|
|
|
22
22
|
focused: !1
|
|
23
23
|
});
|
|
24
24
|
}, this.onToggle = (s) => {
|
|
25
|
-
const { onToggle:
|
|
26
|
-
(
|
|
25
|
+
const { onToggle: t, index: o, prev: r, next: l } = this.props;
|
|
26
|
+
(r.collapsible || l.collapsible) && t(r.collapsible ? o : o + 1, s);
|
|
27
27
|
}, this.onPrevToggle = (s) => {
|
|
28
|
-
const { onToggle:
|
|
29
|
-
|
|
28
|
+
const { onToggle: t, index: o, prev: r } = this.props;
|
|
29
|
+
r.collapsible && t(o, s);
|
|
30
30
|
}, this.onNextToggle = (s) => {
|
|
31
|
-
const { onToggle:
|
|
32
|
-
|
|
31
|
+
const { onToggle: t, index: o, next: r } = this.props;
|
|
32
|
+
r.collapsible && t(o + 1, s);
|
|
33
33
|
}, this.onKeyDown = (s) => {
|
|
34
34
|
this.navigation.triggerKeyboardEvent(s);
|
|
35
35
|
}, this.state = {
|
|
@@ -37,65 +37,80 @@ class v extends l.Component {
|
|
|
37
37
|
};
|
|
38
38
|
}
|
|
39
39
|
get isStatic() {
|
|
40
|
-
const { prev:
|
|
41
|
-
return !
|
|
40
|
+
const { prev: i, next: s } = this.props, t = i.resizable && s.resizable, o = i.collapsible || s.collapsible;
|
|
41
|
+
return !t && !o;
|
|
42
42
|
}
|
|
43
43
|
get isDraggable() {
|
|
44
|
-
const { prev:
|
|
45
|
-
return !!
|
|
44
|
+
const { prev: i, next: s } = this.props, t = i.resizable && s.resizable, o = i.collapsed || s.collapsed;
|
|
45
|
+
return !!t && !o;
|
|
46
46
|
}
|
|
47
47
|
get isHorizontal() {
|
|
48
48
|
return this.props.orientation === "horizontal";
|
|
49
49
|
}
|
|
50
50
|
/** @hidden */
|
|
51
51
|
componentDidMount() {
|
|
52
|
-
const
|
|
53
|
-
|
|
52
|
+
const i = this.draggable && this.draggable.element, { index: s, onKeyboardResize: t } = this.props, o = this.isHorizontal;
|
|
53
|
+
i && (this.navigation = new d({
|
|
54
54
|
tabIndex: 0,
|
|
55
55
|
root: this.spliterBarRef,
|
|
56
56
|
selectors: [".k-splitter .k-splitbar"],
|
|
57
57
|
keyboardEvents: {
|
|
58
58
|
keydown: {
|
|
59
|
-
ArrowLeft: (
|
|
60
|
-
o && (
|
|
59
|
+
ArrowLeft: (r, l, e) => {
|
|
60
|
+
o && (e.preventDefault(), this.isDraggable && t(i, s, -10, e), (e.metaKey || e.ctrlKey) && (t(i, s, 0, e), this.isDraggable ? this.onPrevToggle(e) : this.onNextToggle(e)));
|
|
61
61
|
},
|
|
62
|
-
ArrowRight: (
|
|
63
|
-
o && (
|
|
62
|
+
ArrowRight: (r, l, e) => {
|
|
63
|
+
o && (e.preventDefault(), this.isDraggable && t(i, s, 10, e), (e.metaKey || e.ctrlKey) && (t(i, s, 0, e), this.isDraggable ? this.onNextToggle(e) : this.onPrevToggle(e)));
|
|
64
64
|
},
|
|
65
|
-
ArrowDown: (
|
|
66
|
-
o || (
|
|
65
|
+
ArrowDown: (r, l, e) => {
|
|
66
|
+
o || (e.preventDefault(), this.isDraggable && t(i, s, 10, e), (e.metaKey || e.ctrlKey) && (t(i, s, 0, e), this.isDraggable ? this.onNextToggle(e) : this.onPrevToggle(e)));
|
|
67
67
|
},
|
|
68
|
-
ArrowUp: (
|
|
69
|
-
o || (
|
|
68
|
+
ArrowUp: (r, l, e) => {
|
|
69
|
+
o || (e.preventDefault(), this.isDraggable && t(i, s, -10, e), (e.metaKey || e.ctrlKey) && (t(i, s, 0, e), this.isDraggable ? this.onPrevToggle(e) : this.onNextToggle(e)));
|
|
70
70
|
},
|
|
71
|
-
Enter: (
|
|
72
|
-
|
|
71
|
+
Enter: (r, l, e) => {
|
|
72
|
+
e.preventDefault(), this.onToggle(e);
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
76
|
}));
|
|
77
77
|
}
|
|
78
78
|
render() {
|
|
79
|
-
const
|
|
79
|
+
const i = this.isDraggable, s = this.isStatic, t = this.isHorizontal;
|
|
80
|
+
let o, r;
|
|
81
|
+
if (this.props.prev.collapsible)
|
|
82
|
+
if (t) {
|
|
83
|
+
const a = !!this.props.prev.collapsed != !!this.props.isRtl;
|
|
84
|
+
o = a ? "chevron-right" : "chevron-left", r = a ? b : f;
|
|
85
|
+
} else
|
|
86
|
+
o = this.props.prev.collapsed ? "chevron-down" : "chevron-up", r = this.props.prev.collapsed ? h : g;
|
|
87
|
+
let l, e;
|
|
88
|
+
if (this.props.next.collapsible)
|
|
89
|
+
if (t) {
|
|
90
|
+
const a = !!this.props.next.collapsed == !!this.props.isRtl;
|
|
91
|
+
l = a ? "chevron-right" : "chevron-left", e = a ? b : f;
|
|
92
|
+
} else
|
|
93
|
+
l = this.props.next.collapsed ? "chevron-up" : "chevron-down", e = this.props.next.collapsed ? g : h;
|
|
94
|
+
const c = m("k-splitbar", {
|
|
80
95
|
"k-focus": this.state.focused,
|
|
81
|
-
"k-splitbar-horizontal":
|
|
82
|
-
"k-splitbar-vertical": !
|
|
83
|
-
"k-splitbar-draggable-horizontal":
|
|
84
|
-
"k-splitbar-draggable-vertical": !
|
|
85
|
-
"k-splitbar-static-horizontal":
|
|
86
|
-
"k-splitbar-static-vertical": !
|
|
96
|
+
"k-splitbar-horizontal": t,
|
|
97
|
+
"k-splitbar-vertical": !t,
|
|
98
|
+
"k-splitbar-draggable-horizontal": t && i,
|
|
99
|
+
"k-splitbar-draggable-vertical": !t && i,
|
|
100
|
+
"k-splitbar-static-horizontal": t && s,
|
|
101
|
+
"k-splitbar-static-vertical": !t && s
|
|
87
102
|
});
|
|
88
|
-
return /* @__PURE__ */
|
|
103
|
+
return /* @__PURE__ */ n.createElement(
|
|
89
104
|
u,
|
|
90
105
|
{
|
|
91
|
-
onPress: (
|
|
92
|
-
onDrag: (
|
|
93
|
-
onRelease: (
|
|
94
|
-
ref: (
|
|
95
|
-
this.draggable =
|
|
106
|
+
onPress: (a) => this.onDrag(a, !0, !1),
|
|
107
|
+
onDrag: (a) => this.onDrag(a, !1, !1),
|
|
108
|
+
onRelease: (a) => this.onDrag(a, !1, !0),
|
|
109
|
+
ref: (a) => {
|
|
110
|
+
this.draggable = a;
|
|
96
111
|
}
|
|
97
112
|
},
|
|
98
|
-
/* @__PURE__ */
|
|
113
|
+
/* @__PURE__ */ n.createElement(
|
|
99
114
|
"div",
|
|
100
115
|
{
|
|
101
116
|
ref: this.spliterBarRef,
|
|
@@ -103,36 +118,22 @@ class v extends l.Component {
|
|
|
103
118
|
role: "separator",
|
|
104
119
|
"aria-valuenow": 0,
|
|
105
120
|
"aria-label": this.props.ariaLabel,
|
|
106
|
-
"aria-orientation":
|
|
121
|
+
"aria-orientation": t ? "vertical" : void 0,
|
|
107
122
|
"aria-keyshortcuts": "ArrowLeft ArrowRight ArrowUp ArrowDown",
|
|
108
|
-
className:
|
|
123
|
+
className: c,
|
|
109
124
|
style: { touchAction: "none" },
|
|
110
125
|
onFocus: this.onFocus,
|
|
111
126
|
onBlur: this.onBlur,
|
|
112
127
|
onDoubleClick: this.onToggle,
|
|
113
128
|
onKeyDown: this.onKeyDown
|
|
114
129
|
},
|
|
115
|
-
this.props.prev.collapsible && /* @__PURE__ */
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
name: this.props.prev.collapsible ? e ? this.props.prev.collapsed ? this.props.isRtl ? "caret-alt-left" : "caret-alt-right" : this.props.isRtl ? "caret-alt-right" : "caret-alt-left" : this.props.prev.collapsed ? "caret-alt-down" : "caret-alt-up" : void 0,
|
|
119
|
-
icon: this.props.prev.collapsible ? e ? this.props.prev.collapsed ? this.props.isRtl ? n : p : this.props.isRtl ? p : n : this.props.prev.collapsed ? h : b : void 0,
|
|
120
|
-
size: "xsmall"
|
|
121
|
-
}
|
|
122
|
-
)),
|
|
123
|
-
/* @__PURE__ */ l.createElement("div", { className: "k-resize-handle" }),
|
|
124
|
-
this.props.next.collapsible && /* @__PURE__ */ l.createElement("div", { className: "k-collapse-next", onClick: this.onNextToggle }, /* @__PURE__ */ l.createElement(
|
|
125
|
-
g,
|
|
126
|
-
{
|
|
127
|
-
name: this.props.next.collapsible ? e ? this.props.next.collapsed ? this.props.isRtl ? "caret-alt-right" : "caret-alt-left" : this.props.isRtl ? "caret-alt-left" : "caret-alt-right" : this.props.next.collapsed ? "caret-alt-up" : "caret-alt-down" : void 0,
|
|
128
|
-
icon: this.props.next.collapsible ? e ? this.props.next.collapsed ? this.props.isRtl ? p : n : this.props.isRtl ? n : p : this.props.next.collapsed ? b : h : void 0,
|
|
129
|
-
size: "xsmall"
|
|
130
|
-
}
|
|
131
|
-
))
|
|
130
|
+
this.props.prev.collapsible && /* @__PURE__ */ n.createElement("div", { className: "k-collapse-prev", onClick: this.onPrevToggle }, /* @__PURE__ */ n.createElement(p, { name: o, icon: r, size: "xsmall" })),
|
|
131
|
+
/* @__PURE__ */ n.createElement("div", { className: "k-resize-handle" }),
|
|
132
|
+
this.props.next.collapsible && /* @__PURE__ */ n.createElement("div", { className: "k-collapse-next", onClick: this.onNextToggle }, /* @__PURE__ */ n.createElement(p, { name: l, icon: e, size: "xsmall" }))
|
|
132
133
|
)
|
|
133
134
|
);
|
|
134
135
|
}
|
|
135
136
|
}
|
|
136
137
|
export {
|
|
137
|
-
|
|
138
|
+
w as SplitterBar
|
|
138
139
|
};
|
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 strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ee=require("react"),n=require("prop-types"),te=require("./context/StepperContext.js"),c=require("@progress/kendo-react-common"),ne=require("@progress/kendo-react-intl"),j=require("@progress/kendo-svg-icons"),D=require("./contants.js"),L=require("./messages/index.js");function ae(s){const p=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const i in s)if(i!=="default"){const m=Object.getOwnPropertyDescriptor(s,i);Object.defineProperty(p,i,m.get?m:{enumerable:!0,get:()=>s[i]})}}return p.default=s,Object.freeze(p)}const e=ae(ee),y=e.forwardRef((s,p)=>{const{children:i,className:m,current:v,disabled:o,focused:O,icon:b,svgIcon:M,index:a,isValid:t,label:l,optional:k,style:T,tabIndex:oe=se.tabIndex,text:q,..._}=s,{animationDuration:I,isVertical:g,item:z,linear:P,mode:F,numOfSteps:r,value:d,onChange:N,onFocus:x,successIcon:V,errorIcon:w,successSVGIcon:H,errorSVGIcon:W}=e.useContext(te.StepperContext),f=e.useRef(null),R=e.useCallback(()=>{f.current&&c.focusFirstFocusableChild(f.current)},[]),E=e.useCallback(()=>({element:f.current,focus:R}),[R]);e.useImperativeHandle(p,E);const C=!P||a===d-1||a===d||a===d+1,S=F==="labels"||!!b&&!!l,$=ne.useLocalization(),B=(u=>$.toLanguageString(u,L.messages[u]))(L.optionalText),G=typeof I=="number"?I:I!==!1?D.DEFAULT_ANIMATION_DURATION:D.NO_ANIMATION,U=e.useCallback(u=>{N&&!o&&c.dispatchEvent(N,u,E(),{value:a})},[N,d,o]),K=e.useCallback(u=>{x&&!o&&c.dispatchEvent(x,u,E(),void 0)},[x,o]),J=e.useMemo(()=>c.classNames("k-step",{"k-step-first":a===0,"k-step-last":r&&a===r-1,"k-step-done":a<d,"k-step-current":v,"k-step-optional":k,"k-step-error":t!==void 0&&!t,"k-step-success":t,"k-disabled":o,"k-focus":O},m),[a,r,d,v,k,o,O,t,m]),Q=e.useMemo(()=>({maxWidth:g?void 0:`calc(100% / ${r})`,maxHeight:g?`calc(100% / ${r})`:void 0,pointerEvents:C?void 0:"none",...T}),[g,r,T,C]),A=t?V:w,h=A?e.createElement("span",{className:"k-step-indicator-icon "+A,"aria-hidden":"true"}):e.createElement(c.IconWrap,{className:"k-step-indicator-icon",name:t?"check-circle":"exclamation-circle",icon:t?H||j.
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ee=require("react"),n=require("prop-types"),te=require("./context/StepperContext.js"),c=require("@progress/kendo-react-common"),ne=require("@progress/kendo-react-intl"),j=require("@progress/kendo-svg-icons"),D=require("./contants.js"),L=require("./messages/index.js");function ae(s){const p=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const i in s)if(i!=="default"){const m=Object.getOwnPropertyDescriptor(s,i);Object.defineProperty(p,i,m.get?m:{enumerable:!0,get:()=>s[i]})}}return p.default=s,Object.freeze(p)}const e=ae(ee),y=e.forwardRef((s,p)=>{const{children:i,className:m,current:v,disabled:o,focused:O,icon:b,svgIcon:M,index:a,isValid:t,label:l,optional:k,style:T,tabIndex:oe=se.tabIndex,text:q,..._}=s,{animationDuration:I,isVertical:g,item:z,linear:P,mode:F,numOfSteps:r,value:d,onChange:N,onFocus:x,successIcon:V,errorIcon:w,successSVGIcon:H,errorSVGIcon:W}=e.useContext(te.StepperContext),f=e.useRef(null),R=e.useCallback(()=>{f.current&&c.focusFirstFocusableChild(f.current)},[]),E=e.useCallback(()=>({element:f.current,focus:R}),[R]);e.useImperativeHandle(p,E);const C=!P||a===d-1||a===d||a===d+1,S=F==="labels"||!!b&&!!l,$=ne.useLocalization(),B=(u=>$.toLanguageString(u,L.messages[u]))(L.optionalText),G=typeof I=="number"?I:I!==!1?D.DEFAULT_ANIMATION_DURATION:D.NO_ANIMATION,U=e.useCallback(u=>{N&&!o&&c.dispatchEvent(N,u,E(),{value:a})},[N,d,o]),K=e.useCallback(u=>{x&&!o&&c.dispatchEvent(x,u,E(),void 0)},[x,o]),J=e.useMemo(()=>c.classNames("k-step",{"k-step-first":a===0,"k-step-last":r&&a===r-1,"k-step-done":a<d,"k-step-current":v,"k-step-optional":k,"k-step-error":t!==void 0&&!t,"k-step-success":t,"k-disabled":o,"k-focus":O},m),[a,r,d,v,k,o,O,t,m]),Q=e.useMemo(()=>({maxWidth:g?void 0:`calc(100% / ${r})`,maxHeight:g?`calc(100% / ${r})`:void 0,pointerEvents:C?void 0:"none",...T}),[g,r,T,C]),A=t?V:w,h=A?e.createElement("span",{className:"k-step-indicator-icon "+A,"aria-hidden":"true"}):e.createElement(c.IconWrap,{className:"k-step-indicator-icon",name:t?"check-circle":"exclamation-circle",icon:t?H||j.checkIcon:W||j.exclamationCircleIcon}),X=e.createElement(e.Fragment,null,F!=="labels"?e.createElement("span",{className:"k-step-indicator","aria-hidden":!0,style:{transitionDuration:G+"ms"}},b||M?!S&&t!==void 0?h:e.createElement(c.IconWrap,{className:"k-step-indicator-icon",name:b&&c.toIconName(b),icon:M}):t!==void 0?h:e.createElement("span",{className:"k-step-indicator-text"},q||a+1)):null),Y=(l||S||k)&&e.createElement("span",{className:"k-step-label"},l&&e.createElement("span",{className:"k-step-text"},l),S&&t!==void 0&&h,k&&e.createElement("span",{className:"k-step-label-optional"},B)),Z=e.createElement(e.Fragment,null,X,Y);return e.createElement("li",{ref:f,className:J,style:Q,..._},e.createElement("a",{className:"k-step-link",title:l||void 0,onClick:U,onFocus:K,"aria-current":v?"step":void 0,"aria-disabled":o||!C||void 0,"aria-invalid":t!==void 0&&!t||void 0},z?i:Z))});y.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 se={tabIndex:0};y.displayName="KendoStep";exports.Step=y;
|
package/stepper/Step.mjs
CHANGED
|
@@ -10,7 +10,7 @@ import a from "prop-types";
|
|
|
10
10
|
import { StepperContext as Y } from "./context/StepperContext.mjs";
|
|
11
11
|
import { focusFirstFocusableChild as Z, dispatchEvent as M, classNames as ee, IconWrap as T, toIconName as te } from "@progress/kendo-react-common";
|
|
12
12
|
import { useLocalization as ae } from "@progress/kendo-react-intl";
|
|
13
|
-
import {
|
|
13
|
+
import { checkIcon as se, exclamationCircleIcon as oe } from "@progress/kendo-svg-icons";
|
|
14
14
|
import { DEFAULT_ANIMATION_DURATION as ne, NO_ANIMATION as ce } from "./contants.mjs";
|
|
15
15
|
import { messages as le, optionalText as ie } from "./messages/index.mjs";
|
|
16
16
|
const L = e.forwardRef((O, R) => {
|
|
@@ -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 ft=require("react"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ft=require("react"),l=require("prop-types"),ut=require("./TabStripNavigationItem.js"),M=require("@progress/kendo-react-common"),bt=require("@progress/kendo-react-buttons"),I=require("@progress/kendo-svg-icons"),dt=require("@progress/kendo-react-intl"),S=require("./messages/index.js");function mt(b){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(b){for(const r in b)if(r!=="default"){const T=Object.getOwnPropertyDescriptor(b,r);Object.defineProperty(d,r,T.get?T:{enumerable:!0,get:()=>b[r]})}}return d.default=b,Object.freeze(d)}const n=mt(ft),vt=b=>Array.from({length:b}),C="smooth",v="prev",k="next",x=b=>{const{selected:d,tabPosition:r,tabAlignment:T,children:w,onSelect:y,onKeyDown:q,onScroll:P,navItemId:E,contentPanelId:F,renderAllContent:D,scrollable:H,scrollButtons:z,scrollButtonsPosition:m,tabIndex:_,buttonScrollSpeed:j,mouseScrollSpeed:W,prevButton:$,nextButton:K,dir:U,size:V,containerScrollPosition:h,itemsNavRef:ot}=b,nt=n.useRef(null),N=ot||nt,A=dt.useLocalization(),p=n.useCallback(()=>/top|bottom/.test(r||"top"),[r]),g=n.useCallback(()=>U==="rtl",[U]),X=n.useCallback(()=>{const t=N.current,e=t==null?void 0:t.children[d||0];if(e instanceof HTMLElement&&t instanceof HTMLElement){const s=p(),u=s?t.offsetWidth:t.offsetHeight,c=s?e.offsetWidth:e.offsetHeight,i=s?"left":"top";let o=s?t.scrollLeft:t.scrollTop,a=0;if(g()){const f=e.offsetLeft;o=o*-1,f<0?(a=f-c+t.offsetLeft,t.scrollTo({[i]:a,behavior:C})):f+c>u-o&&(a=o+f-c,t.scrollTo({[i]:a,behavior:C}))}else{const f=s?e.offsetLeft-t.offsetLeft:e.offsetTop-t.offsetTop;o+u<f+c?(a=f+c-u,t.scrollTo({[i]:a,behavior:C})):o>f&&(a=f,t.scrollTo({[i]:a,behavior:C}))}}},[N,d,p,g]);n.useEffect(()=>{H&&X()},[H,d,X]);const B=n.useCallback(()=>{P==null||P()},[P]),G=n.useCallback((t,e)=>{const s=N.current;if(!s)return;const u=p(),c=u?s.scrollWidth-s.offsetWidth:s.scrollHeight-s.offsetHeight,i=(e.type==="click"?j:W)||0;let o=u?s.scrollLeft:s.scrollTop;g()&&p()?(t===v&&o<0&&(o+=i),t===k&&o<c&&(o-=i),o=Math.min(0,Math.min(c,o))):(t===v&&o>0&&(o-=i),t===k&&o<c&&(o+=i),o=Math.max(0,Math.min(c,o)));const a=e.type==="click"?C:void 0;u?s.scrollTo({left:o,behavior:a}):s.scrollTo({top:o,behavior:a})},[N,p,g,j,W]),O=n.useCallback((t,e)=>{G(t,e)},[G]),J=n.useCallback(t=>{O(v,t)},[O]),Q=n.useCallback(t=>{O(k,t)},[O]),L=n.useCallback(t=>{const e=p(),s=g(),c=e?s?"chevron-right":"chevron-left":"chevron-up",i=s?I.chevronRightIcon:I.chevronLeftIcon,o=e?i:I.chevronUpIcon,f=e?s?"chevron-left":"chevron-right":"chevron-down",rt=s?I.chevronLeftIcon:I.chevronRightIcon,lt=e?rt:I.chevronDownIcon,R={prev:{arrowTab:"k-tabstrip-prev",fontIcon:c,svgIcon:o,title:A.toLanguageString(S.prevArrowTitle,S.messages[S.prevArrowTitle])},next:{arrowTab:"k-tabstrip-next",fontIcon:f,svgIcon:lt,title:A.toLanguageString(S.nextArrowTitle,S.messages[S.nextArrowTitle])}},ct=(t===v?$:K)||bt.Button,at=t===v?J:Q,it=h===null||t===v&&(h==="start"||h==="top")||t===k&&(h==="end"||h==="bottom");return n.createElement(ct,{disabled:it,className:M.classNames(`${R[t].arrowTab}`),onClick:at,icon:R[t].fontIcon,svgIcon:R[t].svgIcon,size:V,tabIndex:-1,fillMode:"flat",title:R[t].title})},[p,g,$,K,J,Q,h,V,A]),Y=n.Children.count(w),Z=n.Children.toArray(w),tt=n.useMemo(()=>w?vt(Y).map((t,e,s)=>{const u={active:d===e,disabled:Z[e].props.disabled,index:e,title:Z[e].props.title,first:e===0,last:e===s.length-1,contentPanelId:F,renderAllContent:D,id:E,onSelect:y,onScroll:B};return n.createElement(ut.TabStripNavigationItem,{key:`${E}-${e}`,...u})}):null,[w,Y,d,F,D,E,y,B]),st=n.useMemo(()=>M.classNames("k-tabstrip-items-wrapper k-tabstrip-items-wrapper-scroll",{"k-hstack":r==="top"||r==="bottom","k-vstack":r==="left"||r==="right"}),[r]),et=n.useMemo(()=>M.classNames("k-tabstrip-items k-tabstrip-items-scroll k-reset",`k-tabstrip-items-${T}`),[T]);return n.createElement("div",{className:st},H?n.createElement(n.Fragment,null,z!=="hidden"&&m&&["split","start","around","before"].includes(m)&&L(v),z!=="hidden"&&(m==="start"||m==="before")&&L(k),n.createElement("ul",{ref:N,className:et,role:"tablist",tabIndex:_,onKeyDown:q,onScroll:B,"aria-orientation":r==="left"||r==="right"?"vertical":void 0},tt),z!=="hidden"&&(m==="end"||m==="after")&&L(v),z!=="hidden"&&m&&["split","end","around","after"].includes(m)&&L(k)):n.createElement("ul",{className:et,role:"tablist",tabIndex:_,onKeyDown:q},tt))};x.propTypes={children:l.oneOfType([l.element,l.arrayOf(l.element)]),onSelect:l.func,onKeyDown:l.func,onScroll:l.func,selected:l.number,tabIndex:l.number,scrollable:l.bool,size:l.oneOf(["small","medium","large"]),scrollButtons:l.oneOf(["auto","visible","hidden"]),scrollButtonsPosition:l.oneOf(["split","start","end","around","before","after"]),containerScrollPosition:l.oneOf(["start","end","top","bottom","middle",null])};x.displayName="TabStripNavigation";exports.TabStripNavigation=x;
|