feat: dropdown: add ability to portal

src/components/Dropdown/Dropdown.tsx

@@ -8,10 +8,15 @@ import React, {
 import { DropdownProps } from './Dropdown.types';
 import { autoUpdate, shift, useFloating } from '@floating-ui/react-dom';
 import { offset as fOffset } from '@floating-ui/core';
-import { mergeClasses, uniqueId } from '../../shared/utilities';
+import {
+    ConditionalWrapper,
+    mergeClasses,
+    uniqueId,
+} from '../../shared/utilities';
 import { useOnClickOutside } from '../../hooks/useOnClickOutside';
 import { useAccessibility } from '../../hooks/useAccessibility';
 import styles from './dropdown.module.scss';
+import { FloatingPortal } from '@floating-ui/react-dom-interactions';
 
 const TRIGGER_TO_HANDLER_MAP_ON_ENTER = {
     click: 'onClick',
@@ -37,6 +42,7 @@ export const Dropdown: FC<DropdownProps> = ({
     dropdownStyle,
     children,
     placement = 'bottom-start',
+    portal = false,
     overlay,
     offset = 4,
     positionStrategy = 'absolute',
@@ -163,7 +169,14 @@ export const Dropdown: FC<DropdownProps> = ({
                 : {})}
         >
             {getReference()}
-            {getDropdown()}
+            <ConditionalWrapper
+                condition={portal}
+                wrapper={(children) => (
+                    <FloatingPortal>{children}</FloatingPortal>
+                )}
+            >
+                {getDropdown()}
+            </ConditionalWrapper>
         </div>
     );
 };

src/components/Dropdown/Dropdown.types.ts

@@ -39,6 +39,11 @@ export interface DropdownProps {
      * @default bottom-start
      */
     placement?: Placement;
+    /**
+     * If the dropdown is portaled
+     * @default false
+     */
+    portal?: boolean;
     /**
      * Positioning strategy for the tooltip
      * @default absolute

src/components/Dropdown/dropdown.module.scss

@@ -2,30 +2,6 @@
     display: inline-block;
     white-space: nowrap;
 
-    .dropdown-wrapper {
-        background: var(--background-color);
-        padding: $space-xs;
-        box-shadow: $shadow-object-m;
-        border-radius: $space-xxs;
-        transition: all $motion-duration-fast $motion-easing-easeout;
-        min-width: 280px;
-        opacity: 0;
-        white-space: normal;
-        z-index: $z-index-400;
-        max-height: 34vh;
-        overflow-y: auto;
-
-        &.open {
-            animation: slideUpIn $motion-duration-extra-fast
-                $motion-easing-easeinout 0s forwards;
-        }
-
-        &.close {
-            animation: slideUpOut $motion-duration-extra-fast
-                $motion-easing-easeinout 0s forwards;
-        }
-    }
-
     .reference-wrapper {
         display: flex;
         cursor: pointer;
@@ -41,3 +17,27 @@
         }
     }
 }
+
+.dropdown-wrapper {
+    background: var(--background-color);
+    padding: $space-xs;
+    box-shadow: $shadow-object-m;
+    border-radius: $space-xxs;
+    transition: all $motion-duration-fast $motion-easing-easeout;
+    min-width: 280px;
+    opacity: 0;
+    white-space: normal;
+    z-index: $z-index-400;
+    max-height: 34vh;
+    overflow-y: auto;
+
+    &.open {
+        animation: slideUpIn $motion-duration-extra-fast
+            $motion-easing-easeinout 0s forwards;
+    }
+
+    &.close {
+        animation: slideUpOut $motion-duration-extra-fast
+            $motion-easing-easeinout 0s forwards;
+    }
+}