@pingux/astro 1.22.0 → 1.23.0-alpha.2

package/lib/components/RockerButtonGroup/RockerButtonGroup.js

@@ -64,7 +64,8 @@ var RockerButtonGroup = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "rockerbutton.rockerContainerInner",
     isRow: true
   }, tabListProps, raTabListProps, {
-    ref: buttonGroupRef
+    ref: buttonGroupRef,
+    role: "toolbar"
   }), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
     return ___EmotionJSX(CollectionRockerButton, {
       key: item.key,

package/lib/components/TooltipTrigger/TooltipTrigger.js

@@ -22,7 +22,8 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var TooltipTrigger = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context, _useStatusClasses2;
 
-  var children = props.children,
+  var arrowCrossOffset = props.arrowCrossOffset,
+      children = props.children,
       crossOffset = props.crossOffset,
       isDisabled = props.isDisabled,
       align = props.align,
@@ -33,7 +34,8 @@ var TooltipTrigger = /*#__PURE__*/forwardRef(function (props, ref) {
       isNotFlippable = props.isNotFlippable,
       isDarkMode = props.isDarkMode,
       hasNoArrow = props.hasNoArrow,
-      targetRef = props.targetRef;
+      targetRef = props.targetRef,
+      width = props.width;
 
   var _React$Children$toArr = React.Children.toArray(children),
       _React$Children$toArr2 = _slicedToArray(_React$Children$toArr, 2),
@@ -81,7 +83,10 @@ var TooltipTrigger = /*#__PURE__*/forwardRef(function (props, ref) {
     placement: placement,
     arrowProps: arrowProps,
     className: classNames,
-    hasNoArrow: hasNoArrow
+    hasNoArrow: hasNoArrow,
+    arrowCrossOffset: arrowCrossOffset,
+    width: width,
+    direction: direction
   }, positionProps, tooltipProps), tooltip);
 
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(PressResponder, _extends({}, triggerProps, {
@@ -132,12 +137,19 @@ TooltipTrigger.propTypes = {
   /** Tooltip offset relative to its trigger. */
   offset: PropTypes.number,
 
+  /** Arrow offset relative to the left of the tooltip.
+   * Must be passed as a px or percentage. */
+  arrowCrossOffset: PropTypes.string,
+
   /** The placement of the element with respect to its anchor element. */
   placement: PropTypes.string,
 
   /** By default, opens for both focus and hover. Can be made to open only for focus. */
   trigger: PropTypes.string,
 
+  /** Width applied to the wrapper of the tooltip component. */
+  width: PropTypes.string,
+
   /* The ref for the element which the overlay positions itself with respect to. */
   targetRef: PropTypes.shape({})
 };

package/lib/components/TooltipTrigger/TooltipTrigger.stories.js

@@ -27,6 +27,17 @@ export var withDelayProp = function withDelayProp() {
     delay: 700
   }, ___EmotionJSX(Button, null, "Hover Over Me!"), ___EmotionJSX(Tooltip, null, "Display with a delay"));
 };
+export var withWidthProp = function withWidthProp() {
+  return ___EmotionJSX(TooltipTrigger, {
+    width: "200px"
+  }, ___EmotionJSX(Button, null, "Hover Over Me!"), ___EmotionJSX(Tooltip, null, "Custom width display"));
+};
+export var withArrowCrossOffsetProp = function withArrowCrossOffsetProp() {
+  return ___EmotionJSX(TooltipTrigger, {
+    arrowCrossOffset: "30px",
+    isOpen: true
+  }, ___EmotionJSX(Button, null, "Hover Over Me!"), ___EmotionJSX(Tooltip, null, "Display with a delay"));
+};
 export var isOpen = function isOpen() {
   return ___EmotionJSX(TooltipTrigger, {
     isOpen: true

package/lib/components/TooltipTrigger/TooltipTrigger.test.js

@@ -71,4 +71,12 @@ test('trigger press events work when a tooltip is disabled', function () {
   expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
   userEvent.click(button);
   expect(onPress).toHaveBeenCalledTimes(1);
+});
+test('passing in width applies the correct width to the container', function () {
+  getComponent({
+    isOpen: true,
+    width: '100px'
+  });
+  var arrow = screen.getByTestId('popover-container');
+  expect(arrow).toHaveStyle('width: 100px');
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.22.0",
+  "version": "1.23.0-alpha.2",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",