@instructure/ui-position 8.10.1 → 8.10.3-snapshot.3

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.10.2](https://github.com/instructure/instructure-ui/compare/v8.10.1...v8.10.2) (2021-10-01)
+
+**Note:** Version bump only for package @instructure/ui-position
+
 ## [8.10.1](https://github.com/instructure/instructure-ui/compare/v8.10.0...v8.10.1) (2021-10-01)
 
 **Note:** Version bump only for package @instructure/ui-position

package/LICENSE.md

@@ -0,0 +1,27 @@
+---
+title: The MIT License (MIT)
+category: Getting Started
+order: 9
+---
+
+# The MIT License (MIT)
+
+Copyright (c) 2015 Instructure, Inc.
+
+**Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions.**
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/es/Position/index.js

@@ -48,12 +48,20 @@ category: components/utilities
 let Position = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _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 => {
+      var _this$props$elementRe, _this$props;
+
+      this.ref = el;
+      (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
+    };
+
     this.handlePortalOpen = () => {
       this.position();
 
@@ -95,14 +103,14 @@ let Position = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
   }
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
+    var _this$props$makeStyle, _this$props2;
 
     this.toggleLocatorAttributes(true);
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
   }
 
   componentDidUpdate(prevProps, prevState) {
-    var _this$props$makeStyle2, _this$props3;
+    var _this$props$makeStyle2, _this$props4;
 
     this.position();
     this.toggleLocatorAttributes(true);
@@ -116,16 +124,16 @@ let Position = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
           placement = _this$state.placement;
 
     if (style && prevState.style && (placement !== prevState.placement || style.top !== prevState.style.top || style.left !== prevState.style.left)) {
-      var _this$props$onPositio, _this$props2;
+      var _this$props$onPositio, _this$props3;
 
-      (_this$props$onPositio = (_this$props2 = this.props).onPositionChanged) === null || _this$props$onPositio === void 0 ? void 0 : _this$props$onPositio.call(_this$props2, {
+      (_this$props$onPositio = (_this$props3 = this.props).onPositionChanged) === null || _this$props$onPositio === void 0 ? void 0 : _this$props$onPositio.call(_this$props3, {
         top: style.top,
         left: style.left,
         placement
       });
     }
 
-    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
   }
 
   componentWillUnmount() {
@@ -181,7 +189,8 @@ let Position = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
 
       this._listener = null;
     }
-  }
+  } // content that needs to be positioned relative to the target
+
 
   renderContent() {
     let content = ensureSingleChild(this.props.children);
@@ -236,7 +245,9 @@ let Position = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
     const props = {
       [Position.locatorAttribute]: this._id
     };
-    return jsx("span", props, this.renderTarget(), this.renderContent());
+    return jsx("span", Object.assign({}, props, {
+      ref: this.handleRef
+    }), this.renderTarget(), this.renderContent());
   }
 
 }, _class2.displayName = "Position", _class2.componentId = 'Position', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {

package/es/Position/props.js

@@ -38,7 +38,8 @@ const propTypes = {
   shouldPositionOverTarget: PropTypes.bool,
   onPositionChanged: PropTypes.func,
   onPositioned: PropTypes.func,
-  children: PropTypes.node
+  children: PropTypes.node,
+  elementRef: PropTypes.func
 };
-const allowedProps = ['renderTarget', 'target', 'placement', 'mountNode', 'insertAt', 'constrain', 'offsetX', 'offsetY', 'id', 'shouldTrackPosition', 'shouldPositionOverTarget', 'onPositionChanged', 'onPositioned', 'children'];
+const allowedProps = ['renderTarget', 'target', 'placement', 'mountNode', 'insertAt', 'constrain', 'offsetX', 'offsetY', 'id', 'shouldTrackPosition', 'shouldPositionOverTarget', 'onPositionChanged', 'onPositioned', 'children', 'elementRef'];
 export { propTypes, allowedProps };

package/lib/Position/index.js

@@ -52,12 +52,20 @@ category: components/utilities
 let Position = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _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 => {
+      var _this$props$elementRe, _this$props;
+
+      this.ref = el;
+      (_this$props$elementRe = (_this$props = this.props).elementRef) === null || _this$props$elementRe === void 0 ? void 0 : _this$props$elementRe.call(_this$props, el);
+    };
+
     this.handlePortalOpen = () => {
       this.position();
 
@@ -99,14 +107,14 @@ let Position = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
   }
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
+    var _this$props$makeStyle, _this$props2;
 
     this.toggleLocatorAttributes(true);
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
   }
 
   componentDidUpdate(prevProps, prevState) {
-    var _this$props$makeStyle2, _this$props3;
+    var _this$props$makeStyle2, _this$props4;
 
     this.position();
     this.toggleLocatorAttributes(true);
@@ -120,16 +128,16 @@ let Position = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
           placement = _this$state.placement;
 
     if (style && prevState.style && (placement !== prevState.placement || style.top !== prevState.style.top || style.left !== prevState.style.left)) {
-      var _this$props$onPositio, _this$props2;
+      var _this$props$onPositio, _this$props3;
 
-      (_this$props$onPositio = (_this$props2 = this.props).onPositionChanged) === null || _this$props$onPositio === void 0 ? void 0 : _this$props$onPositio.call(_this$props2, {
+      (_this$props$onPositio = (_this$props3 = this.props).onPositionChanged) === null || _this$props$onPositio === void 0 ? void 0 : _this$props$onPositio.call(_this$props3, {
         top: style.top,
         left: style.left,
         placement
       });
     }
 
-    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
   }
 
   componentWillUnmount() {
@@ -185,7 +193,8 @@ let Position = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
 
       this._listener = null;
     }
-  }
+  } // content that needs to be positioned relative to the target
+
 
   renderContent() {
     let content = (0, _ensureSingleChild.ensureSingleChild)(this.props.children);
@@ -240,7 +249,9 @@ let Position = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
     const props = {
       [Position.locatorAttribute]: this._id
     };
-    return (0, _emotion.jsx)("span", props, this.renderTarget(), this.renderContent());
+    return (0, _emotion.jsx)("span", Object.assign({}, props, {
+      ref: this.handleRef
+    }), this.renderTarget(), this.renderContent());
   }
 
 }, _class2.displayName = "Position", _class2.componentId = 'Position', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {

package/lib/Position/props.js

@@ -50,8 +50,9 @@ const propTypes = {
   shouldPositionOverTarget: _propTypes.default.bool,
   onPositionChanged: _propTypes.default.func,
   onPositioned: _propTypes.default.func,
-  children: _propTypes.default.node
+  children: _propTypes.default.node,
+  elementRef: _propTypes.default.func
 };
 exports.propTypes = propTypes;
-const allowedProps = ['renderTarget', 'target', 'placement', 'mountNode', 'insertAt', 'constrain', 'offsetX', 'offsetY', 'id', 'shouldTrackPosition', 'shouldPositionOverTarget', 'onPositionChanged', 'onPositioned', 'children'];
+const allowedProps = ['renderTarget', 'target', 'placement', 'mountNode', 'insertAt', 'constrain', 'offsetX', 'offsetY', 'id', 'shouldTrackPosition', 'shouldPositionOverTarget', 'onPositionChanged', 'onPositioned', 'children', 'elementRef'];
 exports.allowedProps = allowedProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-position",
-  "version": "8.10.1",
+  "version": "8.10.3-snapshot.3+2ee813492",
   "description": "A component for positioning content with respect to a designated target.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,24 +25,24 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/debounce": "8.10.1",
-    "@instructure/emotion": "8.10.1",
-    "@instructure/shared-types": "8.10.1",
-    "@instructure/ui-dom-utils": "8.10.1",
-    "@instructure/ui-portal": "8.10.1",
-    "@instructure/ui-prop-types": "8.10.1",
-    "@instructure/ui-react-utils": "8.10.1",
-    "@instructure/ui-testable": "8.10.1",
-    "@instructure/ui-utils": "8.10.1",
-    "@instructure/uid": "8.10.1",
+    "@instructure/debounce": "8.10.3-snapshot.3+2ee813492",
+    "@instructure/emotion": "8.10.3-snapshot.3+2ee813492",
+    "@instructure/shared-types": "8.10.3-snapshot.3+2ee813492",
+    "@instructure/ui-dom-utils": "8.10.3-snapshot.3+2ee813492",
+    "@instructure/ui-portal": "8.10.3-snapshot.3+2ee813492",
+    "@instructure/ui-prop-types": "8.10.3-snapshot.3+2ee813492",
+    "@instructure/ui-react-utils": "8.10.3-snapshot.3+2ee813492",
+    "@instructure/ui-testable": "8.10.3-snapshot.3+2ee813492",
+    "@instructure/ui-utils": "8.10.3-snapshot.3+2ee813492",
+    "@instructure/uid": "8.10.3-snapshot.3+2ee813492",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.10.1",
-    "@instructure/ui-color-utils": "8.10.1",
-    "@instructure/ui-test-locator": "8.10.1",
-    "@instructure/ui-test-utils": "8.10.1",
-    "@instructure/ui-themes": "8.10.1"
+    "@instructure/ui-babel-preset": "8.10.3-snapshot.3+2ee813492",
+    "@instructure/ui-color-utils": "8.10.3-snapshot.3+2ee813492",
+    "@instructure/ui-test-locator": "8.10.3-snapshot.3+2ee813492",
+    "@instructure/ui-test-utils": "8.10.3-snapshot.3+2ee813492",
+    "@instructure/ui-themes": "8.10.3-snapshot.3+2ee813492"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -50,5 +50,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "gitHead": "2ee8134925b02efbc5d39662a8b1edb2c83a420d"
 }

package/src/Position/index.tsx

@@ -100,12 +100,18 @@ class Position extends Component<PositionProps, PositionState> {
     this._id = this.props.id || uid('Position')
   }
 
+  ref: Element | null = null
   _id: string
   _timeouts: NodeJS.Timeout[] = []
   _listener: PositionChangeListenerType | null = null
   _content?: PositionElement
   _target?: PositionElement
 
+  handleRef = (el: Element | null) => {
+    this.ref = el
+    this.props.elementRef?.(el)
+  }
+
   shouldComponentUpdate(
     nextProps: PositionProps,
     nextState: PositionState,
@@ -246,6 +252,7 @@ class Position extends Component<PositionProps, PositionState> {
     }
   }
 
+  // content that needs to be positioned relative to the target
   renderContent() {
     let content = ensureSingleChild(this.props.children)
 
@@ -298,7 +305,7 @@ class Position extends Component<PositionProps, PositionState> {
   render() {
     const props = { [Position.locatorAttribute]: this._id }
     return (
-      <span {...props}>
+      <span {...props} ref={this.handleRef}>
         {this.renderTarget()}
         {this.renderContent()}
       </span>

package/src/Position/props.ts

@@ -111,6 +111,11 @@ type PositionOwnProps = {
    * The content to be positioned
    */
   children?: React.ReactNode
+
+  /**
+   * Provides a reference to the underlying HTML root element (the target)
+   */
+  elementRef?: (element: Element | null) => void
 }
 
 type PositionState = {
@@ -127,7 +132,8 @@ type PropKeys = keyof PositionOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type PositionProps = PositionOwnProps & WithStyleProps<PositionTheme, PositionStyle>
+type PositionProps = PositionOwnProps &
+  WithStyleProps<PositionTheme, PositionStyle>
 
 const propTypes: PropValidators<PropKeys> = {
   renderTarget: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
@@ -143,7 +149,8 @@ const propTypes: PropValidators<PropKeys> = {
   shouldPositionOverTarget: PropTypes.bool,
   onPositionChanged: PropTypes.func,
   onPositioned: PropTypes.func,
-  children: PropTypes.node
+  children: PropTypes.node,
+  elementRef: PropTypes.func
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -160,7 +167,8 @@ const allowedProps: AllowedPropKeys = [
   'shouldPositionOverTarget',
   'onPositionChanged',
   'onPositioned',
-  'children'
+  'children',
+  'elementRef'
 ]
 
 export type { PositionProps, PositionState, PositionStyle }