@instructure/ui-popover 8.12.1-snapshot.7 → 8.13.1-snapshot.9

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.13.0](https://github.com/instructure/instructure-ui/compare/v8.12.0...v8.13.0) (2021-12-01)
+
+### Bug Fixes
+
+- **ui-popover,ui-tooltip:** fixed Tooltip triggers being transformed to links/buttons ([07b0037](https://github.com/instructure/instructure-ui/commit/07b0037b0ddaf6d4f19cca140fc82fc9a2f1efc9))
+
 # [8.12.0](https://github.com/instructure/instructure-ui/compare/v8.11.1...v8.12.0) (2021-11-17)
 
 **Note:** Version bump only for package @instructure/ui-popover

package/es/Popover/PopoverLocator.js

@@ -27,9 +27,15 @@ import { PositionLocator } from '@instructure/ui-position/es/Position/PositionLo
 import { Popover } from './index';
 import { PopoverTriggerLocator } from './PopoverTriggerLocator';
 export const customMethods = {
-  findContent: (...args) => PositionLocator.findContent(...args),
-  findPositionTarget: (...args) => PositionLocator.findTarget(...args),
-  findTrigger: (...args) => PopoverTriggerLocator.find(...args)
+  findContent: function () {
+    return PositionLocator.findContent(...arguments);
+  },
+  findPositionTarget: function () {
+    return PositionLocator.findTarget(...arguments);
+  },
+  findTrigger: function () {
+    return PopoverTriggerLocator.find(...arguments);
+  }
 };
 export { PopoverTriggerLocator };
 export const PopoverLocator = locator(Popover.selector, customMethods);

package/es/Popover/index.js

@@ -42,14 +42,25 @@ import { allowedProps, propTypes } from './props';
 category: components
 tags: overlay, portal, dialog
 ---
+@tsProps
 **/
 
 let Popover = (_dec = textDirectionContextConsumer(), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Popover extends Component {
   constructor(props) {
+    var _this;
+
     super(props);
+    _this = this;
     this._handleMouseOver = void 0;
     this._handleMouseOut = void 0;
+    this._id = void 0;
     this._raf = [];
+    this._trigger = void 0;
+    this._view = null;
+    this._dialog = null;
+    this._contentElement = null;
+    this._focusRegion = void 0;
+    this.mouseOutTimeout = void 0;
     this.ref = null;
 
     this.handleRef = el => {
@@ -62,27 +73,30 @@ let Popover = (_dec = textDirectionContextConsumer(), _dec2 = testable(), _dec(_
     };
 
     this.show = event => {
+      var _this$props$onShowCon, _this$props;
+
       if (typeof this.props.isShowingContent === 'undefined') {
         this.setState({
           isShowingContent: true
         });
       }
 
-      this.props.onShowContent(event);
+      (_this$props$onShowCon = (_this$props = this.props).onShowContent) === null || _this$props$onShowCon === void 0 ? void 0 : _this$props$onShowCon.call(_this$props, event);
     };
 
-    this.hide = (event, documentClick = false) => {
-      const _this$props = this.props,
-            onHideContent = _this$props.onHideContent,
-            isShowingContent = _this$props.isShowingContent;
+    this.hide = function (event) {
+      let documentClick = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
+      const _this$props2 = _this.props,
+            onHideContent = _this$props2.onHideContent,
+            isShowingContent = _this$props2.isShowingContent;
 
       if (typeof isShowingContent === 'undefined') {
         // uncontrolled, set state, fire callbacks
-        this.setState(({
-          isShowingContent
-        }) => {
+        _this.setState(_ref => {
+          let isShowingContent = _ref.isShowingContent;
+
           if (isShowingContent) {
-            onHideContent(event, {
+            onHideContent === null || onHideContent === void 0 ? void 0 : onHideContent(event, {
               documentClick
             });
           }
@@ -93,7 +107,7 @@ let Popover = (_dec = textDirectionContextConsumer(), _dec2 = testable(), _dec(_
         });
       } else if (isShowingContent) {
         // controlled, fire callback
-        onHideContent(event, {
+        onHideContent === null || onHideContent === void 0 ? void 0 : onHideContent(event, {
           documentClick
         });
       }
@@ -107,16 +121,17 @@ let Popover = (_dec = textDirectionContextConsumer(), _dec2 = testable(), _dec(_
       }
     };
 
-    this.handleDialogDismiss = (...args) => {
+    this.handleDialogDismiss = (event, documentClick) => {
       if (!this.props.shouldReturnFocus && this.props.shouldFocusContentOnTriggerBlur) {
         const trigger = findDOMNode(this._trigger);
 
         if (trigger && typeof trigger.focus === 'function') {
+          ;
           trigger.focus();
         }
       }
 
-      this.hide(...args);
+      this.hide(event, documentClick);
     };
 
     this.handleDialogBlur = event => {
@@ -151,7 +166,9 @@ let Popover = (_dec = textDirectionContextConsumer(), _dec2 = testable(), _dec(_
     };
 
     this.handleTriggerBlur = event => {
-      if (this.props.on.indexOf('focus') > -1) {
+      const on = this.props.on;
+
+      if (on && on.indexOf('focus') > -1) {
         this._raf.push(requestAnimationFrame(() => {
           if (!containsActiveElement(this._view)) {
             this.hide(event);
@@ -161,33 +178,33 @@ let Popover = (_dec = textDirectionContextConsumer(), _dec2 = testable(), _dec(_
     };
 
     this.handlePositioned = position => {
+      var _this$props$onPositio, _this$props3;
+
       const placement = position.placement;
       this.setState({
         placement,
         ...this.computeOffsets(placement)
       });
-      this.props.onPositioned(position);
+      (_this$props$onPositio = (_this$props3 = this.props).onPositioned) === null || _this$props$onPositio === void 0 ? void 0 : _this$props$onPositio.call(_this$props3, position);
     };
 
     this.handlePositionChanged = position => {
+      var _this$props$onPositio2, _this$props4;
+
       const placement = position.placement;
       this.setState({
         placement,
         ...this.computeOffsets(placement)
       });
-      this.props.onPositionChanged(position);
+      (_this$props$onPositio2 = (_this$props4 = this.props).onPositionChanged) === null || _this$props$onPositio2 === void 0 ? void 0 : _this$props$onPositio2.call(_this$props4, position);
     };
 
     this.state = {
       placement: props.placement,
       offsetX: props.offsetX,
-      offsetY: props.offsetY
+      offsetY: props.offsetY,
+      isShowingContent: typeof props.isShowingContent === 'undefined' ? props.defaultIsShowingContent : void 0
     };
-
-    if (typeof props.isShowingContent === 'undefined') {
-      this.state.isShowingContent = props.defaultIsShowingContent;
-    }
-
     this._id = this.props.id || uid('Popover');
     this._raf = [];
     this._handleMouseOver = handleMouseOverOut.bind(null, event => {
@@ -200,7 +217,6 @@ let Popover = (_dec = textDirectionContextConsumer(), _dec2 = testable(), _dec(_
         this.hide(event);
       }, 1);
     });
-    this.mouseOutTimeout = void 0;
   }
 
   get isTooltip() {
@@ -236,11 +252,11 @@ let Popover = (_dec = textDirectionContextConsumer(), _dec2 = testable(), _dec(_
     }
   }
 
-  shouldComponentUpdate(nextProps, nextState, nextContext) {
+  shouldComponentUpdate(nextProps, nextState) {
     return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
   }
 
-  componentDidUpdate(prevProps, prevState, snapShot) {
+  componentDidUpdate(prevProps, prevState) {
     if (this._focusRegion && this.isTooltip) {
       // if focus region exists, popover is acting as a tooltip
       // so we manually activate and deactivate the region when showing/hiding
@@ -267,19 +283,19 @@ let Popover = (_dec = textDirectionContextConsumer(), _dec2 = testable(), _dec(_
   }
 
   computeOffsets(placement) {
-    let _this$props2 = this.props,
-        offsetX = _this$props2.offsetX,
-        offsetY = _this$props2.offsetY;
+    let _this$props5 = this.props,
+        offsetX = _this$props5.offsetX,
+        offsetY = _this$props5.offsetY;
 
     if (this.props.shouldAlignArrow && this._view) {
       const secondaryPlacement = parsePlacement(placement)[1]; // arrowSize and arrowBorderWidth are component theme variables
       // declared in ContextView's styles.js
 
-      const _this$_view$props$sty = this._view.props.styles,
-            _this$_view$props$sty2 = _this$_view$props$sty.arrowSize,
-            arrowSize = _this$_view$props$sty2 === void 0 ? 0 : _this$_view$props$sty2,
-            _this$_view$props$sty3 = _this$_view$props$sty.arrowBorderWidth,
-            arrowBorderWidth = _this$_view$props$sty3 === void 0 ? 0 : _this$_view$props$sty3;
+      const _ref2 = this._view.props.styles,
+            _ref2$arrowSize = _ref2.arrowSize,
+            arrowSize = _ref2$arrowSize === void 0 ? 0 : _ref2$arrowSize,
+            _ref2$arrowBorderWidt = _ref2.arrowBorderWidth,
+            arrowBorderWidth = _ref2$arrowBorderWidt === void 0 ? 0 : _ref2$arrowBorderWidt;
       const offsetAmount = (px(arrowSize) + px(arrowBorderWidth)) * 2;
 
       if (secondaryPlacement === 'start') {
@@ -339,28 +355,28 @@ let Popover = (_dec = textDirectionContextConsumer(), _dec2 = testable(), _dec(_
     let trigger = callRenderProp(this.props.renderTrigger);
 
     if (trigger) {
-      const _this$props3 = this.props,
-            on = _this$props3.on,
-            shouldContainFocus = _this$props3.shouldContainFocus;
-      let onClick;
-      let onFocus;
-      let onMouseOut;
-      let onMouseOver;
+      const _this$props6 = this.props,
+            on = _this$props6.on,
+            shouldContainFocus = _this$props6.shouldContainFocus;
+      let onClick = void 0;
+      let onFocus = void 0;
+      let onMouseOut = void 0;
+      let onMouseOver = void 0;
       let expanded;
 
-      if (on.indexOf('click') > -1) {
+      if (on && on.indexOf('click') > -1) {
         onClick = event => {
           this.toggle(event);
         };
       }
 
-      if (on.indexOf('hover') > -1) {
+      if (on && on.indexOf('hover') > -1) {
         error(!(on === 'hover'), '[Popover] Specifying only the `"hover"` trigger limits the visibility' + ' of the Popover to just mouse users. Consider also including the `"focus"` trigger ' + 'so that touch and keyboard only users can see the Popover content as well.');
         onMouseOver = this._handleMouseOver;
         onMouseOut = this._handleMouseOut;
       }
 
-      if (on.indexOf('focus') > -1) {
+      if (on && on.indexOf('focus') > -1) {
         onFocus = event => {
           this.show(event);
         };
@@ -370,11 +386,13 @@ let Popover = (_dec = textDirectionContextConsumer(), _dec2 = testable(), _dec(_
         // only set aria-expanded if popover can contain focus
         expanded = this.shown ? 'true' : 'false';
       } else {
-        expanded = null;
+        expanded = void 0;
       }
 
       trigger = safeCloneElement(trigger, {
-        ref: el => this._trigger = el,
+        ref: el => {
+          this._trigger = el;
+        },
         'aria-expanded': expanded,
         'data-popover-trigger': true,
         onKeyDown: createChainedFunction(this.handleTriggerKeyDown, this.props.onKeyDown),
@@ -414,30 +432,40 @@ let Popover = (_dec = textDirectionContextConsumer(), _dec2 = testable(), _dec(_
     }
 
     if (this.shown || this.props.shouldRenderOffscreen) {
-      let ViewElement;
       const color = this.props.color;
       let viewProps = {
+        // TODO: try to type `ref` better, LegacyRef<T> was not compatible
         ref: c => this._view = c,
         elementRef: el => {
+          var _this$props$contentRe, _this$props7;
+
           this._contentElement = el;
-          this.props.contentRef(el);
+          (_this$props$contentRe = (_this$props7 = this.props).contentRef) === null || _this$props$contentRe === void 0 ? void 0 : _this$props$contentRe.call(_this$props7, el);
         },
         background: color,
         stacking: this.props.stacking,
         shadow: this.props.shadow,
         display: 'block'
       };
+
+      if (this.isTooltip) {
+        viewProps = { ...viewProps,
+          // Because of a11y reasons popovers should not be hidden when hovered over
+          onMouseOver: this._handleMouseOver,
+          onMouseOut: this._handleMouseOut
+        };
+      }
+
       const placement = this.state.placement;
 
       if (this.props.withArrow) {
-        ViewElement = ContextView;
         viewProps = { ...viewProps,
           // TODO: remove background override after contextview is updated
           background: color === 'primary' ? 'default' : 'inverse',
           placement: this.props.dir === textDirectionContextConsumer.DIRECTION.rtl ? mirrorHorizontalPlacement(placement, ' ') : placement
         };
+        return /*#__PURE__*/React.createElement(ContextView, viewProps, content);
       } else {
-        ViewElement = View;
         viewProps = { ...viewProps,
           borderWidth: 'small',
           borderRadius: 'medium',
@@ -445,17 +473,8 @@ let Popover = (_dec = textDirectionContextConsumer(), _dec2 = testable(), _dec(_
             borderColor: 'transparent'
           })
         };
+        return /*#__PURE__*/React.createElement(View, viewProps, content);
       }
-
-      if (this.isTooltip) {
-        viewProps = { ...viewProps,
-          // Because of a11y reasons popovers should not be hidden when hovered over
-          onMouseOver: this._handleMouseOver,
-          onMouseOut: this._handleMouseOut
-        };
-      }
-
-      return /*#__PURE__*/React.createElement(ViewElement, viewProps, content);
     } else {
       return null;
     }
@@ -485,7 +504,6 @@ let Popover = (_dec = textDirectionContextConsumer(), _dec2 = testable(), _dec(_
   offsetY: 0,
   color: 'primary',
   on: ['hover', 'focus'],
-  contentRef: el => {},
   withArrow: true,
   constrain: 'window',
   insertAt: 'bottom',
@@ -496,22 +514,7 @@ let Popover = (_dec = textDirectionContextConsumer(), _dec2 = testable(), _dec(_
   shouldReturnFocus: true,
   shouldCloseOnDocumentClick: true,
   shouldFocusContentOnTriggerBlur: false,
-  shouldCloseOnEscape: true,
-  onShowContent: event => {},
-  onHideContent: (event, {
-    documentClick
-  }) => {},
-  onClick: event => {},
-  onFocus: event => {},
-  onBlur: event => {},
-  onMouseOver: event => {},
-  onMouseOut: event => {},
-  onKeyDown: event => {},
-  onKeyUp: event => {},
-  onPositioned: position => {},
-  onPositionChanged: position => {},
-  renderTrigger: null,
-  children: null
+  shouldCloseOnEscape: true
 }, _temp)) || _class) || _class);
 export default Popover;
 export { Popover };

package/es/Popover/props.js

@@ -25,222 +25,47 @@ import PropTypes from 'prop-types';
 import { element } from '@instructure/ui-prop-types';
 import { ThemeablePropTypes } from '@instructure/emotion';
 import { PositionPropTypes } from '@instructure/ui-position';
-// Copied list from "PositionPropTypes.placement" so that it appears as options in the properties table.
-// TODO: try to use "PositionPropTypes.placement" again once Popover is fully typed and uses @tsProps
-const placementPropValues = ['top', 'bottom', 'start', 'end', 'top start', 'top center', 'top end', 'top stretch', 'bottom start', 'bottom center', 'bottom end', 'bottom stretch', 'start top', 'start center', 'start bottom', 'start stretch', 'end top', 'end center', 'end bottom', 'end stretch', 'center start', 'center end', 'offscreen'];
 const propTypes = {
-  /**
-   * Whether or not the `<Popover />` content is shown
-   */
   isShowingContent: PropTypes.bool,
-
-  /**
-   * Whether or not to show the content by default, when uncontrolled
-   */
   defaultIsShowingContent: PropTypes.bool,
-
-  /**
-   * The action that causes the content to display (`click`, `hover`, `focus`)
-   */
   on: PropTypes.oneOfType([PropTypes.oneOf(['click', 'hover', 'focus']), PropTypes.arrayOf(PropTypes.oneOf(['click', 'hover', 'focus']))]),
-
-  /**
-   * Whether or not an arrow pointing to the trigger should be rendered
-   */
   withArrow: PropTypes.bool,
-
-  /**
-   * Color variant of the popover content
-   */
   color: PropTypes.oneOf(['primary', 'primary-inverse']),
-
-  /**
-   * The placement of the content in relation to the trigger
-   */
-  placement: PropTypes.oneOf(placementPropValues),
-
-  /**
-   * Controls the shadow depth for the `<Popover />`
-   */
+  placement: PositionPropTypes.placement,
   shadow: ThemeablePropTypes.shadow,
-
-  /**
-   * Controls the z-index depth for the `<Popover />` content
-   */
   stacking: ThemeablePropTypes.stacking,
-
-  /**
-   * A function that returns a reference to the content element
-   */
   contentRef: PropTypes.func,
-
-  /**
-   * An element or a function returning an element to focus by default
-   */
   defaultFocusElement: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
-
-  /**
-   * An accessible label for the `<Popover />` content
-   */
   screenReaderLabel: PropTypes.string,
-
-  /**
-   * The horizontal offset for the positioned content
-   */
   offsetX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * The vertical offset for the positioned content
-   */
   offsetY: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * The parent in which to constrain the popover.
-   * One of: 'window', 'scroll-parent', 'parent', 'none', an element,
-   * or a function returning an element
-   */
   constrain: PositionPropTypes.constrain,
-
-  /**
-   * Target element for positioning the Popover (if it differs from the trigger)
-   */
   positionTarget: PropTypes.oneOfType([element, PropTypes.func]),
-
-  /**
-   * An element or a function returning an element to use as the mount node
-   * for the `<Popover />` (defaults to `document.body`)
-   */
   mountNode: PositionPropTypes.mountNode,
-
-  /**
-   * Insert the element at the 'top' of the mountNode or at the 'bottom'
-   */
   insertAt: PropTypes.oneOf(['bottom', 'top']),
-
-  /**
-   * An element, function returning an element, or array of elements that will
-   * not be hidden from the screen reader when the `<Popover />` is open
-   */
   liveRegion: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.func]),
-
-  /**
-   * An id is generated if not supplied.
-   */
   id: PropTypes.string,
-
-  /**
-   * Whether or not the content should offset to align by its arrow
-   */
   shouldAlignArrow: PropTypes.bool,
-
-  /**
-   * Whether or not position should be tracked or just set on initial render
-   */
   shouldTrackPosition: PropTypes.bool,
-
-  /**
-   * Should the `<Popover />` render offscreen when visually hidden
-   */
   shouldRenderOffscreen: PropTypes.bool,
-
-  /**
-   * Whether focus should contained within the `<Popover/>` when it is open
-   */
   shouldContainFocus: PropTypes.bool,
-
-  /**
-   * Whether focus should be returned to the trigger when the `<Popover/>` is closed
-   */
   shouldReturnFocus: PropTypes.bool,
-
-  /**
-   * Should the `<Popover />` hide when clicks occur outside the content
-   */
   shouldCloseOnDocumentClick: PropTypes.bool,
-
-  /**
-   * Should the `<Popover />` hide when the escape key is pressed
-   */
   shouldCloseOnEscape: PropTypes.bool,
-
-  /**
-   * Should the content become focused when the trigger is blurred
-   */
   shouldFocusContentOnTriggerBlur: PropTypes.bool,
-
-  /**
-   * Callback fired when content is shown. When controlled, this callback is
-   * fired when the Popover expects to be shown
-   */
   onShowContent: PropTypes.func,
-
-  /**
-   * Callback fired when content is hidden. When controlled, this callback is
-   * fired when the Popover expects to be hidden
-   */
   onHideContent: PropTypes.func,
-
-  /**
-   * Callback fired when content has been is initially positioned.
-   * If `shouldRenderOffscreen` is true, it will only fire once, the first
-   * time the content is shown
-   */
   onPositioned: PropTypes.func,
-
-  /**
-   * Callback fired when the position changes
-   */
   onPositionChanged: PropTypes.func,
-
-  /**
-   * Callback fired when component is clicked
-   */
   onClick: PropTypes.func,
-
-  /**
-   * Callback fired when trigger is focused
-   */
   onFocus: PropTypes.func,
-
-  /**
-   * Callback fired when component is blurred
-   */
   onBlur: PropTypes.func,
-
-  /**
-   * Callback fired on keydown
-   */
   onKeyDown: PropTypes.func,
-
-  /**
-   * Callback fired on keyup
-   */
   onKeyUp: PropTypes.func,
-
-  /**
-  /**
-   * Callback fired when mouse is over trigger
-   */
   onMouseOver: PropTypes.func,
-
-  /**
-   * Callback fired when mouse leaves trigger
-   */
   onMouseOut: PropTypes.func,
-
-  /**
-   * The element that triggers the popover
-   */
   renderTrigger: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
-  /**
-   * The content to be shown by the popover
-   */
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
-  /**
-   * Provides a reference to the underlying HTML root element
-   */
   elementRef: PropTypes.func
 };
 const allowedProps = ['isShowingContent', 'defaultIsShowingContent', 'on', 'withArrow', 'color', 'placement', 'shadow', 'stacking', 'contentRef', 'defaultFocusElement', 'screenReaderLabel', 'offsetX', 'offsetY', 'constrain', 'positionTarget', 'mountNode', 'insertAt', 'liveRegion', 'id', 'shouldAlignArrow', 'shouldTrackPosition', 'shouldRenderOffscreen', 'shouldContainFocus', 'shouldReturnFocus', 'shouldCloseOnDocumentClick', 'shouldCloseOnEscape', 'shouldFocusContentOnTriggerBlur', 'onShowContent', 'onHideContent', 'onPositioned', 'onPositionChanged', 'onClick', 'onFocus', 'onBlur', 'onKeyDown', 'onKeyUp', 'onMouseOver', 'onMouseOut', 'renderTrigger', 'children', 'elementRef'];

package/lib/Popover/PopoverLocator.js

@@ -3,13 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.PopoverLocator = void 0;
 Object.defineProperty(exports, "PopoverTriggerLocator", {
   enumerable: true,
   get: function () {
     return _PopoverTriggerLocator.PopoverTriggerLocator;
   }
 });
-exports.PopoverLocator = exports.customMethods = void 0;
+exports.customMethods = void 0;
 
 var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
 
@@ -44,9 +45,15 @@ var _PopoverTriggerLocator = require("./PopoverTriggerLocator");
  */
 // eslint-disable-next-line no-restricted-imports
 const customMethods = {
-  findContent: (...args) => _PositionLocator.PositionLocator.findContent(...args),
-  findPositionTarget: (...args) => _PositionLocator.PositionLocator.findTarget(...args),
-  findTrigger: (...args) => _PopoverTriggerLocator.PopoverTriggerLocator.find(...args)
+  findContent: function () {
+    return _PositionLocator.PositionLocator.findContent(...arguments);
+  },
+  findPositionTarget: function () {
+    return _PositionLocator.PositionLocator.findTarget(...arguments);
+  },
+  findTrigger: function () {
+    return _PopoverTriggerLocator.PopoverTriggerLocator.find(...arguments);
+  }
 };
 exports.customMethods = customMethods;
 const PopoverLocator = (0, _locator.locator)(_index.Popover.selector, customMethods);