x-ui-design 0.8.66 → 0.8.68

package/dist/esm/types/components/Popover/Popover.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import { PopoverProps } from "../../types/popover";
 import './style.css';
-declare const Popover: ({ prefixCls, content, children, trigger, placement, open, visible, title, style, overlayClassName, overlayStyle, listenPopoverPossitions, onVisibleChange, getPopupContainer }: PopoverProps) => React.JSX.Element;
+declare const Popover: ({ prefixCls, content, children, trigger, placement, open, visible, title, style, overlayClassName, overlayStyle, listenPopoverPositions, placementPositionOffset, onVisibleChange, getPopupContainer }: PopoverProps) => React.JSX.Element;
 export default Popover;

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

@@ -7,9 +7,10 @@ type TPosition = {
     getPopupContainer?: HTMLElement;
     placement?: Placement;
     offset?: number;
-    listenPopoverPossitions?: CSSProperties;
+    placementPositionOffset?: number;
+    listenPopoverPositions?: CSSProperties;
 };
-export declare const usePosition: ({ isOpen, offset, popupRef, placement, triggerRef, listenPopoverPossitions, getPopupContainer, }: TPosition) => {
+export declare const usePosition: ({ isOpen, offset, popupRef, placement, triggerRef, listenPopoverPositions, getPopupContainer, placementPositionOffset }: TPosition) => {
     showPlacement: string;
     dropdownPosition: CSSProperties;
 };

package/dist/esm/types/types/popover.d.ts

@@ -10,7 +10,8 @@ export type PopoverProps = DefaultProps & {
     overlayClassName?: string;
     title?: string | ReactNode;
     visible?: boolean;
-    listenPopoverPossitions?: CSSProperties;
+    listenPopoverPositions?: CSSProperties;
+    placementPositionOffset?: number;
     onVisibleChange?: ((open: boolean) => void) | undefined;
     getPopupContainer?: ((node: HTMLElement) => HTMLElement) | undefined;
 };

package/dist/index.esm.js

@@ -2600,8 +2600,9 @@ const usePosition = ({
   popupRef,
   placement,
   triggerRef,
-  listenPopoverPossitions,
-  getPopupContainer
+  listenPopoverPositions,
+  getPopupContainer,
+  placementPositionOffset = 1
 }) => {
   const [showPlacement, setShowPlacement] = useState('');
   const [_dropdownPosition, setDropdownPosition] = useState({});
@@ -2635,13 +2636,13 @@ const usePosition = ({
       setDropdownPosition({
         top: (_shouldShowAbove ? triggerRef.current.offsetTop - (popupRef.current?.offsetHeight || dropdownHeight) - offset * 2 : triggerRef.current.offsetTop + triggerRef.current?.offsetHeight) + offset,
         ...(hasRight ? {
-          left: triggerRef.current.offsetLeft + (triggerRef.current?.offsetWidth || 0) - (popupRef.current?.offsetWidth || 0)
+          left: triggerRef.current.offsetLeft + (triggerRef.current?.offsetWidth || 0) - (popupRef.current?.offsetWidth || 0) / placementPositionOffset
         } : {
           left: triggerRef.current.offsetLeft
         })
       });
     }
-  }, [offset, popupRef, placement, triggerRef, getPopupContainer]);
+  }, [offset, popupRef, placement, triggerRef, getPopupContainer, placementPositionOffset]);
   useEffect(() => {
     if (!isOpen) return;
     const _dropdownPosition = () => dropdownPosition();
@@ -2662,7 +2663,7 @@ const usePosition = ({
     return () => {
       controller.abort();
     };
-  }, [isOpen, listenPopoverPossitions, triggerRef, getPopupContainer, dropdownPosition]);
+  }, [isOpen, listenPopoverPositions, triggerRef, getPopupContainer, dropdownPosition]);
   return {
     showPlacement,
     dropdownPosition: {
@@ -5507,7 +5508,8 @@ const Popover = ({
   style = {},
   overlayClassName = '',
   overlayStyle = {},
-  listenPopoverPossitions,
+  listenPopoverPositions,
+  placementPositionOffset,
   onVisibleChange,
   getPopupContainer
 }) => {
@@ -5524,7 +5526,8 @@ const Popover = ({
     popupRef,
     placement,
     triggerRef,
-    listenPopoverPossitions,
+    listenPopoverPositions,
+    placementPositionOffset,
     getPopupContainer: getPopupContainer?.(triggerRef.current)
   });
   useEffect(() => {
@@ -5559,12 +5562,15 @@ const Popover = ({
       setInnerOpen(false);
     }
   }, [triggers]);
-  const childProps = useMemo(() => triggers.includes("click") ? {
-    onClick: handleOnClick
-  } : {
-    onMouseEnter: handleOnMouseEnter,
-    onMouseLeave: handleOnMouseLeave
-  }, [triggers]);
+  const childProps = useMemo(() => ({
+    ...(triggers.includes("click") ? {
+      onClick: handleOnClick
+    } : {}),
+    ...(triggers.includes("hover") ? {
+      onMouseEnter: handleOnMouseEnter,
+      onMouseLeave: handleOnMouseLeave
+    } : {})
+  }), [triggers]);
   const _children = useMemo(() => {
     if (Children.count(children) > 1) {
       children = /*#__PURE__*/React.createElement("div", null, children);
@@ -5583,7 +5589,7 @@ const Popover = ({
         }
       });
     });
-  }, [children, style, childProps]);
+  }, [children, style]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, _children, isOpen && /*#__PURE__*/React.createElement(ConditionalWrapper, {
     condition: !!getPopupContainer,
     wrapper: element => getPopupContainer ? /*#__PURE__*/createPortal(element, getPopupContainer(triggerRef.current)) : /*#__PURE__*/React.createElement(React.Fragment, null, element)