@spaced-out/ui-design-system 0.3.48 → 0.3.50

package/lib/components/InlineDropdown/InlineDropdown.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,
@@ -14,6 +18,7 @@ import {
   useFloating,
 } from '@floating-ui/react';
 
+import {useReferenceElementWidth} from '../../hooks';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
 import {type ClickAwayRefType, ClickAway} from '../../utils/click-away';
@@ -24,6 +29,7 @@ import type {AnchorType} from '../ButtonDropdown';
 import {Icon} from '../Icon';
 import type {MenuOption, MenuProps} from '../Menu';
 import {Menu} from '../Menu';
+import {type ElevationType, getElevationValue} from '../Tooltip';
 import {Truncate} from '../Truncate';
 
 import css from './InlineDropdown.module.css';
@@ -43,6 +49,7 @@ export type InlineDropdownProps = {
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
   size?: 'medium' | 'small' | 'extraSmall',
+  elevation?: ElevationType,
   clickAwayRef?: ClickAwayRefType,
   ...
 };
@@ -63,13 +70,12 @@ export const InlineDropdown: React$AbstractComponent<
       onMenuClose,
       children,
       clickAwayRef,
+      elevation = 'modal',
       ...restButtonProps
     }: InlineDropdownProps,
     ref,
   ): React.Node => {
-    const menuBtnRef = React.useRef(null);
-    React.useImperativeHandle(ref, () => menuBtnRef.current);
-    const {x, y, refs, strategy} = useFloating({
+    const {x, y, refs, strategy, context} = useFloating({
       open: true,
       strategy: 'absolute',
       placement: anchorPosition,
@@ -77,8 +83,10 @@ export const InlineDropdown: React$AbstractComponent<
       middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
     });
 
+    const dropdownWidth = useReferenceElementWidth(refs.reference?.current);
+
     const onMenuToggle = (isOpen: boolean) => {
-      isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
+      isOpen ? onMenuOpen?.() : onMenuClose?.();
     };
 
     return (
@@ -90,7 +98,7 @@ export const InlineDropdown: React$AbstractComponent<
               css.inlineDropdownContainer,
               classNames?.dropdownContainer,
             )}
-            ref={menuBtnRef}
+            ref={ref}
           >
             <UnstyledButton
               {...restButtonProps}
@@ -120,31 +128,50 @@ export const InlineDropdown: React$AbstractComponent<
               />
             </UnstyledButton>
             {isOpen && menu && (
-              <div
-                ref={mergeRefs([refs.setFloating, boundaryRef])}
-                style={{
-                  display: 'flex',
-                  position: strategy,
-                  top: y ?? spaceNone,
-                  left: x ?? spaceNone,
-                }}
-              >
-                <Menu
-                  {...menu}
-                  onSelect={(option, e) => {
-                    onOptionSelect && onOptionSelect(option, e);
-                    if (
-                      // option.keepMenuOpenOnOptionSelect - to allow the menu persist its open stat upon option selection in normal variant
-                      !option.keepMenuOpenOnOptionSelect &&
-                      (!menu.optionsVariant || menu.optionsVariant === 'normal')
-                    ) {
-                      clickAway();
-                    }
-                  }}
-                  size={menu.size || 'medium'}
-                  onTabOut={clickAway}
-                />
-              </div>
+              <FloatingPortal>
+                <FloatingFocusManager
+                  modal={false}
+                  context={context}
+                  initialFocus={triggerRef}
+                >
+                  <div
+                    className={css.menuWrapper}
+                    ref={mergeRefs([refs.setFloating, boundaryRef])}
+                    style={{
+                      display: 'flex',
+                      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),
+                    }}
+                  >
+                    <Menu
+                      {...menu}
+                      onSelect={(option, e) => {
+                        onOptionSelect && onOptionSelect(option, e);
+                        if (
+                          // option.keepMenuOpenOnOptionSelect - to allow the menu persist its open stat upon option selection in normal variant
+                          !option.keepMenuOpenOnOptionSelect &&
+                          (!menu.optionsVariant ||
+                            menu.optionsVariant === 'normal')
+                        ) {
+                          clickAway();
+                        }
+                      }}
+                      size={menu.size || 'medium'}
+                      onTabOut={clickAway}
+                    />
+                  </div>
+                </FloatingFocusManager>
+              </FloatingPortal>
             )}
           </div>
         )}

package/lib/components/InlineDropdown/InlineDropdown.module.css

@@ -42,3 +42,8 @@
   color: colorTextDisabled;
   cursor: not-allowed;
 }
+
+.menuWrapper {
+  width: var(--dropdown-width);
+  z-index: var(--menu-elevation);
+}

package/lib/components/InlineDropdown/SimpleInlineDropdown.js

@@ -32,6 +32,7 @@ const SimpleInlineDropdownBase = (props, ref) => {
     showLabelTooltip,
     clickAwayRef,
     allowWrap = false,
+    elevation = 'modal',
     ...buttonProps
   } = props;
   const [btnText, setBtnText] = React.useState('');
@@ -67,6 +68,7 @@ const SimpleInlineDropdownBase = (props, ref) => {
     onMenuOpen: onMenuOpen,
     onMenuClose: onMenuClose,
     clickAwayRef: clickAwayRef,
+    elevation: elevation,
     menu: {
       isFluid,
       options,

package/lib/components/InlineDropdown/SimpleInlineDropdown.js.flow

@@ -11,6 +11,7 @@ import {
 import type {ButtonProps} from '../Button';
 import type {AnchorType} from '../ButtonDropdown';
 import type {MenuOption, MenuOptionsVariant, Virtualization} from '../Menu';
+import type {ElevationType} from '../Tooltip';
 
 import {InlineDropdown} from './InlineDropdown';
 
@@ -28,6 +29,7 @@ export type SimpleInlineDropdownProps = {
   // Input props
   ...ButtonProps,
 
+  elevation?: ElevationType,
   classNames?: ClassNames,
   anchorPosition?: AnchorType,
 
@@ -79,6 +81,7 @@ const SimpleInlineDropdownBase = (props: SimpleInlineDropdownProps, ref) => {
     showLabelTooltip,
     clickAwayRef,
     allowWrap = false,
+    elevation = 'modal',
     ...buttonProps
   } = props;
 
@@ -133,6 +136,7 @@ const SimpleInlineDropdownBase = (props: SimpleInlineDropdownProps, ref) => {
       onMenuOpen={onMenuOpen}
       onMenuClose={onMenuClose}
       clickAwayRef={clickAwayRef}
+      elevation={elevation}
       menu={{
         isFluid,
         options,

package/lib/components/Modal/Modal.module.css

@@ -1,10 +1,41 @@
-@value (colorBackgroundTertiary, colorBackgroundPrimary, colorBackdropFill) from '../../styles/variables/_color.css';
-@value (spaceNone, spaceSmall, spaceMedium, spaceXXSmall, spaceHalfFluid, spaceNegHalfFluid) from '../../styles/variables/_space.css';
-@value (sizeFluid, size60, size320, size480, size640) from '../../styles/variables/_size.css';
-@value (elevationNone, elevationModal, elevationBackdrop) from '../../styles/variables/_elevation.css';
-@value (opacity100, opacity0) from '../../styles/variables/_opacity.css';
-@value (motionDurationNormal, motionEaseInEaseOut) from '../../styles/variables/_motion.css';
-@value (borderRadiusMedium) from '../../styles/variables/_border.css';
+@value (
+  colorBackgroundTertiary, 
+  colorBackgroundPrimary, 
+  colorBackdropFill
+) from '../../styles/variables/_color.css';
+@value (
+  spaceNone, 
+  spaceSmall, 
+  spaceXSmall, 
+  spaceMedium, 
+  spaceXXSmall, 
+  spaceHalfFluid, 
+  spaceNegHalfFluid
+) from '../../styles/variables/_space.css';
+@value (
+  sizeFluid, 
+  size58, 
+  size60, 
+  size66,
+  size320, 
+  size480, 
+  size640
+) from '../../styles/variables/_size.css';
+@value (
+  elevationNone, 
+  elevationModal, 
+  elevationBackdrop
+) from '../../styles/variables/_elevation.css';
+@value (
+  opacity100, 
+  opacity0
+) from '../../styles/variables/_opacity.css';
+@value (
+  motionDurationNormal
+) from '../../styles/variables/_motion.css';
+@value (
+  borderRadiusMedium
+) from '../../styles/variables/_border.css';
 
 .modalContainer {
   display: flex;
@@ -83,12 +114,12 @@
 .modalHeader {
   composes: borderBottomPrimary from '../../styles/border.module.css';
   composes: subTitleLarge from '../../styles/typography.module.css';
-  padding: spaceNone spaceSmall spaceNone spaceMedium;
-  min-height: size60;
+  padding: spaceSmall spaceSmall spaceSmall spaceMedium;
+  min-height: size58;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: spaceMedium;
+  gap: spaceXSmall;
 }
 
 .headerContent {
@@ -103,16 +134,17 @@
 
 .modalFooter {
   composes: borderTopPrimary from '../../styles/border.module.css';
+  min-height: size66;
   background-color: colorBackgroundPrimary;
   margin-top: auto;
-  padding: spaceMedium;
+  padding: spaceSmall spaceMedium;
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  gap: spaceMedium;
+  gap: spaceXSmall;
 }
 
 .modalFooterActions {
   display: flex;
-  gap: spaceSmall;
+  gap: spaceXSmall;
 }

package/lib/components/Table/StaticTable.js

@@ -74,7 +74,7 @@ function StaticTable(props) {
   }, [width]);
 
   /**
-   * this function is also used to decide weather to show checkbox in header or not. so it's value is undefined incase selectedKeys is not there.
+   * this function is also used to decide weather to show checkbox in header or not. so it's value is undefined in case selectedKeys is not there.
    */
 
   const handleHeaderCheckboxClick = selectedKeys ? ({

package/lib/components/Table/StaticTable.js.flow

@@ -89,7 +89,7 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
   }, [width]);
 
   /**
-   * this function is also used to decide weather to show checkbox in header or not. so it's value is undefined incase selectedKeys is not there.
+   * this function is also used to decide weather to show checkbox in header or not. so it's value is undefined in case selectedKeys is not there.
    */
 
   const handleHeaderCheckboxClick = selectedKeys

package/lib/components/Table/Table.docs.js

@@ -104,7 +104,7 @@ const TABLE_DOCS = exports.TABLE_DOCS = {
       }
     },
     selectedKeys: {
-      description: 'array of keys which are selected. This prop is also used to decide weather to show checkboxes or not. So, pass an empty array incase no row is selected.',
+      description: 'array of keys which are selected. This prop is also used to decide weather to show checkboxes or not. So, pass an empty array in case no row is selected.',
       control: {
         type: 'object'
       },

package/lib/components/Table/Table.docs.js.flow

@@ -89,7 +89,7 @@ export const TABLE_DOCS = {
     },
     selectedKeys: {
       description:
-        'array of keys which are selected. This prop is also used to decide weather to show checkboxes or not. So, pass an empty array incase no row is selected.',
+        'array of keys which are selected. This prop is also used to decide weather to show checkboxes or not. So, pass an empty array in case no row is selected.',
       control: {
         type: 'object',
       },

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';