@pingux/astro 2.147.1-alpha.0 → 2.148.0-alpha.0

package/lib/components/PopoverMenu/PopoverMenu.js

@@ -13,16 +13,14 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef, useRef } from 'react';
-import { DismissButton, FocusScope, useMenuTrigger, useOverlayPosition } from 'react-aria';
+import { DismissButton, FocusScope, OverlayContainer, useMenuTrigger } from 'react-aria';
 import { useMenuTriggerState } from 'react-stately';
 import { PressResponder } from '@react-aria/interactions';
 import { MenuContext } from '../../context/MenuContext';
-import { useLocalOrForwardRef } from '../../hooks';
-import PopoverContainer from '../PopoverContainer';
+import Popover from '../Popover/Popover';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var PopoverMenu = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;
-  var menuPopoverRef = useLocalOrForwardRef(ref);
   var triggerRef = useRef(null);
   var menuRef = useRef(null);
   var children = props.children,
@@ -46,20 +44,6 @@ var PopoverMenu = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useMenuTrigger = useMenuTrigger({}, state, triggerRef),
     menuTriggerProps = _useMenuTrigger.menuTriggerProps,
     menuProps = _useMenuTrigger.menuProps;
-  var _useOverlayPosition = useOverlayPosition({
-      targetRef: triggerRef,
-      overlayRef: menuPopoverRef,
-      scrollRef: menuRef,
-      offset: 5,
-      placement: _concatInstanceProperty(_context = "".concat(direction, " ")).call(_context, align),
-      // Our API preference is for default false so we invert this since it should be default true
-      shouldFlip: !isNotFlippable,
-      isOpen: state.isOpen,
-      onClose: state.close,
-      shouldUpdatePosition: true
-    }),
-    positionProps = _useOverlayPosition.overlayProps,
-    placement = _useOverlayPosition.placement;
 
   /* eslint-disable react/jsx-no-constructed-context-values */
   var menuContext = _objectSpread(_objectSpread({}, menuProps), {}, {
@@ -77,22 +61,23 @@ var PopoverMenu = /*#__PURE__*/forwardRef(function (props, ref) {
   }), menu, ___EmotionJSX(DismissButton, {
     onDismiss: state.close
   }));
+  var placement = _concatInstanceProperty(_context = "".concat(direction, " ")).call(_context, align);
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(PressResponder, _extends({}, menuTriggerProps, {
     ref: triggerRef,
     isPressed: state.isOpen
   }), menuTrigger), ___EmotionJSX(MenuContext.Provider, {
     value: menuContext
-  }, ___EmotionJSX(PopoverContainer, _extends({
-    isOpen: state.isOpen,
-    ref: menuPopoverRef,
+  }, ___EmotionJSX(OverlayContainer, null, ___EmotionJSX(Popover, _extends({
     placement: placement,
-    onClose: state.close,
-    hasNoArrow: hasNoArrow,
-    isDismissable: true,
-    isNonModal: true
-  }, positionProps, menuProps, {
-    role: "dialog"
-  }), contents)));
+    hasNoArrow: hasNoArrow
+  }, menuProps, {
+    "data-popover-placement": direction,
+    "data-testid": "popover-container",
+    role: "presentation",
+    triggerRef: triggerRef,
+    state: state,
+    direction: direction
+  }), contents))));
 });
 PopoverMenu.defaultProps = {
   align: 'middle',

package/lib/hooks/useOverlappingMenuHoverState/useOverlappingMenuHoverState.test.js

@@ -60,7 +60,9 @@ describe('useOverlappingMenuHoverState', function () {
             case 0:
               getComponent();
               _context.next = 3;
-              return userEvent.hover(screen.getByRole('listitem'));
+              return userEvent.hover(screen.getByRole('listitem', {
+                hidden: true
+              }));
             case 3:
               screen.getByText(IS_HOVERED);
             case 4:
@@ -99,7 +101,9 @@ describe('useOverlappingMenuHoverState', function () {
               return userEvent.click(screen.getByRole('button'));
             case 3:
               _context3.next = 5;
-              return userEvent.unhover(screen.getByRole('listitem'));
+              return userEvent.unhover(screen.getByRole('listitem', {
+                hidden: true
+              }));
             case 5:
               expect(screen.queryByText(IS_HOVERED)).not.toBeInTheDocument();
             case 6:
@@ -144,7 +148,9 @@ describe('useOverlappingMenuHoverState', function () {
               return userEvent.hover(screen.getByRole('menu'));
             case 5:
               _context5.next = 7;
-              return userEvent.hover(screen.getByRole('listitem'));
+              return userEvent.hover(screen.getByRole('listitem', {
+                hidden: true
+              }));
             case 7:
               screen.getByText(IS_HOVERED);
             case 8:
@@ -190,10 +196,14 @@ describe('useOverlappingMenuHoverState', function () {
               return userEvent.hover(screen.getByRole('menu'));
             case 5:
               _context7.next = 7;
-              return userEvent.hover(screen.getByRole('listitem'));
+              return userEvent.hover(screen.getByRole('listitem', {
+                hidden: true
+              }));
             case 7:
               _context7.next = 9;
-              return userEvent.unhover(screen.getByRole('listitem'));
+              return userEvent.unhover(screen.getByRole('listitem', {
+                hidden: true
+              }));
             case 9:
               expect(screen.queryByText(IS_HOVERED)).not.toBeInTheDocument();
             case 10:

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

@@ -271,10 +271,19 @@ var buttons = {
     },
     '&.is-focused': {
       textDecoration: 'underline',
-      color: chroma.mix(nextGenColors['blue-500'], 'white', 0.30, 'rgb').hex(),
+      color: chroma.mix(nextGenColors['blue-500'], 'white', 0.3, 'rgb').hex(),
       outline: 'none'
     }
   },
-  iconButtons: iconButtons
+  iconButtons: iconButtons,
+  listBoxLink: {
+    color: 'blue-400',
+    '&.is-pressed': {
+      color: chroma.mix(nextGenColors['blue-500'], 'white', 0.45, 'rgb').hex()
+    },
+    '&.is-focused': {
+      color: chroma.mix(nextGenColors['blue-500'], 'white', 0.3, 'rgb').hex()
+    }
+  }
 };
 export default buttons;

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

@@ -12,7 +12,7 @@ var listBox = {
   container: {
     backgroundColor: 'background.base',
     border: '1px solid',
-    borderColor: 'border.input',
+    borderColor: 'transparent',
     borderRadius: '4px'
   },
   option: {
@@ -162,6 +162,12 @@ export default {
   skeleton: skeleton,
   footer: footer,
   tooltip: tooltip,
+  popoverMenu: {
+    container: {
+      background: '#23282e',
+      border: '1px solid #69788B'
+    }
+  },
   dataTable: {
     selectableTableRow: {
       '&.is-selected': {

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

@@ -7,7 +7,6 @@ export var componentSpecificNextGenBlacklist = {
   OverlayPanel: ['Expandable'],
   DataTable: ['Default'],
   Text: ['Default'],
-  MultivaluesField: ['Icon Slots In Badge'],
   Tabs: ['Vertical Orientation']
 };
 export var astroBlacklistStory = {

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

@@ -98,11 +98,14 @@ var readOnlyFieldBadge = _objectSpread(_objectSpread({}, readOnlyBadge), {}, {
   })
 });
 var itemBadgeWithSlot = _objectSpread(_objectSpread({}, readOnlyBadge), {}, {
-  bg: '#f6f8fa !important',
+  bg: '#EAF2FD !important',
   fontWeight: 2,
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
     color: 'text.primary'
-  })
+  }),
+  '& svg': {
+    fill: 'gray-900'
+  }
 });
 export var badgeDeleteButton = _objectSpread(_objectSpread({}, buttons.iconButtons.base), {}, {
   borderRadius: '50%',

package/lib/utils/testUtils/universalFormSubmitTest.js

@@ -345,6 +345,7 @@ export var universalFieldComponentTests = function universalFieldComponentTests(
               }
             });
             fireEvent.submit(screen.getByRole('form', {
+              hidden: true,
               name: /test form 2/i
             }));
             expect(handleFormSubmit).toHaveBeenCalledWith({
@@ -365,6 +366,7 @@ export var universalFieldComponentTests = function universalFieldComponentTests(
               }
             });
             fireEvent.submit(screen.getByRole('form', {
+              hidden: true,
               name: /test form 2/i
             }));
             expect(handleFormSubmit).toHaveBeenCalledWith({
@@ -415,6 +417,7 @@ export var universalFieldComponentTests = function universalFieldComponentTests(
               });
             }
             fireEvent.submit(screen.getByRole('form', {
+              hidden: true,
               name: /test form 2/i
             }));
             expect(handleFormSubmit).toHaveBeenCalledWith({

package/package.json

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