@pingux/astro 2.136.0-alpha.0 → 2.136.0

package/lib/cjs/components/Modal/Modal.stories.d.ts

@@ -4,3 +4,4 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
 export default _default;
 export declare const Default: StoryFn<ModalProps>;
 export declare const LargeContent: StoryFn<ModalProps>;
+export declare const WithInputField: StoryFn<ModalProps>;

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.LargeContent = exports.Default = void 0;
+exports["default"] = exports.WithInputField = exports.LargeContent = exports.Default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _storybookAddonDesigns = require("storybook-addon-designs");
@@ -167,4 +167,57 @@ var LargeContent = function LargeContent(args) {
     }, "Cancel"))))
   );
 };
-exports.LargeContent = LargeContent;
+exports.LargeContent = LargeContent;
+var WithInputField = function WithInputField() {
+  var state = (0, _hooks.useModalState)();
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
+    onPress: state.open,
+    "aria-label": "Open modal"
+  }, "Open Modal"), state.isOpen && (0, _react2.jsx)(_index.Modal, {
+    isOpen: state.isOpen,
+    onClose: state.close
+  }, (0, _react2.jsx)(_index.Box, {
+    gap: "lg"
+  }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet consectetur"), (0, _react2.jsx)(_index.SelectField, {
+    label: "Select an option"
+  }, (0, _react2.jsx)(_index.Item, null, "Red"), (0, _react2.jsx)(_index.Item, null, "Green"), (0, _react2.jsx)(_index.Item, null, "Blue")), (0, _react2.jsx)(_index.RadioGroupField, {
+    label: "Pick an option",
+    name: "options",
+    defaultValue: "option1"
+  }, (0, _react2.jsx)(_index.RadioField, {
+    label: "Option 1",
+    value: "option1",
+    "data-testid": "option1"
+  }), (0, _react2.jsx)(_index.RadioField, {
+    label: "Option 2",
+    value: "option2",
+    "data-testid": "option2"
+  }), (0, _react2.jsx)(_index.RadioField, {
+    label: "Option 3",
+    value: "option3",
+    "data-testid": "option3"
+  })), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    variant: "modal.buttonsContainer"
+  }, (0, _react2.jsx)(_index.Button, {
+    variant: "primary",
+    onPress: state.close,
+    mr: "md",
+    "aria-label": "Continue"
+  }, "Continue"), (0, _react2.jsx)(_index.Button, {
+    variant: "link",
+    onPress: state.close,
+    "aria-label": "Cancel"
+  }, "Cancel")))));
+};
+exports.WithInputField = WithInputField;
+WithInputField.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'aria-hidden-focus',
+        enabled: false
+      }]
+    }
+  }
+};

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

@@ -12,6 +12,22 @@ 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 getModalWithRadioFieldGroup = function getModalWithRadioFieldGroup() {
+  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.RadioGroupField, {
+    label: "Options",
+    name: "options",
+    defaultValue: "option1"
+  }, (0, _react2.jsx)(_index.RadioField, {
+    label: "Option 1",
+    value: "option1",
+    "data-testid": "option1"
+  }), (0, _react2.jsx)(_index.RadioField, {
+    label: "Option 2",
+    value: "option2",
+    "data-testid": "option2"
+  })))));
+};
 
 // **********
 // Unit tests
@@ -220,4 +236,20 @@ test('should render sizes correctly with passed size prop', function () {
   });
   var fModal = _testWrapper.screen.getByRole('dialog');
   expect(fModal).toHaveClass('is-full');
+});
+test('should not show focus ring (is-focused class) on radio buttons when clicked with mouse', function () {
+  getModalWithRadioFieldGroup();
+  var radioA = _testWrapper.screen.getByLabelText('Option 1');
+  var radioB = _testWrapper.screen.getByLabelText('Option 2');
+  var labelA = _testWrapper.screen.getByText('Option 1');
+  var labelB = _testWrapper.screen.getByText('Option 2');
+  _userEvent["default"].click(radioA);
+  expect(radioA).toBeChecked();
+  expect(labelA).toHaveClass('is-checked');
+  expect(labelA).not.toHaveClass('is-focused');
+  expect(labelB).not.toHaveClass('is-focused');
+  _userEvent["default"].click(radioB);
+  expect(radioB).toBeChecked();
+  expect(labelA).not.toHaveClass('is-focused');
+  expect(labelB).not.toHaveClass('is-focused');
 });

package/lib/cjs/components/RadioField/RadioField.js

@@ -19,6 +19,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
+var _interactions = require("@react-aria/interactions");
 var _hooks = require("../../hooks");
 var _Box = _interopRequireDefault(require("../Box"));
 var _FieldHelperText = _interopRequireDefault(require("../FieldHelperText"));
@@ -73,11 +74,13 @@ var RadioField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     fieldControlInputProps = _useField.fieldControlInputProps,
     fieldControlWrapperProps = _useField.fieldControlWrapperProps,
     fieldLabelProps = _useField.fieldLabelProps;
+  var _usePress = (0, _interactions.usePress)({}),
+    pressProps = _usePress.pressProps;
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     variant: "forms.radio.outerContainer"
   }, fieldContainerProps), (0, _react2.jsx)(_Label["default"], (0, _extends2["default"])({
     variant: "forms.label.radio"
-  }, fieldLabelProps), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, fieldControlWrapperProps, {
+  }, fieldLabelProps, pressProps), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, fieldControlWrapperProps, {
     variant: "forms.radio.controlWrapper"
   }), (0, _react2.jsx)(_Radio["default"], (0, _extends2["default"])({
     ref: radioFieldRef

package/lib/cjs/styles/themes/next-gen/forms.d.ts

@@ -120,9 +120,25 @@ export declare const radio: {
         color: string;
         mr: string;
         'input ~ &.is-focused': {
+            boxShadow: string;
+            border: string;
+            borderColor: string;
+            boxSizing: string;
+            transform: string;
+            transformOrigin: string;
+            outline?: undefined;
+            outlineColor?: undefined;
+            outlineOffset?: undefined;
+        } | {
             outline: string;
             outlineColor: string;
             outlineOffset: string;
+            boxShadow?: undefined;
+            border?: undefined;
+            borderColor?: undefined;
+            boxSizing?: undefined;
+            transform?: undefined;
+            transformOrigin?: undefined;
         };
     };
 };
@@ -176,9 +192,25 @@ declare const _default: {
             color: string;
             mr: string;
             'input ~ &.is-focused': {
+                boxShadow: string;
+                border: string;
+                borderColor: string;
+                boxSizing: string;
+                transform: string;
+                transformOrigin: string;
+                outline?: undefined;
+                outlineColor?: undefined;
+                outlineOffset?: undefined;
+            } | {
                 outline: string;
                 outlineColor: string;
                 outlineOffset: string;
+                boxShadow?: undefined;
+                border?: undefined;
+                borderColor?: undefined;
+                boxSizing?: undefined;
+                transform?: undefined;
+                transformOrigin?: undefined;
             };
         };
     };

package/lib/cjs/styles/themes/next-gen/forms.js

@@ -14,6 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.select = exports.search = exports.radio = exports.numberField = exports["default"] = exports.comboBox = exports.checkbox = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _safariAgent = require("../../safariAgent.js");
 var _colors = _interopRequireDefault(require("./colors/colors"));
 var _tShirtSizes = _interopRequireDefault(require("./customProperties/tShirtSizes"));
 var _input = require("./variants/input");
@@ -83,10 +84,19 @@ var radio = {
   base: {
     color: 'text.secondary',
     mr: '8px',
-    'input ~ &.is-focused': {
+    'input ~ &.is-focused': /* istanbul ignore next */
+    _safariAgent.isSafari ? {
+      boxShadow: 'none',
+      border: '1px solid',
+      borderColor: 'focus',
+      boxSizing: 'border-box',
+      transform: 'scale(1.1)',
+      transformOrigin: 'center'
+    }
+    /* istanbul ignore next */ : {
       outline: '1px solid',
-      outlineColor: '#1a73e8',
-      outlineOffset: '-3px'
+      outlineColor: 'focus',
+      outlineOffset: '1px'
     }
   }
 };

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -1568,9 +1568,25 @@ declare const _default: {
                 color: string;
                 mr: string;
                 'input ~ &.is-focused': {
+                    boxShadow: string;
+                    border: string;
+                    borderColor: string;
+                    boxSizing: string;
+                    transform: string;
+                    transformOrigin: string;
+                    outline?: undefined;
+                    outlineColor?: undefined;
+                    outlineOffset?: undefined;
+                } | {
                     outline: string;
                     outlineColor: string;
                     outlineOffset: string;
+                    boxShadow?: undefined;
+                    border?: undefined;
+                    borderColor?: undefined;
+                    boxSizing?: undefined;
+                    transform?: undefined;
+                    transformOrigin?: undefined;
                 };
             };
         };

package/lib/components/Modal/Modal.stories.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { useModalState } from '../../hooks';
-import { Box, Button, Modal, OverlayProvider, Text } from '../../index';
+import { Box, Button, Item, Modal, OverlayProvider, RadioField, RadioGroupField, SelectField, Text } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import { modalSizes } from '../../utils/devUtils/constants/modalSizes';
 import ModalReadme from './Modal.mdx';
@@ -156,4 +156,56 @@ export var LargeContent = function LargeContent(args) {
       "aria-label": "Cancel"
     }, "Cancel"))))
   );
+};
+export var WithInputField = function WithInputField() {
+  var state = useModalState();
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
+    onPress: state.open,
+    "aria-label": "Open modal"
+  }, "Open Modal"), state.isOpen && ___EmotionJSX(Modal, {
+    isOpen: state.isOpen,
+    onClose: state.close
+  }, ___EmotionJSX(Box, {
+    gap: "lg"
+  }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet consectetur"), ___EmotionJSX(SelectField, {
+    label: "Select an option"
+  }, ___EmotionJSX(Item, null, "Red"), ___EmotionJSX(Item, null, "Green"), ___EmotionJSX(Item, null, "Blue")), ___EmotionJSX(RadioGroupField, {
+    label: "Pick an option",
+    name: "options",
+    defaultValue: "option1"
+  }, ___EmotionJSX(RadioField, {
+    label: "Option 1",
+    value: "option1",
+    "data-testid": "option1"
+  }), ___EmotionJSX(RadioField, {
+    label: "Option 2",
+    value: "option2",
+    "data-testid": "option2"
+  }), ___EmotionJSX(RadioField, {
+    label: "Option 3",
+    value: "option3",
+    "data-testid": "option3"
+  })), ___EmotionJSX(Box, {
+    isRow: true,
+    variant: "modal.buttonsContainer"
+  }, ___EmotionJSX(Button, {
+    variant: "primary",
+    onPress: state.close,
+    mr: "md",
+    "aria-label": "Continue"
+  }, "Continue"), ___EmotionJSX(Button, {
+    variant: "link",
+    onPress: state.close,
+    "aria-label": "Cancel"
+  }, "Cancel")))));
+};
+WithInputField.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'aria-hidden-focus',
+        enabled: false
+      }]
+    }
+  }
 };

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
-import { Modal, OverlayProvider } from '../../../index';
+import { Modal, OverlayProvider, RadioField, RadioGroupField } from '../../../index';
 import { render, screen } from '../../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../../utils/testUtils/universalComponentTest';
 
@@ -10,6 +10,22 @@ var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Modal, props)));
 };
+var getModalWithRadioFieldGroup = function getModalWithRadioFieldGroup() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Modal, props, ___EmotionJSX(RadioGroupField, {
+    label: "Options",
+    name: "options",
+    defaultValue: "option1"
+  }, ___EmotionJSX(RadioField, {
+    label: "Option 1",
+    value: "option1",
+    "data-testid": "option1"
+  }), ___EmotionJSX(RadioField, {
+    label: "Option 2",
+    value: "option2",
+    "data-testid": "option2"
+  })))));
+};
 
 // **********
 // Unit tests
@@ -218,4 +234,20 @@ test('should render sizes correctly with passed size prop', function () {
   });
   var fModal = screen.getByRole('dialog');
   expect(fModal).toHaveClass('is-full');
+});
+test('should not show focus ring (is-focused class) on radio buttons when clicked with mouse', function () {
+  getModalWithRadioFieldGroup();
+  var radioA = screen.getByLabelText('Option 1');
+  var radioB = screen.getByLabelText('Option 2');
+  var labelA = screen.getByText('Option 1');
+  var labelB = screen.getByText('Option 2');
+  userEvent.click(radioA);
+  expect(radioA).toBeChecked();
+  expect(labelA).toHaveClass('is-checked');
+  expect(labelA).not.toHaveClass('is-focused');
+  expect(labelB).not.toHaveClass('is-focused');
+  userEvent.click(radioB);
+  expect(radioB).toBeChecked();
+  expect(labelA).not.toHaveClass('is-focused');
+  expect(labelB).not.toHaveClass('is-focused');
 });

package/lib/components/RadioField/RadioField.js

@@ -12,6 +12,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 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, { createContext, forwardRef, useContext } from 'react';
 import { useRadio } from 'react-aria';
+import { usePress } from '@react-aria/interactions';
 import { useField, useLocalOrForwardRef, usePropWarning } from '../../hooks';
 import Box from '../Box';
 import FieldHelperText from '../FieldHelperText';
@@ -61,11 +62,13 @@ var RadioField = /*#__PURE__*/forwardRef(function (props, ref) {
     fieldControlInputProps = _useField.fieldControlInputProps,
     fieldControlWrapperProps = _useField.fieldControlWrapperProps,
     fieldLabelProps = _useField.fieldLabelProps;
+  var _usePress = usePress({}),
+    pressProps = _usePress.pressProps;
   return ___EmotionJSX(Box, _extends({
     variant: "forms.radio.outerContainer"
   }, fieldContainerProps), ___EmotionJSX(Label, _extends({
     variant: "forms.label.radio"
-  }, fieldLabelProps), ___EmotionJSX(Box, _extends({}, fieldControlWrapperProps, {
+  }, fieldLabelProps, pressProps), ___EmotionJSX(Box, _extends({}, fieldControlWrapperProps, {
     variant: "forms.radio.controlWrapper"
   }), ___EmotionJSX(Radio, _extends({
     ref: radioFieldRef

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

@@ -9,6 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 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 { isSafari } from '../../safariAgent.js';
 import colors from './colors/colors';
 import tShirtSizes from './customProperties/tShirtSizes';
 import { fieldControlWrapper, input } from './variants/input';
@@ -71,10 +72,19 @@ export var radio = {
   base: {
     color: 'text.secondary',
     mr: '8px',
-    'input ~ &.is-focused': {
+    'input ~ &.is-focused': /* istanbul ignore next */
+    isSafari ? {
+      boxShadow: 'none',
+      border: '1px solid',
+      borderColor: 'focus',
+      boxSizing: 'border-box',
+      transform: 'scale(1.1)',
+      transformOrigin: 'center'
+    }
+    /* istanbul ignore next */ : {
       outline: '1px solid',
-      outlineColor: '#1a73e8',
-      outlineOffset: '-3px'
+      outlineColor: 'focus',
+      outlineOffset: '1px'
     }
   }
 };

package/package.json

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