@instructure/ui-menu 8.13.1-snapshot.9 → 8.14.0

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 }

package/src/Menu/MenuItemGroup/index.tsx

@@ -41,17 +41,19 @@ import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
 import { propTypes, allowedProps } from './props'
-import type { MenuGroupProps } from './props'
+import type { MenuGroupProps, MenuGroupState } from './props'
+import type { OnMenuItemSelect, MenuItemProps } from '../MenuItem/props'
 
 /**
 ---
 parent: Menu
 id: Menu.Group
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
-class MenuItemGroup extends Component<MenuGroupProps> {
+class MenuItemGroup extends Component<MenuGroupProps, MenuGroupState> {
   static readonly componentId = 'Menu.Group'
 
   static propTypes = propTypes
@@ -61,28 +63,22 @@ class MenuItemGroup extends Component<MenuGroupProps> {
     children: null,
     isTabbable: false,
     allowMultiple: false,
-    defaultSelected: [],
-    // @ts-expect-error ts-migrate(6133) FIXME: 'item' is declared but its value is never read.
-    itemRef: function (item) {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'e' is declared but its value is never read.
-    onSelect: function (e, value, selected, item) {}
+    defaultSelected: []
   }
 
-  // @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: MenuGroupProps) {
+    super(props)
 
     if (typeof props.selected === 'undefined') {
       this.state = {
-        selected: this.selectedFromChildren(props) || props.defaultSelected
+        selected: this.selectedFromChildren(props) || props.defaultSelected!
       }
     }
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_labelId' does not exist on type 'MenuIt... Remove this comment to see the full error message
     this._labelId = uid('MenuItemGroup')
   }
 
+  private _labelId: string
   ref: Element | null = null
 
   handleRef = (el: Element | null) => {
@@ -90,17 +86,14 @@ class MenuItemGroup extends Component<MenuGroupProps> {
   }
 
   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?.()
   }
 
   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?.()
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'e' implicitly has an 'any' type.
-  handleSelect = (e, value, selected, item) => {
+  handleSelect: OnMenuItemSelect = (e, value, selected, item) => {
     if (this.props.disabled) {
       e.preventDefault()
       return
@@ -114,7 +107,6 @@ class MenuItemGroup extends Component<MenuGroupProps> {
           selected: this.updateSelected(
             e,
             value,
-            // @ts-expect-error ts-migrate(2339) FIXME: Property 'selected' does not exist on type 'Readon... Remove this comment to see the full error message
             state.selected,
             selected,
             item
@@ -124,14 +116,19 @@ class MenuItemGroup extends Component<MenuGroupProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'e' implicitly has an 'any' type.
-  updateSelected = (e, value, items, selected, item) => {
+  updateSelected = (
+    e: React.MouseEvent,
+    value: MenuItemProps['value'],
+    items: MenuGroupState['selected'],
+    selected: MenuItemProps['selected'],
+    item: MenuItem
+  ) => {
     const { allowMultiple } = this.props
     let updated = allowMultiple ? [...items] : []
-    const location = updated.indexOf(value)
+    const location = updated.indexOf(value!)
 
     if (selected === true && location < 0) {
-      updated.push(value)
+      updated.push(value!)
     } else if (selected === false && location !== -1) {
       updated.splice(location, 1)
     } else if (!allowMultiple && updated.length < 1) {
@@ -146,42 +143,35 @@ class MenuItemGroup extends Component<MenuGroupProps> {
     return updated
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
-  selectedFromChildren(props) {
+  selectedFromChildren(props: MenuGroupProps) {
     const { children, allowMultiple } = props
-    // @ts-expect-error ts-migrate(7034) FIXME: Variable 'selected' implicitly has type 'any[]' in... Remove this comment to see the full error message
-    const selected = []
+    const selected: MenuGroupState['selected'] = []
 
     const items = Children.toArray(children).filter((child) => {
       return matchComponentTypes(child as MenuItem, [MenuItem])
-    })
+    }) as MenuItem[]
 
     items.forEach((item, index) => {
       if (
         (selected.length === 0 || allowMultiple) &&
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'props' does not exist on type 'string | ... Remove this comment to see the full error message
         (item.props.selected || item.props.defaultSelected)
       ) {
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'props' does not exist on type 'string | ... Remove this comment to see the full error message
         selected.push(item.props.value || index)
       }
     })
 
-    // @ts-expect-error ts-migrate(7005) FIXME: Variable 'selected' implicitly has an 'any[]' type... Remove this comment to see the full error message
     return selected.length > 0 ? selected : null
   }
 
   get selected() {
     if (
       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
       typeof this.state.selected === 'undefined'
     ) {
       return []
     } else {
       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]
     }
   }
@@ -197,21 +187,14 @@ class MenuItemGroup extends Component<MenuGroupProps> {
   }
 
   renderChildren() {
-    const {
-      children,
-      disabled,
-      controls,
-      allowMultiple,
-      isTabbable,
-      onMouseOver
-    } = this.props
-
+    const { disabled, controls, allowMultiple, isTabbable, onMouseOver } =
+      this.props
+    const children = this.props.children as ReactElement[]
     let index = -1
 
     return Children.map(children, (child) => {
       if (matchComponentTypes(child, [MenuItem])) {
         ++index
-        // @ts-expect-error ts-migrate(2533) FIXME: Object is possibly 'null' or 'undefined'.
         const value = child.props.value || index
 
         return (
@@ -223,7 +206,6 @@ class MenuItemGroup extends Component<MenuGroupProps> {
               value,
               type: allowMultiple ? 'checkbox' : 'radio',
               ref: this.props.itemRef,
-              // @ts-expect-error ts-migrate(2533) FIXME: Object is possibly 'null' or 'undefined'.
               disabled: disabled || child.props.disabled,
               selected: this.selected.indexOf(value) > -1,
               onSelect: this.handleSelect,
@@ -246,13 +228,11 @@ class MenuItemGroup extends Component<MenuGroupProps> {
         role="presentation"
         ref={this.handleRef}
       >
-        {/* @ts-expect-error ts-migrate(2339) FIXME: Property '_labelId' does not exist on type 'MenuIt... Remove this comment to see the full error message */}
         <span id={this._labelId}>{this.renderLabel()}</span>
         <ul
           role="menu"
           css={this.props.styles?.items}
           aria-disabled={this.props.disabled ? 'true' : undefined}
-          // @ts-expect-error ts-migrate(2339) FIXME: Property '_labelId' does not exist on type 'MenuIt... Remove this comment to see the full error message
           aria-labelledby={this._labelId}
         >
           {this.renderChildren()}

package/src/Menu/MenuItemGroup/props.ts

@@ -38,19 +38,46 @@ import type {
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { MenuItemProps } from '../MenuItem/props'
+import React from 'react'
 
 type MenuGroupOwnProps = {
   label: React.ReactNode
   allowMultiple?: boolean
+  /**
+   * children of type `Menu.Item`, `Menu.Separator`
+   */
   children?: React.ReactNode // TODO: oneOf([MenuItem, MenuItemSeparator])
-  selected?: any // TODO: controllable(PropTypes.array, 'onSelect', 'defaultSelected')
-  defaultSelected?: any[]
-  onSelect?: (...args: any[]) => any
-  onMouseOver?: (...args: any[]) => any
-  onKeyDown?: (...args: any[]) => any
+  /**
+   * an array of the values (or indices by default) for the selected items
+   */
+  selected?: (string | number)[] // TODO: controllable(PropTypes.array, 'onSelect', 'defaultSelected')
+  /**
+   * an array of the values (or indices by default) for the selected items on initial render
+   */
+  defaultSelected?: (string | number)[]
+  /**
+   * call this function when a menu item is selected
+   */
+  onSelect?: (
+    e: React.MouseEvent,
+    updated: MenuItemProps['value'][],
+    selected: MenuItemProps['selected'],
+    item: MenuItem
+  ) => void
+  onMouseOver?: (e: React.MouseEvent, args: MenuItem) => void
+  /**
+   * the id of the element that the menu items will act upon
+   */
   controls?: string
-  itemRef?: (...args: any[]) => any
+  /**
+   * returns a reference to the `MenuItem`
+   */
+  itemRef?: (element: Element | null) => void
   disabled?: boolean
+  /**
+   * should the group appear in the tab order (the first item will have a tabIndex of 0)
+   */
   isTabbable?: boolean
 }
 
@@ -67,36 +94,14 @@ type MenuGroupStyle = ComponentStyle<'menuItemGroup' | 'label' | 'items'>
 const propTypes: PropValidators<PropKeys> = {
   label: PropTypes.node.isRequired,
   allowMultiple: PropTypes.bool,
-  /**
-   * children of type `Menu.Item`, `Menu.Separator`
-   */
   children: ChildrenPropTypes.oneOf([MenuItem, MenuItemSeparator]),
-  /**
-   * an array of the values (or indices by default) for the selected items
-   */
   selected: controllable(PropTypes.array, 'onSelect', 'defaultSelected'),
-  /**
-   * an array of the values (or indices by default) for the selected items on initial render
-   */
   defaultSelected: PropTypes.array,
-  /**
-   * call this function when a menu item is selected
-   */
   onSelect: PropTypes.func,
   onMouseOver: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  /**
-   * the id of the element that the menu items will act upon
-   */
   controls: PropTypes.string,
-  /**
-   * returns a reference to the `MenuItem`
-   */
   itemRef: PropTypes.func,
   disabled: PropTypes.bool,
-  /**
-   * should the group appear in the tab order (the first item will have a tabIndex of 0)
-   */
   isTabbable: PropTypes.bool
 }
 
@@ -108,12 +113,14 @@ const allowedProps: AllowedPropKeys = [
   'defaultSelected',
   'onSelect',
   'onMouseOver',
-  'onKeyDown',
   'controls',
   'itemRef',
   'disabled',
   'isTabbable'
 ]
 
-export type { MenuGroupProps, MenuGroupStyle }
+type MenuGroupState = {
+  selected: (string | number)[]
+}
+export type { MenuGroupProps, MenuGroupStyle, MenuGroupState }
 export { propTypes, allowedProps }

package/src/Menu/MenuItemSeparator/index.tsx

@@ -57,13 +57,11 @@ class MenuItemSeparator extends Component<MenuSeparatorProps> {
   }
 
   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?.()
   }
 
   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?.()
   }
 
   render() {