@instructure/ui-popover 8.33.1 → 8.33.2-snapshot-5

package/lib/Popover/index.js

@@ -1,62 +1,35 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Popover = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _keycode = _interopRequireDefault(require("keycode"));
-
 var _Position = require("@instructure/ui-position/lib/Position");
-
 var _parsePlacement = require("@instructure/ui-position/lib/parsePlacement.js");
-
 var _mirrorHorizontalPlacement = require("@instructure/ui-position/lib/mirrorHorizontalPlacement.js");
-
 var _ContextView = require("@instructure/ui-view/lib/ContextView");
-
 var _View = require("@instructure/ui-view/lib/View");
-
 var _Dialog = require("@instructure/ui-dialog/lib/Dialog");
-
 var _textDirectionContextConsumer = require("@instructure/ui-i18n/lib/textDirectionContextConsumer.js");
-
 var _findDOMNode = require("@instructure/ui-dom-utils/lib/findDOMNode.js");
-
 var _containsActiveElement = require("@instructure/ui-dom-utils/lib/containsActiveElement.js");
-
 var _requestAnimationFrame = require("@instructure/ui-dom-utils/lib/requestAnimationFrame.js");
-
 var _handleMouseOverOut = require("@instructure/ui-dom-utils/lib/handleMouseOverOut.js");
-
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
-
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
-
 var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
-
 var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
-
 var _shallowEqual = require("@instructure/ui-utils/lib/shallowEqual.js");
-
 var _px = require("@instructure/ui-utils/lib/px.js");
-
 var _console = require("@instructure/console");
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
-
 var _FocusRegion = require("@instructure/ui-a11y-utils/lib/FocusRegion.js");
-
 var _props = require("./props");
-
 var _dec, _dec2, _dec3, _class, _class2;
-
 /**
 ---
 category: components
@@ -67,7 +40,6 @@ tags: overlay, portal, dialog
 let Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Popover extends _react.Component {
   constructor(props) {
     var _this;
-
     super(props);
     _this = this;
     this._handleMouseOver = void 0;
@@ -81,45 +53,36 @@ let Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (
     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;
-
+        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
           };
@@ -131,7 +94,6 @@ let Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (
         });
       }
     };
-
     this.toggle = event => {
       if (this.shown) {
         this.hide(event);
@@ -139,42 +101,33 @@ let Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (
         this.show(event);
       }
     };
-
     this.handleDialogDismiss = (event, documentClick) => {
       if (!this.props.shouldReturnFocus && this.props.shouldFocusContentOnTriggerBlur) {
         const trigger = (0, _findDOMNode.findDOMNode)(this._trigger);
-
         if (trigger && typeof trigger.focus === 'function') {
           ;
           trigger.focus();
         }
       }
-
       this.hide(event, documentClick);
     };
-
     this.handleDialogBlur = event => {
       if (event.keyCode === _keycode.default.codes.tab && event.shiftKey && this.props.shouldFocusContentOnTriggerBlur) {
         return;
       }
-
       this.hide(event);
     };
-
     this.handleTriggerKeyDown = event => {
       if (!this.props.shouldFocusContentOnTriggerBlur) {
         return;
       }
-
       if (event.keyCode === _keycode.default.codes.tab && !event.shiftKey) {
         event.preventDefault();
-
         this._raf.push((0, _requestAnimationFrame.requestAnimationFrame)(() => {
           this._dialog && this._dialog.focus();
         }));
       }
     };
-
     this.handleTriggerKeyUp = event => {
       if (event.keyCode === _keycode.default.codes.esc && this.shown && this.isTooltip) {
         // if popover is tooltip, it is managing its own focus region so we need
@@ -183,10 +136,8 @@ let Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (
         this.hide(event);
       }
     };
-
     this.handleTriggerBlur = event => {
       const on = this.props.on;
-
       if (on && on.indexOf('focus') > -1) {
         this._raf.push((0, _requestAnimationFrame.requestAnimationFrame)(() => {
           if (!(0, _containsActiveElement.containsActiveElement)(this._view)) {
@@ -195,10 +146,8 @@ let Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (
         }));
       }
     };
-
     this.handlePositioned = position => {
       var _this$props$onPositio, _this$props3;
-
       const placement = position.placement;
       this.setState({
         placement,
@@ -206,10 +155,8 @@ let Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (
       });
       (_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,
@@ -217,7 +164,6 @@ let Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (
       });
       (_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,
@@ -237,11 +183,9 @@ let Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (
       }, 1);
     });
   }
-
   get isTooltip() {
     return this.props.shouldRenderOffscreen && !this.props.shouldReturnFocus && !this.props.shouldContainFocus && !this.props.shouldFocusContentOnTriggerBlur;
   }
-
   componentDidMount() {
     if (this.isTooltip) {
       // if popover is being used as a tooltip with no focusable content
@@ -252,29 +196,22 @@ let Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (
         shouldCloseOnDocumentClick: true,
         onDismiss: this.hide
       });
-
       if (this.shown) {
         this._focusRegion.activate();
       }
     }
   }
-
   componentWillUnmount() {
     this._raf.forEach(request => request.cancel());
-
     this._raf = [];
-
     if (this._focusRegion) {
       this._focusRegion.deactivate();
-
       this._focusRegion.blur();
     }
   }
-
   shouldComponentUpdate(nextProps, nextState) {
     return !(0, _shallowEqual.shallowEqual)(this.props, nextProps) || !(0, _shallowEqual.shallowEqual)(this.state, nextState);
   }
-
   componentDidUpdate(prevProps, prevState) {
     if (this._focusRegion && this.isTooltip) {
       // if focus region exists, popover is acting as a tooltip
@@ -282,41 +219,38 @@ let Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (
       if (!prevProps.isShowingContent && this.props.isShowingContent || !prevState.isShowingContent && this.state.isShowingContent) {
         // changed from hiding to showing
         this._focusRegion.activate();
-
         this._focusRegion.focus();
       }
-
       if (prevProps.isShowingContent && !this.props.isShowingContent || prevState.isShowingContent && !this.state.isShowingContent) {
         // changed from showing to hiding
         this._focusRegion.deactivate();
       }
-    } // since `offsetX`, `offsetY` and `placement` are saved into the state
+    }
+
+    // since `offsetX`, `offsetY` and `placement` are saved into the state
     // in the constructor and used from the state later,
     // we need to update the state if these props change
-
-
     if (this.props.offsetX !== prevProps.offsetX || this.props.offsetY !== prevProps.offsetY || this.props.placement !== prevProps.placement || this.props.shouldAlignArrow !== prevProps.shouldAlignArrow || this.props.withArrow !== prevProps.withArrow) {
-      this.setState({ ...this.computeOffsets(this.placement)
+      this.setState({
+        ...this.computeOffsets(this.placement)
       });
     }
   }
-
   computeOffsets(placement) {
     let _this$props5 = this.props,
-        offsetX = _this$props5.offsetX,
-        offsetY = _this$props5.offsetY;
-
+      offsetX = _this$props5.offsetX,
+      offsetY = _this$props5.offsetY;
     if (this.props.shouldAlignArrow && this._view) {
-      const secondaryPlacement = (0, _parsePlacement.parsePlacement)(placement)[1]; // arrowSize and arrowBorderWidth are component theme variables
-      // declared in ContextView's styles.js
+      const secondaryPlacement = (0, _parsePlacement.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;
+        _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 = ((0, _px.px)(arrowSize) + (0, _px.px)(arrowBorderWidth)) * 2;
-
       if (secondaryPlacement === 'start') {
         offsetX = offsetAmount;
       } else if (secondaryPlacement === 'end') {
@@ -327,25 +261,20 @@ let Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (
         offsetY = -offsetAmount;
       }
     }
-
     return {
       offsetX,
       offsetY
     };
   }
-
   get placement() {
     let placement = this.props.placement;
     const dir = this.props.dir;
     const isRtl = dir === _textDirectionContextConsumer.textDirectionContextConsumer.DIRECTION.rtl;
-
     if (isRtl) {
       placement = (0, _mirrorHorizontalPlacement.mirrorHorizontalPlacement)(placement, ' ');
     }
-
     return !this.shown && this.props.shouldRenderOffscreen ? 'offscreen' : placement;
   }
-
   get positionProps() {
     return {
       offsetX: this.state.offsetX,
@@ -362,50 +291,41 @@ let Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (
       id: this._id
     };
   }
-
   get shown() {
     return typeof this.props.isShowingContent === 'undefined' ? this.state.isShowingContent : this.props.isShowingContent;
   }
-
   get defaultFocusElement() {
     return this.props.defaultFocusElement;
   }
-
   renderTrigger() {
     let trigger = (0, _callRenderProp.callRenderProp)(this.props.renderTrigger);
-
     if (trigger) {
       const _this$props6 = this.props,
-            on = _this$props6.on,
-            shouldContainFocus = _this$props6.shouldContainFocus;
+        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 && on.indexOf('click') > -1) {
         onClick = event => {
           this.toggle(event);
         };
       }
-
       if (on && on.indexOf('hover') > -1) {
         (0, _console.logError)(!(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 && on.indexOf('focus') > -1) {
         onFocus = event => {
           this.show(event);
         };
       }
-
       if (shouldContainFocus) {
         // only set aria-expanded if popover can contain focus
         expanded = this.shown ? 'true' : 'false';
-
         if ('aria-expanded' in this.props) {
           // @ts-expect-error It is an escape hatch, in case someone
           // wants to remove/override aria-expanded even when shouldContainFocus
@@ -414,7 +334,6 @@ let Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (
       } else {
         expanded = void 0;
       }
-
       trigger = (0, _safeCloneElement.safeCloneElement)(trigger, {
         ref: el => {
           this._trigger = el;
@@ -430,13 +349,10 @@ let Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (
         onMouseOver: (0, _createChainedFunction.createChainedFunction)(onMouseOver, this.props.onMouseOver)
       });
     }
-
     return trigger;
   }
-
   renderContent() {
     let content = (0, _callRenderProp.callRenderProp)(this.props.children);
-
     if (this.shown && !this.isTooltip) {
       // if popover is NOT being used as a tooltip, create a Dialog
       // to manage the content FocusRegion, when showing
@@ -456,7 +372,6 @@ let Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (
         shouldCloseOnEscape: this.props.shouldCloseOnEscape
       }, content);
     }
-
     if (this.shown || this.props.shouldRenderOffscreen) {
       const color = this.props.color;
       let viewProps = {
@@ -464,7 +379,6 @@ let Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (
         ref: c => this._view = c,
         elementRef: el => {
           var _this$props$contentRe, _this$props7;
-
           this._contentElement = el;
           (_this$props$contentRe = (_this$props7 = this.props).contentRef) === null || _this$props$contentRe === void 0 ? void 0 : _this$props$contentRe.call(_this$props7, el);
         },
@@ -473,26 +387,26 @@ let Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (
         shadow: this.props.shadow,
         display: 'block'
       };
-
       if (this.isTooltip) {
-        viewProps = { ...viewProps,
+        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) {
-        viewProps = { ...viewProps,
+        viewProps = {
+          ...viewProps,
           // TODO: remove background override after contextview is updated
           background: color === 'primary' ? 'default' : 'inverse',
           placement: this.props.dir === _textDirectionContextConsumer.textDirectionContextConsumer.DIRECTION.rtl ? (0, _mirrorHorizontalPlacement.mirrorHorizontalPlacement)(placement, ' ') : placement
         };
         return /*#__PURE__*/_react.default.createElement(_ContextView.ContextView, viewProps, content);
       } else {
-        viewProps = { ...viewProps,
+        viewProps = {
+          ...viewProps,
           borderWidth: 'small',
           borderRadius: 'medium',
           ...(color === 'primary-inverse' && {
@@ -505,10 +419,8 @@ let Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (
       return null;
     }
   }
-
   render() {
     const positionProps = this.positionProps;
-
     if (this.props.positionTarget) {
       return /*#__PURE__*/_react.default.createElement("span", {
         ref: this.handleRef
@@ -520,7 +432,6 @@ let Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (
       }), this.renderContent());
     }
   }
-
 }, _class2.displayName = "Popover", _class2.componentId = 'Popover', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   defaultIsShowingContent: false,
   placement: 'bottom center',

package/lib/Popover/locator.js

@@ -22,9 +22,7 @@ Object.defineProperty(exports, "customMethods", {
   }
 });
 exports.default = void 0;
-
 var _PopoverLocator = require("./PopoverLocator");
-
 /*
  * The MIT License (MIT)
  *

package/lib/Popover/props.js

@@ -1,20 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = exports.allowedProps = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _element = require("@instructure/ui-prop-types/lib/element.js");
-
 var _emotion = require("@instructure/emotion");
-
 var _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes.js");
-
 /*
  * The MIT License (MIT)
  *
@@ -38,6 +32,7 @@ var _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const propTypes = {
   isShowingContent: _propTypes.default.bool,
   defaultIsShowingContent: _propTypes.default.bool,

package/lib/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "Popover", {
     return _Popover.Popover;
   }
 });
-
 var _Popover = require("./Popover");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-popover",
-  "version": "8.33.1",
+  "version": "8.33.2-snapshot-5",
   "description": "A component for hiding or showing content based on user interaction.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,28 +24,28 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.33.1",
-    "@instructure/emotion": "8.33.1",
-    "@instructure/ui-a11y-utils": "8.33.1",
-    "@instructure/ui-dialog": "8.33.1",
-    "@instructure/ui-dom-utils": "8.33.1",
-    "@instructure/ui-i18n": "8.33.1",
-    "@instructure/ui-position": "8.33.1",
-    "@instructure/ui-prop-types": "8.33.1",
-    "@instructure/ui-react-utils": "8.33.1",
-    "@instructure/ui-testable": "8.33.1",
-    "@instructure/ui-utils": "8.33.1",
-    "@instructure/ui-view": "8.33.1",
-    "@instructure/uid": "8.33.1",
+    "@instructure/console": "8.33.2-snapshot-5",
+    "@instructure/emotion": "8.33.2-snapshot-5",
+    "@instructure/ui-a11y-utils": "8.33.2-snapshot-5",
+    "@instructure/ui-dialog": "8.33.2-snapshot-5",
+    "@instructure/ui-dom-utils": "8.33.2-snapshot-5",
+    "@instructure/ui-i18n": "8.33.2-snapshot-5",
+    "@instructure/ui-position": "8.33.2-snapshot-5",
+    "@instructure/ui-prop-types": "8.33.2-snapshot-5",
+    "@instructure/ui-react-utils": "8.33.2-snapshot-5",
+    "@instructure/ui-testable": "8.33.2-snapshot-5",
+    "@instructure/ui-utils": "8.33.2-snapshot-5",
+    "@instructure/ui-view": "8.33.2-snapshot-5",
+    "@instructure/uid": "8.33.2-snapshot-5",
     "keycode": "^2",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.33.1",
-    "@instructure/ui-color-utils": "8.33.1",
-    "@instructure/ui-test-locator": "8.33.1",
-    "@instructure/ui-test-queries": "8.33.1",
-    "@instructure/ui-test-utils": "8.33.1"
+    "@instructure/ui-babel-preset": "8.33.2-snapshot-5",
+    "@instructure/ui-color-utils": "8.33.2-snapshot-5",
+    "@instructure/ui-test-locator": "8.33.2-snapshot-5",
+    "@instructure/ui-test-queries": "8.33.2-snapshot-5",
+    "@instructure/ui-test-utils": "8.33.2-snapshot-5"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"