@pingux/astro 2.16.0-alpha.0 → 2.16.0-alpha.1

package/lib/cjs/components/HelpHint/HelpHint.js

@@ -11,6 +11,7 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
@@ -21,6 +22,7 @@ var _interactions = require("@react-aria/interactions");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../..");
 var _hooks = require("../../hooks");
+var _safariAgent = require("../../styles/safariAgent");
 var _react2 = require("@emotion/react");
 var _excluded = ["align", "arrowCrossOffset", "children", "className", "closeDelay", "direction", "hasNoArrow", "iconButtonProps", "isDarkMode", "isNotFlippable", "offset", "popoverProps"];
 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); }
@@ -126,6 +128,19 @@ var HelpHint = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       isDarkMode: isDarkMode
     }),
     classNames = _useStatusClasses.classNames;
+  var addIsSafariCompatiblePropToLinkChildren = function addIsSafariCompatiblePropToLinkChildren(containerChildren) {
+    if (containerChildren) {
+      var _context2;
+      return (0, _map["default"])(_context2 = _react["default"].Children).call(_context2, containerChildren, function (child) {
+        if (! /*#__PURE__*/_react["default"].isValidElement(child)) return child;
+        return /*#__PURE__*/_react["default"].cloneElement(child, {
+          children: addIsSafariCompatiblePropToLinkChildren(child.props.children),
+          isSafariCompatible: child.type.displayName === 'Link'
+        });
+      });
+    }
+    return undefined;
+  };
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, others, {
     ref: ref
   }), (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({
@@ -144,18 +159,18 @@ var HelpHint = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     className: classNames,
     direction: direction,
     hasNoArrow: hasNoArrow,
-    isDismissable: !isOpen,
+    isDismissable: isFocusWithinOverlay ? !isOpen : true,
     isNonModal: true,
     isOpen: isOpen,
     onClose: close,
     placement: placement,
     ref: overlayRef
-  }, (0, _reactAria.mergeProps)(overlayProps, positionProps, popoverProps, overlayHoverProps), focusWithinProps), (0, _react2.jsx)(_reactAria.FocusScope, {
+  }, (0, _reactAria.mergeProps)(overlayProps, positionProps, popoverProps, overlayHoverProps, focusWithinProps)), (0, _react2.jsx)(_reactAria.FocusScope, {
     restoreFocus: true,
     autoFocus: isFocusVisible
   }, (0, _react2.jsx)(_.Box, {
     variant: "helpHint.popoverContainer"
-  }, children))));
+  }, _safariAgent.isSafari ? addIsSafariCompatiblePropToLinkChildren(children) : children))));
 });
 HelpHint.propTypes = {
   /** Props object that is spread directly into the popover element. */

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

@@ -11,7 +11,6 @@ var _react = _interopRequireDefault(require("react"));
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
-var _safariAgent = require("../../styles/safariAgent");
 var _figmaLinks = require("../../utils/designUtils/figmaLinks.js");
 var _HelpHint = _interopRequireDefault(require("./HelpHint.mdx"));
 var _react2 = require("@emotion/react");
@@ -69,15 +68,10 @@ var ContentWithLink = function ContentWithLink() {
     p: 70
   }, (0, _react2.jsx)(_index.HelpHint, null, (0, _react2.jsx)(_index.Text, {
     variant: "popover"
-  }, "Text of the popover right here... "), _safariAgent.isSafari ? (0, _react2.jsx)(_index.Box, {
-    href: "https://uilibrary.ping-eng.com/",
-    as: "a",
-    pl: "xs"
-  }, (0, _react2.jsx)(_index.Link, {
-    variant: "popover"
-  }, "Learn More")) : (0, _react2.jsx)(_index.Link, {
+  }, "Text of the popover right here... "), (0, _react2.jsx)(_index.Link, {
     variant: "popover",
-    href: "https://uilibrary.ping-eng.com/"
+    href: "https://uilibrary.ping-eng.com/",
+    target: "_blank"
   }, "Learn More")));
 };
 exports.ContentWithLink = ContentWithLink;

package/lib/cjs/components/Link/Link.js

@@ -18,13 +18,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _themeUi = require("theme-ui");
 var _hooks = require("../../hooks");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "isDisabled", "onPress"];
+var _excluded = ["className", "isDisabled", "onPress", "isSafariCompatible"];
 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; }
 var Link = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var className = props.className,
     isDisabled = props.isDisabled,
     onPress = props.onPress,
+    isSafariCompatible = props.isSafariCompatible,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var linkRef = (0, _react.useRef)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
@@ -52,6 +53,15 @@ var Link = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       isPressed: isPressed
     }),
     classNames = _useStatusClasses.classNames;
+
+  // This relates to UIP-6502. Due to browser inconsistencies
+  // react aria prevent default on pointer down
+  if (isSafariCompatible) {
+    delete linkProps.onPointerUp;
+    delete linkProps.onPointerDown;
+    delete pressProps.onPointerUp;
+    delete pressProps.onPointerDown;
+  }
   return (0, _react2.jsx)(_themeUi.Link, (0, _extends2["default"])({
     className: classNames,
     ref: linkRef,
@@ -70,7 +80,9 @@ Link.propTypes = {
   /**  Specifies the window where the linked page is loaded */
   target: _propTypes["default"].string,
   /** The styling variation of the link. */
-  variant: _propTypes["default"].string
+  variant: _propTypes["default"].string,
+  /** Whether the link is clickable inside a popover in safari */
+  isSafariCompatible: _propTypes["default"].bool
 };
 Link.defaultProps = {
   isDisabled: false,

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

@@ -36,6 +36,11 @@ var _default = {
       }
     },
     isDisabled: {},
+    isSafariCompatible: {
+      table: {
+        disable: true
+      }
+    },
     as: {
       control: {
         type: 'none',

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

@@ -57,4 +57,20 @@ test('link shows disabled status', function () {
   });
   var link = _testWrapper.screen.getByTestId(testId);
   expect(link).toHaveClass('is-disabled');
+});
+test('link removes onPointer events when isSafariCompatible', function () {
+  var onPointerEvents = jest.fn();
+  getComponent({
+    href: 'blah',
+    isSafariCompatible: true,
+    onPointerDown: function onPointerDown() {
+      return onPointerEvents;
+    },
+    onPointerUp: function onPointerUp() {
+      return onPointerEvents;
+    }
+  });
+  var link = _testWrapper.screen.getByTestId(testId);
+  _userEvent["default"].click(link);
+  expect(onPointerEvents).not.toHaveBeenCalled();
 });

package/lib/components/HelpHint/HelpHint.js

@@ -4,6 +4,7 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["align", "arrowCrossOffset", "children", "className", "closeDelay", "direction", "hasNoArrow", "iconButtonProps", "isDarkMode", "isNotFlippable", "offset", "popoverProps"];
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { FocusScope, mergeProps, useFocusRing, useFocusWithin, useOverlayPosition, useOverlayTrigger } from 'react-aria';
 import { useOverlayTriggerState } from 'react-stately';
@@ -11,6 +12,7 @@ import { useHover } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
 import { Box, Icon, IconButton, PopoverContainer } from '../..';
 import { useStatusClasses } from '../../hooks';
+import { isSafari } from '../../styles/safariAgent';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var HelpIcon = function HelpIcon() {
   return ___EmotionJSX("svg", {
@@ -113,6 +115,19 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
       isDarkMode: isDarkMode
     }),
     classNames = _useStatusClasses.classNames;
+  var addIsSafariCompatiblePropToLinkChildren = function addIsSafariCompatiblePropToLinkChildren(containerChildren) {
+    if (containerChildren) {
+      var _context2;
+      return _mapInstanceProperty(_context2 = React.Children).call(_context2, containerChildren, function (child) {
+        if (! /*#__PURE__*/React.isValidElement(child)) return child;
+        return /*#__PURE__*/React.cloneElement(child, {
+          children: addIsSafariCompatiblePropToLinkChildren(child.props.children),
+          isSafariCompatible: child.type.displayName === 'Link'
+        });
+      });
+    }
+    return undefined;
+  };
   return ___EmotionJSX(Box, _extends({}, others, {
     ref: ref
   }), ___EmotionJSX(IconButton, _extends({
@@ -131,18 +146,18 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
     className: classNames,
     direction: direction,
     hasNoArrow: hasNoArrow,
-    isDismissable: !isOpen,
+    isDismissable: isFocusWithinOverlay ? !isOpen : true,
     isNonModal: true,
     isOpen: isOpen,
     onClose: close,
     placement: placement,
     ref: overlayRef
-  }, mergeProps(overlayProps, positionProps, popoverProps, overlayHoverProps), focusWithinProps), ___EmotionJSX(FocusScope, {
+  }, mergeProps(overlayProps, positionProps, popoverProps, overlayHoverProps, focusWithinProps)), ___EmotionJSX(FocusScope, {
     restoreFocus: true,
     autoFocus: isFocusVisible
   }, ___EmotionJSX(Box, {
     variant: "helpHint.popoverContainer"
-  }, children))));
+  }, isSafari ? addIsSafariCompatiblePropToLinkChildren(children) : children))));
 });
 HelpHint.propTypes = {
   /** Props object that is spread directly into the popover element. */

package/lib/components/HelpHint/HelpHint.stories.js

@@ -3,7 +3,6 @@ import React from 'react';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, HelpHint, Link, Text } from '../../index';
-import { isSafari } from '../../styles/safariAgent';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.js';
 import HelpHintReadme from './HelpHint.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -58,15 +57,10 @@ export var ContentWithLink = function ContentWithLink() {
     p: 70
   }, ___EmotionJSX(HelpHint, null, ___EmotionJSX(Text, {
     variant: "popover"
-  }, "Text of the popover right here... "), isSafari ? ___EmotionJSX(Box, {
-    href: "https://uilibrary.ping-eng.com/",
-    as: "a",
-    pl: "xs"
-  }, ___EmotionJSX(Link, {
-    variant: "popover"
-  }, "Learn More")) : ___EmotionJSX(Link, {
+  }, "Text of the popover right here... "), ___EmotionJSX(Link, {
     variant: "popover",
-    href: "https://uilibrary.ping-eng.com/"
+    href: "https://uilibrary.ping-eng.com/",
+    target: "_blank"
   }, "Learn More")));
 };
 ContentWithLink.parameters = {

package/lib/components/Link/Link.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "isDisabled", "onPress"];
+var _excluded = ["className", "isDisabled", "onPress", "isSafariCompatible"];
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { mergeProps, useFocusRing, useLink } from 'react-aria';
 import { useHover, usePress } from '@react-aria/interactions';
@@ -12,6 +12,7 @@ var Link = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
     isDisabled = props.isDisabled,
     onPress = props.onPress,
+    isSafariCompatible = props.isSafariCompatible,
     others = _objectWithoutProperties(props, _excluded);
   var linkRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
@@ -39,6 +40,15 @@ var Link = /*#__PURE__*/forwardRef(function (props, ref) {
       isPressed: isPressed
     }),
     classNames = _useStatusClasses.classNames;
+
+  // This relates to UIP-6502. Due to browser inconsistencies
+  // react aria prevent default on pointer down
+  if (isSafariCompatible) {
+    delete linkProps.onPointerUp;
+    delete linkProps.onPointerDown;
+    delete pressProps.onPointerUp;
+    delete pressProps.onPointerDown;
+  }
   return ___EmotionJSX(ThemeUILink, _extends({
     className: classNames,
     ref: linkRef,
@@ -57,7 +67,9 @@ Link.propTypes = {
   /**  Specifies the window where the linked page is loaded */
   target: PropTypes.string,
   /** The styling variation of the link. */
-  variant: PropTypes.string
+  variant: PropTypes.string,
+  /** Whether the link is clickable inside a popover in safari */
+  isSafariCompatible: PropTypes.bool
 };
 Link.defaultProps = {
   isDisabled: false,

package/lib/components/Link/Link.stories.js

@@ -28,6 +28,11 @@ export default {
       }
     },
     isDisabled: {},
+    isSafariCompatible: {
+      table: {
+        disable: true
+      }
+    },
     as: {
       control: {
         type: 'none',

package/lib/components/Link/Link.test.js

@@ -54,4 +54,20 @@ test('link shows disabled status', function () {
   });
   var link = screen.getByTestId(testId);
   expect(link).toHaveClass('is-disabled');
+});
+test('link removes onPointer events when isSafariCompatible', function () {
+  var onPointerEvents = jest.fn();
+  getComponent({
+    href: 'blah',
+    isSafariCompatible: true,
+    onPointerDown: function onPointerDown() {
+      return onPointerEvents;
+    },
+    onPointerUp: function onPointerUp() {
+      return onPointerEvents;
+    }
+  });
+  var link = screen.getByTestId(testId);
+  userEvent.click(link);
+  expect(onPointerEvents).not.toHaveBeenCalled();
 });

package/package.json

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