@instructure/ui-position 8.33.1 → 8.33.2

package/es/calculateElementPosition.js

@@ -1,5 +1,4 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-
 /*
  * The MIT License (MIT)
  *
@@ -23,12 +22,13 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { getBoundingClientRect, getScrollParents, getOffsetParents, canUseDOM, findDOMNode, ownerDocument, ownerWindow } from '@instructure/ui-dom-utils';
-import { mirrorPlacement } from './mirrorPlacement'; // @ts-expect-error will be needed for fix in the `offsetToPx` method
+import { mirrorPlacement } from './mirrorPlacement';
+// @ts-expect-error will be needed for fix in the `offsetToPx` method
 
 function calculateElementPosition(element, target) {
   let options = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
-
   if (!element || options.placement === 'offscreen') {
     // hide offscreen content at the bottom of the DOM from screenreaders
     // unless content is contained somewhere else
@@ -44,14 +44,12 @@ function calculateElementPosition(element, target) {
       }
     };
   }
-
   const pos = new PositionData(element, target, options);
   return {
     placement: pos.placement,
     style: pos.style
   };
 }
-
 class PositionedElement {
   constructor(element, placement) {
     let offset = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {
@@ -63,7 +61,6 @@ class PositionedElement {
     this.rect = void 0;
     this._offset = void 0;
     this.node = findDOMNode(element);
-
     if (typeof placement === 'string') {
       this.placement = parsePlacement(placement);
     } else if (Array.isArray(placement)) {
@@ -71,53 +68,42 @@ class PositionedElement {
     } else {
       this.placement = ['bottom', 'center'];
     }
-
     this.rect = getBoundingClientRect(this.node);
     this._offset = offsetToPx(offset, this.size, this.node);
   }
-
   get width() {
     return this.rect.width;
   }
-
   get height() {
     return this.rect.height;
   }
-
   get size() {
     return {
       width: this.width,
       height: this.height
     };
   }
-
   get position() {
     return {
       top: this.rect.top,
       left: this.rect.left
     };
   }
-
   get hasVerticalPlacement() {
     return ['top', 'bottom'].indexOf(this.placement[0]) >= 0;
   }
-
   get hasHorizontalPlacement() {
     return ['start', 'end'].indexOf(this.placement[0]) >= 0;
   }
-
   get shouldStretchVertically() {
     return this.placement[1] === 'stretch' && this.hasVerticalPlacement;
   }
-
   get shouldStretchHorizontally() {
     return this.placement[1] === 'stretch' && this.hasHorizontalPlacement;
   }
-
   get mirroredPlacement() {
     return mirrorPlacement(this.placement);
   }
-
   calculateOffset(placement) {
     const offsetMap = {
       top: 0,
@@ -127,103 +113,86 @@ class PositionedElement {
       end: '100%',
       stretch: 0
     };
-
     let _placement = _slicedToArray(placement, 2),
-        first = _placement[0],
-        second = _placement[1];
-
+      first = _placement[0],
+      second = _placement[1];
     if (['start', 'end'].indexOf(first) >= 0) {
       ;
       var _ref = [second, first];
       first = _ref[0];
       second = _ref[1];
     }
-
     let top = 0;
     let left = 0;
-
     if (typeof offsetMap[first] !== 'undefined') {
       top = offsetMap[first];
     }
-
     if (typeof offsetMap[second] !== 'undefined') {
       left = offsetMap[second];
     }
-
     return addOffsets([offsetToPx({
       top,
       left
     }, this.size, this.node), parseOffset(this._offset, this.placement)]);
   }
-
   get scrollParentsOffset() {
     const parents = getScrollParents(this.node);
     let offsetY = 0;
     let offsetX = 0;
-
     for (let i = 1; i < parents.length; i++) {
       const parent = parents[i];
       const child = parents[i - 1];
-
       if (parent) {
         offsetY = offsetY + (this.normalizeScrollTop(parent) - this.normalizeScrollTop(child));
         offsetX = offsetX + (parent.scrollLeft - child.scrollLeft);
       }
     }
-
     return {
       top: offsetY,
       left: offsetX
     };
   }
-
   get positionedParentsOffset() {
     // If the element container is within a positioned
     // element, it will position absolutely with respect to that
     // ancestor. We calculate the offset between the child and
     // positioned parent so we can negate that distance
     const parents = getOffsetParents(this.node);
-    const doc = ownerDocument(this.node); // If there is more than one parent, the offset on the
+    const doc = ownerDocument(this.node);
+
+    // If there is more than one parent, the offset on the
     // documentElement should be calculated appropriately.
     // Otherwise we need to explictly account for that offset
-
     let offsetY = parents.length > 1 ? 0 : getBoundingClientRect(doc.documentElement).top;
     let offsetX = 0;
     let scrollY = 0;
-
     for (let i = 1; i < parents.length; i++) {
       const parent = getBoundingClientRect(parents[i]);
       const child = getBoundingClientRect(parents[i - 1]);
       offsetY = offsetY + (child.top - parent.top);
       offsetX = offsetX + (child.left - parent.left);
-
       if (parents[i] === doc.body) {
         // accounts for any margin on body
         offsetY = offsetY + parent.top;
         offsetX = offsetX + parent.left;
       }
-
       scrollY = scrollY + this.normalizeScrollTop(parents[i]);
-    } // Account for any scrolling on positioned parents
+    }
+    // Account for any scrolling on positioned parents
     // Without this, unnecessary scroll offset could be applied
     // to our target element
-
-
     offsetY = offsetY + scrollY;
     return {
       top: offsetY,
       left: offsetX
     };
   }
-
   normalizeScrollTop(element) {
     // Account for cross browser differences with scrollTop attribute on the
     // body element https://bugs.chromium.org/p/chromium/issues/detail?id=766938
     return ownerDocument(this.node).body === element ? 0 : element.scrollTop;
   }
-
 }
-
 class PositionData {
   constructor(element, target, options) {
     this.options = void 0;
@@ -232,10 +201,10 @@ class PositionData {
     this.target = void 0;
     this.options = options || {};
     const _this$options = this.options,
-          container = _this$options.container,
-          constrain = _this$options.constrain,
-          placement = _this$options.placement,
-          over = _this$options.over;
+      container = _this$options.container,
+      constrain = _this$options.constrain,
+      placement = _this$options.placement,
+      over = _this$options.over;
     if (!element || placement === 'offscreen') return;
     this.container = container || ownerDocument(element).body;
     this.element = new PositionedElement(element, placement, {
@@ -243,7 +212,6 @@ class PositionData {
       left: this.options.offsetX
     });
     this.target = new PositionedElement(target || this.container, over ? this.element.placement : this.element.mirroredPlacement);
-
     if (constrain === 'window') {
       this.constrainTo(ownerWindow(element));
     } else if (constrain === 'scroll-parent') {
@@ -256,59 +224,48 @@ class PositionData {
       this.constrainTo(findDOMNode(constrain));
     }
   }
-
   get offset() {
     const _this$target$calculat = this.target.calculateOffset(this.element.placement),
-          top = _this$target$calculat.top,
-          left = _this$target$calculat.left;
-
+      top = _this$target$calculat.top,
+      left = _this$target$calculat.left;
     const offset = addOffsets([this.element.calculateOffset(this.target.placement), this.element.scrollParentsOffset, this.element.positionedParentsOffset]);
     return {
       top: top - offset.top,
       left: left - offset.left
     };
   }
-
   get placement() {
     return formatPlacement(this.element.placement);
   }
-
   get minWidth() {
     return this.element.shouldStretchVertically ? this.target.width : null;
   }
-
   get minHeight() {
     return this.element.shouldStretchHorizontally ? this.target.height : null;
   }
-
   get position() {
     const win = ownerWindow(this.target.node);
-
     let _addOffsets = addOffsets([this.target.position, this.offset]),
-        left = _addOffsets.left,
-        top = _addOffsets.top;
-
+      left = _addOffsets.left,
+      top = _addOffsets.top;
     if (canUseDOM && win !== null && win !== void 0 && win.matchMedia) {
       const retina = win.matchMedia('only screen and (min-resolution: 1.3dppx)').matches || win.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 1.3)').matches;
-
       if (!retina) {
         left = Math.round(left);
         top = Math.round(top);
       }
     }
-
     return {
       left,
       top
     };
   }
-
   get style() {
     // when rendered offscreen first, element has no dimension on first calculation,
     // so we hide it offscreen until measurements are completed
     const _this$element$size = this.element.size,
-          width = _this$element$size.width,
-          height = _this$element$size.height;
+      width = _this$element$size.width,
+      height = _this$element$size.height;
     const elementNotFullyRendered = width === 0 && height === 0;
     return {
       top: 0,
@@ -319,7 +276,6 @@ class PositionData {
       transform: `translateX(${this.position.left}px) translateY(${this.position.top}px) translateZ(0)`
     };
   }
-
   overflow(element) {
     const parentWindow = ownerWindow(element);
     const elementBounds = getBoundingClientRect(element);
@@ -332,33 +288,31 @@ class PositionData {
     let left = offsets.left + parentOffset.left;
     let right = offsets.left + this.element.width + parentOffset.left;
     let top = offsets.top + parentOffset.top;
-    let bottom = offsets.top + this.element.height + parentOffset.top; // adjust for vertical placements
+    let bottom = offsets.top + this.element.height + parentOffset.top;
 
+    // adjust for vertical placements
     if (this.element.placement[0] === 'bottom') {
       top -= this.element.height + this.target.height;
     } else if (this.element.placement[0] === 'top') {
       bottom += this.element.height + this.target.height;
     }
-
     if (this.element.placement[1] === 'start') {
       left -= this.element.width - this.target.width;
     } else if (this.element.placement[1] === 'end') {
       right += this.element.width - this.target.width;
-    } // adjust for horizontal placements
-
+    }
 
+    // adjust for horizontal placements
     if (this.element.placement[1] === 'top') {
       top -= this.element.height - this.target.height;
     } else if (this.element.placement[1] === 'bottom') {
       bottom += this.element.height - this.target.height;
     }
-
     if (this.element.placement[0] === 'end') {
       left -= this.element.width + this.target.width;
     } else if (this.element.placement[0] === 'start') {
       right += this.element.width + this.target.width;
     }
-
     const bounds = element === parentWindow ? elementBounds : {
       top: windowBounds.top + elementBounds.top,
       bottom: elementBounds.top + elementBounds.height,
@@ -372,7 +326,6 @@ class PositionData {
       right: right > bounds.right ? right - bounds.right : 0
     };
   }
-
   constrainTo(element) {
     if (!element) return;
     const overflow = this.overflow(element);
@@ -382,7 +335,6 @@ class PositionData {
       left: overflow.left > 0,
       right: overflow.right > 0
     };
-
     if (this.element.hasVerticalPlacement) {
       if (this.element.placement[1] !== 'stretch') {
         if (oob.left && oob.right) {
@@ -396,7 +348,6 @@ class PositionData {
           this.target.placement[1] = 'end';
         }
       }
-
       if (oob.top && oob.bottom) {
         // if top and bottom bounds broken
         if (overflow.bottom < overflow.top) {
@@ -428,7 +379,6 @@ class PositionData {
         this.element.placement[1] = 'bottom';
         this.target.placement[1] = 'bottom';
       }
-
       if (oob.left && oob.right) {
         // if left and right bounds broken
         if (overflow.left > overflow.right) {
@@ -451,9 +401,7 @@ class PositionData {
       }
     }
   }
-
 }
-
 function addOffsets(offsets) {
   return offsets.reduce((sum, offset) => {
     return {
@@ -465,89 +413,74 @@ function addOffsets(offsets) {
     left: 0
   });
 }
-
 function parseOffset(offset, placement) {
   let top = offset.top,
-      left = offset.left;
-
+    left = offset.left;
   if (typeof left === 'string') {
     left = parseFloat(left);
   }
-
   if (typeof top === 'string') {
     top = parseFloat(top);
   }
-
   if (placement[0] === 'bottom') {
     top = 0 - top;
   }
-
   if (placement[0] === 'end') {
     left = 0 - left;
   }
-
   return {
     top,
     left
   };
 }
-
-function offsetToPx(offset, size, // @ts-expect-error will be needed for the TODO below
+function offsetToPx(offset, size,
+// @ts-expect-error will be needed for the TODO below
 node) {
   let left = offset.left,
-      top = offset.top;
-
+    top = offset.top;
   if (typeof left === 'string') {
     if (left.indexOf('%') !== -1) {
       left = parseFloat(left) / 100 * size.width;
-    } else {// TODO this fixes INSTUI-3505, but it is a breaking change, so uncomment it in V9 with the appropriate release notes
+    } else {
+      // TODO this fixes INSTUI-3505, but it is a breaking change, so uncomment it in V9 with the appropriate release notes
       // left = px(left, node)
     }
   }
-
   if (typeof top === 'string') {
     if (top.indexOf('%') !== -1) {
       top = parseFloat(top) / 100 * size.height;
-    } else {// TODO this fixes INSTUI-3505, but it is a breaking change, so uncomment it in V9 with the appropriate release notes
+    } else {
+      // TODO this fixes INSTUI-3505, but it is a breaking change, so uncomment it in V9 with the appropriate release notes
       // top = px(top, node)
     }
   }
-
   return {
     top,
     left
   };
 }
-
 function sortPlacement(placement) {
   let _placement2 = _slicedToArray(placement, 2),
-      first = _placement2[0],
-      second = _placement2[1];
-
+    first = _placement2[0],
+    second = _placement2[1];
   if (first === 'center' || first === 'stretch') {
     ;
     var _ref2 = [second, first];
     first = _ref2[0];
     second = _ref2[1];
   }
-
   return [first, second];
 }
-
 function parsePlacement(placement) {
   let parsed = placement.split(' ');
-
   if (parsed.length === 1) {
     parsed = [placement, 'center'];
   }
-
   return sortPlacement(parsed);
 }
-
 function formatPlacement(placement) {
   return placement.join(' ');
 }
-
 export default calculateElementPosition;
 export {
 /**

package/es/executeMirrorFunction.js

@@ -1,5 +1,4 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-
 /*
  * The MIT License (MIT)
  *
@@ -23,15 +22,14 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 function executeMirrorFunction(placement, mirrorFunction, delimiter) {
   const _ref = Array.isArray(placement) ? placement : placement.split(' '),
-        _ref2 = _slicedToArray(_ref, 2),
-        first = _ref2[0],
-        second = _ref2[1];
-
+    _ref2 = _slicedToArray(_ref, 2),
+    first = _ref2[0],
+    second = _ref2[1];
   const result = mirrorFunction(first, second).filter(value => value);
   return delimiter ? result.join(delimiter) : result;
 }
-
 export default executeMirrorFunction;
 export { executeMirrorFunction };

package/es/mirrorHorizontalPlacement.js

@@ -21,8 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { mirrorMap } from './PositionPropTypes';
 import executeMirrorFunction from './executeMirrorFunction';
+
 /**
  * Given a string or array of one or two placement values, mirrors the placement
  * horizontally.
@@ -41,7 +43,6 @@ import executeMirrorFunction from './executeMirrorFunction';
  * @returns {string|Array} - an array of values or, if the delimiter was supplied, a string of
  *  delimiter separated values
  */
-
 function mirrorHorizontalPlacement(placement, delimiter) {
   return executeMirrorFunction(placement, (first, second) => {
     return [first, second].map(value => {
@@ -49,6 +50,5 @@ function mirrorHorizontalPlacement(placement, delimiter) {
     });
   }, delimiter);
 }
-
 export default mirrorHorizontalPlacement;
 export { mirrorHorizontalPlacement };

package/es/mirrorPlacement.js

@@ -21,8 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { mirrorMap } from './PositionPropTypes';
 import executeMirrorFunction from './executeMirrorFunction';
+
 /**
  * ---
  * category: utilities/position
@@ -46,12 +48,10 @@ import executeMirrorFunction from './executeMirrorFunction';
  *
  * @module mirrorPlacement
  **/
-
 function mirrorPlacement(placement, delimiter) {
   return executeMirrorFunction(placement, (first, second) => {
     return [mirrorMap[first], second];
   }, delimiter);
 }
-
 export default mirrorPlacement;
 export { mirrorPlacement };

package/lib/Position/PositionContentLocator.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PositionContentLocator = void 0;
-
 var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
-
 var _index = require("./index");
-
 /*
  * The MIT License (MIT)
  *
@@ -32,5 +29,6 @@ var _index = require("./index");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const PositionContentLocator = (0, _locator.locator)(`[${_index.Position.contentLocatorAttribute}]`);
 exports.PositionContentLocator = PositionContentLocator;

package/lib/Position/PositionLocator.js

@@ -17,15 +17,10 @@ Object.defineProperty(exports, "PositionTargetLocator", {
   }
 });
 exports.customMethods = void 0;
-
 var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
-
 var _index = require("./index");
-
 var _PositionContentLocator = require("./PositionContentLocator");
-
 var _PositionTargetLocator = require("./PositionTargetLocator");
-
 /*
  * The MIT License (MIT)
  *
@@ -49,31 +44,26 @@ var _PositionTargetLocator = require("./PositionTargetLocator");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const customMethods = {
   findTarget: function (element) {
     if (element && element.getAttribute) {
       const id = element.getAttribute(_index.Position.locatorAttribute);
-
       for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
         args[_key - 1] = arguments[_key];
       }
-
       return (0, _locator.locator)(`[${_index.Position.targetLocatorAttribute}="${id}"]`).find(...args);
     }
-
     throw new Error('Element ' + element + ' not found');
   },
   findContent: function (element) {
     if (element && element.getAttribute) {
       const id = element.getAttribute(_index.Position.locatorAttribute);
-
       for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
         args[_key2 - 1] = arguments[_key2];
       }
-
       return (0, _locator.locator)(`[${_index.Position.contentLocatorAttribute}="${id}"]`).find(...args);
     }
-
     throw new Error('Element ' + element + ' not found');
   }
 };

package/lib/Position/PositionTargetLocator.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PositionTargetLocator = void 0;
-
 var _index = require("./index");
-
 var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
-
 /*
  * The MIT License (MIT)
  *
@@ -32,5 +29,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 PositionTargetLocator = (0, _locator.locator)(`[${_index.Position.targetLocatorAttribute}]`);
 exports.PositionTargetLocator = PositionTargetLocator;