@instructure/ui-popover 8.25.1-snapshot-7 → 8.25.1-snapshot-10

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.25.1-snapshot-7](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-7) (2022-06-13)
+## [8.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
 
 **Note:** Version bump only for package @instructure/ui-popover
 

package/es/Popover/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _dec3, _class, _class2;
+var _dec, _dec2, _dec3, _class;
 
 /*
  * The MIT License (MIT)
@@ -44,160 +44,35 @@ tags: overlay, portal, dialog
 @tsProps
 **/
 
-let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsumer(), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Popover extends Component {
-  constructor(props) {
-    var _this;
+let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsumer(), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = class Popover extends Component {
+  static displayName = "Popover";
+  static componentId = 'Popover';
+  static allowedProps = allowedProps;
+  static propTypes = propTypes;
+  static defaultProps = {
+    defaultIsShowingContent: false,
+    placement: 'bottom center',
+    stacking: 'topmost',
+    shadow: 'resting',
+    offsetX: 0,
+    offsetY: 0,
+    color: 'primary',
+    on: ['hover', 'focus'],
+    withArrow: true,
+    constrain: 'window',
+    insertAt: 'bottom',
+    shouldAlignArrow: false,
+    shouldTrackPosition: true,
+    shouldRenderOffscreen: false,
+    shouldContainFocus: false,
+    shouldReturnFocus: true,
+    shouldCloseOnDocumentClick: true,
+    shouldFocusContentOnTriggerBlur: false,
+    shouldCloseOnEscape: true
+  };
 
+  constructor(props) {
     super(props);
-    _this = this;
-    this._handleMouseOver = void 0;
-    this._handleMouseOut = void 0;
-    this._id = void 0;
-    this._raf = [];
-    this._trigger = null;
-    this._view = null;
-    this._dialog = null;
-    this._contentElement = null;
-    this._focusRegion = void 0;
-    this.mouseOutTimeout = void 0;
-    this.ref = null;
-
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-
-    this.show = event => {
-      var _this$props$onShowCon, _this$props;
-
-      if (typeof this.props.isShowingContent === 'undefined') {
-        this.setState({
-          isShowingContent: true
-        });
-      }
-
-      (_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 = 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(_ref => {
-          let isShowingContent = _ref.isShowingContent;
-
-          if (isShowingContent) {
-            onHideContent === null || onHideContent === void 0 ? void 0 : onHideContent(event, {
-              documentClick
-            });
-          }
-
-          return {
-            isShowingContent: false
-          };
-        });
-      } else if (isShowingContent) {
-        // controlled, fire callback
-        onHideContent === null || onHideContent === void 0 ? void 0 : onHideContent(event, {
-          documentClick
-        });
-      }
-    };
-
-    this.toggle = event => {
-      if (this.shown) {
-        this.hide(event);
-      } else {
-        this.show(event);
-      }
-    };
-
-    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(event, documentClick);
-    };
-
-    this.handleDialogBlur = event => {
-      if (event.keyCode === keycode.codes.tab && event.shiftKey && this.props.shouldFocusContentOnTriggerBlur) {
-        return;
-      }
-
-      this.hide(event);
-    };
-
-    this.handleTriggerKeyDown = event => {
-      if (!this.props.shouldFocusContentOnTriggerBlur) {
-        return;
-      }
-
-      if (event.keyCode === keycode.codes.tab && !event.shiftKey) {
-        event.preventDefault();
-
-        this._raf.push(requestAnimationFrame(() => {
-          this._dialog && this._dialog.focus();
-        }));
-      }
-    };
-
-    this.handleTriggerKeyUp = event => {
-      if (event.keyCode === keycode.codes.esc && this.shown && this.isTooltip) {
-        // if popover is tooltip, it is managing its own focus region so we need
-        // to prevent esc keyup event from reaching FocusRegionManager
-        event.preventDefault();
-        this.hide(event);
-      }
-    };
-
-    this.handleTriggerBlur = event => {
-      const on = this.props.on;
-
-      if (on && on.indexOf('focus') > -1) {
-        this._raf.push(requestAnimationFrame(() => {
-          if (!containsActiveElement(this._view)) {
-            this.hide(event);
-          }
-        }));
-      }
-    };
-
-    this.handlePositioned = position => {
-      var _this$props$onPositio, _this$props3;
-
-      const placement = position.placement;
-      this.setState({
-        placement,
-        ...this.computeOffsets(placement)
-      });
-      (_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$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,
@@ -218,6 +93,26 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
     });
   }
 
+  _handleMouseOver;
+  _handleMouseOut;
+  _id;
+  _raf = [];
+  _trigger = null;
+  _view = null;
+  _dialog = null;
+  _contentElement = null;
+  _focusRegion;
+  mouseOutTimeout;
+  ref = null;
+  handleRef = el => {
+    const elementRef = this.props.elementRef;
+    this.ref = el;
+
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
+
   get isTooltip() {
     return this.props.shouldRenderOffscreen && !this.props.shouldReturnFocus && !this.props.shouldContainFocus && !this.props.shouldFocusContentOnTriggerBlur;
   }
@@ -282,19 +177,19 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
   }
 
   computeOffsets(placement) {
-    let _this$props5 = this.props,
-        offsetX = _this$props5.offsetX,
-        offsetY = _this$props5.offsetY;
+    let _this$props = this.props,
+        offsetX = _this$props.offsetX,
+        offsetY = _this$props.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 _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 _ref = this._view.props.styles,
+            _ref$arrowSize = _ref.arrowSize,
+            arrowSize = _ref$arrowSize === void 0 ? 0 : _ref$arrowSize,
+            _ref$arrowBorderWidth = _ref.arrowBorderWidth,
+            arrowBorderWidth = _ref$arrowBorderWidth === void 0 ? 0 : _ref$arrowBorderWidth;
       const offsetAmount = (px(arrowSize) + px(arrowBorderWidth)) * 2;
 
       if (secondaryPlacement === 'start') {
@@ -350,6 +245,128 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
     return this.props.defaultFocusElement;
   }
 
+  show = event => {
+    var _this$props$onShowCon, _this$props2;
+
+    if (typeof this.props.isShowingContent === 'undefined') {
+      this.setState({
+        isShowingContent: true
+      });
+    }
+
+    (_this$props$onShowCon = (_this$props2 = this.props).onShowContent) === null || _this$props$onShowCon === void 0 ? void 0 : _this$props$onShowCon.call(_this$props2, event);
+  };
+  hide = (() => {
+    var _this = this;
+
+    return function (event) {
+      let documentClick = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
+      const _this$props3 = _this.props,
+            onHideContent = _this$props3.onHideContent,
+            isShowingContent = _this$props3.isShowingContent;
+
+      if (typeof isShowingContent === 'undefined') {
+        // uncontrolled, set state, fire callbacks
+        _this.setState(_ref2 => {
+          let isShowingContent = _ref2.isShowingContent;
+
+          if (isShowingContent) {
+            onHideContent === null || onHideContent === void 0 ? void 0 : onHideContent(event, {
+              documentClick
+            });
+          }
+
+          return {
+            isShowingContent: false
+          };
+        });
+      } else if (isShowingContent) {
+        // controlled, fire callback
+        onHideContent === null || onHideContent === void 0 ? void 0 : onHideContent(event, {
+          documentClick
+        });
+      }
+    };
+  })();
+  toggle = event => {
+    if (this.shown) {
+      this.hide(event);
+    } else {
+      this.show(event);
+    }
+  };
+  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(event, documentClick);
+  };
+  handleDialogBlur = event => {
+    if (event.keyCode === keycode.codes.tab && event.shiftKey && this.props.shouldFocusContentOnTriggerBlur) {
+      return;
+    }
+
+    this.hide(event);
+  };
+  handleTriggerKeyDown = event => {
+    if (!this.props.shouldFocusContentOnTriggerBlur) {
+      return;
+    }
+
+    if (event.keyCode === keycode.codes.tab && !event.shiftKey) {
+      event.preventDefault();
+
+      this._raf.push(requestAnimationFrame(() => {
+        this._dialog && this._dialog.focus();
+      }));
+    }
+  };
+  handleTriggerKeyUp = event => {
+    if (event.keyCode === keycode.codes.esc && this.shown && this.isTooltip) {
+      // if popover is tooltip, it is managing its own focus region so we need
+      // to prevent esc keyup event from reaching FocusRegionManager
+      event.preventDefault();
+      this.hide(event);
+    }
+  };
+  handleTriggerBlur = event => {
+    const on = this.props.on;
+
+    if (on && on.indexOf('focus') > -1) {
+      this._raf.push(requestAnimationFrame(() => {
+        if (!containsActiveElement(this._view)) {
+          this.hide(event);
+        }
+      }));
+    }
+  };
+  handlePositioned = position => {
+    var _this$props$onPositio, _this$props4;
+
+    const placement = position.placement;
+    this.setState({
+      placement,
+      ...this.computeOffsets(placement)
+    });
+    (_this$props$onPositio = (_this$props4 = this.props).onPositioned) === null || _this$props$onPositio === void 0 ? void 0 : _this$props$onPositio.call(_this$props4, position);
+  };
+  handlePositionChanged = position => {
+    var _this$props$onPositio2, _this$props5;
+
+    const placement = position.placement;
+    this.setState({
+      placement,
+      ...this.computeOffsets(placement)
+    });
+    (_this$props$onPositio2 = (_this$props5 = this.props).onPositionChanged) === null || _this$props$onPositio2 === void 0 ? void 0 : _this$props$onPositio2.call(_this$props5, position);
+  };
+
   renderTrigger() {
     let trigger = callRenderProp(this.props.renderTrigger);
 
@@ -494,26 +511,6 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
     }
   }
 
-}, _class2.displayName = "Popover", _class2.componentId = 'Popover', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
-  defaultIsShowingContent: false,
-  placement: 'bottom center',
-  stacking: 'topmost',
-  shadow: 'resting',
-  offsetX: 0,
-  offsetY: 0,
-  color: 'primary',
-  on: ['hover', 'focus'],
-  withArrow: true,
-  constrain: 'window',
-  insertAt: 'bottom',
-  shouldAlignArrow: false,
-  shouldTrackPosition: true,
-  shouldRenderOffscreen: false,
-  shouldContainFocus: false,
-  shouldReturnFocus: true,
-  shouldCloseOnDocumentClick: true,
-  shouldFocusContentOnTriggerBlur: false,
-  shouldCloseOnEscape: true
-}, _class2)) || _class) || _class) || _class);
+}) || _class) || _class) || _class);
 export default Popover;
 export { Popover };