@smwb/ui-solid 0.10.0 → 0.11.1

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

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