@instructure/ui-menu 11.7.3-snapshot-7 → 11.7.3-snapshot-26

package/es/Menu/v1/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _Menu;
+var _dec, _dec2, _class;
 /*
  * The MIT License (MIT)
  *
@@ -43,158 +43,178 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 category: components
 ---
 **/
-let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = (_Menu = class Menu extends Component {
+let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = class Menu extends Component {
+  static displayName = "Menu";
+  static componentId = 'Menu';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    label: null,
+    disabled: false,
+    trigger: null,
+    placement: 'bottom center',
+    defaultShow: false,
+    mountNode: null,
+    constrain: 'window',
+    shouldHideOnSelect: true,
+    shouldFocusTriggerOnClose: true,
+    withArrow: true,
+    offsetX: 0,
+    offsetY: 0
+  };
+  static Item = MenuItem;
+  static Group = MenuItemGroup;
+  static Separator = MenuItemSeparator;
+  state = {
+    hasFocus: false
+  };
+  _rootNode = null;
+  _menuItems = [];
+  _popover = null;
+  _trigger = null;
+  _menu = null;
+  _labelId = this.props.deterministicId('Menu__label');
+  _activeSubMenu;
+  _id;
+  ref = null;
+  handleRef = el => {
+    const {
+      menuRef
+    } = this.props;
+    this._menu = el;
+    if (typeof menuRef === 'function') {
+      menuRef(el);
+    }
+    // If there is no trigger `<ul>` is the ref, otherwise the trigger
+    if (!this.props.trigger) {
+      this.ref = el;
+    }
+  };
   constructor(props) {
     super(props);
-    this.state = {
-      hasFocus: false
-    };
-    this._rootNode = null;
-    this._menuItems = [];
-    this._popover = null;
-    this._trigger = null;
-    this._menu = null;
-    this._labelId = this.props.deterministicId('Menu__label');
-    this._activeSubMenu = void 0;
-    this._id = void 0;
-    this.ref = null;
-    this.handleRef = el => {
-      const menuRef = this.props.menuRef;
-      this._menu = el;
-      if (typeof menuRef === 'function') {
-        menuRef(el);
-      }
-      // If there is no trigger `<ul>` is the ref, otherwise the trigger
-      if (!this.props.trigger) {
-        this.ref = el;
-      }
-    };
-    this.registerMenuItem = item => {
-      this._menuItems.push(item);
-    };
-    this.removeMenuItem = item => {
-      const index = this.getMenuItemIndex(item);
-      error(index >= 0, '[Menu] Could not find registered menu item.');
-      if (index >= 0) {
-        this._menuItems.splice(index, 1);
-      }
-    };
-    this.getMenuItemIndex = item => {
-      return this._menuItems.findIndex(i => i === item);
-    };
-    this.handleTriggerKeyDown = event => {
-      if (this.props.type === 'flyout' && event.keyCode === keycode.codes.right) {
-        event.persist();
-        this.show(event);
-      }
-    };
-    this.handleTriggerMouseOver = event => {
-      if (this.props.type === 'flyout') {
-        this.show(event);
-      }
-    };
-    this.handleToggle = shown => {
-      if (typeof this.props.onToggle === 'function') {
-        this.props.onToggle(shown, this);
-      }
-    };
-    this.handleMenuKeyDown = event => {
-      const key = event && event.keyCode;
-      const _keycode$codes = keycode.codes,
-        down = _keycode$codes.down,
-        up = _keycode$codes.up,
-        tab = _keycode$codes.tab,
-        left = _keycode$codes.left;
-      const pgdn = keycode.codes['page down'];
-      const pgup = keycode.codes['page up'];
-      if (key === down || key === pgdn) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.moveFocus(1);
-        this.hideActiveSubMenu(event);
-      } else if (key === up || key === pgup) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.moveFocus(-1);
-        this.hideActiveSubMenu(event);
-      } else if (key === tab || key === left) {
-        event.persist();
-        this.hide(event);
-      }
-      if (typeof this.props.onKeyDown === 'function') {
-        this.props.onKeyDown(event);
-      }
-    };
-    this.handleMenuItemSelect = (event, value, selected, item) => {
-      if (this.props.shouldHideOnSelect) {
-        this.hide(event);
-      }
-      if (typeof this.props.onSelect === 'function') {
-        this.props.onSelect(event, value, selected, item);
-      }
-    };
-    this.handleMenuItemFocus = () => {
-      this.setState({
-        hasFocus: true
-      });
-    };
-    this.handleMenuItemBlur = () => {
-      this.setState({
-        hasFocus: this.focusedIndex >= 0
-      });
-    };
-    this.handleMenuItemMouseOver = (event, menuItem) => {
-      if (this._activeSubMenu && menuItem !== this._activeSubMenu._trigger) {
-        this.hideActiveSubMenu(event);
-      }
-    };
-    this.hideActiveSubMenu = event => {
-      if (this._activeSubMenu) {
-        this._activeSubMenu.hide(event);
-        this._activeSubMenu = null;
-      }
-    };
-    this.handleSubMenuToggle = (shown, subMenu) => {
-      if (shown) {
-        this._activeSubMenu = subMenu;
-      }
-    };
-    this.handleSubMenuDismiss = (event, documentClick) => {
-      if (event && event.keyCode === keycode.codes.tab || documentClick) {
-        this.hide(event);
-      }
-    };
-    this.hide = event => {
-      if (this._popover) {
-        this._popover.hide(event);
-      }
-    };
-    this.show = event => {
-      if (this._popover) {
-        this._popover.show(event);
-      }
-    };
     this._id = this.props.id || props.deterministicId();
   }
   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?.();
   }
+  static contextType = MenuContext;
+  registerMenuItem = item => {
+    this._menuItems.push(item);
+  };
+  removeMenuItem = item => {
+    const index = this.getMenuItemIndex(item);
+    error(index >= 0, '[Menu] Could not find registered menu item.');
+    if (index >= 0) {
+      this._menuItems.splice(index, 1);
+    }
+  };
   get menuItems() {
     return this._menuItems;
   }
+  getMenuItemIndex = item => {
+    return this._menuItems.findIndex(i => i === item);
+  };
+  handleTriggerKeyDown = event => {
+    if (this.props.type === 'flyout' && event.keyCode === keycode.codes.right) {
+      event.persist();
+      this.show(event);
+    }
+  };
+  handleTriggerMouseOver = event => {
+    if (this.props.type === 'flyout') {
+      this.show(event);
+    }
+  };
+  handleToggle = shown => {
+    if (typeof this.props.onToggle === 'function') {
+      this.props.onToggle(shown, this);
+    }
+  };
+  handleMenuKeyDown = event => {
+    const key = event && event.keyCode;
+    const {
+      down,
+      up,
+      tab,
+      left
+    } = keycode.codes;
+    const pgdn = keycode.codes['page down'];
+    const pgup = keycode.codes['page up'];
+    if (key === down || key === pgdn) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.moveFocus(1);
+      this.hideActiveSubMenu(event);
+    } else if (key === up || key === pgup) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.moveFocus(-1);
+      this.hideActiveSubMenu(event);
+    } else if (key === tab || key === left) {
+      event.persist();
+      this.hide(event);
+    }
+    if (typeof this.props.onKeyDown === 'function') {
+      this.props.onKeyDown(event);
+    }
+  };
+  handleMenuItemSelect = (event, value, selected, item) => {
+    if (this.props.shouldHideOnSelect) {
+      this.hide(event);
+    }
+    if (typeof this.props.onSelect === 'function') {
+      this.props.onSelect(event, value, selected, item);
+    }
+  };
+  handleMenuItemFocus = () => {
+    this.setState({
+      hasFocus: true
+    });
+  };
+  handleMenuItemBlur = () => {
+    this.setState({
+      hasFocus: this.focusedIndex >= 0
+    });
+  };
+  handleMenuItemMouseOver = (event, menuItem) => {
+    if (this._activeSubMenu && menuItem !== this._activeSubMenu._trigger) {
+      this.hideActiveSubMenu(event);
+    }
+  };
+  hideActiveSubMenu = event => {
+    if (this._activeSubMenu) {
+      this._activeSubMenu.hide(event);
+      this._activeSubMenu = null;
+    }
+  };
+  handleSubMenuToggle = (shown, subMenu) => {
+    if (shown) {
+      this._activeSubMenu = subMenu;
+    }
+  };
+  handleSubMenuDismiss = (event, documentClick) => {
+    if (event && event.keyCode === keycode.codes.tab || documentClick) {
+      this.hide(event);
+    }
+  };
+  hide = event => {
+    if (this._popover) {
+      this._popover.hide(event);
+    }
+  };
+  show = event => {
+    if (this._popover) {
+      this._popover.show(event);
+    }
+  };
   focus() {
     if (this.shown) {
-      var _this$_menu;
-      error(!!((_this$_menu = this._menu) !== null && _this$_menu !== void 0 && _this$_menu.focus), '[Menu] Could not focus the menu.');
+      error(!!this._menu?.focus, '[Menu] Could not focus the menu.');
       this._menu.focus();
     } else {
-      var _this$_trigger;
-      error(!!((_this$_trigger = this._trigger) !== null && _this$_trigger !== void 0 && _this$_trigger.focus), '[Menu] Could not focus the trigger.');
+      error(!!this._trigger?.focus, '[Menu] Could not focus the trigger.');
       this._trigger.focus();
     }
   }
@@ -224,9 +244,10 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
     return this._popover ? this._popover.shown : true;
   }
   renderChildren() {
-    const _this$props3 = this.props,
-      children = _this$props3.children,
-      disabled = _this$props3.disabled;
+    const {
+      children,
+      disabled
+    } = this.props;
     let count = 0;
     return Children.map(children, child => {
       if (!matchComponentTypes(child, ['MenuItemSeparator', 'MenuItem', 'MenuItemGroup', 'Menu'])) {
@@ -292,12 +313,12 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
     });
   }
   renderMenu() {
-    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 {
+      disabled,
+      label,
+      trigger,
+      onKeyUp
+    } = this.props;
     const labelledBy = this.props['aria-labelledby'];
     const controls = this.props['aria-controls'];
     return _jsx(MenuContext.Provider, {
@@ -309,10 +330,10 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
         role: "menu",
         "aria-label": label,
         tabIndex: 0,
-        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),
+        css: this.props.styles?.menu,
+        "aria-labelledby": labelledBy || (trigger ? this._labelId : undefined),
         "aria-controls": controls,
-        "aria-disabled": disabled ? 'true' : void 0,
+        "aria-disabled": disabled ? 'true' : undefined,
         onKeyDown: this.handleMenuKeyDown,
         onKeyUp: onKeyUp,
         ref: this.handleRef,
@@ -322,21 +343,22 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
     });
   }
   render() {
-    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,
-      positionContainerDisplay = _this$props5.positionContainerDisplay,
-      offsetX = _this$props5.offsetX,
-      offsetY = _this$props5.offsetY;
+    const {
+      show,
+      defaultShow,
+      placement,
+      withArrow,
+      trigger,
+      mountNode,
+      popoverRef,
+      disabled,
+      onDismiss,
+      onFocus,
+      onMouseOver,
+      positionContainerDisplay,
+      offsetX,
+      offsetY
+    } = this.props;
     return trigger ? _jsx(Popover, {
       "data-cid": "Menu",
       isShowingContent: show,
@@ -381,26 +403,10 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
         onKeyDown: this.handleTriggerKeyDown,
         disabled: trigger.props.disabled || disabled
       }),
-      defaultFocusElement: () => {
-        var _this$_popover, _this$_popover$_conte;
-        return (_this$_popover = this._popover) === null || _this$_popover === void 0 ? void 0 : (_this$_popover$_conte = _this$_popover._contentElement) === null || _this$_popover$_conte === void 0 ? void 0 : _this$_popover$_conte.querySelector('[class$="menuItem"]');
-      },
+      defaultFocusElement: () => this._popover?._contentElement?.querySelector('[class$="menuItem"]'),
       children: this.renderMenu()
     }) : this.renderMenu();
   }
-}, _Menu.displayName = "Menu", _Menu.componentId = 'Menu', _Menu.allowedProps = allowedProps, _Menu.defaultProps = {
-  label: null,
-  disabled: false,
-  trigger: null,
-  placement: 'bottom center',
-  defaultShow: false,
-  mountNode: null,
-  constrain: 'window',
-  shouldHideOnSelect: true,
-  shouldFocusTriggerOnClose: true,
-  withArrow: true,
-  offsetX: 0,
-  offsetY: 0
-}, _Menu.Item = MenuItem, _Menu.Group = MenuItemGroup, _Menu.Separator = MenuItemSeparator, _Menu.contextType = MenuContext, _Menu)) || _class) || _class);
+}) || _class) || _class);
 export default Menu;
 export { Menu, MenuItem, MenuItemGroup, MenuItemSeparator };

package/es/Menu/v1/theme.js

@@ -28,19 +28,20 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts, _colors$contrasts2;
-  const colors = theme.colors,
-    breakpoints = theme.breakpoints,
-    borders = theme.borders;
+  const {
+    colors,
+    breakpoints,
+    borders
+  } = theme;
   const componentVariables = {
-    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$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
-    borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
-    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$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.blue4570,
-    focusBorderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium
+    minWidth: breakpoints?.xxSmall,
+    maxWidth: breakpoints?.xSmall,
+    background: colors?.contrasts?.white1010,
+    borderRadius: borders?.radiusMedium,
+    focusBorderStyle: borders?.style,
+    focusBorderWidth: borders?.widthMedium,
+    focusBorderColor: colors?.contrasts?.blue4570,
+    focusBorderRadius: borders?.radiusMedium
   };
   return {
     ...componentVariables