@instructure/ui-position 11.7.3-snapshot-7 → 11.7.3-snapshot-26

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.3-snapshot-7](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-7) (2026-04-29)
+## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
 
-**Note:** Version bump only for package @instructure/ui-position
+
+### Bug Fixes
+
+* **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
 
 
 

package/es/Position/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _Position;
+var _dec, _dec2, _class;
 /*
  * The MIT License (MIT)
  *
@@ -40,43 +40,26 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 category: components/utilities
 ---
 **/
-let Position = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = (_Position = class Position extends Component {
+let Position = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = class Position extends Component {
+  static displayName = "Position";
+  static componentId = 'Position';
+  static allowedProps = allowedProps;
+  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';
   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)
@@ -87,24 +70,38 @@ 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;
+    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);
   }
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
     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.makeStyles?.();
   }
   componentDidUpdate(prevProps, prevState) {
-    var _this$props$makeStyle2, _this$props2;
     this.position();
     this.toggleLocatorAttributes(true);
     if (this.props.shouldTrackPosition !== prevProps.shouldTrackPosition) {
       this.props.shouldTrackPosition ? this.startTracking() : this.stopTracking();
     }
-    const _this$state = this.state,
-      style = _this$state.style,
-      placement = _this$state.placement;
+    const {
+      style,
+      placement
+    } = this.state;
     if (style && prevState.style && (placement !== prevState.placement || style.top !== prevState.style.top || style.left !== prevState.style.left) && typeof this.props.onPositionChanged === 'function') {
       this.props.onPositionChanged({
         top: style.top,
@@ -112,7 +109,7 @@ let Position = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
         placement
       });
     }
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    this.props.makeStyles?.();
   }
   componentWillUnmount() {
     ;
@@ -140,6 +137,21 @@ 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,
@@ -150,6 +162,12 @@ let Position = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       over: props.shouldPositionOverTarget
     });
   }
+  position = () => {
+    this.setState({
+      positioned: true,
+      ...this.calculatePosition(this.props)
+    });
+  };
   startTracking() {
     this._listener = this._listener || addPositionChangeListener(this._target, this.position);
   }
@@ -164,14 +182,13 @@ let Position = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
   renderContent() {
     let content = ensureSingleChild(this.props.children);
     if (content) {
-      var _this$props$styles;
       content = safeCloneElement(content, {
         ref: el => {
           this._content = el;
         },
         style: {
           boxSizing: 'border-box',
-          zIndex: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.zIndex,
+          zIndex: this.props.styles?.zIndex,
           ...content.props.style,
           ...this.state.style
         },
@@ -205,28 +222,17 @@ let Position = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     return null;
   }
   render() {
-    var _this$props$styles2;
     const props = {
       [Position.locatorAttribute]: this._id
     };
     return _jsxs("span", {
       ...props,
-      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.position,
+      css: this.props.styles?.position,
       ref: this.handleRef,
       "data-cid": combineDataCid('Position', this.props),
       children: [this.renderTarget(), this.renderContent()]
     });
   }
-}, _Position.displayName = "Position", _Position.componentId = 'Position', _Position.allowedProps = allowedProps, _Position.defaultProps = {
-  placement: 'bottom center',
-  mountNode: null,
-  insertAt: 'bottom',
-  constrain: 'window',
-  offsetX: 0,
-  offsetY: 0,
-  shouldTrackPosition: true,
-  shouldPositionOverTarget: false,
-  children: null
-}, _Position.locatorAttribute = 'data-position', _Position.targetLocatorAttribute = 'data-position-target', _Position.contentLocatorAttribute = 'data-position-content', _Position)) || _class) || _class);
+}) || _class) || _class);
 export default Position;
 export { Position };

package/es/Position/theme.js

@@ -28,9 +28,11 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  const stacking = theme.stacking;
+  const {
+    stacking
+  } = theme;
   const componentVariables = {
-    zIndex: stacking === null || stacking === void 0 ? void 0 : stacking.topmost
+    zIndex: stacking?.topmost
   };
   return {
     ...componentVariables

package/es/calculateElementPosition.js

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 /*
  * The MIT License (MIT)
  *
@@ -74,10 +73,6 @@ 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') {
       this.placement = parsePlacement(placement);
@@ -89,6 +84,10 @@ class PositionedElement {
     this.rect = getBoundingClientRect(this.node);
     this._offset = offsetToPx(offset, this.size, this.node);
   }
+  node;
+  placement;
+  rect;
+  _offset;
   get width() {
     return this.rect.width;
   }
@@ -131,14 +130,10 @@ class PositionedElement {
       end: '100%',
       stretch: 0
     };
-    let _placement = _slicedToArray(placement, 2),
-      first = _placement[0],
-      second = _placement[1];
+    let [first, second] = placement;
     if (['start', 'end'].indexOf(first) >= 0) {
       ;
-      var _ref = [second, first];
-      first = _ref[0];
-      second = _ref[1];
+      [first, second] = [second, first];
     }
     let top = 0;
     let left = 0;
@@ -181,7 +176,7 @@ class PositionedElement {
     // 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 === null || doc === void 0 ? void 0 : doc.documentElement).top;
+    let offsetY = parents.length > 1 ? 0 : getBoundingClientRect(doc?.documentElement).top;
     let offsetX = 0;
     let scrollY = 0;
     for (let i = 1; i < parents.length; i++) {
@@ -189,7 +184,7 @@ class PositionedElement {
       const child = getBoundingClientRect(parents[i - 1]);
       offsetY = offsetY + (child.top - parent.top);
       offsetX = offsetX + (child.left - parent.left);
-      if (parents[i] === (doc === null || doc === void 0 ? void 0 : doc.body)) {
+      if (parents[i] === doc?.body) {
         // accounts for any margin on body
         offsetY = offsetY + parent.top;
         offsetX = offsetX + parent.left;
@@ -206,27 +201,22 @@ class PositionedElement {
     };
   }
   normalizeScrollTop(element) {
-    var _ownerDocument;
     // Account for cross browser differences with scrollTop attribute on the
     // body element https://bugs.chromium.org/p/chromium/issues/detail?id=766938
-    return ((_ownerDocument = ownerDocument(this.node)) === null || _ownerDocument === void 0 ? void 0 : _ownerDocument.body) === element ? 0 : element.scrollTop;
+    return ownerDocument(this.node)?.body === element ? 0 : element.scrollTop;
   }
 }
 class PositionData {
   constructor(element, target, options) {
-    var _ownerDocument2;
-    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,
-      constrain = _this$options.constrain,
-      placement = _this$options.placement,
-      over = _this$options.over;
+    const {
+      container,
+      constrain,
+      placement,
+      over
+    } = this.options;
     if (!element || placement === 'offscreen') return;
-    this.container = container || ((_ownerDocument2 = ownerDocument(element)) === null || _ownerDocument2 === void 0 ? void 0 : _ownerDocument2.body);
+    this.container = container || ownerDocument(element)?.body;
     this.element = new PositionedElement(element, placement, {
       top: this.options.offsetY,
       left: this.options.offsetX
@@ -244,10 +234,15 @@ class PositionData {
       this.constrainTo(findDOMNode(constrain));
     }
   }
+  options;
+  container;
+  element;
+  target;
   get offset() {
-    const _this$target$calculat = this.target.calculateOffset(this.element.placement),
-      top = _this$target$calculat.top,
-      left = _this$target$calculat.left;
+    const {
+      top,
+      left
+    } = this.target.calculateOffset(this.element.placement);
     const offset = addOffsets([this.element.calculateOffset(this.target.placement), this.element.scrollParentsOffset, this.element.positionedParentsOffset]);
     return {
       top: top - offset.top,
@@ -265,10 +260,11 @@ class PositionData {
   }
   get position() {
     const win = ownerWindow(this.target.node);
-    let _addOffsets = addOffsets([this.target.position, this.offset]),
-      left = _addOffsets.left,
-      top = _addOffsets.top;
-    if (canUseDOM && win !== null && win !== void 0 && win.matchMedia) {
+    let {
+      left,
+      top
+    } = addOffsets([this.target.position, this.offset]);
+    if (canUseDOM && 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);
@@ -283,9 +279,10 @@ class PositionData {
   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;
+    const {
+      width,
+      height
+    } = this.element.size;
     const elementNotFullyRendered = width === 0 && height === 0;
     return {
       top: 0,
@@ -434,8 +431,10 @@ function addOffsets(offsets) {
   });
 }
 function parseOffset(offset, placement) {
-  let top = offset.top,
-    left = offset.left;
+  let {
+    top,
+    left
+  } = offset;
   if (typeof left === 'string') {
     left = parseFloat(left);
   }
@@ -456,8 +455,10 @@ function parseOffset(offset, placement) {
 function offsetToPx(offset, size,
 // @ts-expect-error will be needed for the TODO below
 node) {
-  let left = offset.left,
-    top = offset.top;
+  let {
+    left,
+    top
+  } = offset;
   if (typeof left === 'string') {
     if (left.indexOf('%') !== -1) {
       left = parseFloat(left) / 100 * size.width;
@@ -480,14 +481,10 @@ node) {
   };
 }
 function sortPlacement(placement) {
-  let _placement2 = _slicedToArray(placement, 2),
-    first = _placement2[0],
-    second = _placement2[1];
+  let [first, second] = placement;
   if (first === 'center') {
     ;
-    var _ref2 = [second, first];
-    first = _ref2[0];
-    second = _ref2[1];
+    [first, second] = [second, first];
   }
   return [first, second];
 }

package/es/executeMirrorFunction.js

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 /*
  * The MIT License (MIT)
  *
@@ -24,10 +23,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  */
 
 function executeMirrorFunction(placement, mirrorFunction, delimiter) {
-  const _ref = Array.isArray(placement) ? placement : placement.split(' '),
-    _ref2 = _slicedToArray(_ref, 2),
-    first = _ref2[0],
-    second = _ref2[1];
+  const [first, second] = Array.isArray(placement) ? placement : placement.split(' ');
   const result = mirrorFunction(first, second).filter(value => value);
   return delimiter ? result.join(delimiter) : result;
 }

package/lib/Position/index.js

@@ -23,7 +23,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _calculateElementPosition = require("../calculateElementPosition");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _dec2, _class, _Position;
+var _dec, _dec2, _class;
 /*
  * The MIT License (MIT)
  *
@@ -52,43 +52,26 @@ var _dec, _dec2, _class, _Position;
 category: components/utilities
 ---
 **/
-let Position = exports.Position = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_Position = class Position extends _react.Component {
+let Position = exports.Position = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = _dec2(_class = class Position extends _react.Component {
+  static displayName = "Position";
+  static componentId = 'Position';
+  static allowedProps = _props.allowedProps;
+  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';
   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)
@@ -99,24 +82,38 @@ let Position = exports.Position = (_dec = (0, _withDeterministicId.withDetermini
     });
     this._id = this.props.id || props.deterministicId();
   }
+  ref = null;
+  _id;
+  _timeouts = [];
+  _listener = null;
+  _content;
+  _target;
+  handleRef = el => {
+    const {
+      elementRef
+    } = this.props;
+    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);
   }
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
     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.makeStyles?.();
   }
   componentDidUpdate(prevProps, prevState) {
-    var _this$props$makeStyle2, _this$props2;
     this.position();
     this.toggleLocatorAttributes(true);
     if (this.props.shouldTrackPosition !== prevProps.shouldTrackPosition) {
       this.props.shouldTrackPosition ? this.startTracking() : this.stopTracking();
     }
-    const _this$state = this.state,
-      style = _this$state.style,
-      placement = _this$state.placement;
+    const {
+      style,
+      placement
+    } = this.state;
     if (style && prevState.style && (placement !== prevState.placement || style.top !== prevState.style.top || style.left !== prevState.style.left) && typeof this.props.onPositionChanged === 'function') {
       this.props.onPositionChanged({
         top: style.top,
@@ -124,7 +121,7 @@ let Position = exports.Position = (_dec = (0, _withDeterministicId.withDetermini
         placement
       });
     }
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+    this.props.makeStyles?.();
   }
   componentWillUnmount() {
     ;
@@ -152,6 +149,21 @@ let Position = exports.Position = (_dec = (0, _withDeterministicId.withDetermini
       }
     }
   }
+  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,
@@ -162,6 +174,12 @@ let Position = exports.Position = (_dec = (0, _withDeterministicId.withDetermini
       over: props.shouldPositionOverTarget
     });
   }
+  position = () => {
+    this.setState({
+      positioned: true,
+      ...this.calculatePosition(this.props)
+    });
+  };
   startTracking() {
     this._listener = this._listener || (0, _addPositionChangeListener.addPositionChangeListener)(this._target, this.position);
   }
@@ -176,14 +194,13 @@ let Position = exports.Position = (_dec = (0, _withDeterministicId.withDetermini
   renderContent() {
     let content = (0, _ensureSingleChild.ensureSingleChild)(this.props.children);
     if (content) {
-      var _this$props$styles;
       content = (0, _safeCloneElement.safeCloneElement)(content, {
         ref: el => {
           this._content = el;
         },
         style: {
           boxSizing: 'border-box',
-          zIndex: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.zIndex,
+          zIndex: this.props.styles?.zIndex,
           ...content.props.style,
           ...this.state.style
         },
@@ -217,27 +234,16 @@ let Position = exports.Position = (_dec = (0, _withDeterministicId.withDetermini
     return null;
   }
   render() {
-    var _this$props$styles2;
     const props = {
       [Position.locatorAttribute]: this._id
     };
     return (0, _jsxRuntime.jsxs)("span", {
       ...props,
-      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.position,
+      css: this.props.styles?.position,
       ref: this.handleRef,
       "data-cid": (0, _combineDataCid.combineDataCid)('Position', this.props),
       children: [this.renderTarget(), this.renderContent()]
     });
   }
-}, _Position.displayName = "Position", _Position.componentId = 'Position', _Position.allowedProps = _props.allowedProps, _Position.defaultProps = {
-  placement: 'bottom center',
-  mountNode: null,
-  insertAt: 'bottom',
-  constrain: 'window',
-  offsetX: 0,
-  offsetY: 0,
-  shouldTrackPosition: true,
-  shouldPositionOverTarget: false,
-  children: null
-}, _Position.locatorAttribute = 'data-position', _Position.targetLocatorAttribute = 'data-position-target', _Position.contentLocatorAttribute = 'data-position-content', _Position)) || _class) || _class);
+}) || _class) || _class);
 var _default = exports.default = Position;

package/lib/Position/theme.js

@@ -34,9 +34,11 @@ exports.default = void 0;
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  const stacking = theme.stacking;
+  const {
+    stacking
+  } = theme;
   const componentVariables = {
-    zIndex: stacking === null || stacking === void 0 ? void 0 : stacking.topmost
+    zIndex: stacking?.topmost
   };
   return {
     ...componentVariables