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

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

@@ -7,9 +7,8 @@ exports.SimpleButtonDropdown = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _menu = require("../../utils/menu");
 var _ButtonDropdown = require("./ButtonDropdown");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const SimpleButtonDropdownBase = (props, ref) => {
   const {
     size = 'medium',
@@ -33,6 +32,7 @@ const SimpleButtonDropdownBase = (props, ref) => {
     showLabelTooltip,
     allowWrap = false,
     clickAwayRef,
+    elevation = 'modal',
     ...buttonProps
   } = props;
   const [btnText, setBtnText] = React.useState('');
@@ -66,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,
@@ -86,5 +88,4 @@ const SimpleButtonDropdownBase = (props, ref) => {
     }
   }), optionsVariant === 'checkbox' ? btnText : children);
 };
-const SimpleButtonDropdown = /*#__PURE__*/React.forwardRef(SimpleButtonDropdownBase);
-exports.SimpleButtonDropdown = SimpleButtonDropdown;
+const SimpleButtonDropdown = exports.SimpleButtonDropdown = /*#__PURE__*/React.forwardRef(SimpleButtonDropdownBase);

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/ButtonTab/ButtonTab.js

@@ -8,11 +8,10 @@ var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../../utils/classify"));
 var _Button = require("../../Button");
 var _ButtonTabModule = _interopRequireDefault(require("./ButtonTab.module.css"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const ButtonTab = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const ButtonTab = exports.ButtonTab = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     classNames,
     children,
@@ -48,5 +47,4 @@ const ButtonTab = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     iconLeftType: iconType,
     onClick: e => onButtonTabSelect && onButtonTabSelect(id, e)
   }), children);
-});
-exports.ButtonTab = ButtonTab;
+});

package/lib/components/ButtonTabs/ButtonTabDropdown.js

@@ -12,19 +12,19 @@ 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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const ButtonTabDropdown = _ref => {
   let {
     title,
+    elevation = 'modal',
     anchorPosition = 'bottom-end',
     ...buttonTabProps
   } = _ref;
-  const menuBtnRef = React.useRef();
   const {
     size,
     children,
@@ -64,7 +64,8 @@ const ButtonTabDropdown = _ref => {
     x,
     y,
     refs,
-    strategy
+    strategy,
+    context
   } = (0, _react2.useFloating)({
     open: true,
     strategy: 'absolute',
@@ -82,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]),
@@ -91,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) => {
@@ -108,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

@@ -8,11 +8,9 @@ var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _ButtonTabDropdown = require("./ButtonTabDropdown");
 var _ButtonTabsModule = _interopRequireDefault(require("./ButtonTabs.module.css"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const ButtonTabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+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); }
+const ButtonTabs = exports.ButtonTabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     classNames,
     children,
@@ -22,6 +20,7 @@ const ButtonTabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     selectedButtonTabId,
     onButtonTabSelect,
     wrapAfter,
+    elevation = 'modal',
     wrapTabTitle = 'more',
     anchorPosition
   } = _ref;
@@ -32,17 +31,18 @@ const ButtonTabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     unwrappedNodes = childrenArray.slice(0, wrapAfter);
     wrappedNodes = childrenArray.slice(wrapAfter);
     if (wrappedNodes.length) {
-      unwrappedNodes.push( /*#__PURE__*/React.createElement(_ButtonTabDropdown.ButtonTabDropdown, {
+      unwrappedNodes.push(/*#__PURE__*/React.createElement(_ButtonTabDropdown.ButtonTabDropdown, {
         id: "more-tab",
         title: wrapTabTitle,
         iconName: "ellipsis-vertical",
+        elevation: elevation,
         anchorPosition: anchorPosition,
         dropdownClass: classNames?.buttonTabDropdownWrapper
       }, wrappedNodes));
     }
   }
   const childrenWithProps = unwrappedNodes.map((child, index) => {
-    if ( /*#__PURE__*/React.isValidElement(child)) {
+    if (/*#__PURE__*/React.isValidElement(child)) {
       const {
         disabled: disabledChild,
         classNames: classNamesChild
@@ -75,5 +75,4 @@ const ButtonTabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       [_ButtonTabsModule.default.disabled]: disabled
     }, classNames?.wrapper)
   }, childrenWithProps);
-});
-exports.ButtonTabs = ButtonTabs;
+});

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}
           >

package/lib/components/Card/Card.js

@@ -9,16 +9,14 @@ var SPACES = _interopRequireWildcard(require("../../styles/variables/_space"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _string = require("../../utils/string");
 var _CardModule = _interopRequireDefault(require("./Card.module.css"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const PADDING_SIZES = Object.freeze({
+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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const PADDING_SIZES = exports.PADDING_SIZES = Object.freeze({
   small: 'small',
   medium: 'medium',
   large: 'large'
 });
-exports.PADDING_SIZES = PADDING_SIZES;
 const getPaddingValue = size => {
   const spaceKey = 'space' + (0, _string.capitalize)(size);
   return SPACES[spaceKey] || SPACES['spaceNone'];
@@ -78,7 +76,7 @@ const CardContent = _ref5 => {
   }), children);
 };
 exports.CardContent = CardContent;
-const Card = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+const Card = exports.Card = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     children,
     classNames,
@@ -100,8 +98,7 @@ const Card = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     ref: ref
   }), children);
 });
-exports.Card = Card;
-const ClickableCard = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
+const ClickableCard = exports.ClickableCard = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
     classNames,
     onClick,
@@ -136,5 +133,4 @@ const ClickableCard = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
     onKeyDown: onKeyDownHandler,
     ref: ref
   }));
-});
-exports.ClickableCard = ClickableCard;
+});

package/lib/components/Charts/ChartTooltip/index.js

@@ -6,13 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.tooltipTheme = void 0;
 var _typographyModule = _interopRequireDefault(require("../../../styles/typography.module.css"));
 var _ChartTooltipModule = _interopRequireDefault(require("./ChartTooltip.module.css"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const tooltipTheme = {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const tooltipTheme = exports.tooltipTheme = {
   headerFormat: `<span class="${_typographyModule.default.bodySmall} ${_ChartTooltipModule.default.tooltipHeader}">{point.key}</span>`,
   pointFormat: `<span class=${_ChartTooltipModule.default.tooltipPoint}>
       <span style="background-color:{point.color};" class=${_ChartTooltipModule.default.indicatorCircle}></span>
       <span class="${_ChartTooltipModule.default.tooltipContent} ${_typographyModule.default.bodyMedium}"> {series.name}: {point.y}</span>
     </span>`
-};
-exports.tooltipTheme = tooltipTheme;
+};