x-ui-design 0.8.12 → 0.8.13

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, title, overlayClassName, overlayStyle, onVisibleChange, getPopupContainer }: PopoverProps) => React.JSX.Element;
+declare const Popover: ({ prefixCls, content, children, trigger, placement, open, visible, title, overlayClassName, overlayStyle, onVisibleChange, getPopupContainer }: PopoverProps) => React.JSX.Element;
 export default Popover;

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

@@ -9,6 +9,7 @@ export interface PopoverProps {
     overlayStyle?: CSSProperties;
     overlayClassName?: string;
     title?: string | ReactNode;
+    visible?: boolean;
     onVisibleChange?: ((open: boolean) => void) | undefined;
     getPopupContainer?: ((node: HTMLElement) => HTMLElement) | undefined;
 }

package/dist/index.esm.js

@@ -4907,6 +4907,7 @@ const Popover = ({
   trigger = "click",
   placement = "bottom",
   open,
+  visible,
   title,
   overlayClassName = '',
   overlayStyle = {},
@@ -4916,8 +4917,8 @@ const Popover = ({
   const triggerRef = useRef(null);
   const popupRef = useRef(null);
   const [innerOpen, setInnerOpen] = useState(false);
-  const isOpen = open !== undefined ? open : innerOpen;
-  const [_hover, setHover] = useState(isOpen);
+  const [hover, setHover] = useState(false);
+  const isOpen = visible !== undefined ? visible : open !== undefined ? open : innerOpen;
   const {
     dropdownPosition,
     shouldShowAbove
@@ -4930,7 +4931,8 @@ const Popover = ({
     getPopupContainer: getPopupContainer?.(triggerRef.current)
   });
   const toggle = () => {
-    onVisibleChange ? onVisibleChange(!isOpen) : setInnerOpen(!isOpen);
+    const newState = !isOpen;
+    onVisibleChange ? onVisibleChange(newState) : setInnerOpen(newState);
   };
   const show = () => {
     setHover(true);
@@ -4957,20 +4959,20 @@ const Popover = ({
   }, /*#__PURE__*/React.createElement("div", _extends({
     className: `${prefixCls}-wrapper-content`
   }, childProps), children), isOpen && /*#__PURE__*/React.createElement(ConditionalWrapper, {
-    condition: getPopupContainer !== undefined,
+    condition: !!getPopupContainer,
     wrapper: element => getPopupContainer ? /*#__PURE__*/createPortal(element, getPopupContainer(popupRef.current)) : /*#__PURE__*/React.createElement(React.Fragment, null, element)
   }, /*#__PURE__*/React.createElement("div", {
     ref: popupRef,
-    className: clsx(prefixCls, `${prefixCls}-${placement}`, `${overlayClassName}`),
+    className: clsx(prefixCls, `${prefixCls}-${placement}`, overlayClassName),
     style: {
-      zIndex: _hover ? 1000 : 1,
+      zIndex: hover ? 1000 : 1,
       ...overlayStyle,
       position: "absolute",
       ...dropdownPosition
     }
-  }, title ? /*#__PURE__*/React.createElement("div", {
+  }, title && /*#__PURE__*/React.createElement("div", {
     className: `${prefixCls}-title`
-  }, title) : null, /*#__PURE__*/React.createElement("div", {
+  }, title), /*#__PURE__*/React.createElement("div", {
     className: `${prefixCls}-inner`
   }, content), /*#__PURE__*/React.createElement("div", {
     className: `${prefixCls}-arrow ${shouldShowAbove ? 'bottom' : ''}`