x-ui-design 0.2.97 → 0.2.99

package/dist/index.esm.js

@@ -3025,27 +3025,64 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [handleClearInputValue, open, hasMode]);
-  useEffect(() => {
-    if (!selectRef.current || !getPopupContainer) {
-      return;
-    }
+  const updateDropdownPosition = useCallback(() => {
+    if (!selectRef.current) return;
     const selectBox = selectRef.current.getBoundingClientRect();
     const dropdownHeight = listHeight;
     const windowHeight = window.innerHeight;
     const spaceBelow = windowHeight - selectBox.bottom;
     const spaceAbove = selectBox.top;
     let positionStyle = {
-      top: `${selectBox.bottom}px`
-      // left: `${selectBox.left}px`,
+      top: `${selectBox.bottom + window.scrollY}px`,
+      left: `${selectBox.left + window.scrollX}px`,
+      width: `${selectBox.width}px`,
+      position: 'absolute'
     };
     if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
       positionStyle = {
-        top: `${selectBox.top - dropdownHeight}px`
-        // left: `${selectBox.left}px`,
+        top: `${selectBox.top + window.scrollY - dropdownHeight}px`,
+        left: `${selectBox.left + window.scrollX}px`,
+        width: `${selectBox.width}px`,
+        position: 'absolute'
       };
     }
     setDropdownPosition(positionStyle);
-  }, [listHeight, getPopupContainer]);
+  }, [listHeight]);
+  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 => {
+        el.removeEventListener('scroll', handleScroll);
+      });
+      window.removeEventListener('resize', updateDropdownPosition);
+    };
+  }, [isOpen, getPopupContainer, updateDropdownPosition]);
+  // Helper function to get all scrollable parents
+  const getScrollParents = element => {
+    const parents = [];
+    let current = element.parentElement;
+    while (current) {
+      if (current.scrollHeight > current.clientHeight) {
+        parents.push(current);
+      }
+      current = current.parentElement;
+    }
+    return parents;
+  };
   const handleSearch = e => {
     setSearchQuery(e.target.value);
     onSearch?.(e.target.value);
@@ -3064,7 +3101,7 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
     }
     const updatedSelected = [...selected, newOptionValue];
     onChange?.(updatedSelected);
-    onSelect?.(newOptionValue);
+    onSelect?.(updatedSelected);
     const input = selectRef.current?.querySelector('input');
     if (input) {
       input.value = '';
@@ -3080,6 +3117,7 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
       const newSelection = selected.includes(optionValue) ? selected.filter(item => item !== optionValue) : [...selected, optionValue];
       setSelected(newSelection);
       onChange?.(newSelection, option);
+      onSelect?.(newSelection, option);
       if (selected.includes(optionValue)) {
         onDeselect?.(optionValue, option);
       } else {
@@ -3097,12 +3135,14 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
     const value = hasMode ? [] : '';
     setSelected(value);
     onChange?.('');
+    onSelect?.('');
     onClear?.();
     handleClearInputValue();
   };
   const handleRemoveTag = e => {
     const updatedSelected = hasMode ? selected.filter(item => item !== e.target.value) : e.target.value;
     onChange?.(updatedSelected);
+    onSelect?.(updatedSelected);
     setSelected(updatedSelected);
   };
   const handleOnKeyDown = e => {
@@ -3123,6 +3163,7 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
       if (e.key === 'Backspace' && (hasMode ? !searchQuery.trim().length : searchQuery.trim().length)) {
         const updatedSelected = hasMode ? selected.filter(item => item !== selected[selected.length - 1]) : searchQuery.trim();
         onChange?.(updatedSelected);
+        onSelect?.(updatedSelected);
         setSelected(updatedSelected);
       }
       clearTimeout(timeout);
@@ -3137,7 +3178,8 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
     }));
   }, [showArrow, showSearch, isOpen, suffixIcon]);
   const popupContainer = useMemo(() => {
-    return selectRef.current ? getPopupContainer?.(selectRef.current) : selectRef.current;
+    if (typeof window === 'undefined') return null;
+    return selectRef.current ? getPopupContainer?.(selectRef.current) : document.body;
   }, [getPopupContainer]);
   const extractedOptions = children ? (Array.isArray(children) ? children : [children]).filter(e => e).map(child => child.props) : options;
   const filteredOptions = extractedOptions.filter(option => {