@octaviaflow/core 3.0.18-beta.47 → 3.0.18-beta.49

package/dist/index.js

@@ -11885,8 +11885,10 @@ import { createPortal as createPortal9 } from "react-dom";
 import {
   useCallback as useCallback19,
   useEffect as useEffect17,
+  useLayoutEffect as useLayoutEffect6,
   useState as useState21
 } from "react";
+var useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect6 : useEffect17;
 function computeAnchoredPosition({
   anchor,
   viewport,
@@ -11898,8 +11900,17 @@ function computeAnchoredPosition({
   const spaceBelow = viewport.height - anchor.bottom - gap - margin;
   const spaceAbove = anchor.top - gap - margin;
   const openUp = spaceBelow < preferredMinHeight && spaceAbove > spaceBelow;
-  const popW = popoverWidth && popoverWidth > 0 ? popoverWidth : anchor.width;
-  const maxLeft = viewport.width - popW - margin;
+  const maxHeight = Math.max(0, openUp ? spaceAbove : spaceBelow);
+  const measured = popoverWidth && popoverWidth > 0 ? popoverWidth : 0;
+  const renderW = Math.max(measured, anchor.width);
+  const maxAvailW = viewport.width - 2 * margin;
+  let effectiveW = renderW;
+  let maxWidth;
+  if (renderW > maxAvailW) {
+    effectiveW = maxAvailW;
+    maxWidth = maxAvailW;
+  }
+  const maxLeft = viewport.width - effectiveW - margin;
   let left = anchor.left;
   if (left > maxLeft) left = maxLeft;
   if (left < margin) left = margin;
@@ -11907,7 +11918,8 @@ function computeAnchoredPosition({
     ...openUp ? { bottom: viewport.height - anchor.top + gap } : { top: anchor.bottom + gap },
     left,
     width: anchor.width,
-    maxHeight: Math.max(120, openUp ? spaceAbove : spaceBelow),
+    ...maxWidth !== void 0 ? { maxWidth } : {},
+    maxHeight,
     direction: openUp ? "up" : "down"
   };
 }
@@ -11941,7 +11953,7 @@ function useAnchoredPopover(anchorRef, open, options = {}) {
       })
     );
   }, [anchorRef, popoverRef, gap, margin, preferredMinHeight]);
-  useEffect17(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!open) return;
     update();
     window.addEventListener("scroll", update, true);
@@ -11960,6 +11972,7 @@ function anchoredPopoverStyle(pos, extra) {
     ...pos.bottom !== void 0 ? { bottom: pos.bottom } : {},
     left: pos.left,
     minWidth: pos.width,
+    ...pos.maxWidth !== void 0 ? { maxWidth: pos.maxWidth } : {},
     maxHeight: pos.maxHeight,
     ...extra
   };
@@ -15944,7 +15957,7 @@ var Heatmap = forwardRef48(
 Heatmap.displayName = "Heatmap";
 
 // src/components/HoverCard/HoverCard.tsx
-import { useCallback as useCallback25, useEffect as useEffect25, useLayoutEffect as useLayoutEffect6, useRef as useRef29, useState as useState30 } from "react";
+import { useCallback as useCallback25, useEffect as useEffect25, useLayoutEffect as useLayoutEffect7, useRef as useRef29, useState as useState30 } from "react";
 import { createPortal as createPortal11 } from "react-dom";
 import { Fragment as Fragment25, jsx as jsx59, jsxs as jsxs56 } from "react/jsx-runtime";
 function computePosition3(rect, panelRect, placement, offset) {
@@ -16001,7 +16014,7 @@ function HoverCard({
     const panelRect = panelRef.current.getBoundingClientRect();
     setCoords(computePosition3(trigRect, panelRect, placement, offset));
   }, [placement, offset]);
-  useLayoutEffect6(() => {
+  useLayoutEffect7(() => {
     if (!open) return;
     reposition();
     const id = requestAnimationFrame(reposition);
@@ -18262,7 +18275,7 @@ import {
   useCallback as useCallback27,
   useEffect as useEffect29,
   useId as useId35,
-  useLayoutEffect as useLayoutEffect7,
+  useLayoutEffect as useLayoutEffect8,
   useMemo as useMemo22,
   useRef as useRef33,
   useState as useState34
@@ -18389,7 +18402,7 @@ var MultiSelect = forwardRef60(
     useEffect29(() => setActiveIdx(0), [query, open]);
     const [fitCount, setFitCount] = useState34(selectedValues.length);
     const [tick, setTick] = useState34(0);
-    useLayoutEffect7(() => {
+    useLayoutEffect8(() => {
       if (maxVisibleTags !== void 0) {
         setFitCount(Math.min(selectedValues.length, maxVisibleTags));
         return;
@@ -20647,7 +20660,7 @@ var PipelineCard = forwardRef66(
 PipelineCard.displayName = "PipelineCard";
 
 // src/components/Popover/Popover.tsx
-import { useCallback as useCallback32, useEffect as useEffect31, useLayoutEffect as useLayoutEffect8, useRef as useRef36, useState as useState38 } from "react";
+import { useCallback as useCallback32, useEffect as useEffect31, useLayoutEffect as useLayoutEffect9, useRef as useRef36, useState as useState38 } from "react";
 import { createPortal as createPortal13 } from "react-dom";
 import { Fragment as Fragment34, jsx as jsx78, jsxs as jsxs76 } from "react/jsx-runtime";
 function computePosition4(rect, popRect, placement, offset) {
@@ -20697,7 +20710,7 @@ function Popover({
     const popRect = popRef.current.getBoundingClientRect();
     setCoords(computePosition4(trigRect, popRect, placement, offset));
   }, [placement, offset]);
-  useLayoutEffect8(() => {
+  useLayoutEffect9(() => {
     if (!open) return;
     reposition();
     const id = requestAnimationFrame(reposition);
@@ -22329,7 +22342,7 @@ import {
   forwardRef as forwardRef78,
   useCallback as useCallback34,
   useEffect as useEffect33,
-  useLayoutEffect as useLayoutEffect9,
+  useLayoutEffect as useLayoutEffect10,
   useRef as useRef40,
   useState as useState41
 } from "react";
@@ -22373,7 +22386,7 @@ var Resizable = forwardRef78(
       if (typeof ref === "function") ref(node);
       else if (ref) ref.current = node;
     };
-    useLayoutEffect9(() => {
+    useLayoutEffect10(() => {
       const el = wrapRef.current;
       if (!el) return;
       const t = direction === "horizontal" ? el.offsetWidth : el.offsetHeight;
@@ -24193,7 +24206,7 @@ import {
   forwardRef as forwardRef86,
   useCallback as useCallback37,
   useEffect as useEffect37,
-  useLayoutEffect as useLayoutEffect10,
+  useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo25,
   useState as useState44
 } from "react";
@@ -24235,7 +24248,7 @@ var Spotlight = forwardRef86(
         height: window.innerHeight
       });
     }, [open, target]);
-    useLayoutEffect10(() => {
+    useLayoutEffect11(() => {
       measure();
     }, [measure]);
     useEffect37(() => {
@@ -27232,8 +27245,20 @@ var TimePicker = forwardRef98(
           setActiveSeg(null);
         }
       };
+      const onKey = (e) => {
+        if (e.key === "Escape") {
+          flushDraft();
+          setOpen(false);
+          setActiveSeg(null);
+          triggerRef.current?.focus();
+        }
+      };
       document.addEventListener("mousedown", onDoc);
-      return () => document.removeEventListener("mousedown", onDoc);
+      document.addEventListener("keydown", onKey);
+      return () => {
+        document.removeEventListener("mousedown", onDoc);
+        document.removeEventListener("keydown", onKey);
+      };
     }, [open, flushDraft]);
     const segOrder = () => showSeconds ? ["hours", "minutes", "seconds"] : ["hours", "minutes"];
     const handleSegKey = (seg) => (e) => {