@smwb/ui-react 2.7.0 → 2.8.0

package/dist/headless/components/layout/floatingWindow/floatingWindow.js

@@ -1,13 +1,14 @@
-import { jsx as s, Fragment as Ht, jsxs as T } from "react/jsx-runtime";
-import { forwardRef as Ut, useState as et, useRef as R, useId as $t, useCallback as A, useEffect as K } from "react";
-import { createPortal as Vt } from "react-dom";
-import { CSSTransition as Xt } from "react-transition-group";
-import nt from "clsx";
-import { Icon as v } from "../../base/icon/icon.js";
-import { useControllableState as O } from "../../../hooks/useControllableState.js";
-import { useForkRef as Yt } from "../../../hooks/useForkRef.js";
-import { useSafeLayoutEffect as Zt } from "../../../hooks/useSafeLayoutEffect.js";
-const jt = {
+import { jsx as s, Fragment as Vt, jsxs as K } from "react/jsx-runtime";
+import { forwardRef as Xt, useState as ot, useRef as _, useId as Yt, useCallback as A, useEffect as v } from "react";
+import { createPortal as Zt } from "react-dom";
+import { CSSTransition as jt } from "react-transition-group";
+import it from "clsx";
+import { Icon as O } from "../../base/icon/icon.js";
+import { useControllableState as F } from "../../../hooks/useControllableState.js";
+import { useForkRef as Gt } from "../../../hooks/useForkRef.js";
+import { useSafeLayoutEffect as qt } from "../../../hooks/useSafeLayoutEffect.js";
+import { hasOverlayLayerAbove as Bt } from "../../../utils/overlayLayer.js";
+const Jt = {
   n: { dx: 0, dy: 1, dw: 0, dh: -1 },
   s: { dx: 0, dy: 0, dw: 0, dh: 1 },
   e: { dx: 0, dy: 0, dw: 1, dh: 0 },
@@ -16,69 +17,72 @@ const jt = {
   nw: { dx: 1, dy: 1, dw: -1, dh: -1 },
   se: { dx: 0, dy: 0, dw: 1, dh: 1 },
   sw: { dx: 1, dy: 0, dw: -1, dh: 1 }
-}, Gt = ["n", "s", "e", "w", "ne", "nw", "se", "sw"], u = () => typeof window == "undefined" ? { width: 0, height: 0 } : { width: window.innerWidth, height: window.innerHeight }, qt = { x: 24, y: 24 }, Bt = { width: 360, height: 420 }, se = Ut(
-  function(ot, it) {
+}, Qt = ["n", "s", "e", "w", "ne", "nw", "se", "sw"], u = () => typeof window == "undefined" ? { width: 0, height: 0 } : { width: window.innerWidth, height: window.innerHeight }, Wt = { x: 24, y: 24 }, te = { width: 360, height: 420 }, he = Xt(
+  function(rt, at) {
     const {
       open: c,
       title: I,
-      headerActions: rt,
-      position: at,
-      defaultPosition: st = qt,
-      onPositionChange: dt,
+      headerActions: st,
+      position: dt,
+      defaultPosition: lt = Wt,
+      onPositionChange: ct,
       onMoveEnd: f,
-      size: lt,
-      defaultSize: ct = Bt,
-      onResize: wt,
+      size: wt,
+      defaultSize: ht = te,
+      onResize: ut,
       onResizeEnd: p,
       minWidth: P = 200,
       minHeight: D = 120,
       maxWidth: a,
       maxHeight: d,
-      keepVisible: F = 56,
-      moveStep: ht = 24,
+      keepVisible: H = 56,
+      moveStep: ft = 24,
       resizeStep: E = 24,
-      zIndex: H,
+      zIndex: U,
       onActivate: M,
-      collapsed: ut,
-      defaultCollapsed: ft = !1,
-      onCollapsedChange: pt,
-      collapsible: mt = !0,
-      movable: gt = !0,
-      resizable: yt = !0,
-      closeOnEsc: U = !1,
-      onClose: _,
-      moveHandleAriaLabel: xt = "Move window",
-      resizeHandleAriaLabel: bt = "Resize window",
-      closeAriaLabel: Pt = "Close window",
-      collapseAriaLabel: _t = "Collapse window",
-      expandAriaLabel: Rt = "Expand window",
-      className: Dt,
-      style: S,
-      children: Mt,
-      ...Ct
-    } = ot, [$, kt] = et(), C = R(null), zt = Yt(it, C), V = $t();
-    Zt(() => {
-      kt(document.body);
+      collapsed: pt,
+      defaultCollapsed: mt = !1,
+      onCollapsedChange: gt,
+      collapsible: yt = !0,
+      movable: xt = !0,
+      resizable: bt = !0,
+      closeOnEsc: $ = !1,
+      onClose: R,
+      moveHandleAriaLabel: Pt = "Move window",
+      resizeHandleAriaLabel: Rt = "Resize window",
+      closeAriaLabel: _t = "Close window",
+      collapseAriaLabel: Dt = "Collapse window",
+      expandAriaLabel: Mt = "Expand window",
+      // The window sets this on its root too; its own handler calls the caller's first.
+      onPointerDown: S,
+      className: Ct,
+      style: L,
+      children: kt,
+      "data-testid": zt = "floating-window",
+      ...V
+    } = rt, [X, At] = ot(), C = _(null), It = Gt(at, C), Y = Yt();
+    qt(() => {
+      At(document.body);
     }, []);
-    const [m, X] = O({
-      value: at,
-      defaultValue: st,
-      onChange: dt
-    }), [g, Y] = O({
-      value: lt,
-      defaultValue: ct,
-      onChange: wt
-    }), [w, At] = O({
-      value: ut,
-      defaultValue: ft,
-      onChange: pt
+    const [m, Z] = F({
+      value: dt,
+      defaultValue: lt,
+      onChange: ct
+    }), [g, j] = F({
+      value: wt,
+      defaultValue: ht,
+      onChange: ut
+    }), [w, Et] = F({
+      value: pt,
+      defaultValue: mt,
+      onChange: gt
     }), y = A(
       (t, e) => {
-        const n = a != null ? a : e.width, i = d != null ? d : e.height, o = Math.max(P, Math.min(n, t.width)), r = Math.max(D, Math.min(i, t.height)), b = Math.min(F, o), L = Math.max(b - o, Math.min(e.width - b, t.x)), N = Math.max(0, Math.min(Math.max(0, e.height - b), t.y));
-        return { x: L, y: N, width: o, height: r };
+        const n = a != null ? a : e.width, i = d != null ? d : e.height, o = Math.max(P, Math.min(n, t.width)), r = Math.max(D, Math.min(i, t.height)), b = Math.min(H, o), N = Math.max(b - o, Math.min(e.width - b, t.x)), T = Math.max(0, Math.min(Math.max(0, e.height - b), t.y));
+        return { x: N, y: T, width: o, height: r };
       },
-      [F, d, a, D, P]
-    ), It = A(
+      [H, d, a, D, P]
+    ), St = A(
       (t, e) => {
         const n = y(t, e);
         return {
@@ -88,40 +92,42 @@ const jt = {
         };
       },
       [y]
-    ), [Et, Z] = et(!1);
-    K(() => {
-      c || Z(!1);
+    ), [Lt, G] = ot(!1);
+    v(() => {
+      c || G(!1);
     }, [c]);
-    const j = { x: m.x, y: m.y, width: g.width, height: g.height }, h = Et ? y(j, u()) : It(j, u()), l = R(h);
+    const q = { x: m.x, y: m.y, width: g.width, height: g.height }, h = Lt ? y(q, u()) : St(q, u()), l = _(h);
     l.current = h;
     const x = A(
       (t, e = !0) => {
-        e && Z(!0);
+        e && G(!0);
         const n = y(t, u());
-        (n.x !== m.x || n.y !== m.y) && X({ x: n.x, y: n.y }), (n.width !== g.width || n.height !== g.height) && Y({ width: n.width, height: n.height });
+        (n.x !== m.x || n.y !== m.y) && Z({ x: n.x, y: n.y }), (n.width !== g.width || n.height !== g.height) && j({ width: n.width, height: n.height });
       },
-      [y, m.x, m.y, X, Y, g.height, g.width]
-    ), G = R(x);
-    G.current = x, K(() => {
+      [y, m.x, m.y, Z, j, g.height, g.width]
+    ), B = _(x);
+    B.current = x, v(() => {
       if (!c) return;
-      const t = () => G.current(l.current, !1);
+      const t = () => B.current(l.current, !1);
       return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
-    }, [c]), K(() => {
-      if (!c || !U || !_) return;
+    }, [c]), v(() => {
+      if (!c || !$ || !R) return;
       const t = (e) => {
-        if (e.key !== "Escape") return;
+        if (e.defaultPrevented || e.key !== "Escape") return;
         const n = C.current;
-        !n || !n.contains(document.activeElement) || _();
+        !n || !n.contains(document.activeElement) || Bt(n) || R();
       };
       return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
-    }, [U, _, c]);
-    const q = A(() => {
+    }, [$, R, c]);
+    const J = A(() => {
       M == null || M();
       const t = C.current;
       t && !t.contains(document.activeElement) && t.focus({ preventScroll: !0 });
-    }, [M]), k = R(null), St = (t) => {
+    }, [M]), Nt = (t) => {
+      S == null || S(t), J();
+    }, k = _(null), Tt = (t) => {
       var n, i, o;
-      if (!gt || (n = t.target) != null && n.closest("button,[data-no-drag]")) return;
+      if (!xt || (n = t.target) != null && n.closest("button,[data-no-drag]")) return;
       t.preventDefault();
       const e = l.current;
       k.current = { px: t.clientX, py: t.clientY, x: e.x, y: e.y };
@@ -129,14 +135,14 @@ const jt = {
         (o = (i = t.currentTarget).setPointerCapture) == null || o.call(i, t.pointerId);
       } catch {
       }
-    }, Lt = (t) => {
+    }, Kt = (t) => {
       const e = k.current;
       e && x({
         ...l.current,
         x: e.x + t.clientX - e.px,
         y: e.y + t.clientY - e.py
       });
-    }, B = (t) => {
+    }, Q = (t) => {
       var e, n, i, o;
       if (k.current) {
         k.current = null;
@@ -144,24 +150,24 @@ const jt = {
         f == null || f({ x: r.x, y: r.y });
       }
       (n = (e = t.currentTarget).hasPointerCapture) != null && n.call(e, t.pointerId) && ((o = (i = t.currentTarget).releasePointerCapture) == null || o.call(i, t.pointerId));
-    }, z = R(null), Nt = (t, e) => {
+    }, z = _(null), vt = (t, e) => {
       var n, i;
-      e.preventDefault(), e.stopPropagation(), z.current = { dir: t, px: e.clientX, py: e.clientY, rect: l.current }, q();
+      e.preventDefault(), e.stopPropagation(), z.current = { dir: t, px: e.clientX, py: e.clientY, rect: l.current }, J();
       try {
         (i = (n = e.currentTarget).setPointerCapture) == null || i.call(n, e.pointerId);
       } catch {
       }
-    }, Tt = (t) => {
+    }, Ot = (t) => {
       const e = z.current;
       if (!e) return;
-      const n = jt[e.dir], i = t.clientX - e.px, o = t.clientY - e.py, r = e.rect, b = u(), L = a != null ? a : b.width, N = d != null ? d : b.height, W = Math.min(L, Math.max(P, r.width + n.dw * i)), tt = Math.min(N, Math.max(D, r.height + n.dh * o));
+      const n = Jt[e.dir], i = t.clientX - e.px, o = t.clientY - e.py, r = e.rect, b = u(), N = a != null ? a : b.width, T = d != null ? d : b.height, et = Math.min(N, Math.max(P, r.width + n.dw * i)), nt = Math.min(T, Math.max(D, r.height + n.dh * o));
       x({
-        x: n.dx ? r.x + r.width - W : r.x,
-        y: n.dy ? r.y + r.height - tt : r.y,
-        width: W,
-        height: tt
+        x: n.dx ? r.x + r.width - et : r.x,
+        y: n.dy ? r.y + r.height - nt : r.y,
+        width: et,
+        height: nt
       });
-    }, J = (t) => {
+    }, W = (t) => {
       var e, n, i, o;
       if (z.current) {
         z.current = null;
@@ -169,11 +175,11 @@ const jt = {
         p == null || p({ width: r.width, height: r.height });
       }
       (n = (e = t.currentTarget).hasPointerCapture) != null && n.call(e, t.pointerId) && ((o = (i = t.currentTarget).releasePointerCapture) == null || o.call(i, t.pointerId));
-    }, Q = (t, e) => {
+    }, tt = (t, e) => {
       const n = y(e, u());
       t ? p == null || p({ width: n.width, height: n.height }) : f == null || f({ x: n.x, y: n.y });
-    }, Kt = (t) => {
-      const e = l.current, n = t.shiftKey ? E : ht, o = {
+    }, Ft = (t) => {
+      const e = l.current, n = t.shiftKey ? E : ft, o = {
         ArrowLeft: [-n, 0],
         ArrowRight: [n, 0],
         ArrowUp: [0, -n],
@@ -182,8 +188,8 @@ const jt = {
       if (!o) return;
       t.preventDefault();
       const r = t.shiftKey ? { ...e, width: e.width + o[0], height: e.height + o[1] } : { ...e, x: e.x + o[0], y: e.y + o[1] };
-      x(r), Q(t.shiftKey, r);
-    }, vt = (t) => {
+      x(r), tt(t.shiftKey, r);
+    }, Ht = (t) => {
       const e = l.current, n = u();
       let i;
       if (t.key === "ArrowLeft" || t.key === "ArrowRight") {
@@ -200,21 +206,21 @@ const jt = {
         t.preventDefault(), i = { ...e, width: a != null ? a : n.width, height: d != null ? d : n.height };
       else
         return;
-      x(i), Q(!0, i);
-    }, Ot = () => At((t) => !t);
-    if (!$)
-      return /* @__PURE__ */ s(Ht, {});
-    const Ft = {
+      x(i), tt(!0, i);
+    }, Ut = () => Et((t) => !t);
+    if (!X)
+      return /* @__PURE__ */ s(Vt, {});
+    const $t = {
       left: `${h.x}px`,
       top: `${h.y}px`,
       width: `${h.width}px`,
       ...w ? {} : { height: `${h.height}px` },
-      ...H === void 0 ? {} : { zIndex: H },
-      ...S != null ? S : {}
+      ...U === void 0 ? {} : { zIndex: U },
+      ...L != null ? L : {}
     };
-    return Vt(
+    return Zt(
       /* @__PURE__ */ s(
-        Xt,
+        jt,
         {
           in: c,
           timeout: 120,
@@ -223,28 +229,28 @@ const jt = {
           appear: !0,
           classNames: { enterDone: "smwb-floating-window_entered" },
           nodeRef: C,
-          children: /* @__PURE__ */ T(
+          children: /* @__PURE__ */ K(
             "div",
             {
-              ...Ct,
-              ref: zt,
-              "data-testid": "floating-window",
+              ...V,
+              ref: It,
+              "data-testid": zt,
               role: "dialog",
               tabIndex: -1,
-              "aria-labelledby": I ? V : void 0,
-              className: nt("smwb-floating-window", Dt, { "smwb-collapsed": w }),
-              style: Ft,
-              onPointerDown: q,
+              "aria-labelledby": I ? Y : V["aria-labelledby"],
+              className: it("smwb-floating-window", Ct, { "smwb-collapsed": w }),
+              style: $t,
+              onPointerDown: Nt,
               children: [
-                /* @__PURE__ */ T(
+                /* @__PURE__ */ K(
                   "div",
                   {
                     className: "smwb-floating-window__header",
                     "data-testid": "floating-window-header",
-                    onPointerDown: St,
-                    onPointerMove: Lt,
-                    onPointerUp: B,
-                    onPointerCancel: B,
+                    onPointerDown: Tt,
+                    onPointerMove: Kt,
+                    onPointerUp: Q,
+                    onPointerCancel: Q,
                     children: [
                       /* @__PURE__ */ s(
                         "span",
@@ -253,60 +259,60 @@ const jt = {
                           "data-testid": "floating-window-move",
                           role: "button",
                           tabIndex: 0,
-                          "aria-label": xt,
-                          onKeyDown: Kt,
-                          children: /* @__PURE__ */ s(v, { name: "drag_indicator" })
+                          "aria-label": Pt,
+                          onKeyDown: Ft,
+                          children: /* @__PURE__ */ s(O, { name: "drag_indicator" })
                         }
                       ),
-                      I ? /* @__PURE__ */ s("span", { className: "smwb-floating-window__title", id: V, children: I }) : null,
-                      /* @__PURE__ */ T("div", { className: "smwb-floating-window__actions", "data-no-drag": !0, children: [
-                        rt,
-                        mt ? /* @__PURE__ */ s(
+                      I ? /* @__PURE__ */ s("span", { className: "smwb-floating-window__title", id: Y, children: I }) : null,
+                      /* @__PURE__ */ K("div", { className: "smwb-floating-window__actions", "data-no-drag": !0, children: [
+                        st,
+                        yt ? /* @__PURE__ */ s(
                           "button",
                           {
                             type: "button",
                             className: "smwb-floating-window__action",
                             "data-testid": "floating-window-collapse",
-                            "aria-label": w ? Rt : _t,
+                            "aria-label": w ? Mt : Dt,
                             "aria-expanded": !w,
-                            onClick: Ot,
-                            children: /* @__PURE__ */ s(v, { name: w ? "open_in_full" : "close_fullscreen" })
+                            onClick: Ut,
+                            children: /* @__PURE__ */ s(O, { name: w ? "open_in_full" : "close_fullscreen" })
                           }
                         ) : null,
-                        _ ? /* @__PURE__ */ s(
+                        R ? /* @__PURE__ */ s(
                           "button",
                           {
                             type: "button",
                             className: "smwb-floating-window__action",
                             "data-testid": "floating-window-close",
-                            "aria-label": Pt,
-                            onClick: _,
-                            children: /* @__PURE__ */ s(v, { name: "close" })
+                            "aria-label": _t,
+                            onClick: R,
+                            children: /* @__PURE__ */ s(O, { name: "close" })
                           }
                         ) : null
                       ] })
                     ]
                   }
                 ),
-                w ? null : /* @__PURE__ */ s("div", { className: "smwb-floating-window__body", "data-testid": "floating-window-body", children: Mt }),
-                yt && !w ? Gt.map((t) => /* @__PURE__ */ s(
+                w ? null : /* @__PURE__ */ s("div", { className: "smwb-floating-window__body", "data-testid": "floating-window-body", children: kt }),
+                bt && !w ? Qt.map((t) => /* @__PURE__ */ s(
                   "div",
                   {
-                    className: nt("smwb-floating-window__resize", `smwb-floating-window__resize_${t}`),
+                    className: it("smwb-floating-window__resize", `smwb-floating-window__resize_${t}`),
                     "data-testid": `floating-window-resize-${t}`,
                     ...t === "se" ? {
                       role: "separator",
                       tabIndex: 0,
-                      "aria-label": bt,
+                      "aria-label": Rt,
                       "aria-valuemin": P,
                       "aria-valuemax": Math.round(a != null ? a : u().width),
                       "aria-valuenow": Math.round(h.width),
-                      onKeyDown: vt
+                      onKeyDown: Ht
                     } : { "aria-hidden": !0, tabIndex: -1 },
-                    onPointerDown: (e) => Nt(t, e),
-                    onPointerMove: Tt,
-                    onPointerUp: J,
-                    onPointerCancel: J
+                    onPointerDown: (e) => vt(t, e),
+                    onPointerMove: Ot,
+                    onPointerUp: W,
+                    onPointerCancel: W
                   },
                   t
                 )) : null
@@ -315,11 +321,11 @@ const jt = {
           )
         }
       ),
-      $
+      X
     );
   }
 );
 export {
-  se as FloatingWindow
+  he as FloatingWindow
 };
 //# sourceMappingURL=floatingWindow.js.map