forstok-ui-lib 8.5.4 → 8.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "8.5.4",
+  "version": "8.5.6",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",

package/src/components/dropdown/index.tsx

@@ -6,20 +6,121 @@ import { DropDownContainer, DropDownTitle, DropDownSubTitle, DropDownWrapper, Dr
 import type { TMouseEvent } from '../../typeds/base.typed';
 import type { TDropdown } from './typed';
 
+const DEFAULT_TOP_OFFSET = 40;
+const DEFAULT_BOTTOM_OFFSET = 35;
+
 const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externalMinWidth, $internalWidth, $area, $openPosition, $placement, $top, onClick, $alias, type, portalId, $bottom, $isPopup, ...props }: TDropdown) => {
   const buttonRef = useRef<HTMLElement>(null);
 
+  const getOffsetValue = (value: string | undefined, fallbackValue: number) => {
+    const parsedValue = Number.parseInt(value || '', 10);
+    return Number.isNaN(parsedValue) ? fallbackValue : parsedValue;
+  };
+
+  const getViewportHeight = () => window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+  const getViewportWidth = () => window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+
+  const getDropdownWrapperElement = (parentEl: ParentNode | null) => parentEl?.querySelector('._refDropdownWrapper') as HTMLElement | null;
+
+  const getDropdownPlacement = (containerEl: HTMLElement, wrapperEl: HTMLElement) => {
+    if ($placement === 'top') {
+      return 'top';
+    }
+
+    const containerRect = containerEl.getBoundingClientRect();
+    const wrapperRect = wrapperEl.getBoundingClientRect();
+    const wrapperHeight = wrapperRect.height || wrapperEl.offsetHeight;
+    const topOffset = getOffsetValue($top, DEFAULT_TOP_OFFSET);
+    const bottomOffset = getOffsetValue($bottom, DEFAULT_BOTTOM_OFFSET);
+    const spaceBelow = getViewportHeight() - containerRect.bottom;
+    const spaceAbove = containerRect.top;
+    const requiredSpaceBelow = wrapperHeight + Math.max(topOffset - containerRect.height, 0);
+    const requiredSpaceAbove = wrapperHeight + Math.max(bottomOffset - containerRect.height, 0);
+
+    if (spaceBelow >= requiredSpaceBelow) {
+      return 'bottom';
+    }
+
+    if (spaceAbove >= requiredSpaceAbove) {
+      return 'top';
+    }
+
+    return spaceAbove > spaceBelow ? 'top' : 'bottom';
+  };
+
+  const applyDropdownPlacement = (wrapperEl: HTMLElement, placement: 'top' | 'bottom') => {
+    if (placement === 'top') {
+      wrapperEl.style.top = 'auto';
+      wrapperEl.style.bottom = `${getOffsetValue($bottom, DEFAULT_BOTTOM_OFFSET)}px`;
+      return;
+    }
+
+    wrapperEl.style.top = `${getOffsetValue($top, DEFAULT_TOP_OFFSET)}px`;
+    wrapperEl.style.bottom = 'auto';
+  };
+
+  const resetDropdownInlineStyle = (parentEl: ParentNode | null) => {
+    const wrapperEl = getDropdownWrapperElement(parentEl);
+    if (wrapperEl) {
+      wrapperEl.style.top = '';
+      wrapperEl.style.bottom = '';
+      wrapperEl.style.left = '';
+      wrapperEl.style.right = '';
+      wrapperEl.style.transform = '';
+    }
+  };
+
+  const setPortalDropdownPosition = (containerEl: HTMLElement) => {
+    if (!portalId) {
+      return;
+    }
+
+    const portalContainerRef = document.querySelector(`#${portalId} ._refDropdownPortal`) as HTMLElement | null;
+    const wrapperRef = getDropdownWrapperElement(portalContainerRef);
+
+    if (!portalContainerRef || !wrapperRef) {
+      return;
+    }
+
+    const offsetPos = containerEl.getBoundingClientRect();
+    const placement = getDropdownPlacement(containerEl, wrapperRef);
+    const wrapperWidth = wrapperRef.getBoundingClientRect().width || wrapperRef.offsetWidth;
+    const viewportWidth = getViewportWidth();
+
+    let leftValue = offsetPos.left + offsetPos.width - wrapperWidth;
+
+    if ($openPosition === 'left') {
+      leftValue = offsetPos.left;
+    } else if ($openPosition === 'center') {
+      leftValue = offsetPos.left + (offsetPos.width / 2) - (wrapperWidth / 2);
+    }
+
+    leftValue = Math.max(0, Math.min(leftValue, Math.max(viewportWidth - wrapperWidth, 0)));
+
+    wrapperRef.style.left = '0';
+    wrapperRef.style.right = 'auto';
+    wrapperRef.style.transform = 'none';
+    applyDropdownPlacement(wrapperRef, placement);
+
+    portalContainerRef.style.left = `${leftValue}px`;
+    portalContainerRef.style.top = `${placement === 'top' ? offsetPos.bottom : offsetPos.top}px`;
+    portalContainerRef.style.zIndex = $isPopup ? '101' : '8';
+  };
+
+  const setInlineDropdownPlacement = (containerEl: HTMLElement) => {
+    const wrapperRef = getDropdownWrapperElement(containerEl);
+    if (!wrapperRef) {
+      return;
+    }
+
+    const placement = getDropdownPlacement(containerEl, wrapperRef);
+    applyDropdownPlacement(wrapperRef, placement);
+  };
+
   const evScrollDropdown = () => {
     const containerEl = document.getElementsByClassName('_refContainer is-shown')[0] as HTMLElement;
-    if (containerEl) {
-      const offsetPos = containerEl.getBoundingClientRect();
-      const portalContainerRef = document.querySelector(`#${portalId} ._refDropdownPortal`) as HTMLElement;
-      if (portalContainerRef) {
-        const wrapperRef = portalContainerRef.querySelector('._refDropdownWrapper') as HTMLElement;
-        const value = offsetPos.left + offsetPos.width - wrapperRef.getBoundingClientRect().width;
-        portalContainerRef.style.left = (value > 0 ? value : offsetPos.left) + 'px';
-        portalContainerRef.style.top = offsetPos.top + parseInt($top || '0') - 32 + 'px';
-      }
+    if (containerEl && portalId) {
+      setPortalDropdownPosition(containerEl);
     }
   }
 
@@ -32,6 +133,7 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
         const overlayEl = containerRef[i].querySelector(`._refDropdownOverlay`) as HTMLDivElement;
         overlayEl.style.display = 'none';
         containerRef[i].classList.remove('is-shown');
+        resetDropdownInlineStyle(containerRef[i]);
       }
     } 
     const refScrollContainerEl = document.querySelector('._refScrollContainer') as HTMLElement;
@@ -41,6 +143,7 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
         const portalContainerRef = document.getElementsByClassName('_refDropdownPortal is-shown') as HTMLCollectionOf<HTMLElement>;
         if (portalContainerRef.length) {
           for (let i = 0; i < portalContainerRef.length; i++) {
+            resetDropdownInlineStyle(portalContainerRef[i]);
             portalContainerRef[i].style.left = '0';
             portalContainerRef[i].style.top = '0';
             portalContainerRef[i].classList.remove('is-shown');
@@ -62,7 +165,6 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
       if (containerEl) {
         const overlayEl = containerEl.querySelector(`._refDropdownOverlay`) as HTMLDivElement;
         const isCurOpen = containerEl.classList.contains('is-shown');
-        const offsetPos = containerEl.getBoundingClientRect();
 
         if (!isCurOpen) {
           evResetDropdown();  
@@ -73,25 +175,15 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
             if (portalId) {
               const portalContainerRef = document.querySelector(`#${portalId} ._refDropdownPortal`) as HTMLElement;
               const refScrollContainerEl = document.querySelector('._refScrollContainer') as HTMLElement;
-              const wrapperRef = portalContainerRef.querySelector('._refDropdownWrapper') as HTMLElement;
               if (portalContainerRef) {
-                if (offsetPos) {
-                  if (wrapperRef) {
-                    setTimeout(() => {
-                      wrapperRef.style.right = 'auto';
-                      const value = offsetPos.left + offsetPos.width - wrapperRef.getBoundingClientRect().width;
-                      portalContainerRef.style.left = (value > 0 ? value : offsetPos.left) + 'px';
-                      portalContainerRef.style.top = offsetPos.top + parseInt($top || '0') - 32 + 'px';
-                      portalContainerRef.style.zIndex = $isPopup ? '101' : '8';
-                      refScrollContainerEl && refScrollContainerEl.addEventListener('scroll', evScrollDropdown, true);
-                    }, 10);
-                  } else {
-                    portalContainerRef.style.left = offsetPos.left + ((parseInt($internalWidth || '0') + offsetPos.width) / 2) + 'px'; 
-                    portalContainerRef.style.top = (offsetPos.top + offsetPos.height) + 'px'; 
-                  }
-                }
                 portalContainerRef.classList.add('is-shown');
+                setTimeout(() => {
+                  setPortalDropdownPosition(containerEl);
+                  refScrollContainerEl && refScrollContainerEl.addEventListener('scroll', evScrollDropdown, true);
+                }, 10);
               }
+            } else {
+              setInlineDropdownPlacement(containerEl);
             }
           }, 10);
           onClick && onClick(e);
@@ -103,17 +195,16 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
             if (portalId) {
               const portalContainerRef = document.querySelector(`#${portalId} ._refDropdownPortal`) as HTMLElement;
               const refScrollContainerEl = document.querySelector('._refScrollContainer') as HTMLElement;
-              const wrapperRef = portalContainerRef.querySelector('._refDropdownWrapper') as HTMLElement;
               if (portalContainerRef) {
+                resetDropdownInlineStyle(portalContainerRef);
                 portalContainerRef.classList.remove('is-shown');
                 portalContainerRef.style.left = '0px';
                 portalContainerRef.style.top = '0px';
-                if (wrapperRef) {
-                  refScrollContainerEl && refScrollContainerEl.removeEventListener('scroll', evScrollDropdown, true);
-                }
+                refScrollContainerEl && refScrollContainerEl.removeEventListener('scroll', evScrollDropdown, true);
               }
             }
           }, 10);
+          resetDropdownInlineStyle(containerEl);
         }
       }
     }
@@ -134,22 +225,12 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
       }
       const containerEl = buttonEl.closest('._refContainer') as HTMLElement;  
       if (containerEl) {
-        const offsetPos = containerEl.getBoundingClientRect();
         const portalContainerRef = document.querySelector(`#${portalId} ._refDropdownPortal`) as HTMLElement;
         if (portalContainerRef) {
-          if (offsetPos) {
-            portalContainerRef.style.left = offsetPos.left + ((parseInt($internalWidth || '0') + offsetPos.width) / 2) + 'px';
-            let currentTop = offsetPos.top + offsetPos.height;
-            const dropdownWrapperEl = portalContainerRef.querySelector('._refDropdownWrapper') as HTMLElement;
-            if (dropdownWrapperEl) {
-              dropdownWrapperEl.style.display = 'block';
-              if ((currentTop + dropdownWrapperEl.clientHeight) >= document.body.clientHeight) {
-                currentTop = offsetPos.top - dropdownWrapperEl.clientHeight - 10;
-              }
-            }
-            portalContainerRef.style.top = currentTop + 'px';
-          }
-          portalContainerRef.classList.add('is-shown'); 
+          portalContainerRef.classList.add('is-shown');
+          setTimeout(() => {
+            setPortalDropdownPosition(containerEl);
+          }, 10);
         }
       }
     }
@@ -202,6 +283,7 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
       setTimeout(() => {
         const portalContainerRef = document.querySelector(`#${portalId} ._refDropdownPortal`) as HTMLElement;
         if (portalContainerRef && !portalContainerRef.classList.contains('unhiddenable')) {
+          resetDropdownInlineStyle(portalContainerRef);
           portalContainerRef.classList.remove('is-shown');
           portalContainerRef.style.left = '0';
           portalContainerRef.style.top = '0';
@@ -260,4 +342,4 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
   );
 }
 
-export default DropDownComponent;
+export default DropDownComponent;

package/src/components/select/asyncPaginate.tsx

@@ -57,8 +57,8 @@ const SelectAsyncPaginateComponent = ({ loadOptions, ...props }: TSelect) => {
     customOption,
     MenuList,
     defaultValue,
-    reset,
-    setReset,
+    // reset,
+    // setReset,
     evChange,
     isForceUpdate,
     setForceUpdate,
@@ -97,10 +97,6 @@ const SelectAsyncPaginateComponent = ({ loadOptions, ...props }: TSelect) => {
   ) => {
     const newValue = value as OnChangeValue<TOption, false>;
 
-    if (mode !== "multi-select" && actionMeta?.action === "select-option") {
-      setInputValue("");
-    }
-
     if (actionMeta) {
       const { action, option } = actionMeta;
 
@@ -299,6 +295,7 @@ const SelectAsyncPaginateComponent = ({ loadOptions, ...props }: TSelect) => {
   }, [setMenuIsOpen]);
 
   const onMenuClose = useCallback(() => {
+    setInputValue("");
     setMenuIsOpen && setMenuIsOpen(false);
   }, [setMenuIsOpen]);
 
@@ -345,16 +342,6 @@ const SelectAsyncPaginateComponent = ({ loadOptions, ...props }: TSelect) => {
               return value;
             }
 
-            if (action.action === "set-value") {
-              setInputValue("");
-              return "";
-            }
-
-            if (action.action === "menu-close") {
-              setInputValue("");
-              return "";
-            }
-
             return value;
           },
           onMenuClose: () => {