@instructure/ui-modal 11.7.3-snapshot-25 → 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-25](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-25) (2026-04-30)
+## [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-modal
+
+### 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/Modal/v1/ModalBody/index.js

@@ -1,6 +1,4 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["as", "elementRef", "overflow", "variant", "padding", "children"];
-var _dec, _class, _ModalBody;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -41,21 +39,30 @@ id: Modal.Body
 ---
 **/
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_ModalBody = class ModalBody extends Component {
+let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class ModalBody extends Component {
+  static displayName = "ModalBody";
+  static componentId = 'Modal.Body';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    padding: 'medium',
+    as: 'div',
+    variant: 'default'
+  };
+  ref = null;
+  handleRef = el => {
+    const {
+      elementRef
+    } = this.props;
+    this.ref = el;
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
   constructor(props) {
     super(props);
-    this.ref = null;
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
   }
   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?.();
 
     // We detect if -moz- prefixed style is present to identify whether we are in Firefox browser
     const style = this.ref && getCSSStyleDeclaration(this.ref);
@@ -67,12 +74,11 @@ let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
     }
   }
   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?.();
   }
   getFinalRef(el) {
     if (!el) {
-      return void 0;
+      return undefined;
     }
     if (el instanceof Element) {
       return el;
@@ -80,53 +86,46 @@ let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
     if (el.ref) {
       return this.getFinalRef(el.ref);
     }
-    return void 0;
+    return undefined;
   }
   render() {
-    var _finalRef$scrollHeigh, _finalRef$getBounding, _finalRef$getBounding2;
-    const _this$props3 = this.props,
-      as = _this$props3.as,
-      elementRef = _this$props3.elementRef,
-      overflow = _this$props3.overflow,
-      variant = _this$props3.variant,
-      padding = _this$props3.padding,
-      children = _this$props3.children,
-      rest = _objectWithoutProperties(_this$props3, _excluded);
+    const {
+      as,
+      elementRef,
+      overflow,
+      variant,
+      padding,
+      children,
+      ...rest
+    } = this.props;
     const passthroughProps = View.omitViewProps(omitProps(rest, ModalBody.allowedProps), ModalBody);
     const isFit = overflow === 'fit';
     // this recursive function is needed because `ref` can be a React component.
     // TODO rethink, the 'as' prop, likely its not a good idea to allow React
     // components. See INSTUI-4674
     const finalRef = this.getFinalRef(this.ref);
-    const hasScrollbar = finalRef && Math.abs(((_finalRef$scrollHeigh = finalRef.scrollHeight) !== null && _finalRef$scrollHeigh !== void 0 ? _finalRef$scrollHeigh : 0) - ((_finalRef$getBounding = (_finalRef$getBounding2 = finalRef.getBoundingClientRect()) === null || _finalRef$getBounding2 === void 0 ? void 0 : _finalRef$getBounding2.height) !== null && _finalRef$getBounding !== void 0 ? _finalRef$getBounding : 0)) > 1;
+    const hasScrollbar = finalRef && Math.abs((finalRef.scrollHeight ?? 0) - (finalRef.getBoundingClientRect()?.height ?? 0)) > 1;
     return _jsx(ModalContext.Consumer, {
-      children: value => {
-        var _this$props$styles;
-        return _jsx(View, {
-          ...passthroughProps,
-          display: "block",
-          "data-cid": "ModalBody",
-          width: isFit ? '100%' : void 0,
-          height: isFit ? '100%' : void 0,
-          elementRef: this.handleRef,
-          as: as,
-          css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalBody,
-          padding: padding
-          // check if there is a scrollbar, if so, the element has to be tabbable
-          ,
-          ...(hasScrollbar ? {
-            tabIndex: 0,
-            'aria-label': value.bodyScrollAriaLabel
-          } : {}),
-          children: children
-        });
-      }
+      children: value => _jsx(View, {
+        ...passthroughProps,
+        display: "block",
+        "data-cid": "ModalBody",
+        width: isFit ? '100%' : undefined,
+        height: isFit ? '100%' : undefined,
+        elementRef: this.handleRef,
+        as: as,
+        css: this.props.styles?.modalBody,
+        padding: padding
+        // check if there is a scrollbar, if so, the element has to be tabbable
+        ,
+        ...(hasScrollbar ? {
+          tabIndex: 0,
+          'aria-label': value.bodyScrollAriaLabel
+        } : {}),
+        children: children
+      })
     });
   }
-}, _ModalBody.displayName = "ModalBody", _ModalBody.componentId = 'Modal.Body', _ModalBody.allowedProps = allowedProps, _ModalBody.defaultProps = {
-  padding: 'medium',
-  as: 'div',
-  variant: 'default'
-}, _ModalBody)) || _class);
+}) || _class);
 export default ModalBody;
 export { ModalBody };

package/es/Modal/v1/ModalBody/styles.js

@@ -33,7 +33,9 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const variant = props.variant;
+  const {
+    variant
+  } = props;
   const backgroundStyle = variant === 'inverse' ? {
     background: componentTheme.inverseBackground
   } : {};

package/es/Modal/v1/ModalBody/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;
   return {
-    inverseBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey100100
+    inverseBackground: colors?.contrasts?.grey100100
   };
 };
 export default generateComponentTheme;

package/es/Modal/v1/ModalContext.js

@@ -28,7 +28,7 @@ import { createContext } from 'react';
  * @private
  */
 const ModalContext = /*#__PURE__*/createContext({
-  bodyScrollAriaLabel: void 0
+  bodyScrollAriaLabel: undefined
 });
 export default ModalContext;
 export { ModalContext };

package/es/Modal/v1/ModalFooter/index.js

@@ -1,6 +1,4 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["children"];
-var _dec, _class, _ModalFooter;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -38,37 +36,36 @@ parent: Modal
 id: Modal.Footer
 ---
 **/
-let ModalFooter = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_ModalFooter = class ModalFooter extends Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this.handleRef = el => {
-      this.ref = el;
-    };
-  }
+let ModalFooter = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class ModalFooter extends Component {
+  static displayName = "ModalFooter";
+  static componentId = 'Modal.Footer';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    variant: 'default'
+  };
+  ref = null;
+  handleRef = el => {
+    this.ref = el;
+  };
   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?.();
   }
   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?.();
   }
   render() {
-    var _this$props$styles;
-    const _this$props3 = this.props,
-      children = _this$props3.children,
-      rest = _objectWithoutProperties(_this$props3, _excluded);
+    const {
+      children,
+      ...rest
+    } = this.props;
     return _jsx("div", {
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalFooter,
+      css: this.props.styles?.modalFooter,
       ...passthroughProps(rest),
       ref: this.handleRef,
       "data-cid": "ModalFooter",
       children: children
     });
   }
-}, _ModalFooter.displayName = "ModalFooter", _ModalFooter.componentId = 'Modal.Footer', _ModalFooter.allowedProps = allowedProps, _ModalFooter.defaultProps = {
-  variant: 'default'
-}, _ModalFooter)) || _class);
+}) || _class);
 export default ModalFooter;
 export { ModalFooter };

package/es/Modal/v1/ModalFooter/styles.js

@@ -33,7 +33,9 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const variant = props.variant;
+  const {
+    variant
+  } = props;
   const backgroundStyle = variant === 'inverse' ? {
     background: componentTheme.inverseBackground,
     borderTop: `${componentTheme.borderWidth} solid ${componentTheme.inverseBorderColor}`

package/es/Modal/v1/ModalFooter/theme.js

@@ -28,18 +28,19 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4;
-  const colors = theme.colors,
-    spacing = theme.spacing,
-    borders = theme.borders;
+  const {
+    colors,
+    spacing,
+    borders
+  } = theme;
   const componentVariables = {
-    background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey1111,
-    borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey1424,
-    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
-    borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
-    padding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
-    inverseBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey100100,
-    inverseBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey100100
+    background: colors?.contrasts?.grey1111,
+    borderColor: colors?.contrasts?.grey1424,
+    borderWidth: borders?.widthSmall,
+    borderRadius: borders?.radiusMedium,
+    padding: spacing?.small,
+    inverseBackground: colors?.contrasts?.grey100100,
+    inverseBorderColor: colors?.contrasts?.grey100100
   };
   return {
     ...componentVariables

package/es/Modal/v1/ModalHeader/index.js

@@ -1,6 +1,4 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["children"];
-var _dec, _class, _ModalHeader;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -40,49 +38,51 @@ parent: Modal
 id: Modal.Header
 ---
 **/
-let ModalHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_ModalHeader = class ModalHeader extends Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    /**
-     * Gets all text in a DOM subtree, text under <button> nodes is excluded
-     */
-    this.getTextExcludingButtons = root => {
-      const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
-        acceptNode(node) {
-          var _node$parentElement;
-          return (_node$parentElement = node.parentElement) !== null && _node$parentElement !== void 0 && _node$parentElement.closest('button') ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT;
-        }
-      });
-      let text = '';
-      let current;
-      while (current = walker.nextNode()) {
-        text += current.nodeValue;
-      }
-      return text;
-    };
-    this.handleRef = el => {
-      this.ref = el;
-      if (el) {
-        var _this$context$setBody, _this$context;
-        const txt = this.getTextExcludingButtons(el);
-        (_this$context$setBody = (_this$context = this.context).setBodyScrollAriaLabel) === null || _this$context$setBody === void 0 ? void 0 : _this$context$setBody.call(_this$context, txt);
+let ModalHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class ModalHeader extends Component {
+  static displayName = "ModalHeader";
+  static componentId = 'Modal.Header';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    variant: 'default',
+    spacing: 'default'
+  };
+  ref = null;
+  static contextType = ModalContext;
+
+  /**
+   * Gets all text in a DOM subtree, text under <button> nodes is excluded
+   */
+  getTextExcludingButtons = root => {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+      acceptNode(node) {
+        return node.parentElement?.closest('button') ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT;
       }
-    };
-    this.makeStyleProps = () => {
-      return {
-        withCloseButton: this.usesCloseButton
-      };
-    };
-  }
+    });
+    let text = '';
+    let current;
+    while (current = walker.nextNode()) {
+      text += current.nodeValue;
+    }
+    return text;
+  };
+  handleRef = el => {
+    this.ref = el;
+    if (el) {
+      const txt = this.getTextExcludingButtons(el);
+      this.context.setBodyScrollAriaLabel?.(txt);
+    }
+  };
   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.makeStyleProps());
+    this.props.makeStyles?.(this.makeStyleProps());
   }
   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.makeStyleProps());
+    this.props.makeStyles?.(this.makeStyleProps());
   }
+  makeStyleProps = () => {
+    return {
+      withCloseButton: this.usesCloseButton
+    };
+  };
   get usesCloseButton() {
     let hasCloseButton = false;
     Children.forEach(this.props.children, child => {
@@ -93,21 +93,18 @@ let ModalHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
     return hasCloseButton;
   }
   render() {
-    var _this$props$styles;
-    const _this$props3 = this.props,
-      children = _this$props3.children,
-      rest = _objectWithoutProperties(_this$props3, _excluded);
+    const {
+      children,
+      ...rest
+    } = this.props;
     return _jsx("div", {
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalHeader,
+      css: this.props.styles?.modalHeader,
       ...passthroughProps(rest),
       ref: this.handleRef,
       "data-cid": "ModalHeader",
       children: children
     });
   }
-}, _ModalHeader.displayName = "ModalHeader", _ModalHeader.componentId = 'Modal.Header', _ModalHeader.allowedProps = allowedProps, _ModalHeader.defaultProps = {
-  variant: 'default',
-  spacing: 'default'
-}, _ModalHeader.contextType = ModalContext, _ModalHeader)) || _class);
+}) || _class);
 export default ModalHeader;
 export { ModalHeader };

package/es/Modal/v1/ModalHeader/styles.js

@@ -33,9 +33,13 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props, state) => {
-  const variant = props.variant,
-    spacing = props.spacing;
-  const withCloseButton = state.withCloseButton;
+  const {
+    variant,
+    spacing
+  } = props;
+  const {
+    withCloseButton
+  } = state;
   const sizeVariants = {
     default: {
       padding: componentTheme.padding,

package/es/Modal/v1/ModalHeader/theme.js

@@ -28,16 +28,17 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4;
-  const colors = theme.colors,
-    spacing = theme.spacing;
+  const {
+    colors,
+    spacing
+  } = theme;
   const componentVariables = {
-    background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
-    borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey1424,
-    padding: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
-    paddingCompact: spacing === null || spacing === void 0 ? void 0 : spacing.small,
-    inverseBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey100100,
-    inverseBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey125125
+    background: colors?.contrasts?.white1010,
+    borderColor: colors?.contrasts?.grey1424,
+    padding: spacing?.medium,
+    paddingCompact: spacing?.small,
+    inverseBackground: colors?.contrasts?.grey100100,
+    inverseBorderColor: colors?.contrasts?.grey125125
   };
   return {
     ...componentVariables