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

package/src/Menu/v2/MenuItem/index.tsx

@@ -0,0 +1,318 @@
+/*
+ * 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 { Component } from 'react'
+import keycode from 'keycode'
+
+import { CheckInstUIIcon, ChevronRightInstUIIcon } from '@instructure/ui-icons'
+import {
+  omitProps,
+  getElementType,
+  withDeterministicId,
+  callRenderProp
+} from '@instructure/ui-react-utils'
+import { createChainedFunction } from '@instructure/ui-utils'
+import { isActiveElement, findDOMNode } from '@instructure/ui-dom-utils'
+import { withStyle } from '@instructure/emotion'
+
+import { MenuContext } from '../../../utils/v1/MenuContext'
+
+import generateStyle from './styles'
+
+import { allowedProps } from './props'
+import type { MenuItemProps, MenuItemState } from './props'
+
+/**
+---
+parent: Menu
+id: Menu.Item
+---
+**/
+@withDeterministicId()
+@withStyle(generateStyle)
+class MenuItem extends Component<MenuItemProps, MenuItemState> {
+  static readonly componentId = 'Menu.Item'
+
+  static allowedProps = allowedProps
+  static defaultProps = {
+    type: 'button',
+    disabled: false
+  } as const
+
+  declare context: React.ContextType<typeof MenuContext>
+  static contextType = MenuContext
+
+  constructor(props: MenuItemProps) {
+    super(props)
+
+    const state: MenuItemState = {
+      isHovered: false,
+      isFocused: false
+    }
+
+    if (typeof props.selected === 'undefined') {
+      state.selected = !!props.defaultSelected
+    }
+
+    this.state = state
+    this.labelId = props.deterministicId!('MenuItem__label')
+  }
+
+  get _node() {
+    console.warn(
+      '_node property is deprecated and will be removed in v9, please use ref instead'
+    )
+
+    return this.ref
+  }
+
+  labelId: string
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    this.ref = el
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+    const context = this.context
+
+    if (context && context.registerMenuItem) {
+      context.registerMenuItem(this)
+    }
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  componentWillUnmount() {
+    const context = this.context
+
+    if (context && context.removeMenuItem) {
+      context.removeMenuItem(this)
+    }
+  }
+
+  handleClick = (e: React.MouseEvent) => {
+    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: React.KeyboardEvent) => {
+    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) as HTMLElement
+        refNode.click()
+      }
+    }
+  }
+
+  handleKeyUp = (e: React.KeyboardEvent) => {
+    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) as HTMLElement
+        refNode.click()
+      }
+    }
+  }
+
+  handleMouseOver = (event: React.MouseEvent) => {
+    if (!this.focused) {
+      this.focus()
+    }
+
+    if (typeof this.props.onMouseOver === 'function') {
+      this.props.onMouseOver(event, this)
+    }
+  }
+
+  handleMouseEnter = () => {
+    this.setState({ isHovered: true })
+  }
+
+  handleMouseLeave = () => {
+    this.setState({ isHovered: false })
+  }
+
+  handleFocusEvent = () => {
+    this.setState({ isFocused: true })
+  }
+
+  handleBlurEvent = () => {
+    this.setState({ isFocused: false })
+  }
+
+  getIconColor = () => {
+    const { type } = this.props
+
+    if (type === 'flyout') {
+      return 'baseColor'
+    }
+    return this.selected ? 'inverseColor' : 'baseColor'
+  }
+
+  get elementType() {
+    return getElementType(MenuItem, this.props)
+  }
+
+  get role() {
+    switch (this.props.type) {
+      case 'checkbox':
+        return 'menuitemcheckbox'
+      case 'radio':
+        return 'menuitemradio'
+      default:
+        return 'menuitem'
+    }
+  }
+
+  get selected() {
+    return typeof this.props.selected === 'undefined'
+      ? this.state.selected
+      : this.props.selected
+  }
+
+  get focused() {
+    return isActiveElement(this.ref)
+  }
+
+  focus() {
+    const refNode = findDOMNode(this.ref) as HTMLElement
+    refNode.focus()
+  }
+
+  renderContent() {
+    const { children, type, renderLabelInfo } = this.props
+
+    return (
+      <span>
+        <span css={this.props.styles?.label} id={this.labelId}>
+          {children}
+        </span>
+        {(type === 'checkbox' || type === 'radio') && (
+          <span css={this.props.styles?.icon}>
+            {this.selected && (
+              <CheckInstUIIcon size="md" color={this.getIconColor()} />
+            )}
+          </span>
+        )}
+        {type === 'flyout' && (
+          <span css={this.props.styles?.icon}>
+            <ChevronRightInstUIIcon size="md" color={this.getIconColor()} />
+          </span>
+        )}
+        {renderLabelInfo && (
+          <span css={this.props.styles?.labelInfo}>
+            {callRenderProp(renderLabelInfo)}
+          </span>
+        )}
+      </span>
+    )
+  }
+
+  render() {
+    const {
+      disabled,
+      controls,
+      onKeyDown,
+      onKeyUp,
+      onFocus,
+      onBlur,
+      type,
+      href,
+      target
+    } = this.props
+
+    const props = omitProps(this.props, MenuItem.allowedProps)
+    const ElementType = this.elementType
+
+    return (
+      <ElementType
+        tabIndex={-1} // note: tabIndex can be overridden by Menu or MenuItemGroup components
+        {...props}
+        href={href}
+        target={target}
+        role={this.role}
+        aria-labelledby={this.labelId}
+        aria-disabled={disabled ? 'true' : undefined}
+        aria-controls={controls}
+        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.styles?.menuItem}
+        onMouseOver={this.handleMouseOver}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
+        onFocus={createChainedFunction(onFocus, this.handleFocusEvent)}
+        onBlur={createChainedFunction(onBlur, this.handleBlurEvent)}
+        data-cid="MenuItem"
+      >
+        {this.renderContent()}
+      </ElementType>
+    )
+  }
+}
+
+export default MenuItem
+export { MenuItem }

package/src/Menu/v2/MenuItem/props.ts

@@ -0,0 +1,132 @@
+/*
+ * 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 React from 'react'
+import MenuItem from '../MenuItem'
+
+import type {
+  AsElementType,
+  MenuItemTheme,
+  OtherHTMLAttributes
+} from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
+
+type OnMenuItemSelect = (
+  e: React.MouseEvent,
+  value: MenuItemProps['value'],
+  selected: MenuItemProps['selected'],
+  args: MenuItem
+) => void
+
+type MenuItemOwnProps = {
+  /**
+   * the menu item label
+   */
+  children: React.ReactNode
+  /**
+   * whether to set the menu item state to selected or not on initial render
+   */
+  defaultSelected?: boolean
+  /**
+   * whether the menu item is selected or not (must be accompanied by an `onSelect` prop)
+   */
+  selected?: boolean // TODO: controllable(PropTypes.bool, 'onSelect', 'defaultSelected')
+  /**
+   * when used with the `selected` prop, the component will not control its own state
+   */
+  onSelect?: OnMenuItemSelect
+  onClick?: (e: React.MouseEvent) => void
+  onKeyDown?: (e: React.KeyboardEvent) => void
+  onKeyUp?: (e: React.KeyboardEvent) => void
+  onMouseOver?: (e: React.MouseEvent, args: MenuItem) => void
+  /**
+   * the id of the element that the menu item will act upon
+   */
+  controls?: string
+  disabled?: boolean
+  /**
+   * the element type to render as (will default to `<a>` if href is provided)
+   */
+  as?: AsElementType
+  /**
+   * How this component should be rendered. If it's `checkbox` or `radio` it will
+   * display a checkmark based on its own 'selected' state, if it's `flyout` it will
+   * render an arrow after the label.
+   */
+  type?: 'button' | 'checkbox' | 'radio' | 'flyout'
+  /**
+   * Arbitrary value that you can store in this component. Is sent out by the
+   * `onSelect` event
+   */
+  value?: string | number
+  /**
+   * Value of the `href` prop that will be put on the underlying DOM element.
+   */
+  href?: string
+  /**
+   * Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).
+   */
+  target?: string
+  /**
+   * Content to render in the label's info region
+   */
+  renderLabelInfo?: React.ReactNode | (() => React.ReactNode)
+}
+
+type PropKeys = keyof MenuItemOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type MenuItemProps = MenuItemOwnProps &
+  WithStyleProps<MenuItemTheme, MenuItemStyle> &
+  OtherHTMLAttributes<MenuItemOwnProps> &
+  WithDeterministicIdProps
+
+type MenuItemStyle = ComponentStyle<'menuItem' | 'icon' | 'labelInfo' | 'label'>
+const allowedProps: AllowedPropKeys = [
+  'children',
+  'defaultSelected',
+  'selected',
+  'onSelect',
+  'onClick',
+  'onKeyDown',
+  'onKeyUp',
+  'onMouseOver',
+  'controls',
+  'disabled',
+  'as',
+  'type',
+  'value',
+  'href',
+  'target',
+  'renderLabelInfo'
+]
+type MenuItemState = {
+  selected?: boolean
+  isHovered: boolean
+  isFocused: boolean
+}
+export type { MenuItemProps, MenuItemStyle, MenuItemState, OnMenuItemSelect }
+export { allowedProps }

package/src/Menu/v2/MenuItem/styles.ts

@@ -0,0 +1,172 @@
+/*
+ * 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 type { NewComponentTypes } from '@instructure/ui-themes'
+import type { MenuItemProps, MenuItemStyle } from './props'
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: NewComponentTypes['MenuItem'],
+  props: MenuItemProps
+): MenuItemStyle => {
+  const { type, disabled, selected } = props
+
+  const isRadioOrCheckbox = type === 'checkbox' || type === 'radio'
+
+  const flyoutIconStyles =
+    type === 'flyout'
+      ? {
+          insetInlineStart: 'auto',
+          insetInlineEnd: componentTheme.iconPadding
+        }
+      : {}
+
+  const roleStyles = isRadioOrCheckbox
+    ? {
+        paddingInlineEnd: componentTheme.labelPadding
+      }
+    : {}
+
+  const roleIconStyles = isRadioOrCheckbox
+    ? {
+        insetInlineStart: 'auto',
+        insetInlineEnd: componentTheme.iconPadding
+      }
+    : {}
+
+  const disabledStyles = disabled
+    ? {
+        cursor: 'not-allowed',
+        pointerEvents: 'none',
+        opacity: 0.5
+      }
+    : {}
+
+  const selectedStyles = selected
+    ? {
+        background: componentTheme.activeBackground,
+        '[class*="menuItem__label"]': {
+          color: componentTheme.activeLabelColor
+        }
+      }
+    : {}
+
+  const selectedHighlightedStyles = selected
+    ? {
+        background: componentTheme.selectedHighlightedBackground
+      }
+    : {
+        background: componentTheme.highlightedBackground,
+        '[class*="menuItem__label"]': {
+          color: componentTheme.highlightedLabelColor
+        },
+        '[class*="menuItem__labelInfo"]': {
+          color: componentTheme.highlightedLabelInfoColor
+        }
+      }
+
+  const linkStyles = { textDecoration: 'none' }
+
+  return {
+    menuItem: {
+      label: 'menuItem',
+      position: 'relative',
+      border: 'none',
+      outline: 'none',
+      padding: `${componentTheme.paddingVertical} ${componentTheme.paddingHorizontal}`,
+      margin: '0',
+      width: '100%',
+      borderRadius: 'initial',
+      boxSizing: 'border-box',
+      textAlign: 'start',
+      cursor: 'pointer',
+      userSelect: 'none',
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      lineHeight: componentTheme.lineHeight,
+      fontSize: componentTheme.fontSize,
+      background: componentTheme.background,
+      // Changing the following to display: flex; causes a VO
+      // bug where items with role menuitem, menuitemcheckbox
+      // and menuitemradio are selected twice with control+
+      // option+space. So we set the display to block.
+      display: 'block',
+      textDecoration: 'none',
+      ...roleStyles,
+      '&:focus,  &:active,  &:hover': {
+        ...selectedHighlightedStyles
+      },
+      //removes extra ff button spacing
+      '&::-moz-focus-inner': {
+        padding: '0',
+        margin: '0',
+        border: '0'
+      },
+      ...disabledStyles,
+      ...selectedStyles,
+
+      // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
+      '&:is(a)': {
+        '&, &:link, &:visited, &:active, &:hover, &:focus': linkStyles
+      },
+      '&:-webkit-any(a)': {
+        '&, &:link, &:visited, &:active, &:hover, &:focus': linkStyles
+      }
+    },
+    icon: {
+      label: 'menuItem__icon',
+      position: 'absolute',
+      display: 'flex',
+      alignItems: 'center',
+      top: '0',
+      width: '1em',
+      height: '100%',
+      ...roleIconStyles,
+      ...flyoutIconStyles
+    },
+    labelInfo: {
+      label: 'menuItem__labelInfo',
+      height: '100%',
+      float: 'right',
+      clear: 'right',
+      paddingRight: '1.75rem',
+      color: componentTheme.labelInfoColor
+    },
+    label: {
+      label: 'menuItem__label',
+      color: componentTheme.labelColor
+    }
+  }
+}
+
+export default generateStyle