@octaviaflow/core 3.0.18-beta.46 → 3.0.18-beta.48

package/dist/components/TimePicker/TimePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/TimePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,wBAAwB,EAI7B,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAcf,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACtB;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhD,KAAK,YAAY,GAAG,IAAI,CACtB,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,GAAG,UAAU,GAAG,cAAc,CACzC,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,YAAY;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAmBD,eAAO,MAAM,UAAU,4GAmgBrB,CAAC"}
+{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/TimePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,wBAAwB,EAI7B,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAcf,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACtB;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhD,KAAK,YAAY,GAAG,IAAI,CACtB,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,GAAG,UAAU,GAAG,cAAc,CACzC,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,YAAY;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAmBD,eAAO,MAAM,UAAU,4GAkhBrB,CAAC"}

package/dist/index.cjs

@@ -206,6 +206,7 @@ __export(src_exports, {
   breakpointMinWidth: () => breakpointMinWidth,
   cn: () => cn,
   codeToFlag: () => codeToFlag,
+  computeAnchoredPosition: () => computeAnchoredPosition,
   easeLinear: () => easeLinear,
   easeOutCubic: () => easeOutCubic,
   easeOutExpo: () => easeOutExpo,
@@ -11900,8 +11901,43 @@ var import_react_dom9 = require("react-dom");
 
 // src/utils/useAnchoredPopover.ts
 var import_react56 = require("react");
+var useIsomorphicLayoutEffect = typeof document !== "undefined" ? import_react56.useLayoutEffect : import_react56.useEffect;
+function computeAnchoredPosition({
+  anchor,
+  viewport,
+  popoverWidth,
+  gap,
+  margin,
+  preferredMinHeight
+}) {
+  const spaceBelow = viewport.height - anchor.bottom - gap - margin;
+  const spaceAbove = anchor.top - gap - margin;
+  const openUp = spaceBelow < preferredMinHeight && spaceAbove > spaceBelow;
+  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;
+  return {
+    ...openUp ? { bottom: viewport.height - anchor.top + gap } : { top: anchor.bottom + gap },
+    left,
+    width: anchor.width,
+    ...maxWidth !== void 0 ? { maxWidth } : {},
+    maxHeight,
+    direction: openUp ? "up" : "down"
+  };
+}
 function useAnchoredPopover(anchorRef, open, options = {}) {
-  const { gap = 4, margin = 8, preferredMinHeight = 200 } = options;
+  const { gap = 4, margin = 8, preferredMinHeight = 200, popoverRef } = options;
   const [pos, setPos] = (0, import_react56.useState)({
     top: -9999,
     left: -9999,
@@ -11913,19 +11949,24 @@ function useAnchoredPopover(anchorRef, open, options = {}) {
     const el = anchorRef.current;
     if (!el) return;
     const rect = el.getBoundingClientRect();
-    const viewportH = window.innerHeight;
-    const spaceBelow = viewportH - rect.bottom - gap - margin;
-    const spaceAbove = rect.top - gap - margin;
-    const openUp = spaceBelow < preferredMinHeight && spaceAbove > spaceBelow;
-    setPos({
-      ...openUp ? { bottom: viewportH - rect.top + gap } : { top: rect.bottom + gap },
-      left: rect.left,
-      width: rect.width,
-      maxHeight: Math.max(120, openUp ? spaceAbove : spaceBelow),
-      direction: openUp ? "up" : "down"
-    });
-  }, [anchorRef, gap, margin, preferredMinHeight]);
-  (0, import_react56.useEffect)(() => {
+    const popoverWidth = popoverRef?.current?.offsetWidth;
+    setPos(
+      computeAnchoredPosition({
+        anchor: {
+          top: rect.top,
+          bottom: rect.bottom,
+          left: rect.left,
+          width: rect.width
+        },
+        viewport: { width: window.innerWidth, height: window.innerHeight },
+        popoverWidth,
+        gap,
+        margin,
+        preferredMinHeight
+      })
+    );
+  }, [anchorRef, popoverRef, gap, margin, preferredMinHeight]);
+  useIsomorphicLayoutEffect(() => {
     if (!open) return;
     update();
     window.addEventListener("scroll", update, true);
@@ -11944,6 +11985,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
   };
@@ -11986,7 +12028,7 @@ var DatePicker = (0, import_react57.forwardRef)(
     const wrapRef = (0, import_react57.useRef)(null);
     const triggerRef = (0, import_react57.useRef)(null);
     const popoverRef = (0, import_react57.useRef)(null);
-    const popoverPos = useAnchoredPopover(triggerRef, open);
+    const popoverPos = useAnchoredPopover(triggerRef, open, { popoverRef });
     (0, import_react57.useImperativeHandle)(forwardedRef, () => triggerRef.current);
     const reactId = (0, import_react57.useId)();
     const baseId = id ?? `ods-dp-${reactId}`;
@@ -27089,7 +27131,7 @@ var TimePicker = (0, import_react139.forwardRef)(
     };
     const triggerRef = (0, import_react139.useRef)(null);
     const popoverRef = (0, import_react139.useRef)(null);
-    const popoverPos = useAnchoredPopover(triggerRef, open);
+    const popoverPos = useAnchoredPopover(triggerRef, open, { popoverRef });
     const hoursRef = (0, import_react139.useRef)(null);
     const minutesRef = (0, import_react139.useRef)(null);
     const secondsRef = (0, import_react139.useRef)(null);
@@ -27174,8 +27216,20 @@ var TimePicker = (0, import_react139.forwardRef)(
           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) => {
@@ -34729,6 +34783,7 @@ function applyVerticalLayout(nodes, edges) {
   breakpointMinWidth,
   cn,
   codeToFlag,
+  computeAnchoredPosition,
   easeLinear,
   easeOutCubic,
   easeOutExpo,