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

package/lib/components/SideMenuLink/SideMenuLink.js.flow

@@ -193,6 +193,11 @@ export const MENU_NAME_LIST = Object.freeze({
     iconName: 'user-headset',
     iconType: 'duotone',
   },
+  dataManagement: {
+    title: 'Data Management',
+    iconName: 'database',
+    iconType: 'duotone',
+  },
 });
 
 type ClassNames = $ReadOnly<{wrapper?: string}>;

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 in case 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 incase 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 in case 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 incase 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 in case 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 incase 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 in case 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 incase no row is selected.',
       control: {
         type: 'object',
       },

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

@@ -11,7 +11,6 @@ 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 }; }
@@ -23,15 +22,14 @@ const TabDropdown = _ref => {
     size,
     onOptionSelect,
     props,
-    elevation = 'modal',
     classNames
   } = _ref;
+  const menuBtnRef = React.useRef();
   const {
     x,
     y,
     refs,
-    strategy,
-    context
+    strategy
   } = (0, _react2.useFloating)({
     open: true,
     strategy: 'absolute',
@@ -49,7 +47,8 @@ const TabDropdown = _ref => {
     } = _ref2;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "TabDropdown",
-      className: (0, _classify.classify)(_TabDropdownModule.default.tabDropdownContainer, classNames?.wrapper)
+      className: (0, _classify.classify)(_TabDropdownModule.default.tabDropdownContainer, classNames?.wrapper),
+      ref: menuBtnRef
     }, /*#__PURE__*/React.createElement(_Tab.Tab, _extends({}, props?.tab, {
       size: size,
       ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
@@ -61,19 +60,13 @@ const TabDropdown = _ref => {
         wrapper: _TabDropdownModule.default.dotTabWrapper,
         iconTextWrap: _TabDropdownModule.default.dotTextWrap
       }
-    })), 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", {
+    })), isOpen && props?.menu && /*#__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,
-        '--menu-elevation': (0, _Tooltip.getElevationValue)(elevation)
+        left: x ?? _space.spaceNone
       }
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, props.menu, {
       onSelect: (option, e) => {
@@ -82,7 +75,7 @@ const TabDropdown = _ref => {
       },
       size: props.menu.size || size,
       onTabOut: clickAway
-    }))))));
+    }))));
   });
 };
 exports.TabDropdown = TabDropdown;

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

@@ -7,10 +7,6 @@ import {
   // $FlowFixMe[untyped-import]
   flip,
   // $FlowFixMe[untyped-import]
-  FloatingFocusManager,
-  // $FlowFixMe[untyped-import]
-  FloatingPortal,
-  // $FlowFixMe[untyped-import]
   offset,
   // $FlowFixMe[untyped-import]
   shift,
@@ -25,8 +21,6 @@ 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';
 
@@ -46,7 +40,6 @@ export type TabDropdownProps = {
   classNames?: ClassNames,
   selected?: boolean,
   disabled?: boolean,
-  elevation?: ElevationType,
 };
 
 export const TabDropdown = ({
@@ -54,10 +47,10 @@ export const TabDropdown = ({
   size,
   onOptionSelect,
   props,
-  elevation = 'modal',
   classNames,
 }: TabDropdownProps): React.Node => {
-  const {x, y, refs, strategy, context} = useFloating({
+  const menuBtnRef = React.useRef();
+  const {x, y, refs, strategy} = useFloating({
     open: true,
     strategy: 'absolute',
     placement: anchorPosition,
@@ -71,6 +64,7 @@ export const TabDropdown = ({
         <div
           data-testid="TabDropdown"
           className={classify(css.tabDropdownContainer, classNames?.wrapper)}
+          ref={menuBtnRef}
         >
           <Tab
             {...props?.tab}
@@ -86,35 +80,25 @@ export const TabDropdown = ({
             }}
           />
           {isOpen && props?.menu && (
-            <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
+              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>
           )}
         </div>
       )}

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

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

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

@@ -20,8 +20,7 @@ const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRe
     size,
     onSelect,
     selectedTab,
-    menuWidth,
-    elevation = 'modal'
+    menuWidth
   } = _ref;
   const ref = React.useRef(null);
   React.useImperativeHandle(forwardRef, () => ref.current);
@@ -105,8 +104,7 @@ 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,7 +6,6 @@ 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';
 
@@ -22,7 +21,6 @@ export type TabListProps = {
   size?: 'medium',
   selectedTab?: {tabId: string, label?: string},
   menuWidth?: string,
-  elevation?: ElevationType,
 };
 
 export const TabList: React$AbstractComponent<TabListProps, HTMLDivElement> =
@@ -35,7 +33,6 @@ export const TabList: React$AbstractComponent<TabListProps, HTMLDivElement> =
         onSelect,
         selectedTab,
         menuWidth,
-        elevation = 'modal',
       }: TabListProps,
       forwardRef,
     ): React.Node => {
@@ -123,7 +120,6 @@ 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 _hooks = require("../../hooks");
+var _size = require("../../styles/variables/_size");
 var _space = require("../../styles/variables/_space");
 var _typography = require("../../types/typography");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
@@ -20,7 +20,6 @@ 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 }; }
@@ -56,16 +55,14 @@ function TokenListInput(props) {
     tabIndex,
     values,
     resolveTokenValue,
-    inputProps,
-    elevation = 'modal'
+    inputProps
   } = props;
   const menuRef = React.useRef(null);
   const {
     x,
     y,
     refs,
-    strategy,
-    context
+    strategy
   } = (0, _react2.useFloating)({
     open: true,
     strategy: _ButtonDropdown.STRATEGY_TYPE.absolute,
@@ -74,7 +71,6 @@ 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?.();
@@ -156,9 +152,8 @@ 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),
-      "data-testid": "TokenListInput"
+      ref: menuRef
     }, /*#__PURE__*/React.createElement("div", {
       onClick: () => {
         if (disabled || locked || values.length >= limit) {
@@ -229,27 +224,13 @@ 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(_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,
+    }, helperText) : helperText), !locked && isOpen && menu && /*#__PURE__*/React.createElement("div", {
       ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
       style: {
         position: strategy,
         top: y ?? _space.spaceNone,
         left: x ?? _space.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': (0, _Tooltip.getElevationValue)(elevation)
+        width: _size.sizeFluid
       }
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
       onSelect: option => {
@@ -265,7 +246,7 @@ function TokenListInput(props) {
       size: menu.size || size,
       onTabOut: clickAway,
       ref: menuRef
-    })))))));
+    })))));
   });
 }
 TokenListInput.displayName = 'TokenListInput';

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

@@ -7,17 +7,13 @@ 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 {useReferenceElementWidth} from '../../hooks';
+import {sizeFluid} from '../../styles/variables/_size';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {TEXT_COLORS} from '../../types/typography';
 import classify from '../../utils/classify';
@@ -35,7 +31,6 @@ 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';
@@ -96,7 +91,6 @@ export type Props<T> = {
   onMenuClose?: () => mixed,
   resolveTokenValue?: (ResolveTokenValueProps<T>) => React.Node,
   inputProps?: InputProps,
-  elevation?: ElevationType,
 };
 
 export function TokenListInput<T>(props: Props<T>): React.Node {
@@ -126,11 +120,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, context} = useFloating({
+  const {x, y, refs, strategy} = useFloating({
     open: true,
     strategy: STRATEGY_TYPE.absolute,
     placement: ANCHOR_POSITION_TYPE.bottomStart,
@@ -139,7 +133,6 @@ 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) {
@@ -229,9 +222,8 @@ export function TokenListInput<T>(props: Props<T>): React.Node {
       {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
         <>
           <div
-            ref={menuRef}
             className={classify(css.tokenListContainer, classNames?.wrapper)}
-            data-testid="TokenListInput"
+            ref={menuRef}
           >
             <div
               onClick={() => {
@@ -332,52 +324,34 @@ export function TokenListInput<T>(props: Props<T>): React.Node {
               </div>
             )}
             {!locked && isOpen && menu && (
-              <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
+                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>
             )}
           </div>
         </>

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

@@ -150,8 +150,3 @@
   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.getElevationValue = exports.Tooltip = exports.ELEVATION_TYPES = exports.DELAY_MOTION_DURATION_TYPES = void 0;
+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,7 +39,6 @@ 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?: ElevationType,
+  elevation?: string,
 };
 
 export type TooltipProps = {
@@ -94,7 +94,7 @@ export type TooltipProps = {
   children: any,
 };
 
-export const getElevationValue = (elevation: string): string => {
+const getElevationValue = (elevation: string): string => {
   const elevationKey = 'elevation' + capitalize(elevation);
   return ELEVATION[elevationKey] || elevation;
 };

package/lib/components/Typeahead/SimpleTypeahead.js

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

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

@@ -7,7 +7,6 @@ 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';
 
@@ -39,7 +38,6 @@ export type SimpleTypeaheadProps = {
   menuClassNames?: MenuClassNames,
   showLabelTooltip?: MenuLabelTooltip,
   allowWrap?: boolean,
-  elevation?: ElevationType,
 
   // events
   onSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
@@ -78,7 +76,6 @@ const SimpleTypeaheadBase = (props: SimpleTypeaheadProps, ref) => {
     showLabelTooltip,
     allowInternalFilter = true,
     allowWrap = false,
-    elevation = 'modal',
     ...inputProps
   } = props;
 
@@ -151,7 +148,6 @@ const SimpleTypeaheadBase = (props: SimpleTypeaheadProps, ref) => {
         allowWrap,
       }}
       clickAwayRef={clickAwayRef}
-      elevation={elevation}
     />
   );
 };