x-ui-design 0.3.30 → 0.3.32

package/dist/esm/types/components/Select/Select.d.ts

@@ -40,7 +40,7 @@ declare const Select: React.ForwardRefExoticComponent<import("../../types").Defa
     suffixIcon?: ReactNode;
     open?: boolean;
     notFoundContent?: ReactNode;
-    getPopupContainer?: (triggerNode: HTMLElement | null) => HTMLElement;
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
     dropdownRender?: (menu: ReactNode) => ReactNode;
     feedbackIcons?: boolean;
     placement?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight";

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

@@ -138,7 +138,7 @@ declare const Select: import("react").ComponentType<import("@/types").DefaultPro
     suffixIcon?: import("react").ReactNode;
     open?: boolean;
     notFoundContent?: import("react").ReactNode;
-    getPopupContainer?: (triggerNode: HTMLElement | null) => HTMLElement;
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
     dropdownRender?: (menu: import("react").ReactNode) => import("react").ReactNode;
     feedbackIcons?: boolean;
     placement?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight";

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

@@ -39,7 +39,7 @@ export type SelectProps = DefaultProps & {
     suffixIcon?: ReactNode;
     open?: boolean;
     notFoundContent?: ReactNode;
-    getPopupContainer?: (triggerNode: HTMLElement | null) => HTMLElement;
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
     dropdownRender?: (menu: ReactNode) => ReactNode;
     feedbackIcons?: boolean;
     placement?: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';

package/dist/index.d.ts

@@ -222,7 +222,7 @@ declare const Select: react.ComponentType<__types.DefaultProps & {
     suffixIcon?: react.ReactNode;
     open?: boolean;
     notFoundContent?: react.ReactNode;
-    getPopupContainer?: (triggerNode: HTMLElement | null) => HTMLElement;
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
     dropdownRender?: (menu: react.ReactNode) => react.ReactNode;
     feedbackIcons?: boolean;
     placement?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight";

package/dist/index.esm.js

@@ -2920,7 +2920,7 @@ var css_248z$5 = "@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(
 styleInject(css_248z$5);
 
 const LIST_HEIGHT = 200;
-const PADDING_PLACEMENT = 18;
+const PADDING_PLACEMENT = 16;
 const PADDING_TAG_INPUT = 4;
 function getTextFromNode(node) {
   if (typeof node === 'string' || typeof node === 'number') {
@@ -3034,38 +3034,32 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
   }, [handleClearInputValue, open, hasMode, prefixCls]);
   const updateDropdownPosition = useCallback(() => {
     if (!selectRef.current) return;
-    const selectBox = selectRef.current.getBoundingClientRect();
+    const triggerNode = selectRef.current?.querySelector(`.${prefixCls}-trigger`);
+    const selectBox = triggerNode.getBoundingClientRect();
     const dropdownHeight = listHeight;
     const windowHeight = window.innerHeight;
     const spaceBelow = windowHeight - selectBox.bottom;
     const spaceAbove = selectBox.top;
     let positionStyle = {
-      width: `${selectBox.width}px`,
+      width: `${triggerNode.offsetWidth + PADDING_PLACEMENT}px`,
       position: 'absolute'
     };
     const shouldShowAbove = spaceBelow < dropdownHeight && spaceAbove > dropdownHeight;
-    console.info({
-      selectBox,
-      shouldShowAbove,
-      scrollX: window.scrollX,
-      offsetTop: selectRef.current.offsetTop,
-      clientHeight: selectRef.current.clientHeight
-    });
     if (getPopupContainer) {
       positionStyle = {
         ...positionStyle,
-        top: shouldShowAbove ? `${selectRef.current.offsetTop + PADDING_PLACEMENT / 2 - dropdownHeight}px` : `${selectRef.current.offsetTop + selectRef.current.clientHeight}px`,
-        left: `${selectBox.left}px`
+        top: shouldShowAbove ? `${triggerNode.offsetTop + PADDING_PLACEMENT / 2 - dropdownHeight}px` : `${triggerNode.offsetTop + selectRef.current.clientHeight}px`,
+        left: `${triggerNode.offsetLeft - PADDING_PLACEMENT / 2}px`
       };
     } else {
       positionStyle = {
         ...positionStyle,
-        top: shouldShowAbove ? `${selectRef.current.clientHeight - dropdownHeight - PADDING_PLACEMENT}px` : `${selectBox.height}px`,
-        left: `${window.scrollX}px`
+        top: shouldShowAbove ? `${triggerNode.offsetTop - dropdownHeight + PADDING_PLACEMENT / 2}px` : `${triggerNode.offsetTop + triggerNode.offsetHeight}px`,
+        left: `${triggerNode.offsetLeft - PADDING_PLACEMENT / 2}px`
       };
     }
     setDropdownPosition(positionStyle);
-  }, [listHeight, getPopupContainer]);
+  }, [prefixCls, listHeight, getPopupContainer]);
   useEffect(() => {
     if (!isOpen) {
       return setDropdownPosition({});
@@ -3205,8 +3199,9 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
     if (typeof window === 'undefined') {
       return selectRef.current;
     }
-    return getPopupContainer?.(selectRef.current) || selectRef.current;
-  }, [getPopupContainer]);
+    const triggerNode = selectRef.current?.querySelector(`.${prefixCls}-trigger`);
+    return triggerNode ? getPopupContainer?.(triggerNode) : selectRef.current;
+  }, [getPopupContainer, prefixCls]);
   const extractedOptions = children ? extractOptions(children) : options;
   function extractOptions(children, options) {
     const result = [];