@oracle/oraclejet 11.0.1 → 11.0.5

package/dist/js/libs/oj/debug_esm/ojpopupcore.js

@@ -2969,388 +2969,630 @@ PositionUtils.calcAvailablePopupSize = function (pos, feedback, withinElem) {
 };
 
 /**
- * Custom jquery UI position collision rule that will first apply the "flip" rule and follow with "center" alignment.
- * @ojtsignore
+ * Forked version of jQueryUI.position() API with JET bug fixes.
+ *
  */
-$.ui.position.flipcenter =
-{
+(function () {
   /**
-   * @param {{top: number, left: number}} position
-   * @param {{targetWidth: number,
-   *         targetHeight: number,
-   *         elemWidth: number,
-   *         elemHeight: number,
-   *         collisionPosition: {marginLeft: number, marginTop: number},
-   *         collisionWidth: number,
-   *         collisionHeight: number,
-   *         offset: Array.<number>,
-   *         my: Array.<string>,
-   *         at: Array.<string>,
-   *         within: {element: jQuery, isWindow: boolean, isDocument: boolean, offset: {left: number, top: number}, scrollLeft: number, scrollTop: number, width: number, height: number},
-   *         elem: jQuery
-   *        }} data
-   * @returns {undefined}
+   * @ojtsignore
    */
-  left: function (position, data) {
-    // stash away the initial position calculated from the at alignment
-    var posLeft = position.left;
-
-    // call on the flip rule
-    $.ui.position.flip.left.call(this, position, data);
-
-    // These calcs were taken from the "fit" rule.
-    var within = data.within;
-    var withinOffset = within.isWindow ? within.scrollLeft : within.offset.left;
-    var outerWidth = within.width;
-    var collisionPosLeft = position.left - data.collisionPosition.marginLeft;
-    var overLeft = withinOffset - collisionPosLeft;
-    var overRight = (collisionPosLeft + data.collisionWidth) - outerWidth - withinOffset;
-
-    // if popup is not within, center align it
-    if (overLeft > 0 || overRight > 0) {
-      // find the center of the target element
-      if (data.at[0] === 'right') {
-        posLeft -= data.targetWidth / 2;
-      } else if (data.at[0] === 'left') {
-        posLeft += data.targetWidth / 2;
-      }
-
-      var isRTL = getReadingDirection() === 'rtl';
-      var dirFactor = isRTL ? -1 : 1;
+  var cachedScrollbarWidth;
+  var max = Math.max;
+  var abs = Math.abs;
+  const rhorizontal = /left|center|right/;
+  const rvertical = /top|center|bottom/;
+  const roffset = /[+-]\d+(\.[\d]+)?%?/;
+  const rposition = /^\w+/;
+  const rpercent = /%$/;
+  var _position = $.fn.position;
+
+  var _origGetWithinInfo = $.position.getWithinInfo; // stash away the original getWithinInfo method
+
+  function getOffsets(offsets, width, height) {
+    return [
+      parseFloat(offsets[0]) * (rpercent.test(offsets[0]) ? width / 100 : 1),
+      parseFloat(offsets[1]) * (rpercent.test(offsets[1]) ? height / 100 : 1)
+    ];
+  }
 
-      // factor in half the width of the popup
-      posLeft -= dirFactor * (data.elemWidth / 2);
+  function parseCss(element, property) {
+    return parseInt($.css(element, property), 10) || 0;
+  }
 
-      // Force the popup start to be within the viewport.
-      // This collision rule is only used by input components internally. The notewindow will auto dismiss when
-      // what it is aligned to is hidden in a scroll container.
-      // eslint-disable-next-line no-param-reassign
-      position.left = Math.max(0, posLeft);
+  function getDimensions(elem) {
+    var raw = elem[0];
+    if (raw.nodeType === 9) {
+      return {
+        width: elem.width(),
+        height: elem.height(),
+        offset: { top: 0, left: 0 }
+      };
     }
-  },
+    if ($.isWindow(raw)) {
+      // JET-41302: jQuery's $(window).height() does not reflect changing window height
+      // for dynamic browser adress bar and toolbar behavior while scrolling.
+      // Need to use window.innerHeight on mobile.
+      var agentInfo = oj.AgentUtils.getAgentInfo();
+      var isMobile = (oj.AgentUtils.OS.ANDROID === agentInfo.os
+                   || oj.AgentUtils.OS.IOS === agentInfo.os);
+      return {
+        width: elem.width(),
+        height: (isMobile ? raw.innerHeight : elem.height()),
+        offset: { top: elem.scrollTop(), left: elem.scrollLeft() }
+      };
+    }
+    if (raw.preventDefault) {
+      return {
+        width: 0,
+        height: 0,
+        offset: { top: raw.pageY, left: raw.pageX }
+      };
+    }
+    return {
+      width: elem.outerWidth(),
+      height: elem.outerHeight(),
+      offset: elem.offset()
+    };
+  }
 
   /**
-   * @param {{top: number, left: number}} position
-   * @param {{targetWidth: number,
-   *         targetHeight: number,
-   *         elemWidth: number,
-   *         elemHeight: number,
-   *         collisionPosition: {marginLeft: number, marginTop: number},
-   *         collisionWidth: number,
-   *         collisionHeight: number,
-   *         offset: Array.<number>,
-   *         my: Array.<string>,
-   *         at: Array.<string>,
-   *         within: {element: jQuery, isWindow: boolean, isDocument: boolean, offset: {left: number, top: number}, scrollLeft: number, scrollTop: number, width: number, height: number},
-   *         elem: jQuery
-   *        }} data
-   * @returns {undefined}
+   * Forked jqueryUI $.position.scrollbarWidth() implementation.
+   *
+   * The original implementation in jqueryUI is not CSP compliant as
+   * it creates a div with inline style. Our implementation replaces
+   * the inline style definition with individual style property settings
+   * on a temporary div element.
+   *
+   * The fork also includes the $.position.getScrollInfo method which depends
+   * on $.position.scrollbarWidth via a local reference, so we cannot simply
+   * delegate to the original method, because it would use the old
+   * scrollbarWidth() version.
+   *
    */
-  top: function (position, data) {
-    // stash away the initial position calculated from the at alignment
-    var posTop = position.top;
-
-    $.ui.position.flip.top.call(this, position, data);
-
-    // These calcs were taken from the "fit" rule.
-    var within = data.within;
-    var withinOffset = within.isWindow ? within.scrollTop : within.offset.top;
-    var outerHeight = data.within.height;
-    var collisionPosTop = position.top - data.collisionPosition.marginTop;
-    var overTop = withinOffset - collisionPosTop;
-    var overBottom = (collisionPosTop + data.collisionHeight) - outerHeight - withinOffset;
-
-    if (overTop > 0 || overBottom > 0) {
-      // find the center of the target element
-      if (data.at[1] === 'top') {
-        posTop += data.targetHeight / 2;
-      } else if (data.at[1] === 'bottom') {
-        posTop -= data.targetHeight / 2;
+  $.position = {
+
+    getWithinInfo: _origGetWithinInfo.bind(this),
+
+    scrollbarWidth: function () {
+      if (cachedScrollbarWidth !== undefined) {
+        return cachedScrollbarWidth;
       }
+      var w1;
+      var w2;
+      var div = document.createElement('div');
+      div.style.display = 'block';
+      div.style.position = 'absolute';
+      div.style.width = '50px';
+      div.style.height = '50px';
+      div.style.overflow = 'hidden';
+      var innerDiv = document.createElement('div');
+      innerDiv.style.height = '100px';
+      innerDiv.style.width = 'auto';
+      div.appendChild(innerDiv); // @HTMLUpdateOK
+      $('body').append($(div)); // @HTMLUpdateOK
+      w1 = innerDiv.offsetWidth;
+      div.style.overflow = 'scroll';
+      w2 = innerDiv.offsetWidth;
+      if (w1 === w2) {
+        w2 = div.clientWidth;
+      }
+      $(div).remove();
+      cachedScrollbarWidth = w1 - w2;
+      return cachedScrollbarWidth;
+    },
 
-      // factor in half the height of the popup
-      posTop += data.elemHeight / 2;
+    getScrollInfo: function (within) {
+      var overflowX = within.isWindow || within.isDocument ? '' : within.element.css('overflow-x');
+      var overflowY = within.isWindow || within.isDocument ? '' : within.element.css('overflow-y');
+      var hasOverflowX = overflowX === 'scroll'
+        || (overflowX === 'auto' && within.width < within.element[0].scrollWidth);
+      var hasOverflowY = overflowY === 'scroll'
+        || (overflowY === 'auto' && within.height < within.element[0].scrollHeight);
+
+      return {
+        width: hasOverflowY ? $.position.scrollbarWidth() : 0,
+        height: hasOverflowX ? $.position.scrollbarWidth() : 0
+      };
+    }
+  };
 
-      // Force the popup top to be within the viewport.
-      // This collision rule is only used by input components internally. The notewindow will auto dismiss when
-      // what it is aligned to is hidden in a scroll container.
-      // eslint-disable-next-line no-param-reassign
-      position.top = Math.max(0, posTop);
+  $.fn.position = (function (options) {
+    if (!options || !options.of) {
+      return _position.apply(this, arguments);
     }
-  }
-};
 
-/**
- * Forked the jquery UI "flip" position collision rule in version 1.11.4.
- * The jquery version doesn't consider the best fit in terms of
- * top/bottom. The rule favors top when there is no fit versus choosing the
- * best fit, lesser of two evils. The new JET spin of this rule will pick
- * the better fit versus favoring top when there is no fit.
- *
- * Outside of making the code closure compiler friendly, there is only
- * a single line difference.  It's noted with a bug number.
- * @private
- */
-var _origLeftFlipCollisionRule = $.ui.position.flip.left; // stash away the original left flip rule
+    // Make a copy, we don't want to modify arguments
+    options = $.extend({}, options);
+
+    var atOffset;
+    var targetWidth;
+    var targetHeight;
+    var targetOffset;
+    var basePosition;
+    var dimensions;
+    var target = $(options.of);
+    var within = $.position.getWithinInfo(options.within);
+    var scrollInfo = $.position.getScrollInfo(within);
+    var collision = (options.collision || 'flip').split(' ');
+    var offsets = {};
+
+    dimensions = getDimensions(target);
+    if (target[0].preventDefault) {
+      // Force left top to allow flipping
+      options.at = 'left top';
+    }
+    targetWidth = dimensions.width;
+    targetHeight = dimensions.height;
+    targetOffset = dimensions.offset;
+
+    // Clone to reuse original targetOffset later
+    basePosition = $.extend({}, targetOffset);
+
+    // Force my and at to have valid horizontal and vertical positions
+    // if a value is missing or invalid, it will be converted to center
+    $.each(['my', 'at'], function () {
+    var pos = (options[this] || '').split(' ');
+    var horizontalOffset;
+    var verticalOffset;
+
+    if (pos.length === 1) {
+      pos = rhorizontal.test(pos[0]) ?
+          pos.concat(['center']) :
+          (rvertical.test(pos[0]) ?
+            ['center'].concat(pos) :
+            ['center', 'center']);
+      }
+      pos[0] = rhorizontal.test(pos[0]) ? pos[0] : 'center';
+      pos[1] = rvertical.test(pos[1]) ? pos[1] : 'center';
+
+      // Calculate offsets
+      horizontalOffset = roffset.exec(pos[0]);
+      verticalOffset = roffset.exec(pos[1]);
+      offsets[this] = [
+        horizontalOffset ? horizontalOffset[0] : 0,
+        verticalOffset ? verticalOffset[0] : 0
+      ];
+
+      // Reduce to just the positions without the offsets
+      options[this] = [
+        rposition.exec(pos[0])[0],
+        rposition.exec(pos[1])[0]
+      ];
+    });
+
+    // Normalize collision option
+    if (collision.length === 1) {
+      collision[1] = collision[0];
+    }
+
+    if (options.at[0] === 'right') {
+      basePosition.left += targetWidth;
+    } else if (options.at[0] === 'center') {
+      basePosition.left += targetWidth / 2;
+    }
+
+    if (options.at[1] === 'bottom') {
+      basePosition.top += targetHeight;
+    } else if (options.at[1] === 'center') {
+      basePosition.top += targetHeight / 2;
+    }
+
+    atOffset = getOffsets(offsets.at, targetWidth, targetHeight);
+    basePosition.left += atOffset[0];
+    basePosition.top += atOffset[1];
+
+    return this.each(function () {
+      var collisionPosition;
+      var using;
+      var elem = $(this);
+      var elemWidth = elem.outerWidth();
+      var elemHeight = elem.outerHeight();
+      var marginLeft = parseCss(this, 'marginLeft');
+      var marginTop = parseCss(this, 'marginTop');
+      var collisionWidth = elemWidth + marginLeft + parseCss(this, 'marginRight') +
+          scrollInfo.width;
+      var collisionHeight = elemHeight + marginTop + parseCss(this, 'marginBottom') +
+          scrollInfo.height;
+      var position = $.extend({}, basePosition);
+      var myOffset = getOffsets(offsets.my, elem.outerWidth(), elem.outerHeight());
+
+      if (options.my[0] === 'right') {
+        position.left -= elemWidth;
+      } else if (options.my[0] === 'center') {
+        position.left -= elemWidth / 2;
+      }
+
+      if (options.my[1] === 'bottom') {
+        position.top -= elemHeight;
+      } else if (options.my[1] === 'center') {
+        position.top -= elemHeight / 2;
+      }
+
+      position.left += myOffset[0];
+      position.top += myOffset[1];
+
+      collisionPosition = {
+        marginLeft: marginLeft,
+        marginTop: marginTop
+      };
+
+      $.each(['left', 'top'], function (i, dir) {
+        if ($.ui.position[collision[i]]) {
+          $.ui.position[collision[i]][dir](position, {
+            targetWidth: targetWidth,
+            targetHeight: targetHeight,
+            elemWidth: elemWidth,
+            elemHeight: elemHeight,
+            collisionPosition: collisionPosition,
+            collisionWidth: collisionWidth,
+            collisionHeight: collisionHeight,
+            offset: [atOffset[0] + myOffset[0], atOffset[1] + myOffset[1]],
+            my: options.my,
+            at: options.at,
+            within: within,
+            elem: elem
+          });
+        }
+      });
+
+      if (options.using) {
+        // Adds feedback as second argument to using callback, if present
+        using = function (props) {
+          var left = targetOffset.left - position.left;
+          var right = left + targetWidth - elemWidth;
+          var top = targetOffset.top - position.top;
+          var bottom = top + targetHeight - elemHeight;
+          var feedback = {
+              target: {
+                element: target,
+                left: targetOffset.left,
+                top: targetOffset.top,
+                width: targetWidth,
+                height: targetHeight
+              },
+              element: {
+                element: elem,
+                left: position.left,
+                top: position.top,
+                width: elemWidth,
+                height: elemHeight
+              },
+              horizontal: right < 0 ? 'left' : left > 0 ? 'right' : 'center',
+              vertical: bottom < 0 ? 'top' : top > 0 ? 'bottom' : 'middle'
+            };
+          if (targetWidth < elemWidth && Math.abs(left + right) < targetWidth) {
+            feedback.horizontal = 'center';
+          }
+          if (targetHeight < elemHeight && Math.abs(top + bottom) < targetHeight) {
+            feedback.vertical = 'middle';
+          }
+          if (max(abs(left), abs(right)) > max(abs(top), abs(bottom))) {
+            feedback.important = 'horizontal';
+          } else {
+            feedback.important = 'vertical';
+          }
+          options.using.call(this, props, feedback);
+        };
+      }
+
+      elem.offset($.extend(position, { using: using }));
+    });
+  });
 
-/**
- * @ojtsignore
- */
-$.ui.position.flip = {
-  left: _origLeftFlipCollisionRule.bind(null),
   /**
-   * @param {{top: number, left: number}} position
-   * @param {{targetWidth: number,
-   *         targetHeight: number,
-   *         elemWidth: number,
-   *         elemHeight: number,
-   *         collisionPosition: {marginLeft: number, marginTop: number},
-   *         collisionWidth: number,
-   *         collisionHeight: number,
-   *         offset: Array.<number>,
-   *         my: Array.<string>,
-   *         at: Array.<string>,
-   *         within: {element: jQuery, isWindow: boolean, isDocument: boolean, offset: {left: number, top: number}, scrollLeft: number, scrollTop: number, width: number, height: number},
-   *         elem: jQuery
-   *        }} data
-   * @returns {undefined}
+   * Forked the jquery UI "flip" position collision rule in version 1.11.4.
+   * The jquery version doesn't consider the best fit in terms of
+   * top/bottom. The rule favors top when there is no fit versus choosing the
+   * best fit, lesser of two evils. The new JET spin of this rule will pick
+   * the better fit versus favoring top when there is no fit.
+   *
+   * Outside of making the code closure compiler friendly, there is only
+   * a single line difference.  It's noted with a bug number.
+   * @private
    */
-  top: function (position, data) {
-    var within = data.within;
-    var withinOffset = within.offset.top + within.scrollTop;
-    var outerHeight = within.height;
-    var offsetTop = within.isWindow ? within.scrollTop : within.offset.top;
-    var collisionPosTop = position.top - data.collisionPosition.marginTop;
-    var overTop = collisionPosTop - offsetTop;
-    var overBottom = (collisionPosTop + data.collisionHeight) - outerHeight - offsetTop;
-    var top = data.my[1] === 'top';
-
-    var myOffset;
-    if (top) {
-      myOffset = -data.elemHeight;
-    } else if (data.my[1] === 'bottom') {
-      myOffset = data.elemHeight;
-    } else {
-      myOffset = 0;
-    }
+  var _origLeftFlipCollisionRule = $.ui.position.flip.left; // stash away the original left flip rule
 
-    var atOffset;
-    if (data.at[1] === 'top') {
-      atOffset = data.targetHeight;
-    } else if (data.at[1] === 'bottom') {
-      atOffset = -data.targetHeight;
-    } else {
-      atOffset = 0;
-    }
-
-    var offset = -2 * data.offset[1];
-    var newOverBottom;
-    var newOverTop;
-    if (overTop < 0) {
-      newOverBottom = (position.top + myOffset + atOffset + offset + data.collisionHeight) -
-        outerHeight - withinOffset;
-      if (newOverBottom < 0 || newOverBottom < Math.abs(overTop)) {
-        //  - only flip up if there is more "over" on top than bottom
-        if (overBottom < 0 && overTop > overBottom) {
+  /**
+    * @ojtsignore
+    */
+  $.ui.position.flip = {
+    left: _origLeftFlipCollisionRule.bind(this),
+    /**
+      * @param {{top: number, left: number}} position
+      * @param {{targetWidth: number,
+      *         targetHeight: number,
+      *         elemWidth: number,
+      *         elemHeight: number,
+      *         collisionPosition: {marginLeft: number, marginTop: number},
+      *         collisionWidth: number,
+      *         collisionHeight: number,
+      *         offset: Array.<number>,
+      *         my: Array.<string>,
+      *         at: Array.<string>,
+      *         within: {element: jQuery, isWindow: boolean, isDocument: boolean, offset: {left: number, top: number}, scrollLeft: number, scrollTop: number, width: number, height: number},
+      *         elem: jQuery
+      *        }} data
+      * @returns {undefined}
+      */
+    top: function (position, data) {
+      var within = data.within;
+      var withinOffset = within.offset.top + within.scrollTop;
+      var outerHeight = within.height;
+      var offsetTop = within.isWindow ? within.scrollTop : within.offset.top;
+      var collisionPosTop = position.top - data.collisionPosition.marginTop;
+      var overTop = collisionPosTop - offsetTop;
+      var overBottom = (collisionPosTop + data.collisionHeight) - outerHeight - offsetTop;
+      var top = data.my[1] === 'top';
+
+      var myOffset;
+      if (top) {
+        myOffset = -data.elemHeight;
+      } else if (data.my[1] === 'bottom') {
+        myOffset = data.elemHeight;
+      } else {
+        myOffset = 0;
+      }
+
+      var atOffset;
+      if (data.at[1] === 'top') {
+        atOffset = data.targetHeight;
+      } else if (data.at[1] === 'bottom') {
+        atOffset = -data.targetHeight;
+      } else {
+        atOffset = 0;
+      }
+
+      var offset = -2 * data.offset[1];
+      var newOverBottom;
+      var newOverTop;
+      if (overTop < 0) {
+        newOverBottom = (position.top + myOffset + atOffset + offset + data.collisionHeight) -
+          outerHeight - withinOffset;
+        if (newOverBottom < 0 || newOverBottom < Math.abs(overTop)) {
+          //  - only flip up if there is more "over" on top than bottom
+          if (overBottom < 0 && overTop > overBottom) {
+            // eslint-disable-next-line no-param-reassign
+            position.top += myOffset + atOffset + offset;
+          }
+        }
+      } else if (overBottom > 0) {
+        newOverTop = (((position.top - data.collisionPosition.marginTop) +
+                        myOffset + atOffset + offset) -
+                      offsetTop);
+        if (newOverTop > 0 || Math.abs(newOverTop) < overBottom) {
           // eslint-disable-next-line no-param-reassign
           position.top += myOffset + atOffset + offset;
         }
       }
-    } else if (overBottom > 0) {
-      newOverTop = (((position.top - data.collisionPosition.marginTop) +
-                     myOffset + atOffset + offset) -
-                    offsetTop);
-      if (newOverTop > 0 || Math.abs(newOverTop) < overBottom) {
-        // eslint-disable-next-line no-param-reassign
-        position.top += myOffset + atOffset + offset;
-      }
     }
-  }
-};
+  };
 
+  /**
+    * Forked the jquery UI "fit" position collision rule.
+    * The jquery version can return negative left and top positions. This
+    * is a problem because the page cannot be scrolled to negative
+    * coordinates and parts of the popup may not be accessible.
+    *
+    * Outside of making the code closure compiler friendly, the only
+    * difference is the test whether the returned position is negative.
+    * If so, it is set to 0 to make the popup "fit" in the page.
+    */
 
-/**
- * Forked the jquery UI "fit" position collision rule.
- * The jquery version can return negative left and top positions. This
- * is a problem because the page cannot be scrolled to negative
- * coordinates and parts of the popup may not be accessible.
- *
- * Outside of making the code closure compiler friendly, the only
- * difference is the test whether the returned position is negative.
- * If so, it is set to 0 to make the popup "fit" in the page.
- */
+  /**
+    * @ojtsignore
+    */
+  $.ui.position.fit = {
+    left: function (position, data) {
+      var within = data.within;
+      var withinOffset = within.isWindow ? within.scrollLeft : within.offset.left;
+      var outerWidth = within.width;
+      var collisionPosLeft = position.left - data.collisionPosition.marginLeft;
+      var overLeft = withinOffset - collisionPosLeft;
+      var overRight = collisionPosLeft + data.collisionWidth - outerWidth - withinOffset;
+      var newOverRight;
+
+      // Element is wider than within
+      if (data.collisionWidth > outerWidth) {
+        // Element is initially over the left side of within
+        if (overLeft > 0 && overRight <= 0) {
+          newOverRight = position.left + overLeft + data.collisionWidth - outerWidth - withinOffset;
+          position.left += overLeft - newOverRight;
+
+        // Element is initially over right side of within
+        } else if (overRight > 0 && overLeft <= 0) {
+          position.left = withinOffset;
 
-/**
- * @ojtsignore
- */
- $.ui.position.fit = {
-  left: function (position, data) {
-    var within = data.within;
-    var withinOffset = within.isWindow ? within.scrollLeft : within.offset.left;
-    var outerWidth = within.width;
-    var collisionPosLeft = position.left - data.collisionPosition.marginLeft;
-    var overLeft = withinOffset - collisionPosLeft;
-    var overRight = collisionPosLeft + data.collisionWidth - outerWidth - withinOffset;
-    var newOverRight;
-
-    // Element is wider than within
-    if (data.collisionWidth > outerWidth) {
-      // Element is initially over the left side of within
-      if (overLeft > 0 && overRight <= 0) {
-        newOverRight = position.left + overLeft + data.collisionWidth - outerWidth - withinOffset;
-        position.left += overLeft - newOverRight;
-
-      // Element is initially over right side of within
-      } else if (overRight > 0 && overLeft <= 0) {
-        position.left = withinOffset;
-
-      // Element is initially over both left and right sides of within
-      } else {
-        // eslint-disable-next-line no-lonely-if
-        if (overLeft > overRight) {
-          position.left = withinOffset + outerWidth - data.collisionWidth;
+        // Element is initially over both left and right sides of within
         } else {
-          position.left = withinOffset;
+          // eslint-disable-next-line no-lonely-if
+          if (overLeft > overRight) {
+            position.left = withinOffset + outerWidth - data.collisionWidth;
+          } else {
+            position.left = withinOffset;
+          }
         }
-      }
 
-    // Too far left -> align with left edge
-    } else if (overLeft > 0) {
-      position.left += overLeft;
+      // Too far left -> align with left edge
+      } else if (overLeft > 0) {
+        position.left += overLeft;
 
-    // Too far right -> align with right edge
-    } else if (overRight > 0) {
-      position.left -= overRight;
+      // Too far right -> align with right edge
+      } else if (overRight > 0) {
+        position.left -= overRight;
 
-    // Adjust based on position and margin
-    } else {
-      position.left = Math.max(position.left - collisionPosLeft, position.left);
-    }
+      // Adjust based on position and margin
+      } else {
+        position.left = Math.max(position.left - collisionPosLeft, position.left);
+      }
 
-    // JET-43962: Do not allow left position to be < 0
-    if (position.left < 0) {
-      position.left = 0;
-    }
-  },
+      // JET-43962: Do not allow left position to be < 0
+      if (position.left < 0) {
+        position.left = 0;
+      }
+    },
 
-  top: function (position, data) {
-    var within = data.within;
-    var withinOffset = within.isWindow ? within.scrollTop : within.offset.top;
-    var outerHeight = data.within.height;
-    var collisionPosTop = position.top - data.collisionPosition.marginTop;
-    var overTop = withinOffset - collisionPosTop;
-    var overBottom = collisionPosTop + data.collisionHeight - outerHeight - withinOffset;
-    var newOverBottom;
-
-    // Element is taller than within
-    if (data.collisionHeight > outerHeight) {
-      // Element is initially over the top of within
-      if (overTop > 0 && overBottom <= 0) {
-        newOverBottom = position.top + overTop + data.collisionHeight - outerHeight -
-          withinOffset;
-        position.top += overTop - newOverBottom;
-
-      // Element is initially over bottom of within
-      } else if (overBottom > 0 && overTop <= 0) {
-        position.top = withinOffset;
-
-      // Element is initially over both top and bottom of within
-      } else {
-        // eslint-disable-next-line no-lonely-if
-        if (overTop > overBottom) {
-          position.top = withinOffset + outerHeight - data.collisionHeight;
-        } else {
+    top: function (position, data) {
+      var within = data.within;
+      var withinOffset = within.isWindow ? within.scrollTop : within.offset.top;
+      var outerHeight = data.within.height;
+      var collisionPosTop = position.top - data.collisionPosition.marginTop;
+      var overTop = withinOffset - collisionPosTop;
+      var overBottom = collisionPosTop + data.collisionHeight - outerHeight - withinOffset;
+      var newOverBottom;
+
+      // Element is taller than within
+      if (data.collisionHeight > outerHeight) {
+        // Element is initially over the top of within
+        if (overTop > 0 && overBottom <= 0) {
+          newOverBottom = position.top + overTop + data.collisionHeight - outerHeight -
+            withinOffset;
+          position.top += overTop - newOverBottom;
+
+        // Element is initially over bottom of within
+        } else if (overBottom > 0 && overTop <= 0) {
           position.top = withinOffset;
+
+        // Element is initially over both top and bottom of within
+        } else {
+          // eslint-disable-next-line no-lonely-if
+          if (overTop > overBottom) {
+            position.top = withinOffset + outerHeight - data.collisionHeight;
+          } else {
+            position.top = withinOffset;
+          }
         }
-      }
 
-    // Too far up -> align with top
-    } else if (overTop > 0) {
-      position.top += overTop;
+      // Too far up -> align with top
+      } else if (overTop > 0) {
+        position.top += overTop;
 
-    // Too far down -> align with bottom edge
-    } else if (overBottom > 0) {
-      position.top -= overBottom;
+      // Too far down -> align with bottom edge
+      } else if (overBottom > 0) {
+        position.top -= overBottom;
 
-    // Adjust based on position and margin
-    } else {
-      position.top = Math.max(position.top - collisionPosTop, position.top);
-    }
+      // Adjust based on position and margin
+      } else {
+        position.top = Math.max(position.top - collisionPosTop, position.top);
+      }
 
-    // JET-43962: Do not allow top position to be < 0
-    if (position.top < 0) {
-      position.top = 0;
+      // JET-43962: Do not allow top position to be < 0
+      if (position.top < 0) {
+        position.top = 0;
+      }
     }
-  }
-};
+  };
 
-/**
- * Forked jqueryUI $.position.scrollbarWidth() implementation.
- *
- * The original implementation in jqueryUI is not CSP compliant as
- * it creates a div with inline style. Our implementation replaces
- * the inline style definition with individual style property settings
- * on a temporary div element.
- *
- * The fork also includes the $.position.getScrollInfo method which depends
- * on $.position.scrollbarWidth via a local reference, so we cannot simply
- * delegate to the original method, because it would use the old
- * scrollbarWidth() version.
- *
- */
+  /**
+   * Custom jquery UI position collision rule that will first apply the "flip" rule and follow with "center" alignment.
+   * @ojtsignore
+   */
+  $.ui.position.flipcenter = {
+    /**
+      * @param {{top: number, left: number}} position
+      * @param {{targetWidth: number,
+      *         targetHeight: number,
+      *         elemWidth: number,
+      *         elemHeight: number,
+      *         collisionPosition: {marginLeft: number, marginTop: number},
+      *         collisionWidth: number,
+      *         collisionHeight: number,
+      *         offset: Array.<number>,
+      *         my: Array.<string>,
+      *         at: Array.<string>,
+      *         within: {element: jQuery, isWindow: boolean, isDocument: boolean, offset: {left: number, top: number}, scrollLeft: number, scrollTop: number, width: number, height: number},
+      *         elem: jQuery
+      *        }} data
+      * @returns {undefined}
+      */
+    left: function (position, data) {
+      // stash away the initial position calculated from the at alignment
+      var posLeft = position.left;
+
+      // call on the flip rule
+      $.ui.position.flip.left.call(this, position, data);
+
+      // These calcs were taken from the "fit" rule.
+      var within = data.within;
+      var withinOffset = within.isWindow ? within.scrollLeft : within.offset.left;
+      var outerWidth = within.width;
+      var collisionPosLeft = position.left - data.collisionPosition.marginLeft;
+      var overLeft = withinOffset - collisionPosLeft;
+      var overRight = (collisionPosLeft + data.collisionWidth) - outerWidth - withinOffset;
+
+      // if popup is not within, center align it
+      if (overLeft > 0 || overRight > 0) {
+        // find the center of the target element
+        if (data.at[0] === 'right') {
+          posLeft -= data.targetWidth / 2;
+        } else if (data.at[0] === 'left') {
+          posLeft += data.targetWidth / 2;
+        }
 
-/**
- * @ojtsignore
- */
-var _cachedScrollbarWidth;
-var _origGetWithinInfo = $.position.getWithinInfo; // stash away the original getWithinInfo method
-
-$.position = {
-
-  getWithinInfo: _origGetWithinInfo.bind(null),
-
-  scrollbarWidth: function () {
-    if (_cachedScrollbarWidth !== undefined) {
-      return _cachedScrollbarWidth;
-    }
-    var w1;
-    var w2;
-    var div = document.createElement('div');
-    div.style.display = 'block';
-    div.style.position = 'absolute';
-    div.style.width = '50px';
-    div.style.height = '50px';
-    div.style.overflow = 'hidden';
-    var innerDiv = document.createElement('div');
-    innerDiv.style.height = '100px';
-    innerDiv.style.width = 'auto';
-    div.appendChild(innerDiv); // @HTMLUpdateOK
-    $('body').append($(div)); // @HTMLUpdateOK
-    w1 = innerDiv.offsetWidth;
-    div.style.overflow = 'scroll';
-    w2 = innerDiv.offsetWidth;
-    if (w1 === w2) {
-      w2 = div.clientWidth;
-    }
-    $(div).remove();
-    _cachedScrollbarWidth = w1 - w2;
-    return _cachedScrollbarWidth;
-  },
+        var isRTL = getReadingDirection() === 'rtl';
+        var dirFactor = isRTL ? -1 : 1;
 
-  getScrollInfo: function (within) {
-    var overflowX = within.isWindow || within.isDocument ? '' : within.element.css('overflow-x');
-    var overflowY = within.isWindow || within.isDocument ? '' : within.element.css('overflow-y');
-    var hasOverflowX = overflowX === 'scroll'
-      || (overflowX === 'auto' && within.width < within.element[0].scrollWidth);
-    var hasOverflowY = overflowY === 'scroll'
-      || (overflowY === 'auto' && within.height < within.element[0].scrollHeight);
+        // factor in half the width of the popup
+        posLeft -= dirFactor * (data.elemWidth / 2);
 
-    return {
-      width: hasOverflowY ? $.position.scrollbarWidth() : 0,
-      height: hasOverflowX ? $.position.scrollbarWidth() : 0
-    };
-  }
-};
+        // Force the popup start to be within the viewport.
+        // This collision rule is only used by input components internally. The notewindow will auto dismiss when
+        // what it is aligned to is hidden in a scroll container.
+        // eslint-disable-next-line no-param-reassign
+        position.left = Math.max(0, posLeft);
+      }
+    },
+
+    /**
+      * @param {{top: number, left: number}} position
+      * @param {{targetWidth: number,
+      *         targetHeight: number,
+      *         elemWidth: number,
+      *         elemHeight: number,
+      *         collisionPosition: {marginLeft: number, marginTop: number},
+      *         collisionWidth: number,
+      *         collisionHeight: number,
+      *         offset: Array.<number>,
+      *         my: Array.<string>,
+      *         at: Array.<string>,
+      *         within: {element: jQuery, isWindow: boolean, isDocument: boolean, offset: {left: number, top: number}, scrollLeft: number, scrollTop: number, width: number, height: number},
+      *         elem: jQuery
+      *        }} data
+      * @returns {undefined}
+      */
+    top: function (position, data) {
+      // stash away the initial position calculated from the at alignment
+      var posTop = position.top;
+
+      $.ui.position.flip.top.call(this, position, data);
+
+      // These calcs were taken from the "fit" rule.
+      var within = data.within;
+      var withinOffset = within.isWindow ? within.scrollTop : within.offset.top;
+      var outerHeight = data.within.height;
+      var collisionPosTop = position.top - data.collisionPosition.marginTop;
+      var overTop = withinOffset - collisionPosTop;
+      var overBottom = (collisionPosTop + data.collisionHeight) - outerHeight - withinOffset;
+
+      if (overTop > 0 || overBottom > 0) {
+        // find the center of the target element
+        if (data.at[1] === 'top') {
+          posTop += data.targetHeight / 2;
+        } else if (data.at[1] === 'bottom') {
+          posTop -= data.targetHeight / 2;
+        }
+
+        // factor in half the height of the popup
+        posTop += data.elemHeight / 2;
+
+        // Force the popup top to be within the viewport.
+        // This collision rule is only used by input components internally. The notewindow will auto dismiss when
+        // what it is aligned to is hidden in a scroll container.
+        // eslint-disable-next-line no-param-reassign
+        position.top = Math.max(0, posTop);
+      }
+    }
+  };
+}());
 
 /**
  * Utility for handling popup voice over messages sent to a aria live region.