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

package/dist/{chunk-HXD7KMRP.mjs → chunk-UCBW5RJN.mjs}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-YSIXURBW.mjs";
 
 // src/components/Upload.tsx
-import { useRef, useState, useCallback, useMemo } from "react";
+import { useRef, useState, useCallback, useEffect, useMemo } from "react";
 import {
   classNames,
   icon20ViewBox,
@@ -78,8 +78,30 @@ var Upload = ({
     [mergedLocale, labelsOverrides]
   );
   const inputRef = useRef(null);
+  const objectUrlsRef = useRef(/* @__PURE__ */ new Map());
   const [isDragging, setIsDragging] = useState(false);
   const [fileList, setFileList] = useControlledState(controlledFileList, []);
+  const revokeUnusedObjectUrls = useCallback((files) => {
+    const activeFiles = new Set(
+      files.flatMap((file) => file.file && !file.url ? [file.file] : [])
+    );
+    objectUrlsRef.current.forEach((url, file) => {
+      if (!activeFiles.has(file)) {
+        URL.revokeObjectURL(url);
+        objectUrlsRef.current.delete(file);
+      }
+    });
+  }, []);
+  useEffect(() => {
+    revokeUnusedObjectUrls(fileList);
+  }, [fileList, revokeUnusedObjectUrls]);
+  useEffect(
+    () => () => {
+      objectUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));
+      objectUrlsRef.current.clear();
+    },
+    []
+  );
   const updateFileList = useCallback(
     (newFileList) => {
       setFileList(newFileList);
@@ -391,7 +413,14 @@ var Upload = ({
     ] }, file.uid);
   };
   const renderPictureCard = (file) => {
-    const imageUrl = file.url || (file.file ? URL.createObjectURL(file.file) : "");
+    let imageUrl = file.url ?? "";
+    if (!imageUrl && file.file && typeof URL !== "undefined" && typeof URL.createObjectURL === "function") {
+      imageUrl = objectUrlsRef.current.get(file.file) ?? "";
+      if (!imageUrl) {
+        imageUrl = URL.createObjectURL(file.file);
+        objectUrlsRef.current.set(file.file, imageUrl);
+      }
+    }
     return /* @__PURE__ */ jsxs("div", { className: getPictureCardClasses(file.status), children: [
       imageUrl && /* @__PURE__ */ jsx("img", { src: imageUrl, alt: file.name, className: "w-full h-full object-cover" }),
       /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-black/0 hover:bg-black/50 transition-all flex items-center justify-center space-x-2 opacity-0 hover:opacity-100", children: [

package/dist/{chunk-5IHOOP5A.mjs → chunk-UD4DTVJZ.mjs}

@@ -22,6 +22,31 @@ import {
   clipCommentTreeDepth,
   formatCommentTime
 } from "@expcat/tigercat-core";
+
+// ../core/src/internal/comment-thread-styles.ts
+var buttonBaseClasses = "tiger-motion-aware px-2 py-0.5 h-auto min-h-0 text-xs rounded-[var(--tiger-radius-md,0.5rem)] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
+var commentThreadActionButtonClasses = `${buttonBaseClasses} text-[var(--tiger-text-muted,#6b7280)] font-medium flex items-center gap-1.5`;
+var commentThreadPrimaryButtonClasses = `${buttonBaseClasses} text-[var(--tiger-primary,#2563eb)] hover:text-[var(--tiger-primary-hover,#1d4ed8)] font-semibold hover:bg-[var(--tiger-outline-bg-hover,#eff6ff)]`;
+var commentThreadLikeButtonClasses = "hover:text-[var(--tiger-primary,#2563eb)] hover:bg-[var(--tiger-outline-bg-hover,#eff6ff)]";
+var commentThreadLikedButtonClasses = "text-[var(--tiger-primary,#2563eb)] bg-[var(--tiger-outline-bg-hover,#eff6ff)] font-semibold border-[var(--tiger-primary,#2563eb)]/40";
+var commentThreadReplyButtonClasses = "hover:text-[var(--tiger-success,#16a34a)] hover:bg-[var(--tiger-surface-muted,#f9fafb)]";
+var commentThreadNeutralButtonClasses = "hover:text-[var(--tiger-text,#111827)] hover:bg-[var(--tiger-surface-muted,#f3f4f6)]";
+var commentThreadLikeIconClasses = "tiger-motion-aware w-3.5 h-3.5 transition-transform active:scale-125";
+var commentThreadDividerClasses = "border-b border-[var(--tiger-border,#e5e7eb)]";
+var commentThreadAvatarClasses = "tiger-motion-aware shrink-0 mt-0.5 ring-1 ring-[var(--tiger-border,#e5e7eb)] shadow-sm [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))] hover:scale-105";
+var commentThreadAuthorClasses = "tiger-motion-aware text-[var(--tiger-text,#111827)] hover:text-[var(--tiger-primary,#2563eb)] transition-colors cursor-pointer";
+var commentThreadUserTitleClasses = "bg-[var(--tiger-surface-muted,#f3f4f6)] px-1.5 py-0.5 rounded text-[var(--tiger-text-muted,#6b7280)] font-medium";
+var commentThreadTimeClasses = "ml-auto text-[var(--tiger-text-muted,#6b7280)] font-normal";
+var commentThreadContentClasses = "text-sm text-[var(--tiger-text-secondary,#4b5563)] leading-relaxed break-words mt-2 mb-3 pr-2";
+var commentThreadReplyEditorClasses = "tiger-motion-aware mt-3 space-y-3 bg-[var(--tiger-surface-muted,#f9fafb)] border border-[var(--tiger-border,#e5e7eb)] p-4 rounded-[var(--tiger-radius-lg,0.75rem)] shadow-sm [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
+var commentThreadReplyTextareaClasses = "tiger-motion-aware bg-[var(--tiger-surface,#ffffff)] border-[var(--tiger-border,#d1d5db)] focus:ring-2 focus:ring-[var(--tiger-primary,#2563eb)]/20 focus:border-[var(--tiger-primary,#2563eb)] rounded-[var(--tiger-radius-md,0.5rem)] shadow-inner [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
+var commentThreadCancelButtonClasses = "tiger-motion-aware px-3 py-1.5 text-xs text-[var(--tiger-text-muted,#6b7280)] hover:text-[var(--tiger-text,#111827)] rounded-[var(--tiger-radius-md,0.5rem)] transition-colors";
+var commentThreadSubmitButtonClasses = "tiger-motion-aware px-3 py-1.5 text-xs font-semibold shadow-sm hover:shadow rounded-[var(--tiger-radius-md,0.5rem)] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
+var commentThreadRepliesClasses = "tiger-motion-aware mt-4 ml-1 pl-4 border-l-2 border-[var(--tiger-border,#e5e7eb)] hover:border-[var(--tiger-primary,#2563eb)]/40 space-y-4 transition-colors";
+var commentThreadEmptyClasses = "tiger-motion-aware flex flex-col items-center justify-center border border-dashed border-[var(--tiger-border,#d1d5db)] rounded-[var(--tiger-radius-lg,0.75rem)] py-12 px-4 bg-[var(--tiger-surface-muted,#f9fafb)] transition-colors";
+var commentThreadEmptyIconClasses = "w-10 h-10 text-[var(--tiger-text-muted,#9ca3af)] mb-3";
+
+// src/components/CommentThread.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var CommentThread = ({
   nodes,
@@ -95,9 +120,6 @@ var CommentThread = ({
       updateExpandedKeys(next);
     }
   };
-  const BTN_BASE = "px-2 py-0.5 h-auto min-h-0 text-xs rounded-md transition-all duration-200 ease-out";
-  const ACTION_BTN = `${BTN_BASE} text-gray-500 dark:text-gray-400 font-medium flex items-center gap-1.5`;
-  const PRIMARY_BTN = `${BTN_BASE} text-[var(--tiger-primary,#2563eb)] hover:text-[var(--tiger-primary-hover,#1d4ed8)] dark:text-blue-400 dark:hover:text-blue-300 font-semibold hover:bg-[var(--tiger-primary,#2563eb)]/10 dark:hover:bg-blue-400/10`;
   const renderNode = (node, depth, isLast) => {
     const children = node.children ?? [];
     const hasChildren = children.length > 0;
@@ -118,9 +140,9 @@ var CommentThread = ({
             size: "sm",
             variant: "ghost",
             className: classNames(
-              ACTION_BTN,
-              "hover:text-blue-600 hover:bg-blue-50/50 dark:hover:text-blue-400 dark:hover:bg-blue-950/20",
-              node.liked && "text-blue-600 dark:text-blue-400 bg-blue-50/30 dark:bg-blue-950/10 font-semibold border-blue-200/40 dark:border-blue-800/30"
+              commentThreadActionButtonClasses,
+              commentThreadLikeButtonClasses,
+              node.liked && commentThreadLikedButtonClasses
             ),
             onClick: () => onLike?.(node, !node.liked),
             children: [
@@ -128,7 +150,7 @@ var CommentThread = ({
                 "svg",
                 {
                   className: classNames(
-                    "w-3.5 h-3.5 transition-transform duration-200 active:scale-125",
+                    commentThreadLikeIconClasses,
                     node.liked ? "fill-current" : "stroke-current fill-none"
                   ),
                   viewBox: "0 0 24 24",
@@ -157,10 +179,7 @@ var CommentThread = ({
           {
             size: "sm",
             variant: "ghost",
-            className: classNames(
-              ACTION_BTN,
-              "hover:text-emerald-600 hover:bg-emerald-50/50 dark:hover:text-emerald-400 dark:hover:bg-emerald-950/20"
-            ),
+            className: classNames(commentThreadActionButtonClasses, commentThreadReplyButtonClasses),
             onClick: () => {
               setReplyingTo((prev) => prev === node.id ? null : node.id);
               setReplyValue("");
@@ -199,8 +218,8 @@ var CommentThread = ({
             size: "sm",
             variant: "ghost",
             className: classNames(
-              ACTION_BTN,
-              "hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800"
+              commentThreadActionButtonClasses,
+              commentThreadNeutralButtonClasses
             ),
             onClick: () => onMore?.(node),
             children: [
@@ -238,7 +257,10 @@ var CommentThread = ({
             {
               size: "sm",
               variant: action.variant ?? "ghost",
-              className: classNames(ACTION_BTN, "hover:bg-gray-100 dark:hover:bg-gray-800"),
+              className: classNames(
+                commentThreadActionButtonClasses,
+                commentThreadNeutralButtonClasses
+              ),
               disabled: action.disabled,
               onClick: () => {
                 action.onClick?.(node, action);
@@ -257,7 +279,7 @@ var CommentThread = ({
         className: classNames(
           "tiger-comment-thread-item",
           depth === 1 && "py-5",
-          depth === 1 && !isLast && showDivider && "border-b border-gray-100 dark:border-gray-800/80"
+          depth === 1 && !isLast && showDivider && commentThreadDividerClasses
         ),
         children: /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
           showAvatar && node.user ? /* @__PURE__ */ jsx(
@@ -266,31 +288,13 @@ var CommentThread = ({
               size: depth === 1 ? "md" : "sm",
               src: node.user.avatar,
               text: node.user.name,
-              className: "shrink-0 mt-0.5 ring-1 ring-black/5 dark:ring-white/10 shadow-sm transition-transform hover:scale-105 duration-200"
+              className: commentThreadAvatarClasses
             }
           ) : null,
           /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
-              node.user?.name ? /* @__PURE__ */ jsx(
-                Text,
-                {
-                  tag: "span",
-                  size: "sm",
-                  weight: "bold",
-                  className: "text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400 transition-colors cursor-pointer",
-                  children: node.user.name
-                }
-              ) : null,
-              node.user?.title ? /* @__PURE__ */ jsx(
-                Text,
-                {
-                  tag: "span",
-                  size: "xs",
-                  color: "muted",
-                  className: "bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-gray-500 dark:text-gray-400 font-medium",
-                  children: node.user.title
-                }
-              ) : null,
+              node.user?.name ? /* @__PURE__ */ jsx(Text, { tag: "span", size: "sm", weight: "bold", className: commentThreadAuthorClasses, children: node.user.name }) : null,
+              node.user?.title ? /* @__PURE__ */ jsx(Text, { tag: "span", size: "xs", color: "muted", className: commentThreadUserTitleClasses, children: node.user.title }) : null,
               node.tag ? /* @__PURE__ */ jsx(
                 Tag,
                 {
@@ -310,27 +314,18 @@ var CommentThread = ({
                 },
                 `${node.id}-tag-${index}`
               )),
-              node.time ? /* @__PURE__ */ jsx(
-                Text,
-                {
-                  tag: "span",
-                  size: "xs",
-                  color: "muted",
-                  className: "ml-auto text-gray-400 dark:text-gray-500 font-normal",
-                  children: formatCommentTime(node.time)
-                }
-              ) : null
+              node.time ? /* @__PURE__ */ jsx(Text, { tag: "span", size: "xs", color: "muted", className: commentThreadTimeClasses, children: formatCommentTime(node.time) }) : null
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-600 dark:text-gray-300 leading-relaxed break-words mt-2 mb-3 pr-2", children: node.content }),
+            /* @__PURE__ */ jsx("div", { className: commentThreadContentClasses, children: node.content }),
             actions.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: actions }) : null,
-            replyingTo === node.id ? /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-3 bg-gray-50/50 dark:bg-gray-900/30 border border-gray-100 dark:border-gray-800/80 p-4 rounded-xl shadow-sm backdrop-blur-sm transition-all duration-300", children: [
+            replyingTo === node.id ? /* @__PURE__ */ jsxs("div", { className: commentThreadReplyEditorClasses, children: [
               /* @__PURE__ */ jsx(
                 Textarea,
                 {
                   rows: 3,
                   value: replyValue,
                   placeholder: replyPlaceholder,
-                  className: "bg-white dark:bg-gray-950 border-gray-200 dark:border-gray-800 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 dark:focus:border-blue-400 rounded-lg shadow-inner transition-all duration-200",
+                  className: commentThreadReplyTextareaClasses,
                   onChange: (event) => setReplyValue(event.target.value)
                 }
               ),
@@ -340,7 +335,7 @@ var CommentThread = ({
                   {
                     size: "sm",
                     variant: "ghost",
-                    className: "px-3 py-1.5 text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded-lg transition-colors",
+                    className: commentThreadCancelButtonClasses,
                     onClick: () => {
                       setReplyingTo(null);
                       setReplyValue("");
@@ -353,7 +348,7 @@ var CommentThread = ({
                   {
                     size: "sm",
                     variant: "primary",
-                    className: "px-3 py-1.5 text-xs font-semibold shadow-sm hover:shadow transition-all duration-200 rounded-lg",
+                    className: commentThreadSubmitButtonClasses,
                     onClick: () => handleReplySubmit(node),
                     children: replyButtonText
                   }
@@ -365,38 +360,28 @@ var CommentThread = ({
               {
                 size: "sm",
                 variant: "ghost",
-                className: classNames(
-                  "mt-2 font-semibold hover:bg-[var(--tiger-primary,#2563eb)]/10 dark:hover:bg-blue-400/10 transition-colors",
-                  PRIMARY_BTN
-                ),
+                className: classNames("mt-2 font-semibold", commentThreadPrimaryButtonClasses),
                 "aria-expanded": isExpanded,
                 "aria-controls": repliesId,
                 onClick: () => toggleExpanded(node.id),
                 children: isExpanded ? "\u25BE \u6536\u8D77\u56DE\u590D" : `\u25B8 \u5C55\u5F00 ${children.length} \u6761\u56DE\u590D`
               }
             ) : null,
-            showReplies ? /* @__PURE__ */ jsxs(
-              "div",
-              {
-                id: repliesId,
-                className: "mt-4 ml-1 pl-4 border-l-2 border-gray-100 dark:border-gray-800 hover:border-blue-500/40 dark:hover:border-blue-400/40 space-y-4 transition-colors duration-300",
-                children: [
-                  visibleChildren.map(
-                    (child, index) => renderNode(child, depth + 1, index === visibleChildren.length - 1)
-                  ),
-                  showLoadMoreBtn ? /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      size: "sm",
-                      variant: "ghost",
-                      className: PRIMARY_BTN,
-                      onClick: () => handleLoadMore(node),
-                      children: loadMoreText
-                    }
-                  ) : null
-                ]
-              }
-            ) : null
+            showReplies ? /* @__PURE__ */ jsxs("div", { id: repliesId, className: commentThreadRepliesClasses, children: [
+              visibleChildren.map(
+                (child, index) => renderNode(child, depth + 1, index === visibleChildren.length - 1)
+              ),
+              showLoadMoreBtn ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "sm",
+                  variant: "ghost",
+                  className: commentThreadPrimaryButtonClasses,
+                  onClick: () => handleLoadMore(node),
+                  children: loadMoreText
+                }
+              ) : null
+            ] }) : null
           ] })
         ] })
       },
@@ -411,11 +396,11 @@ var CommentThread = ({
       "data-tiger-comment-thread": true,
       "aria-label": divProps["aria-label"] ?? (divProps["aria-labelledby"] ? void 0 : "\u8BC4\u8BBA\u7EBF\u7A0B"),
       ...divProps,
-      children: resolvedNodes.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center border border-dashed border-gray-200 dark:border-gray-800/80 rounded-xl py-12 px-4 bg-gray-50/20 dark:bg-gray-900/5 transition-colors", children: [
+      children: resolvedNodes.length === 0 ? /* @__PURE__ */ jsxs("div", { className: commentThreadEmptyClasses, children: [
         /* @__PURE__ */ jsx(
           "svg",
           {
-            className: "w-10 h-10 text-gray-300 dark:text-gray-600 mb-3",
+            className: commentThreadEmptyIconClasses,
             fill: "none",
             viewBox: "0 0 24 24",
             stroke: "currentColor",

package/dist/{chunk-A6JNS35U.mjs → chunk-UT5BV2VO.mjs}

@@ -348,12 +348,12 @@ var BarChart = ({
     }
   );
   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-K6GJMKJR.mjs → chunk-V6P7ZK6O.mjs}

@@ -1,12 +1,12 @@
 import {
   Table
-} from "./chunk-N6JNLJIN.mjs";
+} from "./chunk-BOGOQ44C.mjs";
 import {
   Select
-} from "./chunk-PAN256RW.mjs";
+} from "./chunk-KVCI2346.mjs";
 import {
   Popover
-} from "./chunk-QWUDJC6K.mjs";
+} from "./chunk-HOYBHB7B.mjs";
 import {
   Input
 } from "./chunk-F6WV53BS.mjs";

package/dist/{chunk-4XGO3OSE.mjs → chunk-XE4YFBOZ.mjs}

@@ -1,9 +1,9 @@
 import {
   usePopup
-} from "./chunk-S7IB6YST.mjs";
+} from "./chunk-ZG56T75O.mjs";
 import {
-  renderBodyPortal
-} from "./chunk-SEWNVIHH.mjs";
+  renderOverlayPortal
+} from "./chunk-HKAZXG74.mjs";
 
 // src/components/Popconfirm.tsx
 import React, { useMemo, useRef } from "react";
@@ -82,6 +82,9 @@ var Popconfirm = ({
     containerRef,
     triggerRef,
     floatingRef,
+    floatingClasses,
+    positioned,
+    overlayTarget,
     closeAndRestoreFocus,
     actualPlacement,
     floatingStyles: baseFloatingStyles
@@ -106,21 +109,11 @@ var Popconfirm = ({
     if (disabled) return;
     setVisible(!currentVisible);
   };
-  const contentWrapperStyles = useMemo(
-    () => ({
-      position: "absolute",
-      left: baseFloatingStyles.left,
-      top: baseFloatingStyles.top,
-      transformOrigin: baseFloatingStyles.transformOrigin
-    }),
-    [baseFloatingStyles]
-  );
   const containerClasses = useMemo(
     () => classNames(getPopconfirmContainerClasses(), className),
     [className]
   );
   const triggerClasses = useMemo(() => getPopconfirmTriggerClasses(disabled), [disabled]);
-  const contentWrapperClasses = "absolute z-50";
   const arrowClasses = useMemo(() => getPopconfirmArrowClasses(actualPlacement), [actualPlacement]);
   const contentClasses = getPopconfirmContentClasses();
   const titleClasses = getPopconfirmTitleClasses();
@@ -178,13 +171,14 @@ var Popconfirm = ({
   })();
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: containerClasses, style: mergedStyle, ...divProps, children: [
     /* @__PURE__ */ jsx("div", { ref: triggerRef, children: triggerNode }),
-    renderBodyPortal(
+    renderOverlayPortal(
       /* @__PURE__ */ jsx(
         "div",
         {
           ref: floatingRef,
-          className: contentWrapperClasses,
-          style: contentWrapperStyles,
+          className: floatingClasses,
+          style: baseFloatingStyles,
+          "data-positioned": positioned,
           hidden: !currentVisible,
           "aria-hidden": !currentVisible,
           children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
@@ -215,7 +209,8 @@ var Popconfirm = ({
             )
           ] })
         }
-      )
+      ),
+      overlayTarget
     )
   ] });
 };

package/dist/{chunk-YI7NQWUV.mjs → chunk-YI6YWH66.mjs}

@@ -1,9 +1,7 @@
 import {
-  renderBodyPortal,
-  useClickOutside,
-  useEscapeKey,
-  useFloating
-} from "./chunk-SEWNVIHH.mjs";
+  renderOverlayPortal,
+  useAnchoredOverlay
+} from "./chunk-HKAZXG74.mjs";
 
 // src/components/Dropdown.tsx
 import React, {
@@ -23,9 +21,7 @@ import {
   getDropdownChevronClasses,
   getDropdownMenuClasses,
   getDropdownItemClasses,
-  getTransformOrigin,
   injectDropdownStyles,
-  FLOATING_OVERLAY_Z_INDEX,
   DROPDOWN_CHEVRON_PATH,
   DROPDOWN_ENTER_CLASS,
   handleMenuNavigation,
@@ -164,21 +160,17 @@ var Dropdown = ({
       handleMenuNavigation(floatingRef.current, event.nativeEvent);
     }
   }, []);
-  useClickOutside({
-    enabled: trigger === "click" && visible,
-    refs: [containerRef, floatingRef],
-    onOutsideClick: () => setVisible(false)
-  });
-  useEscapeKey({
-    enabled: visible,
-    onEscape: () => setVisible(false)
-  });
-  const { x, y, placement } = useFloating({
+  const overlay = useAnchoredOverlay({
     referenceRef: triggerRef,
     floatingRef,
     enabled: visible,
     placement: initialPlacement,
-    offset
+    offset,
+    portal,
+    containerRef,
+    dismissOnOutside: trigger === "click",
+    dismissOnEscape: true,
+    onDismiss: () => setVisible(false)
   });
   useEffect(() => {
     return () => {
@@ -192,17 +184,8 @@ var Dropdown = ({
     [className]
   );
   const triggerClasses = useMemo(() => getDropdownTriggerClasses(disabled), [disabled]);
-  const menuWrapperClasses = classNames("absolute", DROPDOWN_ENTER_CLASS);
-  const menuWrapperStyles = useMemo(
-    () => ({
-      position: "absolute",
-      left: x,
-      top: y,
-      zIndex: FLOATING_OVERLAY_Z_INDEX,
-      transformOrigin: getTransformOrigin(placement)
-    }),
-    [x, y, placement]
-  );
+  const menuWrapperClasses = classNames(overlay.floatingClasses, DROPDOWN_ENTER_CLASS);
+  const menuWrapperStyles = overlay.floatingStyles;
   const contextValue = useMemo(
     () => ({ closeOnClick, handleItemClick }),
     [closeOnClick, handleItemClick]
@@ -243,6 +226,7 @@ var Dropdown = ({
       ref: floatingRef,
       className: menuWrapperClasses,
       style: menuWrapperStyles,
+      "data-positioned": overlay.positioned,
       hidden: !visible,
       "data-tiger-dropdown-menu": "",
       onMouseEnter: handleMouseEnter,
@@ -272,7 +256,7 @@ var Dropdown = ({
         ]
       }
     ),
-    portal ? renderBodyPortal(menuWrapperNode) : menuWrapperNode
+    renderOverlayPortal(menuWrapperNode, overlay.target, !portal)
   ] }) });
 };