@instructure/ui-menu 8.13.1-snapshot.2 → 8.13.1-snapshot.27

package/lib/Menu/props.js

@@ -39,144 +39,32 @@ var _Children = require("@instructure/ui-prop-types/lib/Children.js");
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * Children of type `Menu.Item`, `Menu.Group`, `Menu.Separator`, or `Menu`
-   */
   children: _Children.Children.oneOf(['MenuItem', 'MenuItemGroup', 'MenuItemSeparator', 'Menu']),
-
-  /**
-   * Description of the `<Menu />`
-   */
   label: _propTypes.default.string,
-
-  /**
-   * Is the `<Menu />` disabled
-   */
   disabled: _propTypes.default.bool,
-
-  /**
-   * The trigger element, if the `<Menu />` is to render as a popover
-   */
   trigger: _propTypes.default.node,
-
-  /**
-   * If a trigger is supplied, where should the `<Menu />` be placed (relative to the trigger)
-   */
   placement: _PositionPropTypes.PositionPropTypes.placement,
-
-  /**
-   * Should the `<Menu />` be open for the initial render
-   */
   defaultShow: _propTypes.default.bool,
-
-  /**
-   * Is the `<Menu />` open (should be accompanied by `onToggle`)
-   */
   show: (0, _controllable.controllable)(_propTypes.default.bool, 'onToggle', 'defaultShow'),
-
-  /**
-   * Callback fired when the `<Menu />` is toggled open/closed. When used with `show`,
-   * the component will not control its own state.
-   */
   onToggle: _propTypes.default.func,
-
-  /**
-   * Callback fired when an item within the `<Menu />` is selected
-   */
   onSelect: _propTypes.default.func,
-
-  /**
-   * If a trigger is supplied, callback fired when the `<Menu />` is closed
-   */
   onDismiss: _propTypes.default.func,
-
-  /**
-   * If a trigger is supplied, callback fired when the `<Menu />` trigger is blurred
-   */
-  onBlur: _propTypes.default.func,
-
-  /**
-   * If a trigger is supplied, callback fired when the `<Menu />` trigger is focused
-   */
   onFocus: _propTypes.default.func,
-
-  /**
-   * If a trigger is supplied, callback fired onMouseOver for the `<Menu />` trigger
-   */
   onMouseOver: _propTypes.default.func,
-
-  /**
-   * Callback fired on the onKeyDown of the `<Menu />`
-   */
   onKeyDown: _propTypes.default.func,
-
-  /**
-   * Callback fired on the onKeyUp of the `<Menu />`
-   */
   onKeyUp: _propTypes.default.func,
-
-  /**
-   * A function that returns a reference to the `<Menu />`
-   */
   menuRef: _propTypes.default.func,
-
-  /**
-   * A function that returns a reference to the `<Popover />`
-   */
   popoverRef: _propTypes.default.func,
-
-  /**
-   * If a trigger is supplied, an element or a function returning an element to use as the mount node
-   * for the `<Menu />` (defaults to `document.body`)
-   */
   mountNode: _PositionPropTypes.PositionPropTypes.mountNode,
-
-  /**
-   * The parent in which to constrain the menu.
-   * One of: 'window', 'scroll-parent', 'parent', 'none', an element,
-   * or a function returning an element
-   */
   constrain: _PositionPropTypes.PositionPropTypes.constrain,
-
-  /**
-   * If a trigger is supplied, an element, function returning an element, or array of elements that will not
-   * be hidden from the screen reader when the `<Menu />` is open
-   */
-  liveRegion: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.element), _propTypes.default.element, _propTypes.default.func]),
-
-  /**
-   * If a trigger is supplied, should the `<Menu />` hide when an item is selected
-   */
   shouldHideOnSelect: _propTypes.default.bool,
-
-  /**
-   * If a trigger is supplied, should the `<Menu />` focus the trigger on after closing
-   */
   shouldFocusTriggerOnClose: _propTypes.default.bool,
-
-  /**
-   * The type of `<Menu />`
-   */
   type: _propTypes.default.oneOf(['flyout']),
   id: _propTypes.default.string,
-
-  /**
-   * Whether or not an arrow pointing to the trigger should be rendered
-   */
   withArrow: _propTypes.default.bool,
-
-  /**
-   * The horizontal offset for the positioned content.
-   * Works only if `trigger` is provided.
-   */
   offsetX: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-
-  /**
-   * The vertical offset for the positioned content.
-   * Works only if `trigger` is provided.
-   */
   offsetY: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
 };
 exports.propTypes = propTypes;
-const allowedProps = ['children', 'label', 'disabled', 'trigger', 'placement', 'defaultShow', 'show', 'onToggle', 'onSelect', 'onDismiss', 'onBlur', 'onFocus', 'onMouseOver', 'onKeyDown', 'onKeyUp', 'menuRef', 'popoverRef', 'mountNode', 'constrain', 'liveRegion', 'shouldHideOnSelect', 'shouldFocusTriggerOnClose', 'type', 'id', 'withArrow', 'offsetX', 'offsetY'];
+const allowedProps = ['children', 'label', 'disabled', 'trigger', 'placement', 'defaultShow', 'show', 'onToggle', 'onSelect', 'onDismiss', 'onFocus', 'onMouseOver', 'onKeyDown', 'onKeyUp', 'menuRef', 'popoverRef', 'mountNode', 'constrain', 'shouldHideOnSelect', 'shouldFocusTriggerOnClose', 'type', 'id', 'withArrow', 'offsetX', 'offsetY'];
 exports.allowedProps = allowedProps;

package/lib/MenuContext.js

@@ -38,8 +38,8 @@ private: true
 @module MenuContext
 **/
 const MenuContext = /*#__PURE__*/(0, _react.createContext)({
-  registerMenuItem: () => {},
-  removeMenuItem: () => {}
+  registerMenuItem: _value => {},
+  removeMenuItem: _value => {}
 });
 exports.MenuContext = MenuContext;
 var _default = MenuContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-menu",
-  "version": "8.13.1-snapshot.2+249897ee7",
+  "version": "8.13.1-snapshot.27+37d3bca26",
   "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.13.1-snapshot.2+249897ee7",
-    "@instructure/ui-color-utils": "8.13.1-snapshot.2+249897ee7",
-    "@instructure/ui-test-locator": "8.13.1-snapshot.2+249897ee7",
-    "@instructure/ui-test-queries": "8.13.1-snapshot.2+249897ee7",
-    "@instructure/ui-test-utils": "8.13.1-snapshot.2+249897ee7",
-    "@instructure/ui-themes": "8.13.1-snapshot.2+249897ee7"
+    "@instructure/ui-babel-preset": "8.13.1-snapshot.27+37d3bca26",
+    "@instructure/ui-color-utils": "8.13.1-snapshot.27+37d3bca26",
+    "@instructure/ui-test-locator": "8.13.1-snapshot.27+37d3bca26",
+    "@instructure/ui-test-queries": "8.13.1-snapshot.27+37d3bca26",
+    "@instructure/ui-test-utils": "8.13.1-snapshot.27+37d3bca26",
+    "@instructure/ui-themes": "8.13.1-snapshot.27+37d3bca26"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.13.1-snapshot.2+249897ee7",
-    "@instructure/emotion": "8.13.1-snapshot.2+249897ee7",
-    "@instructure/shared-types": "8.13.1-snapshot.2+249897ee7",
-    "@instructure/ui-a11y-utils": "8.13.1-snapshot.2+249897ee7",
-    "@instructure/ui-dom-utils": "8.13.1-snapshot.2+249897ee7",
-    "@instructure/ui-icons": "8.13.1-snapshot.2+249897ee7",
-    "@instructure/ui-popover": "8.13.1-snapshot.2+249897ee7",
-    "@instructure/ui-position": "8.13.1-snapshot.2+249897ee7",
-    "@instructure/ui-prop-types": "8.13.1-snapshot.2+249897ee7",
-    "@instructure/ui-react-utils": "8.13.1-snapshot.2+249897ee7",
-    "@instructure/ui-testable": "8.13.1-snapshot.2+249897ee7",
-    "@instructure/ui-utils": "8.13.1-snapshot.2+249897ee7",
-    "@instructure/uid": "8.13.1-snapshot.2+249897ee7",
+    "@instructure/console": "8.13.1-snapshot.27+37d3bca26",
+    "@instructure/emotion": "8.13.1-snapshot.27+37d3bca26",
+    "@instructure/shared-types": "8.13.1-snapshot.27+37d3bca26",
+    "@instructure/ui-a11y-utils": "8.13.1-snapshot.27+37d3bca26",
+    "@instructure/ui-dom-utils": "8.13.1-snapshot.27+37d3bca26",
+    "@instructure/ui-icons": "8.13.1-snapshot.27+37d3bca26",
+    "@instructure/ui-popover": "8.13.1-snapshot.27+37d3bca26",
+    "@instructure/ui-position": "8.13.1-snapshot.27+37d3bca26",
+    "@instructure/ui-prop-types": "8.13.1-snapshot.27+37d3bca26",
+    "@instructure/ui-react-utils": "8.13.1-snapshot.27+37d3bca26",
+    "@instructure/ui-testable": "8.13.1-snapshot.27+37d3bca26",
+    "@instructure/ui-utils": "8.13.1-snapshot.27+37d3bca26",
+    "@instructure/uid": "8.13.1-snapshot.27+37d3bca26",
     "keycode": "^2",
     "prop-types": "^15"
   },
@@ -56,5 +56,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "249897ee75a61c9436fca89f11473c0ece4c3e15"
+  "gitHead": "37d3bca26e420d33639ba518b2443e450ec3df3b"
 }

package/src/Menu/MenuItem/index.tsx

@@ -39,42 +39,38 @@ import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
 import { propTypes, allowedProps } from './props'
-import type { MenuItemProps } from './props'
+import type { MenuItemProps, MenuItemState } from './props'
 
 /**
 ---
 parent: Menu
 id: Menu.Item
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
-class MenuItem extends Component<MenuItemProps> {
+class MenuItem extends Component<MenuItemProps, MenuItemState> {
   static readonly componentId = 'Menu.Item'
 
   static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
     type: 'button',
-    disabled: false,
-    // @ts-expect-error ts-migrate(6133) FIXME: 'e' is declared but its value is never read.
-    onSelect: function (e, value, selected, item) {}
+    disabled: false
   } as const
 
   static contextType = MenuContext
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
-  constructor(props) {
-    // @ts-expect-error ts-migrate(2554) FIXME: Expected 1-2 arguments, but got 0.
-    super()
+  constructor(props: MenuItemProps) {
+    super(props)
 
     if (typeof props.selected === 'undefined') {
       this.state = {
-        selected: props.defaultSelected
+        selected: !!props.defaultSelected
       }
     }
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property 'labelId' does not exist on type 'MenuIte... Remove this comment to see the full error message
     this.labelId = uid('MenuItem__label')
   }
 
@@ -85,14 +81,16 @@ class MenuItem extends Component<MenuItemProps> {
 
     return this.ref
   }
+
+  labelId: string
   ref: Element | null = null
+
   handleRef = (el: Element | null) => {
     this.ref = el
   }
 
   componentDidMount() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+    this.props.makeStyles?.()
     const context = this.context
 
     if (context && context.registerMenuItem) {
@@ -101,8 +99,7 @@ class MenuItem extends Component<MenuItemProps> {
   }
 
   componentDidUpdate() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+    this.props.makeStyles?.()
   }
 
   componentWillUnmount() {
@@ -113,8 +110,7 @@ class MenuItem extends Component<MenuItemProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'e' implicitly has an 'any' type.
-  handleClick = (e) => {
+  handleClick = (e: React.MouseEvent) => {
     const { onSelect, onClick, disabled, value } = this.props
     const selected = !this.selected
 
@@ -137,8 +133,7 @@ class MenuItem extends Component<MenuItemProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'e' implicitly has an 'any' type.
-  handleKeyDown = (e) => {
+  handleKeyDown = (e: React.KeyboardEvent) => {
     const spaceKey = e.keyCode === keycode.codes.space
     const enterKey = e.keyCode === keycode.codes.enter
 
@@ -148,14 +143,13 @@ class MenuItem extends Component<MenuItemProps> {
 
       if (enterKey) {
         // handle space key on keyUp for FF
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'ref' does not exist on type 'MenuItem'... Remove this comment to see the full error message
-        findDOMNode(this.ref).click() // eslint-disable-line react/no-find-dom-node
+        const refNode = findDOMNode(this.ref) as HTMLElement
+        refNode.click()
       }
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'e' implicitly has an 'any' type.
-  handleKeyUp = (e) => {
+  handleKeyUp = (e: React.KeyboardEvent) => {
     const spaceKey = e.keyCode === keycode.codes.space
     const enterKey = e.keyCode === keycode.codes.enter
 
@@ -164,14 +158,13 @@ class MenuItem extends Component<MenuItemProps> {
       e.stopPropagation()
 
       if (spaceKey) {
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'ref' does not exist on type 'MenuItem'... Remove this comment to see the full error message
-        findDOMNode(this.ref).click() // eslint-disable-line react/no-find-dom-node
+        const refNode = findDOMNode(this.ref) as HTMLElement
+        refNode.click()
       }
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
-  handleMouseOver = (event) => {
+  handleMouseOver = (event: React.MouseEvent) => {
     this.focus()
 
     if (typeof this.props.onMouseOver === 'function') {
@@ -198,8 +191,7 @@ class MenuItem extends Component<MenuItemProps> {
 
   get selected() {
     return typeof this.props.selected === 'undefined'
-      ? // @ts-expect-error ts-migrate(2339) FIXME: Property 'selected' does not exist on type 'Readon... Remove this comment to see the full error message
-        this.state.selected
+      ? this.state.selected
       : this.props.selected
   }
 
@@ -208,8 +200,8 @@ class MenuItem extends Component<MenuItemProps> {
   }
 
   focus() {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property 'ref' does not exist on type 'MenuItem'... Remove this comment to see the full error message
-    findDOMNode(this.ref).focus() // eslint-disable-line react/no-find-dom-node
+    const refNode = findDOMNode(this.ref) as HTMLElement
+    refNode.focus()
   }
 
   renderContent() {
@@ -222,7 +214,6 @@ class MenuItem extends Component<MenuItemProps> {
             {this.selected && <IconCheckSolid />}
           </span>
         )}
-        {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'labelId' does not exist on type 'MenuIte... Remove this comment to see the full error message */}
         <span css={this.props.styles?.label} id={this.labelId}>
           {children}
         </span>
@@ -242,13 +233,12 @@ class MenuItem extends Component<MenuItemProps> {
     const ElementType = this.elementType
 
     return (
-      <ElementType // eslint-disable-line jsx-a11y/mouse-events-have-key-events
+      <ElementType
         // @ts-expect-error TODO: `ref` prop causes: "Expression produces a union type that is too complex to represent.ts(2590)"
         tabIndex={-1} // note: tabIndex can be overridden by Menu or MenuItemGroup components
         {...props}
         href={href}
         role={this.role}
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'labelId' does not exist on type 'MenuIte... Remove this comment to see the full error message
         aria-labelledby={this.labelId}
         aria-disabled={disabled ? 'true' : undefined}
         aria-controls={controls}

package/src/Menu/MenuItem/props.ts

@@ -24,7 +24,7 @@
 
 import React from 'react'
 import PropTypes from 'prop-types'
-
+import MenuItem from '../MenuItem'
 import { controllable } from '@instructure/ui-prop-types'
 
 import type {
@@ -35,17 +35,42 @@ import type {
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
+type OnMenuItemSelect = (
+  e: React.MouseEvent,
+  value: MenuItemOwnProps['value'],
+  selected: MenuItemOwnProps['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
-  selected?: any // TODO: controllable(PropTypes.bool, 'onSelect', 'defaultSelected')
-  onSelect?: (...args: any[]) => any
-  onClick?: (...args: any[]) => any
-  onKeyDown?: (...args: any[]) => any
-  onKeyUp?: (...args: any[]) => any
-  onMouseOver?: (...args: any[]) => any
+  /**
+   * 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
   type?: 'button' | 'checkbox' | 'radio' | 'flyout'
   value?: string | number
@@ -63,34 +88,16 @@ type MenuItemProps = MenuItemOwnProps &
 type MenuItemStyle = ComponentStyle<'menuItem' | 'icon' | 'label'>
 
 const propTypes: PropValidators<PropKeys> = {
-  /**
-   * the menu item label
-   */
   children: PropTypes.node.isRequired,
-  /**
-   * whether to set the menu item state to selected or not on initial render
-   */
   defaultSelected: PropTypes.bool,
-  /**
-   * whether the menu item is selected or not (must be accompanied by an `onSelect` prop)
-   */
   selected: controllable(PropTypes.bool, 'onSelect', 'defaultSelected'),
-  /**
-   * when used with the `selected` prop, the component will not control its own state
-   */
   onSelect: PropTypes.func,
   onClick: PropTypes.func,
   onKeyDown: PropTypes.func,
   onKeyUp: PropTypes.func,
   onMouseOver: PropTypes.func,
-  /**
-   * the id of the element that the menu item will act upon
-   */
   controls: PropTypes.string,
   disabled: PropTypes.bool,
-  /**
-   * the element type to render as (will default to `<a>` if href is provided)
-   */
   as: PropTypes.elementType, // eslint-disable-line react/require-default-props
   type: PropTypes.oneOf(['button', 'checkbox', 'radio', 'flyout']),
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -113,6 +120,8 @@ const allowedProps: AllowedPropKeys = [
   'value',
   'href'
 ]
-
-export type { MenuItemProps, MenuItemStyle }
+type MenuItemState = {
+  selected: boolean
+}
+export type { MenuItemProps, MenuItemStyle, MenuItemState, OnMenuItemSelect }
 export { propTypes, allowedProps }