@grandbazar/ui-baza 1.2.9 → 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
     }
   );
 }
@@ -2068,6 +2068,7 @@ const styles$g = {
 function DropdownPortal({
   children,
   className,
+  style,
   align = "start",
   position = "bottom",
   isNested,
@@ -2096,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),
@@ -2784,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
@@ -2798,7 +2807,6 @@ function TooltipContent({
   description,
   arrowAlign,
   arrowPosition,
-  arrowOffset,
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2808,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: [
@@ -2823,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,
@@ -2834,19 +2859,23 @@ function TooltipRoot({
   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, scrollContainerRef, }: 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,6 +665,7 @@ 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;
@@ -674,7 +676,7 @@ declare type TDropdownPortalProps = {
 };
 
 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>> & {
@@ -727,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
@@ -741,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, scrollContainerRef, ...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>;
@@ -869,21 +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;
-    scrollContainerRef?: React.RefObject<HTMLElement | null>;
+    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
     }
   );
 }
@@ -2064,6 +2064,7 @@ const styles$g = {
 function DropdownPortal({
   children,
   className,
+  style,
   align = "start",
   position = "bottom",
   isNested,
@@ -2092,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),
@@ -2780,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
@@ -2794,7 +2803,6 @@ function TooltipContent({
   description,
   arrowAlign,
   arrowPosition,
-  arrowOffset,
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
@@ -2804,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: [
@@ -2819,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,
@@ -2830,19 +2855,23 @@ function TooltipRoot({
   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.9",
+  "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",