@progress/kendo-react-dialogs 13.4.0-develop.1 → 13.4.0-develop.3

package/Window.mjs

@@ -5,415 +5,524 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as r from "react";
-import * as H from "react-dom";
-import n from "prop-types";
-import { WindowTitleBar as N } from "./WindowTitlebar.mjs";
-import { withIdHOC as U, createPropsContext as z, withPropsContext as k, keepFocusInContainer as _, Keys as a, dispatchEvent as g, canUseDOM as S, ZIndexContext as A, classNames as Z, Draggable as O } from "@progress/kendo-react-common";
-import { ResizeHandlers as K } from "./WindowResizeHandlers.mjs";
-import { MiddleLayerOptimization as P } from "./MiddleLayerOptimization.mjs";
-import { windowStage as i } from "./StageEnum.mjs";
-import { WindowActionsBar as B } from "./WindowActionsBar.mjs";
-import { DEFAULT_DIALOGS_ZINDEX as v, ZINDEX_DIALOGS_STEP as R, DATA_DIALOGS_ID as X } from "./constants.mjs";
-import { getMaxZIndex as x } from "./utils.mjs";
-const E = 300, C = 300, D = 120, T = 100, l = 5, u = class u extends r.Component {
-  constructor(s) {
-    super(s), this.context = 0, this.draggable = null, this.offSetCoordinates = { x: 0, y: 0 }, this.titleId = this.generateTitleId(), this.mounted = !1, this.activeElement = null, this.onKeyDown = (t) => {
-      var p, w, m;
-      if (this.props.modal && _(t, this.element), t.target !== t.currentTarget)
+import * as w from "react";
+import * as ut from "react-dom";
+import * as i from "prop-types";
+import { WindowTitleBar as ft } from "./WindowTitlebar.mjs";
+import { withIdHOC as ht, createPropsContext as gt, withPropsContext as st, ZIndexContext as Ze, canUseDOM as le, keepFocusInContainer as mt, Keys as E, dispatchEvent as v, classNames as wt, Draggable as Tt } from "@progress/kendo-react-common";
+import { ResizeHandlers as Et } from "./WindowResizeHandlers.mjs";
+import { MiddleLayerOptimization as Ct } from "./MiddleLayerOptimization.mjs";
+import { windowStage as o } from "./StageEnum.mjs";
+import { WindowActionsBar as _e } from "./WindowActionsBar.mjs";
+import { DEFAULT_DIALOGS_ZINDEX as Pe, ZINDEX_DIALOGS_STEP as Ke, DATA_DIALOGS_ID as Lt } from "./constants.mjs";
+import { getMaxZIndex as Xe } from "./utils.mjs";
+const { useState: H, useEffect: N, useCallback: d, useMemo: K, useRef: F, useImperativeHandle: Dt, useContext: It, forwardRef: bt } = w, Q = 300, p = 300, me = 120, we = 100, I = 5, U = {
+  minWidth: me,
+  minHeight: we,
+  resizable: !0,
+  draggable: !0,
+  modal: !1,
+  doubleClickStageChange: !0,
+  autoFocus: !0
+}, Ge = bt((e, k) => {
+  var ve;
+  const {
+    minWidth: de = U.minWidth,
+    minHeight: ue = U.minHeight,
+    resizable: fe = U.resizable,
+    draggable: Te = U.draggable,
+    modal: he = U.modal,
+    doubleClickStageChange: Ye = U.doubleClickStageChange,
+    autoFocus: je = U.autoFocus
+  } = e, [$e, X] = H(e.stage || o.DEFAULT), [G, ee] = H(!1), [te, b] = H(0), [ne, W] = H(0), [ie, M] = H(Q), [oe, S] = H(p), [qe, ge] = H(!0), [se, Ee] = H(Pe), a = (ve = e.stage) != null ? ve : $e, A = It(Ze), B = F(null), Ce = F(null), h = F({
+    leftBeforeAction: 0,
+    topBeforeAction: 0,
+    widthBeforeAction: Q,
+    heightBeforeAction: p
+  }), x = F({ x: 0, y: 0 }), z = F(void 0), V = F(
+    le ? document.activeElement : null
+  ), Le = F("window-title-" + (e.id ? e.id + "-accessibility-id" : "")), O = F({
+    left: 0,
+    top: 0,
+    width: Q,
+    height: p,
+    internalLeft: ne,
+    internalTop: te,
+    internalWidth: ie,
+    internalHeight: oe,
+    stage: a,
+    draggable: Te,
+    props: e
+  }), R = d(() => {
+    const t = le ? document : null;
+    return e.appendTo ? e.appendTo.ownerDocument : t;
+  }, [e.appendTo]), s = d(() => {
+    const t = R();
+    return t == null ? void 0 : t.defaultView;
+  }, [R]), Z = K(() => {
+    var t;
+    return a !== o.FULLSCREEN ? Math.max((t = e.top) != null ? t : te, 0) : 0;
+  }, [a, e.top, te]), _ = K(() => {
+    var t;
+    return a !== o.FULLSCREEN ? Math.max((t = e.left) != null ? t : ne, 0) : 0;
+  }, [a, e.left, ne]), C = K(() => {
+    var n;
+    const t = (n = e.width) != null ? n : ie;
+    if (a === o.FULLSCREEN) {
+      if (e.appendTo)
+        return e.appendTo.offsetWidth;
+      const r = s();
+      return r ? r.innerWidth : 0;
+    }
+    return t;
+  }, [a, e.width, e.appendTo, ie, s]), L = K(() => {
+    const t = e.height === void 0 ? oe : e.height;
+    if (a === o.FULLSCREEN) {
+      if (e.appendTo)
+        return e.appendTo.offsetHeight;
+      const n = s();
+      return n ? n.innerHeight : 0;
+    } else if (a === o.MINIMIZED)
+      return 0;
+    return t;
+  }, [a, e.height, e.appendTo, oe, s]), re = K(() => e.id ? e.id + "-accessibility-id" : void 0, [e.id]);
+  N(() => {
+    O.current = {
+      left: _,
+      top: Z,
+      width: C,
+      height: L,
+      internalLeft: ne,
+      internalTop: te,
+      internalWidth: ie,
+      internalHeight: oe,
+      stage: a,
+      draggable: Te,
+      props: e
+    };
+  });
+  const P = K(() => {
+    if (A === void 0)
+      return A != null ? A : Pe;
+    const t = A ? A + Ke : 0;
+    return se > t ? se : A + Ke;
+  }, [se, A]), De = d(() => {
+    var r, l;
+    if (e.top !== void 0)
+      return e.top;
+    if (e.initialTop !== void 0)
+      return e.initialTop;
+    let t = p;
+    if (e.height !== void 0 ? t = e.height : e.initialHeight !== void 0 && (t = e.initialHeight), e.appendTo && t)
+      return e.appendTo.offsetHeight / 2 - t / 2;
+    const n = s();
+    return n ? n.innerHeight / 2 - ((l = t != null ? t : (r = B.current) == null ? void 0 : r.clientHeight) != null ? l : 0) / 2 : 0;
+  }, [e.top, e.initialTop, e.height, e.initialHeight, e.appendTo, s]), Ie = d(() => {
+    if (e.left !== void 0)
+      return e.left;
+    if (e.initialLeft !== void 0)
+      return e.initialLeft;
+    let t = Q;
+    if (e.width !== void 0 ? t = e.width : e.initialWidth !== void 0 && (t = e.initialWidth), e.appendTo)
+      return e.appendTo.offsetWidth / 2 - t / 2;
+    const n = s();
+    return n ? n.innerWidth / 2 - t / 2 : 0;
+  }, [e.left, e.initialLeft, e.width, e.initialWidth, e.appendTo, s]), be = d(() => {
+    let t = Q;
+    return e.width !== void 0 ? t = e.width : e.initialWidth !== void 0 && (t = e.initialWidth), t;
+  }, [e.width, e.initialWidth]), We = d(() => {
+    let t = p;
+    return e.height !== void 0 ? t = e.height : e.initialHeight !== void 0 && (t = e.initialHeight), t;
+  }, [e.height, e.initialHeight]), Je = d((t) => t.filter((n) => (n == null ? void 0 : n.type) === _e), []), Qe = d((t) => t.filter((n) => n && n.type !== _e), []), m = d(() => typeof k == "object" && k !== null && "current" in k ? k.current : null, [k]), y = d(
+    (t, n, r, l, c, u) => {
+      var j, $, q;
+      if (!t)
+        return;
+      const {
+        internalLeft: T,
+        internalTop: g,
+        internalWidth: D,
+        internalHeight: ce
+      } = O.current;
+      t({
+        nativeEvent: n.nativeEvent ? n.nativeEvent : n.originalEvent,
+        drag: r,
+        end: l,
+        target: m(),
+        left: (j = c == null ? void 0 : c.left) != null ? j : T,
+        top: ($ = c == null ? void 0 : c.top) != null ? $ : g,
+        width: (q = u == null ? void 0 : u.width) != null ? q : D,
+        height: (u == null ? void 0 : u.height) === void 0 ? ce : u == null ? void 0 : u.height
+      });
+    },
+    [m]
+  ), pe = d(
+    (t) => {
+      var u, T;
+      if (he && mt(t, B.current), t.target !== t.currentTarget)
         return;
-      const e = this.props.minWidth || D, o = this.props.minHeight || T, h = t.metaKey || t.ctrlKey, c = (m = (w = this.height) != null ? w : (p = this.windowElement) == null ? void 0 : p.clientHeight) != null ? m : 0;
-      if (h && this.props.resizable) {
+      const n = de || me, r = ue || we, l = t.metaKey || t.ctrlKey, c = (T = L != null ? L : (u = B.current) == null ? void 0 : u.clientHeight) != null ? T : 0;
+      if (l && fe) {
         switch (t.keyCode) {
-          case a.up:
-            t.preventDefault(), o <= c - l && this.setState({ height: c - l });
+          case E.up:
+            t.preventDefault(), r <= c - I && S(c - I);
             break;
-          case a.down:
-            t.preventDefault(), this.setState({ height: c + l });
+          case E.down:
+            t.preventDefault(), S(c + I);
             break;
-          case a.left:
-            e <= this.width - l && this.setState({ width: this.width - l });
+          case E.left:
+            n <= C - I && M(C - I);
             break;
-          case a.right:
-            this.setState({ width: this.width + l });
+          case E.right:
+            M(C + I);
             break;
           default:
             return;
         }
-        this.dispatchMoveEvent(this.props.onResize, t, !1, void 0);
+        y(e.onResize, t, !1, void 0);
         return;
       }
       if (t.altKey) {
         switch (t.keyCode) {
-          case a.up:
-            this.windowStage === i.MINIMIZED ? (this.handleRestore(t), g(this.props.onStageChange, t, this, { state: i.DEFAULT })) : this.windowStage === i.DEFAULT && (this.handleFullscreen(t), g(this.props.onStageChange, t, this, { state: i.FULLSCREEN }));
+          case E.up:
+            a === o.MINIMIZED ? (Y(t), v(e.onStageChange, t, m(), {
+              state: o.DEFAULT
+            })) : a === o.DEFAULT && (ae(t), v(e.onStageChange, t, m(), {
+              state: o.FULLSCREEN
+            }));
             break;
-          case a.down:
-            this.windowStage === i.FULLSCREEN ? (this.handleRestore(t), g(this.props.onStageChange, t, this, { state: i.DEFAULT })) : this.windowStage === i.DEFAULT && (this.handleMinimize(t), g(this.props.onStageChange, t, this, { state: i.MINIMIZED }));
+          case E.down:
+            a === o.FULLSCREEN ? (Y(t), v(e.onStageChange, t, m(), {
+              state: o.DEFAULT
+            })) : a === o.DEFAULT && (Se(t), v(e.onStageChange, t, m(), {
+              state: o.MINIMIZED
+            }));
             break;
         }
         return;
       }
       if (!t.ctrlKey)
         switch (t.keyCode) {
-          case a.esc:
-            this.props.onClose && this.handleCloseWindow(t);
+          case E.esc:
+            e.onClose && ye(t);
             return;
-          case a.up:
-            this.setState((d) => ({ top: d.top - l }));
+          case E.up:
+            b((g) => g - I);
             break;
-          case a.down:
-            this.setState((d) => ({ top: d.top + l }));
+          case E.down:
+            b((g) => g + I);
             break;
-          case a.left:
-            this.setState((d) => ({ left: d.left - l }));
+          case E.left:
+            W((g) => g - I);
             break;
-          case a.right:
-            this.setState((d) => ({ left: d.left + l }));
+          case E.right:
+            W((g) => g + I);
             break;
           default:
             return;
         }
-      this.dispatchMoveEvent(this.props.onMove, t, !1, void 0);
-    }, this.onPress = (t) => {
-      const e = t.event;
-      this.windowCoordinatesState.differenceLeft = e.pageX - this.left, this.windowCoordinatesState.differenceTop = e.pageY - this.top;
-    }, this.onDrag = (t) => {
-      const e = t.event;
-      e.originalEvent.preventDefault(), this.windowStage !== i.FULLSCREEN && this.props.draggable && (this.setState({
-        top: Math.max(e.pageY - this.windowCoordinatesState.differenceTop, 0),
-        left: e.pageX - this.windowCoordinatesState.differenceLeft,
-        isDragging: !0
-      }), this.props.onMove && this.dispatchMoveEvent(this.props.onMove, e, !0, !1));
-    }, this.onRelease = (t) => {
-      const e = t.event;
-      this.windowStage !== i.FULLSCREEN && this.props.draggable && this.props.onMove && this.dispatchMoveEvent(this.props.onMove, e, !0, !0), this.setState({
-        isDragging: !1
-      });
-    }, this.onFocus = () => {
-      this._blurTimeout ? (clearTimeout(this._blurTimeout), this._blurTimeout = void 0) : this.setState({
-        focused: !0,
-        zIndex: x(this.getCurrentZIndex(), this.getDocument(), this._id)
-      });
-    }, this.onBlur = () => {
-      clearTimeout(this._blurTimeout);
-      const t = this.getWindow();
-      t && (this._blurTimeout = t.setTimeout(() => {
-        this.mounted && this.setState({ focused: !1 }), this._blurTimeout = void 0;
-      }));
-    }, this.getInitialTop = () => {
-      var o, h;
-      if (this.props.top !== void 0)
-        return this.props.top;
-      if (this.props.initialTop !== void 0)
-        return this.props.initialTop;
-      let t = C;
-      if (this.props.height !== void 0 ? t = this.props.height : this.props.initialHeight !== void 0 && (t = this.props.initialHeight), this.props.appendTo && t)
-        return this.props.appendTo.offsetHeight / 2 - t / 2;
-      const e = this.getWindow();
-      return e ? e.innerHeight / 2 - ((h = t != null ? t : (o = this.windowElement) == null ? void 0 : o.clientHeight) != null ? h : 0) / 2 : 0;
-    }, this.getInitialLeft = () => {
-      if (this.props.left !== void 0)
-        return this.props.left;
-      if (this.props.initialLeft !== void 0)
-        return this.props.initialLeft;
-      let t = E;
-      if (this.props.width !== void 0 ? t = this.props.width : this.props.initialWidth !== void 0 && (t = this.props.initialWidth), this.props.appendTo)
-        return this.props.appendTo.offsetWidth / 2 - t / 2;
-      const e = this.getWindow();
-      return e ? e.innerWidth / 2 - t / 2 : 0;
-    }, this.getInitialWidth = () => {
-      let t = E;
-      return this.props.width !== void 0 ? t = this.props.width : this.props.initialWidth !== void 0 && (t = this.props.initialWidth), t;
-    }, this.getInitialHeight = () => {
-      let t = C;
-      return this.props.height !== void 0 ? t = this.props.height : this.props.initialHeight !== void 0 && (t = this.props.initialHeight), t;
-    }, this.handleMinimize = (t) => {
-      t.preventDefault(), this.windowCoordinatesState.leftBeforeAction = this.left, this.windowCoordinatesState.topBeforeAction = this.top, this.windowCoordinatesState.widthBeforeAction = this.width, this.windowCoordinatesState.heightBeforeAction = this.height, this.setState({
-        stage: i.MINIMIZED,
-        height: 0
-      }), g(this.props.onStageChange, t, this, { state: i.MINIMIZED });
-    }, this.handleFullscreen = (t) => {
-      t.preventDefault(), this.windowCoordinatesState.leftBeforeAction = this.left, this.windowCoordinatesState.topBeforeAction = this.top, this.windowCoordinatesState.widthBeforeAction = this.width, this.windowCoordinatesState.heightBeforeAction = this.height;
-      const e = this.getWindow(), o = e ? e.innerWidth : 0, h = e ? e.innerHeight : 0;
-      this.setState({
-        left: 0,
-        top: 0,
-        width: this.props.appendTo ? this.props.appendTo.offsetWidth : o,
-        height: this.props.appendTo ? this.props.appendTo.offsetHeight : h,
-        stage: i.FULLSCREEN
-      }), g(this.props.onStageChange, t, this, { state: i.FULLSCREEN });
-    }, this.handleRestore = (t) => {
-      t.preventDefault(), this.windowStage === i.FULLSCREEN ? this.setState({
-        stage: i.DEFAULT,
-        left: this.windowCoordinatesState.leftBeforeAction,
-        top: this.windowCoordinatesState.topBeforeAction,
-        width: this.windowCoordinatesState.widthBeforeAction,
-        height: this.windowCoordinatesState.heightBeforeAction
-      }) : this.windowStage === i.MINIMIZED && this.setState({
-        stage: i.DEFAULT,
-        height: this.windowCoordinatesState.heightBeforeAction
-      }), g(this.props.onStageChange, t, this, { state: i.DEFAULT });
-    }, this.handleCloseWindow = (t) => {
-      t.preventDefault(), g(this.props.onClose, t, this, { state: void 0 });
-    }, this.handleDoubleClick = (t) => {
-      this.windowStage === i.FULLSCREEN || this.windowStage === i.MINIMIZED ? this.handleRestore(t) : this.handleFullscreen(t);
-    }, this.handleResize = (t, e) => {
-      var M, F, y;
-      const o = this.props.appendTo ? t.pageX - this.offSetCoordinates.x : t.pageX, h = this.props.appendTo ? t.pageY - this.offSetCoordinates.y : t.pageY, c = this.width, p = (y = (F = this.height) != null ? F : (M = this.windowElement) == null ? void 0 : M.clientHeight) != null ? y : 0, w = this.props.minWidth || D, m = this.props.minHeight || T, d = this.top - h, L = this.left - o, b = o - this.left, W = h - this.top, f = Object.assign({}, this.state, { isDragging: !e.end });
-      e.direction.indexOf("n") >= 0 && m - (p + d) < 0 && (this.top > 0 && (f.height = p + d), f.top = h), e.direction.indexOf("s") >= 0 && m - W < 0 && (f.height = W), e.direction.indexOf("w") >= 0 && w - (c + L) < 0 && (this.left > 0 && (f.width = c + L), f.left = o), e.direction.indexOf("e") >= 0 && w - b < 0 && (f.width = b), this.setState(f), this.dispatchMoveEvent(this.props.onResize, t, !0, e.end);
-    }, this.dispatchMoveEvent = (t, e, o, h) => {
-      t && t.call(void 0, {
-        nativeEvent: e.nativeEvent ? e.nativeEvent : e.originalEvent,
-        drag: o,
-        end: h,
-        target: this,
-        left: this.state.left,
-        top: this.state.top,
-        width: this.state.width,
-        hight: this.state.height,
-        height: this.state.height
-      });
-    }, this.handleBrowserWindowResize = () => {
-      if (this.windowStage === i.FULLSCREEN) {
-        const t = this.getWindow(), e = t ? t.innerWidth : 0, o = t ? t.innerHeight : 0;
-        this.setState({
-          width: this.props.appendTo ? this.props.appendTo.offsetWidth : e,
-          height: this.props.appendTo ? this.props.appendTo.offsetHeight : o
-        });
+      y(e.onMove, t, !1, void 0);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      he,
+      de,
+      ue,
+      fe,
+      e.onResize,
+      e.onStageChange,
+      e.onClose,
+      e.onMove,
+      L,
+      C,
+      a,
+      y,
+      m
+    ]
+  ), et = d((t) => {
+    const n = t.event, { left: r, top: l } = O.current;
+    h.current.differenceLeft = n.pageX - r, h.current.differenceTop = n.pageY - l;
+  }, []), tt = d(
+    (t) => {
+      const n = t.event;
+      n.originalEvent.preventDefault();
+      const {
+        stage: r,
+        draggable: l,
+        props: c,
+        width: u,
+        height: T
+      } = O.current;
+      if (r !== o.FULLSCREEN && l) {
+        const g = Math.max(n.pageY - (h.current.differenceTop || 0), 0), D = n.pageX - (h.current.differenceLeft || 0);
+        b(g), W(D), ee(!0), c.onMove && y(
+          c.onMove,
+          n,
+          !0,
+          !1,
+          { left: D, top: g },
+          { width: u, height: T }
+        );
       }
-    }, this.getCurrentZIndex = () => !this.state || this.context === void 0 ? this.context ? this.context : v : this.state.zIndex > (this.context ? this.context + R : 0) ? this.state.zIndex : this.context + R, this.getDocument = () => {
-      const t = S ? document : null;
-      return this.props.appendTo ? this.props.appendTo.ownerDocument : t;
-    }, this.getWindow = () => {
-      const t = this.getDocument();
-      return t && t.defaultView;
-    }, this.state = {
-      stage: this.props.stage || i.DEFAULT,
-      isDragging: !1,
-      top: 0,
-      left: 0,
-      width: E,
-      height: C,
-      focused: !0,
-      zIndex: v
-    }, S && (this.activeElement = document.activeElement);
-  }
-  get _id() {
-    return this.props.id + "-accessibility-id";
-  }
-  /**
-   * @hidden
-   */
-  componentDidMount() {
-    this.element && this.props.autoFocus && this.element.focus({ preventScroll: !0 });
-    const s = this.getWindow();
-    s && s.addEventListener("resize", this.handleBrowserWindowResize), this.setState({
-      stage: this.props.stage || i.DEFAULT,
-      isDragging: !1,
-      top: this.getInitialTop(),
-      left: this.getInitialLeft(),
-      width: this.getInitialWidth(),
-      height: this.getInitialHeight(),
-      focused: !0,
-      zIndex: x(this.getCurrentZIndex(), this.getDocument(), this._id)
-    }), this.windowCoordinatesState = {
-      leftBeforeAction: this.getInitialLeft(),
-      topBeforeAction: this.getInitialTop(),
-      widthBeforeAction: this.getInitialWidth(),
-      heightBeforeAction: this.getInitialHeight()
+    },
+    [y]
+  ), nt = d(
+    (t) => {
+      const n = t.event, {
+        stage: r,
+        draggable: l,
+        props: c,
+        left: u,
+        top: T,
+        width: g,
+        height: D
+      } = O.current;
+      r !== o.FULLSCREEN && l && c.onMove && y(
+        c.onMove,
+        n,
+        !0,
+        !0,
+        { left: u, top: T },
+        { width: g, height: D }
+      ), ee(!1);
+    },
+    [y]
+  ), it = d(() => {
+    z.current ? (clearTimeout(z.current), z.current = void 0) : (ge(!0), Ee(Xe(P, R(), re)));
+  }, [P, R, re]), ot = d(() => {
+    clearTimeout(z.current);
+    const t = s();
+    t && (z.current = t.setTimeout(() => {
+      ge(!1), z.current = void 0;
+    }));
+  }, [s]), Se = d(
+    (t) => {
+      t.preventDefault(), h.current.leftBeforeAction = _, h.current.topBeforeAction = Z, h.current.widthBeforeAction = C, h.current.heightBeforeAction = L, X(o.MINIMIZED), S(0), v(e.onStageChange, t, m(), { state: o.MINIMIZED });
+    },
+    [_, Z, C, L, e.onStageChange, m]
+  ), ae = d(
+    (t) => {
+      t.preventDefault(), h.current.leftBeforeAction = _, h.current.topBeforeAction = Z, h.current.widthBeforeAction = C, h.current.heightBeforeAction = L;
+      const n = s(), r = n ? n.innerWidth : 0, l = n ? n.innerHeight : 0;
+      W(0), b(0), M(e.appendTo ? e.appendTo.offsetWidth : r), S(e.appendTo ? e.appendTo.offsetHeight : l), X(o.FULLSCREEN), v(e.onStageChange, t, m(), { state: o.FULLSCREEN });
+    },
+    [_, Z, C, L, e.appendTo, e.onStageChange, s, m]
+  ), Y = d(
+    (t) => {
+      t.preventDefault(), a === o.FULLSCREEN ? (X(o.DEFAULT), W(h.current.leftBeforeAction), b(h.current.topBeforeAction), M(h.current.widthBeforeAction), S(h.current.heightBeforeAction)) : a === o.MINIMIZED && (X(o.DEFAULT), S(h.current.heightBeforeAction)), v(e.onStageChange, t, m(), { state: o.DEFAULT });
+    },
+    [a, e.onStageChange, m]
+  ), ye = d(
+    (t) => {
+      t.preventDefault(), v(e.onClose, t, m(), { state: void 0 });
+    },
+    [e.onClose, m]
+  ), rt = d(
+    (t) => {
+      a === o.FULLSCREEN || a === o.MINIMIZED ? Y(t) : ae(t);
+    },
+    [a, Y, ae]
+  ), at = d(
+    (t, n) => {
+      var Ne, Ue, ke, xe, ze, Oe;
+      const {
+        props: r,
+        width: l,
+        height: c,
+        top: u,
+        left: T
+      } = O.current, g = r.appendTo ? t.pageX - x.current.x : t.pageX, D = r.appendTo ? t.pageY - x.current.y : t.pageY, ce = (Ue = c != null ? c : (Ne = B.current) == null ? void 0 : Ne.clientHeight) != null ? Ue : 0, j = de || me, $ = ue || we, q = u - D, He = T - g, Fe = g - T, Me = D - u;
+      let J = !1;
+      const f = {
+        isDragging: !n.end
+      };
+      n.direction.indexOf("n") >= 0 && $ - (ce + q) < 0 && (u > 0 && (f.height = ce + q), f.top = D, J = !0), n.direction.indexOf("s") >= 0 && $ - Me < 0 && (f.height = Me, J = !0), n.direction.indexOf("w") >= 0 && j - (l + He) < 0 && (T > 0 && (f.width = l + He), f.left = g, J = !0), n.direction.indexOf("e") >= 0 && j - Fe < 0 && (f.width = Fe, J = !0), J && (f.height !== void 0 && S(f.height), f.top !== void 0 && b(f.top), f.width !== void 0 && M(f.width), f.left !== void 0 && W(f.left), f.isDragging !== void 0 && ee(f.isDragging)), y(
+        r.onResize,
+        t,
+        !0,
+        n.end,
+        { left: (ke = f.left) != null ? ke : T, top: (xe = f.top) != null ? xe : u },
+        { width: (ze = f.width) != null ? ze : l, height: (Oe = f.height) != null ? Oe : c }
+      );
+    },
+    [y]
+  ), Ae = d(() => {
+    if (a === o.FULLSCREEN) {
+      const t = s(), n = t ? t.innerWidth : 0, r = t ? t.innerHeight : 0;
+      M(e.appendTo ? e.appendTo.offsetWidth : n), S(e.appendTo ? e.appendTo.offsetHeight : r);
+    }
+  }, [a, e.appendTo, s]);
+  N(() => {
+    const t = B.current;
+    t && je && t.focus({ preventScroll: !0 });
+    const n = s();
+    n && n.addEventListener("resize", Ae), X(e.stage || o.DEFAULT), ee(!1), b(De()), W(Ie()), M(be()), S(We()), ge(!0), Ee(Xe(P, R(), re)), h.current = {
+      leftBeforeAction: Ie(),
+      topBeforeAction: De(),
+      widthBeforeAction: be(),
+      heightBeforeAction: We()
     };
-    const t = this.getDocument();
-    if (this.props.appendTo && t) {
-      const e = this.props.appendTo.getBoundingClientRect(), o = t.body.getBoundingClientRect();
-      this.offSetCoordinates.x = e.left - o.left, this.offSetCoordinates.y = e.top - o.top;
+    const r = R();
+    if (e.appendTo && r) {
+      const l = e.appendTo.getBoundingClientRect(), c = r.body.getBoundingClientRect();
+      x.current.x = l.left - c.left, x.current.y = l.top - c.top;
     }
-    this.mounted = !0;
-  }
-  /**
-   * @hidden
-   */
-  componentWillUnmount() {
-    const s = this.getWindow();
-    s && s.removeEventListener("resize", this.handleBrowserWindowResize), this.mounted = !1, setTimeout(() => {
-      var t;
-      !this.element && this.activeElement && S && (document.contains(this.activeElement) ? this.activeElement.focus({ preventScroll: !0 }) : this.activeElement.id && ((t = document.getElementById(this.activeElement.id)) == null || t.focus({ preventScroll: !0 })));
-    });
-  }
-  /**
-   * @hidden
-   */
-  componentDidUpdate(s) {
-    this.props.left && s.left !== this.props.left && this.setState({ left: this.props.left }), this.props.top && s.top !== this.props.top && this.setState({ top: this.props.top }), this.props.initialLeft && s.initialLeft !== this.props.initialLeft && this.setState({ left: this.props.initialLeft }), this.props.initialTop && s.initialTop !== this.props.initialTop && this.setState({ top: this.props.initialTop });
-    const t = this.getDocument();
-    if (this.props.appendTo && t) {
-      const e = this.props.appendTo.getBoundingClientRect(), o = t.body.getBoundingClientRect();
-      this.offSetCoordinates.x = e.left - o.left, this.offSetCoordinates.y = e.top - o.top;
+    return () => {
+      var c;
+      const l = s();
+      l && l.removeEventListener("resize", Ae), V.current && le && (document.contains(V.current) ? V.current.focus({ preventScroll: !0 }) : V.current.id && ((c = document.getElementById(V.current.id)) == null || c.focus({ preventScroll: !0 })));
+    };
+  }, []), N(() => {
+    e.left !== void 0 && !G && W(e.left);
+  }, [e.left, G]), N(() => {
+    e.top !== void 0 && !G && b(e.top);
+  }, [e.top, G]), N(() => {
+    e.initialLeft !== void 0 && W(e.initialLeft);
+  }, [e.initialLeft]), N(() => {
+    e.initialTop !== void 0 && b(e.initialTop);
+  }, [e.initialTop]), N(() => {
+    const t = R();
+    if (e.appendTo && t) {
+      const n = e.appendTo.getBoundingClientRect(), r = t.body.getBoundingClientRect();
+      x.current.x = n.left - r.left, x.current.y = n.top - r.top;
     }
-    this.mounted = !0;
-  }
-  /**
-   * @hidden
-   */
-  render() {
-    const s = r.Children.toArray(this.props.children), t = this.getContent(s), e = this.getActionBar(s), o = this.getCurrentZIndex(), h = Z("k-window", this.props.className, {
-      [`k-window-${this.props.themeColor}`]: this.props.themeColor,
-      "k-window-minimized": this.state.stage === "MINIMIZED",
-      "k-focus": this.state.focused
-    }), c = /* @__PURE__ */ r.createElement(A.Provider, { value: o }, /* @__PURE__ */ r.createElement(r.Fragment, null, this.props.modal && /* @__PURE__ */ r.createElement(
-      "div",
-      {
-        className: "k-overlay",
-        style: {
-          zIndex: o,
-          ...this.props.overlayStyle
-        }
+  }, [e.appendTo, R]), Dt(
+    k,
+    () => ({
+      get element() {
+        return B.current;
+      },
+      get windowElement() {
+        return B.current;
+      },
+      get draggable() {
+        return Ce.current;
+      },
+      props: e
+    }),
+    [e]
+  );
+  const Be = w.Children.toArray(e.children), ct = Qe(Be), lt = Je(Be), dt = wt("k-window", e.className, {
+    [`k-window-${e.themeColor}`]: e.themeColor,
+    "k-window-minimized": a === "MINIMIZED",
+    "k-focus": qe
+  }), Re = /* @__PURE__ */ w.createElement(Ze.Provider, { value: P }, /* @__PURE__ */ w.createElement(w.Fragment, null, he && /* @__PURE__ */ w.createElement(
+    "div",
+    {
+      className: "k-overlay",
+      style: {
+        zIndex: P,
+        ...e.overlayStyle
+      }
+    }
+  ), /* @__PURE__ */ w.createElement(
+    "div",
+    {
+      id: e.id,
+      [Lt]: re,
+      tabIndex: 0,
+      role: "dialog",
+      "aria-labelledby": Le.current,
+      onFocus: it,
+      onBlur: ot,
+      onKeyDown: pe,
+      ref: B,
+      className: dt,
+      style: {
+        top: Z,
+        left: _,
+        width: C,
+        height: L || "",
+        zIndex: P,
+        ...e.style
       }
-    ), /* @__PURE__ */ r.createElement(
-      "div",
+    },
+    /* @__PURE__ */ w.createElement(
+      Ct,
       {
-        id: this.props.id,
-        [X]: this._id,
-        tabIndex: 0,
-        role: "dialog",
-        "aria-labelledby": this.titleId,
-        onFocus: this.onFocus,
-        onBlur: this.onBlur,
-        onKeyDown: this.onKeyDown,
-        ref: (p) => {
-          this.windowElement = p, this.element = p;
-        },
-        className: h,
-        style: {
-          top: this.top,
-          left: this.left,
-          width: this.width,
-          height: this.height || "",
-          zIndex: o,
-          ...this.props.style
-        }
+        shouldUpdateOnDrag: e.shouldUpdateOnDrag || !1,
+        isDragging: G
       },
-      /* @__PURE__ */ r.createElement(
-        P,
+      /* @__PURE__ */ w.createElement(
+        Tt,
         {
-          shouldUpdateOnDrag: this.props.shouldUpdateOnDrag || !1,
-          isDragging: this.state.isDragging
+          onPress: et,
+          onDrag: tt,
+          onRelease: nt,
+          autoScroll: !1,
+          ref: Ce
         },
-        /* @__PURE__ */ r.createElement(
-          O,
+        /* @__PURE__ */ w.createElement(
+          ft,
           {
-            onPress: this.onPress,
-            onDrag: this.onDrag,
-            onRelease: this.onRelease,
-            autoScroll: !1,
-            ref: (p) => {
-              this.draggable = p;
-            }
+            stage: a,
+            onDoubleClick: Ye ? rt : void 0,
+            onMinimizeButtonClick: Se,
+            onFullScreenButtonClick: ae,
+            onRestoreButtonClick: Y,
+            onCloseButtonClick: ye,
+            closeButton: e.closeButton,
+            minimizeButton: e.minimizeButton,
+            maximizeButton: e.maximizeButton,
+            restoreButton: e.restoreButton,
+            id: Le.current
           },
-          /* @__PURE__ */ r.createElement(
-            N,
-            {
-              stage: this.windowStage,
-              onDoubleClick: this.props.doubleClickStageChange ? this.handleDoubleClick : void 0,
-              onMinimizeButtonClick: this.handleMinimize,
-              onFullScreenButtonClick: this.handleFullscreen,
-              onRestoreButtonClick: this.handleRestore,
-              onCloseButtonClick: this.handleCloseWindow,
-              closeButton: this.props.closeButton,
-              minimizeButton: this.props.minimizeButton,
-              maximizeButton: this.props.maximizeButton,
-              restoreButton: this.props.restoreButton,
-              id: this.titleId
-            },
-            this.props.title
-          )
-        ),
-        this.windowStage !== i.MINIMIZED ? /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("div", { className: "k-window-content" }, t), e) : null,
-        this.windowStage === i.DEFAULT && this.props.resizable ? /* @__PURE__ */ r.createElement(K, { onResize: this.handleResize }) : null
-      )
-    )));
-    return S ? this.props.appendTo !== null ? H.createPortal(c, this.props.appendTo || document.body) : c : null;
-  }
-  // Getters
-  get top() {
-    return this.windowStage !== i.FULLSCREEN ? Math.max(this.props.top || this.state.top, 0) : 0;
-  }
-  get left() {
-    return this.windowStage !== i.FULLSCREEN ? Math.max(this.props.left || this.state.left, 0) : 0;
-  }
-  get width() {
-    let s = this.props.width || this.state.width;
-    if (this.windowStage === i.FULLSCREEN) {
-      if (this.props.appendTo)
-        return s = this.props.appendTo.offsetWidth, s;
-      const t = this.getWindow();
-      s = t ? t.innerWidth : 0;
-    }
-    return s;
-  }
-  get height() {
-    let s = this.props.height || this.state.height;
-    if (this.windowStage === i.FULLSCREEN) {
-      if (this.props.appendTo)
-        return s = this.props.appendTo.offsetHeight, s;
-      const t = this.getWindow();
-      s = t ? t.innerHeight : 0;
-    } else this.windowStage === i.MINIMIZED && (s = 0);
-    return s;
-  }
-  get windowStage() {
-    return this.props.stage || this.state.stage;
-  }
-  getActionBar(s) {
-    return s.filter((t) => t && t.type === B);
-  }
-  getContent(s) {
-    return s.filter((t) => t && t.type !== B);
-  }
-  generateTitleId() {
-    return "window-title-" + this._id;
-  }
-};
-u.displayName = "Window", u.propTypes = {
-  width: n.number,
-  height: n.number,
-  left: n.number,
-  top: n.number,
-  initialWidth: n.number,
-  initialHeight: n.number,
-  initialLeft: n.number,
-  initialTop: n.number,
-  minWidth: n.number,
-  minHeight: n.number,
-  resizable: n.bool,
-  draggable: n.bool,
-  title: n.any,
-  shouldUpdateOnDrag: n.bool,
-  stage: n.oneOf(["DEFAULT", "MINIMIZED", "FULLSCREEN"]),
-  className: n.string,
-  id: n.string,
-  style: n.object,
-  overlayStyle: n.object,
-  autoFocus: n.bool
-}, u.defaultProps = {
-  minWidth: D,
-  minHeight: T,
-  resizable: !0,
-  draggable: !0,
-  modal: !1,
-  doubleClickStageChange: !0,
-  autoFocus: !0
-}, u.contextType = A;
-let I = u;
-const G = z(), Y = U(
-  k(
-    G,
-    I
+          e.title
+        )
+      ),
+      a === o.MINIMIZED ? null : /* @__PURE__ */ w.createElement(w.Fragment, null, /* @__PURE__ */ w.createElement("div", { className: "k-window-content" }, ct), lt),
+      a === o.DEFAULT && fe ? /* @__PURE__ */ w.createElement(Et, { onResize: at }) : null
+    )
+  )));
+  return le ? e.appendTo === null ? Re : ut.createPortal(Re, e.appendTo || document.body) : null;
+});
+Ge.displayName = "Window";
+const Wt = gt(), Ve = ht(
+  st(
+    Wt,
+    Ge
   )
 );
-Y.displayName = "KendoReactWindow";
+Ve.displayName = "KendoReactWindow";
+const St = {
+  autoFocus: i.bool,
+  title: i.any,
+  className: i.string,
+  closeButton: i.func,
+  minimizeButton: i.func,
+  maximizeButton: i.func,
+  restoreButton: i.func,
+  modal: i.bool,
+  overlayStyle: i.object,
+  width: i.number,
+  height: i.number,
+  minWidth: i.number,
+  minHeight: i.number,
+  left: i.number,
+  top: i.number,
+  initialLeft: i.number,
+  initialTop: i.number,
+  initialWidth: i.number,
+  initialHeight: i.number,
+  resizable: i.bool,
+  draggable: i.bool,
+  doubleClickStageChange: i.bool,
+  stage: i.oneOf(["DEFAULT", "MINIMIZED", "FULLSCREEN"]),
+  onClose: i.func,
+  onMove: i.func,
+  onResize: i.func,
+  onStageChange: i.func,
+  children: i.node,
+  id: i.string,
+  dir: i.string,
+  style: i.object,
+  appendTo: i.any,
+  themeColor: i.oneOf(["primary", "dark", "light"]),
+  shouldUpdateOnDrag: i.bool
+};
+Ve.propTypes = St;
 export {
-  Y as Window,
-  G as WindowPropsContext,
-  I as WindowWithoutContext
+  Ve as Window,
+  Wt as WindowPropsContext,
+  Ge as WindowWithoutContext
 };