@dreamtree-org/twreact-ui 1.0.69 → 1.0.71

package/dist/index.js

@@ -3883,7 +3883,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   }, error));
 });
 
-var _excluded$k = ["data", "columns", "sortable", "filterable", "selectable", "pagination", "pageSize", "onSort", "onFilter", "onFetch", "onFilterChange", "onSelectionChange", "onRowClick", "hasDetails", "DetailsComponent", "className", "withAction", "onAction", "actions", "showSerial", "cellClass", "rowClass", "globalSearch", "limitOptions", "showLimitSelector", "onLimitChange", "showReloadButton", "renderReloadButton", "onReload", "stripedRows", "stripedColors", "responsiveBreakpoint"];
+var _excluded$k = ["data", "columns", "sortable", "filterable", "selectable", "pagination", "pageSize", "onSort", "onFilter", "onFetch", "onFilterChange", "onSelectionChange", "onRowClick", "hasDetails", "DetailsComponent", "className", "withAction", "onAction", "actions", "showSerial", "cellClass", "rowClass", "globalSearch", "limitOptions", "showLimitSelector", "onLimitChange", "showReloadButton", "renderReloadButton", "onReload", "stripedRows", "stripedColors", "responsiveBreakpoint", "serverSide", "totalRecords", "pageNumber", "onPageChange"];
 function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Table = function Table(_ref) {
@@ -3937,7 +3937,13 @@ var Table = function Table(_ref) {
     stripedColors = _ref$stripedColors === void 0 ? ["#ffffff", "#f7fafc"] : _ref$stripedColors,
     _ref$responsiveBreakp = _ref.responsiveBreakpoint,
     responsiveBreakpoint = _ref$responsiveBreakp === void 0 ? 768 : _ref$responsiveBreakp,
-    props = _objectWithoutProperties$1(_ref, _excluded$k);
+    _ref$serverSide = _ref.serverSide,
+    serverSide = _ref$serverSide === void 0 ? false : _ref$serverSide,
+    _ref$totalRecords = _ref.totalRecords,
+    totalRecords = _ref$totalRecords === void 0 ? 0 : _ref$totalRecords,
+    pageNumber = _ref.pageNumber;
+    _ref.onPageChange;
+    var props = _objectWithoutProperties$1(_ref, _excluded$k);
   // State for responsive view
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -3998,7 +4004,7 @@ var Table = function Table(_ref) {
     _useState16 = _slicedToArray(_useState15, 2),
     expandedRows = _useState16[0],
     setExpandedRows = _useState16[1];
-  var _useState17 = React.useState(1),
+  var _useState17 = React.useState(typeof pageNumber === "number" ? pageNumber : 1),
     _useState18 = _slicedToArray(_useState17, 2),
     currentPage = _useState18[0],
     setCurrentPage = _useState18[1];
@@ -4028,6 +4034,14 @@ var Table = function Table(_ref) {
     openActionKey = _useState28[0],
     setOpenActionKey = _useState28[1];
   var openRef = React.useRef(null);
+  React.useEffect(function () {
+    if (typeof pageNumber === "number" && pageNumber !== currentPage) {
+      setCurrentPage(pageNumber);
+    }
+  }, [pageNumber]);
+  React.useEffect(function () {
+    setLimit(pageSize);
+  }, [pageSize]);
 
   // Check if mobile view
   React.useEffect(function () {
@@ -4047,9 +4061,6 @@ var Table = function Table(_ref) {
   var isValidList = function isValidList(d) {
     return Array.isArray(d);
   };
-  var setDataForExternal = function setDataForExternal(newData) {
-    if (isValidList(newData)) setTableData(newData);else setTableData([]);
-  };
 
   // Close column menu when clicking outside
   React.useEffect(function () {
@@ -4146,70 +4157,42 @@ var Table = function Table(_ref) {
 
   // Sorting
   var sortedData = React.useMemo(function () {
-    if (!sortConfig.key) return tableData;
+    if (serverSide || !sortConfig.key) return tableData;
     var key = sortConfig.key,
       direction = sortConfig.direction;
     return _toConsumableArray$1(tableData).sort(function (a, b) {
-      var aValue = a === null || a === void 0 ? void 0 : a[key];
-      var bValue = b === null || b === void 0 ? void 0 : b[key];
-      if (aValue == null && bValue == null) return 0;
-      if (aValue == null) return direction === "asc" ? -1 : 1;
-      if (bValue == null) return direction === "asc" ? 1 : -1;
-      if (typeof aValue === "number" && typeof bValue === "number") {
-        return direction === "asc" ? aValue - bValue : bValue - aValue;
-      }
-      var aStr = String(aValue).toLowerCase();
-      var bStr = String(bValue).toLowerCase();
-      if (aStr < bStr) return direction === "asc" ? -1 : 1;
-      if (aStr > bStr) return direction === "asc" ? 1 : -1;
-      return 0;
+      var av = a === null || a === void 0 ? void 0 : a[key];
+      var bv = b === null || b === void 0 ? void 0 : b[key];
+      if (av == null || bv == null) return 0;
+      if (typeof av === "number") return direction === "asc" ? av - bv : bv - av;
+      return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
     });
-  }, [tableData, sortConfig]);
+  }, [tableData, sortConfig, serverSide]);
 
   // Filtering
   var filteredData = React.useMemo(function () {
-    if (!filterable || Object.keys(filters).length === 0) return sortedData;
-    var globalQuery = String(filters.global || "").trim().toLowerCase();
+    if (serverSide || !filterable || !Object.keys(filters).length) return sortedData;
+    var q = (filters.global || "").toLowerCase();
     return sortedData.filter(function (row) {
-      // Per-column filters
-      var perColumnOk = Object.entries(filters).every(function (_ref2) {
-        var _ref3 = _slicedToArray(_ref2, 2),
-          key = _ref3[0],
-          value = _ref3[1];
-        if (key === "global") return true;
-        if (!value) return true;
-        var cell = row === null || row === void 0 ? void 0 : row[key];
-        if (cell == null) return false;
-        return String(cell).toLowerCase().includes(String(value).toLowerCase());
+      return Object.values(row || {}).some(function (v) {
+        return String(v).toLowerCase().includes(q);
       });
-      if (!perColumnOk) return false;
-
-      // Global filter
-      if (globalQuery) {
-        var matchesVisible = visibleColumns.some(function (col) {
-          var v = row === null || row === void 0 ? void 0 : row[col.key];
-          if (v == null) return false;
-          return String(v).toLowerCase().includes(globalQuery);
-        });
-        if (matchesVisible) return true;
-        return Object.values(row || {}).some(function (v) {
-          return v != null ? String(v).toLowerCase().includes(globalQuery) : false;
-        });
-      }
-      return true;
     });
-  }, [sortedData, filters, filterable, visibleColumns]);
-
+  }, [sortedData, filters, filterable, serverSide]);
   // Pagination indices
   var startIndex = pagination ? (currentPage - 1) * limit : 0;
   var endIndex = pagination ? startIndex + limit : filteredData.length;
 
   // Paginated view
   var paginatedData = React.useMemo(function () {
-    if (!pagination) return filteredData;
-    return filteredData.slice(startIndex, endIndex);
-  }, [filteredData, startIndex, endIndex, pagination]);
-  var totalPages = Math.max(1, Math.ceil(filteredData.length / limit));
+    if (!pagination || serverSide) return filteredData;
+    var start = (currentPage - 1) * limit;
+    return filteredData.slice(start, start + limit);
+  }, [filteredData, pagination, serverSide, currentPage, limit]);
+  var totalPages = React.useMemo(function () {
+    if (!pagination) return 1;
+    return serverSide ? Math.max(1, Math.ceil((totalRecords || 0) / limit)) : Math.max(1, Math.ceil(filteredData.length / limit));
+  }, [pagination, serverSide, totalRecords, filteredData.length, limit]);
 
   // Sorting handler
   var handleSort = function handleSort(key) {
@@ -4324,17 +4307,19 @@ var Table = function Table(_ref) {
   React.useEffect(function () {
     if (!onFetch) return;
     onFetch({
-      setData: setDataForExternal,
-      filters: filters,
+      setData: function setData(rows) {
+        return setTableData(Array.isArray(rows) ? rows : []);
+      },
       setLoading: setLoading,
-      pagination: {
-        currentPage: currentPage,
-        limit: limit,
-        totalPages: totalPages,
-        nextRecords: paginatedData
-      }
+      filters: filters,
+      page: currentPage,
+      limit: limit,
+      sort: sortConfig
     });
-  }, [filters, currentPage, limit]);
+  }, [onFetch, filters, currentPage, limit, sortConfig]);
+  React.useEffect(function () {
+    if (!serverSide) setTableData(data);
+  }, [data, serverSide]);
   React.useEffect(function () {
     if (!onFetch && isValidList(data)) setTableData(data);
   }, [data, onFetch]);
@@ -4352,13 +4337,11 @@ var Table = function Table(_ref) {
       applyGlobalSearch();
     }
   };
-  React.useEffect(function () {
-    setLimit(pageSize);
-  }, [pageSize]);
   var handleLimitChange = function handleLimitChange(nextLimit) {
     var parsed = Number(nextLimit);
     if (!Number.isFinite(parsed) || parsed <= 0) return;
     setLimit(parsed);
+    setCurrentPage(1);
     onLimitChange === null || onLimitChange === void 0 || onLimitChange(parsed);
   };
 
@@ -4701,7 +4684,7 @@ var Table = function Table(_ref) {
     }, /*#__PURE__*/React.createElement("input", {
       type: "text",
       placeholder: "Filter ".concat(column.label),
-      className: "w-full rounded-md border border-gray-300 px-3 py-1.5 text-sm",
+      className: "w-full rounded-md border border-gray-300 px-3 py-1.5 text-sm font-normal",
       value: filters[column.key] || "",
       onChange: function onChange(e) {
         return handleFilter(column.key, e.target.value);
@@ -4901,20 +4884,15 @@ var Table = function Table(_ref) {
     }
   }, "Next")))));
 };
-
-/* ---------------- ActionMenuPortal (updated for mobile) ---------------- */
-function ActionMenuPortal(_ref4) {
-  var anchorElem = _ref4.anchorElem,
-    anchorRow = _ref4.anchorRow,
-    _ref4$actions = _ref4.actions,
-    actions = _ref4$actions === void 0 ? [] : _ref4$actions;
-    _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({
+function ActionMenuPortal(_ref2) {
+  var anchorElem = _ref2.anchorElem,
+    anchorRow = _ref2.anchorRow,
+    _ref2$actions = _ref2.actions,
+    actions = _ref2$actions === void 0 ? [] : _ref2$actions;
+    _ref2.onClose;
+    var onAction = _ref2.onAction,
+    menuRef = _ref2.menuRef;
+  var _useState29 = React.useState({
       left: 0,
       top: 0,
       transformOrigin: "top right",
@@ -4922,11 +4900,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 +4916,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 +10395,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 +10413,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 +10529,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 +10622,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 +11975,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 +12052,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 +12217,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({