@instructure/ui-menu 11.6.0 → 11.6.1-snapshot-129

package/src/Menu/v2/index.tsx

@@ -0,0 +1,514 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present 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.
+ */
+
+import { ComponentElement, Children, Component, ReactElement } from 'react'
+import keycode from 'keycode'
+
+import { Popover } from '@instructure/ui-popover/latest'
+import {
+  safeCloneElement,
+  matchComponentTypes,
+  withDeterministicId
+} from '@instructure/ui-react-utils'
+import { logError as error } from '@instructure/console'
+import { containsActiveElement } from '@instructure/ui-dom-utils'
+
+import { MenuContext } from '../../utils/v1/MenuContext'
+import { MenuItem } from './MenuItem'
+import type { MenuItemProps } from './MenuItem/props'
+import { MenuItemGroup } from './MenuItemGroup'
+import type { MenuGroupProps } from './MenuItemGroup/props'
+import { MenuItemSeparator } from './MenuItemSeparator'
+import type { MenuSeparatorProps } from './MenuItemSeparator/props'
+import { withStyle } from '@instructure/emotion'
+
+import generateStyle from './styles'
+
+import { allowedProps } from './props'
+import type { MenuProps } from './props'
+
+type MenuChild = ComponentElement<MenuProps, Menu>
+type MenuItemChild = ComponentElement<MenuItemProps, MenuItem>
+type MenuGroupChild = ComponentElement<MenuGroupProps, MenuItemGroup>
+type MenuSeparatorChild = ComponentElement<
+  MenuSeparatorProps,
+  MenuItemSeparator
+>
+
+/**
+---
+category: components
+---
+**/
+@withDeterministicId()
+@withStyle(generateStyle)
+class Menu extends Component<MenuProps> {
+  static readonly 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: MenuItem[] = []
+  _popover: Popover | null = null
+  _trigger: MenuItem | (React.ReactInstance & { focus?: () => void }) | null =
+    null
+  _menu: HTMLElement | null = null
+  _labelId = this.props.deterministicId!('Menu__label')
+
+  _activeSubMenu?: Menu | null
+  _id: string
+
+  ref: Element | null = null
+
+  handleRef = (el: HTMLElement | null) => {
+    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: MenuProps) {
+    super(props)
+
+    this._id = this.props.id || props.deterministicId!()
+  }
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  static contextType = MenuContext
+
+  registerMenuItem = (item: MenuItem) => {
+    this._menuItems.push(item)
+  }
+
+  removeMenuItem = (item: MenuItem) => {
+    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: MenuItem) => {
+    return this._menuItems.findIndex((i) => i === item)
+  }
+
+  handleTriggerKeyDown = (event: React.KeyboardEvent) => {
+    if (this.props.type === 'flyout' && event.keyCode === keycode.codes.right) {
+      event.persist()
+      this.show(event)
+    }
+  }
+
+  handleTriggerMouseOver = (event: React.MouseEvent) => {
+    if (this.props.type === 'flyout') {
+      this.show(event)
+    }
+  }
+
+  handleToggle = (shown: boolean) => {
+    if (typeof this.props.onToggle === 'function') {
+      this.props.onToggle(shown, this)
+    }
+  }
+
+  handleMenuKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+    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: MenuProps['onSelect'] = (
+    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: MenuItemProps['onMouseOver'] = (event, menuItem) => {
+    if (this._activeSubMenu && menuItem !== this._activeSubMenu._trigger) {
+      this.hideActiveSubMenu(event)
+    }
+  }
+
+  hideActiveSubMenu = (event: React.MouseEvent | React.KeyboardEvent) => {
+    if (this._activeSubMenu) {
+      this._activeSubMenu.hide(event)
+      this._activeSubMenu = null
+    }
+  }
+
+  handleSubMenuToggle: MenuProps['onToggle'] = (shown, subMenu) => {
+    if (shown) {
+      this._activeSubMenu = subMenu
+    }
+  }
+
+  handleSubMenuDismiss = (
+    event: React.UIEvent | React.FocusEvent,
+    documentClick: boolean
+  ) => {
+    if (
+      (event && (event as React.KeyboardEvent).keyCode === keycode.codes.tab) ||
+      documentClick
+    ) {
+      this.hide(event)
+    }
+  }
+
+  hide = (event: React.UIEvent | React.FocusEvent) => {
+    if (this._popover) {
+      this._popover.hide(event)
+    }
+  }
+
+  show = (event: React.MouseEvent | React.KeyboardEvent) => {
+    if (this._popover) {
+      this._popover.show(event)
+    }
+  }
+
+  focus() {
+    if (this.shown) {
+      error(!!this._menu?.focus, '[Menu] Could not focus the menu.')
+      this._menu!.focus()
+    } else {
+      error(!!this._trigger?.focus, '[Menu] Could not focus the trigger.')
+      this._trigger!.focus!()
+    }
+  }
+
+  focused() {
+    if (this.shown) {
+      return containsActiveElement(this._menu) || this.state.hasFocus
+    } else {
+      return containsActiveElement(this._trigger)
+    }
+  }
+
+  get focusedIndex() {
+    return this.menuItems.findIndex((item) => {
+      return item && item.focused === true
+    })
+  }
+
+  moveFocus(step: number) {
+    const count = this.menuItems ? this.menuItems.length : 0
+
+    if (count <= 0) {
+      return
+    }
+
+    const current = this.focusedIndex < 0 && step < 0 ? 0 : this.focusedIndex
+
+    const nextItem = this.menuItems[(current + count + step) % count]
+
+    error(
+      typeof nextItem !== 'undefined' && typeof nextItem.focus !== 'undefined',
+      '[Menu] Could not focus next menu item.'
+    )
+
+    nextItem.focus()
+  }
+
+  get shown() {
+    return this._popover ? this._popover.shown : true
+  }
+
+  renderChildren() {
+    const { children, disabled } = this.props
+
+    let count = 0
+
+    return Children.map(
+      children as
+        | MenuChild
+        | MenuItemChild
+        | MenuGroupChild
+        | MenuSeparatorChild,
+      (child) => {
+        if (
+          !matchComponentTypes(child, [
+            'MenuItemSeparator',
+            'MenuItem',
+            'MenuItemGroup',
+            'Menu'
+          ])
+        ) {
+          return
+        }
+
+        count += 1
+
+        const isTabbable = !this.state.hasFocus && count === 1
+
+        if (
+          matchComponentTypes<MenuSeparatorChild>(child, ['MenuItemSeparator'])
+        ) {
+          return child
+        }
+
+        const menuItemChild = child
+
+        const controls =
+          menuItemChild.props['aria-controls'] ||
+          menuItemChild.props.controls ||
+          this.props['aria-controls'] ||
+          this.props.controls
+
+        if (matchComponentTypes<MenuItemChild>(child, ['MenuItem'])) {
+          return safeCloneElement(child, {
+            controls,
+            children: child.props.children,
+            disabled: disabled || child.props.disabled,
+            onFocus: this.handleMenuItemFocus,
+            onBlur: this.handleMenuItemBlur,
+            onSelect: this.handleMenuItemSelect,
+            onMouseOver: this.handleMenuItemMouseOver,
+            tabIndex: isTabbable ? 0 : -1
+          })
+        }
+
+        if (matchComponentTypes<MenuGroupChild>(child, ['MenuItemGroup'])) {
+          return safeCloneElement(child, {
+            label: child.props.label,
+            controls,
+            disabled: disabled || child.props.disabled,
+            onFocus: this.handleMenuItemFocus,
+            onBlur: this.handleMenuItemBlur,
+            onSelect: this.handleMenuItemSelect,
+            onMouseOver: this.handleMenuItemMouseOver,
+            isTabbable
+          })
+        }
+
+        if (matchComponentTypes(child, ['Menu'])) {
+          const submenuDisabled = disabled || child.props.disabled
+
+          return safeCloneElement(child, {
+            type: 'flyout',
+            controls,
+            disabled: submenuDisabled,
+            onSelect: this.handleMenuItemSelect,
+            placement: 'end top',
+            offsetX: -5,
+            offsetY: 5,
+            withArrow: false,
+            onToggle: this.handleSubMenuToggle,
+            onDismiss: this.handleSubMenuDismiss,
+            trigger: (
+              <MenuItem
+                onMouseOver={this.handleMenuItemMouseOver}
+                onFocus={this.handleMenuItemFocus}
+                onBlur={this.handleMenuItemBlur}
+                tabIndex={isTabbable ? 0 : -1}
+                type="flyout"
+                disabled={submenuDisabled}
+                renderLabelInfo={child.props.renderLabelInfo}
+              >
+                {child.props.title || child.props.label}
+              </MenuItem>
+            )
+          })
+        }
+        return
+      }
+    )
+  }
+
+  renderMenu() {
+    const { disabled, label, trigger, onKeyUp } = this.props
+
+    const labelledBy = this.props['aria-labelledby']
+    const controls = this.props['aria-controls']
+
+    return (
+      <MenuContext.Provider
+        value={{
+          removeMenuItem: this.removeMenuItem,
+          registerMenuItem: this.registerMenuItem
+        }}
+      >
+        <div
+          role="menu"
+          aria-label={label}
+          tabIndex={0}
+          css={this.props.styles?.menu}
+          aria-labelledby={labelledBy || (trigger ? this._labelId : undefined)}
+          aria-controls={controls}
+          aria-disabled={disabled ? 'true' : undefined}
+          onKeyDown={this.handleMenuKeyDown}
+          onKeyUp={onKeyUp}
+          ref={this.handleRef}
+          data-cid="Menu"
+        >
+          {this.renderChildren()}
+        </div>
+      </MenuContext.Provider>
+    )
+  }
+
+  render() {
+    const {
+      show,
+      defaultShow,
+      placement,
+      withArrow,
+      trigger,
+      mountNode,
+      popoverRef,
+      disabled,
+      onDismiss,
+      onFocus,
+      onMouseOver,
+      positionContainerDisplay,
+      offsetX,
+      offsetY
+    } = this.props
+
+    return trigger ? (
+      <Popover
+        data-cid="Menu"
+        isShowingContent={show}
+        defaultIsShowingContent={defaultShow}
+        onHideContent={(event, { documentClick }) => {
+          if (typeof onDismiss === 'function') {
+            onDismiss(event, documentClick)
+          }
+          this.handleToggle(false)
+        }}
+        onShowContent={() => this.handleToggle(true)}
+        mountNode={mountNode}
+        placement={placement}
+        withArrow={withArrow}
+        id={this._id}
+        on={['click']}
+        shouldContainFocus
+        shouldReturnFocus
+        onFocus={onFocus}
+        onMouseOver={onMouseOver}
+        positionContainerDisplay={positionContainerDisplay}
+        offsetX={offsetX}
+        offsetY={offsetY}
+        elementRef={(element) => {
+          this.ref = element
+        }}
+        ref={(el) => {
+          this._popover = el
+          if (typeof popoverRef === 'function') {
+            popoverRef(el)
+          }
+        }}
+        renderTrigger={safeCloneElement(trigger as ReactElement, {
+          ref: (el: (React.ReactInstance & { ref?: Element }) | null) => {
+            this._trigger = el
+          },
+          'aria-haspopup': true,
+          id: this._labelId,
+          onMouseOver: this.handleTriggerMouseOver,
+          onKeyDown: this.handleTriggerKeyDown,
+          disabled: (trigger as ReactElement<any>).props.disabled || disabled
+        })}
+        defaultFocusElement={() =>
+          this._popover?._contentElement?.querySelector('[class$="menuItem"]')
+        }
+      >
+        {this.renderMenu()}
+      </Popover>
+    ) : (
+      this.renderMenu()
+    )
+  }
+}
+
+export default Menu
+export { Menu, MenuItem, MenuItemGroup, MenuItemSeparator }