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

package/lib/components/DateRangePicker/DateRangeWrapper.js

@@ -113,8 +113,8 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
     cardWrapperClass,
     hideTimezone,
     today,
-    startDateLabel = 'Start Date',
-    endDateLabel = 'End Date'
+    startDateLabel,
+    endDateLabel
   } = _ref2;
   const canNavigateCloser = _moment.default.utc(rangeStartMonth).year() !== _moment.default.utc(rangeEndMonth).year() || Math.abs(_moment.default.utc(rangeStartMonth).month() - _moment.default.utc(rangeEndMonth).month()) > 1;
   const handleApplyClick = () => {
@@ -154,7 +154,7 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
   }, /*#__PURE__*/React.createElement(_Text.BodySmall, {
     className: _DateRangeWrapperModule.default.selectedDate,
     color: _Text.TEXT_COLORS.secondary
-  }, `${startDateLabel}: ${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_START, dateRange)}`), /*#__PURE__*/React.createElement(_Icon.Icon, {
+  }, `${startDateLabel || 'Start Date'}: ${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_START, dateRange)}`), /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: "minus",
     size: _Icon.ICON_SIZE.small,
     type: _Icon.ICON_TYPE.regular,
@@ -162,7 +162,7 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
   }), /*#__PURE__*/React.createElement(_Text.BodySmall, {
     className: _DateRangeWrapperModule.default.selectedDate,
     color: _Text.TEXT_COLORS.secondary
-  }, `${endDateLabel}: ${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_END, dateRange)}`)), /*#__PURE__*/React.createElement("div", {
+  }, `${endDateLabel || 'End Date'}: ${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_END, dateRange)}`)), /*#__PURE__*/React.createElement("div", {
     className: _DateRangeWrapperModule.default.calendarMenuContainer
   }, /*#__PURE__*/React.createElement(CalendarHeader, {
     marker: _utils.MARKERS.DATE_RANGE_START,

package/lib/components/DateRangePicker/DateRangeWrapper.js.flow

@@ -188,8 +188,8 @@ export const DateRangeWrapper: React$AbstractComponent<
       cardWrapperClass,
       hideTimezone,
       today,
-      startDateLabel = 'Start Date',
-      endDateLabel = 'End Date',
+      startDateLabel,
+      endDateLabel,
     }: DateRangeWrapperProps,
     ref,
   ): React.Node => {
@@ -238,7 +238,7 @@ export const DateRangeWrapper: React$AbstractComponent<
               className={css.selectedDate}
               color={TEXT_COLORS.secondary}
             >
-              {`${startDateLabel}: ${getFormattedDate(
+              {`${startDateLabel || 'Start Date'}: ${getFormattedDate(
                 MARKERS.DATE_RANGE_START,
                 dateRange,
               )}`}
@@ -255,7 +255,7 @@ export const DateRangeWrapper: React$AbstractComponent<
               className={css.selectedDate}
               color={TEXT_COLORS.secondary}
             >
-              {`${endDateLabel}: ${getFormattedDate(
+              {`${endDateLabel || 'End Date'}: ${getFormattedDate(
                 MARKERS.DATE_RANGE_END,
                 dateRange,
               )}`}

package/lib/components/Dropdown/Dropdown.js

@@ -6,14 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.Dropdown = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _react2 = require("@floating-ui/react");
-var _hooks = require("../../hooks");
+var _size = require("../../styles/variables/_size");
 var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
 var _clickAway = require("../../utils/click-away");
 var _mergeRefs = require("../../utils/merge-refs");
 var _Input = require("../Input");
 var _Menu = require("../Menu");
-var _Tooltip = require("../Tooltip");
 var _DropdownModule = _interopRequireDefault(require("./Dropdown.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); }
@@ -30,16 +29,15 @@ const Dropdown = exports.Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) =>
     scrollMenuToBottom = false,
     dropdownInputText = '',
     clickAwayRef,
-    elevation = 'modal',
     ...inputProps
   } = _ref;
+  const dropdownRef = React.useRef();
   const menuRef = React.useRef();
   const {
     x,
     y,
     refs,
-    strategy,
-    context
+    strategy
   } = (0, _react2.useFloating)({
     open: true,
     strategy: 'absolute',
@@ -47,7 +45,6 @@ const Dropdown = exports.Dropdown = /*#__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();
     if (scrollMenuToBottom && menuRef.current && isOpen) {
@@ -66,8 +63,9 @@ const Dropdown = exports.Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) =>
       triggerRef
     } = _ref2;
     return /*#__PURE__*/React.createElement("div", {
+      "data-testid": "Dropdown",
       className: (0, _classify.classify)(_DropdownModule.default.dropdownContainer, classNames?.wrapper),
-      "data-testid": "Dropdown"
+      ref: (0, _mergeRefs.mergeRefs)([dropdownRef, boundaryRef])
     }, /*#__PURE__*/React.createElement(_Input.Input, _extends({}, inputProps, {
       onKeyDown: e => {
         if (e.keyCode === 32) {
@@ -90,26 +88,13 @@ const Dropdown = exports.Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) =>
         onOpen();
       },
       ref: ref
-    })), isOpen && menu && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, {
-      modal: false,
-      context: context,
-      initialFocus: refs.reference
-    }, /*#__PURE__*/React.createElement("div", {
+    })), isOpen && menu && /*#__PURE__*/React.createElement("div", {
       ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
-      className: _DropdownModule.default.menuWrapper,
       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, e) => {
@@ -124,6 +109,6 @@ const Dropdown = exports.Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) =>
       size: menu.size || size,
       onTabOut: clickAway,
       ref: menuRef
-    }))))));
+    }))));
   });
 });

package/lib/components/Dropdown/Dropdown.js.flow

@@ -7,16 +7,12 @@ 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 {useReferenceElementWidth} from '../../hooks';
+import {sizeFluid} from '../../styles/variables/_size';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
 import {type ClickAwayRefType, ClickAway} from '../../utils/click-away';
@@ -25,7 +21,6 @@ import type {InputProps} from '../Input';
 import {Input} from '../Input';
 import type {MenuOption, MenuProps} from '../Menu';
 import {Menu} from '../Menu';
-import {type ElevationType, getElevationValue} from '../Tooltip';
 
 import css from './Dropdown.module.css';
 
@@ -45,7 +40,6 @@ export type DropdownProps = {
   scrollMenuToBottom?: boolean,
   dropdownInputText?: string,
   menu?: MenuProps,
-  elevation?: ElevationType,
   clickAwayRef?: ClickAwayRefType,
   ...
 };
@@ -66,21 +60,19 @@ export const Dropdown: React$AbstractComponent<
       scrollMenuToBottom = false,
       dropdownInputText = '',
       clickAwayRef,
-      elevation = 'modal',
       ...inputProps
     }: DropdownProps,
     ref,
   ): React.Node => {
+    const dropdownRef = React.useRef();
     const menuRef = React.useRef();
-
-    const {x, y, refs, strategy, context} = useFloating({
+    const {x, y, refs, strategy} = useFloating({
       open: true,
       strategy: 'absolute',
       placement: 'bottom-start',
       whileElementsMounted: autoUpdate,
       middleware: [flip(), offset(parseInt(spaceXXSmall))],
     });
-    const dropdownWidth = useReferenceElementWidth(refs.reference?.current);
 
     const onMenuToggle = (isOpen: boolean) => {
       isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
@@ -93,8 +85,9 @@ export const Dropdown: React$AbstractComponent<
       <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
         {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
           <div
-            className={classify(css.dropdownContainer, classNames?.wrapper)}
             data-testid="Dropdown"
+            className={classify(css.dropdownContainer, classNames?.wrapper)}
+            ref={mergeRefs([dropdownRef, boundaryRef])}
           >
             <Input
               {...inputProps}
@@ -122,51 +115,33 @@ export const Dropdown: React$AbstractComponent<
             />
 
             {isOpen && menu && (
-              <FloatingPortal>
-                <FloatingFocusManager
-                  modal={false}
-                  context={context}
-                  initialFocus={refs.reference}
-                >
-                  <div
-                    ref={mergeRefs([refs.setFloating, boundaryRef])}
-                    className={css.menuWrapper}
-                    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),
-                    }}
-                  >
-                    <Menu
-                      {...menu}
-                      onSelect={(option, e) => {
-                        onChange && onChange(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();
-                          refs.reference.current.querySelector('input').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,
+                }}
+              >
+                <Menu
+                  {...menu}
+                  onSelect={(option, e) => {
+                    onChange && onChange(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();
+                      refs.reference.current.querySelector('input').focus();
+                    }
+                  }}
+                  size={menu.size || size}
+                  onTabOut={clickAway}
+                  ref={menuRef}
+                />
+              </div>
             )}
           </div>
         )}

package/lib/components/Dropdown/Dropdown.module.css

@@ -12,8 +12,3 @@
 .inputBox {
   cursor: pointer;
 }
-
-.menuWrapper {
-  width: var(--dropdown-width);
-  z-index: var(--menu-elevation);
-}

package/lib/components/Dropdown/SimpleDropdown.js

@@ -22,7 +22,6 @@ const SimpleDropdownBase = (props, ref) => {
     onMenuOpen,
     onMenuClose,
     resolveLabel,
-    elevation = 'modal',
     menuVirtualization,
     resolveSecondaryLabel,
     isMenuFluid = true,
@@ -62,7 +61,6 @@ const SimpleDropdownBase = (props, ref) => {
   return /*#__PURE__*/React.createElement(_Dropdown.Dropdown, _extends({}, inputProps, {
     classNames: classNames,
     size: size,
-    elevation: elevation,
     placeholder: placeholder,
     onChange: handleOptionChange,
     onMenuOpen: onMenuOpen,

package/lib/components/Dropdown/SimpleDropdown.js.flow

@@ -10,7 +10,6 @@ import {
 } from '../../utils/menu';
 import type {InputProps} from '../Input';
 import type {MenuOption, MenuOptionsVariant, Virtualization} from '../Menu';
-import type {ElevationType} from '../Tooltip';
 
 import {Dropdown} from './Dropdown';
 
@@ -28,7 +27,6 @@ export type SimpleDropdownProps = {
   // Input props
   ...InputProps,
 
-  elevation?: ElevationType,
   classNames?: ClassNames,
   clickAwayRef?: ClickAwayRefType,
 
@@ -69,7 +67,6 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
     onMenuOpen,
     onMenuClose,
     resolveLabel,
-    elevation = 'modal',
     menuVirtualization,
     resolveSecondaryLabel,
     isMenuFluid = true,
@@ -128,7 +125,6 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
       {...inputProps}
       classNames={classNames}
       size={size}
-      elevation={elevation}
       placeholder={placeholder}
       onChange={handleOptionChange}
       onMenuOpen={onMenuOpen}

package/lib/components/InlineDropdown/InlineDropdown.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.InlineDropdown = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _react2 = require("@floating-ui/react");
-var _hooks = require("../../hooks");
 var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
 var _clickAway = require("../../utils/click-away");
@@ -14,7 +13,6 @@ var _mergeRefs = require("../../utils/merge-refs");
 var _Button = require("../Button");
 var _Icon = require("../Icon");
 var _Menu = require("../Menu");
-var _Tooltip = require("../Tooltip");
 var _Truncate = require("../Truncate");
 var _InlineDropdownModule = _interopRequireDefault(require("./InlineDropdown.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -32,15 +30,15 @@ const InlineDropdown = exports.InlineDropdown = /*#__PURE__*/React.forwardRef((_
     onMenuClose,
     children,
     clickAwayRef,
-    elevation = 'modal',
     ...restButtonProps
   } = _ref;
+  const menuBtnRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => menuBtnRef.current);
   const {
     x,
     y,
     refs,
-    strategy,
-    context
+    strategy
   } = (0, _react2.useFloating)({
     open: true,
     strategy: 'absolute',
@@ -48,9 +46,8 @@ const InlineDropdown = exports.InlineDropdown = /*#__PURE__*/React.forwardRef((_
     whileElementsMounted: _react2.autoUpdate,
     middleware: [(0, _react2.shift)(), (0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
   });
-  const dropdownWidth = (0, _hooks.useReferenceElementWidth)(refs.reference?.current);
   const onMenuToggle = isOpen => {
-    isOpen ? onMenuOpen?.() : onMenuClose?.();
+    isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
   };
   return /*#__PURE__*/React.createElement(_clickAway.ClickAway, {
     onChange: onMenuToggle,
@@ -66,7 +63,7 @@ const InlineDropdown = exports.InlineDropdown = /*#__PURE__*/React.forwardRef((_
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "InlineDropdown",
       className: (0, _classify.classify)(_InlineDropdownModule.default.inlineDropdownContainer, classNames?.dropdownContainer),
-      ref: ref
+      ref: menuBtnRef
     }, /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({}, restButtonProps, {
       disabled: disabled,
       ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
@@ -84,27 +81,13 @@ const InlineDropdown = exports.InlineDropdown = /*#__PURE__*/React.forwardRef((_
       className: (0, _classify.classify)({
         [_InlineDropdownModule.default.disabled]: disabled
       })
-    })), isOpen && menu && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, {
-      modal: false,
-      context: context,
-      initialFocus: triggerRef
-    }, /*#__PURE__*/React.createElement("div", {
-      className: _InlineDropdownModule.default.menuWrapper,
+    })), isOpen && menu && /*#__PURE__*/React.createElement("div", {
       ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
       style: {
         display: 'flex',
         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)
+        left: x ?? _space.spaceNone
       }
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
       onSelect: (option, e) => {
@@ -117,6 +100,6 @@ const InlineDropdown = exports.InlineDropdown = /*#__PURE__*/React.forwardRef((_
       },
       size: menu.size || 'medium',
       onTabOut: clickAway
-    }))))));
+    }))));
   });
 });

package/lib/components/InlineDropdown/InlineDropdown.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,
@@ -18,7 +14,6 @@ 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';
@@ -29,7 +24,6 @@ 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';
@@ -49,7 +43,6 @@ export type InlineDropdownProps = {
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
   size?: 'medium' | 'small' | 'extraSmall',
-  elevation?: ElevationType,
   clickAwayRef?: ClickAwayRefType,
   ...
 };
@@ -70,12 +63,13 @@ export const InlineDropdown: React$AbstractComponent<
       onMenuClose,
       children,
       clickAwayRef,
-      elevation = 'modal',
       ...restButtonProps
     }: InlineDropdownProps,
     ref,
   ): React.Node => {
-    const {x, y, refs, strategy, context} = useFloating({
+    const menuBtnRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => menuBtnRef.current);
+    const {x, y, refs, strategy} = useFloating({
       open: true,
       strategy: 'absolute',
       placement: anchorPosition,
@@ -83,10 +77,8 @@ export const InlineDropdown: React$AbstractComponent<
       middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
     });
 
-    const dropdownWidth = useReferenceElementWidth(refs.reference?.current);
-
     const onMenuToggle = (isOpen: boolean) => {
-      isOpen ? onMenuOpen?.() : onMenuClose?.();
+      isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
     };
 
     return (
@@ -98,7 +90,7 @@ export const InlineDropdown: React$AbstractComponent<
               css.inlineDropdownContainer,
               classNames?.dropdownContainer,
             )}
-            ref={ref}
+            ref={menuBtnRef}
           >
             <UnstyledButton
               {...restButtonProps}
@@ -128,50 +120,31 @@ export const InlineDropdown: React$AbstractComponent<
               />
             </UnstyledButton>
             {isOpen && menu && (
-              <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
+                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>
             )}
           </div>
         )}

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

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

package/lib/components/InlineDropdown/SimpleInlineDropdown.js

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

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

@@ -11,7 +11,6 @@ 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';
 
@@ -29,7 +28,6 @@ export type SimpleInlineDropdownProps = {
   // Input props
   ...ButtonProps,
 
-  elevation?: ElevationType,
   classNames?: ClassNames,
   anchorPosition?: AnchorType,
 
@@ -81,7 +79,6 @@ const SimpleInlineDropdownBase = (props: SimpleInlineDropdownProps, ref) => {
     showLabelTooltip,
     clickAwayRef,
     allowWrap = false,
-    elevation = 'modal',
     ...buttonProps
   } = props;
 
@@ -136,7 +133,6 @@ const SimpleInlineDropdownBase = (props: SimpleInlineDropdownProps, ref) => {
       onMenuOpen={onMenuOpen}
       onMenuClose={onMenuClose}
       clickAwayRef={clickAwayRef}
-      elevation={elevation}
       menu={{
         isFluid,
         options,

package/lib/components/SideMenuLink/SideMenuLink.js

@@ -192,6 +192,11 @@ const MENU_NAME_LIST = exports.MENU_NAME_LIST = Object.freeze({
     title: 'Live Agent Transfer',
     iconName: 'user-headset',
     iconType: 'duotone'
+  },
+  dataManagement: {
+    title: 'Data Management',
+    iconName: 'database',
+    iconType: 'duotone'
   }
 });
 const SideMenuLink = exports.SideMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {