@instructure/ui-menu 8.8.1-snapshot.3 → 8.8.1-snapshot.63

package/package.json

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

package/src/Menu/MenuItem/index.tsx

@@ -23,12 +23,10 @@
  */
 /** @jsx jsx */
 import { Component } from 'react'
-import PropTypes from 'prop-types'
 import keycode from 'keycode'
 
 import { IconCheckSolid, IconArrowOpenEndSolid } from '@instructure/ui-icons'
 import { uid } from '@instructure/uid'
-import { controllable } from '@instructure/ui-prop-types'
 import { omitProps, getElementType } from '@instructure/ui-react-utils'
 import { createChainedFunction } from '@instructure/ui-utils'
 import { isActiveElement, findDOMNode } from '@instructure/ui-dom-utils'
@@ -39,7 +37,9 @@ import { MenuContext } from '../../MenuContext'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
-import { MenuItemProps } from './types'
+
+import { propTypes, allowedProps } from './props'
+import type { MenuItemProps } from './props'
 
 /**
 ---
@@ -52,56 +52,14 @@ id: Menu.Item
 class MenuItem extends Component<MenuItemProps> {
   static readonly componentId = 'Menu.Item'
 
-  static propTypes = {
-    // eslint-disable-next-line react/require-default-props
-    makeStyles: PropTypes.func,
-    // eslint-disable-next-line react/require-default-props
-    styles: PropTypes.object,
-    /* 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]),
-    href: PropTypes.string
-  }
-
+  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) {},
-    defaultSelected: undefined,
-    selected: undefined,
-    onClick: undefined,
-    onKeyDown: undefined,
-    onKeyUp: undefined,
-    onMouseOver: undefined,
-    controls: undefined,
-    value: undefined,
-    href: undefined
-  }
+    onSelect: function (e, value, selected, item) {}
+  } as const
 
   static contextType = MenuContext
 
@@ -249,16 +207,16 @@ class MenuItem extends Component<MenuItemProps> {
     return (
       <span>
         {(type === 'checkbox' || type === 'radio') && (
-          <span css={this.props.styles.icon}>
+          <span css={this.props.styles?.icon}>
             {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}>
+        <span css={this.props.styles?.label} id={this.labelId}>
           {children}
         </span>
         {type === 'flyout' && (
-          <span css={this.props.styles.icon}>
+          <span css={this.props.styles?.icon}>
             <IconArrowOpenEndSolid />
           </span>
         )}
@@ -274,20 +232,20 @@ class MenuItem extends Component<MenuItemProps> {
 
     return (
       <ElementType // eslint-disable-line jsx-a11y/mouse-events-have-key-events
-        tabIndex="-1" // note: tabIndex can be overridden by Menu or MenuItemGroup components
+        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' : null}
+        aria-disabled={disabled ? 'true' : undefined}
         aria-controls={controls}
         aria-checked={
           type === 'checkbox' || type === 'radio'
             ? this.selected
               ? 'true'
               : 'false'
-            : null
+            : undefined
         }
         onClick={this.handleClick}
         onKeyUp={createChainedFunction(onKeyUp, this.handleKeyUp)}
@@ -297,7 +255,7 @@ class MenuItem extends Component<MenuItemProps> {
           // @ts-expect-error ts-migrate(2339) FIXME: Property '_node' does not exist on type 'MenuItem'... Remove this comment to see the full error message
           this._node = c
         }}
-        css={this.props.styles.menuItem}
+        css={this.props.styles?.menuItem}
         onMouseOver={this.handleMouseOver}
       >
         {this.renderContent()}

package/src/Menu/MenuItem/props.ts

@@ -0,0 +1,109 @@
+/*
+ * 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 PropTypes from 'prop-types'
+
+import { controllable } from '@instructure/ui-prop-types'
+
+import type { AsElementType, PropValidators } from '@instructure/shared-types'
+import type { WithStyleProps } from '@instructure/emotion'
+
+type MenuItemOwnProps = {
+  children: React.ReactNode
+  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
+  controls?: string
+  disabled?: boolean
+  as?: AsElementType
+  type?: 'button' | 'checkbox' | 'radio' | 'flyout'
+  value?: string | number
+  href?: string
+}
+
+type PropKeys = keyof MenuItemOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type MenuItemProps = MenuItemOwnProps & WithStyleProps
+
+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]),
+  href: PropTypes.string
+}
+
+const allowedProps: AllowedPropKeys = [
+  'children',
+  'defaultSelected',
+  'selected',
+  'onSelect',
+  'onClick',
+  'onKeyDown',
+  'onKeyUp',
+  'onMouseOver',
+  'controls',
+  'disabled',
+  'as',
+  'type',
+  'value',
+  'href'
+]
+
+export type { MenuItemProps }
+export { propTypes, allowedProps }

package/src/Menu/MenuItem/styles.ts

@@ -23,7 +23,7 @@
  */
 
 import { MenuItemTheme } from '@instructure/shared-types'
-import { MenuItemProps } from './types'
+import { MenuItemProps } from './props'
 
 /**
  * ---

package/src/Menu/MenuItemGroup/index.tsx

@@ -24,13 +24,8 @@
 
 /** @jsx jsx */
 import { Children, Component, ReactElement } from 'react'
-import PropTypes from 'prop-types'
 
 import { withStyle, jsx } from '@instructure/emotion'
-import {
-  controllable,
-  Children as ChildrenPropTypes
-} from '@instructure/ui-prop-types'
 import {
   omitProps,
   safeCloneElement,
@@ -41,11 +36,12 @@ import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
 import { testable } from '@instructure/ui-testable'
 
 import { MenuItem } from '../MenuItem'
-import { MenuItemSeparator } from '../MenuItemSeparator'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
-import { MenuGroupProps } from './types'
+
+import { propTypes, allowedProps } from './props'
+import type { MenuGroupProps } from './props'
 
 /**
 ---
@@ -58,52 +54,10 @@ id: Menu.Group
 class MenuItemGroup extends Component<MenuGroupProps> {
   static readonly componentId = 'Menu.Group'
 
-  static propTypes = {
-    // eslint-disable-next-line react/require-default-props
-    makeStyles: PropTypes.func,
-    // eslint-disable-next-line react/require-default-props
-    styles: PropTypes.object,
-    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
-  }
-
+  static propTypes = propTypes
+  static allowedProps = allowedProps
   static defaultProps = {
-    onMouseOver: undefined,
     disabled: false,
-    controls: undefined,
-    onKeyDown: undefined,
-    selected: undefined,
     children: null,
     isTabbable: false,
     allowMultiple: false,
@@ -230,7 +184,7 @@ class MenuItemGroup extends Component<MenuGroupProps> {
     const { label } = this.props
 
     return hasVisibleChildren(label) ? (
-      <span css={this.props.styles.label}>{label}</span>
+      <span css={this.props.styles?.label}>{label}</span>
     ) : (
       label
     )
@@ -282,16 +236,15 @@ class MenuItemGroup extends Component<MenuGroupProps> {
     return (
       <span
         {...props}
-        css={this.props.styles.menuItemGroup}
+        css={this.props.styles?.menuItemGroup}
         role="presentation"
       >
         {/* @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}
-          // @ts-expect-error ts-migrate(2322) FIXME: Type '"true" | null' is not assignable to type 'bo... Remove this comment to see the full error message
-          aria-disabled={this.props.disabled ? 'true' : null}
+          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}
         >

package/src/Menu/MenuItemGroup/props.ts

@@ -0,0 +1,110 @@
+/*
+ * 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 PropTypes from 'prop-types'
+
+import {
+  controllable,
+  Children as ChildrenPropTypes
+} from '@instructure/ui-prop-types'
+import { MenuItem } from '../MenuItem'
+import { MenuItemSeparator } from '../MenuItemSeparator'
+
+import type { PropValidators } from '@instructure/shared-types'
+import type { WithStyleProps } from '@instructure/emotion'
+
+type MenuGroupOwnProps = {
+  label: React.ReactNode
+  allowMultiple?: boolean
+  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
+  controls?: string
+  itemRef?: (...args: any[]) => any
+  disabled?: boolean
+  isTabbable?: boolean
+}
+
+type PropKeys = keyof MenuGroupOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type MenuGroupProps = MenuGroupOwnProps & WithStyleProps
+
+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
+}
+
+const allowedProps: AllowedPropKeys = [
+  'label',
+  'allowMultiple',
+  'children',
+  'selected',
+  'defaultSelected',
+  'onSelect',
+  'onMouseOver',
+  'onKeyDown',
+  'controls',
+  'itemRef',
+  'disabled',
+  'isTabbable'
+]
+
+export type { MenuGroupProps }
+export { propTypes, allowedProps }