@spaced-out/ui-design-system 0.3.46 → 0.3.47-beta.0

package/lib/components/Tabs/TabList/TabDropdown.js

@@ -11,6 +11,7 @@ var _classify = require("../../../utils/classify");
 var _clickAway = require("../../../utils/click-away");
 var _mergeRefs = require("../../../utils/merge-refs");
 var _Menu = require("../../Menu");
+var _Tooltip = require("../../Tooltip");
 var _Tab = require("../Tab");
 var _TabDropdownModule = _interopRequireDefault(require("./TabDropdown.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -22,14 +23,15 @@ const TabDropdown = _ref => {
     size,
     onOptionSelect,
     props,
+    elevation = 'modal',
     classNames
   } = _ref;
-  const menuBtnRef = React.useRef();
   const {
     x,
     y,
     refs,
-    strategy
+    strategy,
+    context
   } = (0, _react2.useFloating)({
     open: true,
     strategy: 'absolute',
@@ -47,8 +49,7 @@ const TabDropdown = _ref => {
     } = _ref2;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "TabDropdown",
-      className: (0, _classify.classify)(_TabDropdownModule.default.tabDropdownContainer, classNames?.wrapper),
-      ref: menuBtnRef
+      className: (0, _classify.classify)(_TabDropdownModule.default.tabDropdownContainer, classNames?.wrapper)
     }, /*#__PURE__*/React.createElement(_Tab.Tab, _extends({}, props?.tab, {
       size: size,
       ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
@@ -60,13 +61,19 @@ const TabDropdown = _ref => {
         wrapper: _TabDropdownModule.default.dotTabWrapper,
         iconTextWrap: _TabDropdownModule.default.dotTextWrap
       }
-    })), isOpen && props?.menu && /*#__PURE__*/React.createElement("div", {
+    })), isOpen && props?.menu && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, {
+      modal: false,
+      context: context,
+      initialFocus: refs.reference
+    }, /*#__PURE__*/React.createElement("div", {
       ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
+      className: _TabDropdownModule.default.menuWrapper,
       style: {
         display: 'flex',
         position: strategy,
         top: y ?? _space.spaceNone,
-        left: x ?? _space.spaceNone
+        left: x ?? _space.spaceNone,
+        '--menu-elevation': (0, _Tooltip.getElevationValue)(elevation)
       }
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, props.menu, {
       onSelect: (option, e) => {
@@ -75,7 +82,7 @@ const TabDropdown = _ref => {
       },
       size: props.menu.size || size,
       onTabOut: clickAway
-    }))));
+    }))))));
   });
 };
 exports.TabDropdown = TabDropdown;

package/lib/components/Tabs/TabList/TabDropdown.js.flow

@@ -7,6 +7,10 @@ import {
   // $FlowFixMe[untyped-import]
   flip,
   // $FlowFixMe[untyped-import]
+  FloatingFocusManager,
+  // $FlowFixMe[untyped-import]
+  FloatingPortal,
+  // $FlowFixMe[untyped-import]
   offset,
   // $FlowFixMe[untyped-import]
   shift,
@@ -21,6 +25,8 @@ import {mergeRefs} from '../../../utils/merge-refs';
 import type {AnchorType} from '../../ButtonDropdown';
 import type {MenuOption, MenuProps} from '../../Menu';
 import {Menu} from '../../Menu';
+import type {ElevationType} from '../../Tooltip';
+import {getElevationValue} from '../../Tooltip';
 import type {TabProps} from '../Tab';
 import {Tab} from '../Tab';
 
@@ -40,6 +46,7 @@ export type TabDropdownProps = {
   classNames?: ClassNames,
   selected?: boolean,
   disabled?: boolean,
+  elevation?: ElevationType,
 };
 
 export const TabDropdown = ({
@@ -47,10 +54,10 @@ export const TabDropdown = ({
   size,
   onOptionSelect,
   props,
+  elevation = 'modal',
   classNames,
 }: TabDropdownProps): React.Node => {
-  const menuBtnRef = React.useRef();
-  const {x, y, refs, strategy} = useFloating({
+  const {x, y, refs, strategy, context} = useFloating({
     open: true,
     strategy: 'absolute',
     placement: anchorPosition,
@@ -64,7 +71,6 @@ export const TabDropdown = ({
         <div
           data-testid="TabDropdown"
           className={classify(css.tabDropdownContainer, classNames?.wrapper)}
-          ref={menuBtnRef}
         >
           <Tab
             {...props?.tab}
@@ -80,25 +86,35 @@ export const TabDropdown = ({
             }}
           />
           {isOpen && props?.menu && (
-            <div
-              ref={mergeRefs([refs.setFloating, boundaryRef])}
-              style={{
-                display: 'flex',
-                position: strategy,
-                top: y ?? spaceNone,
-                left: x ?? spaceNone,
-              }}
-            >
-              <Menu
-                {...props.menu}
-                onSelect={(option, e) => {
-                  onOptionSelect && onOptionSelect(option, e);
-                  clickAway();
-                }}
-                size={props.menu.size || size}
-                onTabOut={clickAway}
-              />
-            </div>
+            <FloatingPortal>
+              <FloatingFocusManager
+                modal={false}
+                context={context}
+                initialFocus={refs.reference}
+              >
+                <div
+                  ref={mergeRefs([refs.setFloating, boundaryRef])}
+                  className={css.menuWrapper}
+                  style={{
+                    display: 'flex',
+                    position: strategy,
+                    top: y ?? spaceNone,
+                    left: x ?? spaceNone,
+                    '--menu-elevation': getElevationValue(elevation),
+                  }}
+                >
+                  <Menu
+                    {...props.menu}
+                    onSelect={(option, e) => {
+                      onOptionSelect && onOptionSelect(option, e);
+                      clickAway();
+                    }}
+                    size={props.menu.size || size}
+                    onTabOut={clickAway}
+                  />
+                </div>
+              </FloatingFocusManager>
+            </FloatingPortal>
           )}
         </div>
       )}

package/lib/components/Tabs/TabList/TabDropdown.module.css

@@ -20,3 +20,7 @@
 .dotTextWrap {
   width: spaceFluid;
 }
+
+.menuWrapper {
+  z-index: var(--menu-elevation);
+}

package/lib/components/Tabs/TabList/TabList.js

@@ -20,7 +20,8 @@ const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRe
     size,
     onSelect,
     selectedTab,
-    menuWidth
+    menuWidth,
+    elevation = 'modal'
   } = _ref;
   const ref = React.useRef(null);
   React.useImperativeHandle(forwardRef, () => ref.current);
@@ -104,7 +105,8 @@ const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRe
           selectedKeys,
           width: menuWidth
         }
-      }
+      },
+      elevation: elevation
     }) : null;
     nodes = [...tabListNodes, tabDropDownNode];
     return nodes;

package/lib/components/Tabs/TabList/TabList.js.flow

@@ -6,6 +6,7 @@ import {useWindowSize} from '../../../hooks/useWindowSize/useWindowSize';
 import {size36, size100} from '../../../styles/variables/_size';
 import {spaceMedium} from '../../../styles/variables/_space';
 import {classify} from '../../../utils/classify';
+import type {ElevationType} from '../../Tooltip';
 
 import {TabDropdown} from './TabDropdown';
 
@@ -21,6 +22,7 @@ export type TabListProps = {
   size?: 'medium',
   selectedTab?: {tabId: string, label?: string},
   menuWidth?: string,
+  elevation?: ElevationType,
 };
 
 export const TabList: React$AbstractComponent<TabListProps, HTMLDivElement> =
@@ -33,6 +35,7 @@ export const TabList: React$AbstractComponent<TabListProps, HTMLDivElement> =
         onSelect,
         selectedTab,
         menuWidth,
+        elevation = 'modal',
       }: TabListProps,
       forwardRef,
     ): React.Node => {
@@ -120,6 +123,7 @@ export const TabList: React$AbstractComponent<TabListProps, HTMLDivElement> =
                 width: menuWidth,
               },
             }}
+            elevation={elevation}
           />
         ) : null;
 

package/lib/components/TokenListInput/TokenListInput.js

@@ -8,7 +8,7 @@ exports.TokenListInput = TokenListInput;
 var React = _interopRequireWildcard(require("react"));
 var _react2 = require("@floating-ui/react");
 var _without = _interopRequireDefault(require("lodash/without"));
-var _size = require("../../styles/variables/_size");
+var _hooks = require("../../hooks");
 var _space = require("../../styles/variables/_space");
 var _typography = require("../../types/typography");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
@@ -20,6 +20,7 @@ var _CircularLoader = require("../CircularLoader");
 var _Icon = require("../Icon");
 var _Menu = require("../Menu");
 var _Text = require("../Text");
+var _Tooltip = require("../Tooltip");
 var _TokenValueChips = require("./TokenValueChips");
 var _TokenListInputModule = _interopRequireDefault(require("./TokenListInput.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -55,14 +56,16 @@ function TokenListInput(props) {
     tabIndex,
     values,
     resolveTokenValue,
-    inputProps
+    inputProps,
+    elevation = 'modal'
   } = props;
   const menuRef = React.useRef(null);
   const {
     x,
     y,
     refs,
-    strategy
+    strategy,
+    context
   } = (0, _react2.useFloating)({
     open: true,
     strategy: _ButtonDropdown.STRATEGY_TYPE.absolute,
@@ -71,6 +74,7 @@ function TokenListInput(props) {
     middleware: [(0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
   });
   const inputRef = React.useRef();
+  const dropdownWidth = (0, _hooks.useReferenceElementWidth)(refs.reference?.current);
   const onOpenToggle = isOpen => {
     if (isOpen) {
       onMenuOpen?.();
@@ -152,8 +156,9 @@ function TokenListInput(props) {
       triggerRef
     } = _ref;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      ref: menuRef,
       className: (0, _classify.default)(_TokenListInputModule.default.tokenListContainer, classNames?.wrapper),
-      ref: menuRef
+      "data-testid": "TokenListInput"
     }, /*#__PURE__*/React.createElement("div", {
       onClick: () => {
         if (disabled || locked || values.length >= limit) {
@@ -224,13 +229,27 @@ function TokenListInput(props) {
       color: _typography.TEXT_COLORS.danger
     }, errorText) : typeof helperText === 'string' ? /*#__PURE__*/React.createElement(_Text.BodySmall, {
       color: _typography.TEXT_COLORS.secondary
-    }, helperText) : helperText), !locked && isOpen && menu && /*#__PURE__*/React.createElement("div", {
+    }, helperText) : helperText), !locked && isOpen && menu && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, {
+      modal: false,
+      context: context,
+      returnFocus: false,
+      initialFocus: refs.reference
+    }, /*#__PURE__*/React.createElement("div", {
+      className: _TokenListInputModule.default.menuWrapper,
       ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
       style: {
         position: strategy,
         top: y ?? _space.spaceNone,
         left: x ?? _space.spaceNone,
-        width: _size.sizeFluid
+        /* NOTE(Sharad): The FloatingPortal renders the menu outside the normal DOM structure,
+         so its parent is effectively the <body> element. This means the menu
+         would otherwise default to the body's width. To support fluid width,
+         we must manually set the dropdown width here; otherwise, it uses a fixed width.
+         Also, Only treat menu as non-fluid if isFluid is strictly false, since default is true in menu and undefined means fluid. */
+        ...(menu.isFluid !== false && {
+          '--dropdown-width': dropdownWidth
+        }),
+        '--menu-elevation': (0, _Tooltip.getElevationValue)(elevation)
       }
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
       onSelect: option => {
@@ -246,7 +265,7 @@ function TokenListInput(props) {
       size: menu.size || size,
       onTabOut: clickAway,
       ref: menuRef
-    })))));
+    })))))));
   });
 }
 TokenListInput.displayName = 'TokenListInput';

package/lib/components/TokenListInput/TokenListInput.js.flow

@@ -7,13 +7,17 @@ import {
   // $FlowFixMe[untyped-import]
   flip,
   // $FlowFixMe[untyped-import]
+  FloatingFocusManager,
+  // $FlowFixMe[untyped-import]
+  FloatingPortal,
+  // $FlowFixMe[untyped-import]
   offset,
   // $FlowFixMe[untyped-import]
   useFloating,
 } from '@floating-ui/react';
 import without from 'lodash/without';
 
-import {sizeFluid} from '../../styles/variables/_size';
+import {useReferenceElementWidth} from '../../hooks';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {TEXT_COLORS} from '../../types/typography';
 import classify from '../../utils/classify';
@@ -31,6 +35,7 @@ import type {InputProps} from '../Input';
 import type {BaseMenuProps} from '../Menu';
 import {Menu} from '../Menu';
 import {BodySmall} from '../Text';
+import {type ElevationType, getElevationValue} from '../Tooltip';
 
 import type {ResolveTokenValueProps} from './TokenValueChips';
 import {TokenValueChips} from './TokenValueChips';
@@ -91,6 +96,7 @@ export type Props<T> = {
   onMenuClose?: () => mixed,
   resolveTokenValue?: (ResolveTokenValueProps<T>) => React.Node,
   inputProps?: InputProps,
+  elevation?: ElevationType,
 };
 
 export function TokenListInput<T>(props: Props<T>): React.Node {
@@ -120,11 +126,11 @@ export function TokenListInput<T>(props: Props<T>): React.Node {
     values,
     resolveTokenValue,
     inputProps,
+    elevation = 'modal',
   } = props;
-
   const menuRef = React.useRef<HTMLDivElement | null>(null);
 
-  const {x, y, refs, strategy} = useFloating({
+  const {x, y, refs, strategy, context} = useFloating({
     open: true,
     strategy: STRATEGY_TYPE.absolute,
     placement: ANCHOR_POSITION_TYPE.bottomStart,
@@ -133,6 +139,7 @@ export function TokenListInput<T>(props: Props<T>): React.Node {
   });
 
   const inputRef = React.useRef<?HTMLInputElement>();
+  const dropdownWidth = useReferenceElementWidth(refs.reference?.current);
 
   const onOpenToggle = (isOpen) => {
     if (isOpen) {
@@ -222,8 +229,9 @@ export function TokenListInput<T>(props: Props<T>): React.Node {
       {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
         <>
           <div
-            className={classify(css.tokenListContainer, classNames?.wrapper)}
             ref={menuRef}
+            className={classify(css.tokenListContainer, classNames?.wrapper)}
+            data-testid="TokenListInput"
           >
             <div
               onClick={() => {
@@ -324,34 +332,52 @@ export function TokenListInput<T>(props: Props<T>): React.Node {
               </div>
             )}
             {!locked && isOpen && menu && (
-              <div
-                ref={mergeRefs([refs.setFloating, boundaryRef])}
-                style={{
-                  position: strategy,
-                  top: y ?? spaceNone,
-                  left: x ?? spaceNone,
-                  width: sizeFluid,
-                }}
-              >
-                {/* $FlowFixMe[incompatible-type] Menu expects MenuOption but receives T */}
-                {/* $FlowFixMe[prop-missing] MenuOption properties are missing in T */}
-                <Menu
-                  {...menu}
-                  onSelect={(option) => {
-                    if (values.length >= limit) {
-                      return;
-                    }
-                    // $FlowFixMe[incompatible-call] option from Menu is MenuOption but addValue expects T
-                    // $FlowFixMe[prop-missing] MenuOption properties are missing in T
-                    addValue(option);
-                    clickAway();
-                    inputRef.current?.focus();
-                  }}
-                  size={menu.size || size}
-                  onTabOut={clickAway}
-                  ref={menuRef}
-                />
-              </div>
+              <FloatingPortal>
+                <FloatingFocusManager
+                  modal={false}
+                  context={context}
+                  returnFocus={false}
+                  initialFocus={refs.reference}
+                >
+                  <div
+                    className={css.menuWrapper}
+                    ref={mergeRefs([refs.setFloating, boundaryRef])}
+                    style={{
+                      position: strategy,
+                      top: y ?? spaceNone,
+                      left: x ?? spaceNone,
+                      /* NOTE(Sharad): The FloatingPortal renders the menu outside the normal DOM structure,
+                       so its parent is effectively the <body> element. This means the menu
+                       would otherwise default to the body's width. To support fluid width,
+                       we must manually set the dropdown width here; otherwise, it uses a fixed width.
+                       Also, Only treat menu as non-fluid if isFluid is strictly false, since default is true in menu and undefined means fluid. */ ...(menu.isFluid !==
+                        false && {
+                        '--dropdown-width': dropdownWidth,
+                      }),
+                      '--menu-elevation': getElevationValue(elevation),
+                    }}
+                  >
+                    {/* $FlowFixMe[incompatible-type] Menu expects MenuOption but receives T */}
+                    {/* $FlowFixMe[prop-missing] MenuOption properties are missing in T */}
+                    <Menu
+                      {...menu}
+                      onSelect={(option) => {
+                        if (values.length >= limit) {
+                          return;
+                        }
+                        // $FlowFixMe[incompatible-call] option from Menu is MenuOption but addValue expects T
+                        // $FlowFixMe[prop-missing] MenuOption properties are missing in T
+                        addValue(option);
+                        clickAway();
+                        inputRef.current?.focus();
+                      }}
+                      size={menu.size || size}
+                      onTabOut={clickAway}
+                      ref={menuRef}
+                    />
+                  </div>
+                </FloatingFocusManager>
+              </FloatingPortal>
             )}
           </div>
         </>

package/lib/components/TokenListInput/TokenListInput.module.css

@@ -150,3 +150,8 @@
   height: size26;
   margin-left: auto;
 }
+
+.menuWrapper {
+  width: var(--dropdown-width);
+  z-index: var(--menu-elevation);
+}

package/lib/components/Tooltip/Tooltip.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Tooltip = exports.ELEVATION_TYPES = exports.DELAY_MOTION_DURATION_TYPES = void 0;
+exports.getElevationValue = exports.Tooltip = exports.ELEVATION_TYPES = exports.DELAY_MOTION_DURATION_TYPES = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _react2 = require("@floating-ui/react");
 var ELEVATION = _interopRequireWildcard(require("../../styles/variables/_elevation"));
@@ -39,6 +39,7 @@ const getElevationValue = elevation => {
   const elevationKey = 'elevation' + (0, _string.capitalize)(elevation);
   return ELEVATION[elevationKey] || elevation;
 };
+exports.getElevationValue = getElevationValue;
 const Tooltip = _ref => {
   let {
     classNames,

package/lib/components/Tooltip/Tooltip.js.flow

@@ -84,7 +84,7 @@ export type BaseTooltipProps = {
   titleMaxLines?: number,
   delayMotionDuration?: DelayMotionDurationType,
   hidden?: boolean,
-  elevation?: string,
+  elevation?: ElevationType,
 };
 
 export type TooltipProps = {
@@ -94,7 +94,7 @@ export type TooltipProps = {
   children: any,
 };
 
-const getElevationValue = (elevation: string): string => {
+export const getElevationValue = (elevation: string): string => {
   const elevationKey = 'elevation' + capitalize(elevation);
   return ELEVATION[elevationKey] || elevation;
 };

package/lib/components/Typeahead/SimpleTypeahead.js

@@ -31,6 +31,7 @@ const SimpleTypeaheadBase = (props, ref) => {
     showLabelTooltip,
     allowInternalFilter = true,
     allowWrap = false,
+    elevation = 'modal',
     ...inputProps
   } = props;
   const [typeaheadInputText, setTypeaheadInputText] = React.useState('');
@@ -84,7 +85,8 @@ const SimpleTypeaheadBase = (props, ref) => {
       showLabelTooltip,
       allowWrap
     },
-    clickAwayRef: clickAwayRef
+    clickAwayRef: clickAwayRef,
+    elevation: elevation
   }));
 };
 const SimpleTypeahead = exports.SimpleTypeahead = /*#__PURE__*/React.forwardRef(SimpleTypeaheadBase);

package/lib/components/Typeahead/SimpleTypeahead.js.flow

@@ -7,6 +7,7 @@ import type {ClickAwayRefType} from '../../utils/click-away';
 import {getTextLabelFromSelectedKeys} from '../../utils/menu';
 import type {InputProps} from '../Input';
 import type {MenuOption, Virtualization} from '../Menu';
+import type {ElevationType} from '../Tooltip';
 
 import {Typeahead} from './Typeahead';
 
@@ -38,6 +39,7 @@ export type SimpleTypeaheadProps = {
   menuClassNames?: MenuClassNames,
   showLabelTooltip?: MenuLabelTooltip,
   allowWrap?: boolean,
+  elevation?: ElevationType,
 
   // events
   onSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
@@ -76,6 +78,7 @@ const SimpleTypeaheadBase = (props: SimpleTypeaheadProps, ref) => {
     showLabelTooltip,
     allowInternalFilter = true,
     allowWrap = false,
+    elevation = 'modal',
     ...inputProps
   } = props;
 
@@ -148,6 +151,7 @@ const SimpleTypeaheadBase = (props: SimpleTypeaheadProps, ref) => {
         allowWrap,
       }}
       clickAwayRef={clickAwayRef}
+      elevation={elevation}
     />
   );
 };

package/lib/components/Typeahead/Typeahead.js

@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.Typeahead = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _react2 = require("@floating-ui/react");
-var _size = require("../../styles/variables/_size");
+var _hooks = require("../../hooks");
 var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
 var _clickAway = require("../../utils/click-away");
 var _mergeRefs = require("../../utils/merge-refs");
 var _Menu = require("../Menu");
 var _SearchInput = require("../SearchInput");
+var _Tooltip = require("../Tooltip");
 var _TypeaheadModule = _interopRequireDefault(require("./Typeahead.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -33,6 +34,7 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     menuOpenOffset = 1,
     onFocus,
     clickAwayRef,
+    elevation = 'modal',
     ...inputProps
   } = _ref;
   const menuOptions = menu?.options;
@@ -40,7 +42,8 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     x,
     y,
     refs,
-    strategy
+    strategy,
+    context
   } = (0, _react2.useFloating)({
     open: true,
     strategy: 'absolute',
@@ -48,6 +51,7 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     whileElementsMounted: _react2.autoUpdate,
     middleware: [(0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
   });
+  const dropdownWidth = (0, _hooks.useReferenceElementWidth)(refs.reference?.current);
   const onMenuToggle = isOpen => {
     isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
   };
@@ -64,8 +68,7 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     } = _ref2;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "Typeahead",
-      className: (0, _classify.classify)(_TypeaheadModule.default.typeaheadContainer, classNames?.wrapper),
-      ref: boundaryRef
+      className: (0, _classify.classify)(_TypeaheadModule.default.typeaheadContainer, classNames?.wrapper)
     }, /*#__PURE__*/React.createElement(_SearchInput.SearchInput, _extends({}, inputProps, {
       ref: ref,
       boxRef: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
@@ -96,13 +99,27 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       onClear: _e => {
         onClear?.();
       }
-    })), isOpen && !isLoading && menu && menuOptions && !!menuOptions.length && /*#__PURE__*/React.createElement("div", {
-      ref: refs.setFloating,
+    })), isOpen && !isLoading && menu && menuOptions && !!menuOptions.length && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, {
+      modal: false,
+      context: context,
+      returnFocus: false,
+      initialFocus: refs.reference
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
+      className: _TypeaheadModule.default.menuWrapper,
       style: {
         position: strategy,
         top: y ?? _space.spaceNone,
         left: x ?? _space.spaceNone,
-        width: _size.sizeFluid
+        /* NOTE(Sharad): The FloatingPortal renders the menu outside the normal DOM structure,
+         so its parent is effectively the <body> element. This means the menu
+         would otherwise default to the body's width. To support fluid width,
+         we must manually set the dropdown width here; otherwise, it uses a fixed width.
+         Also, Only treat menu as non-fluid if isFluid is strictly false, since default is true in menu and undefined means fluid. */
+        ...(menu.isFluid !== false && {
+          '--dropdown-width': dropdownWidth
+        }),
+        '--menu-elevation': (0, _Tooltip.getElevationValue)(elevation)
       }
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
       options: menuOptions,
@@ -116,7 +133,7 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       },
       size: menu.size || size,
       onTabOut: clickAway
-    }))));
+    }))))));
   });
 });
 const StatefulTypeahead = /*#__PURE__*/React.forwardRef((_ref3, ref) => {