@expcat/tigercat-react 2.0.0-rc.2 → 2.0.4

package/dist/{chunk-N6JNLJIN.mjs → chunk-BOGOQ44C.mjs}

@@ -1,6 +1,6 @@
 import {
   Select
-} from "./chunk-PAN256RW.mjs";
+} from "./chunk-KVCI2346.mjs";
 import {
   Radio
 } from "./chunk-IIWUQK2P.mjs";
@@ -1202,6 +1202,7 @@ function Table({
     [autoVirtual, dataSource.length, virtual, virtualThreshold]
   );
   const effectiveVirtual = virtualRecommendation.enabled;
+  const shouldObserveGeometry = effectiveVirtual || columnLockable || ctx.displayColumns.some((column) => column.fixed === "left" || column.fixed === "right");
   const [virtualScrollTop, setVirtualScrollTop] = useState2(0);
   const virtualWindow = useMemo2(
     () => effectiveVirtual ? getTableVirtualWindow(
@@ -1224,6 +1225,9 @@ function Table({
     } : void 0;
   }, [effectiveVirtual, maxHeight, virtualHeight]);
   useEffect2(() => {
+    if (!shouldObserveGeometry) {
+      return void 0;
+    }
     const wrapper = wrapperRef.current;
     if (!wrapper) {
       return void 0;
@@ -1240,7 +1244,7 @@ function Table({
     });
     controller.observe(wrapper, tableRef.current);
     return () => controller.disconnect();
-  }, [ctx.displayColumns.length, ctx.paginatedData.length]);
+  }, [shouldObserveGeometry, ctx.displayColumns.length, ctx.paginatedData.length]);
   return /* @__PURE__ */ jsxs4(
     "div",
     {

package/dist/{chunk-Q327ESD2.mjs → chunk-BUXHI6UK.mjs}

@@ -1,7 +1,7 @@
 import {
-  renderBodyPortal,
-  useFloating
-} from "./chunk-SEWNVIHH.mjs";
+  renderOverlayPortal,
+  useAnchoredOverlay
+} from "./chunk-HKAZXG74.mjs";
 
 // src/components/Menu.tsx
 import React5 from "react";
@@ -268,8 +268,6 @@ import React4, { useState as useState2, useMemo as useMemo2, useCallback as useC
 import {
   classNames as classNames3,
   getSubMenuTitleClasses,
-  getSubmenuPopupZIndex,
-  getTransformOrigin,
   getMenuItemIndent as getMenuItemIndent2,
   isKeyOpen,
   menuItemIconClasses as menuItemIconClasses2,
@@ -367,16 +365,18 @@ var SubMenu = ({
   const isExpanded = isPopup ? isHovered || isOpenByKeyboard : isOpen;
   const popupPortal = Boolean(isPopup && menuContext?.popupPortal);
   const popupPlacement = menuContext?.mode === "horizontal" && level === 0 ? "bottom-start" : "right-start";
-  const {
-    x: popupX,
-    y: popupY,
-    placement: currentPopupPlacement
-  } = useFloating({
+  const overlay = useAnchoredOverlay({
     referenceRef: titleRef,
     floatingRef: popupRef,
-    enabled: popupPortal && isExpanded,
+    enabled: isPopup && isExpanded,
     placement: popupPlacement,
-    offset: 4
+    offset: 4,
+    portal: popupPortal,
+    dismissOnEscape: true,
+    onDismiss: () => {
+      setIsOpenByKeyboard(false);
+      setIsHovered(false);
+    }
   });
   const isInlineOrVertical = menuContext?.mode !== "horizontal" && !isPopup;
   const [hasRenderedInline, setHasRenderedInline] = useState2(
@@ -572,22 +572,14 @@ var SubMenu = ({
       }
       return child;
     });
-    const popupZIndex = isPopup ? getSubmenuPopupZIndex(level) : {};
     if (isPopup) {
-      const popupStyle = popupPortal ? {
-        display: isExpanded ? "block" : "none",
-        position: "absolute",
-        left: popupX,
-        top: popupY,
-        transformOrigin: getTransformOrigin(currentPopupPlacement),
-        ...popupZIndex
-      } : { display: isExpanded ? "block" : "none", ...popupZIndex };
       const popup = /* @__PURE__ */ jsx4(
         "ul",
         {
-          ref: popupPortal ? popupRef : void 0,
-          className: contentClasses,
-          style: popupStyle,
+          ref: popupRef,
+          className: classNames3(contentClasses, overlay.floatingClasses),
+          style: { ...overlay.floatingStyles, display: isExpanded ? "block" : "none" },
+          "data-positioned": overlay.positioned,
           role: "menu",
           "aria-hidden": isExpanded ? void 0 : "true",
           onMouseEnter: popupPortal ? handleMouseEnter : void 0,
@@ -596,20 +588,7 @@ var SubMenu = ({
           children: enhancedChildren
         }
       );
-      if (popupPortal) {
-        return renderBodyPortal(popup);
-      }
-      return /* @__PURE__ */ jsx4(
-        "ul",
-        {
-          className: contentClasses,
-          style: { display: isExpanded ? "block" : "none", ...popupZIndex },
-          role: "menu",
-          "aria-hidden": isExpanded ? void 0 : "true",
-          "data-tiger-submenu-popup": "",
-          children: enhancedChildren
-        }
-      );
+      return renderOverlayPortal(popup, overlay.target, !popupPortal);
     }
     if (!hasRenderedInline) return null;
     const isHidden = !isExpanded;

package/dist/{chunk-TORX7SG4.mjs → chunk-CC7IOSNI.mjs}

@@ -3,7 +3,7 @@ import {
   useBodyScrollLock,
   useEscapeKey,
   useFocusTrap
-} from "./chunk-SEWNVIHH.mjs";
+} from "./chunk-HKAZXG74.mjs";
 import {
   useTigerConfig
 } from "./chunk-YSIXURBW.mjs";
@@ -117,7 +117,6 @@ var Drawer = ({
     },
     [maskClosable, handleClose]
   );
-  useEscapeKey({ enabled: open, onEscape: handleClose });
   useBodyScrollLock({ enabled: open });
   const previousVisible = useRef(false);
   useEffect(() => {
@@ -138,6 +137,7 @@ var Drawer = ({
   const reactId = useId();
   const drawerId = useMemo(() => `tiger-drawer-${reactId}`, [reactId]);
   const titleId = `${drawerId}-title`;
+  const overlayHostId = `${drawerId}-overlay-host`;
   const {
     ["aria-labelledby"]: _ariaLabelledby,
     role: _role,
@@ -146,10 +146,12 @@ var Drawer = ({
   } = rest;
   const ariaLabelledby = rest["aria-labelledby"] ?? (title || header ? titleId : void 0);
   const dialogRef = useRef(null);
+  const rootRef = useRef(null);
   const closeButtonRef = useRef(null);
   const previousActiveElementRef = useRef(null);
   const touchStartRef = useRef(null);
   const touchCurrentRef = useRef(null);
+  useEscapeKey({ enabled: open, onEscape: handleClose, layerRef: rootRef });
   const resolvedCloseAriaLabel = resolveLocaleText(
     "Close drawer",
     closeAriaLabel,
@@ -167,7 +169,7 @@ var Drawer = ({
     }
     restoreFocus(previousActiveElementRef.current);
   }, [open]);
-  useFocusTrap({ enabled: open, containerRef: dialogRef });
+  useFocusTrap({ enabled: open, containerRef: rootRef });
   const resetTouchGesture = useCallback(() => {
     touchStartRef.current = null;
     touchCurrentRef.current = null;
@@ -235,10 +237,12 @@ var Drawer = ({
   const drawerContent = /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: rootRef,
       className: containerClasses,
       style: { zIndex },
       hidden: !open && !isClosingBeforeDestroy,
       "aria-hidden": !open ? "true" : void 0,
+      "data-tiger-overlay-layer": "",
       "data-tiger-drawer-root": "",
       children: [
         mask && /* @__PURE__ */ jsx(
@@ -265,6 +269,7 @@ var Drawer = ({
             role: "dialog",
             "aria-modal": "true",
             "aria-labelledby": ariaLabelledby,
+            "aria-owns": overlayHostId,
             tabIndex: -1,
             ref: dialogRef,
             onTouchStart: handleTouchStart,
@@ -291,7 +296,8 @@ var Drawer = ({
               footer && /* @__PURE__ */ jsx("div", { className: footerClasses, children: footer })
             ]
           }
-        )
+        ),
+        /* @__PURE__ */ jsx("div", { id: overlayHostId, className: "contents", "data-tiger-overlay-host": "" })
       ]
     }
   );

package/dist/{chunk-OVE2ZUJJ.mjs → chunk-D33BIMGK.mjs}

@@ -2,7 +2,7 @@ import {
   Dropdown,
   DropdownItem,
   DropdownMenu
-} from "./chunk-YI7NQWUV.mjs";
+} from "./chunk-YI6YWH66.mjs";
 import {
   useTigerConfig
 } from "./chunk-YSIXURBW.mjs";

package/dist/{chunk-PYDWF4ED.mjs → chunk-D3KP72UC.mjs}

@@ -1,6 +1,10 @@
 import {
   useControlledState
 } from "./chunk-MEFARVQI.mjs";
+import {
+  renderOverlayPortal,
+  useAnchoredOverlay
+} from "./chunk-HKAZXG74.mjs";
 import {
   useTigerConfig
 } from "./chunk-YSIXURBW.mjs";
@@ -106,6 +110,7 @@ function useDatePickerState(props) {
   );
   const calendarRef = useRef(null);
   const mobileCalendarRef = useRef(null);
+  const panelRef = useRef(null);
   const inputWrapperRef = useRef(null);
   const inputRef = useRef(null);
   const pendingFocusIsoRef = useRef(null);
@@ -390,12 +395,6 @@ function useDatePickerState(props) {
   };
   useEffect(() => {
     if (isOpen) {
-      const handleClickOutside = (event) => {
-        if (calendarRef.current && mobileCalendarRef.current && inputWrapperRef.current && !calendarRef.current.contains(event.target) && !mobileCalendarRef.current.contains(event.target) && !inputWrapperRef.current.contains(event.target)) {
-          closeCalendar();
-        }
-      };
-      document.addEventListener("click", handleClickOutside);
       const preferred = pendingFocusIsoRef.current ?? getPreferredFocusIso();
       pendingFocusIsoRef.current = null;
       setTimeout(() => {
@@ -403,7 +402,7 @@ function useDatePickerState(props) {
         const fallback = getFirstEnabledIsoInView();
         if (fallback) focusDateButtonByIso(fallback);
       }, 0);
-      return () => document.removeEventListener("click", handleClickOutside);
+      return;
     }
     setTimeout(() => restoreFocus(), 0);
   }, [
@@ -433,6 +432,7 @@ function useDatePickerState(props) {
   return {
     inputWrapperRef,
     inputRef,
+    panelRef,
     calendarRef,
     mobileCalendarRef,
     isOpen,
@@ -726,6 +726,17 @@ function renderDatePickerCalendar(ctx) {
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var DatePicker = (props) => {
   const ctx = useDatePickerState(props);
+  const overlay = useAnchoredOverlay({
+    enabled: ctx.isOpen,
+    referenceRef: ctx.inputWrapperRef,
+    floatingRef: ctx.panelRef,
+    placement: "bottom-start",
+    offset: 4,
+    layout: "bottom-sheet-sm",
+    dismissOnOutside: true,
+    dismissOnEscape: true,
+    onDismiss: ctx.closeCalendar
+  });
   return /* @__PURE__ */ jsxs3("div", { className: ctx.containerClasses, ...ctx.divProps, children: [
     /* @__PURE__ */ jsxs3("div", { ref: ctx.inputWrapperRef, className: datePickerInputWrapperClasses, children: [
       /* @__PURE__ */ jsx4(
@@ -767,8 +778,22 @@ var DatePicker = (props) => {
         }
       )
     ] }),
-    ctx.isOpen && renderDatePickerMobile(ctx),
-    ctx.isOpen && renderDatePickerCalendar(ctx)
+    renderOverlayPortal(
+      ctx.isOpen ? /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          ref: ctx.panelRef,
+          className: overlay.floatingClasses,
+          style: overlay.floatingStyles,
+          "data-positioned": overlay.positioned,
+          children: [
+            renderDatePickerMobile(ctx),
+            renderDatePickerCalendar(ctx)
+          ]
+        }
+      ) : null,
+      overlay.target
+    )
   ] });
 };
 

package/dist/{chunk-ZEP7I6WB.mjs → chunk-DPWRXXXW.mjs}

@@ -1,15 +1,15 @@
 import {
   ImageGroupContext
-} from "./chunk-EKESN747.mjs";
+} from "./chunk-HSBN5MLS.mjs";
 import {
   ImagePreview
-} from "./chunk-SZBYEGKU.mjs";
+} from "./chunk-ZCGIZOMT.mjs";
 import {
   usePopup
-} from "./chunk-S7IB6YST.mjs";
+} from "./chunk-ZG56T75O.mjs";
 import {
-  renderBodyPortal
-} from "./chunk-SEWNVIHH.mjs";
+  renderOverlayPortal
+} from "./chunk-HKAZXG74.mjs";
 
 // src/components/Image.tsx
 import { useState, useRef, useEffect, useMemo, useContext, useCallback } from "react";
@@ -68,6 +68,9 @@ var Image = ({
     triggerRef: hoverTriggerRef,
     floatingRef: hoverFloatingRef,
     floatingStyles: hoverFloatingStyles,
+    floatingClasses: hoverFloatingClasses,
+    positioned: hoverPositioned,
+    overlayTarget: hoverOverlayTarget,
     triggerHandlers: hoverTriggerHandlers
   } = usePopup({
     trigger: "hover",
@@ -206,17 +209,22 @@ var Image = ({
         }
       }
     ),
-    hoverPreviewEnabled && hoverVisible && src && renderBodyPortal(
+    hoverPreviewEnabled && hoverVisible && src && renderOverlayPortal(
       /* @__PURE__ */ jsx(
         "div",
         {
           ref: hoverFloatingRef,
           style: hoverFloatingStyles,
+          className: classNames(
+            hoverFloatingClasses,
+            "rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] p-1 shadow-lg"
+          ),
+          "data-positioned": hoverPositioned,
           "aria-hidden": true,
-          className: "rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] p-1 shadow-lg",
           children: /* @__PURE__ */ jsx("img", { src, alt: "", className: "block max-w-[16rem] max-h-[16rem] object-contain" })
         }
-      )
+      ),
+      hoverOverlayTarget
     )
   ] });
 };

package/dist/{chunk-44CQTGAN.mjs → chunk-E7OTDBI6.mjs}

@@ -353,12 +353,12 @@ var ScatterChart = ({
     }
   );
   if (!showLegend) {
-    return /* @__PURE__ */ jsxs("div", { className: "inline-block relative", children: [
+    return /* @__PURE__ */ jsxs("div", { className: classNames("relative", responsive ? "block w-full min-w-0" : "inline-block"), children: [
       chart,
       tooltip
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
+  return /* @__PURE__ */ jsxs("div", { className: classNames(wrapperClasses, responsive && "w-full min-w-0"), children: [
     chart,
     /* @__PURE__ */ jsx(
       ChartLegend,

package/dist/{chunk-DJ4PSDQS.mjs → chunk-FYINJRYN.mjs}

@@ -566,12 +566,12 @@ var AreaChart = ({
     }
   );
   if (!showLegend) {
-    return /* @__PURE__ */ jsxs("div", { className: "inline-block relative", children: [
+    return /* @__PURE__ */ jsxs("div", { className: classNames("relative", responsive ? "block w-full min-w-0" : "inline-block"), children: [
       chart,
       tooltip
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
+  return /* @__PURE__ */ jsxs("div", { className: classNames(wrapperClasses, responsive && "w-full min-w-0"), children: [
     chart,
     /* @__PURE__ */ jsx(
       ChartLegend,

package/dist/{chunk-KFPQ6DIH.mjs → chunk-GV4F6X3C.mjs}

@@ -178,7 +178,7 @@ var VirtualTable = ({
                     })
                   ),
                   style: { ...widthStyle, ...stickyStyle },
-                  children: col.title ?? ""
+                  children: col.renderHeader ? col.renderHeader() : col.title ?? ""
                 },
                 col.key
               );
@@ -215,30 +215,34 @@ var VirtualTable = ({
                   } : void 0,
                   children: [
                     colRange && colRange.leftPad > 0 && /* @__PURE__ */ jsx("td", { "aria-hidden": true, style: { width: `${colRange.leftPad}px`, padding: 0 } }),
-                    visibleColumns.map((col, colIdx) => /* @__PURE__ */ jsx(
-                      "td",
-                      {
-                        "aria-colindex": colIndexOffset + colIdx + 1,
-                        className: classNames(
-                          virtualTableCellClasses,
-                          getTableFixedCellClasses({
-                            view: "virtual-table",
-                            column: col,
-                            record: row,
-                            rowIndex: globalIdx,
-                            striped,
-                            stripedActive: striped && globalIdx % 2 === 1,
-                            selected: isSelected,
-                            hoverable: true,
-                            fixedInfo,
-                            selectedClassName: virtualTableFixedCellSelectedClasses
-                          })
-                        ),
-                        style: getVirtualTableFixedCellStyle(col.key, fixedInfo),
-                        children: renderCell ? renderCell(row[col.key], row, col) : String(row[col.key] ?? "")
-                      },
-                      col.key
-                    )),
+                    visibleColumns.map((col, colIdx) => {
+                      const dataKey = col.dataKey || col.key;
+                      const value = row[dataKey];
+                      return /* @__PURE__ */ jsx(
+                        "td",
+                        {
+                          "aria-colindex": colIndexOffset + colIdx + 1,
+                          className: classNames(
+                            virtualTableCellClasses,
+                            getTableFixedCellClasses({
+                              view: "virtual-table",
+                              column: col,
+                              record: row,
+                              rowIndex: globalIdx,
+                              striped,
+                              stripedActive: striped && globalIdx % 2 === 1,
+                              selected: isSelected,
+                              hoverable: true,
+                              fixedInfo,
+                              selectedClassName: virtualTableFixedCellSelectedClasses
+                            })
+                          ),
+                          style: getVirtualTableFixedCellStyle(col.key, fixedInfo),
+                          children: renderCell ? renderCell(value, row, col) : col.render ? col.render(row, globalIdx) : value
+                        },
+                        col.key
+                      );
+                    }),
                     colRange && colRange.rightPad > 0 && /* @__PURE__ */ jsx("td", { "aria-hidden": true, style: { width: `${colRange.rightPad}px`, padding: 0 } })
                   ]
                 },