@pingux/astro 2.17.0-alpha.4 → 2.17.0-alpha.5

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

@@ -94,9 +94,7 @@ var Uncontrolled = function Uncontrolled(_ref) {
       hintText: 'Example Hint',
       isRequired: true,
       helpHintProps: {
-        tooltipProps: {
-          direction: 'top'
-        }
+        direction: 'top'
       }
     },
     renderField: function renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {

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

@@ -24,7 +24,7 @@ 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"];
+var _excluded = ["align", "arrowCrossOffset", "children", "className", "closeDelay", "direction", "hasNoArrow", "iconButtonProps", "isDarkMode", "isNotFlippable", "offset", "popoverProps", "tooltipProps"];
 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 HelpIcon = function HelpIcon() {
@@ -56,6 +56,7 @@ var HelpHint = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isNotFlippable = props.isNotFlippable,
     offset = props.offset,
     popoverProps = props.popoverProps,
+    tooltipProps = props.tooltipProps,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -165,7 +166,7 @@ var HelpHint = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     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 || tooltipProps, overlayHoverProps, focusWithinProps)), (0, _react2.jsx)(_reactAria.FocusScope, {
     restoreFocus: true,
     autoFocus: isFocusVisible
   }, (0, _react2.jsx)(_.Box, {
@@ -175,6 +176,8 @@ var HelpHint = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 HelpHint.propTypes = {
   /** Props object that is spread directly into the popover element. */
   popoverProps: _propTypes["default"].shape({}),
+  /** @ignore Alias for `popoverProps` prop. Exists for backwards-compatibility. */
+  tooltipProps: _propTypes["default"].shape({}),
   /** Props object that is spread directly into the IconButton element. */
   iconButtonProps: _propTypes["default"].shape({}),
   /** Defaults to true, displays dark popover with white text */

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

@@ -55,11 +55,12 @@ var WithPopoverAndIconButtonProps = function WithPopoverAndIconButtonProps() {
     p: 50
   }, (0, _react2.jsx)(_index.HelpHint, {
     popoverProps: {
-      direction: 'bottom'
+      'data-id': 'popover-container'
     },
     iconButtonProps: {
       'aria-label': 'Help hint'
-    }
+    },
+    direction: "bottom"
   }, "Text of the popover right here..."));
 };
 exports.WithPopoverAndIconButtonProps = WithPopoverAndIconButtonProps;

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

@@ -58,7 +58,11 @@ var popoverContainer = _objectSpread(_objectSpread({}, _TooltipStyles.container)
   p: '10px',
   fontSize: 'sm',
   fontWeight: 1,
-  width: '117px'
+  maxWidth: '300px',
+  overflow: 'visible',
+  textOverflow: '',
+  maxHeight: 'unset',
+  display: 'flex'
 });
 var _default = {
   hintButton: hintButton,

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

@@ -154,6 +154,19 @@ test('applies popoverProps', function () {
   });
   expect(_testWrapper.screen.getByText(popoverValue)).toBeInTheDocument();
 });
+test('applies tooltipProps', function () {
+  getComponent({
+    tooltipProps: {
+      isOpen: true,
+      maxWidth: 'unset',
+      width: '1000px'
+    }
+  });
+  var popover = _testWrapper.screen.queryByRole('presentation');
+  expect(popover).toBeInTheDocument();
+  expect(popover).toHaveStyle('width: 1000px');
+  expect(popover).toHaveStyle('maxWidth: unset');
+});
 test('applies iconButtonProps', function () {
   var newLabel = 'New label';
   getComponent({

package/lib/components/ArrayField/ArrayField.stories.js

@@ -85,9 +85,7 @@ export var Uncontrolled = function Uncontrolled(_ref) {
       hintText: 'Example Hint',
       isRequired: true,
       helpHintProps: {
-        tooltipProps: {
-          direction: 'top'
-        }
+        direction: 'top'
       }
     },
     renderField: function renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {

package/lib/components/HelpHint/HelpHint.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["align", "arrowCrossOffset", "children", "className", "closeDelay", "direction", "hasNoArrow", "iconButtonProps", "isDarkMode", "isNotFlippable", "offset", "popoverProps"];
+var _excluded = ["align", "arrowCrossOffset", "children", "className", "closeDelay", "direction", "hasNoArrow", "iconButtonProps", "isDarkMode", "isNotFlippable", "offset", "popoverProps", "tooltipProps"];
 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";
@@ -43,6 +43,7 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
     isNotFlippable = props.isNotFlippable,
     offset = props.offset,
     popoverProps = props.popoverProps,
+    tooltipProps = props.tooltipProps,
     others = _objectWithoutProperties(props, _excluded);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -152,7 +153,7 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
     onClose: close,
     placement: placement,
     ref: overlayRef
-  }, mergeProps(overlayProps, positionProps, popoverProps, overlayHoverProps, focusWithinProps)), ___EmotionJSX(FocusScope, {
+  }, mergeProps(overlayProps, positionProps, popoverProps || tooltipProps, overlayHoverProps, focusWithinProps)), ___EmotionJSX(FocusScope, {
     restoreFocus: true,
     autoFocus: isFocusVisible
   }, ___EmotionJSX(Box, {
@@ -162,6 +163,8 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
 HelpHint.propTypes = {
   /** Props object that is spread directly into the popover element. */
   popoverProps: PropTypes.shape({}),
+  /** @ignore Alias for `popoverProps` prop. Exists for backwards-compatibility. */
+  tooltipProps: PropTypes.shape({}),
   /** Props object that is spread directly into the IconButton element. */
   iconButtonProps: PropTypes.shape({}),
   /** Defaults to true, displays dark popover with white text */

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

@@ -45,11 +45,12 @@ export var WithPopoverAndIconButtonProps = function WithPopoverAndIconButtonProp
     p: 50
   }, ___EmotionJSX(HelpHint, {
     popoverProps: {
-      direction: 'bottom'
+      'data-id': 'popover-container'
     },
     iconButtonProps: {
       'aria-label': 'Help hint'
-    }
+    },
+    direction: "bottom"
   }, "Text of the popover right here..."));
 };
 export var ContentWithLink = function ContentWithLink() {

package/lib/components/HelpHint/HelpHint.styles.js

@@ -50,7 +50,11 @@ var popoverContainer = _objectSpread(_objectSpread({}, container), {}, {
   p: '10px',
   fontSize: 'sm',
   fontWeight: 1,
-  width: '117px'
+  maxWidth: '300px',
+  overflow: 'visible',
+  textOverflow: '',
+  maxHeight: 'unset',
+  display: 'flex'
 });
 export default {
   hintButton: hintButton,

package/lib/components/HelpHint/HelpHint.test.js

@@ -151,6 +151,19 @@ test('applies popoverProps', function () {
   });
   expect(screen.getByText(popoverValue)).toBeInTheDocument();
 });
+test('applies tooltipProps', function () {
+  getComponent({
+    tooltipProps: {
+      isOpen: true,
+      maxWidth: 'unset',
+      width: '1000px'
+    }
+  });
+  var popover = screen.queryByRole('presentation');
+  expect(popover).toBeInTheDocument();
+  expect(popover).toHaveStyle('width: 1000px');
+  expect(popover).toHaveStyle('maxWidth: unset');
+});
 test('applies iconButtonProps', function () {
   var newLabel = 'New label';
   getComponent({

package/package.json

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