@progress/kendo-react-popup 10.2.0-develop.1 → 10.2.0-develop.11

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 c=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(c,h,v.get?v:{enumerable:!0,get:()=>i[h]})}}return c.default=i,Object.freeze(c)}const l=ne(we),Oe=ne(ve),te=l.createContext(i=>i),Ae=100,be=1;function E(i,c){if(i===c)return!0;if(!!i!=!!c)return!1;const h=Object.getOwnPropertyNames(i),v=Object.getOwnPropertyNames(c);if(h.length!==v.length)return!1;for(let P=0;P<h.length;P++){const w=h[P];if(i[w]!==c[w])return!1}return!0}const Ce={left:-1e3,top:0},U=l.forwardRef((i,c)=>{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:K=g.margin,positionMode:Z=g.positionMode,appendTo:A,contentKey:T,anchor:d,scale:re,role:ie,onKeyDown:se,onPosition:F,onOpen:H,onMouseDownOutside:V,onClose:X,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:{}}),W=e=>{window==null||window.addEventListener("mousedown",G),j(e),B(e.firstChild,"enter",ae),I({...r,current:"shown",previous:r.current})},j=e=>{const{width:s,height:m}=e.style;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:K,positionMode:Z,scale:re}),f=t.positionElement({anchor:d,anchorAlign:w,element:e,elementAlign:y,collisions:P,currentLocation:p,margin:K});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},F){const x={target:C.current,flipped:f.flipped,fitted:f.fitted};F.call(void 0,x)}},ae=()=>{const e=u.current;e&&(O&&e.classList.add(...a.classNames(a.uPopup.animationContainerShown({c:D})).split(" ").filter(s=>s)),de(e),H&&H.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}),X&&X.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",L)),window.addEventListener("resize",L)},_=()=>{b.current&&(b.current.map(e=>e.removeEventListener("scroll",L)),b.current=void 0),window.removeEventListener("resize",L)},L=ee.throttle(()=>{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(),b=l.useRef(),u=l.useRef(null),C=l.useRef(null),Y=l.useRef({}),q=l.useRef(!1);l.useImperativeHandle(C,()=>({element:u.current,setPosition:j,props:i})),l.useImperativeHandle(c,()=>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&&u.current?(q.current=!0,pe(u.current),B(u.current.firstChild,"exit",J)):(q.current=!1,r.current==="showing"&&u.current?W(u.current):r.current==="hiding"&&u.current?J():r.current==="reposition"&&r.previous==="shown"?setTimeout(()=>{I({...r,current:"shown",previous:r.current})},0):r.current==="shown"&&Y.current.contentKey!==T&&u.current&&j(u.current)),r.current==="reposition"&&(r.previous==="shown"||r.previous==="showing")&&u.current&&j(u.current),Y.current={contentKey:T}},[r]),l.useEffect(()=>(r.current==="showing"&&u.current&&W(u.current),()=>{_()}),[]);const $=A||(a.canUseDOM?d&&d.ownerDocument?d.ownerDocument.body:document.body:void 0),he=Object.assign({},{position:Z,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:u,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 c=i.anchor;return c&&typeof c.nodeType!="number"?new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed."):null},appendTo:function(i){const c=i.appendTo;return c&&typeof c.nodeType!="number"?new Error("Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed."):null},className:n.oneOfType([n.string,n.arrayOf(n.string.isRequired)]),id:n.string,popupClass:n.oneOfType([n.string,n.arrayOf(n.string),n.object]),collision:n.shape({horizontal:n.oneOf([t.Collision.fit,t.Collision.flip,t.Collision.none]),vertical:n.oneOf([t.Collision.fit,t.Collision.flip,t.Collision.none])}),anchorAlign:n.shape({horizontal:n.oneOf([t.AlignPoint.left,t.AlignPoint.center,t.AlignPoint.right]),vertical:n.oneOf([t.AlignPoint.top,t.AlignPoint.center,t.AlignPoint.bottom])}),popupAlign:n.shape({horizontal:n.oneOf([t.AlignPoint.left,t.AlignPoint.center,t.AlignPoint.right]),vertical:n.oneOf([t.AlignPoint.top,t.AlignPoint.center,t.AlignPoint.bottom])}),offset:n.shape({left:n.number,top:n.number}),children:n.oneOfType([n.element,n.node]),show:n.bool,animate:n.oneOfType([n.bool,n.shape({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 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 c=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(c,h,v.get?v:{enumerable:!0,get:()=>i[h]})}}return c.default=i,Object.freeze(c)}const l=ne(we),Oe=ne(ve),te=l.createContext(i=>i),Ae=100,be=1;function E(i,c){if(i===c)return!0;if(!!i!=!!c)return!1;const h=Object.getOwnPropertyNames(i),v=Object.getOwnPropertyNames(c);if(h.length!==v.length)return!1;for(let P=0;P<h.length;P++){const w=h[P];if(i[w]!==c[w])return!1}return!0}const Ce={left:-1e3,top:0},U=l.forwardRef((i,c)=>{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:K=g.margin,positionMode:Z=g.positionMode,appendTo:A,contentKey:T,anchor:d,scale:re,role:ie,onKeyDown:se,onPosition:F,onOpen:H,onMouseDownOutside:V,onClose:X,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:{}}),W=e=>{window==null||window.addEventListener("mousedown",G),j(e),B(e.firstChild,"enter",ae),I({...r,current:"shown",previous:r.current})},j=e=>{const{width:s,height:m}=e.style;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:K,positionMode:Z,scale:re}),f=t.positionElement({anchor:d,anchorAlign:w,element:e,elementAlign:y,collisions:P,currentLocation:p,margin:K});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},F){const x={target:C.current,flipped:f.flipped,fitted:f.fitted};F.call(void 0,x)}},ae=()=>{const e=u.current;e&&(O&&e.classList.add(...a.classNames(a.uPopup.animationContainerShown({c:D})).split(" ").filter(s=>s)),de(e),H&&H.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}),X&&X.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",L)),window.addEventListener("resize",L)},_=()=>{b.current&&(b.current.map(e=>e.removeEventListener("scroll",L)),b.current=void 0),window.removeEventListener("resize",L)},L=ee.throttle(()=>{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),u=l.useRef(null),C=l.useRef(null),Y=l.useRef({}),q=l.useRef(!1);l.useImperativeHandle(C,()=>({element:u.current,setPosition:j,props:i})),l.useImperativeHandle(c,()=>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&&u.current?(q.current=!0,pe(u.current),B(u.current.firstChild,"exit",J)):(q.current=!1,r.current==="showing"&&u.current?W(u.current):r.current==="hiding"&&u.current?J():r.current==="reposition"&&r.previous==="shown"?setTimeout(()=>{I({...r,current:"shown",previous:r.current})},0):r.current==="shown"&&Y.current.contentKey!==T&&u.current&&j(u.current)),r.current==="reposition"&&(r.previous==="shown"||r.previous==="showing")&&u.current&&j(u.current),Y.current={contentKey:T}},[r]),l.useEffect(()=>(r.current==="showing"&&u.current&&W(u.current),()=>{_()}),[]);const $=A||(a.canUseDOM?d&&d.ownerDocument?d.ownerDocument.body:document.body:void 0),he=Object.assign({},{position:Z,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:u,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 c=i.anchor;return c&&typeof c.nodeType!="number"?new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed."):null},appendTo:function(i){const c=i.appendTo;return c&&typeof c.nodeType!="number"?new Error("Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed."):null},className:n.oneOfType([n.string,n.arrayOf(n.string.isRequired)]),id:n.string,popupClass:n.oneOfType([n.string,n.arrayOf(n.string),n.object]),collision:n.shape({horizontal:n.oneOf([t.Collision.fit,t.Collision.flip,t.Collision.none]),vertical:n.oneOf([t.Collision.fit,t.Collision.flip,t.Collision.none])}),anchorAlign:n.shape({horizontal:n.oneOf([t.AlignPoint.left,t.AlignPoint.center,t.AlignPoint.right]),vertical:n.oneOf([t.AlignPoint.top,t.AlignPoint.center,t.AlignPoint.bottom])}),popupAlign:n.shape({horizontal:n.oneOf([t.AlignPoint.left,t.AlignPoint.center,t.AlignPoint.right]),vertical:n.oneOf([t.AlignPoint.top,t.AlignPoint.center,t.AlignPoint.bottom])}),offset:n.shape({left:n.number,top:n.number}),children:n.oneOfType([n.element,n.node]),show:n.bool,animate:n.oneOfType([n.bool,n.shape({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;

package/Popup.mjs

@@ -149,7 +149,7 @@ const ze = {
     O.current && (O.current.map((e) => e.removeEventListener("scroll", k)), O.current = void 0), window.removeEventListener("resize", k);
   }, k = De(() => {
     o.current !== "hidden" && o.current !== "hiding" && U({ ...n, current: "reposition", previous: o.current });
-  }, Ae), de = () => Y ? Y + Ne : Re, Y = Pe() || 0, Z = i.useRef(), O = i.useRef(), l = i.useRef(null), E = i.useRef(null), $ = i.useRef({}), _ = i.useRef(!1);
+  }, Ae), de = () => Y ? Y + Ne : Re, Y = Pe() || 0, Z = i.useRef(void 0), O = i.useRef(void 0), l = i.useRef(null), E = i.useRef(null), $ = i.useRef({}), _ = i.useRef(!1);
   i.useImperativeHandle(E, () => ({
     element: l.current,
     setPosition: j,

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(" "))},p="undefined"!=typeof window&&/Firefox/.test(window.navigator.userAgent),a=(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})),a=n=>{n.target===e&&(e.removeEventListener("transitionend",a),u(e,l,c),e.style.display="exit"===o?"none":"",i())};e.addEventListener("transitionend",a);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)))}))};p?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=g.collision,anchorAlign:s=g.anchorAlign,popupAlign:u=g.popupAlign,offset:p=g.offset,animate:m=g.animate,show:h=g.show,margin:v=g.margin,positionMode:w=g.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,q=M&&M.uPopup,[k,I]=l.useState({current:"hidden",previous:"hidden",props:{}}),F=e=>{null==window||window.addEventListener("mousedown",V),H(e),U(e.firstChild,"enter",S),I({...te,current:"shown",previous:te.current})},H=e=>{const{width:n,height:t}=e.style;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:p,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&&(h&&e.classList.add(...r.classNames(r.uPopup.animationContainerShown({c:q})).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]),a(n,r,W()[t],t,o,q)},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:k,isAnchorClicked:o};D.call(void 0,n)}null==window||window.removeEventListener("mousedown",V)}},Z=()=>{"hiding"===te.current&&("shown"===te.previous||"reposition"===te.previous)&&I({...te,current:"hidden",previous:te.current}),E&&E.call(void 0,{target:_.current})},W=()=>{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 p=n-(u-l);return r=void 0,i=arguments,p<=0||p>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,p)),s}}((()=>{"hidden"!==te.current&&"hiding"!==te.current&&I({...k,current:"reposition",previous:te.current})}),16.666666666666668),Q=r.useZIndexContext()||0,X=l.useRef(),Y=l.useRef(),$=l.useRef(null),_=l.useRef(null),ee=l.useRef({}),ne=l.useRef(!1);l.useImperativeHandle(_,(()=>({element:$.current,setPosition:H,props:e}))),l.useImperativeHandle(n,(()=>_.current));const te=l.useMemo((()=>{const e={...k,props:{show:h,anchor:A,anchorAlign:s,appendTo:y,collision:o,popupAlign:u,className:N,popupClass:L,style:z,offset:p,contentKey:P}};return h?"hidden"===k.current||"hiding"===k.current?{...e,current:"showing",previous:k.current}:"showing"===k.current?{...e,current:"shown",previous:k.current}:"shown"!==k.current||f(p,k.props.offset)&&f(s,k.props.anchorAlign)&&f(y,k.props.appendTo)&&f(o,k.props.collision)&&f(u,k.props.popupAlign)&&f(z,k.props.style)&&A===k.props.anchor&&L===k.props.popupClass&&N===k.props.className?e:{...e,current:"reposition",previous:k.current}:"hiding"===k.current||"hidden"===k.current?{...e,current:"hidden",previous:k.current}:{...e,current:"hiding",previous:k.current}}),[h,A,s,y,o,u,N,L,z,p,P,k]);l.useEffect((()=>{"hiding"===te.current&&!ne.current&&$.current?(ne.current=!0,(e=>{if(!h){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",Z)):(ne.current=!1,"showing"===te.current&&$.current?F($.current):"hiding"===te.current&&$.current?Z():"reposition"===te.current&&"shown"===te.previous?setTimeout((()=>{I({...te,current:"shown",previous:te.current})}),0):"shown"===te.current&&ee.current.contentKey!==P&&$.current&&H($.current)),"reposition"===te.current&&("shown"===te.previous||"showing"===te.previous)&&$.current&&H($.current),ee.current={contentKey:P}}),[te]),l.useEffect((()=>("showing"===te.current&&$.current&&F($.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((h||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:q}),N),id:R,ref:$,style:{zIndex:e,...re}},l.createElement("div",{className:r.classNames(r.uPopup.animationChild({c:q})),style:{transitionDelay:"0ms"}},l.createElement("div",{role:O,className:r.classNames(r.uPopup.popup({c:q}),L)},j))));return null!==y?c.createPortal(n,oe):n}return null})),g={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 u=(e,n,t)=>{e.style.transitionDuration="",n&&e.classList.remove(...n.split(" ")),t&&e.classList.remove(...t.split(" "))},p="undefined"!=typeof window&&/Firefox/.test(window.navigator.userAgent),a=(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})),a=n=>{n.target===e&&(e.removeEventListener("transitionend",a),u(e,l,c),e.style.display="exit"===o?"none":"",i())};e.addEventListener("transitionend",a);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)))}))};p?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=g.collision,anchorAlign:s=g.anchorAlign,popupAlign:u=g.popupAlign,offset:p=g.offset,animate:m=g.animate,show:h=g.show,margin:v=g.margin,positionMode:w=g.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,q=M&&M.uPopup,[k,I]=l.useState({current:"hidden",previous:"hidden",props:{}}),F=e=>{null==window||window.addEventListener("mousedown",V),H(e),U(e.firstChild,"enter",S),I({...te,current:"shown",previous:te.current})},H=e=>{const{width:n,height:t}=e.style;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:p,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&&(h&&e.classList.add(...r.classNames(r.uPopup.animationContainerShown({c:q})).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]),a(n,r,W()[t],t,o,q)},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:k,isAnchorClicked:o};D.call(void 0,n)}null==window||window.removeEventListener("mousedown",V)}},Z=()=>{"hiding"===te.current&&("shown"===te.previous||"reposition"===te.previous)&&I({...te,current:"hidden",previous:te.current}),E&&E.call(void 0,{target:_.current})},W=()=>{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 p=n-(u-l);return r=void 0,i=arguments,p<=0||p>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,p)),s}}((()=>{"hidden"!==te.current&&"hiding"!==te.current&&I({...k,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:H,props:e}))),l.useImperativeHandle(n,(()=>_.current));const te=l.useMemo((()=>{const e={...k,props:{show:h,anchor:A,anchorAlign:s,appendTo:y,collision:o,popupAlign:u,className:N,popupClass:L,style:z,offset:p,contentKey:P}};return h?"hidden"===k.current||"hiding"===k.current?{...e,current:"showing",previous:k.current}:"showing"===k.current?{...e,current:"shown",previous:k.current}:"shown"!==k.current||f(p,k.props.offset)&&f(s,k.props.anchorAlign)&&f(y,k.props.appendTo)&&f(o,k.props.collision)&&f(u,k.props.popupAlign)&&f(z,k.props.style)&&A===k.props.anchor&&L===k.props.popupClass&&N===k.props.className?e:{...e,current:"reposition",previous:k.current}:"hiding"===k.current||"hidden"===k.current?{...e,current:"hidden",previous:k.current}:{...e,current:"hiding",previous:k.current}}),[h,A,s,y,o,u,N,L,z,p,P,k]);l.useEffect((()=>{"hiding"===te.current&&!ne.current&&$.current?(ne.current=!0,(e=>{if(!h){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",Z)):(ne.current=!1,"showing"===te.current&&$.current?F($.current):"hiding"===te.current&&$.current?Z():"reposition"===te.current&&"shown"===te.previous?setTimeout((()=>{I({...te,current:"shown",previous:te.current})}),0):"shown"===te.current&&ee.current.contentKey!==P&&$.current&&H($.current)),"reposition"===te.current&&("shown"===te.previous||"showing"===te.previous)&&$.current&&H($.current),ee.current={contentKey:P}}),[te]),l.useEffect((()=>("showing"===te.current&&$.current&&F($.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((h||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:q}),N),id:R,ref:$,style:{zIndex:e,...re}},l.createElement("div",{className:r.classNames(r.uPopup.animationChild({c:q})),style:{transitionDelay:"0ms"}},l.createElement("div",{role:O,className:r.classNames(r.uPopup.popup({c:q}),L)},j))));return null!==y?c.createPortal(n,oe):n}return null})),g={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}));

package/index.d.mts

@@ -175,35 +175,68 @@ export declare interface PopupOpenEvent {
 export declare interface PopupProps extends PopupSettings {
     /**
      * Controls the Popup animation ([see example]({% slug animations_popup %})). By default, the opening and closing animations are enabled.
+     *
+     * @example
+     * ```jsx
+     * <Popup animate={false} />
+     * ```
      */
     animate?: boolean | PopupAnimation;
     /**
      * Specifies the element which will be used as an anchor ([see example]({% slug alignmentpositioning_popup %})). The Popup opens next to that element.
+     *
+     * @example
+     * ```jsx
+     * <Popup anchor={document.getElementById('anchorElement')} />
+     * ```
      */
     anchor?: HTMLElement | null;
     /**
      * Defines the container to which the Popup will be appended. Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
      * * If set to `null` the Popup will be rendered without React Portal.
+     *
+     * @example
+     * ```jsx
+     * <Popup appendTo={document.getElementById('container')} />
+     * ```
      */
     appendTo?: HTMLElement | null;
     /**
      * Specifies the pivot point of the anchor ([see example]({% slug alignmentpositioning_popup %})).
+     *
+     * @example
+     * ```jsx
+     * <Popup anchorAlign={{ horizontal: 'left', vertical: 'top' }} />
+     * ```
      */
     anchorAlign?: Align;
     /**
      * Configures the collision behavior of the Popup ([see example]({% slug viewportboundarydetection_popup %})).
+     *
+     * @example
+     * ```jsx
+     * <Popup collision={{ horizontal: 'fit', vertical: 'flip' }} />
+     * ```
      */
     collision?: Collision;
     /**
      * Configures the margin value that will be added to the popup dimensions
      * in pixels and leaves a blank space between the popup and the anchor.
+     *
+     * @example
+     * ```jsx
+     * <Popup margin={{ horizontal: 10, vertical: 10 }} />
+     * ```
      */
     margin?: Margin;
     /**
      * Specifies the position mode of the component. By default, the Popup uses fixed positioning.
      * To make the Popup acquire absolute positioning, set this option to `absolute`.
      *
-     * > If you need to support mobile browsers with the zoom option, use the `absolute` positioning of the Popup.
+     * @example
+     * ```jsx
+     * <Popup positionMode="absolute" />
+     * ```
      */
     positionMode?: PositionMode;
     /**
@@ -213,52 +246,111 @@ export declare interface PopupProps extends PopupSettings {
      *
      * > Using this token is not necessary for user-applied browser zoom.
      *
+     * @example
+     * ```jsx
+     * <Popup scale={1.5} />
+     * ```
      */
     scale?: number;
     /**
      * Specifies the pivot point of the Popup ([see example]({% slug alignmentpositioning_popup %})).
+     *
+     * @example
+     * ```jsx
+     * <Popup popupAlign={{ horizontal: 'center', vertical: 'bottom' }} />
+     * ```
      */
     popupAlign?: Align;
     /**
      * Specifies the absolute position of the element ([see example]({% slug alignmentpositioning_popup %})). The Popup opens next to that point. The pivot point of the Popup is defined by the `popupAlign` configuration option. The boundary detection is applied by using the window viewport.
+     *
+     * @example
+     * ```jsx
+     * <Popup offset={{ left: 100, top: 200 }} />
+     * ```
      */
     offset?: Offset;
     /**
      * Specifies a list of CSS classes that will be added to the internal animated element ([see example]({% slug appearance_popup %})).
+     *
+     * @example
+     * ```jsx
+     * <Popup popupClass="custom-popup-class" />
+     * ```
      */
     popupClass?: string | Array<string> | {
         [key: string]: boolean;
     };
     /**
      * Specifies a list of CSS classes that will be added to the Popup element.
+     *
+     * @example
+     * ```jsx
+     * <Popup className="custom-class" />
+     * ```
      */
     className?: string | Array<string>;
     /**
      * Specifies the id that will be added to the Popup element.
+     *
+     * @example
+     * ```jsx
+     * <Popup id="popup-id" />
+     * ```
      */
     id?: string;
     /**
      * Represents the styles that are applied to the Popup.
+     *
+     * @example
+     * ```jsx
+     * <Popup style={{ width: '200px', height: '100px' }} />
+     * ```
      */
     style?: React.CSSProperties;
     /**
      * Fires after the Popup is opened and the opening animation ends.
+     *
+     * @example
+     * ```jsx
+     * <Popup onOpen={(event) => console.log('Popup opened')} />
+     * ```
      */
     onOpen?: (event: PopupOpenEvent) => void;
     /**
      * Fires after the Popup is closed.
+     *
+     * @example
+     * ```jsx
+     * <Popup onClose={(event) => console.log('Popup closed')} />
+     * ```
      */
     onClose?: (event: PopupCloseEvent) => void;
     /**
      * Fires after the Popup position is set.
+     *
+     * @example
+     * ```jsx
+     * <Popup onPosition={(event) => console.log('Popup positioned')} />
+     * ```
      */
     onPosition?: (event: PositionEvent) => void;
     /**
      * Fires when the mousedown event is triggered outside the Popup.
+     *
+     * @example
+     * ```jsx
+     * <Popup onMouseDownOutside={(event) => console.log('onMouseDownOutside')} />
+     * ```
      */
     onMouseDownOutside?: (event: MouseDownOutsideEvent) => void;
     /**
      * Controls the Popup visibility ([see example]({% slug hidden_popup %})). Defaults to `false`.
+     *
+     * @example
+     * ```jsx
+     * <Popup show={true} />
+     * ```
      */
     show?: boolean;
     /**

package/index.d.ts

@@ -175,35 +175,68 @@ export declare interface PopupOpenEvent {
 export declare interface PopupProps extends PopupSettings {
     /**
      * Controls the Popup animation ([see example]({% slug animations_popup %})). By default, the opening and closing animations are enabled.
+     *
+     * @example
+     * ```jsx
+     * <Popup animate={false} />
+     * ```
      */
     animate?: boolean | PopupAnimation;
     /**
      * Specifies the element which will be used as an anchor ([see example]({% slug alignmentpositioning_popup %})). The Popup opens next to that element.
+     *
+     * @example
+     * ```jsx
+     * <Popup anchor={document.getElementById('anchorElement')} />
+     * ```
      */
     anchor?: HTMLElement | null;
     /**
      * Defines the container to which the Popup will be appended. Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
      * * If set to `null` the Popup will be rendered without React Portal.
+     *
+     * @example
+     * ```jsx
+     * <Popup appendTo={document.getElementById('container')} />
+     * ```
      */
     appendTo?: HTMLElement | null;
     /**
      * Specifies the pivot point of the anchor ([see example]({% slug alignmentpositioning_popup %})).
+     *
+     * @example
+     * ```jsx
+     * <Popup anchorAlign={{ horizontal: 'left', vertical: 'top' }} />
+     * ```
      */
     anchorAlign?: Align;
     /**
      * Configures the collision behavior of the Popup ([see example]({% slug viewportboundarydetection_popup %})).
+     *
+     * @example
+     * ```jsx
+     * <Popup collision={{ horizontal: 'fit', vertical: 'flip' }} />
+     * ```
      */
     collision?: Collision;
     /**
      * Configures the margin value that will be added to the popup dimensions
      * in pixels and leaves a blank space between the popup and the anchor.
+     *
+     * @example
+     * ```jsx
+     * <Popup margin={{ horizontal: 10, vertical: 10 }} />
+     * ```
      */
     margin?: Margin;
     /**
      * Specifies the position mode of the component. By default, the Popup uses fixed positioning.
      * To make the Popup acquire absolute positioning, set this option to `absolute`.
      *
-     * > If you need to support mobile browsers with the zoom option, use the `absolute` positioning of the Popup.
+     * @example
+     * ```jsx
+     * <Popup positionMode="absolute" />
+     * ```
      */
     positionMode?: PositionMode;
     /**
@@ -213,52 +246,111 @@ export declare interface PopupProps extends PopupSettings {
      *
      * > Using this token is not necessary for user-applied browser zoom.
      *
+     * @example
+     * ```jsx
+     * <Popup scale={1.5} />
+     * ```
      */
     scale?: number;
     /**
      * Specifies the pivot point of the Popup ([see example]({% slug alignmentpositioning_popup %})).
+     *
+     * @example
+     * ```jsx
+     * <Popup popupAlign={{ horizontal: 'center', vertical: 'bottom' }} />
+     * ```
      */
     popupAlign?: Align;
     /**
      * Specifies the absolute position of the element ([see example]({% slug alignmentpositioning_popup %})). The Popup opens next to that point. The pivot point of the Popup is defined by the `popupAlign` configuration option. The boundary detection is applied by using the window viewport.
+     *
+     * @example
+     * ```jsx
+     * <Popup offset={{ left: 100, top: 200 }} />
+     * ```
      */
     offset?: Offset;
     /**
      * Specifies a list of CSS classes that will be added to the internal animated element ([see example]({% slug appearance_popup %})).
+     *
+     * @example
+     * ```jsx
+     * <Popup popupClass="custom-popup-class" />
+     * ```
      */
     popupClass?: string | Array<string> | {
         [key: string]: boolean;
     };
     /**
      * Specifies a list of CSS classes that will be added to the Popup element.
+     *
+     * @example
+     * ```jsx
+     * <Popup className="custom-class" />
+     * ```
      */
     className?: string | Array<string>;
     /**
      * Specifies the id that will be added to the Popup element.
+     *
+     * @example
+     * ```jsx
+     * <Popup id="popup-id" />
+     * ```
      */
     id?: string;
     /**
      * Represents the styles that are applied to the Popup.
+     *
+     * @example
+     * ```jsx
+     * <Popup style={{ width: '200px', height: '100px' }} />
+     * ```
      */
     style?: React.CSSProperties;
     /**
      * Fires after the Popup is opened and the opening animation ends.
+     *
+     * @example
+     * ```jsx
+     * <Popup onOpen={(event) => console.log('Popup opened')} />
+     * ```
      */
     onOpen?: (event: PopupOpenEvent) => void;
     /**
      * Fires after the Popup is closed.
+     *
+     * @example
+     * ```jsx
+     * <Popup onClose={(event) => console.log('Popup closed')} />
+     * ```
      */
     onClose?: (event: PopupCloseEvent) => void;
     /**
      * Fires after the Popup position is set.
+     *
+     * @example
+     * ```jsx
+     * <Popup onPosition={(event) => console.log('Popup positioned')} />
+     * ```
      */
     onPosition?: (event: PositionEvent) => void;
     /**
      * Fires when the mousedown event is triggered outside the Popup.
+     *
+     * @example
+     * ```jsx
+     * <Popup onMouseDownOutside={(event) => console.log('onMouseDownOutside')} />
+     * ```
      */
     onMouseDownOutside?: (event: MouseDownOutsideEvent) => void;
     /**
      * Controls the Popup visibility ([see example]({% slug hidden_popup %})). Defaults to `false`.
+     *
+     * @example
+     * ```jsx
+     * <Popup show={true} />
+     * ```
      */
     show?: boolean;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-popup",
-  "version": "10.2.0-develop.1",
+  "version": "10.2.0-develop.11",
   "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.5.1",
     "@progress/kendo-popup-common": "^1.9.0",
-    "@progress/kendo-react-common": "10.2.0-develop.1",
+    "@progress/kendo-react-common": "10.2.0-develop.11",
     "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"
   },