@progress/kendo-react-popup 8.3.0-develop.11 → 8.3.0-develop.12

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.
@@ -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 client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const D=require("react"),_=require("react-dom"),e=require("prop-types"),T=require("./animation.js"),l=require("@progress/kendo-react-common"),i=require("@progress/kendo-popup-common"),b=require("./util.js"),E=require("./package-metadata.js");function A(h){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const t in h)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(h,t);Object.defineProperty(o,t,n.get?n:{enumerable:!0,get:()=>h[t]})}}return o.default=h,Object.freeze(o)}const O=A(D),N=A(_),M=100,x=1;function w(h,o){if(h===o)return!0;if(!!h!=!!o)return!1;const t=Object.getOwnPropertyNames(h),n=Object.getOwnPropertyNames(o);if(t.length!==n.length)return!1;for(let r=0;r<t.length;r++){let s=t[r];if(h[s]!==o[s])return!1}return!0}const R={left:-1e3,top:0},y=class y extends O.Component{constructor(o){super(o),this.context=0,this.state={current:"hidden",previous:"hidden",props:{}},this._popup=null,this.show=t=>{window==null||window.addEventListener("mousedown",this.handleMouseDown),this.setPosition(t),this.animate(t.firstChild,"enter",this.onOpened),this.setState({current:"shown",previous:this.state.current})},this.setPosition=t=>{let{anchorAlign:n,popupAlign:r,collision:s,offset:c,anchor:a,margin:u,scale:d,positionMode:f}=this.props;const{width:g,height:m}=t.style;t.style.width=t.offsetWidth+"px",t.style.height=t.offsetHeight+"px";const P=i.alignElement({anchor:a,anchorAlign:n,element:t,elementAlign:r,offset:c,margin:u,positionMode:f,scale:d}),p=i.positionElement({anchor:a,anchorAlign:n,element:t,elementAlign:r,collisions:s,currentLocation:P,margin:this.props.margin});if(t.style.top=p.offset.top+"px",t.style.left=p.offset.left+"px",t.style.width=g,t.style.height=m,this._collisions={fit:p.fit,fitted:p.fitted,flip:p.flip,flipped:p.flipped},this.props.onPosition){const C={target:this,flipped:p.flipped,fitted:p.fitted};this.props.onPosition.call(void 0,C)}},this.onOpened=()=>{const t=this._popup;if(t){if(this.props.show){const{unstyled:n}=this.props,r=n&&n.uPopup;t.classList.add(...l.classNames(l.uPopup.animationContainerShown({c:r})).split(" ").filter(s=>s))}this.attachRepositionHandlers(t),this.props.onOpen&&this.props.onOpen.call(void 0,{target:this})}},this.animate=(t,n,r)=>{if(!this.props.popupAlign)return;let s;const{horizontal:c,vertical:a}=this.props.popupAlign;c==="left"&&a==="center"?s="right":c==="right"&&a==="center"?s="left":a==="top"?s="down":s="up";const u={down:"up",up:"down",left:"right",right:"left"};this._collisions&&this._collisions.flipped&&(s=u[s]);const{unstyled:d}=this.props,f=d&&d.uPopup;T.slide(t,s,this.animationDuration[n],n,r,f)},this.handleMouseDown=t=>{var s,c;const n=((s=t==null?void 0:t.target)==null?void 0:s.closest(".k-animation-container"))===null,r=((c=this.props.anchor)==null?void 0:c.contains(t==null?void 0:t.target))||!1;if(n){if(this.props.onMouseDownOutside){const a={target:this,event:t,state:this.state,isAnchorClicked:r};this.props.onMouseDownOutside.call(void 0,a)}window==null||window.removeEventListener("mousedown",this.handleMouseDown)}},this.onClosing=t=>{if(!this.props.show){const{unstyled:n}=this.props,r=n&&n.uPopup;t.classList.remove(...l.classNames(l.uPopup.animationContainerShown({c:r})).split(" ").filter(s=>s))}this.detachRepositionHandlers()},this.onClosed=()=>{this.state.current==="hiding"&&this.state.previous==="shown"&&this.setState({current:"hidden",previous:this.state.current}),this.props.onClose&&this.props.onClose.call(void 0,{target:this})},this.getCurrentZIndex=()=>this.context?this.context+x:M,l.validatePackage(E.packageMetadata),this.reposition=b.throttle(this.reposition.bind(this),b.FRAME_DURATION)}get element(){return this._popup}static getDerivedStateFromProps(o,t){const{show:n,anchor:r,anchorAlign:s,appendTo:c,collision:a,popupAlign:u,className:d,popupClass:f,style:g,offset:m,contentKey:P}=o,p={...t,props:{show:n,anchor:r,anchorAlign:s,appendTo:c,collision:a,popupAlign:u,className:d,popupClass:f,style:g,offset:m,contentKey:P}};return o.show?t.current==="hidden"||t.current==="hiding"?{...p,current:"showing",previous:t.current}:t.current==="showing"?{...p,current:"shown",previous:t.current}:t.current==="shown"&&(!w(m,t.props.offset)||!w(s,t.props.anchorAlign)||!w(c,t.props.appendTo)||!w(a,t.props.collision)||!w(u,t.props.popupAlign)||!w(g,t.props.style)||r!==t.props.anchor||f!==t.props.popupClass||d!==t.props.className)?{...p,current:"reposition",previous:t.current}:p:t.current==="hiding"||t.current==="hidden"?{...p,current:"hidden",previous:t.current}:{...p,current:"hiding",previous:t.current}}componentDidUpdate(o){this.state.current==="showing"&&this._popup?this.show(this._popup):this.state.current==="hiding"&&this._popup?(this.onClosing(this._popup),this.animate(this._popup.firstChild,"exit",this.onClosed)):this.state.current==="reposition"&&this.state.previous==="shown"?setTimeout(()=>{this.setState({current:"shown",previous:this.state.current})},0):this.state.current==="shown"&&o.contentKey!==this.props.contentKey&&this._popup&&this.setPosition(this._popup)}componentDidMount(){this.state.current==="showing"&&this._popup&&this.show(this._popup)}componentWillUnmount(){this.detachRepositionHandlers()}render(){const{children:o,className:t,popupClass:n,unstyled:r,show:s,id:c,positionMode:a}=this.props,u=r&&r.uPopup,d=this.props.appendTo?this.props.appendTo:l.canUseDOM?this.props.anchor&&this.props.anchor.ownerDocument?this.props.anchor.ownerDocument.body:document.body:void 0;this.state.current==="reposition"&&this.state.previous==="shown"&&this._popup&&this.setPosition(this._popup);const f=Object.assign({},{position:a,top:0,left:-1e4},this.props.style||{}),g=this.state.current==="hiding";if((s||g)&&d){const m=this.getCurrentZIndex(),P=O.createElement(l.ZIndexContext.Provider,{value:m},O.createElement("div",{onKeyDown:this.props.onKeyDown,className:l.classNames(l.uPopup.animationContainer({c:u}),t),id:c,ref:p=>this._popup=p,style:{zIndex:m,...f}},O.createElement("div",{className:l.classNames(l.uPopup.animationChild({c:u})),style:{transitionDelay:"0ms"}},O.createElement("div",{role:this.props.role,className:l.classNames(l.uPopup.popup({c:u}),n)},o))));return this.props.appendTo!==null?N.createPortal(P,d):P}return null}get animationDuration(){const o=this.props.animate;let t=0,n=0;return o&&(o===!0?t=n=300:(t=o.openDuration||0,n=o.closeDuration||0)),{enter:t,exit:n}}attachRepositionHandlers(o){this.detachRepositionHandlers(),this._scrollableParents=i.domUtils.scrollableParents(this.props.anchor||o),this._scrollableParents&&this._scrollableParents.map(t=>t.addEventListener("scroll",this.reposition)),window.addEventListener("resize",this.reposition)}detachRepositionHandlers(){this._scrollableParents&&(this._scrollableParents.map(o=>o.removeEventListener("scroll",this.reposition)),this._scrollableParents=void 0),window.removeEventListener("resize",this.reposition)}reposition(){this.setState({current:"reposition",previous:this.state.current})}};y.propTypes={anchor:function(o){const t=o.anchor;return t&&typeof t.nodeType!="number"?new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed."):null},appendTo:function(o){const t=o.appendTo;return t&&typeof t.nodeType!="number"?new Error("Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed."):null},className:e.oneOfType([e.string,e.arrayOf(e.string),e.object]),id:e.string,popupClass:e.oneOfType([e.string,e.arrayOf(e.string),e.object]),collision:e.shape({horizontal:e.oneOf([i.Collision.fit,i.Collision.flip,i.Collision.none]),vertical:e.oneOf([i.Collision.fit,i.Collision.flip,i.Collision.none])}),anchorAlign:e.shape({horizontal:e.oneOf([i.AlignPoint.left,i.AlignPoint.center,i.AlignPoint.right]),vertical:e.oneOf([i.AlignPoint.top,i.AlignPoint.center,i.AlignPoint.bottom])}),popupAlign:e.shape({horizontal:e.oneOf([i.AlignPoint.left,i.AlignPoint.center,i.AlignPoint.right]),vertical:e.oneOf([i.AlignPoint.top,i.AlignPoint.center,i.AlignPoint.bottom])}),offset:e.shape({left:e.number,top:e.number}),children:e.oneOfType([e.element,e.node]),show:e.bool,animate:e.oneOfType([e.bool,e.shape({openDuration:e.number,closeDuration:e.number})]),margin:e.shape({horizontal:e.number,vertical:e.number}),positionMode:e.oneOf(["fixed","absolute"]),scale:e.number,style:e.object,onClose:e.func,onPosition:e.func,onOpen:e.func,onKeyPress:e.func,onMouseDownOutside:e.func},y.defaultProps={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:R,animate:!0,show:!1,margin:{horizontal:0,vertical:0},positionMode:"absolute"},y.contextType=l.ZIndexContext,y.displayName="PopupComponent";let v=y;exports.PopupWithoutContext=v;
8
+ "use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const D=require("react"),_=require("react-dom"),e=require("prop-types"),T=require("./animation.js"),l=require("@progress/kendo-react-common"),i=require("@progress/kendo-popup-common"),b=require("./util.js"),E=require("./package-metadata.js");function A(h){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const t in h)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(h,t);Object.defineProperty(o,t,n.get?n:{enumerable:!0,get:()=>h[t]})}}return o.default=h,Object.freeze(o)}const O=A(D),N=A(_),M=100,x=1;function w(h,o){if(h===o)return!0;if(!!h!=!!o)return!1;const t=Object.getOwnPropertyNames(h),n=Object.getOwnPropertyNames(o);if(t.length!==n.length)return!1;for(let r=0;r<t.length;r++){const s=t[r];if(h[s]!==o[s])return!1}return!0}const R={left:-1e3,top:0},y=class y extends O.Component{constructor(o){super(o),this.context=0,this.state={current:"hidden",previous:"hidden",props:{}},this._popup=null,this.show=t=>{window==null||window.addEventListener("mousedown",this.handleMouseDown),this.setPosition(t),this.animate(t.firstChild,"enter",this.onOpened),this.setState({current:"shown",previous:this.state.current})},this.setPosition=t=>{const{anchorAlign:n,popupAlign:r,collision:s,offset:c,anchor:a,margin:u,scale:d,positionMode:f}=this.props,{width:g,height:m}=t.style;t.style.width=t.offsetWidth+"px",t.style.height=t.offsetHeight+"px";const P=i.alignElement({anchor:a,anchorAlign:n,element:t,elementAlign:r,offset:c,margin:u,positionMode:f,scale:d}),p=i.positionElement({anchor:a,anchorAlign:n,element:t,elementAlign:r,collisions:s,currentLocation:P,margin:this.props.margin});if(t.style.top=p.offset.top+"px",t.style.left=p.offset.left+"px",t.style.width=g,t.style.height=m,this._collisions={fit:p.fit,fitted:p.fitted,flip:p.flip,flipped:p.flipped},this.props.onPosition){const C={target:this,flipped:p.flipped,fitted:p.fitted};this.props.onPosition.call(void 0,C)}},this.onOpened=()=>{const t=this._popup;if(t){if(this.props.show){const{unstyled:n}=this.props,r=n&&n.uPopup;t.classList.add(...l.classNames(l.uPopup.animationContainerShown({c:r})).split(" ").filter(s=>s))}this.attachRepositionHandlers(t),this.props.onOpen&&this.props.onOpen.call(void 0,{target:this})}},this.animate=(t,n,r)=>{if(!this.props.popupAlign)return;let s;const{horizontal:c,vertical:a}=this.props.popupAlign;c==="left"&&a==="center"?s="right":c==="right"&&a==="center"?s="left":a==="top"?s="down":s="up";const u={down:"up",up:"down",left:"right",right:"left"};this._collisions&&this._collisions.flipped&&(s=u[s]);const{unstyled:d}=this.props,f=d&&d.uPopup;T.slide(t,s,this.animationDuration[n],n,r,f)},this.handleMouseDown=t=>{var s,c;const n=((s=t==null?void 0:t.target)==null?void 0:s.closest(".k-animation-container"))===null,r=((c=this.props.anchor)==null?void 0:c.contains(t==null?void 0:t.target))||!1;if(n){if(this.props.onMouseDownOutside){const a={target:this,event:t,state:this.state,isAnchorClicked:r};this.props.onMouseDownOutside.call(void 0,a)}window==null||window.removeEventListener("mousedown",this.handleMouseDown)}},this.onClosing=t=>{if(!this.props.show){const{unstyled:n}=this.props,r=n&&n.uPopup;t.classList.remove(...l.classNames(l.uPopup.animationContainerShown({c:r})).split(" ").filter(s=>s))}this.detachRepositionHandlers()},this.onClosed=()=>{this.state.current==="hiding"&&this.state.previous==="shown"&&this.setState({current:"hidden",previous:this.state.current}),this.props.onClose&&this.props.onClose.call(void 0,{target:this})},this.getCurrentZIndex=()=>this.context?this.context+x:M,l.validatePackage(E.packageMetadata),this.reposition=b.throttle(this.reposition.bind(this),b.FRAME_DURATION)}get element(){return this._popup}static getDerivedStateFromProps(o,t){const{show:n,anchor:r,anchorAlign:s,appendTo:c,collision:a,popupAlign:u,className:d,popupClass:f,style:g,offset:m,contentKey:P}=o,p={...t,props:{show:n,anchor:r,anchorAlign:s,appendTo:c,collision:a,popupAlign:u,className:d,popupClass:f,style:g,offset:m,contentKey:P}};return o.show?t.current==="hidden"||t.current==="hiding"?{...p,current:"showing",previous:t.current}:t.current==="showing"?{...p,current:"shown",previous:t.current}:t.current==="shown"&&(!w(m,t.props.offset)||!w(s,t.props.anchorAlign)||!w(c,t.props.appendTo)||!w(a,t.props.collision)||!w(u,t.props.popupAlign)||!w(g,t.props.style)||r!==t.props.anchor||f!==t.props.popupClass||d!==t.props.className)?{...p,current:"reposition",previous:t.current}:p:t.current==="hiding"||t.current==="hidden"?{...p,current:"hidden",previous:t.current}:{...p,current:"hiding",previous:t.current}}componentDidUpdate(o){this.state.current==="showing"&&this._popup?this.show(this._popup):this.state.current==="hiding"&&this._popup?(this.onClosing(this._popup),this.animate(this._popup.firstChild,"exit",this.onClosed)):this.state.current==="reposition"&&this.state.previous==="shown"?setTimeout(()=>{this.setState({current:"shown",previous:this.state.current})},0):this.state.current==="shown"&&o.contentKey!==this.props.contentKey&&this._popup&&this.setPosition(this._popup)}componentDidMount(){this.state.current==="showing"&&this._popup&&this.show(this._popup)}componentWillUnmount(){this.detachRepositionHandlers()}render(){const{children:o,className:t,popupClass:n,unstyled:r,show:s,id:c,positionMode:a}=this.props,u=r&&r.uPopup,d=this.props.appendTo?this.props.appendTo:l.canUseDOM?this.props.anchor&&this.props.anchor.ownerDocument?this.props.anchor.ownerDocument.body:document.body:void 0;this.state.current==="reposition"&&this.state.previous==="shown"&&this._popup&&this.setPosition(this._popup);const f=Object.assign({},{position:a,top:0,left:-1e4},this.props.style||{}),g=this.state.current==="hiding";if((s||g)&&d){const m=this.getCurrentZIndex(),P=O.createElement(l.ZIndexContext.Provider,{value:m},O.createElement("div",{onKeyDown:this.props.onKeyDown,className:l.classNames(l.uPopup.animationContainer({c:u}),t),id:c,ref:p=>this._popup=p,style:{zIndex:m,...f}},O.createElement("div",{className:l.classNames(l.uPopup.animationChild({c:u})),style:{transitionDelay:"0ms"}},O.createElement("div",{role:this.props.role,className:l.classNames(l.uPopup.popup({c:u}),n)},o))));return this.props.appendTo!==null?N.createPortal(P,d):P}return null}get animationDuration(){const o=this.props.animate;let t=0,n=0;return o&&(o===!0?t=n=300:(t=o.openDuration||0,n=o.closeDuration||0)),{enter:t,exit:n}}attachRepositionHandlers(o){this.detachRepositionHandlers(),this._scrollableParents=i.domUtils.scrollableParents(this.props.anchor||o),this._scrollableParents&&this._scrollableParents.map(t=>t.addEventListener("scroll",this.reposition)),window.addEventListener("resize",this.reposition)}detachRepositionHandlers(){this._scrollableParents&&(this._scrollableParents.map(o=>o.removeEventListener("scroll",this.reposition)),this._scrollableParents=void 0),window.removeEventListener("resize",this.reposition)}reposition(){this.setState({current:"reposition",previous:this.state.current})}};y.propTypes={anchor:function(o){const t=o.anchor;return t&&typeof t.nodeType!="number"?new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed."):null},appendTo:function(o){const t=o.appendTo;return t&&typeof t.nodeType!="number"?new Error("Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed."):null},className:e.oneOfType([e.string,e.arrayOf(e.string),e.object]),id:e.string,popupClass:e.oneOfType([e.string,e.arrayOf(e.string),e.object]),collision:e.shape({horizontal:e.oneOf([i.Collision.fit,i.Collision.flip,i.Collision.none]),vertical:e.oneOf([i.Collision.fit,i.Collision.flip,i.Collision.none])}),anchorAlign:e.shape({horizontal:e.oneOf([i.AlignPoint.left,i.AlignPoint.center,i.AlignPoint.right]),vertical:e.oneOf([i.AlignPoint.top,i.AlignPoint.center,i.AlignPoint.bottom])}),popupAlign:e.shape({horizontal:e.oneOf([i.AlignPoint.left,i.AlignPoint.center,i.AlignPoint.right]),vertical:e.oneOf([i.AlignPoint.top,i.AlignPoint.center,i.AlignPoint.bottom])}),offset:e.shape({left:e.number,top:e.number}),children:e.oneOfType([e.element,e.node]),show:e.bool,animate:e.oneOfType([e.bool,e.shape({openDuration:e.number,closeDuration:e.number})]),margin:e.shape({horizontal:e.number,vertical:e.number}),positionMode:e.oneOf(["fixed","absolute"]),scale:e.number,style:e.object,onClose:e.func,onPosition:e.func,onOpen:e.func,onKeyPress:e.func,onMouseDownOutside:e.func},y.defaultProps={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:R,animate:!0,show:!1,margin:{horizontal:0,vertical:0},positionMode:"absolute"},y.contextType=l.ZIndexContext,y.displayName="PopupComponent";let v=y;exports.PopupWithoutContext=v;
@@ -24,7 +24,7 @@ function w(b, o) {
24
24
  if (t.length !== s.length)
25
25
  return !1;
26
26
  for (let n = 0; n < t.length; n++) {
27
- let i = t[n];
27
+ const i = t[n];
28
28
  if (b[i] !== o[i])
29
29
  return !1;
30
30
  }
@@ -38,8 +38,7 @@ const K = {
38
38
  super(o), this.context = 0, this.state = { current: "hidden", previous: "hidden", props: {} }, this._popup = null, this.show = (t) => {
39
39
  window == null || window.addEventListener("mousedown", this.handleMouseDown), this.setPosition(t), this.animate(t.firstChild, "enter", this.onOpened), this.setState({ current: "shown", previous: this.state.current });
40
40
  }, this.setPosition = (t) => {
41
- let { anchorAlign: s, popupAlign: n, collision: i, offset: a, anchor: l, margin: h, scale: c, positionMode: u } = this.props;
42
- const { width: m, height: f } = t.style;
41
+ const { anchorAlign: s, popupAlign: n, collision: i, offset: a, anchor: l, margin: h, scale: c, positionMode: u } = this.props, { width: m, height: f } = t.style;
43
42
  t.style.width = t.offsetWidth + "px", t.style.height = t.offsetHeight + "px";
44
43
  const g = M({
45
44
  anchor: l,
@@ -77,7 +76,9 @@ const K = {
77
76
  if (t) {
78
77
  if (this.props.show) {
79
78
  const { unstyled: s } = this.props, n = s && s.uPopup;
80
- t.classList.add(...P(O.animationContainerShown({ c: n })).split(" ").filter((i) => i));
79
+ t.classList.add(
80
+ ...P(O.animationContainerShown({ c: n })).split(" ").filter((i) => i)
81
+ );
81
82
  }
82
83
  this.attachRepositionHandlers(t), this.props.onOpen && this.props.onOpen.call(void 0, { target: this });
83
84
  }
@@ -95,14 +96,7 @@ const K = {
95
96
  };
96
97
  this._collisions && this._collisions.flipped && (i = h[i]);
97
98
  const { unstyled: c } = this.props, u = c && c.uPopup;
98
- C(
99
- t,
100
- i,
101
- this.animationDuration[s],
102
- s,
103
- n,
104
- u
105
- );
99
+ C(t, i, this.animationDuration[s], s, n, u);
106
100
  }, this.handleMouseDown = (t) => {
107
101
  var i, a;
108
102
  const s = ((i = t == null ? void 0 : t.target) == null ? void 0 : i.closest(".k-animation-container")) === null, n = ((a = this.props.anchor) == null ? void 0 : a.contains(t == null ? void 0 : t.target)) || !1;
@@ -121,7 +115,9 @@ const K = {
121
115
  }, this.onClosing = (t) => {
122
116
  if (!this.props.show) {
123
117
  const { unstyled: s } = this.props, n = s && s.uPopup;
124
- t.classList.remove(...P(O.animationContainerShown({ c: n })).split(" ").filter((i) => i));
118
+ t.classList.remove(
119
+ ...P(O.animationContainerShown({ c: n })).split(" ").filter((i) => i)
120
+ );
125
121
  }
126
122
  this.detachRepositionHandlers();
127
123
  }, this.onClosed = () => {
@@ -138,7 +134,19 @@ const K = {
138
134
  * @hidden
139
135
  */
140
136
  static getDerivedStateFromProps(o, t) {
141
- const { show: s, anchor: n, anchorAlign: i, appendTo: a, collision: l, popupAlign: h, className: c, popupClass: u, style: m, offset: f, contentKey: g } = o, r = {
137
+ const {
138
+ show: s,
139
+ anchor: n,
140
+ anchorAlign: i,
141
+ appendTo: a,
142
+ collision: l,
143
+ popupAlign: h,
144
+ className: c,
145
+ popupClass: u,
146
+ style: m,
147
+ offset: f,
148
+ contentKey: g
149
+ } = o, r = {
142
150
  ...t,
143
151
  props: {
144
152
  show: s,
@@ -181,15 +189,7 @@ const K = {
181
189
  * @hidden
182
190
  */
183
191
  render() {
184
- const {
185
- children: o,
186
- className: t,
187
- popupClass: s,
188
- unstyled: n,
189
- show: i,
190
- id: a,
191
- positionMode: l
192
- } = this.props, h = n && n.uPopup, c = this.props.appendTo ? this.props.appendTo : x ? this.props.anchor && this.props.anchor.ownerDocument ? this.props.anchor.ownerDocument.body : document.body : void 0;
192
+ const { children: o, className: t, popupClass: s, unstyled: n, show: i, id: a, positionMode: l } = this.props, h = n && n.uPopup, c = this.props.appendTo ? this.props.appendTo : x ? this.props.anchor && this.props.anchor.ownerDocument ? this.props.anchor.ownerDocument.body : document.body : void 0;
193
193
  this.state.current === "reposition" && this.state.previous === "shown" && this._popup && this.setPosition(this._popup);
194
194
  const u = Object.assign(
195
195
  {},
@@ -209,14 +209,21 @@ const K = {
209
209
  ...u
210
210
  }
211
211
  },
212
- /* @__PURE__ */ v.createElement("div", { className: P(O.animationChild({ c: h })), style: { transitionDelay: "0ms" } }, /* @__PURE__ */ v.createElement(
212
+ /* @__PURE__ */ v.createElement(
213
213
  "div",
214
214
  {
215
- role: this.props.role,
216
- className: P(O.popup({ c: h }), s)
215
+ className: P(O.animationChild({ c: h })),
216
+ style: { transitionDelay: "0ms" }
217
217
  },
218
- o
219
- ))
218
+ /* @__PURE__ */ v.createElement(
219
+ "div",
220
+ {
221
+ role: this.props.role,
222
+ className: P(O.popup({ c: h }), s)
223
+ },
224
+ o
225
+ )
226
+ )
220
227
  ));
221
228
  return this.props.appendTo !== null ? A.createPortal(g, c) : g;
222
229
  }
@@ -240,71 +247,32 @@ const K = {
240
247
  y.propTypes = {
241
248
  anchor: function(o) {
242
249
  const t = o.anchor;
243
- return t && typeof t.nodeType != "number" ? new Error(
244
- "Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed."
245
- ) : null;
250
+ return t && typeof t.nodeType != "number" ? new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed.") : null;
246
251
  },
247
252
  appendTo: function(o) {
248
253
  const t = o.appendTo;
249
- return t && typeof t.nodeType != "number" ? new Error(
250
- "Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed."
251
- ) : null;
254
+ return t && typeof t.nodeType != "number" ? new Error("Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed.") : null;
252
255
  },
253
- className: e.oneOfType([
254
- e.string,
255
- e.arrayOf(e.string),
256
- e.object
257
- ]),
256
+ className: e.oneOfType([e.string, e.arrayOf(e.string), e.object]),
258
257
  id: e.string,
259
- popupClass: e.oneOfType([
260
- e.string,
261
- e.arrayOf(e.string),
262
- e.object
263
- ]),
258
+ popupClass: e.oneOfType([e.string, e.arrayOf(e.string), e.object]),
264
259
  collision: e.shape({
265
- horizontal: e.oneOf([
266
- d.fit,
267
- d.flip,
268
- d.none
269
- ]),
270
- vertical: e.oneOf([
271
- d.fit,
272
- d.flip,
273
- d.none
274
- ])
260
+ horizontal: e.oneOf([d.fit, d.flip, d.none]),
261
+ vertical: e.oneOf([d.fit, d.flip, d.none])
275
262
  }),
276
263
  anchorAlign: e.shape({
277
- horizontal: e.oneOf([
278
- p.left,
279
- p.center,
280
- p.right
281
- ]),
282
- vertical: e.oneOf([
283
- p.top,
284
- p.center,
285
- p.bottom
286
- ])
264
+ horizontal: e.oneOf([p.left, p.center, p.right]),
265
+ vertical: e.oneOf([p.top, p.center, p.bottom])
287
266
  }),
288
267
  popupAlign: e.shape({
289
- horizontal: e.oneOf([
290
- p.left,
291
- p.center,
292
- p.right
293
- ]),
294
- vertical: e.oneOf([
295
- p.top,
296
- p.center,
297
- p.bottom
298
- ])
268
+ horizontal: e.oneOf([p.left, p.center, p.right]),
269
+ vertical: e.oneOf([p.top, p.center, p.bottom])
299
270
  }),
300
271
  offset: e.shape({
301
272
  left: e.number,
302
273
  top: e.number
303
274
  }),
304
- children: e.oneOfType([
305
- e.element,
306
- e.node
307
- ]),
275
+ children: e.oneOfType([e.element, e.node]),
308
276
  show: e.bool,
309
277
  animate: e.oneOfType([
310
278
  e.bool,
@@ -317,10 +285,7 @@ y.propTypes = {
317
285
  horizontal: e.number,
318
286
  vertical: e.number
319
287
  }),
320
- positionMode: e.oneOf([
321
- "fixed",
322
- "absolute"
323
- ]),
288
+ positionMode: e.oneOf(["fixed", "absolute"]),
324
289
  scale: e.number,
325
290
  style: e.object,
326
291
  onClose: e.func,
@@ -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
- !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(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"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).KendoReactPopup={},t.React,t.ReactDOM,t.PropTypes,t.KendoReactCommon,t.KendoPopupCommon)}(this,(function(t,e,o,n,i,s){"use strict";function r(t){var e=Object.create(null);return t&&Object.keys(t).forEach((function(o){if("default"!==o){var n=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(e,o,n.get?n:{enumerable:!0,get:function(){return t[o]}})}})),e.default=t,Object.freeze(e)}var p=r(e),l=r(o);const a=(t,e,o)=>{t.style.transitionDuration="",e&&t.classList.remove(...e.split(" ")),e&&t.classList.remove(...o.split(" "))},c="undefined"!=typeof window&&/Firefox/.test(window.navigator.userAgent),u={name:"@progress/kendo-react-popup",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};function h(t,e){if(t===e)return!0;if(!!t!=!!e)return!1;const o=Object.getOwnPropertyNames(t),n=Object.getOwnPropertyNames(e);if(o.length!==n.length)return!1;for(let n=0;n<o.length;n++){let i=o[n];if(t[i]!==e[i])return!1}return!0}const d=class extends p.Component{constructor(t){super(t),this.context=0,this.state={current:"hidden",previous:"hidden",props:{}},this._popup=null,this.show=t=>{null==window||window.addEventListener("mousedown",this.handleMouseDown),this.setPosition(t),this.animate(t.firstChild,"enter",this.onOpened),this.setState({current:"shown",previous:this.state.current})},this.setPosition=t=>{let{anchorAlign:e,popupAlign:o,collision:n,offset:i,anchor:r,margin:p,scale:l,positionMode:a}=this.props;const{width:c,height:u}=t.style;t.style.width=t.offsetWidth+"px",t.style.height=t.offsetHeight+"px";const h=s.alignElement({anchor:r,anchorAlign:e,element:t,elementAlign:o,offset:i,margin:p,positionMode:a,scale:l}),d=s.positionElement({anchor:r,anchorAlign:e,element:t,elementAlign:o,collisions:n,currentLocation:h,margin:this.props.margin});if(t.style.top=d.offset.top+"px",t.style.left=d.offset.left+"px",t.style.width=c,t.style.height=u,this._collisions={fit:d.fit,fitted:d.fitted,flip:d.flip,flipped:d.flipped},this.props.onPosition){const t={target:this,flipped:d.flipped,fitted:d.fitted};this.props.onPosition.call(void 0,t)}},this.onOpened=()=>{const t=this._popup;if(t){if(this.props.show){const{unstyled:e}=this.props,o=e&&e.uPopup;t.classList.add(...i.classNames(i.uPopup.animationContainerShown({c:o})).split(" ").filter((t=>t)))}this.attachRepositionHandlers(t),this.props.onOpen&&this.props.onOpen.call(void 0,{target:this})}},this.animate=(t,e,o)=>{if(!this.props.popupAlign)return;let n;const{horizontal:s,vertical:r}=this.props.popupAlign;n="left"===s&&"center"===r?"right":"right"===s&&"center"===r?"left":"top"===r?"down":"up";this._collisions&&this._collisions.flipped&&(n={down:"up",up:"down",left:"right",right:"left"}[n]);const{unstyled:p}=this.props,l=p&&p.uPopup;((t,e,o,n,s,r)=>{if(0===o)return s();const p=i.classNames(i.uPopup.slide({direction:e,type:n,c:r})),l=i.classNames(i.uPopup.slideActive({direction:e,type:n,c:r})),u=e=>{e.target===t&&(t.removeEventListener("transitionend",u),a(t,p,l),t.style.display="exit"===n?"none":"",s())};t.addEventListener("transitionend",u);const h=t.ownerDocument;if(!h)return;const d=h.defaultView;if(!d)return;const f=()=>{a(t,p,l),p&&t.classList.add(...p.split(" ").filter((t=>t))),d.requestAnimationFrame((()=>{t.style.transitionDuration=o+"ms",t.classList.add(...l.split(" ").filter((t=>t)))}))};c?d.requestAnimationFrame(f):f()})(t,n,this.animationDuration[e],e,o,l)},this.handleMouseDown=t=>{var e,o;const n=null===(null==(e=null==t?void 0:t.target)?void 0:e.closest(".k-animation-container")),i=(null==(o=this.props.anchor)?void 0:o.contains(null==t?void 0:t.target))||!1;if(n){if(this.props.onMouseDownOutside){const e={target:this,event:t,state:this.state,isAnchorClicked:i};this.props.onMouseDownOutside.call(void 0,e)}null==window||window.removeEventListener("mousedown",this.handleMouseDown)}},this.onClosing=t=>{if(!this.props.show){const{unstyled:e}=this.props,o=e&&e.uPopup;t.classList.remove(...i.classNames(i.uPopup.animationContainerShown({c:o})).split(" ").filter((t=>t)))}this.detachRepositionHandlers()},this.onClosed=()=>{"hiding"===this.state.current&&"shown"===this.state.previous&&this.setState({current:"hidden",previous:this.state.current}),this.props.onClose&&this.props.onClose.call(void 0,{target:this})},this.getCurrentZIndex=()=>this.context?this.context+1:100,i.validatePackage(u),this.reposition=function(t,e,o={}){let n,i,s,r,p=0;o=o||{};const l=function(){p=!1===o.leading?0:(new Date).getTime(),n=void 0,r=t.apply(i,s),n||(i=s=null)};return function(){const a=(new Date).getTime();!p&&!1===o.leading&&(p=a);const c=e-(a-p);return i=void 0,s=arguments,c<=0||c>e?(n&&(clearTimeout(n),n=void 0),p=a,r=t.apply(i,s),n||(i=s=null)):!n&&!1!==o.trailing&&(n=window.setTimeout(l,c)),r}}(this.reposition.bind(this),16.666666666666668)}get element(){return this._popup}static getDerivedStateFromProps(t,e){const{show:o,anchor:n,anchorAlign:i,appendTo:s,collision:r,popupAlign:p,className:l,popupClass:a,style:c,offset:u,contentKey:d}=t,f={...e,props:{show:o,anchor:n,anchorAlign:i,appendTo:s,collision:r,popupAlign:p,className:l,popupClass:a,style:c,offset:u,contentKey:d}};return t.show?"hidden"===e.current||"hiding"===e.current?{...f,current:"showing",previous:e.current}:"showing"===e.current?{...f,current:"shown",previous:e.current}:"shown"!==e.current||h(u,e.props.offset)&&h(i,e.props.anchorAlign)&&h(s,e.props.appendTo)&&h(r,e.props.collision)&&h(p,e.props.popupAlign)&&h(c,e.props.style)&&n===e.props.anchor&&a===e.props.popupClass&&l===e.props.className?f:{...f,current:"reposition",previous:e.current}:"hiding"===e.current||"hidden"===e.current?{...f,current:"hidden",previous:e.current}:{...f,current:"hiding",previous:e.current}}componentDidUpdate(t){"showing"===this.state.current&&this._popup?this.show(this._popup):"hiding"===this.state.current&&this._popup?(this.onClosing(this._popup),this.animate(this._popup.firstChild,"exit",this.onClosed)):"reposition"===this.state.current&&"shown"===this.state.previous?setTimeout((()=>{this.setState({current:"shown",previous:this.state.current})}),0):"shown"===this.state.current&&t.contentKey!==this.props.contentKey&&this._popup&&this.setPosition(this._popup)}componentDidMount(){"showing"===this.state.current&&this._popup&&this.show(this._popup)}componentWillUnmount(){this.detachRepositionHandlers()}render(){const{children:t,className:e,popupClass:o,unstyled:n,show:s,id:r,positionMode:a}=this.props,c=n&&n.uPopup,u=this.props.appendTo?this.props.appendTo:i.canUseDOM?this.props.anchor&&this.props.anchor.ownerDocument?this.props.anchor.ownerDocument.body:document.body:void 0;"reposition"===this.state.current&&"shown"===this.state.previous&&this._popup&&this.setPosition(this._popup);const h=Object.assign({},{position:a,top:0,left:-1e4},this.props.style||{}),d="hiding"===this.state.current;if((s||d)&&u){const n=this.getCurrentZIndex(),s=p.createElement(i.ZIndexContext.Provider,{value:n},p.createElement("div",{onKeyDown:this.props.onKeyDown,className:i.classNames(i.uPopup.animationContainer({c:c}),e),id:r,ref:t=>this._popup=t,style:{zIndex:n,...h}},p.createElement("div",{className:i.classNames(i.uPopup.animationChild({c:c})),style:{transitionDelay:"0ms"}},p.createElement("div",{role:this.props.role,className:i.classNames(i.uPopup.popup({c:c}),o)},t))));return null!==this.props.appendTo?l.createPortal(s,u):s}return null}get animationDuration(){const t=this.props.animate;let e=0,o=0;return t&&(!0===t?e=o=300:(e=t.openDuration||0,o=t.closeDuration||0)),{enter:e,exit:o}}attachRepositionHandlers(t){this.detachRepositionHandlers(),this._scrollableParents=s.domUtils.scrollableParents(this.props.anchor||t),this._scrollableParents&&this._scrollableParents.map((t=>t.addEventListener("scroll",this.reposition))),window.addEventListener("resize",this.reposition)}detachRepositionHandlers(){this._scrollableParents&&(this._scrollableParents.map((t=>t.removeEventListener("scroll",this.reposition))),this._scrollableParents=void 0),window.removeEventListener("resize",this.reposition)}reposition(){this.setState({current:"reposition",previous:this.state.current})}};d.propTypes={anchor:function(t){const e=t.anchor;return e&&"number"!=typeof e.nodeType?new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed."):null},appendTo:function(t){const e=t.appendTo;return e&&"number"!=typeof e.nodeType?new Error("Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed."):null},className:n.oneOfType([n.string,n.arrayOf(n.string),n.object]),id:n.string,popupClass:n.oneOfType([n.string,n.arrayOf(n.string),n.object]),collision:n.shape({horizontal:n.oneOf([s.Collision.fit,s.Collision.flip,s.Collision.none]),vertical:n.oneOf([s.Collision.fit,s.Collision.flip,s.Collision.none])}),anchorAlign:n.shape({horizontal:n.oneOf([s.AlignPoint.left,s.AlignPoint.center,s.AlignPoint.right]),vertical:n.oneOf([s.AlignPoint.top,s.AlignPoint.center,s.AlignPoint.bottom])}),popupAlign:n.shape({horizontal:n.oneOf([s.AlignPoint.left,s.AlignPoint.center,s.AlignPoint.right]),vertical:n.oneOf([s.AlignPoint.top,s.AlignPoint.center,s.AlignPoint.bottom])}),offset:n.shape({left:n.number,top:n.number}),children:n.oneOfType([n.element,n.node]),show:n.bool,animate:n.oneOfType([n.bool,n.shape({openDuration:n.number,closeDuration:n.number})]),margin:n.shape({horizontal:n.number,vertical:n.number}),positionMode:n.oneOf(["fixed","absolute"]),scale:n.number,style:n.object,onClose:n.func,onPosition:n.func,onOpen:n.func,onKeyPress:n.func,onMouseDownOutside:n.func},d.defaultProps={collision:{horizontal:s.Collision.fit,vertical:s.Collision.flip},anchorAlign:{horizontal:s.AlignPoint.left,vertical:s.AlignPoint.bottom},popupAlign:{horizontal:s.AlignPoint.left,vertical:s.AlignPoint.top},offset:{left:-1e3,top:0},animate:!0,show:!1,margin:{horizontal:0,vertical:0},positionMode:"absolute"},d.contextType=i.ZIndexContext,d.displayName="PopupComponent";let f=d;const m=p.createContext((t=>t)),g=p.forwardRef(((t,e)=>{const o=p.useContext(m),n=i.useUnstyled(),s=o.call(void 0,t);return p.createElement(f,{ref:e,unstyled:n,...s})}));g.displayName="Popup",t.Popup=g,t.PopupPropsContext=m,t.PopupWithoutContext=f}));
8
+ !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(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"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).KendoReactPopup={},t.React,t.ReactDOM,t.PropTypes,t.KendoReactCommon,t.KendoPopupCommon)}(this,(function(t,e,o,n,i,s){"use strict";function r(t){var e=Object.create(null);return t&&Object.keys(t).forEach((function(o){if("default"!==o){var n=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(e,o,n.get?n:{enumerable:!0,get:function(){return t[o]}})}})),e.default=t,Object.freeze(e)}var p=r(e),l=r(o);const a=(t,e,o)=>{t.style.transitionDuration="",e&&t.classList.remove(...e.split(" ")),e&&t.classList.remove(...o.split(" "))},c="undefined"!=typeof window&&/Firefox/.test(window.navigator.userAgent),u={name:"@progress/kendo-react-popup",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};function h(t,e){if(t===e)return!0;if(!!t!=!!e)return!1;const o=Object.getOwnPropertyNames(t),n=Object.getOwnPropertyNames(e);if(o.length!==n.length)return!1;for(let n=0;n<o.length;n++){const i=o[n];if(t[i]!==e[i])return!1}return!0}const d=class extends p.Component{constructor(t){super(t),this.context=0,this.state={current:"hidden",previous:"hidden",props:{}},this._popup=null,this.show=t=>{null==window||window.addEventListener("mousedown",this.handleMouseDown),this.setPosition(t),this.animate(t.firstChild,"enter",this.onOpened),this.setState({current:"shown",previous:this.state.current})},this.setPosition=t=>{const{anchorAlign:e,popupAlign:o,collision:n,offset:i,anchor:r,margin:p,scale:l,positionMode:a}=this.props,{width:c,height:u}=t.style;t.style.width=t.offsetWidth+"px",t.style.height=t.offsetHeight+"px";const h=s.alignElement({anchor:r,anchorAlign:e,element:t,elementAlign:o,offset:i,margin:p,positionMode:a,scale:l}),d=s.positionElement({anchor:r,anchorAlign:e,element:t,elementAlign:o,collisions:n,currentLocation:h,margin:this.props.margin});if(t.style.top=d.offset.top+"px",t.style.left=d.offset.left+"px",t.style.width=c,t.style.height=u,this._collisions={fit:d.fit,fitted:d.fitted,flip:d.flip,flipped:d.flipped},this.props.onPosition){const t={target:this,flipped:d.flipped,fitted:d.fitted};this.props.onPosition.call(void 0,t)}},this.onOpened=()=>{const t=this._popup;if(t){if(this.props.show){const{unstyled:e}=this.props,o=e&&e.uPopup;t.classList.add(...i.classNames(i.uPopup.animationContainerShown({c:o})).split(" ").filter((t=>t)))}this.attachRepositionHandlers(t),this.props.onOpen&&this.props.onOpen.call(void 0,{target:this})}},this.animate=(t,e,o)=>{if(!this.props.popupAlign)return;let n;const{horizontal:s,vertical:r}=this.props.popupAlign;n="left"===s&&"center"===r?"right":"right"===s&&"center"===r?"left":"top"===r?"down":"up";this._collisions&&this._collisions.flipped&&(n={down:"up",up:"down",left:"right",right:"left"}[n]);const{unstyled:p}=this.props,l=p&&p.uPopup;((t,e,o,n,s,r)=>{if(0===o)return s();const p=i.classNames(i.uPopup.slide({direction:e,type:n,c:r})),l=i.classNames(i.uPopup.slideActive({direction:e,type:n,c:r})),u=e=>{e.target===t&&(t.removeEventListener("transitionend",u),a(t,p,l),t.style.display="exit"===n?"none":"",s())};t.addEventListener("transitionend",u);const h=t.ownerDocument;if(!h)return;const d=h.defaultView;if(!d)return;const f=()=>{a(t,p,l),p&&t.classList.add(...p.split(" ").filter((t=>t))),d.requestAnimationFrame((()=>{t.style.transitionDuration=o+"ms",t.classList.add(...l.split(" ").filter((t=>t)))}))};c?d.requestAnimationFrame(f):f()})(t,n,this.animationDuration[e],e,o,l)},this.handleMouseDown=t=>{var e,o;const n=null===(null==(e=null==t?void 0:t.target)?void 0:e.closest(".k-animation-container")),i=(null==(o=this.props.anchor)?void 0:o.contains(null==t?void 0:t.target))||!1;if(n){if(this.props.onMouseDownOutside){const e={target:this,event:t,state:this.state,isAnchorClicked:i};this.props.onMouseDownOutside.call(void 0,e)}null==window||window.removeEventListener("mousedown",this.handleMouseDown)}},this.onClosing=t=>{if(!this.props.show){const{unstyled:e}=this.props,o=e&&e.uPopup;t.classList.remove(...i.classNames(i.uPopup.animationContainerShown({c:o})).split(" ").filter((t=>t)))}this.detachRepositionHandlers()},this.onClosed=()=>{"hiding"===this.state.current&&"shown"===this.state.previous&&this.setState({current:"hidden",previous:this.state.current}),this.props.onClose&&this.props.onClose.call(void 0,{target:this})},this.getCurrentZIndex=()=>this.context?this.context+1:100,i.validatePackage(u),this.reposition=function(t,e,o={}){let n,i,s,r,p=0;o=o||{};const l=function(){p=!1===o.leading?0:(new Date).getTime(),n=void 0,r=t.apply(i,s),n||(i=s=null)};return function(){const a=(new Date).getTime();!p&&!1===o.leading&&(p=a);const c=e-(a-p);return i=void 0,s=arguments,c<=0||c>e?(n&&(clearTimeout(n),n=void 0),p=a,r=t.apply(i,s),n||(i=s=null)):!n&&!1!==o.trailing&&(n=window.setTimeout(l,c)),r}}(this.reposition.bind(this),16.666666666666668)}get element(){return this._popup}static getDerivedStateFromProps(t,e){const{show:o,anchor:n,anchorAlign:i,appendTo:s,collision:r,popupAlign:p,className:l,popupClass:a,style:c,offset:u,contentKey:d}=t,f={...e,props:{show:o,anchor:n,anchorAlign:i,appendTo:s,collision:r,popupAlign:p,className:l,popupClass:a,style:c,offset:u,contentKey:d}};return t.show?"hidden"===e.current||"hiding"===e.current?{...f,current:"showing",previous:e.current}:"showing"===e.current?{...f,current:"shown",previous:e.current}:"shown"!==e.current||h(u,e.props.offset)&&h(i,e.props.anchorAlign)&&h(s,e.props.appendTo)&&h(r,e.props.collision)&&h(p,e.props.popupAlign)&&h(c,e.props.style)&&n===e.props.anchor&&a===e.props.popupClass&&l===e.props.className?f:{...f,current:"reposition",previous:e.current}:"hiding"===e.current||"hidden"===e.current?{...f,current:"hidden",previous:e.current}:{...f,current:"hiding",previous:e.current}}componentDidUpdate(t){"showing"===this.state.current&&this._popup?this.show(this._popup):"hiding"===this.state.current&&this._popup?(this.onClosing(this._popup),this.animate(this._popup.firstChild,"exit",this.onClosed)):"reposition"===this.state.current&&"shown"===this.state.previous?setTimeout((()=>{this.setState({current:"shown",previous:this.state.current})}),0):"shown"===this.state.current&&t.contentKey!==this.props.contentKey&&this._popup&&this.setPosition(this._popup)}componentDidMount(){"showing"===this.state.current&&this._popup&&this.show(this._popup)}componentWillUnmount(){this.detachRepositionHandlers()}render(){const{children:t,className:e,popupClass:o,unstyled:n,show:s,id:r,positionMode:a}=this.props,c=n&&n.uPopup,u=this.props.appendTo?this.props.appendTo:i.canUseDOM?this.props.anchor&&this.props.anchor.ownerDocument?this.props.anchor.ownerDocument.body:document.body:void 0;"reposition"===this.state.current&&"shown"===this.state.previous&&this._popup&&this.setPosition(this._popup);const h=Object.assign({},{position:a,top:0,left:-1e4},this.props.style||{}),d="hiding"===this.state.current;if((s||d)&&u){const n=this.getCurrentZIndex(),s=p.createElement(i.ZIndexContext.Provider,{value:n},p.createElement("div",{onKeyDown:this.props.onKeyDown,className:i.classNames(i.uPopup.animationContainer({c:c}),e),id:r,ref:t=>this._popup=t,style:{zIndex:n,...h}},p.createElement("div",{className:i.classNames(i.uPopup.animationChild({c:c})),style:{transitionDelay:"0ms"}},p.createElement("div",{role:this.props.role,className:i.classNames(i.uPopup.popup({c:c}),o)},t))));return null!==this.props.appendTo?l.createPortal(s,u):s}return null}get animationDuration(){const t=this.props.animate;let e=0,o=0;return t&&(!0===t?e=o=300:(e=t.openDuration||0,o=t.closeDuration||0)),{enter:e,exit:o}}attachRepositionHandlers(t){this.detachRepositionHandlers(),this._scrollableParents=s.domUtils.scrollableParents(this.props.anchor||t),this._scrollableParents&&this._scrollableParents.map((t=>t.addEventListener("scroll",this.reposition))),window.addEventListener("resize",this.reposition)}detachRepositionHandlers(){this._scrollableParents&&(this._scrollableParents.map((t=>t.removeEventListener("scroll",this.reposition))),this._scrollableParents=void 0),window.removeEventListener("resize",this.reposition)}reposition(){this.setState({current:"reposition",previous:this.state.current})}};d.propTypes={anchor:function(t){const e=t.anchor;return e&&"number"!=typeof e.nodeType?new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed."):null},appendTo:function(t){const e=t.appendTo;return e&&"number"!=typeof e.nodeType?new Error("Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed."):null},className:n.oneOfType([n.string,n.arrayOf(n.string),n.object]),id:n.string,popupClass:n.oneOfType([n.string,n.arrayOf(n.string),n.object]),collision:n.shape({horizontal:n.oneOf([s.Collision.fit,s.Collision.flip,s.Collision.none]),vertical:n.oneOf([s.Collision.fit,s.Collision.flip,s.Collision.none])}),anchorAlign:n.shape({horizontal:n.oneOf([s.AlignPoint.left,s.AlignPoint.center,s.AlignPoint.right]),vertical:n.oneOf([s.AlignPoint.top,s.AlignPoint.center,s.AlignPoint.bottom])}),popupAlign:n.shape({horizontal:n.oneOf([s.AlignPoint.left,s.AlignPoint.center,s.AlignPoint.right]),vertical:n.oneOf([s.AlignPoint.top,s.AlignPoint.center,s.AlignPoint.bottom])}),offset:n.shape({left:n.number,top:n.number}),children:n.oneOfType([n.element,n.node]),show:n.bool,animate:n.oneOfType([n.bool,n.shape({openDuration:n.number,closeDuration:n.number})]),margin:n.shape({horizontal:n.number,vertical:n.number}),positionMode:n.oneOf(["fixed","absolute"]),scale:n.number,style:n.object,onClose:n.func,onPosition:n.func,onOpen:n.func,onKeyPress:n.func,onMouseDownOutside:n.func},d.defaultProps={collision:{horizontal:s.Collision.fit,vertical:s.Collision.flip},anchorAlign:{horizontal:s.AlignPoint.left,vertical:s.AlignPoint.bottom},popupAlign:{horizontal:s.AlignPoint.left,vertical:s.AlignPoint.top},offset:{left:-1e3,top:0},animate:!0,show:!1,margin:{horizontal:0,vertical:0},positionMode:"absolute"},d.contextType=i.ZIndexContext,d.displayName="PopupComponent";let f=d;const m=p.createContext((t=>t)),g=p.forwardRef(((t,e)=>{const o=p.useContext(m),n=i.useUnstyled(),s=o.call(void 0,t);return p.createElement(f,{ref:e,unstyled:n,...s})}));g.displayName="Popup",t.Popup=g,t.PopupPropsContext=m,t.PopupWithoutContext=f}));
@@ -10,7 +10,7 @@ const e = {
10
10
  name: "@progress/kendo-react-popup",
11
11
  productName: "KendoReact",
12
12
  productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
13
- publishDate: 1724738336,
13
+ publishDate: 1725518515,
14
14
  version: "",
15
15
  licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
16
16
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-react-popup",
3
- "version": "8.3.0-develop.11",
3
+ "version": "8.3.0-develop.12",
4
4
  "description": "React Popup positions a piece of content next to a specific anchor component. KendoReact Popup package",
5
5
  "author": "Progress",
6
6
  "license": "SEE LICENSE IN LICENSE.md",
@@ -24,7 +24,7 @@
24
24
  "peerDependencies": {
25
25
  "@progress/kendo-licensing": "^1.3.4",
26
26
  "@progress/kendo-popup-common": "^1.9.0",
27
- "@progress/kendo-react-common": "8.3.0-develop.11",
27
+ "@progress/kendo-react-common": "8.3.0-develop.12",
28
28
  "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
29
29
  "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
30
30
  },