@pingux/astro 2.5.4 → 2.5.5-alpha.0

package/lib/cjs/components/Modal/Modal.js

@@ -20,6 +20,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
+var _overlays = require("@react-aria/overlays");
 var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../../hooks");
@@ -71,21 +72,22 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     shouldCloseOnInteractOutside: shouldCloseOnInteractOutside,
     children: children
   }, propsContentProps);
+  var modalState = {
+    isOpen: isOpen,
+    close: onClose
+  };
   var modalRef = (0, _react.useRef)();
   /* istanbul ignore next */
   (0, _react.useImperativeHandle)(ref, function () {
     return modalRef.current;
   });
   // Handle interacting outside the dialog and pressing
-  // the Escape key to close the modal.
-  var _useOverlay = (0, _reactAria.useOverlay)(contentProps, modalRef),
-    overlayProps = _useOverlay.overlayProps;
-
-  // Prevent scrolling while the modal is open, and hide content
+  // the Escape key to close the modal,
+  // prevent scrolling while the modal is open, and hide content
   // outside the modal from screen readers.
-  (0, _reactAria.usePreventScroll)();
-  var _useModal = (0, _reactAria.useModal)(),
-    modalProps = _useModal.modalProps;
+  var _useModalOverlay = (0, _overlays.useModalOverlay)(contentProps, modalState, modalRef),
+    modalProps = _useModalOverlay.modalProps,
+    underlayProps = _useModalOverlay.underlayProps;
 
   // Get props for the dialog and its title
   var _useDialog = (0, _reactAria.useDialog)(contentProps, modalRef),
@@ -95,14 +97,14 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     classNames = _useStatusClasses.classNames;
   return (0, _react2.jsx)(_reactAria.OverlayContainer, null, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     variant: "modal.container"
-  }, others, containerProps), (0, _react2.jsx)(_reactAria.FocusScope, {
+  }, (0, _reactAria.mergeProps)(containerProps, underlayProps, others)), (0, _react2.jsx)(_reactAria.FocusScope, {
     contain: true,
     restoreFocus: true,
     autoFocus: hasAutoFocus
   }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     variant: "modal.content",
     className: classNames
-  }, propsContentProps, overlayProps, dialogProps, modalProps, {
+  }, propsContentProps, dialogProps, modalProps, {
     ref: modalRef,
     "aria-modal": true
   }), hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : (0, _react2.jsx)(_IconButton["default"], {

package/lib/cjs/components/Modal/tests/Modal.integration.test.js

@@ -59,7 +59,7 @@ test('close button should close the modal', function () {
   });
 
   // Target the close button
-  _userEvent["default"].click(_testWrapper.screen.queryAllByRole('button')[1]);
+  _userEvent["default"].click(_testWrapper.screen.queryAllByRole('button')[0]);
   expect(_testWrapper.screen.queryByRole('dialog')).not.toBeInTheDocument();
 });
 test('keyboard interactions on the close button should close the modal', function () {
@@ -68,13 +68,23 @@ test('keyboard interactions on the close button should close the modal', functio
   });
 
   // Target the close button
-  _testWrapper.fireEvent.keyDown(_testWrapper.screen.queryAllByRole('button')[1], {
+  _testWrapper.fireEvent.keyDown(_testWrapper.screen.queryAllByRole('button')[0], {
     key: 'Enter',
     code: 13
   });
-  _testWrapper.fireEvent.keyUp(_testWrapper.screen.queryAllByRole('button')[1], {
+  _testWrapper.fireEvent.keyUp(_testWrapper.screen.queryAllByRole('button')[0], {
     key: 'Enter',
     code: 13
   });
   expect(_testWrapper.screen.queryByRole('dialog')).not.toBeInTheDocument();
+});
+test('assign aria-hidden to elements outside the modal when the modal is opened', function () {
+  getComposedComponent();
+  var button = _testWrapper.screen.queryByRole('button');
+  var buttonParent = button.closest('div');
+  expect(buttonParent).not.toHaveAttribute('aria-hidden');
+
+  // Open the modal
+  _userEvent["default"].click(_testWrapper.screen.queryByRole('button'));
+  expect(buttonParent).toHaveAttribute('aria-hidden');
 });

package/lib/components/Modal/Modal.js

@@ -13,7 +13,8 @@ var _excluded = ["className", "closeButton", "hasAutoFocus", "hasCloseButton", "
 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
-import { FocusScope, OverlayContainer, useDialog, useModal, useOverlay, usePreventScroll } from 'react-aria';
+import { FocusScope, mergeProps, OverlayContainer, useDialog } from 'react-aria';
+import { useModalOverlay } from '@react-aria/overlays';
 import CloseIcon from 'mdi-react/CloseIcon';
 import PropTypes from 'prop-types';
 import { useStatusClasses } from '../../hooks';
@@ -60,21 +61,22 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
     shouldCloseOnInteractOutside: shouldCloseOnInteractOutside,
     children: children
   }, propsContentProps);
+  var modalState = {
+    isOpen: isOpen,
+    close: onClose
+  };
   var modalRef = useRef();
   /* istanbul ignore next */
   useImperativeHandle(ref, function () {
     return modalRef.current;
   });
   // Handle interacting outside the dialog and pressing
-  // the Escape key to close the modal.
-  var _useOverlay = useOverlay(contentProps, modalRef),
-    overlayProps = _useOverlay.overlayProps;
-
-  // Prevent scrolling while the modal is open, and hide content
+  // the Escape key to close the modal,
+  // prevent scrolling while the modal is open, and hide content
   // outside the modal from screen readers.
-  usePreventScroll();
-  var _useModal = useModal(),
-    modalProps = _useModal.modalProps;
+  var _useModalOverlay = useModalOverlay(contentProps, modalState, modalRef),
+    modalProps = _useModalOverlay.modalProps,
+    underlayProps = _useModalOverlay.underlayProps;
 
   // Get props for the dialog and its title
   var _useDialog = useDialog(contentProps, modalRef),
@@ -84,14 +86,14 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
     classNames = _useStatusClasses.classNames;
   return ___EmotionJSX(OverlayContainer, null, ___EmotionJSX(Box, _extends({
     variant: "modal.container"
-  }, others, containerProps), ___EmotionJSX(FocusScope, {
+  }, mergeProps(containerProps, underlayProps, others)), ___EmotionJSX(FocusScope, {
     contain: true,
     restoreFocus: true,
     autoFocus: hasAutoFocus
   }, ___EmotionJSX(Box, _extends({
     variant: "modal.content",
     className: classNames
-  }, propsContentProps, overlayProps, dialogProps, modalProps, {
+  }, propsContentProps, dialogProps, modalProps, {
     ref: modalRef,
     "aria-modal": true
   }), hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : ___EmotionJSX(IconButton, {

package/lib/components/Modal/tests/Modal.integration.test.js

@@ -57,7 +57,7 @@ test('close button should close the modal', function () {
   });
 
   // Target the close button
-  userEvent.click(screen.queryAllByRole('button')[1]);
+  userEvent.click(screen.queryAllByRole('button')[0]);
   expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
 });
 test('keyboard interactions on the close button should close the modal', function () {
@@ -66,13 +66,23 @@ test('keyboard interactions on the close button should close the modal', functio
   });
 
   // Target the close button
-  fireEvent.keyDown(screen.queryAllByRole('button')[1], {
+  fireEvent.keyDown(screen.queryAllByRole('button')[0], {
     key: 'Enter',
     code: 13
   });
-  fireEvent.keyUp(screen.queryAllByRole('button')[1], {
+  fireEvent.keyUp(screen.queryAllByRole('button')[0], {
     key: 'Enter',
     code: 13
   });
   expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+});
+test('assign aria-hidden to elements outside the modal when the modal is opened', function () {
+  getComposedComponent();
+  var button = screen.queryByRole('button');
+  var buttonParent = button.closest('div');
+  expect(buttonParent).not.toHaveAttribute('aria-hidden');
+
+  // Open the modal
+  userEvent.click(screen.queryByRole('button'));
+  expect(buttonParent).toHaveAttribute('aria-hidden');
 });

package/package.json

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