@instructure/ui-popover 8.56.0 → 8.56.2-pr-snapshot-1721749364069

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.56.2-pr-snapshot-1721749364069](https://github.com/instructure/instructure-ui/compare/v8.56.1...v8.56.2-pr-snapshot-1721749364069) (2024-07-23)
+
+**Note:** Version bump only for package @instructure/ui-popover
+
+
+
+
+
+## [8.56.1](https://github.com/instructure/instructure-ui/compare/v8.56.0...v8.56.1) (2024-06-13)
+
+**Note:** Version bump only for package @instructure/ui-popover
+
+
+
+
+
 # [8.56.0](https://github.com/instructure/instructure-ui/compare/v8.55.1...v8.56.0) (2024-05-06)
 
 **Note:** Version bump only for package @instructure/ui-popover

package/lib/Popover/PopoverLocator.js

@@ -11,8 +11,8 @@ 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 _uiTestLocator = require("@instructure/ui-test-locator");
+var _PositionLocator = require("@instructure/ui-position/es/Position/PositionLocator");
 var _index = require("./index");
 var _PopoverTriggerLocator = require("./PopoverTriggerLocator");
 /*
@@ -48,4 +48,4 @@ const customMethods = exports.customMethods = {
   findTrigger: (...args) => _PopoverTriggerLocator.PopoverTriggerLocator.find(...args)
 };
 // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
-const PopoverLocator = exports.PopoverLocator = (0, _locator.locator)(_index.Popover.selector, customMethods);
+const PopoverLocator = exports.PopoverLocator = (0, _uiTestLocator.locator)(_index.Popover.selector, customMethods);

package/lib/Popover/PopoverTriggerLocator.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PopoverTriggerLocator = void 0;
-var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
+var _uiTestLocator = require("@instructure/ui-test-locator");
 /*
  * The MIT License (MIT)
  *
@@ -29,4 +29,4 @@ var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
  * SOFTWARE.
  */
 
-const PopoverTriggerLocator = exports.PopoverTriggerLocator = (0, _locator.locator)('[data-popover-trigger]');
+const PopoverTriggerLocator = exports.PopoverTriggerLocator = (0, _uiTestLocator.locator)('[data-popover-trigger]');

package/lib/Popover/index.js

@@ -8,26 +8,16 @@ Object.defineProperty(exports, "__esModule", {
 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 _uiPosition = require("@instructure/ui-position");
+var _uiView = require("@instructure/ui-view");
+var _uiDialog = require("@instructure/ui-dialog");
+var _uiI18n = require("@instructure/ui-i18n");
+var _uiDomUtils = require("@instructure/ui-dom-utils");
+var _uiReactUtils = require("@instructure/ui-react-utils");
+var _uiUtils = require("@instructure/ui-utils");
 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 _uiTestable = require("@instructure/ui-testable");
+var _uiA11yUtils = require("@instructure/ui-a11y-utils");
 var _props = require("./props");
 var _dec, _dec2, _dec3, _class, _class2;
 /*
@@ -59,7 +49,7 @@ category: components
 tags: overlay, portal, dialog
 ---
 **/
-let Popover = exports.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 {
+let Popover = exports.Popover = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _uiI18n.textDirectionContextConsumer)(), _dec3 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Popover extends _react.Component {
   constructor(props) {
     super(props);
     this._handleMouseOver = void 0;
@@ -129,7 +119,7 @@ let Popover = exports.Popover = (_dec = (0, _withDeterministicId.withDeterminist
     };
     this.handleDialogDismiss = (event, documentClick) => {
       if (!this.props.shouldReturnFocus && this.props.shouldFocusContentOnTriggerBlur) {
-        const trigger = (0, _findDOMNode.findDOMNode)(this._trigger);
+        const trigger = (0, _uiDomUtils.findDOMNode)(this._trigger);
         if (trigger && typeof trigger.focus === 'function') {
           ;
           trigger.focus();
@@ -149,7 +139,7 @@ let Popover = exports.Popover = (_dec = (0, _withDeterministicId.withDeterminist
       }
       if (event.keyCode === _keycode.default.codes.tab && !event.shiftKey) {
         event.preventDefault();
-        this._raf.push((0, _requestAnimationFrame.requestAnimationFrame)(() => {
+        this._raf.push((0, _uiDomUtils.requestAnimationFrame)(() => {
           this._dialog && this._dialog.focus();
         }));
       }
@@ -165,8 +155,8 @@ let Popover = exports.Popover = (_dec = (0, _withDeterministicId.withDeterminist
     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)) {
+        this._raf.push((0, _uiDomUtils.requestAnimationFrame)(() => {
+          if (!(0, _uiDomUtils.containsActiveElement)(this._view)) {
             this.hide(event);
           }
         }));
@@ -191,7 +181,7 @@ let Popover = exports.Popover = (_dec = (0, _withDeterministicId.withDeterminist
       (_this$props$onPositio2 = (_this$props4 = this.props).onPositionChanged) === null || _this$props$onPositio2 === void 0 ? void 0 : _this$props$onPositio2.call(_this$props4, position);
     };
     this._renderTriggerProp = this.props.renderTrigger;
-    this._renderTrigger = (0, _callRenderProp.callRenderProp)(this.props.renderTrigger);
+    this._renderTrigger = (0, _uiReactUtils.callRenderProp)(this.props.renderTrigger);
     this.state = {
       placement: props.placement,
       offsetX: props.offsetX,
@@ -200,11 +190,11 @@ let Popover = exports.Popover = (_dec = (0, _withDeterministicId.withDeterminist
     };
     this._id = this.props.id || props.deterministicId();
     this._raf = [];
-    this._handleMouseOver = _handleMouseOverOut.handleMouseOverOut.bind(null, event => {
+    this._handleMouseOver = _uiDomUtils.handleMouseOverOut.bind(null, event => {
       this.show(event);
       clearTimeout(this.mouseOutTimeout);
     });
-    this._handleMouseOut = _handleMouseOverOut.handleMouseOverOut.bind(null, event => {
+    this._handleMouseOut = _uiDomUtils.handleMouseOverOut.bind(null, event => {
       // this is needed bc the trigger mouseOut fires before tooltip mouseOver
       this.mouseOutTimeout = setTimeout(() => {
         this.hide(event);
@@ -219,7 +209,7 @@ let Popover = exports.Popover = (_dec = (0, _withDeterministicId.withDeterminist
       // if popover is being used as a tooltip with no focusable content
       // manage its FocusRegion internally rather than registering it with
       // the FocusRegionManager via Dialog
-      this._focusRegion = new _FocusRegion.FocusRegion(this._contentElement, {
+      this._focusRegion = new _uiA11yUtils.FocusRegion(this._contentElement, {
         shouldCloseOnEscape: false,
         shouldCloseOnDocumentClick: false,
         onDismiss: this.hide
@@ -238,7 +228,7 @@ let Popover = exports.Popover = (_dec = (0, _withDeterministicId.withDeterminist
     }
   }
   shouldComponentUpdate(nextProps, nextState) {
-    return !(0, _shallowEqual.shallowEqual)(this.props, nextProps) || !(0, _shallowEqual.shallowEqual)(this.state, nextState);
+    return !(0, _uiUtils.shallowEqual)(this.props, nextProps) || !(0, _uiUtils.shallowEqual)(this.state, nextState);
   }
   componentDidUpdate(prevProps, prevState) {
     if (this._focusRegion && this.isTooltip) {
@@ -269,7 +259,7 @@ let Popover = exports.Popover = (_dec = (0, _withDeterministicId.withDeterminist
       offsetX = _this$props5.offsetX,
       offsetY = _this$props5.offsetY;
     if (this.props.shouldAlignArrow && this._view) {
-      const secondaryPlacement = (0, _parsePlacement.parsePlacement)(placement)[1];
+      const secondaryPlacement = (0, _uiPosition.parsePlacement)(placement)[1];
 
       // arrowSize and arrowBorderWidth are component theme variables
       // declared in ContextView's styles.js
@@ -278,7 +268,7 @@ let Popover = exports.Popover = (_dec = (0, _withDeterministicId.withDeterminist
         arrowSize = _ref$arrowSize === void 0 ? 0 : _ref$arrowSize,
         _ref$arrowBorderWidth = _ref.arrowBorderWidth,
         arrowBorderWidth = _ref$arrowBorderWidth === void 0 ? 0 : _ref$arrowBorderWidth;
-      const offsetAmount = ((0, _px.px)(arrowSize) + (0, _px.px)(arrowBorderWidth)) * 2;
+      const offsetAmount = ((0, _uiUtils.px)(arrowSize) + (0, _uiUtils.px)(arrowBorderWidth)) * 2;
       if (secondaryPlacement === 'start') {
         offsetX = offsetAmount;
       } else if (secondaryPlacement === 'end') {
@@ -297,9 +287,9 @@ let Popover = exports.Popover = (_dec = (0, _withDeterministicId.withDeterminist
   get placement() {
     let placement = this.props.placement;
     const dir = this.props.dir;
-    const isRtl = dir === _textDirectionContextConsumer.textDirectionContextConsumer.DIRECTION.rtl;
+    const isRtl = dir === _uiI18n.textDirectionContextConsumer.DIRECTION.rtl;
     if (isRtl) {
-      placement = (0, _mirrorHorizontalPlacement.mirrorHorizontalPlacement)(placement, ' ');
+      placement = (0, _uiPosition.mirrorHorizontalPlacement)(placement, ' ');
     }
     return !this.shown && this.props.shouldRenderOffscreen ? 'offscreen' : placement;
   }
@@ -328,7 +318,7 @@ let Popover = exports.Popover = (_dec = (0, _withDeterministicId.withDeterminist
   renderTrigger() {
     if (this._renderTriggerProp != this.props.renderTrigger) {
       this._renderTriggerProp = this.props.renderTrigger;
-      this._renderTrigger = (0, _callRenderProp.callRenderProp)(this.props.renderTrigger);
+      this._renderTrigger = (0, _uiReactUtils.callRenderProp)(this.props.renderTrigger);
     }
     let trigger = this._renderTrigger;
     if (trigger) {
@@ -366,29 +356,29 @@ let Popover = exports.Popover = (_dec = (0, _withDeterministicId.withDeterminist
       } else {
         expanded = void 0;
       }
-      trigger = (0, _safeCloneElement.safeCloneElement)(trigger, {
+      trigger = (0, _uiReactUtils.safeCloneElement)(trigger, {
         ref: el => {
           this._trigger = el;
         },
         'aria-expanded': expanded,
         'data-popover-trigger': true,
-        onKeyDown: (0, _createChainedFunction.createChainedFunction)(this.handleTriggerKeyDown, this.props.onKeyDown),
-        onKeyUp: (0, _createChainedFunction.createChainedFunction)(this.handleTriggerKeyUp, this.props.onKeyUp),
-        onClick: (0, _createChainedFunction.createChainedFunction)(onClick, this.props.onClick),
-        onBlur: (0, _createChainedFunction.createChainedFunction)(this.handleTriggerBlur, this.props.onBlur),
-        onFocus: (0, _createChainedFunction.createChainedFunction)(onFocus, this.props.onFocus),
-        onMouseOut: (0, _createChainedFunction.createChainedFunction)(onMouseOut, this.props.onMouseOut),
-        onMouseOver: (0, _createChainedFunction.createChainedFunction)(onMouseOver, this.props.onMouseOver)
+        onKeyDown: (0, _uiUtils.createChainedFunction)(this.handleTriggerKeyDown, this.props.onKeyDown),
+        onKeyUp: (0, _uiUtils.createChainedFunction)(this.handleTriggerKeyUp, this.props.onKeyUp),
+        onClick: (0, _uiUtils.createChainedFunction)(onClick, this.props.onClick),
+        onBlur: (0, _uiUtils.createChainedFunction)(this.handleTriggerBlur, this.props.onBlur),
+        onFocus: (0, _uiUtils.createChainedFunction)(onFocus, this.props.onFocus),
+        onMouseOut: (0, _uiUtils.createChainedFunction)(onMouseOut, this.props.onMouseOut),
+        onMouseOver: (0, _uiUtils.createChainedFunction)(onMouseOver, this.props.onMouseOver)
       });
     }
     return trigger;
   }
   renderContent() {
-    let content = (0, _callRenderProp.callRenderProp)(this.props.children);
+    let content = (0, _uiReactUtils.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
-      content = /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, {
+      content = /*#__PURE__*/_react.default.createElement(_uiDialog.Dialog, {
         open: this.shown,
         label: this.props.screenReaderLabel,
         ref: el => this._dialog = el,
@@ -433,9 +423,9 @@ let Popover = exports.Popover = (_dec = (0, _withDeterministicId.withDeterminist
           ...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
+          placement: this.props.dir === _uiI18n.textDirectionContextConsumer.DIRECTION.rtl ? (0, _uiPosition.mirrorHorizontalPlacement)(placement, ' ') : placement
         };
-        return /*#__PURE__*/_react.default.createElement(_ContextView.ContextView, viewProps, content);
+        return /*#__PURE__*/_react.default.createElement(_uiView.ContextView, viewProps, content);
       } else {
         viewProps = {
           ...viewProps,
@@ -445,7 +435,7 @@ let Popover = exports.Popover = (_dec = (0, _withDeterministicId.withDeterminist
             borderColor: 'transparent'
           })
         };
-        return /*#__PURE__*/_react.default.createElement(_View.View, viewProps, content);
+        return /*#__PURE__*/_react.default.createElement(_uiView.View, viewProps, content);
       }
     } else {
       return null;
@@ -456,9 +446,9 @@ let Popover = exports.Popover = (_dec = (0, _withDeterministicId.withDeterminist
     if (this.props.positionTarget) {
       return /*#__PURE__*/_react.default.createElement("span", {
         ref: this.handleRef
-      }, this.renderTrigger(), /*#__PURE__*/_react.default.createElement(_Position.Position, positionProps, this.renderContent()));
+      }, this.renderTrigger(), /*#__PURE__*/_react.default.createElement(_uiPosition.Position, positionProps, this.renderContent()));
     } else {
-      return /*#__PURE__*/_react.default.createElement(_Position.Position, Object.assign({}, positionProps, {
+      return /*#__PURE__*/_react.default.createElement(_uiPosition.Position, Object.assign({}, positionProps, {
         renderTarget: this.renderTrigger(),
         elementRef: this.handleRef
       }), this.renderContent());

package/lib/Popover/props.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.propTypes = exports.allowedProps = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _element = require("@instructure/ui-prop-types/lib/element.js");
+var _uiPropTypes = require("@instructure/ui-prop-types");
 var _emotion = require("@instructure/emotion");
-var _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes.js");
+var _uiPosition = require("@instructure/ui-position");
 /*
  * The MIT License (MIT)
  *
@@ -39,7 +39,7 @@ const propTypes = exports.propTypes = {
   on: _propTypes.default.oneOfType([_propTypes.default.oneOf(['click', 'hover', 'focus']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['click', 'hover', 'focus']))]),
   withArrow: _propTypes.default.bool,
   color: _propTypes.default.oneOf(['primary', 'primary-inverse']),
-  placement: _PositionPropTypes.PositionPropTypes.placement,
+  placement: _uiPosition.PositionPropTypes.placement,
   shadow: _emotion.ThemeablePropTypes.shadow,
   stacking: _emotion.ThemeablePropTypes.stacking,
   contentRef: _propTypes.default.func,
@@ -47,12 +47,12 @@ const propTypes = exports.propTypes = {
   screenReaderLabel: _propTypes.default.string,
   offsetX: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   offsetY: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  constrain: _PositionPropTypes.PositionPropTypes.constrain,
-  positionTarget: _propTypes.default.oneOfType([_element.element, _propTypes.default.func]),
+  constrain: _uiPosition.PositionPropTypes.constrain,
+  positionTarget: _propTypes.default.oneOfType([_uiPropTypes.element, _propTypes.default.func]),
   positionContainerDisplay: _propTypes.default.oneOf(['inline-block', 'block']),
-  mountNode: _PositionPropTypes.PositionPropTypes.mountNode,
+  mountNode: _uiPosition.PositionPropTypes.mountNode,
   insertAt: _propTypes.default.oneOf(['bottom', 'top']),
-  liveRegion: _propTypes.default.oneOfType([_element.element, _propTypes.default.arrayOf(_element.element), _propTypes.default.func]),
+  liveRegion: _propTypes.default.oneOfType([_uiPropTypes.element, _propTypes.default.arrayOf(_uiPropTypes.element), _propTypes.default.func]),
   id: _propTypes.default.string,
   shouldAlignArrow: _propTypes.default.bool,
   shouldTrackPosition: _propTypes.default.bool,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-popover",
-  "version": "8.56.0",
+  "version": "8.56.2-pr-snapshot-1721749364069",
   "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.23.2",
-    "@instructure/console": "8.56.0",
-    "@instructure/emotion": "8.56.0",
-    "@instructure/ui-a11y-utils": "8.56.0",
-    "@instructure/ui-dialog": "8.56.0",
-    "@instructure/ui-dom-utils": "8.56.0",
-    "@instructure/ui-i18n": "8.56.0",
-    "@instructure/ui-position": "8.56.0",
-    "@instructure/ui-prop-types": "8.56.0",
-    "@instructure/ui-react-utils": "8.56.0",
-    "@instructure/ui-testable": "8.56.0",
-    "@instructure/ui-utils": "8.56.0",
-    "@instructure/ui-view": "8.56.0",
-    "@instructure/uid": "8.56.0",
+    "@instructure/console": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/emotion": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/ui-a11y-utils": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/ui-dialog": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/ui-dom-utils": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/ui-i18n": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/ui-position": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/ui-prop-types": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/ui-react-utils": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/ui-testable": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/ui-utils": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/ui-view": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/uid": "8.56.2-pr-snapshot-1721749364069",
     "keycode": "^2.2.1",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.56.0",
-    "@instructure/ui-color-utils": "8.56.0",
-    "@instructure/ui-test-locator": "8.56.0",
-    "@instructure/ui-test-queries": "8.56.0",
-    "@instructure/ui-test-utils": "8.56.0",
+    "@instructure/ui-babel-preset": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/ui-color-utils": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/ui-test-locator": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/ui-test-queries": "8.56.2-pr-snapshot-1721749364069",
+    "@instructure/ui-test-utils": "8.56.2-pr-snapshot-1721749364069",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1"