@instructure/ui-position 8.25.1-snapshot-10 → 8.25.1-snapshot-13

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
+## [8.25.1-snapshot-13](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-13) (2022-06-22)
 
 **Note:** Version bump only for package @instructure/ui-position
 

package/es/Position/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _dec3, _class;
+var _dec, _dec2, _dec3, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -44,28 +44,50 @@ category: components/utilities
 ---
 @tsProps
 **/
-let Position = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = class Position extends Component {
-  static displayName = "Position";
-  static componentId = 'Position';
-  static allowedProps = allowedProps;
-  static propTypes = propTypes;
-  static defaultProps = {
-    placement: 'bottom center',
-    mountNode: null,
-    insertAt: 'bottom',
-    constrain: 'window',
-    offsetX: 0,
-    offsetY: 0,
-    shouldTrackPosition: true,
-    shouldPositionOverTarget: false,
-    children: null
-  };
-  static locatorAttribute = 'data-position';
-  static targetLocatorAttribute = 'data-position-target';
-  static contentLocatorAttribute = 'data-position-content';
-
+let Position = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Position extends Component {
   constructor(props) {
     super(props);
+    this.ref = null;
+    this._id = void 0;
+    this._timeouts = [];
+    this._listener = null;
+    this._content = void 0;
+    this._target = void 0;
+
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+
+    this.handlePortalOpen = () => {
+      this.position();
+
+      if (this.props.shouldTrackPosition) {
+        this.startTracking();
+      }
+
+      this._timeouts.push(setTimeout(() => {
+        if (this.state.positioned && typeof this.props.onPositioned === 'function') {
+          this.props.onPositioned({
+            top: this.state.style.top,
+            left: this.state.style.left,
+            placement: this.state.placement
+          });
+        }
+      }, 0));
+    };
+
+    this.position = () => {
+      this.setState({
+        positioned: true,
+        ...this.calculatePosition(this.props)
+      });
+    };
+
     this.state = {
       positioned: false,
       ...this.calculatePosition(props)
@@ -77,21 +99,6 @@ let Position = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     this._id = this.props.id || props.deterministicId();
   }
 
-  ref = null;
-  _id;
-  _timeouts = [];
-  _listener = null;
-  _content;
-  _target;
-  handleRef = el => {
-    const elementRef = this.props.elementRef;
-    this.ref = el;
-
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
-
   shouldComponentUpdate(nextProps, nextState, nextContext) {
     return !deepEqual(this.state, nextState) || !shallowEqual(this.props, nextProps) || !shallowEqual(this.context, nextContext);
   }
@@ -160,24 +167,6 @@ let Position = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     }
   }
 
-  handlePortalOpen = () => {
-    this.position();
-
-    if (this.props.shouldTrackPosition) {
-      this.startTracking();
-    }
-
-    this._timeouts.push(setTimeout(() => {
-      if (this.state.positioned && typeof this.props.onPositioned === 'function') {
-        this.props.onPositioned({
-          top: this.state.style.top,
-          left: this.state.style.left,
-          placement: this.state.placement
-        });
-      }
-    }, 0));
-  };
-
   calculatePosition(props) {
     return calculateElementPosition(this._content, this._target, {
       placement: props.placement,
@@ -189,13 +178,6 @@ let Position = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     });
   }
 
-  position = () => {
-    this.setState({
-      positioned: true,
-      ...this.calculatePosition(this.props)
-    });
-  };
-
   startTracking() {
     this._listener = this._listener || addPositionChangeListener(this._target, this.position);
   }
@@ -267,6 +249,16 @@ let Position = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     }), this.renderTarget(), this.renderContent());
   }
 
-}) || _class) || _class) || _class);
+}, _class2.displayName = "Position", _class2.componentId = 'Position', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
+  placement: 'bottom center',
+  mountNode: null,
+  insertAt: 'bottom',
+  constrain: 'window',
+  offsetX: 0,
+  offsetY: 0,
+  shouldTrackPosition: true,
+  shouldPositionOverTarget: false,
+  children: null
+}, _class2.locatorAttribute = 'data-position', _class2.targetLocatorAttribute = 'data-position-target', _class2.contentLocatorAttribute = 'data-position-content', _class2)) || _class) || _class) || _class);
 export default Position;
 export { Position };

package/es/calculateElementPosition.js

@@ -58,6 +58,10 @@ class PositionedElement {
       top: 0,
       left: 0
     };
+    this.node = void 0;
+    this.placement = void 0;
+    this.rect = void 0;
+    this._offset = void 0;
     this.node = findDOMNode(element);
 
     if (typeof placement === 'string') {
@@ -72,11 +76,6 @@ class PositionedElement {
     this._offset = offsetToPx(offset, this.size);
   }
 
-  node;
-  placement;
-  rect;
-  _offset;
-
   get width() {
     return this.rect.width;
   }
@@ -227,6 +226,10 @@ class PositionedElement {
 
 class PositionData {
   constructor(element, target, options) {
+    this.options = void 0;
+    this.container = void 0;
+    this.element = void 0;
+    this.target = void 0;
     this.options = options || {};
     const _this$options = this.options,
           container = _this$options.container,
@@ -254,11 +257,6 @@ class PositionData {
     }
   }
 
-  options;
-  container;
-  element;
-  target;
-
   get offset() {
     const _this$target$calculat = this.target.calculateOffset(this.element.placement),
           top = _this$target$calculat.top,

package/lib/Position/index.js

@@ -41,7 +41,7 @@ var _props = require("./props");
 
 var _calculateElementPosition = require("../calculateElementPosition");
 
-var _dec, _dec2, _dec3, _class;
+var _dec, _dec2, _dec3, _class, _class2;
 
 /**
 ---
@@ -49,28 +49,50 @@ category: components/utilities
 ---
 @tsProps
 **/
-let Position = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = class Position extends _react.Component {
-  static displayName = "Position";
-  static componentId = 'Position';
-  static allowedProps = _props.allowedProps;
-  static propTypes = _props.propTypes;
-  static defaultProps = {
-    placement: 'bottom center',
-    mountNode: null,
-    insertAt: 'bottom',
-    constrain: 'window',
-    offsetX: 0,
-    offsetY: 0,
-    shouldTrackPosition: true,
-    shouldPositionOverTarget: false,
-    children: null
-  };
-  static locatorAttribute = 'data-position';
-  static targetLocatorAttribute = 'data-position-target';
-  static contentLocatorAttribute = 'data-position-content';
-
+let Position = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Position extends _react.Component {
   constructor(props) {
     super(props);
+    this.ref = null;
+    this._id = void 0;
+    this._timeouts = [];
+    this._listener = null;
+    this._content = void 0;
+    this._target = void 0;
+
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+
+    this.handlePortalOpen = () => {
+      this.position();
+
+      if (this.props.shouldTrackPosition) {
+        this.startTracking();
+      }
+
+      this._timeouts.push(setTimeout(() => {
+        if (this.state.positioned && typeof this.props.onPositioned === 'function') {
+          this.props.onPositioned({
+            top: this.state.style.top,
+            left: this.state.style.left,
+            placement: this.state.placement
+          });
+        }
+      }, 0));
+    };
+
+    this.position = () => {
+      this.setState({
+        positioned: true,
+        ...this.calculatePosition(this.props)
+      });
+    };
+
     this.state = {
       positioned: false,
       ...this.calculatePosition(props)
@@ -82,21 +104,6 @@ let Position = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     this._id = this.props.id || props.deterministicId();
   }
 
-  ref = null;
-  _id;
-  _timeouts = [];
-  _listener = null;
-  _content;
-  _target;
-  handleRef = el => {
-    const elementRef = this.props.elementRef;
-    this.ref = el;
-
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
-
   shouldComponentUpdate(nextProps, nextState, nextContext) {
     return !(0, _deepEqual.deepEqual)(this.state, nextState) || !(0, _shallowEqual.shallowEqual)(this.props, nextProps) || !(0, _shallowEqual.shallowEqual)(this.context, nextContext);
   }
@@ -165,24 +172,6 @@ let Position = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     }
   }
 
-  handlePortalOpen = () => {
-    this.position();
-
-    if (this.props.shouldTrackPosition) {
-      this.startTracking();
-    }
-
-    this._timeouts.push(setTimeout(() => {
-      if (this.state.positioned && typeof this.props.onPositioned === 'function') {
-        this.props.onPositioned({
-          top: this.state.style.top,
-          left: this.state.style.left,
-          placement: this.state.placement
-        });
-      }
-    }, 0));
-  };
-
   calculatePosition(props) {
     return (0, _calculateElementPosition.calculateElementPosition)(this._content, this._target, {
       placement: props.placement,
@@ -194,13 +183,6 @@ let Position = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     });
   }
 
-  position = () => {
-    this.setState({
-      positioned: true,
-      ...this.calculatePosition(this.props)
-    });
-  };
-
   startTracking() {
     this._listener = this._listener || (0, _addPositionChangeListener.addPositionChangeListener)(this._target, this.position);
   }
@@ -272,7 +254,17 @@ let Position = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     }), this.renderTarget(), this.renderContent());
   }
 
-}) || _class) || _class) || _class);
+}, _class2.displayName = "Position", _class2.componentId = 'Position', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
+  placement: 'bottom center',
+  mountNode: null,
+  insertAt: 'bottom',
+  constrain: 'window',
+  offsetX: 0,
+  offsetY: 0,
+  shouldTrackPosition: true,
+  shouldPositionOverTarget: false,
+  children: null
+}, _class2.locatorAttribute = 'data-position', _class2.targetLocatorAttribute = 'data-position-target', _class2.contentLocatorAttribute = 'data-position-content', _class2)) || _class) || _class) || _class);
 exports.Position = Position;
 var _default = Position;
 exports.default = _default;

package/lib/calculateElementPosition.js

@@ -82,6 +82,10 @@ class PositionedElement {
       top: 0,
       left: 0
     };
+    this.node = void 0;
+    this.placement = void 0;
+    this.rect = void 0;
+    this._offset = void 0;
     this.node = (0, _findDOMNode.findDOMNode)(element);
 
     if (typeof placement === 'string') {
@@ -96,11 +100,6 @@ class PositionedElement {
     this._offset = offsetToPx(offset, this.size);
   }
 
-  node;
-  placement;
-  rect;
-  _offset;
-
   get width() {
     return this.rect.width;
   }
@@ -251,6 +250,10 @@ class PositionedElement {
 
 class PositionData {
   constructor(element, target, options) {
+    this.options = void 0;
+    this.container = void 0;
+    this.element = void 0;
+    this.target = void 0;
     this.options = options || {};
     const _this$options = this.options,
           container = _this$options.container,
@@ -278,11 +281,6 @@ class PositionData {
     }
   }
 
-  options;
-  container;
-  element;
-  target;
-
   get offset() {
     const _this$target$calculat = this.target.calculateOffset(this.element.placement),
           top = _this$target$calculat.top,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-position",
-  "version": "8.25.1-snapshot-10",
+  "version": "8.25.1-snapshot-13",
   "description": "A component for positioning content with respect to a designated target.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,24 +24,24 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/debounce": "8.25.1-snapshot-10",
-    "@instructure/emotion": "8.25.1-snapshot-10",
-    "@instructure/shared-types": "8.25.1-snapshot-10",
-    "@instructure/ui-dom-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-portal": "8.25.1-snapshot-10",
-    "@instructure/ui-prop-types": "8.25.1-snapshot-10",
-    "@instructure/ui-react-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-testable": "8.25.1-snapshot-10",
-    "@instructure/ui-utils": "8.25.1-snapshot-10",
-    "@instructure/uid": "8.25.1-snapshot-10",
+    "@instructure/debounce": "8.25.1-snapshot-13",
+    "@instructure/emotion": "8.25.1-snapshot-13",
+    "@instructure/shared-types": "8.25.1-snapshot-13",
+    "@instructure/ui-dom-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-portal": "8.25.1-snapshot-13",
+    "@instructure/ui-prop-types": "8.25.1-snapshot-13",
+    "@instructure/ui-react-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-testable": "8.25.1-snapshot-13",
+    "@instructure/ui-utils": "8.25.1-snapshot-13",
+    "@instructure/uid": "8.25.1-snapshot-13",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.25.1-snapshot-10",
-    "@instructure/ui-color-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-test-locator": "8.25.1-snapshot-10",
-    "@instructure/ui-test-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-themes": "8.25.1-snapshot-10"
+    "@instructure/ui-babel-preset": "8.25.1-snapshot-13",
+    "@instructure/ui-color-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-test-locator": "8.25.1-snapshot-13",
+    "@instructure/ui-test-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-themes": "8.25.1-snapshot-13"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"