forstok-ui-lib 8.9.4 → 8.9.6

package/src/components/dropdown/index.tsx

@@ -1,33 +1,73 @@
-import { useEffect, useRef, isValidElement } from 'react';
-import ReactPortalComponent from '../portal';
-
-import { DropDownContainer, DropDownTitle, DropDownSubTitle, DropDownWrapper, DropDownOverlayWrapper, DropDownControl, DropDownBody, DropDownAction, DropdownControlWrapper, DropdownPortalContainer } from './styles';
-
-import type { TMouseEvent } from '../../typeds/base.typed';
-import type { TDropdown } from './typed';
+import { useEffect, useRef, isValidElement } from "react";
+import ReactPortalComponent from "../portal";
+
+import {
+  DropDownContainer,
+  DropDownTitle,
+  DropDownSubTitle,
+  DropDownWrapper,
+  DropDownOverlayWrapper,
+  DropDownControl,
+  DropDownBody,
+  DropDownAction,
+  DropdownControlWrapper,
+  DropdownPortalContainer,
+} from "./styles";
+
+import type { TMouseEvent } from "../../typeds/base.typed";
+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 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);
+    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 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());
-
-  const getDropdownPlacement = (containerEl: HTMLElement, wrapperEl: HTMLElement) => {
-    if ($placement === 'top') {
-      return 'top';
+  const getDropdownWrapperElement = (parentEl: ParentNode | null) =>
+    parentEl?.querySelector("._refDropdownWrapper") as HTMLElement | null;
+  const withNextFrame = (callback: () => void) =>
+    window.requestAnimationFrame(() => callback());
+
+  const getDropdownPlacement = (
+    containerEl: HTMLElement,
+    wrapperEl: HTMLElement,
+  ) => {
+    if ($placement === "top") {
+      return "top";
     }
 
     const containerRect = containerEl.getBoundingClientRect();
@@ -37,54 +77,62 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
     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);
+    const requiredSpaceBelow =
+      wrapperHeight + Math.max(topOffset - containerRect.height, 0);
+    const requiredSpaceAbove =
+      wrapperHeight + Math.max(bottomOffset - containerRect.height, 0);
 
     if (spaceBelow >= requiredSpaceBelow) {
-      return 'bottom';
+      return "bottom";
     }
 
     if (spaceAbove >= requiredSpaceAbove) {
-      return 'top';
+      return "top";
     }
 
-    return spaceAbove > spaceBelow ? 'top' : 'bottom';
+    return spaceAbove > spaceBelow ? "top" : "bottom";
   };
 
-  const applyDropdownPlacement = (wrapperEl: HTMLElement, placement: 'top' | 'bottom') => {
-    if (placement === 'top') {
-      wrapperEl.style.animation = 'none'; // stop CSS animation from overriding top:auto
-      wrapperEl.style.top = 'auto';
+  const applyDropdownPlacement = (
+    wrapperEl: HTMLElement,
+    placement: "top" | "bottom",
+  ) => {
+    if (placement === "top") {
+      wrapperEl.style.animation = "none"; // stop CSS animation from overriding top:auto
+      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';
+    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';
+    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) {
-      wrapperEl.style.top = '';
-      wrapperEl.style.bottom = '';
-      wrapperEl.style.left = '';
-      wrapperEl.style.right = '';
-      wrapperEl.style.transform = '';
-      wrapperEl.style.visibility = '';
-      wrapperEl.style.animation = '';
+      wrapperEl.style.top = "";
+      wrapperEl.style.bottom = "";
+      wrapperEl.style.left = "";
+      wrapperEl.style.right = "";
+      wrapperEl.style.transform = "";
+      wrapperEl.style.visibility = "";
+      wrapperEl.style.animation = "";
     }
   };
 
-  const setDropdownVisibility = (parentEl: ParentNode | null, visibility: 'hidden' | 'visible') => {
+  const setDropdownVisibility = (
+    parentEl: ParentNode | null,
+    visibility: "hidden" | "visible",
+  ) => {
     const wrapperEl = getDropdownWrapperElement(parentEl);
     if (wrapperEl) {
       wrapperEl.style.visibility = visibility;
@@ -96,7 +144,9 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
       return;
     }
 
-    const portalContainerRef = document.querySelector(`#${portalId} ._refDropdownPortal`) as HTMLElement | null;
+    const portalContainerRef = document.querySelector(
+      `#${portalId} ._refDropdownPortal`,
+    ) as HTMLElement | null;
     const wrapperRef = getDropdownWrapperElement(portalContainerRef);
 
     if (!portalContainerRef || !wrapperRef) {
@@ -105,35 +155,39 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
 
     if (isMobileViewport()) {
       applyMobileDropdownPlacement(wrapperRef);
-      portalContainerRef.style.left = '0';
-      portalContainerRef.style.top = '0';
-      portalContainerRef.style.zIndex = $isPopup ? '101' : '8';
+      portalContainerRef.style.left = "'-100%'";
+      portalContainerRef.style.top = "'-100%'";
+      portalContainerRef.style.zIndex = $isPopup ? "101" : "8";
       return;
     }
 
     const offsetPos = containerEl.getBoundingClientRect();
     const placement = getDropdownPlacement(containerEl, wrapperRef);
-    const wrapperWidth = wrapperRef.getBoundingClientRect().width || wrapperRef.offsetWidth;
+    const wrapperWidth =
+      wrapperRef.getBoundingClientRect().width || wrapperRef.offsetWidth;
     const viewportWidth = getViewportWidth();
 
     let leftValue = offsetPos.left + offsetPos.width - wrapperWidth;
 
-    if ($openPosition === 'left') {
+    if ($openPosition === "left") {
       leftValue = offsetPos.left;
-    } else if ($openPosition === 'center') {
-      leftValue = offsetPos.left + (offsetPos.width / 2) - (wrapperWidth / 2);
+    } else if ($openPosition === "center") {
+      leftValue = offsetPos.left + offsetPos.width / 2 - wrapperWidth / 2;
     }
 
-    leftValue = Math.max(0, Math.min(leftValue, Math.max(viewportWidth - wrapperWidth, 0)));
+    leftValue = Math.max(
+      0,
+      Math.min(leftValue, Math.max(viewportWidth - wrapperWidth, 0)),
+    );
 
-    wrapperRef.style.left = '0';
-    wrapperRef.style.right = 'auto';
-    wrapperRef.style.transform = 'none';
+    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';
+    portalContainerRef.style.top = `${placement === "top" ? offsetPos.bottom : offsetPos.top}px`;
+    portalContainerRef.style.zIndex = $isPopup ? "101" : "8";
   };
 
   const setInlineDropdownPlacement = (containerEl: HTMLElement) => {
@@ -152,95 +206,134 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
   };
 
   const evScrollDropdown = () => {
-    const containerEl = document.getElementsByClassName('_refContainer is-shown')[0] as HTMLElement;
+    const containerEl = document.getElementsByClassName(
+      "_refContainer is-shown",
+    )[0] as HTMLElement;
     if (containerEl && portalId) {
       setPortalDropdownPosition(containerEl);
     }
-  }
+  };
 
   const evResetDropdown = () => {
-    const containerRef = document.getElementsByClassName('_refContainer is-shown') as HTMLCollectionOf<HTMLElement>;
-    const bodyEl = document.getElementsByTagName('BODY')[0] as HTMLBodyElement;
+    const containerRef = document.getElementsByClassName(
+      "_refContainer is-shown",
+    ) as HTMLCollectionOf<HTMLElement>;
+    const bodyEl = document.getElementsByTagName("BODY")[0] as HTMLBodyElement;
     if (containerRef.length) {
-      bodyEl.classList.remove('is-immuned');
+      bodyEl.classList.remove("is-immuned");
       for (let i = 0; i < containerRef.length; i++) {
-        const overlayEl = containerRef[i].querySelector(`._refDropdownOverlay`) as HTMLDivElement;
-        overlayEl.style.display = 'none';
-        containerRef[i].classList.remove('is-shown');
+        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;
-    refScrollContainerEl && refScrollContainerEl.removeEventListener('scroll', evScrollDropdown, true);
+    }
+    const refScrollContainerEl = document.querySelector(
+      "._refScrollContainer",
+    ) as HTMLElement;
+    refScrollContainerEl &&
+      refScrollContainerEl.removeEventListener(
+        "scroll",
+        evScrollDropdown,
+        true,
+      );
     setTimeout(() => {
       if (portalId) {
-        const portalContainerRef = document.getElementsByClassName('_refDropdownPortal is-shown') as HTMLCollectionOf<HTMLElement>;
+        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');
+            portalContainerRef[i].style.left = "'-100%'";
+            portalContainerRef[i].style.top = "'-100%'";
+            portalContainerRef[i].classList.remove("is-shown");
           }
-        } 
+        }
       }
-    },10);
-  }
+    }, 10);
+  };
 
-  const evToogleDropdown: TMouseEvent = e => {
+  const evToogleDropdown: TMouseEvent = (e) => {
     const currRefEl = buttonRef.current;
     if (currRefEl) {
-      const buttonEl = (e.target as HTMLElement).closest(`.${currRefEl.classList[0]}`); 
+      const buttonEl = (e.target as HTMLElement).closest(
+        `.${currRefEl.classList[0]}`,
+      );
       if (!buttonEl) {
         return;
       }
-      const containerEl = buttonEl.closest('._refContainer') as HTMLElement;
-      const bodyEl = document.getElementsByTagName('BODY')[0] as HTMLBodyElement;
+      const containerEl = buttonEl.closest("._refContainer") as HTMLElement;
+      const bodyEl = document.getElementsByTagName(
+        "BODY",
+      )[0] as HTMLBodyElement;
       if (containerEl) {
-        const overlayEl = containerEl.querySelector(`._refDropdownOverlay`) as HTMLDivElement;
-        const isCurOpen = containerEl.classList.contains('is-shown');
+        const overlayEl = containerEl.querySelector(
+          `._refDropdownOverlay`,
+        ) as HTMLDivElement;
+        const isCurOpen = containerEl.classList.contains("is-shown");
 
         if (!isCurOpen) {
-          evResetDropdown();  
-          overlayEl.style.display = 'block';
-          bodyEl.classList.add('is-immuned');
+          evResetDropdown();
+          overlayEl.style.display = "block";
+          bodyEl.classList.add("is-immuned");
           if (!portalId) {
-            setDropdownVisibility(containerEl, 'hidden');
+            setDropdownVisibility(containerEl, "hidden");
           }
-          containerEl.classList.add('is-shown');
+          containerEl.classList.add("is-shown");
           setTimeout(() => {
             if (portalId) {
-              const portalContainerRef = document.querySelector(`#${portalId} ._refDropdownPortal`) as HTMLElement;
-              const refScrollContainerEl = document.querySelector('._refScrollContainer') as HTMLElement;
+              const portalContainerRef = document.querySelector(
+                `#${portalId} ._refDropdownPortal`,
+              ) as HTMLElement;
+              const refScrollContainerEl = document.querySelector(
+                "._refScrollContainer",
+              ) as HTMLElement;
               if (portalContainerRef) {
-                portalContainerRef.classList.add('is-shown');
+                portalContainerRef.classList.add("is-shown");
                 setTimeout(() => {
                   setPortalDropdownPosition(containerEl);
-                  refScrollContainerEl && refScrollContainerEl.addEventListener('scroll', evScrollDropdown, true);
+                  refScrollContainerEl &&
+                    refScrollContainerEl.addEventListener(
+                      "scroll",
+                      evScrollDropdown,
+                      true,
+                    );
                 }, 10);
               }
             } else {
               withNextFrame(() => {
                 setInlineDropdownPlacement(containerEl);
-                setDropdownVisibility(containerEl, 'visible');
+                setDropdownVisibility(containerEl, "visible");
               });
             }
           }, 10);
           onClick && onClick(e);
         } else {
-          overlayEl.style.display = 'none';
-          bodyEl.classList.remove('is-immuned');
-          containerEl.classList.remove('is-shown');
+          overlayEl.style.display = "none";
+          bodyEl.classList.remove("is-immuned");
+          containerEl.classList.remove("is-shown");
           setTimeout(() => {
             if (portalId) {
-              const portalContainerRef = document.querySelector(`#${portalId} ._refDropdownPortal`) as HTMLElement;
-              const refScrollContainerEl = document.querySelector('._refScrollContainer') as HTMLElement;
+              const portalContainerRef = document.querySelector(
+                `#${portalId} ._refDropdownPortal`,
+              ) as HTMLElement;
+              const refScrollContainerEl = document.querySelector(
+                "._refScrollContainer",
+              ) as HTMLElement;
               if (portalContainerRef) {
                 resetDropdownInlineStyle(portalContainerRef);
-                portalContainerRef.classList.remove('is-shown');
-                portalContainerRef.style.left = '0px';
-                portalContainerRef.style.top = '0px';
-                refScrollContainerEl && refScrollContainerEl.removeEventListener('scroll', evScrollDropdown, true);
+                portalContainerRef.classList.remove("is-shown");
+                portalContainerRef.style.left = "-100%";
+                portalContainerRef.style.top = "-100%";
+                refScrollContainerEl &&
+                  refScrollContainerEl.removeEventListener(
+                    "scroll",
+                    evScrollDropdown,
+                    true,
+                  );
               }
             }
           }, 10);
@@ -248,138 +341,234 @@ const DropDownComponent = ({ children, title, subTitle, $externalWidth, $externa
         }
       }
     }
-  }
+  };
 
-  const evMouseEnter: TMouseEvent = e => {
+  const evMouseEnter: TMouseEvent = (e) => {
     const currRefEl = buttonRef.current;
     if (currRefEl) {
-      const buttonEl = (e.target as HTMLElement).closest(`.${currRefEl.classList[0]}`);
+      const buttonEl = (e.target as HTMLElement).closest(
+        `.${currRefEl.classList[0]}`,
+      );
       if (!buttonEl) {
         return;
       }
-      const portalContainerRefs = document.querySelectorAll(`._refDropdownPortal`) as NodeListOf<HTMLElement>;
+      const portalContainerRefs = document.querySelectorAll(
+        `._refDropdownPortal`,
+      ) as NodeListOf<HTMLElement>;
       for (const portalContainerRef of portalContainerRefs) {
-        portalContainerRef.classList.remove('is-shown');
-        portalContainerRef.style.left = '0';
-        portalContainerRef.style.top = '0';
+        portalContainerRef.classList.remove("is-shown");
+        portalContainerRef.style.left = "-100%";
+        portalContainerRef.style.top = "-100%";
       }
-      const containerEl = buttonEl.closest('._refContainer') as HTMLElement;  
+      const containerEl = buttonEl.closest("._refContainer") as HTMLElement;
       if (containerEl) {
-        const portalContainerRef = document.querySelector(`#${portalId} ._refDropdownPortal`) as HTMLElement;
+        const portalContainerRef = document.querySelector(
+          `#${portalId} ._refDropdownPortal`,
+        ) as HTMLElement;
         if (portalContainerRef) {
-          portalContainerRef.classList.add('is-shown');
+          portalContainerRef.classList.add("is-shown");
           setTimeout(() => {
             setPortalDropdownPosition(containerEl);
           }, 10);
         }
       }
     }
-  }
+  };
 
   useEffect(() => {
     setTimeout(() => {
-      const portalContainerRefs = document.querySelectorAll(`._refDropdownPortal._refHover`) as NodeListOf<HTMLElement>;
+      const portalContainerRefs = document.querySelectorAll(
+        `._refDropdownPortal._refHover`,
+      ) as NodeListOf<HTMLElement>;
       for (let portalContainerRef of portalContainerRefs) {
-        portalContainerRef && portalContainerRef.addEventListener('mouseenter', (event) => {
-          const el = event.target as HTMLElement;
-          el.classList.add('is-shown');   
-          el.classList.add('unhiddenable');
-        })
-        portalContainerRef && portalContainerRef.addEventListener('mouseleave', (event) => {
-          const el = event.target as HTMLElement; 
-          el.classList.remove('is-shown');
-          el.classList.remove('unhiddenable');
-          el.style.left = '0';
-          el.style.top = '0';
-        })
+        portalContainerRef &&
+          portalContainerRef.addEventListener("mouseenter", (event) => {
+            const el = event.target as HTMLElement;
+            el.classList.add("is-shown");
+            el.classList.add("unhiddenable");
+          });
+        portalContainerRef &&
+          portalContainerRef.addEventListener("mouseleave", (event) => {
+            const el = event.target as HTMLElement;
+            el.classList.remove("is-shown");
+            el.classList.remove("unhiddenable");
+            el.style.left = "-100%";
+            el.style.top = "-100%";
+          });
       }
     }, 1);
     return () => {
-      const portalContainerRefs = document.querySelectorAll(`._refDropdownPortal._refHover`) as NodeListOf<HTMLElement>;
+      const portalContainerRefs = document.querySelectorAll(
+        `._refDropdownPortal._refHover`,
+      ) as NodeListOf<HTMLElement>;
       for (let portalContainerRef of portalContainerRefs) {
-        portalContainerRef && portalContainerRef.removeEventListener('mouseenter', (event) => {
-          const el = event.target as HTMLElement;
-          el.classList.add('is-shown');
-          el.classList.add('unhiddenable');
-        }, true)
-        portalContainerRef && portalContainerRef.removeEventListener('mouseleave', (event) => {
-          const el = event.target as HTMLElement;
-          el.classList.remove('is-shown');
-          el.classList.remove('unhiddenable');
-          el.style.left = '0';
-          el.style.top = '0';
-        }, true)
+        portalContainerRef &&
+          portalContainerRef.removeEventListener(
+            "mouseenter",
+            (event) => {
+              const el = event.target as HTMLElement;
+              el.classList.add("is-shown");
+              el.classList.add("unhiddenable");
+            },
+            true,
+          );
+        portalContainerRef &&
+          portalContainerRef.removeEventListener(
+            "mouseleave",
+            (event) => {
+              const el = event.target as HTMLElement;
+              el.classList.remove("is-shown");
+              el.classList.remove("unhiddenable");
+              el.style.left = "-100%";
+              el.style.top = "-100%";
+            },
+            true,
+          );
       }
     };
-  }, [portalId])
+  }, [portalId]);
 
-  const evMouseLeave: TMouseEvent = e => {
+  const evMouseLeave: TMouseEvent = (e) => {
     const currRefEl = buttonRef.current;
     if (currRefEl) {
-      const buttonEl = (e.target as HTMLElement).closest(`.${currRefEl.classList[0]}`); 
+      const buttonEl = (e.target as HTMLElement).closest(
+        `.${currRefEl.classList[0]}`,
+      );
       if (!buttonEl) {
         return;
       }
       setTimeout(() => {
-        const portalContainerRef = document.querySelector(`#${portalId} ._refDropdownPortal`) as HTMLElement;
-        if (portalContainerRef && !portalContainerRef.classList.contains('unhiddenable')) {
+        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';
+          portalContainerRef.classList.remove("is-shown");
+          portalContainerRef.style.left = "-100%";
+          portalContainerRef.style.top = "-100%";
         }
       }, 150);
     }
-  }
+  };
 
   const evCloseDropdown = () => {
     evResetDropdown();
-  }
-
-  const DropDownSubTitleEl = (subTitle) ? <DropDownSubTitle>{subTitle}</DropDownSubTitle> : null;
-  const DropDownTitleEl = (title) ? <DropDownTitle>{title} {DropDownSubTitleEl}</DropDownTitle> : null;
-  const ControlChildrenFilter = children.filter((child: any) => isValidElement(child) ? ((child.props as any)['aria-label'] === 'control') : null);
-  const DropDownControlEl = (ControlChildrenFilter && isValidElement(ControlChildrenFilter[0])) ? 
-    type === 'hover' ? (
-      <DropdownControlWrapper>
-        <DropDownControl className='_refDropdownControl' {...portalId && { onMouseEnter: evMouseEnter, onMouseLeave: evMouseLeave }}>{(ControlChildrenFilter[0].props as any).children}</DropDownControl>
-        <DropDownControl className='_refDropdownControlMobile' ref={buttonRef} onClick={evToogleDropdown}>{(ControlChildrenFilter[0].props as any).children}</DropDownControl>
-      </DropdownControlWrapper>
-    ) : <DropDownControl ref={buttonRef} onClick={evToogleDropdown} >{(ControlChildrenFilter[0].props as any).children}</DropDownControl>
-  : null
-  const BodyChildrenFilter = children.filter((child: any) => isValidElement(child) ? ((child.props as any)['aria-label'] === 'body') : null)
-  const DropDownBodyEl = (BodyChildrenFilter && isValidElement(BodyChildrenFilter[0])) ? <DropDownBody $area={$area}>{(BodyChildrenFilter[0].props as any).children}</DropDownBody> : null
-  const ActionChildrenFilter = children.filter((child: any) => isValidElement(child) ? ((child.props as any)['aria-label'] === 'action') : null)
-  const DropDownActionEl = (ActionChildrenFilter && isValidElement(ActionChildrenFilter[0])) ? <DropDownAction $position={(ActionChildrenFilter[0].props as any)['data-position']} className={(ActionChildrenFilter[0].props as any).className}>{(ActionChildrenFilter[0].props as any).children}</DropDownAction> : null
-
-  const dropdownWrapperEl = <DropDownWrapper 
-                              className='_refDropdownWrapper'
-                              {...$internalWidth && { $internalWidth: $internalWidth }}
-                              {...$top && { $top: $top }}
-                              {...$openPosition && { $openPosition: $openPosition }}
-                              {...$placement && { $placement: $placement }}
-                              {...$bottom && { $bottom: $bottom }}>
-                              {DropDownTitleEl}
-                              {DropDownBodyEl}
-                              {DropDownActionEl}
-                            </DropDownWrapper>  
+  };
+
+  const DropDownSubTitleEl = subTitle ? (
+    <DropDownSubTitle>{subTitle}</DropDownSubTitle>
+  ) : null;
+  const DropDownTitleEl = title ? (
+    <DropDownTitle>
+      {title} {DropDownSubTitleEl}
+    </DropDownTitle>
+  ) : null;
+  const ControlChildrenFilter = children.filter((child: any) =>
+    isValidElement(child)
+      ? (child.props as any)["aria-label"] === "control"
+      : null,
+  );
+  const DropDownControlEl =
+    ControlChildrenFilter && isValidElement(ControlChildrenFilter[0]) ? (
+      type === "hover" ? (
+        <DropdownControlWrapper>
+          <DropDownControl
+            className="_refDropdownControl"
+            {...(portalId && {
+              onMouseEnter: evMouseEnter,
+              onMouseLeave: evMouseLeave,
+            })}
+          >
+            {(ControlChildrenFilter[0].props as any).children}
+          </DropDownControl>
+          <DropDownControl
+            className="_refDropdownControlMobile"
+            ref={buttonRef}
+            onClick={evToogleDropdown}
+          >
+            {(ControlChildrenFilter[0].props as any).children}
+          </DropDownControl>
+        </DropdownControlWrapper>
+      ) : (
+        <DropDownControl ref={buttonRef} onClick={evToogleDropdown}>
+          {(ControlChildrenFilter[0].props as any).children}
+        </DropDownControl>
+      )
+    ) : null;
+  const BodyChildrenFilter = children.filter((child: any) =>
+    isValidElement(child)
+      ? (child.props as any)["aria-label"] === "body"
+      : null,
+  );
+  const DropDownBodyEl =
+    BodyChildrenFilter && isValidElement(BodyChildrenFilter[0]) ? (
+      <DropDownBody $area={$area}>
+        {(BodyChildrenFilter[0].props as any).children}
+      </DropDownBody>
+    ) : null;
+  const ActionChildrenFilter = children.filter((child: any) =>
+    isValidElement(child)
+      ? (child.props as any)["aria-label"] === "action"
+      : null,
+  );
+  const DropDownActionEl =
+    ActionChildrenFilter && isValidElement(ActionChildrenFilter[0]) ? (
+      <DropDownAction
+        $position={(ActionChildrenFilter[0].props as any)["data-position"]}
+        className={(ActionChildrenFilter[0].props as any).className}
+      >
+        {(ActionChildrenFilter[0].props as any).children}
+      </DropDownAction>
+    ) : null;
+
+  const dropdownWrapperEl = (
+    <DropDownWrapper
+      className="_refDropdownWrapper"
+      {...($internalWidth && { $internalWidth: $internalWidth })}
+      {...($top && { $top: $top })}
+      {...($openPosition && { $openPosition: $openPosition })}
+      {...($placement && { $placement: $placement })}
+      {...($bottom && { $bottom: $bottom })}
+    >
+      {DropDownTitleEl}
+      {DropDownBodyEl}
+      {DropDownActionEl}
+    </DropDownWrapper>
+  );
   return (
-    <DropDownContainer 
+    <DropDownContainer
       className={`_refContainer ${type ? `_refContainer${type}` : ``}`}
-      {...$externalWidth && { $externalWidth: $externalWidth }}
-      {...$externalMinWidth && { $externalMinWidth: $externalMinWidth }}
-      {...$area && { $area: $area }}
-      {...$top && { $top: $top }}
-      {...$alias && { $alias: $alias }}
-      {...$openPosition && { $openPosition: $openPosition }}
-      {...$placement && { $placement: $placement }}
-      {...$bottom && { $bottom: $bottom }}
-      {...props}>
+      {...($externalWidth && { $externalWidth: $externalWidth })}
+      {...($externalMinWidth && { $externalMinWidth: $externalMinWidth })}
+      {...($area && { $area: $area })}
+      {...($top && { $top: $top })}
+      {...($alias && { $alias: $alias })}
+      {...($openPosition && { $openPosition: $openPosition })}
+      {...($placement && { $placement: $placement })}
+      {...($bottom && { $bottom: $bottom })}
+      {...props}
+    >
       {DropDownControlEl}
-      <DropDownOverlayWrapper className='_refDropdownOverlay' onClick={evCloseDropdown} />
-      { portalId ? <ReactPortalComponent wrapperId={portalId}><DropdownPortalContainer className={`_refDropdownPortal ${type === 'hover' ? '_refHover' : ''}`}>{dropdownWrapperEl}</DropdownPortalContainer></ReactPortalComponent> : dropdownWrapperEl }
+      <DropDownOverlayWrapper
+        className="_refDropdownOverlay"
+        onClick={evCloseDropdown}
+      />
+      {portalId ? (
+        <ReactPortalComponent wrapperId={portalId}>
+          <DropdownPortalContainer
+            className={`_refDropdownPortal ${type === "hover" ? "_refHover" : ""}`}
+          >
+            {dropdownWrapperEl}
+          </DropdownPortalContainer>
+        </ReactPortalComponent>
+      ) : (
+        dropdownWrapperEl
+      )}
     </DropDownContainer>
   );
-}
+};
 
 export default DropDownComponent;