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

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.33.2-snapshot-5](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2-snapshot-5) (2023-01-23)
+
+**Note:** Version bump only for package @instructure/ui-popover
+
+
+
+
+
 ## [8.33.1](https://github.com/instructure/instructure-ui/compare/v8.33.0...v8.33.1) (2023-01-06)
 
 **Note:** Version bump only for package @instructure/ui-popover

package/es/Popover/PopoverLocator.js

@@ -21,9 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { locator } from '@instructure/ui-test-locator'; // @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@ins... Remove this comment to see the full error message
-// eslint-disable-next-line no-restricted-imports
 
+import { locator } from '@instructure/ui-test-locator';
+// @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@ins... Remove this comment to see the full error message
+// eslint-disable-next-line no-restricted-imports
 import { PositionLocator } from '@instructure/ui-position/es/Position/PositionLocator';
 import { Popover } from './index';
 import { PopoverTriggerLocator } from './PopoverTriggerLocator';
@@ -38,6 +39,6 @@ export const customMethods = {
     return PopoverTriggerLocator.find(...arguments);
   }
 };
-export { PopoverTriggerLocator }; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
-
+export { PopoverTriggerLocator };
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 export const PopoverLocator = locator(Popover.selector, customMethods);

package/es/Popover/PopoverTriggerLocator.js

@@ -21,5 +21,6 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { locator } from '@instructure/ui-test-locator';
 export const PopoverTriggerLocator = locator('[data-popover-trigger]');

package/es/Popover/index.js

@@ -1,5 +1,4 @@
 var _dec, _dec2, _dec3, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -23,6 +22,7 @@ var _dec, _dec2, _dec3, _class, _class2;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import React, { Component } from 'react';
 import keycode from 'keycode';
 import { Position, parsePlacement, mirrorHorizontalPlacement } from '@instructure/ui-position';
@@ -36,6 +36,7 @@ import { logError as error } from '@instructure/console';
 import { testable } from '@instructure/ui-testable';
 import { FocusRegion } from '@instructure/ui-a11y-utils';
 import { allowedProps, propTypes } from './props';
+
 /**
 ---
 category: components
@@ -43,11 +44,9 @@ 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;
-
     super(props);
     _this = this;
     this._handleMouseOver = void 0;
@@ -61,45 +60,36 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
     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
           };
@@ -111,7 +101,6 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
         });
       }
     };
-
     this.toggle = event => {
       if (this.shown) {
         this.hide(event);
@@ -119,42 +108,33 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
         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
@@ -163,10 +143,8 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
         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)) {
@@ -175,10 +153,8 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
         }));
       }
     };
-
     this.handlePositioned = position => {
       var _this$props$onPositio, _this$props3;
-
       const placement = position.placement;
       this.setState({
         placement,
@@ -186,10 +162,8 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
       });
       (_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,
@@ -197,7 +171,6 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
       });
       (_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,
@@ -217,11 +190,9 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
       }, 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
@@ -232,29 +203,22 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
         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 !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
   }
-
   componentDidUpdate(prevProps, prevState) {
     if (this._focusRegion && this.isTooltip) {
       // if focus region exists, popover is acting as a tooltip
@@ -262,41 +226,38 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
       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 = parsePlacement(placement)[1]; // arrowSize and arrowBorderWidth are component theme variables
-      // declared in ContextView's styles.js
+      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;
+        _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') {
         offsetX = offsetAmount;
       } else if (secondaryPlacement === 'end') {
@@ -307,25 +268,20 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
         offsetY = -offsetAmount;
       }
     }
-
     return {
       offsetX,
       offsetY
     };
   }
-
   get placement() {
     let placement = this.props.placement;
     const dir = this.props.dir;
     const isRtl = dir === textDirectionContextConsumer.DIRECTION.rtl;
-
     if (isRtl) {
       placement = mirrorHorizontalPlacement(placement, ' ');
     }
-
     return !this.shown && this.props.shouldRenderOffscreen ? 'offscreen' : placement;
   }
-
   get positionProps() {
     return {
       offsetX: this.state.offsetX,
@@ -342,50 +298,41 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
       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 = 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) {
         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 && 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
@@ -394,7 +341,6 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
       } else {
         expanded = void 0;
       }
-
       trigger = safeCloneElement(trigger, {
         ref: el => {
           this._trigger = el;
@@ -410,13 +356,10 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
         onMouseOver: createChainedFunction(onMouseOver, this.props.onMouseOver)
       });
     }
-
     return trigger;
   }
-
   renderContent() {
     let content = 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
@@ -436,7 +379,6 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
         shouldCloseOnEscape: this.props.shouldCloseOnEscape
       }, content);
     }
-
     if (this.shown || this.props.shouldRenderOffscreen) {
       const color = this.props.color;
       let viewProps = {
@@ -444,7 +386,6 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
         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);
         },
@@ -453,26 +394,26 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
         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.DIRECTION.rtl ? mirrorHorizontalPlacement(placement, ' ') : placement
         };
         return /*#__PURE__*/React.createElement(ContextView, viewProps, content);
       } else {
-        viewProps = { ...viewProps,
+        viewProps = {
+          ...viewProps,
           borderWidth: 'small',
           borderRadius: 'medium',
           ...(color === 'primary-inverse' && {
@@ -485,10 +426,8 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
       return null;
     }
   }
-
   render() {
     const positionProps = this.positionProps;
-
     if (this.props.positionTarget) {
       return /*#__PURE__*/React.createElement("span", {
         ref: this.handleRef
@@ -500,7 +439,6 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
       }), this.renderContent());
     }
   }
-
 }, _class2.displayName = "Popover", _class2.componentId = 'Popover', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   defaultIsShowingContent: false,
   placement: 'bottom center',

package/es/Popover/locator.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { PopoverLocator } from './PopoverLocator';
 export { PopoverTriggerLocator, customMethods } from './PopoverLocator';
 export { PopoverLocator };

package/es/Popover/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 import { element } from '@instructure/ui-prop-types';
 import { ThemeablePropTypes } from '@instructure/emotion';

package/lib/Popover/PopoverLocator.js

@@ -11,15 +11,10 @@ Object.defineProperty(exports, "PopoverTriggerLocator", {
   }
 });
 exports.customMethods = void 0;
-
 var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
-
 var _PositionLocator = require("@instructure/ui-position/lib/Position/PositionLocator");
-
 var _index = require("./index");
-
 var _PopoverTriggerLocator = require("./PopoverTriggerLocator");
-
 /*
  * The MIT License (MIT)
  *
@@ -43,8 +38,10 @@ var _PopoverTriggerLocator = require("./PopoverTriggerLocator");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 // @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@ins... Remove this comment to see the full error message
 // eslint-disable-next-line no-restricted-imports
+
 const customMethods = {
   findContent: function () {
     return _PositionLocator.PositionLocator.findContent(...arguments);

package/lib/Popover/PopoverTriggerLocator.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PopoverTriggerLocator = void 0;
-
 var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
-
 /*
  * The MIT License (MIT)
  *
@@ -30,5 +28,6 @@ var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const PopoverTriggerLocator = (0, _locator.locator)('[data-popover-trigger]');
 exports.PopoverTriggerLocator = PopoverTriggerLocator;