@floegence/floe-webapp-core 0.72.0 → 0.74.0

package/dist/components/ui/floatingWindowGeometry.d.ts

@@ -35,7 +35,10 @@ interface ResolveFloatingWindowRectOptions {
     resizeHandle: FloatingWindowResizeHandle;
     minSize: Size;
     maxSize: Size;
-    viewport: Size;
+    viewport: Size & {
+        x?: number;
+        y?: number;
+    };
     viewportInsets?: FloatingWindowViewportInsets;
     mobile: boolean;
     mobilePadding: number;
@@ -44,13 +47,19 @@ interface NormalizeFloatingWindowRectOptions {
     rect: FloatingWindowRect;
     minSize: Size;
     maxSize: Size;
-    viewport: Size;
+    viewport: Size & {
+        x?: number;
+        y?: number;
+    };
     viewportInsets?: FloatingWindowViewportInsets;
     mobile: boolean;
     mobilePadding: number;
     center?: boolean;
 }
-export declare function resolveFloatingWindowViewport(viewport: Size, insets?: FloatingWindowViewportInsets): FloatingWindowViewport;
+export declare function resolveFloatingWindowViewport(viewport: Size & {
+    x?: number;
+    y?: number;
+}, insets?: FloatingWindowViewportInsets): FloatingWindowViewport;
 export declare function resolveFloatingWindowRect(options: ResolveFloatingWindowRectOptions): FloatingWindowRect;
 export declare function normalizeFloatingWindowRect(options: NormalizeFloatingWindowRectOptions): FloatingWindowRect;
 export {};

package/dist/components/ui/floatingWindowGeometry.js

@@ -1,37 +1,37 @@
-function x(e, i, m) {
-  return Math.max(i, Math.min(m, e));
+function x(n, i, m) {
+  return Math.max(i, Math.min(m, n));
 }
-function l(e, i, m) {
-  const s = Math.max(0, m), o = Math.min(e, s), c = Math.max(o, Math.min(i, s));
+function l(n, i, m) {
+  const s = Math.max(0, m), o = Math.min(n, s), c = Math.max(o, Math.min(i, s));
   return { min: o, max: c };
 }
-function z(e) {
-  const i = Number(e);
+function v(n) {
+  const i = Number(n);
   return Number.isFinite(i) && i > 0 ? i : 0;
 }
-function X(e, i = {}) {
-  const m = Math.max(0, e.width), s = Math.max(0, e.height), o = Math.min(z(i.left), m), c = Math.min(z(i.top), s), n = Math.min(z(i.right), Math.max(0, m - o)), d = Math.min(z(i.bottom), Math.max(0, s - c));
+function X(n, i = {}) {
+  const m = Math.max(0, n.width), s = Math.max(0, n.height), o = Math.min(v(i.left), m), c = Math.min(v(i.top), s), e = Math.min(v(i.right), Math.max(0, m - o)), d = Math.min(v(i.bottom), Math.max(0, s - c));
   return {
-    x: o,
-    y: c,
-    width: Math.max(0, m - o - n),
+    x: (n.x ?? 0) + o,
+    y: (n.y ?? 0) + c,
+    width: Math.max(0, m - o - e),
     height: Math.max(0, s - c - d)
   };
 }
-function Y(e) {
-  return e.x + e.width;
+function Y(n) {
+  return n.x + n.width;
 }
-function H(e) {
-  return e.y + e.height;
+function H(n) {
+  return n.y + n.height;
 }
-function I(e) {
+function I(n) {
   const {
     mode: i,
     pointer: m,
     dragStartPos: s,
     dragStartRect: o,
     resizeStartPos: c,
-    resizeStartRect: n,
+    resizeStartRect: e,
     resizeHandle: d,
     minSize: r,
     maxSize: t,
@@ -39,55 +39,55 @@ function I(e) {
     viewportInsets: S,
     mobile: y,
     mobilePadding: f
-  } = e, a = X(R, S), g = Y(a), w = H(a), u = m.x - (i === "drag" ? s.x : c.x), p = m.y - (i === "drag" ? s.y : c.y);
+  } = n, a = X(R, S), g = Y(a), M = H(a), u = m.x - (i === "drag" ? s.x : c.x), p = m.y - (i === "drag" ? s.y : c.y);
   if (i === "drag") {
-    const h = Math.max(a.x, g - o.width), M = Math.max(a.y, w - o.height);
+    const h = Math.max(a.x, g - o.width), w = Math.max(a.y, M - o.height);
     return {
       ...o,
       x: x(y ? a.x + f : o.x + u, a.x, h),
-      y: x(o.y + p, a.y, M)
+      y: x(o.y + p, a.y, w)
     };
   }
-  let b = n.width, v = n.height, W = n.x, F = n.y;
+  let b = e.width, z = e.height, W = e.x, F = e.y;
   if (!y && d.includes("e")) {
-    const h = l(r.width, t.width, g - n.x);
-    b = x(n.width + u, h.min, h.max);
+    const h = l(r.width, t.width, g - e.x);
+    b = x(e.width + u, h.min, h.max);
   }
   if (!y && d.includes("w")) {
-    const h = n.x + n.width, M = l(r.width, t.width, h - a.x), B = h - M.max, P = Math.max(B, h - M.min);
-    W = x(n.x + u, B, P), b = Math.max(0, h - W);
+    const h = e.x + e.width, w = l(r.width, t.width, h - a.x), B = h - w.max, P = Math.max(B, h - w.min);
+    W = x(e.x + u, B, P), b = Math.max(0, h - W);
   }
   if (d.includes("s")) {
-    const h = l(r.height, t.height, w - n.y);
-    v = x(n.height + p, h.min, h.max);
+    const h = l(r.height, t.height, M - e.y);
+    z = x(e.height + p, h.min, h.max);
   }
   if (d.includes("n")) {
-    const h = n.y + n.height, M = l(r.height, t.height, h - a.y), B = h - M.max, P = Math.max(B, h - M.min);
-    F = x(n.y + p, B, P), v = Math.max(0, h - F);
+    const h = e.y + e.height, w = l(r.height, t.height, h - a.y), B = h - w.max, P = Math.max(B, h - w.min);
+    F = x(e.y + p, B, P), z = Math.max(0, h - F);
   }
   return {
     x: x(W, a.x, Math.max(a.x, g - b)),
-    y: x(F, a.y, Math.max(a.y, w - v)),
+    y: x(F, a.y, Math.max(a.y, M - z)),
     width: b,
-    height: v
+    height: z
   };
 }
-function V(e) {
+function V(n) {
   const {
     rect: i,
     minSize: m,
     maxSize: s,
     viewport: o,
     viewportInsets: c,
-    mobile: n,
+    mobile: e,
     mobilePadding: d,
     center: r = !1
-  } = e, t = X(o, c), R = Y(t), S = H(t), y = n ? Math.max(0, t.width - d * 2) : t.width, f = l(m.width, s.width, y), a = l(m.height, s.height, t.height), g = n ? f.max : x(i.width, f.min, f.max), w = x(i.height, a.min, a.max), u = Math.max(t.x, R - g), p = Math.max(t.y, S - w);
+  } = n, t = X(o, c), R = Y(t), S = H(t), y = e ? Math.max(0, t.width - d * 2) : t.width, f = l(m.width, s.width, y), a = l(m.height, s.height, t.height), g = e ? f.max : x(i.width, f.min, f.max), M = x(i.height, a.min, a.max), u = Math.max(t.x, R - g), p = Math.max(t.y, S - M);
   return {
-    x: n ? x(t.x + d, t.x, u) : r ? Math.max(t.x, Math.round(t.x + (t.width - g) / 2)) : x(i.x, t.x, u),
-    y: r ? Math.max(t.y, Math.round(t.y + (t.height - w) / 2)) : x(i.y, t.y, p),
+    x: e ? x(t.x + d, t.x, u) : r ? Math.max(t.x, Math.round(t.x + (t.width - g) / 2)) : x(i.x, t.x, u),
+    y: r ? Math.max(t.y, Math.round(t.y + (t.height - M) / 2)) : x(i.y, t.y, p),
     width: g,
-    height: w
+    height: M
   };
 }
 export {

package/dist/floe.css

@@ -455,10 +455,29 @@
     --floe-floating-exit-scale: 1;
   }
 
+  .floe-side-drawer-overlay {
+    --floe-dialog-gap-y: 0px;
+    --floe-dialog-gap-x: 0px;
+    padding: 0;
+  }
+
+  .floe-side-drawer-panel {
+    height: 100%;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    --floe-floating-enter-x: min(8rem, 18vw);
+    --floe-floating-exit-x: min(6rem, 14vw);
+    --floe-floating-enter-y: 0;
+    --floe-floating-exit-y: 0;
+    --floe-floating-enter-scale: 1;
+    --floe-floating-exit-scale: 1;
+    --floe-floating-origin: right center;
+  }
+
   .floe-bottom-drawer-overlay {
-    padding: max(1.25rem, env(safe-area-inset-top, 0px))
-      max(1.5rem, env(safe-area-inset-right, 0px)) max(1.25rem, env(safe-area-inset-bottom, 0px))
-      max(1.5rem, env(safe-area-inset-left, 0px));
+    --floe-dialog-gap-y: 1.25rem;
+    --floe-dialog-gap-x: 1.5rem;
+    padding: var(--floe-dialog-gap-y) var(--floe-dialog-gap-x);
   }
 
   .floe-bottom-drawer-backdrop {
@@ -480,9 +499,8 @@
 
   @media (max-width: 639px) {
     .floe-bottom-drawer-overlay {
-      padding: max(0.75rem, env(safe-area-inset-top, 0px))
-        max(0.75rem, env(safe-area-inset-right, 0px)) max(0.75rem, env(safe-area-inset-bottom, 0px))
-        max(0.75rem, env(safe-area-inset-left, 0px));
+      --floe-dialog-gap-y: 0.75rem;
+      --floe-dialog-gap-x: 0.75rem;
     }
   }