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

@@ -1,4 +1,4 @@
-var _dec, _class, _Mask;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -37,34 +37,23 @@ category: components/utilities
 ---
 **/
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-let Mask = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Mask = class Mask extends Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this.handleElementRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-    // It can be a ref for any type of child
-    this._content = void 0;
-    this.contentRef = el => {
-      this._content = el;
-    };
-  }
+let Mask = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class Mask extends Component {
+  static displayName = "Mask";
+  static componentId = 'Mask';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    placement: 'center',
+    fullscreen: false
+  };
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
-    (_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?.();
     if (this.props.fullscreen) {
       noScroll.on();
       MaskCounter.incrementCounter();
     }
   }
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
-    (_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() {
     if (this.props.fullscreen) {
@@ -74,14 +63,29 @@ let Mask = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       }
     }
   }
+  ref = null;
+  handleElementRef = el => {
+    const {
+      elementRef
+    } = this.props;
+    this.ref = el;
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
+
+  // It can be a ref for any type of child
+  _content;
+  contentRef = el => {
+    this._content = el;
+  };
   render() {
-    var _this$props$styles;
     const content = ensureSingleChild(this.props.children, {
       ref: this.contentRef
     });
     const props = {
       ...omitProps(this.props, Mask.allowedProps),
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.mask,
+      css: this.props.styles?.mask,
       ref: this.handleElementRef
     };
     if (typeof this.props.onClick === 'function') {
@@ -93,9 +97,6 @@ let Mask = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       children: content
     });
   }
-}, _Mask.displayName = "Mask", _Mask.componentId = 'Mask', _Mask.allowedProps = allowedProps, _Mask.defaultProps = {
-  placement: 'center',
-  fullscreen: false
-}, _Mask)) || _class);
+}) || _class);
 export default Mask;
 export { Mask };

package/es/Mask/v1/styles.js

@@ -33,8 +33,10 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const placement = props.placement,
-    fullscreen = props.fullscreen;
+  const {
+    placement,
+    fullscreen
+  } = props;
   const positionStyles = fullscreen ? {
     position: 'fixed'
   } : {

package/es/Mask/v1/theme.js

@@ -28,11 +28,12 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts;
-  const colors = theme.colors,
-    borders = theme.borders,
-    stacking = theme.stacking,
-    themeName = theme.key;
+  const {
+    colors,
+    borders,
+    stacking,
+    key: themeName
+  } = theme;
   const themeSpecificStyle = {
     canvas: {
       focusBorderColor: theme['ic-brand-primary']
@@ -42,9 +43,9 @@ const generateComponentTheme = theme => {
     zIndex: stacking.topmost,
     background: 'rgba(255, 255, 255, 0.75)',
     borderColor: 'transparent',
-    focusBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.blue4570,
-    borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
-    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall
+    focusBorderColor: colors?.contrasts?.blue4570,
+    borderRadius: borders?.radiusMedium,
+    borderWidth: borders?.widthSmall
   };
   return {
     ...componentVariables,

package/es/Mask/v2/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _Mask;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -36,34 +36,23 @@ category: components/utilities
 ---
 **/
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-let Mask = (_dec = withStyle(generateStyle), _dec(_class = (_Mask = class Mask extends Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this.handleElementRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-    // It can be a ref for any type of child
-    this._content = void 0;
-    this.contentRef = el => {
-      this._content = el;
-    };
-  }
+let Mask = (_dec = withStyle(generateStyle), _dec(_class = class Mask extends Component {
+  static displayName = "Mask";
+  static componentId = 'Mask';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    placement: 'center',
+    fullscreen: false
+  };
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
-    (_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?.();
     if (this.props.fullscreen) {
       noScroll.on();
       MaskCounter.incrementCounter();
     }
   }
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
-    (_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() {
     if (this.props.fullscreen) {
@@ -73,14 +62,29 @@ let Mask = (_dec = withStyle(generateStyle), _dec(_class = (_Mask = class Mask e
       }
     }
   }
+  ref = null;
+  handleElementRef = el => {
+    const {
+      elementRef
+    } = this.props;
+    this.ref = el;
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
+
+  // It can be a ref for any type of child
+  _content;
+  contentRef = el => {
+    this._content = el;
+  };
   render() {
-    var _this$props$styles;
     const content = ensureSingleChild(this.props.children, {
       ref: this.contentRef
     });
     const props = {
       ...omitProps(this.props, Mask.allowedProps),
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.mask,
+      css: this.props.styles?.mask,
       ref: this.handleElementRef
     };
     if (typeof this.props.onClick === 'function') {
@@ -92,9 +96,6 @@ let Mask = (_dec = withStyle(generateStyle), _dec(_class = (_Mask = class Mask e
       children: content
     });
   }
-}, _Mask.displayName = "Mask", _Mask.componentId = 'Mask', _Mask.allowedProps = allowedProps, _Mask.defaultProps = {
-  placement: 'center',
-  fullscreen: false
-}, _Mask)) || _class);
+}) || _class);
 export default Mask;
 export { Mask };

package/es/Mask/v2/styles.js

@@ -34,8 +34,10 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const placement = props.placement,
-    fullscreen = props.fullscreen;
+  const {
+    placement,
+    fullscreen
+  } = props;
   const positionStyles = fullscreen ? {
     position: 'fixed'
   } : {

package/es/Overlay/v1/index.js

@@ -36,36 +36,35 @@ category: components
 **/
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 class Overlay extends Component {
+  static displayName = "Overlay";
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    open: false,
+    insertAt: 'bottom',
+    shouldContainFocus: false,
+    shouldReturnFocus: false,
+    shouldCloseOnDocumentClick: false,
+    shouldCloseOnEscape: true,
+    in: false,
+    unmountOnExit: false,
+    transitionOnMount: false,
+    transitionEnter: true,
+    transitionExit: true
+  };
   constructor(props) {
     super(props);
-    this._timeouts = [];
-    this._DOMNode = null;
-    this._isMounted = false;
-    this.ref = null;
-    this.handleRef = el => {
-      this.ref = el;
-    };
-    this.handlePortalOpen = DOMNode => {
-      this.DOMNode = DOMNode;
-      this._timeouts.push(setTimeout(() => {
-        if (this._isMounted) {
-          this.setState({
-            open: true
-          });
-        }
-      }));
-    };
-    this.handleTransitionExited = _type => {
-      this.setState({
-        open: false,
-        transitioning: false
-      });
-    };
     this.state = {
       open: props.open,
       transitioning: false
     };
   }
+  _timeouts = [];
+  _DOMNode = null;
+  _isMounted = false;
+  ref = null;
+  handleRef = el => {
+    this.ref = el;
+  };
   componentDidMount() {
     this._isMounted = true;
   }
@@ -87,6 +86,22 @@ class Overlay extends Component {
   set DOMNode(el) {
     this._DOMNode = el;
   }
+  handlePortalOpen = DOMNode => {
+    this.DOMNode = DOMNode;
+    this._timeouts.push(setTimeout(() => {
+      if (this._isMounted) {
+        this.setState({
+          open: true
+        });
+      }
+    }));
+  };
+  handleTransitionExited = _type => {
+    this.setState({
+      open: false,
+      transitioning: false
+    });
+  };
   renderTransition(content) {
     return _jsx(Transition, {
       ...pickProps(this.props, Transition.allowedProps),
@@ -121,20 +136,5 @@ class Overlay extends Component {
     });
   }
 }
-Overlay.displayName = "Overlay";
-Overlay.allowedProps = allowedProps;
-Overlay.defaultProps = {
-  open: false,
-  insertAt: 'bottom',
-  shouldContainFocus: false,
-  shouldReturnFocus: false,
-  shouldCloseOnDocumentClick: false,
-  shouldCloseOnEscape: true,
-  in: false,
-  unmountOnExit: false,
-  transitionOnMount: false,
-  transitionEnter: true,
-  transitionExit: true
-};
 export default Overlay;
 export { Overlay };

package/lib/Mask/v1/index.js

@@ -15,7 +15,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _MaskCounter = _interopRequireDefault(require("./MaskCounter"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _class, _Mask;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -44,34 +44,23 @@ var _dec, _class, _Mask;
 category: components/utilities
 ---
 **/
-let Mask = exports.Mask = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_Mask = class Mask extends _react.Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this.handleElementRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-    // It can be a ref for any type of child
-    this._content = void 0;
-    this.contentRef = el => {
-      this._content = el;
-    };
-  }
+let Mask = exports.Mask = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = class Mask extends _react.Component {
+  static displayName = "Mask";
+  static componentId = 'Mask';
+  static allowedProps = _props.allowedProps;
+  static defaultProps = {
+    placement: 'center',
+    fullscreen: false
+  };
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
-    (_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?.();
     if (this.props.fullscreen) {
       _noScroll.default.on();
       _MaskCounter.default.incrementCounter();
     }
   }
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
-    (_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() {
     if (this.props.fullscreen) {
@@ -81,14 +70,29 @@ let Mask = exports.Mask = (_dec = (0, _emotion.withStyleLegacy)(_styles.default,
       }
     }
   }
+  ref = null;
+  handleElementRef = el => {
+    const {
+      elementRef
+    } = this.props;
+    this.ref = el;
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
+
+  // It can be a ref for any type of child
+  _content;
+  contentRef = el => {
+    this._content = el;
+  };
   render() {
-    var _this$props$styles;
     const content = (0, _ensureSingleChild.ensureSingleChild)(this.props.children, {
       ref: this.contentRef
     });
     const props = {
       ...(0, _omitProps.omitProps)(this.props, Mask.allowedProps),
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.mask,
+      css: this.props.styles?.mask,
       ref: this.handleElementRef
     };
     if (typeof this.props.onClick === 'function') {
@@ -100,8 +104,5 @@ let Mask = exports.Mask = (_dec = (0, _emotion.withStyleLegacy)(_styles.default,
       children: content
     });
   }
-}, _Mask.displayName = "Mask", _Mask.componentId = 'Mask', _Mask.allowedProps = _props.allowedProps, _Mask.defaultProps = {
-  placement: 'center',
-  fullscreen: false
-}, _Mask)) || _class);
+}) || _class);
 var _default = exports.default = Mask;

package/lib/Mask/v1/styles.js

@@ -39,8 +39,10 @@ exports.default = void 0;
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const placement = props.placement,
-    fullscreen = props.fullscreen;
+  const {
+    placement,
+    fullscreen
+  } = props;
   const positionStyles = fullscreen ? {
     position: 'fixed'
   } : {

package/lib/Mask/v1/theme.js

@@ -34,11 +34,12 @@ exports.default = void 0;
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts;
-  const colors = theme.colors,
-    borders = theme.borders,
-    stacking = theme.stacking,
-    themeName = theme.key;
+  const {
+    colors,
+    borders,
+    stacking,
+    key: themeName
+  } = theme;
   const themeSpecificStyle = {
     canvas: {
       focusBorderColor: theme['ic-brand-primary']
@@ -48,9 +49,9 @@ const generateComponentTheme = theme => {
     zIndex: stacking.topmost,
     background: 'rgba(255, 255, 255, 0.75)',
     borderColor: 'transparent',
-    focusBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.blue4570,
-    borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
-    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall
+    focusBorderColor: colors?.contrasts?.blue4570,
+    borderRadius: borders?.radiusMedium,
+    borderWidth: borders?.widthSmall
   };
   return {
     ...componentVariables,

package/lib/Mask/v2/index.js

@@ -14,7 +14,7 @@ var _styles = _interopRequireDefault(require("./styles"));
 var _props = require("./props");
 var _MaskCounter = _interopRequireDefault(require("./MaskCounter"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _class, _Mask;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -43,34 +43,23 @@ var _dec, _class, _Mask;
 category: components/utilities
 ---
 **/
-let Mask = exports.Mask = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_Mask = class Mask extends _react.Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this.handleElementRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-    // It can be a ref for any type of child
-    this._content = void 0;
-    this.contentRef = el => {
-      this._content = el;
-    };
-  }
+let Mask = exports.Mask = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = class Mask extends _react.Component {
+  static displayName = "Mask";
+  static componentId = 'Mask';
+  static allowedProps = _props.allowedProps;
+  static defaultProps = {
+    placement: 'center',
+    fullscreen: false
+  };
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
-    (_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?.();
     if (this.props.fullscreen) {
       _noScroll.default.on();
       _MaskCounter.default.incrementCounter();
     }
   }
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
-    (_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() {
     if (this.props.fullscreen) {
@@ -80,14 +69,29 @@ let Mask = exports.Mask = (_dec = (0, _emotion.withStyle)(_styles.default), _dec
       }
     }
   }
+  ref = null;
+  handleElementRef = el => {
+    const {
+      elementRef
+    } = this.props;
+    this.ref = el;
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
+
+  // It can be a ref for any type of child
+  _content;
+  contentRef = el => {
+    this._content = el;
+  };
   render() {
-    var _this$props$styles;
     const content = (0, _ensureSingleChild.ensureSingleChild)(this.props.children, {
       ref: this.contentRef
     });
     const props = {
       ...(0, _omitProps.omitProps)(this.props, Mask.allowedProps),
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.mask,
+      css: this.props.styles?.mask,
       ref: this.handleElementRef
     };
     if (typeof this.props.onClick === 'function') {
@@ -99,8 +103,5 @@ let Mask = exports.Mask = (_dec = (0, _emotion.withStyle)(_styles.default), _dec
       children: content
     });
   }
-}, _Mask.displayName = "Mask", _Mask.componentId = 'Mask', _Mask.allowedProps = _props.allowedProps, _Mask.defaultProps = {
-  placement: 'center',
-  fullscreen: false
-}, _Mask)) || _class);
+}) || _class);
 var _default = exports.default = Mask;

package/lib/Mask/v2/styles.js

@@ -40,8 +40,10 @@ exports.default = void 0;
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const placement = props.placement,
-    fullscreen = props.fullscreen;
+  const {
+    placement,
+    fullscreen
+  } = props;
   const positionStyles = fullscreen ? {
     position: 'fixed'
   } : {