@progress/kendo-react-popup 14.4.1-develop.9 → 14.4.1

package/Popup.d.ts

@@ -6,10 +6,10 @@
  *-------------------------------------------------------------------------------------------
  */
 import { AlignPoint, Collision as CollisionEnum } from '@progress/kendo-popup-common';
-import { Offset } from './models/Offset.js';
-import { PopupProps } from './models/PopupProps.js';
-import { Align } from './models/Align.js';
-import { Collision } from './models/Collision.js';
+import { Offset } from './models/Offset';
+import { PopupProps } from './models/PopupProps';
+import { Align } from './models/Align';
+import { Collision } from './models/Collision';
 import * as React from 'react';
 /**
  * The PopupPropsContext. It allows to configure the Popup props from a wrapper component.

package/Popup.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Oe=require("react"),Ae=require("react-dom"),n=require("prop-types"),oe=require("./animation.js"),a=require("@progress/kendo-react-common"),t=require("@progress/kendo-popup-common"),ie=require("./util.js");function se(r){const u=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const h in r)if(h!=="default"){const v=Object.getOwnPropertyDescriptor(r,h);Object.defineProperty(u,h,v.get?v:{enumerable:!0,get:()=>r[h]})}}return u.default=r,Object.freeze(u)}const c=se(Oe),be=se(Ae),ce=c.createContext(r=>r),Ce=100,Ee=1;function D(r,u){if(r===u)return!0;if(!!r!=!!u)return!1;const h=Object.getOwnPropertyNames(r),v=Object.getOwnPropertyNames(u);if(h.length!==v.length)return!1;for(let P=0;P<h.length;P++){const w=h[P];if(r[w]!==u[w])return!1}return!0}const De={left:-1e3,top:0},K=c.forwardRef((r,u)=>{const v=c.useContext(ce).call(void 0,r),{collision:P=g.collision,anchorAlign:w=g.anchorAlign,popupAlign:y=g.popupAlign,offset:T=g.offset,animate:N=g.animate,show:O=g.show,margin:Z=g.margin,positionMode:F=g.positionMode,appendTo:A,contentKey:z,anchor:d,scale:le,role:ue,onKeyDown:ae,onPosition:V,onOpen:W,onMouseDownOutside:X,onClose:B,className:M,popupClass:S,id:pe,style:j,children:fe}=v,de=a.useUnstyled(),I=v.unstyled||de,b=I&&I.uPopup,[o,L]=c.useState({current:"hidden",previous:"hidden",props:{}}),x=N&&typeof N!="object"?re:{...re,...N},G=e=>{window==null||window.addEventListener("mousedown",Q),_(e),J(e.firstChild,"enter",me),L({...i,current:"shown",previous:i.current})},_=e=>{const{width:s,height:m}=e.style;if(e.offsetWidth===0&&e.offsetHeight===0)return;e.style.width=e.offsetWidth+"px",e.style.height=e.offsetHeight+"px";const p=t.alignElement({anchor:d,anchorAlign:w,element:e,elementAlign:y,offset:T,margin:Z,positionMode:F,scale:le}),f=t.positionElement({anchor:d,anchorAlign:w,element:e,elementAlign:y,collisions:P,currentLocation:p,margin:Z});if(e.style.top=f.offset.top+"px",e.style.left=f.offset.left+"px",e.style.width=s,e.style.height=m,U.current={fit:f.fit,fitted:f.fitted,flip:f.flip,flipped:f.flipped},V){const R={target:E.current,flipped:f.flipped,fitted:f.fitted};V.call(void 0,R)}},me=()=>{const e=l.current;e&&(O&&e.classList.add(...a.classNames(a.uPopup.animationContainerShown({c:b})).split(" ").filter(s=>s)),ge(e),W&&W.call(void 0,{target:E.current}))},J=(e,s,m)=>{if(y){if(x.type==="slide"){let p;const{horizontal:f,vertical:R}=y;typeof r.animate=="object"&&r.animate.direction?p=x.direction:f==="left"&&R==="center"?p="right":f==="right"&&R==="center"?p="left":R==="top"?p="down":p="up";const ye={down:"up",up:"down",left:"right",right:"left"};U.current&&U.current.flipped&&(p=ye[p],oe.animations(e,$()[s],s,m,b,x.type,p))}oe.animations(e,$()[s],s,m,b,x.type,x.direction)}},Q=e=>{var p;const s=((p=e==null?void 0:e.target)==null?void 0:p.closest(".k-animation-container"))===null,m=(d==null?void 0:d.contains(e==null?void 0:e.target))||!1;if(s){if(X){const f={target:E.current,event:e,state:o,isAnchorClicked:m};X.call(void 0,f)}window==null||window.removeEventListener("mousedown",Q)}},he=e=>{if(!O){const s=I&&I.uPopup;e.classList.remove(...a.classNames(a.uPopup.animationContainerShown({c:s})).split(" ").filter(m=>m))}q()},Y=()=>{i.current==="hiding"&&(i.previous==="shown"||i.previous==="reposition")&&L({...i,current:"hidden",previous:i.current}),B&&B.call(void 0,{target:E.current})},$=()=>{const e=N;let s=0,m=0;return e&&(e===!0?s=m=300:(s=e.openDuration||0,m=e.closeDuration||0)),{enter:s,exit:m}},ge=e=>{q(),C.current=t.domUtils.scrollableParents(d||e),C.current&&C.current.map(s=>s.addEventListener("scroll",k)),window.addEventListener("resize",k)},q=()=>{C.current&&(C.current.map(e=>e.removeEventListener("scroll",k)),C.current=void 0),window.removeEventListener("resize",k)},k=ie.throttle(()=>{l.current&&i.current!=="hidden"&&i.current!=="hiding"&&L({...o,current:"reposition",previous:i.current})},ie.FRAME_DURATION),Pe=()=>ee?ee+Ee:Ce,ee=a.useZIndexContext()||0,U=c.useRef(void 0),C=c.useRef(void 0),l=c.useRef(null),E=c.useRef(null),ne=c.useRef({}),H=c.useRef(!1);c.useImperativeHandle(E,()=>({element:l.current,setPosition:_,props:r})),c.useImperativeHandle(u,()=>E.current);const i=c.useMemo(()=>{const e={...o,props:{show:O,anchor:d,anchorAlign:w,appendTo:A,collision:P,popupAlign:y,className:M,popupClass:S,style:j,offset:T,contentKey:z}};return O?o.current==="hidden"||o.current==="hiding"?{...e,current:"showing",previous:o.current}:o.current==="showing"?{...e,current:"shown",previous:o.current}:o.current==="shown"&&(!D(T,o.props.offset)||!D(w,o.props.anchorAlign)||!D(A,o.props.appendTo)||!D(P,o.props.collision)||!D(y,o.props.popupAlign)||!D(j,o.props.style)||d!==o.props.anchor||S!==o.props.popupClass||M!==o.props.className)?{...e,current:"reposition",previous:o.current}:e:o.current==="hiding"||o.current==="hidden"?{...e,current:"hidden",previous:o.current}:{...e,current:"hiding",previous:o.current}},[O,d,w,A,P,y,M,S,j,T,z,o]);c.useEffect(()=>{i.current==="hiding"&&!H.current&&l.current?(H.current=!0,he(l.current),J(l.current.firstChild,"exit",Y)):(H.current=!1,i.current==="showing"&&l.current&&!l.current.classList.contains("k-animation-container-shown")?G(l.current):i.current==="hiding"&&l.current?Y():i.current==="reposition"&&i.previous==="shown"?setTimeout(()=>{L({...i,current:"shown",previous:i.current})},0):i.current==="shown"&&ne.current.contentKey!==z&&l.current&&_(l.current)),i.current==="reposition"&&(i.previous==="shown"||i.previous==="showing")&&l.current&&_(l.current),ne.current={contentKey:z}},[i]),c.useEffect(()=>(i.current==="showing"&&l.current&&G(l.current),()=>{q()}),[]);const te=A||(a.canUseDOM?d&&d.ownerDocument?d.ownerDocument.body:document.body:void 0),we=Object.assign({},{position:F,top:0,left:-1e4},j||{}),ve=i.current==="hiding";if((O||ve)&&te){const e=Pe(),s=c.createElement(a.ZIndexContext.Provider,{value:e},c.createElement("div",{onKeyDown:ae,className:a.classNames(a.uPopup.animationContainer({c:b}),M),id:pe,ref:l,style:{zIndex:e,...we}},c.createElement("div",{className:a.classNames(a.uPopup.animationChild({c:b})),style:{transitionDelay:"0ms"}},c.createElement("div",{role:ue,className:a.classNames(a.uPopup.popup({c:b}),S)},fe))));return A!==null?be.createPortal(s,te):s}return null}),g={collision:{horizontal:t.Collision.fit,vertical:t.Collision.flip},anchorAlign:{horizontal:t.AlignPoint.left,vertical:t.AlignPoint.bottom},popupAlign:{horizontal:t.AlignPoint.left,vertical:t.AlignPoint.top},offset:De,animate:!0,show:!1,margin:{horizontal:0,vertical:0},positionMode:"absolute"},re={type:"slide",direction:"down"};K.displayName="Popup";K.propTypes={anchor:function(r){const u=r.anchor;return u&&typeof u.nodeType!="number"?new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed."):null},appendTo:function(r){const u=r.appendTo;return u&&typeof u.nodeType!="number"?new Error("Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed."):null},className:n.oneOfType([n.string,n.arrayOf(n.string.isRequired)]),id:n.string,popupClass:n.oneOfType([n.string,n.arrayOf(n.string),n.object]),collision:n.shape({horizontal:n.oneOf([t.Collision.fit,t.Collision.flip,t.Collision.none]),vertical:n.oneOf([t.Collision.fit,t.Collision.flip,t.Collision.none])}),anchorAlign:n.shape({horizontal:n.oneOf([t.AlignPoint.left,t.AlignPoint.center,t.AlignPoint.right]),vertical:n.oneOf([t.AlignPoint.top,t.AlignPoint.center,t.AlignPoint.bottom])}),popupAlign:n.shape({horizontal:n.oneOf([t.AlignPoint.left,t.AlignPoint.center,t.AlignPoint.right]),vertical:n.oneOf([t.AlignPoint.top,t.AlignPoint.center,t.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({type:n.oneOf(["slide","zoom","push","expand","fade"]),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,onKeyDown:n.func,onMouseDownOutside:n.func};exports.Popup=K;exports.PopupPropsContext=ce;exports.popupDefaultProps=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ve=require("react"),Oe=require("react-dom"),n=require("prop-types"),Ae=require("./animation.js"),u=require("@progress/kendo-react-common"),t=require("@progress/kendo-popup-common"),te=require("./util.js");function ie(r){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const h in r)if(h!=="default"){const y=Object.getOwnPropertyDescriptor(r,h);Object.defineProperty(c,h,y.get?y:{enumerable:!0,get:()=>r[h]})}}return c.default=r,Object.freeze(c)}const l=ie(ve),be=ie(Oe),re=l.createContext(r=>r),Ce=100,Ee=1;function E(r,c){if(r===c)return!0;if(!!r!=!!c)return!1;const h=Object.getOwnPropertyNames(r),y=Object.getOwnPropertyNames(c);if(h.length!==y.length)return!1;for(let P=0;P<h.length;P++){const w=h[P];if(r[w]!==c[w])return!1}return!0}const De={left:-1e3,top:0},K=l.forwardRef((r,c)=>{const y=l.useContext(re).call(void 0,r),{collision:P=g.collision,anchorAlign:w=g.anchorAlign,popupAlign:v=g.popupAlign,offset:x=g.offset,animate:R=g.animate,show:O=g.show,margin:Z=g.margin,positionMode:F=g.positionMode,appendTo:A,contentKey:T,anchor:d,scale:se,role:le,onKeyDown:ce,onPosition:V,onOpen:W,onMouseDownOutside:X,onClose:B,className:N,popupClass:z,id:ae,style:M,children:ue}=y,pe=u.useUnstyled(),S=y.unstyled||pe,D=S&&S.uPopup,[o,j]=l.useState({current:"hidden",previous:"hidden",props:{}}),I=R&&typeof R!="object"?oe:{...oe,...R},fe=e=>{window==null||window.addEventListener("mousedown",J),L(e),G(e.firstChild,"enter",de),j({...i,current:"shown",previous:i.current})},L=e=>{const{width:s,height:m}=e.style;if(e.offsetWidth===0&&e.offsetHeight===0)return;e.style.width=e.offsetWidth+"px",e.style.height=e.offsetHeight+"px";const p=t.alignElement({anchor:d,anchorAlign:w,element:e,elementAlign:v,offset:x,margin:Z,positionMode:F,scale:se}),f=t.positionElement({anchor:d,anchorAlign:w,element:e,elementAlign:v,collisions:P,currentLocation:p,margin:Z});if(e.style.top=f.offset.top+"px",e.style.left=f.offset.left+"px",e.style.width=s,e.style.height=m,$.current={fit:f.fit,fitted:f.fitted,flip:f.flip,flipped:f.flipped},V){const k={target:C.current,flipped:f.flipped,fitted:f.fitted};V.call(void 0,k)}},de=()=>{const e=a.current;e&&(O&&e.classList.add(...u.classNames(u.uPopup.animationContainerShown({c:D})).split(" ").filter(s=>s)),ge(e),W&&W.call(void 0,{target:C.current}))},G=(e,s,m)=>{var f;if(!v)return;let p=I.direction;if(I.type==="slide"){const{horizontal:k,vertical:H}=v;typeof r.animate=="object"&&r.animate.direction?p=I.direction:k==="left"&&H==="center"?p="right":k==="right"&&H==="center"?p="left":H==="top"?p="down":p="up",(f=$.current)!=null&&f.flipped&&(p={down:"up",up:"down",left:"right",right:"left"}[p])}Ae.animations(e,he()[s],s,m,D,I.type,p)},J=e=>{var p;const s=((p=e==null?void 0:e.target)==null?void 0:p.closest(".k-animation-container"))===null,m=(d==null?void 0:d.contains(e==null?void 0:e.target))||!1;if(s){if(X){const f={target:C.current,event:e,state:o,isAnchorClicked:m};X.call(void 0,f)}window==null||window.removeEventListener("mousedown",J)}},me=e=>{if(!O){const s=S&&S.uPopup;e.classList.remove(...u.classNames(u.uPopup.animationContainerShown({c:s})).split(" ").filter(m=>m))}q()},Q=()=>{i.current==="hiding"&&(i.previous==="shown"||i.previous==="reposition")&&j({...i,current:"hidden",previous:i.current}),B&&B.call(void 0,{target:C.current})},he=()=>{const e=R;let s=0,m=0;return e&&(e===!0?s=m=300:(s=e.openDuration||0,m=e.closeDuration||0)),{enter:s,exit:m}},ge=e=>{q(),b.current=t.domUtils.scrollableParents(d||e),b.current&&b.current.map(s=>s.addEventListener("scroll",_)),window.addEventListener("resize",_)},q=()=>{b.current&&(b.current.map(e=>e.removeEventListener("scroll",_)),b.current=void 0),window.removeEventListener("resize",_)},_=te.throttle(()=>{a.current&&i.current!=="hidden"&&i.current!=="hiding"&&j({...o,current:"reposition",previous:i.current})},te.FRAME_DURATION),Pe=()=>Y?Y+Ee:Ce,Y=u.useZIndexContext()||0,$=l.useRef(void 0),b=l.useRef(void 0),a=l.useRef(null),C=l.useRef(null),ee=l.useRef({}),U=l.useRef(!1);l.useImperativeHandle(C,()=>({element:a.current,setPosition:L,props:r})),l.useImperativeHandle(c,()=>C.current);const i=l.useMemo(()=>{const e={...o,props:{show:O,anchor:d,anchorAlign:w,appendTo:A,collision:P,popupAlign:v,className:N,popupClass:z,style:M,offset:x,contentKey:T}};return O?o.current==="hidden"||o.current==="hiding"?{...e,current:"showing",previous:o.current}:o.current==="showing"?{...e,current:"shown",previous:o.current}:o.current==="shown"&&(!E(x,o.props.offset)||!E(w,o.props.anchorAlign)||!E(A,o.props.appendTo)||!E(P,o.props.collision)||!E(v,o.props.popupAlign)||!E(M,o.props.style)||d!==o.props.anchor||z!==o.props.popupClass||N!==o.props.className)?{...e,current:"reposition",previous:o.current}:e:o.current==="hiding"||o.current==="hidden"?{...e,current:"hidden",previous:o.current}:{...e,current:"hiding",previous:o.current}},[O,d,w,A,P,v,N,z,M,x,T,o]);l.useEffect(()=>{i.current==="hiding"&&!U.current&&a.current?(U.current=!0,me(a.current),G(a.current.firstChild,"exit",Q)):(U.current=!1,i.current==="showing"&&a.current&&!a.current.classList.contains("k-animation-container-shown")?fe(a.current):i.current==="hiding"&&a.current?Q():i.current==="reposition"&&i.previous==="shown"?setTimeout(()=>{j({...i,current:"shown",previous:i.current})},0):i.current==="shown"&&ee.current.contentKey!==T&&a.current&&L(a.current)),i.current==="reposition"&&(i.previous==="shown"||i.previous==="showing")&&a.current&&L(a.current),ee.current={contentKey:T}},[i]),l.useEffect(()=>()=>{q()},[]);const ne=A||(u.canUseDOM?d&&d.ownerDocument?d.ownerDocument.body:document.body:void 0),we=Object.assign({},{position:F,top:0,left:-1e4},M||{}),ye=i.current==="hiding";if((O||ye)&&ne){const e=Pe(),s=l.createElement(u.ZIndexContext.Provider,{value:e},l.createElement("div",{onKeyDown:ce,className:u.classNames(u.uPopup.animationContainer({c:D}),N),id:ae,ref:a,style:{zIndex:e,...we}},l.createElement("div",{className:u.classNames(u.uPopup.animationChild({c:D})),style:{transitionDelay:"0ms"}},l.createElement("div",{role:le,className:u.classNames(u.uPopup.popup({c:D}),z)},ue))));return A!==null?be.createPortal(s,ne):s}return null}),g={collision:{horizontal:t.Collision.fit,vertical:t.Collision.flip},anchorAlign:{horizontal:t.AlignPoint.left,vertical:t.AlignPoint.bottom},popupAlign:{horizontal:t.AlignPoint.left,vertical:t.AlignPoint.top},offset:De,animate:!0,show:!1,margin:{horizontal:0,vertical:0},positionMode:"absolute"},oe={type:"slide",direction:"down"};K.displayName="Popup";K.propTypes={anchor:function(r){const c=r.anchor;return c&&typeof c.nodeType!="number"?new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed."):null},appendTo:function(r){const c=r.appendTo;return c&&typeof c.nodeType!="number"?new Error("Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed."):null},className:n.oneOfType([n.string,n.arrayOf(n.string.isRequired)]),id:n.string,popupClass:n.oneOfType([n.string,n.arrayOf(n.string),n.object]),collision:n.shape({horizontal:n.oneOf([t.Collision.fit,t.Collision.flip,t.Collision.none]),vertical:n.oneOf([t.Collision.fit,t.Collision.flip,t.Collision.none])}),anchorAlign:n.shape({horizontal:n.oneOf([t.AlignPoint.left,t.AlignPoint.center,t.AlignPoint.right]),vertical:n.oneOf([t.AlignPoint.top,t.AlignPoint.center,t.AlignPoint.bottom])}),popupAlign:n.shape({horizontal:n.oneOf([t.AlignPoint.left,t.AlignPoint.center,t.AlignPoint.right]),vertical:n.oneOf([t.AlignPoint.top,t.AlignPoint.center,t.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({type:n.oneOf(["slide","zoom","push","expand","fade"]),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,onKeyDown:n.func,onMouseDownOutside:n.func};exports.Popup=K;exports.PopupPropsContext=re;exports.popupDefaultProps=g;

package/Popup.mjs

@@ -6,24 +6,24 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as i from "react";
-import * as Pe from "react-dom";
+import * as ye from "react-dom";
 import t from "prop-types";
-import { animations as re } from "./animation.mjs";
-import { useUnstyled as Oe, useZIndexContext as Ee, canUseDOM as be, ZIndexContext as Ce, classNames as D, uPopup as T } from "@progress/kendo-react-common";
-import { Collision as w, AlignPoint as c, alignElement as xe, positionElement as Ae, domUtils as De } from "@progress/kendo-popup-common";
+import { animations as Pe } from "./animation.mjs";
+import { useUnstyled as Oe, useZIndexContext as Ee, canUseDOM as be, ZIndexContext as Ce, classNames as x, uPopup as A } from "@progress/kendo-react-common";
+import { Collision as w, AlignPoint as s, alignElement as xe, positionElement as Ae, domUtils as De } from "@progress/kendo-popup-common";
 import { throttle as Te, FRAME_DURATION as Re } from "./util.mjs";
-const ze = i.createContext((l) => l), Ne = 100, Ie = 1;
-function C(l, p) {
-  if (l === p)
+const ze = i.createContext((c) => c), Ne = 100, Ie = 1;
+function b(c, p) {
+  if (c === p)
     return !0;
-  if (!!l != !!p)
+  if (!!c != !!p)
     return !1;
-  const R = Object.getOwnPropertyNames(l), z = Object.getOwnPropertyNames(p);
-  if (R.length !== z.length)
+  const D = Object.getOwnPropertyNames(c), T = Object.getOwnPropertyNames(p);
+  if (D.length !== T.length)
     return !1;
-  for (let m = 0; m < R.length; m++) {
-    const h = R[m];
-    if (l[h] !== p[h])
+  for (let m = 0; m < D.length; m++) {
+    const h = D[m];
+    if (c[h] !== p[h])
       return !1;
   }
   return !0;
@@ -31,38 +31,38 @@ function C(l, p) {
 const Le = {
   left: -1e3,
   top: 0
-}, se = i.forwardRef((l, p) => {
-  const z = i.useContext(ze).call(void 0, l), {
+}, re = i.forwardRef((c, p) => {
+  const T = i.useContext(ze).call(void 0, c), {
     collision: m = g.collision,
     anchorAlign: h = g.anchorAlign,
     popupAlign: v = g.popupAlign,
-    offset: N = g.offset,
-    animate: I = g.animate,
+    offset: R = g.offset,
+    animate: z = g.animate,
     show: y = g.show,
     margin: q = g.margin,
     positionMode: V = g.positionMode,
     appendTo: P,
-    contentKey: L,
+    contentKey: N,
     anchor: f,
-    scale: ce,
-    role: le,
-    onKeyDown: ae,
+    scale: ie,
+    role: se,
+    onKeyDown: ce,
     onPosition: W,
     onOpen: X,
     onMouseDownOutside: B,
     onClose: G,
-    className: M,
-    popupClass: S,
-    id: ue,
-    style: U,
-    children: pe
-  } = z, fe = Oe(), j = z.unstyled || fe, O = j && j.uPopup, [n, k] = i.useState({
+    className: I,
+    popupClass: L,
+    id: le,
+    style: M,
+    children: ae
+  } = T, ue = Oe(), S = T.unstyled || ue, C = S && S.uPopup, [n, U] = i.useState({
     current: "hidden",
     previous: "hidden",
     props: {}
-  }), x = I && typeof I != "object" ? ie : { ...ie, ...I }, J = (e) => {
-    window == null || window.addEventListener("mousedown", Y), H(e), Q(e.firstChild, "enter", de), k({ ...o, current: "shown", previous: o.current });
-  }, H = (e) => {
+  }), j = z && typeof z != "object" ? oe : { ...oe, ...z }, pe = (e) => {
+    window == null || window.addEventListener("mousedown", Q), k(e), J(e.firstChild, "enter", fe), U({ ...o, current: "shown", previous: o.current });
+  }, k = (e) => {
     const { width: r, height: d } = e.style;
     if (e.offsetWidth === 0 && e.offsetHeight === 0)
       return;
@@ -72,10 +72,10 @@ const Le = {
       anchorAlign: h,
       element: e,
       elementAlign: v,
-      offset: N,
+      offset: R,
       margin: q,
       positionMode: V,
-      scale: ce
+      scale: ie
     }), u = Ae({
       anchor: f,
       anchorAlign: h,
@@ -85,97 +85,88 @@ const Le = {
       currentLocation: a,
       margin: q
     });
-    if (e.style.top = u.offset.top + "px", e.style.left = u.offset.left + "px", e.style.width = r, e.style.height = d, _.current = {
+    if (e.style.top = u.offset.top + "px", e.style.left = u.offset.left + "px", e.style.width = r, e.style.height = d, ee.current = {
       fit: u.fit,
       fitted: u.fitted,
       flip: u.flip,
       flipped: u.flipped
     }, W) {
-      const A = {
-        target: b.current,
+      const K = {
+        target: E.current,
         flipped: u.flipped,
         fitted: u.fitted
       };
-      W.call(void 0, A);
+      W.call(void 0, K);
     }
-  }, de = () => {
-    const e = s.current;
+  }, fe = () => {
+    const e = l.current;
     e && (y && e.classList.add(
-      ...D(T.animationContainerShown({ c: O })).split(" ").filter((r) => r)
-    ), he(e), X && X.call(void 0, { target: b.current }));
-  }, Q = (e, r, d) => {
-    if (v) {
-      if (x.type === "slide") {
-        let a;
-        const { horizontal: u, vertical: A } = v;
-        typeof l.animate == "object" && l.animate.direction ? a = x.direction : u === "left" && A === "center" ? a = "right" : u === "right" && A === "center" ? a = "left" : A === "top" ? a = "down" : a = "up";
-        const ye = {
-          down: "up",
-          up: "down",
-          left: "right",
-          right: "left"
-        };
-        _.current && _.current.flipped && (a = ye[a], re(
-          e,
-          ee()[r],
-          r,
-          d,
-          O,
-          x.type,
-          a
-        ));
-      }
-      re(
-        e,
-        ee()[r],
-        r,
-        d,
-        O,
-        x.type,
-        x.direction
-      );
+      ...x(A.animationContainerShown({ c: C })).split(" ").filter((r) => r)
+    ), he(e), X && X.call(void 0, { target: E.current }));
+  }, J = (e, r, d) => {
+    var u;
+    if (!v)
+      return;
+    let a = j.direction;
+    if (j.type === "slide") {
+      const { horizontal: K, vertical: F } = v;
+      typeof c.animate == "object" && c.animate.direction ? a = j.direction : K === "left" && F === "center" ? a = "right" : K === "right" && F === "center" ? a = "left" : F === "top" ? a = "down" : a = "up", (u = ee.current) != null && u.flipped && (a = {
+        down: "up",
+        up: "down",
+        left: "right",
+        right: "left"
+      }[a]);
     }
-  }, Y = (e) => {
+    Pe(
+      e,
+      me()[r],
+      r,
+      d,
+      C,
+      j.type,
+      a
+    );
+  }, Q = (e) => {
     var a;
     const r = ((a = e == null ? void 0 : e.target) == null ? void 0 : a.closest(".k-animation-container")) === null, d = (f == null ? void 0 : f.contains(e == null ? void 0 : e.target)) || !1;
     if (r) {
       if (B) {
         const u = {
-          target: b.current,
+          target: E.current,
           event: e,
           state: n,
           isAnchorClicked: d
         };
         B.call(void 0, u);
       }
-      window == null || window.removeEventListener("mousedown", Y);
+      window == null || window.removeEventListener("mousedown", Q);
     }
-  }, me = (e) => {
+  }, de = (e) => {
     if (!y) {
-      const r = j && j.uPopup;
+      const r = S && S.uPopup;
       e.classList.remove(
-        ...D(T.animationContainerShown({ c: r })).split(" ").filter((d) => d)
+        ...x(A.animationContainerShown({ c: r })).split(" ").filter((d) => d)
       );
     }
     Z();
-  }, $ = () => {
-    o.current === "hiding" && (o.previous === "shown" || o.previous === "reposition") && k({ ...o, current: "hidden", previous: o.current }), G && G.call(void 0, { target: b.current });
-  }, ee = () => {
-    const e = I;
+  }, Y = () => {
+    o.current === "hiding" && (o.previous === "shown" || o.previous === "reposition") && U({ ...o, current: "hidden", previous: o.current }), G && G.call(void 0, { target: E.current });
+  }, me = () => {
+    const e = z;
     let r = 0, d = 0;
     return e && (e === !0 ? r = d = 300 : (r = e.openDuration || 0, d = e.closeDuration || 0)), { enter: r, exit: d };
   }, he = (e) => {
-    Z(), E.current = De.scrollableParents(f || e), E.current && E.current.map((r) => r.addEventListener("scroll", K)), window.addEventListener("resize", K);
+    Z(), O.current = De.scrollableParents(f || e), O.current && O.current.map((r) => r.addEventListener("scroll", H)), window.addEventListener("resize", H);
   }, Z = () => {
-    E.current && (E.current.map((e) => e.removeEventListener("scroll", K)), E.current = void 0), window.removeEventListener("resize", K);
-  }, K = Te(() => {
-    s.current && o.current !== "hidden" && o.current !== "hiding" && k({ ...n, current: "reposition", previous: o.current });
-  }, Re), ge = () => te ? te + Ie : Ne, te = Ee() || 0, _ = i.useRef(void 0), E = i.useRef(void 0), s = i.useRef(null), b = i.useRef(null), ne = i.useRef({}), F = i.useRef(!1);
-  i.useImperativeHandle(b, () => ({
-    element: s.current,
-    setPosition: H,
-    props: l
-  })), i.useImperativeHandle(p, () => b.current);
+    O.current && (O.current.map((e) => e.removeEventListener("scroll", H)), O.current = void 0), window.removeEventListener("resize", H);
+  }, H = Te(() => {
+    l.current && o.current !== "hidden" && o.current !== "hiding" && U({ ...n, current: "reposition", previous: o.current });
+  }, Re), ge = () => $ ? $ + Ie : Ne, $ = Ee() || 0, ee = i.useRef(void 0), O = i.useRef(void 0), l = i.useRef(null), E = i.useRef(null), te = i.useRef({}), _ = i.useRef(!1);
+  i.useImperativeHandle(E, () => ({
+    element: l.current,
+    setPosition: k,
+    props: c
+  })), i.useImperativeHandle(p, () => E.current);
   const o = i.useMemo(() => {
     const e = {
       ...n,
@@ -186,14 +177,14 @@ const Le = {
         appendTo: P,
         collision: m,
         popupAlign: v,
-        className: M,
-        popupClass: S,
-        style: U,
-        offset: N,
-        contentKey: L
+        className: I,
+        popupClass: L,
+        style: M,
+        offset: R,
+        contentKey: N
       }
     };
-    return y ? n.current === "hidden" || n.current === "hiding" ? { ...e, current: "showing", previous: n.current } : n.current === "showing" ? { ...e, current: "shown", previous: n.current } : n.current === "shown" && (!C(N, n.props.offset) || !C(h, n.props.anchorAlign) || !C(P, n.props.appendTo) || !C(m, n.props.collision) || !C(v, n.props.popupAlign) || !C(U, n.props.style) || f !== n.props.anchor || S !== n.props.popupClass || M !== n.props.className) ? { ...e, current: "reposition", previous: n.current } : e : n.current === "hiding" || n.current === "hidden" ? { ...e, current: "hidden", previous: n.current } : { ...e, current: "hiding", previous: n.current };
+    return y ? n.current === "hidden" || n.current === "hiding" ? { ...e, current: "showing", previous: n.current } : n.current === "showing" ? { ...e, current: "shown", previous: n.current } : n.current === "shown" && (!b(R, n.props.offset) || !b(h, n.props.anchorAlign) || !b(P, n.props.appendTo) || !b(m, n.props.collision) || !b(v, n.props.popupAlign) || !b(M, n.props.style) || f !== n.props.anchor || L !== n.props.popupClass || I !== n.props.className) ? { ...e, current: "reposition", previous: n.current } : e : n.current === "hiding" || n.current === "hidden" ? { ...e, current: "hidden", previous: n.current } : { ...e, current: "hiding", previous: n.current };
   }, [
     y,
     f,
@@ -201,33 +192,33 @@ const Le = {
     P,
     m,
     v,
+    I,
+    L,
     M,
-    S,
-    U,
+    R,
     N,
-    L,
     n
   ]);
   i.useEffect(() => {
-    o.current === "hiding" && !F.current && s.current ? (F.current = !0, me(s.current), Q(s.current.firstChild, "exit", $)) : (F.current = !1, o.current === "showing" && s.current && !s.current.classList.contains("k-animation-container-shown") ? J(s.current) : o.current === "hiding" && s.current ? $() : o.current === "reposition" && o.previous === "shown" ? setTimeout(() => {
-      k({ ...o, current: "shown", previous: o.current });
-    }, 0) : o.current === "shown" && ne.current.contentKey !== L && s.current && H(s.current)), o.current === "reposition" && (o.previous === "shown" || o.previous === "showing") && s.current && H(s.current), ne.current = { contentKey: L };
-  }, [o]), i.useEffect(() => (o.current === "showing" && s.current && J(s.current), () => {
+    o.current === "hiding" && !_.current && l.current ? (_.current = !0, de(l.current), J(l.current.firstChild, "exit", Y)) : (_.current = !1, o.current === "showing" && l.current && !l.current.classList.contains("k-animation-container-shown") ? pe(l.current) : o.current === "hiding" && l.current ? Y() : o.current === "reposition" && o.previous === "shown" ? setTimeout(() => {
+      U({ ...o, current: "shown", previous: o.current });
+    }, 0) : o.current === "shown" && te.current.contentKey !== N && l.current && k(l.current)), o.current === "reposition" && (o.previous === "shown" || o.previous === "showing") && l.current && k(l.current), te.current = { contentKey: N };
+  }, [o]), i.useEffect(() => () => {
     Z();
-  }), []);
-  const oe = P || (be ? f && f.ownerDocument ? f.ownerDocument.body : document.body : void 0), we = Object.assign(
+  }, []);
+  const ne = P || (be ? f && f.ownerDocument ? f.ownerDocument.body : document.body : void 0), we = Object.assign(
     {},
     { position: V, top: 0, left: -1e4 },
-    U || {}
+    M || {}
   ), ve = o.current === "hiding";
-  if ((y || ve) && oe) {
+  if ((y || ve) && ne) {
     const e = ge(), r = /* @__PURE__ */ i.createElement(Ce.Provider, { value: e }, /* @__PURE__ */ i.createElement(
       "div",
       {
-        onKeyDown: ae,
-        className: D(T.animationContainer({ c: O }), M),
-        id: ue,
-        ref: s,
+        onKeyDown: ce,
+        className: x(A.animationContainer({ c: C }), I),
+        id: le,
+        ref: l,
         style: {
           zIndex: e,
           ...we
@@ -236,13 +227,13 @@ const Le = {
       /* @__PURE__ */ i.createElement(
         "div",
         {
-          className: D(T.animationChild({ c: O })),
+          className: x(A.animationChild({ c: C })),
           style: { transitionDelay: "0ms" }
         },
-        /* @__PURE__ */ i.createElement("div", { role: le, className: D(T.popup({ c: O }), S) }, pe)
+        /* @__PURE__ */ i.createElement("div", { role: se, className: x(A.popup({ c: C }), L) }, ae)
       )
     ));
-    return P !== null ? Pe.createPortal(r, oe) : r;
+    return P !== null ? ye.createPortal(r, ne) : r;
   }
   return null;
 }), g = {
@@ -251,12 +242,12 @@ const Le = {
     vertical: w.flip
   },
   anchorAlign: {
-    horizontal: c.left,
-    vertical: c.bottom
+    horizontal: s.left,
+    vertical: s.bottom
   },
   popupAlign: {
-    horizontal: c.left,
-    vertical: c.top
+    horizontal: s.left,
+    vertical: s.top
   },
   offset: Le,
   animate: !0,
@@ -266,18 +257,18 @@ const Le = {
     vertical: 0
   },
   positionMode: "absolute"
-}, ie = {
+}, oe = {
   type: "slide",
   direction: "down"
 };
-se.displayName = "Popup";
-se.propTypes = {
-  anchor: function(l) {
-    const p = l.anchor;
+re.displayName = "Popup";
+re.propTypes = {
+  anchor: function(c) {
+    const p = c.anchor;
     return p && typeof p.nodeType != "number" ? new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed.") : null;
   },
-  appendTo: function(l) {
-    const p = l.appendTo;
+  appendTo: function(c) {
+    const p = c.appendTo;
     return p && typeof p.nodeType != "number" ? new Error("Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed.") : null;
   },
   className: t.oneOfType([t.string, t.arrayOf(t.string.isRequired)]),
@@ -288,12 +279,12 @@ se.propTypes = {
     vertical: t.oneOf([w.fit, w.flip, w.none])
   }),
   anchorAlign: t.shape({
-    horizontal: t.oneOf([c.left, c.center, c.right]),
-    vertical: t.oneOf([c.top, c.center, c.bottom])
+    horizontal: t.oneOf([s.left, s.center, s.right]),
+    vertical: t.oneOf([s.top, s.center, s.bottom])
   }),
   popupAlign: t.shape({
-    horizontal: t.oneOf([c.left, c.center, c.right]),
-    vertical: t.oneOf([c.top, c.center, c.bottom])
+    horizontal: t.oneOf([s.left, s.center, s.right]),
+    vertical: t.oneOf([s.top, s.center, s.bottom])
   }),
   offset: t.shape({
     left: t.number,
@@ -323,7 +314,7 @@ se.propTypes = {
   onMouseDownOutside: t.func
 };
 export {
-  se as Popup,
+  re as Popup,
   ze as PopupPropsContext,
   g as popupDefaultProps
 };

package/animation.d.ts

@@ -5,7 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { PopupAnimationType, PopupAnimationDirection } from './models/PopupAnimation.js';
+import { PopupAnimationType, PopupAnimationDirection } from './models/PopupAnimation';
 /**
  * @hidden
  */

package/dist/cdn/js/kendo-react-popup.js

@@ -12,4 +12,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-!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});
+!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=>{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,X.current={fit:l.fit,fitted:l.fitted,flip:l.flip,flipped:l.flipped},T){const e={target:ee.current,flipped:l.flipped,fitted:l.fitted};T.call(void 0,e)}},U=()=>{const e=_.current;e&&(v&&e.classList.add(...r.classNames(r.uPopup.animationContainerShown({c:q})).split(" ").filter(e=>e)),B(e),D&&D.call(void 0,{target:ee.current}))},V=(n,t,o)=>{var r;if(!p)return;let i=F.direction;if("slide"===F.type){const{horizontal:n,vertical:t}=p;i="object"==typeof e.animate&&e.animate.direction?F.direction:"left"===n&&"center"===t?"right":"right"===n&&"center"===t?"left":"top"===t?"down":"up",null!=(r=X.current)&&r.flipped&&(i={down:"up",up:"down",left:"right",right:"left"}[i])}a(n,$()[t],t,o,q,F.type,i)},W=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:ee.current,event:e,state:I,isAnchorClicked:o};E.call(void 0,n)}null==window||window.removeEventListener("mousedown",W)}},Z=()=>{"hiding"===oe.current&&("shown"===oe.previous||"reposition"===oe.previous)&&H({...oe,current:"hidden",previous:oe.current}),N&&N.call(void 0,{target:ee.current})},$=()=>{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}},B=e=>{G(),Y.current=i.domUtils.scrollableParents(b||e),Y.current&&Y.current.map(e=>e.addEventListener("scroll",J)),window.addEventListener("resize",J)},G=()=>{Y.current&&(Y.current.map(e=>e.removeEventListener("scroll",J)),Y.current=void 0),window.removeEventListener("resize",J)},J=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}}(()=>{_.current&&"hidden"!==oe.current&&"hiding"!==oe.current&&H({...I,current:"reposition",previous:oe.current})},16.666666666666668),Q=r.useZIndexContext()||0,X=l.useRef(void 0),Y=l.useRef(void 0),_=l.useRef(null),ee=l.useRef(null),ne=l.useRef({}),te=l.useRef(!1);l.useImperativeHandle(ee,()=>({element:_.current,setPosition:S,props:e})),l.useImperativeHandle(n,()=>ee.current);const oe=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(()=>{var e;"hiding"===oe.current&&!te.current&&_.current?(te.current=!0,(e=>{if(!v){const n=k&&k.uPopup;e.classList.remove(...r.classNames(r.uPopup.animationContainerShown({c:n})).split(" ").filter(e=>e))}G()})(_.current),V(_.current.firstChild,"exit",Z)):(te.current=!1,"showing"===oe.current&&_.current&&!_.current.classList.contains("k-animation-container-shown")?(e=_.current,null==window||window.addEventListener("mousedown",W),S(e),V(e.firstChild,"enter",U),H({...oe,current:"shown",previous:oe.current})):"hiding"===oe.current&&_.current?Z():"reposition"===oe.current&&"shown"===oe.previous?setTimeout(()=>{H({...oe,current:"shown",previous:oe.current})},0):"shown"===oe.current&&ne.current.contentKey!==A&&_.current&&S(_.current)),"reposition"===oe.current&&("shown"===oe.previous||"showing"===oe.previous)&&_.current&&S(_.current),ne.current={contentKey:A}},[oe]),l.useEffect(()=>()=>{G()},[]);const re=P||(r.canUseDOM?b&&b.ownerDocument?b.ownerDocument.body:document.body:void 0),ie=Object.assign({},{position:w,top:0,left:-1e4},j||{}),se="hiding"===oe.current;if((v||se)&&re){const e=Q?Q+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:_,style:{zIndex:e,...ie}},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,re):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});

package/index.d.mts

@@ -6,13 +6,13 @@
  *-------------------------------------------------------------------------------------------
  */
 import { Popup, PopupPropsContext, PopupHandle } from './Popup.js';
-import { PopupProps } from './models/PopupProps.js';
-import { Align } from './models/Align.js';
-import { Collision } from './models/Collision.js';
-import { Offset } from './models/Offset.js';
-import { PopupAnimation, PopupAnimationType, PopupAnimationBase, PopupAnimationDirection, PopupBaseDirections, PopupZoomDirections, PopupExpandDirection, PopupNoDirection, SlidePopupAnimation, ZoomPopupAnimation, FadePopupAnimation, PushPopupAnimation, ExpandPopupAnimation } from './models/PopupAnimation.js';
-import { OpenEvent as PopupOpenEvent, CloseEvent as PopupCloseEvent, MouseDownOutsideEvent, PositionEvent } from './models/Events.js';
-import { Margin } from './models/Margin.js';
-import { CollisionType } from './models/CollisionType.js';
-import { PositionMode } from './models/PositionMode.js';
+import { PopupProps } from './models/PopupProps';
+import { Align } from './models/Align';
+import { Collision } from './models/Collision';
+import { Offset } from './models/Offset';
+import { PopupAnimation, PopupAnimationType, PopupAnimationBase, PopupAnimationDirection, PopupBaseDirections, PopupZoomDirections, PopupExpandDirection, PopupNoDirection, SlidePopupAnimation, ZoomPopupAnimation, FadePopupAnimation, PushPopupAnimation, ExpandPopupAnimation } from './models/PopupAnimation';
+import { OpenEvent as PopupOpenEvent, CloseEvent as PopupCloseEvent, MouseDownOutsideEvent, PositionEvent } from './models/Events';
+import { Margin } from './models/Margin';
+import { CollisionType } from './models/CollisionType';
+import { PositionMode } from './models/PositionMode';
 export { Popup, PopupHandle, PopupPropsContext, PopupProps, Align, Collision, Offset, PopupAnimation, PopupAnimationType, PopupAnimationBase, PopupAnimationDirection, PopupBaseDirections, PopupZoomDirections, PopupExpandDirection, PopupNoDirection, SlidePopupAnimation, ZoomPopupAnimation, FadePopupAnimation, PushPopupAnimation, ExpandPopupAnimation, Margin, PositionMode, CollisionType, PopupOpenEvent, PopupCloseEvent, PositionEvent, MouseDownOutsideEvent };

package/index.d.ts

@@ -6,13 +6,13 @@
  *-------------------------------------------------------------------------------------------
  */
 import { Popup, PopupPropsContext, PopupHandle } from './Popup.js';
-import { PopupProps } from './models/PopupProps.js';
-import { Align } from './models/Align.js';
-import { Collision } from './models/Collision.js';
-import { Offset } from './models/Offset.js';
-import { PopupAnimation, PopupAnimationType, PopupAnimationBase, PopupAnimationDirection, PopupBaseDirections, PopupZoomDirections, PopupExpandDirection, PopupNoDirection, SlidePopupAnimation, ZoomPopupAnimation, FadePopupAnimation, PushPopupAnimation, ExpandPopupAnimation } from './models/PopupAnimation.js';
-import { OpenEvent as PopupOpenEvent, CloseEvent as PopupCloseEvent, MouseDownOutsideEvent, PositionEvent } from './models/Events.js';
-import { Margin } from './models/Margin.js';
-import { CollisionType } from './models/CollisionType.js';
-import { PositionMode } from './models/PositionMode.js';
+import { PopupProps } from './models/PopupProps';
+import { Align } from './models/Align';
+import { Collision } from './models/Collision';
+import { Offset } from './models/Offset';
+import { PopupAnimation, PopupAnimationType, PopupAnimationBase, PopupAnimationDirection, PopupBaseDirections, PopupZoomDirections, PopupExpandDirection, PopupNoDirection, SlidePopupAnimation, ZoomPopupAnimation, FadePopupAnimation, PushPopupAnimation, ExpandPopupAnimation } from './models/PopupAnimation';
+import { OpenEvent as PopupOpenEvent, CloseEvent as PopupCloseEvent, MouseDownOutsideEvent, PositionEvent } from './models/Events';
+import { Margin } from './models/Margin';
+import { CollisionType } from './models/CollisionType';
+import { PositionMode } from './models/PositionMode';
 export { Popup, PopupHandle, PopupPropsContext, PopupProps, Align, Collision, Offset, PopupAnimation, PopupAnimationType, PopupAnimationBase, PopupAnimationDirection, PopupBaseDirections, PopupZoomDirections, PopupExpandDirection, PopupNoDirection, SlidePopupAnimation, ZoomPopupAnimation, FadePopupAnimation, PushPopupAnimation, ExpandPopupAnimation, Margin, PositionMode, CollisionType, PopupOpenEvent, PopupCloseEvent, PositionEvent, MouseDownOutsideEvent };

package/models/Collision.d.ts

@@ -5,7 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { CollisionType } from './CollisionType.js';
+import { CollisionType } from './CollisionType';
 /**
  * Defines the horizontal and vertical collision behavior of the Popup.
  */

package/models/PopupProps.d.ts

@@ -5,13 +5,13 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { Collision } from './Collision.js';
-import { Align } from './Align.js';
-import { OpenEvent, CloseEvent, PositionEvent, MouseDownOutsideEvent } from './Events.js';
-import { Offset } from './Offset.js';
-import { PopupAnimation } from './PopupAnimation.js';
-import { Margin } from './Margin.js';
-import { PositionMode } from './PositionMode.js';
+import { Collision } from './Collision';
+import { Align } from './Align';
+import { OpenEvent, CloseEvent, PositionEvent, MouseDownOutsideEvent } from './Events';
+import { Offset } from './Offset';
+import { PopupAnimation } from './PopupAnimation';
+import { Margin } from './Margin';
+import { PositionMode } from './PositionMode';
 import { PopupSettings } from '@progress/kendo-popup-common';
 import { PopupClassStructure } from '@progress/kendo-react-common';
 /**

package/models/PopupSettings.d.ts

@@ -5,13 +5,13 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { Collision } from './Collision.js';
-import { Align } from './Align.js';
-import { OpenEvent, CloseEvent } from './Events.js';
-import { Offset } from './Offset.js';
-import { PopupAnimation } from './PopupAnimation.js';
-import { Margin } from './Margin.js';
-import { PositionMode } from './PositionMode.js';
+import { Collision } from './Collision';
+import { Align } from './Align';
+import { OpenEvent, CloseEvent } from './Events';
+import { Offset } from './Offset';
+import { PopupAnimation } from './PopupAnimation';
+import { Margin } from './Margin';
+import { PositionMode } from './PositionMode';
 import { PopupSettings as PopupSettingsBase } from '@progress/kendo-popup-common';
 /**
  * @hidden

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = Object.freeze({
     productName: 'KendoReact',
     productCode: 'KENDOUIREACT',
     productCodes: ['KENDOUIREACT'],
-    publishDate: 1776954728,
-    version: '14.4.1-develop.9',
+    publishDate: 1777886085,
+    version: '14.4.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/components/my-license/'
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-popup",
-  "version": "14.4.1-develop.9",
+  "version": "14.4.1",
   "description": "React Popup positions a piece of content next to a specific anchor component. KendoReact Popup package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -27,7 +27,7 @@
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.7.2",
     "@progress/kendo-popup-common": "^1.9.5",
-    "@progress/kendo-react-common": "14.4.1-develop.9",
+    "@progress/kendo-react-common": "14.4.1",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
@@ -54,7 +54,7 @@
     "package": {
       "productName": "KendoReact",
       "productCode": "KENDOUIREACT",
-      "publishDate": 1776954728,
+      "publishDate": 1777886085,
       "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
     }
   },