@avenue-ticketing/ui 0.5.0 → 0.7.0

package/dist/react/table-view/column-menu.js

@@ -82,6 +82,22 @@ function resolveDropdownMobileSheet(mobileOptions) {
   };
 }
 var DROPDOWN_SUB_CONTENT_ATTR = "data-dropdown-sub-content";
+var DROPDOWN_PANEL_SHADOW = "shadow-[0_12px_32px_-8px_rgba(0,0,0,0.18),0_2px_6px_-2px_rgba(0,0,0,0.06)] dark:shadow-[0_12px_32px_-8px_rgba(0,0,0,0.55),0_2px_6px_-2px_rgba(0,0,0,0.35)]";
+var DROPDOWN_PANEL_SCROLL = "[&_*]:[scrollbar-width:none] [&_*::-webkit-scrollbar]:hidden [&_*]:overscroll-contain";
+function preventMenuWheelChain(menu, e) {
+  let el = e.target;
+  while (el && menu.contains(el)) {
+    const oy = getComputedStyle(el).overflowY;
+    if ((oy === "auto" || oy === "scroll") && el.scrollHeight > el.clientHeight) {
+      const atTop = el.scrollTop <= 0;
+      const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight;
+      if (e.deltaY < 0 && !atTop || e.deltaY > 0 && !atBottom) return;
+      break;
+    }
+    el = el.parentElement;
+  }
+  e.preventDefault();
+}
 var DROPDOWN_SHEET_MENU_TEXT = "max-[1024px]:text-base";
 var DROPDOWN_SHEET_MENU_SHORTCUT = "max-[1024px]:text-sm";
 var DROPDOWN_CONTENT_ORIGIN = {
@@ -165,10 +181,12 @@ function computePos(trigger, menu, side, align, offset, pad) {
   return { top, left, side: effectiveSide };
 }
 function useIsMobile(breakpoint = 1025) {
-  const [isMobile, setIsMobile] = useState(false);
+  const [isMobile, setIsMobile] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(`(max-width: ${breakpoint - 1}px)`).matches;
+  });
   useEffect(() => {
     const mq = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
-    setIsMobile(mq.matches);
     const handler = (e) => setIsMobile(e.matches);
     mq.addEventListener("change", handler);
     return () => mq.removeEventListener("change", handler);
@@ -313,6 +331,7 @@ function DropdownMobileBottomSheetPortal({
   onRequestClose,
   menuRef,
   portalZClassName = "z-50",
+  isSubPortal = false,
   children,
   className,
   style,
@@ -324,6 +343,7 @@ function DropdownMobileBottomSheetPortal({
     /* @__PURE__ */ jsxs(
       "div",
       {
+        ...isSubPortal ? { [DROPDOWN_SUB_CONTENT_ATTR]: "" } : {},
         className: cn(
           "fixed inset-0 flex items-end justify-center p-0",
           portalZClassName
@@ -350,8 +370,9 @@ function DropdownMobileBottomSheetPortal({
               ...panelProps,
               ref: menuRef,
               className: cn(
-                "bg-background border-primary/10 relative z-10 flex w-full max-h-[min(90dvh,calc(100dvh-env(safe-area-inset-bottom,0px)))] flex-col overflow-hidden shadow-2xl outline-none",
+                "bg-background border-primary/8 relative z-10 flex w-full max-h-[min(90dvh,calc(100dvh-env(safe-area-inset-bottom,0px)))] flex-col overflow-hidden shadow-2xl outline-none",
                 "rounded-t-2xl rounded-b-none border-x-0 border-b-0 border-t",
+                DROPDOWN_PANEL_SCROLL,
                 sheetExtraClassName,
                 className
               ),
@@ -428,25 +449,25 @@ var DropdownContent = ({
   const [pos, setPos] = useState({ top: -9999, left: -9999, side });
   const [triggerW, setTriggerW] = useState(0);
   const menuRef = useRef(null);
-  const resolvedMobile = useMemo(
-    () => resolveDropdownMobileSheet(mobileOptions),
-    [mobileOptions]
-  );
-  const slideOffsetPx = useMemo(
-    () => slideEntranceOffsetPxProp ?? DROPDOWN_MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_DEFAULT_PX,
-    [slideEntranceOffsetPxProp]
-  );
-  const closeDuration = isMobile && resolvedMobile.sheet ? DROPDOWN_MOBILE_SHEET_MOTION_MS : duration;
-  const closeMenu = useCallback(() => setOpen(false), [setOpen]);
+  const resolvedMobile = resolveDropdownMobileSheet(mobileOptions);
+  const isMobileSheet = isMobile && resolvedMobile.sheet;
+  const slideOffsetPx = slideEntranceOffsetPxProp ?? DROPDOWN_MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_DEFAULT_PX;
   useEffect(() => {
     if (open) {
       setShouldRender(true);
-    } else {
-      setIsAnimating(false);
-      const timer = setTimeout(() => setShouldRender(false), closeDuration);
-      return () => clearTimeout(timer);
+      return;
+    }
+    if (!isMobileSheet) {
+      setShouldRender(false);
+      return;
     }
-  }, [open, closeDuration]);
+    setIsAnimating(false);
+    const t = setTimeout(
+      () => setShouldRender(false),
+      DROPDOWN_MOBILE_SHEET_MOTION_MS
+    );
+    return () => clearTimeout(t);
+  }, [open, isMobileSheet]);
   useEffect(() => {
     if (!shouldRender || !open) return;
     let raf2 = 0;
@@ -476,12 +497,27 @@ var DropdownContent = ({
     };
     update();
     window.addEventListener("resize", update);
-    window.addEventListener("scroll", update, true);
     return () => {
       window.removeEventListener("resize", update);
-      window.removeEventListener("scroll", update, true);
     };
   }, [shouldRender, side, align, offset, viewportPadding]);
+  useEffect(() => {
+    if (!open || isMobileSheet) return;
+    const isInsideMenu = (t) => t instanceof Node && (!!menuRef.current?.contains(t) || !!triggerRef.current?.contains(t) || t instanceof Element && !!t.closest(`[${DROPDOWN_SUB_CONTENT_ATTR}]`));
+    const onScroll = (e) => {
+      if (!isInsideMenu(e.target)) setOpen(false);
+    };
+    window.addEventListener("scroll", onScroll, true);
+    return () => window.removeEventListener("scroll", onScroll, true);
+  }, [open, isMobileSheet, setOpen, triggerRef]);
+  useEffect(() => {
+    if (!shouldRender || isMobileSheet) return;
+    const menu = menuRef.current;
+    if (!menu) return;
+    const onWheel = (e) => preventMenuWheelChain(menu, e);
+    menu.addEventListener("wheel", onWheel, { passive: false });
+    return () => menu.removeEventListener("wheel", onWheel);
+  }, [shouldRender, isMobileSheet]);
   useEffect(() => {
     if (isAnimating && menuRef.current) {
       menuRef.current.focus();
@@ -547,15 +583,14 @@ var DropdownContent = ({
     return () => window.removeEventListener("keydown", handler);
   }, [open, closeOnEscape, loop, setOpen, triggerRef]);
   useEffect(() => {
-    if (open && isMobile && resolvedMobile.sheet) {
-      document.body.style.overflow = "hidden";
-    }
+    if (!open || !isMobileSheet) return;
+    document.body.style.overflow = "hidden";
     return () => {
       document.body.style.overflow = "";
     };
-  }, [open, isMobile, resolvedMobile.sheet]);
+  }, [open, isMobileSheet]);
   if (!shouldRender || typeof document === "undefined") return null;
-  if (isMobile && resolvedMobile.sheet) {
+  if (isMobileSheet) {
     return /* @__PURE__ */ jsx(
       DropdownMobileBottomSheetPortal,
       {
@@ -567,7 +602,7 @@ var DropdownContent = ({
         sheetTitle: resolvedMobile.title,
         sheetExtraClassName: resolvedMobile.sheetExtraClassName,
         contentClassName: resolvedMobile.contentClassName,
-        onRequestClose: closeMenu,
+        onRequestClose: () => setOpen(false),
         menuRef,
         portalZClassName: "z-50",
         className,
@@ -590,7 +625,9 @@ var DropdownContent = ({
         "aria-orientation": "vertical",
         tabIndex: -1,
         className: cn(
-          "bg-background border-primary/10 absolute z-50 overflow-hidden rounded-xl border py-1.5 shadow-xl outline-none",
+          "bg-background border-primary/8 absolute z-50 overflow-hidden rounded-xl border py-1.5 outline-none",
+          DROPDOWN_PANEL_SHADOW,
+          DROPDOWN_PANEL_SCROLL,
           className
         ),
         style: {
@@ -666,7 +703,7 @@ var DropdownItem = ({
       ),
       children: [
         icon && /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center", children: icon }),
-        /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children }),
         shortcut ? /* @__PURE__ */ jsx(
           "span",
           {