@smwb/ui-solid 0.12.1 → 0.13.0

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

@@ -1,15 +1,17 @@
-import { isServer as $, createComponent as d, Portal as ne, 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 { 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 '../../../assets/styles/less/components/floatingWindow/floatingWindow.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                                       */
-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 { 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 { 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 { hasOverlayLayerAbove as we } from "../../../primitives/overlayLayer.js";
+import { createCssTransition as pe } from "../../../primitives/createCssTransition.js";
+import { createControllableState as P } from "../../../primitives/createControllableState.js";
+import { createId as ue } from "../../../primitives/createId.js";
+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,
@@ -58,14 +60,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 ke(X) {
+function We(X) {
   const Y = le({
     minWidth: 200,
     minHeight: 120,
@@ -90,10 +92,10 @@ function ke(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 = ue(void 0, "smwb-floating-window-title"), L = pe({
+    in: () => i.open,
     timeout: {
       enter: 120,
       exit: 120
@@ -102,80 +104,80 @@ function ke(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, i) => {
-    const n = t.maxWidth ?? i.width, r = t.maxHeight ?? i.height, a = Math.max(t.minWidth, Math.min(n, 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(i.width - l, e.x)), g = Math.max(0, Math.min(Math.max(0, i.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), u = 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,
+      y: f,
+      width: r,
       height: o
     };
-  }, G = (e, i) => {
-    const n = C(e, i);
+  }, N = (e, t) => {
+    const n = C(e, t);
     return {
       ...n,
-      x: Math.max(0, Math.min(n.x, i.width - n.width)),
-      y: Math.max(0, Math.min(n.y, i.height - n.height))
+      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, i = !0) => {
-    i && L(!0);
-    const n = C(e, b()), r = v(), a = z();
-    (n.x !== r.x || n.y !== r.y) && F({
+    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 !== a.width || n.height !== a.height) && Z({
+    }), (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 = (i) => {
-      i.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 i = s();
+    const t = d();
     w = {
       px: e.clientX,
       py: e.clientY,
-      x: i.x,
-      y: i.y
+      x: t.x,
+      y: t.y
     };
     try {
       e.currentTarget.setPointerCapture?.(e.pointerId);
@@ -183,204 +185,205 @@ function ke(X) {
     }
   }, B = (e) => {
     if (!w) return;
-    const i = s();
-    h({
-      ...i,
+    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 i = s();
-      t.onMoveEnd?.({
-        x: i.x,
-        y: i.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, i) => {
-    i.preventDefault(), i.stopPropagation(), p = {
+  const J = (e, t) => {
+    t.preventDefault(), t.stopPropagation(), p = {
       dir: e,
-      px: i.clientX,
-      py: i.clientY,
-      rect: s()
-    }, k();
+      px: t.clientX,
+      py: t.clientY,
+      rect: d()
+    }, S();
     try {
-      i.currentTarget.setPointerCapture?.(i.pointerId);
+      t.currentTarget.setPointerCapture?.(t.pointerId);
     } catch {
     }
   }, Q = (e) => {
     if (!p) return;
-    const i = _e[p.dir], n = 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 + i.dw * n)), W = Math.min(u, Math.max(t.minHeight, a.height + i.dh * r));
-    h({
-      x: i.dx ? a.x + a.width - g : a.x,
-      y: i.dy ? a.y + a.height - W : a.y,
-      width: g,
+    const t = ze[p.dir], n = e.clientX - p.px, a = e.clientY - p.py, r = p.rect, o = b(), l = i.maxWidth ?? o.width, u = i.maxHeight ?? o.height, f = Math.min(l, Math.max(i.minWidth, r.width + t.dw * n)), W = Math.min(u, 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 i = s();
-      t.onResizeEnd?.({
-        width: i.width,
-        height: i.height
+      const t = d();
+      i.onResizeEnd?.({
+        width: t.width,
+        height: t.height
       });
     }
     e.currentTarget.hasPointerCapture?.(e.pointerId) && e.currentTarget.releasePointerCapture?.(e.pointerId);
   }, I = (e) => {
-    const i = s();
-    e ? t.onResizeEnd?.({
-      width: i.width,
-      height: i.height
-    }) : t.onMoveEnd?.({
-      x: i.x,
-      y: i.y
+    const t = d();
+    e ? i.onResizeEnd?.({
+      width: t.width,
+      height: t.height
+    }) : i.onMoveEnd?.({
+      x: t.x,
+      y: t.y
     });
   }, ee = (e) => {
-    const i = s(), n = e.shiftKey ? t.resizeStep : t.moveStep, a = {
+    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({
-      ...i,
-      width: i.width + a[0],
-      height: i.height + a[1]
-    }) : h({
-      ...i,
-      x: i.x + a[0],
-      y: i.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 i = s(), n = b();
+    const t = d(), n = b();
     if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
       e.preventDefault();
-      const r = e.key === "ArrowRight" ? 1 : -1;
-      h({
-        ...i,
-        width: i.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({
-        ...i,
-        height: i.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({
-        ...i,
-        width: t.minWidth,
-        height: t.minHeight
+      e.preventDefault(), c({
+        ...t,
+        width: i.minWidth,
+        height: i.minHeight
       });
     else if (e.key === "End")
-      e.preventDefault(), h({
-        ...i,
-        width: t.maxWidth ?? n.width,
-        height: t.maxHeight ?? n.height
+      e.preventDefault(), c({
+        ...t,
+        width: i.maxWidth ?? n.width,
+        height: i.maxHeight ?? n.height
       });
     else
       return;
     I(!0);
-  }, ie = () => 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(ne, {
+      return s(ne, {
         get mount() {
           return $ ? void 0 : document.body;
         },
         get children() {
-          var e = ye(), i = e.firstChild, n = i.firstChild, r = n.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), i.addEventListener("pointercancel", S), i.$$pointerup = S, i.$$pointermove = B, i.$$pointerdown = q, n.$$keydown = ee, c(n, 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(i, 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 = ie, 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 u = g() ? i.expandAriaLabel : i.collapseAriaLabel, f = !g();
+                return u !== l.e && x(o, "aria-label", l.e = u), 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}`);
@@ -388,10 +391,10 @@ function ke(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,
@@ -405,14 +408,14 @@ function ke(X) {
                 })()
               });
             }
-          }), null), M(() => x(n, "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 {
-  ke as FloatingWindow
+  We as FloatingWindow
 };
 //# sourceMappingURL=floatingWindow.js.map