x-ui-design 0.8.48 → 0.8.50

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

@@ -1,6 +1,5 @@
 import { CSSProperties, MouseEvent, ReactElement, ReactNode, RefObject } from "react";
-import { DefaultProps, Placement } from ".";
-export type TriggerType = 'click' | 'hover' | 'contextMenu' | Array<TriggerType>;
+import { DefaultProps, Placement, TriggerType } from ".";
 export interface DropdownItemType {
     key: string;
     label?: ReactNode;

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

@@ -25,3 +25,4 @@ export type SyntheticBaseEvent = {
     currentTarget: EventTarget;
 };
 export type Placement = 'bottomLeft' | 'bottom' | 'bottomRight' | 'topLeft' | 'top' | 'topRight' | 'left' | 'right';
+export type TriggerType = 'click' | 'hover' | 'contextMenu' | Array<TriggerType>;

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

@@ -1,9 +1,9 @@
 import { CSSProperties, ReactNode } from "react";
-import { DefaultProps } from ".";
+import { DefaultProps, TriggerType } from ".";
 export type PopoverProps = DefaultProps & {
     content: ReactNode;
     children: ReactNode;
-    trigger?: "click" | "hover";
+    trigger?: TriggerType;
     placement?: "top" | "bottom" | "left" | "right" | "topRight" | "bottomRight" | "topLeft" | "bottomLeft";
     open?: boolean;
     overlayStyle?: CSSProperties;

package/dist/index.esm.js

@@ -2620,7 +2620,7 @@ const usePosition = ({
     }
     const inputRect = triggerRef.current?.getBoundingClientRect();
     const dropdownHeight = popupRef.current?.offsetHeight || popupRef.current?.offsetHeight || 0;
-    const containerRect = (getPopupContainer || getScrollParent(triggerRef.current, true) || document.body).getBoundingClientRect();
+    const containerRect = (triggerRef.current || getPopupContainer || getScrollParent(triggerRef.current, true) || document.body).getBoundingClientRect();
     const spaceAbove = inputRect.top - containerRect.top;
     const spaceBelow = containerRect.bottom - inputRect.bottom;
     const _shouldShowAbove = spaceBelow < dropdownHeight && spaceAbove > dropdownHeight;
@@ -5348,7 +5348,7 @@ var Menu$1 = /*#__PURE__*/Object.freeze({
 	default: Menu
 });
 
-var css_248z$2 = ".xUi-dropdown-overlay{background:var(--xui-menu-inline-bg);border:1px solid var(--xui-border-color);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.08);min-width:160px;padding:4px 0;position:absolute;&:before{content:\"\";height:10px;position:absolute;top:-15px;width:100%;z-index:1}}.xUi-dropdown-overlay>div,.xUi-dropdown-overlay>select,.xUi-dropdown-overlay>ul{box-shadow:unset}.xUi-dropdown-overlay .xUi-dropdown-menu{margin:0;padding:0 4px;position:relative;&:before{content:\"\";height:10px;position:absolute;top:-15px;width:100%;z-index:1}}.xUi-dropdown-overlay .xUi-dropdown-item{border-radius:8px;color:var(--xui-text-color);cursor:pointer;font-size:14px;list-style:none;padding:8px 12px;user-select:none}.xUi-dropdown-overlay .xUi-dropdown-item:focus,.xUi-dropdown-overlay .xUi-dropdown-item:hover{background:var(--xui-color-hover);outline:none}.xUi-dropdown-overlay .xUi-dropdown-item.disabled{cursor:not-allowed;opacity:.5}.xUi-dropdown-overlay .xUi-dropdown-item.danger{color:var(--xui-error-color-light);&:hover{background-color:var(--xui-error-color-light);color:var(--xui-background-color)}}.xUi-dropdown-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-dropdown-bottomRight .xUi-dropdown-arrow,.xUi-dropdown-right .xUi-dropdown-arrow,.xUi-dropdown-topRight .xUi-dropdown-arrow{left:unset;right:12px}.xUi-dropdown-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}.xUi-dropdown-arrow.center{left:0;margin:0 auto;right:0}";
+var css_248z$2 = ".xUi-dropdown-overlay{background:var(--xui-menu-inline-bg);border:1px solid var(--xui-border-color);border-radius:8px;box-shadow:0 2px 18px rgba(0,0,0,.08);min-width:160px;padding:4px 0;position:absolute;&:after,&:before{content:\"\";height:10px;position:absolute;top:-10px;width:100%;z-index:1}&:after{bottom:-10px;top:unset}}.xUi-dropdown-overlay>div,.xUi-dropdown-overlay>select,.xUi-dropdown-overlay>ul{box-shadow:unset}.xUi-dropdown-overlay .xUi-dropdown-menu{margin:0;padding:0 4px;position:relative}.xUi-dropdown-overlay .xUi-dropdown-item{border-radius:8px;color:var(--xui-text-color);cursor:pointer;font-size:14px;list-style:none;padding:8px 12px;user-select:none}.xUi-dropdown-overlay .xUi-dropdown-item:focus,.xUi-dropdown-overlay .xUi-dropdown-item:hover{background:var(--xui-color-hover);outline:none}.xUi-dropdown-overlay .xUi-dropdown-item.disabled{cursor:not-allowed;opacity:.5}.xUi-dropdown-overlay .xUi-dropdown-item.danger{color:var(--xui-error-color-light);&:hover{background-color:var(--xui-error-color-light);color:var(--xui-background-color)}}.xUi-dropdown-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-dropdown-bottomRight .xUi-dropdown-arrow,.xUi-dropdown-right .xUi-dropdown-arrow,.xUi-dropdown-topRight .xUi-dropdown-arrow{left:unset;right:12px}.xUi-dropdown-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}.xUi-dropdown-arrow.center{left:0;margin:0 auto;right:0}";
 styleInject(css_248z$2);
 
 const Dropdown = ({
@@ -5372,7 +5372,6 @@ const Dropdown = ({
   prefixCls = prefixClsDropdown
 }) => {
   const [open, setOpen] = useState(controlledOpen ?? defaultOpen);
-  const [_hover, setHover] = useState(controlledOpen ?? defaultOpen);
   const isControlled = controlledOpen !== undefined;
   const triggerRef = useRef(null);
   const popupRef = useRef(null);
@@ -5413,34 +5412,31 @@ const Dropdown = ({
     onVisibleChange?.(next);
   };
   useEffect(() => {
-    const handleClick = e => {
-      if (!open) {
-        return;
-      }
-      const target = e.target;
-      if (triggerRef.current && !triggerRef.current.contains(target) && !popupRef.current?.contains(target)) {
+    const handleClickOutside = e => {
+      if (popupRef.current && !popupRef.current.contains(e.target) && triggerRef.current && !triggerRef.current.contains(e.target)) {
         setOpenInternal(false);
+        onVisibleChange?.(false);
       }
     };
-    document.addEventListener('mousedown', handleClick);
-    return () => document.removeEventListener('mousedown', handleClick);
-  }, [open]);
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
   const triggers = Array.isArray(trigger) ? trigger : [trigger];
   const onTriggerClick = e => {
     e.preventDefault();
     e.stopPropagation();
-    if (triggers.includes('click')) {
+    if (popupRef.current && !popupRef.current.contains(e.target) && triggerRef.current && !triggerRef.current.contains(e.target) && triggers.includes('click')) {
       setOpenInternal(!open);
     }
   };
   const onTriggerMouseEnter = () => {
-    setHover(true);
     if (triggers.includes('hover')) {
       setOpenInternal(true);
     }
   };
   const onTriggerMouseLeave = () => {
-    setHover(false);
     if (triggers.includes('hover')) {
       setOpenInternal(false);
     }
@@ -5452,7 +5448,7 @@ const Dropdown = ({
     ref: popupRef,
     className: `${prefixCls}-overlay ${prefixCls}-${placement} ${overlayClassName}`,
     style: {
-      zIndex: _hover ? 1000 : 0,
+      zIndex: 10000,
       ...overlayStyle,
       ...dropdownPosition
     }
@@ -5487,7 +5483,8 @@ const Dropdown = ({
     tabIndex: disabled ? -1 : 0,
     "aria-haspopup": "menu",
     style: {
-      width: 'fit-content'
+      width: 'fit-content',
+      height: '-webkit-fill-available'
     },
     "aria-expanded": open
   }, children, open && popup, !open && !destroyOnHidden && null));
@@ -5526,7 +5523,7 @@ var Dropdown$1 = /*#__PURE__*/Object.freeze({
 	default: Dropdown
 });
 
-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;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}.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-bottomRight .xUi-popover-arrow,.xUi-popover-right .xUi-popover-arrow,.xUi-popover-topRight .xUi-popover-arrow{left:unset;right:12px}.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}.xUi-popover-arrow.center{left:0;margin:0 auto;right:0}";
+var css_248z$1 = ".xUi-popover{&:after,&:before{content:\"\";height:10px;left:0;position:absolute;top:-10px;width:100%;z-index:10000}&:after{bottom:-10px;top:unset}}.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}.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-bottomRight .xUi-popover-arrow,.xUi-popover-right .xUi-popover-arrow,.xUi-popover-topRight .xUi-popover-arrow{left:unset;right:12px}.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}.xUi-popover-arrow.center{left:0;margin:0 auto;right:0}";
 styleInject(css_248z$1);
 
 const Popover = ({
@@ -5573,29 +5570,32 @@ const Popover = ({
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
-  const handleOnClick = useCallback(() => {
+  const triggers = Array.isArray(trigger) ? trigger : [trigger];
+  const handleOnClick = useCallback(e => {
     const newState = !isOpen;
-    onVisibleChange?.(newState);
-    setInnerOpen(newState);
-  }, [isOpen, trigger]);
+    if (triggers.includes('click')) {
+      onVisibleChange?.(newState);
+      setInnerOpen(newState);
+    }
+  }, [isOpen, triggers]);
   const handleOnMouseEnter = useCallback(() => {
-    if (trigger === "hover") {
+    if (triggers.includes("hover")) {
       onVisibleChange?.(true);
       setInnerOpen(true);
     }
-  }, [trigger]);
+  }, [triggers]);
   const handleOnMouseLeave = useCallback(() => {
-    if (trigger === "hover") {
+    if (triggers.includes("hover")) {
       onVisibleChange?.(false);
       setInnerOpen(false);
     }
-  }, [trigger]);
-  const childProps = useMemo(() => trigger === "click" ? {
+  }, [triggers]);
+  const childProps = useMemo(() => triggers.includes("click") ? {
     onClick: handleOnClick
   } : {
     onMouseEnter: handleOnMouseEnter,
     onMouseLeave: handleOnMouseLeave
-  }, [trigger]);
+  }, [triggers]);
   const _children = useMemo(() => {
     if (Children.count(children) > 1) {
       children = /*#__PURE__*/React.createElement("div", null, children);
@@ -5623,7 +5623,7 @@ const Popover = ({
   }, childProps, {
     className: clsx(prefixCls, `${prefixCls}-${placement}`, overlayClassName),
     style: {
-      zIndex: 1000,
+      zIndex: 10000,
       position: "absolute",
       ...overlayStyle,
       ...dropdownPosition