x-ui-design 0.8.16 → 0.8.17

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import require$$1 from 'react/jsx-runtime';
-import React, { useRef, useState, Children, isValidElement, Fragment, Suspense, useEffect, useContext, useMemo, useCallback, createContext, useImperativeHandle, useLayoutEffect } from 'react';
+import React, { useRef, useState, Children, isValidElement, Fragment, Suspense, useEffect, useContext, useMemo, useCallback, createContext, useImperativeHandle, useLayoutEffect, cloneElement } from 'react';
 import { createPortal } from 'react-dom';
 import ReactDOMServer from 'react-dom/server';
 
@@ -5497,7 +5497,7 @@ var Dropdown$1 = /*#__PURE__*/Object.freeze({
 	default: Dropdown
 });
 
-var css_248z$1 = ".xUi-popover{&:before{content:\"\";height:8px;left:0;position:absolute;top:-8px;width:100%;z-index:10000}}.xUi-popover-wrapper{display:inline-block;position:relative}.xUi-popover-wrapper-content{cursor:pointer}.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}.xUi-popover-arrow{background:var(--xui-background-color);border-left:.5px solid var(--xui-border-color);border-top:.5px solid var(--xui-border-color);height:10px;left:12px;position:absolute;top:-6px;transform:rotate(45deg);width:10px}.xUi-popover-arrow.bottom{border-bottom:.5px solid var(--xui-border-color);border-left:unset;border-right:.5px solid var(--xui-border-color);border-top:unset;bottom:-6px;top:unset}";
+var css_248z$1 = ".xUi-popover{&:before{content:\"\";height:10px;left:0;position:absolute;top:-10px;width:100%;z-index:10000}}.xUi-popover-wrapper-content{cursor:pointer}.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}.xUi-popover-arrow{background:var(--xui-background-color);border-left:.5px solid var(--xui-border-color);border-top:.5px solid var(--xui-border-color);height:10px;left:12px;position:absolute;top:-6px;transform:rotate(45deg);width:10px}.xUi-popover-arrow.bottom{border-bottom:.5px solid var(--xui-border-color);border-left:unset;border-right:.5px solid var(--xui-border-color);border-top:unset;bottom:-6px;top:unset}";
 styleInject(css_248z$1);
 
 const Popover = ({
@@ -5530,41 +5530,61 @@ const Popover = ({
     triggerRef,
     getPopupContainer: getPopupContainer?.(triggerRef.current)
   });
-  const toggle = () => {
+  useEffect(() => {
+    const handleClickOutside = e => {
+      if (popupRef.current && !popupRef.current.contains(e.target) && triggerRef.current && !triggerRef.current.contains(e.target)) {
+        setInnerOpen(false);
+        onVisibleChange?.(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  const handleOnClick = useCallback(() => {
     const newState = !isOpen;
     onVisibleChange?.(newState);
     setInnerOpen(newState);
-  };
-  const show = () => {
+  }, [isOpen, trigger]);
+  const handleOnMouseEnter = useCallback(() => {
     setHover(true);
     if (trigger === "hover") {
       onVisibleChange?.(true);
       setInnerOpen(true);
     }
-  };
-  const hide = () => {
+  }, [trigger]);
+  const handleOnMouseLeave = useCallback(() => {
     setHover(false);
     if (trigger === "hover") {
       onVisibleChange?.(false);
       setInnerOpen(false);
     }
-  };
-  const childProps = trigger === "click" ? {
-    onClick: toggle
+  }, [trigger]);
+  const childProps = useMemo(() => trigger === "click" ? {
+    onClick: handleOnClick
   } : {
-    onMouseEnter: show,
-    onMouseLeave: hide
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: `${prefixCls}-wrapper`
-  }, /*#__PURE__*/React.createElement("div", _extends({
-    ref: triggerRef,
-    className: `${prefixCls}-wrapper-content`
-  }, childProps), children), isOpen && /*#__PURE__*/React.createElement(ConditionalWrapper, {
+    onMouseEnter: handleOnMouseEnter,
+    onMouseLeave: handleOnMouseLeave
+  }, [trigger]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, Children.map(children, (child, index) => {
+    if (! /*#__PURE__*/isValidElement(child)) {
+      child = /*#__PURE__*/React.createElement("div", null, child);
+    }
+    return /*#__PURE__*/cloneElement(child, {
+      key: index,
+      ...childProps,
+      ...(index === 0 ? {
+        ref: triggerRef,
+        className: `${prefixCls}-wrapper-content`
+      } : {})
+    });
+  }), isOpen && /*#__PURE__*/React.createElement(ConditionalWrapper, {
     condition: !!getPopupContainer,
     wrapper: element => getPopupContainer ? /*#__PURE__*/createPortal(element, getPopupContainer(popupRef.current)) : /*#__PURE__*/React.createElement(React.Fragment, null, element)
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: popupRef,
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    ref: popupRef
+  }, childProps, {
     className: clsx(prefixCls, `${prefixCls}-${placement}`, overlayClassName),
     style: {
       zIndex: hover ? 1000 : 1,
@@ -5572,7 +5592,7 @@ const Popover = ({
       ...overlayStyle,
       ...dropdownPosition
     }
-  }, title && /*#__PURE__*/React.createElement("div", {
+  }), title && /*#__PURE__*/React.createElement("div", {
     className: `${prefixCls}-title`
   }, title), /*#__PURE__*/React.createElement("div", {
     className: `${prefixCls}-inner`