x-ui-design 0.3.1 → 0.3.13

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) => HTMLElement;
+    getPopupContainer?: (triggerNode: HTMLElement | null) => 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) => HTMLElement;
+    getPopupContainer?: (triggerNode: HTMLElement | null) => 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) => HTMLElement;
+    getPopupContainer?: (triggerNode: HTMLElement | null) => 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) => HTMLElement;
+    getPopupContainer?: (triggerNode: HTMLElement | null) => HTMLElement;
     dropdownRender?: (menu: react.ReactNode) => react.ReactNode;
     feedbackIcons?: boolean;
     placement?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight";

package/dist/index.esm.js

@@ -2880,7 +2880,7 @@ var Option$1 = /*#__PURE__*/Object.freeze({
 	default: Option
 });
 
-var css_248z$6 = ".xUi-select .xUi-select-tag-container{display:flex;flex:auto;flex-wrap:wrap;gap:4px;line-height:12px;position:relative}.xUi-select.large .xUi-select-tag-container,.xUi-select.middle .xUi-select-tag-container{line-height:22px}.xUi-select .xUi-select-tag{align-items:center;align-self:center;background:rgba(0,0,0,.06);border:1px solid transparent;border-radius:var(--xui-border-radius-sm);box-sizing:border-box;cursor:default;display:flex;flex:none;height:100%;max-width:100%;overflow:hidden;padding:2px;text-overflow:ellipsis;transition:font-size .3s,line-height .3s,height .3s;white-space:nowrap}.xUi-select.middle .xUi-select-tag{padding:4px 8px}.xUi-select.large .xUi-select-tag{font-size:var(--xui-font-size-lg);padding:8px}.xUi-select .xUi-select-tag span{font-size:var(--xui-font-size-sm);margin:0 2px}.xUi-select .xUi-select-tag .xUi-select-tag-close-icon{color:rgba(0,0,0,.5);cursor:pointer;font-size:var(--xui-font-size-xs)}.xUi-select .xUi-select-tag .xUi-select-tag-close-icon:hover{color:var(--xui-text-color)}.xUi-select .xUi-select-tag:has([class=xUi-select-tag-input]){background:transparent;border:none;color:var(--xui-text-color);font-size:var(--xui-font-size-md);outline:none;padding:0}.xUi-select .xUi-select-tag:has([class=xUi-select-tag-input]) input{background-color:transparent;border:none;font-size:var(--xui-font-size-md);height:-webkit-fill-available;padding:0}.xUi-select .xUi-select-tag-input:focus{border:none;box-shadow:none;outline:none}";
+var css_248z$6 = ".xUi-select .xUi-select-tag-container{display:flex;flex:auto;flex-wrap:wrap;gap:4px;line-height:12px;position:relative}.xUi-select.large .xUi-select-tag-container,.xUi-select.middle .xUi-select-tag-container{line-height:22px}.xUi-select .xUi-select-tag{align-items:center;align-self:center;background:rgba(0,0,0,.06);border:1px solid transparent;border-radius:var(--xui-border-radius-sm);box-sizing:border-box;cursor:default;display:flex;flex:none;height:100%;max-width:100%;overflow:hidden;padding:2px;text-overflow:ellipsis;transition:font-size .3s,line-height .3s,height .3s;white-space:nowrap}.xUi-select.middle .xUi-select-tag{padding:4px 8px}.xUi-select.large .xUi-select-tag{font-size:var(--xui-font-size-lg);padding:4px 8px}.xUi-select .xUi-select-tag span{font-size:var(--xui-font-size-sm);margin:0 2px}.xUi-select .xUi-select-tag .xUi-select-tag-close-icon{color:rgba(0,0,0,.5);cursor:pointer;font-size:var(--xui-font-size-xs)}.xUi-select .xUi-select-tag .xUi-select-tag-close-icon:hover{color:var(--xui-text-color)}.xUi-select .xUi-select-tag:has([class=xUi-select-tag-input]){background:transparent;border:none;color:var(--xui-text-color);font-size:var(--xui-font-size-md);outline:none;padding:0}.xUi-select .xUi-select-tag:has([class=xUi-select-tag-input]) input{background-color:transparent;border:none;font-size:var(--xui-font-size-md);height:-webkit-fill-available;padding:0}.xUi-select .xUi-select-tag-input:focus{border:none;box-shadow:none;outline:none}";
 styleInject(css_248z$6);
 
 const Tag = ({
@@ -2922,7 +2922,6 @@ styleInject(css_248z$5);
 const LIST_HEIGHT = 200;
 const PADDING_PLACEMENT = 18;
 const PADDING_TAG_INPUT = 4;
-const DROPDOWN_CONTENT_PADDING = 8;
 function getTextFromNode(node) {
   if (typeof node === 'string' || typeof node === 'number') {
     return node.toString();
@@ -3016,8 +3015,11 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
   }, [autoClearSearchValue, prefixCls]);
   useEffect(() => {
     const handleClickOutside = event => {
-      if (selectRef.current && !selectRef.current.contains(event.target)) {
-        setIsOpen(open);
+      if (!selectRef.current) return;
+      const dropdown = document.querySelector(`.${prefixCls}-dropdown`);
+      const clickedInside = selectRef.current.contains(event.target) || dropdown && dropdown.contains(event.target);
+      if (!clickedInside) {
+        setIsOpen(false);
         handleClearInputValue();
       }
     };
@@ -3025,7 +3027,7 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [handleClearInputValue, open, hasMode]);
+  }, [handleClearInputValue, open, hasMode, prefixCls]);
   const updateDropdownPosition = useCallback(() => {
     if (!selectRef.current) return;
     const selectBox = selectRef.current.getBoundingClientRect();
@@ -3034,36 +3036,37 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
     const spaceBelow = windowHeight - selectBox.bottom;
     const spaceAbove = selectBox.top;
     let positionStyle = {
-      top: `${selectBox.bottom + window.scrollY - DROPDOWN_CONTENT_PADDING}px`,
-      left: `${selectBox.left + window.scrollX - DROPDOWN_CONTENT_PADDING}px`,
+      ...(getPopupContainer ? {
+        top: `${selectBox.bottom}px`,
+        left: `${selectBox.left}px`
+      } : {}),
       width: `${selectBox.width}px`,
       position: 'absolute'
     };
     if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
       positionStyle = {
-        top: `${selectBox.top + window.scrollY - dropdownHeight - DROPDOWN_CONTENT_PADDING}px`,
-        left: `${selectBox.left + window.scrollX - DROPDOWN_CONTENT_PADDING}px`,
+        ...(getPopupContainer ? {
+          top: `${selectBox.top - dropdownHeight}px`,
+          left: `${selectBox.left}px`
+        } : {}),
         width: `${selectBox.width}px`,
         position: 'absolute'
       };
     }
     setDropdownPosition(positionStyle);
-  }, [listHeight]);
+  }, [listHeight, getPopupContainer]);
   useEffect(() => {
     if (!isOpen) return;
     updateDropdownPosition();
-    // const container = getPopupContainer?.(selectRef.current!);
     const scrollableParents = getScrollParents(selectRef.current);
     const handleScroll = () => {
       updateDropdownPosition();
     };
-    // Add scroll listeners to all scrollable parents
     scrollableParents.forEach(el => {
       el.addEventListener('scroll', handleScroll, {
         passive: true
       });
     });
-    // Add resize listener
     window.addEventListener('resize', updateDropdownPosition);
     return () => {
       scrollableParents.forEach(el => {
@@ -3072,7 +3075,6 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
       window.removeEventListener('resize', updateDropdownPosition);
     };
   }, [isOpen, getPopupContainer, updateDropdownPosition]);
-  // Helper function to get all scrollable parents
   const getScrollParents = element => {
     const parents = [];
     let current = element.parentElement;
@@ -3178,10 +3180,12 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
       isOpen: isOpen
     }));
   }, [showArrow, showSearch, isOpen, suffixIcon]);
-  const popupContainer = (() => {
-    if (typeof window === 'undefined') return null;
-    return selectRef.current ? getPopupContainer?.(selectRef.current) : document.body;
-  })();
+  const popupContainer = useMemo(() => {
+    if (typeof window === 'undefined') {
+      return selectRef.current;
+    }
+    return getPopupContainer?.(selectRef.current) || selectRef.current;
+  }, [getPopupContainer]);
   const extractedOptions = children ? (Array.isArray(children) ? children : [children]).filter(e => e).map(child => child.props) : options;
   const filteredOptions = extractedOptions.filter(option => {
     if (typeof filterOption === 'function') {
@@ -3267,7 +3271,7 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
     style: {
       maxHeight: listHeight,
       overflowY: 'auto',
-      maxWidth: selectRef.current ? `${selectRef.current.getBoundingClientRect().width - DROPDOWN_CONTENT_PADDING}px` : 'inherit'
+      maxWidth: selectRef.current ? `${selectRef.current.getBoundingClientRect().width}px` : 'inherit'
     }
   }, asTag && !!searchQuery && /*#__PURE__*/React$1.createElement(Option, {
     value: searchQuery,