@instructure/ui-menu 8.14.1-snapshot.7 → 8.15.1-snapshot.2

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.15.0](https://github.com/instructure/instructure-ui/compare/v8.14.0...v8.15.0) (2022-01-26)
+
+**Note:** Version bump only for package @instructure/ui-menu
+
 # [8.14.0](https://github.com/instructure/instructure-ui/compare/v8.13.0...v8.14.0) (2021-12-16)
 
 **Note:** Version bump only for package @instructure/ui-menu

package/es/Menu/MenuItemGroup/index.js

@@ -25,7 +25,7 @@ var _dec, _dec2, _class, _class2, _temp;
  */
 
 /** @jsx jsx */
-import { Children, Component } from 'react';
+import React, { Children, Component } from 'react';
 import { withStyle, jsx } from '@instructure/emotion';
 import { omitProps, safeCloneElement, matchComponentTypes } from '@instructure/ui-react-utils';
 import { uid } from '@instructure/uid';
@@ -163,6 +163,7 @@ let MenuItemGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _d
           tabIndex: isTabbable && index === 0 ? 0 : -1,
           controls,
           value,
+          children: child.props.children,
           type: allowMultiple ? 'checkbox' : 'radio',
           ref: this.props.itemRef,
           disabled: disabled || child.props.disabled,

package/es/Menu/index.js

@@ -292,6 +292,7 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
           role: "none"
         }, safeCloneElement(child, {
           controls,
+          children: child.props.children,
           disabled: disabled || child.props.disabled,
           onFocus: this.handleMenuItemFocus,
           onBlur: this.handleMenuItemBlur,
@@ -305,6 +306,7 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
         return jsx("li", {
           role: "none"
         }, safeCloneElement(child, {
+          label: child.props.label,
           controls,
           disabled: disabled || child.props.disabled,
           onFocus: this.handleMenuItemFocus,

package/lib/Menu/MenuItemGroup/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
 Object.defineProperty(exports, "__esModule", {
@@ -7,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.MenuItemGroup = void 0;
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 
 var _emotion = require("@instructure/emotion");
 
@@ -162,6 +164,7 @@ let MenuItemGroup = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
           tabIndex: isTabbable && index === 0 ? 0 : -1,
           controls,
           value,
+          children: child.props.children,
           type: allowMultiple ? 'checkbox' : 'radio',
           ref: this.props.itemRef,
           disabled: disabled || child.props.disabled,

package/lib/Menu/index.js

@@ -314,6 +314,7 @@ let Menu = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
           role: "none"
         }, (0, _safeCloneElement.safeCloneElement)(child, {
           controls,
+          children: child.props.children,
           disabled: disabled || child.props.disabled,
           onFocus: this.handleMenuItemFocus,
           onBlur: this.handleMenuItemBlur,
@@ -327,6 +328,7 @@ let Menu = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
         return (0, _emotion.jsx)("li", {
           role: "none"
         }, (0, _safeCloneElement.safeCloneElement)(child, {
+          label: child.props.label,
           controls,
           disabled: disabled || child.props.disabled,
           onFocus: this.handleMenuItemFocus,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-menu",
-  "version": "8.14.1-snapshot.7+845d7ec6c",
+  "version": "8.15.1-snapshot.2+00f55c738",
   "description": "A dropdown menu component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,28 +24,28 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-color-utils": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-test-locator": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-test-queries": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-test-utils": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-themes": "8.14.1-snapshot.7+845d7ec6c"
+    "@instructure/ui-babel-preset": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-color-utils": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-test-locator": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-test-queries": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-test-utils": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-themes": "8.15.1-snapshot.2+00f55c738"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/emotion": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/shared-types": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-a11y-utils": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-dom-utils": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-icons": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-popover": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-position": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-prop-types": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-react-utils": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-testable": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/ui-utils": "8.14.1-snapshot.7+845d7ec6c",
-    "@instructure/uid": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/console": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/emotion": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/shared-types": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-a11y-utils": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-dom-utils": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-icons": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-popover": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-position": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-prop-types": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-react-utils": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-testable": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/ui-utils": "8.15.1-snapshot.2+00f55c738",
+    "@instructure/uid": "8.15.1-snapshot.2+00f55c738",
     "keycode": "^2",
     "prop-types": "^15"
   },
@@ -56,5 +56,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "845d7ec6c159d8946b22caa9d8fb3d0175167a6f"
+  "gitHead": "00f55c7382e82209ea553c107951c4356ba202bf"
 }

package/src/Menu/MenuItemGroup/index.tsx

@@ -23,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import { Children, Component, ReactElement } from 'react'
+import React, { Children, Component } from 'react'
 
 import { withStyle, jsx } from '@instructure/emotion'
 import {
@@ -36,13 +36,21 @@ import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
 import { testable } from '@instructure/ui-testable'
 
 import { MenuItem } from '../MenuItem'
+import type { OnMenuItemSelect, MenuItemProps } from '../MenuItem/props'
+import { MenuItemSeparator } from '../MenuItemSeparator'
+import type { MenuSeparatorProps } from '../MenuItemSeparator/props'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
 import { propTypes, allowedProps } from './props'
 import type { MenuGroupProps, MenuGroupState } from './props'
-import type { OnMenuItemSelect, MenuItemProps } from '../MenuItem/props'
+
+type MenuItemChild = React.ComponentElement<MenuItemProps, MenuItem>
+type MenuSeparatorChild = React.ComponentElement<
+  MenuSeparatorProps,
+  MenuItemSeparator
+>
 
 /**
 ---
@@ -147,9 +155,11 @@ class MenuItemGroup extends Component<MenuGroupProps, MenuGroupState> {
     const { children, allowMultiple } = props
     const selected: MenuGroupState['selected'] = []
 
-    const items = Children.toArray(children).filter((child) => {
-      return matchComponentTypes(child as MenuItem, [MenuItem])
-    }) as MenuItem[]
+    const items = (
+      Children.toArray(children) as (MenuItemChild | MenuSeparatorChild)[]
+    ).filter((child) => {
+      return matchComponentTypes<MenuItemChild>(child, [MenuItem])
+    }) as MenuItemChild[]
 
     items.forEach((item, index) => {
       if (
@@ -189,21 +199,25 @@ class MenuItemGroup extends Component<MenuGroupProps, MenuGroupState> {
   renderChildren() {
     const { disabled, controls, allowMultiple, isTabbable, onMouseOver } =
       this.props
-    const children = this.props.children as ReactElement[]
+    const children = this.props.children as (
+      | MenuItemChild
+      | MenuSeparatorChild
+    )[]
     let index = -1
 
     return Children.map(children, (child) => {
-      if (matchComponentTypes(child, [MenuItem])) {
+      if (matchComponentTypes<MenuItemChild>(child, [MenuItem])) {
         ++index
         const value = child.props.value || index
 
         return (
           <li role="none">
             {' '}
-            {safeCloneElement(child as ReactElement, {
+            {safeCloneElement(child, {
               tabIndex: isTabbable && index === 0 ? 0 : -1,
               controls,
               value,
+              children: child.props.children,
               type: allowMultiple ? 'checkbox' : 'radio',
               ref: this.props.itemRef,
               disabled: disabled || child.props.disabled,

package/src/Menu/MenuItemGroup/props.ts

@@ -73,7 +73,7 @@ type MenuGroupOwnProps = {
   /**
    * returns a reference to the `MenuItem`
    */
-  itemRef?: (element: Element | null) => void
+  itemRef?: (element: MenuItem | null) => void
   disabled?: boolean
   /**
    * should the group appear in the tab order (the first item will have a tabIndex of 0)

package/src/Menu/index.tsx

@@ -37,9 +37,11 @@ import { testable } from '@instructure/ui-testable'
 
 import { MenuContext } from '../MenuContext'
 import { MenuItem } from './MenuItem'
-import type { OnMenuItemSelect, MenuItemProps } from './MenuItem/props'
+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, jsx } from '@instructure/emotion'
 
 import generateStyle from './styles'
@@ -48,6 +50,14 @@ import generateComponentTheme from './theme'
 import { propTypes, allowedProps } from './props'
 import type { MenuProps } from './props'
 
+type MenuChild = React.ComponentElement<MenuProps, Menu>
+type MenuItemChild = React.ComponentElement<MenuItemProps, MenuItem>
+type MenuGroupChild = React.ComponentElement<MenuGroupProps, MenuItemGroup>
+type MenuSeparatorChild = React.ComponentElement<
+  MenuSeparatorProps,
+  MenuItemSeparator
+>
+
 /**
 ---
 category: components
@@ -182,7 +192,12 @@ class Menu extends Component<MenuProps> {
     }
   }
 
-  handleMenuItemSelect: OnMenuItemSelect = (event, value, selected, item) => {
+  handleMenuItemSelect: MenuProps['onSelect'] = (
+    event,
+    value,
+    selected,
+    item
+  ) => {
     if (this.props.shouldHideOnSelect) {
       this.hide(event)
     }
@@ -220,7 +235,7 @@ class Menu extends Component<MenuProps> {
   }
 
   handleSubMenuDismiss = (
-    event: React.MouseEvent | React.KeyboardEvent,
+    event: React.UIEvent | React.FocusEvent,
     documentClick: boolean
   ) => {
     if (
@@ -231,7 +246,7 @@ class Menu extends Component<MenuProps> {
     }
   }
 
-  hide = (event: React.MouseEvent | React.KeyboardEvent) => {
+  hide = (event: React.UIEvent | React.FocusEvent) => {
     if (this._popover) {
       this._popover.hide(event)
     }
@@ -295,102 +310,111 @@ class Menu extends Component<MenuProps> {
 
     let count = 0
 
-    return Children.map(children, (child) => {
-      if (
-        !matchComponentTypes(child, [
-          'MenuItemSeparator',
-          'MenuItem',
-          'MenuItemGroup',
-          'Menu'
-        ])
-      ) {
-        return
-      }
-
-      count += 1
-
-      const isTabbable = !this.state.hasFocus && count === 1
-
-      if (matchComponentTypes(child, ['MenuItemSeparator'])) {
-        return <li role="none">{child}</li>
-      }
-      const menuItemChild = child as MenuItem
-
-      const controls =
-        menuItemChild.props['aria-controls'] ||
-        menuItemChild.props.controls ||
-        this.props['aria-controls'] ||
-        this.props.controls
-
-      if (matchComponentTypes(child, ['MenuItem'])) {
-        return (
-          <li role="none">
-            {safeCloneElement(
-              child as ReactElement,
-              {
+    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 <li role="none">{child}</li>
+        }
+
+        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 (
+            <li role="none">
+              {safeCloneElement(child, {
                 controls,
-                disabled: disabled || (child as MenuItem).props.disabled,
+                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
-              } as Partial<MenuItemProps>
-            )}
-          </li>
-        )
-      }
-
-      if (matchComponentTypes(child, ['MenuItemGroup'])) {
-        return (
-          <li role="none">
-            {safeCloneElement(child as ReactElement, {
-              controls,
-              disabled: disabled || (child as MenuItemGroup).props.disabled,
-              onFocus: this.handleMenuItemFocus,
-              onBlur: this.handleMenuItemBlur,
-              onSelect: this.handleMenuItemSelect,
-              onMouseOver: this.handleMenuItemMouseOver,
-              isTabbable
-            })}
-          </li>
-        )
-      }
-
-      if (matchComponentTypes(child, ['Menu'])) {
-        const submenuDisabled = disabled || (child as Menu).props.disabled
-
-        return (
-          <li role="none">
-            {safeCloneElement(child as ReactElement, {
-              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}
-                >
-                  {(child as Menu).props.title || (child as Menu).props.label}
-                </MenuItem>
-              )
-            })}
-          </li>
-        )
+              })}
+            </li>
+          )
+        }
+
+        if (matchComponentTypes<MenuGroupChild>(child, ['MenuItemGroup'])) {
+          return (
+            <li role="none">
+              {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
+              })}
+            </li>
+          )
+        }
+
+        if (matchComponentTypes(child, ['Menu'])) {
+          const submenuDisabled = disabled || child.props.disabled
+
+          return (
+            <li role="none">
+              {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}
+                  >
+                    {child.props.title || child.props.label}
+                  </MenuItem>
+                )
+              })}
+            </li>
+          )
+        }
+        return
       }
-      return
-    })
+    )
   }
 
   renderMenu() {

package/src/Menu/props.ts

@@ -30,7 +30,6 @@ import {
   controllable,
   Children as ChildrenPropTypes
 } from '@instructure/ui-prop-types'
-import type { Menu } from './index'
 
 import type {
   PropValidators,
@@ -43,9 +42,12 @@ import type {
   PositionConstraint,
   PositionMountNode
 } from '@instructure/ui-position'
-import type { OnMenuItemSelect } from './MenuItem/props'
 import type { Popover } from '@instructure/ui-popover'
 
+import { MenuItem } from './MenuItem'
+import type { Menu } from './index'
+import type { MenuItemProps } from './MenuItem/props'
+
 type MenuOwnProps = {
   /**
    * Children of type `Menu.Item`, `Menu.Group`, `Menu.Separator`, or `Menu`
@@ -83,7 +85,12 @@ type MenuOwnProps = {
   /**
    * Callback fired when an item within the `<Menu />` is selected
    */
-  onSelect?: OnMenuItemSelect
+  onSelect?: (
+    e: React.MouseEvent,
+    value: MenuItemProps['value'] | MenuItemProps['value'][],
+    selected: MenuItemProps['selected'],
+    args: MenuItem
+  ) => void
   /**
    * If a trigger is supplied, callback fired when the `<Menu />` is closed
    */
@@ -161,7 +168,10 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type MenuProps = MenuOwnProps &
   WithStyleProps<MenuTheme, MenuStyle> &
-  OtherHTMLAttributes<MenuOwnProps>
+  // controls can be passed in renderChildren and used later as aria-controls
+  Omit<OtherHTMLAttributes<MenuOwnProps>, 'controls'> & {
+    controls?: React.AriaAttributes['aria-controls']
+  }
 
 type MenuStyle = ComponentStyle<'menu'>