@grandbazar/ui-baza 1.2.8 → 1.2.9

package/dist/index.cjs

@@ -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;
 }
 
@@ -2016,7 +2073,8 @@ function DropdownPortal({
   isNested,
   offset = DROPDOWN_PORTAL_DEFAULT_OFFSET,
   maxWidth,
-  maxHeight
+  maxHeight,
+  scrollContainerRef
 }) {
   const { portalRef, triggerEvent, isOpen } = useDropdownMenuContext();
   const handlersByTrigger = usePortalHandlersByEventTrigger();
@@ -2025,7 +2083,8 @@ function DropdownPortal({
     position,
     offset,
     ...maxWidth && { portalWidth: maxWidth + offset },
-    ...maxHeight && { portalHeight: maxHeight + offset }
+    ...maxHeight && { portalHeight: maxHeight + offset },
+    scrollContainerRef
   });
   if (!isOpen || !portalPosition) {
     return null;
@@ -2046,7 +2105,7 @@ function DropdownPortal({
         children
       }
     ),
-    document.body
+    scrollContainerRef?.current ?? document.body
   );
 }
 
@@ -2774,6 +2833,7 @@ function TooltipRoot({
   maxWidth,
   maxHeight,
   withoutArrow = false,
+  scrollContainerRef,
   ...tooltipContentProps
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Root, { children: ({ portalPlacement }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -2786,6 +2846,7 @@ function TooltipRoot({
         offset: TOOLTIP_OFFSET,
         maxWidth,
         maxHeight,
+        scrollContainerRef,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           TooltipContent,
           {

package/dist/index.d.ts

@@ -190,7 +190,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, align, position, isNested, offset, maxWidth, maxHeight, scrollContainerRef, }: TDropdownPortalProps): ReactPortal | null;
 
 declare function DropdownRoot({ children }: TDropdownRootProps): JSX.Element;
 
@@ -670,6 +670,7 @@ declare type TDropdownPortalProps = {
     offset?: number;
     maxWidth?: number;
     maxHeight?: number;
+    scrollContainerRef?: React.RefObject<HTMLElement | null>;
 };
 
 declare type TDropdownRootProps = {
@@ -742,7 +743,7 @@ export declare namespace Tooltip {
 
 declare function TooltipContent({ className, role, title, description, arrowAlign, arrowPosition, arrowOffset, ...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, ...tooltipContentProps }: TTooltipRootProps): JSX.Element;
 
 declare type TPaginationItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     size?: TArrayElement<typeof PAGINATION_SIZES>;
@@ -882,6 +883,7 @@ declare type TTooltipRootProps = Omit<React.ComponentProps<typeof TooltipContent
     maxWidth?: number;
     maxHeight?: number;
     withoutArrow?: boolean;
+    scrollContainerRef?: React.RefObject<HTMLElement | null>;
 };
 
 declare type TWithRef<TProps, TElement = HTMLElement> = TProps & {

package/dist/index.js

@@ -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;
 }
 
@@ -2012,7 +2069,8 @@ function DropdownPortal({
   isNested,
   offset = DROPDOWN_PORTAL_DEFAULT_OFFSET,
   maxWidth,
-  maxHeight
+  maxHeight,
+  scrollContainerRef
 }) {
   const { portalRef, triggerEvent, isOpen } = useDropdownMenuContext();
   const handlersByTrigger = usePortalHandlersByEventTrigger();
@@ -2021,7 +2079,8 @@ function DropdownPortal({
     position,
     offset,
     ...maxWidth && { portalWidth: maxWidth + offset },
-    ...maxHeight && { portalHeight: maxHeight + offset }
+    ...maxHeight && { portalHeight: maxHeight + offset },
+    scrollContainerRef
   });
   if (!isOpen || !portalPosition) {
     return null;
@@ -2042,7 +2101,7 @@ function DropdownPortal({
         children
       }
     ),
-    document.body
+    scrollContainerRef?.current ?? document.body
   );
 }
 
@@ -2770,6 +2829,7 @@ function TooltipRoot({
   maxWidth,
   maxHeight,
   withoutArrow = false,
+  scrollContainerRef,
   ...tooltipContentProps
 }) {
   return /* @__PURE__ */ jsx(DropdownMenu.Root, { children: ({ portalPlacement }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
@@ -2782,6 +2842,7 @@ function TooltipRoot({
         offset: TOOLTIP_OFFSET,
         maxWidth,
         maxHeight,
+        scrollContainerRef,
         children: /* @__PURE__ */ jsx(
           TooltipContent,
           {

package/package.json

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