@instructure/ui-menu 8.18.0 → 8.18.1-snapshot.2

package/LICENSE.md

@@ -0,0 +1,27 @@
+---
+title: The MIT License (MIT)
+category: Getting Started
+order: 9
+---
+
+# The MIT License (MIT)
+
+Copyright (c) 2015 Instructure, Inc.
+
+**Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions.**
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/es/Menu/MenuItem/index.js

@@ -137,7 +137,9 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
   }
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    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);
     const context = this.context;
 
     if (context && context.registerMenuItem) {
@@ -146,7 +148,9 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
   }
 
   componentDidUpdate() {
-    this.props.makeStyles?.();
+    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);
   }
 
   componentWillUnmount() {
@@ -191,27 +195,31 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
   }
 
   renderContent() {
-    const _this$props2 = this.props,
-          children = _this$props2.children,
-          type = _this$props2.type;
+    var _this$props$styles, _this$props$styles2, _this$props$styles3;
+
+    const _this$props4 = this.props,
+          children = _this$props4.children,
+          type = _this$props4.type;
     return jsx("span", null, (type === 'checkbox' || type === 'radio') && jsx("span", {
-      css: this.props.styles?.icon
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon
     }, this.selected && (_IconCheckSolid || (_IconCheckSolid = jsx(IconCheckSolid, null)))), jsx("span", {
-      css: this.props.styles?.label,
+      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.label,
       id: this.labelId
     }, children), type === 'flyout' && jsx("span", {
-      css: this.props.styles?.icon
+      css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.icon
     }, _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = jsx(IconArrowOpenEndSolid, null))));
   }
 
   render() {
-    const _this$props3 = this.props,
-          disabled = _this$props3.disabled,
-          controls = _this$props3.controls,
-          onKeyDown = _this$props3.onKeyDown,
-          onKeyUp = _this$props3.onKeyUp,
-          type = _this$props3.type,
-          href = _this$props3.href;
+    var _this$props$styles4;
+
+    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;
     const props = omitProps(this.props, MenuItem.allowedProps);
     const ElementType = this.elementType;
     return jsx(ElementType, Object.assign({
@@ -228,7 +236,7 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
       onKeyUp: createChainedFunction(onKeyUp, this.handleKeyUp),
       onKeyDown: createChainedFunction(onKeyDown, this.handleKeyDown),
       ref: this.handleRef,
-      css: this.props.styles?.menuItem,
+      css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.menuItem,
       onMouseOver: this.handleMouseOver
     }), this.renderContent());
   }

package/es/Menu/MenuItem/theme.js

@@ -40,19 +40,19 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    padding: `${spacing?.xSmall} ${spacing?.small}`,
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightNormal,
-    lineHeight: typography?.lineHeightCondensed,
-    fontSize: typography?.fontSizeMedium,
-    labelPadding: spacing?.large,
-    labelColor: colors?.textDarkest,
-    background: colors?.backgroundLightest,
-    iconColor: colors?.textDarkest,
-    iconPadding: spacing?.small,
-    activeBackground: colors?.backgroundBrand,
-    activeLabelColor: colors?.textLightest,
-    activeIconColor: colors?.textLightest
+    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.textDarkest,
+    background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
+    iconColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+    iconPadding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
+    activeBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
+    activeLabelColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
+    activeIconColor: colors === null || colors === void 0 ? void 0 : colors.textLightest
   };
   return { ...componentVariables,
     ...themeSpecificStyle[themeName]

package/es/Menu/MenuItemGroup/index.js

@@ -100,11 +100,15 @@ let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
   }
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    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);
   }
 
   componentDidUpdate() {
-    this.props.makeStyles?.();
+    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);
   }
 
   selectedFromChildren(props) {
@@ -131,19 +135,21 @@ let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
   }
 
   renderLabel() {
+    var _this$props$styles;
+
     const label = this.props.label;
     return hasVisibleChildren(label) ? jsx("span", {
-      css: this.props.styles?.label
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.label
     }, label) : label;
   }
 
   renderChildren() {
-    const _this$props = this.props,
-          disabled = _this$props.disabled,
-          controls = _this$props.controls,
-          allowMultiple = _this$props.allowMultiple,
-          isTabbable = _this$props.isTabbable,
-          onMouseOver = _this$props.onMouseOver;
+    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 children = this.props.children;
     let index = -1;
     return Children.map(children, child => {
@@ -171,16 +177,18 @@ let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
   }
 
   render() {
+    var _this$props$styles2, _this$props$styles3;
+
     const props = omitProps(this.props, MenuItemGroup.allowedProps);
     return jsx("span", Object.assign({}, props, {
-      css: this.props.styles?.menuItemGroup,
+      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.menuItemGroup,
       role: "presentation",
       ref: this.handleRef
     }), jsx("span", {
       id: this._labelId
     }, this.renderLabel()), jsx("ul", {
       role: "menu",
-      css: this.props.styles?.items,
+      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,
       "aria-labelledby": this._labelId
     }, this.renderChildren()));

package/es/Menu/MenuItemGroup/theme.js

@@ -38,12 +38,12 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    fontSize: typography?.fontSizeMedium,
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightBold,
-    padding: `${spacing?.xSmall} ${spacing?.small}`,
-    color: colors?.textDarkest,
-    background: colors?.backgroundLightest
+    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.textDarkest,
+    background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
   };
   return { ...componentVariables,
     ...themeSpecificStyle[themeName]

package/es/Menu/MenuItemSeparator/index.js

@@ -51,18 +51,24 @@ let MenuItemSeparator = (_dec = withStyle(generateStyle, generateComponentTheme)
   }
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    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);
   }
 
   componentDidUpdate() {
-    this.props.makeStyles?.();
+    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);
   }
 
   render() {
+    var _this$props$styles;
+
     const props = omitProps(this.props, MenuItemSeparator.allowedProps);
     return jsx("div", Object.assign({}, props, {
       role: "presentation",
-      css: this.props.styles?.menuItemSeparator,
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.menuItemSeparator,
       ref: this.handleRef
     }));
   }

package/es/Menu/MenuItemSeparator/theme.js

@@ -32,9 +32,9 @@ const generateComponentTheme = theme => {
         spacing = theme.spacing,
         borders = theme.borders;
   const componentVariables = {
-    background: colors?.backgroundMedium,
-    height: borders?.widthSmall,
-    margin: `0 ${spacing?.small}`
+    background: colors === null || colors === void 0 ? void 0 : colors.backgroundMedium,
+    height: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    margin: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`
   };
   return { ...componentVariables
   };

package/es/Menu/index.js

@@ -202,11 +202,15 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
   }
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    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);
   }
 
   componentDidUpdate() {
-    this.props.makeStyles?.();
+    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);
   }
 
   get menuItems() {
@@ -215,11 +219,15 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
 
   focus() {
     if (this.shown) {
-      error(!!this._menu?.focus, '[Menu] Could not focus the menu.');
+      var _this$_menu;
+
+      error(!!((_this$_menu = this._menu) !== null && _this$_menu !== void 0 && _this$_menu.focus), '[Menu] Could not focus the menu.');
 
       this._menu.focus();
     } else {
-      error(!!this._trigger?.focus, '[Menu] Could not focus the trigger.');
+      var _this$_trigger;
+
+      error(!!((_this$_trigger = this._trigger) !== null && _this$_trigger !== void 0 && _this$_trigger.focus), '[Menu] Could not focus the trigger.');
 
       this._trigger.focus();
     }
@@ -257,9 +265,9 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
   }
 
   renderChildren() {
-    const _this$props = this.props,
-          children = _this$props.children,
-          disabled = _this$props.disabled;
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          disabled = _this$props3.disabled;
     let count = 0;
     return Children.map(children, child => {
       if (!matchComponentTypes(child, ['MenuItemSeparator', 'MenuItem', 'MenuItemGroup', 'Menu'])) {
@@ -339,11 +347,13 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
   }
 
   renderMenu() {
-    const _this$props2 = this.props,
-          disabled = _this$props2.disabled,
-          label = _this$props2.label,
-          trigger = _this$props2.trigger,
-          onKeyUp = _this$props2.onKeyUp;
+    var _this$props$styles;
+
+    const _this$props4 = this.props,
+          disabled = _this$props4.disabled,
+          label = _this$props4.label,
+          trigger = _this$props4.trigger,
+          onKeyUp = _this$props4.onKeyUp;
     const labelledBy = this.props['aria-labelledby'];
     const controls = this.props['aria-controls'];
     return jsx(MenuContext.Provider, {
@@ -355,7 +365,7 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
       role: "menu",
       "aria-label": label,
       tabIndex: 0,
-      css: this.props.styles?.menu,
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.menu,
       "aria-labelledby": labelledBy || (trigger ? this._labelId : void 0),
       "aria-controls": controls,
       "aria-disabled": disabled ? 'true' : void 0,
@@ -366,20 +376,20 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
   }
 
   render() {
-    const _this$props3 = this.props,
-          show = _this$props3.show,
-          defaultShow = _this$props3.defaultShow,
-          placement = _this$props3.placement,
-          withArrow = _this$props3.withArrow,
-          trigger = _this$props3.trigger,
-          mountNode = _this$props3.mountNode,
-          popoverRef = _this$props3.popoverRef,
-          disabled = _this$props3.disabled,
-          onDismiss = _this$props3.onDismiss,
-          onFocus = _this$props3.onFocus,
-          onMouseOver = _this$props3.onMouseOver,
-          offsetX = _this$props3.offsetX,
-          offsetY = _this$props3.offsetY;
+    const _this$props5 = this.props,
+          show = _this$props5.show,
+          defaultShow = _this$props5.defaultShow,
+          placement = _this$props5.placement,
+          withArrow = _this$props5.withArrow,
+          trigger = _this$props5.trigger,
+          mountNode = _this$props5.mountNode,
+          popoverRef = _this$props5.popoverRef,
+          disabled = _this$props5.disabled,
+          onDismiss = _this$props5.onDismiss,
+          onFocus = _this$props5.onFocus,
+          onMouseOver = _this$props5.onMouseOver,
+          offsetX = _this$props5.offsetX,
+          offsetY = _this$props5.offsetY;
     return trigger ? jsx(Popover, {
       isShowingContent: show,
       defaultIsShowingContent: defaultShow,
@@ -414,7 +424,7 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
       renderTrigger: safeCloneElement(trigger, {
         ref: el => {
           this._trigger = el;
-          this.ref = el?.ref || el;
+          this.ref = (el === null || el === void 0 ? void 0 : el.ref) || el;
         },
         'aria-haspopup': true,
         id: this._labelId,

package/es/Menu/theme.js

@@ -32,13 +32,13 @@ const generateComponentTheme = theme => {
         breakpoints = theme.breakpoints,
         borders = theme.borders;
   const componentVariables = {
-    minWidth: breakpoints?.xxSmall,
-    maxWidth: breakpoints?.xSmall,
-    background: colors?.backgroundLightest,
-    focusBorderStyle: borders?.style,
-    focusBorderWidth: borders?.widthMedium,
-    focusBorderColor: colors?.borderBrand,
-    focusBorderRadius: borders?.radiusMedium
+    minWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.xxSmall,
+    maxWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.xSmall,
+    background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
+    focusBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
+    focusBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
+    focusBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
+    focusBorderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium
   };
   return { ...componentVariables
   };

package/lib/Menu/MenuItem/index.js

@@ -140,7 +140,9 @@ let MenuItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
   }
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    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);
     const context = this.context;
 
     if (context && context.registerMenuItem) {
@@ -149,7 +151,9 @@ let MenuItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
   }
 
   componentDidUpdate() {
-    this.props.makeStyles?.();
+    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);
   }
 
   componentWillUnmount() {
@@ -194,27 +198,31 @@ let MenuItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
   }
 
   renderContent() {
-    const _this$props2 = this.props,
-          children = _this$props2.children,
-          type = _this$props2.type;
+    var _this$props$styles, _this$props$styles2, _this$props$styles3;
+
+    const _this$props4 = this.props,
+          children = _this$props4.children,
+          type = _this$props4.type;
     return (0, _emotion.jsx)("span", null, (type === 'checkbox' || type === 'radio') && (0, _emotion.jsx)("span", {
-      css: this.props.styles?.icon
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon
     }, this.selected && (_IconCheckSolid || (_IconCheckSolid = (0, _emotion.jsx)(_IconCheckSolid2.IconCheckSolid, null)))), (0, _emotion.jsx)("span", {
-      css: this.props.styles?.label,
+      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.label,
       id: this.labelId
     }, children), type === 'flyout' && (0, _emotion.jsx)("span", {
-      css: this.props.styles?.icon
+      css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.icon
     }, _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = (0, _emotion.jsx)(_IconArrowOpenEndSolid.IconArrowOpenEndSolid, null))));
   }
 
   render() {
-    const _this$props3 = this.props,
-          disabled = _this$props3.disabled,
-          controls = _this$props3.controls,
-          onKeyDown = _this$props3.onKeyDown,
-          onKeyUp = _this$props3.onKeyUp,
-          type = _this$props3.type,
-          href = _this$props3.href;
+    var _this$props$styles4;
+
+    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;
     const props = (0, _omitProps.omitProps)(this.props, MenuItem.allowedProps);
     const ElementType = this.elementType;
     return (0, _emotion.jsx)(ElementType, Object.assign({
@@ -231,7 +239,7 @@ let MenuItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       onKeyUp: (0, _createChainedFunction.createChainedFunction)(onKeyUp, this.handleKeyUp),
       onKeyDown: (0, _createChainedFunction.createChainedFunction)(onKeyDown, this.handleKeyDown),
       ref: this.handleRef,
-      css: this.props.styles?.menuItem,
+      css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.menuItem,
       onMouseOver: this.handleMouseOver
     }), this.renderContent());
   }

package/lib/Menu/MenuItem/theme.js

@@ -47,19 +47,19 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    padding: `${spacing?.xSmall} ${spacing?.small}`,
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightNormal,
-    lineHeight: typography?.lineHeightCondensed,
-    fontSize: typography?.fontSizeMedium,
-    labelPadding: spacing?.large,
-    labelColor: colors?.textDarkest,
-    background: colors?.backgroundLightest,
-    iconColor: colors?.textDarkest,
-    iconPadding: spacing?.small,
-    activeBackground: colors?.backgroundBrand,
-    activeLabelColor: colors?.textLightest,
-    activeIconColor: colors?.textLightest
+    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.textDarkest,
+    background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
+    iconColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+    iconPadding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
+    activeBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
+    activeLabelColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
+    activeIconColor: colors === null || colors === void 0 ? void 0 : colors.textLightest
   };
   return { ...componentVariables,
     ...themeSpecificStyle[themeName]

package/lib/Menu/MenuItemGroup/index.js

@@ -100,11 +100,15 @@ let MenuItemGroup = (_dec = (0, _withDeterministicId.withDeterministicId)(), _de
   }
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    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);
   }
 
   componentDidUpdate() {
-    this.props.makeStyles?.();
+    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);
   }
 
   selectedFromChildren(props) {
@@ -133,19 +137,21 @@ let MenuItemGroup = (_dec = (0, _withDeterministicId.withDeterministicId)(), _de
   }
 
   renderLabel() {
+    var _this$props$styles;
+
     const label = this.props.label;
     return (0, _hasVisibleChildren.hasVisibleChildren)(label) ? (0, _emotion.jsx)("span", {
-      css: this.props.styles?.label
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.label
     }, label) : label;
   }
 
   renderChildren() {
-    const _this$props = this.props,
-          disabled = _this$props.disabled,
-          controls = _this$props.controls,
-          allowMultiple = _this$props.allowMultiple,
-          isTabbable = _this$props.isTabbable,
-          onMouseOver = _this$props.onMouseOver;
+    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 children = this.props.children;
     let index = -1;
     return _react.Children.map(children, child => {
@@ -173,16 +179,18 @@ let MenuItemGroup = (_dec = (0, _withDeterministicId.withDeterministicId)(), _de
   }
 
   render() {
+    var _this$props$styles2, _this$props$styles3;
+
     const props = (0, _omitProps.omitProps)(this.props, MenuItemGroup.allowedProps);
     return (0, _emotion.jsx)("span", Object.assign({}, props, {
-      css: this.props.styles?.menuItemGroup,
+      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.menuItemGroup,
       role: "presentation",
       ref: this.handleRef
     }), (0, _emotion.jsx)("span", {
       id: this._labelId
     }, this.renderLabel()), (0, _emotion.jsx)("ul", {
       role: "menu",
-      css: this.props.styles?.items,
+      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,
       "aria-labelledby": this._labelId
     }, this.renderChildren()));

package/lib/Menu/MenuItemGroup/theme.js

@@ -45,12 +45,12 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    fontSize: typography?.fontSizeMedium,
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightBold,
-    padding: `${spacing?.xSmall} ${spacing?.small}`,
-    color: colors?.textDarkest,
-    background: colors?.backgroundLightest
+    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.textDarkest,
+    background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
   };
   return { ...componentVariables,
     ...themeSpecificStyle[themeName]

package/lib/Menu/MenuItemSeparator/index.js

@@ -41,18 +41,24 @@ let MenuItemSeparator = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
   }
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    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);
   }
 
   componentDidUpdate() {
-    this.props.makeStyles?.();
+    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);
   }
 
   render() {
+    var _this$props$styles;
+
     const props = (0, _omitProps.omitProps)(this.props, MenuItemSeparator.allowedProps);
     return (0, _emotion.jsx)("div", Object.assign({}, props, {
       role: "presentation",
-      css: this.props.styles?.menuItemSeparator,
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.menuItemSeparator,
       ref: this.handleRef
     }));
   }

package/lib/Menu/MenuItemSeparator/theme.js

@@ -39,9 +39,9 @@ const generateComponentTheme = theme => {
         spacing = theme.spacing,
         borders = theme.borders;
   const componentVariables = {
-    background: colors?.backgroundMedium,
-    height: borders?.widthSmall,
-    margin: `0 ${spacing?.small}`
+    background: colors === null || colors === void 0 ? void 0 : colors.backgroundMedium,
+    height: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    margin: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`
   };
   return { ...componentVariables
   };

package/lib/Menu/index.js

@@ -225,11 +225,15 @@ let Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
   }
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    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);
   }
 
   componentDidUpdate() {
-    this.props.makeStyles?.();
+    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);
   }
 
   get menuItems() {
@@ -238,11 +242,15 @@ let Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
 
   focus() {
     if (this.shown) {
-      (0, _console.logError)(!!this._menu?.focus, '[Menu] Could not focus the menu.');
+      var _this$_menu;
+
+      (0, _console.logError)(!!((_this$_menu = this._menu) !== null && _this$_menu !== void 0 && _this$_menu.focus), '[Menu] Could not focus the menu.');
 
       this._menu.focus();
     } else {
-      (0, _console.logError)(!!this._trigger?.focus, '[Menu] Could not focus the trigger.');
+      var _this$_trigger;
+
+      (0, _console.logError)(!!((_this$_trigger = this._trigger) !== null && _this$_trigger !== void 0 && _this$_trigger.focus), '[Menu] Could not focus the trigger.');
 
       this._trigger.focus();
     }
@@ -280,9 +288,9 @@ let Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
   }
 
   renderChildren() {
-    const _this$props = this.props,
-          children = _this$props.children,
-          disabled = _this$props.disabled;
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          disabled = _this$props3.disabled;
     let count = 0;
     return _react.Children.map(children, child => {
       if (!(0, _matchComponentTypes.matchComponentTypes)(child, ['MenuItemSeparator', 'MenuItem', 'MenuItemGroup', 'Menu'])) {
@@ -362,11 +370,13 @@ let Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
   }
 
   renderMenu() {
-    const _this$props2 = this.props,
-          disabled = _this$props2.disabled,
-          label = _this$props2.label,
-          trigger = _this$props2.trigger,
-          onKeyUp = _this$props2.onKeyUp;
+    var _this$props$styles;
+
+    const _this$props4 = this.props,
+          disabled = _this$props4.disabled,
+          label = _this$props4.label,
+          trigger = _this$props4.trigger,
+          onKeyUp = _this$props4.onKeyUp;
     const labelledBy = this.props['aria-labelledby'];
     const controls = this.props['aria-controls'];
     return (0, _emotion.jsx)(_MenuContext.MenuContext.Provider, {
@@ -378,7 +388,7 @@ let Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
       role: "menu",
       "aria-label": label,
       tabIndex: 0,
-      css: this.props.styles?.menu,
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.menu,
       "aria-labelledby": labelledBy || (trigger ? this._labelId : void 0),
       "aria-controls": controls,
       "aria-disabled": disabled ? 'true' : void 0,
@@ -389,20 +399,20 @@ let Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
   }
 
   render() {
-    const _this$props3 = this.props,
-          show = _this$props3.show,
-          defaultShow = _this$props3.defaultShow,
-          placement = _this$props3.placement,
-          withArrow = _this$props3.withArrow,
-          trigger = _this$props3.trigger,
-          mountNode = _this$props3.mountNode,
-          popoverRef = _this$props3.popoverRef,
-          disabled = _this$props3.disabled,
-          onDismiss = _this$props3.onDismiss,
-          onFocus = _this$props3.onFocus,
-          onMouseOver = _this$props3.onMouseOver,
-          offsetX = _this$props3.offsetX,
-          offsetY = _this$props3.offsetY;
+    const _this$props5 = this.props,
+          show = _this$props5.show,
+          defaultShow = _this$props5.defaultShow,
+          placement = _this$props5.placement,
+          withArrow = _this$props5.withArrow,
+          trigger = _this$props5.trigger,
+          mountNode = _this$props5.mountNode,
+          popoverRef = _this$props5.popoverRef,
+          disabled = _this$props5.disabled,
+          onDismiss = _this$props5.onDismiss,
+          onFocus = _this$props5.onFocus,
+          onMouseOver = _this$props5.onMouseOver,
+          offsetX = _this$props5.offsetX,
+          offsetY = _this$props5.offsetY;
     return trigger ? (0, _emotion.jsx)(_Popover.Popover, {
       isShowingContent: show,
       defaultIsShowingContent: defaultShow,
@@ -437,7 +447,7 @@ let Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
       renderTrigger: (0, _safeCloneElement.safeCloneElement)(trigger, {
         ref: el => {
           this._trigger = el;
-          this.ref = el?.ref || el;
+          this.ref = (el === null || el === void 0 ? void 0 : el.ref) || el;
         },
         'aria-haspopup': true,
         id: this._labelId,

package/lib/Menu/theme.js

@@ -39,13 +39,13 @@ const generateComponentTheme = theme => {
         breakpoints = theme.breakpoints,
         borders = theme.borders;
   const componentVariables = {
-    minWidth: breakpoints?.xxSmall,
-    maxWidth: breakpoints?.xSmall,
-    background: colors?.backgroundLightest,
-    focusBorderStyle: borders?.style,
-    focusBorderWidth: borders?.widthMedium,
-    focusBorderColor: colors?.borderBrand,
-    focusBorderRadius: borders?.radiusMedium
+    minWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.xxSmall,
+    maxWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.xSmall,
+    background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
+    focusBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
+    focusBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
+    focusBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
+    focusBorderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium
   };
   return { ...componentVariables
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-menu",
-  "version": "8.18.0",
+  "version": "8.18.1-snapshot.2+ca4c1ff9d",
   "description": "A dropdown menu component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,27 +23,27 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.18.0",
-    "@instructure/ui-color-utils": "8.18.0",
-    "@instructure/ui-test-locator": "8.18.0",
-    "@instructure/ui-test-queries": "8.18.0",
-    "@instructure/ui-test-utils": "8.18.0",
-    "@instructure/ui-themes": "8.18.0"
+    "@instructure/ui-babel-preset": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/ui-color-utils": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/ui-test-locator": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/ui-test-queries": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/ui-test-utils": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/ui-themes": "8.18.1-snapshot.2+ca4c1ff9d"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.18.0",
-    "@instructure/emotion": "8.18.0",
-    "@instructure/shared-types": "8.18.0",
-    "@instructure/ui-a11y-utils": "8.18.0",
-    "@instructure/ui-dom-utils": "8.18.0",
-    "@instructure/ui-icons": "8.18.0",
-    "@instructure/ui-popover": "8.18.0",
-    "@instructure/ui-position": "8.18.0",
-    "@instructure/ui-prop-types": "8.18.0",
-    "@instructure/ui-react-utils": "8.18.0",
-    "@instructure/ui-testable": "8.18.0",
-    "@instructure/ui-utils": "8.18.0",
+    "@instructure/console": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/emotion": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/shared-types": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/ui-a11y-utils": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/ui-dom-utils": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/ui-icons": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/ui-popover": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/ui-position": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/ui-prop-types": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/ui-react-utils": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/ui-testable": "8.18.1-snapshot.2+ca4c1ff9d",
+    "@instructure/ui-utils": "8.18.1-snapshot.2+ca4c1ff9d",
     "keycode": "^2",
     "prop-types": "^15"
   },
@@ -53,5 +53,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "gitHead": "ca4c1ff9d3985151ae0758fb596de41652dbb58b"
 }