@progress/kendo-react-layout 14.4.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/Menu.d.ts +14 -93
- package/menu/components/Menu.js +1 -1
- package/menu/components/Menu.mjs +223 -212
- package/menu/components/MenuItem.d.ts +4 -24
- package/menu/components/MenuItem.js +1 -1
- package/menu/components/MenuItem.mjs +16 -24
- package/menu/components/MenuItemArrow.d.ts +4 -19
- package/menu/components/MenuItemArrow.js +1 -1
- package/menu/components/MenuItemArrow.mjs +17 -36
- package/menu/components/MenuItemInternal.d.ts +2 -35
- package/menu/components/MenuItemInternal.js +1 -1
- package/menu/components/MenuItemInternal.mjs +174 -219
- package/menu/components/MenuItemLink.d.ts +1 -15
- package/menu/components/MenuItemLink.js +1 -1
- package/menu/components/MenuItemLink.mjs +17 -30
- package/menu/events.d.ts +4 -4
- package/menu/utils/DirectionHolder.js +1 -1
- package/menu/utils/DirectionHolder.mjs +1 -1
- 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
package/drawer/Drawer.d.ts
CHANGED
|
@@ -33,7 +33,7 @@ export interface DrawerHandle {
|
|
|
33
33
|
* { text: 'Calendar', icon: 'k-i-calendar' },
|
|
34
34
|
* { separator: true },
|
|
35
35
|
* { text: 'Attachments', icon: 'k-i-hyperlink-email' },
|
|
36
|
-
* { text: 'Favourites', icon: 'k-i-star
|
|
36
|
+
* { text: 'Favourites', icon: 'k-i-star' }
|
|
37
37
|
* ];
|
|
38
38
|
*
|
|
39
39
|
* const [expanded, setExpanded] = React.useState(true);
|
|
@@ -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>
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import { default as PropTypes } from 'prop-types';
|
|
9
8
|
import { MenuProps } from '../MenuProps';
|
|
10
9
|
import * as React from 'react';
|
|
11
10
|
/**
|
|
@@ -15,7 +14,19 @@ export interface MenuState {
|
|
|
15
14
|
focusedItemId: string;
|
|
16
15
|
hoveredItemId: string;
|
|
17
16
|
tabbableItemId: string;
|
|
18
|
-
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Represent the `ref` of the Menu component.
|
|
20
|
+
*/
|
|
21
|
+
export interface MenuHandle {
|
|
22
|
+
/**
|
|
23
|
+
* The current element or `null` if there is no one.
|
|
24
|
+
*/
|
|
25
|
+
element: HTMLDivElement | null;
|
|
26
|
+
/**
|
|
27
|
+
* Resets the selection and opening of Menu items.
|
|
28
|
+
*/
|
|
29
|
+
reset: () => void;
|
|
19
30
|
}
|
|
20
31
|
/**
|
|
21
32
|
* Represents the [KendoReact Menu component](https://www.telerik.com/kendo-react-ui/components/layout/menu).
|
|
@@ -39,94 +50,4 @@ export interface MenuState {
|
|
|
39
50
|
* }
|
|
40
51
|
* ```
|
|
41
52
|
*/
|
|
42
|
-
export declare
|
|
43
|
-
/**
|
|
44
|
-
* @hidden
|
|
45
|
-
*/
|
|
46
|
-
static propTypes: {
|
|
47
|
-
vertical: PropTypes.Requireable<boolean>;
|
|
48
|
-
items: PropTypes.Requireable<(object | null | undefined)[]>;
|
|
49
|
-
style: PropTypes.Requireable<object>;
|
|
50
|
-
animate: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
|
|
51
|
-
openDuration: PropTypes.Requireable<number>;
|
|
52
|
-
closeDuration: PropTypes.Requireable<number>;
|
|
53
|
-
}> | null | undefined>>;
|
|
54
|
-
dir: PropTypes.Requireable<string>;
|
|
55
|
-
hoverOpenDelay: PropTypes.Requireable<number>;
|
|
56
|
-
hoverCloseDelay: PropTypes.Requireable<number>;
|
|
57
|
-
openOnClick: PropTypes.Requireable<boolean>;
|
|
58
|
-
itemRender: PropTypes.Requireable<any>;
|
|
59
|
-
linkRender: PropTypes.Requireable<any>;
|
|
60
|
-
customCloseItemIds: PropTypes.Requireable<(string | null | undefined)[]>;
|
|
61
|
-
onSelect: PropTypes.Requireable<(...args: any[]) => any>;
|
|
62
|
-
onClose: PropTypes.Requireable<(...args: any[]) => any>;
|
|
63
|
-
role: PropTypes.Requireable<string>;
|
|
64
|
-
};
|
|
65
|
-
/**
|
|
66
|
-
* @hidden
|
|
67
|
-
*/
|
|
68
|
-
static defaultProps: {
|
|
69
|
-
vertical: boolean;
|
|
70
|
-
animate: boolean;
|
|
71
|
-
};
|
|
72
|
-
/**
|
|
73
|
-
* @hidden
|
|
74
|
-
*/
|
|
75
|
-
readonly state: MenuState;
|
|
76
|
-
private itemHoverRequest;
|
|
77
|
-
private itemLeaveRequest;
|
|
78
|
-
private menuWrapperEl;
|
|
79
|
-
private get menuItemId();
|
|
80
|
-
private directionHolder;
|
|
81
|
-
private inputItems;
|
|
82
|
-
private items;
|
|
83
|
-
private mouseOverHandler;
|
|
84
|
-
/**
|
|
85
|
-
* The current element or `null` if there is no one.
|
|
86
|
-
*/
|
|
87
|
-
get element(): HTMLDivElement | null;
|
|
88
|
-
constructor(props: MenuProps);
|
|
89
|
-
protected get animate(): boolean;
|
|
90
|
-
/**
|
|
91
|
-
* @hidden
|
|
92
|
-
*/
|
|
93
|
-
render(): React.JSX.Element;
|
|
94
|
-
/**
|
|
95
|
-
* @hidden
|
|
96
|
-
*/
|
|
97
|
-
componentDidMount(): void;
|
|
98
|
-
/**
|
|
99
|
-
* @hidden
|
|
100
|
-
*/
|
|
101
|
-
componentDidUpdate(prevProps: MenuProps): void;
|
|
102
|
-
/**
|
|
103
|
-
* @hidden
|
|
104
|
-
*/
|
|
105
|
-
componentWillUnmount(): void;
|
|
106
|
-
/**
|
|
107
|
-
* Resets the selection and opening of Menu items.
|
|
108
|
-
*/
|
|
109
|
-
reset: () => void;
|
|
110
|
-
private handleClickOutside;
|
|
111
|
-
private onKeyDown;
|
|
112
|
-
private onItemMouseOver;
|
|
113
|
-
private onItemMouseLeave;
|
|
114
|
-
private onItemFocus;
|
|
115
|
-
private onItemClick;
|
|
116
|
-
private onPopupClose;
|
|
117
|
-
private onItemBlur;
|
|
118
|
-
private getInputItem;
|
|
119
|
-
private setFocusedItemId;
|
|
120
|
-
private setHoveredItemId;
|
|
121
|
-
private getMenuClassName;
|
|
122
|
-
private clearItemHoverAndLeaveRequestsIfApplicable;
|
|
123
|
-
private isItemWithDefaultClose;
|
|
124
|
-
private checkIsDirectionRightToLeft;
|
|
125
|
-
private prepareItems;
|
|
126
|
-
private dispatchSelectEventIfWired;
|
|
127
|
-
}
|
|
128
|
-
/**
|
|
129
|
-
* Represent the `ref` of the Menu component.
|
|
130
|
-
*/
|
|
131
|
-
export interface MenuHandle extends Pick<Menu, keyof Menu> {
|
|
132
|
-
}
|
|
53
|
+
export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<MenuHandle>>;
|
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
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=require("react"),i=require("prop-types"),M=require("@progress/kendo-react-common"),t=require("../utils/itemsIdsUtils.js"),ee=require("../utils/prepareInputItemsForInternalWork.js"),Z=require("../utils/getNewItemIdUponKeyboardNavigation.js"),B=require("../utils/hoverDelay.js"),te=require("./MenuItemInternal.js"),re=require("../utils/DirectionHolder.js"),ne=require("../utils/MouseOverHandler.js");function oe(o){const D=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const I in o)if(I!=="default"){const b=Object.getOwnPropertyDescriptor(o,I);Object.defineProperty(D,I,b.get?b:{enumerable:!0,get:()=>o[I]})}}return D.default=o,Object.freeze(D)}const n=oe(X),K={focusedItemId:t.EMPTY_ID,hoveredItemId:t.EMPTY_ID,tabbableItemId:t.ZERO_LEVEL_ZERO_ITEM_ID},S=n.forwardRef((o,D)=>{const I=n.useRef(null),b=n.useRef(null),y=n.useRef(null),R=n.useRef(new re.DirectionHolder),O=n.useRef([]),N=n.useRef([]),l=n.useRef(o);l.current=o;const[v,h]=n.useState({...K}),C=n.useRef(v);C.current=v;const w=n.useRef(()=>{}),P=n.useRef(new ne.MouseOverHandler(o.openOnClick,()=>w.current())),{items:j,inputItems:F}=ee.prepareInputItemsForInternalWork(o.items,o.children);O.current=j,N.current=F,R.current.setIsDirectionRightToLeft(V());function V(){return!!(l.current.dir!==void 0?l.current.dir==="rtl":I.current&&getComputedStyle(I.current).direction==="rtl")}const g=n.useCallback(()=>{b.current&&(clearTimeout(b.current),b.current=null),y.current&&(clearTimeout(y.current),y.current=null)},[]),H=n.useCallback(()=>{g(),h({...K})},[g]);w.current=H;const E=n.useRef({get element(){return I.current},reset:()=>w.current()});n.useImperativeHandle(D,()=>E.current,[]);const m=n.useCallback(e=>{h(r=>{const c=e===t.EMPTY_ID?r.tabbableItemId:t.getRootParentId(e);return{hoveredItemId:e===t.EMPTY_ID||t.isIdEmptyOrZeroLevel(r.hoveredItemId)&&t.isIdEmptyOrZeroLevel(e)?r.hoveredItemId:t.EMPTY_ID,focusedItemId:e,tabbableItemId:c}})},[]),a=n.useCallback(e=>{h(r=>t.isIdEmptyOrZeroLevel(e)&&t.isIdEmptyOrZeroLevel(r.focusedItemId)?{hoveredItemId:e,focusedItemId:r.focusedItemId,tabbableItemId:r.tabbableItemId}:{hoveredItemId:e,focusedItemId:t.EMPTY_ID,tabbableItemId:t.ZERO_LEVEL_ZERO_ITEM_ID})},[]),f=n.useCallback(e=>t.getItemById(e,N.current),[]),T=n.useCallback((e,r)=>{M.dispatchEvent(l.current.onSelect,e,E.current,{item:f(r),itemId:r})},[f]),_=n.useCallback(e=>!l.current.customCloseItemIds||l.current.customCloseItemIds.indexOf(e)===-1,[]),Y=n.useCallback(e=>{var s,u;const r=l.current,c=C.current;if(r.openOnClick&&c.hoveredItemId!==t.EMPTY_ID){const d=e.target;((s=I.current)==null?void 0:s.contains(d))===!1&&(r.id&&((u=d.closest)!=null&&u.call(d,`[id^="${r.id}_"]`))||a(t.EMPTY_ID))}},[a]),W=n.useCallback(e=>{const r=C.current,c=l.current,s=O.current;if(r.focusedItemId!==t.EMPTY_ID){const u=t.getItemById(r.focusedItemId,s);let d=Z.getNewItemIdUponKeyboardNavigation(s,u.id,e.keyCode,e.key,c.vertical,R.current.getIsDirectionRightToLeft());const k=t.getItemById(d,s);if(k!=null&&k.separator&&(d=Z.getNewItemIdUponKeyboardNavigation(s,d,e.keyCode,e.key,c.vertical,R.current.getIsDirectionRightToLeft())),u.id!==d&&(e.preventDefault(),m(d)),(e.keyCode===M.Keys.enter||e.keyCode===M.Keys.space)&&!u.disabled&&(P.current.handleItemSelectedViaKeyboard(),T(e,u.id),!e.isDefaultPrevented()&&u.items.length===0&&u.url&&window.location.assign(u.url)),e.keyCode===M.Keys.esc&&t.isIdZeroLevel(u.id)&&c.onClose){const p=f(u.id);c.onClose({target:E.current,item:p,itemId:u.id})}}},[m,T,f]),U=n.useCallback(e=>{const r=C.current,c=l.current,s=c.openOnClick&&!t.isIdZeroLevel(e)&&r.hoveredItemId!==t.EMPTY_ID;(P.current.IsMouseOverEnabled||s)&&(g(),b.current=window.setTimeout(()=>{a(e),b.current=null},B.getHoverOpenDelay(c)))},[g,a]),A=n.useCallback(e=>{const r=C.current,c=l.current,s=c.openOnClick&&!t.isIdZeroLevel(e)&&r.hoveredItemId!==t.EMPTY_ID;(P.current.IsMouseOverEnabled||s)&&_(e)&&(g(),y.current=window.setTimeout(()=>{a(s?t.getDirectParentId(e):t.EMPTY_ID),y.current=null},B.getHoverCloseDelay(c)))},[g,_,a]),z=n.useCallback(e=>{C.current.hoveredItemId===t.EMPTY_ID?m(e):h(c=>({focusedItemId:e,hoveredItemId:c.hoveredItemId,tabbableItemId:t.getRootParentId(e)}))},[m]),G=n.useCallback((e,r)=>{const c=O.current,s=t.getItemById(r,c),u=C.current,d=l.current;if(!s.disabled){const k=t.isIdZeroLevel(r),p=!s.items||s.items.length===0;k?(m(r),p||d.openOnClick&&u.hoveredItemId!==t.EMPTY_ID&&t.getRootParentId(u.hoveredItemId)===r?a(t.EMPTY_ID):a(r)):p&&(m(r),a(t.EMPTY_ID)),T(e,r),!e.isDefaultPrevented()&&s.url&&window.location.assign(s.url)}},[m,a,T]),$=n.useCallback((e,r)=>{const c=l.current;c.onClose&&c.onClose({target:E.current,item:f(e),itemId:e,popupCloseEvent:r})},[f]),x=n.useCallback((e,r)=>{var s;const c=l.current;if(_(e)&&m(t.EMPTY_ID),((s=r.relatedTarget)==null?void 0:s.nodeName)==="LI"){const u=r.relatedTarget.getAttribute("id");if(u!=null&&u.includes(c.id))return}if(t.isIdZeroLevel(e)&&c.onClose){const u=f(e);c.onClose({target:E.current,item:u,itemId:e})}},[_,m,f]),q=n.useRef(o.vertical);n.useEffect(()=>()=>{g()},[g]),n.useEffect(()=>(o.openOnClick&&document.addEventListener("mousedown",Y),()=>{document.removeEventListener("mousedown",Y)}),[o.openOnClick,Y]),n.useEffect(()=>{const e=!!q.current!=!!o.vertical,r=R.current.hasDirectionChanged();(e||r)&&H(),P.current.OpenOnClick=o.openOnClick,q.current=o.vertical});const J=()=>M.classNames("k-reset","k-header","k-menu",{"k-menu-horizontal":!o.vertical},{"k-menu-vertical":o.vertical},o.className);let L;v.hoveredItemId?L=v.hoveredItemId:v.focusedItemId?L=t.getDirectParentId(v.focusedItemId):L=t.EMPTY_ID;const Q=o.animate!==void 0?o.animate:!0;return n.createElement("div",{id:o.id,onKeyDown:W,style:o.style,className:R.current.getIsDirectionRightToLeft()?"k-rtl":void 0,ref:I},n.createElement(te.MenuItemInternalsList,{className:J(),"aria-orientation":o.vertical?"vertical":void 0,items:O.current,animate:Q,isMenuVertical:o.vertical,isDirectionRightToLeft:R.current.getIsDirectionRightToLeft(),focusedItemId:v.focusedItemId,lastItemIdToBeOpened:L,tabbableItemId:v.tabbableItemId,itemRender:o.itemRender,linkRender:o.linkRender,menuGuid:o.id,onMouseLeave:A,onMouseOver:U,onFocus:z,onClick:G,onBlur:x,onOriginalItemNeeded:f,onPopupClose:$,role:o.role}))});S.propTypes={vertical:i.bool,items:i.arrayOf(i.object),style:i.object,animate:i.oneOfType([i.bool,i.shape({openDuration:i.number,closeDuration:i.number})]),dir:i.string,hoverOpenDelay:i.number,hoverCloseDelay:i.number,openOnClick:i.bool,itemRender:i.any,linkRender:i.any,customCloseItemIds:i.arrayOf(i.string),onSelect:i.func,onClose:i.func,role:i.string};S.displayName="Menu";exports.Menu=S;
|