npm - @spaced-out/ui-design-system - Versions diffs - 0.3.49 → 0.3.51-beta.0 - Mend

@spaced-out/ui-design-system 0.3.49 → 0.3.51-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

package/lib/components/Dropdown/Dropdown.js CHANGED Viewed

@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.Dropdown = 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 _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); }
@@ -29,15 +30,16 @@ 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
+    strategy,
+    context
   } = (0, _react2.useFloating)({
     open: true,
     strategy: 'absolute',
@@ -45,6 +47,7 @@ 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) {
@@ -63,9 +66,8 @@ 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),
-      ref: (0, _mergeRefs.mergeRefs)([dropdownRef, boundaryRef])
+      "data-testid": "Dropdown"
     }, /*#__PURE__*/React.createElement(_Input.Input, _extends({}, inputProps, {
       onKeyDown: e => {
         if (e.keyCode === 32) {
@@ -88,13 +90,26 @@ const Dropdown = exports.Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) =>
         onOpen();
       },
       ref: ref
-    })), isOpen && menu && /*#__PURE__*/React.createElement("div", {
+    })), isOpen && 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: _DropdownModule.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, {
       onSelect: (option, e) => {
@@ -109,6 +124,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 CHANGED Viewed

@@ -7,12 +7,16 @@ 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 {sizeFluid} from '../../styles/variables/_size';
+import {useReferenceElementWidth} from '../../hooks';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
 import {type ClickAwayRefType, ClickAway} from '../../utils/click-away';
@@ -21,6 +25,7 @@ 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';
@@ -40,6 +45,7 @@ export type DropdownProps = {
   scrollMenuToBottom?: boolean,
   dropdownInputText?: string,
   menu?: MenuProps,
+  elevation?: ElevationType,
   clickAwayRef?: ClickAwayRefType,
   ...
 };
@@ -60,19 +66,21 @@ 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} = useFloating({
+    const {x, y, refs, strategy, context} = 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();
@@ -85,9 +93,8 @@ export const Dropdown: React$AbstractComponent<
       <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
         {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
           <div
-            data-testid="Dropdown"
             className={classify(css.dropdownContainer, classNames?.wrapper)}
-            ref={mergeRefs([dropdownRef, boundaryRef])}
+            data-testid="Dropdown"
           >
             <Input
               {...inputProps}
@@ -115,33 +122,51 @@ export const Dropdown: React$AbstractComponent<
             />
             {isOpen && menu && (
-              <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>
+              <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>
         )}

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

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

package/lib/components/Dropdown/SimpleDropdown.js CHANGED Viewed

@@ -22,6 +22,7 @@ const SimpleDropdownBase = (props, ref) => {
     onMenuOpen,
     onMenuClose,
     resolveLabel,
+    elevation = 'modal',
     menuVirtualization,
     resolveSecondaryLabel,
     isMenuFluid = true,
@@ -61,6 +62,7 @@ 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 CHANGED Viewed

@@ -10,6 +10,7 @@ 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';
@@ -27,6 +28,7 @@ export type SimpleDropdownProps = {
   // Input props
   ...InputProps,
+  elevation?: ElevationType,
   classNames?: ClassNames,
   clickAwayRef?: ClickAwayRefType,
@@ -67,6 +69,7 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
     onMenuOpen,
     onMenuClose,
     resolveLabel,
+    elevation = 'modal',
     menuVirtualization,
     resolveSecondaryLabel,
     isMenuFluid = true,
@@ -125,6 +128,7 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
       {...inputProps}
       classNames={classNames}
       size={size}
+      elevation={elevation}
       placeholder={placeholder}
       onChange={handleOptionChange}
       onMenuOpen={onMenuOpen}

package/lib/components/FilterButtonOverlay/FilterButtonOverlay.js CHANGED Viewed

@@ -6,12 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.FilterButtonOverlay = 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 _utils = require("../../utils");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Button = require("../Button");
 var _ButtonDropdown = require("../ButtonDropdown");
+var _Tooltip = require("../Tooltip");
 var _FilterButtonOverlayModule = _interopRequireDefault(require("./FilterButtonOverlay.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); }
@@ -28,13 +29,15 @@ const FilterButtonOverlay = exports.FilterButtonOverlay = /*#__PURE__*/React.for
     buttonLabel,
     buttonIsFluid,
     buttonSize,
+    elevation = 'modal',
     ...restProps
   } = _ref;
   const {
     x,
     y,
     refs,
-    strategy
+    strategy,
+    context
   } = (0, _react2.useFloating)({
     open: true,
     strategy: positionStrategy,
@@ -42,9 +45,11 @@ const FilterButtonOverlay = exports.FilterButtonOverlay = /*#__PURE__*/React.for
     whileElementsMounted: _react2.autoUpdate,
     middleware: [(0, _react2.shift)(), (0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]
   });
+  const dropdownWidth = (0, _hooks.useReferenceElementWidth)(refs.reference?.current);
   return /*#__PURE__*/React.createElement(_utils.ClickAway, {
     clickAwayRef: clickAwayRef,
-    closeOnEscapeKeypress: true
+    closeOnEscapeKeypress: true,
+    containsNestedFloatingPortals: true
   }, _ref2 => {
     let {
       isOpen,
@@ -66,16 +71,26 @@ const FilterButtonOverlay = exports.FilterButtonOverlay = /*#__PURE__*/React.for
       },
       isFluid: buttonIsFluid,
       size: buttonSize
-    }), buttonLabel), isOpen && /*#__PURE__*/React.createElement("div", {
+    }), buttonLabel), isOpen && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, {
+      modal: false,
+      context: context,
+      initialFocus: refs.reference
+    }, /*#__PURE__*/React.createElement("div", {
       ref: (0, _utils.mergeRefs)([refs.setFloating, boundaryRef]),
       style: {
         display: 'flex',
         position: strategy,
         top: y ?? _space.spaceNone,
         left: x ?? _space.spaceNone,
-        ...(isFluid && {
-          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. */
+        ...(isFluid !== false && {
+          '--dropdown-width': dropdownWidth
+        }),
+        '--menu-elevation': (0, _Tooltip.getElevationValue)(elevation)
       }
     }, /*#__PURE__*/React.createElement("div", {
       className: (0, _classify.default)(_FilterButtonOverlayModule.default.overlayWrapper, {
@@ -83,6 +98,6 @@ const FilterButtonOverlay = exports.FilterButtonOverlay = /*#__PURE__*/React.for
         [_FilterButtonOverlayModule.default.medium]: size === 'medium',
         [_FilterButtonOverlayModule.default.small]: size === 'small'
       }, classNames?.overlayContainer)
-    }, children)));
+    }, children)))));
   });
 });

package/lib/components/FilterButtonOverlay/FilterButtonOverlay.js.flow CHANGED Viewed

@@ -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,7 +18,7 @@ import {
   useFloating,
 } from '@floating-ui/react';
-import {sizeFluid} from '../../styles/variables/_size';
+import {useReferenceElementWidth} from '../../hooks';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import type {ClickAwayRefType} from '../../utils';
 import {ClickAway, mergeRefs} from '../../utils';
@@ -23,6 +27,8 @@ import type {ButtonProps, ButtonSize} from '../Button';
 import {Button} from '../Button';
 import type {AnchorType, Strategy} from '../ButtonDropdown';
 import {ANCHOR_POSITION_TYPE, STRATEGY_TYPE} from '../ButtonDropdown';
+import type {ElevationType} from '../Tooltip';
+import {getElevationValue} from '../Tooltip';
 import css from './FilterButtonOverlay.module.css';
@@ -43,6 +49,7 @@ export type FilterButtonOverlayProps = {
   size?: FilterButtonOverlaySizeTypes,
   buttonLabel?: React.Node,
   buttonSize?: ButtonSize,
+  elevation?: ElevationType,
   buttonIsFluid?: boolean,
   ...
 };
@@ -63,11 +70,12 @@ export const FilterButtonOverlay: React$AbstractComponent<
       buttonLabel,
       buttonIsFluid,
       buttonSize,
+      elevation = 'modal',
       ...restProps
     }: FilterButtonOverlayProps,
     ref,
   ) => {
-    const {x, y, refs, strategy} = useFloating({
+    const {x, y, refs, strategy, context} = useFloating({
       open: true,
       strategy: positionStrategy,
       placement: anchorPosition,
@@ -75,8 +83,14 @@ export const FilterButtonOverlay: React$AbstractComponent<
       middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
     });
+    const dropdownWidth = useReferenceElementWidth(refs.reference?.current);
     return (
-      <ClickAway clickAwayRef={clickAwayRef} closeOnEscapeKeypress>
+      <ClickAway
+        clickAwayRef={clickAwayRef}
+        closeOnEscapeKeypress
+        containsNestedFloatingPortals
+      >
         {({isOpen, onOpen, boundaryRef, triggerRef}) => (
           <div
             data-testid="FilterButtonOverlay"
@@ -102,30 +116,46 @@ export const FilterButtonOverlay: React$AbstractComponent<
             </Button>
             {isOpen && (
-              <div
-                ref={mergeRefs([refs.setFloating, boundaryRef])}
-                style={{
-                  display: 'flex',
-                  position: strategy,
-                  top: y ?? spaceNone,
-                  left: x ?? spaceNone,
-                  ...(isFluid && {width: sizeFluid}),
-                }}
-              >
-                <div
-                  className={classify(
-                    css.overlayWrapper,
-                    {
-                      [css.fluid]: isFluid,
-                      [css.medium]: size === 'medium',
-                      [css.small]: size === 'small',
-                    },
-                    classNames?.overlayContainer,
-                  )}
+              <FloatingPortal>
+                <FloatingFocusManager
+                  modal={false}
+                  context={context}
+                  initialFocus={refs.reference}
                 >
-                  {children}
-                </div>
-              </div>
+                  <div
+                    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. */
+                      ...(isFluid !== false && {
+                        '--dropdown-width': dropdownWidth,
+                      }),
+                      '--menu-elevation': getElevationValue(elevation),
+                    }}
+                  >
+                    <div
+                      className={classify(
+                        css.overlayWrapper,
+                        {
+                          [css.fluid]: isFluid,
+                          [css.medium]: size === 'medium',
+                          [css.small]: size === 'small',
+                        },
+                        classNames?.overlayContainer,
+                      )}
+                    >
+                      {children}
+                    </div>
+                  </div>
+                </FloatingFocusManager>
+              </FloatingPortal>
             )}
           </div>
         )}

package/lib/components/InlineDropdown/InlineDropdown.js CHANGED Viewed

@@ -6,6 +6,7 @@ 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");
@@ -13,6 +14,7 @@ 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 }; }
@@ -30,15 +32,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
+    strategy,
+    context
   } = (0, _react2.useFloating)({
     open: true,
     strategy: 'absolute',
@@ -46,8 +48,9 @@ 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 && onMenuOpen() : onMenuClose && onMenuClose();
+    isOpen ? onMenuOpen?.() : onMenuClose?.();
   };
   return /*#__PURE__*/React.createElement(_clickAway.ClickAway, {
     onChange: onMenuToggle,
@@ -63,7 +66,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: menuBtnRef
+      ref: ref
     }, /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({}, restButtonProps, {
       disabled: disabled,
       ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
@@ -81,13 +84,27 @@ const InlineDropdown = exports.InlineDropdown = /*#__PURE__*/React.forwardRef((_
       className: (0, _classify.classify)({
         [_InlineDropdownModule.default.disabled]: disabled
       })
-    })), isOpen && menu && /*#__PURE__*/React.createElement("div", {
+    })), 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,
       ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
       style: {
         display: 'flex',
         position: strategy,
         top: y ?? _space.spaceNone,
-        left: x ?? _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)
       }
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
       onSelect: (option, e) => {
@@ -100,6 +117,6 @@ const InlineDropdown = exports.InlineDropdown = /*#__PURE__*/React.forwardRef((_
       },
       size: menu.size || 'medium',
       onTabOut: clickAway
-    }))));
+    }))))));
   });
 });