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

package/lib/Menu/props.js

@@ -0,0 +1,182 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes.js");
+
+var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
+
+var _Children = require("@instructure/ui-prop-types/lib/Children.js");
+
+/*
+ * 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.
+ */
+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'];
+exports.allowedProps = allowedProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-menu",
-  "version": "8.8.0",
+  "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.0",
-    "@instructure/ui-babel-preset": "8.8.0",
-    "@instructure/ui-color-utils": "8.8.0",
-    "@instructure/ui-test-locator": "8.8.0",
-    "@instructure/ui-test-queries": "8.8.0",
-    "@instructure/ui-test-utils": "8.8.0",
-    "@instructure/ui-themes": "8.8.0"
+    "@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.0",
-    "@instructure/emotion": "8.8.0",
-    "@instructure/ui-a11y-utils": "8.8.0",
-    "@instructure/ui-dom-utils": "8.8.0",
-    "@instructure/ui-icons": "8.8.0",
-    "@instructure/ui-popover": "8.8.0",
-    "@instructure/ui-position": "8.8.0",
-    "@instructure/ui-prop-types": "8.8.0",
-    "@instructure/ui-react-utils": "8.8.0",
-    "@instructure/ui-testable": "8.8.0",
-    "@instructure/ui-utils": "8.8.0",
-    "@instructure/uid": "8.8.0",
+    "@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"
   },
@@ -55,5 +55,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "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 }