@pingux/astro 1.40.1-alpha.3 → 1.40.1

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

@@ -2,12 +2,24 @@
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
 
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
 
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
 
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
 _Object$defineProperty(exports, "__esModule", {
@@ -22,6 +34,8 @@ var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stabl
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -30,6 +44,8 @@ var _accordion = require("@react-aria/accordion");
 
 var _tree = require("@react-stately/tree");
 
+var _utils = require("@react-aria/utils");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _index = require("../../index");
@@ -42,12 +58,17 @@ var _isIterable = require("../../utils/devUtils/props/isIterable");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["defaultExpandedKeys", "expandedKeys", "onExpandedChange"];
+var _excluded = ["defaultExpandedKeys", "expandedKeys", "onExpandedChange"],
+    _excluded2 = ["onFocus"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function 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) { (0, _defineProperty2["default"])(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; }
+
 /**
  * Component that allows for a child to be expanded and retracted.
  * Built on top of [React Aria useAccordion and useAccordionItem](https://reactspectrum.blob.core.windows.net/reactspectrum/d77b35e970e5549f66b47a83f07423f5c93b7297/docs/react-aria/useAccordion.html).
@@ -65,26 +86,28 @@ var AccordionGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var state = (0, _tree.useTreeState)(props);
   var accordionRef = (0, _react.useRef)();
+  /* `autoFocus: true` is what makes the initial focus only take one click vs two. */
 
-  var _useAccordion = (0, _accordion.useAccordion)(props, state, accordionRef),
+  var _useAccordion = (0, _accordion.useAccordion)(_objectSpread({
+    autoFocus: true
+  }, props), state, accordionRef),
       accordionProps = _useAccordion.accordionProps;
 
   delete accordionProps.onMouseDown;
+  /* Splicing out the onFocus function is what allows subsequent focuses to only take one click. */
+
+  var onFocus = accordionProps.onFocus,
+      theseProps = (0, _objectWithoutProperties2["default"])(accordionProps, _excluded2);
   /* istanbul ignore next */
 
   (0, _react.useImperativeHandle)(ref, function () {
     return accordionRef.current;
   });
-  (0, _react.useEffect)(function () {
-    if (expandedKeys || defaultExpandedKeys) {
-      state.selectionManager.setFocused(true);
-    }
-  }, [defaultExpandedKeys, expandedKeys, state.selectionManager]);
   return (0, _react2.jsx)(_AccordionContext.AccordionContext.Provider, {
     value: state
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     ref: accordionRef
-  }, accordionProps, others), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item) {
+  }, (0, _utils.mergeProps)(theseProps, others)), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item) {
     return (0, _react2.jsx)(_AccordionItem["default"], {
       key: item.key,
       item: item,

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

@@ -26,6 +26,8 @@ var _Text = _interopRequireDefault(require("../Text"));
 
 var _Button = _interopRequireDefault(require("../Button"));
 
+var _TextField = _interopRequireDefault(require("../TextField"));
+
 var _ = _interopRequireDefault(require("."));
 
 var _react2 = require("@emotion/react");
@@ -45,7 +47,7 @@ var itemArray = [{
 }, {
   key: 't3',
   label: 'Third Accordion',
-  children: 'Child Renders Here'
+  children: (0, _react2.jsx)(_TextField["default"], null)
 }];
 var itemArrayDisabled = [{
   key: 't1',
@@ -132,7 +134,7 @@ var Multiple = function Multiple() {
 exports.Multiple = Multiple;
 
 var ControlledExpanded = function ControlledExpanded() {
-  var _useState = (0, _react.useState)(['t1']),
+  var _useState = (0, _react.useState)(['t3']),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
       expandedKeys = _useState2[0],
       setExpandedKeys = _useState2[1];

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

@@ -28,6 +28,16 @@ var testId = 'test-accordion';
 var defaultProps = {
   'data-testid': testId
 };
+var items = [{
+  key: 'identityProvider',
+  label: 'some label1',
+  text: 'empty'
+}, {
+  key: 'identityProvider1',
+  label: 'some label2',
+  text: 'empty'
+}];
+var selectedAccordionKeys = ['identityProvider', 'identityProvider1'];
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -87,6 +97,73 @@ var getComponentWithInput = function getComponentWithInput() {
   }, (0, _react2.jsx)("input", {
     "data-testid": "testInput"
   }))));
+};
+
+var getComponentWithPopover = function getComponentWithPopover() {
+  return (0, _testWrapper.render)((0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "50%"
+  }, (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.Button, {
+    "data-testid": "popoverbutton"
+  }, "Click me"), (0, _react2.jsx)(_index.Menu, {
+    onAction: function onAction() {}
+  }, (0, _react2.jsx)(_collections.Item, {
+    key: "edit"
+  }, "Edit"), (0, _react2.jsx)(_collections.Item, {
+    key: "duplicate"
+  }, "Duplicate"), (0, _react2.jsx)(_collections.Item, {
+    key: "delete",
+    textValue: "delete"
+  }, (0, _react2.jsx)(_Text["default"], {
+    color: "critical.bright"
+  }, "Delete")))), (0, _react2.jsx)(_AccordionGroup["default"], {
+    items: items,
+    defaultExpandedKeys: selectedAccordionKeys
+  }, function (item) {
+    return (0, _react2.jsx)(_collections.Item, {
+      key: item.key,
+      textValue: item.label,
+      label: item.label
+    }, item.text);
+  })));
+};
+
+var getComponentWithMultipleAccordion = function getComponentWithMultipleAccordion() {
+  return (0, _testWrapper.render)((0, _react2.jsx)(_index.Box, {
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "50%"
+  }, (0, _react2.jsx)(_AccordionGroup["default"], {
+    defaultExpandedKeys: ['customConfiguration']
+  }, (0, _react2.jsx)(_collections.Item, {
+    key: "customConfiguration",
+    label: "connection.configuration",
+    regionProps: {
+      pt: 'sm'
+    },
+    containerProps: {
+      mb: 0
+    },
+    textValue: "connection.configuration"
+  }, (0, _react2.jsx)("form", {
+    "data-id": "connection-configuration-custom-form"
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_Text["default"], null, "other text"), (0, _react2.jsx)(_Text["default"], null, "another text"))))), (0, _react2.jsx)(_AccordionGroup["default"], {
+    defaultExpandedKeys: ['customConfiguration1']
+  }, (0, _react2.jsx)(_collections.Item, {
+    key: "customConfiguration",
+    label: "connection.configuration1",
+    regionProps: {
+      pt: 'sm'
+    },
+    containerProps: {
+      mb: 0
+    },
+    textValue: "connection.configuration1"
+  }, (0, _react2.jsx)("form", {
+    "data-id": "connection-configuration-custom-form"
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_Text["default"], null, "other text1"), (0, _react2.jsx)(_Text["default"], null, "another text1")))))));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -329,4 +406,50 @@ test('items do not automatically expand if wrapped in an open OverlayPanel', fun
 
   var selectedItem = buttons[0];
   expect(selectedItem).not.toHaveAttribute('aria-expanded', 'true');
+});
+test('accordion is compatible with another component that uses an overlay', function () {
+  getComponentWithPopover();
+
+  var buttons = _testWrapper.screen.getAllByRole('button');
+
+  var popoverButton = _testWrapper.screen.getByTestId('popoverbutton');
+
+  _userEvent["default"].click(popoverButton);
+
+  var selectedItem = buttons[0];
+  expect(selectedItem).toHaveAttribute('aria-expanded', 'true');
+
+  _userEvent["default"].click(selectedItem);
+
+  expect(selectedItem).toHaveAttribute('aria-expanded', 'false');
+
+  _userEvent["default"].click(selectedItem);
+
+  expect(selectedItem).toHaveAttribute('aria-expanded', 'true');
+});
+test('accordion works if there are multiple, controlled on the same implementation', function () {
+  getComponentWithMultipleAccordion();
+
+  var buttons = _testWrapper.screen.getAllByRole('button');
+
+  var selectedItem = buttons[0];
+  var secondSelectedItem = buttons[1];
+  expect(selectedItem).toHaveAttribute('aria-expanded', 'true');
+
+  _userEvent["default"].click(selectedItem);
+
+  expect(selectedItem).toHaveAttribute('aria-expanded', 'false');
+
+  _userEvent["default"].click(selectedItem);
+
+  expect(selectedItem).toHaveAttribute('aria-expanded', 'true');
+  expect(secondSelectedItem).toHaveAttribute('aria-expanded', 'false');
+
+  _userEvent["default"].click(secondSelectedItem);
+
+  expect(secondSelectedItem).toHaveAttribute('aria-expanded', 'true');
+
+  _userEvent["default"].click(secondSelectedItem);
+
+  expect(secondSelectedItem).toHaveAttribute('aria-expanded', 'false');
 });

package/lib/components/AccordionGroup/AccordionGroup.js

@@ -1,11 +1,27 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["defaultExpandedKeys", "expandedKeys", "onExpandedChange"];
+var _excluded = ["defaultExpandedKeys", "expandedKeys", "onExpandedChange"],
+    _excluded2 = ["onFocus"];
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
-import React, { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
+
+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, useImperativeHandle } from 'react';
 import { useAccordion } from '@react-aria/accordion';
 import { useTreeState } from '@react-stately/tree';
+import { mergeProps } from '@react-aria/utils';
 import PropTypes from 'prop-types';
 import { Box } from '../../index';
 import AccordionItem from '../AccordionItem';
@@ -31,26 +47,29 @@ var AccordionGroup = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var state = useTreeState(props);
   var accordionRef = useRef();
+  /* `autoFocus: true` is what makes the initial focus only take one click vs two. */
 
-  var _useAccordion = useAccordion(props, state, accordionRef),
+  var _useAccordion = useAccordion(_objectSpread({
+    autoFocus: true
+  }, props), state, accordionRef),
       accordionProps = _useAccordion.accordionProps;
 
   delete accordionProps.onMouseDown;
+  /* Splicing out the onFocus function is what allows subsequent focuses to only take one click. */
+
+  var onFocus = accordionProps.onFocus,
+      theseProps = _objectWithoutProperties(accordionProps, _excluded2);
   /* istanbul ignore next */
 
+
   useImperativeHandle(ref, function () {
     return accordionRef.current;
   });
-  useEffect(function () {
-    if (expandedKeys || defaultExpandedKeys) {
-      state.selectionManager.setFocused(true);
-    }
-  }, [defaultExpandedKeys, expandedKeys, state.selectionManager]);
   return ___EmotionJSX(AccordionContext.Provider, {
     value: state
   }, ___EmotionJSX(Box, _extends({
     ref: accordionRef
-  }, accordionProps, others), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
+  }, mergeProps(theseProps, others)), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
     return ___EmotionJSX(AccordionItem, {
       key: item.key,
       item: item,

package/lib/components/AccordionGroup/AccordionGroup.stories.js

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { Item } from '@react-stately/collections';
 import Text from '../Text';
 import Button from '../Button';
+import TextField from '../TextField';
 import AccordionGroup from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var itemArray = [{
@@ -16,7 +17,7 @@ var itemArray = [{
 }, {
   key: 't3',
   label: 'Third Accordion',
-  children: 'Child Renders Here'
+  children: ___EmotionJSX(TextField, null)
 }];
 var itemArrayDisabled = [{
   key: 't1',
@@ -95,7 +96,7 @@ export var Multiple = function Multiple() {
   );
 };
 export var ControlledExpanded = function ControlledExpanded() {
-  var _useState = useState(['t1']),
+  var _useState = useState(['t3']),
       _useState2 = _slicedToArray(_useState, 2),
       expandedKeys = _useState2[0],
       setExpandedKeys = _useState2[1];

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

@@ -7,12 +7,22 @@ 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, TextField } from '../../index';
+import { OverlayPanel, TextField, Box, Menu, Button, PopoverMenu } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-accordion';
 var defaultProps = {
   'data-testid': testId
 };
+var items = [{
+  key: 'identityProvider',
+  label: 'some label1',
+  text: 'empty'
+}, {
+  key: 'identityProvider1',
+  label: 'some label2',
+  text: 'empty'
+}];
+var selectedAccordionKeys = ['identityProvider', 'identityProvider1'];
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -72,6 +82,73 @@ var getComponentWithInput = function getComponentWithInput() {
   }, ___EmotionJSX("input", {
     "data-testid": "testInput"
   }))));
+};
+
+var getComponentWithPopover = function getComponentWithPopover() {
+  return render(___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "50%"
+  }, ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(Button, {
+    "data-testid": "popoverbutton"
+  }, "Click me"), ___EmotionJSX(Menu, {
+    onAction: function onAction() {}
+  }, ___EmotionJSX(Item, {
+    key: "edit"
+  }, "Edit"), ___EmotionJSX(Item, {
+    key: "duplicate"
+  }, "Duplicate"), ___EmotionJSX(Item, {
+    key: "delete",
+    textValue: "delete"
+  }, ___EmotionJSX(Text, {
+    color: "critical.bright"
+  }, "Delete")))), ___EmotionJSX(AccordionGroup, {
+    items: items,
+    defaultExpandedKeys: selectedAccordionKeys
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.key,
+      textValue: item.label,
+      label: item.label
+    }, item.text);
+  })));
+};
+
+var getComponentWithMultipleAccordion = function getComponentWithMultipleAccordion() {
+  return render(___EmotionJSX(Box, {
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "50%"
+  }, ___EmotionJSX(AccordionGroup, {
+    defaultExpandedKeys: ['customConfiguration']
+  }, ___EmotionJSX(Item, {
+    key: "customConfiguration",
+    label: "connection.configuration",
+    regionProps: {
+      pt: 'sm'
+    },
+    containerProps: {
+      mb: 0
+    },
+    textValue: "connection.configuration"
+  }, ___EmotionJSX("form", {
+    "data-id": "connection-configuration-custom-form"
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Text, null, "other text"), ___EmotionJSX(Text, null, "another text"))))), ___EmotionJSX(AccordionGroup, {
+    defaultExpandedKeys: ['customConfiguration1']
+  }, ___EmotionJSX(Item, {
+    key: "customConfiguration",
+    label: "connection.configuration1",
+    regionProps: {
+      pt: 'sm'
+    },
+    containerProps: {
+      mb: 0
+    },
+    textValue: "connection.configuration1"
+  }, ___EmotionJSX("form", {
+    "data-id": "connection-configuration-custom-form"
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Text, null, "other text1"), ___EmotionJSX(Text, null, "another text1")))))));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -253,4 +330,32 @@ test('items do not automatically expand if wrapped in an open OverlayPanel', fun
   var buttons = screen.getAllByRole('button');
   var selectedItem = buttons[0];
   expect(selectedItem).not.toHaveAttribute('aria-expanded', 'true');
+});
+test('accordion is compatible with another component that uses an overlay', function () {
+  getComponentWithPopover();
+  var buttons = screen.getAllByRole('button');
+  var popoverButton = screen.getByTestId('popoverbutton');
+  userEvent.click(popoverButton);
+  var selectedItem = buttons[0];
+  expect(selectedItem).toHaveAttribute('aria-expanded', 'true');
+  userEvent.click(selectedItem);
+  expect(selectedItem).toHaveAttribute('aria-expanded', 'false');
+  userEvent.click(selectedItem);
+  expect(selectedItem).toHaveAttribute('aria-expanded', 'true');
+});
+test('accordion works if there are multiple, controlled on the same implementation', function () {
+  getComponentWithMultipleAccordion();
+  var buttons = screen.getAllByRole('button');
+  var selectedItem = buttons[0];
+  var secondSelectedItem = buttons[1];
+  expect(selectedItem).toHaveAttribute('aria-expanded', 'true');
+  userEvent.click(selectedItem);
+  expect(selectedItem).toHaveAttribute('aria-expanded', 'false');
+  userEvent.click(selectedItem);
+  expect(selectedItem).toHaveAttribute('aria-expanded', 'true');
+  expect(secondSelectedItem).toHaveAttribute('aria-expanded', 'false');
+  userEvent.click(secondSelectedItem);
+  expect(secondSelectedItem).toHaveAttribute('aria-expanded', 'true');
+  userEvent.click(secondSelectedItem);
+  expect(secondSelectedItem).toHaveAttribute('aria-expanded', 'false');
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.40.1-alpha.3",
+  "version": "1.40.1",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",