@orioncactuscorp/ui 1.16.0 → 1.18.0

package/dist/components/Modal/modalScrollArbitration.js

@@ -1,82 +1,71 @@
-const L = "ocModalTouchScrollLock", T = /* @__PURE__ */ new Set(["auto", "overlay", "scroll"]), r = {
+import { readModalResizeTarget as S } from "./modalResizeTarget.js";
+const c = 1, p = "ocModalTouchScrollLock", L = /* @__PURE__ */ new Set(["auto", "overlay", "scroll"]), r = {
   allowDrag: !1,
   preventDefault: !1,
   resetAnchor: !1
-}, S = {
+}, D = {
   allowDrag: !1,
   preventDefault: !1,
   resetAnchor: !0
-}, R = {
+}, g = {
   allowDrag: !0,
   preventDefault: !1,
   resetAnchor: !1
-}, i = {
+}, s = {
   allowDrag: !0,
   preventDefault: !0,
   resetAnchor: !1
 };
-function O(e) {
-  return e ? i : R;
+function d(e) {
+  return e ? s : g;
 }
-function c(e) {
+function u(e) {
   if (!e) return !1;
-  const o = e.ownerDocument.defaultView?.getComputedStyle(e).overflowY;
-  return !!(o && T.has(o) && e.scrollHeight > e.clientHeight + 1);
+  const n = e.ownerDocument.defaultView?.getComputedStyle(e).overflowY;
+  return !!(n && L.has(n) && e.scrollHeight > e.clientHeight + c);
 }
-function s(e) {
-  return !c(e) || e.scrollTop <= 1;
+function f(e) {
+  return !u(e) || e.scrollTop <= c;
 }
-function p(e) {
-  return !c(e) || e.scrollHeight - e.clientHeight - e.scrollTop <= 1;
+function A(e) {
+  return !u(e) || e.scrollHeight - e.clientHeight - e.scrollTop <= c;
 }
-function _(e) {
-  const t = e.closest(
-    '[data-oc-modal-sheet-resizing="true"]'
-  );
-  if (!t) return null;
-  const o = Number.parseFloat(
-    t.style.getPropertyValue(
-      "--oc-modal-resize-target-scrollport-height"
-    )
-  );
-  return Number.isFinite(o) ? o : null;
-}
-function d(e) {
+function O(e) {
   if (!e)
     return { canScroll: !1, scrolledFromTop: !1, scrolledToBottom: !0 };
-  const t = _(e);
+  const t = S(e);
   if (t === null)
     return {
-      canScroll: c(e),
-      scrolledFromTop: !s(e),
-      scrolledToBottom: p(e)
+      canScroll: u(e),
+      scrolledFromTop: !f(e),
+      scrolledToBottom: A(e)
     };
-  const o = e.firstElementChild?.getBoundingClientRect().height ?? e.scrollHeight, n = o > t + 1;
+  const n = e.firstElementChild?.getBoundingClientRect().height ?? e.scrollHeight, o = n > t + c;
   return {
-    canScroll: n,
-    scrolledFromTop: n && e.scrollTop > 1,
-    scrolledToBottom: !n || o - t - e.scrollTop <= 1
+    canScroll: o,
+    scrolledFromTop: o && e.scrollTop > c,
+    scrolledToBottom: !o || n - t - e.scrollTop <= c
   };
 }
-function m(e, t) {
-  let o = e;
-  for (; o && o !== t; ) {
-    if (o instanceof HTMLElement && c(o))
-      return o;
-    o = o.parentElement;
+function h(e, t) {
+  let n = e;
+  for (; n && n !== t; ) {
+    if (n instanceof HTMLElement && u(n))
+      return n;
+    n = n.parentElement;
   }
   return t;
 }
-function g(e, t) {
+function w(e, t) {
   if (e) {
     if (t) {
-      e.dataset[L] = "true";
+      e.dataset[p] = "true";
       return;
     }
-    delete e.dataset[L];
+    delete e.dataset[p];
   }
 }
-function f(e) {
+function a(e) {
   return typeof Element > "u" || !(e instanceof Element) ? !0 : !!e.closest(
     [
       "[data-oc-modal-no-drag]",
@@ -97,64 +86,64 @@ function f(e) {
     ].join(",")
   );
 }
-function h(e, t) {
+function E(e, t) {
   return t ? t.ownerDocument : typeof Node < "u" && e instanceof Node ? e.ownerDocument : typeof document > "u" ? null : document;
 }
-function a({
+function m({
   boundary: e,
   target: t
 }) {
-  const o = h(t, e ?? null), n = o?.getSelection?.() ?? o?.defaultView?.getSelection?.();
-  if (!n || n.rangeCount === 0 || n.isCollapsed)
+  const n = E(t, e ?? null), o = n?.getSelection?.() ?? n?.defaultView?.getSelection?.();
+  if (!o || o.rangeCount === 0 || o.isCollapsed)
     return !1;
-  const u = e ?? (typeof Node < "u" && t instanceof Node ? t : null);
-  if (!u) return !0;
-  for (let l = 0; l < n.rangeCount; l += 1) {
-    const D = n.getRangeAt(l).commonAncestorContainer;
-    if (u.contains(D) || D.contains(u))
+  const i = e ?? (typeof Node < "u" && t instanceof Node ? t : null);
+  if (!i) return !0;
+  for (let l = 0; l < o.rangeCount; l += 1) {
+    const T = o.getRangeAt(l).commonAncestorContainer;
+    if (i.contains(T) || T.contains(i))
       return !0;
   }
   return !1;
 }
-function A({
+function C({
   target: e,
   chrome: t,
-  bodyNode: o
+  bodyNode: n
 }) {
-  if (t || typeof Element > "u" || !(e instanceof Element) || f(e) || a({ target: e, boundary: o })) return !1;
-  const n = m(e, o);
-  return c(n) && s(n);
+  if (t || typeof Element > "u" || !(e instanceof Element) || a(e) || m({ target: e, boundary: n })) return !1;
+  const o = h(e, n);
+  return u(o) && f(o);
 }
-function H({
+function R({
   target: e,
   deltaY: t,
-  chrome: o,
-  bodyNode: n,
-  canExpand: u
+  chrome: n,
+  bodyNode: o,
+  canExpand: i
 }) {
-  if (typeof Element > "u" || !(e instanceof Element) || f(e)) return r;
-  if (o) return O(t !== 0);
-  if (a({ target: e, boundary: n }))
+  if (typeof Element > "u" || !(e instanceof Element) || a(e)) return r;
+  if (n) return d(t !== 0);
+  if (m({ target: e, boundary: o }))
     return r;
-  const l = m(e, n);
-  return c(l) ? t > 0 ? s(l) ? i : S : t < 0 ? u ? i : S : r : O(t !== 0);
+  const l = h(e, o);
+  return u(l) ? t > 0 ? f(l) ? s : D : t < 0 ? i ? s : D : r : d(t !== 0);
 }
-function E({
+function H({
   target: e,
   bodyNode: t
 }) {
-  return typeof Element > "u" || !(e instanceof Element) || f(e) || a({ target: e, boundary: t }) ? r : i;
+  return typeof Element > "u" || !(e instanceof Element) || a(e) || m({ target: e, boundary: t }) ? r : s;
 }
 export {
-  H as getBottomTouchDragDecision,
-  d as getModalScrollState,
-  E as getPopupTouchDragDecision,
-  m as getScrollableAncestor,
-  a as hasActiveTextSelection,
-  p as isAtScrollBottom,
-  s as isAtScrollTop,
-  c as isScrollableElement,
-  g as setModalBodyTouchScrollLock,
-  f as shouldIgnoreDragTarget,
-  A as shouldLockModalBodyTouchScroll
+  R as getBottomTouchDragDecision,
+  O as getModalScrollState,
+  H as getPopupTouchDragDecision,
+  h as getScrollableAncestor,
+  m as hasActiveTextSelection,
+  A as isAtScrollBottom,
+  f as isAtScrollTop,
+  u as isScrollableElement,
+  w as setModalBodyTouchScrollLock,
+  a as shouldIgnoreDragTarget,
+  C as shouldLockModalBodyTouchScroll
 };

package/dist/components/Modal/scrollportScroller.js

@@ -0,0 +1,43 @@
+import { resolveOcMotion as s } from "../../utils/motion.js";
+import { createSpringAnimator as u } from "../../utils/spring/animator.js";
+function m() {
+  let e = null;
+  const t = () => {
+    e?.destroy(), e = null;
+  };
+  return {
+    scrollTo(n, o, { smooth: i = !0 } = {}) {
+      t();
+      const r = i ? s({
+        element: n,
+        intent: "sheet",
+        reducedMotion: window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === !0
+      }) : void 0;
+      if (!r?.animate) {
+        n.scrollTo({ behavior: "instant", top: o });
+        return;
+      }
+      e = u({
+        value: n.scrollTop,
+        target: o,
+        spring: r.spring,
+        epsilon: 0.5,
+        velocityEpsilon: 20,
+        onUpdate: (l) => {
+          n.scrollTop = Math.round(l);
+        },
+        onComplete: () => {
+          n.scrollTop = o, e = null;
+        }
+      });
+    },
+    isRunning: () => e?.isRunning === !0,
+    stop() {
+      e?.stop(), e = null;
+    },
+    destroy: t
+  };
+}
+export {
+  m as createScrollportScroller
+};

package/dist/components/Modal/tapCaret.js

@@ -0,0 +1,32 @@
+function i(n, e, o) {
+  const r = n.ownerDocument;
+  if (typeof r.caretRangeFromPoint != "function") return null;
+  let t = null;
+  try {
+    t = r.caretRangeFromPoint(e, o);
+  } catch {
+    return null;
+  }
+  if (!t) return null;
+  if (n instanceof HTMLInputElement || n instanceof HTMLTextAreaElement) {
+    const f = t.startContainer;
+    return f.nodeType === Node.TEXT_NODE && f.textContent === n.value ? { kind: "offset", offset: t.startOffset } : null;
+  }
+  return n.contains(t.startContainer) ? { kind: "range", range: t } : null;
+}
+function l(n, e) {
+  if (e)
+    try {
+      if (e.kind === "offset") {
+        (n instanceof HTMLInputElement || n instanceof HTMLTextAreaElement) && n.setSelectionRange(e.offset, e.offset);
+        return;
+      }
+      const o = n.ownerDocument.getSelection();
+      o?.removeAllRanges(), o?.addRange(e.range);
+    } catch {
+    }
+}
+export {
+  i as captureTapCaret,
+  l as restoreTapCaret
+};

package/dist/components/Modal/useBottomSheetIntrinsicHeight.js

@@ -0,0 +1,58 @@
+import { useState as S, useRef as C, useCallback as f, useLayoutEffect as H } from "react";
+import { resolveContentSizedBottomSheetHeight as x } from "./bottomSheetGeometry.js";
+import { useModalContentSizeSignal as v } from "./useModalContentSizeSignal.js";
+function w(t) {
+  const e = t.trim();
+  if (!e.endsWith("px")) return;
+  const n = Number.parseFloat(e);
+  return Number.isFinite(n) && n > 0 ? n : void 0;
+}
+function B(t) {
+  if (!(!t || typeof window > "u"))
+    return w(window.getComputedStyle(t).maxHeight);
+}
+function D({
+  enabled: t,
+  bodyNode: e,
+  surfaceMotionNode: n,
+  snapSheetHeight: u,
+  viewportHeight: g,
+  discreteKey: l,
+  frozen: c = !1
+}) {
+  const [r, m] = S(0), o = C(!1), i = f(() => {
+    const s = e?.firstElementChild;
+    if (!t || !s) {
+      o.current = !1;
+      return;
+    }
+    if (c) return;
+    const p = s.getBoundingClientRect().height, a = x({
+      contentHeight: p,
+      maxHeight: B(n),
+      snapHeight: u
+    }), h = Math.abs(r - a) > 0.5;
+    o.current = h, h && m(a);
+  }, [
+    e,
+    t,
+    c,
+    r,
+    u,
+    n
+  ]);
+  H(() => {
+    i();
+  }, [i, g]), v({
+    enabled: t,
+    bodyNode: e,
+    discreteKey: l,
+    onDiscreteChange: i,
+    onObservedChange: i
+  });
+  const d = f(() => o.current, []);
+  return { intrinsicSheetHeight: r, shouldDeferSettle: d };
+}
+export {
+  D as useBottomSheetIntrinsicHeight
+};

package/dist/components/Modal/useFieldReveal.js

@@ -0,0 +1,81 @@
+import { useRef as a, useLayoutEffect as B, useCallback as i, useMemo as C } from "react";
+import { getKeyboardRevealScrollDelta as h, getKeyboardRevealTargetRect as E, parseScrollPadding as u } from "./fieldReveal.js";
+const w = "--_-modal-keyboard-inset-settled";
+function _({
+  bodyNode: g,
+  footerHeight: R,
+  onReserveRendered: p,
+  scroller: n,
+  viewportNode: f
+}) {
+  const s = a(g), d = a(R), y = a(f), T = a(p);
+  B(() => {
+    s.current = g, d.current = R, y.current = f, T.current = p;
+  });
+  const b = i(
+    (o, {
+      clearanceInset: r,
+      revealed: t,
+      smooth: c
+    }) => {
+      const e = s.current;
+      if (!e) return !1;
+      const l = window.getComputedStyle(e), P = h({
+        bodyRect: e.getBoundingClientRect(),
+        clearanceInset: r,
+        footerHeight: d.current,
+        revealed: t,
+        // jsdom resolves only the physical alias.
+        scrollPaddingStart: u(
+          l.scrollPaddingBlockStart || l.scrollPaddingTop
+        ),
+        targetRect: E(o)
+      });
+      if (Math.abs(P) <= 0.5) return !0;
+      const m = e.scrollTop + P;
+      return n.scrollTo(e, m, { smooth: c }), c || Math.abs(e.scrollTop - m) <= 0.5;
+    },
+    [n]
+  ), S = i((o) => {
+    const r = y.current;
+    if (!r) return;
+    const t = u(
+      r.style.getPropertyValue(w)
+    );
+    o <= t || (r.style.setProperty(w, `${o}px`), T.current(o));
+  }, []), v = i(
+    (o, r) => {
+      const t = s.current;
+      if (!t) return () => {
+      };
+      const c = t.scrollTop, e = window.getComputedStyle(t), l = h({
+        bodyRect: t.getBoundingClientRect(),
+        clearanceInset: r,
+        footerHeight: d.current,
+        revealed: !1,
+        scrollPaddingStart: u(
+          e.scrollPaddingBlockStart || e.scrollPaddingTop
+        ),
+        targetRect: E(o)
+      });
+      return Math.abs(l) > 0.5 && t.scrollTo({ behavior: "instant", top: c + l }), () => {
+        t.scrollTo({ behavior: "instant", top: c });
+      };
+    },
+    []
+  );
+  return C(
+    () => ({
+      alignTarget: b,
+      isRevealing: n.isRunning,
+      poseTargetAtReveal: v,
+      renderReserve: S,
+      stopReveal: n.stop
+    }),
+    [b, v, S, n]
+  );
+}
+export {
+  w as KEYBOARD_INSET_SETTLED_PROPERTY,
+  _ as useFieldReveal
+};

package/dist/components/Modal/useMeasuredElement.js

@@ -0,0 +1,20 @@
+import { useState as o, useCallback as a, useLayoutEffect as c } from "react";
+import { getBlockSize as m } from "./blockSize.js";
+function l() {
+  const [e, i] = o(null), [s, u] = o(0), r = a((n) => {
+    u(n ? m(n) : 0);
+  }, []);
+  return c(() => {
+    if (!e) return;
+    const n = window.requestAnimationFrame(() => r(e));
+    if (typeof ResizeObserver > "u")
+      return () => window.cancelAnimationFrame(n);
+    const t = new ResizeObserver(() => r(e));
+    return t.observe(e), () => {
+      window.cancelAnimationFrame(n), t.disconnect();
+    };
+  }, [r, e]), { node: e, setNode: i, height: e ? s : 0 };
+}
+export {
+  l as useMeasuredElement
+};

package/dist/components/Modal/useModalContentBlockTransition.js

@@ -1,63 +1,142 @@
-import { useRef as r, useCallback as T, useLayoutEffect as E, useEffect as S } from "react";
-const _ = 600, O = 4, B = 1;
-function g(e) {
-  const n = Number.parseFloat(window.getComputedStyle(e).height);
-  return Number.isFinite(n) && n > 0 ? n : e.getBoundingClientRect().height;
+import { useRef as r, useLayoutEffect as b, useCallback as i, useEffect as k } from "react";
+import { getBlockSize as f } from "./blockSize.js";
+import { getMaxCssTimeMs as I } from "./cssTime.js";
+import { publishModalResizeTarget as F, clearModalResizeTarget as G } from "./modalResizeTarget.js";
+import { useModalContentSizeSignal as H } from "./useModalContentSizeSignal.js";
+const X = 600, U = 250, x = 4, q = 1, V = 0.5;
+function j(s) {
+  const c = window.getComputedStyle(s), p = c.transitionDuration;
+  return p ? I(p) + I(c.transitionDelay) : null;
 }
-function w({
-  enabled: e,
-  node: n
+function nn({
+  enabled: s,
+  node: c,
+  resizeHost: p = null,
+  bodyNode: P = null,
+  discreteKey: K,
+  refreshScrollState: M
 }) {
-  const a = r(null), c = r(null), l = r(null), h = r(null), f = r(!1), i = r(0), v = r(0), m = r(!1), d = T(() => {
-    h.current?.(), h.current = null;
-  }, []), u = T(() => {
-    c.current !== null && (window.cancelAnimationFrame(c.current), c.current = null), l.current !== null && (window.clearTimeout(l.current), l.current = null), d();
-  }, [d]), C = T(() => {
-    const t = a.current;
-    t && (u(), t.style.removeProperty("height"), t.dataset.ocContentTransitionState = "idle", f.current = !1, i.current = g(t));
-  }, [u]), p = T(() => {
-    const t = a.current;
-    !t || !e || f.current || c.current === null && (c.current = window.requestAnimationFrame(() => {
-      c.current = null;
-      const s = i.current, o = g(t);
-      if (!m.current) {
-        m.current = !0, i.current = o;
+  const l = r(null), g = r(null), w = r(null), h = r(M), E = r(s), a = r(null), T = r(null), B = r(null), d = r(!1), o = r(0), z = r(0), C = r(!1);
+  b(() => {
+    g.current = p, w.current = P, h.current = M, E.current = s;
+  });
+  const y = i(() => {
+    B.current?.(), B.current = null;
+  }, []), u = i(() => {
+    a.current !== null && (window.cancelAnimationFrame(a.current), a.current = null), T.current !== null && (window.clearTimeout(T.current), T.current = null), y();
+  }, [y]), R = i((n) => {
+    const e = w.current;
+    F(
+      g.current ?? n,
+      e ? e.clientHeight : null
+    );
+  }, []), N = i((n) => {
+    G(g.current ?? n);
+  }, []), m = i(() => {
+    const n = l.current;
+    n && (u(), n.style.removeProperty("height"), N(n), n.dataset.ocContentTransitionState = "idle", d.current = !1, o.current = f(n), h.current?.());
+  }, [u, N]), S = i(
+    (n) => {
+      const e = j(n);
+      if (e === 0) {
+        m();
         return;
       }
-      if (Math.abs(o - v.current) > B) {
-        i.current = o;
+      const t = (O) => {
+        O.target !== n || O.propertyName !== "height" || (n.removeEventListener("transitionend", t), m());
+      };
+      y(), n.addEventListener("transitionend", t), B.current = () => {
+        n.removeEventListener("transitionend", t);
+      }, T.current !== null && window.clearTimeout(T.current), T.current = window.setTimeout(
+        () => {
+          m();
+        },
+        (e ?? X) + U
+      );
+    },
+    [m, y]
+  ), v = i(
+    (n, e, t) => {
+      R(n), d.current = !0, n.dataset.ocContentTransitionState = "changing", n.style.height = `${e}px`, n.getBoundingClientRect(), n.style.height = `${t}px`, o.current = t, S(n);
+    },
+    [S, R]
+  ), _ = i(
+    (n) => {
+      const e = f(n), t = n.style.getPropertyValue("transition"), O = n.style.getPropertyPriority("transition");
+      n.style.setProperty("transition", "none", "important"), n.style.removeProperty("height");
+      const L = f(n);
+      if (R(n), n.style.height = `${e}px`, n.getBoundingClientRect(), t ? n.style.setProperty(
+        "transition",
+        t,
+        O
+      ) : n.style.removeProperty("transition"), o.current = L, Math.abs(L - e) <= V) {
+        m();
         return;
       }
-      if (s <= 0 || Math.abs(o - s) <= O) {
-        i.current = o;
+      n.style.height = `${L}px`, S(n), h.current?.();
+    },
+    [S, m, R]
+  ), A = i(() => {
+    const n = l.current;
+    !n || !E.current || d.current || a.current === null && (a.current = window.requestAnimationFrame(() => {
+      a.current = null;
+      const e = o.current, t = f(n);
+      if (!C.current) {
+        C.current = !0, o.current = t;
         return;
       }
-      f.current = !0, t.dataset.ocContentTransitionState = "changing", t.style.height = `${s}px`, t.getBoundingClientRect(), t.style.height = `${o}px`, i.current = o;
-      const N = (R) => {
-        R.target !== t || R.propertyName !== "height" || (t.removeEventListener("transitionend", N), C());
-      };
-      d(), t.addEventListener("transitionend", N), h.current = () => {
-        t.removeEventListener("transitionend", N);
-      }, l.current = window.setTimeout(() => {
-        C();
-      }, _);
+      if (Math.abs(t - z.current) > q) {
+        o.current = t;
+        return;
+      }
+      if (e <= 0 || Math.abs(t - e) <= x) {
+        o.current = t;
+        return;
+      }
+      v(n, e, t);
     }));
-  }, [e, C, d]);
-  E(() => {
-    a.current = n;
-    const t = a.current;
-    t && (i.current = g(t), m.current = !1, e || (u(), t.style.removeProperty("height"), t.dataset.ocContentTransitionState = "idle", f.current = !1));
-  }, [u, e, n]), S(() => {
-    if (!n || !e || typeof ResizeObserver > "u")
+  }, [v]);
+  b(() => {
+    l.current = c;
+    const n = l.current;
+    n && (o.current = f(n), C.current = !1, s || (u(), n.style.removeProperty("height"), N(n), n.dataset.ocContentTransitionState = "idle", d.current = !1));
+  }, [u, N, s, c]);
+  const D = i(() => {
+    const n = l.current;
+    if (!n || !E.current) return;
+    if (d.current) {
+      _(n);
+      return;
+    }
+    const e = a.current !== null ? z.current : o.current;
+    u(), C.current = !0;
+    const t = f(n);
+    if (e <= 0 || Math.abs(t - e) <= x) {
+      o.current = t;
+      return;
+    }
+    v(n, e, t), h.current?.();
+  }, [u, _, v]), $ = i(() => {
+    const n = l.current;
+    !n || !d.current || _(n);
+  }, [_]);
+  H({
+    enabled: s,
+    bodyNode: P,
+    discreteKey: K,
+    onDiscreteChange: D,
+    onObservedChange: $
+  }), k(() => {
+    if (!c || !s || typeof ResizeObserver > "u")
       return;
-    const t = new ResizeObserver(() => {
-      const s = a.current;
-      s && (v.current = g(s)), p();
+    const n = new ResizeObserver(() => {
+      const e = l.current;
+      e && (z.current = f(e)), A();
     });
-    return t.observe(n), () => {
-      t.disconnect();
+    return n.observe(c), () => {
+      n.disconnect();
     };
-  }, [e, n, p]), S(
+  }, [s, c, A]), k(
     () => () => {
       u();
     },
@@ -65,5 +144,5 @@ function w({
   );
 }
 export {
-  w as useModalContentBlockTransition
+  nn as useModalContentBlockTransition
 };