@progress/kendo-react-popup 12.0.3-develop.1 → 12.1.0-develop.1

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

package/Popup.mjs

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

package/animation.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 e=require("@progress/kendo-react-common"),w=(i,s,t)=>{i.style.transitionDuration="",s&&i.classList.remove(...s.split(" ")),t&&i.classList.remove(...t.split(" "))},y=typeof window!="undefined"&&/Firefox/.test(window.navigator.userAgent),p=(i,s,t,o,c,f)=>{if(t===0)return c();const r=e.classNames(e.uPopup.slide({direction:s,type:o,c:f})),a=e.classNames(e.uPopup.slideActive({direction:s,type:o,c:f})),u=n=>{n.target===i&&(i.removeEventListener("transitionend",u),w(i,r,a),o==="exit"?i.style.display="none":i.style.display="",c())};i.addEventListener("transitionend",u);const l=i.ownerDocument;if(!l)return;const d=l.defaultView;if(!d)return;const v=()=>{w(i,r,a),o==="enter"&&(i.style.display=""),r&&i.classList.add(...r.split(" ").filter(n=>n)),d.requestAnimationFrame(()=>{i.style.transitionDuration=t+"ms",i.classList.add(...a.split(" ").filter(n=>n))})};y?d.requestAnimationFrame(v):v()};exports.slide=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("@progress/kendo-react-common"),y=(i,s,t)=>{i.style.transitionDuration="",s&&i.classList.remove(...s.split(" ")),t&&i.classList.remove(...t.split(" "))},p=typeof window!="undefined"&&/Firefox/.test(window.navigator.userAgent),L=(i,s,t,c,f,u,d)=>{if(s===0)return c();const m=`${u}Active`,o=a.classNames(a.uPopup[u]({direction:d,type:t,c:f})),r=a.classNames(a.uPopup[m]({direction:d,type:t,c:f})),l=n=>{n.target===i&&(i.removeEventListener("transitionend",l),y(i,o,r),t==="exit"?i.style.display="none":i.style.display="",c())};i.addEventListener("transitionend",l);const v=i.ownerDocument;if(!v)return;const e=v.defaultView;if(!e)return;const w=()=>{y(i,o,r),t==="enter"&&(i.style.display=""),o&&i.classList.add(...o.split(" ").filter(n=>n)),e.requestAnimationFrame(()=>{i.style.transitionDuration=s+"ms",i.classList.add(...r.split(" ").filter(n=>n))})};p?e.requestAnimationFrame(w):w()};exports.animations=L;

package/animation.mjs

@@ -5,29 +5,29 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { classNames as w, uPopup as v } from "@progress/kendo-react-common";
-const p = (i, s, t) => {
+import { classNames as l, uPopup as p } from "@progress/kendo-react-common";
+const y = (i, s, t) => {
   i.style.transitionDuration = "", s && i.classList.remove(...s.split(" ")), t && i.classList.remove(...t.split(" "));
-}, y = typeof window != "undefined" && /Firefox/.test(window.navigator.userAgent), x = (i, s, t, r, d, f) => {
-  if (t === 0)
-    return d();
-  const o = w(v.slide({ direction: s, type: r, c: f })), a = w(v.slideActive({ direction: s, type: r, c: f })), c = (n) => {
-    n.target === i && (i.removeEventListener("transitionend", c), p(i, o, a), r === "exit" ? i.style.display = "none" : i.style.display = "", d());
+}, A = typeof window != "undefined" && /Firefox/.test(window.navigator.userAgent), x = (i, s, t, f, c, e, d) => {
+  if (s === 0)
+    return f();
+  const L = `${e}Active`, o = l(p[e]({ direction: d, type: t, c })), r = l(p[L]({ direction: d, type: t, c })), u = (n) => {
+    n.target === i && (i.removeEventListener("transitionend", u), y(i, o, r), t === "exit" ? i.style.display = "none" : i.style.display = "", f());
   };
-  i.addEventListener("transitionend", c);
-  const u = i.ownerDocument;
-  if (!u)
+  i.addEventListener("transitionend", u);
+  const v = i.ownerDocument;
+  if (!v)
     return;
-  const e = u.defaultView;
-  if (!e)
+  const a = v.defaultView;
+  if (!a)
     return;
-  const l = () => {
-    p(i, o, a), r === "enter" && (i.style.display = ""), o && i.classList.add(...o.split(" ").filter((n) => n)), e.requestAnimationFrame(() => {
-      i.style.transitionDuration = t + "ms", i.classList.add(...a.split(" ").filter((n) => n));
+  const w = () => {
+    y(i, o, r), t === "enter" && (i.style.display = ""), o && i.classList.add(...o.split(" ").filter((n) => n)), a.requestAnimationFrame(() => {
+      i.style.transitionDuration = s + "ms", i.classList.add(...r.split(" ").filter((n) => n));
     });
   };
-  y ? e.requestAnimationFrame(l) : l();
+  A ? a.requestAnimationFrame(w) : w();
 };
 export {
-  x as slide
+  x as animations
 };

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 u=(e,n,t)=>{e.style.transitionDuration="",n&&e.classList.remove(...n.split(" ")),t&&e.classList.remove(...t.split(" "))},a="undefined"!=typeof window&&/Firefox/.test(window.navigator.userAgent),p=(e,n,t,o,i,s)=>{if(0===t)return i();const l=r.classNames(r.uPopup.slide({direction:n,type:o,c:s})),c=r.classNames(r.uPopup.slideActive({direction:n,type:o,c:s})),p=n=>{n.target===e&&(e.removeEventListener("transitionend",p),u(e,l,c),e.style.display="exit"===o?"none":"",i())};e.addEventListener("transitionend",p);const d=e.ownerDocument;if(!d)return;const f=d.defaultView;if(!f)return;const m=()=>{u(e,l,c),"enter"===o&&(e.style.display=""),l&&e.classList.add(...l.split(" ").filter((e=>e))),f.requestAnimationFrame((()=>{e.style.transitionDuration=t+"ms",e.classList.add(...c.split(" ").filter((e=>e)))}))};a?f.requestAnimationFrame(m):m()},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:u=h.popupAlign,offset:a=h.offset,animate:m=h.animate,show:g=h.show,margin:v=h.margin,positionMode:w=h.positionMode,appendTo:y,contentKey:P,anchor:A,scale:b,role:O,onKeyDown:C,onPosition:T,onOpen:x,onMouseDownOutside:D,onClose:E,className:N,popupClass:L,id:R,style:z,children:j}=t,K=r.useUnstyled(),M=t.unstyled||K,k=M&&M.uPopup,[q,I]=l.useState({current:"hidden",previous:"hidden",props:{}}),H=e=>{null==window||window.addEventListener("mousedown",V),F(e),U(e.firstChild,"enter",S),I({...te,current:"shown",previous:te.current})},F=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:A,anchorAlign:s,element:e,elementAlign:u,offset:a,margin:v,positionMode:w,scale:b}),l=i.positionElement({anchor:A,anchorAlign:s,element:e,elementAlign:u,collisions:o,currentLocation:r,margin:v});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:_.current,flipped:l.flipped,fitted:l.fitted};T.call(void 0,e)}},S=()=>{const e=$.current;e&&(g&&e.classList.add(...r.classNames(r.uPopup.animationContainerShown({c:k})).split(" ").filter((e=>e))),B(e),x&&x.call(void 0,{target:_.current}))},U=(n,t,o)=>{if(!u)return;let r;const{horizontal:i,vertical:s}=u;r="object"==typeof e.animate&&e.animate.direction?e.animate.direction:"left"===i&&"center"===s?"right":"right"===i&&"center"===s?"left":"top"===s?"down":"up";X.current&&X.current.flipped&&(r={down:"up",up:"down",left:"right",right:"left"}[r]),p(n,r,Z()[t],t,o,k)},V=e=>{var n;const t=null===(null==(n=null==e?void 0:e.target)?void 0:n.closest(".k-animation-container")),o=(null==A?void 0:A.contains(null==e?void 0:e.target))||!1;if(t){if(D){const n={target:_.current,event:e,state:q,isAnchorClicked:o};D.call(void 0,n)}null==window||window.removeEventListener("mousedown",V)}},W=()=>{"hiding"===te.current&&("shown"===te.previous||"reposition"===te.previous)&&I({...te,current:"hidden",previous:te.current}),E&&E.call(void 0,{target:_.current})},Z=()=>{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(A||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 u=(new Date).getTime();!l&&!1===t.leading&&(l=u);const a=n-(u-l);return r=void 0,i=arguments,a<=0||a>n?(o&&(clearTimeout(o),o=void 0),l=u,s=e.apply(r,i),o||(r=i=null)):!o&&!1!==t.trailing&&(o=window.setTimeout(c,a)),s}}((()=>{$.current&&"hidden"!==te.current&&"hiding"!==te.current&&I({...q,current:"reposition",previous:te.current})}),16.666666666666668),Q=r.useZIndexContext()||0,X=l.useRef(void 0),Y=l.useRef(void 0),$=l.useRef(null),_=l.useRef(null),ee=l.useRef({}),ne=l.useRef(!1);l.useImperativeHandle(_,(()=>({element:$.current,setPosition:F,props:e}))),l.useImperativeHandle(n,(()=>_.current));const te=l.useMemo((()=>{const e={...q,props:{show:g,anchor:A,anchorAlign:s,appendTo:y,collision:o,popupAlign:u,className:N,popupClass:L,style:z,offset:a,contentKey:P}};return g?"hidden"===q.current||"hiding"===q.current?{...e,current:"showing",previous:q.current}:"showing"===q.current?{...e,current:"shown",previous:q.current}:"shown"!==q.current||f(a,q.props.offset)&&f(s,q.props.anchorAlign)&&f(y,q.props.appendTo)&&f(o,q.props.collision)&&f(u,q.props.popupAlign)&&f(z,q.props.style)&&A===q.props.anchor&&L===q.props.popupClass&&N===q.props.className?e:{...e,current:"reposition",previous:q.current}:"hiding"===q.current||"hidden"===q.current?{...e,current:"hidden",previous:q.current}:{...e,current:"hiding",previous:q.current}}),[g,A,s,y,o,u,N,L,z,a,P,q]);l.useEffect((()=>{"hiding"===te.current&&!ne.current&&$.current?(ne.current=!0,(e=>{if(!g){const n=M&&M.uPopup;e.classList.remove(...r.classNames(r.uPopup.animationContainerShown({c:n})).split(" ").filter((e=>e)))}G()})($.current),U($.current.firstChild,"exit",W)):(ne.current=!1,"showing"===te.current&&$.current&&!$.current.classList.contains("k-animation-container-shown")?H($.current):"hiding"===te.current&&$.current?W():"reposition"===te.current&&"shown"===te.previous?setTimeout((()=>{I({...te,current:"shown",previous:te.current})}),0):"shown"===te.current&&ee.current.contentKey!==P&&$.current&&F($.current)),"reposition"===te.current&&("shown"===te.previous||"showing"===te.previous)&&$.current&&F($.current),ee.current={contentKey:P}}),[te]),l.useEffect((()=>("showing"===te.current&&$.current&&H($.current),()=>{G()})),[]);const oe=y||(r.canUseDOM?A&&A.ownerDocument?A.ownerDocument.body:document.body:void 0),re=Object.assign({},{position:w,top:0,left:-1e4},z||{}),ie="hiding"===te.current;if((g||ie)&&oe){const e=Q?Q+1:100,n=l.createElement(r.ZIndexContext.Provider,{value:e},l.createElement("div",{onKeyDown:C,className:r.classNames(r.uPopup.animationContainer({c:k}),N),id:R,ref:$,style:{zIndex:e,...re}},l.createElement("div",{className:r.classNames(r.uPopup.animationChild({c:k})),style:{transitionDelay:"0ms"}},l.createElement("div",{role:O,className:r.classNames(r.uPopup.popup({c:k}),L)},j))));return null!==y?c.createPortal(n,oe):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"};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({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=>{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}));

package/index.d.mts

@@ -38,6 +38,22 @@ export declare interface Align extends AlignStrategy {
     vertical: 'top' | 'center' | 'bottom';
 }
 
+/**
+ * The available animation types for the Popup component.
+ *
+ * Possible values: 'slide', 'zoom', 'push', 'expand', 'fade'.
+ *
+ * @example
+ * <Popup animation={{ type: 'slide' }} />
+ */
+declare const animationTypes: {
+    readonly slide: "slide";
+    readonly zoom: "zoom";
+    readonly push: "push";
+    readonly expand: "expand";
+    readonly fade: "fade";
+};
+
 /**
  * Defines the horizontal and vertical collision behavior of the Popup.
  */
@@ -62,6 +78,44 @@ export declare interface Collision {
  */
 export declare type CollisionType = CollisionType_2;
 
+/**
+ * Defines the expand animation settings for the Popup component.
+ *
+ * Use this to configure expand type and direction
+ *
+ * @example
+ * <Popup animation={{ type: 'expand', direction: 'vertical' }} />
+ */
+export declare interface ExpandPopupAnimation {
+    /**
+     * The type of the animation. Must be 'expand'.
+     */
+    type: typeof animationTypes.expand;
+    /**
+     * The direction of the expand animation. Possible values: 'horizontal', 'vertical'.
+     */
+    direction: PopupExpandDirection;
+}
+
+/**
+ * Defines the fade animation settings for the Popup component.
+ *
+ * Use this to configure fade type. Direction is always 'none'.
+ *
+ * @example
+ * <Popup animation={{ type: 'fade' }} />
+ */
+export declare interface FadePopupAnimation {
+    /**
+     * The type of the animation. Must be 'fade'.
+     */
+    type: typeof animationTypes.fade;
+    /**
+     * @hidden
+     */
+    direction?: PopupNoDirection;
+}
+
 /**
  * Defines the horizontal and the vertical margin offset of the component.
  */
@@ -118,9 +172,19 @@ export declare interface Offset extends OffsetPosition {
 export declare const Popup: React_2.ForwardRefExoticComponent<PopupProps & React_2.RefAttributes<PopupHandle | null>>;
 
 /**
- * The animation settings for the Popup component.
+ * The animation settings for the Popup component
  */
-export declare interface PopupAnimation {
+export declare type PopupAnimation = PopupAnimationBase & (FadePopupAnimation | SlidePopupAnimation | ZoomPopupAnimation | PushPopupAnimation | ExpandPopupAnimation);
+
+/**
+ * Defines the base animation settings for the Popup component.
+ *
+ * Includes duration properties for opening and closing animations
+ *
+ * @example
+ * <Popup animation={{ openDuration: 500, closeDuration: 200 }} />
+ */
+export declare interface PopupAnimationBase {
     /**
      * The duration of the opening animation in milliseconds. Defaults to `300ms`.
      */
@@ -129,12 +193,38 @@ export declare interface PopupAnimation {
      * The duration of the closing animation in milliseconds. Defaults to `300ms`.
      */
     closeDuration?: number;
-    /**
-     * The direction of the animation.
-     */
-    direction?: 'left' | 'right' | 'up' | 'down';
 }
 
+/**
+ * Represents all possible direction values for Popup animations.
+ *
+ * Includes directions for slide, zoom, push, expand, and fade animations.
+ * Useful for type-safe direction assignment in animation settings.
+ *
+ * Possible values: 'left', 'right', 'up', 'down', 'in', 'out', 'horizontal', 'vertical', 'none'.
+ */
+export declare type PopupAnimationDirection = NonNullable<FadePopupAnimation['direction'] | SlidePopupAnimation['direction'] | ZoomPopupAnimation['direction'] | PushPopupAnimation['direction'] | ExpandPopupAnimation['direction']>;
+
+/**
+ * The type representing all possible animation type values.
+ *
+ * Possible values: 'slide', 'zoom', 'push', 'expand', 'fade'
+ *
+ * @example
+ * <Popup animation={{ type: 'fade' }} />
+ */
+export declare type PopupAnimationType = (typeof animationTypes)[keyof typeof animationTypes];
+
+/**
+ * The possible base directions for slide and push animations.
+ *
+ * Possible values: 'left', 'right', 'up', 'down'.
+ *
+ * @example
+ * <Popup animation={{ direction: 'left' }} />
+ */
+export declare type PopupBaseDirections = 'left' | 'right' | 'up' | 'down';
+
 /**
  * Represents the object of the `Close` Popup event.
  */
@@ -145,6 +235,16 @@ export declare interface PopupCloseEvent {
     target: PopupHandle;
 }
 
+/**
+ * The possible directions for expand animations.
+ *
+ * Possible values: 'horizontal', 'vertical'.
+ *
+ * @example
+ * <Popup animation={{ type: 'expand', direction: 'vertical' }} />
+ */
+export declare type PopupExpandDirection = 'horizontal' | 'vertical';
+
 /**
  * The KendoReact PopupHandle component.
  */
@@ -159,6 +259,16 @@ export declare interface PopupHandle {
     props: PopupProps;
 }
 
+/**
+ * Represents no direction for fade animation.
+ *
+ * Possible value: 'none'.
+ *
+ * @example
+ * <Popup animation={{ type: 'fade', direction: 'none' }} />
+ */
+export declare type PopupNoDirection = 'none';
+
 /**
  * Represents the object of the `Open` Popup event.
  */
@@ -427,6 +537,16 @@ declare interface PopupState {
     };
 }
 
+/**
+ * The possible directions for zoom animations.
+ *
+ * Possible values: 'in', 'out'.
+ *
+ * @example
+ * <Popup animation={{ type: 'zoom', direction: 'in' }} />
+ */
+export declare type PopupZoomDirections = 'in' | 'out';
+
 /**
  * Represents the object of the `Position` Popup event.
  */
@@ -450,6 +570,44 @@ export declare interface PositionEvent {
  */
 export declare type PositionMode = PositionMode_2;
 
+/**
+ * Defines the push animation settings for the Popup component.
+ *
+ * Use this to configure push type and direction
+ *
+ * @example
+ * <Popup animation={{ type: 'push', direction: 'down' }} />
+ */
+export declare interface PushPopupAnimation {
+    /**
+     * The type of the animation. Must be 'push'.
+     */
+    type: typeof animationTypes.push;
+    /**
+     * The direction of the push animation. Possible values: 'left', 'right', 'up', 'down'.
+     */
+    direction: PopupBaseDirections;
+}
+
+/**
+ * Defines the slide animation settings for the Popup component.
+ *
+ * Use this to configure slide type and direction
+ *
+ * @example
+ * <Popup animation={{ type: 'slide', direction: 'left' }} />
+ */
+export declare interface SlidePopupAnimation {
+    /**
+     * The type of the animation. Default is 'slide'.
+     */
+    type?: typeof animationTypes.slide;
+    /**
+     * The direction of the slide animation. Possible values: 'left', 'right', 'up', 'down'.
+     */
+    direction?: PopupBaseDirections;
+}
+
 declare enum Status {
     hiding = "hiding",
     hidden = "hidden",
@@ -458,4 +616,23 @@ declare enum Status {
     reposition = "reposition"
 }
 
+/**
+ * Defines the zoom animation settings for the Popup component.
+ *
+ * Use this to configure zoom type and direction
+ *
+ * @example
+ * <Popup animation={{ type: 'zoom', direction: 'in' }} />
+ */
+export declare interface ZoomPopupAnimation {
+    /**
+     * The type of the animation. Must be 'zoom'.
+     */
+    type: typeof animationTypes.zoom;
+    /**
+     * The direction of the zoom animation. Possible values: 'in', 'out'.
+     */
+    direction: PopupZoomDirections;
+}
+
 export { }

package/index.d.ts

@@ -38,6 +38,22 @@ export declare interface Align extends AlignStrategy {
     vertical: 'top' | 'center' | 'bottom';
 }
 
+/**
+ * The available animation types for the Popup component.
+ *
+ * Possible values: 'slide', 'zoom', 'push', 'expand', 'fade'.
+ *
+ * @example
+ * <Popup animation={{ type: 'slide' }} />
+ */
+declare const animationTypes: {
+    readonly slide: "slide";
+    readonly zoom: "zoom";
+    readonly push: "push";
+    readonly expand: "expand";
+    readonly fade: "fade";
+};
+
 /**
  * Defines the horizontal and vertical collision behavior of the Popup.
  */
@@ -62,6 +78,44 @@ export declare interface Collision {
  */
 export declare type CollisionType = CollisionType_2;
 
+/**
+ * Defines the expand animation settings for the Popup component.
+ *
+ * Use this to configure expand type and direction
+ *
+ * @example
+ * <Popup animation={{ type: 'expand', direction: 'vertical' }} />
+ */
+export declare interface ExpandPopupAnimation {
+    /**
+     * The type of the animation. Must be 'expand'.
+     */
+    type: typeof animationTypes.expand;
+    /**
+     * The direction of the expand animation. Possible values: 'horizontal', 'vertical'.
+     */
+    direction: PopupExpandDirection;
+}
+
+/**
+ * Defines the fade animation settings for the Popup component.
+ *
+ * Use this to configure fade type. Direction is always 'none'.
+ *
+ * @example
+ * <Popup animation={{ type: 'fade' }} />
+ */
+export declare interface FadePopupAnimation {
+    /**
+     * The type of the animation. Must be 'fade'.
+     */
+    type: typeof animationTypes.fade;
+    /**
+     * @hidden
+     */
+    direction?: PopupNoDirection;
+}
+
 /**
  * Defines the horizontal and the vertical margin offset of the component.
  */
@@ -118,9 +172,19 @@ export declare interface Offset extends OffsetPosition {
 export declare const Popup: React_2.ForwardRefExoticComponent<PopupProps & React_2.RefAttributes<PopupHandle | null>>;
 
 /**
- * The animation settings for the Popup component.
+ * The animation settings for the Popup component
  */
-export declare interface PopupAnimation {
+export declare type PopupAnimation = PopupAnimationBase & (FadePopupAnimation | SlidePopupAnimation | ZoomPopupAnimation | PushPopupAnimation | ExpandPopupAnimation);
+
+/**
+ * Defines the base animation settings for the Popup component.
+ *
+ * Includes duration properties for opening and closing animations
+ *
+ * @example
+ * <Popup animation={{ openDuration: 500, closeDuration: 200 }} />
+ */
+export declare interface PopupAnimationBase {
     /**
      * The duration of the opening animation in milliseconds. Defaults to `300ms`.
      */
@@ -129,12 +193,38 @@ export declare interface PopupAnimation {
      * The duration of the closing animation in milliseconds. Defaults to `300ms`.
      */
     closeDuration?: number;
-    /**
-     * The direction of the animation.
-     */
-    direction?: 'left' | 'right' | 'up' | 'down';
 }
 
+/**
+ * Represents all possible direction values for Popup animations.
+ *
+ * Includes directions for slide, zoom, push, expand, and fade animations.
+ * Useful for type-safe direction assignment in animation settings.
+ *
+ * Possible values: 'left', 'right', 'up', 'down', 'in', 'out', 'horizontal', 'vertical', 'none'.
+ */
+export declare type PopupAnimationDirection = NonNullable<FadePopupAnimation['direction'] | SlidePopupAnimation['direction'] | ZoomPopupAnimation['direction'] | PushPopupAnimation['direction'] | ExpandPopupAnimation['direction']>;
+
+/**
+ * The type representing all possible animation type values.
+ *
+ * Possible values: 'slide', 'zoom', 'push', 'expand', 'fade'
+ *
+ * @example
+ * <Popup animation={{ type: 'fade' }} />
+ */
+export declare type PopupAnimationType = (typeof animationTypes)[keyof typeof animationTypes];
+
+/**
+ * The possible base directions for slide and push animations.
+ *
+ * Possible values: 'left', 'right', 'up', 'down'.
+ *
+ * @example
+ * <Popup animation={{ direction: 'left' }} />
+ */
+export declare type PopupBaseDirections = 'left' | 'right' | 'up' | 'down';
+
 /**
  * Represents the object of the `Close` Popup event.
  */
@@ -145,6 +235,16 @@ export declare interface PopupCloseEvent {
     target: PopupHandle;
 }
 
+/**
+ * The possible directions for expand animations.
+ *
+ * Possible values: 'horizontal', 'vertical'.
+ *
+ * @example
+ * <Popup animation={{ type: 'expand', direction: 'vertical' }} />
+ */
+export declare type PopupExpandDirection = 'horizontal' | 'vertical';
+
 /**
  * The KendoReact PopupHandle component.
  */
@@ -159,6 +259,16 @@ export declare interface PopupHandle {
     props: PopupProps;
 }
 
+/**
+ * Represents no direction for fade animation.
+ *
+ * Possible value: 'none'.
+ *
+ * @example
+ * <Popup animation={{ type: 'fade', direction: 'none' }} />
+ */
+export declare type PopupNoDirection = 'none';
+
 /**
  * Represents the object of the `Open` Popup event.
  */
@@ -427,6 +537,16 @@ declare interface PopupState {
     };
 }
 
+/**
+ * The possible directions for zoom animations.
+ *
+ * Possible values: 'in', 'out'.
+ *
+ * @example
+ * <Popup animation={{ type: 'zoom', direction: 'in' }} />
+ */
+export declare type PopupZoomDirections = 'in' | 'out';
+
 /**
  * Represents the object of the `Position` Popup event.
  */
@@ -450,6 +570,44 @@ export declare interface PositionEvent {
  */
 export declare type PositionMode = PositionMode_2;
 
+/**
+ * Defines the push animation settings for the Popup component.
+ *
+ * Use this to configure push type and direction
+ *
+ * @example
+ * <Popup animation={{ type: 'push', direction: 'down' }} />
+ */
+export declare interface PushPopupAnimation {
+    /**
+     * The type of the animation. Must be 'push'.
+     */
+    type: typeof animationTypes.push;
+    /**
+     * The direction of the push animation. Possible values: 'left', 'right', 'up', 'down'.
+     */
+    direction: PopupBaseDirections;
+}
+
+/**
+ * Defines the slide animation settings for the Popup component.
+ *
+ * Use this to configure slide type and direction
+ *
+ * @example
+ * <Popup animation={{ type: 'slide', direction: 'left' }} />
+ */
+export declare interface SlidePopupAnimation {
+    /**
+     * The type of the animation. Default is 'slide'.
+     */
+    type?: typeof animationTypes.slide;
+    /**
+     * The direction of the slide animation. Possible values: 'left', 'right', 'up', 'down'.
+     */
+    direction?: PopupBaseDirections;
+}
+
 declare enum Status {
     hiding = "hiding",
     hidden = "hidden",
@@ -458,4 +616,23 @@ declare enum Status {
     reposition = "reposition"
 }
 
+/**
+ * Defines the zoom animation settings for the Popup component.
+ *
+ * Use this to configure zoom type and direction
+ *
+ * @example
+ * <Popup animation={{ type: 'zoom', direction: 'in' }} />
+ */
+export declare interface ZoomPopupAnimation {
+    /**
+     * The type of the animation. Must be 'zoom'.
+     */
+    type: typeof animationTypes.zoom;
+    /**
+     * The direction of the zoom animation. Possible values: 'in', 'out'.
+     */
+    direction: PopupZoomDirections;
+}
+
 export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-popup",
-  "version": "12.0.3-develop.1",
+  "version": "12.1.0-develop.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.0",
     "@progress/kendo-popup-common": "^1.9.0",
-    "@progress/kendo-react-common": "12.0.3-develop.1",
+    "@progress/kendo-react-common": "12.1.0-develop.1",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
   },