@grandbazar/ui-baza 1.2.8 → 1.2.10

package/dist/index.cjs

@@ -1684,7 +1684,7 @@ function DropdownMenuProvider({ children }) {
         portalPlacement,
         setPortalPlacement
       },
-      children: typeof children === "function" ? children({ isOpen, setIsOpen, portalPlacement }) : children
+      children: typeof children === "function" ? children({ isOpen, setIsOpen, portalPlacement, triggerRef }) : children
     }
   );
 }
@@ -1810,38 +1810,6 @@ function handleDropdownMouseLeave(event, { ignoreRelatedTargetRef, setIsOpen })
   setIsOpen(false);
 }
 
-function usePortalHandlersByEventTrigger() {
-  const { triggerRef, setIsOpen } = useDropdownMenuContext();
-  const handlePortalBlur = React.useCallback(
-    (event) => {
-      const relatedTarget = event.relatedTarget;
-      if (!(relatedTarget instanceof Node)) {
-        setIsOpen(false);
-        return;
-      }
-      if (event.currentTarget.contains(relatedTarget) || triggerRef.current?.contains(relatedTarget)) {
-        return;
-      }
-      setIsOpen(false);
-    },
-    [setIsOpen, triggerRef]
-  );
-  const portalHandlersByEvent = React.useMemo(
-    () => ({
-      click: {},
-      hover: {
-        onMouseLeave: (event) => handleDropdownMouseLeave(event, {
-          ignoreRelatedTargetRef: triggerRef,
-          setIsOpen
-        }),
-        onBlur: handlePortalBlur
-      }
-    }),
-    [handlePortalBlur, setIsOpen, triggerRef]
-  );
-  return portalHandlersByEvent;
-}
-
 const getAdjustedAlign = ({
   align,
   translateAxis,
@@ -1934,42 +1902,131 @@ function getAdjustedPlacement({
   return { position: adjustedPosition, align: adjustedAlign };
 }
 
-function usePortalPosition({ align, position, offset, portalWidth, portalHeight }) {
+function syncPortalPosition({
+  align,
+  position,
+  offset,
+  portalWidth,
+  portalHeight,
+  triggerRect,
+  setPortalPlacement,
+  setPortalPosition,
+  scrollContainer
+}) {
+  const isWindowScrollContainer = !scrollContainer;
+  const scrollCoords = {
+    x: isWindowScrollContainer ? window.scrollX : scrollContainer.scrollLeft,
+    y: isWindowScrollContainer ? window.scrollY : scrollContainer.scrollTop
+  };
+  const viewportPosition = {
+    left: scrollCoords.x,
+    right: scrollCoords.x + (isWindowScrollContainer ? window.innerWidth : scrollContainer.clientWidth),
+    top: scrollCoords.y,
+    bottom: scrollCoords.y + (isWindowScrollContainer ? window.innerHeight : scrollContainer.clientHeight)
+  };
+  const { position: adjustedPosition, align: adjustedAlign } = getAdjustedPlacement({
+    align,
+    position,
+    viewportPosition,
+    portalWidth,
+    portalHeight,
+    scrollCoords,
+    triggerRect
+  });
+  setPortalPlacement({ position: adjustedPosition, align: adjustedAlign });
+  const newPortalPosition = getPortalPosition({
+    align: adjustedAlign,
+    position: adjustedPosition,
+    offset,
+    triggerRect,
+    scrollCoords
+  });
+  setPortalPosition(newPortalPosition);
+}
+
+function usePortalHandlersByEventTrigger() {
+  const { triggerRef, setIsOpen } = useDropdownMenuContext();
+  const handlePortalBlur = React.useCallback(
+    (event) => {
+      const relatedTarget = event.relatedTarget;
+      if (!(relatedTarget instanceof Node)) {
+        setIsOpen(false);
+        return;
+      }
+      if (event.currentTarget.contains(relatedTarget) || triggerRef.current?.contains(relatedTarget)) {
+        return;
+      }
+      setIsOpen(false);
+    },
+    [setIsOpen, triggerRef]
+  );
+  const portalHandlersByEvent = React.useMemo(
+    () => ({
+      click: {},
+      hover: {
+        onMouseLeave: (event) => handleDropdownMouseLeave(event, {
+          ignoreRelatedTargetRef: triggerRef,
+          setIsOpen
+        }),
+        onBlur: handlePortalBlur
+      }
+    }),
+    [handlePortalBlur, setIsOpen, triggerRef]
+  );
+  return portalHandlersByEvent;
+}
+
+function usePortalPosition({
+  align,
+  position,
+  offset,
+  portalWidth,
+  portalHeight,
+  scrollContainerRef
+}) {
   const { isOpen, triggerRef, setPortalPlacement } = useDropdownMenuContext();
   const [portalPosition, setPortalPosition] = React.useState();
   React.useEffect(() => {
-    if (isOpen && triggerRef.current) {
-      const triggerRect = triggerRef.current.getBoundingClientRect();
-      const scrollCoords = {
-        x: window.scrollX,
-        y: window.scrollY
-      };
-      const viewportPosition = {
-        left: scrollCoords.x,
-        right: scrollCoords.x + window.innerWidth,
-        top: scrollCoords.y,
-        bottom: scrollCoords.y + window.innerHeight
+    if (!isOpen || !triggerRef.current) {
+      return;
+    }
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const scrollContainer = scrollContainerRef?.current;
+    if (scrollContainer) {
+      const containerRect = scrollContainer.getBoundingClientRect();
+      const normalizedTriggerRect = {
+        ...triggerRect,
+        x: triggerRect.x - containerRect.left - scrollContainer.clientLeft,
+        y: triggerRect.y - containerRect.top - scrollContainer.clientTop,
+        top: triggerRect.top - containerRect.top - scrollContainer.clientTop,
+        right: triggerRect.right - containerRect.left - scrollContainer.clientLeft,
+        bottom: triggerRect.bottom - containerRect.top - scrollContainer.clientTop,
+        left: triggerRect.left - containerRect.left - scrollContainer.clientLeft
       };
-      const { position: adjustedPosition, align: adjustedAlign } = getAdjustedPlacement({
+      syncPortalPosition({
         align,
         position,
-        viewportPosition,
+        offset,
         portalWidth,
         portalHeight,
-        scrollCoords,
-        triggerRect
-      });
-      setPortalPlacement({ position: adjustedPosition, align: adjustedAlign });
-      const newPortalPosition = getPortalPosition({
-        align: adjustedAlign,
-        position: adjustedPosition,
-        offset,
-        triggerRect,
-        scrollCoords
+        triggerRect: normalizedTriggerRect,
+        setPortalPlacement,
+        setPortalPosition,
+        scrollContainer
       });
-      setPortalPosition(newPortalPosition);
+      return;
     }
-  }, [align, isOpen, offset, portalHeight, portalWidth, position, setPortalPlacement, triggerRef]);
+    syncPortalPosition({
+      align,
+      position,
+      offset,
+      portalWidth,
+      portalHeight,
+      triggerRect,
+      setPortalPlacement,
+      setPortalPosition
+    });
+  }, [align, isOpen, offset, portalHeight, portalWidth, position, scrollContainerRef, setPortalPlacement, triggerRef]);
   return portalPosition;
 }
 
@@ -2011,12 +2068,14 @@ const styles$g = {
 function DropdownPortal({
   children,
   className,
+  style,
   align = "start",
   position = "bottom",
   isNested,
   offset = DROPDOWN_PORTAL_DEFAULT_OFFSET,
   maxWidth,
-  maxHeight
+  maxHeight,
+  scrollContainerRef
 }) {
   const { portalRef, triggerEvent, isOpen } = useDropdownMenuContext();
   const handlersByTrigger = usePortalHandlersByEventTrigger();
@@ -2025,7 +2084,8 @@ function DropdownPortal({
     position,
     offset,
     ...maxWidth && { portalWidth: maxWidth + offset },
-    ...maxHeight && { portalHeight: maxHeight + offset }
+    ...maxHeight && { portalHeight: maxHeight + offset },
+    scrollContainerRef
   });
   if (!isOpen || !portalPosition) {
     return null;
@@ -2037,7 +2097,8 @@ function DropdownPortal({
         style: {
           ...portalPosition,
           ...maxWidth && { "--dropdown-portal-max-width": `${maxWidth + offset}px` },
-          ...maxHeight && { "--dropdown-portal-max-height": `${maxHeight + offset}px` }
+          ...maxHeight && { "--dropdown-portal-max-height": `${maxHeight + offset}px` },
+          ...style
         },
         ref: portalRef,
         className: classNames(styles$g.dropdownPortal, className),
@@ -2046,7 +2107,7 @@ function DropdownPortal({
         children
       }
     ),
-    document.body
+    scrollContainerRef?.current ?? document.body
   );
 }
 
@@ -2725,8 +2786,15 @@ function Tag({ children, className, size = "md", mode = "primary", disabled, ...
   );
 }
 
-const tooltipContent = "_tooltipContent_1267q_2";
-const tooltipTitle = "_tooltipTitle_1267q_96";
+const TOOLTIP_CONTENT_ARROW = {
+  width: 16,
+  height: 8,
+  offsetInline: 12,
+  offsetBlock: 10
+};
+
+const tooltipContent = "_tooltipContent_ww0bo_2";
+const tooltipTitle = "_tooltipTitle_ww0bo_92";
 const styles = {
 	tooltipContent: tooltipContent,
 	tooltipTitle: tooltipTitle
@@ -2739,7 +2807,6 @@ function TooltipContent({
   description,
   arrowAlign,
   arrowPosition,
-  arrowOffset,
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2749,11 +2816,11 @@ function TooltipContent({
       role: role ?? "tooltip",
       "data-align": arrowAlign,
       "data-position": arrowPosition,
-      ...arrowOffset && {
-        style: {
-          "--tooltip-content-arrow-offset-inline": `${arrowOffset.inline}px`,
-          "--tooltip-content-arrow-offset-block": `${arrowOffset.block}px`
-        }
+      style: {
+        "--tooltip-content-arrow-width": `${TOOLTIP_CONTENT_ARROW.width}px`,
+        "--tooltip-content-arrow-height": `${TOOLTIP_CONTENT_ARROW.height}px`,
+        "--tooltip-content-arrow-offset-inline": `${TOOLTIP_CONTENT_ARROW.offsetInline}px`,
+        "--tooltip-content-arrow-offset-block": `${TOOLTIP_CONTENT_ARROW.offsetBlock}px`
       },
       ...props,
       children: [
@@ -2764,7 +2831,24 @@ function TooltipContent({
   );
 }
 
-const TOOLTIP_OFFSET = 8;
+function getCenteredPortalShiftStyle({
+  portalPlacement,
+  triggerRef
+}) {
+  const triggerRect = triggerRef.current?.getBoundingClientRect();
+  if (!triggerRect || !portalPlacement || portalPlacement.align === "center") {
+    return {};
+  }
+  const isHorizontal = portalPlacement.position === "top" || portalPlacement.position === "bottom";
+  const triggerHalfSize = isHorizontal ? triggerRect.width / 2 : triggerRect.height / 2;
+  const arrowOffset = (isHorizontal ? TOOLTIP_CONTENT_ARROW.offsetInline : TOOLTIP_CONTENT_ARROW.offsetBlock) + TOOLTIP_CONTENT_ARROW.height * Math.SQRT2 / 2;
+  const shift = portalPlacement.align === "start" ? triggerHalfSize - arrowOffset : arrowOffset - triggerHalfSize;
+  const shiftPx = `${Number(shift.toFixed(3))}px`;
+  if (isHorizontal) {
+    return { marginLeft: shiftPx };
+  }
+  return { marginTop: shiftPx };
+}
 
 function TooltipRoot({
   children,
@@ -2774,18 +2858,24 @@ function TooltipRoot({
   maxWidth,
   maxHeight,
   withoutArrow = false,
+  scrollContainerRef,
+  centerArrowToTrigger = true,
   ...tooltipContentProps
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Root, { children: ({ portalPlacement }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Root, { children: ({ portalPlacement, triggerRef }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Trigger, { asChild: true, triggerEvent, children }),
     /* @__PURE__ */ jsxRuntime.jsx(
       DropdownMenu.Portal,
       {
         align,
         position,
-        offset: TOOLTIP_OFFSET,
+        offset: TOOLTIP_CONTENT_ARROW.height,
         maxWidth,
         maxHeight,
+        scrollContainerRef,
+        style: {
+          ...!withoutArrow && centerArrowToTrigger && getCenteredPortalShiftStyle({ portalPlacement, triggerRef })
+        },
         children: /* @__PURE__ */ jsxRuntime.jsx(
           TooltipContent,
           {

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { ComponentProps } from 'react';
+import { CSSProperties } from 'react';
 import { default as default_2 } from 'react';
 import { Dispatch } from 'react';
 import { IconGoogle } from './logos';
@@ -190,7 +191,7 @@ export declare namespace DropdownMenu {
     var Portal: typeof DropdownPortal;
 }
 
-declare function DropdownPortal({ children, className, align, position, isNested, offset, maxWidth, maxHeight, }: TDropdownPortalProps): ReactPortal | null;
+declare function DropdownPortal({ children, className, style, align, position, isNested, offset, maxWidth, maxHeight, scrollContainerRef, }: TDropdownPortalProps): ReactPortal | null;
 
 declare function DropdownRoot({ children }: TDropdownRootProps): JSX.Element;
 
@@ -664,16 +665,18 @@ declare type TDropdownMenuContextValue = {
 declare type TDropdownPortalProps = {
     children: React.ReactNode;
     className?: string;
+    style?: CSSProperties;
     align?: TArrayElement<typeof DROPDOWN_PORTAL_ALIGN_LIST>;
     position?: TArrayElement<typeof DROPDOWN_PORTAL_POSITION_LIST>;
     isNested?: boolean;
     offset?: number;
     maxWidth?: number;
     maxHeight?: number;
+    scrollContainerRef?: React.RefObject<HTMLElement | null>;
 };
 
 declare type TDropdownRootProps = {
-    children: React.ReactNode | ((context: Pick<TDropdownMenuContextValue, 'isOpen' | 'setIsOpen' | 'portalPlacement'>) => React.ReactNode);
+    children: React.ReactNode | ((context: Pick<TDropdownMenuContextValue, 'isOpen' | 'setIsOpen' | 'portalPlacement' | 'triggerRef'>) => React.ReactNode);
 };
 
 declare type TDropdownTriggerProps = TAsChildProps<React.HTMLAttributes<HTMLButtonElement>> & {
@@ -726,7 +729,8 @@ declare type TLocale = TArrayElement<typeof LOCALES>;
  * @param triggerEvent - Trigger behavior (hover, click)
  * @param maxWidth - Max width of the tooltip content in pixels (required for horizontal flip)
  * @param maxHeight - Max height of the tooltip content in pixels (required for vertical flip)
- * @param arrowOffset - Arrow offset in pixels for inline and block axes
+ * @param scrollContainerRef - Optional scroll container used as portal mount node and positioning boundary
+ * @param centerArrowToTrigger - Automatically shifts portal to keep arrow at trigger center for start/end align
  * @param withoutArrow - Hide tooltip arrow
  *
  * @example
@@ -740,9 +744,9 @@ export declare namespace Tooltip {
     var Content: typeof TooltipContent;
 }
 
-declare function TooltipContent({ className, role, title, description, arrowAlign, arrowPosition, arrowOffset, ...props }: TTooltipContentProps): JSX.Element;
+declare function TooltipContent({ className, role, title, description, arrowAlign, arrowPosition, ...props }: TTooltipContentProps): JSX.Element;
 
-declare function TooltipRoot({ children, align, position, triggerEvent, maxWidth, maxHeight, withoutArrow, ...tooltipContentProps }: TTooltipRootProps): JSX.Element;
+declare function TooltipRoot({ children, align, position, triggerEvent, maxWidth, maxHeight, withoutArrow, scrollContainerRef, centerArrowToTrigger, ...tooltipContentProps }: TTooltipRootProps): JSX.Element;
 
 declare type TPaginationItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     size?: TArrayElement<typeof PAGINATION_SIZES>;
@@ -868,20 +872,12 @@ declare type TTooltipContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, '
     description?: string;
     arrowAlign?: TArrayElement<typeof DROPDOWN_PORTAL_ALIGN_LIST>;
     arrowPosition?: TArrayElement<typeof DROPDOWN_PORTAL_POSITION_LIST>;
-    arrowOffset?: {
-        inline: number;
-        block: number;
-    };
 };
 
-declare type TTooltipRootProps = Omit<React.ComponentProps<typeof TooltipContent>, 'arrowAlign' | 'arrowPosition'> & {
-    children: React.ReactNode;
+declare type TTooltipRootProps = Omit<React.ComponentProps<typeof TooltipContent>, 'arrowAlign' | 'arrowPosition'> & Pick<React.ComponentProps<typeof DropdownMenu.Portal>, 'align' | 'position' | 'maxWidth' | 'maxHeight' | 'scrollContainerRef' | 'children'> & {
     triggerEvent?: TArrayElement<typeof DROPDOWN_TRIGGER_EVENT_LIST>;
-    align?: TArrayElement<typeof DROPDOWN_PORTAL_ALIGN_LIST>;
-    position?: TArrayElement<typeof DROPDOWN_PORTAL_POSITION_LIST>;
-    maxWidth?: number;
-    maxHeight?: number;
     withoutArrow?: boolean;
+    centerArrowToTrigger?: boolean;
 };
 
 declare type TWithRef<TProps, TElement = HTMLElement> = TProps & {

package/dist/index.js

@@ -1680,7 +1680,7 @@ function DropdownMenuProvider({ children }) {
         portalPlacement,
         setPortalPlacement
       },
-      children: typeof children === "function" ? children({ isOpen, setIsOpen, portalPlacement }) : children
+      children: typeof children === "function" ? children({ isOpen, setIsOpen, portalPlacement, triggerRef }) : children
     }
   );
 }
@@ -1806,38 +1806,6 @@ function handleDropdownMouseLeave(event, { ignoreRelatedTargetRef, setIsOpen })
   setIsOpen(false);
 }
 
-function usePortalHandlersByEventTrigger() {
-  const { triggerRef, setIsOpen } = useDropdownMenuContext();
-  const handlePortalBlur = useCallback(
-    (event) => {
-      const relatedTarget = event.relatedTarget;
-      if (!(relatedTarget instanceof Node)) {
-        setIsOpen(false);
-        return;
-      }
-      if (event.currentTarget.contains(relatedTarget) || triggerRef.current?.contains(relatedTarget)) {
-        return;
-      }
-      setIsOpen(false);
-    },
-    [setIsOpen, triggerRef]
-  );
-  const portalHandlersByEvent = useMemo(
-    () => ({
-      click: {},
-      hover: {
-        onMouseLeave: (event) => handleDropdownMouseLeave(event, {
-          ignoreRelatedTargetRef: triggerRef,
-          setIsOpen
-        }),
-        onBlur: handlePortalBlur
-      }
-    }),
-    [handlePortalBlur, setIsOpen, triggerRef]
-  );
-  return portalHandlersByEvent;
-}
-
 const getAdjustedAlign = ({
   align,
   translateAxis,
@@ -1930,42 +1898,131 @@ function getAdjustedPlacement({
   return { position: adjustedPosition, align: adjustedAlign };
 }
 
-function usePortalPosition({ align, position, offset, portalWidth, portalHeight }) {
+function syncPortalPosition({
+  align,
+  position,
+  offset,
+  portalWidth,
+  portalHeight,
+  triggerRect,
+  setPortalPlacement,
+  setPortalPosition,
+  scrollContainer
+}) {
+  const isWindowScrollContainer = !scrollContainer;
+  const scrollCoords = {
+    x: isWindowScrollContainer ? window.scrollX : scrollContainer.scrollLeft,
+    y: isWindowScrollContainer ? window.scrollY : scrollContainer.scrollTop
+  };
+  const viewportPosition = {
+    left: scrollCoords.x,
+    right: scrollCoords.x + (isWindowScrollContainer ? window.innerWidth : scrollContainer.clientWidth),
+    top: scrollCoords.y,
+    bottom: scrollCoords.y + (isWindowScrollContainer ? window.innerHeight : scrollContainer.clientHeight)
+  };
+  const { position: adjustedPosition, align: adjustedAlign } = getAdjustedPlacement({
+    align,
+    position,
+    viewportPosition,
+    portalWidth,
+    portalHeight,
+    scrollCoords,
+    triggerRect
+  });
+  setPortalPlacement({ position: adjustedPosition, align: adjustedAlign });
+  const newPortalPosition = getPortalPosition({
+    align: adjustedAlign,
+    position: adjustedPosition,
+    offset,
+    triggerRect,
+    scrollCoords
+  });
+  setPortalPosition(newPortalPosition);
+}
+
+function usePortalHandlersByEventTrigger() {
+  const { triggerRef, setIsOpen } = useDropdownMenuContext();
+  const handlePortalBlur = useCallback(
+    (event) => {
+      const relatedTarget = event.relatedTarget;
+      if (!(relatedTarget instanceof Node)) {
+        setIsOpen(false);
+        return;
+      }
+      if (event.currentTarget.contains(relatedTarget) || triggerRef.current?.contains(relatedTarget)) {
+        return;
+      }
+      setIsOpen(false);
+    },
+    [setIsOpen, triggerRef]
+  );
+  const portalHandlersByEvent = useMemo(
+    () => ({
+      click: {},
+      hover: {
+        onMouseLeave: (event) => handleDropdownMouseLeave(event, {
+          ignoreRelatedTargetRef: triggerRef,
+          setIsOpen
+        }),
+        onBlur: handlePortalBlur
+      }
+    }),
+    [handlePortalBlur, setIsOpen, triggerRef]
+  );
+  return portalHandlersByEvent;
+}
+
+function usePortalPosition({
+  align,
+  position,
+  offset,
+  portalWidth,
+  portalHeight,
+  scrollContainerRef
+}) {
   const { isOpen, triggerRef, setPortalPlacement } = useDropdownMenuContext();
   const [portalPosition, setPortalPosition] = useState();
   useEffect(() => {
-    if (isOpen && triggerRef.current) {
-      const triggerRect = triggerRef.current.getBoundingClientRect();
-      const scrollCoords = {
-        x: window.scrollX,
-        y: window.scrollY
-      };
-      const viewportPosition = {
-        left: scrollCoords.x,
-        right: scrollCoords.x + window.innerWidth,
-        top: scrollCoords.y,
-        bottom: scrollCoords.y + window.innerHeight
+    if (!isOpen || !triggerRef.current) {
+      return;
+    }
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const scrollContainer = scrollContainerRef?.current;
+    if (scrollContainer) {
+      const containerRect = scrollContainer.getBoundingClientRect();
+      const normalizedTriggerRect = {
+        ...triggerRect,
+        x: triggerRect.x - containerRect.left - scrollContainer.clientLeft,
+        y: triggerRect.y - containerRect.top - scrollContainer.clientTop,
+        top: triggerRect.top - containerRect.top - scrollContainer.clientTop,
+        right: triggerRect.right - containerRect.left - scrollContainer.clientLeft,
+        bottom: triggerRect.bottom - containerRect.top - scrollContainer.clientTop,
+        left: triggerRect.left - containerRect.left - scrollContainer.clientLeft
       };
-      const { position: adjustedPosition, align: adjustedAlign } = getAdjustedPlacement({
+      syncPortalPosition({
         align,
         position,
-        viewportPosition,
+        offset,
         portalWidth,
         portalHeight,
-        scrollCoords,
-        triggerRect
-      });
-      setPortalPlacement({ position: adjustedPosition, align: adjustedAlign });
-      const newPortalPosition = getPortalPosition({
-        align: adjustedAlign,
-        position: adjustedPosition,
-        offset,
-        triggerRect,
-        scrollCoords
+        triggerRect: normalizedTriggerRect,
+        setPortalPlacement,
+        setPortalPosition,
+        scrollContainer
       });
-      setPortalPosition(newPortalPosition);
+      return;
     }
-  }, [align, isOpen, offset, portalHeight, portalWidth, position, setPortalPlacement, triggerRef]);
+    syncPortalPosition({
+      align,
+      position,
+      offset,
+      portalWidth,
+      portalHeight,
+      triggerRect,
+      setPortalPlacement,
+      setPortalPosition
+    });
+  }, [align, isOpen, offset, portalHeight, portalWidth, position, scrollContainerRef, setPortalPlacement, triggerRef]);
   return portalPosition;
 }
 
@@ -2007,12 +2064,14 @@ const styles$g = {
 function DropdownPortal({
   children,
   className,
+  style,
   align = "start",
   position = "bottom",
   isNested,
   offset = DROPDOWN_PORTAL_DEFAULT_OFFSET,
   maxWidth,
-  maxHeight
+  maxHeight,
+  scrollContainerRef
 }) {
   const { portalRef, triggerEvent, isOpen } = useDropdownMenuContext();
   const handlersByTrigger = usePortalHandlersByEventTrigger();
@@ -2021,7 +2080,8 @@ function DropdownPortal({
     position,
     offset,
     ...maxWidth && { portalWidth: maxWidth + offset },
-    ...maxHeight && { portalHeight: maxHeight + offset }
+    ...maxHeight && { portalHeight: maxHeight + offset },
+    scrollContainerRef
   });
   if (!isOpen || !portalPosition) {
     return null;
@@ -2033,7 +2093,8 @@ function DropdownPortal({
         style: {
           ...portalPosition,
           ...maxWidth && { "--dropdown-portal-max-width": `${maxWidth + offset}px` },
-          ...maxHeight && { "--dropdown-portal-max-height": `${maxHeight + offset}px` }
+          ...maxHeight && { "--dropdown-portal-max-height": `${maxHeight + offset}px` },
+          ...style
         },
         ref: portalRef,
         className: classNames(styles$g.dropdownPortal, className),
@@ -2042,7 +2103,7 @@ function DropdownPortal({
         children
       }
     ),
-    document.body
+    scrollContainerRef?.current ?? document.body
   );
 }
 
@@ -2721,8 +2782,15 @@ function Tag({ children, className, size = "md", mode = "primary", disabled, ...
   );
 }
 
-const tooltipContent = "_tooltipContent_1267q_2";
-const tooltipTitle = "_tooltipTitle_1267q_96";
+const TOOLTIP_CONTENT_ARROW = {
+  width: 16,
+  height: 8,
+  offsetInline: 12,
+  offsetBlock: 10
+};
+
+const tooltipContent = "_tooltipContent_ww0bo_2";
+const tooltipTitle = "_tooltipTitle_ww0bo_92";
 const styles = {
 	tooltipContent: tooltipContent,
 	tooltipTitle: tooltipTitle
@@ -2735,7 +2803,6 @@ function TooltipContent({
   description,
   arrowAlign,
   arrowPosition,
-  arrowOffset,
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
@@ -2745,11 +2812,11 @@ function TooltipContent({
       role: role ?? "tooltip",
       "data-align": arrowAlign,
       "data-position": arrowPosition,
-      ...arrowOffset && {
-        style: {
-          "--tooltip-content-arrow-offset-inline": `${arrowOffset.inline}px`,
-          "--tooltip-content-arrow-offset-block": `${arrowOffset.block}px`
-        }
+      style: {
+        "--tooltip-content-arrow-width": `${TOOLTIP_CONTENT_ARROW.width}px`,
+        "--tooltip-content-arrow-height": `${TOOLTIP_CONTENT_ARROW.height}px`,
+        "--tooltip-content-arrow-offset-inline": `${TOOLTIP_CONTENT_ARROW.offsetInline}px`,
+        "--tooltip-content-arrow-offset-block": `${TOOLTIP_CONTENT_ARROW.offsetBlock}px`
       },
       ...props,
       children: [
@@ -2760,7 +2827,24 @@ function TooltipContent({
   );
 }
 
-const TOOLTIP_OFFSET = 8;
+function getCenteredPortalShiftStyle({
+  portalPlacement,
+  triggerRef
+}) {
+  const triggerRect = triggerRef.current?.getBoundingClientRect();
+  if (!triggerRect || !portalPlacement || portalPlacement.align === "center") {
+    return {};
+  }
+  const isHorizontal = portalPlacement.position === "top" || portalPlacement.position === "bottom";
+  const triggerHalfSize = isHorizontal ? triggerRect.width / 2 : triggerRect.height / 2;
+  const arrowOffset = (isHorizontal ? TOOLTIP_CONTENT_ARROW.offsetInline : TOOLTIP_CONTENT_ARROW.offsetBlock) + TOOLTIP_CONTENT_ARROW.height * Math.SQRT2 / 2;
+  const shift = portalPlacement.align === "start" ? triggerHalfSize - arrowOffset : arrowOffset - triggerHalfSize;
+  const shiftPx = `${Number(shift.toFixed(3))}px`;
+  if (isHorizontal) {
+    return { marginLeft: shiftPx };
+  }
+  return { marginTop: shiftPx };
+}
 
 function TooltipRoot({
   children,
@@ -2770,18 +2854,24 @@ function TooltipRoot({
   maxWidth,
   maxHeight,
   withoutArrow = false,
+  scrollContainerRef,
+  centerArrowToTrigger = true,
   ...tooltipContentProps
 }) {
-  return /* @__PURE__ */ jsx(DropdownMenu.Root, { children: ({ portalPlacement }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+  return /* @__PURE__ */ jsx(DropdownMenu.Root, { children: ({ portalPlacement, triggerRef }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, triggerEvent, children }),
     /* @__PURE__ */ jsx(
       DropdownMenu.Portal,
       {
         align,
         position,
-        offset: TOOLTIP_OFFSET,
+        offset: TOOLTIP_CONTENT_ARROW.height,
         maxWidth,
         maxHeight,
+        scrollContainerRef,
+        style: {
+          ...!withoutArrow && centerArrowToTrigger && getCenteredPortalShiftStyle({ portalPlacement, triggerRef })
+        },
         children: /* @__PURE__ */ jsx(
           TooltipContent,
           {

package/dist/style.css

@@ -1863,13 +1863,9 @@ textarea {
   }
 }
 @layer ui_baza_components {
-  ._tooltipContent_1267q_2 {
-    --tooltip-content-arrow-width: 16px;
-    --tooltip-content-arrow-height: 8px;
+  ._tooltipContent_ww0bo_2 {
     --tooltip-content-arrow-square-side: calc(var(--tooltip-content-arrow-height) * sqrt(2));
     --tooltip-content-arrow-border-radius: 2px;
-    --tooltip-content-arrow-offset-inline: var(--space-xl);
-    --tooltip-content-arrow-offset-block: var(--space-lg);
 
     display: flex;
     position: relative;
@@ -1957,7 +1953,7 @@ textarea {
     }
   }
 
-  ._tooltipTitle_1267q_96 {
+  ._tooltipTitle_ww0bo_92 {
     font-weight: var(--font-weight-medium);
     font-size: var(--size-md);
     line-height: var(--line-height-lg);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grandbazar/ui-baza",
-  "version": "1.2.8",
+  "version": "1.2.10",
   "description": "A lightweight and modular UI kit for building modern, accessible web interfaces. Designed for flexibility, scalability, and developer happiness.",
   "repository": {
     "type": "git",