@orioncactuscorp/ui 1.9.0 → 1.9.2

package/dist/components/Modal/Modal.js

@@ -1,6 +1,6 @@
 'use client';
-import { jsx as s, jsxs as ae } from "react/jsx-runtime";
-import { useCallback as k, useEffect as ne, useRef as $, useState as S, useMemo as xe, useLayoutEffect as ge, useId as at } from "react";
+import { jsx as s, jsxs as ne } from "react/jsx-runtime";
+import { useCallback as k, useEffect as oe, useRef as $, useState as S, useMemo as Te, useLayoutEffect as ge, useId as at } from "react";
 import { Dialog as O } from "@base-ui-components/react/dialog";
 import rt from "@orioncactuscorp/icons/orioncactus/CloseThick";
 import { MotionExpand as it } from "../../react/motion.js";
@@ -13,7 +13,7 @@ import { normalizeSlotIcon as ut } from "../internal/slot.js";
 import { useModalContext as de, ModalProvider as pt } from "./contexts.js";
 import { useControllableState as je } from "./useControllableState.js";
 import { useModalContentBlockTransition as mt } from "./useModalContentBlockTransition.js";
-import { useMeasuredElement as Te } from "./useElementSize.js";
+import { useMeasuredElement as xe } from "./useElementSize.js";
 import { useModalDrag as ft } from "./useModalDrag.js";
 import { useModalPlacement as ht } from "./useModalPlacement.js";
 import { useModalStackDepth as gt } from "./useModalStackDepth.js";
@@ -86,11 +86,11 @@ function Ht(e) {
 function ke(e) {
   return e.split(",").reduce((t, n) => Math.max(t, Ht(n)), 0);
 }
-function xt(e) {
+function Tt(e) {
   const t = window.getComputedStyle(e), n = ke(t.animationDuration), a = ke(t.animationDelay);
   return n + a + 250;
 }
-function Tt(e) {
+function xt(e) {
   const t = window.getComputedStyle(e), n = ke(t.transitionDuration), a = ke(t.transitionDelay);
   return n + a + 250;
 }
@@ -188,9 +188,9 @@ function Ve({
   navigationDepth: m = 0,
   dismissBehavior: F
 }) {
-  const l = t !== void 0, [x, q] = S(
+  const l = t !== void 0, [T, q] = S(
     n ?? !1
-  ), K = l ? t : x, [Q, X] = S("bottom"), [Y, o] = S(!1), [L, W] = S(!1), [z, u] = S(!1), [v, re] = S(!1), [U, Z] = S(0), [_, ue] = S(0), [ie, pe] = S(null), [j, P] = S({
+  ), K = l ? t : T, [Q, X] = S("bottom"), [Y, o] = S(!1), [L, W] = S(!1), [z, u] = S(!1), [v, ae] = S(!1), [U, Z] = S(0), [_, ue] = S(0), [re, pe] = S(null), [j, P] = S({
     canScroll: !1,
     scrolledFromTop: !1,
     scrolledToBottom: !0
@@ -198,7 +198,7 @@ function Ve({
     value: h,
     defaultValue: N,
     onChange: C
-  }), G = Te(), E = Te(), ee = Math.max(0, m), M = k(
+  }), G = xe(), E = xe(), ee = Math.max(0, m), M = k(
     (r, y) => {
       l || q(r), d?.(r, y);
     },
@@ -223,8 +223,8 @@ function Ve({
     [z, F, ee]
   ), I = k(
     (r = { reason: "programmatic" }, y = {}) => {
-      const { commit: Ne = !0, skipAttempt: T = !1 } = y;
-      return !T && Ie(r.reason, z) ? (Se(r.eventDetails), !1) : !T && !A(r) || !T && !p(r) || !T && f?.(r) === !1 ? (Se(r.eventDetails), R(r), !1) : (Ne && M(!1, r.eventDetails), !0);
+      const { commit: Ne = !0, skipAttempt: x = !1 } = y;
+      return !x && Ie(r.reason, z) ? (Se(r.eventDetails), !1) : !x && !A(r) || !x && !p(r) || !x && f?.(r) === !1 ? (Se(r.eventDetails), R(r), !1) : (Ne && M(!1, r.eventDetails), !0);
     },
     [
       p,
@@ -234,7 +234,7 @@ function Ve({
       R,
       f
     ]
-  ), ce = k(
+  ), ie = k(
     (r, y) => {
       if (r && b === "peeked" && D("visible"), !r) {
         I({
@@ -246,7 +246,7 @@ function Ve({
       M(r, y);
     },
     [M, b, I, D]
-  ), V = b === "visible" && !v ? a : !1, J = g || Q === "bottom" && Y, ve = xe(
+  ), V = b === "visible" && !v ? a : !1, J = g || Q === "bottom" && Y, ve = Te(
     () => ({
       open: K,
       placement: Q,
@@ -260,7 +260,7 @@ function Ve({
       notifyCloseAttemptRejected: R,
       disablePointerDismissal: g ?? !1,
       setBackdropDismissalDisabled: u,
-      setBackgroundInteractive: re,
+      setBackgroundInteractive: ae,
       canPeek: Y,
       setCanPeek: o,
       canRenderHandle: L,
@@ -271,13 +271,13 @@ function Ve({
       footerHeight: E.height,
       setHeaderNode: G.setNode,
       setFooterNode: E.setNode,
-      bodyNode: ie,
+      bodyNode: re,
       setBodyNode: pe,
       scrollState: j,
       setScrollState: P
     }),
     [
-      ie,
+      re,
       Y,
       L,
       A,
@@ -304,7 +304,7 @@ function Ve({
     {
       open: K,
       modal: V,
-      onOpenChange: ce,
+      onOpenChange: ie,
       disablePointerDismissal: J,
       children: e
     }
@@ -349,14 +349,14 @@ function Vt({
   snapPositions: m,
   defaultSnapPosition: F,
   initialFocus: l,
-  peekHeight: x,
+  peekHeight: T,
   closeThreshold: q,
   scrollLockTimeout: K,
   container: Q,
   style: X,
   ...Y
 }) {
-  const o = de("ModalContent"), { setCanPeek: L, setCanRenderHandle: W, setPlacement: z } = o, u = ht(n), v = $(null), re = $(null), U = $(null), Z = $(null), [_, ue] = S(null), [ie, pe] = S(
+  const o = de("ModalContent"), { setCanPeek: L, setCanRenderHandle: W, setPlacement: z } = o, u = ht(n), v = $(null), ae = $(null), U = $(null), Z = $(null), [_, ue] = S(null), [re, pe] = S(
     null
   ), j = $(0), P = $(null), b = $(null), D = $(null), [G, E] = S(), ee = h === "handle" || h === "content", M = u === "popup" && ee && !!m?.length, p = Dt({
     backdrop: f,
@@ -366,26 +366,26 @@ function Vt({
   }), [R, te] = S(() => ({
     resolvedBackdrop: p,
     exiting: !1
-  })), A = xe(
+  })), A = Te(
     () => Ae(R, p),
     [R, p]
-  ), I = A.exiting, ce = M && p === "hidden", V = (u === "bottom" || M) && ee, J = u === "bottom" && V && N, ve = J && x !== void 0 ? x : o.headerHeight > 0 ? o.headerHeight : void 0, r = u === "bottom" && d !== "fixed", y = Mt(
+  ), I = A.exiting, ie = M && p === "hidden", V = (u === "bottom" || M) && ee, J = u === "bottom" && V && N, ve = J && T !== void 0 ? T : o.headerHeight > 0 ? o.headerHeight : void 0, r = u === "bottom" && d !== "fixed", y = Mt(
     !!C?.length || r
-  ), Ne = xe(() => {
+  ), Ne = Te(() => {
     if (!(!C?.length || y <= 0))
       return yt({
         snapPoints: C,
         defaultSnapPoint: g,
         viewportHeight: y
       });
-  }, [g, C, y]), T = u === "bottom" ? Ne : void 0, qe = gt(o.open), [be, Ke] = S(0), ye = $(!1), We = T !== void 0 && r, Ce = r && be > 0 ? be : void 0, oe = T ? We && Ce !== void 0 ? Ce : T.sheetHeight : Ce, Ue = T && oe !== void 0 ? Math.max(0, oe - T.defaultHeight) : void 0, _e = oe !== void 0, we = wt({
+  }, [g, C, y]), x = u === "bottom" ? Ne : void 0, qe = gt(o.open), [be, Ke] = S(0), ye = $(!1), We = x !== void 0 && r, Ce = r && be > 0 ? be : void 0, ce = x ? We && Ce !== void 0 ? Ce : x.sheetHeight : Ce, Ue = x && ce !== void 0 ? Math.max(0, ce - x.defaultHeight) : void 0, _e = ce !== void 0, we = wt({
     contentTransition: w,
     placement: u,
     resize: d
   }), Ge = we === "surface" ? "auto" : "none", Je = we === "sheet" ? "auto" : "none", Re = o.bodyNode;
   mt({
     enabled: o.open && we === "surface",
-    node: ie
+    node: re
   }), ge(() => {
     if (!r) {
       ye.current = !1;
@@ -400,7 +400,7 @@ function Vt({
       const le = c.getBoundingClientRect().height, he = vt({
         contentHeight: le,
         maxHeight: Ct(_),
-        snapHeight: T?.sheetHeight
+        snapHeight: x?.sheetHeight
       }), De = Math.abs(be - he) > 0.5;
       ye.current = De, De && Ke(he);
     };
@@ -410,15 +410,15 @@ function Vt({
   }, [
     Re,
     r,
-    T?.sheetHeight,
+    x?.sheetHeight,
     be,
     y,
     _
-  ]), ne(() => {
+  ]), oe(() => {
     z(u);
-  }, [u, z]), ne(() => {
+  }, [u, z]), oe(() => {
     o.open || (Z.current = null);
-  }, [o.open]), ne(() => (L(J), () => L(!1)), [J, L]), ne(() => (W(V), () => W(!1)), [V, W]);
+  }, [o.open]), oe(() => (L(J), () => L(!1)), [J, L]), oe(() => (W(V), () => W(!1)), [V, W]);
   const Qe = k(
     () => ye.current,
     []
@@ -431,9 +431,9 @@ function Vt({
     surfaceMotionNode: _,
     backdropRef: U,
     bodyNode: o.bodyNode,
-    snapHeights: T?.snapHeights,
-    sheetHeight: oe,
-    peekHeight: J ? x : void 0,
+    snapHeights: x?.snapHeights,
+    sheetHeight: ce,
+    peekHeight: J ? T : void 0,
     peekFallback: J ? "header" : void 0,
     presentationState: o.presentationState,
     setPresentationState: o.setPresentationState,
@@ -458,15 +458,15 @@ function Vt({
     },
     [M, o.open, F, m]
   ), Ze = k((c) => {
-    re.current = c, pe(c);
+    ae.current = c, pe(c);
   }, []);
-  ne(() => {
+  oe(() => {
     const c = o.closeAttemptFeedbackKey;
     if (c === 0 || u !== "popup" || j.current === c) {
       j.current = c, E(void 0);
       return;
     }
-    const H = re.current;
+    const H = ae.current;
     if (!H) return;
     j.current = c, P.current !== null && window.cancelAnimationFrame(P.current), b.current !== null && window.clearTimeout(b.current), E(void 0);
     const fe = () => {
@@ -478,7 +478,7 @@ function Vt({
       P.current = null, E("reject"), P.current = window.requestAnimationFrame(() => {
         P.current = null, b.current = window.setTimeout(() => {
           H.removeEventListener("animationend", le), fe();
-        }, xt(H));
+        }, Tt(H));
       });
     }), () => {
       H.removeEventListener("animationend", le), P.current !== null && (window.cancelAnimationFrame(P.current), P.current = null), b.current !== null && (window.clearTimeout(b.current), b.current = null);
@@ -489,14 +489,13 @@ function Vt({
     ...o.headerHeight > 0 ? { "--oc-modal-header-height": `${o.headerHeight}px` } : {},
     ...o.footerHeight > 0 ? { "--oc-modal-footer-height": `${o.footerHeight}px` } : {},
     ...ve !== void 0 ? { "--oc-modal-peek-height": `${ve}px` } : {},
-    ...oe !== void 0 ? {
-      "--oc-modal-sheet-height": `${oe}px`,
-      height: `${oe}px`
-    } : {}
-    // `--oc-modal-translate-y` is owned imperatively by the drag hook. With
-    // content-hug snapping the resting position depends on the measured content
-    // height, and setting it here would let a re-render clobber a settled or
-    // peeked sheet.
+    ...ce !== void 0 ? { "--oc-modal-sheet-height": `${ce}px` } : {}
+    // `--oc-modal-translate-y` and the inline `height` are owned imperatively
+    // by the drag hook: content-size transitions pin the surface to a canvas
+    // height and compensate the translate in the same frame. Rendering the
+    // height here would commit the new size before that compensation runs and
+    // make the sheet jump a frame early. The managed sizing CSS rule renders
+    // the resting height from `--oc-modal-sheet-height`.
   }, Fe = {
     // Each modal reserves one backdrop slot and one viewport slot.
     "--oc-modal-stack-offset": qe * 2
@@ -521,7 +520,7 @@ function Vt({
       };
     }));
   }, [se, p]);
-  return ne(
+  return oe(
     () => () => {
       se();
     },
@@ -535,21 +534,21 @@ function Vt({
     }
     se(), D.current = window.setTimeout(
       me,
-      Tt(c)
+      xt(c)
     );
   }, [
     se,
     me,
     I,
     p
-  ]), ge(() => (Me(p === "hidden"), He(ce), () => {
+  ]), ge(() => (Me(p === "hidden"), He(ie), () => {
     Me(!1), He(!1);
   }), [
-    ce,
+    ie,
     p,
     Me,
     He
-  ]), /* @__PURE__ */ ae(O.Portal, { container: Q, children: [
+  ]), /* @__PURE__ */ ne(O.Portal, { container: Q, children: [
     nt ? /* @__PURE__ */ s(
       O.Backdrop,
       {
@@ -592,7 +591,7 @@ function Vt({
         "data-oc-component": "modal-viewport",
         "data-oc-modal-placement": u,
         style: Fe,
-        children: /* @__PURE__ */ ae(
+        children: /* @__PURE__ */ ne(
           O.Popup,
           {
             ...Y,
@@ -612,7 +611,7 @@ function Vt({
             "data-oc-resize": d,
             "data-oc-modal-feedback": u === "popup" ? G : void 0,
             "data-oc-modal-placement": u,
-            "data-oc-modal-snapping": T || M ? "true" : void 0,
+            "data-oc-modal-snapping": x || M ? "true" : void 0,
             "data-oc-modal-sheet-sizing": _e ? "managed" : void 0,
             "data-oc-modal-sheet-transition": Je === "auto" ? "auto" : void 0,
             style: et,
@@ -676,8 +675,8 @@ function Lt({
       m(q), Pe(N, q);
     },
     [N, m]
-  ), x = $e(a);
-  return /* @__PURE__ */ ae(
+  ), T = $e(a);
+  return /* @__PURE__ */ ne(
     ct,
     {
       ...C,
@@ -700,16 +699,16 @@ function Lt({
             "data-oc-part": "handle"
           }
         ) : null,
-        /* @__PURE__ */ ae(
+        /* @__PURE__ */ ne(
           "div",
           {
             className: i.headerInner,
-            "data-oc-has-leading": x ? "true" : "false",
+            "data-oc-has-leading": T ? "true" : "false",
             "data-oc-part": "header-inner",
             children: [
-              x ? /* @__PURE__ */ s("div", { className: i.headerLeading, "data-oc-part": "header-leading", children: a }) : null,
+              T ? /* @__PURE__ */ s("div", { className: i.headerLeading, "data-oc-part": "header-leading", children: a }) : null,
               /* @__PURE__ */ s("div", { className: i.headerTitle, "data-oc-part": "header-title", children: t ? /* @__PURE__ */ s(O.Title, { children: t }) : n }),
-              /* @__PURE__ */ ae("div", { className: i.headerTrailing, "data-oc-part": "header-trailing", children: [
+              /* @__PURE__ */ ne("div", { className: i.headerTrailing, "data-oc-part": "header-trailing", children: [
                 d,
                 f ? /* @__PURE__ */ s(Oe, { label: w }) : null
               ] })
@@ -735,7 +734,7 @@ function zt({
   titleAsDialogTitle: m = !0,
   navigationProps: F,
   panelProps: l,
-  panelContentProps: x,
+  panelContentProps: T,
   ref: q,
   style: K,
   ...Q
@@ -744,7 +743,7 @@ function zt({
     canRenderHandle: Y,
     notifyPopupSnapLayoutChange: o,
     placement: L
-  } = X, { height: W, setNode: z } = Te(), u = at(), [v, re] = je({
+  } = X, { height: W, setNode: z } = xe(), u = at(), [v, ae] = je({
     value: a,
     defaultValue: d,
     onChange: w
@@ -752,7 +751,7 @@ function zt({
     v ? "open" : "closed"
   ), _ = `h${At(C) ? C : 2}`, {
     className: ue = "",
-    id: ie,
+    id: re,
     onClick: pe,
     ...j
   } = F ?? {}, {
@@ -760,16 +759,16 @@ function zt({
     id: b,
     role: D,
     ...G
-  } = l ?? {}, { className: E = "", ...ee } = x ?? {}, M = ie ?? `${u}-navigation`, p = b ?? `${u}-panel`, R = `${u}-dialog-title`, te = $e(t), A = N && Y, I = W > 0 ? {
+  } = l ?? {}, { className: E = "", ...ee } = T ?? {}, M = re ?? `${u}-navigation`, p = b ?? `${u}-panel`, R = `${u}-dialog-title`, te = $e(t), A = N && Y, I = W > 0 ? {
     ...K,
     "--oc-modal-navigation-block-size": `${W}px`
-  } : K, ce = k(
+  } : K, ie = k(
     (V) => {
       Z(V), L === "popup" && o();
     },
     [o, L]
   );
-  return /* @__PURE__ */ ae(
+  return /* @__PURE__ */ ne(
     "section",
     {
       ref: q,
@@ -796,7 +795,7 @@ function zt({
             "data-oc-part": "handle"
           }
         ) : null,
-        /* @__PURE__ */ s(_, { className: i.navigationHeading, "data-oc-part": "heading", children: /* @__PURE__ */ ae(
+        /* @__PURE__ */ s(_, { className: i.navigationHeading, "data-oc-part": "heading", children: /* @__PURE__ */ ne(
           "button",
           {
             ...j,
@@ -809,7 +808,7 @@ function zt({
             "aria-expanded": v,
             "aria-controls": p,
             onClick: (V) => {
-              pe?.(V), !(V.defaultPrevented || f) && re(!v);
+              pe?.(V), !(V.defaultPrevented || f) && ae(!v);
             },
             "data-oc-component": "modal-navigation",
             "data-oc-part": "navigation",
@@ -843,7 +842,7 @@ function zt({
             forceMount: h,
             intent: "expand",
             measureBlockSize: "rendered",
-            onMotionStateChange: ce,
+            onMotionStateChange: ie,
             contentProps: {
               className: i.navigationPanelFrame,
               "data-oc-part": "panel-inner"
@@ -902,11 +901,11 @@ function jt({
     },
     [w, C, m]
   );
-  return ne(() => {
+  return oe(() => {
     const l = N;
     if (!l || (m(l), typeof ResizeObserver > "u")) return;
-    const x = new ResizeObserver(() => m(l));
-    return x.observe(l), l.firstElementChild && x.observe(l.firstElementChild), () => x.disconnect();
+    const T = new ResizeObserver(() => m(l));
+    return T.observe(l), l.firstElementChild && T.observe(l.firstElementChild), () => T.disconnect();
   }, [N, m]), /* @__PURE__ */ s(
     Le,
     {

package/dist/components/Modal/modalScrollArbitration.js

@@ -126,6 +126,7 @@ export {
   _ as getModalScrollState,
   R as getPopupTouchDragDecision,
   m as getScrollableAncestor,
+  a as hasActiveTextSelection,
   d as isAtScrollBottom,
   f as isAtScrollTop,
   c as isScrollableElement,