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

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.3.47-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.3.46...v0.3.47-beta.0) (2025-06-20)
+
+
+### Features
+
+* **GDS-524:** render dropdown menus via portal for improved positioning ([#353](https://github.com/spaced-out/ui-design-system/issues/353)) ([3421218](https://github.com/spaced-out/ui-design-system/commit/342121840775dfa142307858f4d8ced40c311bfd))
+
 ### [0.3.46](https://github.com/spaced-out/ui-design-system/compare/v0.3.45...v0.3.46) (2025-06-17)
 
 

package/lib/components/AvatarGroup/AvatarGroup.js.flow

@@ -11,7 +11,7 @@ import {
 import classify from '../../utils/classify';
 import type {AvatarSize} from '../Avatar';
 import {BaseAvatar} from '../Avatar';
-import type {PlacementType} from '../Tooltip';
+import type {ElevationType, PlacementType} from '../Tooltip';
 import {Tooltip} from '../Tooltip';
 
 import css from './AvatarGroup.module.css';
@@ -26,7 +26,7 @@ export type AvatarGroupProps = {
   maxTooltipLines?: number,
   placement?: PlacementType,
   maxAvatars?: number,
-  tooltipElevation?: string,
+  tooltipElevation?: ElevationType,
 };
 
 export const AvatarGroup: React$AbstractComponent<

package/lib/components/ButtonDropdown/ButtonDropdown.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.STRATEGY_TYPE = exports.ButtonDropdown = exports.ANCHOR_POSITION_TYPE = 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");
@@ -48,17 +48,17 @@ const ButtonDropdown = exports.ButtonDropdown = /*#__PURE__*/React.forwardRef((_
     isFluid,
     tooltip,
     onClick,
+    elevation = 'modal',
     clickAwayRef,
     ...restButtonProps
   } = _ref;
-  const menuBtnRef = React.useRef(null);
   const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-  React.useImperativeHandle(forwardRef, () => menuBtnRef.current);
   const {
     x,
     y,
     refs,
-    strategy
+    strategy,
+    context
   } = (0, _react2.useFloating)({
     open: true,
     strategy: positionStrategy,
@@ -66,6 +66,7 @@ const ButtonDropdown = exports.ButtonDropdown = /*#__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 => {
     if (isOpen) {
       onMenuOpen?.();
@@ -91,7 +92,7 @@ const ButtonDropdown = exports.ButtonDropdown = /*#__PURE__*/React.forwardRef((_
       className: (0, _classify.classify)(_ButtonDropdownModule.default.buttonDropdownContainer, {
         [_ButtonDropdownModule.default.isFluid]: isFluid === true
       }, classNames?.dropdownContainer),
-      ref: menuBtnRef
+      ref: forwardRef
     }, /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
       condition: Boolean(tooltip),
       wrapper: children => /*#__PURE__*/React.createElement(_Tooltip.Tooltip, _extends({}, tooltip, {
@@ -113,16 +114,27 @@ const ButtonDropdown = exports.ButtonDropdown = /*#__PURE__*/React.forwardRef((_
         wrapper: classNames?.buttonWrapper,
         icon: classNames?.buttonIcon
       }
-    }), children)), isOpen && menu && /*#__PURE__*/React.createElement("div", {
+    }), children)), isOpen && menu && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, {
+      modal: false,
+      context: context,
+      initialFocus: refs.reference
+    }, /*#__PURE__*/React.createElement("div", {
+      className: _ButtonDropdownModule.default.menuWrapper,
       ref: (0, _mergeRefs.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. */
+        ...(menu.isFluid !== false && {
+          '--dropdown-width': dropdownWidth
+        }),
+        '--menu-elevation': (0, _Tooltip.getElevationValue)(elevation)
       }
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
       onSelect: (option, e) => {
@@ -135,6 +147,6 @@ const ButtonDropdown = exports.ButtonDropdown = /*#__PURE__*/React.forwardRef((_
       },
       size: menu.size || size,
       onTabOut: clickAway
-    }))));
+    }))))));
   });
 });

package/lib/components/ButtonDropdown/ButtonDropdown.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,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 {classify} from '../../utils/classify';
 import {type ClickAwayRefType, ClickAway} from '../../utils/click-away';
@@ -24,8 +28,8 @@ import {Button} from '../Button';
 import {ConditionalWrapper} from '../ConditionalWrapper';
 import type {MenuOption, MenuProps} from '../Menu';
 import {Menu} from '../Menu';
-import type {BaseTooltipProps} from '../Tooltip';
-import {Tooltip} from '../Tooltip';
+import type {BaseTooltipProps, ElevationType} from '../Tooltip';
+import {getElevationValue, Tooltip} from '../Tooltip';
 
 import css from './ButtonDropdown.module.css';
 
@@ -63,6 +67,7 @@ export type ButtonDropdownProps = {
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
   tooltip?: BaseTooltipProps,
+  elevation?: ElevationType,
   clickAwayRef?: ClickAwayRefType,
   ...
 };
@@ -88,15 +93,15 @@ export const ButtonDropdown: React$AbstractComponent<
       isFluid,
       tooltip,
       onClick,
+      elevation = 'modal',
       clickAwayRef,
       ...restButtonProps
     }: ButtonDropdownProps,
     forwardRef,
   ) => {
-    const menuBtnRef = React.useRef(null);
     const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-    React.useImperativeHandle(forwardRef, () => menuBtnRef.current);
-    const {x, y, refs, strategy} = useFloating({
+
+    const {x, y, refs, strategy, context} = useFloating({
       open: true,
       strategy: positionStrategy,
       placement: anchorPosition,
@@ -104,6 +109,8 @@ export const ButtonDropdown: React$AbstractComponent<
       middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
     });
 
+    const dropdownWidth = useReferenceElementWidth(refs.reference?.current);
+
     const onMenuToggle = (isOpen: boolean) => {
       if (isOpen) {
         onMenuOpen?.();
@@ -126,7 +133,7 @@ export const ButtonDropdown: React$AbstractComponent<
               },
               classNames?.dropdownContainer,
             )}
-            ref={menuBtnRef}
+            ref={forwardRef}
           >
             <ConditionalWrapper
               condition={Boolean(tooltip)}
@@ -166,32 +173,50 @@ export const ButtonDropdown: React$AbstractComponent<
             </ConditionalWrapper>
 
             {isOpen && menu && (
-              <div
-                ref={mergeRefs([refs.setFloating, boundaryRef])}
-                style={{
-                  display: 'flex',
-                  position: strategy,
-                  top: y ?? spaceNone,
-                  left: x ?? spaceNone,
-                  ...(isFluid && {width: sizeFluid}),
-                }}
-              >
-                <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 || size}
-                  onTabOut={clickAway}
-                />
-              </div>
+              <FloatingPortal>
+                <FloatingFocusManager
+                  modal={false}
+                  context={context}
+                  initialFocus={refs.reference}
+                >
+                  <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 || size}
+                      onTabOut={clickAway}
+                    />
+                  </div>
+                </FloatingFocusManager>
+              </FloatingPortal>
             )}
           </div>
         )}

package/lib/components/ButtonDropdown/ButtonDropdown.module.css

@@ -1,4 +1,6 @@
-@value ( sizeFluid) from '../../styles/variables/_size.css';
+@value (
+  sizeFluid
+) from '../../styles/variables/_size.css';
 
 .buttonDropdownContainer {
   display: flex;
@@ -8,3 +10,8 @@
 .isFluid {
   width: sizeFluid;
 }
+
+.menuWrapper {
+  width: var(--dropdown-width);
+  z-index: var(--menu-elevation);
+}

package/lib/components/ButtonDropdown/SimpleButtonDropdown.js

@@ -32,6 +32,7 @@ const SimpleButtonDropdownBase = (props, ref) => {
     showLabelTooltip,
     allowWrap = false,
     clickAwayRef,
+    elevation = 'modal',
     ...buttonProps
   } = props;
   const [btnText, setBtnText] = React.useState('');
@@ -65,9 +66,11 @@ const SimpleButtonDropdownBase = (props, ref) => {
     size: size,
     onOptionSelect: handleOptionChange,
     onMenuOpen: onMenuOpen,
+    elevation: elevation,
     onMenuClose: onMenuClose,
     clickAwayRef: clickAwayRef,
     menu: {
+      // TODO (Sharad): The isFluid prop here controls menu width unlike ButtonDropdown, and is independent from the isFluid prop in ButtonDropdown. There should be a way to set the isFluid prop of ButtonDropdown.
       isFluid,
       options,
       selectedKeys: buttonDropdownSelectedKeys,

package/lib/components/ButtonDropdown/SimpleButtonDropdown.js.flow

@@ -10,7 +10,7 @@ import {
 } from '../../utils/menu';
 import type {ButtonProps} from '../Button';
 import type {MenuOption, MenuOptionsVariant, Virtualization} from '../Menu';
-import type {BaseTooltipProps} from '../Tooltip';
+import type {BaseTooltipProps, ElevationType} from '../Tooltip';
 
 import type {AnchorType} from './ButtonDropdown';
 import {ButtonDropdown} from './ButtonDropdown';
@@ -30,6 +30,7 @@ export type SimpleButtonDropdownProps = {
   // Input props
   ...ButtonProps,
 
+  elevation?: ElevationType,
   classNames?: ClassNames,
   anchorPosition?: AnchorType,
   tooltip?: BaseTooltipProps,
@@ -45,6 +46,7 @@ export type SimpleButtonDropdownProps = {
   menuClassNames?: MenuClassNames,
   showLabelTooltip?: MenuLabelTooltip,
   allowWrap?: boolean,
+
   // events
   onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   onMenuOpen?: () => mixed,
@@ -80,6 +82,7 @@ const SimpleButtonDropdownBase = (props: SimpleButtonDropdownProps, ref) => {
     showLabelTooltip,
     allowWrap = false,
     clickAwayRef,
+    elevation = 'modal',
     ...buttonProps
   } = props;
 
@@ -132,9 +135,11 @@ const SimpleButtonDropdownBase = (props: SimpleButtonDropdownProps, ref) => {
       size={size}
       onOptionSelect={handleOptionChange}
       onMenuOpen={onMenuOpen}
+      elevation={elevation}
       onMenuClose={onMenuClose}
       clickAwayRef={clickAwayRef}
       menu={{
+        // TODO (Sharad): The isFluid prop here controls menu width unlike ButtonDropdown, and is independent from the isFluid prop in ButtonDropdown. There should be a way to set the isFluid prop of ButtonDropdown.
         isFluid,
         options,
         selectedKeys: buttonDropdownSelectedKeys,

package/lib/components/ButtonTabs/ButtonTabDropdown.js

@@ -12,6 +12,7 @@ var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _clickAway = require("../../utils/click-away");
 var _mergeRefs = require("../../utils/merge-refs");
 var _Menu = require("../Menu");
+var _Tooltip = require("../Tooltip");
 var _ButtonTab = require("./ButtonTab");
 var _ButtonTabDropdownModule = _interopRequireDefault(require("./ButtonTabDropdown.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -20,10 +21,10 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 const ButtonTabDropdown = _ref => {
   let {
     title,
+    elevation = 'modal',
     anchorPosition = 'bottom-end',
     ...buttonTabProps
   } = _ref;
-  const menuBtnRef = React.useRef();
   const {
     size,
     children,
@@ -63,7 +64,8 @@ const ButtonTabDropdown = _ref => {
     x,
     y,
     refs,
-    strategy
+    strategy,
+    context
   } = (0, _react2.useFloating)({
     open: true,
     strategy: 'absolute',
@@ -81,7 +83,6 @@ const ButtonTabDropdown = _ref => {
     } = _ref3;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "ButtonTabDropdown",
-      ref: menuBtnRef,
       className: (0, _classify.default)(_ButtonTabDropdownModule.default.buttonTabDropDownWrapper, dropdownClass)
     }, /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, _extends({}, buttonTabProps, {
       ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
@@ -90,13 +91,19 @@ const ButtonTabDropdown = _ref => {
         e?.stopPropagation();
         onOpen();
       }
-    }), title), isOpen && /*#__PURE__*/React.createElement("div", {
+    }), title), isOpen && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, {
+      modal: false,
+      context: context,
+      initialFocus: refs.reference
+    }, /*#__PURE__*/React.createElement("div", {
+      className: _ButtonTabDropdownModule.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,
+        '--menu-elevation': (0, _Tooltip.getElevationValue)(elevation)
       }
     }, /*#__PURE__*/React.createElement(_Menu.Menu, {
       onSelect: (option, e) => {
@@ -107,7 +114,7 @@ const ButtonTabDropdown = _ref => {
       options: menuOptions,
       onTabOut: clickAway,
       selectedKeys: [selectedButtonTabId ?? '']
-    })));
+    })))));
   });
 };
 exports.ButtonTabDropdown = ButtonTabDropdown;

package/lib/components/ButtonTabs/ButtonTabDropdown.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 {ClickAway} from '../../utils/click-away';
 import {mergeRefs} from '../../utils/merge-refs';
 import type {AnchorType} from '../ButtonDropdown';
 import {Menu} from '../Menu';
+import type {ElevationType} from '../Tooltip';
+import {getElevationValue} from '../Tooltip';
 
 import type {ButtonTabProps} from './ButtonTab';
 import {ButtonTab} from './ButtonTab';
@@ -31,17 +37,18 @@ import css from './ButtonTabDropdown.module.css';
 export type ButtonTabDropdownProps = {
   ...ButtonTabProps,
   title: string,
-  anchorPosition?: AnchorType,
+  elevation?: ElevationType,
   dropdownClass?: string,
+  anchorPosition?: AnchorType,
   ...
 };
 
 export const ButtonTabDropdown = ({
   title,
+  elevation = 'modal',
   anchorPosition = 'bottom-end',
   ...buttonTabProps
 }: ButtonTabDropdownProps): React.Node => {
-  const menuBtnRef = React.useRef();
   const {
     size,
     children,
@@ -78,7 +85,7 @@ export const ButtonTabDropdown = ({
     ? 'more-tab'
     : selectedButtonTabId;
 
-  const {x, y, refs, strategy} = useFloating({
+  const {x, y, refs, strategy, context} = useFloating({
     open: true,
     strategy: 'absolute',
     placement: anchorPosition,
@@ -91,7 +98,6 @@ export const ButtonTabDropdown = ({
       {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
         <div
           data-testid="ButtonTabDropdown"
-          ref={menuBtnRef}
           className={classify(css.buttonTabDropDownWrapper, dropdownClass)}
         >
           <ButtonTab
@@ -106,26 +112,36 @@ export const ButtonTabDropdown = ({
             {title}
           </ButtonTab>
           {isOpen && (
-            <div
-              ref={mergeRefs([refs.setFloating, boundaryRef])}
-              style={{
-                display: 'flex',
-                position: strategy,
-                top: y ?? spaceNone,
-                left: x ?? spaceNone,
-              }}
-            >
-              <Menu
-                onSelect={(option, e) => {
-                  onTabSelect && onTabSelect(option.key, e);
-                  clickAway();
-                }}
-                size={size}
-                options={menuOptions}
-                onTabOut={clickAway}
-                selectedKeys={[selectedButtonTabId ?? '']}
-              />
-            </div>
+            <FloatingPortal>
+              <FloatingFocusManager
+                modal={false}
+                context={context}
+                initialFocus={refs.reference}
+              >
+                <div
+                  className={css.menuWrapper}
+                  ref={mergeRefs([refs.setFloating, boundaryRef])}
+                  style={{
+                    display: 'flex',
+                    position: strategy,
+                    top: y ?? spaceNone,
+                    left: x ?? spaceNone,
+                    '--menu-elevation': getElevationValue(elevation),
+                  }}
+                >
+                  <Menu
+                    onSelect={(option, e) => {
+                      onTabSelect && onTabSelect(option.key, e);
+                      clickAway();
+                    }}
+                    size={size}
+                    options={menuOptions}
+                    onTabOut={clickAway}
+                    selectedKeys={[selectedButtonTabId ?? '']}
+                  />
+                </div>
+              </FloatingFocusManager>
+            </FloatingPortal>
           )}
         </div>
       )}

package/lib/components/ButtonTabs/ButtonTabDropdown.module.css

@@ -2,3 +2,7 @@
   display: flex;
   flex-shrink: 0;
 }
+
+.menuWrapper {
+  z-index: var(--menu-elevation);
+}

package/lib/components/ButtonTabs/ButtonTabs.js

@@ -20,6 +20,7 @@ const ButtonTabs = exports.ButtonTabs = /*#__PURE__*/React.forwardRef((_ref, ref
     selectedButtonTabId,
     onButtonTabSelect,
     wrapAfter,
+    elevation = 'modal',
     wrapTabTitle = 'more',
     anchorPosition
   } = _ref;
@@ -34,6 +35,7 @@ const ButtonTabs = exports.ButtonTabs = /*#__PURE__*/React.forwardRef((_ref, ref
         id: "more-tab",
         title: wrapTabTitle,
         iconName: "ellipsis-vertical",
+        elevation: elevation,
         anchorPosition: anchorPosition,
         dropdownClass: classNames?.buttonTabDropdownWrapper
       }, wrappedNodes));

package/lib/components/ButtonTabs/ButtonTabs.js.flow

@@ -4,6 +4,7 @@ import * as React from 'react';
 
 import classify from '../../utils/classify';
 import type {AnchorType} from '../ButtonDropdown';
+import type {ElevationType} from '../Tooltip';
 
 import {ButtonTabDropdown} from './ButtonTabDropdown';
 
@@ -24,6 +25,7 @@ export type ButtonTabsProps = {
   selectedButtonTabId?: string,
   onButtonTabSelect?: ?(id: string, e?: ?SyntheticEvent<HTMLElement>) => mixed,
   wrapAfter?: number,
+  elevation?: ElevationType,
   wrapTabTitle?: string,
   anchorPosition?: AnchorType,
 };
@@ -42,6 +44,7 @@ export const ButtonTabs: React$AbstractComponent<
       selectedButtonTabId,
       onButtonTabSelect,
       wrapAfter,
+      elevation = 'modal',
       wrapTabTitle = 'more',
       anchorPosition,
     }: ButtonTabsProps,
@@ -62,6 +65,7 @@ export const ButtonTabs: React$AbstractComponent<
             id="more-tab"
             title={wrapTabTitle}
             iconName="ellipsis-vertical"
+            elevation={elevation}
             anchorPosition={anchorPosition}
             dropdownClass={classNames?.buttonTabDropdownWrapper}
           >