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

package/lib/cjs/components/Calendar/Calendar.js

@@ -64,51 +64,62 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     prevButtonProps = _useCalendar.prevButtonProps,
     nextButtonProps = _useCalendar.nextButtonProps,
     title = _useCalendar.title;
-
-  /**
-   * Grabs the currently displayed date for yearly navigation.
-   */
-
-  var _useState = (0, _react.useState)(),
+  var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    currentDate = _useState2[0],
-    setCurrentDate = _useState2[1];
-  var todayDate = (0, _react.useMemo)(function () {
-    setCurrentDate(state.visibleRange.start);
-  }, [state.visibleRange.start]);
+    yearChangeDirection = _useState2[0],
+    setYearChangeDirection = _useState2[1];
+  var previousYearRef = (0, _react.useRef)(null);
+  var nextYearRef = (0, _react.useRef)(null);
   var nav = {
     NEXT: 'next',
     PREVIOUS: 'previous'
   };
 
-  /**
-   * Function handles the navigation to previous and next year
-   * based on the currently displayed date.
-   */
+  // after updating visible year, reapplies focus to corresponding year buttons
+  (0, _react.useEffect)(function () {
+    if (yearChangeDirection === nav.NEXT) {
+      nextYearRef.current.focus();
+    }
+    if (yearChangeDirection === nav.PREVIOUS) {
+      previousYearRef.current.focus();
+    }
+    setYearChangeDirection(null);
+  }, [nav.NEXT, nav.PREVIOUS, yearChangeDirection]);
 
-  var handleYearSelection = (0, _react.useCallback)(function (navigation) {
-    var tempValue;
+  // update visible year
+  var handleYearSelection = function handleYearSelection(navigation) {
     if (navigation === nav.PREVIOUS) {
-      tempValue = currentDate.subtract({
+      var previousYear = state.focusedDate.subtract({
         years: 1
       });
-    } else if (navigation === nav.NEXT) {
-      tempValue = currentDate.add({
+      state.setFocusedDate(previousYear);
+    }
+    if (navigation === nav.NEXT) {
+      var nextYear = state.focusedDate.add({
         years: 1
       });
+      state.setFocusedDate(nextYear);
     }
-    state.setFocusedDate(tempValue);
-    setCurrentDate(tempValue);
-  }, [currentDate, state, todayDate]);
+    setYearChangeDirection(navigation);
+  };
+  var renderTitle = (0, _react2.jsx)(_index.Text, {
+    variant: "itemTitle",
+    role: "heading",
+    "aria-level": "3",
+    fontWeight: 3
+  }, title);
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, calendarProps, {
     ref: calenderRef,
     variant: "calendar.calendarContainer"
-  }), (0, _react2.jsx)(_index.Box, {
+  }), (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, {
+    "aria-live": "assertive"
+  }, (0, _react2.jsx)(_index.Text, null, title)), (0, _react2.jsx)(_index.Box, {
     className: "header",
     isRow: true,
     variant: "calendar.calendarHeader",
     verticalAlign: "middle"
   }, (0, _react2.jsx)(_index.IconButton, {
+    ref: previousYearRef,
     onPress: function onPress() {
       return handleYearSelection(nav.PREVIOUS);
     },
@@ -129,12 +140,7 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     title: {
       name: 'Chevron Left Icon'
     }
-  })), (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, null, (0, _react2.jsx)(_index.Text, null, calendarProps['aria-label'])), (0, _react2.jsx)(_index.Text, {
-    variant: "itemTitle",
-    role: "heading",
-    "aria-level": "3",
-    fontWeight: 3
-  }, title), (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({}, nextButtonProps, {
+  })), renderTitle, (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({}, nextButtonProps, {
     "aria-label": "Next month navigation"
   }), (0, _react2.jsx)(_index.Icon, {
     icon: _ChevronRightIcon["default"],
@@ -143,6 +149,7 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       name: 'Chevron Right Icon'
     }
   })), (0, _react2.jsx)(_index.IconButton, {
+    ref: nextYearRef,
     onPress: function onPress() {
       return handleYearSelection(nav.NEXT);
     },

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/Calendar/Calendar.js

@@ -11,7 +11,7 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 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 React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { createCalendar, parseDate } from '@internationalized/date';
 import ChevronDoubleLeftIcon from '@pingux/mdi-react/ChevronDoubleLeftIcon';
 import ChevronDoubleRightIcon from '@pingux/mdi-react/ChevronDoubleRightIcon';
@@ -53,51 +53,62 @@ var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
     prevButtonProps = _useCalendar.prevButtonProps,
     nextButtonProps = _useCalendar.nextButtonProps,
     title = _useCalendar.title;
-
-  /**
-   * Grabs the currently displayed date for yearly navigation.
-   */
-
-  var _useState = useState(),
+  var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
-    currentDate = _useState2[0],
-    setCurrentDate = _useState2[1];
-  var todayDate = useMemo(function () {
-    setCurrentDate(state.visibleRange.start);
-  }, [state.visibleRange.start]);
+    yearChangeDirection = _useState2[0],
+    setYearChangeDirection = _useState2[1];
+  var previousYearRef = useRef(null);
+  var nextYearRef = useRef(null);
   var nav = {
     NEXT: 'next',
     PREVIOUS: 'previous'
   };
 
-  /**
-   * Function handles the navigation to previous and next year
-   * based on the currently displayed date.
-   */
+  // after updating visible year, reapplies focus to corresponding year buttons
+  useEffect(function () {
+    if (yearChangeDirection === nav.NEXT) {
+      nextYearRef.current.focus();
+    }
+    if (yearChangeDirection === nav.PREVIOUS) {
+      previousYearRef.current.focus();
+    }
+    setYearChangeDirection(null);
+  }, [nav.NEXT, nav.PREVIOUS, yearChangeDirection]);
 
-  var handleYearSelection = useCallback(function (navigation) {
-    var tempValue;
+  // update visible year
+  var handleYearSelection = function handleYearSelection(navigation) {
     if (navigation === nav.PREVIOUS) {
-      tempValue = currentDate.subtract({
+      var previousYear = state.focusedDate.subtract({
         years: 1
       });
-    } else if (navigation === nav.NEXT) {
-      tempValue = currentDate.add({
+      state.setFocusedDate(previousYear);
+    }
+    if (navigation === nav.NEXT) {
+      var nextYear = state.focusedDate.add({
         years: 1
       });
+      state.setFocusedDate(nextYear);
     }
-    state.setFocusedDate(tempValue);
-    setCurrentDate(tempValue);
-  }, [currentDate, state, todayDate]);
+    setYearChangeDirection(navigation);
+  };
+  var renderTitle = ___EmotionJSX(Text, {
+    variant: "itemTitle",
+    role: "heading",
+    "aria-level": "3",
+    fontWeight: 3
+  }, title);
   return ___EmotionJSX(Box, _extends({}, calendarProps, {
     ref: calenderRef,
     variant: "calendar.calendarContainer"
-  }), ___EmotionJSX(Box, {
+  }), ___EmotionJSX(VisuallyHidden, {
+    "aria-live": "assertive"
+  }, ___EmotionJSX(Text, null, title)), ___EmotionJSX(Box, {
     className: "header",
     isRow: true,
     variant: "calendar.calendarHeader",
     verticalAlign: "middle"
   }, ___EmotionJSX(IconButton, {
+    ref: previousYearRef,
     onPress: function onPress() {
       return handleYearSelection(nav.PREVIOUS);
     },
@@ -118,12 +129,7 @@ var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
     title: {
       name: 'Chevron Left Icon'
     }
-  })), ___EmotionJSX(VisuallyHidden, null, ___EmotionJSX(Text, null, calendarProps['aria-label'])), ___EmotionJSX(Text, {
-    variant: "itemTitle",
-    role: "heading",
-    "aria-level": "3",
-    fontWeight: 3
-  }, title), ___EmotionJSX(IconButton, _extends({}, nextButtonProps, {
+  })), renderTitle, ___EmotionJSX(IconButton, _extends({}, nextButtonProps, {
     "aria-label": "Next month navigation"
   }), ___EmotionJSX(Icon, {
     icon: ChevronRightIcon,
@@ -132,6 +138,7 @@ var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
       name: 'Chevron Right Icon'
     }
   })), ___EmotionJSX(IconButton, {
+    ref: nextYearRef,
     onPress: function onPress() {
       return handleYearSelection(nav.NEXT);
     },

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.2",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",