@smwb/ui-react 2.6.0 → 2.6.2

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

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