@pingux/astro 1.1.0-alpha.6 → 1.1.0-alpha.7

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.1.0-alpha.7](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.6...@pingux/astro@1.1.0-alpha.7) (2022-01-21)
+
+
+### Bug Fixes
+
+* [UIP-5109] AccordionGroup OverlayPanel Compatibility Fix ([6a78b76](https://gitlab.corp.pingidentity.com/ux/pingux/commit/6a78b76a3c3ab7b9ac78a7dcd6ca74a6449d63c2))
+
+
+
+
+
 # [1.1.0-alpha.6](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.5...@pingux/astro@1.1.0-alpha.6) (2022-01-21)
 
 

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

@@ -39,6 +39,22 @@ var getComponent = function getComponent() {
   }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button")))));
 };
 
+var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_index.OverlayPanel, {
+    isOpen: true
+  }, (0, _react2.jsx)(_AccordionGridGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_collections.Item, {
+    key: "first",
+    textValue: "Duplicate"
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))), (0, _react2.jsx)(_collections.Item, {
+    key: "second",
+    textValue: "Duplicate"
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))), (0, _react2.jsx)(_collections.Item, {
+    key: "third",
+    textValue: "Duplicate"
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))))));
+};
+
 (0, _testAxe["default"])(getComponent, {
   // landmark-unique rule conflicts with react-aria role definition
   rules: {
@@ -230,4 +246,12 @@ test('default expanded keys expands an accordion item', function () {
 
   var selectedRow = row[0];
   expect(selectedRow).toHaveAttribute('aria-selected', 'true');
+});
+test('items do not automatically expand if wrapped in an open OverlayPanel', function () {
+  getComponentInOverlayPanel();
+
+  var row = _testWrapper.screen.getAllByRole('row');
+
+  var selectedRow = row[0];
+  expect(selectedRow).not.toHaveAttribute('aria-selected', 'true');
 });

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

@@ -20,6 +20,8 @@ var _Text = _interopRequireDefault(require("../Text"));
 
 var _AccordionGroup = _interopRequireDefault(require("../AccordionGroup"));
 
+var _index = require("../../index");
+
 var _react2 = require("@emotion/react");
 
 var testId = 'test-accordion';
@@ -45,6 +47,25 @@ var getComponent = function getComponent() {
     "data-id": "third",
     label: "Accordion item"
   }, (0, _react2.jsx)(_Text["default"], null, "Render me!"))));
+};
+
+var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_index.OverlayPanel, {
+    isOpen: true
+  }, (0, _react2.jsx)(_AccordionGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_collections.Item, {
+    key: "first",
+    textValue: "Duplicate",
+    "data-id": "first"
+  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_collections.Item, {
+    key: "second",
+    textValue: "Duplicate",
+    "data-id": "second"
+  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_collections.Item, {
+    key: "third",
+    textValue: "Duplicate",
+    "data-id": "third"
+  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")))));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -267,4 +288,12 @@ test('Item accepts a data-id and the data-id can be found in the DOM', function
   var selectedItem = buttons[0];
   var parentElement = selectedItem.parentElement;
   expect(parentElement).toHaveAttribute('data-id', 'first');
+});
+test('items do not automatically expand if wrapped in an open OverlayPanel', function () {
+  getComponentInOverlayPanel();
+
+  var buttons = _testWrapper.screen.getAllByRole('button');
+
+  var selectedItem = buttons[0];
+  expect(selectedItem).not.toHaveAttribute('aria-expanded', 'true');
 });

package/lib/cjs/components/AccordionItem/AccordionItem.js

@@ -121,9 +121,11 @@ var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ml: "5px"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: isOpen ? _MenuUpIcon["default"] : _MenuDownIcon["default"]
-  }))), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+  }))), isOpen && (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "accordion.accordionBody"
-  }, accordionRegionProps, regionProps), item.rendered));
+  }, accordionRegionProps, regionProps, {
+    className: itemClasses
+  }), item.rendered));
 });
 AccordionItem.propTypes = {
   'aria-label': _propTypes["default"].string,

package/lib/cjs/components/OverlayPanel/OverlayPanel.stories.js

@@ -22,8 +22,6 @@ var _collections = require("@react-stately/collections");
 
 var _hooks = require("../../hooks");
 
-var _Button = _interopRequireDefault(require("../Button/Button"));
-
 var _OverlayPanel = _interopRequireDefault(require("./OverlayPanel"));
 
 var _index = require("../../index");
@@ -66,15 +64,18 @@ var Default = function Default(_ref) {
   var state = (0, _hooks.useOverlayPanelState)();
   return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
-    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_Button["default"], {
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
       onPress: state.open
     }, "Open Panel"), (0, _react2.jsx)(_OverlayPanel["default"], (0, _extends2["default"])({
       isOpen: state.isOpen
-    }, args), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_Button["default"], {
+    }, args), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
       onPress: state.close
-    }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
-      pt: "md"
-    }, "Children render here."))))
+    }, "Close Panel"), (0, _react2.jsx)(_index.AccordionGroup, args, (0, _react2.jsx)(_collections.Item, {
+      key: "accordionKey",
+      textValue: "accordionKey",
+      label: "Accordion Label",
+      "data-id": "accordionItem"
+    }, (0, _react2.jsx)(_index.Text, null, "Render me!"))))))
   );
 };
 
@@ -106,7 +107,7 @@ var InnerPanel = function InnerPanel(_ref2) {
     variant: "overlayPanel.overlayPanelInner" // applies higher z-index
     ,
     isOpen: innerState.isOpen
-  }, args), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_Button["default"], {
+  }, args), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
     onPress: innerState.close
   }, "Close Inner Panel"), (0, _react2.jsx)(_index.Text, {
     pt: "md"
@@ -121,7 +122,7 @@ var InnerPanel = function InnerPanel(_ref2) {
     sx: {
       p: '12px'
     }
-  }, (0, _react2.jsx)(_Button["default"], {
+  }, (0, _react2.jsx)(_index.Button, {
     onPress: closeOuterPanel
   }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
     pt: "md",
@@ -164,14 +165,14 @@ var InnerPanel = function InnerPanel(_ref2) {
     mr: "auto"
   }, "Form 5")), (0, _react2.jsx)(_index.Separator, {
     margin: "0"
-  })), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_Button["default"], {
+  })), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
     onPress: toggleMessagesOpen
-  }, "Toggle Messages"), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_Button["default"], {
+  }, "Toggle Messages"), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
     onPress: innerState.open
   }, "Open Inner Panel"), inner)));
   return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
-    (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_Button["default"], {
+    (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
       onPress: state.open
     }, "Open Panel"), outer), messagesOpen && (0, _react2.jsx)(_index.Messages, {
       sx: {
@@ -192,14 +193,14 @@ var CustomWidth = function CustomWidth() {
     // readers when an overlay opens.
     //
     // For a custom width, provide the width via the 'sx' prop
-    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_Button["default"], {
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
       onPress: state.open
     }, "Open Panel"), (0, _react2.jsx)(_OverlayPanel["default"], {
       isOpen: state.isOpen,
       sx: {
         width: '720px'
       }
-    }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_Button["default"], {
+    }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
       onPress: state.close
     }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
       pt: "md"

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

@@ -17,6 +17,13 @@ var _react2 = require("@emotion/react");
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_PopoverContainer["default"], props, (0, _react2.jsx)(_index.Box, null, "I am in a popover"))));
+};
+
+var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_index.OverlayPanel, {
+    isOpen: true
+  }, (0, _react2.jsx)(_PopoverContainer["default"], props, (0, _react2.jsx)(_index.Box, null, "I am in a popover"))));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -39,4 +46,12 @@ test('should render a popover with no arrow', function () {
   var arrow = _testWrapper.screen.queryByTestId('popover-arrow');
 
   expect(arrow).not.toBeInTheDocument();
+});
+test('popover will not open if wrapped in an overlayPanel', function () {
+  getComponentInOverlayPanel({
+    popoverProps: {
+      'data-test-id': 'popover-test'
+    }
+  });
+  expect(_testWrapper.screen.queryByTestId('popover-test')).not.toBeInTheDocument();
 });

package/lib/cjs/styles/variants/accordion.js

@@ -27,11 +27,11 @@ var accordion = {
   alignItems: 'flex-start'
 };
 var accordionBody = {
-  display: 'none !important',
+  display: 'none',
   pt: 'md',
   width: '100%',
   '.is-open &': {
-    display: 'flex !important'
+    display: 'flex'
   }
 };
 var accordionGridHeader = {

package/lib/components/AccordionGridGroup/AccordionGridGroup.test.js

@@ -4,7 +4,7 @@ import { Item } from '@react-stately/collections';
 import userEvent from '@testing-library/user-event';
 import axeTest from '../../utils/testUtils/testAxe';
 import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
-import { Link, Box } from '../../index';
+import { Link, Box, OverlayPanel } from '../../index';
 import AccordionGridGroup from '../AccordionGridGroup';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-accordion';
@@ -26,6 +26,22 @@ var getComponent = function getComponent() {
   }, ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Header Button"), ___EmotionJSX(Link, null, "Second Header Button")), ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Body Button"), ___EmotionJSX(Link, null, "Second Body Button")))));
 };
 
+var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(OverlayPanel, {
+    isOpen: true
+  }, ___EmotionJSX(AccordionGridGroup, _extends({}, defaultProps, props), ___EmotionJSX(Item, {
+    key: "first",
+    textValue: "Duplicate"
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Header Button"), ___EmotionJSX(Link, null, "Second Header Button")), ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Body Button"), ___EmotionJSX(Link, null, "Second Body Button"))), ___EmotionJSX(Item, {
+    key: "second",
+    textValue: "Duplicate"
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Header Button"), ___EmotionJSX(Link, null, "Second Header Button")), ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Body Button"), ___EmotionJSX(Link, null, "Second Body Button"))), ___EmotionJSX(Item, {
+    key: "third",
+    textValue: "Duplicate"
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Header Button"), ___EmotionJSX(Link, null, "Second Header Button")), ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Body Button"), ___EmotionJSX(Link, null, "Second Body Button"))))));
+};
+
 axeTest(getComponent, {
   // landmark-unique rule conflicts with react-aria role definition
   rules: {
@@ -166,4 +182,10 @@ test('default expanded keys expands an accordion item', function () {
   var row = screen.getAllByRole('row');
   var selectedRow = row[0];
   expect(selectedRow).toHaveAttribute('aria-selected', 'true');
+});
+test('items do not automatically expand if wrapped in an open OverlayPanel', function () {
+  getComponentInOverlayPanel();
+  var row = screen.getAllByRole('row');
+  var selectedRow = row[0];
+  expect(selectedRow).not.toHaveAttribute('aria-selected', 'true');
 });

package/lib/components/AccordionGroup/AccordionGroup.test.js

@@ -7,6 +7,7 @@ import axeTest from '../../utils/testUtils/testAxe';
 import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import Text from '../Text';
 import AccordionGroup from '../AccordionGroup';
+import { OverlayPanel } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-accordion';
 var defaultProps = {
@@ -31,6 +32,25 @@ var getComponent = function getComponent() {
     "data-id": "third",
     label: "Accordion item"
   }, ___EmotionJSX(Text, null, "Render me!"))));
+};
+
+var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(OverlayPanel, {
+    isOpen: true
+  }, ___EmotionJSX(AccordionGroup, _extends({}, defaultProps, props), ___EmotionJSX(Item, {
+    key: "first",
+    textValue: "Duplicate",
+    "data-id": "first"
+  }, ___EmotionJSX(Text, null, "Render me!")), ___EmotionJSX(Item, {
+    key: "second",
+    textValue: "Duplicate",
+    "data-id": "second"
+  }, ___EmotionJSX(Text, null, "Render me!")), ___EmotionJSX(Item, {
+    key: "third",
+    textValue: "Duplicate",
+    "data-id": "third"
+  }, ___EmotionJSX(Text, null, "Render me!")))));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -200,4 +220,10 @@ test('Item accepts a data-id and the data-id can be found in the DOM', function
   var selectedItem = buttons[0];
   var parentElement = selectedItem.parentElement;
   expect(parentElement).toHaveAttribute('data-id', 'first');
+});
+test('items do not automatically expand if wrapped in an open OverlayPanel', function () {
+  getComponentInOverlayPanel();
+  var buttons = screen.getAllByRole('button');
+  var selectedItem = buttons[0];
+  expect(selectedItem).not.toHaveAttribute('aria-expanded', 'true');
 });

package/lib/components/AccordionItem/AccordionItem.js

@@ -93,9 +93,11 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
     ml: "5px"
   }, ___EmotionJSX(Icon, {
     icon: isOpen ? MenuUp : MenuDown
-  }))), ___EmotionJSX(Box, _extends({
+  }))), isOpen && ___EmotionJSX(Box, _extends({
     variant: "accordion.accordionBody"
-  }, accordionRegionProps, regionProps), item.rendered));
+  }, accordionRegionProps, regionProps, {
+    className: itemClasses
+  }), item.rendered));
 });
 AccordionItem.propTypes = {
   'aria-label': PropTypes.string,

package/lib/components/OverlayPanel/OverlayPanel.stories.js

@@ -3,9 +3,8 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { useState } from 'react';
 import { Item } from '@react-stately/collections';
 import { useOverlayPanelState } from '../../hooks';
-import Button from '../Button/Button';
 import OverlayPanel from './OverlayPanel';
-import { OverlayProvider, Box, Text, List, ListItem, Separator, Messages } from '../../index';
+import { OverlayProvider, Box, Text, List, ListItem, Separator, Messages, Button, AccordionGroup } from '../../index';
 import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -47,9 +46,12 @@ export var Default = function Default(_ref) {
       isOpen: state.isOpen
     }, args), ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
       onPress: state.close
-    }, "Close Panel"), ___EmotionJSX(Text, {
-      pt: "md"
-    }, "Children render here."))))
+    }, "Close Panel"), ___EmotionJSX(AccordionGroup, args, ___EmotionJSX(Item, {
+      key: "accordionKey",
+      textValue: "accordionKey",
+      label: "Accordion Label",
+      "data-id": "accordionItem"
+    }, ___EmotionJSX(Text, null, "Render me!"))))))
   );
 };
 export var InnerPanel = function InnerPanel(_ref2) {

package/lib/components/PopoverContainer/PopoverContainer.test.js

@@ -1,13 +1,20 @@
 import React from 'react';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
-import { Box } from '../../index';
+import { Box, OverlayPanel } from '../../index';
 import PopoverContainer from './PopoverContainer';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(React.Fragment, null, ___EmotionJSX(PopoverContainer, props, ___EmotionJSX(Box, null, "I am in a popover"))));
+};
+
+var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(OverlayPanel, {
+    isOpen: true
+  }, ___EmotionJSX(PopoverContainer, props, ___EmotionJSX(Box, null, "I am in a popover"))));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -26,4 +33,12 @@ test('should render a popover with no arrow', function () {
   });
   var arrow = screen.queryByTestId('popover-arrow');
   expect(arrow).not.toBeInTheDocument();
+});
+test('popover will not open if wrapped in an overlayPanel', function () {
+  getComponentInOverlayPanel({
+    popoverProps: {
+      'data-test-id': 'popover-test'
+    }
+  });
+  expect(screen.queryByTestId('popover-test')).not.toBeInTheDocument();
 });

package/lib/styles/variants/accordion.js

@@ -18,11 +18,11 @@ var accordion = {
   alignItems: 'flex-start'
 };
 var accordionBody = {
-  display: 'none !important',
+  display: 'none',
   pt: 'md',
   width: '100%',
   '.is-open &': {
-    display: 'flex !important'
+    display: 'flex'
   }
 };
 var accordionGridHeader = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.1.0-alpha.6",
+  "version": "1.1.0-alpha.7",
   "description": "PingUX themeable React component library",
   "author": "uxdev@pingidentity.com",
   "license": "Apache-2.0",