@instructure/ui-drawer-layout 11.7.3-snapshot-25 → 11.7.3-snapshot-27

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-27](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-27) (2026-05-05)
 
-**Note:** Version bump only for package @instructure/ui-drawer-layout
+
+### 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/DrawerLayout/v1/DrawerContent/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _DrawerContent;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -38,29 +38,21 @@ parent: DrawerLayout
 id: DrawerLayout.Content
 ---
 **/
-let DrawerContent = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_DrawerContent = class DrawerContent extends Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this._resizeListener = void 0;
-    this._debounced = void 0;
-    this.makeStyleProps = shouldTransition => {
-      return {
-        shouldTransition
-      };
-    };
-    this.handleContentRef = node => {
-      this.ref = node;
-      if (typeof this.props.contentRef === 'function') {
-        this.props.contentRef(node);
-      }
-    };
-  }
+let DrawerContent = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class DrawerContent extends Component {
+  static displayName = "DrawerContent";
+  static componentId = 'DrawerLayout.Content';
+  static locatorAttribute = 'data-drawer-content';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    role: 'region'
+  };
+  ref = null;
   get _content() {
     return this.ref;
   }
+  _resizeListener;
+  _debounced;
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
     const rect = getBoundingClientRect(this.ref);
     const origSize = {
       width: rect.width
@@ -84,42 +76,48 @@ let DrawerContent = (_dec = withStyle(generateStyle, generateComponentTheme), _d
           width: entry.contentRect.width
         };
         if (size.width !== origSize.width) {
-          var _this$_debounced;
-          (_this$_debounced = this._debounced) === null || _this$_debounced === void 0 ? void 0 : _this$_debounced.call(this, size);
+          this._debounced?.(size);
         }
       }
     });
     this._resizeListener.observe(this.ref);
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps(false));
+    this.props.makeStyles?.(this.makeStyleProps(false));
   }
   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(true));
+    this.props.makeStyles?.(this.makeStyleProps(true));
   }
   componentWillUnmount() {
-    var _this$_resizeListener, _this$_debounced2;
-    (_this$_resizeListener = this._resizeListener) === null || _this$_resizeListener === void 0 ? void 0 : _this$_resizeListener.disconnect();
-    (_this$_debounced2 = this._debounced) === null || _this$_debounced2 === void 0 ? void 0 : _this$_debounced2.cancel();
+    this._resizeListener?.disconnect();
+    this._debounced?.cancel();
   }
+  makeStyleProps = shouldTransition => {
+    return {
+      shouldTransition
+    };
+  };
+  handleContentRef = node => {
+    this.ref = node;
+    if (typeof this.props.contentRef === 'function') {
+      this.props.contentRef(node);
+    }
+  };
   render() {
-    var _this$props$styles;
-    const _this$props3 = this.props,
-      style = _this$props3.style,
-      label = _this$props3.label,
-      role = _this$props3.role;
+    const {
+      style,
+      label,
+      role
+    } = this.props;
     return _jsx("div", {
       ...omitProps(this.props, DrawerContent.allowedProps),
       role: role,
       style: style,
       ref: this.handleContentRef,
       "aria-label": label,
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.drawerContent,
+      css: this.props.styles?.drawerContent,
       "data-cid": "DrawerContent",
       children: this.props.children
     });
   }
-}, _DrawerContent.displayName = "DrawerContent", _DrawerContent.componentId = 'DrawerLayout.Content', _DrawerContent.locatorAttribute = 'data-drawer-content', _DrawerContent.allowedProps = allowedProps, _DrawerContent.defaultProps = {
-  role: 'region'
-}, _DrawerContent)) || _class);
+}) || _class);
 export default DrawerContent;
 export { DrawerContent };

package/es/DrawerLayout/v1/DrawerContent/styles.js

@@ -33,7 +33,9 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, _props, state) => {
-  const shouldTransition = state.shouldTransition;
+  const {
+    shouldTransition
+  } = state;
   const transitionState = shouldTransition ? {
     transition: `margin ${componentTheme.duration}`
   } : {};

package/es/DrawerLayout/v1/DrawerContent/theme.js

@@ -28,9 +28,11 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  const transitions = theme.transitions;
+  const {
+    transitions
+  } = theme;
   return {
-    duration: transitions === null || transitions === void 0 ? void 0 : transitions.duration,
+    duration: transitions?.duration,
     overflowY: 'auto'
   };
 };

package/es/DrawerLayout/v1/DrawerTray/index.js

@@ -1,6 +1,4 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["label", "children", "render", "placement", "open", "onOpen", "onClose", "border", "shadow", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "contentRef", "mountNode", "defaultFocusElement", "liveRegion", "onDismiss", "onTransition", "shouldReturnFocus", "shouldCloseOnEscape", "shouldCloseOnDocumentClick", "shouldContainFocus", "styles"];
-var _dec, _dec2, _class, _DrawerTray;
+var _dec, _dec2, _class;
 /*
  * The MIT License (MIT)
  *
@@ -45,69 +43,82 @@ parent: DrawerLayout
 id: DrawerLayout.Tray
 ---
 **/
-let DrawerTray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = textDirectionContextConsumer(), _dec(_class = _dec2(_class = (_DrawerTray = class DrawerTray extends Component {
+let DrawerTray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = textDirectionContextConsumer(), _dec(_class = _dec2(_class = class DrawerTray extends Component {
+  static displayName = "DrawerTray";
+  static componentId = 'DrawerLayout.Tray';
+  static locatorAttribute = 'data-drawer-tray';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    shouldContainFocus: true,
+    shouldCloseOnEscape: true,
+    shouldCloseOnDocumentClick: true,
+    shouldReturnFocus: true,
+    open: false,
+    shadow: true,
+    border: true,
+    placement: 'start'
+  };
+  ref = null;
+  _DOMNode = null;
   get _content() {
     return this.ref;
   }
   constructor(props) {
     super(props);
-    this.ref = null;
-    this._DOMNode = null;
-    this.makeStyleProps = () => {
-      return {
-        placement: this.placement
-      };
-    };
-    this.handleContentRef = node => {
-      this.ref = node;
-      if (typeof this.props.contentRef === 'function') {
-        this.props.contentRef(node);
-      }
-    };
-    this.handleTransitionEntered = _transitionType => {
-      this.setState({
-        transitioning: false
-      });
-    };
-    this.handleTransitionExited = _transitionType => {
-      this.setState({
-        transitioning: false
-      });
-    };
-    this.handlePortalOpen = DOMNode => {
-      this.DOMNode = DOMNode;
-      this.setState({
-        portalOpen: true
-      });
-    };
     this.state = {
       transitioning: false,
       portalOpen: 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.makeStyleProps());
+    this.props.makeStyles?.(this.makeStyleProps());
   }
   componentDidUpdate(prevProps) {
-    var _this$props$makeStyle2, _this$props2;
     if (this.props.open !== prevProps.open) {
       this.setState({
         transitioning: true
       });
     }
-    (_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 {
+      placement: this.placement
+    };
+  };
   get placement() {
-    const _this$props3 = this.props,
-      placement = _this$props3.placement,
-      dir = _this$props3.dir;
+    const {
+      placement,
+      dir
+    } = this.props;
     const isRtl = dir === textDirectionContextConsumer.DIRECTION.rtl;
     return isRtl ? mirrorHorizontalPlacement(placement, ' ') : placement;
   }
   get transition() {
     return this.placement === 'end' ? 'fade' : 'slide-left';
   }
+  handleContentRef = node => {
+    this.ref = node;
+    if (typeof this.props.contentRef === 'function') {
+      this.props.contentRef(node);
+    }
+  };
+  handleTransitionEntered = _transitionType => {
+    this.setState({
+      transitioning: false
+    });
+  };
+  handleTransitionExited = _transitionType => {
+    this.setState({
+      transitioning: false
+    });
+  };
+  handlePortalOpen = DOMNode => {
+    this.DOMNode = DOMNode;
+    this.setState({
+      portalOpen: true
+    });
+  };
   get DOMNode() {
     return this._DOMNode;
   }
@@ -115,9 +126,10 @@ let DrawerTray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
     this._DOMNode = el;
   }
   renderContent() {
-    const _this$props4 = this.props,
-      children = _this$props4.children,
-      render = _this$props4.render;
+    const {
+      children,
+      render
+    } = this.props;
     if (typeof render === 'function') {
       return render();
     } else if (typeof children === 'function') {
@@ -127,43 +139,45 @@ let DrawerTray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
     }
   }
   render() {
-    const _this$props5 = this.props,
-      label = _this$props5.label,
-      children = _this$props5.children,
-      render = _this$props5.render,
-      placement = _this$props5.placement,
-      open = _this$props5.open,
-      onOpen = _this$props5.onOpen,
-      onClose = _this$props5.onClose,
-      border = _this$props5.border,
-      shadow = _this$props5.shadow,
-      onEnter = _this$props5.onEnter,
-      onEntering = _this$props5.onEntering,
-      onEntered = _this$props5.onEntered,
-      onExit = _this$props5.onExit,
-      onExiting = _this$props5.onExiting,
-      onExited = _this$props5.onExited,
-      contentRef = _this$props5.contentRef,
-      mountNode = _this$props5.mountNode,
-      defaultFocusElement = _this$props5.defaultFocusElement,
-      liveRegion = _this$props5.liveRegion,
-      onDismiss = _this$props5.onDismiss,
-      onTransition = _this$props5.onTransition,
-      shouldReturnFocus = _this$props5.shouldReturnFocus,
-      shouldCloseOnEscape = _this$props5.shouldCloseOnEscape,
-      shouldCloseOnDocumentClick = _this$props5.shouldCloseOnDocumentClick,
-      shouldContainFocus = _this$props5.shouldContainFocus,
-      styles = _this$props5.styles,
-      props = _objectWithoutProperties(_this$props5, _excluded);
+    const {
+      label,
+      children,
+      render,
+      placement,
+      open,
+      onOpen,
+      onClose,
+      border,
+      shadow,
+      onEnter,
+      onEntering,
+      onEntered,
+      onExit,
+      onExiting,
+      onExited,
+      contentRef,
+      mountNode,
+      defaultFocusElement,
+      liveRegion,
+      onDismiss,
+      onTransition,
+      shouldReturnFocus,
+      shouldCloseOnEscape,
+      shouldCloseOnDocumentClick,
+      shouldContainFocus,
+      styles,
+      ...props
+    } = this.props;
     return _jsx(DrawerLayoutContext.Consumer, {
       children: shouldOverlayTray => {
-        var _this$props$styles;
-        const portalOpen = this.state.portalOpen;
+        const {
+          portalOpen
+        } = this.state;
         const needsPortal = shouldOverlayTray && !!mountNode;
         // we have to handle the shadow version here,
         // because passing and handling it in styles.js makes it
         // rerender the component during the transition, breaking it
-        const trayStyles = shadow && shouldOverlayTray ? styles === null || styles === void 0 ? void 0 : styles.drawerTrayWithShadow : styles === null || styles === void 0 ? void 0 : styles.drawerTray;
+        const trayStyles = shadow && shouldOverlayTray ? styles?.drawerTrayWithShadow : styles?.drawerTray;
         let transitionIn = open;
         if (needsPortal && !portalOpen) {
           transitionIn = false;
@@ -196,7 +210,7 @@ let DrawerTray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
               liveRegion: liveRegion,
               onDismiss: onDismiss,
               as: "div",
-              css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.drawerTrayContent,
+              css: this.props.styles?.drawerTrayContent,
               children: this.renderContent()
             })
           })
@@ -214,15 +228,6 @@ let DrawerTray = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
       }
     });
   }
-}, _DrawerTray.displayName = "DrawerTray", _DrawerTray.componentId = 'DrawerLayout.Tray', _DrawerTray.locatorAttribute = 'data-drawer-tray', _DrawerTray.allowedProps = allowedProps, _DrawerTray.defaultProps = {
-  shouldContainFocus: true,
-  shouldCloseOnEscape: true,
-  shouldCloseOnDocumentClick: true,
-  shouldReturnFocus: true,
-  open: false,
-  shadow: true,
-  border: true,
-  placement: 'start'
-}, _DrawerTray)) || _class) || _class);
+}) || _class) || _class);
 export default DrawerTray;
 export { DrawerTray };

package/es/DrawerLayout/v1/DrawerTray/styles.js

@@ -33,8 +33,12 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props, state) => {
-  const border = props.border;
-  const placement = state.placement;
+  const {
+    border
+  } = props;
+  const {
+    placement
+  } = state;
   const borderPlacementStyle = {
     start: {
       borderRightWidth: componentTheme.borderWidth

package/es/DrawerLayout/v1/DrawerTray/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;
-  const colors = theme.colors,
-    borders = theme.borders,
-    stacking = theme.stacking,
-    shadows = theme.shadows;
+  const {
+    colors,
+    borders,
+    stacking,
+    shadows
+  } = 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.grey3045,
-    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
-    borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
-    zIndex: stacking === null || stacking === void 0 ? void 0 : stacking.topmost,
-    boxShadow: shadows === null || shadows === void 0 ? void 0 : shadows.depth3,
+    background: colors?.contrasts?.white1010,
+    borderColor: colors?.contrasts?.grey3045,
+    borderWidth: borders?.widthSmall,
+    borderStyle: borders?.style,
+    zIndex: stacking?.topmost,
+    boxShadow: shadows?.depth3,
     overflowX: 'hidden',
     overflowY: 'auto',
     contentOverflowY: 'auto'

package/es/DrawerLayout/v1/__fixtures__/DrawerLayout.fixture.js

@@ -1,4 +1,3 @@
-var _DrawerLayout$Content;
 /*
  * The MIT License (MIT)
  *
@@ -27,13 +26,22 @@ import { Component } from 'react';
 import { DrawerLayout } from "../index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 export default class DrawerLayoutFixture extends Component {
+  static displayName = "DrawerLayoutFixture";
+  static defaultProps = {
+    layoutWidth: '600px',
+    trayWidth: '200px',
+    open: false,
+    placement: 'start',
+    onOverlayTrayChange: () => {}
+  };
   render() {
-    const _this$props = this.props,
-      layoutWidth = _this$props.layoutWidth,
-      trayWidth = _this$props.trayWidth,
-      open = _this$props.open,
-      placement = _this$props.placement,
-      onOverlayTrayChange = _this$props.onOverlayTrayChange;
+    const {
+      layoutWidth,
+      trayWidth,
+      open,
+      placement,
+      onOverlayTrayChange
+    } = this.props;
     return _jsx("div", {
       style: {
         width: layoutWidth
@@ -51,23 +59,15 @@ export default class DrawerLayoutFixture extends Component {
             },
             children: "Hello from tray"
           })
-        }), _DrawerLayout$Content || (_DrawerLayout$Content = _jsx(DrawerLayout.Content, {
+        }), _jsx(DrawerLayout.Content, {
           label: "Test DrawerContent",
           children: _jsxs("div", {
             children: ["Hello from content", _jsx("button", {
               children: "Expand"
             })]
           })
-        }))]
+        })]
       })
     });
   }
-}
-DrawerLayoutFixture.displayName = "DrawerLayoutFixture";
-DrawerLayoutFixture.defaultProps = {
-  layoutWidth: '600px',
-  trayWidth: '200px',
-  open: false,
-  placement: 'start',
-  onOverlayTrayChange: () => {}
-};
+}