x-ui-design 0.2.97 → 0.2.99

package/lib/components/Select/Select.tsx

@@ -182,10 +182,8 @@ const SelectComponent = forwardRef<HTMLDivElement, SelectProps>(
       };
     }, [handleClearInputValue, open, hasMode]);
 
-    useEffect(() => {
-      if (!selectRef.current || !getPopupContainer) {
-        return;
-      }
+    const updateDropdownPosition = useCallback(() => {
+      if (!selectRef.current) return;
 
       const selectBox = selectRef.current.getBoundingClientRect();
       const dropdownHeight = listHeight;
@@ -194,19 +192,66 @@ const SelectComponent = forwardRef<HTMLDivElement, SelectProps>(
       const spaceAbove = selectBox.top;
 
       let positionStyle: CSSProperties = {
-        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: HTMLElement): HTMLElement[] => {
+      const parents: HTMLElement[] = [];
+      let current = element.parentElement;
+
+      while (current) {
+        if (current.scrollHeight > current.clientHeight) {
+          parents.push(current);
+        }
+        current = current.parentElement;
+      }
+
+      return parents;
+    };
 
     const handleSearch = (e: SyntheticBaseEvent) => {
       setSearchQuery(e.target.value as string);
@@ -237,7 +282,7 @@ const SelectComponent = forwardRef<HTMLDivElement, SelectProps>(
       const updatedSelected = [...selected, newOptionValue];
 
       onChange?.(updatedSelected);
-      onSelect?.(newOptionValue);
+      onSelect?.(updatedSelected);
 
       const input = selectRef.current?.querySelector('input');
 
@@ -269,6 +314,7 @@ const SelectComponent = forwardRef<HTMLDivElement, SelectProps>(
 
         setSelected(newSelection);
         onChange?.(newSelection, option);
+        onSelect?.(newSelection, option);
 
         if (selected.includes(optionValue)) {
           onDeselect?.(optionValue, option);
@@ -290,6 +336,7 @@ const SelectComponent = forwardRef<HTMLDivElement, SelectProps>(
 
       setSelected(value);
       onChange?.('');
+      onSelect?.('');
       onClear?.();
 
       handleClearInputValue();
@@ -301,6 +348,7 @@ const SelectComponent = forwardRef<HTMLDivElement, SelectProps>(
         : e.target.value;
 
       onChange?.(updatedSelected);
+      onSelect?.(updatedSelected);
       setSelected(updatedSelected);
     };
 
@@ -341,6 +389,7 @@ const SelectComponent = forwardRef<HTMLDivElement, SelectProps>(
             : searchQuery.trim();
 
           onChange?.(updatedSelected);
+          onSelect?.(updatedSelected);
           setSelected(updatedSelected);
         }
 
@@ -363,9 +412,11 @@ const SelectComponent = forwardRef<HTMLDivElement, SelectProps>(
     }, [showArrow, showSearch, isOpen, suffixIcon]);
 
     const popupContainer = useMemo(() => {
+      if (typeof window === 'undefined') return null;
+
       return selectRef.current
         ? getPopupContainer?.(selectRef.current)
-        : selectRef.current;
+        : document.body;
     }, [getPopupContainer]);
 
     const extractedOptions = children
@@ -450,7 +501,6 @@ const SelectComponent = forwardRef<HTMLDivElement, SelectProps>(
                   return;
                 }
 
-
                 handleSelect(
                   e as MouseEventHandlerSelect,
                   props.value as string,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-ui-design",
-  "version": "0.2.97",
+  "version": "0.2.99",
   "license": "ISC",
   "author": "Gabriel Boyajyan",
   "main": "dist/index.js",

package/src/app/page.tsx

@@ -3,6 +3,9 @@
 import { Select } from "../../lib/components/Select";
 import { Option } from "../../lib/components/Select/Option";
 
+import { Select as AntSelect } from 'antd';
+import { Option as AntOption } from 'antd/es/mentions';
+
 export const CountryCodes = [...new Set([
     {
         "label": "Afghanistan Afghanistan Afghanistan Afghanistan Afghanistan Afghanistan Afghanistan Afghanistan",
@@ -1823,8 +1826,7 @@ export default function Home() {
 
     return (
         <>
-            <Select style={{ width: 500 }} showSearch onChange={(e) => {console.log(e)
-            }}>
+            <Select  showSearch onSelect={(e) => {console.log(e)}} onChange={(e) => {console.log(e)}}>
                 {CountryCodes.map(country => (
                     <Option
                         key={country.value}
@@ -1841,6 +1843,24 @@ export default function Home() {
                     </Option>
                 ))}
             </Select>
+
+            <AntSelect  showSearch onSelect={(e) => {console.log(e)}} onChange={(e) => {console.log(e)}}>
+                {CountryCodes.map(country => (
+                    <AntOption
+                        key={country.value}
+                        value={country.value}
+                    >
+                        <div
+                            className="countyCode"
+                            title={country.label}
+                        >
+                            <div dir="ltr" className="phoneCode">
+                                {country.label}
+                            </div>
+                        </div>
+                    </AntOption>
+                ))}
+            </AntSelect>
         </>
     )
 }