@pingux/astro 2.212.1 → 2.213.1-alpha.0

package/lib/cjs/components/DatePicker/DatePicker.js

@@ -22,12 +22,12 @@ var _react = _interopRequireWildcard(require("react"));
 var _date = require("@internationalized/date");
 var _datepicker = require("@react-aria/datepicker");
 var _focus = require("@react-aria/focus");
-var _overlays = require("@react-aria/overlays");
 var _utils = require("@react-aria/utils");
 var _datepicker2 = require("@react-stately/datepicker");
 var _object = require("lodash/object");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _index = require("../../index");
+var _Popover = _interopRequireDefault(require("../Popover/Popover"));
 var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _isDateWithinRanges = require("../../utils/devUtils/props/isDateWithinRanges");
@@ -86,31 +86,24 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     fieldProps = _useDatePicker.fieldProps,
     groupProps = _useDatePicker.groupProps,
     labelProps = _useDatePicker.labelProps;
-  var _useOverlayPosition = (0, _overlays.useOverlayPosition)({
-      targetRef: groupRef,
-      overlayRef: popoverRef,
-      offset: 15,
-      crossOffset: 40,
-      isOpen: state.isOpen,
-      onClose: state.setOpen,
-      shouldUpdatePosition: true
-    }),
-    positionProps = _useOverlayPosition.overlayProps;
-  var calendar = !isReadOnly && (0, _react2.jsx)(_index.PopoverContainer, (0, _extends2["default"])({
+  var calendar = !isReadOnly && (0, _react2.jsx)(_Popover["default"], {
     hasNoArrow: true,
     isDismissable: true,
     isNonModal: true,
-    ref: popoverRef,
-    isOpen: state.isOpen,
-    onClose: state.setOpen,
+    popoverRef: popoverRef,
+    triggerRef: groupRef,
+    state: state,
+    offset: 15,
+    crossOffset: 40,
+    "data-testid": "popover-container",
     overflow: "auto"
-  }, (0, _utils.mergeProps)(dialogProps, positionProps)), (0, _react2.jsx)(_focus.FocusScope, {
+  }, (0, _react2.jsx)(_focus.FocusScope, {
     autoFocus: true,
     contain: true,
     restoreFocus: true
-  }, (0, _react2.jsx)(_index.Calendar, (0, _extends2["default"])({}, calendarProps, {
+  }, (0, _react2.jsx)("div", dialogProps, (0, _react2.jsx)(_index.Calendar, (0, _extends2["default"])({}, calendarProps, {
     calendarWrapperProps: calendarWrapperProps
-  }))));
+  })))));
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_DateField["default"], (0, _extends2["default"])({}, (0, _pendoID.getPendoID)('DatePicker'), props, {
     ref: ref,
     buttonProps: buttonProps,

package/lib/cjs/components/DatePicker/DatePicker.test.js

@@ -219,7 +219,7 @@ test('should be able to select dates', /*#__PURE__*/(0, _asyncToGenerator2["defa
         return _userEvent["default"].click(_testWrapper.screen.queryByRole('button'));
       case 4:
         dateButtons = _testWrapper.screen.queryAllByRole('button');
-        expect(dateButtons).toHaveLength(37);
+        expect(dateButtons).toHaveLength(38);
         expect(dateButtons[5]).toHaveAttribute('aria-label', 'Monday, August 1, 2022');
         _context4.next = 9;
         return _userEvent["default"].click(dateButtons[5]);

package/lib/cjs/components/MultivaluesField/CondensedMultivaluesField.js

@@ -43,6 +43,7 @@ var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
 var _ListBox = _interopRequireDefault(require("../ListBox"));
+var _Popover = _interopRequireDefault(require("../Popover/Popover"));
 var _react2 = require("@emotion/react");
 var _excluded = ["defaultSelectedKeys", "direction", "disabledKeys", "containerProps", "filter", "hasAutoFocus", "hasNoSelectAll", "hasNoStatusIndicator", "helperText", "inputProps", "isDisabled", "isFilteringDisabled", "isNotFlippable", "isReadOnly", "isRequired", "items", "label", "loadingState", "mode", "onBlur", "onFocus", "onInputChange", "onKeyDown", "onKeyUp", "onLoadMore", "onLoadPrev", "onOpenChange", "onSelectionChange", "placeholder", "selectedKeys", "selectedOptionText", "scrollBoxProps", "status"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
@@ -171,30 +172,6 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
   });
   var listBoxRef = (0, _react.useRef)();
   var popoverRef = (0, _react.useRef)();
-  var _useOverlayPosition = (0, _reactAria.useOverlayPosition)({
-      isOpen: isOpen,
-      onClose: close,
-      offset: 1,
-      overlayRef: popoverRef,
-      placement: "".concat(direction, " end"),
-      scrollRef: listBoxRef,
-      shouldFlip: !isNotFlippable,
-      targetRef: inputWrapperRef
-    }),
-    overlayProps = _useOverlayPosition.overlayProps,
-    placement = _useOverlayPosition.placement,
-    updatePosition = _useOverlayPosition.updatePosition;
-
-  // Update position once the ListBox has rendered. This ensures that
-  // it flips properly when it doesn't fit in the available space.
-  /* istanbul ignore next */
-  (0, _utils.useLayoutEffect)(function () {
-    if (isOpen) {
-      requestAnimationFrame(function () {
-        updatePosition();
-      });
-    }
-  }, [isOpen, selectionManager.selectedKeys, updatePosition]);
 
   // Measure the width of the input to inform the width of the menu (below).
   var _useState9 = (0, _react.useState)(null),
@@ -212,10 +189,16 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     onResize: onResize
   });
   (0, _utils.useLayoutEffect)(onResize, [onResize]);
-  var style = _objectSpread(_objectSpread({}, overlayProps.style), {}, {
+  var menuWidthSx = {
     width: menuWidth,
     minWidth: menuWidth
-  });
+  };
+  var popoverState = (0, _react.useMemo)(function () {
+    return {
+      isOpen: !state.collection.size ? false : isOpen,
+      close: close
+    };
+  }, [state.collection.size, isOpen, close]);
   (0, _react.useEffect)(function () {
     if (defaultSelectedKeys) selectionManager.setSelectedKeys(defaultSelectedKeys);
   }, []);
@@ -317,7 +300,7 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     }
   }, selectionState), (0, _react2.jsx)(_reactAria.DismissButton, {
     onDismiss: close
-  }), (0, _react2.jsx)(_.ScrollBox, scrollBoxProps, (0, _react2.jsx)(_ListBox["default"], (0, _extends2["default"])({
+  }), (0, _react2.jsx)(_.ScrollBox, scrollBoxProps, (0, _react2.jsx)(_ListBox["default"], {
     ref: listBoxRef,
     hasAutoFocus: hasAutoFocus,
     hasNoEmptySelection: true,
@@ -328,7 +311,7 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     isLoading: loadingState === _loadingStates["default"].LOADING_MORE,
     "aria-label": "List of options",
     isCondensed: mode === 'condensed'
-  }, overlayProps))), (0, _react2.jsx)(_reactAria.DismissButton, {
+  })), (0, _react2.jsx)(_reactAria.DismissButton, {
     onDismiss: close
   }));
   var visuallyHidden = (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, {
@@ -439,14 +422,16 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     value: filterString,
     helperText: helperText,
     "aria-invalid": status === 'error' && true
-  }, (0, _pendoID.getPendoID)('MultivaluesField'), others, inputProps)), (0, _react2.jsx)(_.PopoverContainer, {
+  }, (0, _pendoID.getPendoID)('MultivaluesField'), others, inputProps)), (0, _react2.jsx)(_Popover["default"], {
     hasNoArrow: true,
     isNonModal: true,
-    isOpen: !state.collection.size ? false : isOpen,
-    onClose: close,
-    placement: placement,
-    ref: popoverRef,
-    style: style,
+    popoverRef: popoverRef,
+    triggerRef: inputWrapperRef,
+    state: popoverState,
+    placement: "".concat(direction, " end"),
+    shouldFlip: !isNotFlippable,
+    scrollRef: listBoxRef,
+    sx: menuWidthSx,
     onBlur: function onBlur(e) {
       return handleBlur(e);
     }

package/lib/cjs/components/MultivaluesField/DefaultMultivaluesField.js

@@ -45,6 +45,7 @@ var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
 var _ListBox = _interopRequireDefault(require("../ListBox"));
+var _Popover = _interopRequireDefault(require("../Popover/Popover"));
 var _BadgeLabelTooltip = _interopRequireDefault(require("./BadgeLabelTooltip"));
 var _react2 = require("@emotion/react");
 var _excluded = ["items"],
@@ -172,30 +173,6 @@ var DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (prop
   });
   var listBoxRef = (0, _react.useRef)();
   var popoverRef = (0, _react.useRef)();
-  var _useOverlayPosition = (0, _reactAria.useOverlayPosition)({
-      isOpen: isOpen,
-      onClose: close,
-      offset: 1,
-      overlayRef: popoverRef,
-      placement: "".concat(direction, " end"),
-      scrollRef: listBoxRef,
-      shouldFlip: !isNotFlippable,
-      targetRef: inputWrapperRef
-    }),
-    overlayProps = _useOverlayPosition.overlayProps,
-    placement = _useOverlayPosition.placement,
-    updatePosition = _useOverlayPosition.updatePosition;
-
-  // Update position once the ListBox has rendered. This ensures that
-  // it flips properly when it doesn't fit in the available space.
-  /* istanbul ignore next */
-  (0, _utils.useLayoutEffect)(function () {
-    if (isOpen) {
-      requestAnimationFrame(function () {
-        updatePosition();
-      });
-    }
-  }, [isOpen, selectionManager.selectedKeys, updatePosition]);
 
   // Measure the width of the input to inform the width of the menu (below).
   var _useState1 = (0, _react.useState)(null),
@@ -213,10 +190,16 @@ var DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     onResize: onResize
   });
   (0, _utils.useLayoutEffect)(onResize, [onResize]);
-  var style = _objectSpread(_objectSpread({}, overlayProps.style), {}, {
+  var menuWidthSx = {
     width: menuWidth,
     minWidth: menuWidth
-  });
+  };
+  var popoverState = (0, _react.useMemo)(function () {
+    return {
+      isOpen: !state.collection.size ? false : isOpen,
+      close: close
+    };
+  }, [state.collection.size, isOpen, close]);
   (0, _react.useEffect)(function () {
     if (defaultSelectedKeys) {
       selectionManager.setSelectedKeys(defaultSelectedKeys);
@@ -540,14 +523,16 @@ var DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     value: filterString,
     helperText: helperText,
     "aria-invalid": status === 'error' && true
-  }, (0, _pendoID.getPendoID)('MultivaluesField'), others, inputProps)), (0, _react2.jsx)(_.PopoverContainer, {
+  }, (0, _pendoID.getPendoID)('MultivaluesField'), others, inputProps)), (0, _react2.jsx)(_Popover["default"], {
     hasNoArrow: true,
     isNonModal: true,
-    isOpen: !state.collection.size ? false : isOpen,
-    onClose: close,
-    placement: placement,
-    ref: popoverRef,
-    style: style
+    popoverRef: popoverRef,
+    triggerRef: inputWrapperRef,
+    state: popoverState,
+    placement: "".concat(direction, " end"),
+    shouldFlip: !isNotFlippable,
+    scrollRef: listBoxRef,
+    sx: menuWidthSx
   }, listbox), (0, _react2.jsx)(EmptyVisuallyHidden, null)));
 });
 DefaultMultivaluesField.propTypes = _objectSpread(_objectSpread(_objectSpread({

package/lib/cjs/components/MultivaluesField/MultivaluesField.test.js

@@ -24,6 +24,8 @@ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
 var _fill = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/fill"));
 var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
 var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
@@ -38,7 +40,7 @@ var _universalFormSubmitTest = require("../../utils/testUtils/universalFormSubmi
 var _react2 = require("@emotion/react");
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context57, _context58; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty2(_context57 = ownKeys(Object(t), !0)).call(_context57, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty2(_context58 = ownKeys(Object(t))).call(_context58, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context63, _context64; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty2(_context63 = ownKeys(Object(t), !0)).call(_context63, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty2(_context64 = ownKeys(Object(t))).call(_context64, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _regeneratorRuntime() { "use strict"; var r = _regenerator(), e = r.m(_regeneratorRuntime), t = (_Object$getPrototypeOf ? _Object$getPrototypeOf(e) : e.__proto__).constructor; function n(r) { var e = "function" == typeof r && r.constructor; return !!e && (e === t || "GeneratorFunction" === (e.displayName || e.name)); } var o = { "throw": 1, "return": 2, "break": 3, "continue": 3 }; function a(r) { var e, t; return function (n) { e || (e = { stop: function stop() { return t(n.a, 2); }, "catch": function _catch() { return n.v; }, abrupt: function abrupt(r, e) { return t(n.a, o[r], e); }, delegateYield: function delegateYield(r, o, a) { return e.resultName = o, t(n.d, _regeneratorValues(r), a); }, finish: function finish(r) { return t(n.f, r); } }, t = function t(r, _t, o) { n.p = e.prev, n.n = e.next; try { return r(_t, o); } finally { e.next = n.n; } }), e.resultName && (e[e.resultName] = n.v, e.resultName = void 0), e.sent = n.v, e.next = n.n; try { return r.call(this, e); } finally { n.p = e.prev, n.n = e.next; } }; } return (_regeneratorRuntime = function _regeneratorRuntime() { return { wrap: function wrap(e, t, n, o) { return r.w(a(e), t, n, o && _reverseInstanceProperty(o).call(o)); }, isGeneratorFunction: n, mark: r.m, awrap: function awrap(r, e) { return new _OverloadYield(r, e); }, AsyncIterator: _regeneratorAsyncIterator, async: function async(r, e, t, o, u) { return (n(e) ? _regeneratorAsyncGen : _regeneratorAsync)(a(r), e, t, o, u); }, keys: _regeneratorKeys, values: _regeneratorValues }; })(); }
 function _regeneratorValues(e) { if (null != e) { var t = e["function" == typeof _Symbol && _Symbol$iterator || "@@iterator"], r = 0; if (t) return t.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) return { next: function next() { return e && r >= e.length && (e = void 0), { value: e && e[r++], done: !e }; } }; } throw new TypeError(_typeof(e) + " is not iterable"); }
 function _regeneratorKeys(e) { var n = Object(e), r = []; for (var t in n) r.unshift(t); return function e() { for (; r.length;) if ((t = r.pop()) in n) return e.value = t, e.done = !1, e; return e.done = !0, e; }; }
@@ -2084,4 +2086,180 @@ test('in condensed mode, arrow icon SVG has an empty title element so no tooltip
   var titleElement = arrowIconSvg.querySelector('title');
   expect(titleElement).toBeInTheDocument();
   expect(titleElement).toHaveTextContent('');
-});
+});
+test('MultivaluesField and DatePicker popovers open correctly when inside a Modal (UXE-8666)', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee59() {
+  var multivaluesFieldItems, ModalApp, combobox, listbox, node, datepickerPopover, dateButtons, firstAvailableDate;
+  return _regeneratorRuntime().wrap(function _callee59$(_context62) {
+    while (1) switch (_context62.prev = _context62.next) {
+      case 0:
+        multivaluesFieldItems = [{
+          id: 1,
+          key: 'Aardvark',
+          name: 'Aardvark'
+        }, {
+          id: 2,
+          key: 'Kangaroo',
+          name: 'Kangaroo'
+        }, {
+          id: 3,
+          key: 'Snake',
+          name: 'Snake'
+        }];
+        ModalApp = function ModalApp() {
+          var _useState3 = (0, _react.useState)(false),
+            _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+            isOpen = _useState4[0],
+            setIsOpen = _useState4[1];
+          var _useState5 = (0, _react.useState)([]),
+            _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+            selectedKeys = _useState6[0],
+            setSelectedKeys = _useState6[1];
+          var _useState7 = (0, _react.useState)(null),
+            _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+            selectedDate = _useState8[0],
+            setSelectedDate = _useState8[1];
+          return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Button, {
+            onPress: function onPress() {
+              return setIsOpen(true);
+            }
+          }, "Launch Modal"), isOpen && (0, _react2.jsx)(_index.Modal, {
+            title: "test",
+            isOpen: isOpen,
+            onClose: function onClose() {
+              return setIsOpen(false);
+            },
+            hasCloseButton: true,
+            isDismissable: true
+          }, (0, _react2.jsx)(_index.MultivaluesField, {
+            label: "Test Multivalues",
+            items: multivaluesFieldItems,
+            selectedKeys: selectedKeys,
+            onSelectionChange: function onSelectionChange(keys) {
+              var _context57;
+              return setSelectedKeys((0, _map["default"])(_context57 = (0, _from["default"])(keys)).call(_context57, function (k) {
+                return k.toString();
+              }));
+            },
+            mode: "non-restrictive"
+          }, function (item) {
+            return (0, _react2.jsx)(_index.Item, {
+              key: item.key,
+              "data-id": item.name,
+              "aria-label": item.name
+            }, item.name);
+          }), (0, _react2.jsx)(_index.DatePicker, {
+            label: "Select a date",
+            value: selectedDate,
+            onChange: setSelectedDate
+          })));
+        };
+        (0, _testWrapper.render)((0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(ModalApp, null)));
+        _context62.next = 5;
+        return _userEvent["default"].click(_testWrapper.screen.getByRole('button', {
+          name: 'Launch Modal'
+        }));
+      case 5:
+        expect(_testWrapper.screen.getByRole('dialog')).toBeInTheDocument();
+
+        // MultivaluesField: focus opens the listbox
+        combobox = _testWrapper.screen.getByRole('combobox');
+        _context62.next = 9;
+        return (0, _testWrapper.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee55() {
+          return _regeneratorRuntime().wrap(function _callee55$(_context58) {
+            while (1) switch (_context58.prev = _context58.next) {
+              case 0:
+                combobox.focus();
+              case 1:
+              case "end":
+                return _context58.stop();
+            }
+          }, _callee55);
+        })));
+      case 9:
+        _context62.next = 11;
+        return (0, _testWrapper.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee56() {
+          return _regeneratorRuntime().wrap(function _callee56$(_context59) {
+            while (1) switch (_context59.prev = _context59.next) {
+              case 0:
+              case "end":
+                return _context59.stop();
+            }
+          }, _callee56);
+        })));
+      case 11:
+        listbox = _testWrapper.screen.queryByRole('listbox');
+        expect(listbox).toBeInTheDocument();
+
+        /* eslint-disable testing-library/no-node-access */
+        node = listbox;
+        while (node && node !== document.body) {
+          expect(node).not.toHaveAttribute('aria-hidden', 'true');
+          node = node.parentElement;
+        }
+        /* eslint-enable testing-library/no-node-access */
+
+        // Click an option — verify it is selectable (option disappears and a badge appears)
+        _context62.next = 17;
+        return _userEvent["default"].click(_testWrapper.screen.getByRole('option', {
+          name: 'Aardvark'
+        }));
+      case 17:
+        expect(_testWrapper.screen.getByText('Aardvark')).toBeInTheDocument();
+
+        // Close the listbox before opening DatePicker
+        _context62.next = 20;
+        return (0, _testWrapper.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee57() {
+          return _regeneratorRuntime().wrap(function _callee57$(_context60) {
+            while (1) switch (_context60.prev = _context60.next) {
+              case 0:
+                combobox.blur();
+              case 1:
+              case "end":
+                return _context60.stop();
+            }
+          }, _callee57);
+        })));
+      case 20:
+        _context62.next = 22;
+        return _userEvent["default"].click(_testWrapper.screen.getByRole('button', {
+          name: /calendar/i
+        }));
+      case 22:
+        _context62.next = 24;
+        return (0, _testWrapper.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee58() {
+          return _regeneratorRuntime().wrap(function _callee58$(_context61) {
+            while (1) switch (_context61.prev = _context61.next) {
+              case 0:
+              case "end":
+                return _context61.stop();
+            }
+          }, _callee58);
+        })));
+      case 24:
+        datepickerPopover = _testWrapper.screen.queryByTestId('popover-container');
+        expect(datepickerPopover).toBeInTheDocument();
+
+        /* eslint-disable testing-library/no-node-access */
+        node = datepickerPopover;
+        while (node && node !== document.body) {
+          expect(node).not.toHaveAttribute('aria-hidden', 'true');
+          node = node.parentElement;
+        }
+        /* eslint-enable testing-library/no-node-access */
+
+        // Click a calendar date — verify the date field updates
+        dateButtons = _testWrapper.screen.getAllByRole('button');
+        firstAvailableDate = (0, _find["default"])(dateButtons).call(dateButtons, function (btn) {
+          var _btn$getAttribute;
+          return (_btn$getAttribute = btn.getAttribute('aria-label')) === null || _btn$getAttribute === void 0 ? void 0 : _btn$getAttribute.match(/\w+day,/);
+        });
+        _context62.next = 32;
+        return _userEvent["default"].click(firstAvailableDate);
+      case 32:
+        expect(_testWrapper.screen.queryByTestId('date-field')).not.toHaveValue('');
+      case 33:
+      case "end":
+        return _context62.stop();
+    }
+  }, _callee59);
+})));

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -24,16 +24,16 @@ var listBox = {
     borderRadius: _onyxTokens.astroTokensDark.radius.md
   },
   option: {
-    color: _onyxTokens.astroTokensDark.color.gray[400],
+    color: _onyxTokens.astroTokensDark.color.common.menu.item.text,
     '&.is-focused': {
-      color: _onyxTokens.astroTokensDark.color.gray[200],
+      color: _onyxTokens.astroTokensDark.color.common.menu.item.hover.text,
       bg: '#2C323A'
     },
     '&.is-selected': {
-      color: _onyxTokens.astroTokensDark.color.gray[200],
+      color: _onyxTokens.astroTokensDark.color.common.menu.item.selected.text,
       bg: '#2C323A',
       '&.is-focused': {
-        color: _onyxTokens.astroTokensDark.color.gray[200]
+        color: _onyxTokens.astroTokensDark.color.common.menu.item.selected.text
       }
     },
     '&.is-condensed': {
@@ -308,7 +308,7 @@ var _default = exports["default"] = {
         color: 'text.fieldHelper'
       },
       '&.is-error': {
-        color: 'text.error'
+        color: 'critical.bright'
       },
       '&.is-warning': {
         color: 'warning.bright'

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -1804,6 +1804,7 @@ declare const _default: {
         };
         selectLink: {
             textDecoration: string;
+            fontWeight: number;
             px: string;
             '&.is-hovered': {
                 textDecoration: string;
@@ -3022,6 +3023,7 @@ declare const _default: {
         };
         linkSelectFieldLabel: {
             color: any;
+            fontWeight: number;
             fontSize: any;
         };
         H1: {
@@ -5783,15 +5785,15 @@ declare const _default: {
                 p: any;
             };
             option: {
-                py: number;
-                pl: number;
+                py: any;
+                pl: any;
                 pr: any;
                 justifyContent: string;
                 borderRadius: any;
                 lineHeight: string;
-                color: string;
+                color: any;
                 '&.is-focused': {
-                    color: string;
+                    color: any;
                     bg: string;
                     borderRadius: any;
                 };
@@ -5801,13 +5803,13 @@ declare const _default: {
                     zIndex: number;
                 };
                 '&.is-selected': {
+                    color: any;
                     fontWeight: string;
-                    color: string;
                     bg: string;
                     pl: string;
                     borderRadius: any;
                     '&.is-focused': {
-                        color: string;
+                        color: any;
                     };
                     '&.is-focus-visible': {
                         bg: string;

package/lib/cjs/styles/themes/next-gen/variants/button.d.ts

@@ -1500,6 +1500,7 @@ declare const buttons: {
     };
     selectLink: {
         textDecoration: string;
+        fontWeight: number;
         px: string;
         '&.is-hovered': {
             textDecoration: string;

package/lib/cjs/styles/themes/next-gen/variants/button.js

@@ -258,6 +258,7 @@ var criticalLink = _objectSpread(_objectSpread({}, link), {}, {
 });
 var selectLink = _objectSpread(_objectSpread({}, link), {}, {
   textDecoration: 'none',
+  fontWeight: 400,
   px: '0',
   '&.is-hovered': {
     textDecoration: 'none'

package/lib/cjs/styles/themes/next-gen/variants/text.d.ts

@@ -65,6 +65,7 @@ export declare const text: {
     };
     linkSelectFieldLabel: {
         color: any;
+        fontWeight: number;
         fontSize: any;
     };
     H1: {

package/lib/cjs/styles/themes/next-gen/variants/text.js

@@ -270,6 +270,7 @@ var text = exports.text = _objectSpread(_objectSpread({
   },
   label: label,
   linkSelectFieldLabel: _objectSpread(_objectSpread({}, label), {}, {
-    color: _onyxTokens.astroTokens.color.font.link
+    color: _onyxTokens.astroTokens.color.font.link,
+    fontWeight: 0
   })
 });

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -854,15 +854,15 @@ declare const _default: {
             p: any;
         };
         option: {
-            py: number;
-            pl: number;
+            py: any;
+            pl: any;
             pr: any;
             justifyContent: string;
             borderRadius: any;
             lineHeight: string;
-            color: string;
+            color: any;
             '&.is-focused': {
-                color: string;
+                color: any;
                 bg: string;
                 borderRadius: any;
             };
@@ -872,13 +872,13 @@ declare const _default: {
                 zIndex: number;
             };
             '&.is-selected': {
+                color: any;
                 fontWeight: string;
-                color: string;
                 bg: string;
                 pl: string;
                 borderRadius: any;
                 '&.is-focused': {
-                    color: string;
+                    color: any;
                 };
                 '&.is-focus-visible': {
                     bg: string;

package/lib/cjs/styles/themes/next-gen/variants/variants.js

@@ -61,7 +61,7 @@ var fieldHelperText = {
       color: 'text.fieldHelper'
     },
     '&.is-error': {
-      color: 'text.error'
+      color: 'critical.bright'
     },
     '&.is-warning': {
       color: 'warning.bright'
@@ -164,15 +164,15 @@ var listBox = {
     p: _onyxTokens.astroTokens.spacing.sm
   },
   option: {
-    py: 12,
-    pl: 12,
+    py: _onyxTokens.astroTokens.spacing['md-s'],
+    pl: _onyxTokens.astroTokens.spacing['md-s'],
     pr: _onyxTokens.astroTokens.spacing.md,
     justifyContent: 'space-between',
     borderRadius: _onyxTokens.astroTokens.radius.md,
     lineHeight: 'body',
-    color: 'gray-700',
+    color: _onyxTokens.astroTokens.color.common.menu.item.text,
     '&.is-focused': {
-      color: 'font.hover',
+      color: _onyxTokens.astroTokens.color.common.menu.item.hover.text,
       bg: 'gray-100',
       borderRadius: _onyxTokens.astroTokens.radius.md
     },
@@ -182,13 +182,13 @@ var listBox = {
       zIndex: 1
     },
     '&.is-selected': {
+      color: _onyxTokens.astroTokens.color.common.menu.item.selected.text,
       fontWeight: '0',
-      color: 'black',
       bg: 'lightblue',
       pl: '.75rem',
       borderRadius: _onyxTokens.astroTokens.radius.md,
       '&.is-focused': {
-        color: 'text.primary'
+        color: _onyxTokens.astroTokens.color.common.menu.item.selected.text
       },
       '&.is-focus-visible': {
         bg: 'lightblue'
@@ -229,7 +229,7 @@ var listBox = {
 var separator = {
   base: {
     bg: 'border.base',
-    my: 'sm',
+    my: 'md',
     '&.is-vertical': {
       m: '0'
     }

package/lib/components/DatePicker/DatePicker.js

@@ -15,12 +15,12 @@ import React, { forwardRef, useRef } from 'react';
 import { parseDate } from '@internationalized/date';
 import { useDatePicker } from '@react-aria/datepicker';
 import { FocusScope } from '@react-aria/focus';
-import { useOverlayPosition } from '@react-aria/overlays';
 import { mergeProps } from '@react-aria/utils';
 import { useDatePickerState } from '@react-stately/datepicker';
 import { omit } from 'lodash/object';
 import PropTypes from 'prop-types';
-import { Calendar, FieldHelperText, PopoverContainer } from '../../index';
+import { Calendar, FieldHelperText } from '../../index';
+import Popover from '../Popover/Popover';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { isDateWithinRanges } from '../../utils/devUtils/props/isDateWithinRanges';
@@ -78,31 +78,24 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     fieldProps = _useDatePicker.fieldProps,
     groupProps = _useDatePicker.groupProps,
     labelProps = _useDatePicker.labelProps;
-  var _useOverlayPosition = useOverlayPosition({
-      targetRef: groupRef,
-      overlayRef: popoverRef,
-      offset: 15,
-      crossOffset: 40,
-      isOpen: state.isOpen,
-      onClose: state.setOpen,
-      shouldUpdatePosition: true
-    }),
-    positionProps = _useOverlayPosition.overlayProps;
-  var calendar = !isReadOnly && ___EmotionJSX(PopoverContainer, _extends({
+  var calendar = !isReadOnly && ___EmotionJSX(Popover, {
     hasNoArrow: true,
     isDismissable: true,
     isNonModal: true,
-    ref: popoverRef,
-    isOpen: state.isOpen,
-    onClose: state.setOpen,
+    popoverRef: popoverRef,
+    triggerRef: groupRef,
+    state: state,
+    offset: 15,
+    crossOffset: 40,
+    "data-testid": "popover-container",
     overflow: "auto"
-  }, mergeProps(dialogProps, positionProps)), ___EmotionJSX(FocusScope, {
+  }, ___EmotionJSX(FocusScope, {
     autoFocus: true,
     contain: true,
     restoreFocus: true
-  }, ___EmotionJSX(Calendar, _extends({}, calendarProps, {
+  }, ___EmotionJSX("div", dialogProps, ___EmotionJSX(Calendar, _extends({}, calendarProps, {
     calendarWrapperProps: calendarWrapperProps
-  }))));
+  })))));
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(DateField, _extends({}, getPendoID('DatePicker'), props, {
     ref: ref,
     buttonProps: buttonProps,

package/lib/components/DatePicker/DatePicker.test.js

@@ -213,7 +213,7 @@ test('should be able to select dates', /*#__PURE__*/_asyncToGenerator(/*#__PURE_
         return userEvent.click(screen.queryByRole('button'));
       case 4:
         dateButtons = screen.queryAllByRole('button');
-        expect(dateButtons).toHaveLength(37);
+        expect(dateButtons).toHaveLength(38);
         expect(dateButtons[5]).toHaveAttribute('aria-label', 'Monday, August 1, 2022');
         _context4.next = 9;
         return userEvent.click(dateButtons[5]);

package/lib/components/MultivaluesField/CondensedMultivaluesField.js

@@ -18,15 +18,15 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
 import _flatMapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/flat-map";
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { DismissButton, FocusScope, mergeProps, useOverlayPosition } from 'react-aria';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { DismissButton, FocusScope, mergeProps } from 'react-aria';
 import { useFilter } from '@react-aria/i18n';
 import { useFocusWithin } from '@react-aria/interactions';
 import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { useListState } from '@react-stately/list';
 import PropTypes from 'prop-types';
-import { Box, Button, Icon, Loader, PopoverContainer, ScrollBox, Text, TextField } from '../..';
+import { Box, Button, Icon, Loader, ScrollBox, Text, TextField } from '../..';
 import { MultivaluesContext } from '../../context/MultivaluesContext';
 import { useGetTheme, useInputLoader, usePropWarning } from '../../hooks';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
@@ -36,6 +36,7 @@ import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
 import ListBox from '../ListBox';
+import Popover from '../Popover/Popover';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   var _selectionManager$sta, _selectionManager$sta2, _selectionManager$sta3, _listBoxRef$current;
@@ -160,30 +161,6 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   });
   var listBoxRef = useRef();
   var popoverRef = useRef();
-  var _useOverlayPosition = useOverlayPosition({
-      isOpen: isOpen,
-      onClose: close,
-      offset: 1,
-      overlayRef: popoverRef,
-      placement: "".concat(direction, " end"),
-      scrollRef: listBoxRef,
-      shouldFlip: !isNotFlippable,
-      targetRef: inputWrapperRef
-    }),
-    overlayProps = _useOverlayPosition.overlayProps,
-    placement = _useOverlayPosition.placement,
-    updatePosition = _useOverlayPosition.updatePosition;
-
-  // Update position once the ListBox has rendered. This ensures that
-  // it flips properly when it doesn't fit in the available space.
-  /* istanbul ignore next */
-  useLayoutEffect(function () {
-    if (isOpen) {
-      requestAnimationFrame(function () {
-        updatePosition();
-      });
-    }
-  }, [isOpen, selectionManager.selectedKeys, updatePosition]);
 
   // Measure the width of the input to inform the width of the menu (below).
   var _useState9 = useState(null),
@@ -201,10 +178,16 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     onResize: onResize
   });
   useLayoutEffect(onResize, [onResize]);
-  var style = _objectSpread(_objectSpread({}, overlayProps.style), {}, {
+  var menuWidthSx = {
     width: menuWidth,
     minWidth: menuWidth
-  });
+  };
+  var popoverState = useMemo(function () {
+    return {
+      isOpen: !state.collection.size ? false : isOpen,
+      close: close
+    };
+  }, [state.collection.size, isOpen, close]);
   useEffect(function () {
     if (defaultSelectedKeys) selectionManager.setSelectedKeys(defaultSelectedKeys);
   }, []);
@@ -306,7 +289,7 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }, selectionState), ___EmotionJSX(DismissButton, {
     onDismiss: close
-  }), ___EmotionJSX(ScrollBox, scrollBoxProps, ___EmotionJSX(ListBox, _extends({
+  }), ___EmotionJSX(ScrollBox, scrollBoxProps, ___EmotionJSX(ListBox, {
     ref: listBoxRef,
     hasAutoFocus: hasAutoFocus,
     hasNoEmptySelection: true,
@@ -317,7 +300,7 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     isLoading: loadingState === loadingStates.LOADING_MORE,
     "aria-label": "List of options",
     isCondensed: mode === 'condensed'
-  }, overlayProps))), ___EmotionJSX(DismissButton, {
+  })), ___EmotionJSX(DismissButton, {
     onDismiss: close
   }));
   var visuallyHidden = ___EmotionJSX(VisuallyHidden, {
@@ -428,14 +411,16 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     value: filterString,
     helperText: helperText,
     "aria-invalid": status === 'error' && true
-  }, getPendoID('MultivaluesField'), others, inputProps)), ___EmotionJSX(PopoverContainer, {
+  }, getPendoID('MultivaluesField'), others, inputProps)), ___EmotionJSX(Popover, {
     hasNoArrow: true,
     isNonModal: true,
-    isOpen: !state.collection.size ? false : isOpen,
-    onClose: close,
-    placement: placement,
-    ref: popoverRef,
-    style: style,
+    popoverRef: popoverRef,
+    triggerRef: inputWrapperRef,
+    state: popoverState,
+    placement: "".concat(direction, " end"),
+    shouldFlip: !isNotFlippable,
+    scrollRef: listBoxRef,
+    sx: menuWidthSx,
     onBlur: function onBlur(e) {
       return handleBlur(e);
     }

package/lib/components/MultivaluesField/DefaultMultivaluesField.js

@@ -23,13 +23,13 @@ import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/in
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { DismissButton, FocusScope, useOverlayPosition } from 'react-aria';
+import { DismissButton, FocusScope } from 'react-aria';
 import { useFilter } from '@react-aria/i18n';
 import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { useListState } from '@react-stately/list';
 import PropTypes from 'prop-types';
-import { Badge, Box, Loader, PopoverContainer, ScrollBox, Text, TextField } from '../..';
+import { Badge, Box, Loader, ScrollBox, Text, TextField } from '../..';
 import { MultivaluesContext } from '../../context/MultivaluesContext';
 import { useGetTheme, useInputLoader, usePropWarning } from '../../hooks';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
@@ -39,6 +39,7 @@ import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes
 import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
 import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
 import ListBox from '../ListBox';
+import Popover from '../Popover/Popover';
 import BadgeLabelTooltip from './BadgeLabelTooltip';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -161,30 +162,6 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   });
   var listBoxRef = useRef();
   var popoverRef = useRef();
-  var _useOverlayPosition = useOverlayPosition({
-      isOpen: isOpen,
-      onClose: close,
-      offset: 1,
-      overlayRef: popoverRef,
-      placement: "".concat(direction, " end"),
-      scrollRef: listBoxRef,
-      shouldFlip: !isNotFlippable,
-      targetRef: inputWrapperRef
-    }),
-    overlayProps = _useOverlayPosition.overlayProps,
-    placement = _useOverlayPosition.placement,
-    updatePosition = _useOverlayPosition.updatePosition;
-
-  // Update position once the ListBox has rendered. This ensures that
-  // it flips properly when it doesn't fit in the available space.
-  /* istanbul ignore next */
-  useLayoutEffect(function () {
-    if (isOpen) {
-      requestAnimationFrame(function () {
-        updatePosition();
-      });
-    }
-  }, [isOpen, selectionManager.selectedKeys, updatePosition]);
 
   // Measure the width of the input to inform the width of the menu (below).
   var _useState1 = useState(null),
@@ -202,10 +179,16 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     onResize: onResize
   });
   useLayoutEffect(onResize, [onResize]);
-  var style = _objectSpread(_objectSpread({}, overlayProps.style), {}, {
+  var menuWidthSx = {
     width: menuWidth,
     minWidth: menuWidth
-  });
+  };
+  var popoverState = useMemo(function () {
+    return {
+      isOpen: !state.collection.size ? false : isOpen,
+      close: close
+    };
+  }, [state.collection.size, isOpen, close]);
   useEffect(function () {
     if (defaultSelectedKeys) {
       selectionManager.setSelectedKeys(defaultSelectedKeys);
@@ -529,14 +512,16 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     value: filterString,
     helperText: helperText,
     "aria-invalid": status === 'error' && true
-  }, getPendoID('MultivaluesField'), others, inputProps)), ___EmotionJSX(PopoverContainer, {
+  }, getPendoID('MultivaluesField'), others, inputProps)), ___EmotionJSX(Popover, {
     hasNoArrow: true,
     isNonModal: true,
-    isOpen: !state.collection.size ? false : isOpen,
-    onClose: close,
-    placement: placement,
-    ref: popoverRef,
-    style: style
+    popoverRef: popoverRef,
+    triggerRef: inputWrapperRef,
+    state: popoverState,
+    placement: "".concat(direction, " end"),
+    shouldFlip: !isNotFlippable,
+    scrollRef: listBoxRef,
+    sx: menuWidthSx
   }, listbox), ___EmotionJSX(EmptyVisuallyHidden, null)));
 });
 DefaultMultivaluesField.propTypes = _objectSpread(_objectSpread(_objectSpread({

package/lib/components/MultivaluesField/MultivaluesField.test.js

@@ -20,7 +20,7 @@ import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerat
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context57, _context58; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context57 = ownKeys(Object(t), !0)).call(_context57, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context58 = ownKeys(Object(t))).call(_context58, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context63, _context64; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context63 = ownKeys(Object(t), !0)).call(_context63, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context64 = ownKeys(Object(t))).call(_context64, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _regeneratorRuntime() { "use strict"; var r = _regenerator(), e = r.m(_regeneratorRuntime), t = (_Object$getPrototypeOf ? _Object$getPrototypeOf(e) : e.__proto__).constructor; function n(r) { var e = "function" == typeof r && r.constructor; return !!e && (e === t || "GeneratorFunction" === (e.displayName || e.name)); } var o = { "throw": 1, "return": 2, "break": 3, "continue": 3 }; function a(r) { var e, t; return function (n) { e || (e = { stop: function stop() { return t(n.a, 2); }, "catch": function _catch() { return n.v; }, abrupt: function abrupt(r, e) { return t(n.a, o[r], e); }, delegateYield: function delegateYield(r, o, a) { return e.resultName = o, t(n.d, _regeneratorValues(r), a); }, finish: function finish(r) { return t(n.f, r); } }, t = function t(r, _t, o) { n.p = e.prev, n.n = e.next; try { return r(_t, o); } finally { e.next = n.n; } }), e.resultName && (e[e.resultName] = n.v, e.resultName = void 0), e.sent = n.v, e.next = n.n; try { return r.call(this, e); } finally { n.p = e.prev, n.n = e.next; } }; } return (_regeneratorRuntime = function _regeneratorRuntime() { return { wrap: function wrap(e, t, n, o) { return r.w(a(e), t, n, o && _reverseInstanceProperty(o).call(o)); }, isGeneratorFunction: n, mark: r.m, awrap: function awrap(r, e) { return new _OverloadYield(r, e); }, AsyncIterator: _regeneratorAsyncIterator, async: function async(r, e, t, o, u) { return (n(e) ? _regeneratorAsyncGen : _regeneratorAsync)(a(r), e, t, o, u); }, keys: _regeneratorKeys, values: _regeneratorValues }; })(); }
 function _regeneratorValues(e) { if (null != e) { var t = e["function" == typeof _Symbol && _Symbol$iterator || "@@iterator"], r = 0; if (t) return t.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) return { next: function next() { return e && r >= e.length && (e = void 0), { value: e && e[r++], done: !e }; } }; } throw new TypeError(_typeof(e) + " is not iterable"); }
 function _regeneratorKeys(e) { var n = Object(e), r = []; for (var t in n) r.unshift(t); return function e() { for (; r.length;) if ((t = r.pop()) in n) return e.value = t, e.done = !1, e; return e.done = !0, e; }; }
@@ -34,9 +34,11 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import _fillInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/fill";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
 import React, { useState } from 'react';
 import userEvent from '@testing-library/user-event';
-import { Item, MultivaluesField, OverlayProvider, Section } from '../../index';
+import { Button, DatePicker, Item, Modal, MultivaluesField, OverlayProvider, Section } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { act, fireEvent, getDefaultNormalizer, render, screen, within } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
@@ -2078,4 +2080,180 @@ test('in condensed mode, arrow icon SVG has an empty title element so no tooltip
   var titleElement = arrowIconSvg.querySelector('title');
   expect(titleElement).toBeInTheDocument();
   expect(titleElement).toHaveTextContent('');
-});
+});
+test('MultivaluesField and DatePicker popovers open correctly when inside a Modal (UXE-8666)', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee59() {
+  var multivaluesFieldItems, ModalApp, combobox, listbox, node, datepickerPopover, dateButtons, firstAvailableDate;
+  return _regeneratorRuntime().wrap(function _callee59$(_context62) {
+    while (1) switch (_context62.prev = _context62.next) {
+      case 0:
+        multivaluesFieldItems = [{
+          id: 1,
+          key: 'Aardvark',
+          name: 'Aardvark'
+        }, {
+          id: 2,
+          key: 'Kangaroo',
+          name: 'Kangaroo'
+        }, {
+          id: 3,
+          key: 'Snake',
+          name: 'Snake'
+        }];
+        ModalApp = function ModalApp() {
+          var _useState3 = useState(false),
+            _useState4 = _slicedToArray(_useState3, 2),
+            isOpen = _useState4[0],
+            setIsOpen = _useState4[1];
+          var _useState5 = useState([]),
+            _useState6 = _slicedToArray(_useState5, 2),
+            selectedKeys = _useState6[0],
+            setSelectedKeys = _useState6[1];
+          var _useState7 = useState(null),
+            _useState8 = _slicedToArray(_useState7, 2),
+            selectedDate = _useState8[0],
+            setSelectedDate = _useState8[1];
+          return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Button, {
+            onPress: function onPress() {
+              return setIsOpen(true);
+            }
+          }, "Launch Modal"), isOpen && ___EmotionJSX(Modal, {
+            title: "test",
+            isOpen: isOpen,
+            onClose: function onClose() {
+              return setIsOpen(false);
+            },
+            hasCloseButton: true,
+            isDismissable: true
+          }, ___EmotionJSX(MultivaluesField, {
+            label: "Test Multivalues",
+            items: multivaluesFieldItems,
+            selectedKeys: selectedKeys,
+            onSelectionChange: function onSelectionChange(keys) {
+              var _context57;
+              return setSelectedKeys(_mapInstanceProperty(_context57 = _Array$from(keys)).call(_context57, function (k) {
+                return k.toString();
+              }));
+            },
+            mode: "non-restrictive"
+          }, function (item) {
+            return ___EmotionJSX(Item, {
+              key: item.key,
+              "data-id": item.name,
+              "aria-label": item.name
+            }, item.name);
+          }), ___EmotionJSX(DatePicker, {
+            label: "Select a date",
+            value: selectedDate,
+            onChange: setSelectedDate
+          })));
+        };
+        render(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ModalApp, null)));
+        _context62.next = 5;
+        return userEvent.click(screen.getByRole('button', {
+          name: 'Launch Modal'
+        }));
+      case 5:
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+        // MultivaluesField: focus opens the listbox
+        combobox = screen.getByRole('combobox');
+        _context62.next = 9;
+        return act(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee55() {
+          return _regeneratorRuntime().wrap(function _callee55$(_context58) {
+            while (1) switch (_context58.prev = _context58.next) {
+              case 0:
+                combobox.focus();
+              case 1:
+              case "end":
+                return _context58.stop();
+            }
+          }, _callee55);
+        })));
+      case 9:
+        _context62.next = 11;
+        return act(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee56() {
+          return _regeneratorRuntime().wrap(function _callee56$(_context59) {
+            while (1) switch (_context59.prev = _context59.next) {
+              case 0:
+              case "end":
+                return _context59.stop();
+            }
+          }, _callee56);
+        })));
+      case 11:
+        listbox = screen.queryByRole('listbox');
+        expect(listbox).toBeInTheDocument();
+
+        /* eslint-disable testing-library/no-node-access */
+        node = listbox;
+        while (node && node !== document.body) {
+          expect(node).not.toHaveAttribute('aria-hidden', 'true');
+          node = node.parentElement;
+        }
+        /* eslint-enable testing-library/no-node-access */
+
+        // Click an option — verify it is selectable (option disappears and a badge appears)
+        _context62.next = 17;
+        return userEvent.click(screen.getByRole('option', {
+          name: 'Aardvark'
+        }));
+      case 17:
+        expect(screen.getByText('Aardvark')).toBeInTheDocument();
+
+        // Close the listbox before opening DatePicker
+        _context62.next = 20;
+        return act(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee57() {
+          return _regeneratorRuntime().wrap(function _callee57$(_context60) {
+            while (1) switch (_context60.prev = _context60.next) {
+              case 0:
+                combobox.blur();
+              case 1:
+              case "end":
+                return _context60.stop();
+            }
+          }, _callee57);
+        })));
+      case 20:
+        _context62.next = 22;
+        return userEvent.click(screen.getByRole('button', {
+          name: /calendar/i
+        }));
+      case 22:
+        _context62.next = 24;
+        return act(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee58() {
+          return _regeneratorRuntime().wrap(function _callee58$(_context61) {
+            while (1) switch (_context61.prev = _context61.next) {
+              case 0:
+              case "end":
+                return _context61.stop();
+            }
+          }, _callee58);
+        })));
+      case 24:
+        datepickerPopover = screen.queryByTestId('popover-container');
+        expect(datepickerPopover).toBeInTheDocument();
+
+        /* eslint-disable testing-library/no-node-access */
+        node = datepickerPopover;
+        while (node && node !== document.body) {
+          expect(node).not.toHaveAttribute('aria-hidden', 'true');
+          node = node.parentElement;
+        }
+        /* eslint-enable testing-library/no-node-access */
+
+        // Click a calendar date — verify the date field updates
+        dateButtons = screen.getAllByRole('button');
+        firstAvailableDate = _findInstanceProperty(dateButtons).call(dateButtons, function (btn) {
+          var _btn$getAttribute;
+          return (_btn$getAttribute = btn.getAttribute('aria-label')) === null || _btn$getAttribute === void 0 ? void 0 : _btn$getAttribute.match(/\w+day,/);
+        });
+        _context62.next = 32;
+        return userEvent.click(firstAvailableDate);
+      case 32:
+        expect(screen.queryByTestId('date-field')).not.toHaveValue('');
+      case 33:
+      case "end":
+        return _context62.stop();
+    }
+  }, _callee59);
+})));

package/lib/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -16,16 +16,16 @@ var listBox = {
     borderRadius: astroTokensDark.radius.md
   },
   option: {
-    color: astroTokensDark.color.gray[400],
+    color: astroTokensDark.color.common.menu.item.text,
     '&.is-focused': {
-      color: astroTokensDark.color.gray[200],
+      color: astroTokensDark.color.common.menu.item.hover.text,
       bg: '#2C323A'
     },
     '&.is-selected': {
-      color: astroTokensDark.color.gray[200],
+      color: astroTokensDark.color.common.menu.item.selected.text,
       bg: '#2C323A',
       '&.is-focused': {
-        color: astroTokensDark.color.gray[200]
+        color: astroTokensDark.color.common.menu.item.selected.text
       }
     },
     '&.is-condensed': {
@@ -300,7 +300,7 @@ export default {
         color: 'text.fieldHelper'
       },
       '&.is-error': {
-        color: 'text.error'
+        color: 'critical.bright'
       },
       '&.is-warning': {
         color: 'warning.bright'

package/lib/styles/themes/next-gen/variants/button.js

@@ -251,6 +251,7 @@ var criticalLink = _objectSpread(_objectSpread({}, link), {}, {
 });
 var selectLink = _objectSpread(_objectSpread({}, link), {}, {
   textDecoration: 'none',
+  fontWeight: 400,
   px: '0',
   '&.is-hovered': {
     textDecoration: 'none'

package/lib/styles/themes/next-gen/variants/text.js

@@ -263,6 +263,7 @@ export var text = _objectSpread(_objectSpread({
   },
   label: label,
   linkSelectFieldLabel: _objectSpread(_objectSpread({}, label), {}, {
-    color: astroTokens.color.font.link
+    color: astroTokens.color.font.link,
+    fontWeight: 0
   })
 });

package/lib/styles/themes/next-gen/variants/variants.js

@@ -51,7 +51,7 @@ var fieldHelperText = {
       color: 'text.fieldHelper'
     },
     '&.is-error': {
-      color: 'text.error'
+      color: 'critical.bright'
     },
     '&.is-warning': {
       color: 'warning.bright'
@@ -154,15 +154,15 @@ var listBox = {
     p: astroTokens.spacing.sm
   },
   option: {
-    py: 12,
-    pl: 12,
+    py: astroTokens.spacing['md-s'],
+    pl: astroTokens.spacing['md-s'],
     pr: astroTokens.spacing.md,
     justifyContent: 'space-between',
     borderRadius: astroTokens.radius.md,
     lineHeight: 'body',
-    color: 'gray-700',
+    color: astroTokens.color.common.menu.item.text,
     '&.is-focused': {
-      color: 'font.hover',
+      color: astroTokens.color.common.menu.item.hover.text,
       bg: 'gray-100',
       borderRadius: astroTokens.radius.md
     },
@@ -172,13 +172,13 @@ var listBox = {
       zIndex: 1
     },
     '&.is-selected': {
+      color: astroTokens.color.common.menu.item.selected.text,
       fontWeight: '0',
-      color: 'black',
       bg: 'lightblue',
       pl: '.75rem',
       borderRadius: astroTokens.radius.md,
       '&.is-focused': {
-        color: 'text.primary'
+        color: astroTokens.color.common.menu.item.selected.text
       },
       '&.is-focus-visible': {
         bg: 'lightblue'
@@ -219,7 +219,7 @@ var listBox = {
 var separator = {
   base: {
     bg: 'border.base',
-    my: 'sm',
+    my: 'md',
     '&.is-vertical': {
       m: '0'
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.212.1",
+  "version": "2.213.1-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",