@progress/kendo-react-popup 8.3.0-develop.1 → 8.3.0-develop.10

package/Popup.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),a=require("./PopupWithoutContext.js");function s(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const n=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(e,o,n.get?n:{enumerable:!0,get:()=>t[o]})}}return e.default=t,Object.freeze(e)}const r=s(u),c=r.createContext(t=>t),p=r.forwardRef((t,e)=>{const n=r.useContext(c).call(void 0,t);return r.createElement(a.PopupWithoutContext,{ref:e,...n})});p.displayName="Popup";exports.Popup=p;exports.PopupPropsContext=c;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),a=require("./PopupWithoutContext.js"),l=require("@progress/kendo-react-common");function i(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const r=i(s),c=r.createContext(e=>e),u=r.forwardRef((e,o)=>{const t=r.useContext(c),n=l.useUnstyled(),p=t.call(void 0,e);return r.createElement(a.PopupWithoutContext,{ref:o,unstyled:n,...p})});u.displayName="Popup";exports.Popup=u;exports.PopupPropsContext=c;

package/Popup.mjs

@@ -6,20 +6,22 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as o from "react";
-import { PopupWithoutContext as r } from "./PopupWithoutContext.mjs";
-const c = o.createContext((t) => t), n = o.forwardRef((t, e) => {
-  const p = o.useContext(c).call(void 0, t);
-  return /* @__PURE__ */ o.createElement(
-    r,
+import * as t from "react";
+import { PopupWithoutContext as s } from "./PopupWithoutContext.mjs";
+import { useUnstyled as c } from "@progress/kendo-react-common";
+const u = t.createContext((o) => o), a = t.forwardRef((o, e) => {
+  const p = t.useContext(u), r = c(), n = p.call(void 0, o);
+  return /* @__PURE__ */ t.createElement(
+    s,
     {
       ref: e,
-      ...p
+      unstyled: r,
+      ...n
     }
   );
 });
-n.displayName = "Popup";
+a.displayName = "Popup";
 export {
-  n as Popup,
-  c as PopupPropsContext
+  a as Popup,
+  u as PopupPropsContext
 };

package/PopupWithoutContext.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("react"),C=require("react-dom"),e=require("prop-types"),D=require("./animation.js"),f=require("@progress/kendo-react-common"),n=require("@progress/kendo-popup-common"),w=require("./util.js"),E=require("./package-metadata.js");function _(a){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const t in a)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(a,t);Object.defineProperty(i,t,o.get?o:{enumerable:!0,get:()=>a[t]})}}return i.default=a,Object.freeze(i)}const O=_(N),I=_(C),R=100,x=1;function P(a,i){if(a===i)return!0;if(!!a!=!!i)return!1;const t=Object.getOwnPropertyNames(a),o=Object.getOwnPropertyNames(i);if(t.length!==o.length)return!1;for(let l=0;l<t.length;l++){let s=t[l];if(a[s]!==i[s])return!1}return!0}const M={left:-1e3,top:0},z="k-animation-container",b="k-animation-container-shown",S="k-child-animation-container",j="k-popup",v=class v extends O.Component{constructor(i){super(i),this.context=0,this.state={current:"hidden",previous:"hidden",props:{}},this._popup=null,this.show=t=>{this.setPosition(t),this.animate(t.firstChild,"enter",this.onOpened),this.setState({current:"shown",previous:this.state.current})},this.setPosition=t=>{let{anchorAlign:o,popupAlign:l,collision:s,offset:c,anchor:p,margin:h,scale:g,positionMode:u}=this.props;const{width:d,height:m}=t.style;t.style.width=t.offsetWidth+"px",t.style.height=t.offsetHeight+"px";const A=n.alignElement({anchor:p,anchorAlign:o,element:t,elementAlign:l,offset:c,margin:h,positionMode:u,scale:g}),r=n.positionElement({anchor:p,anchorAlign:o,element:t,elementAlign:l,collisions:s,currentLocation:A,margin:this.props.margin});if(t.style.top=r.offset.top+"px",t.style.left=r.offset.left+"px",t.style.width=d,t.style.height=m,this._collisions={fit:r.fit,fitted:r.fitted,flip:r.flip,flipped:r.flipped},this.props.onPosition){const T={target:this,flipped:r.flipped,fitted:r.fitted};this.props.onPosition.call(void 0,T)}},this.onOpened=()=>{const t=this._popup;t&&(this.props.show&&t.classList.add(b),this.attachRepositionHandlers(t),this.props.onOpen&&this.props.onOpen.call(void 0,{target:this}))},this.animate=(t,o,l)=>{if(!this.props.popupAlign)return;let s;const{horizontal:c,vertical:p}=this.props.popupAlign;c==="left"&&p==="center"?s="right":c==="right"&&p==="center"?s="left":p==="top"?s="down":s="up";const h={down:"up",up:"down",left:"right",right:"left"};this._collisions&&this._collisions.flipped&&(s=h[s]),D.slide(t,s,this.animationDuration[o],o,l)},this.onClosing=t=>{this.props.show||t.classList.remove(b),this.detachRepositionHandlers()},this.onClosed=()=>{this.state.current==="hiding"&&this.state.previous==="shown"&&this.setState({current:"hidden",previous:this.state.current}),this.props.onClose&&this.props.onClose.call(void 0,{target:this})},this.getCurrentZIndex=()=>this.context?this.context+x:R,f.validatePackage(E.packageMetadata),this.reposition=w.throttle(this.reposition.bind(this),w.FRAME_DURATION)}get element(){return this._popup}static getDerivedStateFromProps(i,t){const{show:o,anchor:l,anchorAlign:s,appendTo:c,collision:p,popupAlign:h,className:g,popupClass:u,style:d,offset:m,contentKey:A}=i,r={...t,props:{show:o,anchor:l,anchorAlign:s,appendTo:c,collision:p,popupAlign:h,className:g,popupClass:u,style:d,offset:m,contentKey:A}};return i.show?t.current==="hidden"||t.current==="hiding"?{...r,current:"showing",previous:t.current}:t.current==="showing"?{...r,current:"shown",previous:t.current}:t.current==="shown"&&(!P(m,t.props.offset)||!P(s,t.props.anchorAlign)||!P(c,t.props.appendTo)||!P(p,t.props.collision)||!P(h,t.props.popupAlign)||!P(d,t.props.style)||l!==t.props.anchor||u!==t.props.popupClass||g!==t.props.className)?{...r,current:"reposition",previous:t.current}:r:t.current==="hiding"||t.current==="hidden"?{...r,current:"hidden",previous:t.current}:{...r,current:"hiding",previous:t.current}}componentDidUpdate(i){this.state.current==="showing"&&this._popup?this.show(this._popup):this.state.current==="hiding"&&this._popup?(this.onClosing(this._popup),this.animate(this._popup.firstChild,"exit",this.onClosed)):this.state.current==="reposition"&&this.state.previous==="shown"?setTimeout(()=>{this.setState({current:"shown",previous:this.state.current})},0):this.state.current==="shown"&&i.contentKey!==this.props.contentKey&&this._popup&&this.setPosition(this._popup)}componentDidMount(){this.state.current==="showing"&&this._popup&&this.show(this._popup)}componentWillUnmount(){this.detachRepositionHandlers()}render(){const{children:i,className:t,popupClass:o,show:l,id:s,positionMode:c}=this.props,p=this.props.appendTo?this.props.appendTo:f.canUseDOM?this.props.anchor&&this.props.anchor.ownerDocument?this.props.anchor.ownerDocument.body:document.body:void 0;this.state.current==="reposition"&&this.state.previous==="shown"&&this._popup&&this.setPosition(this._popup);const h=Object.assign({},{position:c,top:0,left:-1e4},this.props.style||{}),g=this.state.current==="hiding";if((l||g)&&p){const u=this.getCurrentZIndex(),d=O.createElement(f.ZIndexContext.Provider,{value:u},O.createElement("div",{onKeyDown:this.props.onKeyDown,className:f.classNames(z,t),id:s,ref:m=>this._popup=m,style:{zIndex:u,...h}},O.createElement("div",{className:f.classNames(S),style:{transitionDelay:"0ms"}},O.createElement("div",{role:this.props.role,className:f.classNames(j,o)},i))));return this.props.appendTo!==null?I.createPortal(d,p):d}return null}get animationDuration(){const i=this.props.animate;let t=0,o=0;return i&&(i===!0?t=o=300:(t=i.openDuration||0,o=i.closeDuration||0)),{enter:t,exit:o}}attachRepositionHandlers(i){this.detachRepositionHandlers(),this._scrollableParents=n.domUtils.scrollableParents(this.props.anchor||i),this._scrollableParents&&this._scrollableParents.map(t=>t.addEventListener("scroll",this.reposition)),window.addEventListener("resize",this.reposition)}detachRepositionHandlers(){this._scrollableParents&&(this._scrollableParents.map(i=>i.removeEventListener("scroll",this.reposition)),this._scrollableParents=void 0),window.removeEventListener("resize",this.reposition)}reposition(){this.setState({current:"reposition",previous:this.state.current})}};v.propTypes={anchor:function(i){const t=i.anchor;return t&&typeof t.nodeType!="number"?new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed."):null},appendTo:function(i){const t=i.appendTo;return t&&typeof t.nodeType!="number"?new Error("Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed."):null},className:e.oneOfType([e.string,e.arrayOf(e.string),e.object]),id:e.string,popupClass:e.oneOfType([e.string,e.arrayOf(e.string),e.object]),collision:e.shape({horizontal:e.oneOf([n.Collision.fit,n.Collision.flip,n.Collision.none]),vertical:e.oneOf([n.Collision.fit,n.Collision.flip,n.Collision.none])}),anchorAlign:e.shape({horizontal:e.oneOf([n.AlignPoint.left,n.AlignPoint.center,n.AlignPoint.right]),vertical:e.oneOf([n.AlignPoint.top,n.AlignPoint.center,n.AlignPoint.bottom])}),popupAlign:e.shape({horizontal:e.oneOf([n.AlignPoint.left,n.AlignPoint.center,n.AlignPoint.right]),vertical:e.oneOf([n.AlignPoint.top,n.AlignPoint.center,n.AlignPoint.bottom])}),offset:e.shape({left:e.number,top:e.number}),children:e.oneOfType([e.element,e.node]),show:e.bool,animate:e.oneOfType([e.bool,e.shape({openDuration:e.number,closeDuration:e.number})]),margin:e.shape({horizontal:e.number,vertical:e.number}),positionMode:e.oneOf(["fixed","absolute"]),scale:e.number,style:e.object,onClose:e.func,onPosition:e.func,onOpen:e.func,onKeyPress:e.func},v.defaultProps={collision:{horizontal:n.Collision.fit,vertical:n.Collision.flip},anchorAlign:{horizontal:n.AlignPoint.left,vertical:n.AlignPoint.bottom},popupAlign:{horizontal:n.AlignPoint.left,vertical:n.AlignPoint.top},offset:M,animate:!0,show:!1,margin:{horizontal:0,vertical:0},positionMode:"absolute"},v.contextType=f.ZIndexContext,v.displayName="PopupComponent";let y=v;exports.PopupWithoutContext=y;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const D=require("react"),_=require("react-dom"),e=require("prop-types"),T=require("./animation.js"),l=require("@progress/kendo-react-common"),i=require("@progress/kendo-popup-common"),b=require("./util.js"),E=require("./package-metadata.js");function A(h){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const t in h)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(h,t);Object.defineProperty(o,t,n.get?n:{enumerable:!0,get:()=>h[t]})}}return o.default=h,Object.freeze(o)}const O=A(D),N=A(_),M=100,x=1;function w(h,o){if(h===o)return!0;if(!!h!=!!o)return!1;const t=Object.getOwnPropertyNames(h),n=Object.getOwnPropertyNames(o);if(t.length!==n.length)return!1;for(let r=0;r<t.length;r++){let s=t[r];if(h[s]!==o[s])return!1}return!0}const R={left:-1e3,top:0},y=class y extends O.Component{constructor(o){super(o),this.context=0,this.state={current:"hidden",previous:"hidden",props:{}},this._popup=null,this.show=t=>{window==null||window.addEventListener("mousedown",this.handleMouseDown),this.setPosition(t),this.animate(t.firstChild,"enter",this.onOpened),this.setState({current:"shown",previous:this.state.current})},this.setPosition=t=>{let{anchorAlign:n,popupAlign:r,collision:s,offset:c,anchor:a,margin:u,scale:d,positionMode:f}=this.props;const{width:g,height:m}=t.style;t.style.width=t.offsetWidth+"px",t.style.height=t.offsetHeight+"px";const P=i.alignElement({anchor:a,anchorAlign:n,element:t,elementAlign:r,offset:c,margin:u,positionMode:f,scale:d}),p=i.positionElement({anchor:a,anchorAlign:n,element:t,elementAlign:r,collisions:s,currentLocation:P,margin:this.props.margin});if(t.style.top=p.offset.top+"px",t.style.left=p.offset.left+"px",t.style.width=g,t.style.height=m,this._collisions={fit:p.fit,fitted:p.fitted,flip:p.flip,flipped:p.flipped},this.props.onPosition){const C={target:this,flipped:p.flipped,fitted:p.fitted};this.props.onPosition.call(void 0,C)}},this.onOpened=()=>{const t=this._popup;if(t){if(this.props.show){const{unstyled:n}=this.props,r=n&&n.uPopup;t.classList.add(...l.classNames(l.uPopup.animationContainerShown({c:r})).split(" ").filter(s=>s))}this.attachRepositionHandlers(t),this.props.onOpen&&this.props.onOpen.call(void 0,{target:this})}},this.animate=(t,n,r)=>{if(!this.props.popupAlign)return;let s;const{horizontal:c,vertical:a}=this.props.popupAlign;c==="left"&&a==="center"?s="right":c==="right"&&a==="center"?s="left":a==="top"?s="down":s="up";const u={down:"up",up:"down",left:"right",right:"left"};this._collisions&&this._collisions.flipped&&(s=u[s]);const{unstyled:d}=this.props,f=d&&d.uPopup;T.slide(t,s,this.animationDuration[n],n,r,f)},this.handleMouseDown=t=>{var s,c;const n=((s=t==null?void 0:t.target)==null?void 0:s.closest(".k-animation-container"))===null,r=((c=this.props.anchor)==null?void 0:c.contains(t==null?void 0:t.target))||!1;if(n){if(this.props.onMouseDownOutside){const a={target:this,event:t,state:this.state,isAnchorClicked:r};this.props.onMouseDownOutside.call(void 0,a)}window==null||window.removeEventListener("mousedown",this.handleMouseDown)}},this.onClosing=t=>{if(!this.props.show){const{unstyled:n}=this.props,r=n&&n.uPopup;t.classList.remove(...l.classNames(l.uPopup.animationContainerShown({c:r})).split(" ").filter(s=>s))}this.detachRepositionHandlers()},this.onClosed=()=>{this.state.current==="hiding"&&this.state.previous==="shown"&&this.setState({current:"hidden",previous:this.state.current}),this.props.onClose&&this.props.onClose.call(void 0,{target:this})},this.getCurrentZIndex=()=>this.context?this.context+x:M,l.validatePackage(E.packageMetadata),this.reposition=b.throttle(this.reposition.bind(this),b.FRAME_DURATION)}get element(){return this._popup}static getDerivedStateFromProps(o,t){const{show:n,anchor:r,anchorAlign:s,appendTo:c,collision:a,popupAlign:u,className:d,popupClass:f,style:g,offset:m,contentKey:P}=o,p={...t,props:{show:n,anchor:r,anchorAlign:s,appendTo:c,collision:a,popupAlign:u,className:d,popupClass:f,style:g,offset:m,contentKey:P}};return o.show?t.current==="hidden"||t.current==="hiding"?{...p,current:"showing",previous:t.current}:t.current==="showing"?{...p,current:"shown",previous:t.current}:t.current==="shown"&&(!w(m,t.props.offset)||!w(s,t.props.anchorAlign)||!w(c,t.props.appendTo)||!w(a,t.props.collision)||!w(u,t.props.popupAlign)||!w(g,t.props.style)||r!==t.props.anchor||f!==t.props.popupClass||d!==t.props.className)?{...p,current:"reposition",previous:t.current}:p:t.current==="hiding"||t.current==="hidden"?{...p,current:"hidden",previous:t.current}:{...p,current:"hiding",previous:t.current}}componentDidUpdate(o){this.state.current==="showing"&&this._popup?this.show(this._popup):this.state.current==="hiding"&&this._popup?(this.onClosing(this._popup),this.animate(this._popup.firstChild,"exit",this.onClosed)):this.state.current==="reposition"&&this.state.previous==="shown"?setTimeout(()=>{this.setState({current:"shown",previous:this.state.current})},0):this.state.current==="shown"&&o.contentKey!==this.props.contentKey&&this._popup&&this.setPosition(this._popup)}componentDidMount(){this.state.current==="showing"&&this._popup&&this.show(this._popup)}componentWillUnmount(){this.detachRepositionHandlers()}render(){const{children:o,className:t,popupClass:n,unstyled:r,show:s,id:c,positionMode:a}=this.props,u=r&&r.uPopup,d=this.props.appendTo?this.props.appendTo:l.canUseDOM?this.props.anchor&&this.props.anchor.ownerDocument?this.props.anchor.ownerDocument.body:document.body:void 0;this.state.current==="reposition"&&this.state.previous==="shown"&&this._popup&&this.setPosition(this._popup);const f=Object.assign({},{position:a,top:0,left:-1e4},this.props.style||{}),g=this.state.current==="hiding";if((s||g)&&d){const m=this.getCurrentZIndex(),P=O.createElement(l.ZIndexContext.Provider,{value:m},O.createElement("div",{onKeyDown:this.props.onKeyDown,className:l.classNames(l.uPopup.animationContainer({c:u}),t),id:c,ref:p=>this._popup=p,style:{zIndex:m,...f}},O.createElement("div",{className:l.classNames(l.uPopup.animationChild({c:u})),style:{transitionDelay:"0ms"}},O.createElement("div",{role:this.props.role,className:l.classNames(l.uPopup.popup({c:u}),n)},o))));return this.props.appendTo!==null?N.createPortal(P,d):P}return null}get animationDuration(){const o=this.props.animate;let t=0,n=0;return o&&(o===!0?t=n=300:(t=o.openDuration||0,n=o.closeDuration||0)),{enter:t,exit:n}}attachRepositionHandlers(o){this.detachRepositionHandlers(),this._scrollableParents=i.domUtils.scrollableParents(this.props.anchor||o),this._scrollableParents&&this._scrollableParents.map(t=>t.addEventListener("scroll",this.reposition)),window.addEventListener("resize",this.reposition)}detachRepositionHandlers(){this._scrollableParents&&(this._scrollableParents.map(o=>o.removeEventListener("scroll",this.reposition)),this._scrollableParents=void 0),window.removeEventListener("resize",this.reposition)}reposition(){this.setState({current:"reposition",previous:this.state.current})}};y.propTypes={anchor:function(o){const t=o.anchor;return t&&typeof t.nodeType!="number"?new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed."):null},appendTo:function(o){const t=o.appendTo;return t&&typeof t.nodeType!="number"?new Error("Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed."):null},className:e.oneOfType([e.string,e.arrayOf(e.string),e.object]),id:e.string,popupClass:e.oneOfType([e.string,e.arrayOf(e.string),e.object]),collision:e.shape({horizontal:e.oneOf([i.Collision.fit,i.Collision.flip,i.Collision.none]),vertical:e.oneOf([i.Collision.fit,i.Collision.flip,i.Collision.none])}),anchorAlign:e.shape({horizontal:e.oneOf([i.AlignPoint.left,i.AlignPoint.center,i.AlignPoint.right]),vertical:e.oneOf([i.AlignPoint.top,i.AlignPoint.center,i.AlignPoint.bottom])}),popupAlign:e.shape({horizontal:e.oneOf([i.AlignPoint.left,i.AlignPoint.center,i.AlignPoint.right]),vertical:e.oneOf([i.AlignPoint.top,i.AlignPoint.center,i.AlignPoint.bottom])}),offset:e.shape({left:e.number,top:e.number}),children:e.oneOfType([e.element,e.node]),show:e.bool,animate:e.oneOfType([e.bool,e.shape({openDuration:e.number,closeDuration:e.number})]),margin:e.shape({horizontal:e.number,vertical:e.number}),positionMode:e.oneOf(["fixed","absolute"]),scale:e.number,style:e.object,onClose:e.func,onPosition:e.func,onOpen:e.func,onKeyPress:e.func,onMouseDownOutside:e.func},y.defaultProps={collision:{horizontal:i.Collision.fit,vertical:i.Collision.flip},anchorAlign:{horizontal:i.AlignPoint.left,vertical:i.AlignPoint.bottom},popupAlign:{horizontal:i.AlignPoint.left,vertical:i.AlignPoint.top},offset:R,animate:!0,show:!1,margin:{horizontal:0,vertical:0},positionMode:"absolute"},y.contextType=l.ZIndexContext,y.displayName="PopupComponent";let v=y;exports.PopupWithoutContext=v;

package/PopupWithoutContext.mjs

@@ -6,26 +6,26 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as w from "react";
-import * as N from "react-dom";
+import * as v from "react";
+import * as A from "react-dom";
 import e from "prop-types";
-import { slide as E } from "./animation.mjs";
-import { validatePackage as D, ZIndexContext as _, canUseDOM as I, classNames as P } from "@progress/kendo-react-common";
-import { alignElement as C, positionElement as x, Collision as c, AlignPoint as n, domUtils as R } from "@progress/kendo-popup-common";
-import { throttle as z, FRAME_DURATION as M } from "./util.mjs";
-import { packageMetadata as L } from "./package-metadata.mjs";
-const U = 100, H = 1;
-function g(y, i) {
-  if (y === i)
+import { slide as C } from "./animation.mjs";
+import { classNames as P, uPopup as O, validatePackage as E, ZIndexContext as D, canUseDOM as x } from "@progress/kendo-react-common";
+import { alignElement as M, positionElement as N, Collision as d, AlignPoint as p, domUtils as z } from "@progress/kendo-popup-common";
+import { throttle as R, FRAME_DURATION as L } from "./util.mjs";
+import { packageMetadata as I } from "./package-metadata.mjs";
+const S = 100, U = 1;
+function w(b, o) {
+  if (b === o)
     return !0;
-  if (!!y != !!i)
+  if (!!b != !!o)
     return !1;
-  const t = Object.getOwnPropertyNames(y), s = Object.getOwnPropertyNames(i);
+  const t = Object.getOwnPropertyNames(b), s = Object.getOwnPropertyNames(o);
   if (t.length !== s.length)
     return !1;
-  for (let p = 0; p < t.length; p++) {
-    let o = t[p];
-    if (y[o] !== i[o])
+  for (let n = 0; n < t.length; n++) {
+    let i = t[n];
+    if (b[i] !== o[i])
       return !1;
   }
   return !0;
@@ -33,72 +33,100 @@ function g(y, i) {
 const K = {
   left: -1e3,
   top: 0
-}, S = "k-animation-container", b = "k-animation-container-shown", j = "k-child-animation-container", k = "k-popup", v = class v extends w.Component {
-  constructor(i) {
-    super(i), this.context = 0, this.state = { current: "hidden", previous: "hidden", props: {} }, this._popup = null, this.show = (t) => {
-      this.setPosition(t), this.animate(t.firstChild, "enter", this.onOpened), this.setState({ current: "shown", previous: this.state.current });
+}, y = class y extends v.Component {
+  constructor(o) {
+    super(o), this.context = 0, this.state = { current: "hidden", previous: "hidden", props: {} }, this._popup = null, this.show = (t) => {
+      window == null || window.addEventListener("mousedown", this.handleMouseDown), this.setPosition(t), this.animate(t.firstChild, "enter", this.onOpened), this.setState({ current: "shown", previous: this.state.current });
     }, this.setPosition = (t) => {
-      let { anchorAlign: s, popupAlign: p, collision: o, offset: a, anchor: l, margin: h, scale: d, positionMode: u } = this.props;
-      const { width: f, height: m } = t.style;
+      let { anchorAlign: s, popupAlign: n, collision: i, offset: a, anchor: l, margin: h, scale: c, positionMode: u } = this.props;
+      const { width: m, height: f } = t.style;
       t.style.width = t.offsetWidth + "px", t.style.height = t.offsetHeight + "px";
-      const O = C({
+      const g = M({
         anchor: l,
         anchorAlign: s,
         element: t,
-        elementAlign: p,
+        elementAlign: n,
         offset: a,
         margin: h,
         positionMode: u,
-        scale: d
-      }), r = x({
+        scale: c
+      }), r = N({
         anchor: l,
         anchorAlign: s,
         element: t,
-        elementAlign: p,
-        collisions: o,
-        currentLocation: O,
+        elementAlign: n,
+        collisions: i,
+        currentLocation: g,
         margin: this.props.margin
       });
-      if (t.style.top = r.offset.top + "px", t.style.left = r.offset.left + "px", t.style.width = f, t.style.height = m, this._collisions = {
+      if (t.style.top = r.offset.top + "px", t.style.left = r.offset.left + "px", t.style.width = m, t.style.height = f, this._collisions = {
         fit: r.fit,
         fitted: r.fitted,
         flip: r.flip,
         flipped: r.flipped
       }, this.props.onPosition) {
-        const A = {
+        const T = {
           target: this,
           flipped: r.flipped,
           fitted: r.fitted
         };
-        this.props.onPosition.call(void 0, A);
+        this.props.onPosition.call(void 0, T);
       }
     }, this.onOpened = () => {
       const t = this._popup;
-      t && (this.props.show && t.classList.add(b), this.attachRepositionHandlers(t), this.props.onOpen && this.props.onOpen.call(void 0, { target: this }));
-    }, this.animate = (t, s, p) => {
+      if (t) {
+        if (this.props.show) {
+          const { unstyled: s } = this.props, n = s && s.uPopup;
+          t.classList.add(...P(O.animationContainerShown({ c: n })).split(" ").filter((i) => i));
+        }
+        this.attachRepositionHandlers(t), this.props.onOpen && this.props.onOpen.call(void 0, { target: this });
+      }
+    }, this.animate = (t, s, n) => {
       if (!this.props.popupAlign)
         return;
-      let o;
+      let i;
       const { horizontal: a, vertical: l } = this.props.popupAlign;
-      a === "left" && l === "center" ? o = "right" : a === "right" && l === "center" ? o = "left" : l === "top" ? o = "down" : o = "up";
+      a === "left" && l === "center" ? i = "right" : a === "right" && l === "center" ? i = "left" : l === "top" ? i = "down" : i = "up";
       const h = {
         down: "up",
         up: "down",
         left: "right",
         right: "left"
       };
-      this._collisions && this._collisions.flipped && (o = h[o]), E(
+      this._collisions && this._collisions.flipped && (i = h[i]);
+      const { unstyled: c } = this.props, u = c && c.uPopup;
+      C(
         t,
-        o,
+        i,
         this.animationDuration[s],
         s,
-        p
+        n,
+        u
       );
+    }, this.handleMouseDown = (t) => {
+      var i, a;
+      const s = ((i = t == null ? void 0 : t.target) == null ? void 0 : i.closest(".k-animation-container")) === null, n = ((a = this.props.anchor) == null ? void 0 : a.contains(t == null ? void 0 : t.target)) || !1;
+      if (s) {
+        if (this.props.onMouseDownOutside) {
+          const l = {
+            target: this,
+            event: t,
+            state: this.state,
+            isAnchorClicked: n
+          };
+          this.props.onMouseDownOutside.call(void 0, l);
+        }
+        window == null || window.removeEventListener("mousedown", this.handleMouseDown);
+      }
     }, this.onClosing = (t) => {
-      this.props.show || t.classList.remove(b), this.detachRepositionHandlers();
+      if (!this.props.show) {
+        const { unstyled: s } = this.props, n = s && s.uPopup;
+        t.classList.remove(...P(O.animationContainerShown({ c: n })).split(" ").filter((i) => i));
+      }
+      this.detachRepositionHandlers();
     }, this.onClosed = () => {
       this.state.current === "hiding" && this.state.previous === "shown" && this.setState({ current: "hidden", previous: this.state.current }), this.props.onClose && this.props.onClose.call(void 0, { target: this });
-    }, this.getCurrentZIndex = () => this.context ? this.context + H : U, D(L), this.reposition = z(this.reposition.bind(this), M);
+    }, this.getCurrentZIndex = () => this.context ? this.context + U : S, E(I), this.reposition = R(this.reposition.bind(this), L);
   }
   /**
    * Represents the Popup DOM element.
@@ -109,33 +137,33 @@ const K = {
   /**
    * @hidden
    */
-  static getDerivedStateFromProps(i, t) {
-    const { show: s, anchor: p, anchorAlign: o, appendTo: a, collision: l, popupAlign: h, className: d, popupClass: u, style: f, offset: m, contentKey: O } = i, r = {
+  static getDerivedStateFromProps(o, t) {
+    const { show: s, anchor: n, anchorAlign: i, appendTo: a, collision: l, popupAlign: h, className: c, popupClass: u, style: m, offset: f, contentKey: g } = o, r = {
       ...t,
       props: {
         show: s,
-        anchor: p,
-        anchorAlign: o,
+        anchor: n,
+        anchorAlign: i,
         appendTo: a,
         collision: l,
         popupAlign: h,
-        className: d,
+        className: c,
         popupClass: u,
-        style: f,
-        offset: m,
-        contentKey: O
+        style: m,
+        offset: f,
+        contentKey: g
       }
     };
-    return i.show ? t.current === "hidden" || t.current === "hiding" ? { ...r, current: "showing", previous: t.current } : t.current === "showing" ? { ...r, current: "shown", previous: t.current } : t.current === "shown" && (!g(m, t.props.offset) || !g(o, t.props.anchorAlign) || !g(a, t.props.appendTo) || !g(l, t.props.collision) || !g(h, t.props.popupAlign) || !g(f, t.props.style) || p !== t.props.anchor || u !== t.props.popupClass || d !== t.props.className) ? { ...r, current: "reposition", previous: t.current } : r : t.current === "hiding" || t.current === "hidden" ? { ...r, current: "hidden", previous: t.current } : { ...r, current: "hiding", previous: t.current };
+    return o.show ? t.current === "hidden" || t.current === "hiding" ? { ...r, current: "showing", previous: t.current } : t.current === "showing" ? { ...r, current: "shown", previous: t.current } : t.current === "shown" && (!w(f, t.props.offset) || !w(i, t.props.anchorAlign) || !w(a, t.props.appendTo) || !w(l, t.props.collision) || !w(h, t.props.popupAlign) || !w(m, t.props.style) || n !== t.props.anchor || u !== t.props.popupClass || c !== t.props.className) ? { ...r, current: "reposition", previous: t.current } : r : t.current === "hiding" || t.current === "hidden" ? { ...r, current: "hidden", previous: t.current } : { ...r, current: "hiding", previous: t.current };
   }
   /**
    *
    * @hidden
    */
-  componentDidUpdate(i) {
+  componentDidUpdate(o) {
     this.state.current === "showing" && this._popup ? this.show(this._popup) : this.state.current === "hiding" && this._popup ? (this.onClosing(this._popup), this.animate(this._popup.firstChild, "exit", this.onClosed)) : this.state.current === "reposition" && this.state.previous === "shown" ? setTimeout(() => {
       this.setState({ current: "shown", previous: this.state.current });
-    }, 0) : this.state.current === "shown" && i.contentKey !== this.props.contentKey && this._popup && this.setPosition(this._popup);
+    }, 0) : this.state.current === "shown" && o.contentKey !== this.props.contentKey && this._popup && this.setPosition(this._popup);
   }
   /**
    * @hidden
@@ -154,69 +182,70 @@ const K = {
    */
   render() {
     const {
-      children: i,
+      children: o,
       className: t,
       popupClass: s,
-      show: p,
-      id: o,
-      positionMode: a
-    } = this.props, l = this.props.appendTo ? this.props.appendTo : I ? this.props.anchor && this.props.anchor.ownerDocument ? this.props.anchor.ownerDocument.body : document.body : void 0;
+      unstyled: n,
+      show: i,
+      id: a,
+      positionMode: l
+    } = this.props, h = n && n.uPopup, c = this.props.appendTo ? this.props.appendTo : x ? this.props.anchor && this.props.anchor.ownerDocument ? this.props.anchor.ownerDocument.body : document.body : void 0;
     this.state.current === "reposition" && this.state.previous === "shown" && this._popup && this.setPosition(this._popup);
-    const h = Object.assign(
+    const u = Object.assign(
       {},
-      { position: a, top: 0, left: -1e4 },
+      { position: l, top: 0, left: -1e4 },
       this.props.style || {}
-    ), d = this.state.current === "hiding";
-    if ((p || d) && l) {
-      const u = this.getCurrentZIndex(), f = /* @__PURE__ */ w.createElement(_.Provider, { value: u }, /* @__PURE__ */ w.createElement(
+    ), m = this.state.current === "hiding";
+    if ((i || m) && c) {
+      const f = this.getCurrentZIndex(), g = /* @__PURE__ */ v.createElement(D.Provider, { value: f }, /* @__PURE__ */ v.createElement(
         "div",
         {
           onKeyDown: this.props.onKeyDown,
-          className: P(S, t),
-          id: o,
-          ref: (m) => this._popup = m,
+          className: P(O.animationContainer({ c: h }), t),
+          id: a,
+          ref: (r) => this._popup = r,
           style: {
-            zIndex: u,
-            ...h
+            zIndex: f,
+            ...u
           }
         },
-        /* @__PURE__ */ w.createElement("div", { className: P(j), style: { transitionDelay: "0ms" } }, /* @__PURE__ */ w.createElement(
+        /* @__PURE__ */ v.createElement("div", { className: P(O.animationChild({ c: h })), style: { transitionDelay: "0ms" } }, /* @__PURE__ */ v.createElement(
           "div",
           {
             role: this.props.role,
-            className: P(k, s)
+            className: P(O.popup({ c: h }), s)
           },
-          i
+          o
         ))
       ));
-      return this.props.appendTo !== null ? N.createPortal(f, l) : f;
+      return this.props.appendTo !== null ? A.createPortal(g, c) : g;
     }
     return null;
   }
   get animationDuration() {
-    const i = this.props.animate;
+    const o = this.props.animate;
     let t = 0, s = 0;
-    return i && (i === !0 ? t = s = 300 : (t = i.openDuration || 0, s = i.closeDuration || 0)), { enter: t, exit: s };
+    return o && (o === !0 ? t = s = 300 : (t = o.openDuration || 0, s = o.closeDuration || 0)), { enter: t, exit: s };
   }
-  attachRepositionHandlers(i) {
-    this.detachRepositionHandlers(), this._scrollableParents = R.scrollableParents(this.props.anchor || i), this._scrollableParents && this._scrollableParents.map((t) => t.addEventListener("scroll", this.reposition)), window.addEventListener("resize", this.reposition);
+  attachRepositionHandlers(o) {
+    this.detachRepositionHandlers(), this._scrollableParents = z.scrollableParents(this.props.anchor || o), this._scrollableParents && this._scrollableParents.map((t) => t.addEventListener("scroll", this.reposition)), window.addEventListener("resize", this.reposition);
   }
   detachRepositionHandlers() {
-    this._scrollableParents && (this._scrollableParents.map((i) => i.removeEventListener("scroll", this.reposition)), this._scrollableParents = void 0), window.removeEventListener("resize", this.reposition);
+    this._scrollableParents && (this._scrollableParents.map((o) => o.removeEventListener("scroll", this.reposition)), this._scrollableParents = void 0), window.removeEventListener("resize", this.reposition);
   }
   reposition() {
     this.setState({ current: "reposition", previous: this.state.current });
   }
 };
-v.propTypes = {
-  anchor: function(i) {
-    const t = i.anchor;
+y.propTypes = {
+  anchor: function(o) {
+    const t = o.anchor;
     return t && typeof t.nodeType != "number" ? new Error(
       "Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed."
     ) : null;
   },
-  appendTo: function(i) {
-    const t = i.appendTo;
+  appendTo: function(o) {
+    const t = o.appendTo;
     return t && typeof t.nodeType != "number" ? new Error(
       "Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed."
     ) : null;
@@ -234,38 +263,38 @@ v.propTypes = {
   ]),
   collision: e.shape({
     horizontal: e.oneOf([
-      c.fit,
-      c.flip,
-      c.none
+      d.fit,
+      d.flip,
+      d.none
     ]),
     vertical: e.oneOf([
-      c.fit,
-      c.flip,
-      c.none
+      d.fit,
+      d.flip,
+      d.none
     ])
   }),
   anchorAlign: e.shape({
     horizontal: e.oneOf([
-      n.left,
-      n.center,
-      n.right
+      p.left,
+      p.center,
+      p.right
     ]),
     vertical: e.oneOf([
-      n.top,
-      n.center,
-      n.bottom
+      p.top,
+      p.center,
+      p.bottom
     ])
   }),
   popupAlign: e.shape({
     horizontal: e.oneOf([
-      n.left,
-      n.center,
-      n.right
+      p.left,
+      p.center,
+      p.right
     ]),
     vertical: e.oneOf([
-      n.top,
-      n.center,
-      n.bottom
+      p.top,
+      p.center,
+      p.bottom
     ])
   }),
   offset: e.shape({
@@ -297,19 +326,20 @@ v.propTypes = {
   onClose: e.func,
   onPosition: e.func,
   onOpen: e.func,
-  onKeyPress: e.func
-}, v.defaultProps = {
+  onKeyPress: e.func,
+  onMouseDownOutside: e.func
+}, y.defaultProps = {
   collision: {
-    horizontal: c.fit,
-    vertical: c.flip
+    horizontal: d.fit,
+    vertical: d.flip
   },
   anchorAlign: {
-    horizontal: n.left,
-    vertical: n.bottom
+    horizontal: p.left,
+    vertical: p.bottom
   },
   popupAlign: {
-    horizontal: n.left,
-    vertical: n.top
+    horizontal: p.left,
+    vertical: p.top
   },
   offset: K,
   animate: !0,
@@ -319,8 +349,8 @@ v.propTypes = {
     vertical: 0
   },
   positionMode: "absolute"
-}, v.contextType = _, v.displayName = "PopupComponent";
-let T = v;
+}, y.contextType = D, y.displayName = "PopupComponent";
+let _ = y;
 export {
-  T as PopupWithoutContext
+  _ as PopupWithoutContext
 };

package/animation.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=s=>{s.style.transitionDuration="",Array.from(s.classList).forEach(i=>{i.startsWith("k-slide-")&&s.classList.remove(i)})},y=typeof window!="undefined"&&/Firefox/.test(window.navigator.userAgent),v=(s,i,n,r,o)=>{if(n===0)return o();const a="k-slide-"+i+"-"+r,u=a+"-active",e=l=>{l.target===s&&(s.removeEventListener("transitionend",e),f(s),r==="exit"?s.style.display="none":s.style.display="",o())};s.addEventListener("transitionend",e);const d=s.ownerDocument;if(!d)return;const t=d.defaultView;if(!t)return;const c=()=>{f(s),s.classList.add(a),t.requestAnimationFrame(()=>{s.style.transitionDuration=n+"ms",s.classList.add(u)})};y?t.requestAnimationFrame(c):c()};exports.slide=v;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@progress/kendo-react-common"),w=(i,s,n)=>{i.style.transitionDuration="",s&&i.classList.remove(...s.split(" ")),s&&i.classList.remove(...n.split(" "))},p=typeof window!="undefined"&&/Firefox/.test(window.navigator.userAgent),y=(i,s,n,r,d,u)=>{if(n===0)return d();const o=e.classNames(e.uPopup.slide({direction:s,type:r,c:u})),a=e.classNames(e.uPopup.slideActive({direction:s,type:r,c:u})),f=t=>{t.target===i&&(i.removeEventListener("transitionend",f),w(i,o,a),r==="exit"?i.style.display="none":i.style.display="",d())};i.addEventListener("transitionend",f);const l=i.ownerDocument;if(!l)return;const c=l.defaultView;if(!c)return;const v=()=>{w(i,o,a),o&&i.classList.add(...o.split(" ").filter(t=>t)),c.requestAnimationFrame(()=>{i.style.transitionDuration=n+"ms",i.classList.add(...a.split(" ").filter(t=>t))})};p?c.requestAnimationFrame(v):v()};exports.slide=y;

package/animation.mjs

@@ -6,30 +6,29 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-const f = (s) => {
-  s.style.transitionDuration = "", Array.from(s.classList).forEach((i) => {
-    i.startsWith("k-slide-") && s.classList.remove(i);
-  });
-}, w = typeof window != "undefined" && /Firefox/.test(window.navigator.userAgent), v = (s, i, n, r, o) => {
+import { classNames as v, uPopup as w } from "@progress/kendo-react-common";
+const p = (i, s, n) => {
+  i.style.transitionDuration = "", s && i.classList.remove(...s.split(" ")), s && i.classList.remove(...n.split(" "));
+}, L = typeof window != "undefined" && /Firefox/.test(window.navigator.userAgent), A = (i, s, n, r, c, d) => {
   if (n === 0)
-    return o();
-  const a = "k-slide-" + i + "-" + r, u = a + "-active", e = (l) => {
-    l.target === s && (s.removeEventListener("transitionend", e), f(s), r === "exit" ? s.style.display = "none" : s.style.display = "", o());
+    return c();
+  const o = v(w.slide({ direction: s, type: r, c: d })), a = v(w.slideActive({ direction: s, type: r, c: d })), f = (t) => {
+    t.target === i && (i.removeEventListener("transitionend", f), p(i, o, a), r === "exit" ? i.style.display = "none" : i.style.display = "", c());
   };
-  s.addEventListener("transitionend", e);
-  const d = s.ownerDocument;
-  if (!d)
+  i.addEventListener("transitionend", f);
+  const u = i.ownerDocument;
+  if (!u)
     return;
-  const t = d.defaultView;
-  if (!t)
+  const e = u.defaultView;
+  if (!e)
     return;
-  const c = () => {
-    f(s), s.classList.add(a), t.requestAnimationFrame(() => {
-      s.style.transitionDuration = n + "ms", s.classList.add(u);
+  const l = () => {
+    p(i, o, a), o && i.classList.add(...o.split(" ").filter((t) => t)), e.requestAnimationFrame(() => {
+      i.style.transitionDuration = n + "ms", i.classList.add(...a.split(" ").filter((t) => t));
     });
   };
-  w ? t.requestAnimationFrame(c) : c();
+  L ? e.requestAnimationFrame(l) : l();
 };
 export {
-  v as slide
+  A as slide
 };

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

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("react-dom"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-popup-common")):"function"==typeof define&&define.amd?define(["exports","react","react-dom","prop-types","@progress/kendo-react-common","@progress/kendo-popup-common"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).KendoReactPopup={},t.React,t.ReactDOM,t.PropTypes,t.KendoReactCommon,t.KendoPopupCommon)}(this,(function(t,e,o,n,i,s){"use strict";function r(t){var e=Object.create(null);return t&&Object.keys(t).forEach((function(o){if("default"!==o){var n=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(e,o,n.get?n:{enumerable:!0,get:function(){return t[o]}})}})),e.default=t,Object.freeze(e)}var p=r(e),l=r(o);const a=t=>{t.style.transitionDuration="",Array.from(t.classList).forEach((e=>{e.startsWith("k-slide-")&&t.classList.remove(e)}))},c="undefined"!=typeof window&&/Firefox/.test(window.navigator.userAgent),h={name:"@progress/kendo-react-popup",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};function u(t,e){if(t===e)return!0;if(!!t!=!!e)return!1;const o=Object.getOwnPropertyNames(t),n=Object.getOwnPropertyNames(e);if(o.length!==n.length)return!1;for(let n=0;n<o.length;n++){let i=o[n];if(t[i]!==e[i])return!1}return!0}const d="k-animation-container-shown",f=class extends p.Component{constructor(t){super(t),this.context=0,this.state={current:"hidden",previous:"hidden",props:{}},this._popup=null,this.show=t=>{this.setPosition(t),this.animate(t.firstChild,"enter",this.onOpened),this.setState({current:"shown",previous:this.state.current})},this.setPosition=t=>{let{anchorAlign:e,popupAlign:o,collision:n,offset:i,anchor:r,margin:p,scale:l,positionMode:a}=this.props;const{width:c,height:h}=t.style;t.style.width=t.offsetWidth+"px",t.style.height=t.offsetHeight+"px";const u=s.alignElement({anchor:r,anchorAlign:e,element:t,elementAlign:o,offset:i,margin:p,positionMode:a,scale:l}),d=s.positionElement({anchor:r,anchorAlign:e,element:t,elementAlign:o,collisions:n,currentLocation:u,margin:this.props.margin});if(t.style.top=d.offset.top+"px",t.style.left=d.offset.left+"px",t.style.width=c,t.style.height=h,this._collisions={fit:d.fit,fitted:d.fitted,flip:d.flip,flipped:d.flipped},this.props.onPosition){const t={target:this,flipped:d.flipped,fitted:d.fitted};this.props.onPosition.call(void 0,t)}},this.onOpened=()=>{const t=this._popup;t&&(this.props.show&&t.classList.add(d),this.attachRepositionHandlers(t),this.props.onOpen&&this.props.onOpen.call(void 0,{target:this}))},this.animate=(t,e,o)=>{if(!this.props.popupAlign)return;let n;const{horizontal:i,vertical:s}=this.props.popupAlign;n="left"===i&&"center"===s?"right":"right"===i&&"center"===s?"left":"top"===s?"down":"up";this._collisions&&this._collisions.flipped&&(n={down:"up",up:"down",left:"right",right:"left"}[n]),((t,e,o,n,i)=>{if(0===o)return i();const s="k-slide-"+e+"-"+n,r=s+"-active",p=e=>{e.target===t&&(t.removeEventListener("transitionend",p),a(t),t.style.display="exit"===n?"none":"",i())};t.addEventListener("transitionend",p);const l=t.ownerDocument;if(!l)return;const h=l.defaultView;if(!h)return;const u=()=>{a(t),t.classList.add(s),h.requestAnimationFrame((()=>{t.style.transitionDuration=o+"ms",t.classList.add(r)}))};c?h.requestAnimationFrame(u):u()})(t,n,this.animationDuration[e],e,o)},this.onClosing=t=>{this.props.show||t.classList.remove(d),this.detachRepositionHandlers()},this.onClosed=()=>{"hiding"===this.state.current&&"shown"===this.state.previous&&this.setState({current:"hidden",previous:this.state.current}),this.props.onClose&&this.props.onClose.call(void 0,{target:this})},this.getCurrentZIndex=()=>this.context?this.context+1:100,i.validatePackage(h),this.reposition=function(t,e,o={}){let n,i,s,r,p=0;o=o||{};const l=function(){p=!1===o.leading?0:(new Date).getTime(),n=void 0,r=t.apply(i,s),n||(i=s=null)};return function(){const a=(new Date).getTime();!p&&!1===o.leading&&(p=a);const c=e-(a-p);return i=void 0,s=arguments,c<=0||c>e?(n&&(clearTimeout(n),n=void 0),p=a,r=t.apply(i,s),n||(i=s=null)):!n&&!1!==o.trailing&&(n=window.setTimeout(l,c)),r}}(this.reposition.bind(this),16.666666666666668)}get element(){return this._popup}static getDerivedStateFromProps(t,e){const{show:o,anchor:n,anchorAlign:i,appendTo:s,collision:r,popupAlign:p,className:l,popupClass:a,style:c,offset:h,contentKey:d}=t,f={...e,props:{show:o,anchor:n,anchorAlign:i,appendTo:s,collision:r,popupAlign:p,className:l,popupClass:a,style:c,offset:h,contentKey:d}};return t.show?"hidden"===e.current||"hiding"===e.current?{...f,current:"showing",previous:e.current}:"showing"===e.current?{...f,current:"shown",previous:e.current}:"shown"!==e.current||u(h,e.props.offset)&&u(i,e.props.anchorAlign)&&u(s,e.props.appendTo)&&u(r,e.props.collision)&&u(p,e.props.popupAlign)&&u(c,e.props.style)&&n===e.props.anchor&&a===e.props.popupClass&&l===e.props.className?f:{...f,current:"reposition",previous:e.current}:"hiding"===e.current||"hidden"===e.current?{...f,current:"hidden",previous:e.current}:{...f,current:"hiding",previous:e.current}}componentDidUpdate(t){"showing"===this.state.current&&this._popup?this.show(this._popup):"hiding"===this.state.current&&this._popup?(this.onClosing(this._popup),this.animate(this._popup.firstChild,"exit",this.onClosed)):"reposition"===this.state.current&&"shown"===this.state.previous?setTimeout((()=>{this.setState({current:"shown",previous:this.state.current})}),0):"shown"===this.state.current&&t.contentKey!==this.props.contentKey&&this._popup&&this.setPosition(this._popup)}componentDidMount(){"showing"===this.state.current&&this._popup&&this.show(this._popup)}componentWillUnmount(){this.detachRepositionHandlers()}render(){const{children:t,className:e,popupClass:o,show:n,id:s,positionMode:r}=this.props,a=this.props.appendTo?this.props.appendTo:i.canUseDOM?this.props.anchor&&this.props.anchor.ownerDocument?this.props.anchor.ownerDocument.body:document.body:void 0;"reposition"===this.state.current&&"shown"===this.state.previous&&this._popup&&this.setPosition(this._popup);const c=Object.assign({},{position:r,top:0,left:-1e4},this.props.style||{}),h="hiding"===this.state.current;if((n||h)&&a){const n=this.getCurrentZIndex(),r=p.createElement(i.ZIndexContext.Provider,{value:n},p.createElement("div",{onKeyDown:this.props.onKeyDown,className:i.classNames("k-animation-container",e),id:s,ref:t=>this._popup=t,style:{zIndex:n,...c}},p.createElement("div",{className:i.classNames("k-child-animation-container"),style:{transitionDelay:"0ms"}},p.createElement("div",{role:this.props.role,className:i.classNames("k-popup",o)},t))));return null!==this.props.appendTo?l.createPortal(r,a):r}return null}get animationDuration(){const t=this.props.animate;let e=0,o=0;return t&&(!0===t?e=o=300:(e=t.openDuration||0,o=t.closeDuration||0)),{enter:e,exit:o}}attachRepositionHandlers(t){this.detachRepositionHandlers(),this._scrollableParents=s.domUtils.scrollableParents(this.props.anchor||t),this._scrollableParents&&this._scrollableParents.map((t=>t.addEventListener("scroll",this.reposition))),window.addEventListener("resize",this.reposition)}detachRepositionHandlers(){this._scrollableParents&&(this._scrollableParents.map((t=>t.removeEventListener("scroll",this.reposition))),this._scrollableParents=void 0),window.removeEventListener("resize",this.reposition)}reposition(){this.setState({current:"reposition",previous:this.state.current})}};f.propTypes={anchor:function(t){const e=t.anchor;return e&&"number"!=typeof e.nodeType?new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed."):null},appendTo:function(t){const e=t.appendTo;return e&&"number"!=typeof e.nodeType?new Error("Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed."):null},className:n.oneOfType([n.string,n.arrayOf(n.string),n.object]),id:n.string,popupClass:n.oneOfType([n.string,n.arrayOf(n.string),n.object]),collision:n.shape({horizontal:n.oneOf([s.Collision.fit,s.Collision.flip,s.Collision.none]),vertical:n.oneOf([s.Collision.fit,s.Collision.flip,s.Collision.none])}),anchorAlign:n.shape({horizontal:n.oneOf([s.AlignPoint.left,s.AlignPoint.center,s.AlignPoint.right]),vertical:n.oneOf([s.AlignPoint.top,s.AlignPoint.center,s.AlignPoint.bottom])}),popupAlign:n.shape({horizontal:n.oneOf([s.AlignPoint.left,s.AlignPoint.center,s.AlignPoint.right]),vertical:n.oneOf([s.AlignPoint.top,s.AlignPoint.center,s.AlignPoint.bottom])}),offset:n.shape({left:n.number,top:n.number}),children:n.oneOfType([n.element,n.node]),show:n.bool,animate:n.oneOfType([n.bool,n.shape({openDuration:n.number,closeDuration:n.number})]),margin:n.shape({horizontal:n.number,vertical:n.number}),positionMode:n.oneOf(["fixed","absolute"]),scale:n.number,style:n.object,onClose:n.func,onPosition:n.func,onOpen:n.func,onKeyPress:n.func},f.defaultProps={collision:{horizontal:s.Collision.fit,vertical:s.Collision.flip},anchorAlign:{horizontal:s.AlignPoint.left,vertical:s.AlignPoint.bottom},popupAlign:{horizontal:s.AlignPoint.left,vertical:s.AlignPoint.top},offset:{left:-1e3,top:0},animate:!0,show:!1,margin:{horizontal:0,vertical:0},positionMode:"absolute"},f.contextType=i.ZIndexContext,f.displayName="PopupComponent";let m=f;const g=p.createContext((t=>t)),y=p.forwardRef(((t,e)=>{const o=p.useContext(g).call(void 0,t);return p.createElement(m,{ref:e,...o})}));y.displayName="Popup",t.Popup=y,t.PopupPropsContext=g,t.PopupWithoutContext=m}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("react-dom"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-popup-common")):"function"==typeof define&&define.amd?define(["exports","react","react-dom","prop-types","@progress/kendo-react-common","@progress/kendo-popup-common"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).KendoReactPopup={},t.React,t.ReactDOM,t.PropTypes,t.KendoReactCommon,t.KendoPopupCommon)}(this,(function(t,e,o,n,i,s){"use strict";function r(t){var e=Object.create(null);return t&&Object.keys(t).forEach((function(o){if("default"!==o){var n=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(e,o,n.get?n:{enumerable:!0,get:function(){return t[o]}})}})),e.default=t,Object.freeze(e)}var p=r(e),l=r(o);const a=(t,e,o)=>{t.style.transitionDuration="",e&&t.classList.remove(...e.split(" ")),e&&t.classList.remove(...o.split(" "))},c="undefined"!=typeof window&&/Firefox/.test(window.navigator.userAgent),u={name:"@progress/kendo-react-popup",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};function h(t,e){if(t===e)return!0;if(!!t!=!!e)return!1;const o=Object.getOwnPropertyNames(t),n=Object.getOwnPropertyNames(e);if(o.length!==n.length)return!1;for(let n=0;n<o.length;n++){let i=o[n];if(t[i]!==e[i])return!1}return!0}const d=class extends p.Component{constructor(t){super(t),this.context=0,this.state={current:"hidden",previous:"hidden",props:{}},this._popup=null,this.show=t=>{null==window||window.addEventListener("mousedown",this.handleMouseDown),this.setPosition(t),this.animate(t.firstChild,"enter",this.onOpened),this.setState({current:"shown",previous:this.state.current})},this.setPosition=t=>{let{anchorAlign:e,popupAlign:o,collision:n,offset:i,anchor:r,margin:p,scale:l,positionMode:a}=this.props;const{width:c,height:u}=t.style;t.style.width=t.offsetWidth+"px",t.style.height=t.offsetHeight+"px";const h=s.alignElement({anchor:r,anchorAlign:e,element:t,elementAlign:o,offset:i,margin:p,positionMode:a,scale:l}),d=s.positionElement({anchor:r,anchorAlign:e,element:t,elementAlign:o,collisions:n,currentLocation:h,margin:this.props.margin});if(t.style.top=d.offset.top+"px",t.style.left=d.offset.left+"px",t.style.width=c,t.style.height=u,this._collisions={fit:d.fit,fitted:d.fitted,flip:d.flip,flipped:d.flipped},this.props.onPosition){const t={target:this,flipped:d.flipped,fitted:d.fitted};this.props.onPosition.call(void 0,t)}},this.onOpened=()=>{const t=this._popup;if(t){if(this.props.show){const{unstyled:e}=this.props,o=e&&e.uPopup;t.classList.add(...i.classNames(i.uPopup.animationContainerShown({c:o})).split(" ").filter((t=>t)))}this.attachRepositionHandlers(t),this.props.onOpen&&this.props.onOpen.call(void 0,{target:this})}},this.animate=(t,e,o)=>{if(!this.props.popupAlign)return;let n;const{horizontal:s,vertical:r}=this.props.popupAlign;n="left"===s&&"center"===r?"right":"right"===s&&"center"===r?"left":"top"===r?"down":"up";this._collisions&&this._collisions.flipped&&(n={down:"up",up:"down",left:"right",right:"left"}[n]);const{unstyled:p}=this.props,l=p&&p.uPopup;((t,e,o,n,s,r)=>{if(0===o)return s();const p=i.classNames(i.uPopup.slide({direction:e,type:n,c:r})),l=i.classNames(i.uPopup.slideActive({direction:e,type:n,c:r})),u=e=>{e.target===t&&(t.removeEventListener("transitionend",u),a(t,p,l),t.style.display="exit"===n?"none":"",s())};t.addEventListener("transitionend",u);const h=t.ownerDocument;if(!h)return;const d=h.defaultView;if(!d)return;const f=()=>{a(t,p,l),p&&t.classList.add(...p.split(" ").filter((t=>t))),d.requestAnimationFrame((()=>{t.style.transitionDuration=o+"ms",t.classList.add(...l.split(" ").filter((t=>t)))}))};c?d.requestAnimationFrame(f):f()})(t,n,this.animationDuration[e],e,o,l)},this.handleMouseDown=t=>{var e,o;const n=null===(null==(e=null==t?void 0:t.target)?void 0:e.closest(".k-animation-container")),i=(null==(o=this.props.anchor)?void 0:o.contains(null==t?void 0:t.target))||!1;if(n){if(this.props.onMouseDownOutside){const e={target:this,event:t,state:this.state,isAnchorClicked:i};this.props.onMouseDownOutside.call(void 0,e)}null==window||window.removeEventListener("mousedown",this.handleMouseDown)}},this.onClosing=t=>{if(!this.props.show){const{unstyled:e}=this.props,o=e&&e.uPopup;t.classList.remove(...i.classNames(i.uPopup.animationContainerShown({c:o})).split(" ").filter((t=>t)))}this.detachRepositionHandlers()},this.onClosed=()=>{"hiding"===this.state.current&&"shown"===this.state.previous&&this.setState({current:"hidden",previous:this.state.current}),this.props.onClose&&this.props.onClose.call(void 0,{target:this})},this.getCurrentZIndex=()=>this.context?this.context+1:100,i.validatePackage(u),this.reposition=function(t,e,o={}){let n,i,s,r,p=0;o=o||{};const l=function(){p=!1===o.leading?0:(new Date).getTime(),n=void 0,r=t.apply(i,s),n||(i=s=null)};return function(){const a=(new Date).getTime();!p&&!1===o.leading&&(p=a);const c=e-(a-p);return i=void 0,s=arguments,c<=0||c>e?(n&&(clearTimeout(n),n=void 0),p=a,r=t.apply(i,s),n||(i=s=null)):!n&&!1!==o.trailing&&(n=window.setTimeout(l,c)),r}}(this.reposition.bind(this),16.666666666666668)}get element(){return this._popup}static getDerivedStateFromProps(t,e){const{show:o,anchor:n,anchorAlign:i,appendTo:s,collision:r,popupAlign:p,className:l,popupClass:a,style:c,offset:u,contentKey:d}=t,f={...e,props:{show:o,anchor:n,anchorAlign:i,appendTo:s,collision:r,popupAlign:p,className:l,popupClass:a,style:c,offset:u,contentKey:d}};return t.show?"hidden"===e.current||"hiding"===e.current?{...f,current:"showing",previous:e.current}:"showing"===e.current?{...f,current:"shown",previous:e.current}:"shown"!==e.current||h(u,e.props.offset)&&h(i,e.props.anchorAlign)&&h(s,e.props.appendTo)&&h(r,e.props.collision)&&h(p,e.props.popupAlign)&&h(c,e.props.style)&&n===e.props.anchor&&a===e.props.popupClass&&l===e.props.className?f:{...f,current:"reposition",previous:e.current}:"hiding"===e.current||"hidden"===e.current?{...f,current:"hidden",previous:e.current}:{...f,current:"hiding",previous:e.current}}componentDidUpdate(t){"showing"===this.state.current&&this._popup?this.show(this._popup):"hiding"===this.state.current&&this._popup?(this.onClosing(this._popup),this.animate(this._popup.firstChild,"exit",this.onClosed)):"reposition"===this.state.current&&"shown"===this.state.previous?setTimeout((()=>{this.setState({current:"shown",previous:this.state.current})}),0):"shown"===this.state.current&&t.contentKey!==this.props.contentKey&&this._popup&&this.setPosition(this._popup)}componentDidMount(){"showing"===this.state.current&&this._popup&&this.show(this._popup)}componentWillUnmount(){this.detachRepositionHandlers()}render(){const{children:t,className:e,popupClass:o,unstyled:n,show:s,id:r,positionMode:a}=this.props,c=n&&n.uPopup,u=this.props.appendTo?this.props.appendTo:i.canUseDOM?this.props.anchor&&this.props.anchor.ownerDocument?this.props.anchor.ownerDocument.body:document.body:void 0;"reposition"===this.state.current&&"shown"===this.state.previous&&this._popup&&this.setPosition(this._popup);const h=Object.assign({},{position:a,top:0,left:-1e4},this.props.style||{}),d="hiding"===this.state.current;if((s||d)&&u){const n=this.getCurrentZIndex(),s=p.createElement(i.ZIndexContext.Provider,{value:n},p.createElement("div",{onKeyDown:this.props.onKeyDown,className:i.classNames(i.uPopup.animationContainer({c:c}),e),id:r,ref:t=>this._popup=t,style:{zIndex:n,...h}},p.createElement("div",{className:i.classNames(i.uPopup.animationChild({c:c})),style:{transitionDelay:"0ms"}},p.createElement("div",{role:this.props.role,className:i.classNames(i.uPopup.popup({c:c}),o)},t))));return null!==this.props.appendTo?l.createPortal(s,u):s}return null}get animationDuration(){const t=this.props.animate;let e=0,o=0;return t&&(!0===t?e=o=300:(e=t.openDuration||0,o=t.closeDuration||0)),{enter:e,exit:o}}attachRepositionHandlers(t){this.detachRepositionHandlers(),this._scrollableParents=s.domUtils.scrollableParents(this.props.anchor||t),this._scrollableParents&&this._scrollableParents.map((t=>t.addEventListener("scroll",this.reposition))),window.addEventListener("resize",this.reposition)}detachRepositionHandlers(){this._scrollableParents&&(this._scrollableParents.map((t=>t.removeEventListener("scroll",this.reposition))),this._scrollableParents=void 0),window.removeEventListener("resize",this.reposition)}reposition(){this.setState({current:"reposition",previous:this.state.current})}};d.propTypes={anchor:function(t){const e=t.anchor;return e&&"number"!=typeof e.nodeType?new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed."):null},appendTo:function(t){const e=t.appendTo;return e&&"number"!=typeof e.nodeType?new Error("Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed."):null},className:n.oneOfType([n.string,n.arrayOf(n.string),n.object]),id:n.string,popupClass:n.oneOfType([n.string,n.arrayOf(n.string),n.object]),collision:n.shape({horizontal:n.oneOf([s.Collision.fit,s.Collision.flip,s.Collision.none]),vertical:n.oneOf([s.Collision.fit,s.Collision.flip,s.Collision.none])}),anchorAlign:n.shape({horizontal:n.oneOf([s.AlignPoint.left,s.AlignPoint.center,s.AlignPoint.right]),vertical:n.oneOf([s.AlignPoint.top,s.AlignPoint.center,s.AlignPoint.bottom])}),popupAlign:n.shape({horizontal:n.oneOf([s.AlignPoint.left,s.AlignPoint.center,s.AlignPoint.right]),vertical:n.oneOf([s.AlignPoint.top,s.AlignPoint.center,s.AlignPoint.bottom])}),offset:n.shape({left:n.number,top:n.number}),children:n.oneOfType([n.element,n.node]),show:n.bool,animate:n.oneOfType([n.bool,n.shape({openDuration:n.number,closeDuration:n.number})]),margin:n.shape({horizontal:n.number,vertical:n.number}),positionMode:n.oneOf(["fixed","absolute"]),scale:n.number,style:n.object,onClose:n.func,onPosition:n.func,onOpen:n.func,onKeyPress:n.func,onMouseDownOutside:n.func},d.defaultProps={collision:{horizontal:s.Collision.fit,vertical:s.Collision.flip},anchorAlign:{horizontal:s.AlignPoint.left,vertical:s.AlignPoint.bottom},popupAlign:{horizontal:s.AlignPoint.left,vertical:s.AlignPoint.top},offset:{left:-1e3,top:0},animate:!0,show:!1,margin:{horizontal:0,vertical:0},positionMode:"absolute"},d.contextType=i.ZIndexContext,d.displayName="PopupComponent";let f=d;const m=p.createContext((t=>t)),g=p.forwardRef(((t,e)=>{const o=p.useContext(m),n=i.useUnstyled(),s=o.call(void 0,t);return p.createElement(f,{ref:e,unstyled:n,...s})}));g.displayName="Popup",t.Popup=g,t.PopupPropsContext=m,t.PopupWithoutContext=f}));

package/index.d.mts

@@ -10,6 +10,7 @@ import { CollisionType as CollisionType_2 } from '@progress/kendo-popup-common';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { MarginSettings } from '@progress/kendo-popup-common';
 import { OffsetPosition } from '@progress/kendo-popup-common';
+import { PopupClassStructure } from '@progress/kendo-react-common';
 import { PopupSettings } from '@progress/kendo-popup-common';
 import { PositionMode as PositionMode_2 } from '@progress/kendo-popup-common';
 import PropTypes from 'prop-types';
@@ -79,6 +80,28 @@ export declare interface Margin extends MarginSettings {
     vertical: number;
 }
 
+/**
+ * Represents the object of the `MouseDownOutside` Popup event.
+ */
+export declare interface MouseDownOutsideEvent {
+    /**
+     * An event target.
+     */
+    target: Popup;
+    /**
+     * The event object.
+     */
+    event: MouseEvent;
+    /**
+     * The state of the Popup.
+     */
+    state: PopupState;
+    /**
+     * Indicates if the MouseDown event is triggered over the anchor of the Popup.
+     */
+    isAnchorClicked: boolean;
+}
+
 /**
  * The offset position of the Popup.
  */
@@ -226,6 +249,10 @@ export declare interface PopupProps extends PopupSettings {
      * Fires after the Popup position is set.
      */
     onPosition?: (event: PositionEvent) => void;
+    /**
+     * Fires when the mousedown event is triggered outside the Popup.
+     */
+    onMouseDownOutside?: (event: MouseDownOutsideEvent) => void;
     /**
      * Controls the Popup visibility ([see example]({% slug hidden_popup %})). Defaults to `false`.
      */
@@ -252,6 +279,10 @@ export declare interface PopupProps extends PopupSettings {
      * @hidden
      */
     onKeyDown?: (event: React.KeyboardEvent) => void;
+    /**
+     * @hidden
+     */
+    unstyled?: PopupClassStructure;
 }
 
 /**
@@ -334,6 +365,7 @@ export declare class PopupWithoutContext extends React_2.Component<PopupProps, P
         onPosition: PropTypes.Requireable<(...args: any[]) => any>;
         onOpen: PropTypes.Requireable<(...args: any[]) => any>;
         onKeyPress: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseDownOutside: PropTypes.Requireable<(...args: any[]) => any>;
     };
     /**
      * @hidden
@@ -430,6 +462,7 @@ export declare class PopupWithoutContext extends React_2.Component<PopupProps, P
     private setPosition;
     private onOpened;
     private animate;
+    private handleMouseDown;
     private onClosing;
     private onClosed;
     private get animationDuration();
@@ -442,7 +475,7 @@ export declare class PopupWithoutContext extends React_2.Component<PopupProps, P
 /**
  * Represents the object of the `Position` Popup event.
  */
-declare interface PositionEvent {
+export declare interface PositionEvent {
     /**
      * An event target.
      */

package/index.d.ts

@@ -10,6 +10,7 @@ import { CollisionType as CollisionType_2 } from '@progress/kendo-popup-common';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { MarginSettings } from '@progress/kendo-popup-common';
 import { OffsetPosition } from '@progress/kendo-popup-common';
+import { PopupClassStructure } from '@progress/kendo-react-common';
 import { PopupSettings } from '@progress/kendo-popup-common';
 import { PositionMode as PositionMode_2 } from '@progress/kendo-popup-common';
 import PropTypes from 'prop-types';
@@ -79,6 +80,28 @@ export declare interface Margin extends MarginSettings {
     vertical: number;
 }
 
+/**
+ * Represents the object of the `MouseDownOutside` Popup event.
+ */
+export declare interface MouseDownOutsideEvent {
+    /**
+     * An event target.
+     */
+    target: Popup;
+    /**
+     * The event object.
+     */
+    event: MouseEvent;
+    /**
+     * The state of the Popup.
+     */
+    state: PopupState;
+    /**
+     * Indicates if the MouseDown event is triggered over the anchor of the Popup.
+     */
+    isAnchorClicked: boolean;
+}
+
 /**
  * The offset position of the Popup.
  */
@@ -226,6 +249,10 @@ export declare interface PopupProps extends PopupSettings {
      * Fires after the Popup position is set.
      */
     onPosition?: (event: PositionEvent) => void;
+    /**
+     * Fires when the mousedown event is triggered outside the Popup.
+     */
+    onMouseDownOutside?: (event: MouseDownOutsideEvent) => void;
     /**
      * Controls the Popup visibility ([see example]({% slug hidden_popup %})). Defaults to `false`.
      */
@@ -252,6 +279,10 @@ export declare interface PopupProps extends PopupSettings {
      * @hidden
      */
     onKeyDown?: (event: React.KeyboardEvent) => void;
+    /**
+     * @hidden
+     */
+    unstyled?: PopupClassStructure;
 }
 
 /**
@@ -334,6 +365,7 @@ export declare class PopupWithoutContext extends React_2.Component<PopupProps, P
         onPosition: PropTypes.Requireable<(...args: any[]) => any>;
         onOpen: PropTypes.Requireable<(...args: any[]) => any>;
         onKeyPress: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseDownOutside: PropTypes.Requireable<(...args: any[]) => any>;
     };
     /**
      * @hidden
@@ -430,6 +462,7 @@ export declare class PopupWithoutContext extends React_2.Component<PopupProps, P
     private setPosition;
     private onOpened;
     private animate;
+    private handleMouseDown;
     private onClosing;
     private onClosed;
     private get animationDuration();
@@ -442,7 +475,7 @@ export declare class PopupWithoutContext extends React_2.Component<PopupProps, P
 /**
  * Represents the object of the `Position` Popup event.
  */
-declare interface PositionEvent {
+export declare interface PositionEvent {
     /**
      * An event target.
      */

package/package-metadata.mjs

@@ -10,7 +10,7 @@ const e = {
   name: "@progress/kendo-react-popup",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1723203364,
+  publishDate: 1724427373,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-popup",
-  "version": "8.3.0-develop.1",
+  "version": "8.3.0-develop.10",
   "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",
@@ -24,7 +24,7 @@
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.3.4",
     "@progress/kendo-popup-common": "^1.9.0",
-    "@progress/kendo-react-common": "8.3.0-develop.1",
+    "@progress/kendo-react-common": "8.3.0-develop.10",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
   },