@orioncactuscorp/ui 1.16.0 → 1.17.0

package/dist/components/Modal/blockSize.js

@@ -0,0 +1,7 @@
+function i(t) {
+  const e = Number.parseFloat(window.getComputedStyle(t).height);
+  return Number.isFinite(e) && e > 0 ? e : t.getBoundingClientRect().height;
+}
+export {
+  i as getBlockSize
+};

package/dist/components/Modal/cssTime.js

@@ -0,0 +1,11 @@
+function s(t) {
+  const e = t.trim();
+  return e.endsWith("ms") ? Number.parseFloat(e) || 0 : e.endsWith("s") ? (Number.parseFloat(e) || 0) * 1e3 : 0;
+}
+function i(t) {
+  return t.split(",").reduce((e, r) => Math.max(e, s(r)), 0);
+}
+export {
+  i as getMaxCssTimeMs,
+  s as parseCssTimeMs
+};

package/dist/components/Modal/modalResizeTarget.js

@@ -0,0 +1,28 @@
+const r = "--oc-modal-resize-target-scrollport-height", o = '[data-oc-modal-resizing="true"]';
+function s(e, t) {
+  e.dataset.ocModalResizing = "true", t !== null && e.style.setProperty(
+    r,
+    `${t}px`
+  );
+}
+function i(e) {
+  delete e.dataset.ocModalResizing, e.style.removeProperty(r);
+}
+function l(e) {
+  return e.dataset.ocModalResizing === "true";
+}
+function n(e) {
+  const t = e.closest(o);
+  if (!t) return null;
+  const a = Number.parseFloat(
+    t.style.getPropertyValue(r)
+  );
+  return Number.isFinite(a) ? a : null;
+}
+export {
+  r as MODAL_RESIZE_TARGET_SCROLLPORT_HEIGHT_PROPERTY,
+  i as clearModalResizeTarget,
+  l as isModalResizeTargetPublished,
+  s as publishModalResizeTarget,
+  n as readModalResizeTarget
+};

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/useBottomSheetIntrinsicHeight.js

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

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
 };

package/dist/components/Modal/useModalContentSizeSignal.js

@@ -0,0 +1,30 @@
+import { useRef as n, useLayoutEffect as b, useEffect as v } from "react";
+function a({
+  enabled: e,
+  bodyNode: o,
+  discreteKey: t,
+  onDiscreteChange: u,
+  onObservedChange: c
+}) {
+  const f = n(t), s = n(u), i = n(c);
+  b(() => {
+    s.current = u, i.current = c;
+  }), b(() => {
+    Object.is(f.current, t) || (f.current = t, e && s.current?.());
+  }, [t, e]), v(() => {
+    const r = o?.firstElementChild;
+    if (!r || !e || typeof ResizeObserver > "u" || // A fill-layout content box tracks the scrollport and would report the
+    // surface's own motion back as a content change.
+    r.getAttribute("data-oc-layout") === "fill")
+      return;
+    const R = new ResizeObserver(() => {
+      i.current?.();
+    });
+    return R.observe(r, { box: "border-box" }), () => {
+      R.disconnect();
+    };
+  }, [o, e]);
+}
+export {
+  a as useModalContentSizeSignal
+};