x-ui-design 0.8.88 → 0.8.90

package/dist/esm/types/helpers/index.d.ts

@@ -2,4 +2,10 @@ import { RuleType } from '../types';
 export declare const parseValue: (value: RuleType) => RuleType;
 export declare function createArray(length: number): number[];
 export declare function clsx(...args: RuleType[]): string;
-export declare function getScrollParent(el: HTMLElement | null, includeSelf?: boolean): HTMLElement | null;
+export declare function getElementParentDetails(el: HTMLElement | null, includeSelf?: boolean): {
+    relativePosition: {
+        left: number;
+        top: number;
+    };
+    scrollableParents: HTMLElement | null;
+};

package/dist/esm/types/hooks/usePopupPosition.d.ts

@@ -6,9 +6,9 @@ type TPopupPosition = {
     targetRef: RefObject<HTMLDivElement | null>;
     popupRef: RefObject<HTMLDivElement | null>;
     placement?: Placement;
-    inBody: boolean;
+    popupContainer?: HTMLElement | null;
 };
-export declare const usePopupPosition: ({ open, setOpen, inBody, popupRef, targetRef, placement }: TPopupPosition) => {
+export declare const usePopupPosition: ({ open, setOpen, popupRef, targetRef, placement, popupContainer, }: TPopupPosition) => {
     _placement: Placement;
     popupStyle: CSSProperties;
 };

package/dist/index.esm.js

@@ -1624,19 +1624,43 @@ function clsx(...args) {
     return [];
   }).filter(Boolean).join(' ');
 }
-function getScrollParent(el, includeSelf = false) {
-  if (!el) return null;
+function getElementParentDetails(el, includeSelf = false) {
+  if (!el) {
+    return {
+      relativePosition: {
+        left: 0,
+        top: 0
+      },
+      scrollableParents: null
+    };
+  }
   let current = includeSelf ? el : el.parentElement;
+  const relativePosition = {
+    left: 0,
+    top: 0
+  };
   while (current) {
     const style = getComputedStyle(current);
     const canScroll = ['auto', 'scroll'].includes(style.overflowY) || ['auto', 'scroll'].includes(style.overflowX);
+    if (current.style.position === 'relative') {
+      relativePosition.left += current.offsetLeft;
+      relativePosition.top += current.offsetTop;
+    }
     if (canScroll) {
-      current.style.position = 'relative';
-      return current;
+      return {
+        relativePosition,
+        scrollableParents: current
+      };
     }
     current = current.parentElement;
   }
-  return document.scrollingElement;
+  return {
+    relativePosition: {
+      left: 0,
+      top: 0
+    },
+    scrollableParents: document.scrollingElement
+  };
 }
 
 function flattenChildren(children) {
@@ -2598,100 +2622,135 @@ const OFFSET = 12;
 const usePopupPosition = ({
   open,
   setOpen,
-  inBody,
   popupRef,
   targetRef,
-  placement
+  placement,
+  popupContainer
 }) => {
   const [_placement, _setPlacement] = useState(placement ?? "bottomLeft");
   const [popupPosition, setPopupPosition] = useState({});
+  const inBody = useMemo(() => popupContainer?.tagName === 'BODY', [popupContainer]);
   const calculatePosition = useCallback(e => {
     const container = targetRef.current?.getBoundingClientRect();
     if (!container) {
       return;
     }
-    const scrollableParents = getScrollParent(targetRef.current, true);
-    const scrollSameTarget = e?.target === scrollableParents;
-    if (!inBody) {
-      const hidePopupFromTop = Math.round((targetRef.current?.offsetTop || 0) - (scrollableParents?.scrollTop || 0) + container?.height);
-      const hidePopupFromBottom = Math.round((targetRef.current?.offsetTop || 0) - (scrollableParents?.offsetHeight || 0) - (scrollableParents?.scrollTop || 0) + container?.height);
-      const spaceAboveFromTop = hidePopupFromTop - Math.round((popupRef.current?.clientHeight || 0) + container?.height + OFFSET);
-      const spaceAboveFromBottom = -Math.round((popupRef.current?.clientHeight || 0) + container?.height - OFFSET);
-      if (spaceAboveFromBottom <= hidePopupFromBottom) {
-        _setPlacement(_placement.replace('bottom', 'top'));
+    const {
+      scrollableParents,
+      relativePosition
+    } = getElementParentDetails(targetRef.current, true);
+    const _containsElement = scrollableParents?.contains(popupContainer) && popupContainer !== scrollableParents;
+    const positions = !popupContainer ? {
+      top: (targetRef.current?.offsetTop || 0) + OFFSET,
+      left: targetRef.current?.offsetLeft || 0
+    } : _containsElement ? {
+      top: (targetRef.current?.clientLeft || 0) + (targetRef.current?.offsetTop || 0) + OFFSET,
+      left: (targetRef.current?.clientLeft || 0) + (targetRef.current?.offsetLeft || 0)
+    } : inBody ? {
+      top: container.top,
+      left: container.left - (targetRef.current?.clientWidth || 0) / 2
+    } : {
+      top: (relativePosition.top || 0) + (targetRef.current?.offsetTop || 0) - (scrollableParents?.offsetTop || 0) + OFFSET,
+      left: relativePosition.left + (targetRef.current?.offsetLeft || 0) - (targetRef.current?.clientWidth || 0) / 2
+    };
+    if (!inBody && popupRef.current) {
+      const popupRect = popupRef.current.getBoundingClientRect();
+      const availableSpace = {
+        top: container.top - (popupRect.height + OFFSET),
+        bottom: (scrollableParents?.clientHeight || 0) - (container.bottom + popupRect.height + OFFSET),
+        left: container.left - (popupRect.width + OFFSET),
+        right: (scrollableParents?.clientWidth || 0) - (container.right + popupRect.width + OFFSET)
+      };
+      let newPlacement = _placement;
+      if (availableSpace.bottom < 0 && availableSpace.top > 0) {
+        newPlacement = newPlacement.replace('bottom', 'top');
+      }
+      if (availableSpace.top < 0 && availableSpace.bottom > 0) {
+        newPlacement = newPlacement.replace('top', 'bottom');
       }
-      if (spaceAboveFromTop <= 0) {
-        _setPlacement(_placement.replace('top', 'bottom'));
+      if (availableSpace.left < 0 && availableSpace.right > 0) {
+        newPlacement = newPlacement.replace('Right', 'Left');
       }
+      if (availableSpace.right < 0 && availableSpace.left > 0) {
+        newPlacement = newPlacement.replace('Left', 'Right');
+      }
+      _setPlacement(newPlacement);
     }
-    if (scrollSameTarget && inBody) {
+    if (e?.target === scrollableParents && inBody) {
       setOpen(false);
       setPopupPosition({});
       return;
     }
     const _calculation = () => {
-      const _placementBottom = !_placement.includes('bottom') ? 0 : (inBody ? (targetRef.current?.offsetTop || 0) + (targetRef.current?.clientHeight || 0) - (scrollableParents?.scrollTop || 0) + (scrollableParents?.offsetTop || 0) : (targetRef.current?.offsetTop || 0) + (targetRef.current?.clientHeight || 0)) + OFFSET;
-      const _placementTop = !_placement.includes('top') ? 0 : (inBody ? (targetRef.current?.offsetTop || 0) - (popupRef.current?.clientHeight || 0) - (scrollableParents?.scrollTop || 0) + (scrollableParents?.offsetTop || 0) : (targetRef.current?.offsetTop || 0) - (popupRef.current?.clientHeight || 0)) - OFFSET;
-      const _positionLeft = inBody ? container.left : targetRef.current?.offsetLeft || 0;
       switch (_placement) {
         case "bottom":
           setPopupPosition({
-            top: _placementBottom,
-            left: _positionLeft + (container.width || 0) / 2 - (popupRef.current?.offsetWidth || 0) / 2
+            top: positions.top + container.height,
+            left: positions.left + (container.width || 0) / 2 - (popupRef.current?.offsetWidth || 0) / 2
           });
           break;
         case "bottomLeft":
           setPopupPosition({
-            top: _placementBottom,
-            left: _positionLeft
+            top: positions.top + container.height,
+            left: positions.left
           });
           break;
         case "bottomRight":
           setPopupPosition({
-            top: _placementBottom,
-            left: _positionLeft + (container.width || 0) - (popupRef.current?.offsetWidth || 0)
+            top: positions.top + container.height,
+            left: positions.left + (container.width || 0) - (popupRef.current?.offsetWidth || 0)
           });
           break;
         case "top":
           setPopupPosition({
-            top: _placementTop,
-            left: _positionLeft + (container.width || 0) / 2 - (popupRef.current?.offsetWidth || 0) / 2
+            top: positions.top - (popupRef.current?.clientHeight || 0) - OFFSET * 2,
+            left: positions.left + (container.width || 0) / 2 - (popupRef.current?.offsetWidth || 0) / 2
           });
           break;
         case "topLeft":
           setPopupPosition({
-            top: _placementTop,
-            left: _positionLeft
+            top: positions.top - (popupRef.current?.clientHeight || 0) - OFFSET * 2,
+            left: positions.left
           });
           break;
         case "topRight":
           setPopupPosition({
-            top: _placementTop,
-            left: _positionLeft + (container.width || 0) - (popupRef.current?.offsetWidth || 0)
+            top: positions.top - (popupRef.current?.clientHeight || 0) - OFFSET * 2,
+            left: positions.left + (container.width || 0) - (popupRef.current?.offsetWidth || 0)
           });
           break;
       }
     };
     _calculation();
-  }, [targetRef, popupRef, inBody, _placement, setOpen]);
+  }, [targetRef, popupRef, popupContainer, inBody, _placement, setOpen]);
   useEffect(() => {
     if (!open) {
       return;
     }
-    calculatePosition(undefined);
+    const setPositionRelative = position => {
+      scrollableParents.style.position = position;
+      if (popupContainer) {
+        popupContainer.style.position = position;
+      }
+    };
     const controller = new AbortController();
     const options = {
       passive: true,
       signal: controller.signal
     };
-    const scrollableParents = getScrollParent(targetRef.current, true);
+    const {
+      scrollableParents
+    } = getElementParentDetails(targetRef.current, true);
     scrollableParents?.addEventListener("scroll", calculatePosition, options);
+    setPositionRelative('relative');
+    calculatePosition();
     document.body.addEventListener("scroll", calculatePosition, options);
     document.body.addEventListener("resize", calculatePosition, options);
     return () => {
       controller.abort();
+      setPositionRelative('unset');
     };
-  }, [inBody, open, targetRef, calculatePosition]);
+  }, [open, targetRef, popupContainer, inBody, calculatePosition]);
   return {
     _placement,
     popupStyle: {
@@ -2765,7 +2824,7 @@ const DatePicker = ({
     placement,
     open: isOpen,
     setOpen: setIsOpen,
-    inBody: getPopupContainer?.(targetRef.current)?.tagName === 'BODY'
+    popupContainer: getPopupContainer?.(targetRef.current)
   });
   useEffect(() => {
     const _date = value || defaultValue;
@@ -3100,7 +3159,7 @@ const RangePicker = ({
     placement,
     open: isOpen,
     setOpen: setIsOpen,
-    inBody: getPopupContainer?.(targetRef.current)?.tagName === 'BODY'
+    popupContainer: getPopupContainer?.(targetRef.current)
   });
   const localeMonths = locale?.shortMonths || Array.from({
     length: 12
@@ -3420,7 +3479,7 @@ const TimePicker = ({
     placement,
     targetRef,
     setOpen: setOpen,
-    inBody: getPopupContainer?.(targetRef.current)?.tagName === 'BODY'
+    popupContainer: getPopupContainer?.(targetRef.current)
   });
   useEffect(() => {
     setInnerValue(propValue || defaultValue ? new Date(propValue || defaultValue) : null);
@@ -5398,7 +5457,7 @@ const Dropdown = ({
     popupRef,
     placement,
     setOpen,
-    inBody: getPopupContainer?.(targetRef.current)?.tagName === 'BODY'
+    popupContainer: getPopupContainer?.(targetRef.current)
   });
   useEffect(() => {
     if (isControlled) {
@@ -5534,7 +5593,7 @@ var Dropdown$1 = /*#__PURE__*/Object.freeze({
 	default: Dropdown
 });
 
-var css_248z$1 = ".xUi-popover-wrapper-content{cursor:pointer;max-width:fit-content;width:-webkit-fill-available}.xUi-popover{background:var(--xui-background-color);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.15);padding:8px 12px;width:max-content;z-index:1000}.xUi-popover-title{padding:4px}.xUi-popover-inner{color:var(--xui-text-color);font-size:14px}";
+var css_248z$1 = ".xUi-popover-wrapper-content{cursor:pointer;max-height:fit-content;max-width:fit-content;width:-webkit-fill-available}.xUi-popover{background:var(--xui-background-color);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.15);padding:8px 12px;width:max-content;z-index:1000}.xUi-popover-title{padding:4px}.xUi-popover-inner{color:var(--xui-text-color);font-size:14px}";
 styleInject(css_248z$1);
 
 const Popover = ({
@@ -5567,7 +5626,7 @@ const Popover = ({
     placement,
     open: isOpen,
     setOpen: setInnerOpen,
-    inBody: getPopupContainer?.(targetRef.current)?.tagName === 'BODY'
+    popupContainer: getPopupContainer?.(targetRef.current)
   });
   useEffect(() => {
     const handleClickOutside = e => {