@progress/kendo-react-layout 9.5.0 → 10.0.0-develop.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/actionsheet/ActionSheet.js +1 -1
- package/actionsheet/ActionSheet.mjs +8 -10
- package/appbar/AppBar.js +1 -1
- package/appbar/AppBar.mjs +12 -14
- package/bottomnavigation/BottomNavigation.js +1 -1
- package/bottomnavigation/BottomNavigation.mjs +30 -32
- package/bottomnavigation/BottomNavigationItem.js +1 -1
- package/bottomnavigation/BottomNavigationItem.mjs +28 -30
- package/breadcrumb/Breadcrumb.js +1 -1
- package/breadcrumb/Breadcrumb.mjs +25 -27
- package/breadcrumb/BreadcrumbDelimiter.js +1 -1
- package/breadcrumb/BreadcrumbDelimiter.mjs +14 -16
- package/breadcrumb/BreadcrumbLink.js +1 -1
- package/breadcrumb/BreadcrumbLink.mjs +25 -27
- package/breadcrumb/BreadcrumbListItem.js +1 -1
- package/breadcrumb/BreadcrumbListItem.mjs +12 -14
- package/breadcrumb/BreadcrumbOrderedList.js +1 -1
- package/breadcrumb/BreadcrumbOrderedList.mjs +25 -27
- package/card/Avatar.js +1 -1
- package/card/Avatar.mjs +16 -17
- package/card/Card.js +1 -1
- package/card/Card.mjs +7 -9
- package/dist/cdn/js/kendo-react-layout.js +1 -1
- package/drawer/Drawer.js +1 -1
- package/drawer/Drawer.mjs +34 -36
- package/drawer/DrawerNavigation.js +1 -1
- package/drawer/DrawerNavigation.mjs +60 -64
- package/expansionpanel/ExpansionPanel.js +1 -1
- package/expansionpanel/ExpansionPanel.mjs +45 -47
- package/gridlayout/GridLayout.js +1 -1
- package/gridlayout/GridLayout.mjs +19 -21
- package/gridlayout/GridLayoutItem.js +1 -1
- package/gridlayout/GridLayoutItem.mjs +6 -8
- package/index.d.mts +1 -4
- package/index.d.ts +1 -4
- package/menu/components/Menu.js +1 -1
- package/menu/components/Menu.mjs +25 -26
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +8 -8
- package/panelbar/PanelBar.js +1 -1
- package/panelbar/PanelBar.mjs +46 -48
- package/splitter/Splitter.js +1 -1
- package/splitter/Splitter.mjs +64 -63
- package/stacklayout/StackLayout.js +1 -1
- package/stacklayout/StackLayout.mjs +4 -6
- package/stepper/Stepper.js +1 -1
- package/stepper/Stepper.mjs +35 -37
- package/tabstrip/TabStrip.js +1 -1
- package/tabstrip/TabStrip.mjs +31 -33
- package/tilelayout/TileLayout.js +1 -1
- package/tilelayout/TileLayout.mjs +47 -48
- package/timeline/Timeline.js +1 -1
- package/timeline/Timeline.mjs +21 -19
|
@@ -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"),a=require("prop-types"),I=require("@progress/kendo-react-common");function R(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 n=R(b),c=n.forwardRef((e,r)=>{const t=n.useRef(null),o=n.useCallback(()=>({element:t.current}),[]);n.useImperativeHandle(r,o);const{className:i,style:u,id:d,children:m,row:p,col:y,rowSpan:s,colSpan:l}=e,f=I.useId(),g={gridArea:`${p||"auto"} / ${y||"auto"} / ${s?"span "+s:"auto"} / ${l?"span "+l:"auto"}`,...u};return n.createElement("div",{ref:t,className:i,style:g,id:d||f},m)});c.propTypes={className:a.string,style:a.object,children:a.any,id:a.string};c.displayName="KendoReactGridLayoutItem";exports.GridLayoutItem=c;
|
|
@@ -7,22 +7,20 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import * as e from "react";
|
|
9
9
|
import t from "prop-types";
|
|
10
|
-
import {
|
|
11
|
-
|
|
12
|
-
const
|
|
13
|
-
R(I);
|
|
14
|
-
const a = e.useRef(null), l = e.useCallback(
|
|
10
|
+
import { useId as g } from "@progress/kendo-react-common";
|
|
11
|
+
const s = e.forwardRef((n, l) => {
|
|
12
|
+
const a = e.useRef(null), i = e.useCallback(
|
|
15
13
|
() => ({
|
|
16
14
|
element: a.current
|
|
17
15
|
}),
|
|
18
16
|
[]
|
|
19
17
|
);
|
|
20
|
-
e.useImperativeHandle(
|
|
21
|
-
const { className: c, style: m, id: d, children: p, row: u, col: y, rowSpan: r, colSpan: o } = n, f =
|
|
18
|
+
e.useImperativeHandle(l, i);
|
|
19
|
+
const { className: c, style: m, id: d, children: p, row: u, col: y, rowSpan: r, colSpan: o } = n, f = g(), I = {
|
|
22
20
|
gridArea: `${u || "auto"} / ${y || "auto"} / ${r ? "span " + r : "auto"} / ${o ? "span " + o : "auto"}`,
|
|
23
21
|
...m
|
|
24
22
|
};
|
|
25
|
-
return /* @__PURE__ */ e.createElement("div", { ref: a, className: c, style:
|
|
23
|
+
return /* @__PURE__ */ e.createElement("div", { ref: a, className: c, style: I, id: d || f }, p);
|
|
26
24
|
});
|
|
27
25
|
s.propTypes = {
|
|
28
26
|
className: t.string,
|
package/index.d.mts
CHANGED
|
@@ -2895,7 +2895,6 @@ export declare class PanelBar extends React_2.Component<PanelBarProps, PanelBarS
|
|
|
2895
2895
|
readonly state: PanelBarState;
|
|
2896
2896
|
private activeDescendant?;
|
|
2897
2897
|
private _element;
|
|
2898
|
-
private showLicenseWatermark;
|
|
2899
2898
|
private nextTickId;
|
|
2900
2899
|
private get expandMode();
|
|
2901
2900
|
private get selectedItem();
|
|
@@ -3253,6 +3252,7 @@ export declare class Splitter extends React_2.Component<SplitterProps, SplitterS
|
|
|
3253
3252
|
*/
|
|
3254
3253
|
readonly state: SplitterState;
|
|
3255
3254
|
private panesDuringOnChange?;
|
|
3255
|
+
private readonly showLicenseWatermark;
|
|
3256
3256
|
private get isControlledState();
|
|
3257
3257
|
private get panes();
|
|
3258
3258
|
private _container;
|
|
@@ -3892,7 +3892,6 @@ export declare class TabStripClassComponent extends React_2.Component<TabStripPr
|
|
|
3892
3892
|
private resizeObserver?;
|
|
3893
3893
|
private get contentPanelId();
|
|
3894
3894
|
private get navItemId();
|
|
3895
|
-
private showLicenseWatermark;
|
|
3896
3895
|
private navigation?;
|
|
3897
3896
|
constructor(props: TabStripProps);
|
|
3898
3897
|
/** @hidden */
|
|
@@ -4425,8 +4424,6 @@ export declare class TileLayout extends React_2.Component<TileLayoutProps, TileL
|
|
|
4425
4424
|
colSpan: number;
|
|
4426
4425
|
} & TilePosition)[];
|
|
4427
4426
|
};
|
|
4428
|
-
private showLicenseWatermark;
|
|
4429
|
-
constructor(props: TileLayoutProps);
|
|
4430
4427
|
/**
|
|
4431
4428
|
* Gets the HTML element of the TileLayout component.
|
|
4432
4429
|
*/
|
package/index.d.ts
CHANGED
|
@@ -2895,7 +2895,6 @@ export declare class PanelBar extends React_2.Component<PanelBarProps, PanelBarS
|
|
|
2895
2895
|
readonly state: PanelBarState;
|
|
2896
2896
|
private activeDescendant?;
|
|
2897
2897
|
private _element;
|
|
2898
|
-
private showLicenseWatermark;
|
|
2899
2898
|
private nextTickId;
|
|
2900
2899
|
private get expandMode();
|
|
2901
2900
|
private get selectedItem();
|
|
@@ -3253,6 +3252,7 @@ export declare class Splitter extends React_2.Component<SplitterProps, SplitterS
|
|
|
3253
3252
|
*/
|
|
3254
3253
|
readonly state: SplitterState;
|
|
3255
3254
|
private panesDuringOnChange?;
|
|
3255
|
+
private readonly showLicenseWatermark;
|
|
3256
3256
|
private get isControlledState();
|
|
3257
3257
|
private get panes();
|
|
3258
3258
|
private _container;
|
|
@@ -3892,7 +3892,6 @@ export declare class TabStripClassComponent extends React_2.Component<TabStripPr
|
|
|
3892
3892
|
private resizeObserver?;
|
|
3893
3893
|
private get contentPanelId();
|
|
3894
3894
|
private get navItemId();
|
|
3895
|
-
private showLicenseWatermark;
|
|
3896
3895
|
private navigation?;
|
|
3897
3896
|
constructor(props: TabStripProps);
|
|
3898
3897
|
/** @hidden */
|
|
@@ -4425,8 +4424,6 @@ export declare class TileLayout extends React_2.Component<TileLayoutProps, TileL
|
|
|
4425
4424
|
colSpan: number;
|
|
4426
4425
|
} & TilePosition)[];
|
|
4427
4426
|
};
|
|
4428
|
-
private showLicenseWatermark;
|
|
4429
|
-
constructor(props: TileLayoutProps);
|
|
4430
4427
|
/**
|
|
4431
4428
|
* Gets the HTML element of the TileLayout component.
|
|
4432
4429
|
*/
|
package/menu/components/Menu.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 p=require("react"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react"),o=require("prop-types"),a=require("@progress/kendo-react-common"),i=require("../utils/itemsIdsUtils.js"),v=require("../utils/prepareInputItemsForInternalWork.js"),h=require("../utils/getNewItemIdUponKeyboardNavigation.js"),u=require("../utils/hoverDelay.js"),f=require("./MenuItemInternal.js"),g=require("../utils/DirectionHolder.js"),b=require("../utils/MouseOverHandler.js");function D(n){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(t,e,s.get?s:{enumerable:!0,get:()=>n[e]})}}return t.default=n,Object.freeze(t)}const d=D(p),c={focusedItemId:i.EMPTY_ID,hoveredItemId:i.EMPTY_ID,tabbableItemId:i.ZERO_LEVEL_ZERO_ITEM_ID},l=class l extends d.Component{constructor(t){super(t),this.menuWrapperEl=null,this.directionHolder=new g.DirectionHolder,this.inputItems=[],this.items=[],this.reset=()=>{this.clearItemHoverAndLeaveRequestsIfApplicable(),this.setState(c)},this.onKeyDown=e=>{if(this.state.focusedItemId!==i.EMPTY_ID){const s=i.getItemById(this.state.focusedItemId,this.items);let r=h.getNewItemIdUponKeyboardNavigation(this.items,s.id,e.keyCode,e.key,this.props.vertical,this.directionHolder.getIsDirectionRightToLeft());const m=i.getItemById(r,this.items);m&&m.separator&&(r=h.getNewItemIdUponKeyboardNavigation(this.items,r,e.keyCode,e.key,this.props.vertical,this.directionHolder.getIsDirectionRightToLeft())),s.id!==r&&(e.preventDefault(),this.setFocusedItemId(r)),(e.keyCode===a.Keys.enter||e.keyCode===a.Keys.space)&&!s.disabled&&(this.mouseOverHandler.handleItemSelectedViaKeyboard(),this.dispatchSelectEventIfWired(e,s.id),!e.isDefaultPrevented()&&s.items.length===0&&s.url&&window.location.assign(s.url))}e.keyCode===a.Keys.esc&&this.props.onClose&&this.props.onClose.call(void 0,e)},this.onItemMouseOver=e=>{this.mouseOverHandler.IsMouseOverEnabled&&(this.clearItemHoverAndLeaveRequestsIfApplicable(),this.itemHoverRequest=window.setTimeout(()=>{this.setHoveredItemId(e),this.itemHoverRequest=null},u.getHoverOpenDelay(this.props)))},this.onItemMouseLeave=e=>{this.mouseOverHandler.IsMouseOverEnabled&&this.isItemWithDefaultClose(e)&&(this.clearItemHoverAndLeaveRequestsIfApplicable(),this.itemLeaveRequest=window.setTimeout(()=>{this.setHoveredItemId(i.EMPTY_ID),this.itemLeaveRequest=null},u.getHoverCloseDelay(this.props)))},this.onItemMouseDown=()=>{this.mouseOverHandler.handleItemMouseDown()},this.onItemFocus=e=>{this.setFocusedItemId(e),this.mouseOverHandler.handleItemFocus()},this.onItemClick=(e,s)=>{const r=i.getItemById(s,this.items);r.disabled||(this.setFocusedItemId(s),this.mouseOverHandler.handleItemClick(s,this.isItemWithDefaultClose(s)),this.dispatchSelectEventIfWired(e,s),!e.isDefaultPrevented()&&r.url&&window.location.assign(r.url))},this.onItemBlur=(e,s)=>{if(this.isItemWithDefaultClose(e)&&this.setFocusedItemId(i.EMPTY_ID),s.relatedTarget&&s.relatedTarget.nodeName==="LI"){const r=s.relatedTarget.getAttribute("id");if(r&&r.includes(this.menuItemId))return}this.props.onClose&&this.props.onClose.call(void 0,s)},this.getInputItem=e=>i.getItemById(e,this.inputItems),this.mouseOverHandler=new b.MouseOverHandler(this.props.openOnClick,this.reset,this.onItemMouseOver),this.state=Object.assign({},c,{isFirstRender:!0})}get menuItemId(){return this.props.id}get element(){return this.menuWrapperEl}render(){this.prepareItems(),this.state.isFirstRender||this.directionHolder.setIsDirectionRightToLeft(this.checkIsDirectionRightToLeft());const t=this.state.hoveredItemId?this.state.hoveredItemId:this.state.focusedItemId?i.getDirectParentId(this.state.focusedItemId):i.EMPTY_ID;return d.createElement("div",{id:this.props.id,onKeyDown:this.onKeyDown,style:this.props.style,className:this.directionHolder.getIsDirectionRightToLeft()?"k-rtl":void 0,ref:e=>this.menuWrapperEl=e},d.createElement(f.MenuItemInternalsList,{className:this.getMenuClassName(),"aria-orientation":this.props.vertical?"vertical":void 0,items:this.items,isMenuVertical:this.props.vertical,isDirectionRightToLeft:this.directionHolder.getIsDirectionRightToLeft(),focusedItemId:this.state.focusedItemId,lastItemIdToBeOpened:t,tabbableItemId:this.state.tabbableItemId,itemRender:this.props.itemRender,linkRender:this.props.linkRender,menuGuid:this.menuItemId,onMouseLeave:this.onItemMouseLeave,onMouseOver:this.onItemMouseOver,onMouseDown:this.onItemMouseDown,onFocus:this.onItemFocus,onClick:this.onItemClick,onBlur:this.onItemBlur,onOriginalItemNeeded:this.getInputItem,role:this.props.role}))}componentDidMount(){this.setState({isFirstRender:!1})}componentDidUpdate(t){(!!t.vertical!=!!this.props.vertical||this.directionHolder.hasDirectionChanged())&&this.reset(),this.mouseOverHandler.OpenOnClick=this.props.openOnClick}componentWillUnmount(){this.clearItemHoverAndLeaveRequestsIfApplicable()}setFocusedItemId(t){this.setState(e=>{const s=t===i.EMPTY_ID?e.tabbableItemId:i.getRootParentId(t);return{hoveredItemId:t===i.EMPTY_ID||i.isIdEmptyOrZeroLevel(e.hoveredItemId)&&i.isIdEmptyOrZeroLevel(t)?e.hoveredItemId:i.EMPTY_ID,focusedItemId:t,tabbableItemId:s}})}setHoveredItemId(t){this.setState(e=>i.isIdEmptyOrZeroLevel(t)&&i.isIdEmptyOrZeroLevel(e.focusedItemId)?{hoveredItemId:t,focusedItemId:e.focusedItemId,tabbableItemId:e.tabbableItemId}:{hoveredItemId:t,focusedItemId:i.EMPTY_ID,tabbableItemId:i.ZERO_LEVEL_ZERO_ITEM_ID})}getMenuClassName(){return a.classNames("k-reset","k-header","k-menu",{"k-menu-horizontal":!this.props.vertical},{"k-menu-vertical":this.props.vertical},this.props.className)}clearItemHoverAndLeaveRequestsIfApplicable(){this.itemHoverRequest&&(clearTimeout(this.itemHoverRequest),this.itemHoverRequest=null),this.itemLeaveRequest&&(clearTimeout(this.itemLeaveRequest),this.itemLeaveRequest=null)}isItemWithDefaultClose(t){return!this.props.customCloseItemIds||this.props.customCloseItemIds.indexOf(t)===-1}checkIsDirectionRightToLeft(){return!!(this.props.dir!==void 0?this.props.dir==="rtl":this.menuWrapperEl&&getComputedStyle(this.menuWrapperEl).direction==="rtl")}prepareItems(){const{items:t,inputItems:e}=v.prepareInputItemsForInternalWork(this.props.items,this.props.children);this.items=t,this.inputItems=e}dispatchSelectEventIfWired(t,e){a.dispatchEvent(this.props.onSelect,t,this,{item:this.getInputItem(e),itemId:e})}};l.propTypes={vertical:o.bool,items:o.arrayOf(o.object),style:o.object,dir:o.string,hoverOpenDelay:o.number,hoverCloseDelay:o.number,openOnClick:o.bool,itemRender:o.any,linkRender:o.any,customCloseItemIds:o.arrayOf(o.string),onSelect:o.func,role:o.string},l.defaultProps={vertical:!1};let I=l;exports.Menu=I;
|
package/menu/components/Menu.mjs
CHANGED
|
@@ -7,22 +7,21 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import * as m from "react";
|
|
9
9
|
import i from "prop-types";
|
|
10
|
-
import { Keys as d,
|
|
11
|
-
import { EMPTY_ID as r, getItemById as n, getDirectParentId as
|
|
12
|
-
import { prepareInputItemsForInternalWork as
|
|
10
|
+
import { Keys as d, classNames as f, dispatchEvent as v } from "@progress/kendo-react-common";
|
|
11
|
+
import { EMPTY_ID as r, getItemById as n, getDirectParentId as b, getRootParentId as g, isIdEmptyOrZeroLevel as l, ZERO_LEVEL_ZERO_ITEM_ID as c } from "../utils/itemsIdsUtils.mjs";
|
|
12
|
+
import { prepareInputItemsForInternalWork as R } from "../utils/prepareInputItemsForInternalWork.mjs";
|
|
13
13
|
import { getNewItemIdUponKeyboardNavigation as I } from "../utils/getNewItemIdUponKeyboardNavigation.mjs";
|
|
14
|
-
import { getHoverOpenDelay as
|
|
15
|
-
import { MenuItemInternalsList as
|
|
16
|
-
import { DirectionHolder as
|
|
14
|
+
import { getHoverOpenDelay as D, getHoverCloseDelay as H } from "../utils/hoverDelay.mjs";
|
|
15
|
+
import { MenuItemInternalsList as C } from "./MenuItemInternal.mjs";
|
|
16
|
+
import { DirectionHolder as O } from "../utils/DirectionHolder.mjs";
|
|
17
17
|
import { MouseOverHandler as y } from "../utils/MouseOverHandler.mjs";
|
|
18
|
-
import { packageMetadata as L } from "../../package-metadata.mjs";
|
|
19
18
|
const p = {
|
|
20
19
|
focusedItemId: r,
|
|
21
20
|
hoveredItemId: r,
|
|
22
|
-
tabbableItemId:
|
|
23
|
-
},
|
|
21
|
+
tabbableItemId: c
|
|
22
|
+
}, a = class a extends m.Component {
|
|
24
23
|
constructor(t) {
|
|
25
|
-
super(t), this.menuWrapperEl = null, this.directionHolder = new
|
|
24
|
+
super(t), this.menuWrapperEl = null, this.directionHolder = new O(), this.inputItems = [], this.items = [], this.reset = () => {
|
|
26
25
|
this.clearItemHoverAndLeaveRequestsIfApplicable(), this.setState(p);
|
|
27
26
|
}, this.onKeyDown = (e) => {
|
|
28
27
|
if (this.state.focusedItemId !== r) {
|
|
@@ -49,11 +48,11 @@ const p = {
|
|
|
49
48
|
}, this.onItemMouseOver = (e) => {
|
|
50
49
|
this.mouseOverHandler.IsMouseOverEnabled && (this.clearItemHoverAndLeaveRequestsIfApplicable(), this.itemHoverRequest = window.setTimeout(() => {
|
|
51
50
|
this.setHoveredItemId(e), this.itemHoverRequest = null;
|
|
52
|
-
},
|
|
51
|
+
}, D(this.props)));
|
|
53
52
|
}, this.onItemMouseLeave = (e) => {
|
|
54
53
|
this.mouseOverHandler.IsMouseOverEnabled && this.isItemWithDefaultClose(e) && (this.clearItemHoverAndLeaveRequestsIfApplicable(), this.itemLeaveRequest = window.setTimeout(() => {
|
|
55
54
|
this.setHoveredItemId(r), this.itemLeaveRequest = null;
|
|
56
|
-
},
|
|
55
|
+
}, H(this.props)));
|
|
57
56
|
}, this.onItemMouseDown = () => {
|
|
58
57
|
this.mouseOverHandler.handleItemMouseDown();
|
|
59
58
|
}, this.onItemFocus = (e) => {
|
|
@@ -68,7 +67,7 @@ const p = {
|
|
|
68
67
|
return;
|
|
69
68
|
}
|
|
70
69
|
this.props.onClose && this.props.onClose.call(void 0, s);
|
|
71
|
-
}, this.getInputItem = (e) => n(e, this.inputItems),
|
|
70
|
+
}, this.getInputItem = (e) => n(e, this.inputItems), this.mouseOverHandler = new y(this.props.openOnClick, this.reset, this.onItemMouseOver), this.state = Object.assign({}, p, { isFirstRender: !0 });
|
|
72
71
|
}
|
|
73
72
|
get menuItemId() {
|
|
74
73
|
return this.props.id;
|
|
@@ -81,7 +80,7 @@ const p = {
|
|
|
81
80
|
*/
|
|
82
81
|
render() {
|
|
83
82
|
this.prepareItems(), this.state.isFirstRender || this.directionHolder.setIsDirectionRightToLeft(this.checkIsDirectionRightToLeft());
|
|
84
|
-
const t = this.state.hoveredItemId ? this.state.hoveredItemId : this.state.focusedItemId ?
|
|
83
|
+
const t = this.state.hoveredItemId ? this.state.hoveredItemId : this.state.focusedItemId ? b(this.state.focusedItemId) : r;
|
|
85
84
|
return /* @__PURE__ */ m.createElement(
|
|
86
85
|
"div",
|
|
87
86
|
{
|
|
@@ -92,7 +91,7 @@ const p = {
|
|
|
92
91
|
ref: (e) => this.menuWrapperEl = e
|
|
93
92
|
},
|
|
94
93
|
/* @__PURE__ */ m.createElement(
|
|
95
|
-
|
|
94
|
+
C,
|
|
96
95
|
{
|
|
97
96
|
className: this.getMenuClassName(),
|
|
98
97
|
"aria-orientation": this.props.vertical ? "vertical" : void 0,
|
|
@@ -137,19 +136,19 @@ const p = {
|
|
|
137
136
|
}
|
|
138
137
|
setFocusedItemId(t) {
|
|
139
138
|
this.setState((e) => {
|
|
140
|
-
const s = t === r ? e.tabbableItemId :
|
|
141
|
-
return { hoveredItemId: t === r ||
|
|
139
|
+
const s = t === r ? e.tabbableItemId : g(t);
|
|
140
|
+
return { hoveredItemId: t === r || l(e.hoveredItemId) && l(t) ? e.hoveredItemId : r, focusedItemId: t, tabbableItemId: s };
|
|
142
141
|
});
|
|
143
142
|
}
|
|
144
143
|
setHoveredItemId(t) {
|
|
145
|
-
this.setState((e) =>
|
|
144
|
+
this.setState((e) => l(t) && l(e.focusedItemId) ? {
|
|
146
145
|
hoveredItemId: t,
|
|
147
146
|
focusedItemId: e.focusedItemId,
|
|
148
147
|
tabbableItemId: e.tabbableItemId
|
|
149
|
-
} : { hoveredItemId: t, focusedItemId: r, tabbableItemId:
|
|
148
|
+
} : { hoveredItemId: t, focusedItemId: r, tabbableItemId: c });
|
|
150
149
|
}
|
|
151
150
|
getMenuClassName() {
|
|
152
|
-
return
|
|
151
|
+
return f(
|
|
153
152
|
"k-reset",
|
|
154
153
|
"k-header",
|
|
155
154
|
"k-menu",
|
|
@@ -168,14 +167,14 @@ const p = {
|
|
|
168
167
|
return !!(this.props.dir !== void 0 ? this.props.dir === "rtl" : this.menuWrapperEl && getComputedStyle(this.menuWrapperEl).direction === "rtl");
|
|
169
168
|
}
|
|
170
169
|
prepareItems() {
|
|
171
|
-
const { items: t, inputItems: e } =
|
|
170
|
+
const { items: t, inputItems: e } = R(this.props.items, this.props.children);
|
|
172
171
|
this.items = t, this.inputItems = e;
|
|
173
172
|
}
|
|
174
173
|
dispatchSelectEventIfWired(t, e) {
|
|
175
|
-
|
|
174
|
+
v(this.props.onSelect, t, this, { item: this.getInputItem(e), itemId: e });
|
|
176
175
|
}
|
|
177
176
|
};
|
|
178
|
-
|
|
177
|
+
a.propTypes = {
|
|
179
178
|
vertical: i.bool,
|
|
180
179
|
items: i.arrayOf(i.object),
|
|
181
180
|
style: i.object,
|
|
@@ -188,8 +187,8 @@ l.propTypes = {
|
|
|
188
187
|
customCloseItemIds: i.arrayOf(i.string),
|
|
189
188
|
onSelect: i.func,
|
|
190
189
|
role: i.string
|
|
191
|
-
},
|
|
192
|
-
let
|
|
190
|
+
}, a.defaultProps = { vertical: !1 };
|
|
191
|
+
let u = a;
|
|
193
192
|
export {
|
|
194
|
-
|
|
193
|
+
u as Menu
|
|
195
194
|
};
|
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: 1741187146,version:"10.0.0-develop.2",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: "
|
|
13
|
+
publishDate: 1741187146,
|
|
14
|
+
version: "10.0.0-develop.2",
|
|
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": "
|
|
3
|
+
"version": "10.0.0-develop.2",
|
|
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,12 +26,12 @@
|
|
|
26
26
|
"sideEffects": false,
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"@progress/kendo-licensing": "^1.5.0",
|
|
29
|
-
"@progress/kendo-react-animation": "
|
|
30
|
-
"@progress/kendo-react-buttons": "
|
|
31
|
-
"@progress/kendo-react-common": "
|
|
32
|
-
"@progress/kendo-react-intl": "
|
|
33
|
-
"@progress/kendo-react-popup": "
|
|
34
|
-
"@progress/kendo-react-progressbars": "
|
|
29
|
+
"@progress/kendo-react-animation": "10.0.0-develop.2",
|
|
30
|
+
"@progress/kendo-react-buttons": "10.0.0-develop.2",
|
|
31
|
+
"@progress/kendo-react-common": "10.0.0-develop.2",
|
|
32
|
+
"@progress/kendo-react-intl": "10.0.0-develop.2",
|
|
33
|
+
"@progress/kendo-react-popup": "10.0.0-develop.2",
|
|
34
|
+
"@progress/kendo-react-progressbars": "10.0.0-develop.2",
|
|
35
35
|
"@progress/kendo-svg-icons": "^4.0.0",
|
|
36
36
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
|
|
37
37
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
"package": {
|
|
62
62
|
"productName": "KendoReact",
|
|
63
63
|
"productCode": "KENDOUIREACT",
|
|
64
|
-
"publishDate":
|
|
64
|
+
"publishDate": 1741187146,
|
|
65
65
|
"licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
66
66
|
}
|
|
67
67
|
},
|
package/panelbar/PanelBar.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 b=require("react"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react"),c=require("prop-types"),v=require("./PanelBarItem.js"),l=require("./util.js"),p=require("@progress/kendo-react-common"),n=require("./interfaces/NavigationAction.js");function P(d){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const r in d)if(r!=="default"){const e=Object.getOwnPropertyDescriptor(d,r);Object.defineProperty(a,r,e.get?e:{enumerable:!0,get:()=>d[r]})}}return a.default=d,Object.freeze(a)}const u=P(b),f=class f extends u.Component{constructor(a){super(a),this._element=null,this.handleSelect=e=>{this.onSelect(e),this.onFocus(e)},this.onSelect=e=>{const o=l.flatChildren(u.Children.toArray(this.children));let i,s;switch(o.forEach(t=>{t.props.uniquePrivateKey===(e.uniquePrivateKey||this.state.focused)&&(i=t)}),this.expandMode){case"single":s=[...i.props.parentUniquePrivateKey,i.props.uniquePrivateKey],l.isArrayEqual(this.expandedItems,s)&&(i.props.parentUniquePrivateKey?s=[...i.props.parentUniquePrivateKey]:s=[]);break;case"multiple":{s=this.expandedItems.slice();const t=s.indexOf(i.props.uniquePrivateKey);t===-1?s.push(i.props.uniquePrivateKey):s.splice(t,1);break}default:s=this.expandedItems.slice();break}this.setState({selected:i.props.uniquePrivateKey,expanded:s}),this.props.onSelect&&this.props.onSelect.call(void 0,{target:i,expandedItems:s})},this.onFocus=(e,o=0,i)=>{const s=l.flatVisibleChildren(u.Children.toArray(this.children)),t=l.getFocusedChild(s,o,e,this.state.focused,i);if(t){const h=this.expandedItems.slice();if(i===n.NavigationAction.Right&&t&&t.props&&t.props.children&&t.props.children.length>0){if(h.push(t.props.uniquePrivateKey),this.setState({expanded:[...new Set(h)]}),t.props.expanded){const g=t.props.children[0].props.uniquePrivateKey;this.setState({focused:g})}}else if(i===n.NavigationAction.Left&&(t&&t.props&&t.props.parentUniquePrivateKey&&t.props.parentUniquePrivateKey.length>0||t&&t.props&&!t.props.disabled&&t.props.children&&t.props.children.length>0)){const g=t.props.parentUniquePrivateKey;if(t.props.expanded){const y=t.props.uniquePrivateKey,x=h.indexOf(y);h.splice(x,1),this.setState({expanded:h})}else if(t.props.level>0){const y=t.props.parentUniquePrivateKey[g.length-1];this.setState({focused:y})}}else this.activeDescendant=t.props.id,this.setState({focused:t.props.uniquePrivateKey})}},this.onNavigate=(e,o)=>{let i;switch(o){case n.NavigationAction.First:this.onFocus(e,i,n.NavigationAction.First);break;case n.NavigationAction.Last:this.onFocus(e,i,n.NavigationAction.Last);break;case n.NavigationAction.Left:this.onFocus(e,i,n.NavigationAction.Left);break;case n.NavigationAction.Right:this.onFocus(e,i,n.NavigationAction.Right);break;case n.NavigationAction.Previous:i=-1,this.onFocus(e,i);break;case n.NavigationAction.Next:i=1,this.onFocus(e,i);break;case n.NavigationAction.Toggle:this.onSelect(e);break}},this.handleWrapperFocus=()=>{clearTimeout(this.nextTickId),this.state.wrapperFocused||this.setState({wrapperFocused:!0})},this.handleWrapperBlur=()=>{this.nextTick(()=>{this.setState({wrapperFocused:!1})})},this.handleKeyDown=e=>{const o=this._element&&getComputedStyle(this._element).direction==="rtl"||!1;if(e.target===e.currentTarget){const i=e.keyCode;let s;switch(i){case p.Keys.left:s=o?n.NavigationAction.Right:n.NavigationAction.Left;break;case p.Keys.up:s=n.NavigationAction.Previous;break;case p.Keys.right:s=o?n.NavigationAction.Left:n.NavigationAction.Right;break;case p.Keys.down:s=n.NavigationAction.Next;break;case p.Keys.home:s=n.NavigationAction.First;break;case p.Keys.end:s=n.NavigationAction.Last;break;case p.Keys.space:case p.Keys.enter:s=n.NavigationAction.Toggle;break;default:s=null;break}s!==null&&(e.preventDefault(),this.onNavigate(e,s))}};const r=l.getInitialState(a,this.expandMode);r.focused||(r.focused=l.getFirstId(a)),this.state=r}get expandMode(){return this.props.expandMode||"multiple"}get selectedItem(){const{selected:a=this.state.selected}=this.props;return a}get expandedItems(){return this.props.isControlled?this.props.expanded||[]:this.state.expanded}get children(){const a={...this.state,selected:this.selectedItem},r={animation:this.props.animation,keepItemsMounted:this.props.keepItemsMounted,state:a,expanded:this.expandedItems,handleSelect:this.handleSelect,children:this.props.children};return l.renderChildren(r)}render(){const a={"aria-activedescendant":this.activeDescendant},r=p.classNames("k-panelbar",this.props.className);return u.createElement("ul",{ref:e=>{this._element=e},dir:this.props.dir,role:"tree",tabIndex:0,onKeyDown:this.handleKeyDown,onFocus:this.handleWrapperFocus,onBlur:this.handleWrapperBlur,className:r,style:this.props.style,...a},this.children)}nextTick(a){this.nextTickId=window.setTimeout(()=>a())}};f.propTypes={animation:c.bool,children:function(a,r){const e=a[r];if(e){if(Array.isArray(e)){for(const o of e)if(!o.type||o.type!==v.PanelBarItem)return new Error("PanelBar children should be either PanelBarItem or Array of PanelBarItem.")}else if(e.type!==v.PanelBarItem)return new Error("PanelBar child should be either PanelBarItem or Array of PanelBarItem.");return null}return null},dir:c.string,selected:c.string,expanded:c.arrayOf(c.string),focused:c.string,expandMode:c.oneOf(["single","multiple"]),className:c.string,keepItemsMounted:c.bool,onSelect:c.func,style:c.object},f.defaultProps={expandMode:"multiple",animation:!0,keepItemsMounted:!1};let m=f;exports.PanelBar=m;
|
package/panelbar/PanelBar.mjs
CHANGED
|
@@ -8,51 +8,50 @@
|
|
|
8
8
|
import * as c from "react";
|
|
9
9
|
import o from "prop-types";
|
|
10
10
|
import { PanelBarItem as m } from "./PanelBarItem.mjs";
|
|
11
|
-
import { flatChildren as
|
|
12
|
-
import { Keys as l,
|
|
13
|
-
import {
|
|
14
|
-
import { NavigationAction as i } from "./interfaces/NavigationAction.mjs";
|
|
11
|
+
import { flatChildren as g, isArrayEqual as k, flatVisibleChildren as b, getFocusedChild as P, getInitialState as I, getFirstId as K, renderChildren as S } from "./util.mjs";
|
|
12
|
+
import { Keys as l, classNames as F } from "@progress/kendo-react-common";
|
|
13
|
+
import { NavigationAction as r } from "./interfaces/NavigationAction.mjs";
|
|
15
14
|
const h = class h extends c.Component {
|
|
16
15
|
constructor(a) {
|
|
17
|
-
super(a), this._element = null, this.
|
|
16
|
+
super(a), this._element = null, this.handleSelect = (t) => {
|
|
18
17
|
this.onSelect(t), this.onFocus(t);
|
|
19
18
|
}, this.onSelect = (t) => {
|
|
20
|
-
const n =
|
|
21
|
-
let s,
|
|
19
|
+
const n = g(c.Children.toArray(this.children));
|
|
20
|
+
let s, i;
|
|
22
21
|
switch (n.forEach((e) => {
|
|
23
22
|
e.props.uniquePrivateKey === (t.uniquePrivateKey || this.state.focused) && (s = e);
|
|
24
23
|
}), this.expandMode) {
|
|
25
24
|
case "single":
|
|
26
|
-
|
|
25
|
+
i = [...s.props.parentUniquePrivateKey, s.props.uniquePrivateKey], k(this.expandedItems, i) && (s.props.parentUniquePrivateKey ? i = [...s.props.parentUniquePrivateKey] : i = []);
|
|
27
26
|
break;
|
|
28
27
|
case "multiple": {
|
|
29
|
-
|
|
30
|
-
const e =
|
|
31
|
-
e === -1 ?
|
|
28
|
+
i = this.expandedItems.slice();
|
|
29
|
+
const e = i.indexOf(s.props.uniquePrivateKey);
|
|
30
|
+
e === -1 ? i.push(s.props.uniquePrivateKey) : i.splice(e, 1);
|
|
32
31
|
break;
|
|
33
32
|
}
|
|
34
33
|
default:
|
|
35
|
-
|
|
34
|
+
i = this.expandedItems.slice();
|
|
36
35
|
break;
|
|
37
36
|
}
|
|
38
|
-
this.setState({ selected: s.props.uniquePrivateKey, expanded:
|
|
37
|
+
this.setState({ selected: s.props.uniquePrivateKey, expanded: i }), this.props.onSelect && this.props.onSelect.call(void 0, {
|
|
39
38
|
target: s,
|
|
40
|
-
expandedItems:
|
|
39
|
+
expandedItems: i
|
|
41
40
|
});
|
|
42
41
|
}, this.onFocus = (t, n = 0, s) => {
|
|
43
|
-
const
|
|
42
|
+
const i = b(c.Children.toArray(this.children)), e = P(i, n, t, this.state.focused, s);
|
|
44
43
|
if (e) {
|
|
45
44
|
const d = this.expandedItems.slice();
|
|
46
|
-
if (s ===
|
|
45
|
+
if (s === r.Right && e && e.props && e.props.children && e.props.children.length > 0) {
|
|
47
46
|
if (d.push(e.props.uniquePrivateKey), this.setState({ expanded: [...new Set(d)] }), e.props.expanded) {
|
|
48
47
|
const u = e.props.children[0].props.uniquePrivateKey;
|
|
49
48
|
this.setState({ focused: u });
|
|
50
49
|
}
|
|
51
|
-
} else if (s ===
|
|
50
|
+
} else if (s === r.Left && (e && e.props && e.props.parentUniquePrivateKey && e.props.parentUniquePrivateKey.length > 0 || e && e.props && !e.props.disabled && e.props.children && e.props.children.length > 0)) {
|
|
52
51
|
const u = e.props.parentUniquePrivateKey;
|
|
53
52
|
if (e.props.expanded) {
|
|
54
|
-
const f = e.props.uniquePrivateKey,
|
|
55
|
-
d.splice(
|
|
53
|
+
const f = e.props.uniquePrivateKey, x = d.indexOf(f);
|
|
54
|
+
d.splice(x, 1), this.setState({ expanded: d });
|
|
56
55
|
} else if (e.props.level > 0) {
|
|
57
56
|
const f = e.props.parentUniquePrivateKey[u.length - 1];
|
|
58
57
|
this.setState({ focused: f });
|
|
@@ -63,25 +62,25 @@ const h = class h extends c.Component {
|
|
|
63
62
|
}, this.onNavigate = (t, n) => {
|
|
64
63
|
let s;
|
|
65
64
|
switch (n) {
|
|
66
|
-
case
|
|
67
|
-
this.onFocus(t, s,
|
|
65
|
+
case r.First:
|
|
66
|
+
this.onFocus(t, s, r.First);
|
|
68
67
|
break;
|
|
69
|
-
case
|
|
70
|
-
this.onFocus(t, s,
|
|
68
|
+
case r.Last:
|
|
69
|
+
this.onFocus(t, s, r.Last);
|
|
71
70
|
break;
|
|
72
|
-
case
|
|
73
|
-
this.onFocus(t, s,
|
|
71
|
+
case r.Left:
|
|
72
|
+
this.onFocus(t, s, r.Left);
|
|
74
73
|
break;
|
|
75
|
-
case
|
|
76
|
-
this.onFocus(t, s,
|
|
74
|
+
case r.Right:
|
|
75
|
+
this.onFocus(t, s, r.Right);
|
|
77
76
|
break;
|
|
78
|
-
case
|
|
77
|
+
case r.Previous:
|
|
79
78
|
s = -1, this.onFocus(t, s);
|
|
80
79
|
break;
|
|
81
|
-
case
|
|
80
|
+
case r.Next:
|
|
82
81
|
s = 1, this.onFocus(t, s);
|
|
83
82
|
break;
|
|
84
|
-
case
|
|
83
|
+
case r.Toggle:
|
|
85
84
|
this.onSelect(t);
|
|
86
85
|
break;
|
|
87
86
|
}
|
|
@@ -95,38 +94,38 @@ const h = class h extends c.Component {
|
|
|
95
94
|
const n = this._element && getComputedStyle(this._element).direction === "rtl" || !1;
|
|
96
95
|
if (t.target === t.currentTarget) {
|
|
97
96
|
const s = t.keyCode;
|
|
98
|
-
let
|
|
97
|
+
let i;
|
|
99
98
|
switch (s) {
|
|
100
99
|
case l.left:
|
|
101
|
-
|
|
100
|
+
i = n ? r.Right : r.Left;
|
|
102
101
|
break;
|
|
103
102
|
case l.up:
|
|
104
|
-
|
|
103
|
+
i = r.Previous;
|
|
105
104
|
break;
|
|
106
105
|
case l.right:
|
|
107
|
-
|
|
106
|
+
i = n ? r.Left : r.Right;
|
|
108
107
|
break;
|
|
109
108
|
case l.down:
|
|
110
|
-
|
|
109
|
+
i = r.Next;
|
|
111
110
|
break;
|
|
112
111
|
case l.home:
|
|
113
|
-
|
|
112
|
+
i = r.First;
|
|
114
113
|
break;
|
|
115
114
|
case l.end:
|
|
116
|
-
|
|
115
|
+
i = r.Last;
|
|
117
116
|
break;
|
|
118
117
|
case l.space:
|
|
119
118
|
case l.enter:
|
|
120
|
-
|
|
119
|
+
i = r.Toggle;
|
|
121
120
|
break;
|
|
122
121
|
default:
|
|
123
|
-
|
|
122
|
+
i = null;
|
|
124
123
|
break;
|
|
125
124
|
}
|
|
126
|
-
|
|
125
|
+
i !== null && (t.preventDefault(), this.onNavigate(t, i));
|
|
127
126
|
}
|
|
128
|
-
}
|
|
129
|
-
const p =
|
|
127
|
+
};
|
|
128
|
+
const p = I(a, this.expandMode);
|
|
130
129
|
p.focused || (p.focused = K(a)), this.state = p;
|
|
131
130
|
}
|
|
132
131
|
get expandMode() {
|
|
@@ -148,7 +147,7 @@ const h = class h extends c.Component {
|
|
|
148
147
|
handleSelect: this.handleSelect,
|
|
149
148
|
children: this.props.children
|
|
150
149
|
};
|
|
151
|
-
return
|
|
150
|
+
return S(p);
|
|
152
151
|
}
|
|
153
152
|
/**
|
|
154
153
|
* @hidden
|
|
@@ -156,7 +155,7 @@ const h = class h extends c.Component {
|
|
|
156
155
|
render() {
|
|
157
156
|
const a = {
|
|
158
157
|
"aria-activedescendant": this.activeDescendant
|
|
159
|
-
}, p =
|
|
158
|
+
}, p = F("k-panelbar", this.props.className);
|
|
160
159
|
return /* @__PURE__ */ c.createElement(
|
|
161
160
|
"ul",
|
|
162
161
|
{
|
|
@@ -173,8 +172,7 @@ const h = class h extends c.Component {
|
|
|
173
172
|
style: this.props.style,
|
|
174
173
|
...a
|
|
175
174
|
},
|
|
176
|
-
this.children
|
|
177
|
-
this.showLicenseWatermark && /* @__PURE__ */ c.createElement(C, null)
|
|
175
|
+
this.children
|
|
178
176
|
);
|
|
179
177
|
}
|
|
180
178
|
nextTick(a) {
|
|
@@ -212,7 +210,7 @@ h.propTypes = {
|
|
|
212
210
|
animation: !0,
|
|
213
211
|
keepItemsMounted: !1
|
|
214
212
|
};
|
|
215
|
-
let
|
|
213
|
+
let y = h;
|
|
216
214
|
export {
|
|
217
|
-
|
|
215
|
+
y as PanelBar
|
|
218
216
|
};
|
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 strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("react"),w=require("./SplitterPane.js"),R=require("./SplitterBar.js"),C=require("@progress/kendo-react-common"),B=require("../package-metadata.js"),D=require("./messages/index.js"),_=require("@progress/kendo-react-intl");function N(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 m=N(T),L={collapsible:!1,collapsed:!1,resizable:!0,scrollable:!0},q=150,E=class E extends m.Component{constructor(i){super(i),this.showLicenseWatermark=!1,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];m.isValidElement(p)&&(o=p.type.displayName==="Splitter");let h=!1;a&&r!==void 0&&(h=r===s||r+1===s),l.push({...L,orientation:n,containsSplitter:o,overlay:h,...(e||[])[s]})}return l},this.mapSplitterPanes=(e,t)=>{const n=_.provideLocalizationService(this).toLanguageString(D.splitBarLabel,D.messages[D.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=m.createElement(R.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[m.createElement(w.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:S}=this.state;if(!r&&l-v<q){a&&this.resetDragState();return}let g;this.orientation==="vertical"?g=o-S: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,this.showLicenseWatermark=!C.validatePackage(B.packageMetadata,{component:"Splitter"}),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 m.Children.toArray(this.props.children).filter(i=>i)}render(){const i=this.panesContent,e=this.panesOptions(i),t=C.classNames("k-splitter","k-splitter-flex",`k-splitter-${this.orientation}`,this.props.className);return this.validatePanes(e),m.createElement("div",{id:this.props.id,style:this.props.style,ref:n=>this._container=n,className:t},this.mapSplitterPanes(e,i),this.showLicenseWatermark&&m.createElement(C.WatermarkOverlay,null))}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},S=(u,x)=>{const z=s[u.index],k=this.clamp(u.min,u.max,u.initialSize+x);return this.isPercent(z.size||"")?100*k/P+"%":k+"px"};let g,O;this.fixedSize(o.size)&&this.fixedSize(p.size)?(g=S(v,r),O=S(f,-r)):p.collapsible||this.fixedSize(p.size)?O=S(f,-r):g=S(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}};E.displayName="Splitter";let b=E;exports.Splitter=b;
|