@progress/kendo-react-popup 13.3.0 → 13.4.0-develop.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Popup.d.ts +99 -0
- package/animation.d.ts +12 -0
- package/dist/cdn/js/kendo-react-popup.js +1 -1
- package/index.d.mts +11 -631
- package/index.d.ts +11 -631
- package/models/Align.d.ts +31 -0
- package/models/Collision.d.ts +21 -0
- package/models/CollisionType.d.ts +17 -0
- package/models/Events.d.ts +64 -0
- package/models/Margin.d.ts +21 -0
- package/models/Offset.d.ts +21 -0
- package/models/PopupAnimation.d.ts +188 -0
- package/models/PopupProps.d.ts +235 -0
- package/models/PopupSettings.d.ts +93 -0
- package/models/PositionMode.d.ts +12 -0
- package/package-metadata.d.ts +12 -0
- package/package-metadata.mjs +13 -0
- package/package.json +9 -3
- package/util.d.ts +24 -0
package/Popup.d.ts
ADDED
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import { AlignPoint, Collision as CollisionEnum } from '@progress/kendo-popup-common';
|
|
9
|
+
import { Offset } from './models/Offset.js';
|
|
10
|
+
import { PopupProps } from './models/PopupProps.js';
|
|
11
|
+
import { Align } from './models/Align.js';
|
|
12
|
+
import { Collision } from './models/Collision.js';
|
|
13
|
+
import * as React from 'react';
|
|
14
|
+
/**
|
|
15
|
+
* The PopupPropsContext. It allows to configure the Popup props from a wrapper component.
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* ```jsx-no-run
|
|
19
|
+
* <PopupPropsContext.Provider value={props => ({ ...props, appendTo: document.querySelector('myPopupsContainer') })}>
|
|
20
|
+
* <DropDownList />
|
|
21
|
+
* <Editor />
|
|
22
|
+
* </PopupPropsContext.Provider>
|
|
23
|
+
* ```
|
|
24
|
+
*/
|
|
25
|
+
export declare const PopupPropsContext: React.Context<(props: PopupProps) => PopupProps>;
|
|
26
|
+
declare enum Status {
|
|
27
|
+
hiding = "hiding",
|
|
28
|
+
hidden = "hidden",
|
|
29
|
+
showing = "showing",
|
|
30
|
+
shown = "shown",
|
|
31
|
+
reposition = "reposition"
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* @hidden
|
|
35
|
+
*/
|
|
36
|
+
export interface PopupState {
|
|
37
|
+
current: Status;
|
|
38
|
+
previous: Status;
|
|
39
|
+
props: {
|
|
40
|
+
show?: boolean;
|
|
41
|
+
anchor?: HTMLElement | null;
|
|
42
|
+
anchorAlign?: Align;
|
|
43
|
+
appendTo?: HTMLElement | null;
|
|
44
|
+
collision?: Collision;
|
|
45
|
+
popupAlign?: Align;
|
|
46
|
+
className?: string | string[] | {
|
|
47
|
+
[key: string]: boolean;
|
|
48
|
+
};
|
|
49
|
+
popupClass?: string | string[] | {
|
|
50
|
+
[key: string]: boolean;
|
|
51
|
+
};
|
|
52
|
+
style?: React.CSSProperties;
|
|
53
|
+
offset?: Offset;
|
|
54
|
+
contentKey?: any;
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* The KendoReact PopupHandle component.
|
|
59
|
+
*/
|
|
60
|
+
export interface PopupHandle {
|
|
61
|
+
/**
|
|
62
|
+
* Represents the Popup DOM element.
|
|
63
|
+
*/
|
|
64
|
+
element: any;
|
|
65
|
+
/**
|
|
66
|
+
* The props of the PopupHandle component.
|
|
67
|
+
*/
|
|
68
|
+
props: PopupProps;
|
|
69
|
+
}
|
|
70
|
+
/**
|
|
71
|
+
* The KendoReact Popup component.
|
|
72
|
+
*/
|
|
73
|
+
export declare const Popup: React.ForwardRefExoticComponent<PopupProps & React.RefAttributes<PopupHandle | null>>;
|
|
74
|
+
export declare const popupDefaultProps: {
|
|
75
|
+
collision: {
|
|
76
|
+
horizontal: CollisionEnum;
|
|
77
|
+
vertical: CollisionEnum;
|
|
78
|
+
};
|
|
79
|
+
anchorAlign: {
|
|
80
|
+
horizontal: AlignPoint;
|
|
81
|
+
vertical: AlignPoint;
|
|
82
|
+
};
|
|
83
|
+
popupAlign: {
|
|
84
|
+
horizontal: AlignPoint;
|
|
85
|
+
vertical: AlignPoint;
|
|
86
|
+
};
|
|
87
|
+
offset: {
|
|
88
|
+
left: number;
|
|
89
|
+
top: number;
|
|
90
|
+
};
|
|
91
|
+
animate: boolean;
|
|
92
|
+
show: boolean;
|
|
93
|
+
margin: {
|
|
94
|
+
horizontal: number;
|
|
95
|
+
vertical: number;
|
|
96
|
+
};
|
|
97
|
+
positionMode: string;
|
|
98
|
+
};
|
|
99
|
+
export {};
|
package/animation.d.ts
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import { PopupAnimationType, PopupAnimationDirection } from './models/PopupAnimation.js';
|
|
9
|
+
/**
|
|
10
|
+
* @hidden
|
|
11
|
+
*/
|
|
12
|
+
export declare const animations: (element: HTMLElement, duration: number, type: 'enter' | 'exit', callback: Function, popupClasses: any, animationType: PopupAnimationType, direction?: PopupAnimationDirection) => any;
|
|
@@ -12,4 +12,4 @@
|
|
|
12
12
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
13
13
|
*-------------------------------------------------------------------------------------------
|
|
14
14
|
*/
|
|
15
|
-
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("react-dom"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-popup-common")):"function"==typeof define&&define.amd?define(["exports","react","react-dom","prop-types","@progress/kendo-react-common","@progress/kendo-popup-common"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactPopup={},e.React,e.ReactDOM,e.PropTypes,e.KendoReactCommon,e.KendoPopupCommon)}(this,
|
|
15
|
+
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("react-dom"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-popup-common")):"function"==typeof define&&define.amd?define(["exports","react","react-dom","prop-types","@progress/kendo-react-common","@progress/kendo-popup-common"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactPopup={},e.React,e.ReactDOM,e.PropTypes,e.KendoReactCommon,e.KendoPopupCommon)}(this,function(e,n,t,o,r,i){"use strict";function s(e){var n=Object.create(null);return e&&Object.keys(e).forEach(function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}}),n.default=e,Object.freeze(n)}var l=s(n),c=s(t);const p=(e,n,t)=>{e.style.transitionDuration="",n&&e.classList.remove(...n.split(" ")),t&&e.classList.remove(...t.split(" "))},u="undefined"!=typeof window&&/Firefox/.test(window.navigator.userAgent),a=(e,n,t,o,i,s,l)=>{if(0===n)return o();const c=`${s}Active`,a=r.classNames(r.uPopup[s]({direction:l,type:t,c:i})),d=r.classNames(r.uPopup[c]({direction:l,type:t,c:i})),f=n=>{n.target===e&&(e.removeEventListener("transitionend",f),p(e,a,d),e.style.display="exit"===t?"none":"",o())};e.addEventListener("transitionend",f);const m=e.ownerDocument;if(!m)return;const h=m.defaultView;if(!h)return;const g=()=>{p(e,a,d),"enter"===t&&(e.style.display=""),a&&e.classList.add(...a.split(" ").filter(e=>e)),h.requestAnimationFrame(()=>{e.style.transitionDuration=n+"ms",e.classList.add(...d.split(" ").filter(e=>e))})};u?h.requestAnimationFrame(g):g()},d=l.createContext(e=>e);function f(e,n){if(e===n)return!0;if(!!e!=!!n)return!1;const t=Object.getOwnPropertyNames(e),o=Object.getOwnPropertyNames(n);if(t.length!==o.length)return!1;for(let o=0;o<t.length;o++){const r=t[o];if(e[r]!==n[r])return!1}return!0}const m=l.forwardRef((e,n)=>{const t=l.useContext(d).call(void 0,e),{collision:o=h.collision,anchorAlign:s=h.anchorAlign,popupAlign:p=h.popupAlign,offset:u=h.offset,animate:m=h.animate,show:v=h.show,margin:y=h.margin,positionMode:w=h.positionMode,appendTo:P,contentKey:A,anchor:b,scale:O,role:C,onKeyDown:x,onPosition:T,onOpen:D,onMouseDownOutside:E,onClose:N,className:L,popupClass:z,id:R,style:j,children:K}=t,M=r.useUnstyled(),k=t.unstyled||M,q=k&&k.uPopup,[I,H]=l.useState({current:"hidden",previous:"hidden",props:{}}),F=m&&"object"!=typeof m?g:{...g,...m},S=e=>{null==window||window.addEventListener("mousedown",Z),U(e),W(e.firstChild,"enter",V),H({...re,current:"shown",previous:re.current})},U=e=>{const{width:n,height:t}=e.style;if(0===e.offsetWidth&&0===e.offsetHeight)return;e.style.width=e.offsetWidth+"px",e.style.height=e.offsetHeight+"px";const r=i.alignElement({anchor:b,anchorAlign:s,element:e,elementAlign:p,offset:u,margin:y,positionMode:w,scale:O}),l=i.positionElement({anchor:b,anchorAlign:s,element:e,elementAlign:p,collisions:o,currentLocation:r,margin:y});if(e.style.top=l.offset.top+"px",e.style.left=l.offset.left+"px",e.style.width=n,e.style.height=t,Y.current={fit:l.fit,fitted:l.fitted,flip:l.flip,flipped:l.flipped},T){const e={target:ne.current,flipped:l.flipped,fitted:l.fitted};T.call(void 0,e)}},V=()=>{const e=ee.current;e&&(v&&e.classList.add(...r.classNames(r.uPopup.animationContainerShown({c:q})).split(" ").filter(e=>e)),G(e),D&&D.call(void 0,{target:ne.current}))},W=(n,t,o)=>{if(p){if("slide"===F.type){let r;const{horizontal:i,vertical:s}=p;r="object"==typeof e.animate&&e.animate.direction?F.direction:"left"===i&&"center"===s?"right":"right"===i&&"center"===s?"left":"top"===s?"down":"up";const l={down:"up",up:"down",left:"right",right:"left"};Y.current&&Y.current.flipped&&(r=l[r],a(n,B()[t],t,o,q,F.type,r))}a(n,B()[t],t,o,q,F.type,F.direction)}},Z=e=>{var n;const t=null===(null==(n=null==e?void 0:e.target)?void 0:n.closest(".k-animation-container")),o=(null==b?void 0:b.contains(null==e?void 0:e.target))||!1;if(t){if(E){const n={target:ne.current,event:e,state:I,isAnchorClicked:o};E.call(void 0,n)}null==window||window.removeEventListener("mousedown",Z)}},$=()=>{"hiding"===re.current&&("shown"===re.previous||"reposition"===re.previous)&&H({...re,current:"hidden",previous:re.current}),N&&N.call(void 0,{target:ne.current})},B=()=>{const e=m;let n=0,t=0;return e&&(!0===e?n=t=300:(n=e.openDuration||0,t=e.closeDuration||0)),{enter:n,exit:t}},G=e=>{J(),_.current=i.domUtils.scrollableParents(b||e),_.current&&_.current.map(e=>e.addEventListener("scroll",Q)),window.addEventListener("resize",Q)},J=()=>{_.current&&(_.current.map(e=>e.removeEventListener("scroll",Q)),_.current=void 0),window.removeEventListener("resize",Q)},Q=function(e,n,t={}){let o,r,i,s,l=0;t=t||{};const c=function(){l=!1===t.leading?0:(new Date).getTime(),o=void 0,s=e.apply(r,i),o||(r=i=null)};return function(){const p=(new Date).getTime();!l&&!1===t.leading&&(l=p);const u=n-(p-l);return r=void 0,i=arguments,u<=0||u>n?(o&&(clearTimeout(o),o=void 0),l=p,s=e.apply(r,i),o||(r=i=null)):!o&&!1!==t.trailing&&(o=window.setTimeout(c,u)),s}}(()=>{ee.current&&"hidden"!==re.current&&"hiding"!==re.current&&H({...I,current:"reposition",previous:re.current})},16.666666666666668),X=r.useZIndexContext()||0,Y=l.useRef(void 0),_=l.useRef(void 0),ee=l.useRef(null),ne=l.useRef(null),te=l.useRef({}),oe=l.useRef(!1);l.useImperativeHandle(ne,()=>({element:ee.current,setPosition:U,props:e})),l.useImperativeHandle(n,()=>ne.current);const re=l.useMemo(()=>{const e={...I,props:{show:v,anchor:b,anchorAlign:s,appendTo:P,collision:o,popupAlign:p,className:L,popupClass:z,style:j,offset:u,contentKey:A}};return v?"hidden"===I.current||"hiding"===I.current?{...e,current:"showing",previous:I.current}:"showing"===I.current?{...e,current:"shown",previous:I.current}:"shown"!==I.current||f(u,I.props.offset)&&f(s,I.props.anchorAlign)&&f(P,I.props.appendTo)&&f(o,I.props.collision)&&f(p,I.props.popupAlign)&&f(j,I.props.style)&&b===I.props.anchor&&z===I.props.popupClass&&L===I.props.className?e:{...e,current:"reposition",previous:I.current}:"hiding"===I.current||"hidden"===I.current?{...e,current:"hidden",previous:I.current}:{...e,current:"hiding",previous:I.current}},[v,b,s,P,o,p,L,z,j,u,A,I]);l.useEffect(()=>{"hiding"===re.current&&!oe.current&&ee.current?(oe.current=!0,(e=>{if(!v){const n=k&&k.uPopup;e.classList.remove(...r.classNames(r.uPopup.animationContainerShown({c:n})).split(" ").filter(e=>e))}J()})(ee.current),W(ee.current.firstChild,"exit",$)):(oe.current=!1,"showing"===re.current&&ee.current&&!ee.current.classList.contains("k-animation-container-shown")?S(ee.current):"hiding"===re.current&&ee.current?$():"reposition"===re.current&&"shown"===re.previous?setTimeout(()=>{H({...re,current:"shown",previous:re.current})},0):"shown"===re.current&&te.current.contentKey!==A&&ee.current&&U(ee.current)),"reposition"===re.current&&("shown"===re.previous||"showing"===re.previous)&&ee.current&&U(ee.current),te.current={contentKey:A}},[re]),l.useEffect(()=>("showing"===re.current&&ee.current&&S(ee.current),()=>{J()}),[]);const ie=P||(r.canUseDOM?b&&b.ownerDocument?b.ownerDocument.body:document.body:void 0),se=Object.assign({},{position:w,top:0,left:-1e4},j||{}),le="hiding"===re.current;if((v||le)&&ie){const e=X?X+1:100,n=l.createElement(r.ZIndexContext.Provider,{value:e},l.createElement("div",{onKeyDown:x,className:r.classNames(r.uPopup.animationContainer({c:q}),L),id:R,ref:ee,style:{zIndex:e,...se}},l.createElement("div",{className:r.classNames(r.uPopup.animationChild({c:q})),style:{transitionDelay:"0ms"}},l.createElement("div",{role:C,className:r.classNames(r.uPopup.popup({c:q}),z)},K))));return null!==P?c.createPortal(n,ie):n}return null}),h={collision:{horizontal:i.Collision.fit,vertical:i.Collision.flip},anchorAlign:{horizontal:i.AlignPoint.left,vertical:i.AlignPoint.bottom},popupAlign:{horizontal:i.AlignPoint.left,vertical:i.AlignPoint.top},offset:{left:-1e3,top:0},animate:!0,show:!1,margin:{horizontal:0,vertical:0},positionMode:"absolute"},g={type:"slide",direction:"down"};m.displayName="Popup",m.propTypes={anchor:function(e){const n=e.anchor;return n&&"number"!=typeof n.nodeType?new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed."):null},appendTo:function(e){const n=e.appendTo;return n&&"number"!=typeof n.nodeType?new Error("Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed."):null},className:o.oneOfType([o.string,o.arrayOf(o.string.isRequired)]),id:o.string,popupClass:o.oneOfType([o.string,o.arrayOf(o.string),o.object]),collision:o.shape({horizontal:o.oneOf([i.Collision.fit,i.Collision.flip,i.Collision.none]),vertical:o.oneOf([i.Collision.fit,i.Collision.flip,i.Collision.none])}),anchorAlign:o.shape({horizontal:o.oneOf([i.AlignPoint.left,i.AlignPoint.center,i.AlignPoint.right]),vertical:o.oneOf([i.AlignPoint.top,i.AlignPoint.center,i.AlignPoint.bottom])}),popupAlign:o.shape({horizontal:o.oneOf([i.AlignPoint.left,i.AlignPoint.center,i.AlignPoint.right]),vertical:o.oneOf([i.AlignPoint.top,i.AlignPoint.center,i.AlignPoint.bottom])}),offset:o.shape({left:o.number,top:o.number}),children:o.oneOfType([o.element,o.node]),show:o.bool,animate:o.oneOfType([o.bool,o.shape({type:o.oneOf(["slide","zoom","push","expand","fade"]),openDuration:o.number,closeDuration:o.number})]),margin:o.shape({horizontal:o.number,vertical:o.number}),positionMode:o.oneOf(["fixed","absolute"]),scale:o.number,style:o.object,onClose:o.func,onPosition:o.func,onOpen:o.func,onKeyDown:o.func,onMouseDownOutside:o.func},e.Popup=m,e.PopupPropsContext=d});
|