@avenue-ticketing/ui 0.6.0 → 0.8.0

package/dist/react/table-view/index.js

@@ -203,6 +203,7 @@ Button.displayName = "Button";
 var DROPDOWN_PANEL_OPEN_EASING = "cubic-bezier(0,0.55,0.45,1)";
 var DROPDOWN_PANEL_CLOSE_EASING = "cubic-bezier(0.55,0,1,0.45)";
 var DROPDOWN_MENU_MIN_WIDTH_PX = 192;
+var DROPDOWN_FLIP_MIN_SPACE_PX = 100;
 var DROPDOWN_MOBILE_SHEET_MAX_PX = 1024;
 var DROPDOWN_MOBILE_SHEET_MOTION_MS = 175;
 var DROPDOWN_MOBILE_SHEET_ENTRY_EASING = "cubic-bezier(0.85, 0, 0.15, 1)";
@@ -250,6 +251,7 @@ var DROPDOWN_CONTENT_HIDDEN = {
 function computePos(trigger, menu, side, align, offset, pad) {
   const tr = trigger.getBoundingClientRect();
   const mr = menu.getBoundingClientRect();
+  const contentHeight = menu.scrollHeight;
   const vw = window.innerWidth;
   const vh = window.innerHeight;
   const sx = window.scrollX;
@@ -257,19 +259,19 @@ function computePos(trigger, menu, side, align, offset, pad) {
   let top = 0;
   let left = 0;
   let effectiveSide = side;
-  const calc = (s) => {
+  let maxHeight;
+  const placeVertical = (s, height) => {
+    if (s === "bottom") top = tr.bottom + sy + offset;
+    else top = tr.top + sy - height - offset;
+    if (align === "start") left = tr.left + sx;
+    else if (align === "end") left = tr.right + sx - mr.width;
+    else left = tr.left + sx + tr.width / 2 - mr.width / 2;
+  };
+  const calc = (s, height = contentHeight) => {
     switch (s) {
       case "bottom":
-        top = tr.bottom + sy + offset;
-        if (align === "start") left = tr.left + sx;
-        else if (align === "end") left = tr.right + sx - mr.width;
-        else left = tr.left + sx + tr.width / 2 - mr.width / 2;
-        break;
       case "top":
-        top = tr.top + sy - mr.height - offset;
-        if (align === "start") left = tr.left + sx;
-        else if (align === "end") left = tr.right + sx - mr.width;
-        else left = tr.left + sx + tr.width / 2 - mr.width / 2;
+        placeVertical(s, height);
         break;
       case "right":
         left = tr.right + sx + offset;
@@ -286,17 +288,20 @@ function computePos(trigger, menu, side, align, offset, pad) {
     }
   };
   calc(side);
-  if (side === "bottom" && top + mr.height > vh + sy - pad) {
-    const ft = tr.top + sy - mr.height - offset;
-    if (ft >= sy + pad) {
-      effectiveSide = "top";
-      top = ft;
+  const spaceBelow = Math.max(0, vh - pad - tr.bottom - offset);
+  const spaceAbove = Math.max(0, tr.top - offset - pad);
+  if (side === "bottom" || side === "top") {
+    const primarySpace = side === "bottom" ? spaceBelow : spaceAbove;
+    const alternateSpace = side === "bottom" ? spaceAbove : spaceBelow;
+    const alternateSide = side === "bottom" ? "top" : "bottom";
+    if (contentHeight > primarySpace) {
+      maxHeight = Math.min(contentHeight, primarySpace);
+      calc(side, maxHeight);
     }
-  } else if (side === "top" && top < sy + pad) {
-    const ft = tr.bottom + sy + offset;
-    if (ft + mr.height <= vh + sy - pad) {
-      effectiveSide = "bottom";
-      top = ft;
+    if (contentHeight > primarySpace && primarySpace < DROPDOWN_FLIP_MIN_SPACE_PX && alternateSpace > primarySpace) {
+      effectiveSide = alternateSide;
+      maxHeight = Math.min(contentHeight, alternateSpace);
+      calc(alternateSide, maxHeight);
     }
   } else if (side === "right" && left + mr.width > vw + sx - pad) {
     const fl = tr.left + sx - mr.width - offset;
@@ -311,9 +316,10 @@ function computePos(trigger, menu, side, align, offset, pad) {
       left = fl;
     }
   }
+  const layoutHeight = maxHeight ?? contentHeight;
   left = Math.max(sx + pad, Math.min(left, vw + sx - mr.width - pad));
-  top = Math.max(sy + pad, Math.min(top, vh + sy - mr.height - pad));
-  return { top, left, side: effectiveSide };
+  top = Math.max(sy + pad, Math.min(top, vh + sy - layoutHeight - pad));
+  return { top, left, side: effectiveSide, maxHeight };
 }
 function useIsMobile(breakpoint = 1025) {
   const [isMobile, setIsMobile] = useState(() => {
@@ -760,16 +766,18 @@ var DropdownContent = ({
         "aria-orientation": "vertical",
         tabIndex: -1,
         className: cn(
-          "bg-background border-primary/8 absolute z-50 overflow-hidden rounded-xl border py-1.5 outline-none",
+          "bg-background border-primary/8 absolute z-50 rounded-xl border py-1.5 outline-none",
           DROPDOWN_PANEL_SHADOW,
           DROPDOWN_PANEL_SCROLL,
-          className
+          className,
+          pos.maxHeight != null ? "overflow-y-auto" : "overflow-hidden"
         ),
         style: {
           position: "absolute",
           top: pos.top,
           left: pos.left,
           minWidth: resolvedMinW,
+          maxHeight: pos.maxHeight,
           transformOrigin: DROPDOWN_CONTENT_ORIGIN[pos.side],
           transform: isAnimating ? "none" : DROPDOWN_CONTENT_HIDDEN[pos.side],
           opacity: isAnimating ? 1 : 0,