@progress/kendo-react-popup 16.2.0-develop.2 → 16.2.0-develop.20

package/Popup.mjs

@@ -5,14 +5,14 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as i from "react";
-import * as Ae from "react-dom";
+import * as r from "react";
+import * as De from "react-dom";
 import t from "prop-types";
-import { animations as De } from "./animation.mjs";
-import { useUnstyled as xe, useZIndexContext as Re, canUseDOM as Te, ZIndexContext as ze, classNames as R, uPopup as T } from "@progress/kendo-react-common";
-import { Collision as w, AlignPoint as s, alignElement as Ne, positionElement as Le, domUtils as Ie } from "@progress/kendo-popup-common";
-import { throttle as Se, FRAME_DURATION as Me } from "./util.mjs";
-const Ue = i.createContext((c) => c), je = 12e3, ke = 1;
+import { animations as xe } from "./animation.mjs";
+import { useUnstyled as Re, useZIndexContext as Te, canUseDOM as ze, ZIndexContext as Ne, classNames as R, uPopup as T } from "@progress/kendo-react-common";
+import { Collision as w, AlignPoint as s, alignElement as Le, positionElement as Ie, domUtils as Se } from "@progress/kendo-popup-common";
+import { throttle as Me, FRAME_DURATION as Ue } from "./util.mjs";
+const je = r.createContext((c) => c), ke = 12e3, Ze = 1;
 function O(c, u) {
   if (c === u)
     return !0;
@@ -28,11 +28,11 @@ function O(c, u) {
   }
   return !0;
 }
-const Ze = {
+const Fe = {
   left: -1e3,
   top: 0
-}, se = i.forwardRef((c, u) => {
-  const v = i.useContext(Ue).call(void 0, c), {
+}, ce = r.forwardRef((c, u) => {
+  const v = r.useContext(je).call(void 0, c), {
     collision: m = d.collision,
     anchorAlign: h = d.anchorAlign,
     popupAlign: y = d.popupAlign,
@@ -44,33 +44,33 @@ const Ze = {
     appendTo: C,
     contentKey: I,
     anchor: p,
-    scale: ce,
-    role: le,
-    ariaLabelledBy: ae,
-    ariaDescribedBy: ue,
-    onKeyDown: pe,
+    scale: le,
+    role: ae,
+    ariaLabelledBy: ue,
+    ariaDescribedBy: pe,
+    onKeyDown: fe,
     onPosition: W,
     onOpen: X,
     onMouseDownOutside: G,
     onClose: J,
     className: S,
     popupClass: M,
-    id: fe,
+    id: de,
     style: U,
-    children: de
-  } = v, me = xe(), j = v.unstyled || me, x = j && j.uPopup, [n, k] = i.useState({
+    children: me
+  } = v, he = Re(), j = v.unstyled || he, x = j && j.uPopup, [n, k] = r.useState({
     current: "hidden",
     previous: "hidden",
     props: {}
-  }), Z = L && typeof L != "object" ? ie : { ...ie, ...L }, he = (e) => {
-    window == null || window.addEventListener("mousedown", Y), F(e), Q(e.firstChild, "enter", ge), k({ ...o, current: "shown", previous: o.current });
+  }), Z = L && typeof L != "object" ? se : { ...se, ...L }, ge = (e) => {
+    window == null || window.addEventListener("mousedown", Y), F(e), Q(e.firstChild, "enter", we), k({ ...o, current: "shown", previous: o.current });
   }, F = (e) => {
-    const { width: r, height: f } = e.style;
+    const { width: i, height: f } = e.style;
     if (e.offsetWidth === 0 && e.offsetHeight === 0)
       return;
-    const a = getComputedStyle(e), P = parseFloat(a.width), _ = P > 0 ? e.getBoundingClientRect().width / P : 1, D = (ce || 1) * _;
+    const a = getComputedStyle(e), P = parseFloat(a.width), _ = P > 0 ? e.getBoundingClientRect().width / P : 1, D = (le || 1) * _;
     e.style.width = a.width, e.style.height = a.height;
-    const re = Ne({
+    const ie = Le({
       anchor: p,
       anchorAlign: h,
       element: e,
@@ -79,35 +79,35 @@ const Ze = {
       margin: q,
       positionMode: V,
       scale: D
-    }), g = Le({
+    }), g = Ie({
       anchor: p,
       anchorAlign: h,
       element: e,
       elementAlign: y,
       collisions: m,
-      currentLocation: re,
+      currentLocation: ie,
       margin: q,
       scale: D
     });
-    if (e.style.top = g.offset.top + "px", e.style.left = g.offset.left + "px", e.style.width = r, e.style.height = f, te.current = {
+    if (e.style.top = g.offset.top + "px", e.style.left = g.offset.left + "px", e.style.width = i, e.style.height = f, te.current = {
       fit: g.fit,
       fitted: g.fitted,
       flip: g.flip,
       flipped: g.flipped
     }, W) {
-      const Ee = {
+      const Ae = {
         target: A.current,
         flipped: g.flipped,
         fitted: g.fitted
       };
-      W.call(void 0, Ee);
+      W.call(void 0, Ae);
     }
-  }, ge = () => {
+  }, we = () => {
     const e = l.current;
     e && (b && e.classList.add(
-      ...R(T.animationContainerShown({ c: x })).split(" ").filter((r) => r)
-    ), ye(e), X && X.call(void 0, { target: A.current }));
-  }, Q = (e, r, f) => {
+      ...R(T.animationContainerShown({ c: x })).split(" ").filter((i) => i)
+    ), Pe(e), X && X.call(void 0, { target: A.current }));
+  }, Q = (e, i, f) => {
     var P;
     if (!y)
       return;
@@ -121,10 +121,10 @@ const Ze = {
         right: "left"
       }[a]);
     }
-    De(
+    oe.current = xe(
       e,
-      ve()[r],
-      r,
+      ye()[i],
+      i,
       f,
       x,
       Z.type,
@@ -132,8 +132,8 @@ const Ze = {
     );
   }, Y = (e) => {
     var a;
-    const r = ((a = e == null ? void 0 : e.target) == null ? void 0 : a.closest(".k-animation-container")) === null, f = (p == null ? void 0 : p.contains(e == null ? void 0 : e.target)) || !1;
-    if (r) {
+    const i = ((a = e == null ? void 0 : e.target) == null ? void 0 : a.closest(".k-animation-container")) === null, f = (p == null ? void 0 : p.contains(e == null ? void 0 : e.target)) || !1;
+    if (i) {
       if (G) {
         const P = {
           target: A.current,
@@ -145,33 +145,34 @@ const Ze = {
       }
       window == null || window.removeEventListener("mousedown", Y);
     }
-  }, we = (e) => {
+  }, ve = (e) => {
     if (!b) {
-      const r = j && j.uPopup;
+      const i = j && j.uPopup;
       e.classList.remove(
-        ...R(T.animationContainerShown({ c: r })).split(" ").filter((f) => f)
+        ...R(T.animationContainerShown({ c: i })).split(" ").filter((f) => f)
       );
     }
     H();
   }, $ = () => {
     o.current === "hiding" && (o.previous === "shown" || o.previous === "reposition") && k({ ...o, current: "hidden", previous: o.current }), J && J.call(void 0, { target: A.current });
-  }, ve = () => {
+  }, ye = () => {
     const e = L;
-    let r = 0, f = 0;
-    return e && (e === !0 ? r = f = 300 : (r = e.openDuration || 0, f = e.closeDuration || 0)), { enter: r, exit: f };
-  }, ye = (e) => {
-    H(), E.current = Ie.scrollableParents(p || e), E.current && E.current.map((r) => r.addEventListener("scroll", K)), window.addEventListener("resize", K);
+    let i = 0, f = 0;
+    return e && (e === !0 ? i = f = 300 : (i = e.openDuration || 0, f = e.closeDuration || 0)), { enter: i, exit: f };
+  }, Pe = (e) => {
+    H(), E.current = Se.scrollableParents(p || e), E.current && E.current.map((i) => i.addEventListener("scroll", K)), window.addEventListener("resize", K);
   }, H = () => {
     E.current && (E.current.map((e) => e.removeEventListener("scroll", K)), E.current = void 0), window.removeEventListener("resize", K);
-  }, K = Se(() => {
+  }, K = Me(() => {
     l.current && o.current !== "hidden" && o.current !== "hiding" && k({ ...n, current: "reposition", previous: o.current });
-  }, Me), Pe = () => ee ? ee + ke : je, ee = Re() || 0, te = i.useRef(void 0), E = i.useRef(void 0), l = i.useRef(null), A = i.useRef(null), ne = i.useRef({}), B = i.useRef(!1);
-  i.useImperativeHandle(A, () => ({
+  }, Ue), Oe = () => ee ? ee + Ze : ke, ee = Te() || 0, te = r.useRef(void 0), E = r.useRef(void 0), l = r.useRef(null), A = r.useRef(null), ne = r.useRef({}), B = r.useRef(!1), oe = r.useRef(() => {
+  });
+  r.useImperativeHandle(A, () => ({
     element: l.current,
     setPosition: F,
     props: c
-  })), i.useImperativeHandle(u, () => A.current);
-  const o = i.useMemo(() => {
+  })), r.useImperativeHandle(u, () => A.current);
+  const o = r.useMemo(() => {
     const e = {
       ...n,
       props: {
@@ -203,51 +204,51 @@ const Ze = {
     I,
     n
   ]);
-  i.useEffect(() => {
-    o.current === "hiding" && !B.current && l.current ? (B.current = !0, we(l.current), Q(l.current.firstChild, "exit", $)) : (B.current = !1, o.current === "showing" && l.current && !l.current.classList.contains("k-animation-container-shown") ? he(l.current) : o.current === "hiding" && l.current ? $() : o.current === "reposition" && o.previous === "shown" ? setTimeout(() => {
+  r.useEffect(() => {
+    o.current === "hiding" && !B.current && l.current ? (B.current = !0, ve(l.current), Q(l.current.firstChild, "exit", $)) : (B.current = !1, o.current === "showing" && l.current && !l.current.classList.contains("k-animation-container-shown") ? ge(l.current) : o.current === "hiding" && l.current ? $() : o.current === "reposition" && o.previous === "shown" ? setTimeout(() => {
       k({ ...o, current: "shown", previous: o.current });
     }, 0) : o.current === "shown" && ne.current.contentKey !== I && l.current && F(l.current)), o.current === "reposition" && (o.previous === "shown" || o.previous === "showing") && l.current && F(l.current), ne.current = { contentKey: I };
-  }, [o]), i.useEffect(() => () => {
-    H();
+  }, [o]), r.useEffect(() => () => {
+    oe.current(), H();
   }, []);
-  const oe = C || (Te ? p && p.ownerDocument ? p.ownerDocument.body : document.body : void 0), Oe = Object.assign(
+  const re = C || (ze ? p && p.ownerDocument ? p.ownerDocument.body : document.body : void 0), be = Object.assign(
     {},
     { position: V, top: 0, left: -1e4 },
     U || {}
-  ), be = v.offset !== void 0 && !O(v.offset, d.offset) || v.margin !== void 0, Ce = o.current === "hiding";
-  if ((b || Ce) && oe) {
-    const e = Pe(), r = /* @__PURE__ */ i.createElement(ze.Provider, { value: e }, /* @__PURE__ */ i.createElement(
+  ), Ce = v.offset !== void 0 && !O(v.offset, d.offset) || v.margin !== void 0, Ee = o.current === "hiding";
+  if ((b || Ee) && re) {
+    const e = Oe(), i = /* @__PURE__ */ r.createElement(Ne.Provider, { value: e }, /* @__PURE__ */ r.createElement(
       "div",
       {
-        onKeyDown: pe,
+        onKeyDown: fe,
         className: R(T.animationContainer({ c: x }), S),
-        id: fe,
+        id: de,
         ref: l,
         style: {
           zIndex: e,
-          ...Oe
+          ...be
         }
       },
-      /* @__PURE__ */ i.createElement(
+      /* @__PURE__ */ r.createElement(
         "div",
         {
           className: R(T.animationChild({ c: x })),
           style: { transitionDelay: "0ms" }
         },
-        /* @__PURE__ */ i.createElement(
+        /* @__PURE__ */ r.createElement(
           "div",
           {
-            role: le,
-            "aria-labelledby": ae,
-            "aria-describedby": ue,
+            role: ae,
+            "aria-labelledby": ue,
+            "aria-describedby": pe,
             className: R(T.popup({ c: x }), M),
-            style: be ? { margin: 0 } : void 0
+            style: Ce ? { margin: 0 } : void 0
           },
-          de
+          me
         )
       )
     ));
-    return C !== null ? Ae.createPortal(r, oe) : r;
+    return C !== null ? De.createPortal(i, re) : i;
   }
   return null;
 }), d = {
@@ -263,7 +264,7 @@ const Ze = {
     horizontal: s.left,
     vertical: s.top
   },
-  offset: Ze,
+  offset: Fe,
   animate: !0,
   show: !1,
   margin: {
@@ -271,12 +272,12 @@ const Ze = {
     vertical: 0
   },
   positionMode: "absolute"
-}, ie = {
+}, se = {
   type: "slide",
   direction: "down"
 };
-se.displayName = "Popup";
-se.propTypes = {
+ce.displayName = "Popup";
+ce.propTypes = {
   anchor: function(c) {
     const u = c.anchor;
     return u && typeof u.nodeType != "number" ? new Error("Invalid prop `anchor` supplied to `Kendo React Popup`. Validation failed.") : null;
@@ -328,7 +329,7 @@ se.propTypes = {
   onMouseDownOutside: t.func
 };
 export {
-  se as Popup,
-  Ue as PopupPropsContext,
+  ce as Popup,
+  je as PopupPropsContext,
   d as popupDefaultProps
 };

package/animation.d.ts

@@ -9,4 +9,4 @@ import { PopupAnimationType, PopupAnimationDirection } from './models/PopupAnima
 /**
  * @hidden
  */
-export declare const animations: (element: HTMLElement, duration: number, type: 'enter' | 'exit', callback: Function, popupClasses: any, animationType: PopupAnimationType, direction?: PopupAnimationDirection) => any;
+export declare const animations: (element: HTMLElement, duration: number, type: 'enter' | 'exit', callback: Function, popupClasses: any, animationType: PopupAnimationType, direction?: PopupAnimationDirection) => () => void;

package/animation.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("@progress/kendo-react-common"),y=(i,s,t)=>{i.style.transitionDuration="",s&&i.classList.remove(...s.split(" ")),t&&i.classList.remove(...t.split(" "))},p=typeof window!="undefined"&&/Firefox/.test(window.navigator.userAgent),L=(i,s,t,c,f,u,d)=>{if(s===0)return c();const m=`${u}Active`,o=a.classNames(a.uPopup[u]({direction:d,type:t,c:f})),r=a.classNames(a.uPopup[m]({direction:d,type:t,c:f})),l=n=>{n.target===i&&(i.removeEventListener("transitionend",l),y(i,o,r),t==="exit"?i.style.display="none":i.style.display="",c())};i.addEventListener("transitionend",l);const v=i.ownerDocument;if(!v)return;const e=v.defaultView;if(!e)return;const w=()=>{y(i,o,r),t==="enter"&&(i.style.display=""),o&&i.classList.add(...o.split(" ").filter(n=>n)),e.requestAnimationFrame(()=>{i.style.transitionDuration=s+"ms",i.classList.add(...r.split(" ").filter(n=>n))})};p?e.requestAnimationFrame(w):w()};exports.animations=L;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@progress/kendo-react-common"),F=(i,t,s)=>{i.style.transitionDuration="",t&&i.classList.remove(...t.split(" ")),s&&i.classList.remove(...s.split(" "))},E=typeof window!="undefined"&&/Firefox/.test(window.navigator.userAgent),P=50,c=new WeakMap,q=i=>{var t;(t=c.get(i))==null||t()},x=(i,t,s,l,m,p,A)=>{var y;if(q(i),t===0)return l(),()=>{};const L=`${p}Active`,o=e.classNames(e.uPopup[p]({direction:A,type:s,c:m})),f=e.classNames(e.uPopup[L]({direction:A,type:s,c:m})),a=(y=i.ownerDocument)==null?void 0:y.defaultView;if(!a)return()=>{};let u=!1;const d=[],r=()=>{u||(u=!0,i.removeEventListener("transitionend",v),a.clearTimeout(h),d.forEach(n=>a.cancelAnimationFrame(n)),F(i,o,f),c.get(i)===r&&c.delete(i))},g=()=>{u||(r(),s==="exit"?i.style.display="none":i.style.display="",l())},v=n=>{n.target===i&&g()};i.addEventListener("transitionend",v);const h=a.setTimeout(g,t+P);c.set(i,r);const w=()=>{F(i,o,f),s==="enter"&&(i.style.display=""),o&&i.classList.add(...o.split(" ").filter(n=>n)),d.push(a.requestAnimationFrame(()=>{i.style.transitionDuration=t+"ms",i.classList.add(...f.split(" ").filter(n=>n))}))};return E?d.push(a.requestAnimationFrame(w)):w(),r};exports.animations=x;

package/animation.mjs

@@ -5,29 +5,41 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { classNames as l, uPopup as p } from "@progress/kendo-react-common";
-const y = (i, s, t) => {
-  i.style.transitionDuration = "", s && i.classList.remove(...s.split(" ")), t && i.classList.remove(...t.split(" "));
-}, A = typeof window != "undefined" && /Firefox/.test(window.navigator.userAgent), x = (i, s, t, f, c, e, d) => {
-  if (s === 0)
-    return f();
-  const L = `${e}Active`, o = l(p[e]({ direction: d, type: t, c })), r = l(p[L]({ direction: d, type: t, c })), u = (n) => {
-    n.target === i && (i.removeEventListener("transitionend", u), y(i, o, r), t === "exit" ? i.style.display = "none" : i.style.display = "", f());
-  };
-  i.addEventListener("transitionend", u);
-  const v = i.ownerDocument;
-  if (!v)
-    return;
-  const a = v.defaultView;
+import { classNames as L, uPopup as g } from "@progress/kendo-react-common";
+const y = (i, t, s) => {
+  i.style.transitionDuration = "", t && i.classList.remove(...t.split(" ")), s && i.classList.remove(...s.split(" "));
+}, E = typeof window != "undefined" && /Firefox/.test(window.navigator.userAgent), D = 50, c = /* @__PURE__ */ new WeakMap(), q = (i) => {
+  var t;
+  (t = c.get(i)) == null || t();
+}, P = (i, t, s, u, l, p, A) => {
+  var F;
+  if (q(i), t === 0)
+    return u(), () => {
+    };
+  const h = `${p}Active`, o = L(g[p]({ direction: A, type: s, c: l })), e = L(g[h]({ direction: A, type: s, c: l })), a = (F = i.ownerDocument) == null ? void 0 : F.defaultView;
   if (!a)
-    return;
+    return () => {
+    };
+  let f = !1;
+  const d = [], r = () => {
+    f || (f = !0, i.removeEventListener("transitionend", v), a.clearTimeout(x), d.forEach((n) => a.cancelAnimationFrame(n)), y(i, o, e), c.get(i) === r && c.delete(i));
+  }, m = () => {
+    f || (r(), s === "exit" ? i.style.display = "none" : i.style.display = "", u());
+  }, v = (n) => {
+    n.target === i && m();
+  };
+  i.addEventListener("transitionend", v);
+  const x = a.setTimeout(m, t + D);
+  c.set(i, r);
   const w = () => {
-    y(i, o, r), t === "enter" && (i.style.display = ""), o && i.classList.add(...o.split(" ").filter((n) => n)), a.requestAnimationFrame(() => {
-      i.style.transitionDuration = s + "ms", i.classList.add(...r.split(" ").filter((n) => n));
-    });
+    y(i, o, e), s === "enter" && (i.style.display = ""), o && i.classList.add(...o.split(" ").filter((n) => n)), d.push(
+      a.requestAnimationFrame(() => {
+        i.style.transitionDuration = t + "ms", i.classList.add(...e.split(" ").filter((n) => n));
+      })
+    );
   };
-  A ? a.requestAnimationFrame(w) : w();
+  return E ? d.push(a.requestAnimationFrame(w)) : w(), r;
 };
 export {
-  x as animations
+  P as animations
 };

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

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

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = Object.freeze({
     productName: 'KendoReact',
     productCode: 'KENDOUIREACT',
     productCodes: ['KENDOUIREACT'],
-    publishDate: 1789036956,
-    version: '16.2.0-develop.2',
+    publishDate: 1791301554,
+    version: '16.2.0-develop.20',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/components/my-license/'
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-popup",
-  "version": "16.2.0-develop.2",
+  "version": "16.2.0-develop.20",
   "description": "React Popup positions a piece of content next to a specific anchor component. KendoReact Popup package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -27,7 +27,7 @@
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.7.2",
     "@progress/kendo-popup-common": "^1.9.5",
-    "@progress/kendo-react-common": "16.2.0-develop.2",
+    "@progress/kendo-react-common": "16.2.0-develop.20",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
@@ -54,7 +54,7 @@
     "package": {
       "productName": "KendoReact",
       "productCode": "KENDOUIREACT",
-      "publishDate": 1789036956,
+      "publishDate": 1791301554,
       "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
     }
   },