forstok-ui-lib 8.5.21 → 8.5.22

package/package.json

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

package/src/components/dropdown/index.tsx

@@ -8,6 +8,7 @@ import type { TDropdown } from './typed';
 
 const DEFAULT_TOP_OFFSET = 40;
 const DEFAULT_BOTTOM_OFFSET = 35;
+const MOBILE_BREAKPOINT = 768;
 
 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);
@@ -19,6 +20,7 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
 
   const getViewportHeight = () => window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
   const getViewportWidth = () => window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+  const isMobileViewport = () => getViewportWidth() < MOBILE_BREAKPOINT;
 
   const getDropdownWrapperElement = (parentEl: ParentNode | null) => parentEl?.querySelector('._refDropdownWrapper') as HTMLElement | null;
   const withNextFrame = (callback: () => void) => window.requestAnimationFrame(() => callback());
@@ -61,6 +63,14 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
     wrapperEl.style.bottom = 'auto';
   };
 
+  const applyMobileDropdownPlacement = (wrapperEl: HTMLElement) => {
+    wrapperEl.style.top = 'auto';
+    wrapperEl.style.bottom = '0';
+    wrapperEl.style.left = '0';
+    wrapperEl.style.right = 'auto';
+    wrapperEl.style.transform = 'none';
+  };
+
   const resetDropdownInlineStyle = (parentEl: ParentNode | null) => {
     const wrapperEl = getDropdownWrapperElement(parentEl);
     if (wrapperEl) {
@@ -93,6 +103,14 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
       return;
     }
 
+    if (isMobileViewport()) {
+      applyMobileDropdownPlacement(wrapperRef);
+      portalContainerRef.style.left = '0';
+      portalContainerRef.style.top = '0';
+      portalContainerRef.style.zIndex = $isPopup ? '101' : '8';
+      return;
+    }
+
     const offsetPos = containerEl.getBoundingClientRect();
     const placement = getDropdownPlacement(containerEl, wrapperRef);
     const wrapperWidth = wrapperRef.getBoundingClientRect().width || wrapperRef.offsetWidth;
@@ -124,6 +142,11 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
       return;
     }
 
+    if (isMobileViewport()) {
+      applyMobileDropdownPlacement(wrapperRef);
+      return;
+    }
+
     const placement = getDropdownPlacement(containerEl, wrapperRef);
     applyDropdownPlacement(wrapperRef, placement);
   };

package/src/components/dropdown/styles.ts

@@ -61,8 +61,9 @@ const getDropDownContainerModifiedStyled = ({ $top, $bottom, $placement, $alias,
       @media only screen and (max-width: 767px) {
         & ${DropDownWrapper} { 
           display: grid; 
-          left: 0; 
-          bottom:0; 
+          left: 0 !important; 
+          top: auto !important;
+          bottom: 0 !important; 
           ${$placement === 'top' ? 'animation: dropgoup .075s;' : 'animation: droptoup .075s;'}
           overflow-x: hidden; 
         }
@@ -330,4 +331,4 @@ export const DropdownPortalContainer = styled.div`
       display: block;
     }
   }
-`;
+`;