@instructure/ui-menu 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-menu
+
+### 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/Menu/v1/MenuItem/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _MenuItem, _IconCheckSolid, _IconArrowOpenEndSoli;
+var _dec, _dec2, _class;
 /*
  * The MIT License (MIT)
  *
@@ -41,71 +41,17 @@ parent: Menu
 id: Menu.Item
 ---
 **/
-let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = (_MenuItem = class MenuItem extends Component {
+let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = class MenuItem extends Component {
+  static displayName = "MenuItem";
+  static componentId = 'Menu.Item';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    type: 'button',
+    disabled: false
+  };
+  static contextType = MenuContext;
   constructor(props) {
     super(props);
-    this.labelId = void 0;
-    this.ref = null;
-    this.handleRef = el => {
-      this.ref = el;
-    };
-    this.handleClick = e => {
-      const _this$props = this.props,
-        onSelect = _this$props.onSelect,
-        onClick = _this$props.onClick,
-        disabled = _this$props.disabled,
-        value = _this$props.value;
-      const selected = !this.selected;
-      if (disabled) {
-        e.preventDefault();
-        return;
-      }
-      if (typeof this.props.selected === 'undefined') {
-        this.setState({
-          selected
-        });
-      }
-      if (typeof onSelect === 'function') {
-        e.persist();
-        onSelect(e, value, selected, this);
-      }
-      if (typeof onClick === 'function') {
-        onClick(e);
-      }
-    };
-    this.handleKeyDown = e => {
-      const spaceKey = e.keyCode === keycode.codes.space;
-      const enterKey = e.keyCode === keycode.codes.enter;
-      if (spaceKey || enterKey) {
-        e.preventDefault();
-        e.stopPropagation();
-        if (enterKey) {
-          // handle space key on keyUp for FF
-          const refNode = findDOMNode(this.ref);
-          refNode.click();
-        }
-      }
-    };
-    this.handleKeyUp = e => {
-      const spaceKey = e.keyCode === keycode.codes.space;
-      const enterKey = e.keyCode === keycode.codes.enter;
-      if (spaceKey || enterKey) {
-        e.preventDefault();
-        e.stopPropagation();
-        if (spaceKey) {
-          const refNode = findDOMNode(this.ref);
-          refNode.click();
-        }
-      }
-    };
-    this.handleMouseOver = event => {
-      if (!this.focused) {
-        this.focus();
-      }
-      if (typeof this.props.onMouseOver === 'function') {
-        this.props.onMouseOver(event, this);
-      }
-    };
     if (typeof props.selected === 'undefined') {
       this.state = {
         selected: !!props.defaultSelected
@@ -116,17 +62,20 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
   get _node() {
     return this.ref;
   }
+  labelId;
+  ref = null;
+  handleRef = el => {
+    this.ref = el;
+  };
   componentDidMount() {
-    var _this$props$makeStyle, _this$props2;
-    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+    this.props.makeStyles?.();
     const context = this.context;
     if (context && context.registerMenuItem) {
       context.registerMenuItem(this);
     }
   }
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props3;
-    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+    this.props.makeStyles?.();
   }
   componentWillUnmount() {
     const context = this.context;
@@ -134,6 +83,64 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       context.removeMenuItem(this);
     }
   }
+  handleClick = e => {
+    const {
+      onSelect,
+      onClick,
+      disabled,
+      value
+    } = this.props;
+    const selected = !this.selected;
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+    if (typeof this.props.selected === 'undefined') {
+      this.setState({
+        selected
+      });
+    }
+    if (typeof onSelect === 'function') {
+      e.persist();
+      onSelect(e, value, selected, this);
+    }
+    if (typeof onClick === 'function') {
+      onClick(e);
+    }
+  };
+  handleKeyDown = e => {
+    const spaceKey = e.keyCode === keycode.codes.space;
+    const enterKey = e.keyCode === keycode.codes.enter;
+    if (spaceKey || enterKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (enterKey) {
+        // handle space key on keyUp for FF
+        const refNode = findDOMNode(this.ref);
+        refNode.click();
+      }
+    }
+  };
+  handleKeyUp = e => {
+    const spaceKey = e.keyCode === keycode.codes.space;
+    const enterKey = e.keyCode === keycode.codes.enter;
+    if (spaceKey || enterKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (spaceKey) {
+        const refNode = findDOMNode(this.ref);
+        refNode.click();
+      }
+    }
+  };
+  handleMouseOver = event => {
+    if (!this.focused) {
+      this.focus();
+    }
+    if (typeof this.props.onMouseOver === 'function') {
+      this.props.onMouseOver(event, this);
+    }
+  };
   get elementType() {
     return getElementType(MenuItem, this.props);
   }
@@ -158,38 +165,38 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
     refNode.focus();
   }
   renderContent() {
-    var _this$props$styles, _this$props$styles2, _this$props$styles3, _this$props$styles4;
-    const _this$props4 = this.props,
-      children = _this$props4.children,
-      type = _this$props4.type,
-      renderLabelInfo = _this$props4.renderLabelInfo;
+    const {
+      children,
+      type,
+      renderLabelInfo
+    } = this.props;
     return _jsxs("span", {
       children: [(type === 'checkbox' || type === 'radio') && _jsx("span", {
-        css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon,
-        children: this.selected && (_IconCheckSolid || (_IconCheckSolid = _jsx(IconCheckSolid, {})))
+        css: this.props.styles?.icon,
+        children: this.selected && _jsx(IconCheckSolid, {})
       }), _jsx("span", {
-        css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.label,
+        css: this.props.styles?.label,
         id: this.labelId,
         children: children
       }), type === 'flyout' && _jsx("span", {
-        css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.icon,
-        children: _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = _jsx(IconArrowOpenEndSolid, {}))
+        css: this.props.styles?.icon,
+        children: _jsx(IconArrowOpenEndSolid, {})
       }), renderLabelInfo && _jsx("span", {
-        css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.labelInfo,
+        css: this.props.styles?.labelInfo,
         children: callRenderProp(renderLabelInfo)
       })]
     });
   }
   render() {
-    var _this$props$styles5;
-    const _this$props5 = this.props,
-      disabled = _this$props5.disabled,
-      controls = _this$props5.controls,
-      onKeyDown = _this$props5.onKeyDown,
-      onKeyUp = _this$props5.onKeyUp,
-      type = _this$props5.type,
-      href = _this$props5.href,
-      target = _this$props5.target;
+    const {
+      disabled,
+      controls,
+      onKeyDown,
+      onKeyUp,
+      type,
+      href,
+      target
+    } = this.props;
     const props = omitProps(this.props, MenuItem.allowedProps);
     const ElementType = this.elementType;
     return _jsx(ElementType, {
@@ -200,22 +207,19 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       target: target,
       role: this.role,
       "aria-labelledby": this.labelId,
-      "aria-disabled": disabled ? 'true' : void 0,
+      "aria-disabled": disabled ? 'true' : undefined,
       "aria-controls": controls,
-      "aria-checked": type === 'checkbox' || type === 'radio' ? this.selected ? 'true' : 'false' : void 0,
+      "aria-checked": type === 'checkbox' || type === 'radio' ? this.selected ? 'true' : 'false' : undefined,
       onClick: this.handleClick,
       onKeyUp: createChainedFunction(onKeyUp, this.handleKeyUp),
       onKeyDown: createChainedFunction(onKeyDown, this.handleKeyDown),
       ref: this.handleRef,
-      css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.menuItem,
+      css: this.props.styles?.menuItem,
       onMouseOver: this.handleMouseOver,
       "data-cid": "MenuItem",
       children: this.renderContent()
     });
   }
-}, _MenuItem.displayName = "MenuItem", _MenuItem.componentId = 'Menu.Item', _MenuItem.allowedProps = allowedProps, _MenuItem.defaultProps = {
-  type: 'button',
-  disabled: false
-}, _MenuItem.contextType = MenuContext, _MenuItem)) || _class) || _class);
+}) || _class) || _class);
 export default MenuItem;
 export { MenuItem };

package/es/Menu/v1/MenuItem/styles.js

@@ -33,8 +33,10 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const type = props.type,
-    disabled = props.disabled;
+  const {
+    type,
+    disabled
+  } = props;
   const isRadioOrCheckbox = type === 'checkbox' || type === 'radio';
   const flyoutIconStyles = type === 'flyout' ? {
     insetInlineStart: 'auto',

package/es/Menu/v1/MenuItem/theme.js

@@ -28,11 +28,12 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7;
-  const colors = theme.colors,
-    typography = theme.typography,
-    spacing = theme.spacing,
-    themeName = theme.key;
+  const {
+    colors,
+    typography,
+    spacing,
+    key: themeName
+  } = theme;
   const themeSpecificStyle = {
     canvas: {
       labelColor: theme['ic-brand-font-color-dark'],
@@ -41,20 +42,20 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
-    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
-    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
-    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
-    fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
-    labelPadding: spacing === null || spacing === void 0 ? void 0 : spacing.large,
-    labelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
-    background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
-    iconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey125125,
-    iconPadding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
-    activeBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue4570,
-    activeLabelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.white1010,
-    activeIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.white1010,
-    labelInfoColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey5782
+    padding: `${spacing?.xSmall} ${spacing?.small}`,
+    fontFamily: typography?.fontFamily,
+    fontWeight: typography?.fontWeightNormal,
+    lineHeight: typography?.lineHeightCondensed,
+    fontSize: typography?.fontSizeMedium,
+    labelPadding: spacing?.large,
+    labelColor: colors?.contrasts?.grey125125,
+    background: colors?.contrasts?.white1010,
+    iconColor: colors?.contrasts?.grey125125,
+    iconPadding: spacing?.small,
+    activeBackground: colors?.contrasts?.blue4570,
+    activeLabelColor: colors?.contrasts?.white1010,
+    activeIconColor: colors?.contrasts?.white1010,
+    labelInfoColor: colors?.contrasts?.grey5782
   };
   return {
     ...componentVariables,

package/es/Menu/v1/MenuItemGroup/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _MenuItemGroup;
+var _dec, _dec2, _class;
 /*
  * The MIT License (MIT)
  *
@@ -38,62 +38,74 @@ parent: Menu
 id: Menu.Group
 ---
 **/
-let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = (_MenuItemGroup = class MenuItemGroup extends Component {
+let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = class MenuItemGroup extends Component {
+  static displayName = "MenuItemGroup";
+  static componentId = 'Menu.Group';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    disabled: false,
+    children: null,
+    isTabbable: false,
+    allowMultiple: false,
+    defaultSelected: []
+  };
   constructor(props) {
     super(props);
-    this.ref = null;
-    this.handleRef = el => {
-      this.ref = el;
-    };
-    this.handleSelect = (e, value, selected, item) => {
-      if (this.props.disabled) {
-        e.preventDefault();
-        return;
-      }
-      if (this.props.selected) {
-        this.updateSelected(e, value, this.props.selected, selected, item);
-      } else {
-        this.setState(state => {
-          return {
-            selected: this.updateSelected(e, value, state.selected, selected, item)
-          };
-        });
-      }
-    };
-    this.updateSelected = (e, value, items, selected, item) => {
-      const allowMultiple = this.props.allowMultiple;
-      let updated = allowMultiple ? [...items] : [];
-      const location = updated.indexOf(value);
-      if (selected === true && location < 0) {
-        updated.push(value);
-      } else if (selected === false && location !== -1) {
-        updated.splice(location, 1);
-      } else if (!allowMultiple && updated.length < 1) {
-        // don't allow nothing selected if it's not allowMultiple/checkbox
-        updated = [...items];
-      }
-      if (typeof this.props.onSelect === 'function') {
-        this.props.onSelect(e, updated, selected, item);
-      }
-      return updated;
-    };
     if (typeof props.selected === 'undefined') {
       this.state = {
         selected: this.selectedFromChildren(props) || props.defaultSelected
       };
     }
   }
+  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?.();
   }
+  handleSelect = (e, value, selected, item) => {
+    if (this.props.disabled) {
+      e.preventDefault();
+      return;
+    }
+    if (this.props.selected) {
+      this.updateSelected(e, value, this.props.selected, selected, item);
+    } else {
+      this.setState(state => {
+        return {
+          selected: this.updateSelected(e, value, state.selected, selected, item)
+        };
+      });
+    }
+  };
+  updateSelected = (e, value, items, selected, item) => {
+    const {
+      allowMultiple
+    } = this.props;
+    let updated = allowMultiple ? [...items] : [];
+    const location = updated.indexOf(value);
+    if (selected === true && location < 0) {
+      updated.push(value);
+    } else if (selected === false && location !== -1) {
+      updated.splice(location, 1);
+    } else if (!allowMultiple && updated.length < 1) {
+      // don't allow nothing selected if it's not allowMultiple/checkbox
+      updated = [...items];
+    }
+    if (typeof this.props.onSelect === 'function') {
+      this.props.onSelect(e, updated, selected, item);
+    }
+    return updated;
+  };
   selectedFromChildren(props) {
-    const children = props.children,
-      allowMultiple = props.allowMultiple;
+    const {
+      children,
+      allowMultiple
+    } = props;
     const selected = [];
     const items = Children.toArray(children).filter(child => {
       return matchComponentTypes(child, [MenuItem]);
@@ -113,20 +125,22 @@ let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
     }
   }
   renderLabel() {
-    var _this$props$styles;
-    const label = this.props.label;
+    const {
+      label
+    } = this.props;
     return hasVisibleChildren(label) ? _jsx("span", {
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.label,
+      css: this.props.styles?.label,
       children: label
     }) : label;
   }
   renderChildren() {
-    const _this$props3 = this.props,
-      disabled = _this$props3.disabled,
-      controls = _this$props3.controls,
-      allowMultiple = _this$props3.allowMultiple,
-      isTabbable = _this$props3.isTabbable,
-      onMouseOver = _this$props3.onMouseOver;
+    const {
+      disabled,
+      controls,
+      allowMultiple,
+      isTabbable,
+      onMouseOver
+    } = this.props;
     const children = this.props.children;
     let index = -1;
     return Children.map(children, child => {
@@ -151,26 +165,19 @@ let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
     });
   }
   render() {
-    var _this$props$styles2, _this$props$styles3;
     const props = omitProps(this.props, MenuItemGroup.allowedProps);
     return _jsxs("span", {
       ...props,
-      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.menuItemGroup,
+      css: this.props.styles?.menuItemGroup,
       ref: this.handleRef,
       "data-cid": "MenuItemGroup",
       children: [this.renderLabel(), _jsx("div", {
-        css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.items,
-        "aria-disabled": this.props.disabled ? 'true' : void 0,
+        css: this.props.styles?.items,
+        "aria-disabled": this.props.disabled ? 'true' : undefined,
         children: this.renderChildren()
       })]
     });
   }
-}, _MenuItemGroup.displayName = "MenuItemGroup", _MenuItemGroup.componentId = 'Menu.Group', _MenuItemGroup.allowedProps = allowedProps, _MenuItemGroup.defaultProps = {
-  disabled: false,
-  children: null,
-  isTabbable: false,
-  allowMultiple: false,
-  defaultSelected: []
-}, _MenuItemGroup)) || _class) || _class);
+}) || _class) || _class);
 export default MenuItemGroup;
 export { MenuItemGroup };

package/es/Menu/v1/MenuItemGroup/theme.js

@@ -28,23 +28,24 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts, _colors$contrasts2;
-  const colors = theme.colors,
-    spacing = theme.spacing,
-    typography = theme.typography,
-    themeName = theme.key;
+  const {
+    colors,
+    spacing,
+    typography,
+    key: themeName
+  } = theme;
   const themeSpecificStyle = {
     canvas: {
       color: theme['ic-brand-font-color-dark']
     }
   };
   const componentVariables = {
-    fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
-    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
-    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
-    padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
-    color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
-    background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010
+    fontSize: typography?.fontSizeMedium,
+    fontFamily: typography?.fontFamily,
+    fontWeight: typography?.fontWeightBold,
+    padding: `${spacing?.xSmall} ${spacing?.small}`,
+    color: colors?.contrasts?.grey125125,
+    background: colors?.contrasts?.white1010
   };
   return {
     ...componentVariables,

package/es/Menu/v1/MenuItemSeparator/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _MenuItemSeparator;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -37,35 +37,32 @@ id: Menu.Separator
 ---
 @module MenuItemSeparator
 **/
-let MenuItemSeparator = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_MenuItemSeparator = class MenuItemSeparator extends Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this.handleRef = el => {
-      this.ref = el;
-    };
-  }
+let MenuItemSeparator = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class MenuItemSeparator extends Component {
+  static displayName = "MenuItemSeparator";
+  static componentId = 'Menu.Separator';
+  static allowedProps = allowedProps;
+  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 props = omitProps(this.props, MenuItemSeparator.allowedProps);
     // role="separator" would fit better here, but it causes NVDA to stop the
     // MenuItem count after it
     return _jsx("div", {
       ...props,
       role: "presentation",
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.menuItemSeparator,
+      css: this.props.styles?.menuItemSeparator,
       ref: this.handleRef,
       "data-cid": "MenuItemSeparator"
     });
   }
-}, _MenuItemSeparator.displayName = "MenuItemSeparator", _MenuItemSeparator.componentId = 'Menu.Separator', _MenuItemSeparator.allowedProps = allowedProps, _MenuItemSeparator)) || _class);
+}) || _class);
 export default MenuItemSeparator;
 export { MenuItemSeparator };

package/es/Menu/v1/MenuItemSeparator/theme.js

@@ -28,14 +28,15 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts;
-  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.grey3045,
-    height: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
-    margin: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`
+    background: colors?.contrasts?.grey3045,
+    height: borders?.widthSmall,
+    margin: `0 ${spacing?.small}`
   };
   return {
     ...componentVariables