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