@progress/kendo-react-layout 9.4.0-develop.9 → 9.4.1-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/NOTICE.txt +40 -51
- package/contextmenu/ContextMenu.js +1 -1
- package/contextmenu/ContextMenu.mjs +10 -9
- package/dist/cdn/js/kendo-react-layout.js +1 -1
- package/index.d.mts +93 -17
- package/index.d.ts +93 -17
- package/menu/components/Menu.js +1 -1
- package/menu/components/Menu.mjs +44 -35
- package/menu/components/MenuItemInternal.js +1 -1
- package/menu/components/MenuItemInternal.mjs +41 -33
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +9 -8
- package/tabstrip/TabStrip.js +1 -1
- package/tabstrip/TabStrip.mjs +110 -78
- package/tabstrip/TabStripNavigation.js +1 -1
- package/tabstrip/TabStripNavigation.mjs +109 -115
package/menu/components/Menu.mjs
CHANGED
|
@@ -5,28 +5,29 @@
|
|
|
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 m from "react";
|
|
9
9
|
import i from "prop-types";
|
|
10
|
-
import { Keys as
|
|
11
|
-
import { EMPTY_ID as r, getItemById as
|
|
12
|
-
import { prepareInputItemsForInternalWork as
|
|
13
|
-
import { getNewItemIdUponKeyboardNavigation as
|
|
14
|
-
import { getHoverOpenDelay as
|
|
10
|
+
import { Keys as d, validatePackage as f, classNames as v, dispatchEvent as b } from "@progress/kendo-react-common";
|
|
11
|
+
import { EMPTY_ID as r, getItemById as n, getDirectParentId as g, getRootParentId as R, isIdEmptyOrZeroLevel as a, ZERO_LEVEL_ZERO_ITEM_ID as u } from "../utils/itemsIdsUtils.mjs";
|
|
12
|
+
import { prepareInputItemsForInternalWork as D } from "../utils/prepareInputItemsForInternalWork.mjs";
|
|
13
|
+
import { getNewItemIdUponKeyboardNavigation as I } from "../utils/getNewItemIdUponKeyboardNavigation.mjs";
|
|
14
|
+
import { getHoverOpenDelay as H, getHoverCloseDelay as C } from "../utils/hoverDelay.mjs";
|
|
15
15
|
import { MenuItemInternalsList as O } from "./MenuItemInternal.mjs";
|
|
16
|
-
import { DirectionHolder as
|
|
17
|
-
import { MouseOverHandler as
|
|
18
|
-
import { packageMetadata as
|
|
19
|
-
const
|
|
16
|
+
import { DirectionHolder as k } from "../utils/DirectionHolder.mjs";
|
|
17
|
+
import { MouseOverHandler as y } from "../utils/MouseOverHandler.mjs";
|
|
18
|
+
import { packageMetadata as L } from "../../package-metadata.mjs";
|
|
19
|
+
const p = {
|
|
20
20
|
focusedItemId: r,
|
|
21
21
|
hoveredItemId: r,
|
|
22
|
-
tabbableItemId:
|
|
23
|
-
},
|
|
22
|
+
tabbableItemId: u
|
|
23
|
+
}, l = class l extends m.Component {
|
|
24
24
|
constructor(t) {
|
|
25
|
-
super(t), this.menuWrapperEl = null, this.directionHolder = new
|
|
26
|
-
this.clearItemHoverAndLeaveRequestsIfApplicable(), this.setState(
|
|
25
|
+
super(t), this.menuWrapperEl = null, this.directionHolder = new k(), this.inputItems = [], this.items = [], this.reset = () => {
|
|
26
|
+
this.clearItemHoverAndLeaveRequestsIfApplicable(), this.setState(p);
|
|
27
27
|
}, this.onKeyDown = (e) => {
|
|
28
28
|
if (this.state.focusedItemId !== r) {
|
|
29
|
-
const s =
|
|
29
|
+
const s = n(this.state.focusedItemId, this.items);
|
|
30
|
+
let o = I(
|
|
30
31
|
this.items,
|
|
31
32
|
s.id,
|
|
32
33
|
e.keyCode,
|
|
@@ -34,23 +35,31 @@ const h = {
|
|
|
34
35
|
this.props.vertical,
|
|
35
36
|
this.directionHolder.getIsDirectionRightToLeft()
|
|
36
37
|
);
|
|
37
|
-
|
|
38
|
+
const h = n(o, this.items);
|
|
39
|
+
h && h.separator && (o = I(
|
|
40
|
+
this.items,
|
|
41
|
+
o,
|
|
42
|
+
e.keyCode,
|
|
43
|
+
e.key,
|
|
44
|
+
this.props.vertical,
|
|
45
|
+
this.directionHolder.getIsDirectionRightToLeft()
|
|
46
|
+
)), s.id !== o && (e.preventDefault(), this.setFocusedItemId(o)), (e.keyCode === d.enter || e.keyCode === d.space) && !s.disabled && (this.mouseOverHandler.handleItemSelectedViaKeyboard(), this.dispatchSelectEventIfWired(e, s.id), !e.isDefaultPrevented() && s.items.length === 0 && s.url && window.location.assign(s.url));
|
|
38
47
|
}
|
|
39
|
-
e.keyCode ===
|
|
48
|
+
e.keyCode === d.esc && this.props.onClose && this.props.onClose.call(void 0, e);
|
|
40
49
|
}, this.onItemMouseOver = (e) => {
|
|
41
50
|
this.mouseOverHandler.IsMouseOverEnabled && (this.clearItemHoverAndLeaveRequestsIfApplicable(), this.itemHoverRequest = window.setTimeout(() => {
|
|
42
51
|
this.setHoveredItemId(e), this.itemHoverRequest = null;
|
|
43
|
-
},
|
|
52
|
+
}, H(this.props)));
|
|
44
53
|
}, this.onItemMouseLeave = (e) => {
|
|
45
54
|
this.mouseOverHandler.IsMouseOverEnabled && this.isItemWithDefaultClose(e) && (this.clearItemHoverAndLeaveRequestsIfApplicable(), this.itemLeaveRequest = window.setTimeout(() => {
|
|
46
55
|
this.setHoveredItemId(r), this.itemLeaveRequest = null;
|
|
47
|
-
},
|
|
56
|
+
}, C(this.props)));
|
|
48
57
|
}, this.onItemMouseDown = () => {
|
|
49
58
|
this.mouseOverHandler.handleItemMouseDown();
|
|
50
59
|
}, this.onItemFocus = (e) => {
|
|
51
60
|
this.setFocusedItemId(e), this.mouseOverHandler.handleItemFocus();
|
|
52
61
|
}, this.onItemClick = (e, s) => {
|
|
53
|
-
const o =
|
|
62
|
+
const o = n(s, this.items);
|
|
54
63
|
o.disabled || (this.setFocusedItemId(s), this.mouseOverHandler.handleItemClick(s, this.isItemWithDefaultClose(s)), this.dispatchSelectEventIfWired(e, s), !e.isDefaultPrevented() && o.url && window.location.assign(o.url));
|
|
55
64
|
}, this.onItemBlur = (e, s) => {
|
|
56
65
|
if (this.isItemWithDefaultClose(e) && this.setFocusedItemId(r), s.relatedTarget && s.relatedTarget.nodeName === "LI") {
|
|
@@ -59,7 +68,7 @@ const h = {
|
|
|
59
68
|
return;
|
|
60
69
|
}
|
|
61
70
|
this.props.onClose && this.props.onClose.call(void 0, s);
|
|
62
|
-
}, this.getInputItem = (e) =>
|
|
71
|
+
}, this.getInputItem = (e) => n(e, this.inputItems), f(L), this.mouseOverHandler = new y(this.props.openOnClick, this.reset, this.onItemMouseOver), this.state = Object.assign({}, p, { isFirstRender: !0 });
|
|
63
72
|
}
|
|
64
73
|
get menuItemId() {
|
|
65
74
|
return this.props.id;
|
|
@@ -72,8 +81,8 @@ const h = {
|
|
|
72
81
|
*/
|
|
73
82
|
render() {
|
|
74
83
|
this.prepareItems(), this.state.isFirstRender || this.directionHolder.setIsDirectionRightToLeft(this.checkIsDirectionRightToLeft());
|
|
75
|
-
const t = this.state.hoveredItemId ? this.state.hoveredItemId : this.state.focusedItemId ?
|
|
76
|
-
return /* @__PURE__ */
|
|
84
|
+
const t = this.state.hoveredItemId ? this.state.hoveredItemId : this.state.focusedItemId ? g(this.state.focusedItemId) : r;
|
|
85
|
+
return /* @__PURE__ */ m.createElement(
|
|
77
86
|
"div",
|
|
78
87
|
{
|
|
79
88
|
id: this.props.id,
|
|
@@ -82,7 +91,7 @@ const h = {
|
|
|
82
91
|
className: this.directionHolder.getIsDirectionRightToLeft() ? "k-rtl" : void 0,
|
|
83
92
|
ref: (e) => this.menuWrapperEl = e
|
|
84
93
|
},
|
|
85
|
-
/* @__PURE__ */
|
|
94
|
+
/* @__PURE__ */ m.createElement(
|
|
86
95
|
O,
|
|
87
96
|
{
|
|
88
97
|
className: this.getMenuClassName(),
|
|
@@ -128,19 +137,19 @@ const h = {
|
|
|
128
137
|
}
|
|
129
138
|
setFocusedItemId(t) {
|
|
130
139
|
this.setState((e) => {
|
|
131
|
-
const s = t === r ? e.tabbableItemId :
|
|
132
|
-
return { hoveredItemId: t === r ||
|
|
140
|
+
const s = t === r ? e.tabbableItemId : R(t);
|
|
141
|
+
return { hoveredItemId: t === r || a(e.hoveredItemId) && a(t) ? e.hoveredItemId : r, focusedItemId: t, tabbableItemId: s };
|
|
133
142
|
});
|
|
134
143
|
}
|
|
135
144
|
setHoveredItemId(t) {
|
|
136
|
-
this.setState((e) =>
|
|
145
|
+
this.setState((e) => a(t) && a(e.focusedItemId) ? {
|
|
137
146
|
hoveredItemId: t,
|
|
138
147
|
focusedItemId: e.focusedItemId,
|
|
139
148
|
tabbableItemId: e.tabbableItemId
|
|
140
|
-
} : { hoveredItemId: t, focusedItemId: r, tabbableItemId:
|
|
149
|
+
} : { hoveredItemId: t, focusedItemId: r, tabbableItemId: u });
|
|
141
150
|
}
|
|
142
151
|
getMenuClassName() {
|
|
143
|
-
return
|
|
152
|
+
return v(
|
|
144
153
|
"k-reset",
|
|
145
154
|
"k-header",
|
|
146
155
|
"k-menu",
|
|
@@ -159,14 +168,14 @@ const h = {
|
|
|
159
168
|
return !!(this.props.dir !== void 0 ? this.props.dir === "rtl" : this.menuWrapperEl && getComputedStyle(this.menuWrapperEl).direction === "rtl");
|
|
160
169
|
}
|
|
161
170
|
prepareItems() {
|
|
162
|
-
const { items: t, inputItems: e } =
|
|
171
|
+
const { items: t, inputItems: e } = D(this.props.items, this.props.children);
|
|
163
172
|
this.items = t, this.inputItems = e;
|
|
164
173
|
}
|
|
165
174
|
dispatchSelectEventIfWired(t, e) {
|
|
166
|
-
|
|
175
|
+
b(this.props.onSelect, t, this, { item: this.getInputItem(e), itemId: e });
|
|
167
176
|
}
|
|
168
177
|
};
|
|
169
|
-
|
|
178
|
+
l.propTypes = {
|
|
170
179
|
vertical: i.bool,
|
|
171
180
|
items: i.arrayOf(i.object),
|
|
172
181
|
style: i.object,
|
|
@@ -179,8 +188,8 @@ a.propTypes = {
|
|
|
179
188
|
customCloseItemIds: i.arrayOf(i.string),
|
|
180
189
|
onSelect: i.func,
|
|
181
190
|
role: i.string
|
|
182
|
-
},
|
|
183
|
-
let
|
|
191
|
+
}, l.defaultProps = { vertical: !1 };
|
|
192
|
+
let c = l;
|
|
184
193
|
export {
|
|
185
|
-
|
|
194
|
+
c as Menu
|
|
186
195
|
};
|
|
@@ -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 l=require("react"),d=require("@progress/kendo-react-common"),c=require("@progress/kendo-react-popup"),a=require("../utils/itemsIdsUtils.js"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),d=require("@progress/kendo-react-common"),c=require("@progress/kendo-react-popup"),a=require("../utils/itemsIdsUtils.js"),p=require("../utils/misc.js"),h=require("./MenuItemLink.js"),I=require("./MenuItemArrow.js");function g(o){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const t in o)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(o,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>o[t]})}}return e.default=o,Object.freeze(e)}const s=g(l);class m extends s.Component{constructor(){super(...arguments),this.onMouseOver=e=>{this.props.onMouseOver(this.props.parentItemId),e.stopPropagation()},this.onMouseLeave=e=>{this.props.onMouseLeave(this.props.parentItemId),e.stopPropagation()}}render(){const e=this.props.parentItemId;return s.createElement("ul",{className:this.props.className,role:this.props.role?this.props.role:e!==void 0?"menu":"menubar",id:e!==void 0?p.getDOMElementId(this.props.menuGuid,e):void 0,onMouseOver:e!==void 0?this.onMouseOver:void 0,onMouseLeave:e!==void 0?this.onMouseLeave:void 0,"aria-orientation":this.props["aria-orientation"]},this.renderChildItems())}renderChildItems(){return this.props.items.length>0?this.props.items.map((e,t)=>s.createElement(u,{item:e,isMenuVertical:this.props.isMenuVertical,isDirectionRightToLeft:this.props.isDirectionRightToLeft,focusedItemId:this.props.focusedItemId,lastItemIdToBeOpened:this.props.lastItemIdToBeOpened,tabbableItemId:this.props.tabbableItemId,itemRender:this.props.itemRender,linkRender:this.props.linkRender,menuGuid:this.props.menuGuid,onMouseOver:this.props.onMouseOver,onMouseLeave:this.props.onMouseLeave,onMouseDown:this.props.onMouseDown,onBlur:this.props.onBlur,onFocus:this.props.onFocus,onClick:this.props.onClick,onOriginalItemNeeded:this.props.onOriginalItemNeeded,key:t})):null}}class u extends s.Component{constructor(e){super(e),this.isFirstRender=!0,this.onMouseOver=t=>{this.props.onMouseOver(this.props.item.id),t.stopPropagation()},this.onMouseLeave=t=>{this.props.onMouseLeave(this.props.item.id),t.stopPropagation()},this.state={opened:!1}}componentDidMount(){const e=this.props.focusedItemId,t=this.props.item.id;e&&e===t&&this.itemElement.focus({preventScroll:!0}),this.isFirstRender=!1}componentDidUpdate(e){const t=this.props.focusedItemId,n=this.props.item.id;if(t){const r=d.getActiveElement(document);e.focusedItemId!==t&&t===n&&!this.itemElement.contains(r)&&this.itemElement.focus({preventScroll:!0})}}render(){const e=this.props.item,t=e.id,n=p.getDOMElementId(this.props.menuGuid,t),r=e.separator;return s.createElement(s.Fragment,null,r?s.createElement("li",{className:"k-separator k-item","aria-hidden":!0,key:n,id:n,ref:i=>this.itemElement=i}):s.createElement("li",{id:n,className:this.getMenuItemClassName(e),style:e.cssStyle,tabIndex:t===this.props.tabbableItemId?0:-1,onMouseOver:this.onMouseOver,onMouseLeave:this.onMouseLeave,onMouseDown:i=>this.props.onMouseDown(i),onBlur:i=>this.props.onBlur(t,i),onFocus:()=>this.props.onFocus(t),onClick:i=>this.props.onClick(i,t),role:"menuitem","aria-disabled":e.disabled?!0:void 0,"aria-haspopup":e.items.length>0?!0:void 0,"aria-expanded":e.items.length>0?this.Opened:void 0,"aria-label":e.text,"aria-owns":this.Opened?n:void 0,ref:i=>this.itemElement=i,key:n},this.contentRender?this.renderContent():this.renderMenuItemLink()),this.renderPopupIfOpened())}renderContent(){const e=this.props.item.contentParentItemId;return s.createElement("div",{className:"k-content",role:"presentation"},s.createElement(this.contentRender,{item:this.props.onOriginalItemNeeded(e),itemId:e}))}renderMenuItemLink(){const e=this.props.item;if(this.linkRender)return s.createElement(this.linkRender,{item:this.props.onOriginalItemNeeded(e.id),itemId:e.id,opened:this.Opened,dir:p.convertBoolDirectionToString(this.props.isDirectionRightToLeft)});const t=this.itemRender?s.createElement(this.itemRender,{item:this.props.onOriginalItemNeeded(e.id),itemId:e.id,key:"1"}):s.createElement("span",{className:"k-menu-link-text"},e.text);return s.createElement(h.MenuItemLink,{url:e.url,opened:this.Opened},this.renderMenuIconIfApplicable(),t,this.renderArrowIfApplicable())}renderPopupIfOpened(){if(this.Opened){const e=this.props.item.id,{anchorAlign:t,popupAlign:n,collision:r}=p.getPopupSettings(e,this.props.isMenuVertical,this.props.isDirectionRightToLeft);return s.createElement(c.Popup,{anchor:this.itemElement,show:!0,popupClass:this.getPopupClassName(),anchorAlign:t,popupAlign:n,collision:r,animate:!1,key:"1"},s.createElement(m,{parentItemId:e,items:this.props.item.items,menuGuid:this.props.menuGuid,focusedItemId:this.props.focusedItemId,lastItemIdToBeOpened:this.props.lastItemIdToBeOpened,tabbableItemId:this.props.tabbableItemId,itemRender:this.props.itemRender,linkRender:this.props.linkRender,isMenuVertical:this.props.isMenuVertical,isDirectionRightToLeft:this.props.isDirectionRightToLeft,className:"k-group k-menu-group k-reset k-menu-group-md",onMouseOver:this.props.onMouseOver,onMouseLeave:this.props.onMouseLeave,onMouseDown:this.props.onMouseDown,onBlur:this.props.onBlur,onFocus:this.props.onFocus,onClick:this.props.onClick,onOriginalItemNeeded:this.props.onOriginalItemNeeded}))}return null}renderMenuIconIfApplicable(){const{icon:e,svgIcon:t}=this.props.item;return e||t?s.createElement(d.IconWrap,{name:e,icon:t,key:"0"}):null}renderArrowIfApplicable(){return this.props.item.items.length>0?s.createElement("span",{className:"k-menu-expand-arrow","aria-hidden":!0},s.createElement(I.MenuItemArrow,{itemId:this.props.item.id,verticalMenu:this.props.isMenuVertical,dir:p.convertBoolDirectionToString(this.props.isDirectionRightToLeft),key:"2"})):null}get itemRender(){return this.props.item.render||this.props.itemRender}get linkRender(){return this.props.item.linkRender||this.props.linkRender}get contentRender(){return this.props.item.contentParentItemId?this.props.item.contentRender:null}get Opened(){const e=this.props;return e.item.items.length>0&&a.shouldOpenItem(e.item.id,e.lastItemIdToBeOpened)&&!this.isFirstRender}getPopupClassName(){return d.classNames("k-menu-popup",{"k-rtl":this.props.isDirectionRightToLeft})}getMenuItemClassName(e){return d.classNames("k-item","k-menu-item",{"k-first":a.isFirstItemFromSiblings(e.id),"k-last":e.isLastFromSiblings,"k-disabled":e.disabled},e.cssClass)}}exports.MenuItemInternal=u;exports.MenuItemInternalsList=m;
|
|
@@ -6,13 +6,13 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
import * as s from "react";
|
|
9
|
-
import { getActiveElement as a, IconWrap as l, classNames as
|
|
9
|
+
import { getActiveElement as a, IconWrap as l, classNames as r } from "@progress/kendo-react-common";
|
|
10
10
|
import { Popup as u } from "@progress/kendo-react-popup";
|
|
11
11
|
import { shouldOpenItem as h, isFirstItemFromSiblings as c } from "../utils/itemsIdsUtils.mjs";
|
|
12
|
-
import { getDOMElementId as
|
|
12
|
+
import { getDOMElementId as m, convertBoolDirectionToString as p, getPopupSettings as I } from "../utils/misc.mjs";
|
|
13
13
|
import { MenuItemLink as M } from "./MenuItemLink.mjs";
|
|
14
14
|
import { MenuItemArrow as g } from "./MenuItemArrow.mjs";
|
|
15
|
-
class
|
|
15
|
+
class f extends s.Component {
|
|
16
16
|
constructor() {
|
|
17
17
|
super(...arguments), this.onMouseOver = (e) => {
|
|
18
18
|
this.props.onMouseOver(this.props.parentItemId), e.stopPropagation();
|
|
@@ -27,7 +27,7 @@ class v extends s.Component {
|
|
|
27
27
|
{
|
|
28
28
|
className: this.props.className,
|
|
29
29
|
role: this.props.role ? this.props.role : e !== void 0 ? "menu" : "menubar",
|
|
30
|
-
id: e !== void 0 ?
|
|
30
|
+
id: e !== void 0 ? m(this.props.menuGuid, e) : void 0,
|
|
31
31
|
onMouseOver: e !== void 0 ? this.onMouseOver : void 0,
|
|
32
32
|
onMouseLeave: e !== void 0 ? this.onMouseLeave : void 0,
|
|
33
33
|
"aria-orientation": this.props["aria-orientation"]
|
|
@@ -37,7 +37,7 @@ class v extends s.Component {
|
|
|
37
37
|
}
|
|
38
38
|
renderChildItems() {
|
|
39
39
|
return this.props.items.length > 0 ? this.props.items.map((e, t) => /* @__PURE__ */ s.createElement(
|
|
40
|
-
|
|
40
|
+
v,
|
|
41
41
|
{
|
|
42
42
|
item: e,
|
|
43
43
|
isMenuVertical: this.props.isMenuVertical,
|
|
@@ -60,7 +60,7 @@ class v extends s.Component {
|
|
|
60
60
|
)) : null;
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
|
-
class
|
|
63
|
+
class v extends s.Component {
|
|
64
64
|
constructor(e) {
|
|
65
65
|
super(e), this.isFirstRender = !0, this.onMouseOver = (t) => {
|
|
66
66
|
this.props.onMouseOver(this.props.item.id), t.stopPropagation();
|
|
@@ -73,41 +73,50 @@ class f extends s.Component {
|
|
|
73
73
|
e && e === t && this.itemElement.focus({ preventScroll: !0 }), this.isFirstRender = !1;
|
|
74
74
|
}
|
|
75
75
|
componentDidUpdate(e) {
|
|
76
|
-
const t = this.props.focusedItemId,
|
|
76
|
+
const t = this.props.focusedItemId, i = this.props.item.id;
|
|
77
77
|
if (t) {
|
|
78
78
|
const n = a(document);
|
|
79
|
-
e.focusedItemId !== t && t ===
|
|
79
|
+
e.focusedItemId !== t && t === i && // https://github.com/telerik/kendo-react/issues/216 :
|
|
80
80
|
// No need to focus the wrapping menu item DOM element
|
|
81
81
|
// when a child DOM element was clicked.
|
|
82
82
|
!this.itemElement.contains(n) && this.itemElement.focus({ preventScroll: !0 });
|
|
83
83
|
}
|
|
84
84
|
}
|
|
85
85
|
render() {
|
|
86
|
-
const e = this.props.item, t = e.id,
|
|
87
|
-
return /* @__PURE__ */ s.createElement(s.Fragment, null, n ? /* @__PURE__ */ s.createElement(
|
|
86
|
+
const e = this.props.item, t = e.id, i = m(this.props.menuGuid, t), n = e.separator;
|
|
87
|
+
return /* @__PURE__ */ s.createElement(s.Fragment, null, n ? /* @__PURE__ */ s.createElement(
|
|
88
|
+
"li",
|
|
89
|
+
{
|
|
90
|
+
className: "k-separator k-item",
|
|
91
|
+
"aria-hidden": !0,
|
|
92
|
+
key: i,
|
|
93
|
+
id: i,
|
|
94
|
+
ref: (o) => this.itemElement = o
|
|
95
|
+
}
|
|
96
|
+
) : /* @__PURE__ */ s.createElement(
|
|
88
97
|
"li",
|
|
89
98
|
{
|
|
90
|
-
id:
|
|
99
|
+
id: i,
|
|
91
100
|
className: this.getMenuItemClassName(e),
|
|
92
101
|
style: e.cssStyle,
|
|
93
102
|
tabIndex: t === this.props.tabbableItemId ? 0 : -1,
|
|
94
103
|
onMouseOver: this.onMouseOver,
|
|
95
104
|
onMouseLeave: this.onMouseLeave,
|
|
96
|
-
onMouseDown: (
|
|
97
|
-
onBlur: (
|
|
105
|
+
onMouseDown: (o) => this.props.onMouseDown(o),
|
|
106
|
+
onBlur: (o) => this.props.onBlur(t, o),
|
|
98
107
|
onFocus: () => this.props.onFocus(t),
|
|
99
|
-
onClick: (
|
|
108
|
+
onClick: (o) => this.props.onClick(o, t),
|
|
100
109
|
role: "menuitem",
|
|
101
110
|
"aria-disabled": e.disabled ? !0 : void 0,
|
|
102
111
|
"aria-haspopup": e.items.length > 0 ? !0 : void 0,
|
|
103
112
|
"aria-expanded": e.items.length > 0 ? this.Opened : void 0,
|
|
104
113
|
"aria-label": e.text,
|
|
105
|
-
"aria-owns": this.Opened ?
|
|
106
|
-
ref: (
|
|
107
|
-
key:
|
|
114
|
+
"aria-owns": this.Opened ? i : void 0,
|
|
115
|
+
ref: (o) => this.itemElement = o,
|
|
116
|
+
key: i
|
|
108
117
|
},
|
|
109
118
|
this.contentRender ? this.renderContent() : this.renderMenuItemLink()
|
|
110
|
-
), this.renderPopupIfOpened(
|
|
119
|
+
), this.renderPopupIfOpened());
|
|
111
120
|
}
|
|
112
121
|
renderContent() {
|
|
113
122
|
const e = this.props.item.contentParentItemId;
|
|
@@ -122,16 +131,16 @@ class f extends s.Component {
|
|
|
122
131
|
item: this.props.onOriginalItemNeeded(e.id),
|
|
123
132
|
itemId: e.id,
|
|
124
133
|
opened: this.Opened,
|
|
125
|
-
dir:
|
|
134
|
+
dir: p(this.props.isDirectionRightToLeft)
|
|
126
135
|
}
|
|
127
136
|
);
|
|
128
137
|
const t = this.itemRender ? /* @__PURE__ */ s.createElement(this.itemRender, { item: this.props.onOriginalItemNeeded(e.id), itemId: e.id, key: "1" }) : /* @__PURE__ */ s.createElement("span", { className: "k-menu-link-text" }, e.text);
|
|
129
138
|
return /* @__PURE__ */ s.createElement(M, { url: e.url, opened: this.Opened }, this.renderMenuIconIfApplicable(), t, this.renderArrowIfApplicable());
|
|
130
139
|
}
|
|
131
|
-
renderPopupIfOpened(
|
|
140
|
+
renderPopupIfOpened() {
|
|
132
141
|
if (this.Opened) {
|
|
133
|
-
const
|
|
134
|
-
|
|
142
|
+
const e = this.props.item.id, { anchorAlign: t, popupAlign: i, collision: n } = I(
|
|
143
|
+
e,
|
|
135
144
|
this.props.isMenuVertical,
|
|
136
145
|
this.props.isDirectionRightToLeft
|
|
137
146
|
);
|
|
@@ -139,19 +148,18 @@ class f extends s.Component {
|
|
|
139
148
|
u,
|
|
140
149
|
{
|
|
141
150
|
anchor: this.itemElement,
|
|
142
|
-
appendTo: e,
|
|
143
151
|
show: !0,
|
|
144
152
|
popupClass: this.getPopupClassName(),
|
|
145
|
-
anchorAlign:
|
|
146
|
-
popupAlign:
|
|
147
|
-
collision:
|
|
153
|
+
anchorAlign: t,
|
|
154
|
+
popupAlign: i,
|
|
155
|
+
collision: n,
|
|
148
156
|
animate: !1,
|
|
149
157
|
key: "1"
|
|
150
158
|
},
|
|
151
159
|
/* @__PURE__ */ s.createElement(
|
|
152
|
-
|
|
160
|
+
f,
|
|
153
161
|
{
|
|
154
|
-
parentItemId:
|
|
162
|
+
parentItemId: e,
|
|
155
163
|
items: this.props.item.items,
|
|
156
164
|
menuGuid: this.props.menuGuid,
|
|
157
165
|
focusedItemId: this.props.focusedItemId,
|
|
@@ -185,7 +193,7 @@ class f extends s.Component {
|
|
|
185
193
|
{
|
|
186
194
|
itemId: this.props.item.id,
|
|
187
195
|
verticalMenu: this.props.isMenuVertical,
|
|
188
|
-
dir:
|
|
196
|
+
dir: p(this.props.isDirectionRightToLeft),
|
|
189
197
|
key: "2"
|
|
190
198
|
}
|
|
191
199
|
)) : null;
|
|
@@ -206,10 +214,10 @@ class f extends s.Component {
|
|
|
206
214
|
!this.isFirstRender;
|
|
207
215
|
}
|
|
208
216
|
getPopupClassName() {
|
|
209
|
-
return
|
|
217
|
+
return r("k-menu-popup", { "k-rtl": this.props.isDirectionRightToLeft });
|
|
210
218
|
}
|
|
211
219
|
getMenuItemClassName(e) {
|
|
212
|
-
return
|
|
220
|
+
return r(
|
|
213
221
|
"k-item",
|
|
214
222
|
"k-menu-item",
|
|
215
223
|
{
|
|
@@ -222,6 +230,6 @@ class f extends s.Component {
|
|
|
222
230
|
}
|
|
223
231
|
}
|
|
224
232
|
export {
|
|
225
|
-
|
|
226
|
-
|
|
233
|
+
v as MenuItemInternal,
|
|
234
|
+
f as MenuItemInternalsList
|
|
227
235
|
};
|
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={name:"@progress/kendo-react-layout",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-layout",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1739792933,version:"9.4.1-develop.1",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;
|
package/package-metadata.mjs
CHANGED
|
@@ -10,8 +10,8 @@ const e = {
|
|
|
10
10
|
productName: "KendoReact",
|
|
11
11
|
productCode: "KENDOUIREACT",
|
|
12
12
|
productCodes: ["KENDOUIREACT"],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: "9.4.
|
|
13
|
+
publishDate: 1739792933,
|
|
14
|
+
version: "9.4.1-develop.1",
|
|
15
15
|
licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
16
16
|
};
|
|
17
17
|
export {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-layout",
|
|
3
|
-
"version": "9.4.
|
|
3
|
+
"version": "9.4.1-develop.1",
|
|
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",
|
|
@@ -25,12 +25,13 @@
|
|
|
25
25
|
},
|
|
26
26
|
"sideEffects": false,
|
|
27
27
|
"peerDependencies": {
|
|
28
|
-
"@progress/kendo-licensing": "^1.
|
|
29
|
-
"@progress/kendo-react-animation": "9.4.
|
|
30
|
-
"@progress/kendo-react-
|
|
31
|
-
"@progress/kendo-react-
|
|
32
|
-
"@progress/kendo-react-
|
|
33
|
-
"@progress/kendo-react-
|
|
28
|
+
"@progress/kendo-licensing": "^1.4.0",
|
|
29
|
+
"@progress/kendo-react-animation": "9.4.1-develop.1",
|
|
30
|
+
"@progress/kendo-react-buttons": "9.4.1-develop.1",
|
|
31
|
+
"@progress/kendo-react-common": "9.4.1-develop.1",
|
|
32
|
+
"@progress/kendo-react-intl": "9.4.1-develop.1",
|
|
33
|
+
"@progress/kendo-react-popup": "9.4.1-develop.1",
|
|
34
|
+
"@progress/kendo-react-progressbars": "9.4.1-develop.1",
|
|
34
35
|
"@progress/kendo-svg-icons": "^4.0.0",
|
|
35
36
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
|
|
36
37
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
|
@@ -60,7 +61,7 @@
|
|
|
60
61
|
"package": {
|
|
61
62
|
"productName": "KendoReact",
|
|
62
63
|
"productCode": "KENDOUIREACT",
|
|
63
|
-
"publishDate":
|
|
64
|
+
"publishDate": 1739792933,
|
|
64
65
|
"licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
65
66
|
}
|
|
66
67
|
},
|
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 y=require("react"),l=require("prop-types"),S=require("./TabStripNavigation.js"),k=require("./TabStripContent.js"),p=require("@progress/kendo-react-common"),g=require("../package-metadata.js");function P(u){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const s in u)if(s!=="default"){const o=Object.getOwnPropertyDescriptor(u,s);Object.defineProperty(r,s,o.get?o:{enumerable:!0,get:()=>u[s]})}}return r.default=u,Object.freeze(r)}const c=P(y),b=class b extends c.Component{constructor(r){super(r),this.tabStripRef=c.createRef(),this.itemsNavRef=c.createRef(),this.showLicenseWatermark=!1,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,a=o.scrollHeight,h=o.clientHeight;let d=null;const v=s?i>t:a>h,m=this.props.dir==="rtl";v?s?e+t===i||(m&&t-e)===i?d="end":e===0||m&&-e===0?d="start":e>0&&e+t<i||-e>0&&t-e<i?d="middle":d=null:a-(n+h)===0?d="bottom":n===0?d="top":n>0&&a-(n+h)>0?d="middle":d=null:d=null,this.setState({containerScrollPosition:d})},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=c.Children.count(e);return o<i&&o>-1?c.createElement(k.TabStripContent,{index:o,...s,style:t}):null},p.validatePackage(g.packageMetadata),this.showLicenseWatermark=p.shouldShowValidationUI(g.packageMetadata),this.state={containerScrollPosition:null},this.itemsNavRef=c.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 p.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),a=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(a))},ArrowRight:(e,t,i)=>{i.preventDefault();const n=t.elements.indexOf(e),a=n!==0?n-1:t.elements.length-1,h=n!==t.elements.length-1?n+1:0;s?(t.focusPrevious(e),this.onKeyboardSelect(a)):(t.focusNext(e),this.onKeyboardSelect(h))},ArrowDown:(e,t,i)=>{i.preventDefault();const n=t.elements.indexOf(e),a=n!==t.elements.length-1?n+1:0;t.focusNext(e),this.onKeyboardSelect(a)},ArrowUp:(e,t,i)=>{i.preventDefault();const n=t.elements.indexOf(e),a=n!==0?n-1:t.elements.length-1;t.focusPrevious(e),this.onKeyboardSelect(a)},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=new ResizeObserver(()=>this.onScroll()),this.tabStripRef.current&&this.resizeObserver.observe(this.tabStripRef.current))}componentWillUnmount(){var r;(r=this.navigation)==null||r.removeFocusListener()}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",a=p.classNames("k-tabstrip k-pos-relative",{[`k-tabstrip-${p.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 c.createElement("div",{id:this.props.id,ref:this.tabStripRef,dir:this.props.dir,className:a,style:this.props.style,onScroll:this.onScroll,onResize:this.handleResize},!n&&c.createElement(S.TabStripNavigation,{...r,tabIndex:i}),this.renderContent(r),n&&c.createElement(S.TabStripNavigation,{...r,tabIndex:i}),this.showLicenseWatermark&&c.createElement(p.WatermarkOverlay,null))}children(){return c.Children.toArray(this.props.children).filter(r=>r)}};b.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"])},b.defaultProps={animation:!0,tabPosition:"top",tabAlignment:"start",keepTabsMounted:!1,buttonScrollSpeed:100,mouseScrollSpeed:10,scrollButtons:"auto",scrollButtonsPosition:"split",size:"medium",renderAllContent:!1};let f=b;exports.TabStrip=f;
|