@spaced-out/ui-design-system 0.3.49 → 0.3.50

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

@@ -7,13 +7,17 @@ import {
   // $FlowFixMe[untyped-import]
   flip,
   // $FlowFixMe[untyped-import]
+  FloatingFocusManager,
+  // $FlowFixMe[untyped-import]
+  FloatingPortal,
+  // $FlowFixMe[untyped-import]
   offset,
   // $FlowFixMe[untyped-import]
   useFloating,
 } from '@floating-ui/react';
 import without from 'lodash/without';
 
-import {sizeFluid} from '../../styles/variables/_size';
+import {useReferenceElementWidth} from '../../hooks';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {TEXT_COLORS} from '../../types/typography';
 import classify from '../../utils/classify';
@@ -31,6 +35,7 @@ import type {InputProps} from '../Input';
 import type {BaseMenuProps} from '../Menu';
 import {Menu} from '../Menu';
 import {BodySmall} from '../Text';
+import {type ElevationType, getElevationValue} from '../Tooltip';
 
 import type {ResolveTokenValueProps} from './TokenValueChips';
 import {TokenValueChips} from './TokenValueChips';
@@ -91,6 +96,7 @@ export type Props<T> = {
   onMenuClose?: () => mixed,
   resolveTokenValue?: (ResolveTokenValueProps<T>) => React.Node,
   inputProps?: InputProps,
+  elevation?: ElevationType,
 };
 
 export function TokenListInput<T>(props: Props<T>): React.Node {
@@ -120,11 +126,11 @@ export function TokenListInput<T>(props: Props<T>): React.Node {
     values,
     resolveTokenValue,
     inputProps,
+    elevation = 'modal',
   } = props;
-
   const menuRef = React.useRef<HTMLDivElement | null>(null);
 
-  const {x, y, refs, strategy} = useFloating({
+  const {x, y, refs, strategy, context} = useFloating({
     open: true,
     strategy: STRATEGY_TYPE.absolute,
     placement: ANCHOR_POSITION_TYPE.bottomStart,
@@ -133,6 +139,7 @@ export function TokenListInput<T>(props: Props<T>): React.Node {
   });
 
   const inputRef = React.useRef<?HTMLInputElement>();
+  const dropdownWidth = useReferenceElementWidth(refs.reference?.current);
 
   const onOpenToggle = (isOpen) => {
     if (isOpen) {
@@ -222,8 +229,9 @@ export function TokenListInput<T>(props: Props<T>): React.Node {
       {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
         <>
           <div
-            className={classify(css.tokenListContainer, classNames?.wrapper)}
             ref={menuRef}
+            className={classify(css.tokenListContainer, classNames?.wrapper)}
+            data-testid="TokenListInput"
           >
             <div
               onClick={() => {
@@ -324,34 +332,52 @@ export function TokenListInput<T>(props: Props<T>): React.Node {
               </div>
             )}
             {!locked && isOpen && menu && (
-              <div
-                ref={mergeRefs([refs.setFloating, boundaryRef])}
-                style={{
-                  position: strategy,
-                  top: y ?? spaceNone,
-                  left: x ?? spaceNone,
-                  width: sizeFluid,
-                }}
-              >
-                {/* $FlowFixMe[incompatible-type] Menu expects MenuOption but receives T */}
-                {/* $FlowFixMe[prop-missing] MenuOption properties are missing in T */}
-                <Menu
-                  {...menu}
-                  onSelect={(option) => {
-                    if (values.length >= limit) {
-                      return;
-                    }
-                    // $FlowFixMe[incompatible-call] option from Menu is MenuOption but addValue expects T
-                    // $FlowFixMe[prop-missing] MenuOption properties are missing in T
-                    addValue(option);
-                    clickAway();
-                    inputRef.current?.focus();
-                  }}
-                  size={menu.size || size}
-                  onTabOut={clickAway}
-                  ref={menuRef}
-                />
-              </div>
+              <FloatingPortal>
+                <FloatingFocusManager
+                  modal={false}
+                  context={context}
+                  returnFocus={false}
+                  initialFocus={refs.reference}
+                >
+                  <div
+                    className={css.menuWrapper}
+                    ref={mergeRefs([refs.setFloating, boundaryRef])}
+                    style={{
+                      position: strategy,
+                      top: y ?? spaceNone,
+                      left: x ?? spaceNone,
+                      /* NOTE(Sharad): The FloatingPortal renders the menu outside the normal DOM structure,
+                       so its parent is effectively the <body> element. This means the menu
+                       would otherwise default to the body's width. To support fluid width,
+                       we must manually set the dropdown width here; otherwise, it uses a fixed width.
+                       Also, Only treat menu as non-fluid if isFluid is strictly false, since default is true in menu and undefined means fluid. */ ...(menu.isFluid !==
+                        false && {
+                        '--dropdown-width': dropdownWidth,
+                      }),
+                      '--menu-elevation': getElevationValue(elevation),
+                    }}
+                  >
+                    {/* $FlowFixMe[incompatible-type] Menu expects MenuOption but receives T */}
+                    {/* $FlowFixMe[prop-missing] MenuOption properties are missing in T */}
+                    <Menu
+                      {...menu}
+                      onSelect={(option) => {
+                        if (values.length >= limit) {
+                          return;
+                        }
+                        // $FlowFixMe[incompatible-call] option from Menu is MenuOption but addValue expects T
+                        // $FlowFixMe[prop-missing] MenuOption properties are missing in T
+                        addValue(option);
+                        clickAway();
+                        inputRef.current?.focus();
+                      }}
+                      size={menu.size || size}
+                      onTabOut={clickAway}
+                      ref={menuRef}
+                    />
+                  </div>
+                </FloatingFocusManager>
+              </FloatingPortal>
             )}
           </div>
         </>

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

@@ -150,3 +150,8 @@
   height: size26;
   margin-left: auto;
 }
+
+.menuWrapper {
+  width: var(--dropdown-width);
+  z-index: var(--menu-elevation);
+}

package/lib/components/Tooltip/Tooltip.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Tooltip = exports.ELEVATION_TYPES = exports.DELAY_MOTION_DURATION_TYPES = void 0;
+exports.getElevationValue = exports.Tooltip = exports.ELEVATION_TYPES = exports.DELAY_MOTION_DURATION_TYPES = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _react2 = require("@floating-ui/react");
 var ELEVATION = _interopRequireWildcard(require("../../styles/variables/_elevation"));
@@ -39,6 +39,7 @@ const getElevationValue = elevation => {
   const elevationKey = 'elevation' + (0, _string.capitalize)(elevation);
   return ELEVATION[elevationKey] || elevation;
 };
+exports.getElevationValue = getElevationValue;
 const Tooltip = _ref => {
   let {
     classNames,

package/lib/components/Tooltip/Tooltip.js.flow

@@ -84,7 +84,7 @@ export type BaseTooltipProps = {
   titleMaxLines?: number,
   delayMotionDuration?: DelayMotionDurationType,
   hidden?: boolean,
-  elevation?: string,
+  elevation?: ElevationType,
 };
 
 export type TooltipProps = {
@@ -94,7 +94,7 @@ export type TooltipProps = {
   children: any,
 };
 
-const getElevationValue = (elevation: string): string => {
+export const getElevationValue = (elevation: string): string => {
   const elevationKey = 'elevation' + capitalize(elevation);
   return ELEVATION[elevationKey] || elevation;
 };

package/lib/components/Typeahead/SimpleTypeahead.js

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

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

@@ -7,6 +7,7 @@ import type {ClickAwayRefType} from '../../utils/click-away';
 import {getTextLabelFromSelectedKeys} from '../../utils/menu';
 import type {InputProps} from '../Input';
 import type {MenuOption, Virtualization} from '../Menu';
+import type {ElevationType} from '../Tooltip';
 
 import {Typeahead} from './Typeahead';
 
@@ -38,6 +39,7 @@ export type SimpleTypeaheadProps = {
   menuClassNames?: MenuClassNames,
   showLabelTooltip?: MenuLabelTooltip,
   allowWrap?: boolean,
+  elevation?: ElevationType,
 
   // events
   onSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
@@ -76,6 +78,7 @@ const SimpleTypeaheadBase = (props: SimpleTypeaheadProps, ref) => {
     showLabelTooltip,
     allowInternalFilter = true,
     allowWrap = false,
+    elevation = 'modal',
     ...inputProps
   } = props;
 
@@ -148,6 +151,7 @@ const SimpleTypeaheadBase = (props: SimpleTypeaheadProps, ref) => {
         allowWrap,
       }}
       clickAwayRef={clickAwayRef}
+      elevation={elevation}
     />
   );
 };

package/lib/components/Typeahead/Typeahead.js

@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.Typeahead = 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 _Menu = require("../Menu");
 var _SearchInput = require("../SearchInput");
+var _Tooltip = require("../Tooltip");
 var _TypeaheadModule = _interopRequireDefault(require("./Typeahead.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); }
@@ -33,6 +34,7 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     menuOpenOffset = 1,
     onFocus,
     clickAwayRef,
+    elevation = 'modal',
     ...inputProps
   } = _ref;
   const menuOptions = menu?.options;
@@ -40,7 +42,8 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     x,
     y,
     refs,
-    strategy
+    strategy,
+    context
   } = (0, _react2.useFloating)({
     open: true,
     strategy: 'absolute',
@@ -48,6 +51,7 @@ const BaseTypeahead = /*#__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();
   };
@@ -64,8 +68,7 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     } = _ref2;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "Typeahead",
-      className: (0, _classify.classify)(_TypeaheadModule.default.typeaheadContainer, classNames?.wrapper),
-      ref: boundaryRef
+      className: (0, _classify.classify)(_TypeaheadModule.default.typeaheadContainer, classNames?.wrapper)
     }, /*#__PURE__*/React.createElement(_SearchInput.SearchInput, _extends({}, inputProps, {
       ref: ref,
       boxRef: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
@@ -96,13 +99,27 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       onClear: _e => {
         onClear?.();
       }
-    })), isOpen && !isLoading && menu && menuOptions && !!menuOptions.length && /*#__PURE__*/React.createElement("div", {
-      ref: refs.setFloating,
+    })), isOpen && !isLoading && menu && menuOptions && !!menuOptions.length && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, {
+      modal: false,
+      context: context,
+      returnFocus: false,
+      initialFocus: refs.reference
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
+      className: _TypeaheadModule.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, {
       options: menuOptions,
@@ -116,7 +133,7 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       },
       size: menu.size || size,
       onTabOut: clickAway
-    }))));
+    }))))));
   });
 });
 const StatefulTypeahead = /*#__PURE__*/React.forwardRef((_ref3, ref) => {

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

@@ -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,8 @@ import type {InputProps} from '../Input';
 import type {MenuOption, MenuProps} from '../Menu';
 import {Menu} from '../Menu';
 import {SearchInput} from '../SearchInput';
+import type {ElevationType} from '../Tooltip';
+import {getElevationValue} from '../Tooltip';
 
 import css from './Typeahead.module.css';
 
@@ -40,6 +46,7 @@ type BaseTypeaheadProps = {
   isLoading?: boolean,
   menuOpenOffset?: number,
   clickAwayRef?: ClickAwayRefType,
+  elevation?: ElevationType,
   ...
 };
 
@@ -69,12 +76,14 @@ const BaseTypeahead: React$AbstractComponent<
       menuOpenOffset = 1,
       onFocus,
       clickAwayRef,
+      elevation = 'modal',
       ...inputProps
     }: BaseTypeaheadProps,
     ref,
   ): React.Node => {
     const menuOptions = menu?.options;
-    const {x, y, refs, strategy} = useFloating({
+
+    const {x, y, refs, strategy, context} = useFloating({
       open: true,
       strategy: 'absolute',
       placement: 'bottom-start',
@@ -82,6 +91,8 @@ const BaseTypeahead: React$AbstractComponent<
       middleware: [flip(), offset(parseInt(spaceXXSmall))],
     });
 
+    const dropdownWidth = useReferenceElementWidth(refs.reference?.current);
+
     const onMenuToggle = (isOpen: boolean) => {
       isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
     };
@@ -92,7 +103,6 @@ const BaseTypeahead: React$AbstractComponent<
           <div
             data-testid="Typeahead"
             className={classify(css.typeaheadContainer, classNames?.wrapper)}
-            ref={boundaryRef}
           >
             <SearchInput
               {...inputProps}
@@ -129,33 +139,51 @@ const BaseTypeahead: React$AbstractComponent<
               menu &&
               menuOptions &&
               !!menuOptions.length && (
-              <div
-                ref={refs.setFloating}
-                style={{
-                  position: strategy,
-                  top: y ?? spaceNone,
-                  left: x ?? spaceNone,
-                  width: sizeFluid,
-                }}
-              >
-                <Menu
-                  {...menu}
-                  options={menuOptions}
-                  onSelect={(option, e) => {
-                    onSelect && onSelect(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}
+                  returnFocus={false}
+                  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}
+                      options={menuOptions}
+                      onSelect={(option, e) => {
+                        onSelect && onSelect(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/Typeahead/Typeahead.module.css

@@ -9,3 +9,8 @@
   width: sizeFluid;
   height: fit-content;
 }
+
+.menuWrapper {
+  width: var(--dropdown-width);
+  z-index: var(--menu-elevation);
+}

package/lib/hooks/index.js

@@ -124,6 +124,17 @@ Object.keys(_usePagination).forEach(function (key) {
     }
   });
 });
+var _useReferenceElementWidth = require("./useReferenceElementWidth");
+Object.keys(_useReferenceElementWidth).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useReferenceElementWidth[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useReferenceElementWidth[key];
+    }
+  });
+});
 var _useResizeObserver = require("./useResizeObserver");
 Object.keys(_useResizeObserver).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/hooks/index.js.flow

@@ -11,6 +11,7 @@ export * from './useLockedBody';
 export * from './useModal';
 export * from './useMountTransition';
 export * from './usePagination';
+export * from './useReferenceElementWidth';
 export * from './useResizeObserver';
 export * from './useToastPortal';
 export * from './useToggle';

package/lib/hooks/useReferenceElementWidth/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useReferenceElementWidth = require("./useReferenceElementWidth");
+Object.keys(_useReferenceElementWidth).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useReferenceElementWidth[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useReferenceElementWidth[key];
+    }
+  });
+});

package/lib/hooks/useReferenceElementWidth/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './useReferenceElementWidth';

package/lib/hooks/useReferenceElementWidth/useReferenceElementWidth.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useReferenceElementWidth = useReferenceElementWidth;
+var React = _interopRequireWildcard(require("react"));
+var _size = require("../../styles/variables/_size");
+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 MIN_FLUID_WIDTH = 160;
+function useReferenceElementWidth(ref) {
+  let minWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : MIN_FLUID_WIDTH;
+  const [width, setWidth] = React.useState(_size.sizeFluid);
+  const refWidth = ref?.offsetWidth;
+  React.useLayoutEffect(() => {
+    if (refWidth) {
+      setWidth(Math.max(refWidth, minWidth) + 'px');
+    }
+  }, [refWidth, minWidth]);
+  return width;
+}

package/lib/hooks/useReferenceElementWidth/useReferenceElementWidth.js.flow

@@ -0,0 +1,23 @@
+// @flow strict
+import * as React from 'react';
+
+import {sizeFluid} from '../../styles/variables/_size';
+
+
+const MIN_FLUID_WIDTH = 160;
+
+export function useReferenceElementWidth(
+  ref: ?HTMLElement,
+  minWidth: number = MIN_FLUID_WIDTH,
+): string {
+  const [width, setWidth] = React.useState(sizeFluid);
+
+  const refWidth = ref?.offsetWidth;
+  React.useLayoutEffect(() => {
+    if (refWidth) {
+      setWidth(Math.max(refWidth, minWidth) + 'px');
+    }
+  }, [refWidth, minWidth]);
+
+  return width;
+}

package/lib/utils/click-away/click-away.js

@@ -12,6 +12,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 // TODO(Nishant): Make this a functional component
 class ClickAway extends React.Component {
   static defaultProps = {
+    containsNestedFloatingPortals: false,
     closeOnEscapeKeypress: true
   };
   state = {
@@ -96,6 +97,9 @@ class ClickAway extends React.Component {
     }, this.handleOnChange);
   };
   handleCloseClick = evt => {
+    if (evt.target instanceof Node && this.props.containsNestedFloatingPortals && this.boundaryRef.current?.parentElement && (this.boundaryRef.current.parentElement === evt.target || this.boundaryRef.current.parentElement.contains(evt.target))) {
+      return;
+    }
     if (evt.target instanceof Node && this.boundaryRef && (this.boundaryRef === evt.target || this.boundaryRef.current?.contains(evt.target))) {
       return;
     }