@smwb/ui-solid 0.12.0 → 0.13.0

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

@@ -1,13 +1,15 @@
-import { isServer as $, createComponent as d, Portal as ie, use as oe, spread as K, mergeProps as T, insert as c, setAttribute as x, effect as M, memo as ae, template as _, delegateEvents as re } from "solid-js/web";
-import { mergeProps as le, splitProps as se, createSignal as de, createMemo as ce, createEffect as A, onCleanup as V, Show as y, For as he } from "solid-js";
+import { isServer as $, createComponent as s, Portal as ne, use as oe, spread as K, mergeProps as T, insert as h, setAttribute as x, effect as M, memo as re, template as v, delegateEvents as ae } from "solid-js/web";
+import { mergeProps as le, splitProps as de, createSignal as se, createMemo as he, createEffect as A, onCleanup as V, Show as y, For as ce } from "solid-js";
 import O from "clsx";
-import { createCssTransition as we } from "../../../primitives/createCssTransition.js";
-import { createControllableState as E } from "../../../primitives/createControllableState.js";
+import { hasOverlayLayerAbove as we } from "../../../primitives/overlayLayer.js";
+import { createCssTransition as ue } from "../../../primitives/createCssTransition.js";
+import { createControllableState as P } from "../../../primitives/createControllableState.js";
 import { createId as pe } from "../../../primitives/createId.js";
-import { mergeRefs as ue } from "../../../primitives/mergeRefs.js";
-import { Icon as P } from "../../base/icon/icon.js";
-var me = /* @__PURE__ */ _("<span class=smwb-floating-window__title>"), ge = /* @__PURE__ */ _("<button type=button class=smwb-floating-window__action data-testid=floating-window-collapse>"), fe = /* @__PURE__ */ _("<button type=button class=smwb-floating-window__action data-testid=floating-window-close>"), xe = /* @__PURE__ */ _("<div class=smwb-floating-window__body data-testid=floating-window-body>"), ye = /* @__PURE__ */ _("<div><div class=smwb-floating-window__header data-testid=floating-window-header><span class=smwb-floating-window__grip data-testid=floating-window-move role=button tabindex=0></span><div class=smwb-floating-window__actions data-no-drag>"), be = /* @__PURE__ */ _("<div>");
-const _e = {
+import { mergeRefs as me } from "../../../primitives/mergeRefs.js";
+import { mergeStyle as ge } from "../../../primitives/mergeStyle.js";
+import { Icon as E } from "../../base/icon/icon.js";
+var fe = /* @__PURE__ */ v("<span class=smwb-floating-window__title>"), xe = /* @__PURE__ */ v("<button type=button class=smwb-floating-window__action data-testid=floating-window-collapse>"), ye = /* @__PURE__ */ v("<button type=button class=smwb-floating-window__action data-testid=floating-window-close>"), be = /* @__PURE__ */ v("<div class=smwb-floating-window__body data-testid=floating-window-body>"), ve = /* @__PURE__ */ v("<div><div class=smwb-floating-window__header data-testid=floating-window-header><span class=smwb-floating-window__grip data-testid=floating-window-move role=button tabindex=0></span><div class=smwb-floating-window__actions data-no-drag>"), _e = /* @__PURE__ */ v("<div>");
+const ze = {
   n: {
     dx: 0,
     dy: 1,
@@ -56,14 +58,14 @@ const _e = {
     dw: -1,
     dh: 1
   }
-}, ve = ["n", "s", "e", "w", "ne", "nw", "se", "sw"], b = () => typeof window > "u" ? {
+}, Ce = ["n", "s", "e", "w", "ne", "nw", "se", "sw"], b = () => typeof window > "u" ? {
   width: 0,
   height: 0
 } : {
   width: window.innerWidth,
   height: window.innerHeight
 };
-function Re(X) {
+function De(X) {
   const Y = le({
     minWidth: 200,
     minHeight: 120,
@@ -88,10 +90,10 @@ function Re(X) {
     closeAriaLabel: "Close window",
     collapseAriaLabel: "Collapse window",
     expandAriaLabel: "Expand window"
-  }, X), [t, U] = se(Y, ["open", "title", "headerActions", "position", "defaultPosition", "onPositionChange", "onMoveEnd", "size", "defaultSize", "onResize", "onResizeEnd", "minWidth", "minHeight", "maxWidth", "maxHeight", "keepVisible", "moveStep", "resizeStep", "zIndex", "onActivate", "collapsed", "defaultCollapsed", "onCollapsedChange", "collapsible", "movable", "resizable", "closeOnEsc", "onClose", "moveHandleAriaLabel", "resizeHandleAriaLabel", "closeAriaLabel", "collapseAriaLabel", "expandAriaLabel", "class", "style", "children", "ref"]);
-  let f;
-  const H = pe(void 0, "smwb-floating-window-title"), R = we({
-    in: () => t.open,
+  }, X), [i, U] = de(Y, ["open", "title", "headerActions", "position", "defaultPosition", "onPositionChange", "onMoveEnd", "size", "defaultSize", "onResize", "onResizeEnd", "minWidth", "minHeight", "maxWidth", "maxHeight", "keepVisible", "moveStep", "resizeStep", "zIndex", "onActivate", "collapsed", "defaultCollapsed", "onCollapsedChange", "collapsible", "movable", "resizable", "closeOnEsc", "onClose", "moveHandleAriaLabel", "resizeHandleAriaLabel", "closeAriaLabel", "collapseAriaLabel", "expandAriaLabel", "class", "style", "children", "ref", "data-testid"]);
+  let m;
+  const H = pe(void 0, "smwb-floating-window-title"), L = ue({
+    in: () => i.open,
     timeout: {
       enter: 120,
       exit: 120
@@ -100,80 +102,80 @@ function Re(X) {
       enterDone: "smwb-floating-window_entered"
     },
     appear: !0
-  }), [v, F] = E({
-    value: () => t.position,
-    defaultValue: t.defaultPosition,
-    onChange: (e) => t.onPositionChange?.(e)
-  }), [z, Z] = E({
-    value: () => t.size,
-    defaultValue: t.defaultSize,
-    onChange: (e) => t.onResize?.(e)
-  }), [m, j] = E({
-    value: () => t.collapsed,
-    defaultValue: t.defaultCollapsed,
-    onChange: (e) => t.onCollapsedChange?.(e)
-  }), C = (e, n) => {
-    const i = t.maxWidth ?? n.width, r = t.maxHeight ?? n.height, a = Math.max(t.minWidth, Math.min(i, e.width)), o = Math.max(t.minHeight, Math.min(r, e.height)), l = Math.min(t.keepVisible, a), u = Math.max(l - a, Math.min(n.width - l, e.x)), g = Math.max(0, Math.min(Math.max(0, n.height - l), e.y));
+  }), [_, F] = P({
+    value: () => i.position,
+    defaultValue: i.defaultPosition,
+    onChange: (e) => i.onPositionChange?.(e)
+  }), [z, Z] = P({
+    value: () => i.size,
+    defaultValue: i.defaultSize,
+    onChange: (e) => i.onResize?.(e)
+  }), [g, G] = P({
+    value: () => i.collapsed,
+    defaultValue: i.defaultCollapsed,
+    onChange: (e) => i.onCollapsedChange?.(e)
+  }), C = (e, t) => {
+    const n = i.maxWidth ?? t.width, a = i.maxHeight ?? t.height, r = Math.max(i.minWidth, Math.min(n, e.width)), o = Math.max(i.minHeight, Math.min(a, e.height)), l = Math.min(i.keepVisible, r), p = Math.max(l - r, Math.min(t.width - l, e.x)), f = Math.max(0, Math.min(Math.max(0, t.height - l), e.y));
     return {
-      x: u,
-      y: g,
-      width: a,
+      x: p,
+      y: f,
+      width: r,
       height: o
     };
-  }, G = (e, n) => {
-    const i = C(e, n);
+  }, N = (e, t) => {
+    const n = C(e, t);
     return {
-      ...i,
-      x: Math.max(0, Math.min(i.x, n.width - i.width)),
-      y: Math.max(0, Math.min(i.y, n.height - i.height))
+      ...n,
+      x: Math.max(0, Math.min(n.x, t.width - n.width)),
+      y: Math.max(0, Math.min(n.y, t.height - n.height))
     };
-  }, [N, L] = de(!1), s = ce(() => {
+  }, [j, R] = se(!1), d = he(() => {
     const e = {
-      x: v().x,
-      y: v().y,
+      x: _().x,
+      y: _().y,
       width: z().width,
       height: z().height
     };
-    return N() ? C(e, b()) : G(e, b());
-  }), h = (e, n = !0) => {
-    n && L(!0);
-    const i = C(e, b()), r = v(), a = z();
-    (i.x !== r.x || i.y !== r.y) && F({
-      x: i.x,
-      y: i.y
-    }), (i.width !== a.width || i.height !== a.height) && Z({
-      width: i.width,
-      height: i.height
+    return j() ? C(e, b()) : N(e, b());
+  }), c = (e, t = !0) => {
+    t && R(!0);
+    const n = C(e, b()), a = _(), r = z();
+    (n.x !== a.x || n.y !== a.y) && F({
+      x: n.x,
+      y: n.y
+    }), (n.width !== r.width || n.height !== r.height) && Z({
+      width: n.width,
+      height: n.height
     });
   };
   A(() => {
-    t.open || L(!1);
+    i.open || R(!1);
   }), A(() => {
-    if ($ || !t.open) return;
-    const e = () => h(s(), !1);
+    if ($ || !i.open) return;
+    const e = () => c(d(), !1);
     window.addEventListener("resize", e), V(() => window.removeEventListener("resize", e));
   }), A(() => {
-    if ($ || !t.open || !t.closeOnEsc || !t.onClose) return;
-    const e = (n) => {
-      n.key === "Escape" && (!f || !f.contains(document.activeElement) || t.onClose?.());
+    if ($ || !i.open || !i.closeOnEsc || !i.onClose) return;
+    const e = (t) => {
+      t.defaultPrevented || t.key === "Escape" && (!m || !m.contains(document.activeElement) || we(m) || i.onClose?.());
     };
     document.addEventListener("keydown", e), V(() => document.removeEventListener("keydown", e));
   });
-  const k = () => {
-    t.onActivate?.(), f && !f.contains(document.activeElement) && f.focus({
+  const S = () => {
+    i.onActivate?.(), m && !m.contains(document.activeElement) && m.focus({
       preventScroll: !0
     });
   };
   let w = null;
   const q = (e) => {
-    if (!t.movable || e.target?.closest("button,[data-no-drag]")) return;
+    if (!i.movable || e.target?.closest("button,[data-no-drag]")) return;
     e.preventDefault();
-    const n = s();
+    const t = d();
     w = {
       px: e.clientX,
       py: e.clientY,
-      x: n.x,
-      y: n.y
+      x: t.x,
+      y: t.y
     };
     try {
       e.currentTarget.setPointerCapture?.(e.pointerId);
@@ -181,204 +183,205 @@ function Re(X) {
     }
   }, B = (e) => {
     if (!w) return;
-    const n = s();
-    h({
-      ...n,
+    const t = d();
+    c({
+      ...t,
       x: w.x + e.clientX - w.px,
       y: w.y + e.clientY - w.py
     });
-  }, S = (e) => {
+  }, k = (e) => {
     if (w) {
       w = null;
-      const n = s();
-      t.onMoveEnd?.({
-        x: n.x,
-        y: n.y
+      const t = d();
+      i.onMoveEnd?.({
+        x: t.x,
+        y: t.y
       });
     }
     e.currentTarget.hasPointerCapture?.(e.pointerId) && e.currentTarget.releasePointerCapture?.(e.pointerId);
   };
-  let p = null;
-  const J = (e, n) => {
-    n.preventDefault(), n.stopPropagation(), p = {
+  let u = null;
+  const J = (e, t) => {
+    t.preventDefault(), t.stopPropagation(), u = {
       dir: e,
-      px: n.clientX,
-      py: n.clientY,
-      rect: s()
-    }, k();
+      px: t.clientX,
+      py: t.clientY,
+      rect: d()
+    }, S();
     try {
-      n.currentTarget.setPointerCapture?.(n.pointerId);
+      t.currentTarget.setPointerCapture?.(t.pointerId);
     } catch {
     }
   }, Q = (e) => {
-    if (!p) return;
-    const n = _e[p.dir], i = e.clientX - p.px, r = e.clientY - p.py, a = p.rect, o = b(), l = t.maxWidth ?? o.width, u = t.maxHeight ?? o.height, g = Math.min(l, Math.max(t.minWidth, a.width + n.dw * i)), W = Math.min(u, Math.max(t.minHeight, a.height + n.dh * r));
-    h({
-      x: n.dx ? a.x + a.width - g : a.x,
-      y: n.dy ? a.y + a.height - W : a.y,
-      width: g,
+    if (!u) return;
+    const t = ze[u.dir], n = e.clientX - u.px, a = e.clientY - u.py, r = u.rect, o = b(), l = i.maxWidth ?? o.width, p = i.maxHeight ?? o.height, f = Math.min(l, Math.max(i.minWidth, r.width + t.dw * n)), W = Math.min(p, Math.max(i.minHeight, r.height + t.dh * a));
+    c({
+      x: t.dx ? r.x + r.width - f : r.x,
+      y: t.dy ? r.y + r.height - W : r.y,
+      width: f,
       height: W
     });
   }, D = (e) => {
-    if (p) {
-      p = null;
-      const n = s();
-      t.onResizeEnd?.({
-        width: n.width,
-        height: n.height
+    if (u) {
+      u = null;
+      const t = d();
+      i.onResizeEnd?.({
+        width: t.width,
+        height: t.height
       });
     }
     e.currentTarget.hasPointerCapture?.(e.pointerId) && e.currentTarget.releasePointerCapture?.(e.pointerId);
   }, I = (e) => {
-    const n = s();
-    e ? t.onResizeEnd?.({
-      width: n.width,
-      height: n.height
-    }) : t.onMoveEnd?.({
-      x: n.x,
-      y: n.y
+    const t = d();
+    e ? i.onResizeEnd?.({
+      width: t.width,
+      height: t.height
+    }) : i.onMoveEnd?.({
+      x: t.x,
+      y: t.y
     });
   }, ee = (e) => {
-    const n = s(), i = e.shiftKey ? t.resizeStep : t.moveStep, a = {
-      ArrowLeft: [-i, 0],
-      ArrowRight: [i, 0],
-      ArrowUp: [0, -i],
-      ArrowDown: [0, i]
+    const t = d(), n = e.shiftKey ? i.resizeStep : i.moveStep, r = {
+      ArrowLeft: [-n, 0],
+      ArrowRight: [n, 0],
+      ArrowUp: [0, -n],
+      ArrowDown: [0, n]
     }[e.key];
-    a && (e.preventDefault(), e.shiftKey ? h({
-      ...n,
-      width: n.width + a[0],
-      height: n.height + a[1]
-    }) : h({
-      ...n,
-      x: n.x + a[0],
-      y: n.y + a[1]
+    r && (e.preventDefault(), e.shiftKey ? c({
+      ...t,
+      width: t.width + r[0],
+      height: t.height + r[1]
+    }) : c({
+      ...t,
+      x: t.x + r[0],
+      y: t.y + r[1]
     }), I(e.shiftKey));
   }, te = (e) => {
-    const n = s(), i = b();
+    const t = d(), n = b();
     if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
       e.preventDefault();
-      const r = e.key === "ArrowRight" ? 1 : -1;
-      h({
-        ...n,
-        width: n.width + r * t.resizeStep
+      const a = e.key === "ArrowRight" ? 1 : -1;
+      c({
+        ...t,
+        width: t.width + a * i.resizeStep
       });
     } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
       e.preventDefault();
-      const r = e.key === "ArrowDown" ? 1 : -1;
-      h({
-        ...n,
-        height: n.height + r * t.resizeStep
+      const a = e.key === "ArrowDown" ? 1 : -1;
+      c({
+        ...t,
+        height: t.height + a * i.resizeStep
       });
     } else if (e.key === "Home")
-      e.preventDefault(), h({
-        ...n,
-        width: t.minWidth,
-        height: t.minHeight
+      e.preventDefault(), c({
+        ...t,
+        width: i.minWidth,
+        height: i.minHeight
       });
     else if (e.key === "End")
-      e.preventDefault(), h({
-        ...n,
-        width: t.maxWidth ?? i.width,
-        height: t.maxHeight ?? i.height
+      e.preventDefault(), c({
+        ...t,
+        width: i.maxWidth ?? n.width,
+        height: i.maxHeight ?? n.height
       });
     else
       return;
     I(!0);
-  }, ne = () => j((e) => !e);
-  return d(y, {
+  }, ie = () => G((e) => !e);
+  return s(y, {
     get when() {
-      return R.mounted();
+      return L.mounted();
     },
     get children() {
-      return d(ie, {
+      return s(ne, {
         get mount() {
           return $ ? void 0 : document.body;
         },
         get children() {
-          var e = ye(), n = e.firstChild, i = n.firstChild, r = i.nextSibling, a = ue(t.ref, (o) => f = o);
-          return typeof a == "function" && oe(a, e), K(e, T(U, {
-            "data-testid": "floating-window",
+          var e = ve(), t = e.firstChild, n = t.firstChild, a = n.nextSibling, r = me(i.ref, (o) => m = o);
+          return typeof r == "function" && oe(r, e), K(e, T(U, {
+            get "data-testid"() {
+              return i["data-testid"] ?? "floating-window";
+            },
             role: "dialog",
             tabindex: -1,
             get "aria-labelledby"() {
-              return t.title ? H : void 0;
+              return i.title ? H : void 0;
             },
             get class() {
-              return O("smwb-floating-window", t.class, R.classes(), {
-                "smwb-collapsed": m()
+              return O("smwb-floating-window", i.class, L.classes(), {
+                "smwb-collapsed": g()
               });
             },
             get style() {
-              return {
-                left: `${s().x}px`,
-                top: `${s().y}px`,
-                width: `${s().width}px`,
-                ...m() ? {} : {
-                  height: `${s().height}px`
-                },
-                ...t.zIndex === void 0 ? {} : {
-                  "z-index": t.zIndex
+              return ge({
+                left: `${d().x}px`,
+                top: `${d().y}px`,
+                width: `${d().width}px`,
+                ...g() ? {} : {
+                  height: `${d().height}px`
                 },
-                ...typeof t.style == "object" && t.style ? t.style : {}
-              };
+                ...i.zIndex === void 0 ? {} : {
+                  "z-index": i.zIndex
+                }
+              }, i.style);
             },
-            "on:pointerdown": k
-          }), !1, !0), n.addEventListener("pointercancel", S), n.$$pointerup = S, n.$$pointermove = B, n.$$pointerdown = q, i.$$keydown = ee, c(i, d(P, {
+            "on:pointerdown": S
+          }), !1, !0), t.addEventListener("pointercancel", k), t.$$pointerup = k, t.$$pointermove = B, t.$$pointerdown = q, n.$$keydown = ee, h(n, s(E, {
             name: "drag_indicator"
-          })), c(n, d(y, {
+          })), h(t, s(y, {
             get when() {
-              return t.title;
+              return i.title;
             },
             get children() {
-              var o = me();
-              return x(o, "id", H), c(o, () => t.title), o;
+              var o = fe();
+              return x(o, "id", H), h(o, () => i.title), o;
             }
-          }), r), c(r, () => t.headerActions, null), c(r, d(y, {
+          }), a), h(a, () => i.headerActions, null), h(a, s(y, {
             get when() {
-              return t.collapsible;
+              return i.collapsible;
             },
             get children() {
-              var o = ge();
-              return o.$$click = ne, c(o, d(P, {
+              var o = xe();
+              return o.$$click = ie, h(o, s(E, {
                 get name() {
-                  return m() ? "open_in_full" : "close_fullscreen";
+                  return g() ? "open_in_full" : "close_fullscreen";
                 }
               })), M((l) => {
-                var u = m() ? t.expandAriaLabel : t.collapseAriaLabel, g = !m();
-                return u !== l.e && x(o, "aria-label", l.e = u), g !== l.t && x(o, "aria-expanded", l.t = g), l;
+                var p = g() ? i.expandAriaLabel : i.collapseAriaLabel, f = !g();
+                return p !== l.e && x(o, "aria-label", l.e = p), f !== l.t && x(o, "aria-expanded", l.t = f), l;
               }, {
                 e: void 0,
                 t: void 0
               }), o;
             }
-          }), null), c(r, d(y, {
+          }), null), h(a, s(y, {
             get when() {
-              return t.onClose;
+              return i.onClose;
             },
             get children() {
-              var o = fe();
-              return o.$$click = () => t.onClose?.(), c(o, d(P, {
+              var o = ye();
+              return o.$$click = () => i.onClose?.(), h(o, s(E, {
                 name: "close"
-              })), M(() => x(o, "aria-label", t.closeAriaLabel)), o;
+              })), M(() => x(o, "aria-label", i.closeAriaLabel)), o;
             }
-          }), null), c(e, d(y, {
+          }), null), h(e, s(y, {
             get when() {
-              return !m();
+              return !g();
             },
             get children() {
-              var o = xe();
-              return c(o, () => t.children), o;
+              var o = be();
+              return h(o, () => i.children), o;
             }
-          }), null), c(e, d(y, {
+          }), null), h(e, s(y, {
             get when() {
-              return ae(() => !!t.resizable)() && !m();
+              return re(() => !!i.resizable)() && !g();
             },
             get children() {
-              return d(he, {
-                each: ve,
+              return s(ce, {
+                each: Ce,
                 children: (o) => (() => {
-                  var l = be();
+                  var l = _e();
                   return x(l, "data-testid", `floating-window-resize-${o}`), K(l, T({
                     get class() {
                       return O("smwb-floating-window__resize", `smwb-floating-window__resize_${o}`);
@@ -386,16 +389,16 @@ function Re(X) {
                   }, () => o === "se" ? {
                     role: "separator",
                     tabindex: 0,
-                    "aria-label": t.resizeHandleAriaLabel,
-                    "aria-valuemin": t.minWidth,
-                    "aria-valuemax": Math.round(t.maxWidth ?? b().width),
-                    "aria-valuenow": Math.round(s().width),
+                    "aria-label": i.resizeHandleAriaLabel,
+                    "aria-valuemin": i.minWidth,
+                    "aria-valuemax": Math.round(i.maxWidth ?? b().width),
+                    "aria-valuenow": Math.round(d().width),
                     onKeyDown: te
                   } : {
                     "aria-hidden": !0,
                     tabindex: -1
                   }, {
-                    onPointerDown: (u) => J(o, u),
+                    onPointerDown: (p) => J(o, p),
                     onPointerMove: Q,
                     onPointerUp: D,
                     onPointerCancel: D
@@ -403,14 +406,14 @@ function Re(X) {
                 })()
               });
             }
-          }), null), M(() => x(i, "aria-label", t.moveHandleAriaLabel)), e;
+          }), null), M(() => x(n, "aria-label", i.moveHandleAriaLabel)), e;
         }
       });
     }
   });
 }
-re(["pointerdown", "pointermove", "pointerup", "keydown", "click"]);
+ae(["pointerdown", "pointermove", "pointerup", "keydown", "click"]);
 export {
-  Re as FloatingWindow
+  De as FloatingWindow
 };
 //# sourceMappingURL=floatingWindow.js.map