@dreamtree-org/twreact-ui 1.0.69 → 1.0.70

package/dist/index.js

@@ -4901,8 +4901,6 @@ var Table = function Table(_ref) {
     }
   }, "Next")))));
 };
-
-/* ---------------- ActionMenuPortal (updated for mobile) ---------------- */
 function ActionMenuPortal(_ref4) {
   var anchorElem = _ref4.anchorElem,
     anchorRow = _ref4.anchorRow,
@@ -4911,10 +4909,7 @@ function ActionMenuPortal(_ref4) {
     _ref4.onClose;
     var onAction = _ref4.onAction,
     menuRef = _ref4.menuRef;
-  var _useState29 = React.useState(0),
-    _useState30 = _slicedToArray(_useState29, 2),
-    setTick = _useState30[1];
-  var _useState31 = React.useState({
+  var _useState29 = React.useState({
       left: 0,
       top: 0,
       transformOrigin: "top right",
@@ -4922,11 +4917,15 @@ function ActionMenuPortal(_ref4) {
       width: 180,
       opacity: 0
     }),
-    _useState32 = _slicedToArray(_useState31, 2),
-    style = _useState32[0],
-    setStyle = _useState32[1];
+    _useState30 = _slicedToArray(_useState29, 2),
+    style = _useState30[0],
+    setStyle = _useState30[1];
   var menuWidth = 180;
   var maxMenuHeight = 320;
+  var margin = 8;
+  var minMenuHeight = 80;
+
+  // compute position using actual menu height (if available) and layout measurements
   var computePosition = function computePosition() {
     if (!anchorElem) return;
     var rect = anchorElem.getBoundingClientRect();
@@ -4934,52 +4933,95 @@ function ActionMenuPortal(_ref4) {
     var scrollX = window.scrollX || window.pageXOffset;
     var spaceBelow = window.innerHeight - rect.bottom;
     var spaceAbove = rect.top;
-    var top;
+
+    // allowed max height based on available space
+    var allowedMaxHeight = Math.min(maxMenuHeight, Math.max(minMenuHeight, Math.max(spaceBelow - margin, spaceAbove - margin)));
+
+    // choose placement by comparing actual available spaces
     var placement = "bottom";
-    var maxHeight = Math.min(maxMenuHeight, Math.max(80, spaceBelow - 16));
     if (spaceBelow < 160 && spaceAbove > spaceBelow) {
       placement = "top";
-      maxHeight = Math.min(maxMenuHeight, Math.max(80, spaceAbove - 16));
-      top = rect.top + scrollY - maxHeight - 8;
+      // when placing on top we should cap allowedMaxHeight by spaceAbove
+      allowedMaxHeight = Math.min(maxMenuHeight, Math.max(minMenuHeight, spaceAbove - margin));
     } else {
-      top = rect.bottom + scrollY + 8;
+      // placing bottom: cap by spaceBelow
+      allowedMaxHeight = Math.min(maxMenuHeight, Math.max(minMenuHeight, spaceBelow - margin));
     }
+
+    // measure the menu's content height if we can, and compute the actual menu height we'll use.
+    var measuredMenuHeight = allowedMaxHeight;
+    var menuEl = menuRef === null || menuRef === void 0 ? void 0 : menuRef.current;
+    if (menuEl) {
+      // scrollHeight is the content height; offsetHeight may reflect current rendered height.
+      var contentHeight = menuEl.scrollHeight || menuEl.offsetHeight || allowedMaxHeight;
+      // actual height will be min(contentHeight, allowedMaxHeight)
+      measuredMenuHeight = Math.min(contentHeight, allowedMaxHeight);
+    }
+
+    // compute top according to placement and measuredMenuHeight
+    var top;
+    if (placement === "top") {
+      // place menu so its bottom sits just above the anchor (rect.top - margin)
+      top = rect.top + scrollY - measuredMenuHeight - margin;
+    } else {
+      // place menu just below the anchor (rect.bottom + margin)
+      top = rect.bottom + scrollY + margin;
+    }
+
+    // clamp top to viewport (so it never goes off-screen)
+    var minTop = margin + scrollY;
+    var maxTop = window.innerHeight + scrollY - measuredMenuHeight - margin;
+    if (top < minTop) top = minTop;
+    if (top > maxTop) top = maxTop;
+
+    // compute left and clamp horizontally
     var left = rect.right + scrollX - menuWidth;
-    if (left < 8) left = 8;
-    if (left + menuWidth > window.innerWidth - 8) left = window.innerWidth - menuWidth - 8;
+    if (left < margin) left = margin;
+    if (left + menuWidth > window.innerWidth - margin) {
+      left = Math.max(margin, window.innerWidth - menuWidth - margin);
+    }
     var transformOrigin = placement === "bottom" ? "top right" : "bottom right";
+
+    // set style (opacity 1 to fade-in)
     setStyle({
       left: left,
       top: top,
       transformOrigin: transformOrigin,
-      maxHeight: maxHeight,
+      maxHeight: allowedMaxHeight,
       width: menuWidth,
       opacity: 1
     });
   };
-  React.useEffect(function () {
+
+  // useLayoutEffect so the position is measured & applied before paint
+  React.useLayoutEffect(function () {
+    // compute once after mount
     computePosition();
     var onScrollOrResize = function onScrollOrResize() {
-      computePosition();
-      setTick(function (t) {
-        return t + 1;
+      // using requestAnimationFrame to avoid layout thrash on fast scroll/resize
+      window.requestAnimationFrame(function () {
+        return computePosition();
       });
     };
     window.addEventListener("resize", onScrollOrResize);
+    // capture scrolls (true) so position updates even when scrolling ancestor elements
     window.addEventListener("scroll", onScrollOrResize, true);
     return function () {
       window.removeEventListener("resize", onScrollOrResize);
       window.removeEventListener("scroll", onScrollOrResize, true);
     };
-  }, [anchorElem]);
+    // Recompute when anchor element changes or actions change (content height may change).
+  }, [anchorElem, actions, menuRef]);
   return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
     ref: menuRef,
     style: {
+      position: "absolute",
       top: style.top,
       left: style.left,
       width: style.width,
       maxHeight: style.maxHeight,
-      transformOrigin: style.transformOrigin
+      transformOrigin: style.transformOrigin,
+      opacity: style.opacity
     },
     className: "absolute z-50 bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-y-auto transition-opacity duration-150 ease-out",
     onClick: function onClick(e) {
@@ -10370,7 +10412,12 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     currentMonth = _useState4[0],
     setCurrentMonth = _useState4[1];
   var datePickerRef = React.useRef(null);
+  var popupRef = React.useRef(null);
   var gridButtonRefs = React.useRef([]);
+  var _useState5 = React.useState({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    popupStyle = _useState6[0],
+    setPopupStyle = _useState6[1];
   React.useImperativeHandle(forwardedRef, function () {
     return datePickerRef.current;
   }, []);
@@ -10383,7 +10430,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   // Close on outside click
   React.useEffect(function () {
     var handleClickOutside = function handleClickOutside(e) {
-      if (datePickerRef.current && !datePickerRef.current.contains(e.target)) {
+      if (datePickerRef.current && !datePickerRef.current.contains(e.target) && popupRef.current && !popupRef.current.contains(e.target)) {
         setIsOpen(false);
       }
     };
@@ -10499,6 +10546,75 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
       if (idx >= 0) focusDayAtIndex(idx);
     }, 0);
   };
+
+  // compute popup position so it's aware of viewport edges (top/bottom/left/right)
+  var computePopupPosition = function computePopupPosition() {
+    var margin = 8;
+    var trigger = datePickerRef.current;
+    var popup = popupRef.current;
+    if (!trigger || !popup) return;
+    var triggerRect = trigger.getBoundingClientRect();
+    // measure popup by temporarily making it visible if hidden
+    var popupRect = popup.getBoundingClientRect();
+
+    // If the popup is not yet fully measured (width/height 0), try to read offsetWidth/Height
+    if (popupRect.width === 0 || popupRect.height === 0) {
+      popupRect = {
+        width: popup.offsetWidth || 240,
+        height: popup.offsetHeight || 300
+      };
+    }
+
+    // Decide vertical placement
+    var spaceBelow = window.innerHeight - triggerRect.bottom;
+    var spaceAbove = triggerRect.top;
+    var placeBelow = spaceBelow >= popupRect.height + margin;
+    if (!placeBelow && spaceAbove >= popupRect.height + margin) placeBelow = false;
+    // If neither side has full space, pick the side with more space
+    if (!placeBelow && spaceBelow < popupRect.height + margin && spaceAbove < popupRect.height + margin) {
+      placeBelow = spaceBelow >= spaceAbove;
+    }
+
+    // compute top coordinate (fixed positioning)
+    var top;
+    if (placeBelow) {
+      top = Math.min(window.innerHeight - margin - popupRect.height, triggerRect.bottom + margin);
+    } else {
+      top = Math.max(margin, triggerRect.top - popupRect.height - margin);
+    }
+
+    // Decide horizontal placement (try align left to trigger)
+    var left = triggerRect.left;
+    // If overflowing right, shift left
+    if (left + popupRect.width > window.innerWidth - margin) {
+      left = Math.max(margin, window.innerWidth - margin - popupRect.width);
+    }
+    // If overflowing left, clamp
+    if (left < margin) left = margin;
+    var transformOrigin = placeBelow ? "top left" : "bottom left";
+    setPopupStyle({
+      position: "fixed",
+      top: "".concat(Math.round(top), "px"),
+      left: "".concat(Math.round(left), "px"),
+      zIndex: 9999,
+      transformOrigin: transformOrigin
+    });
+  };
+
+  // recompute on open, on resize/scroll, and when popup content changes (currentMonth)
+  React.useLayoutEffect(function () {
+    if (!isOpen) return;
+    computePopupPosition();
+    var handleResize = function handleResize() {
+      return computePopupPosition();
+    };
+    window.addEventListener("resize", handleResize);
+    window.addEventListener("scroll", handleResize, true); // capture scrolling in ancestors
+    return function () {
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("scroll", handleResize, true);
+    };
+  }, [isOpen, currentMonth]);
   var header = /*#__PURE__*/React.createElement("div", {
     className: "mb-4 flex items-center justify-between"
   }, /*#__PURE__*/React.createElement("button", {
@@ -10523,9 +10639,11 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     className: "h-4 w-4"
   })));
   var calendarPopup = /*#__PURE__*/React.createElement("div", {
-    className: "absolute z-50 mt-1 w-80 rounded-md border border-gray-300 bg-white p-4 shadow-lg",
+    ref: popupRef,
+    className: "w-80 rounded-md border border-gray-300 bg-white p-4 shadow-lg",
     role: "dialog",
-    "aria-modal": "false"
+    "aria-modal": "false",
+    style: popupStyle
   }, header, /*#__PURE__*/React.createElement("div", {
     className: "mb-2 grid grid-cols-7 gap-1"
   }, Array.from({
@@ -11874,11 +11992,10 @@ function Slider(_ref6) {
 var _excluded$g = ["value", "onChange", "placeholder", "label", "error", "disabled", "required", "minDate", "maxDate", "className", "weekStartsOn", "portal", "displayFormat", "locale", "showClear", "closeOnSelect"];
 
 /*
-  Single-calendar DateRangePicker with hover-preview
-  - Enforces mandatory range selection: the component will NOT commit or show a selected range
-    until both start and end dates are chosen.
-  - Popup cannot be dismissed (via outside click, trigger toggle, or Escape) while only
-    a start date is selected. Use Clear to cancel the in-progress selection.
+  Single-calendar DateRangePicker with hover-preview and space-aware popup positioning
+  - Enforces mandatory range selection until both start and end are chosen.
+  - Popup flips above/below and clamps horizontally to avoid clipping.
+  - Popup won't close while only a start date is selected (Clear cancels in-progress selection).
 */
 
 var normalizeDate = function normalizeDate(d) {
@@ -11952,11 +12069,16 @@ var DateRangePicker = function DateRangePicker(_ref) {
     if (start) setCurrentMonth(start);
   }, [start, end]);
   var datePickerRef = React.useRef(null);
+  var popupRef = React.useRef(null);
+  var _useState1 = React.useState({}),
+    _useState10 = _slicedToArray(_useState1, 2),
+    popupStyle = _useState10[0],
+    setPopupStyle = _useState10[1];
 
   // Outside click: only close if there is NOT an in-progress single-date selection
   React.useEffect(function () {
     var handleClickOutside = function handleClickOutside(e) {
-      if (datePickerRef.current && !datePickerRef.current.contains(e.target)) {
+      if (datePickerRef.current && !datePickerRef.current.contains(e.target) && (!popupRef.current || !popupRef.current.contains(e.target))) {
         // If user has selected a start but no end, prevent closing to force range selection
         if (localStart && !localEnd) {
           return;
@@ -12112,10 +12234,82 @@ var DateRangePicker = function DateRangePicker(_ref) {
   }, /*#__PURE__*/React.createElement(ChevronRight, {
     className: "h-4 w-4"
   })));
+
+  // compute popup position so it's aware of viewport edges (top/bottom/left/right)
+  var computePopupPosition = function computePopupPosition() {
+    var margin = 8;
+    var trigger = datePickerRef.current;
+    var popup = popupRef.current;
+    if (!trigger || !popup) return;
+    var triggerRect = trigger.getBoundingClientRect();
+    // measure popup by temporarily making it visible if hidden
+    var popupRect = popup.getBoundingClientRect();
+
+    // If the popup is not yet fully measured (width/height 0), try to read offsetWidth/Height
+    if (popupRect.width === 0 || popupRect.height === 0) {
+      popupRect = {
+        width: popup.offsetWidth || 320,
+        height: popup.offsetHeight || 300
+      };
+    }
+
+    // Decide vertical placement
+    var spaceBelow = window.innerHeight - triggerRect.bottom;
+    var spaceAbove = triggerRect.top;
+    var placeBelow = spaceBelow >= popupRect.height + margin;
+    if (!placeBelow && spaceAbove >= popupRect.height + margin) placeBelow = false;
+    // If neither side has full space, pick the side with more space
+    if (!placeBelow && spaceBelow < popupRect.height + margin && spaceAbove < popupRect.height + margin) {
+      placeBelow = spaceBelow >= spaceAbove;
+    }
+
+    // compute top coordinate (fixed positioning)
+    var top;
+    if (placeBelow) {
+      top = Math.min(window.innerHeight - margin - popupRect.height, triggerRect.bottom + margin);
+    } else {
+      top = Math.max(margin, triggerRect.top - popupRect.height - margin);
+    }
+
+    // Decide horizontal placement (try align left to trigger)
+    var left = triggerRect.left;
+    // If overflowing right, shift left
+    if (left + popupRect.width > window.innerWidth - margin) {
+      left = Math.max(margin, window.innerWidth - margin - popupRect.width);
+    }
+    // If overflowing left, clamp
+    if (left < margin) left = margin;
+    var transformOrigin = placeBelow ? "top left" : "bottom left";
+    setPopupStyle({
+      position: "fixed",
+      top: "".concat(Math.round(top), "px"),
+      left: "".concat(Math.round(left), "px"),
+      zIndex: 9999,
+      transformOrigin: transformOrigin
+    });
+  };
+
+  // recompute on open, on resize/scroll, and when popup content changes (currentMonth)
+  React.useLayoutEffect(function () {
+    if (!isOpen) return;
+    // compute on next frame to ensure popup ref exists in DOM (especially with portal)
+    computePopupPosition();
+    var handleResize = function handleResize() {
+      return computePopupPosition();
+    };
+    window.addEventListener("resize", handleResize);
+    window.addEventListener("scroll", handleResize, true); // capture scrolling in ancestors
+    return function () {
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("scroll", handleResize, true);
+    };
+  }, [isOpen, currentMonth]);
   var calendarPopup = /*#__PURE__*/React.createElement("div", {
-    className: "absolute z-50 mt-1 w-80 rounded-md border border-gray-300 bg-white p-4 shadow-lg",
+    ref: popupRef,
+    className: "w-80 rounded-md border border-gray-300 bg-white p-4 shadow-lg",
     role: "dialog",
-    "aria-modal": "false"
+    "aria-modal": "false",
+    style: popupStyle
   }, header, /*#__PURE__*/React.createElement("div", {
     className: "mb-2 grid grid-cols-7 gap-1"
   }, Array.from({