x-ui-design 0.8.11 → 0.8.13

package/dist/index.js

@@ -2442,7 +2442,7 @@ const RangePicker = ({
   picker = 'date',
   locale,
   disabledDate,
-  onOpenChange,
+  onVisibleChange,
   onCalendarChange,
   style = {},
   className = '',
@@ -2482,7 +2482,7 @@ const RangePicker = ({
     const handleClickOutside = event => {
       if (popupRef.current && !popupRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
         setIsOpen(false);
-        onOpenChange?.(false);
+        onVisibleChange?.(false);
       }
     };
     document.addEventListener('mousedown', handleClickOutside);
@@ -2507,7 +2507,7 @@ const RangePicker = ({
       onChange?.([begin.toUTCString(), end.toUTCString()], [formatDate(begin), formatDate(end)]);
       onCalendarChange?.([begin.toUTCString(), end.toUTCString()], [formatDate(begin), formatDate(end)], {});
       setIsOpen(false);
-      onOpenChange?.(false);
+      onVisibleChange?.(false);
     }
   };
   const isMonthDisabled = month => {
@@ -2703,7 +2703,7 @@ const RangePicker = ({
       e.stopPropagation();
       if (!isOpen) {
         setIsOpen(!isOpen);
-        onOpenChange?.(!isOpen);
+        onVisibleChange?.(!isOpen);
       }
     }
   }, prefix, /*#__PURE__*/React.createElement("input", {
@@ -4731,7 +4731,7 @@ const Dropdown = ({
   menu,
   open: controlledOpen,
   defaultOpen = false,
-  onOpenChange,
+  onVisibleChange,
   trigger = 'hover',
   placement = 'bottomLeft',
   overlayClassName = '',
@@ -4744,8 +4744,7 @@ const Dropdown = ({
   popupRender,
   className = '',
   overlay,
-  prefixCls = prefixClsDropdown,
-  onVisibleChange
+  prefixCls = prefixClsDropdown
 }) => {
   const [open, setOpen] = React.useState(controlledOpen ?? defaultOpen);
   const [_hover, setHover] = React.useState(controlledOpen ?? defaultOpen);
@@ -4785,7 +4784,7 @@ const Dropdown = ({
     if (!isControlled) {
       setOpen(next);
     }
-    onOpenChange?.(next);
+    onVisibleChange?.(next);
     onVisibleChange?.(next);
   };
   React.useEffect(() => {
@@ -4900,7 +4899,7 @@ var Dropdown$1 = /*#__PURE__*/Object.freeze({
 	default: Dropdown
 });
 
-var css_248z = ".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-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 = ".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}";
 styleInject(css_248z);
 
 const Popover = ({
@@ -4910,15 +4909,18 @@ const Popover = ({
   trigger = "click",
   placement = "bottom",
   open,
+  visible,
+  title,
+  overlayClassName = '',
   overlayStyle = {},
-  onOpenChange,
+  onVisibleChange,
   getPopupContainer
 }) => {
   const triggerRef = React.useRef(null);
   const popupRef = React.useRef(null);
   const [innerOpen, setInnerOpen] = React.useState(false);
-  const isOpen = open !== undefined ? open : innerOpen;
-  const [_hover, setHover] = React.useState(isOpen);
+  const [hover, setHover] = React.useState(false);
+  const isOpen = visible !== undefined ? visible : open !== undefined ? open : innerOpen;
   const {
     dropdownPosition,
     shouldShowAbove
@@ -4931,18 +4933,19 @@ const Popover = ({
     getPopupContainer: getPopupContainer?.(triggerRef.current)
   });
   const toggle = () => {
-    onOpenChange ? onOpenChange(!isOpen) : setInnerOpen(!isOpen);
+    const newState = !isOpen;
+    onVisibleChange ? onVisibleChange(newState) : setInnerOpen(newState);
   };
   const show = () => {
     setHover(true);
     if (trigger === "hover") {
-      onOpenChange ? onOpenChange(true) : setInnerOpen(true);
+      onVisibleChange ? onVisibleChange(true) : setInnerOpen(true);
     }
   };
   const hide = () => {
     setHover(false);
     if (trigger === "hover") {
-      onOpenChange ? onOpenChange(false) : setInnerOpen(false);
+      onVisibleChange ? onVisibleChange(false) : setInnerOpen(false);
     }
   };
   const childProps = trigger === "click" ? {
@@ -4958,18 +4961,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__*/reactDom.createPortal(element, getPopupContainer(popupRef.current)) : /*#__PURE__*/React.createElement(React.Fragment, null, element)
   }, /*#__PURE__*/React.createElement("div", {
     ref: popupRef,
-    className: clsx(prefixCls, `${prefixCls}-${placement}`),
+    className: clsx(prefixCls, `${prefixCls}-${placement}`, overlayClassName),
     style: {
-      zIndex: _hover ? 1000 : 1,
+      zIndex: hover ? 1000 : 1,
       ...overlayStyle,
       position: "absolute",
       ...dropdownPosition
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, title && /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-title`
+  }, title), /*#__PURE__*/React.createElement("div", {
     className: `${prefixCls}-inner`
   }, content), /*#__PURE__*/React.createElement("div", {
     className: `${prefixCls}-arrow ${shouldShowAbove ? 'bottom' : ''}`