@progress/kendo-react-popup/dist/cdn/js/kendo-react-popup.js

React Popup positions a piece of content next to a specific anchor component. KendoReact Popup package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("react-dom"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-popup-common")):"function"==typeof define&&define.amd?define(["exports","react","react-dom","prop-types","@progress/kendo-react-common","@progress/kendo-popup-common"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactPopup={},e.React,e.ReactDOM,e.PropTypes,e.KendoReactCommon,e.KendoPopupCommon)}(this,(function(e,n,t,o,r,i){"use strict";function s(e){var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var l=s(n),c=s(t);const p=(e,n,t)=>{e.style.transitionDuration="",n&&e.classList.remove(...n.split(" ")),t&&e.classList.remove(...t.split(" "))},u="undefined"!=typeof window&&/Firefox/.test(window.navigator.userAgent),a=(e,n,t,o,i,s,l)=>{if(0===n)return o();const c=`${s}Active`,a=r.classNames(r.uPopup[s]({direction:l,type:t,c:i})),d=r.classNames(r.uPopup[c]({direction:l,type:t,c:i})),f=n=>{n.target===e&&(e.removeEventListener("transitionend",f),p(e,a,d),e.style.display="exit"===t?"none":"",o())};e.addEventListener("transitionend",f);const m=e.ownerDocument;if(!m)return;const h=m.defaultView;if(!h)return;const g=()=>{p(e,a,d),"enter"===t&&(e.style.display=""),a&&e.classList.add(...a.split(" ").filter((e=>e))),h.requestAnimationFrame((()=>{e.style.transitionDuration=n+"ms",e.classList.add(...d.split(" ").filter((e=>e)))}))};u?h.requestAnimationFrame(g):g()},d=l.createContext((e=>e));function f(e,n){if(e===n)return!0;if(!!e!=!!n)return!1;const t=Object.getOwnPropertyNames(e),o=Object.getOwnPropertyNames(n);if(t.length!==o.length)return!1;for(let o=0;o<t.length;o++){const r=t[o];if(e[r]!==n[r])return!1}return!0}const m=l.forwardRef(((e,n)=>{const t=l.useContext(d).call(void 0,e),{collision:o=h.collision,anchorAlign:s=h.anchorAlign,popupAlign:p=h.popupAlign,offset:u=h.offset,animate:m=h.animate,show:v=h.show,margin:y=h.margin,positionMode:w=h.positionMode,appendTo:P,contentKey:A,anchor:b,scale:O,role:C,onKeyDown:x,onPosition:T,onOpen:D,onMouseDownOutside:E,onClose:N,className:L,popupClass:z,id:R,style:j,children:K}=t,M=r.useUnstyled(),k=t.unstyled||M,q=k&&k.uPopup,[I,H]=l.useState({current:"hidden",previous:"hidden",props:{}}),F=m&&"object"!=typeof m?g:{...g,...m},S=e=>{null==window||window.addEventListener("mousedown",Z),U(e),W(e.firstChild,"enter",V),H({...re,current:"shown",previous:re.current})},U=e=>{const{width:n,height:t}=e.style;if(0===e.offsetWidth&&0===e.offsetHeight)return;e.style.width=e.offsetWidth+"px",e.style.height=e.offsetHeight+"px";const r=i.alignElement({anchor:b,anchorAlign:s,element:e,elementAlign:p,offset:u,margin:y,positionMode:w,scale:O}),l=i.positionElement({anchor:b,anchorAlign:s,element:e,elementAlign:p,collisions:o,currentLocation:r,margin:y});if(e.style.top=l.offset.top+"px",e.style.left=l.offset.left+"px",e.style.width=n,e.style.height=t,Y.current={fit:l.fit,fitted:l.fitted,flip:l.flip,flipped:l.flipped},T){const e={target:ne.current,flipped:l.flipped,fitted:l.fitted};T.call(void 0,e)}},V=()=>{const e=ee.current;e&&(v&&e.classList.add(...r.classNames(r.uPopup.animationContainerShown({c:q})).split(" ").filter((e=>e))),G(e),D&&D.call(void 0,{target:ne.current}))},W=(n,t,o)=>{if(p){if("slide"===F.type){let r;const{horizontal:i,vertical:s}=p;r="object"==typeof e.animate&&e.animate.direction?F.direction:"left"===i&&"center"===s?"right":"right"===i&&"center"===s?"left":"top"===s?"down":"up";const l={down:"up",up:"down",left:"right",right:"left"};Y.current&&Y.current.flipped&&(r=l[r],a(n,B()[t],t,o,q,F.type,r))}a(n,B()[t],t,o,q,F.type,F.direction)}},Z=e=>{var n;const t=null===(null==(n=null==e?void 0:e.target)?void 0:n.closest(".k-animation-container")),o=(null==b?void 0:b.contains(null==e?void 0:e.target))||!1;if(t){if(E){const n={target:ne.current,event:e,state:I,isAnchorClicked:o};E.call(void 0,n)}null==window||window.removeEventListener("mousedown",Z)}},$=()=>{"hiding"===re.current&&("shown"===re.previous||"reposition"===re.previous)&&H({...re,current:"hidden",previous:re.current}),N&&N.call(void 0,{target:ne.current})},B=()=>{const e=m;let n=0,t=0;return e&&(!0===e?n=t=300:(n=e.openDuration||0,t=e.closeDuration||0)),{enter:n,exit:t}},G=e=>{J(),_.current=i.domUtils.scrollableParents(b||e),_.current&&_.current.map((e=>e.addEventListener("scroll",Q))),window.addEventListener("resize",Q)},J=()=>{_.current&&(_.current.map((e=>e.removeEventListener("scroll",Q))),_.current=void 0),window.removeEventListener("resize",Q)},Q=function(e,n,t={}){let o,r,i,s,l=0;t=t||{};const c=function(){l=!1===t.leading?0:(new Date).getTime(),o=void 0,s=e.apply(r,i),o||(r=i=null)};return function(){const p=(new Date).getTime();!l&&!1===t.leading&&(l=p);const u=n-(p-l);return r=void 0,i=arguments,u<=0||u>n?(o&&(clearTimeout(o),o=void 0),l=p,s=e.apply(r,i),o||(r=i=null)):!o&&!1!==t.trailing&&(o=window.setTimeout(c,u)),s}}((()=>{ee.current&&"hidden"!==re.current&&"hiding"!==re.current&&H({...I,current:"reposition",previous:re.current})}),16.666666666666668),X=r.useZIndexContext()||0,Y=l.useRef(void 0),_=l.useRef(void 0),ee=l.useRef(null),ne=l.useRef(null),te=l.useRef({}),oe=l.useRef(!1);l.useImperativeHandle(ne,(()=>({element:ee.current,setPosition:U,props:e}))),l.useImperativeHandle(n,(()=>ne.current));const re=l.useMemo((()=>{const e={...I,props:{show:v,anchor:b,anchorAlign:s,appendTo:P,collision:o,popupAlign:p,className:L,popupClass:z,style:j,offset:u,contentKey:A}};return v?"hidden"===I.current||"hiding"===I.current?{...e,current:"showing",previous:I.current}:"showing"===I.current?{...e,current:"shown",previous:I.current}:"shown"!==I.current||f(u,I.props.offset)&&f(s,I.props.anchorAlign)&&f(P,I.props.appendTo)&&f(o,I.props.collision)&&f(p,I.props.popupAlign)&&f(j,I.props.style)&&b===I.props.anchor&&z===I.props.popupClass&&L===I.props.className?e:{...e,current:"reposition",previous:I.current}:"hiding"===I.current||"hidden"===I.current?{...e,current:"hidden",previous:I.current}:{...e,current:"hiding",previous:I.current}}),[v,b,s,P,o,p,L,z,j,u,A,I]);l.useEffect((()=>{"hiding"===re.current&&!oe.current&&ee.current?(oe.current=!0,(e=>{if(!v){const n=k&&k.uPopup;e.classList.remove(...r.classNames(r.uPopup.animationContainerShown({c:n})).split(" ").filter((e=>e)))}J()})(ee.current),W(ee.current.firstChild,"exit",$)):(oe.current=!1,"showing"===re.current&&ee.current&&!ee.current.classList.contains("k-animation-container-shown")?S(ee.current):"hiding"===re.current&&ee.current?$():"reposition"===re.current&&"shown"===re.previous?setTimeout((()=>{H({...re,current:"shown",previous:re.current})}),0):"shown"===re.current&&te.current.contentKey!==A&&ee.current&&U(ee.current)),"reposition"===re.current&&("shown"===re.previous||"showing"===re.previous)&&ee.current&&U(ee.current),te.current={contentKey:A}}),[re]),l.useEffect((()=>("showing"===re.current&&ee.current&&S(ee.current),()=>{J()})),[]);const ie=P||(r.canUseDOM?b&&b.ownerDocument?b.ownerDocument.body:document.body:void 0),se=Object.assign({},{position:w,top:0,left:-1e4},j||{}),le="hiding"===re.current;if((v||le)&&ie){const e=X?X+1:100,n=l.createElement(r.ZIndexContext.Provider,{value:e},l.createElement("div",{onKeyDown:x,className:r.classNames(r.uPopup.animationContainer({c:q}),L),id:R,ref:ee,style:{zIndex:e,...se}},l.createElement("div",{className:r.classNames(r.uPopup.animationChild({c:q})),style:{transitionDelay:"0ms"}},l.createElement("div",{role:C,className:r.classNames(r.uPopup.popup({c:q}),z)},K))));return null!==P?c.createPortal(n,ie):n}return null})),h={collision:{horizontal:i.Collision.fit,vertical:i.Collision.flip},anchorAlign:{horizontal:i.AlignPoint.left,vertical:i.AlignPoint.bottom},popupAlign:{horizontal:i.AlignPoint.left,vertical:i.AlignPoint.top},offset:{left:-1e3,top:0},animate:!0,show:!1,margin:{horizontal:0,vertical:0},positionMode:"absolute"},g={type:"slide",direction:"down"};m.displayName="Popup",m.propTypes={anchor:function(e){const n=e.anchor;return n&&"number"!=typeof n.nodeType?new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed."):null},appendTo:function(e){const n=e.appendTo;return n&&"number"!=typeof n.nodeType?new Error("Invalid prop `appendTo` supplied to `Kendo React Popup`. Validation failed."):null},className:o.oneOfType([o.string,o.arrayOf(o.string.isRequired)]),id:o.string,popupClass:o.oneOfType([o.string,o.arrayOf(o.string),o.object]),collision:o.shape({horizontal:o.oneOf([i.Collision.fit,i.Collision.flip,i.Collision.none]),vertical:o.oneOf([i.Collision.fit,i.Collision.flip,i.Collision.none])}),anchorAlign:o.shape({horizontal:o.oneOf([i.AlignPoint.left,i.AlignPoint.center,i.AlignPoint.right]),vertical:o.oneOf([i.AlignPoint.top,i.AlignPoint.center,i.AlignPoint.bottom])}),popupAlign:o.shape({horizontal:o.oneOf([i.AlignPoint.left,i.AlignPoint.center,i.AlignPoint.right]),vertical:o.oneOf([i.AlignPoint.top,i.AlignPoint.center,i.AlignPoint.bottom])}),offset:o.shape({left:o.number,top:o.number}),children:o.oneOfType([o.element,o.node]),show:o.bool,animate:o.oneOfType([o.bool,o.shape({type:o.oneOf(["slide","zoom","push","expand","fade"]),openDuration:o.number,closeDuration:o.number})]),margin:o.shape({horizontal:o.number,vertical:o.number}),positionMode:o.oneOf(["fixed","absolute"]),scale:o.number,style:o.object,onClose:o.func,onPosition:o.func,onOpen:o.func,onKeyDown:o.func,onMouseDownOutside:o.func},e.Popup=m,e.PopupPropsContext=d}));