@orioncactuscorp/ui 1.12.2 → 1.14.0

package/dist/components/FloatingWindow/FloatingWindow.js

@@ -0,0 +1,692 @@
+'use client';
+import { jsx as l, jsxs as Qe } from "react/jsx-runtime";
+import { useRef as A, useState as R, useMemo as X, useCallback as L, useLayoutEffect as Ne, useEffect as oe } from "react";
+import { Dialog as T } from "@base-ui-components/react/dialog";
+import Ze from "@orioncactuscorp/icons/orioncactus/CloseThick";
+import { mergeRefs as Ee } from "../../utils/mergeRefs.js";
+import _e from "../BackgroundIconButton/BackgroundIconButton.js";
+import H from "../Modal/Modal.module.scss.js";
+import { resolveModalInitialFocus as et } from "../Modal/initialFocus.js";
+import { useModalBodyScrollState as tt, ModalBodyFrame as ot, ModalSurfaceFrame as nt, resolveModalFooterBackground as rt, ModalFooterFrame as it, ModalHeaderFrame as at, ModalNavigationSectionFrame as dt, mergeModalClassName as st } from "../internal/ModalPresentation.js";
+import { useFloatingWindowContentContext as q, useFloatingWindowRootContext as Le, FloatingWindowContentContext as ct, useFloatingWindowManagerContext as lt, FloatingWindowRootContext as ut } from "./contexts.js";
+import { constrainFloatingWindowPosition as gt, getFloatingWindowBoundaryRect as Re, resolveCenteredFloatingWindowPosition as Ce, resolveAnchoredFloatingWindowPosition as ft, getFloatingWindowRect as wt } from "./geometry.js";
+import z from "./FloatingWindow.module.scss.js";
+import { FloatingWindowManager as mt } from "./FloatingWindowManager.js";
+const pt = {
+  topLeft: { side: "top", alignment: "start" },
+  top: { side: "top", alignment: "center" },
+  topRight: { side: "top", alignment: "end" },
+  rightTop: { side: "right", alignment: "start" },
+  right: { side: "right", alignment: "center" },
+  rightBottom: { side: "right", alignment: "end" },
+  bottomLeft: { side: "bottom", alignment: "start" },
+  bottom: { side: "bottom", alignment: "center" },
+  bottomRight: { side: "bottom", alignment: "end" },
+  leftTop: { side: "left", alignment: "start" },
+  left: { side: "left", alignment: "center" },
+  leftBottom: { side: "left", alignment: "end" }
+}, vt = {
+  small: H.small,
+  medium: H.medium,
+  large: H.large
+}, $ = st;
+function Se(e, o) {
+  return e?.x === o.x && e.y === o.y;
+}
+function ht(e) {
+  return e instanceof Element && !!e.closest(
+    'button, a, input, select, textarea, [contenteditable="true"], [data-oc-window-no-drag]'
+  );
+}
+function Me(e) {
+  return !(e instanceof Element && e.closest('[data-oc-part="close"]'));
+}
+function Te(e, o) {
+  return e ? typeof e == "function" ? e() : "current" in e ? e.current : e : o;
+}
+function Ft(e, o) {
+  return e.x === o.x && e.y === o.y && e.width === o.width && e.height === o.height;
+}
+function bt(e, o) {
+  if (typeof IntersectionObserver > "u") return;
+  let c = null, n;
+  const r = () => {
+    n !== void 0 && window.clearTimeout(n), c?.disconnect(), c = null;
+  }, a = (m = !1, h = 1) => {
+    r();
+    const g = e.getBoundingClientRect(), u = e.ownerDocument.documentElement;
+    if (m && o(), !g.width || !g.height) return;
+    const p = Math.floor(g.top), F = Math.floor(
+      u.clientWidth - (g.left + g.width)
+    ), w = Math.floor(
+      u.clientHeight - (g.top + g.height)
+    ), b = Math.floor(g.left);
+    let C = !0;
+    c = new IntersectionObserver(
+      (x) => {
+        const E = x[0]?.intersectionRatio ?? 0, y = !Ft(
+          g,
+          e.getBoundingClientRect()
+        );
+        if (y || E !== h) {
+          if (!C || y) {
+            a(!0);
+            return;
+          }
+          E ? a(!0, E) : n = window.setTimeout(() => a(!0, 1e-7), 1e3);
+        }
+        C = !1;
+      },
+      {
+        rootMargin: `${-p}px ${-F}px ${-w}px ${-b}px`,
+        threshold: Math.max(0, Math.min(1, h)) || 1
+      }
+    ), c.observe(e);
+  };
+  return a(), r;
+}
+function Ie({
+  children: e,
+  modal: o = !1,
+  defaultBackdrop: c,
+  presentation: n,
+  disablePointerDismissal: r = o !== !0,
+  windowId: a,
+  onActivate: m,
+  onOpenChange: h,
+  ...g
+}) {
+  const u = lt(), [p, F] = R(null);
+  if (u && !a)
+    throw new Error(
+      "FloatingWindowRoot requires windowId inside FloatingWindowManager."
+    );
+  const w = u !== null && u.activeWindowId !== void 0 && u.activeWindowId !== a, b = w && o !== !1 ? !1 : o, C = w ? !0 : r, x = X(
+    () => ({
+      defaultBackdrop: c,
+      manager: u,
+      modal: o,
+      onActivate: m,
+      presentation: n,
+      setTriggerNode: F,
+      triggerNode: p,
+      windowId: a
+    }),
+    [
+      c,
+      u,
+      o,
+      m,
+      n,
+      p,
+      a
+    ]
+  ), E = L(
+    (y, v) => {
+      const Y = v && typeof v == "object" && "reason" in v ? v.reason : void 0;
+      if (!y && (Y === "escape-key" || Y === "outside-press") && u && a && u.activeWindowId !== a) {
+        v && typeof v == "object" && "cancel" in v && typeof v.cancel == "function" && v.cancel();
+        return;
+      }
+      h?.(y, v);
+    },
+    [u, h, a]
+  );
+  return /* @__PURE__ */ l(ut.Provider, { value: x, children: /* @__PURE__ */ l(
+    T.Root,
+    {
+      ...g,
+      modal: b,
+      disablePointerDismissal: C,
+      onOpenChange: E,
+      children: e
+    }
+  ) });
+}
+function xe(e) {
+  return /* @__PURE__ */ l(
+    Ie,
+    {
+      ...e,
+      defaultBackdrop: e.modal === !0 ? "visible" : "hidden",
+      presentation: "floating"
+    }
+  );
+}
+function yt({
+  modal: e = !0,
+  ...o
+}) {
+  return /* @__PURE__ */ l(
+    Ie,
+    {
+      ...o,
+      defaultBackdrop: "visible",
+      modal: e,
+      presentation: "modal"
+    }
+  );
+}
+function Wt({
+  children: e,
+  className: o = "",
+  render: c,
+  nativeButton: n,
+  ref: r
+}) {
+  const a = Le("FloatingWindowTrigger"), m = X(
+    () => Ee(a.setTriggerNode, r),
+    [r, a.setTriggerNode]
+  );
+  return /* @__PURE__ */ l(
+    T.Trigger,
+    {
+      ref: m,
+      className: c ? void 0 : $(z.trigger, o),
+      render: c,
+      nativeButton: n,
+      "data-oc-component": "floating-window-trigger",
+      children: e
+    }
+  );
+}
+function Nt({
+  children: e,
+  className: o = "",
+  style: c,
+  position: n,
+  defaultPosition: r,
+  placement: a,
+  side: m = "bottom",
+  alignment: h = "center",
+  sideOffset: g = 12,
+  alignOffset: u = 0,
+  anchor: p,
+  onPositionChange: F,
+  onPositionCommit: w,
+  collisionBoundary: b = "viewport",
+  collisionPadding: C = 16,
+  collisionAvoidance: x,
+  dragHandleVisibility: E = 48,
+  draggable: y = !0,
+  backdrop: v = "auto",
+  size: Y = "medium",
+  resize: ne = "content",
+  container: Be,
+  initialFocus: De,
+  stackLevel: Ae = 0,
+  ...K
+}) {
+  const s = Le("FloatingWindowContent"), I = A(null), re = A(null), ie = A(!1), [Q, ae] = R(null), [de, ze] = R(null), [Z, He] = R({
+    canScroll: !1,
+    scrolledFromTop: !1,
+    scrolledToBottom: !0
+  }), P = A(null), se = n !== void 0 || r !== void 0, _ = A(se), U = A(null), [W, $e] = R(
+    null
+  ), [ce, le] = R(r ?? null), [ee, ue] = R(se), [qe, G] = R(!1), [je, Oe] = R(m), [Ve, Xe] = R(h), Ye = s.windowId ? s.manager?.stackLevels.get(s.windowId) : void 0, te = s.manager?.registerWindow, ge = Ye ?? Ae, j = s.manager ? s.manager.activeWindowId === s.windowId : void 0, fe = a ? pt[a] : void 0, we = fe?.side ?? m, me = fe?.alignment ?? h, pe = X(
+    () => ({
+      side: x?.side ?? "flip",
+      alignment: x?.alignment ?? "shift"
+    }),
+    [x?.alignment, x?.side]
+  ), ve = v === "auto" ? s.defaultBackdrop : v, Ue = L(
+    (t) => {
+      const d = I.current !== null;
+      if (I.current = t, $e(t), !t) {
+        G(!1);
+        return;
+      }
+      !d && n === void 0 && r === void 0 && (P.current = null, _.current = !1, ue(!1), le(null));
+    },
+    [r, n]
+  ), he = L((t) => {
+    const d = I.current;
+    d && (P.current = t, d.style.setProperty("--oc-floating-window-x", `${t.x}px`), d.style.setProperty("--oc-floating-window-y", `${t.y}px`));
+  }, []), B = L(
+    (t) => {
+      const d = I.current;
+      if (!d) return t;
+      const i = d.getBoundingClientRect();
+      return gt({
+        boundary: Re(b),
+        dragHandleHeight: E,
+        padding: C,
+        position: t,
+        size: { width: i.width, height: i.height }
+      });
+    },
+    [b, C, E]
+  ), k = L(
+    (t) => {
+      const d = !Se(P.current, t);
+      he(t), d && F?.(t);
+    },
+    [he, F]
+  ), O = L(
+    (t, d) => {
+      const i = B(t);
+      return k(i), n === void 0 && le(
+        (f) => Se(f, i) ? f : i
+      ), d && w?.(i), i;
+    },
+    [B, k, w, n]
+  ), J = L(() => {
+    const t = W ?? I.current;
+    if (!t) return;
+    const d = t.getBoundingClientRect(), i = { width: d.width, height: d.height }, f = Re(b), S = n ?? ce;
+    if (_.current || S) {
+      O(
+        S ?? P.current ?? Ce({
+          boundary: f,
+          size: i
+        }),
+        !1
+      ), G(!0);
+      return;
+    }
+    const D = Te(p, s.triggerNode);
+    if (!D) {
+      k(
+        B(
+          Ce({
+            boundary: f,
+            size: i
+          })
+        )
+      ), G(!0);
+      return;
+    }
+    const M = ft({
+      alignOffset: u,
+      alignment: me,
+      anchor: wt(D),
+      boundary: f,
+      collisionAvoidance: pe,
+      direction: window.getComputedStyle(D).direction === "rtl" ? "rtl" : "ltr",
+      padding: C,
+      side: we,
+      sideOffset: g,
+      size: i
+    });
+    k(M.position), Oe(
+      (N) => N === M.side ? N : M.side
+    ), Xe(
+      (N) => N === M.alignment ? N : M.alignment
+    ), G(!0);
+  }, [
+    u,
+    p,
+    b,
+    C,
+    O,
+    B,
+    ce,
+    k,
+    n,
+    me,
+    we,
+    pe,
+    s.triggerNode,
+    g,
+    W
+  ]);
+  Ne(() => {
+    J();
+  }, [J]), oe(() => {
+    const t = I.current;
+    if (!t) return;
+    const d = Te(p, s.triggerNode), i = () => J(), f = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver(i);
+    f?.observe(t), d && f?.observe(d), b !== "viewport" && f?.observe(b);
+    const S = d && !ee && n === void 0 && r === void 0 ? bt(d, i) : void 0;
+    return window.addEventListener("resize", i), window.addEventListener("scroll", i, !0), window.visualViewport?.addEventListener("resize", i), window.visualViewport?.addEventListener("scroll", i), () => {
+      S?.(), f?.disconnect(), window.removeEventListener("resize", i), window.removeEventListener("scroll", i, !0), window.visualViewport?.removeEventListener("resize", i), window.visualViewport?.removeEventListener("scroll", i);
+    };
+  }, [
+    p,
+    b,
+    r,
+    ee,
+    J,
+    n,
+    s.triggerNode
+  ]), oe(
+    () => () => {
+      U.current?.();
+    },
+    []
+  ), Ne(() => {
+    if (!(!W || !te || !s.windowId))
+      return te(s.windowId, s.modal);
+  }, [te, s.modal, s.windowId, W]), oe(() => {
+    const t = j === !0 && !ie.current;
+    if (ie.current = j === !0, !t || s.modal === !1 || !W) return;
+    const d = window.requestAnimationFrame(() => {
+      const i = re.current, f = i && W.contains(i) ? i : Q ?? W;
+      W.contains(document.activeElement) || f.focus({ preventScroll: !0 });
+    });
+    return () => window.cancelAnimationFrame(d);
+  }, [j, s.modal, Q, W]);
+  const Fe = L(
+    (t) => {
+      if (!y || !t.isPrimary || t.button !== 0 || ht(t.target))
+        return;
+      const d = I.current;
+      if (!d) return;
+      t.preventDefault(), U.current?.(), _.current = !0, ue(!0);
+      const i = t.pointerId, f = { x: t.clientX, y: t.clientY }, S = P.current ?? { x: 0, y: 0 };
+      d.dataset.ocWindowDragging = "true";
+      const D = (V) => {
+        V.pointerId === i && k(
+          B({
+            x: S.x + V.clientX - f.x,
+            y: S.y + V.clientY - f.y
+          })
+        );
+      }, M = () => {
+        window.removeEventListener("pointermove", D), window.removeEventListener("pointerup", N), window.removeEventListener("pointercancel", N), window.removeEventListener("blur", We), delete d.dataset.ocWindowDragging, U.current = null;
+      }, N = (V) => {
+        V.pointerId === i && (M(), O(P.current ?? S, !0));
+      }, We = () => {
+        M(), O(P.current ?? S, !0);
+      };
+      U.current = M, window.addEventListener("pointermove", D), window.addEventListener("pointerup", N), window.addEventListener("pointercancel", N), window.addEventListener("blur", We);
+    },
+    [
+      O,
+      B,
+      y,
+      k
+    ]
+  ), Ge = X(
+    () => ({
+      bodyNode: de,
+      draggable: y,
+      scrollState: Z,
+      setBodyNode: ze,
+      setScrollState: He,
+      setTitleNode: ae,
+      startDrag: Fe
+    }),
+    [de, y, Z, ae, Fe]
+  ), Je = et({
+    contentNode: W,
+    initialFocus: De,
+    modal: s.modal,
+    titleNode: Q
+  }), be = {
+    "--oc-floating-window-stack-offset": ge * 2
+  }, Ke = {
+    ...c,
+    "--oc-floating-window-stack-offset": ge * 2
+  }, ye = () => {
+    s.windowId && s.manager?.activateWindow(s.windowId), s.onActivate?.(s.windowId);
+  };
+  return /* @__PURE__ */ Qe(T.Portal, { container: Be, children: [
+    ve === "visible" ? /* @__PURE__ */ l(
+      T.Backdrop,
+      {
+        className: z.backdrop,
+        "data-oc-component": "floating-window-backdrop",
+        "data-oc-part": "backdrop",
+        style: be
+      }
+    ) : null,
+    /* @__PURE__ */ l(
+      "div",
+      {
+        className: z.positioner,
+        "data-oc-component": "floating-window-positioner",
+        style: be,
+        children: /* @__PURE__ */ l(ct.Provider, { value: Ge, children: /* @__PURE__ */ l(
+          T.Popup,
+          {
+            ...K,
+            ref: Ue,
+            initialFocus: Je,
+            className: $(z.window, o),
+            "data-oc-alignment": Ve,
+            "data-oc-side": je,
+            "data-oc-component": "floating-window",
+            "data-oc-part": "window",
+            "data-oc-positioned": qe ? "true" : "false",
+            "data-oc-window-positioning": ee || n !== void 0 || r !== void 0 ? "free" : "anchored",
+            "data-oc-window-presentation": s.presentation,
+            "data-oc-window-modality": s.modal === !0 ? "modal" : s.modal === "trap-focus" ? "trap-focus" : "modeless",
+            "data-oc-window-active": j === void 0 ? void 0 : j ? "true" : "false",
+            onFocusCapture: (t) => {
+              K.onFocusCapture?.(t);
+              const d = Me(t.target);
+              d && t.target instanceof HTMLElement && (re.current = t.target), !t.defaultPrevented && d && ye();
+            },
+            onPointerDownCapture: (t) => {
+              K.onPointerDownCapture?.(t), !t.defaultPrevented && Me(t.target) && ye();
+            },
+            style: Ke,
+            children: /* @__PURE__ */ l(
+              "div",
+              {
+                className: $(
+                  H.surfaceMotion,
+                  z.presentationMotion,
+                  vt[Y]
+                ),
+                "data-oc-modal-backdrop": ve,
+                "data-oc-modal-placement": "popup",
+                "data-oc-resize": ne,
+                "data-oc-part": "surface-motion",
+                children: /* @__PURE__ */ l(
+                  nt,
+                  {
+                    contentTransition: "none",
+                    placement: "popup",
+                    resize: ne,
+                    scrollable: Z.canScroll,
+                    children: e
+                  }
+                )
+              }
+            )
+          }
+        ) })
+      }
+    )
+  ] });
+}
+function Rt({
+  children: e,
+  className: o = "",
+  onPointerDown: c,
+  ...n
+}) {
+  const r = q("FloatingWindowDragHandle");
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      ...n,
+      className: $(z.dragHandle, o),
+      "data-oc-part": "drag-handle",
+      "data-oc-draggable": r.draggable ? "true" : "false",
+      onPointerDown: (a) => {
+        c?.(a), a.defaultPrevented || r.startDrag(a);
+      },
+      children: e
+    }
+  );
+}
+function Ct({
+  title: e,
+  leadingContent: o,
+  trailingContent: c,
+  closeButton: n = !0,
+  closeLabel: r = "닫기",
+  draggable: a = !0,
+  children: m,
+  className: h = "",
+  onPointerDown: g,
+  ref: u,
+  ...p
+}) {
+  const F = q("FloatingWindowHeader");
+  return /* @__PURE__ */ l(
+    at,
+    {
+      ...p,
+      ref: u,
+      className: h,
+      closeContent: n ? /* @__PURE__ */ l(ke, { label: r }) : null,
+      dragEnabled: a && F.draggable,
+      leadingContent: o,
+      sticky: F.scrollState.scrolledFromTop,
+      titleContent: e ? /* @__PURE__ */ l(Pe, { children: e }) : void 0,
+      trailingContent: c,
+      onPointerDown: (w) => {
+        g?.(w), !w.defaultPrevented && a && F.startDrag(w);
+      },
+      children: m
+    }
+  );
+}
+function St({
+  handle: e = !0,
+  ...o
+}) {
+  const c = q(
+    "FloatingWindowNavigationSection"
+  );
+  return /* @__PURE__ */ l(
+    dt,
+    {
+      ...o,
+      canRenderHandle: e && c.draggable,
+      handleProps: { onPointerDown: c.startDrag }
+    }
+  );
+}
+function Mt({
+  children: e,
+  className: o = "",
+  layout: c = "content",
+  containerClassName: n = "",
+  containerProps: r,
+  ref: a,
+  ...m
+}) {
+  const { bodyNode: h, setBodyNode: g, setScrollState: u } = q("FloatingWindowBody"), { setBodyRef: p, updateScrollState: F } = tt({
+    bodyNode: h,
+    setBodyNode: g,
+    setScrollState: u
+  });
+  return /* @__PURE__ */ l(
+    ot,
+    {
+      bodyContainerProps: {
+        ...r,
+        ref: p,
+        onScroll: (w) => {
+          r?.onScroll?.(w), F(w.currentTarget);
+        }
+      },
+      bodyContentProps: { ...m, ref: a, className: n },
+      layout: c,
+      scrollAreaProps: { className: o },
+      children: e
+    }
+  );
+}
+function Tt({
+  children: e,
+  className: o = "",
+  background: c = "auto",
+  ...n
+}) {
+  const { scrollState: r } = q(
+    "FloatingWindowFooter"
+  ), a = rt(
+    c,
+    r
+  );
+  return /* @__PURE__ */ l(
+    it,
+    {
+      ...n,
+      backgroundActive: a,
+      className: o,
+      children: e
+    }
+  );
+}
+function Pe({
+  className: e = "",
+  ref: o,
+  ...c
+}) {
+  const n = q("FloatingWindowTitle"), r = X(
+    () => Ee(n.setTitleNode, o),
+    [n.setTitleNode, o]
+  );
+  return /* @__PURE__ */ l(
+    T.Title,
+    {
+      ...c,
+      ref: r,
+      className: $(H.initialFocusTitle, e),
+      tabIndex: -1
+    }
+  );
+}
+function xt(e) {
+  return /* @__PURE__ */ l(T.Description, { ...e });
+}
+function ke(e) {
+  if (e.render !== void 0)
+    return /* @__PURE__ */ l(T.Close, { ...e });
+  const { className: o = "", label: c = "닫기", size: n = 24, ...r } = e;
+  return /* @__PURE__ */ l(
+    T.Close,
+    {
+      render: /* @__PURE__ */ l(
+        _e,
+        {
+          ...r,
+          className: $(H.close, o),
+          "aria-label": r["aria-label"] ?? c,
+          "data-oc-component": "modal-close",
+          "data-oc-part": "close",
+          size: n,
+          children: /* @__PURE__ */ l(Ze, {})
+        }
+      )
+    }
+  );
+}
+const Ot = Object.assign(xe, {
+  Manager: mt,
+  Root: xe,
+  ModalRoot: yt,
+  Trigger: Wt,
+  Content: Nt,
+  DragHandle: Rt,
+  Header: Ct,
+  NavigationSection: St,
+  Body: Mt,
+  Footer: Tt,
+  Title: Pe,
+  Description: xt,
+  Close: ke
+});
+export {
+  Mt as FloatingWindowBody,
+  ke as FloatingWindowClose,
+  Nt as FloatingWindowContent,
+  xt as FloatingWindowDescription,
+  Rt as FloatingWindowDragHandle,
+  Tt as FloatingWindowFooter,
+  Ct as FloatingWindowHeader,
+  mt as FloatingWindowManager,
+  St as FloatingWindowNavigationSection,
+  xe as FloatingWindowRoot,
+  Pe as FloatingWindowTitle,
+  Wt as FloatingWindowTrigger,
+  yt as ModalWindowRoot,
+  Ot as default
+};

package/dist/components/FloatingWindow/FloatingWindow.module.scss.js

@@ -0,0 +1,17 @@
+import './FloatingWindow.css';const o = "oc-FloatingWindow-module__trigger__qlrNq", n = "oc-FloatingWindow-module__backdrop__53p3-", t = "oc-FloatingWindow-module__positioner__yoopu", i = "oc-FloatingWindow-module__window__7l1n6", d = "oc-FloatingWindow-module__presentationMotion__DWXpt", e = "oc-FloatingWindow-module__dragHandle__MfwPD", _ = {
+  trigger: o,
+  backdrop: n,
+  positioner: t,
+  window: i,
+  presentationMotion: d,
+  dragHandle: e
+};
+export {
+  n as backdrop,
+  _ as default,
+  e as dragHandle,
+  t as positioner,
+  d as presentationMotion,
+  o as trigger,
+  i as window
+};