@pingux/astro 1.33.0 → 1.33.1-alpha.0

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

@@ -126,7 +126,12 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var _useDialog = (0, _dialog.useDialog)(contentProps, modalRef),
       dialogProps = _useDialog.dialogProps,
-      titleProps = _useDialog.titleProps;
+      titleProps = _useDialog.titleProps; // Prevents extra dialog focus from being called.
+
+
+  dialogProps.onMouseDown = function (e) {
+    return e.preventDefault();
+  };
 
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
     isDarkMode: others.variant === 'modal.dark'

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

@@ -18,6 +18,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)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Modal, props)));
+};
+
+var getComponentWithCheckbox = function getComponentWithCheckbox() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Modal, props, (0, _react2.jsx)(_index.CheckboxField, {
+    "aria-label": "checkbox"
+  }))));
 }; // **********
 // Unit tests
 // **********
@@ -219,4 +226,21 @@ test('should auto focus the first tabbable element if "hasAutoFocus" is true', f
   var button = _testWrapper.screen.queryByRole('button');
 
   expect(button).toHaveFocus();
+});
+test('checkbox should not have focus outline on click', function () {
+  getComponentWithCheckbox({
+    isOpen: true
+  });
+
+  var checkbox = _testWrapper.screen.getByRole('checkbox');
+
+  _userEvent["default"].click(checkbox);
+
+  expect(checkbox).toBeChecked();
+  expect(checkbox).not.toHaveClass('is-focused');
+
+  _userEvent["default"].click(checkbox);
+
+  expect(checkbox).not.toBeChecked();
+  expect(checkbox).not.toHaveClass('is-focused');
 });

package/lib/components/Modal/Modal.js

@@ -86,7 +86,12 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var _useDialog = useDialog(contentProps, modalRef),
       dialogProps = _useDialog.dialogProps,
-      titleProps = _useDialog.titleProps;
+      titleProps = _useDialog.titleProps; // Prevents extra dialog focus from being called.
+
+
+  dialogProps.onMouseDown = function (e) {
+    return e.preventDefault();
+  };
 
   var _useStatusClasses = useStatusClasses(className, {
     isDarkMode: others.variant === 'modal.dark'

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

@@ -2,13 +2,20 @@ import React from 'react';
 import userEvent from '@testing-library/user-event';
 import axeTest from '../../../utils/testUtils/testAxe';
 import { render, screen, queryByAttribute } from '../../../utils/testUtils/testWrapper';
-import { OverlayProvider, Modal } from '../../../index'; // For testing the modal alone
+import { CheckboxField, OverlayProvider, Modal } from '../../../index'; // For testing the modal alone
 
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Modal, props)));
+};
+
+var getComponentWithCheckbox = function getComponentWithCheckbox() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Modal, props, ___EmotionJSX(CheckboxField, {
+    "aria-label": "checkbox"
+  }))));
 }; // **********
 // Unit tests
 // **********
@@ -185,4 +192,16 @@ test('should auto focus the first tabbable element if "hasAutoFocus" is true', f
   });
   var button = screen.queryByRole('button');
   expect(button).toHaveFocus();
+});
+test('checkbox should not have focus outline on click', function () {
+  getComponentWithCheckbox({
+    isOpen: true
+  });
+  var checkbox = screen.getByRole('checkbox');
+  userEvent.click(checkbox);
+  expect(checkbox).toBeChecked();
+  expect(checkbox).not.toHaveClass('is-focused');
+  userEvent.click(checkbox);
+  expect(checkbox).not.toBeChecked();
+  expect(checkbox).not.toHaveClass('is-focused');
 });

package/package.json

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