@orioncactuscorp/ui 1.9.2 → 1.11.0

package/dist/components/Modal/bottomSheetGeometry.js

@@ -2,13 +2,13 @@ function M(n, t, i) {
   return Math.min(Math.max(n, t), i);
 }
 const d = 2;
-function x(n, t) {
+function S(n, t) {
   return Math.abs(n - t) <= d;
 }
 function m(n, t) {
   return M(n - t, 0, n);
 }
-function E(...n) {
+function v(...n) {
   const t = n.filter(
     (i) => i !== void 0 && T(i)
   );
@@ -18,71 +18,84 @@ function E(...n) {
 function T(n) {
   return Number.isFinite(n) && n > 0;
 }
-function N({
+function E({
   contentHeight: n,
   maxHeight: t,
   snapHeight: i
 }) {
   if (!T(n)) return 0;
-  const e = E(t, i);
+  const e = v(t, i);
   return e === void 0 ? n : Math.min(n, e);
 }
-function b({
+function N({
+  backdropFromHeight: n,
+  currentTranslate: t,
+  sheetHeight: i,
+  snapHeights: e
+}) {
+  if (n === void 0) return null;
+  const r = e.filter(
+    (a) => a < n - 0.5
+  );
+  return !r.length || i - t < n - 0.5 ? null : Math.max(0, i - Math.max(...r));
+}
+function _({
   defaultTranslate: n,
   sheetHeight: t,
   snapHeights: i,
   translate: e
 }) {
-  if (x(e, n))
+  if (S(e, n))
     return { kind: "default-snap" };
   if (e <= d && n > d)
     return { kind: "expanded" };
-  let a = -1, u = Number.POSITIVE_INFINITY;
-  return i.forEach((c, f) => {
-    const r = Math.abs(
-      m(t, c) - e
+  let r = -1, a = Number.POSITIVE_INFINITY;
+  return i.forEach((f, c) => {
+    const u = Math.abs(
+      m(t, f) - e
     );
-    r < u && (a = f, u = r);
-  }), a >= 0 && u <= d ? { kind: "snap", index: a } : { kind: "custom" };
+    u < a && (r = c, a = u);
+  }), r >= 0 && a <= d ? { kind: "snap", index: r } : { kind: "custom" };
 }
-function k({
+function b({
   currentTranslate: n,
   fallbackTranslate: t,
   restState: i,
   previousDefaultTranslate: e,
-  previousSheetHeight: a,
-  previousSnapHeights: u,
-  targetSheetHeight: c,
-  targetDefaultTranslate: f,
-  targetSnapHeights: r
+  previousSheetHeight: r,
+  previousSnapHeights: a,
+  targetSheetHeight: f,
+  targetDefaultTranslate: c,
+  targetSnapHeights: u
 }) {
   if (i.kind === "default-snap")
-    return n <= d && e > d ? 0 : f;
+    return n <= d && e > d ? 0 : c;
   if (i.kind === "expanded")
     return 0;
   if (i.kind === "snap") {
-    const o = r[Math.min(i.index, r.length - 1)];
+    const o = u[Math.min(i.index, u.length - 1)];
     if (o !== void 0)
-      return m(c, o);
+      return m(f, o);
   }
   const p = M(
-    a - n,
+    r - n,
     0,
-    a
+    r
   ), I = 2;
-  let s = -1, h = Number.POSITIVE_INFINITY;
-  if (u.forEach((o, S) => {
-    const l = Math.abs(o - p);
-    l < h && (s = S, h = l);
-  }), s >= 0 && h <= I) {
-    const o = r[Math.min(s, r.length - 1)];
+  let s = -1, l = Number.POSITIVE_INFINITY;
+  if (a.forEach((o, x) => {
+    const h = Math.abs(o - p);
+    h < l && (s = x, l = h);
+  }), s >= 0 && l <= I) {
+    const o = u[Math.min(s, u.length - 1)];
     if (o !== void 0)
-      return m(c, o);
+      return m(f, o);
   }
   return t;
 }
 export {
-  b as resolveBottomSheetRestState,
-  N as resolveContentSizedBottomSheetHeight,
-  k as resolveResizedBottomSheetTranslate
+  _ as resolveBottomSheetRestState,
+  E as resolveContentSizedBottomSheetHeight,
+  b as resolveResizedBottomSheetTranslate,
+  N as resolveUndimmedCollapseTranslate
 };

package/dist/components/Modal/modalScrollArbitration.js

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

package/dist/components/Modal/snapPoints.js

@@ -1,30 +1,34 @@
 function y(e, t) {
   return typeof e == "string" ? Number.parseFloat(e) : e > 1 ? e : e * t;
 }
-function v(e) {
+function x(e) {
   return Number.isFinite(e) && e > 0;
 }
 function X({
   snapPoints: e,
   defaultSnapPoint: t,
-  viewportHeight: i
+  backdropFrom: n,
+  viewportHeight: c
 }) {
   if (!e?.length) return;
-  const a = e.map(
-    (c) => y(c, i)
-  ), r = a.filter(v).sort((c, l) => c - l);
-  if (!r.length) return;
-  const n = Math.max(...r), o = t !== void 0 ? e.findIndex((c) => c === t) : -1, g = o >= 0 && a[o] ? a[o] : n;
-  return {
-    snapHeights: r,
-    sheetHeight: n,
-    defaultHeight: g,
-    visibleTranslate: Math.max(0, n - g)
+  const r = e.map(
+    (o) => y(o, c)
+  ), i = r.filter(x).sort((o, g) => o - g);
+  if (!i.length) return;
+  const a = Math.max(...i), h = t !== void 0 ? e.findIndex((o) => o === t) : -1, u = h >= 0 && r[h] ? r[h] : a, d = n !== void 0 ? e.findIndex((o) => o === n) : -1, s = d >= 0 && x(r[d]) ? r[d] : void 0;
+  return process.env.NODE_ENV !== "production" && n !== void 0 && s === void 0 && console.warn(
+    "oc-ui Modal: `backdropFrom` must reference a member of `snapPoints`; the backdrop threshold was ignored."
+  ), {
+    snapHeights: i,
+    sheetHeight: a,
+    defaultHeight: u,
+    visibleTranslate: Math.max(0, a - u),
+    backdropFromHeight: s
   };
 }
-function u(e, t) {
-  const i = Number.parseFloat(e.getPropertyValue(t));
-  return Number.isFinite(i) ? i : 0;
+function m(e, t) {
+  const n = Number.parseFloat(e.getPropertyValue(t));
+  return Number.isFinite(n) ? n : 0;
 }
 function w(e, t) {
   switch (e) {
@@ -51,51 +55,51 @@ function w(e, t) {
 function S({
   position: e,
   viewportRect: t,
-  paddingTop: i,
-  paddingBottom: a
+  paddingTop: n,
+  paddingBottom: c
 }) {
   if (e === "top" || e.startsWith("top-"))
     return {
-      y: `calc(${i - t.height / 2}px + 50%)`
+      y: `calc(${n - t.height / 2}px + 50%)`
     };
   if (e === "bottom" || e.startsWith("bottom-"))
     return {
-      y: `calc(${t.height / 2 - a}px - 50%)`
+      y: `calc(${t.height / 2 - c}px - 50%)`
     };
 }
 function Y({
   defaultSnapPosition: e,
   snapPositions: t,
-  surfaceMotion: i
+  surfaceMotion: n
 }) {
-  const a = i.parentElement;
-  if (!a || !t.length) return;
-  const r = a.getBoundingClientRect(), n = i.getBoundingClientRect();
-  if (r.width <= 0 || r.height <= 0 || n.width <= 0 || n.height <= 0)
+  const c = n.parentElement;
+  if (!c || !t.length) return;
+  const r = c.getBoundingClientRect(), i = n.getBoundingClientRect();
+  if (r.width <= 0 || r.height <= 0 || i.width <= 0 || i.height <= 0)
     return;
-  const o = window.getComputedStyle(a), g = u(o, "padding-left"), c = u(o, "padding-right"), l = u(o, "padding-top"), d = u(o, "padding-bottom"), m = {
-    minX: g + n.width / 2 - r.width / 2,
-    maxX: r.width - c - n.width / 2 - r.width / 2,
-    minY: l + n.height / 2 - r.height / 2,
-    maxY: r.height - d - n.height / 2 - r.height / 2
-  }, s = t.map((h) => {
+  const a = window.getComputedStyle(c), h = m(a, "padding-left"), u = m(a, "padding-right"), d = m(a, "padding-top"), s = m(a, "padding-bottom"), o = {
+    minX: h + i.width / 2 - r.width / 2,
+    maxX: r.width - u - i.width / 2 - r.width / 2,
+    minY: d + i.height / 2 - r.height / 2,
+    maxY: r.height - s - i.height / 2 - r.height / 2
+  }, g = t.map((l) => {
     const p = S({
-      position: h,
+      position: l,
       viewportRect: r,
-      paddingTop: l,
-      paddingBottom: d
+      paddingTop: d,
+      paddingBottom: s
     });
     return {
-      key: h,
-      ...w(h, m),
+      key: l,
+      ...w(l, o),
       ...p ? { settledTranslate: p } : {}
     };
-  }), x = e ?? t[0], f = s.find((h) => h.key === x) ?? s[0];
+  }), v = e ?? t[0], f = g.find((l) => l.key === v) ?? g[0];
   if (f)
     return {
-      bounds: m,
+      bounds: o,
       defaultTarget: f,
-      targets: s
+      targets: g
     };
 }
 export {

package/dist/components/Modal/useModalContentBlockTransition.js

@@ -1,58 +1,63 @@
-import { useRef as r, useCallback as d, useLayoutEffect as S, useEffect as N } from "react";
-const w = 600, E = 4;
-function v(t) {
-  const n = Number.parseFloat(window.getComputedStyle(t).height);
-  return Number.isFinite(n) && n > 0 ? n : t.getBoundingClientRect().height;
+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;
 }
-function B({
-  enabled: t,
+function w({
+  enabled: e,
   node: n
 }) {
-  const s = r(null), i = r(null), a = r(null), T = r(null), l = r(!1), o = r(0), g = r(!1), f = d(() => {
-    T.current?.(), T.current = null;
-  }, []), u = d(() => {
-    i.current !== null && (window.cancelAnimationFrame(i.current), i.current = null), a.current !== null && (window.clearTimeout(a.current), a.current = null), f();
-  }, [f]), h = d(() => {
-    const e = s.current;
-    e && (u(), e.style.removeProperty("height"), e.dataset.ocContentTransitionState = "idle", l.current = !1, o.current = v(e));
-  }, [u]), C = d(() => {
-    const e = s.current;
-    !e || !t || l.current || i.current === null && (i.current = window.requestAnimationFrame(() => {
-      i.current = null;
-      const m = o.current, c = v(e);
-      if (!g.current) {
-        g.current = !0, o.current = c;
+  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;
         return;
       }
-      if (m <= 0 || Math.abs(c - m) <= E) {
-        o.current = c;
+      if (Math.abs(o - v.current) > B) {
+        i.current = o;
         return;
       }
-      l.current = !0, e.dataset.ocContentTransitionState = "changing", e.style.height = `${m}px`, e.getBoundingClientRect(), e.style.height = `${c}px`, o.current = c;
-      const p = (R) => {
-        R.target !== e || R.propertyName !== "height" || (e.removeEventListener("transitionend", p), h());
+      if (s <= 0 || Math.abs(o - s) <= O) {
+        i.current = o;
+        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());
       };
-      f(), e.addEventListener("transitionend", p), T.current = () => {
-        e.removeEventListener("transitionend", p);
-      }, a.current = window.setTimeout(() => {
-        h();
-      }, w);
+      d(), t.addEventListener("transitionend", N), h.current = () => {
+        t.removeEventListener("transitionend", N);
+      }, l.current = window.setTimeout(() => {
+        C();
+      }, _);
     }));
-  }, [t, h, f]);
-  S(() => {
-    s.current = n;
-    const e = s.current;
-    e && (o.current = v(e), g.current = !1, t || (u(), e.style.removeProperty("height"), e.dataset.ocContentTransitionState = "idle", l.current = !1));
-  }, [u, t, n]), N(() => {
-    if (!n || !t || typeof ResizeObserver > "u")
+  }, [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")
       return;
-    const e = new ResizeObserver(() => {
-      C();
+    const t = new ResizeObserver(() => {
+      const s = a.current;
+      s && (v.current = g(s)), p();
     });
-    return e.observe(n), () => {
-      e.disconnect();
+    return t.observe(n), () => {
+      t.disconnect();
     };
-  }, [t, n, C]), N(
+  }, [e, n, p]), S(
     () => () => {
       u();
     },
@@ -60,5 +65,5 @@ function B({
   );
 }
 export {
-  B as useModalContentBlockTransition
+  w as useModalContentBlockTransition
 };