@instructure/ui-popover 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-popover
+
+### 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/Popover/v1/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _dec3, _class, _Popover;
+var _dec, _dec2, _dec3, _class;
 /*
  * The MIT License (MIT)
  *
@@ -45,144 +45,41 @@ category: components
 tags: overlay, portal, dialog
 ---
 **/
-let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsumer(), _dec3 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = _dec3(_class = (_Popover = class Popover extends Component {
+let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsumer(), _dec3 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = _dec3(_class = class Popover extends Component {
+  static displayName = "Popover";
+  static componentId = 'Popover';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    defaultIsShowingContent: false,
+    placement: 'bottom center',
+    stacking: 'topmost',
+    shadow: 'resting',
+    offsetX: 0,
+    offsetY: 0,
+    color: 'primary',
+    on: ['hover', 'focus'],
+    withArrow: true,
+    constrain: 'window',
+    insertAt: 'bottom',
+    shouldAlignArrow: false,
+    shouldTrackPosition: true,
+    shouldRenderOffscreen: false,
+    shouldContainFocus: false,
+    shouldReturnFocus: true,
+    shouldCloseOnDocumentClick: true,
+    shouldFocusContentOnTriggerBlur: false,
+    shouldCloseOnEscape: true,
+    shouldSetAriaExpanded: true
+  };
   constructor(props) {
     super(props);
-    this._handleMouseOver = void 0;
-    this._handleMouseOut = void 0;
-    this._id = void 0;
-    this._raf = [];
-    this._trigger = null;
-    this._view = null;
-    this._dialog = null;
-    this._contentElement = null;
-    this._focusRegion = void 0;
-    // renderTrigger needs to be a variable because if it's a function it will
-    // recreate the trigger on each render which will trigger MouseOver events
-    // that will make the tooltip reappear and the trigger cannot accept
-    // onClick events (since the state change caused by MouseDown recreates it)
-    this._renderTrigger = void 0;
-    this._renderTriggerProp = void 0;
-    this.mouseOutTimeout = void 0;
-    this.ref = null;
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-    this.show = event => {
-      var _this$props$onShowCon, _this$props;
-      if (typeof this.props.isShowingContent === 'undefined') {
-        this.setState({
-          isShowingContent: true
-        });
-      }
-      (_this$props$onShowCon = (_this$props = this.props).onShowContent) === null || _this$props$onShowCon === void 0 ? void 0 : _this$props$onShowCon.call(_this$props, event);
-    };
-    this.hide = (event, documentClick = false) => {
-      const _this$props2 = this.props,
-        onHideContent = _this$props2.onHideContent,
-        isShowingContent = _this$props2.isShowingContent;
-      if (typeof isShowingContent === 'undefined') {
-        // uncontrolled, set state, fire callbacks
-        this.setState(({
-          isShowingContent
-        }) => {
-          if (isShowingContent) {
-            onHideContent === null || onHideContent === void 0 ? void 0 : onHideContent(event, {
-              documentClick
-            });
-          }
-          return {
-            isShowingContent: false
-          };
-        });
-      } else if (isShowingContent) {
-        // controlled, fire callback
-        onHideContent === null || onHideContent === void 0 ? void 0 : onHideContent(event, {
-          documentClick
-        });
-      }
-    };
-    this.toggle = event => {
-      if (this.shown) {
-        this.hide(event);
-      } else {
-        this.show(event);
-      }
-    };
-    this.handleDialogDismiss = (event, documentClick) => {
-      if (!this.props.shouldReturnFocus && this.props.shouldFocusContentOnTriggerBlur) {
-        const trigger = findDOMNode(this._trigger);
-        if (trigger && typeof trigger.focus === 'function') {
-          ;
-          trigger.focus();
-        }
-      }
-      this.hide(event, documentClick);
-    };
-    this.handleDialogBlur = event => {
-      if (event.keyCode === keycode.codes.tab && event.shiftKey && this.props.shouldFocusContentOnTriggerBlur) {
-        return;
-      }
-      this.hide(event);
-    };
-    this.handleTriggerKeyDown = event => {
-      if (!this.props.shouldFocusContentOnTriggerBlur) {
-        return;
-      }
-      if (event.keyCode === keycode.codes.tab && !event.shiftKey) {
-        event.preventDefault();
-        this._raf.push(requestAnimationFrame(() => {
-          this._dialog && this._dialog.focus();
-        }));
-      }
-    };
-    this.handleTriggerKeyUp = event => {
-      if (event.keyCode === keycode.codes.esc && this.shown && this.isTooltip) {
-        // if popover is tooltip, it is managing its own focus region so we need
-        // to prevent esc keyup event from reaching FocusRegionManager
-        event.preventDefault();
-        this.hide(event);
-      }
-    };
-    this.handleTriggerBlur = event => {
-      const on = this.props.on;
-      if (on && on.indexOf('focus') > -1) {
-        this._raf.push(requestAnimationFrame(() => {
-          if (!containsActiveElement(this._view)) {
-            this.hide(event);
-          }
-        }));
-      }
-    };
-    this.handlePositioned = position => {
-      var _this$props$onPositio, _this$props3;
-      const placement = position.placement;
-      this.setState({
-        placement,
-        ...this.computeOffsets(placement)
-      });
-      (_this$props$onPositio = (_this$props3 = this.props).onPositioned) === null || _this$props$onPositio === void 0 ? void 0 : _this$props$onPositio.call(_this$props3, position);
-    };
-    this.handlePositionChanged = position => {
-      var _this$props$onPositio2, _this$props4;
-      const placement = position.placement;
-      this.setState({
-        placement,
-        ...this.computeOffsets(placement)
-      });
-      (_this$props$onPositio2 = (_this$props4 = this.props).onPositionChanged) === null || _this$props$onPositio2 === void 0 ? void 0 : _this$props$onPositio2.call(_this$props4, position);
-    };
     this._renderTriggerProp = this.props.renderTrigger;
     this._renderTrigger = callRenderProp(this.props.renderTrigger);
     this.state = {
       placement: props.placement,
       offsetX: props.offsetX,
       offsetY: props.offsetY,
-      isShowingContent: typeof props.isShowingContent === 'undefined' ? props.defaultIsShowingContent : void 0
+      isShowingContent: typeof props.isShowingContent === 'undefined' ? props.defaultIsShowingContent : undefined
     };
     this._id = this.props.id || props.deterministicId();
     this._raf = [];
@@ -197,6 +94,32 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
       }, 1);
     });
   }
+  _handleMouseOver;
+  _handleMouseOut;
+  _id;
+  _raf = [];
+  _trigger = null;
+  _view = null;
+  _dialog = null;
+  _contentElement = null;
+  _focusRegion;
+  // renderTrigger needs to be a variable because if it's a function it will
+  // recreate the trigger on each render which will trigger MouseOver events
+  // that will make the tooltip reappear and the trigger cannot accept
+  // onClick events (since the state change caused by MouseDown recreates it)
+  _renderTrigger;
+  _renderTriggerProp;
+  mouseOutTimeout;
+  ref = null;
+  handleRef = el => {
+    const {
+      elementRef
+    } = this.props;
+    this.ref = el;
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
   get isTooltip() {
     return this.props.shouldRenderOffscreen && !this.props.shouldReturnFocus && !this.props.shouldContainFocus && !this.props.shouldFocusContentOnTriggerBlur;
   }
@@ -256,19 +179,19 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
    * Offsets the popover by the arrow size
    */
   computeOffsets(placement) {
-    let _this$props5 = this.props,
-      offsetX = _this$props5.offsetX,
-      offsetY = _this$props5.offsetY;
+    let {
+      offsetX,
+      offsetY
+    } = this.props;
     if (this.props.shouldAlignArrow && this._view) {
       const secondaryPlacement = parsePlacement(placement)[1];
 
       // arrowSize and arrowBorderWidth are component theme variables
       // declared in ContextView's styles.js
-      const _ref = this._view.props.styles,
-        _ref$arrowSize = _ref.arrowSize,
-        arrowSize = _ref$arrowSize === void 0 ? 0 : _ref$arrowSize,
-        _ref$arrowBorderWidth = _ref.arrowBorderWidth,
-        arrowBorderWidth = _ref$arrowBorderWidth === void 0 ? 0 : _ref$arrowBorderWidth;
+      const {
+        arrowSize = 0,
+        arrowBorderWidth = 0
+      } = this._view.props.styles;
       const offsetAmount = (px(arrowSize) + px(arrowBorderWidth)) * 2;
       if (secondaryPlacement === 'start') {
         offsetX = offsetAmount;
@@ -286,8 +209,12 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
     };
   }
   get placement() {
-    let placement = this.props.placement;
-    const dir = this.props.dir;
+    let {
+      placement
+    } = this.props;
+    const {
+      dir
+    } = this.props;
     const isRtl = dir === textDirectionContextConsumer.DIRECTION.rtl;
     if (isRtl) {
       placement = mirrorHorizontalPlacement(placement, ' ');
@@ -316,6 +243,110 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
   get defaultFocusElement() {
     return this.props.defaultFocusElement;
   }
+  show = event => {
+    if (typeof this.props.isShowingContent === 'undefined') {
+      this.setState({
+        isShowingContent: true
+      });
+    }
+    this.props.onShowContent?.(event);
+  };
+  hide = (event, documentClick = false) => {
+    const {
+      onHideContent,
+      isShowingContent
+    } = this.props;
+    if (typeof isShowingContent === 'undefined') {
+      // uncontrolled, set state, fire callbacks
+      this.setState(({
+        isShowingContent
+      }) => {
+        if (isShowingContent) {
+          onHideContent?.(event, {
+            documentClick
+          });
+        }
+        return {
+          isShowingContent: false
+        };
+      });
+    } else if (isShowingContent) {
+      // controlled, fire callback
+      onHideContent?.(event, {
+        documentClick
+      });
+    }
+  };
+  toggle = event => {
+    if (this.shown) {
+      this.hide(event);
+    } else {
+      this.show(event);
+    }
+  };
+  handleDialogDismiss = (event, documentClick) => {
+    if (!this.props.shouldReturnFocus && this.props.shouldFocusContentOnTriggerBlur) {
+      const trigger = findDOMNode(this._trigger);
+      if (trigger && typeof trigger.focus === 'function') {
+        ;
+        trigger.focus();
+      }
+    }
+    this.hide(event, documentClick);
+  };
+  handleDialogBlur = event => {
+    if (event.keyCode === keycode.codes.tab && event.shiftKey && this.props.shouldFocusContentOnTriggerBlur) {
+      return;
+    }
+    this.hide(event);
+  };
+  handleTriggerKeyDown = event => {
+    if (!this.props.shouldFocusContentOnTriggerBlur) {
+      return;
+    }
+    if (event.keyCode === keycode.codes.tab && !event.shiftKey) {
+      event.preventDefault();
+      this._raf.push(requestAnimationFrame(() => {
+        this._dialog && this._dialog.focus();
+      }));
+    }
+  };
+  handleTriggerKeyUp = event => {
+    if (event.keyCode === keycode.codes.esc && this.shown && this.isTooltip) {
+      // if popover is tooltip, it is managing its own focus region so we need
+      // to prevent esc keyup event from reaching FocusRegionManager
+      event.preventDefault();
+      this.hide(event);
+    }
+  };
+  handleTriggerBlur = event => {
+    const {
+      on
+    } = this.props;
+    if (on && on.indexOf('focus') > -1) {
+      this._raf.push(requestAnimationFrame(() => {
+        if (!containsActiveElement(this._view)) {
+          this.hide(event);
+        }
+      }));
+    }
+  };
+  handlePositioned = position => {
+    const placement = position.placement;
+    this.setState({
+      placement,
+      ...this.computeOffsets(placement)
+    });
+    this.props.onPositioned?.(position);
+  };
+  handlePositionChanged = position => {
+    const placement = position.placement;
+    this.setState({
+      placement,
+      ...this.computeOffsets(placement)
+    });
+    this.props.onPositionChanged?.(position);
+  };
   renderTrigger() {
     if (this._renderTriggerProp != this.props.renderTrigger) {
       this._renderTriggerProp = this.props.renderTrigger;
@@ -323,11 +354,13 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
     }
     let trigger = this._renderTrigger;
     if (trigger) {
-      const on = this.props.on;
-      let onClick = void 0;
-      let onFocus = void 0;
-      let onMouseOut = void 0;
-      let onMouseOver = void 0;
+      const {
+        on
+      } = this.props;
+      let onClick = undefined;
+      let onFocus = undefined;
+      let onMouseOut = undefined;
+      let onMouseOver = undefined;
       let expanded;
       if (on && on.indexOf('click') > -1) {
         onClick = event => {
@@ -353,7 +386,7 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
           expanded = this.props['aria-expanded'];
         }
       } else {
-        expanded = void 0;
+        expanded = undefined;
       }
       trigger = safeCloneElement(trigger, {
         ref: el => {
@@ -402,9 +435,8 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
         // TODO: try to type `ref` better, LegacyRef<T> was not compatible
         ref: c => this._view = c,
         elementRef: el => {
-          var _this$props$contentRe, _this$props6;
           this._contentElement = el;
-          (_this$props$contentRe = (_this$props6 = this.props).contentRef) === null || _this$props$contentRe === void 0 ? void 0 : _this$props$contentRe.call(_this$props6, el);
+          this.props.contentRef?.(el);
         },
         background: color,
         stacking: this.props.stacking,
@@ -419,8 +451,12 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
           onMouseOut: this._handleMouseOut
         };
       }
-      const placement = this.state.placement;
-      const styles = this.props.styles;
+      const {
+        placement
+      } = this.state;
+      const {
+        styles
+      } = this.props;
       if (this.props.withArrow) {
         viewProps = {
           ...viewProps,
@@ -430,7 +466,7 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
         };
         return _jsx(ContextView, {
           ...viewProps,
-          borderColor: styles === null || styles === void 0 ? void 0 : styles.borderColor,
+          borderColor: styles?.borderColor,
           children: content
         });
       } else {
@@ -444,7 +480,7 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
         };
         return _jsx(View, {
           ...viewProps,
-          borderColor: styles === null || styles === void 0 ? void 0 : styles.borderColor,
+          borderColor: styles?.borderColor,
           children: content
         });
       }
@@ -473,27 +509,6 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
       });
     }
   }
-}, _Popover.displayName = "Popover", _Popover.componentId = 'Popover', _Popover.allowedProps = allowedProps, _Popover.defaultProps = {
-  defaultIsShowingContent: false,
-  placement: 'bottom center',
-  stacking: 'topmost',
-  shadow: 'resting',
-  offsetX: 0,
-  offsetY: 0,
-  color: 'primary',
-  on: ['hover', 'focus'],
-  withArrow: true,
-  constrain: 'window',
-  insertAt: 'bottom',
-  shouldAlignArrow: false,
-  shouldTrackPosition: true,
-  shouldRenderOffscreen: false,
-  shouldContainFocus: false,
-  shouldReturnFocus: true,
-  shouldCloseOnDocumentClick: true,
-  shouldFocusContentOnTriggerBlur: false,
-  shouldCloseOnEscape: true,
-  shouldSetAriaExpanded: true
-}, _Popover)) || _class) || _class) || _class);
+}) || _class) || _class) || _class);
 export default Popover;
 export { Popover };

package/es/Popover/v1/theme.js

@@ -28,10 +28,11 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts;
-  const colors = theme.colors;
+  const {
+    colors
+  } = theme;
   const componentVariables = {
-    borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey3045
+    borderColor: colors?.contrasts?.grey3045
   };
   return {
     ...componentVariables