x-ui-design 0.8.47 → 0.8.49

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

@@ -4,7 +4,7 @@ type TPosition = {
     isOpen: boolean;
     popupRef: RefObject<HTMLDivElement | null>;
     triggerRef: RefObject<HTMLDivElement | null>;
-    getPopupContainer?: HTMLElement;
+    getPopupContainer?: HTMLElement | ParentNode;
     placement?: Placement;
     offset?: number;
     listenPopoverPossitions?: CSSProperties;

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

@@ -34,7 +34,7 @@ export type TDatePickerProps = DefaultProps & {
     onChange?: (date: RuleType | RuleType[], dateString: string | string[]) => void;
     onCalendarChange?: (date: RuleType | RuleType[], dateString: string | string[], info: BaseInfo) => void;
     onVisibleChange?: ((open: boolean) => void) | undefined;
-    getPopupContainer?: (node: HTMLElement) => HTMLElement;
+    getPopupContainer?: ((node: HTMLElement) => HTMLElement | ParentNode) | undefined;
     showToday?: boolean;
     inputReadOnly?: boolean;
     picker?: PanelMode;
@@ -115,7 +115,7 @@ export type TimePickerProps = DefaultProps & {
     onSelect?: ((value: Date | null) => void) | undefined;
     showNow?: boolean;
     clearIcon?: ReactNode;
-    getPopupContainer?: (node: HTMLElement) => HTMLElement;
+    getPopupContainer?: ((node: HTMLElement) => HTMLElement | ParentNode) | undefined;
     suffixIcon?: ReactNode;
     placeholder?: string;
     placement?: Placement;

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;
@@ -21,7 +20,7 @@ export type DropdownProps = DefaultProps & {
     placement?: Placement;
     overlayClassName?: string;
     overlayStyle?: CSSProperties;
-    getPopupContainer?: (node: HTMLElement) => HTMLElement;
+    getPopupContainer?: ((node: HTMLElement) => HTMLElement | ParentNode) | undefined;
     destroyOnHidden?: boolean;
     disabled?: boolean;
     arrow?: boolean;

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;
@@ -12,5 +12,5 @@ export type PopoverProps = DefaultProps & {
     visible?: boolean;
     listenPopoverPossitions?: CSSProperties;
     onVisibleChange?: ((open: boolean) => void) | undefined;
-    getPopupContainer?: ((node: HTMLElement) => HTMLElement) | undefined;
+    getPopupContainer?: ((node: HTMLElement) => HTMLElement | ParentNode) | undefined;
 };

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

@@ -43,7 +43,7 @@ export type SelectProps = DefaultProps & {
     searchIcon?: ReactNode;
     open?: boolean;
     notFoundContent?: ReactNode;
-    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    getPopupContainer?: ((node: HTMLElement) => HTMLElement | ParentNode) | undefined;
     dropdownRender?: (menu: ReactNode) => ReactNode;
     feedbackIcons?: boolean;
     placement?: Placement;

package/dist/index.esm.js

@@ -2744,7 +2744,6 @@ const DatePicker = ({
   const initialDate = value || defaultValue;
   const initialPickerDate = defaultPickerValue || initialDate;
   const popupRef = useRef(null);
-  const popuptriggerRef = useRef(null);
   const DateNow = new Date();
   const [selectedDate, setSelectedDate] = useState(initialDate);
   const [selectedDatePlaceholder, setSelectedDatePlaceholder] = useState(initialDate ? formatDate(initialDate, format) : undefined);
@@ -2788,11 +2787,6 @@ const DatePicker = ({
       controller.abort();
     };
   }, [isOpen]);
-  useEffect(() => {
-    if (getPopupContainer && triggerRef.current) {
-      popuptriggerRef.current = getPopupContainer(triggerRef.current);
-    }
-  }, [getPopupContainer]);
   const daysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
   const firstDayOfMonth = (year, month) => new Date(year, month, 1).getDay();
   function formatDate(date, format) {
@@ -3700,7 +3694,7 @@ const TimePicker = ({
     }
   }, suffixIcon))), open && /*#__PURE__*/React.createElement(ConditionalWrapper, {
     condition: getPopupContainer !== undefined,
-    wrapper: element => getPopupContainer ? /*#__PURE__*/createPortal(element, getPopupContainer(popupRef.current)) : /*#__PURE__*/React.createElement(React.Fragment, null, element)
+    wrapper: element => getPopupContainer ? /*#__PURE__*/createPortal(element, getPopupContainer(inputRef.current)) : /*#__PURE__*/React.createElement(React.Fragment, null, element)
   }, /*#__PURE__*/React.createElement("div", {
     ref: popupRef,
     style: dropdownPosition,
@@ -5354,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 = ({
@@ -5378,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);
@@ -5419,46 +5412,43 @@ 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);
     }
   };
   const popup = /*#__PURE__*/React.createElement(ConditionalWrapper, {
     condition: getPopupContainer !== undefined,
-    wrapper: element => getPopupContainer ? /*#__PURE__*/createPortal(element, getPopupContainer(popupRef.current)) : /*#__PURE__*/React.createElement(React.Fragment, null, element)
+    wrapper: element => getPopupContainer ? /*#__PURE__*/createPortal(element, getPopupContainer(triggerRef.current)) : /*#__PURE__*/React.createElement(React.Fragment, null, element)
   }, /*#__PURE__*/React.createElement("div", {
     ref: popupRef,
     className: `${prefixCls}-overlay ${prefixCls}-${placement} ${overlayClassName}`,
     style: {
-      zIndex: _hover ? 1000 : 0,
+      zIndex: 10000,
       ...overlayStyle,
       ...dropdownPosition
     }
@@ -5493,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));
@@ -5532,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 = ({
@@ -5623,13 +5614,13 @@ const Popover = ({
   }, [children, style, childProps]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, _children, isOpen && /*#__PURE__*/React.createElement(ConditionalWrapper, {
     condition: !!getPopupContainer,
-    wrapper: element => getPopupContainer ? /*#__PURE__*/createPortal(element, getPopupContainer(popupRef.current)) : /*#__PURE__*/React.createElement(React.Fragment, null, element)
+    wrapper: element => getPopupContainer ? /*#__PURE__*/createPortal(element, getPopupContainer(triggerRef.current)) : /*#__PURE__*/React.createElement(React.Fragment, null, element)
   }, /*#__PURE__*/React.createElement("div", _extends({
     ref: popupRef
   }, childProps, {
     className: clsx(prefixCls, `${prefixCls}-${placement}`, overlayClassName),
     style: {
-      zIndex: 1000,
+      zIndex: 10000,
       position: "absolute",
       ...overlayStyle,
       ...dropdownPosition